/* KeyGrid editorial motion layer (adapted from the KeyGrid Motion handoff drop-in).
   Load AFTER site.css. Progressive enhancement: every rule that hides or moves content is scoped to
   html.kg-motion, a class set by a tiny inline script in <head> ONLY when the visitor has not asked for
   reduced motion and IntersectionObserver exists. No script / reduced motion => plain, fully visible site.
   Only transform and opacity are animated (the progress rail uses transform: scaleY on a 2px element). */
:root{
  --kg-ease:cubic-bezier(.22,1,.36,1);
  --kg-ease-out:cubic-bezier(.16,1,.3,1);
  --kg-warm:var(--burnt,#B84A1B);
}

@media (prefers-reduced-motion:no-preference){

  /* 1. Hero entrance: eyebrow -> heading -> copy -> CTA, 95ms stagger, 720ms, 19px. Pure CSS keyframes so
        there is no flash before JS runs. The hero PHOTOGRAPH is never animated. */
  @keyframes kg-rise{from{opacity:0;transform:translate3d(0,19px,0)}to{opacity:1;transform:none}}
  html.kg-motion .hero h1,
  html.kg-motion .phero .wrap > .label,
  html.kg-motion .phero .copy > .label,
  html.kg-motion .phero .wrap > h1,
  html.kg-motion .phero .copy > h1,
  html.kg-motion .phero .copy > p,
  html.kg-motion .phero .copy > .intro,
  html.kg-motion .phero .memoir,
  html.kg-motion .phero .copy > .actions,
  html.kg-motion .hero-copy .body,
  html.kg-motion .hero-copy .actions,
  html.kg-motion .contact-grid > .intro > *{
    animation:kg-rise 720ms var(--kg-ease) both;
  }
  /* home (no eyebrow): h1 0, copy 95, CTA 190 */
  html.kg-motion .hero-copy .body{animation-delay:95ms}
  html.kg-motion .hero-copy .actions{animation-delay:190ms}
  /* interior: eyebrow 0, h1 95, intro 190, CTA 285 */
  html.kg-motion .phero .wrap > h1,
  html.kg-motion .phero .copy > h1{animation-delay:95ms}
  html.kg-motion .phero .copy > p,
  html.kg-motion .phero .copy > .intro,
  html.kg-motion .phero .memoir{animation-delay:190ms}
  html.kg-motion .phero .copy > .actions{animation-delay:285ms}
  html.kg-motion .contact-grid > .intro > h1{animation-delay:95ms}
  html.kg-motion .contact-grid > .intro > p{animation-delay:190ms}

  /* 2. One-time scroll reveals: TEXT ONLY, light (12px, 400ms). Photos and cards are never hidden.
        .kg-reveal is added by keygrid-motion.js only to text blocks that sit more than ~2.5 screens below
        the top at load; they are revealed when within one viewport of the fold, after first scroll / 1.2s
        (everything within 2 viewports) and unconditionally after 3s. */
  html.kg-motion .kg-reveal{
    opacity:0;transform:translate3d(0,12px,0);
    transition:opacity 400ms var(--kg-ease),transform 400ms var(--kg-ease);
    transition-delay:var(--kg-delay,0ms);
  }
  html.kg-motion .kg-reveal.kg-in-view{opacity:1;transform:none}

  /* Restrained hover zoom on photographs (desktop pointer only, <= 3.6%). */
  @media (hover:hover) and (pointer:fine){
    html.kg-motion .wwb .pillar .plate img,
    html.kg-motion .teaser .plate img{transition:transform 800ms var(--kg-ease-out)}
    html.kg-motion .wwb .pillar:hover .plate img,
    html.kg-motion .wwb .pillar:focus-within .plate img{transform:scale(1.036)}
    html.kg-motion .teaser .plate:hover img{transform:scale(1.02)}
  }

  /* 4. Navigation details. Desktop link underline slides in (absolutely positioned: no layout change).
        The current-page amber underline keeps working as before. */
  @media (min-width:901px){
    html.kg-motion nav.primary a{position:relative}
    html.kg-motion nav.primary a:not([aria-current])::after{
      content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1px;
      background:var(--kg-warm);transform:scaleX(0);transform-origin:left center;
      transition:transform 260ms var(--kg-ease);
    }
    html.kg-motion nav.primary a:not([aria-current]):hover::after,
    html.kg-motion nav.primary a:not([aria-current]):focus-visible::after{transform:scaleX(1)}
  }
  /* Buttons and text links: 2px lift, arrow nudge (the .btn arrow nudge already exists in site.css). */
  @media (hover:hover){
    html.kg-motion .btn{transition:transform 240ms var(--kg-ease),background-color 180ms ease}
    html.kg-motion .btn:hover{transform:translateY(-2px)}
    html.kg-motion .btn:active{transform:translateY(0)}
    html.kg-motion .tlink > span[aria-hidden]{display:inline-block;transition:transform 260ms var(--kg-ease)}
    html.kg-motion .tlink:hover > span[aria-hidden]{transform:translateX(3px)}
  }
  /* Mobile menu: light fade + 8px drop when it opens (the menu itself only; no scroll or focus changes). */
  @keyframes kg-menu-show{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}
  @media (max-width:900px){
    html.kg-motion nav.primary.open{animation:kg-menu-show 280ms var(--kg-ease-out) both}
  }

  /* 3. Our Approach: four steps become a one-column editorial spine with a burnt-orange progress rail.
        Layout is set by CSS from first paint (no shift); the rail itself is added by JS. */
  html.kg-motion .steps.four{
    grid-template-columns:minmax(0,1fr);max-width:900px;gap:0;position:relative;isolation:isolate;
    margin-left:0;
  }
  html.kg-motion .steps.four li{
    grid-template-columns:64px minmax(0,1fr);column-gap:clamp(16px,3vw,28px);row-gap:8px;
    padding-block:clamp(26px,3.4vw,40px);align-content:start;
  }
  html.kg-motion .steps.four li + li{border-top:1px solid var(--hair)}
  html.kg-motion .steps.four .n{
    grid-row:1 / span 2;grid-column:1;width:44px;height:44px;border-radius:50%;
    display:grid;place-items:center;font-size:.85rem;color:var(--ink-2);
    background:var(--canvas);border:1px solid var(--hair);position:relative;z-index:2;
    transition:color 320ms ease,background-color 320ms ease,border-color 320ms ease;
  }
  html.kg-motion .steps.four .n::after{display:none}
  html.kg-motion .steps.four li > h3{grid-column:2;grid-row:1;align-self:end}
  html.kg-motion .steps.four li > p{grid-column:2;grid-row:2;max-width:62ch}
  html.kg-motion .steps.four li.kg-step-done .n{color:var(--kg-warm);border-color:var(--kg-warm)}
  html.kg-motion .steps.four li.kg-step-active .n{color:var(--white,#fff);background:var(--graphite,#1B2530);border-color:var(--graphite,#1B2530)}
  .kg-process-track,.kg-process-fill{
    position:absolute;left:21px;width:2px;border-radius:99px;pointer-events:none;
    top:var(--kg-rail-top,0px);height:var(--kg-rail-height,0px);
  }
  .kg-process-track{background:var(--hair);z-index:0}
  .kg-process-fill{
    background:var(--kg-warm);z-index:1;transform-origin:top center;
    transform:scaleY(var(--kg-process-progress,0));transition:transform 125ms linear;
  }
  @media (max-width:800px){
    html.kg-motion .steps.four li{grid-template-columns:48px minmax(0,1fr);column-gap:14px}
    html.kg-motion .steps.four .n{width:38px;height:38px}
    .kg-process-track,.kg-process-fill{left:18px}
  }
}

/* Reduced motion (and no-JS) always keep the original, fully visible, static presentation. */
@media (prefers-reduced-motion:reduce){
  .kg-process-track,.kg-process-fill{display:none}
}

/* =====================================================================================================
   v2 motion components (Our Approach story, timelines, ownership cards, criteria, settle, contact).
   Base rules below are the static, fully visible layout (no JS / reduced motion). Anything that moves
   is inside prefers-reduced-motion:no-preference and scoped to html.kg-motion. Opacity is never used
   to hide photos or cards; only text blocks fade (with the existing safety nets).
   ===================================================================================================== */

/* ---- Shared vertical timeline (.kg-tl): thin line + dots. Static default = finished (full line). ---- */
.kg-tl{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0;max-width:760px;
  --kg-tl-x:5px;--kg-tl-top:12px;--kg-tl-h:calc(100% - 24px);--kg-tl-p:1}
.kg-tl::before,.kg-tl::after{content:"";position:absolute;left:var(--kg-tl-x);width:2px;margin-left:-1px;
  top:var(--kg-tl-top);height:var(--kg-tl-h);border-radius:2px;pointer-events:none}
.kg-tl::before{background:var(--hair)}
.kg-tl::after{background:var(--burnt);transform-origin:top center;transform:scaleY(var(--kg-tl-p))}
.kg-tl-item{position:relative;display:grid;gap:10px;align-content:start;padding:0 0 clamp(36px,5vw,56px) 40px;min-width:0}
.kg-tl-item:last-child{padding-bottom:0}
.kg-tl-dot{position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--white);
  border:2px solid var(--burnt);z-index:1}
.kg-tl-kicker{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--burnt);line-height:1.2}
.kg-tl-item h3{font-size:var(--t-h3)}
.kg-tl-item p{color:var(--ink-2)}
.kg-tl.beliefs .kg-tl-item h3{font-size:clamp(1.45rem,1.15rem + 1.2vw,2.1rem)}
.kg-tl.fb-steps{max-width:680px}
.kg-tl.fb-steps .kg-tl-item{padding-bottom:clamp(28px,3.5vw,40px)}

/* ---- Our Approach: four-stage acquisition story ---- */
.journey-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.journey-media{display:none}
@media (min-width:901px){
  .journey-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
  .journey-media{display:block;position:sticky;top:104px}
  .journey-media .plate{aspect-ratio:4/5;max-height:calc(100vh - 150px);width:100%;border-radius:var(--r);margin:0}
  .journey-media img{opacity:0}
  .journey-media img.is-active{opacity:1}
  .journey-steps{max-width:none;padding-top:clamp(8px,4vh,48px)}
  .journey-steps .kg-tl-item{min-height:44vh;padding-bottom:40px}
  .journey-steps .kg-tl-item:last-child{min-height:0;padding-bottom:12vh}
  .journey-steps .kg-tl-item h3{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem)}
  .journey-steps .kg-tl-item p{font-size:var(--t-lead);line-height:1.5}
}
/* active-stage emphasis (only once the script has measured; never applied without JS) */
.kg-tl.is-live .kg-tl-item h3,.kg-tl.is-live .kg-tl-item p,.kg-tl.is-live .kg-tl-dot{transition:color 300ms ease,background-color 300ms ease,border-color 300ms ease}
.kg-tl.is-live .kg-tl-item:not(.is-active):not(.is-done) h3{color:var(--slate)}
.kg-tl.is-live .kg-tl-item:not(.is-active):not(.is-done) .kg-tl-dot{border-color:var(--hair)}
.kg-tl.is-live .kg-tl-item.is-done .kg-tl-dot,.kg-tl.is-live .kg-tl-item.is-active .kg-tl-dot{background:var(--burnt)}
.kg-tl.is-live .kg-tl-item.is-active h3{color:var(--graphite)}
.kg-tl.is-live .kg-tl-item.is-active p{color:var(--graphite)}

/* ---- Ownership options: selectable cards ---- */
.opt-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:stretch}
.opt-card{display:grid;align-content:start;gap:12px;background:var(--white);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px);position:relative;transition:border-color 250ms ease,background-color 250ms ease,transform 250ms var(--kg-ease)}
.opt-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;border-radius:var(--r) var(--r) 0 0;background:var(--burnt);
  transform:scaleX(0);transform-origin:left center;transition:transform 280ms var(--kg-ease)}
.opt-card h3{font-size:var(--t-h3);margin:0}
.opt-btn{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;width:100%;cursor:pointer;border-radius:6px}
.opt-btn:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.opt-kicker{grid-column:1;font-family:var(--f-body);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--burnt);line-height:1.3}
.opt-title{grid-column:1;font-family:var(--f-display);font-weight:500;letter-spacing:-.022em;line-height:1.1}
.opt-icon{grid-column:2;grid-row:1 / span 2;align-self:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--hair);position:relative;transition:border-color 250ms ease,transform 250ms var(--kg-ease)}
.opt-icon::before,.opt-icon::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--graphite);transition:transform 250ms var(--kg-ease)}
.opt-icon::after{transform:rotate(90deg)}
.opt-btn[aria-expanded="true"] .opt-icon::after{transform:rotate(0deg)}
.opt-sum{color:var(--ink-2)}
.opt-detail{display:grid;grid-template-rows:1fr}
.opt-detail > div{overflow:hidden;min-height:0}
.opt-detail p{color:var(--graphite);border-top:1px solid var(--hair);padding-top:12px}
.opt-cards.is-live .opt-detail{transition:grid-template-rows 300ms var(--kg-ease)}
.opt-cards.is-live .opt-card.is-collapsed .opt-detail{grid-template-rows:0fr}
.opt-cards.is-live .opt-card.is-collapsed .opt-detail > div{visibility:hidden;transition:visibility 0s 300ms}
.opt-cards.is-live .opt-card.is-selected{border-color:var(--burnt)}
.opt-cards.is-live .opt-card.is-selected::before{transform:scaleX(1)}
.opt-cards.is-live .opt-card.is-selected .opt-icon{border-color:var(--burnt)}
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .opt-card:hover{border-color:color-mix(in srgb,var(--burnt) 45%,var(--hair))}
  .opt-card:hover::before{transform:scaleX(1)}
  /* hover / keyboard preview of a collapsed card */
  .opt-cards.is-live .opt-card.is-collapsed:is(:hover,:focus-within) .opt-detail{grid-template-rows:1fr}
  .opt-cards.is-live .opt-card.is-collapsed:is(:hover,:focus-within) .opt-detail > div{visibility:visible;transition:none}
}
@media (max-width:900px){.opt-cards{grid-template-columns:minmax(0,1fr);gap:12px}}
.opt-note{margin-top:18px;font-size:.85rem;color:var(--ink-2)}

/* ---- Criteria: restrained three columns ---- */
.criteria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,48px)}
.criteria > div{display:grid;gap:10px;align-content:start;padding-top:20px;position:relative;min-width:0}
.criteria > div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--graphite);transform-origin:left center}
.criteria-n{font-family:var(--f-display);font-size:.85rem;letter-spacing:.08em;color:var(--burnt);font-variant-numeric:tabular-nums}
.criteria h3{font-size:var(--t-h3)}
.criteria p{color:var(--ink-2)}
@media (max-width:800px){.criteria{grid-template-columns:minmax(0,1fr);gap:32px}}

/* ---- About montage with captions ---- */
.about-montage .mont{margin:0;display:grid;gap:10px;min-width:0}
.about-montage .mont figcaption{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--slate)}
@media (max-width:700px){.about-montage{row-gap:20px}}

/* ---- For Business Owners: understated hover / tap on owner options ---- */
.owner-opts > div{position:relative;transition:transform 250ms var(--kg-ease)}
.owner-opts > div::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--burnt);transform:scaleX(0);transform-origin:left center;transition:transform 260ms var(--kg-ease)}
.owner-opts > div:is(:hover,:active,.is-tapped)::before{transform:scaleX(1)}
.owner-opts > div:is(:hover,:active,.is-tapped) h3{color:var(--burnt)}
.owner-opts h3{transition:color 250ms ease}

/* ---- Contact: focus states, inline errors, success mark ---- */
.field label,fieldset legend{transition:color 220ms ease}
.field:focus-within > label{color:var(--burnt)}
input[type=text],input[type=email],textarea{transition:border-color 220ms ease,box-shadow 240ms ease,background-color 220ms ease}
input:hover:not(:focus),textarea:hover:not(:focus){border-color:#CFCCC5}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#B4483A}
.sent-mark{color:var(--burnt);display:block}

@media (prefers-reduced-motion:no-preference){
  /* headline / text entrance tuned to the motion language: 16px rise, 600ms */
  html.kg-motion .kg-reveal{transform:translate3d(0,16px,0);transition-duration:600ms,600ms}
  html.kg-motion .kg-reveal.kg-in-view{transform:none}

  /* timeline fill follows scroll (JS sets --kg-tl-p); starts empty only when the motion layer is on */
  html.kg-motion .kg-tl{--kg-tl-p:0}
  html.kg-motion .kg-tl::after{transition:transform 120ms linear}

  /* sticky photo crossfade: inactive photos are only the hidden layers of one always-visible panel */
  html.kg-motion .journey-media img{transition:opacity 700ms var(--kg-ease),transform 850ms var(--kg-ease-out);transform:scale(1.04)}
  html.kg-motion .journey-media img.is-active{transform:none}

  /* photo settle (home pillars, about montage): photos stay fully opaque; only scale / slight offset */
  html.kg-motion .kg-settle-item img,html.kg-motion .wwb .pillar .plate.kg-settle-item img{transition:transform 800ms var(--kg-ease-out);transition-delay:var(--kg-delay,0ms)}
  html.kg-motion .kg-settle-item:not(.kg-settled) img{transform:scale(1.04)}
  html.kg-motion .about-montage .kg-settle-item{transition:transform 750ms var(--kg-ease-out);transition-delay:var(--kg-delay,0ms)}
  html.kg-motion .about-montage .kg-settle-item:not(.kg-settled){transform:translate3d(0,14px,0)}

  /* criteria: hairline draws in sequence alongside the (safety-netted) text reveal */
  html.kg-motion .criteria > div.kg-reveal::before{transform:scaleX(0);transition:transform 700ms var(--kg-ease);transition-delay:var(--kg-delay,0ms)}
  html.kg-motion .criteria > div.kg-reveal.kg-in-view::before{transform:none}

  /* inline errors and success panel */
  @keyframes kg-soft-in{from{opacity:0;transform:translate3d(0,-4px,0)}to{opacity:1;transform:none}}
  html.kg-motion .err:not([hidden]){animation:kg-soft-in 240ms var(--kg-ease) both}
  @keyframes kg-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
  html.kg-motion .sent:not([hidden]){animation:kg-rise 600ms var(--kg-ease) both}
  html.kg-motion .sent:not([hidden]) .sent-mark circle{--len:117;stroke-dasharray:117;animation:kg-draw 700ms var(--kg-ease) both}
  html.kg-motion .sent:not([hidden]) .sent-mark path{--len:26;stroke-dasharray:26;animation:kg-draw 450ms 450ms var(--kg-ease) both}

  @media (hover:hover) and (pointer:fine){
    .opt-card:hover{transform:translateY(-2px)}
  }
}
@media (prefers-reduced-motion:reduce){
  .kg-tl::after{transform:none}
  .opt-card,.opt-card::before,.opt-detail,.opt-icon::after,.owner-opts > div::before,.kg-tl *{transition:none!important}
}
.sent{scroll-margin-top:96px}
@media (min-width:901px){.kg-tl.beliefs .kg-tl-item{padding-bottom:72px}.kg-tl.beliefs .kg-tl-item:last-child{padding-bottom:0}}