/* ==========================================================================
   SKYLIGHTS ON SEA
   Art direction: daylight shown against the dark.
   Governing colour rule: Sun lives on ink. Ink lives on chalk.
   ========================================================================== */

:root{
  /* --- grounds --- */
  --c-ink:#0C1B26;
  --c-water:#12293A;
  --c-chalk:#F4F1E9;
  --c-paper:#FFFFFF;

  /* --- accent --- */
  --c-sun:#E9C33F;
  --c-sun-deep:#C9A32B;
  --c-sun-wash:#F7E9B8;

  /* --- type --- */
  --c-ink-text:#1A2730;
  --c-light-text:#CDD9E1;
  --c-muted:#59656E;
  --c-muted-light:#8FA3B0;

  /* --- support --- */
  --c-steel:#5E93A8;
  --c-steel-dark:#3A6478;
  --c-hair-dark:#2A4459;
  --c-hair-light:#DED8CB;

  /* --- semantic (form + alert components only) --- */
  --c-success:#2E7D52;
  --c-warning:#9A6414;
  --c-danger:#B93A2B;

  /* --- spacing scale: the ONLY vertical/horizontal steps --- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* --- section padding by tier --- */
  --pad-hero:clamp(64px,9vw,128px);
  --pad-major:clamp(48px,6.5vw,96px);
  --pad-minor:clamp(32px,4vw,64px);

  /* --- containers --- */
  --w-prose:68ch;
  --w-standard:1140px;
  --w-wide:1320px;

  /* --- type scale (major third) --- */
  --fs-eyebrow:13px;
  --fs-sm:15px;
  --fs-base:17px;
  --fs-lg:clamp(19px,1.6vw,21px);
  --fs-xl:clamp(23px,2.1vw,27px);
  --fs-2xl:clamp(27px,2.8vw,33px);
  --fs-3xl:clamp(32px,3.8vw,42px);
  --fs-4xl:clamp(38px,5vw,52px);
  --fs-5xl:clamp(44px,7.5vw,82px);

  --display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Source Serif 4',Georgia,'Times New Roman',serif;

  --head-h:64px;
  --radius:4px;
}

/* --------------------------------------------------------------- reset --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--c-chalk);color:var(--c-ink-text);
  font-family:var(--body);font-size:var(--fs-base);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:800;line-height:1.14;letter-spacing:-.025em;margin:0 0 var(--s-4)}
h1{font-size:var(--fs-4xl)}
h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-2xl)}
h4{font-size:var(--fs-xl);font-weight:700}
p,ul,ol,table,figure,blockquote{margin:0 0 var(--s-4)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
strong,b{font-weight:600}
hr{border:0;height:1px;background:var(--c-hair-light);margin:var(--s-7) 0}

.wrap{width:100%;max-width:var(--w-wide);margin:0 auto;padding-inline:var(--s-6)}
.wrap--standard{max-width:var(--w-standard)}
.prose{max-width:var(--w-prose)}

.eyebrow{
  font-family:var(--display);font-weight:700;font-size:var(--fs-eyebrow);
  text-transform:uppercase;letter-spacing:.14em;line-height:1;margin:0 0 var(--s-4);
}
.lede{font-size:var(--fs-lg);line-height:1.55}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--c-sun);
  color:var(--c-ink);padding:var(--s-3) var(--s-5);font-family:var(--display);font-weight:700;
}
.skip:focus{left:var(--s-4);top:var(--s-4)}

:focus-visible{outline:2px solid var(--c-sun);outline-offset:2px}
.on-chalk :focus-visible,.site-foot :focus-visible{outline-color:var(--c-sun)}

/* ------------------------------------------------------------- buttons --- */
.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.01em;padding:var(--s-3) var(--s-5);border-radius:var(--radius);
  border:0;cursor:pointer;text-decoration:none;transition:background .16s ease,transform .16s ease;
}
.btn--primary{background:var(--c-sun);color:var(--c-ink)}
.btn--primary:hover,.btn--primary:focus{background:var(--c-sun-deep);color:var(--c-ink)}
.btn--ghost{background:transparent;color:var(--c-sun);border:1.5px solid var(--c-sun)}
.btn--ghost:hover{background:rgba(233,195,63,.1)}
.btn--ghost-ink{background:transparent;color:var(--c-ink-text);border:1.5px solid var(--c-ink-text)}
.btn--ghost-ink:hover{background:rgba(26,39,48,.06)}
.btn--sm{padding:9px 16px;font-size:14px}
.inline-cta{margin:var(--s-6) 0}

/* ---------------------------------------------------------- site header --- */
.site-head{background:var(--c-ink);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--c-hair-dark)}
.site-head__bar{display:flex;align-items:center;gap:var(--s-6);min-height:var(--head-h)}

.lockup{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.lockup .mk{width:26px;height:26px;flex:none}
.lockup__wm{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;color:#fff;line-height:1;white-space:nowrap}

.site-nav{display:flex;align-items:center;gap:var(--s-6);margin-left:auto}
.site-nav__list{display:flex;align-items:center;gap:var(--s-5);list-style:none;margin:0;padding:0}
.site-nav__list > li{position:relative}
.site-nav__list > li > a{
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--c-light-text);
  text-decoration:none;white-space:nowrap;display:block;padding:20px 0;position:relative;
}
.site-nav__list > li > a:hover,.site-nav__list > li > a:focus{color:#fff}
.site-nav__list > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;background:var(--c-sun);
  transform:scaleX(0);transform-origin:left;transition:transform .16s ease;
}
.site-nav__list > li > a:hover::after,.site-nav__list > li.is-current > a::after{transform:scaleX(1)}

/* services / areas dropdown */
.has-drop > a{padding-right:14px}
.has-drop > a::before{
  content:"";position:absolute;right:0;top:50%;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
}
.drop{
  position:absolute;top:100%;left:calc(var(--s-4) * -1);min-width:280px;background:var(--c-water);
  border:1px solid var(--c-hair-dark);border-top:2px solid var(--c-sun);
  padding:var(--s-4);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:110;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.drop--wide{min-width:440px}
.has-drop:hover > .drop,.has-drop:focus-within > .drop,.has-drop.is-open > .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop__list{list-style:none;margin:0;padding:0}
.drop__list--cols{columns:2;column-gap:var(--s-5)}
.drop__list a{
  display:block;padding:7px 8px;font-family:var(--display);font-weight:400;font-size:14.5px;
  color:var(--c-light-text);text-decoration:none;border-radius:3px;break-inside:avoid;
}
.drop__list a:hover,.drop__list a:focus{background:rgba(233,195,63,.12);color:#fff}
.drop__all{
  display:inline-block;margin-top:var(--s-3);padding:6px 8px;font-family:var(--display);
  font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-sun);text-decoration:none;
}
.drop__all:hover{text-decoration:underline}

.site-nav__cta{display:flex;align-items:center;gap:var(--s-4);flex:none}
.site-nav__phone{font-family:var(--display);font-weight:700;font-size:15px;color:var(--c-sun);text-decoration:none;white-space:nowrap}
.site-nav__phone:hover{text-decoration:underline}

.burger{display:none;margin-left:auto;background:transparent;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --------------------------------------------------------------- media ---
   BLOCK LEVEL ONLY. Never float. The generator emits 1024x1024 squares, so
   every content image is cropped here, in CSS.
   ------------------------------------------------------------------------ */
.media{margin:var(--s-7) auto;max-width:100%}
.media img{width:100%;object-fit:cover;display:block;background:var(--c-water)}
.media--banner{width:100%}
.media--banner img{aspect-ratio:16/9;object-position:50% 58%}
.media--inset{width:84%}
.media--inset img{aspect-ratio:3/2;object-position:50% 55%}
.media--hero{margin:0}
.media--hero img{aspect-ratio:16/9;object-position:50% 60%}
.media figcaption{
  font-family:var(--body);font-size:var(--fs-sm);color:var(--c-muted);
  text-align:center;margin-top:var(--s-3);line-height:1.5;
}
.on-ink .media figcaption,.hero .media figcaption{color:var(--c-muted-light)}

/* signature treatment: framed plate — a Sun hairline offset from the image */
.plate{position:relative;padding:8px}
.plate::after{content:"";position:absolute;inset:0;border:1px solid var(--c-sun);pointer-events:none}
.on-chalk .plate::after{border-color:var(--c-ink-text)}

.img-placeholder{
  aspect-ratio:16/9;background:var(--c-water);border:1px dashed var(--c-hair-dark);
  display:flex;align-items:center;justify-content:center;color:var(--c-muted-light);
  font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
}

/* --------------------------------------------------------------- heroes --- */
.hero{background:var(--c-ink);color:var(--c-light-text);padding-block:var(--pad-hero);position:relative}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-8);align-items:center}
.hero--stack .hero__in{grid-template-columns:1fr;max-width:var(--w-standard)}
.hero .eyebrow{color:var(--c-sun);display:flex;align-items:center;gap:var(--s-4)}
.hero .eyebrow .ln{flex:1;height:1px;background:var(--c-sun);opacity:.55;max-width:120px}
.hero h1{color:#fff;font-size:var(--fs-5xl);letter-spacing:-.035em;line-height:1.04}
.hero--inner h1{font-size:var(--fs-4xl);line-height:1.08}
.hero .lede{color:var(--c-light-text);margin-top:var(--s-5);max-width:52ch}
.hero__cta{display:flex;gap:var(--s-4);margin-top:var(--s-7);flex-wrap:wrap;align-items:center}

/* Grid, not flex-wrap. With flex-wrap the third item orphaned onto its own row
   at common hero widths, which read as a layout bug rather than a design. */
.proof-strip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);
  margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--c-hair-dark);
}
.proof-strip div{font-family:var(--display);font-weight:700;font-size:13px;color:var(--c-light-text);letter-spacing:.02em}
.proof-strip b{display:block;color:var(--c-sun);font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:2px}

/* ------------------------------------------------------------- sections --- */
.sec{padding-block:var(--pad-major)}
.sec--minor{padding-block:var(--pad-minor)}
.on-ink{background:var(--c-ink);color:var(--c-light-text)}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:#fff}
.on-ink .eyebrow{color:var(--c-sun)}
.on-water{background:var(--c-water);color:var(--c-light-text)}
.on-water h2,.on-water h3{color:#fff}
.on-water .eyebrow{color:var(--c-sun)}
.on-chalk{background:var(--c-chalk);color:var(--c-ink-text)}
.on-chalk .eyebrow{color:var(--c-muted)}
.on-paper{background:var(--c-paper)}

.sec-head{display:flex;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-6)}
.sec-head__line{flex:1;height:1px;background:var(--c-hair-light)}
.on-ink .sec-head__line,.on-water .sec-head__line{background:var(--c-hair-dark)}

/* split editorial */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
.split--media-first .split__media{order:-1}

/* pull-stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
.stats .st b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,40px);color:var(--c-sun);letter-spacing:-.03em;line-height:1}
.stats .st span{display:block;font-family:var(--display);font-weight:700;font-size:13px;color:var(--c-light-text);margin-top:var(--s-2);line-height:1.4}

/* ---------------------------------------------------------------- cards --- */
.cards{display:grid;gap:var(--s-5)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}

.card{padding:var(--s-6);position:relative;text-decoration:none;display:block;transition:transform .18s ease,box-shadow .18s ease}
.card h3,.card h4{margin-bottom:var(--s-3);font-size:var(--fs-xl);font-weight:700}
.card p{font-size:var(--fs-sm);line-height:1.6;margin-bottom:0}

.on-ink .card,.on-water .card,.card--ink{background:var(--c-water);border:1px solid var(--c-hair-dark);color:var(--c-light-text)}
.on-ink .card h3,.on-ink .card h4,.card--ink h3,.card--ink h4{color:#fff}
.on-ink .card::before,.card--ink::before{
  content:"";position:absolute;inset:-1px -1px auto -1px;height:2px;background:var(--c-sun);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease;
}
.on-ink .card:hover::before,.card--ink:hover::before{transform:scaleX(1)}

.on-chalk .card,.on-paper .card,.card--chalk{background:var(--c-paper);border:1px solid var(--c-hair-light);color:var(--c-ink-text)}
.on-chalk .card h3,.on-chalk .card h4,.card--chalk h3,.card--chalk h4{color:var(--c-ink-text)}
.on-chalk .card p,.card--chalk p{color:var(--c-muted)}
.on-chalk .card:hover,.card--chalk:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(12,27,38,.13)}

.card__meta{font-family:var(--display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--c-sun);margin-bottom:var(--s-3);display:block}
.on-chalk .card__meta,.card--chalk .card__meta{color:var(--c-steel-dark)}
.card__img{margin:calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5)}
.card__img img{aspect-ratio:16/9;object-fit:cover;width:100%}

/* ------------------------------------------------------------- long read --- */
.longread{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s-8);align-items:start}
.longread--no-toc{grid-template-columns:minmax(0,1fr)}

/* When a rail wraps the contents nav plus the quote card, the RAIL is sticky
   and the nav inside it is static, so both scroll together as one column. */
.longread__rail{position:sticky;top:calc(var(--head-h) + var(--s-5))}
.longread__rail .toc{position:static;max-height:min(52vh,520px)}

.toc{position:sticky;top:calc(var(--head-h) + var(--s-5));border-left:1px solid var(--c-hair-light);padding-left:var(--s-5);max-height:calc(100vh - var(--head-h) - var(--s-8));overflow-y:auto}
.toc .eyebrow{color:var(--c-muted);margin-bottom:var(--s-4)}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{position:relative}
.toc a{
  display:flex;gap:var(--s-3);align-items:baseline;padding:7px 0;
  font-family:var(--display);font-weight:700;font-size:14px;line-height:1.35;
  color:var(--c-muted);text-decoration:none;transition:color .16s ease;
}
.toc a:hover{color:var(--c-ink-text)}
.toc__n{font-size:11px;color:var(--c-hair-light);flex:none}
.toc li.is-active a{color:var(--c-ink-text)}
.toc li.is-active .toc__n{color:var(--c-sun-deep)}
.toc li.is-active::after{content:"";position:absolute;left:calc(var(--s-5) * -1 - 1px);top:6px;bottom:6px;width:2px;background:var(--c-sun)}

.longread__body{max-width:var(--w-prose)}
.longread__body > *{max-width:var(--w-prose)}
.longread__body .media{max-width:100%}

h2.chapter{
  display:flex;align-items:baseline;gap:var(--s-4);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--c-hair-light);
  margin-top:var(--s-9);margin-bottom:var(--s-5);scroll-margin-top:calc(var(--head-h) + var(--s-5));
}
h2.chapter:first-child{margin-top:0}
.chapter__n{font-family:var(--display);font-weight:800;font-size:var(--fs-2xl);color:var(--c-sun-deep);line-height:1;flex:none}
.on-ink h2.chapter{border-bottom-color:var(--c-hair-dark)}
.on-ink .chapter__n{color:var(--c-sun)}

.longread__body h3{margin-top:var(--s-7)}
.longread__body p + h3,.longread__body ul + h3{margin-top:var(--s-7)}
.longread__body a{color:var(--c-ink-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:var(--c-sun-deep)}
.longread__body a:hover{text-decoration-thickness:2px}
.longread__body ul,.longread__body ol{padding-left:var(--s-5)}
.longread__body li{margin-bottom:var(--s-2)}

.standfirst{font-size:var(--fs-lg);line-height:1.55;color:var(--c-muted);margin-bottom:var(--s-6)}
.on-ink .standfirst{color:var(--c-muted-light)}

/* intro band above the long read */
.intro-band{background:var(--c-ink);color:var(--c-light-text);padding-block:var(--pad-major)}
.intro-band h2{color:#fff}
.intro-band .lede{max-width:60ch}

/* tables — designed features, not appendices */
.longread__body table,.tbl{
  border-collapse:collapse;width:100%;margin:var(--s-6) 0;
  font-family:var(--display);font-size:var(--fs-sm);
}
.longread__body thead th,.tbl thead th{
  background:var(--c-water);color:#fff;font-weight:700;text-align:left;
  padding:var(--s-3) var(--s-4);letter-spacing:.01em;
}
.longread__body tbody td,.tbl tbody td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--c-hair-light);background:var(--c-paper)}
.longread__body tbody tr.hi td,.tbl tbody tr.hi td{background:var(--c-sun-wash);font-weight:700}
.longread__body td:nth-child(n+2),.tbl td.num{text-align:right}
.longread__body td:last-child,.tbl td:last-child{text-align:left}
.table-scroll{overflow-x:auto;margin:var(--s-6) 0}

/* callouts */
.callout{background:var(--c-sun-wash);padding:var(--s-5) var(--s-6);margin:var(--s-6) 0;border-left:3px solid var(--c-sun-deep)}
.callout .eyebrow{color:var(--c-ink-text);margin-bottom:var(--s-2)}
.callout p:last-child{margin-bottom:0}
.on-ink .callout{background:var(--c-water);border-left-color:var(--c-sun)}
.on-ink .callout .eyebrow{color:var(--c-sun)}

/* faq */
.faq{border-top:1px solid var(--c-hair-light)}
.faq details{border-bottom:1px solid var(--c-hair-light);padding:var(--s-4) 0}
.faq summary{font-family:var(--display);font-weight:700;font-size:var(--fs-base);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--c-sun-deep);flex:none;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:var(--s-3);margin-bottom:0;color:var(--c-muted)}

/* sidebar quote card */
.quote-card{background:var(--c-ink);color:var(--c-light-text);padding:var(--s-6);border-top:3px solid var(--c-sun)}
.quote-card h3,.quote-card__t{font-family:var(--display);font-weight:800;color:#fff;font-size:var(--fs-xl);margin:0 0 var(--s-3);letter-spacing:-.02em;line-height:1.15}
.quote-card p{font-size:var(--fs-sm);margin-bottom:var(--s-4)}
.quote-card .btn{width:100%;text-align:center}
.quote-card__phone{display:block;margin-top:var(--s-4);font-family:var(--display);font-weight:700;color:var(--c-sun);text-decoration:none;text-align:center}

/* breadcrumb */
.crumb{padding-block:var(--s-4)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;font-family:var(--display);font-size:13px;color:var(--c-muted-light)}
.crumb li+li::before{content:"/";margin-right:var(--s-2);opacity:.5}
.crumb a{color:var(--c-muted-light);text-decoration:none}
.crumb a:hover{color:var(--c-sun);text-decoration:underline}
.crumb [aria-current]{color:var(--c-light-text)}

/* ------------------------------------------------------------ quote band --- */
.quote-band{background:var(--c-ink);color:var(--c-light-text);padding-block:var(--pad-major);scroll-margin-top:calc(var(--head-h) + var(--s-4))}
.quote-band__in{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-8);align-items:start}
.quote-band .eyebrow{color:var(--c-sun)}
.quote-band h2{color:#fff}
.quote-band .lede{max-width:44ch;margin-bottom:var(--s-5)}
.reassure{list-style:none;margin:0 0 var(--s-5);padding:0}
.reassure li{position:relative;padding-left:var(--s-6);margin-bottom:var(--s-3);font-size:var(--fs-sm)}
.reassure li::before{
  content:"";position:absolute;left:0;top:9px;width:10px;height:6px;
  border-left:2px solid var(--c-sun);border-bottom:2px solid var(--c-sun);transform:rotate(-45deg);
}
.quote-band__alt{font-size:var(--fs-sm);color:var(--c-muted-light)}
.quote-band__alt a{color:var(--c-sun);font-family:var(--display);font-weight:700;text-decoration:none}
.quote-band__alt a:hover{text-decoration:underline}
.quote-band__panel{background:var(--c-paper);padding:var(--s-5);border-radius:var(--radius);min-height:560px}
.quote-band__panel #mortaro-form{min-height:520px}

/* ----------------------------------------------------------- site footer --- */
.site-foot{background:var(--c-ink);color:var(--c-light-text);padding-block:var(--pad-major) var(--s-6)}
.site-foot__top{display:grid;grid-template-columns:1.1fr 1fr .8fr;gap:var(--s-7);align-items:start;padding-bottom:var(--s-7);border-bottom:1px solid var(--c-hair-dark)}
.site-foot__brand{display:flex;align-items:center;gap:var(--s-4)}
.site-foot__brand .mk--lg{width:40px;height:40px;flex:none}
.site-foot__wm{display:block;font-family:var(--display);font-weight:800;font-size:20px;color:#fff;letter-spacing:-.02em;line-height:1.1}
.site-foot__loc{display:block;font-family:var(--display);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--c-sun);margin-top:5px}
.site-foot__pitch{font-size:var(--fs-sm);color:var(--c-light-text);margin:0}
.site-foot__contact{display:flex;flex-direction:column;gap:var(--s-2)}
.site-foot__contact a{font-family:var(--display);font-weight:700;font-size:var(--fs-sm);color:var(--c-sun);text-decoration:none}
.site-foot__contact a:hover{text-decoration:underline}

.site-foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);padding-block:var(--s-7)}
.site-foot__col .eyebrow{color:var(--c-sun);margin-bottom:var(--s-4)}
.site-foot__col ul{list-style:none;margin:0;padding:0}
.site-foot__col li{margin-bottom:var(--s-2)}
.site-foot__col a{font-size:14px;color:var(--c-light-text);text-decoration:none;line-height:1.45}
.site-foot__col a:hover{color:var(--c-sun);text-decoration:underline}
.site-foot__more a{font-family:var(--display);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--c-sun)}

.site-foot__base{display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;padding-top:var(--s-5);border-top:1px solid var(--c-hair-dark)}
.site-foot__legal,.site-foot__credit{font-size:13px;color:var(--c-muted-light);margin:0}
.site-foot__credit a{color:var(--c-sun);text-decoration:none}
.site-foot__credit a:hover{text-decoration:underline}

/* -------------------------------------------------------- sticky CTA bar --- */
.sticky-bar{display:none}

/* -------------------------------------------------------------- whatsapp --- */
.wa{position:fixed;right:16px;bottom:16px;z-index:120}
.wa__fab{
  display:flex;align-items:center;gap:8px;background:#25D366;color:#0B1F14;border:0;
  border-radius:999px;padding:12px 18px;font-family:var(--display);font-weight:700;font-size:14px;
  cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.wa__fab:hover{background:#1FBE5A}
.wa__panel{
  position:absolute;right:0;bottom:60px;width:320px;max-height:min(70vh,560px);overflow-y:auto;
  background:var(--c-paper);border:1px solid var(--c-hair-light);border-top:3px solid #25D366;
  border-radius:var(--radius);padding:var(--s-5);box-shadow:0 18px 44px rgba(12,27,38,.28);
}
.wa__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-3);font-family:var(--display)}
.wa__close{background:transparent;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--c-muted)}
.wa__intro{font-size:13px;color:var(--c-muted);margin-bottom:var(--s-4)}
.wa label{display:block;font-family:var(--display);font-weight:700;font-size:12px;color:var(--c-ink-text);margin-bottom:var(--s-3)}
.wa input,.wa textarea,.wa select{
  width:100%;margin-top:4px;padding:9px 10px;border:1px solid var(--c-hair-light);
  border-radius:3px;font-family:var(--body);font-size:14px;color:var(--c-ink-text);background:#fff;
}
.wa__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.btn--wa{background:#25D366;color:#0B1F14;width:100%;text-align:center}
.btn--wa:hover{background:#1FBE5A;color:#0B1F14}

/* ---------------------------------------------------------------- motion --- */
[data-reveal]{opacity:1;transform:none}
.js-reveal[data-reveal]{opacity:0;transform:translateY(12px)}
.js-reveal[data-reveal].is-in{opacity:1;transform:none;transition:opacity .38s ease,transform .38s ease}

/* ============================ RESPONSIVE ================================= */

@media (max-width:1080px){
  .site-head__bar{flex-wrap:wrap;gap:var(--s-4)}
  .burger{display:block}
  .site-nav{
    display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding-bottom:var(--s-4);
  }
  .site-nav.is-open{display:flex}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .site-nav__list > li > a{padding:12px 0;border-bottom:1px solid var(--c-hair-dark)}
  .site-nav__list > li > a::after{display:none}
  .has-drop > a::before{right:6px}
  .drop{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--c-sun);background:transparent;
    padding:var(--s-2) 0 var(--s-3) var(--s-4);display:none;
  }
  .has-drop.is-open > .drop{display:block}
  .has-drop:hover > .drop{opacity:1;visibility:visible}
  .drop__list--cols{columns:1}
  .site-nav__cta{padding-top:var(--s-4);width:100%;justify-content:space-between}
}

@media (max-width:900px){
  .hero__in,.split,.quote-band__in,.longread{grid-template-columns:1fr}
  .longread{gap:var(--s-6)}
  .longread__rail{position:static}
  .longread__rail .toc{max-height:none}
  .toc{
    position:static;max-height:none;border-left:0;padding-left:0;
    border-top:1px solid var(--c-hair-light);border-bottom:1px solid var(--c-hair-light);
    padding-block:var(--s-4);margin-bottom:var(--s-5);
  }
  .toc ol{columns:2;column-gap:var(--s-5)}
  .toc li{break-inside:avoid}
  .toc li.is-active::after{display:none}
  .cards--3,.cards--4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
  .site-foot__top{grid-template-columns:1fr;gap:var(--s-5)}
  .site-foot__cols{grid-template-columns:repeat(2,1fr)}
  .media--inset{width:100%}
}

@media (max-width:640px){
  :root{--head-h:60px}
  .wrap{padding-inline:var(--s-5)}
  .cards--2,.cards--3,.cards--4{grid-template-columns:1fr}
  .toc ol{columns:1}
  .site-foot__cols{grid-template-columns:1fr;gap:var(--s-5)}
  .site-foot__base{flex-direction:column;gap:var(--s-3)}
  .proof-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
  .quote-band__panel{padding:var(--s-4);min-height:600px}
  .lockup__wm{font-size:15px}

  /* sticky conversion bar, mobile only */
  .sticky-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:115;
    background:var(--c-ink);border-top:1px solid var(--c-hair-dark);
    padding:8px;gap:8px;align-items:stretch;
  }
  .sticky-bar__call{
    flex:1;display:flex;flex-direction:column;justify-content:center;
    text-decoration:none;color:var(--c-light-text);font-family:var(--display);
    padding:6px 10px;border:1px solid var(--c-hair-dark);border-radius:var(--radius);
  }
  .sticky-bar__call span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--c-muted-light)}
  .sticky-bar__call strong{font-size:15px;color:var(--c-sun);font-weight:700}
  .sticky-bar__quote{flex:1;display:flex;align-items:center;justify-content:center}
  body{padding-bottom:72px}

  /* clear the sticky bar */
  .wa{bottom:82px;right:12px}
  .wa__fab-label{display:none}
  .wa__fab{padding:14px}
  .wa__panel{width:min(88vw,320px)}
}

/* --------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js-reveal[data-reveal]{opacity:1 !important;transform:none !important}
  .card:hover{transform:none}
}

/* -------------------------------------------------------------- print --- */
@media print{
  .site-head,.site-foot,.quote-band,.sticky-bar,.wa,.toc,.skip{display:none !important}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   HUB + CONTACT COMPONENTS
   ========================================================================== */

/* cluster jump row */
.jump{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.jump a{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--display);font-weight:700;font-size:13px;
  padding:8px 14px;border:1px solid var(--c-hair-dark);border-radius:999px;
  color:var(--c-light-text);text-decoration:none;transition:border-color .16s ease,color .16s ease;
}
.jump a:hover,.jump a:focus{border-color:var(--c-sun);color:#fff}
.jump a span{
  font-size:11px;color:var(--c-ink);background:var(--c-sun);
  border-radius:999px;padding:1px 7px;line-height:1.5;
}

.sec-head__count{
  font-family:var(--display);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--c-muted);flex:none;
}
.on-ink .sec-head__count,.on-water .sec-head__count{color:var(--c-muted-light)}

/* featured guide band */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:center}
.feature__media{display:block;text-decoration:none}
.feature__media .media{margin:0}
.feature__media img{aspect-ratio:16/9;object-fit:cover}
.feature__body h2{margin-bottom:var(--s-3)}
.feature__body h2 a{text-decoration:none}
.feature__body h2 a:hover{text-decoration:underline;text-decoration-color:var(--c-sun)}
.feature__body .lede{margin-bottom:var(--s-5)}

/* service card sub-links */
.card__links{list-style:none;margin:var(--s-4) 0 0;padding:var(--s-4) 0 0;border-top:1px solid var(--c-hair-dark)}
.card__links li{margin-bottom:var(--s-2)}
.card__links a{font-family:var(--display);font-size:13.5px;font-weight:400;color:var(--c-light-text);text-decoration:none}
.card__links a:hover{color:var(--c-sun);text-decoration:underline}

/* area grid */
.area-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.area-grid a{
  display:block;padding:var(--s-5);background:var(--c-paper);
  border:1px solid var(--c-hair-light);text-decoration:none;color:var(--c-ink-text);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.area-grid a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(12,27,38,.12);border-color:var(--c-sun-deep)}
.area-grid strong{display:block;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.015em;margin-bottom:4px}
.area-grid span{display:block;font-size:13.5px;color:var(--c-muted);line-height:1.5}

/* contact */
.contact{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--s-8);align-items:start}
.contact h1{color:#fff}
.contact .eyebrow{color:var(--c-sun)}
.contact__line{margin-bottom:var(--s-4)}
.contact__line .eyebrow{display:block;margin-bottom:4px;color:var(--c-muted-light)}
.contact__line a{font-family:var(--display);font-weight:700;font-size:var(--fs-base);color:var(--c-sun);text-decoration:none}
.contact__line a:hover{text-decoration:underline}
.contact__val{font-size:var(--fs-sm);line-height:1.55;color:var(--c-light-text)}
.contact__note{font-size:13px;color:var(--c-muted-light);border-top:1px solid var(--c-hair-dark);padding-top:var(--s-4);margin:0}

.radius-map{margin:var(--s-6) 0 var(--s-4);border:1px solid var(--c-hair-light)}
.radius-map svg{display:block;width:100%;height:auto}
.radius-map__note{font-size:var(--fs-sm);color:var(--c-muted)}
.radius-map__note a{color:var(--c-ink-text);font-family:var(--display);font-weight:700;text-decoration:underline;text-decoration-color:var(--c-sun-deep)}

@media (max-width:900px){
  .feature,.contact{grid-template-columns:1fr}
  .area-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .area-grid{grid-template-columns:1fr}
  .jump a{font-size:12px;padding:7px 12px}
}

/* ==========================================================================
   LONG-READ TREATMENT LIBRARY
   Heavy content is displayed through one of several designed treatments,
   chosen by page role, so the site never repeats one reading device.
   ========================================================================== */

/* reading-progress bar (editorial + flow) */
.readbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:130;background:transparent;pointer-events:none}
.readbar__fill{display:block;height:100%;width:0;background:var(--c-sun);transition:width .1s linear}
@media (prefers-reduced-motion:reduce){.readbar__fill{transition:none}}

/* shared prose baseline for all non-rail treatments */
.prose{max-width:var(--w-prose)}
.prose > *{max-width:var(--w-prose)}
.prose .media{max-width:100%}
.prose p{margin-bottom:var(--s-4)}
.prose h3{margin-top:var(--s-7)}
.prose ul,.prose ol{padding-left:var(--s-5);margin-bottom:var(--s-4)}
.prose li{margin-bottom:var(--s-2)}
.prose a{color:var(--c-ink-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:var(--c-sun-deep)}
.prose a:hover{text-decoration-thickness:2px}
.prose table,.prose .tbl{border-collapse:collapse;width:100%;margin:var(--s-6) 0;font-family:var(--display);font-size:var(--fs-sm)}
.prose thead th{background:var(--c-water);color:#fff;font-weight:700;text-align:left;padding:var(--s-3) var(--s-4)}
.prose tbody td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--c-hair-light);background:var(--c-paper)}
.prose tbody tr.hi td{background:var(--c-sun-wash);font-weight:700}
.prose td:nth-child(n+2){text-align:right}
.prose td:last-child{text-align:left}
.prose blockquote{margin:var(--s-6) 0;padding-left:var(--s-5);border-left:3px solid var(--c-sun);font-size:var(--fs-lg);line-height:1.5;color:var(--c-ink-text)}

/* -------------------------------------------------- rail CTA (service pages) */
/* the rail no longer carries a bulky quote card; a compact anchored CTA instead */
.rail-cta{display:block;margin-top:var(--s-6);padding:var(--s-5);background:var(--c-ink);border-top:3px solid var(--c-sun);text-decoration:none;transition:transform .18s ease}
.rail-cta:hover{transform:translateY(-2px)}
.rail-cta__k{display:block;font-family:var(--body);font-size:var(--fs-sm);color:var(--c-light-text);margin-bottom:var(--s-2)}
.rail-cta__b{display:block;font-family:var(--display);font-weight:800;font-size:var(--fs-lg);color:var(--c-sun);letter-spacing:-.02em}

/* ======================================================= B. EDITORIAL (area) */
.ed-intro{padding-block:var(--pad-major) var(--s-7)}
.ed-intro .prose{max-width:72ch}
.ed-intro .prose .standfirst{font-family:var(--body);font-size:var(--fs-lg);line-height:1.55;color:var(--c-muted)}

.ed-chap{padding-block:var(--pad-major)}
.ed-chap__grid{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
.ed-chap__num{
  display:block;font-family:var(--display);font-weight:800;font-size:clamp(52px,11vw,96px);
  line-height:.8;letter-spacing:-.04em;color:var(--c-sun);opacity:.24;
}
.ed-chap__main h2{font-size:var(--fs-3xl);max-width:22ch;margin-top:var(--s-2)}
.ed-chap__body{margin-top:var(--s-4)}

/* editorial band grounds */
.ed-chap.on-chalk{background:var(--c-chalk);color:var(--c-ink-text)}
.ed-chap.on-paper{background:var(--c-paper);color:var(--c-ink-text)}
.ed-chap.on-ink{background:var(--c-ink);color:var(--c-light-text)}
.ed-chap.on-ink h2{color:#fff}
.ed-chap.on-ink .ed-chap__num{opacity:.36}
.ed-chap.on-ink .prose{color:var(--c-light-text)}
.ed-chap.on-ink .prose a{color:var(--c-sun);text-decoration-color:var(--c-sun)}
.ed-chap.on-ink .prose tbody td{background:var(--c-water);color:var(--c-light-text);border-bottom-color:var(--c-hair-dark)}
.ed-chap.on-ink .prose tbody tr.hi td{background:rgba(233,195,63,.16);color:#fff}
.ed-chap.on-ink .prose blockquote{border-left-color:var(--c-sun);color:var(--c-light-text)}
.ed-chap.on-ink .media figcaption{color:var(--c-muted-light)}

/* wide screens: ghost numeral in a sticky left margin column */
@media (min-width:900px){
  .ed-chap__grid{grid-template-columns:160px minmax(0,1fr);gap:var(--s-8);align-items:start}
  .ed-chap__num{position:sticky;top:calc(var(--head-h) + var(--s-6));font-size:clamp(72px,7vw,104px)}
  .ed-chap__main h2{margin-top:0}
}

/* ============================================================ C. FLOW (guide) */
.flow{max-width:74ch;margin:0 auto}
.flow__intro{max-width:none}
.flow__intro > p:first-of-type::first-letter,
.flow__intro > .standfirst + p::first-letter{
  float:left;font-family:var(--display);font-weight:800;font-size:4.6em;line-height:.72;
  padding:6px 12px 0 0;color:var(--c-ink-text);
}
.flow__intro .standfirst{font-family:var(--body);font-size:var(--fs-lg);line-height:1.55;color:var(--c-muted);margin-bottom:var(--s-5)}
.flow__mark{display:flex;align-items:center;gap:var(--s-4);margin:var(--s-9) 0 var(--s-3)}
.flow__mark::before,.flow__mark::after{content:"";height:1px;background:var(--c-hair-light);flex:1}
.flow__mark span{
  font-family:var(--display);font-weight:800;font-size:var(--fs-xl);color:var(--c-sun-deep);
  letter-spacing:-.02em;flex:none;
}
.flow__h{font-size:var(--fs-3xl);text-align:center;max-width:26ch;margin:0 auto var(--s-5);scroll-margin-top:calc(var(--head-h) + var(--s-4))}
.flow__body{max-width:none}
/* every third chapter body gets a subtle sun-wash inset panel for rhythm */
.flow__body table{margin-left:auto;margin-right:auto}

/* ========================================================== D. ANSWER (answer) */
.ans-lead{
  background:var(--c-ink);color:#fff;padding:var(--s-7);border-left:4px solid var(--c-sun);
  margin-bottom:var(--s-8);max-width:78ch;
}
.ans-lead .eyebrow{color:var(--c-sun);margin-bottom:var(--s-4)}
.ans-lead__a{font-family:var(--display);font-weight:700;font-size:var(--fs-xl);line-height:1.35;color:#fff;margin:0}
.ans-lead__a a{color:var(--c-sun)}
.ans{max-width:var(--w-prose)}
.ans__h{font-size:var(--fs-2xl);margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--c-hair-light);scroll-margin-top:calc(var(--head-h) + var(--s-4))}
.ans .prose{max-width:none}

/* ================================================= shared FAQ + chapter block */
.faq-block{margin-top:var(--s-9)}
.faq-block__h{font-size:var(--fs-2xl);margin-bottom:var(--s-4);padding-top:var(--s-5);border-top:1px solid var(--c-hair-light)}
.ed-chap + .sec .faq-block{margin-top:0}

/* keep the legacy .longread chapter styling for the rail treatment only */

/* ==========================================================================
   ARTICLE treatment (core informational + legal) + HUB supporting copy
   Centred, designed, never a bare left column.
   ========================================================================== */
.article{max-width:76ch;margin:0 auto}
.article__intro{max-width:none;margin-bottom:var(--s-6)}
.article__intro .standfirst{font-family:var(--body);font-size:var(--fs-lg);line-height:1.55;color:var(--c-muted)}
.article__intro > p:first-of-type{font-size:var(--fs-lg);line-height:1.55;color:var(--c-ink-text)}
.article__sec{margin-top:var(--s-8)}
.article__h{position:relative;font-size:var(--fs-2xl);margin-bottom:var(--s-4);padding-top:var(--s-5)}
.article__kick{position:absolute;top:0;left:0;width:44px;height:3px;background:var(--c-sun);border-radius:2px}
.article__body{max-width:none}
.article .prose table{margin-left:0;margin-right:0}

/* hub supporting copy sits below the cards; collapsed a touch by width so it
   reads as a footnote to the navigation, not the main event */
.hub-copy{max-width:74ch}
.hub-copy .eyebrow{color:var(--c-muted);margin-bottom:var(--s-5)}

/* ==========================================================================
   FOOTER full-width fix
   ========================================================================== */
.site-foot__cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s-6) var(--s-7);padding-block:var(--s-7);width:100%;
}
.site-foot__col{min-width:0}
.site-foot__col ul{margin:0;padding:0}
.site-foot__col li{margin-bottom:var(--s-2)}

/* ==========================================================================
   OpenStreetMap embed (contact)
   ========================================================================== */
.osm{margin-top:var(--s-6)}
.osm__frame{border:1px solid var(--c-hair-light);background:var(--c-water);aspect-ratio:3/2;width:100%}
#sos-map{z-index:0}
.leaflet-container{font-family:var(--body)}
.osm__note{font-size:var(--fs-sm);color:var(--c-muted);margin:var(--s-3) 0 0;line-height:1.6}
.osm__note a{color:var(--c-ink-text);font-family:var(--display);font-weight:700;text-decoration:underline;text-decoration-color:var(--c-sun-deep)}

/* ==========================================================================
   MOBILE OVERFLOW HARDENING
   overflow-x:hidden on body masks; these stop the actual overflow sources.
   ========================================================================== */
*{min-width:0}
img,figure,table,pre,iframe,svg{max-width:100%}
.prose table,.longread__body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ed-chap__num,.flow__mark span,.hero h1{overflow-wrap:break-word}

@media (max-width:640px){
  :root{ --pad-hero:56px; }
  html,body{overflow-x:clip}
  .wrap{padding-inline:var(--s-4)}
  .hero h1{font-size:clamp(34px,10vw,44px);word-break:break-word}
  .ed-chap__num{font-size:clamp(44px,16vw,64px)}
  .ed-chap{padding-block:var(--pad-minor)}
  .article,.flow,.hub-copy,.ans{max-width:100%}
  .proof-strip{grid-template-columns:1fr 1fr}
  .osm__frame{aspect-ratio:4/3}
}