/* Patterns for Who We Help, Contact and service-detail pages. Loaded after styles.css and skeleton.css. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Shared focus treatment for the controls introduced here */
.crumbs a:focus-visible,.audience-jump a:focus-visible,.audience-links a:focus-visible,.related-card:focus-visible,
.contact-form :is(input,select,textarea,button):focus-visible,.footer-links a:focus-visible{outline:2px solid #a08359;outline-offset:3px}

/* Hero */
.detail-hero{background:#f6f6f6;color:#242e3d;padding-block:clamp(130px,16vw,190px) clamp(48px,7vw,84px)}
.detail-hero h1{margin:14px 0 0;max-width:900px;font-size:clamp(40px,5.4vw,68px);font-weight:400;line-height:1.04;letter-spacing:-.06em;color:#242e3d}
.detail-hero h1 em{font-style:normal;color:#a08359}
.detail-lead{max-width:680px;margin:24px 0 0;font-size:clamp(16px,1.6vw,19px);line-height:1.65;color:#505864}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none;font-size:13px;color:#666d77}
.crumbs li+li::before{content:"/";margin-right:8px;color:#b2b6bb}
.crumbs a{color:#505864;text-decoration:underline;text-decoration-color:rgba(36,46,61,.25);text-underline-offset:3px}
.crumbs a:hover{color:#a08359}

/* Sections */
.page-section{padding-block:clamp(48px,7vw,90px);background:#f8f8f8;color:#242e3d}
.page-section h2{font-family:var(--body);font-weight:500}

/* Service detail */
.detail-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,90px);align-items:start}
.detail-grid h2,.related-section h2{font-size:clamp(24px,2.6vw,32px);font-weight:500;letter-spacing:-.04em;margin:0 0 22px}
.check-list{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.check-list li{position:relative;padding:0 0 14px 30px;border-bottom:1px solid #e5e5e5;font-size:16px;line-height:1.55;color:#4e5784}
.check-list li::before{content:"";position:absolute;left:0;top:.45em;width:13px;height:7px;border-left:2px solid #a08359;border-bottom:2px solid #a08359;transform:rotate(-45deg)}
.detail-grid aside{padding:clamp(22px,3vw,34px);background:#ffffff;border:1px solid #e5e5e5;border-radius:16px}
.step-list{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:22px}
.step-list li{position:relative;display:grid;gap:4px;padding-left:46px;counter-increment:step;color:#505864;font-size:15px;line-height:1.55}
.step-list li::before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:32px;height:32px;border:1px solid #a08359;border-radius:50%;font-size:13px;color:#a08359}
.step-list strong{font-weight:500;font-size:17px;color:#242e3d}
.page-section.related-section{padding-top:0;padding-bottom:clamp(56px,7vw,90px)}
.related-grid,.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:18px}
.related-card{display:grid;gap:8px;padding:24px;background:#ffffff;border:1px solid #e5e5e5;border-radius:16px;color:#242e3d;text-decoration:none;transition:transform .28s var(--ease),border-color .28s ease,box-shadow .28s ease}
.related-card strong{font-weight:500;font-size:18px;letter-spacing:-.02em}
.related-card span{font-size:14px;line-height:1.55;color:#666d77}
.related-card:hover{transform:translateY(-3px);border-color:#a08359;box-shadow:0 18px 40px rgba(36,46,61,.08)}
.draft-note{margin:34px 0 0;padding:14px 18px;border:1px dashed #a08359;border-radius:12px;background:#f6f6f6;color:#a08359;font-size:13px;line-height:1.55}

/* Who We Help */
.audience-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.audience-jump a{padding:8px 15px;border:1px solid rgba(36,46,61,.2);border-radius:999px;color:#242e3d;font-size:13px;text-decoration:none;transition:background .25s ease,border-color .25s ease}
.audience-jump a:hover{background:#eeeeee;border-color:#a08359}
.audience-card{scroll-margin-top:110px;display:flex;flex-direction:column;padding:clamp(22px,2.6vw,32px);background:#ffffff;border:1px solid #e5e5e5;border-radius:16px;color:#4e5784}
.audience-card h3{margin:0;font-size:24px;font-weight:500;letter-spacing:-.04em;color:#242e3d}
.audience-card p{margin:10px 0 0;font-size:15px;line-height:1.6}
.audience-card .audience-summary{color:#a08359;font-weight:500}
.audience-card .audience-links-label{margin-top:auto;padding-top:20px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#666d77}
.audience-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0;padding:0;list-style:none}
.audience-links a{color:#242e3d;font-size:14px;text-decoration:underline;text-decoration-color:#a08359;text-underline-offset:4px}
.audience-links a:hover{color:#a08359}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,6vw,90px);align-items:start;color:#242e3d}
.contact-grid h2{font-size:clamp(24px,2.6vw,32px);font-weight:500;letter-spacing:-.04em;margin:0 0 18px}
.preview-banner{margin:0 0 24px;padding:12px 16px;border:1px dashed #a08359;border-radius:12px;background:#f6f6f6;color:#a08359;font-size:14px;line-height:1.55}
.contact-form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-size:14px;font-weight:500}
.field .req{color:var(--color-error)}
.field .optional{font-weight:400;color:#666d77}
.field :is(input,select,textarea){width:100%;padding:13px 15px;border:1px solid #c8cbce;border-radius:10px;background:#ffffff;color:#242e3d;font:inherit;font-size:16px}
.field :is(input,select,textarea):hover{border-color:#a7abb1}
.contact-form button[aria-disabled="true"]{opacity:.6;cursor:not-allowed;width:max-content;max-width:100%;white-space:normal}
.form-status{margin:0;font-size:14px;color:#666d77}
.contact-details{display:grid;gap:4px;margin:0}
.contact-details dt{margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a08359}
.contact-details dd{margin:0;font-size:16px;color:#505864}

/* Footer services column: 13 links */
.footer-links-services{display:grid;gap:8px}

/* Progressive reveals: hidden only after animations.js confirms GSAP is running */

@media(max-width:860px){
  .detail-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .related-card,.audience-jump a{transition:none}
  .related-card:hover{transform:none}
}

/* Services overview: grouped service links */
.service-group-title{margin:44px 0 16px;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#a08359}
.service-group-title:first-of-type{margin-top:0}

/* Home scroll typewriter (assets/js/typewriter.js). Characters are hidden only after the script has wrapped them. */
.tw-ready .tw-char{opacity:0}
.tw-ready .tw-char.tw-on{opacity:1}
.tw-word{display:inline-block;white-space:nowrap}
.tw-char.tw-current{box-shadow:inset -2px 0 0 #a08359}

/* Small gold labels need a darker brand-derived shade to stay readable on the pale surfaces. */
.detail-hero .eyebrow-dark,body.visari-mode .detail-hero .eyebrow-dark{color:#a08359}
.detail-hero .eyebrow-dark::before,body.visari-mode .detail-hero .eyebrow-dark::before{background:#a08359}

/* Interactive dot field (assets/js/dot-field.js): decorative canvas behind a section's content. */
.v-serve{position:relative;overflow:hidden}
.v-serve .v-shell{position:relative;z-index:1}
.dot-field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Second dot-field host: Home "financial engine" section */
.v-services{position:relative;overflow:hidden}
.v-services .v-shell{position:relative;z-index:1}

/* Pinned scroll section (assets/js/pin-scroll.js) */
.pin-section{position:relative;overflow:clip;padding-block:clamp(64px,9vw,120px);background:#f8f8f8;color:#242e3d}
.pin-watermark{position:absolute;left:50%;top:6%;translate:-50% calc(var(--pin-p,0) * -140px);font-size:clamp(120px,22vw,340px);font-weight:700;letter-spacing:-.06em;line-height:1;color:rgba(34,45,101,.045);white-space:nowrap;pointer-events:none;user-select:none}
.pin-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.pin-media{display:grid;gap:22px}
.pin-figure{position:relative;margin:0;height:min(68vh,520px);border-radius:20px;overflow:hidden;background:#e6e6e6;transition:opacity .6s ease,transform .8s var(--ease),box-shadow .6s ease}
.pin-figure img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 1.4s var(--ease)}
.pin-figure figcaption{position:absolute;left:22px;bottom:18px;font-family:var(--display);font-style:italic;font-size:44px;line-height:1;color:#ffffff;text-shadow:0 2px 18px rgba(36,46,61,.4)}
.pin-js .pin-figure{opacity:.5;transform:scale(.97)}
.pin-js .pin-figure.is-active{opacity:1;transform:none;box-shadow:0 26px 60px rgba(36,46,61,.16)}
.pin-js .pin-figure.is-active img{transform:scale(1)}
.pin-panel{position:sticky;top:132px;align-self:start}
.pin-panel h2{margin:14px 0 0;font-family:var(--body);font-size:clamp(32px,3.6vw,50px);font-weight:400;line-height:1.02;letter-spacing:-.06em;color:#242e3d}
.pin-panel h2 em{font-family:var(--display);font-style:italic;letter-spacing:-.03em;color:#a08359}
.pin-lead{max-width:460px;margin:16px 0 0;font-size:15px;line-height:1.6;color:#666d77}
.pin-list{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:8px}
/* Card design: soft white pill when active, faint outlined marker + muted serif title otherwise. */
.pin-item{border-radius:30px;border:1px solid rgba(215,187,114,.5);background:#ffffff;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.pin-title{display:flex;align-items:center;gap:16px;width:100%;padding:16px 26px;border:0;background:none;font-family:var(--display);font-size:clamp(22px,2.2vw,30px);font-weight:400;line-height:1.15;letter-spacing:-.01em;text-align:left;color:#222d65;cursor:pointer;border-radius:30px;transition:color .3s ease}
.pin-title:focus-visible,.pin-body a:focus-visible,.pin-all:focus-visible{outline:2px solid #a08359;outline-offset:2px}
.pin-mark{flex:0 0 34px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid #d7bb72;background:#d7bb72;color:#222d65;transition:background .3s ease,border-color .3s ease,color .3s ease}
.pin-mark svg{display:block}
.pin-body{display:grid;grid-template-rows:1fr;padding:0 30px 0 76px}
.pin-body>div{overflow:hidden}
.pin-body p{margin:0 0 10px;font-size:17px;line-height:1.55;color:#646c93}
.pin-body .pin-summary{color:#222d65;font-weight:500}
.pin-body a{display:inline-block;margin:2px 0 20px;color:#222d65;font-size:14px;font-weight:500;text-decoration:underline;text-decoration-color:#a08359;text-underline-offset:4px}
.pin-js .pin-item:not(.is-active){background:transparent;border-color:transparent}
.pin-js .pin-item:not(.is-active) .pin-title{color:#b2b6bb}
.pin-js .pin-item:not(.is-active) .pin-mark{background:transparent;color:rgba(215,187,114,.85);border-color:rgba(215,187,114,.55)}
.pin-js .pin-item:not(.is-active) .pin-body{grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--ease),opacity .25s ease}
.pin-js .pin-item.is-active .pin-body{transition:grid-template-rows .5s var(--ease),opacity .5s ease .12s}
.pin-js .pin-item.is-active{background:#ffffff;border-color:rgba(215,187,114,.7);box-shadow:0 22px 54px rgba(34,45,101,.1)}
.pin-js .pin-item:not(.is-active):hover .pin-title{color:#222d65}
.pin-all{display:inline-block;margin:22px 0 0 26px;color:#222d65;font-size:14px;font-weight:500;text-decoration:underline;text-decoration-color:#a08359;text-underline-offset:5px}
.pin-grid{z-index:1}
.pin-section .dot-field{z-index:0}
@media(max-height:820px){.pin-lead{display:none}.pin-list{margin-top:18px}.pin-title{padding-block:8px}}
@media(max-width:900px){
  .pin-grid{grid-template-columns:minmax(0,1fr)}
  .pin-media{display:none}
  .pin-panel{position:static}
  .pin-item{margin-bottom:8px}
  .pin-title{cursor:default}
}
@media(prefers-reduced-motion:reduce){
  .pin-figure,.pin-figure img,.pin-item,.pin-body{transition:none!important}
  .pin-watermark{translate:-50% 0}
}

/* Dot fields fade out at their top and bottom edges instead of stopping on a hard line. */
.dot-field{-webkit-mask-image:linear-gradient(180deg,transparent 0,#242e3d 14%,#242e3d 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#242e3d 14%,#242e3d 80%,transparent 100%)}

/* Home About: slightly stronger blur before each line sharpens; pictures zoom gently on hover. */
.v-about.scroll-lines-ready .v-copy h2 .reveal-line{filter:blur(9px)}
.v-about.scroll-lines-ready .v-copy h2 .reveal-line.is-visible{filter:none}
.v-about .v-split-image::before,.v-about .v-split-image img{transition:transform .9s var(--ease)}
.v-about .v-split-image:hover::before{transform:scale(1.045)}
.v-about .v-split-image:hover img{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.v-about .v-split-image::before,.v-about .v-split-image img{transition:none}.v-about .v-split-image:hover::before,.v-about .v-split-image:hover img{transform:none}}

/* Mega-menu (Services): Who We Help | What We Provide, as on the firm's previous site */
.services-dropdown.mega-menu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px 44px;width:min(900px,calc(100vw - 48px));padding:30px 34px 26px;transform:translateX(-36%)}
.mega-title{margin:0 0 10px;padding-bottom:12px;border-bottom:2px solid var(--brand-gold)}
.desktop-nav .mega-title a{padding:0;color:var(--brand-navy)}
.mega-col ul,.nav-small-menu ul{margin:0;padding:0;list-style:none}
.mega-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.desktop-nav :is(.mega-col,.nav-small-menu) li a{display:block;padding:7px 8px;margin-inline:-8px;border-radius:7px;color:var(--brand-ink);white-space:normal}
.desktop-nav :is(.mega-col,.nav-small-menu) li a:hover,.desktop-nav :is(.mega-col,.nav-small-menu) li a:focus-visible{background:var(--grey-60);color:var(--brand-navy)}
.desktop-nav :is(.mega-menu,.nav-small-menu) a::after{display:none}
.services-dropdown.nav-small-menu{width:260px;padding:14px 18px;transform:translateX(-30%)}
.services-dropdown.nav-small-menu::before{left:28%}
body.visari-mode.light-mode .header-cta{background:var(--brand-gold-light);border-color:var(--brand-gold-light);color:var(--brand-ink)}
body.visari-mode.light-mode .header-cta:hover{background:var(--brand-gold);border-color:var(--brand-gold);color:var(--white)}
.mobile-sub-title{margin:12px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--brand-gold)}
.mobile-nav .mobile-sub-title a{padding:0;color:var(--brand-navy)}
.mobile-nav .mobile-cta{display:flex;margin-top:18px;width:100%}
@media(max-width:1180px){.services-dropdown.mega-menu{transform:translateX(-30%)}}

/* Detail pages (services and Who We Help): article + sidebar */
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,5vw,72px);align-items:start}
.detail-article{max-width:760px}
.detail-article>*+*{margin-top:18px}
.detail-article h2{margin-top:40px}
.detail-article p{margin:0;color:var(--brand-ink)}
.detail-figure{margin:0 0 32px;border-radius:var(--radius-card);overflow:hidden;aspect-ratio:16/7;background:var(--grey-60)}
.detail-figure img{display:block;width:100%;height:100%;object-fit:cover}
.detail-aside{position:sticky;top:120px;display:grid;gap:18px}
.aside-card{padding:22px 24px;background:var(--white);border:1px solid var(--color-border);border-radius:var(--radius-card)}
.aside-title{margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--brand-gold);color:var(--brand-navy)}
.aside-nav ul{margin:0;padding:0;list-style:none}
.aside-nav a{display:block;padding:6px 0;color:var(--brand-ink);text-decoration:none}
.aside-nav a:hover{color:var(--brand-navy);text-decoration:underline;text-decoration-color:var(--brand-gold)}
.aside-nav a[aria-current="page"]{color:var(--brand-navy);font-weight:700;padding-left:10px;border-left:2px solid var(--brand-gold)}
.aside-contact p{margin:0 0 10px;color:var(--color-text-muted)}
.aside-phone{display:block;margin-bottom:16px;color:var(--brand-navy);font-weight:700;text-decoration:none}
.aside-contact .btn{width:100%}
@media(max-width:960px){.detail-layout{grid-template-columns:minmax(0,1fr)}.detail-aside{position:static}}

/* Who We Are (about.php) */
.who-we-are{background:var(--white)}
.who-intro{max-width:760px}
.who-intro p{color:var(--brand-ink)}
.principle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;margin-top:40px}
.principle-card{padding:26px;background:var(--surface);border-top:3px solid var(--brand-gold);border-radius:0 0 var(--radius-card) var(--radius-card)}
.principle-card p{margin:10px 0 0;color:var(--brand-ink)}
.promise-list{max-width:760px;margin-top:44px}
.promise-list .check-list{margin-top:14px}

/* Testimonials and News: real-content grids plus placeholder cards */
.review-grid,.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
.review-card,.post-card{margin:0;padding:28px;background:var(--white);border:1px solid var(--color-border);border-radius:var(--radius-card)}
.review-card blockquote{margin:0}
.review-card figcaption{display:grid;gap:2px;margin-top:16px}
.review-card--placeholder,.post-card--placeholder{display:grid;gap:12px;min-height:220px;border-style:dashed;align-content:start}
:is(.review-card--placeholder,.post-card--placeholder) span{height:12px;border-radius:6px;background:var(--grey-60)}
:is(.review-card--placeholder,.post-card--placeholder) span:last-of-type{width:60%}
.review-card--placeholder i{order:-1;width:44px;height:44px;border-radius:50%;background:var(--grey-60)}
.post-card--placeholder i{height:120px;border-radius:12px;background:var(--grey-60)}
.post-card h2 a{color:inherit;text-decoration:none}

/* Policy page and contact forms */
.policy h2{margin-top:36px}
.policy-address{font-style:normal;padding:16px 20px;background:var(--white);border-left:3px solid var(--brand-gold)}
.placeholder-text{padding:1px 6px;border:1px dashed var(--brand-gold);border-radius:6px;background:var(--grey-25)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.contact-grid aside .btn{margin-top:22px}
.contact-details a{color:var(--brand-navy)}
.audience-card h3 a{color:inherit;text-decoration:none}
.audience-card h3 a:hover{text-decoration:underline;text-decoration-color:var(--brand-gold)}
.audience-more{margin-top:18px;color:var(--brand-navy);font-weight:700;text-decoration:underline;text-decoration-color:var(--brand-gold);text-underline-offset:4px}
@media(max-width:600px){.field-row{grid-template-columns:minmax(0,1fr)}}

/* Modern service detail polish: layered depth, editorial cards and subtle interaction. */
.detail-hero--navy{isolation:isolate;background:linear-gradient(118deg,#242e3d 0%,#222d65 58%,#242e3d 100%)}
.detail-hero--navy::before{content:"";position:absolute;inset:-25% -10% auto auto;width:min(720px,70vw);height:620px;background:radial-gradient(circle,rgba(215,187,114,.24),transparent 64%);filter:blur(8px);pointer-events:none;z-index:-1;animation:detail-glow 12s ease-in-out infinite alternate}
.detail-hero-inner{position:relative;z-index:1}
.detail-hero .hero-copy{position:relative;z-index:2}
.detail-hero .hero-art{transform:rotate(1.5deg);transition:transform .8s var(--ease),box-shadow .8s ease}
.detail-hero:hover .hero-art{transform:rotate(0) translateY(-7px) scale(1.015);box-shadow:0 38px 90px rgba(36,46,61,.56)}
.hero-actions .btn{transition:transform .3s var(--ease),box-shadow .3s ease,background .3s ease}
.hero-actions .btn:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(36,46,61,.18)}
.jump-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.jump-chips a{padding:8px 13px;border:1px solid rgba(255,255,255,.24);border-radius:999px;color:rgba(255,255,255,.85);font-size:12px;text-decoration:none;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.jump-chips a:hover{background:rgba(255,255,255,.12);border-color:var(--brand-gold-light);transform:translateY(-2px)}
.detail-intro{max-width:720px;padding:28px 30px;border-left:3px solid var(--brand-gold);border-radius:0 18px 18px 0;background:linear-gradient(100deg,#fff,#f3f3f3);box-shadow:0 18px 45px rgba(36,46,61,.06)}
.detail-block{position:relative;padding:30px 34px;border:1px solid rgba(36,46,61,.1);border-radius:20px;background:rgba(255,255,255,.72);box-shadow:0 16px 40px rgba(36,46,61,.045);transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease}
.detail-block:hover{transform:translateY(-4px);border-color:rgba(160,131,89,.5);box-shadow:0 24px 52px rgba(36,46,61,.1)}
.detail-block h2{margin-top:0!important}
.block-num{position:absolute;top:24px;right:28px;color:var(--brand-gold);font-size:12px;letter-spacing:.18em}
.detail-aside{filter:drop-shadow(0 16px 32px rgba(36,46,61,.05))}
.aside-nav li{transition:transform .25s ease}
.aside-nav li:hover{transform:translateX(5px)}
.process-band{background:linear-gradient(180deg,#fff,#eeeeee)}
.process-grid{perspective:900px}
.process-card{transition:transform .4s var(--ease),box-shadow .4s ease,border-color .4s ease}
.process-card:hover{transform:translateY(-8px) rotateX(2deg);box-shadow:0 22px 45px rgba(36,46,61,.12);border-color:rgba(160,131,89,.55)}
.related-card{position:relative;overflow:hidden}
.related-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--brand-gold);transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease)}
.related-card:hover::before{transform:scaleY(1)}
@keyframes detail-glow{from{transform:translate3d(-3%,0,0) scale(.95)}to{transform:translate3d(7%,5%,0) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.detail-hero--navy::before{animation:none}.detail-hero .hero-art,.detail-block,.process-card,.jump-chips a,.hero-actions .btn{transition:none}.detail-hero:hover .hero-art,.detail-block:hover,.process-card:hover,.jump-chips a:hover,.hero-actions .btn:hover{transform:none}}

/* Footer: brand + three link columns */
.footer-top.footer-top--wide{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:32px}
.footer-contact{margin-top:22px;font-style:normal;color:var(--color-text-muted)}
.footer-contact a,.footer-label a{color:inherit;text-decoration:none}
.footer-top--wide .footer-links,.footer-top--wide .footer-links-services{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
@media(max-width:960px){.footer-top.footer-top--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.footer-top.footer-top--wide{grid-template-columns:minmax(0,1fr)}}

/* Mobile menu opens beneath the overlaying header bar */
@media(max-width:960px){body.visari-mode .mobile-nav:not([hidden]){padding-top:96px}}

/* Step rows (.value-grid on About and Services): a gold line fills left to right on a loop,
   and each ✦ marker glows as the line reaches it. Static under reduced motion. */
.value-grid{--sweep:3.4s;position:relative}
.value-grid::before{content:"";position:absolute;z-index:0;left:0;right:0;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-gold),var(--brand-gold-light));
  box-shadow:0 0 10px rgba(215,187,114,.6);transform-origin:left center;transform:scaleX(0);
  animation:step-line var(--sweep) linear infinite}
.value-grid .value-marker{z-index:1;animation:step-blink var(--sweep) ease-in-out infinite}
/* Glow timing: the line covers the row in the first 70% of the loop, so a marker at fraction x
   of the row is reached at 0.7x; the glow peaks 6% into its own animation, hence p = 0.7x - 0.06. */
.value-grid>article:nth-child(1) .value-marker{animation-delay:calc(var(--sweep) * var(--p1,.038) - var(--sweep))}
.value-grid>article:nth-child(2) .value-marker{animation-delay:calc(var(--sweep) * var(--p2,.216) - var(--sweep))}
.value-grid>article:nth-child(3) .value-marker{animation-delay:calc(var(--sweep) * var(--p3,.394) - var(--sweep))}
.value-grid>article:nth-child(4) .value-marker{animation-delay:calc(var(--sweep) * var(--p4,.573) - var(--sweep))}
.about-process .value-grid{--p1:.067;--p2:.305;--p3:.543}
@keyframes step-line{
  0%{transform:scaleX(0);opacity:1}
  70%{transform:scaleX(1);opacity:1}
  85%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}}
@keyframes step-blink{
  0%,100%{transform:scale(1);box-shadow:0 0 18px rgba(160,131,89,.12);color:var(--brand-gold)}
  6%{transform:scale(1.16);box-shadow:0 0 0 5px rgba(215,187,114,.45),0 0 32px rgba(215,187,114,.85);color:var(--brand-gold-light)}
  16%{transform:scale(1);box-shadow:0 0 0 0 rgba(215,187,114,0),0 0 18px rgba(160,131,89,.12);color:var(--brand-gold)}}
@media(prefers-reduced-motion:reduce){
  .value-grid::before{animation:none;transform:scaleX(1);opacity:.6}
  .value-grid .value-marker{animation:none}}

/* Home closing section: 3D H mark (assets/js/h-mark-3d.js) on a soft brand backdrop */
.v-cta-mark{background:radial-gradient(circle at 74% 50%,rgba(215,187,114,.3),rgba(215,187,114,0) 42%),linear-gradient(90deg,#ffffff 0%,#efefef 100%)}
.v-cta-mark::after{content:"";position:absolute;left:62%;right:6%;bottom:12%;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(34,45,101,.18),rgba(34,45,101,0));pointer-events:none}
.v-cta-mark .h-mark-fallback,.v-cta-mark .h-mark-canvas{position:absolute;top:0;bottom:0;left:48%;right:0;margin:auto}
.v-cta-mark .h-mark-fallback{width:auto;height:58%;object-fit:contain;filter:none}
.v-cta-mark .h-mark-canvas{width:52%!important;height:100%!important}
.v-cta-mark.is-3d .h-mark-fallback{display:none}
@media(max-width:680px){.v-cta-mark .h-mark-fallback,.v-cta-mark .h-mark-canvas,.v-cta-mark::after{opacity:.16;left:40%}}
body.visari-mode .v-cta-mark .h-mark-fallback{filter:none}
body.visari-mode.light-mode .v-cta:has(.v-cta-mark) .v-cta-overlay{background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.7) 34%,rgba(255,255,255,0) 52%)}

/* Who We Are hero: particle H (assets/js/h-particles.js). The photo shows until WebGL is ready. */
.about-hero-particles{position:relative;min-height:390px}
.about-hero-particles .h-particles-canvas{position:absolute;inset:-12% -10%;width:120%!important;height:124%!important}
.about-hero-particles.is-3d>img,.about-hero-particles.is-3d>span{display:none}
.about-hero-particles.is-3d{border-radius:0;box-shadow:none;background:none;overflow:visible}

/* Services hero: gold ribbon (assets/js/gold-ribbon.js) behind the text, in the band above the service list */
.page-hero-dark.has-ribbon{position:relative;isolation:isolate}
.page-hero-dark.has-ribbon>.wrap{position:relative;z-index:1}
.gold-ribbon{position:absolute;inset:0;z-index:0;pointer-events:none}
.gold-ribbon .gold-ribbon-canvas{display:block;width:100%!important;height:100%!important}
.page-hero-dark.has-ribbon .service-hero-line{margin-top:76px}
.about-hero-particles.is-3d-pending>img,.about-hero-particles.is-3d-pending>span{opacity:0}
.about-hero-particles:is(.is-3d,.is-3d-pending){border:0;outline:0}
.about-hero-particles:is(.is-3d,.is-3d-pending)::before,.about-hero-particles:is(.is-3d,.is-3d-pending)::after{display:none}

/* Home: gold ribbon band across the seam between the hero and About (gold-ribbon.js, band mode) */
.ribbon-band{position:relative;z-index:3;height:150px;margin:-75px 0;pointer-events:none} /* straddles the seam, no background of its own */
/* Breathing room around the ribbon: the hero's bottom labels lift, and About's top content drops */
body.visari-mode .v-hero:has(+ .ribbon-band) .v-hero-content{padding-bottom:170px!important}
body.visari-mode .ribbon-band + .v-about{padding-top:clamp(150px,14vw,200px)!important}
body.visari-mode .ribbon-band + .v-about::before{top:104px!important}
.ribbon-band .gold-ribbon-canvas{display:block;width:100%!important;height:100%!important}
@media(max-width:680px){.ribbon-band{height:110px;margin:-55px 0}
  body.visari-mode .ribbon-band + .v-about{padding-top:120px!important}
  body.visari-mode .ribbon-band + .v-about::before{top:76px!important}}

/* Home: Who We Are section (copy of the About hero, with the particle H) above the FAQ */
body.visari-mode .home-who .about-hero-grid{padding-block:clamp(72px,8vw,110px)!important}
.home-who .v-text-link{display:inline-flex;margin-top:22px}
body.visari-mode .home-who h2{margin-bottom:18px}

/* News: featured article + card grid, each with an in-page "read the article" disclosure */
.news-section .post-feature{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:0;margin-bottom:24px;background:var(--white);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden}
.post-feature-art{display:grid;place-items:center;min-height:260px;background:radial-gradient(circle at 50% 45%,rgba(215,187,114,.35),rgba(215,187,114,0) 60%),var(--grey-60)}
.post-feature-art img{width:34%;min-width:84px;height:auto}
.post-feature-body{padding:clamp(24px,3vw,40px)}
.post-feature-body h3{margin:12px 0 0}
.post-summary{margin:12px 0 0;color:var(--color-text-muted)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;color:var(--color-text-muted)}
.post-tag{padding:3px 12px;border-radius:999px;background:var(--grey-60);color:var(--brand-navy);font-weight:700}
.post-card{display:flex;flex-direction:column;gap:0}
.post-card h3{margin:12px 0 0}
.post-more{margin-top:18px}
.post-more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 0;list-style:none;cursor:pointer;color:var(--brand-navy);font-weight:700;border-top:1px solid var(--color-border)}
.post-more summary::-webkit-details-marker{display:none}
.post-more summary>span:first-child{text-decoration:underline;text-decoration-color:var(--brand-gold);text-underline-offset:5px}
.post-more summary::after{content:"+";order:3;margin-left:auto;color:var(--brand-gold);font-size:1.4em;line-height:1}
.post-more[open] summary::after{content:"−"}
.post-more summary:focus-visible{outline:2px solid var(--brand-gold);outline-offset:4px;border-radius:4px}
.post-read{color:var(--color-text-muted);font-weight:400}
.post-text{padding-top:16px}
.post-text>*+*{margin-top:14px}
.post-text p{margin:0;color:var(--brand-ink)}
@media(max-width:860px){.news-section .post-feature{grid-template-columns:minmax(0,1fr)}.post-feature-art{min-height:170px}}
/* News card fixes: cards size to their own content, and the Sample badge sits in the corner */
.news-section .post-grid{align-items:start}
.post-card{position:relative}
.post-card .post-meta{padding-right:82px}

/* News photos */
.post-feature-art{background:var(--grey-60)}
.post-feature-art img{width:100%;min-width:0;height:100%;object-fit:cover}
.post-feature-art{display:block;min-height:280px}
.post-card{overflow:hidden;padding-top:0}
.post-card-art{margin:0 -28px 22px;aspect-ratio:16/9;overflow:hidden;background:var(--grey-60)}
.post-card-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post-card:hover .post-card-art img,.post-feature:hover .post-feature-art img{transform:scale(1.04)}
.post-feature-art{overflow:hidden}
.post-feature-art img{transition:transform .8s var(--ease)}
.post-card .post-meta{padding-right:0}
@media(prefers-reduced-motion:reduce){.post-card-art img,.post-feature-art img{transition:none}.post-card:hover .post-card-art img,.post-feature:hover .post-feature-art img{transform:none}}

/* Testimonials: quote cards */
.review-card{position:relative;padding-top:56px;border-top:3px solid var(--brand-gold)}
.review-card::before{content:"“";position:absolute;top:8px;left:24px;color:var(--brand-gold);font-family:var(--font-heading);font-size:64px;line-height:1}
.review-card blockquote p{margin:0;color:var(--brand-ink)}
.review-card figcaption{margin-top:20px;padding-top:14px;border-top:1px solid var(--color-border)}
.review-card cite{font-style:normal;color:var(--brand-navy);font-weight:700}
.review-card{display:flex;flex-direction:column}
.review-card figcaption{margin-top:auto}
.review-card blockquote{margin-bottom:20px}

/* About: "What we believe" — photo fills the left column, label sits above the heading */
body.visari-mode .manifesto-grid{align-items:center}
.manifesto-figure{margin:0;border-radius:var(--radius-card);overflow:hidden;aspect-ratio:5/4;max-height:460px;background:var(--grey-60);box-shadow:var(--shadow-card)}
.manifesto-figure img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .9s var(--ease)}
.manifesto-figure:hover img{transform:scale(1.05)}
.manifesto-grid h2{margin-top:14px}
.manifesto-grid p+p{margin-top:14px}
@media(max-width:860px){.manifesto-figure{aspect-ratio:16/10}}
@media(prefers-reduced-motion:reduce){.manifesto-figure img{transition:none}.manifesto-figure:hover img{transform:none}}
body.visari-mode .manifesto-grid h2{margin-bottom:18px}

/* Inner-page title areas: copy on the left, photo on the right */
.detail-hero-inner.has-art{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.hero-art{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-card) var(--radius-card) 96px var(--radius-card);background:var(--grey-60);box-shadow:var(--shadow-card)}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.hero-art:hover img{transform:scale(1.05)}
@media(max-width:860px){.detail-hero-inner.has-art{grid-template-columns:minmax(0,1fr)}.hero-art{aspect-ratio:16/9;border-radius:var(--radius-card) var(--radius-card) 56px var(--radius-card)}}
@media(prefers-reduced-motion:reduce){.hero-art img{transition:none}.hero-art:hover img{transform:none}}

/* Call-to-action cards that fill the last empty slot of a card grid */
.cta-card{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(24px,3vw,36px);background:var(--brand-navy);color:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.cta-card p{margin:0;color:rgba(255,255,255,.85)}
.cta-card .cta-card-title{color:var(--brand-gold-light);font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-heading);line-height:1.3}
.cta-card .btn{align-self:flex-start;margin-top:8px}
@media(min-width:1000px){.audience-cta{grid-column:span 2}}

/* Contact / appointment: "what happens next" card; privacy anchors; About intro photo */
.aside-next{margin-top:22px}
.aside-next .step-list{margin-top:4px}
.policy h2{scroll-margin-top:24px}
.who-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,90px);align-items:center}
.who-photo{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-card) var(--radius-card) 96px var(--radius-card);box-shadow:var(--shadow-card);background:var(--grey-60)}
.who-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 40%;transition:transform .9s var(--ease)}
.who-photo:hover img{transform:scale(1.05)}
@media(max-width:860px){.who-top{grid-template-columns:minmax(0,1fr)}.who-photo{aspect-ratio:16/9}}
@media(prefers-reduced-motion:reduce){.who-photo img{transition:none}.who-photo:hover img{transform:none}}

/* Enquiry forms: honeypot, consent line, status message */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.field--consent{margin-top:4px}
.consent{display:flex;align-items:flex-start;gap:12px;font-weight:400;cursor:pointer}
.consent input{flex:0 0 auto;width:20px;height:20px;margin-top:2px;accent-color:var(--brand-navy)}
.consent a{color:var(--brand-navy);text-decoration:underline;text-decoration-color:var(--brand-gold);text-underline-offset:3px}
.form-status{min-height:1.6em}
.contact-form button[disabled]{opacity:.6;cursor:progress}

/* Enquiry form states: red for what is missing, green for sent */
.field .req,.consent .req{color:var(--color-error);font-weight:700}
.field-error{margin:6px 0 0;color:var(--color-error);font-weight:500}
.field-error::before{content:"! ";font-weight:700}
.contact-form :is(input,select,textarea)[aria-invalid="true"],
.contact-form.was-checked .field :is(input,select,textarea):invalid{border:2px solid var(--color-error);background:var(--color-error-tint)}
.field:has([aria-invalid="true"]) label,.contact-form.was-checked .field:has(:is(input,select,textarea):invalid) label{color:var(--color-error)}
.contact-form.was-checked .field--consent:has(input:invalid) .consent,.field--consent:has([aria-invalid="true"]) .consent{color:var(--color-error)}
.contact-form .consent input[aria-invalid="true"],.contact-form.was-checked .consent input:invalid{outline:2px solid var(--color-error);outline-offset:2px;background:none}
.form-status[data-kind="ok"]{color:var(--color-success);font-weight:700}
.form-status[data-kind="error"]{color:var(--color-error);font-weight:500}
.contact-form button[data-submit]{transition:background .3s ease,color .3s ease,transform .3s ease}
.contact-form button[data-submit].is-sent,.contact-form button[data-submit].is-sent:hover{background:var(--color-success);border-color:var(--color-success);color:var(--white);opacity:1;cursor:default}
.contact-form button[data-submit].is-sent::before{content:"✓";margin-right:.5em;font-weight:700}
.contact-form button[data-submit].is-sending{opacity:.75}
@media(prefers-reduced-motion:reduce){.contact-form button[data-submit]{transition:none}}

/* ===== Scroll animations (assets/js/scroll-fx.js) =====
   Nothing is hidden unless the script runs. Individual `translate`/`scale` properties are used so the
   hover transforms on cards and photos keep working. Each element drops these classes when its
   entrance finishes. */
.fx-js .detail-hero .hero-copy>*,.fx-js .detail-hero .hero-art,.fx-js main>section:nth-of-type(2)>.wrap>*{opacity:0}
.fx-ready .fx{opacity:0;translate:0 32px;transition:opacity .85s var(--ease) var(--fx-d,0ms),translate .95s var(--ease) var(--fx-d,0ms)}
.fx-ready .fx.fx-sm{translate:0 14px}
.fx-ready .fx.is-in{opacity:1;translate:0 0}
.fx-ready .fx-mask{opacity:1;translate:0 0;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease) var(--fx-d,0ms)}
.fx-ready .fx-mask.is-in{clip-path:inset(0 0 0 0)}
.fx-ready .fx-mask img{scale:1.14;transition:scale 1.6s var(--ease) var(--fx-d,0ms)}
.fx-ready .fx-mask.is-in img{scale:1}
/* parallax: the photo is a little taller than its frame so it can drift without gaps */
.fx-par img{height:calc(100% + 56px);margin-block:-28px;translate:0 var(--py,0px)}
/* thin gold reading-progress bar along the top of the viewport */
.scroll-progress{position:fixed;z-index:60;top:0;left:0;right:0;height:3px;pointer-events:none;background:linear-gradient(90deg,var(--brand-gold),var(--brand-gold-light));transform-origin:left center;transform:scaleX(var(--p,0))}

/* ============================ Mobile & touch ============================ */

/* Touch screens have no hover: stop hover zooms and lifts from sticking after a tap */
@media(hover:none){
  .related-card:hover,.v-serve-grid article:hover,.btn:hover,.v-btn:hover,.cta-card:hover{transform:none!important}
  :is(.hero-art,.who-photo,.manifesto-figure,.post-card,.post-feature) :is(img):hover,
  .hero-art:hover img,.who-photo:hover img,.manifesto-figure:hover img,.post-card:hover .post-card-art img,
  .post-feature:hover .post-feature-art img,.v-about .v-split-image:hover img{transform:none!important}
  .v-about .v-split-image:hover::before{transform:none!important}
}

/* Lighter scroll animation on phones and touch: short travel, quick, plain fades for photos */
.fx-small.fx-ready .fx{translate:0 18px;transition:opacity .6s var(--ease) var(--fx-d,0ms),translate .7s var(--ease) var(--fx-d,0ms)}
.fx-small.fx-ready .fx.fx-sm{translate:0 10px}
.fx-small.fx-ready .fx.is-in{translate:0 0}
.fx-small.fx-ready .fx-mask{opacity:0;translate:0 14px;clip-path:none;transition:opacity .7s var(--ease) var(--fx-d,0ms),translate .8s var(--ease) var(--fx-d,0ms)}
.fx-small.fx-ready .fx-mask.is-in{opacity:1;translate:0 0}
.fx-small.fx-ready .fx-mask img{scale:1;transition:none}
.fx-small .fx-par img{height:100%;margin-block:0;translate:none}

@media(max-width:760px){
  /* shorter, lighter blur effects */
  .v-about.scroll-lines-ready .v-copy h2 .reveal-line{filter:blur(5px)}
  /* title photo no longer pushes the page content a full screen down */
  .hero-art{aspect-ratio:2/1;border-radius:var(--radius-card) var(--radius-card) 40px var(--radius-card)}
  .who-photo,.manifesto-figure{aspect-ratio:16/10}
  .detail-hero{padding-block:104px 32px!important}
  .page-section{padding-block:40px}
  .pin-section{padding-block:48px}
  .cta-band{padding-block:56px}
  .post-feature-art{min-height:200px}
  .audience-card,.related-card,.review-card,.post-card{padding:22px}
  .post-card{padding-top:0}
  .principle-card{padding:22px}
  .check-list li{padding-bottom:12px}
  .dot-field{opacity:.6}
}

@media(max-width:680px){
  /* Home "Who we serve": a swipe row instead of four stacked cards (about 2,000px shorter) */
  .v-serve-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;
    margin-inline:-24px;padding:4px 24px 18px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
  .v-serve-grid::-webkit-scrollbar{display:none}
  .v-serve-grid>article{flex:0 0 78%;scroll-snap-align:center}
  .v-serve-grid::after{content:"";flex:0 0 1px}
  .v-serve .v-section-intro{margin-bottom:28px}
  .v-serve{padding-block:72px!important}

  /* Footer: brand block on top, the link lists in two columns */
  .footer-top.footer-top--wide{gap:28px}
  .footer-top--wide .footer-links,.footer-top--wide .footer-links-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
  .footer-top--wide .footer-links a{padding-block:9px}
  .footer-brand img{height:84px!important}
}

/* Comfortable tap targets (at least 44px) on touch screens */
@media(pointer:coarse){
  .menu-toggle{min-width:48px;min-height:48px}
  .v-text-link,.pin-all,.audience-more,.link-dark,.aside-phone,.pin-body a,.footer-contact a,.contact-details a,
  .audience-links a,.crumbs a,.footer-links a,.footer-bottom a,.mobile-nav a,.v-serve-grid a{display:inline-flex;align-items:center;min-height:44px}
  summary{min-height:44px}
  .audience-links{gap:0 18px}
  .footer-links a{min-height:42px}
  .crumbs a{min-height:36px}
  .consent{min-height:44px;align-items:center}
  .consent input{width:24px;height:24px;margin-top:0}
  .field :is(input,select,textarea){min-height:48px}
  .post-more summary{min-height:48px}
  .pin-title{min-height:48px}
  .nav-dropdown-toggle{min-width:44px;min-height:44px}
}
@media(pointer:coarse){.audience-card h3 a{display:inline-block;padding-block:8px}}

/* Small screens: the About / Services title grids are a single column that can shrink (no 300px minimum) */
@media(max-width:960px){
  body.visari-mode :is(.about-hero-grid,.page-hero-grid){grid-template-columns:minmax(0,1fr)!important;gap:32px!important}
  body.visari-mode :is(.about-hero-grid,.page-hero-grid)>*{min-width:0}
}


/* ===== Home hero: the background is three full-width photos you can scroll sideways (assets/js/hero-slider.js) ===== */
.hero-slider{overflow:hidden}
.hero-slider-track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab;touch-action:pan-y pinch-zoom}
.hero-slider-track::-webkit-scrollbar{display:none}
.hero-slider-track:focus-visible{outline:3px solid var(--brand-gold-light);outline-offset:-6px}
.hero-slider-track.is-dragging{scroll-snap-type:none;cursor:grabbing;scroll-behavior:auto}
.hero-bg-slide{flex:0 0 100%;height:100%;margin:0;overflow:hidden;scroll-snap-align:start}
.hero-bg-slide img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
/* the overlays and the copy let sideways swipes and drags through to the photos beneath */
.v-hero-shade,.v-hero-grid,.v-hero-signal{pointer-events:none}
.v-hero-content{pointer-events:none}
.v-hero-content :is(a,button,.v-actions){pointer-events:auto}
.hero-slider-ctrl{position:absolute;z-index:4;inset:0;pointer-events:none}
.hero-slider-ctrl[hidden]{display:none}
.hero-slider-ctrl>*{pointer-events:auto}
/* arrows on the left and right sides of the hero, dots centred at the bottom */
.hero-slider-ctrl [data-hs]{position:absolute;top:50%;translate:0 -50%}
.hero-slider-ctrl [data-hs="prev"]{left:clamp(14px,2.4vw,40px)}
.hero-slider-ctrl [data-hs="next"]{right:clamp(14px,2.4vw,40px)}
.hero-slider-ctrl .hg-dots{position:absolute;left:50%;bottom:150px;translate:-50% 0}
.hg-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(34,45,101,.4);color:var(--white);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .25s ease,opacity .25s ease,transform .25s ease}
.hg-btn:hover{background:rgba(34,45,101,.7)}
.hg-btn:active{transform:scale(.94)}
.hg-btn:focus-visible{outline:2px solid var(--brand-gold-light);outline-offset:3px}
/* dots instead of a counter: the active one stretches into a gold pill */
.hg-dots{display:flex;align-items:center}
.hg-dot{position:relative;width:26px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.hg-dot::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;translate:-50% -50%;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:0 1px 8px rgba(34,45,101,.55);transition:width .4s var(--ease),background .3s ease}
.hg-dot[aria-current="true"]::before{width:26px;background:var(--brand-gold-light)}
.hg-dot:focus-visible{outline:2px solid var(--brand-gold-light);outline-offset:-4px;border-radius:8px}
@media(max-width:1100px){
  .hero-slider-ctrl [data-hs]{top:auto;bottom:128px;translate:none}
  .hero-slider-ctrl .hg-dots{bottom:128px}
}
@media(max-width:680px){
  .hero-slider-ctrl [data-hs]{bottom:112px}
  .hero-slider-ctrl .hg-dots{bottom:112px}
}

/* ===== Button hover: a glowing outline draws itself around the button ===== */
@property --edge{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn,.v-btn{position:relative;--ring:var(--brand-navy)}
/* on dark surfaces the line is light gold */
.v-hero :is(.btn,.v-btn),.cta-band .btn,.cta-card .btn,.site-footer .btn,.hero-slider-ctrl .btn{--ring:var(--brand-gold-light)}
.btn::after,.v-btn::after{
  content:"";position:absolute;inset:-6px;padding:2px;border-radius:var(--ring-r,inherit);pointer-events:none;opacity:0;
  background:conic-gradient(from calc(var(--edge) * -.5),var(--ring) 0,var(--ring) var(--edge),transparent var(--edge));
  -webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0);
  filter:drop-shadow(0 0 4px var(--ring)) drop-shadow(0 0 11px color-mix(in srgb,var(--ring) 60%,transparent));
  transition:opacity .25s ease}
@keyframes ring-draw{from{--edge:0deg}to{--edge:360deg}}
@media(hover:hover){.btn:hover::after,.v-btn:hover::after{opacity:1;animation:ring-draw .85s cubic-bezier(.4,0,.2,1) forwards}}
.btn:focus-visible::after,.v-btn:focus-visible::after{opacity:1;animation:ring-draw .85s cubic-bezier(.4,0,.2,1) forwards}
@media(prefers-reduced-motion:reduce){
  .btn::after,.v-btn::after{animation:none!important;--edge:360deg}
}


/* ===== Service and Who We Help pages (includes/detail-page.php) ===== */
.detail-hero--navy{position:relative;overflow:hidden;color:var(--white);
  background:radial-gradient(circle at 88% 18%,rgba(215,187,114,.24),rgba(215,187,114,0) 46%),linear-gradient(120deg,var(--brand-navy) 0%,var(--brand-ink) 100%)}
.detail-hero--navy .detail-lead{color:var(--white);opacity:.92}
.detail-hero--navy .crumbs ol,.detail-hero--navy .crumbs li{color:rgba(255,255,255,.75)}
.detail-hero--navy .crumbs a{color:var(--white);text-decoration-color:rgba(255,255,255,.4)}
.detail-hero--navy .crumbs li+li::before{color:rgba(255,255,255,.45)}
.detail-hero--navy .hero-art{box-shadow:0 30px 70px rgba(36,46,61,.5);outline:1px solid rgba(215,187,114,.6);outline-offset:10px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn-outline-light{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.65)}
.btn-outline-light:hover{background:rgba(255,255,255,.14);border-color:var(--white)}
.detail-hero--navy .btn{--ring:var(--brand-gold-light)}
.jump-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:30px}
.jump-label{flex:0 0 100%;margin-bottom:2px;color:var(--brand-gold-light);letter-spacing:.08em;text-transform:uppercase}
.jump-chips a{padding:7px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:var(--white);text-decoration:none;transition:background .25s ease,border-color .25s ease}
.jump-chips a:hover,.jump-chips a:focus-visible{background:rgba(255,255,255,.16);border-color:var(--brand-gold-light);outline:none}

.detail-body{background:var(--surface)}
.detail-article{max-width:none}
.detail-intro{max-width:68ch}
.detail-intro p{margin:0 0 16px;line-height:1.75}
.detail-block{position:relative;margin-top:24px;padding:30px clamp(22px,3vw,38px) 26px;background:var(--surface);border:1px solid var(--color-border);border-top:3px solid var(--brand-gold);border-radius:var(--radius-card);scroll-margin-top:110px}
.detail-block h2{margin:0 0 14px;padding-right:56px}
.detail-block p{margin:0 0 14px;max-width:68ch;line-height:1.75}
.detail-block p:last-child{margin-bottom:0}
.detail-block.is-flat{margin-top:34px;padding:0;background:none;border:0;border-radius:0}
.detail-block.is-flat h2{padding-right:0}
.block-num{position:absolute;top:22px;right:26px;color:var(--brand-gold);font-family:var(--font-heading);opacity:.55;line-height:1}
.tick-grid{list-style:none;margin:16px 0 6px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tick-grid li{position:relative;padding:13px 16px 13px 44px;background:var(--white);border:1px solid var(--color-border);border-radius:12px;line-height:1.5}
.tick-list{list-style:none;margin:10px 0 14px;padding:0;display:grid;gap:10px}
.tick-list li{position:relative;padding:2px 0 2px 32px;line-height:1.6}
.tick-grid li::before,.tick-list li::before{content:"";position:absolute;width:12px;height:7px;border-left:2px solid var(--brand-gold);border-bottom:2px solid var(--brand-gold);transform:rotate(-45deg)}
.tick-grid li::before{left:17px;top:1.2em}
.tick-list li::before{left:4px;top:.85em}

.process-band{background:var(--white)}
.process-band h2{margin:12px 0 0;max-width:22ch}
.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.process-card{padding:26px 26px 28px;background:var(--surface);border-left:3px solid var(--brand-gold);border-radius:0 var(--radius-card) var(--radius-card) 0}
.process-card h3{margin:10px 0 8px}
.process-card p{margin:0;color:var(--color-text-muted)}
.process-num{color:var(--brand-gold);font-family:var(--font-heading);font-weight:var(--fw-heading);letter-spacing:.06em}

.related-section{background:var(--surface)}
.related-card{position:relative;padding-right:52px}
.related-arrow{position:absolute;right:22px;top:50%;translate:0 -50%;font-style:normal;color:var(--brand-gold);transition:translate .3s var(--ease)}
.related-card:hover .related-arrow{translate:5px -50%}

@media(max-width:760px){
  .process-grid{grid-template-columns:minmax(0,1fr)}
  .tick-grid{grid-template-columns:minmax(0,1fr)}
  .detail-block{padding:24px 20px 22px}
  .block-num{top:18px;right:18px}
  .hero-actions .btn{flex:1 1 100%}
  .detail-hero--navy .hero-art{outline-offset:6px}
}
@media(prefers-reduced-motion:reduce){.jump-chips a,.related-arrow{transition:none}}

/* Let the navy service hero dissolve gently into the white content section below. */
.detail-hero--navy{isolation:isolate}
.detail-hero--navy::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:-1px;height:clamp(62px,8vw,112px);background:linear-gradient(180deg,rgba(34,45,101,0),var(--surface));pointer-events:none}
.detail-hero--navy .detail-hero-inner{position:relative;z-index:3}
@media(prefers-reduced-motion:reduce){.detail-hero--navy::after{height:clamp(72px,10vw,130px)}}