/* True North Tax & Accounting — shared stylesheet. Every page links this one file;
   assets/motion.css loads after it. */
    /* ══════════════════════════════════════════════════════════
       TRUE NORTH TAX & ACCOUNTING — site stylesheet
       Palette locked to the client's own brand files:
       ink #121212 and gold #C8A253 sampled from the supplied logo,
       dark green #006400 from the stated brand colours.
       Backgrounds: white + cool faint tints only.
       ══════════════════════════════════════════════════════════ */
    :root{
      --ink:#121212; --ink-2:#3A3F3C; --ink-3:#626A67;
      --green:#006400; --green-deep:#013E16; --green-soft:#EDF3EE;
      --gold:#C8A253; --gold-light:#E2C489; --gold-deep:#7A6034;
      --white:#fff; --tint:#F4F7F6; --tint-2:#EAF0EE; --line:#E2E8E6;
      --maxw:1180px; --r:14px; --r-sm:10px;
      --shadow:0 1px 2px rgba(18,18,18,.04),0 14px 34px rgba(18,18,18,.06);
      --ease:cubic-bezier(.22,1,.36,1);
      /* motion-system variables */
      --motion-1:200,162,83;
      --motion-2:226,232,228;
      --motion-accent:#C8A253;
      --motion-accent-2:#E2C489;
      --motion-ink:#121212;
      --motion-dark-rgb:1,25,9;
      --motion-light-rgb:255,255,255;
      --motion-drift-1:0,100,0;
      --motion-drift-2:200,162,83;
      --motion-nav-bg:rgba(255,255,255,.98);
      --motion-dropdown-gap:14px;
    }

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;background:var(--white);color:var(--ink-2);
      font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.72;
      -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

img{max-width:100%;display:block;height:auto}

a{color:var(--green);text-decoration:none}

a:hover{color:var(--green-deep)}

h1,h2,h3,h4{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
      color:var(--ink);font-weight:600;line-height:1.16;margin:0 0 .6em;letter-spacing:-.012em}

h1{font-size:clamp(2.35rem,5.1vw,3.85rem)}

h2{font-size:clamp(1.85rem,3.3vw,2.6rem)}

h3{font-size:1.28rem;line-height:1.28}

h4{font-size:1.06rem}

p{margin:0 0 1.15em}

ul{margin:0 0 1.15em;padding-left:1.15em}

li{margin:0 0 .5em}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px}

.lede{font-size:1.16rem;color:var(--ink-2)}

.muted{color:var(--ink-3)}

.center{text-align:center}

.narrow{max-width:760px;margin-left:auto;margin-right:auto}

.sec{padding:92px 0}

.sec--tint{background:var(--tint)}

.sec--soft{background:var(--green-soft)}

.sec--tight{padding:66px 0}

.rule{width:64px;height:3px;border-radius:3px;margin:0 0 26px;
      background:linear-gradient(90deg,var(--green) 0%,var(--green) 58%,var(--gold) 58%,var(--gold) 100%)}

.center .rule{margin-left:auto;margin-right:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:99}

.skip:focus{left:10px;top:10px;color:#fff}

:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* ── buttons ───────────────────────────────────────────── */
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
      background:var(--green);color:#fff;font-family:Inter,sans-serif;font-weight:600;
      font-size:1rem;letter-spacing:.005em;padding:16px 30px;border:2px solid var(--green);
      border-radius:999px;cursor:pointer;text-align:center}

.btn:hover{color:#fff;background:var(--green-deep);border-color:var(--green-deep)}

.btn-sm{padding:11px 22px;font-size:.93rem}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}

.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}

.btn-gold:hover{background:var(--gold-light);color:var(--ink);border-color:var(--gold-light)}

.btn.hv-btn:hover{box-shadow:0 14px 36px rgba(0,100,0,.28),0 0 40px rgba(0,100,0,.14)}

.btn-gold.hv-btn:hover{box-shadow:0 14px 36px rgba(200,162,83,.32),0 0 40px rgba(200,162,83,.18)}

.txt-link{font-weight:600;color:var(--green)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.center .btn-row{justify-content:center}

/* ── utility strip + social row (ThemePort block) ──────── */
    .util{background:var(--ink)}

.util .wrap{display:flex;justify-content:flex-end}

.social-row{display:flex;align-items:center;gap:14px;padding:0}

.social-row:empty{display:none}

.util:has(.social-row:empty){display:none}

.social-row a{display:inline-flex;align-items:center;justify-content:center;
      width:34px;height:34px;border-radius:50%;color:var(--gold);border:1px solid rgba(200,162,83,.4)}

.social-row a:hover{background:var(--gold);color:var(--ink)}

/* ── nav ───────────────────────────────────────────────── */
    .nav{position:sticky;top:0;z-index:60;background:var(--white);
      border-bottom:1px solid var(--line);padding:16px 0}

.nav.scrolled{padding:8px 0}

.nav-in{display:flex;align-items:center;justify-content:space-between;gap:26px}

.brand{display:inline-flex;align-items:center;flex:0 0 auto}

.brand img{width:214px;height:auto;transition:width .3s var(--ease)}

.nav.scrolled .brand img{width:184px}

.menu{display:flex;align-items:center;gap:30px}

.mi{font-family:Inter,sans-serif;font-size:.97rem;font-weight:500;color:var(--ink);
      display:inline-block;padding:6px 0}

.mi:hover{color:var(--ink)}

.mi-wrap{display:inline-flex;align-items:center;gap:6px}

.sub-toggle{display:none;background:none;border:0;padding:0;cursor:pointer}

.caret{width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
      transform:rotate(45deg) translateY(-2px);display:inline-block;transition:transform .25s var(--ease)}

.drop{position:absolute;top:calc(100% + 14px);left:-18px;min-width:286px;
      background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
      box-shadow:var(--shadow);padding:10px;visibility:hidden;opacity:0;pointer-events:none;
      transform:translateY(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:70}

.has-drop:hover > .drop,.has-drop.hovering > .drop,.has-drop:focus-within > .drop{
      visibility:visible;opacity:1;pointer-events:auto;transform:none}

.drop a{display:block;padding:11px 14px;border-radius:8px;font-size:.95rem;
      font-weight:500;color:var(--ink);line-height:1.4}

.drop a:hover{background:var(--tint);color:var(--green)}

.nav-cta{margin-left:4px}

.burger{display:none;width:44px;height:40px;border:1px solid var(--line);border-radius:9px;
      background:var(--white);cursor:pointer;padding:0}

.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px auto;border-radius:2px}

body[data-page="home"] .mi-home::after,
    body[data-page="services"] .mi-services::after,
    body[data-page="services-category"] .mi-services::after,
    body[data-page="about"] .mi-about::after,
    body[data-page="contact"] .mi-contact::after{transform:scaleX(1)}

body[data-page="services"] .di-all,
    body[data-page="services-category"] .di-cat{background:var(--tint);color:var(--green)}

/* ── hero (live video stage) ───────────────────────────── */
    .hero{position:relative;overflow:hidden;background:#04150B;
      padding:118px 0 104px;text-align:center}

.hero h1{max-width:16ch;margin-left:auto;margin-right:auto;color:#fff}

.hero .sub{font-size:1.2rem;max-width:62ch;margin:0 auto 34px;color:#EBF2EC}

.hero .btn-row{margin-bottom:34px}

.hero-emblem{width:62px;margin:0 auto 26px}

.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
      font-size:.86rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}

.trust span{display:inline-flex;align-items:center;gap:10px}

.trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}

.hero .trust{color:#F1F6F2}

.hero .trust span::before{background:var(--gold)}

.hero h1,.hero .sub{text-shadow:0 2px 20px rgba(2,10,5,.6)}

.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.82);background:rgba(255,255,255,.08)}

.hero .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ── generic layout helpers ────────────────────────────── */
    .split{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}

.split--flip .s-media{order:-1}

.split--main{grid-template-columns:1.25fr .75fr}

.split--media{grid-template-columns:.85fr 1.15fr}

.grid{display:grid;gap:24px}

.grid-2{grid-template-columns:repeat(2,1fr)}

.grid-3{grid-template-columns:repeat(3,1fr)}

.grid-4{grid-template-columns:repeat(4,1fr)}

.figure{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);position:relative}

.figure img{width:100%}

.figure--edge{border:1px solid var(--line)}

.cap{font-size:.86rem;color:var(--ink-3);margin-top:12px}

/* ── cards ─────────────────────────────────────────────── */
    .card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
      padding:32px 28px;height:100%}

.card h3{margin-bottom:.45em}

.card p:last-child{margin-bottom:0}

.card--c{text-align:center}

.card--c .ic{margin-left:auto;margin-right:auto}

.ic{width:46px;height:46px;display:flex;align-items:center;justify-content:center;
      margin-bottom:20px;color:var(--green)}

.ic svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.5;
      stroke-linecap:round;stroke-linejoin:round}

.card--dark{background:var(--ink);border-color:#242424;color:#D8DEDB}

.card--dark h3{color:var(--gold-light)}

.card--dark .ic{color:var(--gold)}

.s-list{list-style:none;padding:0;margin:18px 0 0}

.s-list li{position:relative;padding-left:26px;font-size:.98rem;margin-bottom:.45em}

.s-list li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:11px;
      border-radius:2px;background:var(--green);opacity:.9}

.num{font-family:"Source Serif 4",Georgia,serif;font-size:2.9rem;line-height:1;
      color:var(--tint-2);display:block;margin-bottom:12px}

/* ── dark stage (CTA band) ─────────────────────────────── */
    .stage{position:relative;overflow:hidden;background:linear-gradient(135deg,#121212 0%,#0A2412 58%,#013E16 100%);
      color:#E7EBE8;padding:104px 0;text-align:center}

.stage h2{color:#fff}

.stage p{color:#C6CFC9}

.stage .rule{background:var(--gold)}

.stage-alt{background:var(--ink);color:#DCE2DE;padding:84px 0}

.stage-alt h2{color:#fff}

/* ── panels, quotes, steps ─────────────────────────────── */
    .panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
      padding:38px 34px;box-shadow:var(--shadow)}

.voice{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.35rem,2.5vw,1.85rem);
      line-height:1.42;color:var(--ink);margin:0 0 18px}

.voice-by{font-size:.9rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}

.review-slot{margin-top:44px;border-top:1px solid var(--line);padding-top:34px}

.review-slot h3{font-size:1.05rem;letter-spacing:.07em;text-transform:uppercase;
      font-family:Inter,sans-serif;font-weight:600;color:var(--ink-3)}

.step{display:grid;grid-template-columns:58px 1fr;gap:20px;align-items:start}

.step-n{width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;
      display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.02rem;
      font-family:Inter,sans-serif}

.step h3{margin-bottom:.35em}

/* ── owner block ───────────────────────────────────────── */
    .owner{display:grid;grid-template-columns:270px 1fr;gap:44px;align-items:center}

.avatar{width:270px;height:270px;border-radius:var(--r);background:var(--ink);
      display:flex;align-items:center;justify-content:center;overflow:hidden}

.avatar img{width:120px}

.owner-name{font-family:"Source Serif 4",Georgia,serif;font-size:1.6rem;color:var(--ink);margin:0 0 2px}

.owner-title{font-size:.88rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
      color:var(--gold-deep);margin:0 0 18px}

.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none}

.creds li{margin:0;background:var(--tint);border:1px solid var(--line);border-radius:999px;
      padding:9px 18px;font-size:.87rem;font-weight:600;color:var(--ink);
      display:inline-flex;align-items:center;gap:9px}

.creds li::before{content:"";width:7px;height:7px;border-radius:50%;
      background:var(--green);flex:0 0 auto}

/* ── breadcrumb + page hero ────────────────────────────── */
    .phero{background:var(--tint);border-bottom:1px solid var(--line);position:relative;
      overflow:hidden;padding:74px 0 66px}

.phero h1{max-width:20ch}

.phero .sub{font-size:1.14rem;max-width:62ch;margin-bottom:0}

.crumb{font-size:.86rem;color:var(--ink-3);margin-bottom:20px}

.crumb a{color:var(--ink-3)}

.crumb a:hover{color:var(--green)}

.crumb span{margin:0 8px;opacity:.6}

/* ── service blocks (services page) ────────────────────── */
    .sgroup{border-top:1px solid var(--line);padding-top:46px;margin-top:46px}

.sgroup:first-of-type{border-top:0;padding-top:0;margin-top:0}

.sgroup > p{max-width:70ch}

.sitem{padding:26px 0;border-bottom:1px dashed var(--line)}

.sitem:last-child{border-bottom:0}

.sitem h3{margin-bottom:.35em}

.sitem p{margin-bottom:0}

.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 46px}

/* ── FAQ ───────────────────────────────────────────────── */
    .faq{border-top:1px solid var(--line)}

.faq details{border-bottom:1px solid var(--line);padding:22px 0}

.faq summary{font-family:"Source Serif 4",Georgia,serif;font-size:1.18rem;color:var(--ink);
      cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{content:"+";color:var(--green);font-size:1.4rem;line-height:1}

.faq details[open] summary::after{content:"–"}

.faq details p{margin:14px 0 0;max-width:78ch}

/* ── forms ─────────────────────────────────────────────── */
    .form{display:grid;gap:18px}

.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:7px}

input,select,textarea{width:100%;font-family:Inter,sans-serif;font-size:1rem;color:var(--ink);
      background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
      padding:14px 15px}

textarea{min-height:140px;resize:vertical}

input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none;
      box-shadow:0 0 0 3px rgba(0,100,0,.12)}

fieldset{border:0;padding:0;margin:0}

legend{font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:7px;padding:0}

.radios{display:flex;flex-wrap:wrap;gap:10px 24px}

.radios label{display:inline-flex;align-items:center;gap:8px;font-weight:500;margin:0}

.radios input{width:auto}

.fnote{font-size:.85rem;color:var(--ink-3)}

/* ── contact detail list ───────────────────────────────── */
    .nap{list-style:none;padding:0;margin:0}

.nap li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;
      border-bottom:1px solid var(--line);margin:0}

.nap li:last-child{border-bottom:0}

.nap dt,.nap .k{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
      color:var(--ink-3);padding-top:3px}

.nap .v{color:var(--ink)}

.nap a{color:var(--ink)}

.nap a:hover{color:var(--green)}

/* ── legal pages ───────────────────────────────────────── */
    .legal{max-width:820px}

.legal h2{font-size:1.5rem;margin-top:2em}

.legal h3{font-size:1.1rem;margin-top:1.6em}

.legal p,.legal li{font-size:1rem}

.legal .updated{font-size:.9rem;color:var(--ink-3)}

/* ── footer ────────────────────────────────────────────── */
    .foot{background:var(--ink);color:#B8C0BB;padding:74px 0 0;font-size:.95rem}

.foot a{color:#B8C0BB}

.foot a:hover{color:var(--gold-light)}

.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:44px;padding-bottom:52px}

.foot img.flogo{width:236px;margin-bottom:22px}

.foot h4{color:#fff;font-family:Inter,sans-serif;font-size:.8rem;font-weight:700;
      letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}

.foot ul{list-style:none;padding:0;margin:0}

.foot li{margin-bottom:10px}

.foot .napline{margin:0 0 4px}

.foot .hrs{margin:0 0 10px;line-height:1.6}

.foot .hrs strong{color:#fff;font-weight:600;display:block;font-size:.84rem;
      letter-spacing:.04em}

.foot-bar{border-top:1px solid #262626;padding:24px 0 30px;display:flex;
      flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:.86rem;color:#8D9691}

.foot-bar a{color:#8D9691}

.foot-creds{color:var(--gold);font-size:.84rem;font-weight:600;letter-spacing:.05em;
      margin-top:18px}

/* ── green accent balance + credential block ───────────── */
    .panel{border-left:4px solid var(--green)}

.card.hv-bar::before{background:var(--green)}

.card--dark.hv-bar::before{background:var(--gold)}

.mi.hv-underline::after{background:var(--green)}

.owner-title{color:var(--green)}

.voice-by{color:var(--green)}

.step-n{box-shadow:0 0 0 5px rgba(0,100,0,.10)}

.sitem h3::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;
      background:var(--green);margin-right:11px;vertical-align:.08em}

.sitem p + p{margin-top:.9em}

.form div:has(> button[type="submit"]){display:flex;justify-content:center}

.form .fnote{text-align:center}

.qual{display:grid;grid-template-columns:210px 1fr;gap:40px;align-items:start}

.qual-list{list-style:none;padding:0;margin:0}

.qual-list li{position:relative;padding-left:28px;margin-bottom:.95em;font-size:.99rem}

.qual-list li:last-child{margin-bottom:0}

.qual-list li::before{content:"";position:absolute;left:0;top:.52em;width:12px;height:12px;
      border-radius:3px;background:var(--green)}

.qual-badge{margin:0}

.qual-badge img{width:196px;margin:0 auto}

.qual-badge figcaption{margin-top:14px;text-align:center;font-size:.79rem;
      line-height:1.55;color:var(--ink-3)}

.qual-badge--inline{display:flex;align-items:center;gap:18px;margin:24px 0 0;
      padding-top:22px;border-top:1px solid var(--line)}

.qual-badge--inline img{width:92px;margin:0;flex:0 0 auto}

.qual-badge--inline figcaption{margin:0;text-align:left}

.pro-slot{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}

.pro-slot p{margin:0;font-size:.92rem;color:var(--ink-3)}

@media (max-width:760px){
      .qual{grid-template-columns:1fr;gap:28px}
      .qual-badge img{margin:0}
      .qual-badge figcaption{text-align:left}
    }

/* ── industry band, credential badges, green balance ───── */
    .niche{background:linear-gradient(168deg,#F2F8F4 0%,#E6F0E9 100%);
      border-top:1px solid #D6E3DA;border-bottom:1px solid #D6E3DA}

.niche .card{border-left:4px solid var(--green)}

.niche .figure{box-shadow:0 1px 2px rgba(1,40,14,.06),0 16px 38px rgba(1,40,14,.10)}

.stage-green{background:linear-gradient(135deg,#013E16 0%,#02551F 52%,#0A2412 100%)}

.badge-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
      gap:30px 44px;margin:42px 0 0;padding:0;list-style:none}

.badge-row li{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
      max-width:214px;text-align:center}

.badge-row img{width:126px;height:auto}

.badge-row strong{font-size:.89rem;font-weight:700;line-height:1.45;color:var(--ink)}

.badge-row small{display:block;font-weight:500;font-size:.81rem;line-height:1.5;
      color:var(--ink-3);margin-top:5px}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px;text-align:left}

.pillar{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
      border-radius:var(--r);padding:30px 26px}

.pillar h3{color:var(--gold-light);margin-bottom:.45em}

.pillar p{margin:0;color:#CBD8CF}

.form-actions{display:flex;justify-content:center}

.creds li.cred-green::before{background:var(--gold)}

@media (max-width:860px){ .pillars{grid-template-columns:1fr} }

/* ── responsive ────────────────────────────────────────── */
    @media (max-width:1120px){ .menu{gap:20px} .mi{font-size:.92rem} }

@media (max-width:1000px){
      .grid-4{grid-template-columns:repeat(2,1fr)}
      .grid-3{grid-template-columns:repeat(2,1fr)}
      .foot-top{grid-template-columns:1fr 1fr;gap:38px}
      .owner{grid-template-columns:1fr;gap:28px}
      .avatar{width:200px;height:200px}
      .sgrid{grid-template-columns:1fr;gap:0}
    }

@media (max-width:900px){
      .burger{display:block;position:relative;z-index:70}
      .menu{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:var(--white);
        flex-direction:column;align-items:stretch;gap:0;padding:96px 26px 40px;
        transform:translateX(102%);visibility:hidden;box-shadow:none;
        transition:transform .32s var(--ease),box-shadow .32s var(--ease),visibility 0s linear .32s;
        overflow-y:auto;z-index:65}
      body.nav-open .menu{transform:none;visibility:visible;box-shadow:-18px 0 50px rgba(18,18,18,.14);
        transition:transform .32s var(--ease),box-shadow .32s var(--ease),visibility 0s linear 0s}
      body.nav-open{overflow:hidden}
      .burger span{transition:transform .25s var(--ease),opacity .2s var(--ease)}
      body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
      body.nav-open .burger span:nth-child(2){opacity:0}
      body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
      .mi{padding:15px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
      .mi-wrap{display:flex;justify-content:space-between;align-items:center;
        border-bottom:1px solid var(--line);flex-wrap:wrap}
      .mi-wrap .mi{border-bottom:0;flex:1}
      .sub-toggle{display:block;padding:14px 6px}
      .drop{position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;
        box-shadow:none;border:0;border-radius:0;padding:0 0 12px;min-width:0;width:100%;
        display:none;background:transparent}
      .mi-wrap.open .drop{display:block}
      .mi-wrap.open .caret{transform:rotate(-135deg) translateY(-2px)}
      .drop a{padding:11px 14px;background:var(--tint);margin-bottom:6px}
      .nav-cta{margin:22px 0 0;justify-content:center}
      .split,.split--main,.split--media{grid-template-columns:1fr;gap:34px}
      .split--flip .s-media{order:0}
      .sec{padding:70px 0}
      .hero{padding:78px 0 70px}
      .f2{grid-template-columns:1fr}
    }

@media (max-width:640px){
      body{font-size:16px}
      .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
      .foot-top{grid-template-columns:1fr;gap:34px}
      .nap li{grid-template-columns:1fr;gap:4px}
      .step{grid-template-columns:1fr}
      .wrap{padding:0 20px}
    }

/* ── team, packages, industries ────────────────────────── */
    body[data-page="our-team"] .mi-about::after,
    body[data-page="industries"] .mi-industries::after{transform:scaleX(1)}

body[data-page="our-team"] .di-team,
    body[data-page="about"] .di-about{background:var(--tint);color:var(--green)}

.avatar.avatar--photo{background:var(--tint);height:auto;aspect-ratio:4/5}

.avatar--photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}

.team-strip{margin-top:78px;padding-top:66px;border-top:1px solid var(--line)}

.people{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}

.people--compact{max-width:920px;margin-left:auto;margin-right:auto;align-items:stretch}

.person{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
      display:flex;flex-direction:column}

.person-photo{margin:0;aspect-ratio:4/5;background:var(--tint);overflow:hidden}

.person-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}

.person-body{padding:24px 26px 28px}

.person-name{font-size:1.3rem;margin:0 0 4px}

.person-title{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
      color:var(--green);margin:0 0 14px;line-height:1.5}

.person-body p:last-child{margin-bottom:0}

.people--compact .person-body{padding:18px 18px 22px;text-align:center}

.people--compact .person-title{margin-bottom:0}

.lead-person{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:center}

.lead-person .person-photo{border-radius:var(--r);box-shadow:var(--shadow)}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}

.tier{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
      padding:34px 30px 30px;display:flex;flex-direction:column;height:100%}

.tier h3{font-size:1.6rem;margin-bottom:.2em}

.tier-line{font-family:"Source Serif 4",Georgia,serif;font-size:1.12rem;color:var(--ink);
      line-height:1.4;margin:0 0 12px}

.tier-who{font-size:.95rem;color:var(--ink-3);margin:0 0 16px}

.tier-split{background:var(--tint);border-radius:var(--r-sm);padding:14px 16px;font-size:.93rem;
      line-height:1.55;margin:0 0 18px;color:var(--ink-2)}

.tier-split strong{color:var(--ink)}

.tier-inc{font-size:.9rem;font-weight:600;color:var(--ink);margin:0}

.tier .s-list{margin-top:10px}

.tier-foot{margin-top:auto;padding-top:20px;margin-bottom:0}

.incl{columns:2;column-gap:46px;margin:22px 0 0}

.incl li{break-inside:avoid}

.sacc{background:var(--white);border:1px solid var(--line);border-radius:var(--r);margin:0 0 14px}

.sacc summary{list-style:none;cursor:pointer;padding:24px 28px;display:grid;
      grid-template-columns:1fr auto;gap:4px 20px;align-items:center}

.sacc summary::-webkit-details-marker{display:none}

.sacc summary h3{margin:0;font-size:1.32rem}

.sacc-d{grid-column:1;color:var(--ink-3);font-size:.98rem;line-height:1.55}

.sacc summary::after{content:"+";grid-column:2;grid-row:1 / span 2;color:var(--green);
      font-size:1.6rem;line-height:1}

.sacc[open] summary::after{content:"\2013"}

.sacc-body{padding:0 28px 26px}

.sacc-body .sitem h4{font-size:1.12rem;margin-bottom:.35em}

.sacc-body .sitem h4::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;
      background:var(--green);margin-right:11px;vertical-align:.08em}

.ind-card .ic{margin-bottom:18px}

.ind-split{display:grid;grid-template-columns:1fr 1fr;gap:26px}

[id]{scroll-margin-top:110px}

@media (max-width:1000px){
      .people{grid-template-columns:repeat(2,1fr)}
      .people--compact{grid-template-columns:repeat(3,1fr)}
      .tiers{grid-template-columns:1fr;max-width:640px;margin-left:auto;margin-right:auto}
      .lead-person{grid-template-columns:1fr;gap:30px}
      .lead-person .person-photo{max-width:340px}
    }

@media (max-width:760px){ .incl{columns:1} .ind-split{grid-template-columns:1fr} }

@media (max-width:640px){
      .people,.people--compact{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
      .sacc summary{padding:20px}
      .sacc-body{padding:0 20px 22px}
    }

/* ── team grid: two-up cards + initials tile ─────────── */
    .people--duo{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto;align-items:stretch}

.people--duo .person-photo{aspect-ratio:5/4}

.people--duo .person-photo img{object-position:50% 6%}

.person-photo--mono{display:flex;align-items:center;justify-content:center;
      background:linear-gradient(150deg,#013E16 0%,#02551F 55%,#0A2412 100%)}

.person-photo--mono span{display:flex;align-items:center;justify-content:center;width:46%;aspect-ratio:1/1;
      border:2px solid rgba(226,196,137,.6);border-radius:50%;font-family:"Source Serif 4",Georgia,serif;
      font-weight:600;font-size:clamp(2.6rem,5.4vw,4.2rem);letter-spacing:.04em;line-height:1;color:var(--gold-light)}

@media (max-width:640px){ .people--duo{grid-template-columns:1fr;max-width:400px} }

@media print{ .nav,.util,.foot-bar{display:none} }

/* ══════════════════════════════════════════════════════════
   Core 30 additions — full-architecture navigation (mega menu +
   industries dropdown, mobile accordion), content-page blocks.
   Same tokens as above; no new colours.
   ══════════════════════════════════════════════════════════ */
body{overflow-x:clip}

.nav-in{position:relative}

body[data-page="industry"] .mi-industries::after{transform:scaleX(1)}

.drop .drop-label{display:block;padding:12px 14px 4px;font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.4}

.drop .drop-label:first-child{padding-top:6px}

.drop-ind{min-width:0}

@media (min-width:901px){
  .drop-ind{min-width:300px}
  .nav .mi-wrap.has-mega{position:static}
  /* The mega panel hangs from the nav's bottom edge; its hover bridge fills the strip between the
     link row and the panel, so a diagonal path from the Services label to any column stays inside. */
  .nav .has-mega > .drop.drop-mega{top:calc(100% + 16px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s,top .3s var(--ease)}
  .nav.scrolled .has-mega > .drop.drop-mega{top:calc(100% + 8px)}
  .nav .has-mega > .drop.drop-mega::before{top:-27px;height:27px}
  .nav.scrolled .has-mega > .drop.drop-mega::before{top:-15px;height:15px}
  .drop.drop-mega{left:26px;right:26px;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0 26px;padding:22px 24px 14px}
  .drop-mega .mega-group{display:flex;flex-direction:column;margin-bottom:14px}
  .drop-mega a{padding:6px 10px;font-size:.89rem;line-height:1.38}
  .drop-mega a.mega-head{font-family:"Source Serif 4",Georgia,serif;font-size:1.02rem;font-weight:600;color:var(--ink);
    border-bottom:2px solid var(--gold);border-radius:6px 6px 0 0;margin-bottom:6px;padding-bottom:8px}
  .drop-mega a.mega-head:hover{color:var(--green)}
  .drop-mega a.mega-all{grid-column:1/-1;border-top:1px solid var(--line);border-radius:0;margin-top:2px;
    padding-top:13px;font-weight:600;color:var(--green)}
}

@media (max-width:900px){
  .drop-mega .mega-group{margin-bottom:8px}
  .drop-mega a.mega-head{font-weight:600;background:var(--green-soft);color:var(--ink)}
  .drop-mega a.mega-link{margin-left:14px}
  .drop-mega a.mega-all{font-weight:600;color:var(--green)}
  .drop .drop-label{padding:10px 4px 6px}
}

/* content-page blocks */
.intro-solo{max-width:800px}

.steps-col{display:grid;gap:30px;margin-top:34px}

.steps-col .step{grid-template-columns:58px 1fr}

.sitem-more{margin:14px 0 0}

.callout-box{max-width:880px;margin-left:auto;margin-right:auto}

.callout-box h3{margin-bottom:.5em}

.callout-box p:last-child{margin-bottom:0}

.list-box h2{margin-bottom:.35em}

.rel-card{display:flex;flex-direction:column;color:var(--ink-2)}

.rel-card:hover{color:var(--ink-2)}

.rel-card .rel-t{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:1.22rem;line-height:1.28;
  color:var(--ink);margin:0 0 .45em}

.rel-card:hover .rel-t{color:var(--green)}

.rel-card .txt-link{margin-top:auto;padding-top:12px}

.rel-card p{margin-bottom:0}

.rel-card--back{background:var(--green-soft);border-color:#D6E3DA}

.ind-links{margin-top:34px}

.ind-links p{margin:0}

.s-list a{font-weight:500}

.sacc-body .sitem h4 a{color:var(--ink)}

.sacc-body .sitem h4 a:hover{color:var(--green)}

@media (max-width:900px){ .steps-col .step{grid-template-columns:1fr} }

/* certifications carousel (About) */
.certs{--cert-b:calc((100% - 96px) / 4.3);--cert-k:1.5}

.certs .narrow{margin-bottom:46px}

.certs-viewport{position:relative}

.certs-track{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding:0 4px;padding:10px 4px 30px;margin:-10px -4px -30px;
  scrollbar-width:none;-ms-overflow-style:none}

.certs-track::-webkit-scrollbar{display:none}

.certs-track:focus-visible{outline:3px solid var(--green);outline-offset:4px;border-radius:var(--r)}

.cert{flex:0 0 var(--cert-b);min-width:0;scroll-snap-align:start}

.cert--wide{flex-basis:calc(var(--cert-b) * var(--cert-k))}

.cert-card{margin:0;height:100%;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r)}

.cert-card.hv-bar::before{background:var(--green)}

.cert-frame{position:relative;display:block;flex:0 0 auto;aspect-ratio:1/1;min-height:0;overflow:hidden;
  background:linear-gradient(180deg,var(--white) 0%,var(--tint) 100%);border-bottom:1px solid var(--line);
  cursor:zoom-in}

.cert-frame img{position:absolute;top:26px;left:26px;width:calc(100% - 52px);height:calc(100% - 52px);
  object-fit:contain;transition:transform .45s var(--ease)}

.cert--wide .cert-frame{aspect-ratio:var(--cert-k) / 1}

.cert-frame--dark{background:linear-gradient(180deg,#02521F 0%,var(--green-deep) 100%);border-bottom-color:var(--green-deep)}

.cert-card:hover .cert-frame img{transform:scale(1.03)}

.cert-frame:focus-visible{outline-offset:-5px;border-radius:var(--r) var(--r) 0 0}

.cert-frame--dark:focus-visible{outline-color:var(--gold-light)}

.cert-card figcaption{padding:20px 20px 24px;text-align:center}

.cert-t{font-size:1.1rem;line-height:1.3;margin:0 0 6px}

.cert-by{font-size:.86rem;line-height:1.5;color:var(--ink-3);margin:0}

.certs-ctrl{display:none;align-items:center;justify-content:center;gap:12px;margin-top:34px}

.certs.js .certs-ctrl{display:flex}

.certs-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  color:var(--ink);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}

.certs-btn:hover{background:var(--green);border-color:var(--green);color:var(--white)}

.certs-btn[hidden]{display:none}

.certs-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.certs-btn .ic-play{display:none;fill:currentColor;stroke-width:1.2}

.certs-btn[data-state="paused"] .ic-pause{display:none}

.certs-btn[data-state="paused"] .ic-play{display:block}

.certs-note{text-align:center;margin-top:16px}

.cert-lightbox{border:0;padding:0;border-radius:var(--r);background:var(--white);color:var(--ink-2);
  width:min(92vw,960px);max-width:92vw;max-height:92vh;overflow:auto;
  box-shadow:0 30px 80px rgba(1,25,9,.35)}

.cert-lightbox[data-orient="port"]{width:min(92vw,620px)}

.cert-lightbox[data-bg="dark"] img{background:var(--green-deep);padding:clamp(18px,4vw,40px);border-radius:var(--r-sm)}

.cert-lightbox::backdrop{background:rgba(1,25,9,.8)}

.cert-lb-in{position:relative;padding:54px 28px 24px}

.cert-lightbox img{width:auto;max-width:100%;max-height:72vh;margin:0 auto}

.cert-lb-cap{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:600;
  font-size:1.15rem;color:var(--ink);text-align:center;margin:18px 0 0}

.cert-lb-close{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);color:var(--ink);display:inline-flex;
  align-items:center;justify-content:center;padding:0;cursor:pointer}

.cert-lb-close:hover{background:var(--green);border-color:var(--green);color:var(--white)}

.cert-lb-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* rolling mode: the row loops continuously (set by the carousel script) */
.certs.is-rolling .certs-viewport{overflow:hidden;overflow:clip;padding:10px 0 30px;margin:-10px 0 -30px;
  touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}

.certs.is-rolling .certs-viewport.is-dragging{cursor:grabbing}

.certs.is-rolling .certs-viewport.is-dragging .cert-frame{cursor:grabbing}

.certs.is-rolling .certs-viewport:focus-visible{outline:3px solid var(--green);outline-offset:4px;border-radius:var(--r)}

.certs.is-rolling .certs-viewport::before,.certs.is-rolling .certs-viewport::after{content:"";position:absolute;
  top:0;bottom:0;width:44px;z-index:2;pointer-events:none}

.certs.is-rolling .certs-viewport::before{left:0;background:linear-gradient(90deg,var(--tint) 0%,rgba(244,247,246,0) 100%)}

.certs.is-rolling .certs-viewport::after{right:0;background:linear-gradient(270deg,var(--tint) 0%,rgba(244,247,246,0) 100%)}

.certs.is-rolling .certs-track{position:relative;overflow:visible;scroll-snap-type:none;padding:0;margin:0}

.certs.is-rolling .cert{scroll-snap-align:none}

.certs.is-rolling .cert-frame img{-webkit-user-drag:none}

@media (max-width:1000px){ .certs{--cert-b:calc((100% - 72px) / 3.3)} }

@media (max-width:760px){ .certs{--cert-b:calc((100% - 48px) / 2.25)} }

@media (max-width:540px){ .certs{--cert-b:78%;--cert-k:1.18} .cert-frame img{top:22px;left:22px;width:calc(100% - 44px);height:calc(100% - 44px)}
  .certs.is-rolling .certs-viewport::before,.certs.is-rolling .certs-viewport::after{width:24px} }

@media (prefers-reduced-motion:reduce){
  .cert-frame img{transition:none}
  .cert-card:hover .cert-frame img{transform:none}
}

/* ════════════════════════════════════════════════════════════
   SITE MOTION SYSTEM — motion.css  (brand-agnostic)
   ------------------------------------------------------------
   Load it on every page (order-independent — works before OR after
   the site's own stylesheet). To match the brand, set any of these
   on :root in the SITE'S css; each has a sensible fallback so you
   only override what you want:

     :root{
       --motion-1: 232,168,32;            primary accent  (r,g,b)
       --motion-2: 130,175,225;           secondary accent (r,g,b)
       --motion-accent: #e8a820;          solid accent: bars/progress
       --motion-accent-2: #f5c842;        lighter accent
       --motion-ink: #0f2540;             deep brand color (dark accents)
       --motion-dark-rgb: 13,27,42;       dark brand color "r,g,b" — drives the video scrim
       --motion-nav-bg: rgba(255,255,255,.98);  scrolled-nav background
     }

   The JS (animations.js) reads --motion-1 / --motion-2 for the hero
   canvas. Honors prefers-reduced-motion automatically — the hero
   background video is paused + reset to its poster by animations.js
   (CSS alone cannot stop <video> playback).
   ════════════════════════════════════════════════════════════ */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion: reduce) {
  .rv,.rv-l,.rv-r,.rv-scale,.rv-stagger>* { opacity:1 !important; transform:none !important; }
  .orb,.mq-track { animation:none !important; }
  #hero-canvas,.banner-canvas { display:none !important; }
  /* hover kit: keep the color/glow feedback, suppress the movement */
  .hv-btn:hover,.hv-card:hover,
  .hv-card:hover .hv-icon,.hv-icon:hover,
  .hv-arrow:hover::after { transform:none !important; }
  .hv-btn::before { display:none !important; }
  /* the hero background video is paused + reset to its poster by
     animations.js — CSS cannot stop <video> playback */
}

/* page-load / page-leave fade */
body { animation: pgIn .5s ease both; }

body.leaving { opacity:0; transition:opacity .28s ease; }

@keyframes pgIn { from{opacity:0;} to{opacity:1;} }

/* scroll progress bar — RETIRED 2026-09-06 (owner ruling: reads as an AI template).
   No #sprog element, no rule. */

/* ── live video-background hero (the homepage standard, 2026-06) ──
   <video class="video-bg" autoplay muted loop playsinline
          aria-hidden="true" poster="…" src="…"></video>
   + a SEPARATE sibling <div class="video-scrim"></div> layered above.
   Set --motion-dark-rgb to the client's dark brand color ("r,g,b").
   The scrim is a LAYERED gradient: directional dark wash + bottom-up
   fade. NB: `at`-position syntax is radial-only — never use it inside
   linear-gradient() (the background silently drops → white section). */
.video-bg { position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none; filter:brightness(.5); }

.video-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(105deg, rgba(var(--motion-dark-rgb,13,27,42),.86) 0%, rgba(var(--motion-dark-rgb,13,27,42),.55) 48%, rgba(var(--motion-dark-rgb,13,27,42),.28) 100%),
    linear-gradient(0deg, rgba(var(--motion-dark-rgb,13,27,42),.92) 0%, rgba(var(--motion-dark-rgb,13,27,42),0) 45%);
}

/* scroll-aware nav condense — solid background only; never
   backdrop-filter:blur() on a sticky/fixed nav (2026-06 perf rule).
   v1.2.0: .scrolled is applied with hysteresis (on past 96px, off under 24px)
   in animations.js — a site's .scrolled rule may shrink the nav, but the
   toggle can no longer flicker at the threshold (the 2026-09-06 bounce fix). */
[data-motion-nav] { transition: padding .3s var(--motion-ease), background .3s, box-shadow .3s; }

[data-motion-nav].scrolled {
  background: var(--motion-nav-bg,rgba(255,255,255,.98));
  box-shadow: 0 2px 0 rgba(15,37,64,.04), 0 10px 28px rgba(15,37,64,.12);
}

/* floating ambient orbs — live inside dark hero sections */
.orb-field { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.orb { position:absolute; border-radius:50%; filter:blur(44px); will-change:transform,opacity; }

.orb-1 { width:420px; height:420px; top:-90px; left:-70px;
  background:radial-gradient(circle, rgba(var(--motion-1,232,168,32),.42), transparent 70%);
  animation:wtOrb1 9s ease-in-out infinite alternate; }

.orb-2 { width:360px; height:360px; bottom:-100px; right:-50px;
  background:radial-gradient(circle, rgba(var(--motion-2,130,175,225),.32), transparent 70%);
  animation:wtOrb2 12s ease-in-out infinite alternate; }

.orb-3 { width:300px; height:300px; top:45%; left:60%;
  background:radial-gradient(circle, rgba(var(--motion-1,232,168,32),.22), transparent 70%);
  animation:wtOrb3 7s ease-in-out infinite alternate; }

@keyframes wtOrb1 { 0%{opacity:.40;transform:scale(1);} 100%{opacity:.75;transform:scale(1.12) translate(2%,2%);} }

@keyframes wtOrb2 { 0%{opacity:.30;transform:scale(1);} 100%{opacity:.62;transform:scale(1.1) translate(-2%,-3%);} }

@keyframes wtOrb3 { 0%{opacity:.16;transform:translate(-50%,-50%) scale(1);} 100%{opacity:.38;transform:translate(-50%,-50%) scale(1.4);} }

/* hero / banner canvases */
#hero-canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }

.banner-canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }

/* the section that holds a canvas/orbs must be position:relative and its
   content lifted above — add [data-motion-stage] to that section */
[data-motion-stage] { position:relative; }

[data-motion-stage] > .container,
[data-motion-stage] > div:not(.orb-field):not(.banner-canvas):not(.video-scrim) { position:relative; z-index:2; }

/* scroll reveal */
.rv { opacity:0; transform:translateY(22px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv.on { opacity:1; transform:none; }

.rv-l { opacity:0; transform:translateX(-26px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-l.on { opacity:1; transform:none; }

.rv-r { opacity:0; transform:translateX(26px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-r.on { opacity:1; transform:none; }

.rv-scale { opacity:0; transform:scale(.94); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-scale.on { opacity:1; transform:none; }

.rv-stagger > * { opacity:0; transform:translateY(22px); transition:opacity .8s var(--motion-ease),transform .8s var(--motion-ease); }

.rv-stagger.on > * { opacity:1; transform:none; }

.rv-stagger.on > *:nth-child(2){transition-delay:.08s;}

.rv-stagger.on > *:nth-child(3){transition-delay:.16s;}

.rv-stagger.on > *:nth-child(4){transition-delay:.24s;}

.rv-stagger.on > *:nth-child(5){transition-delay:.32s;}

.rv-stagger.on > *:nth-child(6){transition-delay:.40s;}

/* marquee trust ticker — CLIENT-REQUEST ONLY (removed from the
   standard 2026-06-22). Never wire a marquee by default; these rules
   stay dormant unless the client explicitly asks for one. */
.marquee { overflow:hidden; padding:14px 0; position:relative; }

.marquee--accent { background:linear-gradient(90deg, var(--motion-accent,#e8a820), var(--motion-accent-2,#f5c842)); }

.marquee--ink { background:var(--motion-ink,#0f2540); }

.mq-track { display:flex; white-space:nowrap; animation:mqs 30s linear infinite; }

.marquee:hover .mq-track { animation-play-state:paused; }

.mq-item { display:inline-flex; align-items:center; gap:22px; padding:0 38px;
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }

.marquee--accent .mq-item { color:var(--motion-ink,#0f2540); }

.marquee--ink .mq-item { color:#fff; }

.mq-item span.dot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55; }

@keyframes mqs { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ════════════════════════════════════════════════════════════
   HOVER-INTERACTION KIT (2026-08-25 — standard)
   ------------------------------------------------------------
   Harvested from the Wolf & Tiger reference build: the "sections
   respond to you" feel. CSS-only, no JS, additive opt-in hooks —
   never restyles a component's base look. Recolors entirely from
   the --motion-* brand variables (jewel tones under palette law).
   Only transform / opacity / box-shadow / color / border-color
   animate — never layout properties.
   Default accent is --motion-1; add .hv-2 to any hook to use
   --motion-2 instead.
   ════════════════════════════════════════════════════════════ */

/* 1 ── buttons: sheen sweep + lift + brand glow.
   <a class="btn hv-btn">Book a Consultation</a> */
.hv-btn { position:relative; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--motion-ease), box-shadow .35s var(--motion-ease); }

.hv-btn::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%);
  transform:translateX(-101%); transition:transform .6s var(--motion-ease); }

.hv-btn:hover::before { transform:translateX(101%); }

.hv-btn:hover { transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(var(--motion-1,232,168,32),.30),
             0 0 40px rgba(var(--motion-1,232,168,32),.16); }

.hv-btn.hv-2:hover { box-shadow:0 14px 36px rgba(var(--motion-2,130,175,225),.30),
             0 0 40px rgba(var(--motion-2,130,175,225),.16); }

/* 2 ── links / nav items: underline grows in with a faint glow.
   <a class="nav-link hv-underline">Services</a>  (needs inline/inline-block) */
.hv-underline { position:relative; }

.hv-underline::after { content:''; position:absolute; left:0; bottom:-2px;
  width:100%; height:1.5px; background:var(--motion-accent,#e8a820);
  box-shadow:0 0 10px rgba(var(--motion-1,232,168,32),.45);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .35s var(--motion-ease); }

.hv-underline:hover::after, .hv-underline.on::after { transform:scaleX(1); }

/* 3 ── cards / tiles: lift + brand-tinted layered shadow + border tint.
   <div class="card hv-card"> … </div> */
.hv-card { transition:transform .3s var(--motion-ease), box-shadow .35s var(--motion-ease),
  border-color .3s, background .3s; }

.hv-card:hover { transform:translateY(-4px);
  border-color:rgba(var(--motion-1,232,168,32),.28);
  box-shadow:0 20px 52px rgba(var(--motion-1,232,168,32),.14),
             0 4px 16px rgba(var(--motion-1,232,168,32),.08),
             0 0 40px rgba(var(--motion-1,232,168,32),.12); }

.hv-card.hv-2:hover { border-color:rgba(var(--motion-2,130,175,225),.28);
  box-shadow:0 20px 52px rgba(var(--motion-2,130,175,225),.14),
             0 4px 16px rgba(var(--motion-2,130,175,225),.08),
             0 0 40px rgba(var(--motion-2,130,175,225),.12); }

/* 4 ── accent bar: a 3px brand bar grows across the card's top edge.
   Add .hv-bar to the SAME element as .hv-card (needs position + overflow). */
.hv-bar { position:relative; overflow:hidden; }

.hv-bar::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:1;
  background:var(--motion-accent,#e8a820);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .4s var(--motion-ease); }

.hv-bar.hv-2::before { background:var(--motion-accent-2,#f5c842); }

.hv-bar:hover::before { transform:scaleX(1); }

/* 5 ── ghost numeral recolor: a card's oversized numeral shifts from
   neutral to a translucent brand tint when its card is hovered.
   <div class="hv-card hv-bar"><span class="hv-num">01</span> … </div>
   (The numeral's base size/color belong to the site's own CSS —
   this hook only adds the hover recolor.) */
.hv-num { transition:color .3s; }

.hv-card:hover .hv-num { color:rgba(var(--motion-1,232,168,32),.16); }

.hv-card.hv-2:hover .hv-num { color:rgba(var(--motion-2,130,175,225),.16); }

/* 6 ── icon chips: gentle scale + soft glow when their card (or the
   icon itself) is hovered.  <span class="wi-icon hv-icon">✓</span> */
.hv-icon { transition:transform .3s var(--motion-ease), box-shadow .3s; }

.hv-card:hover .hv-icon, .hv-icon:hover { transform:scale(1.08);
  box-shadow:0 0 16px rgba(var(--motion-1,232,168,32),.32); }

.hv-card.hv-2:hover .hv-icon { box-shadow:0 0 16px rgba(var(--motion-2,130,175,225),.32); }

/* 7 ── arrow nudge on text CTAs.  <a class="hv-arrow">Our services</a> */
.hv-arrow::after { content:'→'; display:inline-block; margin-left:8px;
  transition:transform .25s var(--motion-ease); }

.hv-arrow:hover::after { transform:translateX(4px); }

/* ════════════════════════════════════════════════════════════
   DROPDOWN MENUS — HOVER BRIDGE + CLOSE DELAY  (LAW, 2026-09-09, v1.3.0)
   ------------------------------------------------------------
   Utmost Financial (job 37, 2026-09-09): a nav dropdown closed the
   instant the pointer crossed the gap between its trigger and the
   panel below it — the gap was a hover dead zone, and the panel
   shut before the pointer ever reached it. Full story, the two
   rules, and the reproduce test: SKILL.md, "Dropdown menus — the
   hover bridge + close delay (LAW, 2026-09-09)".

   RULE 1 (this block): no dead zone between trigger and panel. An
   invisible ::before bridge on the panel spans exactly the gap
   between it and its trigger, so the panel is flush with the
   trigger's hit box for pointer purposes while staying visually
   clear of it — the site's own visual design is untouched. The
   bridge is disabled on the <=900px tap panel, where the menu opens
   by tap/class, not hover.
   RULE 2 (the close delay, >=200ms + cancel-on-re-entry) is the JS
   half — see assets/animations.js `initDropdownKit()`.

   Hook: [data-motion-dropdown] is the standard trigger hook for a
   new build (pair it with a [data-motion-dropdown-panel] child for
   the panel); a site already using the .has-drop / .has-sub
   convention with a .drop panel (the MAC marketing site itself, the
   source of this fix) is picked up automatically — no markup change
   required. NO-OP GUARD: every rule below is scoped to these three
   trigger selectors, so a page with none of them gets zero rules
   and zero visual change. --motion-dropdown-gap lets a site match
   its own trigger-to-panel spacing (defaults to 16px, the MAC
   value); this block does not set the panel's position/width/
   colors — those stay owned by the site's own CSS. */
[data-motion-dropdown],.has-drop,.has-sub { position:relative; }

[data-motion-dropdown] > [data-motion-dropdown-panel]::before,
[data-motion-dropdown] > .drop::before,
.has-drop > .drop::before,
.has-sub > .drop::before {
  content:''; position:absolute; left:0; right:0;
  top:calc(var(--motion-dropdown-gap,16px) * -1);
  height:var(--motion-dropdown-gap,16px);
}

@media (max-width:900px) {
  /* no hover bridge on the tap panel — mobile opens by tap/class */
  [data-motion-dropdown] > [data-motion-dropdown-panel]::before,
  [data-motion-dropdown] > .drop::before,
  .has-drop > .drop::before,
  .has-sub > .drop::before { display:none; }
}

/* ── NATURAL-COLOUR VIDEO-HERO SCRIM (build addition, rev 2026-09-16) ──
   The homepage hero carries a live video background and the clip is meant
   to read as real footage: NO filter of any kind sits on the video, so its
   own colour, contrast and saturation reach the screen untouched.
   Legibility is handled entirely by a separate scrim layer above it — a
   soft brand-dark elliptical vignette centred under the copy column, easing
   out toward .20 at the frame edges, so roughly four fifths of the footage
   colour reaches the eye at the outside of the frame. Worst case (the brightest possible frame directly under
   the copy) the centre still resolves near #3A4A3E, close to 6:1 against the
   white headline and sub-head, so contrast never depends on a lucky frame.
   The bottom linear layer only seats the trust row.
   NB: `at`-position syntax is radial-only — it is used in the radial layer
   here and never inside the linear one (the browser would drop the whole
   declaration). The stock .video-scrim above is untouched and still
   available to every other build. */
.video-scrim--natural {
  background:
    radial-gradient(70% 78% at 50% 50%, rgba(var(--motion-dark-rgb,13,27,42),.64) 0%, rgba(var(--motion-dark-rgb,13,27,42),.60) 50%, rgba(var(--motion-dark-rgb,13,27,42),.40) 78%, rgba(var(--motion-dark-rgb,13,27,42),.20) 100%),
    linear-gradient(0deg, rgba(var(--motion-dark-rgb,13,27,42),.46) 0%, rgba(var(--motion-dark-rgb,13,27,42),0) 32%);
}

.video-bg--natural { filter:none; }

/* Orb recolour for a LIGHT stage: the stock orbs are tuned for a
   dark hero and read as haze on white. On [data-motion-stage].stage-light
   they become low-opacity brand tints (the "gradient drift" layer). */
[data-motion-stage].stage-light .orb-1 { background:radial-gradient(circle, rgba(var(--motion-drift-1,0,100,0),.14), transparent 70%); }

[data-motion-stage].stage-light .orb-2 { background:radial-gradient(circle, rgba(var(--motion-drift-2,200,162,83),.16), transparent 70%); }

[data-motion-stage].stage-light .orb-3 { background:radial-gradient(circle, rgba(var(--motion-drift-1,0,100,0),.09), transparent 70%); }

/* On a light stage the orb field must sit ABOVE the light scrim, otherwise the
   drift layer is washed out by it. Dark stages keep the stock stacking. */
[data-motion-stage].stage-light .orb-field { z-index:1; }

/* ── ThemePort blog/utility templates (namespaced, no collision with site CSS) ── */
.tp-container { max-width: 1160px; margin: 0 auto; padding: 0 28px; width: 100%; }
.tp-page-hero { background: #121212; padding: 88px 0 56px; }
.tp-page-hero h1 { color: #fff; font-family: 'Georgia', serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 0; }
.tp-page-hero .tp-meta { color: rgba(255,255,255,.75); margin: 12px 0 0; }
.tp-section { padding: 64px 0; }
.tp-content { max-width: 820px; }
.tp-content p, .tp-content ul, .tp-content ol { margin: 0 0 1.2em; }
.tp-content h2, .tp-content h3 { font-family: 'Georgia', serif; color: #121212; margin: 1.6em 0 .6em; line-height: 1.25; }
.tp-content img, .tp-featured { max-width: 100%; height: auto; border-radius: 8px; margin: 0 0 1.4em; }
.tp-policy { max-width: 900px; width: 100%; }
.tp-policy h2, .tp-policy h3 { font-family: 'Georgia', serif; color: #121212; margin: 1.6em 0 .6em; }
.tp-policy p, .tp-policy ul { margin: 0 0 1.1em; }
.tp-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; }
.tp-post-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 24px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.tp-post-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; margin-bottom: 16px; }
.tp-post-card h2 { font-family: 'Georgia', serif; font-size: 1.3rem; line-height: 1.3; margin: 0 0 8px; }
.tp-post-card h2 a { color: #121212; text-decoration: none; }
.tp-meta { color: rgba(0,0,0,.5); font-size: .85rem; margin: 0 0 10px; }
.tp-readmore { color: #C8A253; font-weight: 700; text-decoration: none; }
.tp-pagination { margin-top: 40px; text-align: center; }
.tp-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border: 1px solid rgba(0,0,0,.15); border-radius: 6px; color: #121212; text-decoration: none; }
.tp-pagination .page-numbers.current { background: #121212; color: #fff; }


/* ── ThemePort v2.8.0 — count-adaptive team tiers ────────────────────────── */
.tp-team{display:grid;justify-content:center;align-items:start;gap:2rem;margin-left:auto;margin-right:auto}
.tp-team__card{text-align:center}
.tp-team__photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block}
.tp-team__body h3{margin:.85rem 0 .15rem}
.tp-team__role{display:block;opacity:.75;font-size:.95em}
.tp-team__bio{margin-top:.65rem;text-align:left}

/* 1 — FOUNDER FEATURE: large portrait beside the full bio. Reads as a complete
   solo-firm About section, never as a team page with one lonely card. */
.tp-team--solo{grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:2.5rem;max-width:900px;text-align:left}
.tp-team--solo .tp-team__card{display:contents}
.tp-team--solo .tp-team__photo{grid-column:1}
.tp-team--solo .tp-team__body{grid-column:2;text-align:left}
.tp-team--solo .tp-team__body h3{margin-top:0;font-size:1.6em}
@media (max-width:720px){
  .tp-team--solo{grid-template-columns:minmax(0,1fr);max-width:420px}
  .tp-team--solo .tp-team__photo,.tp-team--solo .tp-team__body{grid-column:1}
}

/* 2 — balanced centered pair, generous cards side by side */
.tp-team--pair{grid-template-columns:repeat(2,minmax(0,300px));gap:2.5rem;max-width:700px}

/* 3–4 — one centered row of equal cards */
.tp-team--row{grid-template-columns:repeat(auto-fit,minmax(0,240px));max-width:1040px}

/* 5+ — full multi-row grid; photos smallest, density highest */
.tp-team--grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:1160px;gap:1.75rem}
.tp-team--grid .tp-team__bio{font-size:.94em}

@media (max-width:640px){
  .tp-team--pair,.tp-team--row,.tp-team--grid{grid-template-columns:minmax(0,1fr);max-width:380px}
}