@charset "utf-8";
/* ============================================================================
   ATLAS · Concept 02 for Vader Barclay Consulting
   Swiss Modern. Wholly self-contained; shares nothing with the other concepts.

   Typeface system : Archivo only, a single grotesque worked across its
                     width and weight axes. No serif anywhere on the page.
   Colour          : navy and cold ice, with a signal-blue accent (no gold)
   Grid            : strict, ruled, left-aligned. Visible column hairlines.
   Radius          : zero throughout, every corner is square by intent.
   ========================================================================== */

/* --------------------------------------------------------------- 1. FONTS */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial');
  size-adjust: 101%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* -------------------------------------------------------------- 2. TOKENS */
:root {
  --ink:     #070D18;
  --navy:    #0D1729;
  --navy-2:  #14233D;
  --navy-3:  #1D3153;
  --dusty:   #3D5B87;
  --dusty-2: #6584AE;
  --dusty-3: #93A8C7;
  --dusty-4: #C2CFE0;

  --ice:     #F2F5F9;
  --ice-2:   #E6ECF4;
  --white:   #FFFFFF;

  /* Counsel blue. Atlas's whole accent story. Deliberately cold, and
     deliberately unsaturated: people arrive here with money in trouble, and
     the accent has to read as stable rather than bright. The three values are
     one hue (224°) at three lightnesses, so the family never drifts. */
  --sig:     #465B95;
  --sig-lt:  #92A3D3;
  --sig-pale:#D5DBEB;

  --bg: var(--ice); --fg: var(--navy);
  --fg-2: #43536B;
  /* Darkened from #6B7A90 in the production build: at that value the small
     labels using it (.model .sub, .model .who, .stp dt, .quote-box .role)
     measured 3.67:1 on the --ice-2 tint band, below the 4.5:1 AA minimum.
     This value clears AA on all three light grounds, 4.77 on --ice-2,
     5.18 on --ice, 5.66 on white. */
  --fg-3: #59677C;
  --line: rgba(13,23,41,.15); --line-2: rgba(13,23,41,.08);
  --accent: var(--sig);

  --t-xs: clamp(.7rem, .68rem + .1vw, .77rem);
  --t-sm: clamp(.84rem, .81rem + .16vw, .95rem);
  --t-md: clamp(1rem, .96rem + .24vw, 1.16rem);
  --t-lg: clamp(1.15rem, 1.06rem + .44vw, 1.46rem);
  --h-1:  clamp(1.35rem, 1.22rem + .64vw, 1.85rem);
  --h-2:  clamp(1.7rem, 1.42rem + 1.4vw, 2.75rem);
  --h-3:  clamp(2.2rem, 1.66rem + 2.7vw, 4.2rem);
  --h-4:  clamp(2.8rem, 1.85rem + 4.75vw, 6.4rem);
  --h-5:  clamp(3.2rem, 1.8rem + 7vw, 8rem);

  --s-1: clamp(.5rem,.47rem + .13vw,.6rem);
  --s-2: clamp(.75rem,.71rem + .19vw,.9rem);
  --s-3: clamp(1rem,.95rem + .25vw,1.19rem);
  --s-4: clamp(1.5rem,1.42rem + .38vw,1.78rem);
  --s-5: clamp(2rem,1.86rem + .7vw,2.5rem);
  --s-6: clamp(3rem,2.7rem + 1.5vw,4rem);
  --s-7: clamp(4.5rem,3.7rem + 4vw,7.5rem);
  --s-8: clamp(6rem,4.6rem + 7vw,11rem);

  --gutter: clamp(1.25rem,.85rem + 2vw,4rem);
  --maxw: 88rem;
  --ease: cubic-bezier(.22,.61,.36,1);
  --expo: cubic-bezier(.16,1,.3,1);
}
.inv { --bg: var(--navy); --fg: var(--ice); --fg-2: var(--dusty-4); --fg-3: var(--dusty-3); --line: rgba(194,207,224,.2); --line-2: rgba(194,207,224,.1); --accent: var(--sig-lt); background: var(--bg); color: var(--fg); }
.inv-deep { --bg: var(--ink); --fg: var(--ice); --fg-2: var(--dusty-4); --fg-3: var(--dusty-3); --line: rgba(194,207,224,.18); --line-2: rgba(194,207,224,.09); --accent: var(--sig-lt); background: var(--bg); color: var(--fg); }
.tint { --bg: var(--ice-2); background: var(--bg); }

/* --------------------------------------------------------------- 3. RESET */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-block-start:6rem; }
body {
  min-height:100svh; background:var(--ice); color:var(--navy);
  font-family:'Archivo','Archivo Fallback',Arial,sans-serif;
  font-size:var(--t-md); font-weight:400; line-height:1.6;
  font-variation-settings:'wdth' 100;
  letter-spacing:-.009em; font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video { display:block; max-width:100%; height:auto; }
picture { display:contents; }
ul,ol { list-style:none; padding:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:where(h1,h2,h3,h4,p,li) { overflow-wrap:break-word; text-wrap:pretty; }
:where(h1,h2,h3) { text-wrap:balance; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.vh { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip { position:absolute; top:var(--s-3); left:var(--s-3); z-index:999; padding:var(--s-2) var(--s-3); background:var(--navy); color:var(--ice); font-size:var(--t-sm); font-weight:600; transform:translateY(-250%); transition:transform 220ms var(--ease); }
.skip:focus-visible { transform:none; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;} }

/* ----------------------------------------------------------- 4. TYPOGRAPHY */
h1,h2,h3,.h1,.h2,.h3,.h4,.h5 { font-weight:700; line-height:1.02; letter-spacing:-.035em; font-variation-settings:'wdth' 92; }
.h5 { font-size:var(--h-5); }
.h4 { font-size:var(--h-4); }
.h3 { font-size:var(--h-3); }
.h2 { font-size:var(--h-2); letter-spacing:-.03em; }
.h1 { font-size:var(--h-1); line-height:1.14; letter-spacing:-.02em; font-weight:600; }
.wide { font-variation-settings:'wdth' 118; }

/* Micro label. Atlas signature: mono-ish caps, wide tracked, with a rule */
.mk {
  display:flex; align-items:center; gap:.75em;
  font-size:var(--t-xs); font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.mk::before { content:''; inline-size:1.75rem; block-size:2px; background:currentColor; flex:none; }
.mk-plain::before { content:none; }
.lede { font-size:var(--t-lg); line-height:1.48; color:var(--fg-2); max-inline-size:46ch; }

/* --------------------------------------------------------------- 5. LAYOUT */
.wrap { inline-size:min(100% - var(--gutter)*2, var(--maxw)); margin-inline:auto; }
.wrap-n { --maxw:64rem; }
.sec { padding-block:var(--s-8); }
.sec-sm { padding-block:var(--s-7); }

/* Ruled column background, the Swiss grid made visible */
.ruled { position:relative; }
.ruled::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(to right, var(--line-2) 1px, transparent 1px);
  background-size:calc(100%/6) 100%;
}
.ruled > * { position:relative; z-index:1; }

/* Section head: label, then a rule, then heading + standfirst side by side.
   Always left aligned; nothing floats in the middle of the page. */
.shead { border-block-start:2px solid var(--fg); padding-block-start:var(--s-4); margin-block-end:var(--s-6); }
.shead .mk { margin-block-end:var(--s-4); }
.shead-row { display:grid; gap:var(--s-4) var(--s-6); grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr)); align-items:start; }
.shead h2 { max-inline-size:16ch; }
.shead .sf { color:var(--fg-2); max-inline-size:52ch; }

/* ------------------------------------------------------------- 6. CONTROLS */
.btn {
  --bb:var(--navy); --bf:var(--ice); --bd:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.05em 1.85em; min-block-size:3.2rem;
  background:var(--bb); color:var(--bf); border:2px solid var(--bd);
  font-size:var(--t-sm); font-weight:700; letter-spacing:.01em; line-height:1;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color 280ms var(--ease), border-color 280ms var(--ease);
}
.btn::after { content:''; position:absolute; inset:0; z-index:-1; background:var(--accent); transform:translateX(-101%); transition:transform 460ms var(--expo); }
.btn:hover::after,.btn:focus-visible::after { transform:none; }
.btn:hover,.btn:focus-visible { color:var(--white); border-color:var(--accent); }
.btn-line { --bb:transparent; --bf:var(--fg); --bd:var(--fg); }
.btn-sig { --bb:var(--sig); --bf:var(--white); --bd:var(--sig); }
.btn-sig::after { background:var(--navy); }
.btn-sig:hover,.btn-sig:focus-visible { border-color:var(--navy); }

.alink { display:inline-flex; align-items:center; gap:.5em; font-size:var(--t-sm); font-weight:700; color:var(--accent); transition:gap 380ms var(--expo); }
.alink:hover { gap:1em; }

/* ---------------------------------------------------------------- 7. HEADER */
.site-header { position:fixed; inset-block-start:0; inset-inline:0; z-index:100; container-type:inline-size; container-name:hdr; color:var(--ice); border-block-end:1px solid transparent; transition:background-color 400ms var(--ease),border-color 400ms var(--ease); }
.site-header::before { content:''; position:absolute; inset-block-start:0; inset-inline:0; block-size:180%; background:linear-gradient(to bottom,rgba(7,13,24,.7),transparent); z-index:-1; pointer-events:none; transition:opacity 380ms var(--ease); }
.site-header.stuck { background:rgba(13,23,41,.94); backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px); border-block-end-color:rgba(194,207,224,.18); }
.site-header.stuck::before { opacity:0; }
.hdr-in { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding-block:clamp(.85rem,.65rem + .8vw,1.3rem); }
.brand img { inline-size:auto; block-size:clamp(3.1rem,2.5rem + 2.3vw,4.6rem); }
.nav { display:flex; align-items:center; gap:clamp(1rem,.4rem + 1.6vw,2.3rem); }
.nav a { font-size:var(--t-sm); font-weight:600; letter-spacing:-.005em; position:relative; padding-block:.3rem; white-space:nowrap; opacity:.9; }
.nav a::after { content:''; position:absolute; inset-block-end:0; inset-inline-start:0; inline-size:0; block-size:2px; background:var(--sig-lt); transition:inline-size 340ms var(--expo); }
.nav a:hover { opacity:1; } .nav a:hover::after { inline-size:100%; }
.nav-btn { display:none; inline-size:2.9rem; block-size:2.9rem; place-items:center; border:2px solid rgba(194,207,224,.34); }
.nav-btn i { display:block; inline-size:1.1rem; block-size:2px; background:currentColor; position:relative; }
.nav-btn i::before,.nav-btn i::after { content:''; position:absolute; inset-inline:0; block-size:2px; background:currentColor; transition:transform 320ms var(--expo); }
.nav-btn i::before{top:-6px;} .nav-btn i::after{top:6px;}
[aria-expanded='true'].nav-btn i { background:transparent; }
[aria-expanded='true'].nav-btn i::before{transform:translateY(6px) rotate(45deg);}
[aria-expanded='true'].nav-btn i::after{transform:translateY(-6px) rotate(-45deg);}
@container hdr (inline-size < 62rem){
  .nav-btn{display:grid;}
  /* The panel starts at the top rather than centring its links, so the eye
     lands on the first item instead of hunting the middle of the screen.
     A footer block is pinned to the bottom so a short menu never reads as an
     empty column. */
  .nav{position:fixed;inset-block-start:0;inset-inline-end:0;inline-size:min(23rem,100%);block-size:100svh;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:calc(var(--s-6) + 3.4rem) var(--gutter) var(--s-5);background:var(--navy);transform:translateX(101%);visibility:hidden;transition:transform 500ms var(--expo),visibility 0s linear 500ms;overflow-y:auto;overscroll-behavior:contain;box-shadow:-30px 0 80px rgba(7,13,24,.5);}
  .nav[data-open='true']{transform:none;visibility:visible;transition:transform 500ms var(--expo),visibility 0s;}
  /* Was --h-2 (up to 2.75rem), which overwhelmed a phone. This tops out just
     above the body size and stays comfortably above the 44px touch target. */
  .nav a{font-size:var(--t-lg);font-weight:600;letter-spacing:-.015em;padding-block:.85rem;border-block-end:1px solid rgba(194,207,224,.14);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);}
  .nav a::before{content:'';inline-size:0;block-size:1px;background:var(--sig-lt);transition:inline-size 340ms var(--expo);order:2;}
  .nav a:hover::before,.nav a[aria-current='page']::before{inline-size:1.4rem;}
  .nav a::after{content:none;}
  .nav .btn{margin-block-start:var(--s-5);font-size:var(--t-sm);border-block-end:0;justify-content:center;}
  .nav .btn::before{content:none;}
  .nav .nav-foot{display:grid;gap:var(--s-2);margin-block-start:auto;padding-block-start:var(--s-5);border-block-start:1px solid rgba(194,207,224,.16);}
  .nav .nav-foot a{font-size:var(--t-sm);font-weight:400;padding-block:0;border-block-end:0;color:var(--dusty-4);display:block;}
  .nav .nav-foot a::before{content:none;}
  .nav .nav-foot p{font-size:var(--t-xs);line-height:1.55;color:var(--dusty-3);}
  .nav .nav-foot .h{font-size:var(--t-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sig-lt);}
}
/* The menu footer exists only inside the collapsed panel. */
.nav-foot{display:none;}

/* ----------------------------------------------------------------- 8. HERO */
.hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,29rem),1fr)); min-block-size:100svh; background:var(--navy); }
.hero-pane { container-type:inline-size; container-name:hp; display:grid; align-content:center; gap:var(--s-4); padding:calc(var(--s-5) + 4.5rem) clamp(1.25rem,.7rem + 3vw,4.5rem) var(--s-5); color:var(--ice); position:relative; }
.hero-pane::after { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(to right,rgba(194,207,224,.06) 1px,transparent 1px); background-size:25% 100%; }
.hero-pane > * { position:relative; z-index:1; }
/* Sized against the PANE, not the viewport: in a split hero the headline
   must respond to the column it actually occupies. */
.hero h1 { font-size:clamp(2.2rem, 10.5cqi, 4.6rem); max-inline-size:14ch; color:var(--white); }
.hero h1 span { color:var(--sig-lt); }
.hero-lede { color:var(--dusty-4); font-size:var(--t-lg); max-inline-size:38ch; line-height:1.46; }
.hero-cta { display:flex; flex-wrap:wrap; gap:var(--s-3); }
.hero-fig { position:relative; min-block-size:clamp(20rem,50svh,100%); }
.hero-fig img { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
.hero-fig::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,rgba(13,23,41,.55),transparent 45%); }
.hero-tags { display:flex; flex-wrap:wrap; gap:var(--s-2); padding-block-start:var(--s-4); border-block-start:1px solid rgba(194,207,224,.22); }
.hero-tags li { font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--dusty-3); border:1px solid rgba(194,207,224,.24); padding:.35em .8em; }

/* --------------------------------------------------- 9. ENGAGEMENT MODELS */
/* Replaces the counter block: how you can actually buy the work. */
.models { display:grid; gap:1px; background:var(--line); grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); border:1px solid var(--line); }
.model { background:var(--bg); padding:var(--s-5) var(--s-4); display:grid; gap:var(--s-3); align-content:start; position:relative; transition:background-color 380ms var(--ease); }
.model:hover { background:var(--white); }
.inv .model:hover { background:var(--navy-2); }
.model .tag { display:inline-flex; align-items:center; gap:.5em; font-size:var(--t-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.model h3 { font-size:var(--h-2); }
.model .sub { font-size:var(--t-sm); color:var(--fg-3); }
.model p { font-size:var(--t-sm); color:var(--fg-2); line-height:1.6; }
.model ul { display:grid; gap:.4rem; padding-block-start:var(--s-2); border-block-start:1px solid var(--line); }
.model li { font-size:var(--t-sm); color:var(--fg-2); display:flex; gap:.6em; align-items:baseline; }
.model li::before { content:''; inline-size:6px; block-size:2px; background:var(--accent); flex:none; translate:0 -.3em; }
.model .who { font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); padding-block-start:var(--s-2); }

/* -------------------------------------------------- 10. SERVICES (sticky) */
/* The left column must STRETCH to the row height, otherwise it is only as tall
   as its own content and the sticky child has no distance to travel, it sits
   at the top with a long blank beneath it. */
.svc-layout { display:grid; gap:var(--s-6); grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); align-items:stretch; }
.svc-col { block-size:100%; }
.svc-stick { position:sticky; inset-block-start:clamp(6rem,5rem + 3vw,8.5rem); display:grid; gap:var(--s-4); align-content:start; }
.svc-list { display:grid; border-block-start:2px solid var(--fg); }
.svc-item { border-block-end:1px solid var(--line); padding-block:var(--s-4); display:grid; gap:var(--s-2); grid-template-columns:3rem 1fr; column-gap:var(--s-3); transition:background-color 380ms var(--ease); }
.svc-item:hover { background:var(--line-2); }
.svc-item .n { font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; color:var(--accent); font-variant-numeric:tabular-nums; padding-block-start:.45em; }
.svc-item .body { grid-column:2; display:grid; gap:var(--s-2); }
.svc-item h3 { font-size:var(--h-2); }
.svc-item p { font-size:var(--t-sm); color:var(--fg-2); max-inline-size:56ch; }
.svc-item ul { display:flex; flex-wrap:wrap; gap:.35rem .4rem; }
.svc-item li { font-size:var(--t-xs); letter-spacing:.04em; color:var(--fg-3); border:1px solid var(--line); padding:.3em .65em; }

/* ------------------------------------------------------------- 11. METHOD */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.stp { background:var(--bg); padding:var(--s-5) var(--s-4); display:grid; gap:var(--s-2); align-content:start; }
.stp .n { font-size:var(--h-3); font-weight:800; line-height:1; letter-spacing:-.045em; color:var(--accent); font-variation-settings:'wdth' 78; }
.stp h3 { font-size:var(--h-1); }
.stp p { font-size:var(--t-sm); color:var(--fg-2); line-height:1.6; }
.stp dl { display:grid; gap:.2rem; padding-block-start:var(--s-2); border-block-start:1px solid var(--line); font-size:var(--t-xs); }
.stp dt { letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.stp dd { font-weight:700; }

/* ------------------------------------------------------ 12. PROOF / QUOTE */
.pgrid { display:grid; gap:var(--s-6); grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); align-items:center; }
.pgrid img { inline-size:100%; aspect-ratio:4/3; object-fit:cover; }
.checks { display:grid; gap:var(--s-3); }
.checks li { display:grid; grid-template-columns:1.6rem 1fr; gap:var(--s-2); font-size:var(--t-md); color:var(--fg-2); align-items:start; }
.checks svg { inline-size:1.2rem; block-size:1.2rem; color:var(--accent); margin-block-start:.3em; }
.quote-box { border:2px solid var(--fg); padding:var(--s-5); display:grid; gap:var(--s-3); }
.quote-box blockquote { font-size:var(--h-1); font-weight:600; line-height:1.35; letter-spacing:-.018em; }
.quote-box figcaption { display:flex; align-items:center; gap:var(--s-3); padding-block-start:var(--s-3); border-block-start:1px solid var(--line); }
.quote-box img { inline-size:3rem; block-size:3rem; border-radius:50%; object-fit:cover; flex:none; aspect-ratio:auto; }
.quote-box cite { font-style:normal; font-weight:700; font-size:var(--t-sm); display:block; }
.quote-box .role { font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); }

/* ----------------------------------------------------------- 13. INSIGHTS */
.posts { display:grid; gap:var(--s-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); }
.post { display:grid; gap:var(--s-2); align-content:start; }
.post .pic { overflow:hidden; }
.post .pic img { inline-size:100%; aspect-ratio:16/10; object-fit:cover; transition:transform 900ms var(--expo); }
.post:hover .pic img { transform:scale(1.05); }
.post .k { font-size:var(--t-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-block-start:var(--s-2); }
.post h3 { font-size:var(--h-1); transition:color 280ms var(--ease); }
.post:hover h3 { color:var(--accent); }
.post p { font-size:var(--t-sm); color:var(--fg-2); }

/* ---------------------------------------------------------------- 14. FAQ */
.faq { border-block-start:2px solid var(--fg); }
.faq-item { border-block-end:1px solid var(--line); }
.faq-q { inline-size:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); padding-block:var(--s-4); text-align:start; font-size:var(--h-1); font-weight:600; letter-spacing:-.018em; line-height:1.25; transition:color 240ms var(--ease); }
.faq-q:hover { color:var(--accent); }
.faq-ic { flex:none; inline-size:1.3rem; block-size:1.3rem; position:relative; margin-block-start:.35em; }
.faq-ic::before,.faq-ic::after { content:''; position:absolute; inset-block-start:50%; inset-inline-start:50%; background:currentColor; transition:transform 400ms var(--expo),opacity 280ms var(--ease); }
.faq-ic::before { inline-size:.85rem; block-size:2px; transform:translate(-50%,-50%); }
.faq-ic::after { inline-size:2px; block-size:.85rem; transform:translate(-50%,-50%); }
[aria-expanded='true'] .faq-ic::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows 440ms var(--expo); }
.faq-a[data-open='true'] { grid-template-rows:1fr; }
.faq-a > div { overflow:hidden; }
.faq-a p { padding-block-end:var(--s-4); max-inline-size:62ch; color:var(--fg-2); }

/* ---------------------------------------------------------------- 15. CTA */
.cta-in { display:grid; gap:var(--s-6); grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); align-items:center; }
.cta h2 { font-size:var(--h-4); color:var(--white); max-inline-size:14ch; }
.cta h2 span { color:var(--sig-lt); }
.cta p { color:var(--dusty-4); max-inline-size:46ch; }
.cta-panel { border:2px solid rgba(194,207,224,.26); padding:var(--s-5); display:grid; gap:var(--s-4); }
.cta-panel dl { display:grid; gap:0; }
.cta-panel dl > div { display:grid; gap:.2rem; padding-block:var(--s-3); border-block-end:1px solid rgba(194,207,224,.16); }
.cta-panel dl > div:last-child { border-block-end:0; padding-block-end:0; }
.cta-panel dt { font-size:var(--t-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sig-lt); }
.cta-panel dd { font-size:var(--t-md); color:var(--ice); }

/* ------------------------------------------- 16. SECTION DIVIDER + FOOTER */
/* The CTA and the footer are both dark; this measured rule separates them so
   the eye can tell where one section ends and the next begins. */
.divider { background:var(--ink); padding-block:var(--s-5); }
/* Wraps rather than forcing a minimum width: the two labels must be able to
   stack when the viewport is narrow, or they set the page's scroll width. */
.divider-in { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2) var(--s-4); }
.divider-in span { font-size:var(--t-xs); font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--dusty-2); }
/* The divider sits on --ink, so its marks take the light end of the family;
   the base blue is too deep to register against near-black. */
.divider-in i { display:block; block-size:1px; flex:1 1 3rem; min-inline-size:2rem; background:linear-gradient(to right,var(--sig-lt) 0,rgba(194,207,224,.2) 22%,rgba(194,207,224,.2) 100%); }
.divider-in em { font-style:normal; inline-size:8px; block-size:8px; background:var(--sig-lt); flex:none; }

.site-footer { background:var(--ink); color:var(--ice); padding-block:var(--s-6) var(--s-5); }
.site-footer a { color:var(--dusty-4); transition:color 220ms var(--ease); }
.site-footer a:hover { color:var(--sig-lt); }
.foot-top { display:grid; gap:var(--s-6); grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.foot-h { font-size:var(--t-xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--dusty-2); margin-block-end:var(--s-3); }
.foot-list { display:grid; gap:.45rem; font-size:var(--t-sm); }
.foot-btm { display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); justify-content:space-between; font-size:var(--t-xs); color:var(--dusty-2); margin-block-start:var(--s-5); padding-block-start:var(--s-4); border-block-start:1px solid rgba(194,207,224,.16); }

/* ---------------------------------------------------------- 17. UTILITIES */
[data-rev] { opacity:0; transform:translateY(16px); transition:opacity 800ms var(--expo),transform 800ms var(--expo); transition-delay:var(--rd,0ms); }
[data-rev].in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-rev]{opacity:1;transform:none;} }
.defer { content-visibility:auto; contain-intrinsic-size:auto 900px; }
::selection { background:var(--sig); color:var(--white); }

/* Service headings became links when the concept became a multi-page site.
   Colour only, no box, no layout change, so the approved page is untouched. */
.svc-item h3 a { transition:color 240ms var(--ease); }
.svc-item h3 a:hover { color:var(--accent); }

/* The hero is a dark band that does not carry .inv, so --accent stays the deep
   counsel blue and the eyebrow measured 2.72:1 on navy. Every other dark
   section resolves --accent to the light tint; the hero now matches them. */
.hero .mk { color: var(--sig-lt); }

/* Print: content-visibility can drop skipped subtrees from the printed page,
   and the reveal state would print blank. Both are forced back. */
@media print {
  .defer { content-visibility: visible !important; }
  [data-rev] { opacity: 1 !important; transform: none !important; }
  .site-header, .skip { display: none !important; }
}

/* Social marks in the footer. Brand glyphs are filled silhouettes rather than
   the site's stroked icon system, that is how they stay recognisable at
   19px. Held in a muted dusty tone so the row reads as a quiet index against
   the near-black ground, then lifting to the light accent and growing very
   slightly on hover. flex-wrap:nowrap keeps all five on one line; the marks
   shrink before they wrap. */
.soc { display: flex; align-items: center; gap: clamp(.15rem, .4vw, .5rem); flex-wrap: nowrap; }
.soc li { flex: 0 1 auto; min-inline-size: 0; }
.site-footer .soc a {
  display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  color: var(--dusty-2); cursor: default;
  transition: color 300ms var(--ease), transform 420ms var(--expo);
}
.soc svg { inline-size: 1.2rem; block-size: 1.2rem; fill: currentColor; stroke: none; }
.site-footer .soc a:hover, .site-footer .soc a:focus-visible {
  color: var(--sig-lt); transform: scale(1.16);
}
/* Once a profile URL is added the element becomes a real link, give it the
   pointer it has earned. */
.site-footer .soc a[href] { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .site-footer .soc a:hover { transform: none; } }

/* Name, address and telephone in the footer, the conventional place for it,
   and the one search engines read for a local business record. */
.foot-addr { font-style: normal; font-size: var(--t-sm); line-height: 1.7;
  color: var(--dusty-2); margin-block-start: var(--s-4); }
.foot-addr a { color: var(--dusty-2); }
.foot-addr a:hover { color: var(--sig-lt); }