/* Premium Tax & Accounting Services — shared stylesheet (every page links this one file;
   assets/motion.css loads after it). Approved Stage 1 design + Core 30 additions. */
:root{
  --navy:#1b2a41; --navy-deep:#131e2f; --navy-2:#24365a; --navy-3:#2a3d5c;
  --gold:#b08d57; --gold-light:#c9a970; --gold-dark:#85652f; --gold-pale:#d7bf94;
  --white:#ffffff; --tint:#f2f5f9; --tint-2:#e9eef5; --line:#dde3ec;
  --ink:#1b2a41; --body:#3a4659; --muted:#55627a; --on-dark:#d5dbe5; --on-dark-2:#b9c3d2;
  --radius:16px; --shadow:0 18px 44px rgba(27,42,65,.10);
  --font-head:"Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:"Inter", "Helvetica Neue", Arial, sans-serif;
  --motion-1:201,169,112; --motion-2:176,192,219;
  --motion-accent:#b08d57; --motion-accent-2:#c9a970; --motion-ink:#1b2a41;
  --motion-dark-rgb:27,42,65; --motion-nav-bg:#1b2a41; --motion-dropdown-gap:16px;
  --anim-accent:#4a6a9c; --anim-ink:#1b2a41; --anim-dark:#1b2a41; --anim-tint:#f2f5f9;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{margin:0;background:var(--white);color:var(--body);font-family:var(--font-body);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased}

img,video{max-width:100%;display:block}

a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}

a:hover{color:var(--gold-dark)}

:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);font-weight:600;line-height:1.18;margin:0 0 .5em;letter-spacing:-.01em}

h1{font-size:clamp(2.3rem,5vw,3.7rem)}

h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}

h3{font-size:1.3rem}

p{margin:0 0 1.1em}

ul{margin:0;padding:0}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-999px;top:8px;background:var(--gold-light);color:var(--navy);padding:10px 16px;border-radius:8px;z-index:200;font-weight:600}

.skip:focus{left:12px}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* social row (utility strip above the nav; collapses when empty) */
.social-row{background:var(--navy-deep);display:flex;justify-content:flex-end;gap:6px;padding:6px 24px}

.social-row:empty{display:none}

.social-row a{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;color:var(--on-dark)}

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

/* header + nav */
.site-header{position:sticky;top:0;z-index:100;background:var(--navy);border-bottom:1px solid rgba(201,169,112,.22)}

.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1240px;margin:0 auto;padding:16px 24px;transition:padding .3s var(--motion-ease,ease)}

.site-header.scrolled .nav-inner{padding:10px 24px}

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

.site-header.scrolled .brand img{height:56px}

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

.nav-list{display:flex;align-items:center;gap:26px;list-style:none}

.nav-list > li{position:relative;display:flex;align-items:center}

.nav-link{color:var(--on-dark);text-decoration:none;font-weight:500;font-size:.98rem;padding:8px 0;display:inline-block}

.nav-link:hover,.nav-link.on{color:var(--white)}

.sub-toggle{display:none}

.drop{display:none;position:absolute;top:calc(100% + 16px);left:-18px;min-width:300px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 50px rgba(19,30,47,.22);padding:10px;z-index:120}

.has-drop.hovering > .drop,.has-drop:focus-within > .drop{display:block;animation:dropIn .18s ease both}

@keyframes dropIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.drop a{display:block;padding:10px 14px;border-radius:9px;color:var(--navy);text-decoration:none;font-size:.95rem;font-weight:500}

.drop a:hover,.drop a:focus-visible{background:var(--tint);color:var(--navy)}

.drop .drop-lead{font-weight:600;border-bottom:1px solid var(--line);border-radius:9px 9px 0 0;margin-bottom:4px}

.burger{display:none;position:relative;z-index:140;width:46px;height:46px;border:1px solid rgba(201,169,112,.45);border-radius:10px;background:transparent;cursor:pointer}

.burger span,.burger span::before,.burger span::after{position:absolute;left:12px;width:20px;height:2px;background:var(--white);border-radius:2px;transition:transform .25s ease,opacity .2s ease;content:""}

.burger span{top:22px}

.burger span::before{top:-7px;left:0}

.burger span::after{top:7px;left:0}

.nav-open .burger span{background:transparent}

.nav-open .burger span::before{transform:translateY(7px) rotate(45deg)}

.nav-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* buttons + links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1.2;padding:15px 26px;border-radius:999px;text-decoration:none;border:0;cursor:pointer}

.btn-gold{background:var(--gold-light);color:var(--navy)}

.btn-gold:hover{background:var(--gold-pale);color:var(--navy)}

.btn-navy{background:var(--navy);color:var(--white)}

.btn-navy:hover{background:var(--navy-2);color:var(--white)}

.nav-cta{padding:12px 22px;font-size:.95rem}

.text-link{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold-light);padding-bottom:2px}

.text-link:hover{color:var(--gold-dark)}

.on-dark .text-link,.cta-band .text-link,.hero .text-link{color:var(--gold-light);border-bottom-color:rgba(201,169,112,.5)}

.on-dark .text-link:hover,.cta-band .text-link:hover,.hero .text-link:hover{color:var(--white)}

/* homepage hero */
.hero{position:relative;overflow:hidden;background:var(--navy);color:var(--on-dark);min-height:min(calc(100vh - 82px),760px);display:flex;align-items:center;padding:96px 0 104px}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:56px;align-items:center}

.hero h1{color:var(--white);text-shadow:0 2px 22px rgba(19,30,47,.55);margin-bottom:.4em}

.hero .lede{font-size:1.18rem;color:var(--on-dark);max-width:36em;text-shadow:0 1px 14px rgba(19,30,47,.6)}

.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}

.trust-line{margin-top:30px;font-size:.92rem;color:var(--on-dark-2);letter-spacing:.01em}

.trust-line span{white-space:nowrap}

.trust-line span + span::before{content:"·";margin:0 10px;color:var(--gold-light)}

.fact-card{background:rgba(19,30,47,.78);border:1px solid rgba(201,169,112,.38);border-radius:20px;padding:34px 32px;box-shadow:0 30px 70px rgba(10,16,26,.45)}

.fact-card img{width:84px;height:84px;margin:0 auto 18px}

.fact-card ul{list-style:none}

.fact-card li{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:baseline;padding:14px 0;border-top:1px solid rgba(201,169,112,.22)}

.fact-card li:first-child{border-top:0}

.fact-card strong{font-family:var(--font-head);font-size:1.45rem;color:var(--gold-light);font-weight:600;line-height:1.1}

.fact-card span{color:var(--on-dark);font-size:.95rem;line-height:1.45}

.fact-card .fact-foot{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(201,169,112,.22);font-size:.88rem;color:var(--on-dark-2);text-align:center}

/* inner page hero + CTA band */
.page-hero,.cta-band{position:relative;overflow:hidden;background:var(--navy);color:var(--on-dark)}

.page-hero{padding:76px 0 70px}

.page-hero h1{color:var(--white);max-width:20em}

.page-hero .lede{font-size:1.14rem;max-width:40em;color:var(--on-dark)}

.page-hero .hero-actions{margin-top:24px}

.crumbs{font-size:.88rem;color:var(--on-dark-2);margin-bottom:18px}

.crumbs a{color:var(--gold-light);text-decoration:none}

.crumbs a:hover{color:var(--white)}

.crumbs span[aria-hidden]{margin:0 8px;color:var(--on-dark-2)}

.cta-band{padding:88px 0;text-align:center}

.page-hero .orb-1,.cta-band .orb-1{background:radial-gradient(circle, rgba(var(--motion-1),.20), transparent 70%)}

.page-hero .orb-2,.cta-band .orb-2{background:radial-gradient(circle, rgba(var(--motion-2),.22), transparent 70%)}

.cta-band h2{color:var(--white);max-width:22em;margin:0 auto .45em}

.cta-band p{max-width:40em;margin:0 auto 1.4em;color:var(--on-dark);font-size:1.08rem}

.cta-band .hero-actions{justify-content:center}

/* sections */
.section{padding:92px 0}

.section-sm{padding:64px 0}

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

.section-head{max-width:46em;margin-bottom:46px}

.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

.section-head h2::after{content:"";display:block;width:56px;height:3px;background:var(--gold);border-radius:2px;margin-top:18px}

.section-head.center h2::after{margin-left:auto;margin-right:auto}

.section-head p{font-size:1.08rem;color:var(--body)}

.measure{max-width:44em}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}

.split.wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}

.split.wide-right{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}

.split.top{align-items:start}

.media-figure{margin:0;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:var(--tint-2)}

.media-figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

.media-figure.tall img{aspect-ratio:4/5}

.media-figure.wide img{aspect-ratio:16/9}

.media-figure figcaption{font-size:.88rem;color:var(--muted);padding:12px 16px;background:var(--white)}

.check-list{list-style:none;display:grid;gap:12px;margin:22px 0 0}

.check-list li{position:relative;padding-left:32px}

.check-list li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23c9a970' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* cards */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px}

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

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}

.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}

.icon-chip{display:inline-flex;width:52px;height:52px;border-radius:14px;align-items:center;justify-content:center;background:var(--navy);color:var(--gold-light);margin-bottom:18px}

.icon-chip svg{width:26px;height:26px}

.group-card h3{margin-bottom:.35em}

.group-card p{font-size:.98rem}

.group-card .check-list{gap:8px;margin:14px 0 22px;font-size:.95rem}

.group-card .check-list li{padding-left:28px}

.group-card .check-list li::before{width:16px;height:16px;background-size:12px}

.industry-card{padding:0;overflow:hidden;display:flex;flex-direction:column}

.industry-card img{width:100%;aspect-ratio:4/3;object-fit:cover}

.industry-card .ic-body{padding:20px 22px 24px}

.industry-card h3{font-size:1.16rem;margin-bottom:.3em}

.industry-card p{font-size:.94rem;margin:0}

.industry-card.note{background:var(--navy);border-color:var(--navy);color:var(--on-dark);justify-content:center}

.industry-card.note h3{color:var(--white)}

.industry-card.note .ic-body{padding:30px 26px}

.industry-card.note .text-link{display:inline-block;margin-top:16px;color:var(--gold-light);border-bottom-color:rgba(201,169,112,.5)}

.industry-card.note .text-link:hover{color:var(--white)}

.principle h3{font-size:1.2rem}

.principle .p-num{display:block;font-family:var(--font-head);font-size:2.6rem;line-height:1;color:var(--tint-2);font-weight:700;margin-bottom:12px}

/* owner block */
.owner-mark{background:var(--navy);border-radius:22px;padding:44px 36px;text-align:center;color:var(--on-dark);box-shadow:var(--shadow)}

.owner-mark img{width:150px;height:150px;margin:0 auto 22px}

.owner-mark .om-name{font-family:var(--font-head);font-size:1.5rem;color:var(--white);display:block}

.owner-mark .om-role{display:block;font-size:.95rem;color:var(--gold-light);margin-top:4px}

.owner-mark .om-facts{list-style:none;margin-top:22px;border-top:1px solid rgba(201,169,112,.25);padding-top:18px;display:grid;gap:8px;font-size:.93rem}

/* credentials */
.cred-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}

.cred{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:center}

.cred .icon-chip{margin-left:auto;margin-right:auto}

.cred h3{font-size:1.08rem;text-align:center;margin-bottom:.3em}

.cred p{font-size:.92rem;margin:0;color:var(--muted)}

/* service catalogue */
.jump-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;list-style:none}

.jump-links a{display:inline-block;padding:10px 18px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:500;font-size:.95rem;background:var(--white);color:var(--navy)}

.jump-links a:hover{border-color:var(--gold);color:var(--gold-dark)}

.svc-group{scroll-margin-top:110px}

.svc-group-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:center;margin-bottom:44px}

.svc-group-head.flip .media-figure{order:-1}

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

.svc-card{scroll-margin-top:110px}

.svc-card h3{font-size:1.2rem}

.svc-card p{font-size:.97rem}

.svc-card .hv-arrow{font-size:.94rem}

.chip-row{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:16px}

.chip-row li{padding:8px 16px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:.93rem;color:var(--navy);font-weight:500}

/* category page list */
.cat-list{display:grid;gap:20px}

.cat-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;align-items:start}

.cat-item .cat-n{font-family:var(--font-head);font-size:1.7rem;color:var(--gold-dark);font-weight:600;line-height:1.2}

.cat-item h2{font-size:1.45rem;margin-bottom:.35em}

.cat-item p{margin-bottom:.7em}

.towns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;margin-top:24px}

.towns li{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-weight:500;color:var(--navy)}

/* reviews */
.voice{max-width:46em;margin:0 auto;text-align:center}

.voice .said{font-family:var(--font-head);font-size:clamp(1.35rem,2.6vw,1.8rem);color:var(--navy);line-height:1.35;margin:0 0 .6em}

.reviews-slot{margin-top:34px}

/* widget slots (each box is replaced by its live embed at launch) */
.widget-slot{display:flex;align-items:center;justify-content:center;text-align:center;min-height:200px;padding:36px 28px;background:var(--tint);border:2px dashed #8fa1bb;border-radius:var(--radius);color:var(--navy)}

.widget-slot p{margin:0;max-width:26em;font-family:var(--font-body);font-size:1.05rem;font-weight:600;line-height:1.55;color:var(--navy)}

.widget-slot--booking{min-height:440px}

.widget-slot--contact{min-height:400px}

.form-card .widget-slot{margin-top:6px}

/* season strip */
.season{background:var(--navy-2);color:var(--on-dark);padding:26px 0}

.season .container{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}

.season p{margin:0;font-size:1.02rem}

.season strong{color:var(--white);font-weight:600}

/* forms */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}

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

.form-grid .full{grid-column:1 / -1}

label{display:block;font-weight:600;font-size:.92rem;color:var(--navy);margin-bottom:6px}

input,select,textarea{width:100%;font:inherit;font-size:.98rem;color:var(--ink);background:var(--white);border:1px solid #c8d1de;border-radius:10px;padding:12px 14px}

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

input:focus,select:focus,textarea:focus{outline:3px solid rgba(201,169,112,.55);outline-offset:1px;border-color:var(--gold)}

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

legend{display:block;font-weight:600;font-size:.92rem;color:var(--navy);margin-bottom:8px;padding:0}

.radio-row{display:flex;flex-wrap:wrap;gap:18px}

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

.radio-row input{width:auto}

.form-note{font-size:.86rem;color:var(--muted);margin:14px 0 0}

.form-actions{margin-top:22px}

/* contact + booking */
.nap-card{background:var(--navy);color:var(--on-dark);border-radius:20px;padding:36px;box-shadow:var(--shadow)}

.nap-card h2{color:var(--white);font-size:1.6rem}

.nap-card dl{margin:0;display:grid;gap:18px}

.nap-card dt{font-size:.82rem;font-weight:600;color:var(--gold-light);letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}

.nap-card dd{margin:0;color:var(--white)}

.nap-card a{color:var(--white);text-decoration-color:var(--gold-light)}

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

.map-frame{margin-top:28px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--tint)}

.map-frame .map-fallback{padding:28px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}

.map-frame .map-fallback p{margin:0;color:var(--navy);font-weight:500}

.expect-list{list-style:none;counter-reset:x;display:grid;gap:22px;margin-top:8px}

.expect-list li{position:relative;padding-left:58px}

.expect-list li::before{counter-increment:x;content:counter(x);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--gold-light);font-family:var(--font-head);font-weight:600;font-size:1.15rem;display:flex;align-items:center;justify-content:center}

.expect-list h3{font-size:1.14rem;margin-bottom:.2em}

.expect-list p{margin:0;font-size:.97rem}

.trust-aside{margin-top:34px;display:flex;gap:18px;align-items:center;background:var(--tint);border-radius:16px;padding:20px}

.trust-aside img{width:64px;height:64px;flex:0 0 64px}

.trust-aside p{margin:0;font-size:.94rem}

.trust-aside strong{color:var(--navy)}

/* policy pages */
.policy{max-width:50em}

.policy h2{font-size:1.5rem;margin-top:1.8em}

.policy h3{font-size:1.16rem;margin-top:1.4em}

.policy ul{padding-left:1.25em;margin:0 0 1.1em}

.policy li{margin-bottom:.45em}

.policy .effective{color:var(--muted);font-size:.95rem}

/* footer */
.site-footer{background:var(--navy-deep);color:var(--on-dark-2);padding:72px 0 0;font-size:.95rem}

.footer-grid{display:grid;grid-template-columns:1.25fr 1fr .8fr 1fr;gap:40px}

.site-footer h2{font-family:var(--font-body);font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px}

.site-footer a{color:var(--on-dark);text-decoration:none}

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

.footer-brand img{height:84px;width:auto;margin-bottom:18px}

.footer-brand p{color:var(--on-dark-2)}

.footer-links{list-style:none;display:grid;gap:8px}

.nap-block address{font-style:normal;line-height:1.75;color:var(--on-dark)}

.nap-block .hours{margin-top:12px;color:var(--on-dark-2)}

.footer-cred{color:var(--gold-light);font-size:.9rem}

.footer-bottom{margin-top:56px;border-top:1px solid rgba(201,169,112,.2);padding:22px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.88rem}

.footer-bottom ul{display:flex;gap:20px;list-style:none}

/* responsive */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cred-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-list{gap:20px}
  .main-nav{gap:22px}
}

@media (max-width:900px){
  .burger{display:inline-block}
  .main-nav{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(88vw,380px);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:26px;background:var(--navy-deep);padding:96px 26px 32px;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;z-index:130}
  .nav-open .main-nav{transform:none;visibility:visible;transition:transform .3s ease;box-shadow:-20px 0 50px rgba(0,0,0,.35)}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list > li{flex-wrap:wrap;border-bottom:1px solid rgba(201,169,112,.18)}
  .nav-list > li > .nav-link{flex:1;padding:14px 0;font-size:1.06rem}
  .sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid rgba(201,169,112,.35);border-radius:10px;color:var(--gold-light);font-size:1.3rem;cursor:pointer}
  .sub-open .sub-toggle{transform:rotate(45deg)}
  .drop,.has-drop.hovering > .drop,.has-drop:focus-within > .drop{display:none;position:static;width:100%;min-width:0;box-shadow:none;border:0;background:transparent;padding:0 0 12px 8px;animation:none}
  .has-drop.sub-open > .drop{display:block}
  .drop::before{display:none}
  .drop a{color:var(--on-dark);padding:9px 10px}
  .drop a:hover,.drop a:focus-visible{background:rgba(255,255,255,.06);color:var(--white)}
  .drop .drop-lead{border-bottom-color:rgba(201,169,112,.18)}
  .nav-cta{width:100%;padding:15px 22px}
  html.nav-open{overflow:hidden}
  .hero{min-height:0;padding:72px 0 80px}
  .hero-grid,.split,.split.wide-left,.split.wide-right,.svc-group-head{grid-template-columns:minmax(0,1fr);gap:40px}
  .svc-group-head.flip .media-figure{order:0}
  .grid-3,.grid-2,.svc-grid{grid-template-columns:minmax(0,1fr)}
  .towns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section{padding:72px 0}
  .form-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:600px){
  .container{padding:0 16px}
  .nav-inner,.site-header.scrolled .nav-inner{padding:10px 16px}
  .brand img{height:52px}
  .site-header.scrolled .brand img{height:44px}
  .grid-4,.cred-row,.footer-grid{grid-template-columns:minmax(0,1fr)}
  .towns{grid-template-columns:minmax(0,1fr)}
  .fact-card{padding:26px 22px}
  .fact-card li{grid-template-columns:96px 1fr}
  .form-card,.nap-card{padding:24px}
  .cat-item{grid-template-columns:minmax(0,1fr);gap:4px}
  .trust-line span{white-space:normal}
  .season .container{flex-direction:column;align-items:flex-start}
}

/* ══════════════════════════════════════════════════════════
   Core 30 additions (job 0072): full-architecture navigation
   (Services mega panel + Industries dropdown, mobile accordion)
   and the content-page blocks. Same tokens as above; no new colors.
   ══════════════════════════════════════════════════════════ */
.nav-inner{position:relative}

.drop-ind{min-width:260px}

@media (min-width:901px){
  .nav-list > li.has-mega{position:static}
  /* the mega panel hangs from the header row; its hover bridge spans the strip
     between the link row and the panel so a diagonal path never leaves it */
  .nav-list .has-mega > .drop-mega{left:24px;right:24px;top:calc(100% + 6px);min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 26px;padding:22px 26px 14px}
  .nav-list .has-mega.hovering > .drop-mega,.nav-list .has-mega:focus-within > .drop-mega{display:grid}
  .nav-list .has-mega > .drop-mega::before{top:-38px;height:38px}
  .site-header.scrolled .nav-list .has-mega > .drop-mega::before{top:-24px;height:24px}
  /* menu aim: while the Services panel is open, a pointer passing over Industries on its way down
     to the panel does not pop the Industries panel up in its path */
  .nav-list:has(.has-mega.hovering) .drop-ind{display:none}
  .drop-mega .mega-col{display:flex;flex-direction:column;min-width:0}
  .drop-mega a{padding:7px 10px;font-size:.9rem;line-height:1.35}
  .drop-mega a.mega-head{font-family:var(--font-head);font-size:1.06rem;font-weight:600;color:var(--navy);border-bottom:2px solid var(--gold);border-radius:8px 8px 0 0;margin-bottom:6px;padding-bottom:9px}
  .drop-mega a.mega-all{grid-column:1 / -1;border-top:1px solid var(--line);border-radius:0;margin-top:8px;padding-top:12px;font-weight:600;color:var(--gold-dark)}
}

@media (max-width:900px){
  .drop-mega .mega-col{display:flex;flex-direction:column;margin-bottom:6px}
  .drop-mega a.mega-head{font-weight:600;color:var(--gold-light)}
  .drop-mega a.mega-link{padding-left:24px;font-size:.93rem}
  .drop-mega a.mega-all{font-weight:600;color:var(--gold-light)}
}

/* homepage category cards carry H2s (secondary GBP categories) */
.group-card h2.group-h{font-size:1.32rem;margin-bottom:.4em}

.group-card .check-list a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(176,141,87,.45)}

.group-card .check-list a:hover{color:var(--gold-dark);border-bottom-color:var(--gold)}

.industry-card .ic-body .text-link{display:inline-block;margin-top:14px;font-size:.93rem}

/* content-page blocks */
.intro-solo{max-width:46em}

.intro-solo .section-head,.prose-solo .section-head{margin-bottom:26px}

.prose-solo{max-width:46em}

.block-lede{font-size:1.08rem}

.callout{background:var(--tint);border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:30px 34px;max-width:50em}

.tint .callout{background:var(--white)}

.callout h3{font-size:1.28rem;margin-bottom:.45em}

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

.list-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px 36px;box-shadow:var(--shadow)}

.list-panel .section-head{margin-bottom:10px}

.check-list.two-col{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px}

.steps-wrap{max-width:52em}

.steps-wrap .expect-list{margin-top:26px}

.card h3{font-size:1.18rem;margin-bottom:.4em}

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

.faq-list{max-width:52em;display:grid;gap:12px}

.faq-list details{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:0 24px}

.faq-list summary{cursor:pointer;list-style:none;font-weight:600;color:var(--navy);padding:18px 34px 18px 0;position:relative;font-size:1.03rem;line-height:1.45}

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

.faq-list summary::after{content:"+";position:absolute;right:0;top:13px;font-size:1.5rem;line-height:1;color:var(--gold-dark);transition:transform .2s ease}

.faq-list details[open] summary::after{transform:rotate(45deg)}

.faq-list details p{margin:0 0 20px}

.cat-item h2.cat-h{font-size:1.4rem}

.rel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}

.rel-card{display:flex;flex-direction:column;text-decoration:none;color:var(--body)}

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

.rel-card .rel-t{font-family:var(--font-head);font-size:1.16rem;font-weight:600;line-height:1.28;color:var(--navy);margin:0 0 .45em}

.rel-card p{font-size:.95rem;margin:0 0 14px}

.rel-card .rel-more{margin-top:auto;font-weight:600;font-size:.93rem;color:var(--navy)}

.rel-card--back{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}

.rel-card--back:hover{color:var(--on-dark)}

.rel-card--back .rel-t{color:var(--white)}

.rel-card--back .rel-more{color:var(--gold-light)}

.ind-grid .card h3 a{color:var(--navy);text-decoration:none}

.ind-grid .card h3 a:hover{color:var(--gold-dark)}

.svc-card .svc-tag{display:block;font-size:.86rem;color:var(--muted);margin:-.2em 0 .6em}

@media (max-width:1080px){ .rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

@media (max-width:900px){ .check-list.two-col{grid-template-columns:minmax(0,1fr)} }

@media (max-width:600px){ .rel-grid{grid-template-columns:minmax(0,1fr)} .callout,.list-panel{padding:24px 22px} }

/* images carry width/height attributes for layout stability; let the card ratio govern */
.industry-card img{height:auto}

/* ════════════════════════════════════════════════════════════
   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 */
}

/* entrance animations must never widen the layout (390 px check) —
   clip, not hidden, so sticky headers keep working */
html, body { overflow-x: clip; }

/* 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; }

@media (max-width:900px) {
  .rv-l, .rv-r { transform:translateY(22px); }   /* vertical-only entrances on phones */
}

.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; }
}

/* ════════════════════════════════════════════════════════════
   GRADIENT DRIFT  (extra-backgrounds catalogue, effect 6)
   Oversized multi-stop gradient panning very slowly behind
   inner page-heros and CTA bands. Recolors from --anim-dark /
   --anim-accent set in the site's :root.
   ════════════════════════════════════════════════════════════ */
.bg-gradientdrift { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(115deg,
    var(--anim-dark,#0f2540),
    color-mix(in srgb, var(--anim-dark,#0f2540) 80%, var(--anim-accent,#e8a820)),
    var(--anim-dark,#0f2540),
    color-mix(in srgb, var(--anim-dark,#0f2540) 90%, var(--anim-accent,#e8a820)));
  background-size:320% 100%; animation:bg-drift 26s ease-in-out infinite; }

@keyframes bg-drift { 0%,100%{ background-position:0% 0; } 50%{ background-position:100% 0; } }

[data-motion-stage] > .bg-gradientdrift { position:absolute; z-index:0; }

@media (prefers-reduced-motion: reduce) {
  .bg-gradientdrift { animation:none !important; }
}

/* ── 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: #1b2a41; 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: #1b2a41; 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: #1b2a41; 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: #1b2a41; text-decoration: none; }
.tp-meta { color: rgba(0,0,0,.5); font-size: .85rem; margin: 0 0 10px; }
.tp-readmore { color: #b08d57; 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: #1b2a41; text-decoration: none; }
.tp-pagination .page-numbers.current { background: #1b2a41; 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}
}