/*
Theme Name: UGLOW FactoryLab
Theme URI: https://uglow.com/
Author: UGLOW FactoryLab
Author URI: https://uglow.com/
Description: A lightweight, conversion-focused custom theme for UGLOW FactoryLab - apparel product development, R&D and OEM manufacturing. Ships a nine-section landing page, case-study and about templates, Customizer-managed content and Contact Form 7 support.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uglow-factorylab
Tags: business, portfolio, one-column, custom-colors, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   UGLOW FactoryLab: Phase 2 design system
   "Engineering Daylight". Ports directly to the WP theme in Phase 3.
   ========================================================================== */

:root{
  /* ---- colour ----------------------------------------------------------
     Taken from the June 2026 INT catalogue, which is strictly monochrome:
     white ground, black technical flats, hairline rules, and solid black
     dividers for emphasis. There is no accent hue anywhere in it, so there
     is none here. Colour on this site comes only from real photography.

     --anno is kept as a single token rather than being deleted, so an accent
     can be reintroduced in one line if that is ever wanted.             */
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --sunk:#F4F4F2;
  --ink:#0E0E0F;
  --ink-soft:#3A3A3E;
  --graphite:#6A6A6D;
  --hair:#E6E6E3;
  --hair-strong:#C8C8C4;
  --blue:#0E0E0F;
  --blue-soft:#F4F4F2;
  --anno:#0E0E0F;
  --anno-ink:#FFFFFF;

  /* ---- second colour, from the UFL brochure --------------------------
     Used sparingly: a section rule, focus states, the stepper progress and
     a few mono labels. Black carries everything structural.

     --brand fails contrast on white (2.89:1) but is strong on black
     (6.67:1), so it is for dark grounds and non-text decoration only.
     --brand-ink is the variant for text and focus rings on light.      */
  --brand:#00A3DB;
  --brand-ink:#006B92;

  /* Validation. 5.62:1 on white and 5.11:1 on the sunk panel where the
     contact form sits, so the message is readable, not just red.        */
  --err:#C62828;
  --err-soft:rgba(198,40,40,.08);

  /* ---- type ---- */
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;

  /* ---- scale ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --maxw:1360px;
  --gut:32px;
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (max-width:768px){ :root{ --gut:20px; } }

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:#fff;padding:12px 20px;
}
.skip-link:focus{left:0}

/* ---- typography ---- */
h1,h2,h3,h4{margin:0;letter-spacing:-.028em;line-height:1.05;text-wrap:balance;font-weight:700}
.h-display{font-size:clamp(2.5rem,5.4vw,4.9rem);letter-spacing:-.042em;line-height:1;font-weight:800}
.h-1{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.035em}
.h-2{font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.028em}
.h-3{font-size:1.1rem;letter-spacing:-.015em;line-height:1.3}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--graphite);font-weight:500;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--brand);flex:none;
}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.55;color:var(--ink-soft);max-width:62ch}
.muted{color:var(--graphite)}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}

section{position:relative}
.band{padding:clamp(72px,10vw,140px) 0;border-top:1px solid var(--hair)}
.band--sunk{background:var(--sunk)}
.band--ink{background:var(--ink);color:#F2F1EE;border-top:none}
.band--ink .muted{color:#9C9C9F}
.band--ink .eyebrow{color:#9C9C9F}

/* section header */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-bottom:var(--s8)}
.sec-head .eyebrow{margin-bottom:var(--s4)}
.sec-head p{margin:0}
@media (min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s8);align-items:end}
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:var(--radius);
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;
  transition:background .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--anno);color:var(--anno-ink)}
.btn--primary:hover{background:#2E2E31}
.btn--ghost{border-color:var(--hair-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--onink{border-color:#4A4A4E;color:#F2F1EE}
.btn--onink:hover{background:#F2F1EE;color:var(--ink);border-color:#F2F1EE}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(247,247,245,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--hair);
}
.hdr{display:flex;align-items:center;gap:var(--s6);height:74px}
.brand{flex:none;display:block}
.brand img{height:46px;width:auto}
@media (max-width:520px){.brand img{height:38px}}
.nav{display:none;margin-left:auto;align-items:center;gap:var(--s6)}
.nav a{
  font-size:14.5px;font-weight:500;color:var(--ink-soft);
  padding:6px 0;position:relative;transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--anno);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
/* WordPress renders menus as ul>li; the static prototype uses bare anchors.
   Both shapes are supported so the markup source does not matter. */
.nav-links{display:flex;align-items:center;gap:var(--s6);list-style:none;margin:0;padding:0}
.nav-links li{margin:0}
.mobile-nav-links{list-style:none;margin:0;padding:0}
.mobile-nav-links li{margin:0}

.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.hdr-cta .btn{padding:11px 20px;font-size:14px;opacity:0;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.site-header.is-stuck .hdr-cta .btn{opacity:1;transform:none;pointer-events:auto}
@media (min-width:1000px){
  .nav{display:flex}
  .hdr-cta{margin-left:0}
}
.burger{display:grid;gap:5px;padding:15px;margin-right:-15px;place-content:center}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:1000px){.burger{display:none}}

.mobile-nav{
  position:fixed;inset:74px 0 auto 0;z-index:99;background:var(--paper);
  border-bottom:1px solid var(--hair);padding:var(--s5) var(--gut) var(--s7);
  display:none;
}
.mobile-nav.is-open{display:block}
.mobile-nav a{display:block;padding:14px 0;border-bottom:1px solid var(--hair);font-size:1.15rem;font-weight:600}
.mobile-nav .btn{margin-top:var(--s5);width:100%;justify-content:center}
@media (min-width:1000px){.mobile-nav{display:none!important}}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding:calc(74px + clamp(48px,8vw,96px)) 0 clamp(48px,6vw,80px)}
.hero-grid{display:grid;gap:clamp(40px,5vw,72px);align-items:center}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
}
.hero h1{margin:var(--s5) 0 var(--s5)}
.hero .lede{margin:0 0 var(--s7)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}

.hero-fig{position:relative}
/* The frame crops; the image inside it is taller than the frame by 56px top
   and bottom. Parallax shifts the image at most 40px, so an edge can never
   come into view. Without that margin the image lifts off its own bottom
   edge as you scroll and a strip of the page shows through. */
.hero-media{
  position:relative;overflow:hidden;aspect-ratio:4/5;
  border-radius:var(--radius);background:var(--sunk);
}
.hero-media img{
  position:absolute;left:0;top:-56px;
  width:100%;height:calc(100% + 112px);
  object-fit:cover;border-radius:0;display:block;
}
.figtag{
  display:flex;gap:14px;align-items:baseline;
  padding-top:14px;margin-top:14px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--graphite);line-height:1.5;
}
.figtag b{color:var(--brand-ink);font-weight:600}

/* stat strip */
.statstrip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--hair);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  margin-top:clamp(48px,6vw,80px);
}
@media (min-width:760px){.statstrip{grid-template-columns:repeat(4,1fr)}}
.statstrip .cell{background:var(--paper);padding:var(--s5) var(--s5);display:grid;align-content:start}
.statstrip .n{
  font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums;display:block;
}
.statstrip .l{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--graphite);margin-top:10px;display:block;line-height:1.5;
}

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.trust{padding:var(--s8) 0;border-top:1px solid var(--hair);background:var(--card)}
.trust .lbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite);text-align:center;display:block;margin-bottom:var(--s6);
}
.logo-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:var(--s6) var(--s5);align-items:center;
}
.logo-row img{
  width:auto;max-height:34px;max-width:100%;margin:0 auto;
  opacity:.42;filter:grayscale(1);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.logo-row a:hover img,.logo-row li:hover img{opacity:1;transform:scale(1.04)}
.logo-row li{list-style:none;display:flex;justify-content:center}
ul.logo-row{margin:0;padding:0}
.trust .note{
  text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--graphite);margin:var(--s6) 0 0;text-transform:uppercase;
}

/* ==========================================================================
   PROBLEM
   ========================================================================== */
.prob-grid{display:grid;gap:var(--s7)}
@media (min-width:960px){
  .prob-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s9)}
  .prob-aside{position:sticky;top:110px;align-self:start}
}
.prob-list{display:grid;gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
.prob-item{background:var(--paper)}
.prob-item summary{
  display:grid;grid-template-columns:34px 1fr 24px;gap:var(--s4);align-items:start;
  padding:var(--s5) 0;list-style:none;cursor:pointer;
}
.prob-item summary::-webkit-details-marker{display:none}
.prob-item .qi{
  font-family:var(--mono);font-size:11px;color:var(--anno);font-weight:600;padding-top:5px;
}
.prob-item .q{font-size:clamp(1.05rem,1.9vw,1.32rem);font-weight:600;letter-spacing:-.02em;line-height:1.35}
.prob-item .q i{font-style:normal;color:var(--graphite)}
.prob-item .plus{
  position:relative;width:16px;height:16px;margin-top:8px;justify-self:end;flex:none;
}
.prob-item .plus::before,.prob-item .plus::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;background:var(--ink);
  transition:transform .3s var(--ease);
}
.prob-item .plus::after{transform:rotate(90deg)}
.prob-item[open] .plus::after{transform:rotate(0)}
.prob-item .a{
  padding:0 58px var(--s6) 50px;margin:0;color:var(--ink-soft);font-size:16px;max-width:60ch;
}
.prob-item .a b{color:var(--ink)}

/* ==========================================================================
   TABS (capabilities)
   ========================================================================== */
.tablist{
  display:flex;gap:0;border-bottom:1px solid var(--hair);
  margin-bottom:var(--s8);overflow-x:auto;scrollbar-width:none;
}
.tablist::-webkit-scrollbar{display:none}
.tab{
  padding:var(--s4) var(--s5) var(--s4) 0;margin-right:var(--s6);
  font-size:15px;font-weight:600;color:var(--graphite);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
  display:flex;align-items:baseline;gap:10px;
}
.tab .tn{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--anno)}
.tab[aria-selected="true"] .tn{color:var(--anno)}
.tab:hover{color:var(--ink)}

.tabpanel[hidden]{display:none}
.tabpanel{
  display:grid;gap:var(--s7);
  animation:fadeUp .5s var(--ease) both;
}
@media (min-width:900px){
  .tabpanel{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s9);align-items:center}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tabpanel{animation:none}}
.tabpanel h3{margin-bottom:var(--s4)}
.tabpanel p{margin:0 0 var(--s6);color:var(--ink-soft)}
.tabpanel img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius);background:var(--sunk)}
.speclist{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.speclist li{
  display:grid;grid-template-columns:1fr auto;gap:var(--s4);
  padding:13px 0;border-bottom:1px solid var(--hair);font-size:14.5px;align-items:baseline;
}
.speclist .k{font-weight:600}
.speclist .v{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--graphite);text-transform:uppercase;text-align:right}

/* ==========================================================================
   PROCESS
   ========================================================================== */
/* ==========================================================================
   CASE STUDIES
   ========================================================================== */
.case-switch{display:flex;gap:var(--s3);margin-bottom:var(--s7);flex-wrap:wrap}
.case-btn{
  padding:11px 20px;border:1px solid #4A4A4E;border-radius:var(--radius);
  font-size:14px;font-weight:600;color:#C9C9CC;transition:all .22s var(--ease);
}
.case-btn[aria-selected="true"]{background:#F2F1EE;color:var(--ink);border-color:#F2F1EE}
.case-btn:hover{border-color:#F2F1EE;color:#F2F1EE}
.case-btn[aria-selected="true"]:hover{color:var(--ink)}

.case[hidden]{display:none}
.case{display:grid;gap:var(--s7);animation:fadeUp .5s var(--ease) both}
@media (min-width:960px){.case{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s9);align-items:center}}
@media (prefers-reduced-motion:reduce){.case{animation:none}}
.case img{width:100%;object-fit:cover;border-radius:var(--radius);aspect-ratio:4/3}
.case h3{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.035em;margin-bottom:var(--s5)}
.case .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--anno);margin-bottom:var(--s4);display:block}
.case dl{margin:var(--s6) 0 0;display:grid;gap:0;border-top:1px solid #333338}
.case dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:#9C9C9F;padding-top:var(--s4);
}
.case dd{margin:6px 0 var(--s4);color:#DDDCD9;font-size:15.5px;line-height:1.55;border-bottom:1px solid #333338;padding-bottom:var(--s4)}
.case dd:last-child{border-bottom:none}
.case .result{color:#F2F1EE;font-weight:600}

/* ==========================================================================
   AUDIENCES
   ========================================================================== */
.aud{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media (min-width:640px){.aud{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.aud{grid-template-columns:repeat(4,1fr)}}
.aud-card{background:var(--paper);display:grid;align-content:start}
.aud-card .ph{overflow:hidden;aspect-ratio:4/3;background:var(--sunk)}
.aud-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.aud-card:hover img{transform:scale(1.045)}
.aud-card .bd{padding:var(--s5) var(--s5) var(--s6)}
.aud-card h3{margin-bottom:var(--s3)}
.aud-card p{margin:0 0 var(--s4);font-size:14.5px;color:var(--ink-soft)}
.aud-card .meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--graphite);border-top:1px solid var(--hair);padding-top:var(--s3);
}

/* ==========================================================================
   PROOF / NUMBERS
   ========================================================================== */
.proof-grid{display:grid;gap:var(--s7)}
@media (min-width:900px){.proof-grid{grid-template-columns:repeat(2,1fr);gap:var(--s9)}}
.bigstats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.bigstats .cell{background:var(--paper);padding:var(--s6) var(--s5)}
.bigstats .n{font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;display:block}
.bigstats .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--graphite);margin-top:var(--s3);display:block;line-height:1.5}
.whylist{margin:0;padding:0;list-style:none;display:grid;gap:var(--s5)}
.whylist li{display:grid;grid-template-columns:26px 1fr;gap:var(--s4)}
.whylist .ix{font-family:var(--mono);font-size:11px;color:var(--anno);font-weight:600;padding-top:4px}
.whylist h3{margin-bottom:6px}
.whylist p{margin:0;font-size:15px;color:var(--ink-soft)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--hair);max-width:900px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  display:grid;grid-template-columns:1fr 20px;gap:var(--s4);align-items:start;
  padding:var(--s5) 0;cursor:pointer;list-style:none;
  font-size:clamp(1rem,1.6vw,1.15rem);font-weight:600;letter-spacing:-.018em;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{position:relative;width:14px;height:14px;margin-top:6px;justify-self:end}
.faq .plus::before,.faq .plus::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;background:var(--ink);
  transition:transform .3s var(--ease);
}
.faq .plus::after{transform:rotate(90deg)}
.faq details[open] .plus::after{transform:rotate(0)}
.faq .ans{padding:0 44px var(--s6) 0;margin:0;color:var(--ink-soft);font-size:16px;max-width:68ch}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{display:grid;gap:var(--s8)}
@media (min-width:980px){.contact-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s10)}}
.form{display:grid;gap:var(--s5)}
.frow{display:grid;gap:var(--s5)}
@media (min-width:620px){.frow--2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px}
.field label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--graphite);
}
.field label .opt{text-transform:none;letter-spacing:.02em;color:var(--graphite)}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--ink);
  background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--radius);
  padding:14px 15px;width:100%;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-ink);box-shadow:0 0 0 3px rgba(0,107,146,.12);
}
.field .err{font-size:13px;line-height:1.45;color:var(--err);display:none;margin-top:6px}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{
  border-color:var(--err);background:var(--err-soft);
}
.field.is-invalid input:focus,
.field.is-invalid select:focus,
.field.is-invalid textarea:focus{
  border-color:var(--err);box-shadow:0 0 0 3px rgba(198,40,40,.14);
}
.field.is-invalid .err{display:block}
/* The marker keeps the message legible as an error even without colour. */
.field.is-invalid .err::before{content:"! ";font-weight:700}
.form-more{display:grid;gap:var(--s5)}
.form-more[hidden]{display:none}
.form-foot{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between}
.privacy{font-size:13px;color:var(--graphite);max-width:44ch;margin:0}
.formnote{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--graphite);
}
.hp{position:absolute;left:-9999px}
.form-success{
  border:1px solid var(--hair-strong);background:var(--card);padding:var(--s6);border-radius:var(--radius);
}
.form-success[hidden]{display:none}
.form-success h3{margin-bottom:var(--s3)}
.form-success p{margin:0;color:var(--ink-soft);font-size:15.5px}

.contact-aside dl{margin:var(--s6) 0 0;border-top:1px solid var(--hair)}
.contact-aside dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--graphite);padding-top:var(--s4)}
.contact-aside dd{margin:6px 0 var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--hair);font-size:15.5px}
.contact-aside dd a:hover{color:var(--anno)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--ink);color:#B9B9BC;padding:var(--s9) 0 var(--s6);font-size:14.5px}
.foot-grid{display:grid;gap:var(--s7);padding-bottom:var(--s8);border-bottom:1px solid #2A2A2E}
@media (min-width:820px){.foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.site-footer img{height:40px;width:auto;filter:invert(1);opacity:.92}
.site-footer h3{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#8A8A8F;font-weight:500;margin-bottom:var(--s4);
}
.site-footer ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.site-footer a:hover{color:#fff}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  padding-top:var(--s5);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#8A8A8F;
}

/* ==========================================================================
   FLOATING CTA
   ========================================================================== */
.float-cta{
  position:fixed;right:var(--gut);bottom:var(--gut);z-index:90;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  box-shadow:0 10px 30px rgba(20,20,22,.18);
}
.float-cta.is-on{opacity:1;transform:none;pointer-events:auto}
@media (min-width:1000px){.float-cta{display:none}}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   FORM PAGES: shell for the review questionnaire and the quote builder.
   The controls themselves are styled by the forms plugin, which inherits
   these tokens.
   ========================================================================== */
.form-shell{
  max-width:860px;
  margin-top:clamp(40px,6vw,64px);
}
.page-lead .form-shell .ufl-step:first-of-type{border-top:none;padding-top:0}
.page-lead .entry-content + .form-shell{margin-top:clamp(32px,4vw,48px)}

/* Visually hidden but available to screen readers. Defined here so the plugin
   does not depend on the active theme providing it. */
.screen-reader-text{
	border:0;
	clip-path:inset(50%);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px;
	white-space:nowrap;
}
.screen-reader-text:focus{
	clip-path:none;
	height:auto;
	width:auto;
	margin:0;
	padding:14px 20px;
	position:static;
	white-space:normal;
}

/* ==========================================================================
   MOTION LAYER
   Everything here is transform/opacity only, so it stays on the compositor.
   The whole layer is disabled under prefers-reduced-motion at the end.
   ========================================================================== */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --dur:.8s;
}

/* ---------- scroll progress ------------------------------------------- */
.scroll-progress{
  position:fixed;inset:0 auto auto 0;z-index:200;
  height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--anno);pointer-events:none;
  will-change:transform;
}

/* ---------- header: hide going down, show coming up -------------------- */
.site-header{transform:translateY(0);transition:transform .45s var(--ease-soft),
  background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s}
.site-header.is-hidden{transform:translateY(-100%)}

/* ---------- hero load orchestration ------------------------------------ */
.hero-copy .eyebrow,
.hero-copy .lede,
.hero-copy .hero-actions{opacity:0;transform:translateY(18px)}
.is-ready .hero-copy .eyebrow{animation:riseIn .9s var(--ease-out) .05s both}
.is-ready .hero-copy .lede{animation:riseIn .9s var(--ease-out) .5s both}
.is-ready .hero-copy .hero-actions{animation:riseIn .9s var(--ease-out) .62s both}

@keyframes riseIn{to{opacity:1;transform:none}}

/* headline: each word rises out of its own mask */
.h-display .w{display:inline-block;overflow:hidden;vertical-align:top}
.h-display .wi{display:inline-block;transform:translateY(105%)}
.is-ready .h-display .wi{
  animation:wordRise 1s var(--ease-out) both;
  animation-delay:calc(.14s + var(--i,0) * .045s);
}
@keyframes wordRise{to{transform:none}}

/* hero image: wipe open, then settle */
.hero-media img{clip-path:inset(0 0 100% 0);transform:scale(1.08)}
.is-ready .hero-media img{
  animation:wipeIn 1.3s var(--ease-out) .25s both;
  will-change:clip-path,transform;
}
@keyframes wipeIn{to{clip-path:inset(0 0 0 0);transform:scale(1)}}

/* Once the entrance has played, drop the animation so the parallax transform
   can take over. A running animation outranks an inline style. */
.hero-media img.is-settled{animation:none;clip-path:none;transform:none}

.hero-fig .figtag{opacity:0}
.is-ready .hero-fig .figtag{animation:riseIn .8s var(--ease-out) 1.1s both}

/* stat strip, staggered */
.statstrip .cell{opacity:0;transform:translateY(16px)}
.is-ready .statstrip .cell{
  animation:riseIn .8s var(--ease-out) both;
  animation-delay:calc(.75s + var(--i,0) * .08s);
}

/* ---------- scroll reveals, with direction + stagger ------------------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms);
}
.rv[data-rv="left"]{transform:translateX(-32px)}
.rv[data-rv="right"]{transform:translateX(32px)}
.rv[data-rv="scale"]{transform:scale(.96)}
.rv.is-in{opacity:1;transform:none}

/* images wipe in rather than just fading */
.rv-img{clip-path:inset(0 0 100% 0);transform:scale(1.06);
  transition:clip-path 1.1s var(--ease-out),transform 1.4s var(--ease-out)}
.rv-img.is-in{clip-path:inset(0 0 0 0);transform:scale(1)}

/* ---------- parallax --------------------------------------------------- */
[data-parallax]{will-change:transform}

/* ---------- sliding tab indicator -------------------------------------- */
.tablist{position:relative}
.tab-indicator{
  position:absolute;bottom:-1px;left:0;height:2px;background:var(--anno);
  transform:translateX(0);transition:transform .45s var(--ease-out),width .45s var(--ease-out);
  pointer-events:none;
}
.tab[aria-selected="true"]{border-bottom-color:transparent}


/* ---------- richer hovers ---------------------------------------------- */
.btn{will-change:transform}
.btn--primary:hover{box-shadow:0 10px 26px -12px rgba(14,14,15,.45)}

.aud-card{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.aud-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(20,20,22,.35);z-index:1}

.logo-row li{transition:transform .35s var(--ease-out)}
.logo-row li:hover{transform:translateY(-3px)}

.speclist li{transition:padding-left .3s var(--ease-out),border-color .3s}
.speclist li:hover{padding-left:10px;border-bottom-color:var(--anno)}

.case img,.tabpanel img{transition:transform 1.2s var(--ease-out)}
.case:hover img,.tabpanel:hover img{transform:scale(1.03)}

.prob-item summary{transition:padding-left .3s var(--ease-out)}
.prob-item:hover summary{padding-left:6px}

.faq summary{transition:padding-left .3s var(--ease-out)}
.faq details:hover summary{padding-left:6px}

/* nav underline wipes rather than scaling from one side */
.nav a::after{transform-origin:right;transition:transform .4s var(--ease-out)}
.nav a:hover::after{transform-origin:left}

/* ---------- accordion height animation --------------------------------- */
.prob-item .a,.faq .ans{will-change:max-height}
.is-animating>.a,.is-animating>.ans{overflow:hidden}

/* ---------- counters avoid layout shift -------------------------------- */
.statstrip .n,.bigstats .n{font-variant-numeric:tabular-nums}

/* ---------- reduced motion: switch all of it off ----------------------- */
@media (prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .site-header.is-hidden{transform:none}
  .hero-copy .eyebrow,.hero-copy .lede,.hero-copy .hero-actions,
  .statstrip .cell,.hero-fig .figtag{opacity:1;transform:none;animation:none}
  .h-display .wi{transform:none;animation:none}
  .hero-media img{clip-path:none;transform:none;animation:none}
  .rv,.rv-img{opacity:1;transform:none;clip-path:none;transition:none}
  .aud-card:hover,.logo-row li:hover{transform:none}
  .case:hover img,.tabpanel:hover img{transform:none}
  .speclist li:hover,.prob-item:hover summary,.faq details:hover summary{padding-left:0}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   THE RANGE
   Spec-sheet framing lifted from the INT catalogue: name left, category and
   colorway right, hairline rule under the header, footer rule beneath the
   drawing. White card, black flat, no colour.
   ========================================================================== */
.range-switch{display:flex;gap:0;margin-bottom:var(--s7);border-bottom:1px solid var(--hair)}
.range-btn{
  padding:var(--s4) 0;margin-right:var(--s6);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite);border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.range-btn[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.range-btn:hover{color:var(--ink)}

.range-grid{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.range-grid[hidden]{display:none}
@media (min-width:600px){.range-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.range-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1300px){.range-grid{grid-template-columns:repeat(4,1fr)}}

.style-card{
  background:var(--card);margin:0;padding:var(--s5) var(--s5) var(--s4);
  display:grid;align-content:start;gap:var(--s4);
  transition:background .4s var(--ease-soft);
}
.style-card:hover{background:var(--sunk)}

.style-head{
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--ink);
}
.style-name{font-size:13.5px;font-weight:650;letter-spacing:-.01em;margin-right:auto}
.style-meta{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--graphite);
}
.style-card img{
  width:100%;height:auto;aspect-ratio:16/7;object-fit:contain;
  transition:transform .6s var(--ease-out);
}
.style-card:hover img{transform:scale(1.04)}
.style-foot{
  display:flex;justify-content:space-between;gap:var(--s3);
  padding-top:10px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--graphite);
}
.range-note{
  margin:var(--s7) 0 0;font-size:15px;color:var(--ink-soft);max-width:68ch;
}
.range-note a{
  font-weight:600;color:var(--ink);border-bottom:1px solid var(--hair-strong);
  padding-bottom:1px;white-space:nowrap;transition:border-color .25s var(--ease);
}
.range-note a:hover{border-bottom-color:var(--ink)}

/* ==========================================================================
   EDGE: the compact proof band that replaced the long "why partners stay".
   ========================================================================== */
.edge-grid{display:grid;gap:var(--s7)}
@media (min-width:900px){
  .edge-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s9);align-items:center}
}
.edge-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#2A2A2E;border:1px solid #2A2A2E}
.edge-stats .cell{background:var(--ink);padding:var(--s6) var(--s5)}
.edge-stats .n{
  font-size:clamp(2rem,4vw,2.9rem);font-weight:800;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums;display:block;color:#F2F1EE;
}
.edge-stats .l{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:#9C9C9F;margin-top:var(--s3);display:block;line-height:1.5;
}

/* ---- range: show a first screenful, reveal the rest on request --------- */
.range-grid.is-clamped .style-card:nth-child(n+9){display:none}
.range-more{
  display:flex;justify-content:center;margin-top:var(--s6);
}
.range-more button{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--hair-strong);border-radius:var(--radius);
  background:var(--card);color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.range-more button:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* ==========================================================================
   PORTFOLIO: real client kit.
   A staggered three-column mosaic rather than a butted grid. The columns
   drift at slightly different rates as the page scrolls, which gives the
   section depth without moving anything far enough to read as a gimmick.
   ========================================================================== */
.folio{
  display:grid;gap:var(--s6);
  grid-template-columns:1fr;
}
@media (min-width:680px){ .folio{grid-template-columns:repeat(2,1fr);gap:var(--s6)} }
@media (min-width:1040px){
  .folio{grid-template-columns:repeat(3,1fr);gap:var(--s7)}
  /* Clearance for the upward drift. This must be padding, not margin: the
     heading's own 64px bottom margin would collapse with a top margin here
     and the extra space would never appear. */
  .folio{padding-top:var(--s5)}
}

.folio-col{display:grid;gap:var(--s6);align-content:start;will-change:transform}
@media (min-width:1040px){
  .folio-col{gap:var(--s7)}
  /* The offset is what stops three columns reading as a table. Offsets are
     never negative: a negative one plus the upward drift lifted the third
     column into the section heading and the lede ran underneath it. */
  .folio-col:nth-child(2){margin-top:var(--s8)}
  .folio-col:nth-child(3){margin-top:var(--s5)}
}
@media (max-width:1039px){
  /* Two columns: only the second is offset, and less. */
  .folio-col:nth-child(2){margin-top:var(--s6)}
}

.folio-item{margin:0;position:relative;display:grid;gap:var(--s4)}

.folio-media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--sunk);border:1px solid var(--hair);
}
.folio-media img{
  display:block;width:100%;height:auto;
  transition:transform .9s var(--ease-out),filter .6s var(--ease-out);
}
/* Flat-lays are drawings on white, so they are contained, not cropped. */
.folio-item.is-flat .folio-media{padding:var(--s5)}
.folio-item.is-flat .folio-media img{mix-blend-mode:multiply}

/* A thin sheen that travels across the tile once it enters. */
.folio-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);
}
.folio-item.is-in .folio-media::after{
  transition:transform 1.25s var(--ease-out);transform:translateX(120%);
}

.folio-item:hover .folio-media img,
.folio-item:focus-within .folio-media img{transform:scale(1.045)}

.folio-cap{display:grid;grid-template-columns:auto 1fr;gap:0 var(--s4);align-items:baseline}
.folio-ix{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--brand-ink);font-variant-numeric:tabular-nums;
}
.folio-text{display:grid;gap:3px}
.folio-client{
  font-size:14.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3;
  position:relative;display:inline-block;
}
/* The rule draws from the left on hover, the same gesture as the nav links. */
.folio-client::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--brand);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--ease-out);
}
.folio-item:hover .folio-client::after,
.folio-item:focus-within .folio-client::after{transform:scaleX(1)}
.folio-what{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--graphite);line-height:1.55;
}

@media (prefers-reduced-motion:reduce){
  .folio-col{transform:none!important}
  .folio-media img{transition:none}
  .folio-media::after{display:none}
}

/* ==========================================================================
   DARK HEADER
   The bar sits on black above a white page. Scoped to .hdr-dark so a light
   header can be restored from the Customizer without touching code.
   ========================================================================== */
.hdr-dark .site-header{
  background:var(--ink);
  border-bottom-color:transparent;
}
.hdr-dark .site-header.is-stuck{
  background:rgba(14,14,15,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:#2A2A2E;
}
.hdr-dark .nav a{color:#C9C9CC}
.hdr-dark .nav a:hover{color:#fff}
.hdr-dark .nav a::after{background:#fff}

/* On black the primary button inverts, or it disappears into the bar. */
.hdr-dark .hdr-cta .btn--primary{background:#fff;color:var(--ink)}
.hdr-dark .hdr-cta .btn--primary:hover{background:#DCDCD8;box-shadow:none}

.hdr-dark .burger span{background:#fff}
.hdr-dark .skip-link{background:#fff;color:var(--ink)}

/* The mobile panel hangs off the dark bar, so it matches. */
.hdr-dark .mobile-nav{
  background:var(--ink);
  border-bottom-color:#2A2A2E;
}
.hdr-dark .mobile-nav a{color:#F2F1EE;border-bottom-color:#2A2A2E}
.hdr-dark .mobile-nav .btn--primary{background:#fff;color:var(--ink)}

/* The hero opens directly under the bar; give it room so the black band reads
   as a deliberate edge rather than a shadow on the photograph. */
.hdr-dark .hero{padding-top:calc(74px + clamp(56px,8vw,104px))}

/* ==========================================================================
   STEPPER: from idea to product.
   One stage at a time on black, advancing on its own, so the sequence reads
   as a sequence rather than a wall of equal tiles.
   ========================================================================== */
.stepper{display:grid;gap:var(--s7)}
@media (min-width:960px){
  .stepper{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s9);align-items:start}
}

/* ---- the stage list --------------------------------------------------- */
.stepper-nav{display:grid;gap:0;border-top:1px solid #2A2A2E}
.stage-btn{
  position:relative;display:grid;grid-template-columns:44px 1fr;align-items:baseline;
  gap:var(--s3);width:100%;text-align:left;
  padding:var(--s5) 0;border-bottom:1px solid #2A2A2E;
  color:#8A8A8F;transition:color .3s var(--ease);
}
.stage-btn:hover{color:#F2F1EE}
.stage-btn[aria-selected="true"]{color:#F2F1EE}
.stage-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:#6A6A6D;transition:color .3s var(--ease);
}
.stage-btn[aria-selected="true"] .stage-n{color:#F2F1EE}
.stage-t{font-size:clamp(1rem,1.7vw,1.2rem);font-weight:650;letter-spacing:-.018em;line-height:1.3}

/* progress for the stage currently showing */
.stage-bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden}
.stage-bar i{
  display:block;height:100%;width:100%;background:#F2F1EE;
  transform:scaleX(0);transform-origin:0 50%;
}
.stage-btn[aria-selected="true"] .stage-bar i{transform:scaleX(1);transition:transform 5.5s linear}
.stepper.is-paused .stage-btn[aria-selected="true"] .stage-bar i{transition:none}
.stepper.is-manual .stage-bar i{transition:none!important;transform:scaleX(0)}
.stepper.is-manual .stage-btn[aria-selected="true"] .stage-bar i{transform:scaleX(1)}

/* ---- the stage panel -------------------------------------------------- */
.stepper-stage{position:relative}
.stage-panel[hidden]{display:none}
.stage-panel{display:grid;gap:var(--s5);animation:stageIn .6s var(--ease-out) both}
@keyframes stageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.stage-ph{overflow:hidden;background:#1A1A1C}
.stage-ph img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  animation:stageZoom 7s var(--ease-out) both;
}
@keyframes stageZoom{from{transform:scale(1.06)}to{transform:scale(1)}}

.stage-step{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8A8A8F;margin:0 0 var(--s3);
}
.stage-copy h3{
  font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.03em;line-height:1.1;
  margin:0 0 var(--s4);color:#F2F1EE;
}
.stage-desc{margin:0;color:#C9C9CC;font-size:16.5px;line-height:1.6;max-width:58ch}
.stage-dur{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:#8A8A8F;margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid #2A2A2E;
}

@media (prefers-reduced-motion:reduce){
  .stage-panel{animation:none}
  .stage-ph img{animation:none}
  .stage-bar i{transition:none!important;transform:scaleX(1)}
}

/* ==========================================================================
   SECOND COLOUR
   The blue from the UFL brochure, kept to a thin accent so black still
   carries the design. Bright on dark grounds, deep on light ones.
   ========================================================================== */

/* The stepper progress reads as a moving accent rather than a white bar. */
.stage-bar i{background:var(--brand)}
.stage-btn[aria-selected="true"] .stage-n{color:var(--brand)}

/* Dark bands: the eyebrow mark can take the bright blue. */
.band--ink .eyebrow::before{background:var(--brand)}

/* Index marks, small and repeated, so they read as a system not decoration. */
.prob-item .qi,
.whylist .ix{color:var(--brand-ink)}
/* .case always sits on a dark band, so it takes the bright blue. */
.case .kicker{color:var(--brand)}

/* Inline links that are not buttons. */
.range-note a:hover{border-bottom-color:var(--brand-ink);color:var(--brand-ink)}
.contact-aside dd a:hover{color:var(--brand-ink)}
.site-footer a:hover{color:var(--brand)}

/* Form errors stay red-free; the blue marks the field you are in, and the
   invalid state is carried by the message and the border weight. */
.ufl-form :focus-visible,
.form :focus-visible{outline-color:var(--brand-ink)}

/* ---- the quote-builder nudge above the short form --------------------- */
.quote-nudge{
  display:grid;gap:var(--s5);align-items:center;
  padding:var(--s6);margin-bottom:var(--s6);
  background:var(--ink);color:#F2F1EE;border-radius:var(--radius);
}
@media (min-width:760px){
  .quote-nudge{grid-template-columns:minmax(0,1fr) auto;gap:var(--s7)}
}
.quote-nudge-title{
  margin:0 0 6px;font-size:1.05rem;font-weight:650;letter-spacing:-.015em;color:#fff;
}
.quote-nudge-text{margin:0;font-size:14.5px;line-height:1.55;color:#C9C9CC;max-width:52ch}
.quote-nudge .btn--primary{background:var(--brand);color:#04242F;white-space:nowrap}
.quote-nudge .btn--primary:hover{background:#2BB8E8;box-shadow:none}
.quote-or{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite);margin:0 0 var(--s5);
}

/* Form-level alert, e.g. an expired nonce or a failed send. */
.form-error{
  border-left:3px solid var(--err);background:var(--err-soft);
  color:var(--err);padding:12px 16px;margin:0 0 var(--s5);
  font-size:14.5px;line-height:1.5;border-radius:4px;
}

/* ---- our own brands, shown after an enquiry is sent -------------------- */
.own-brands{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--hair)}
.own-brands-lede{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);max-width:56ch}
.own-brands-links{margin:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.own-brands-links a{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;
  border:1px solid var(--hair-strong);border-radius:999px;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none;
  transition:border-color .2s,color .2s;
}
.own-brands-links a:hover{border-color:var(--brand-ink);color:var(--brand-ink)}