/* IBEX PROPERTIES SA — the one stylesheet.

   COLOUR LIVES HERE AND NOWHERE ELSE. Not in a template's style attribute (the
   CSP forbids it), not in a script. Each value carries the contrast it
   measures on the ground it is used on; scripts/check_contrast.py recomputes
   every one from this file (manifest: design/contrasto.json) and the deploy
   stops under WCAG AA with a 2 % margin, measured where text sits on a line of
   the map (the most this palette allows: see --topo-*).

   A page is a stack of bands. Each band class declares eight tokens and every
   component colours itself only with those eight, so no component knows which
   band it sits on:
     --bg  --fg  --mut  --dim  --acc  --acc-lg  --rl  --rl2
   --rl is a decorative rule (no floor); --rl2 is a rule that is the only
   outline of a control, and must reach 3:1 (WCAG 1.4.11). */

/* The rules (--*-rule,
   --*-rule2) are opaque, not translucent ink: translucent ink does not reach
   3:1 as the outline of a control. */
:root{
  /* paper — light grounds */
  --paper-050:#FBFAF8;   /* the light band */
  --paper-100:#F0ECE4;   /* the warm band */
  --paper-900:#1A1817;   /* text              17.0:1 on 050 · 15.0:1 on 100 */
  --paper-500:#635C53;   /* secondary text     6.3:1 on 050 ·  5.6:1 on 100 */
  --paper-045:#6E6760;   /* labels, meta       5.3:1 on 050 ·  4.7:1 on 100 */
  --gold-deep:#7E6128;   /* accent on paper    5.5:1 on 050 ·  4.9:1 on 100 */
  --paper-rule:#DCD6CB;  /* divider, decorative */
  --paper-rule2:#857E74; /* control outline    3.8:1 on 050 ·  3.4:1 on 100 */

  /* ink — dark grounds */
  --ink-900:#0D0D0D;     /* the dark band */
  --ink-800:#171614;     /* the dark band, recessed: the closing call, footer */
  --ink-100:#F0EDE8;     /* text              16.6:1 on 900 · 15.5:1 on 800 */
  --ink-060:#A79F96;     /* secondary text     7.4:1 on 900 ·  6.9:1 on 800 */
  --ink-045:#8C857D;     /* labels, meta       5.3:1 on 900 ·  5.0:1 on 800 */
  --gold:#C9A96E;        /* accent on ink      8.7:1 on 900 ·  8.1:1 on 800 */
  --ink-rule:#2E2C29;    /* divider, decorative */
  --ink-rule2:#6F6962;   /* control outline    3.6:1 on 900 ·  3.3:1 on 800 */

  /* The map's line opacity on each ground (js/terrain.js reads --topo from
     the band). Each is the highest that keeps every text token of the band
     above AA, with the gate's 2 %, where the text sits on a line at full
     strength. The palette leaves little room: on warm paper --paper-045 is
     4.73:1 with no line at all, so the map there is all but invisible. */
  --topo-paper:0.072;
  --topo-warm:0.016;
  --topo-dark:0.072;
  --topo-deep:0.034;

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --wrap:1240px;
  --gutter:clamp(16px,4vw,48px);
  --band-y:clamp(72px,9vw,136px);
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* ---------------------------------------------------------------- bands */
.band{background:var(--bg);color:var(--fg)}
.band--paper{--bg:var(--paper-050);--fg:var(--paper-900);--mut:var(--paper-500);--dim:var(--paper-045);--acc:var(--gold-deep);--acc-lg:var(--gold-deep);--rl:var(--paper-rule);--rl2:var(--paper-rule2);--topo:var(--topo-paper)}
.band--warm{--bg:var(--paper-100);--fg:var(--paper-900);--mut:var(--paper-500);--dim:var(--paper-045);--acc:var(--gold-deep);--acc-lg:var(--gold-deep);--rl:var(--paper-rule);--rl2:var(--paper-rule2);--topo:var(--topo-warm)}
.band--dark{--bg:var(--ink-900);--fg:var(--ink-100);--mut:var(--ink-060);--dim:var(--ink-045);--acc:var(--gold);--acc-lg:var(--gold);--rl:var(--ink-rule);--rl2:var(--ink-rule2);--topo:var(--topo-dark)}
.band--deep{--bg:var(--ink-800);--fg:var(--ink-100);--mut:var(--ink-060);--dim:var(--ink-045);--acc:var(--gold);--acc-lg:var(--gold);--rl:var(--ink-rule);--rl2:var(--ink-rule2);--topo:var(--topo-deep)}

/* The map (js/terrain.js): one canvas per [data-terrain] band, behind the
   band's content. The script writes no style: the layout is here. */
[data-terrain]{position:relative;isolation:isolate}
[data-terrain] > :not(.terrain){position:relative;z-index:1}
.terrain{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--paper-050);color:var(--paper-900);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;font-feature-settings:"kern","liga","calt";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0;font-weight:400}
/* German compounds (Berufshaftpflichtversicherung) are wider than a phone.
   Hyphenation where the browser knows the language; a break anywhere as the
   last resort, so no word ever pushes the page sideways. */
:lang(de) :is(h1,h2,h3,h4,p,li,dt,dd,a,.btn){hyphens:auto;-webkit-hyphens:auto}
:is(h1,h2,h3,h4,p,li,dt,dd){overflow-wrap:break-word}
ul,ol{margin:0;padding:0}
::selection{background:var(--acc,var(--gold-deep));color:var(--bg,var(--paper-050))}

/* The focus ring takes the band's accent, with a fallback for whatever sits
   outside every band. Without the fallback an unresolved var() invalidates the
   whole declaration and the ring disappears. */
:focus-visible{outline:2px solid var(--acc,var(--gold-deep));outline-offset:4px;border-radius:1px}
:focus:not(:focus-visible){outline:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;padding:.75rem 1rem;background:var(--paper-900);color:var(--paper-050);text-decoration:none;font-weight:500}
.skip:focus{top:12px}
.br-wide{display:none}
@media (min-width:900px){.br-wide{display:inline}}

/* ---------------------------------------------------------------- type */
.eyebrow{display:block;margin:0 0 1.25rem;font:500 .75rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.display{font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,1.35rem + 4.6vw,5.25rem);line-height:1.04;letter-spacing:-.018em;text-wrap:balance}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.25rem + 2.2vw,3.1rem);line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,1.15rem + .6vw,1.7rem);line-height:1.22;letter-spacing:-.005em}
.lead{font-size:clamp(1.125rem,1.04rem + .35vw,1.3rem);line-height:1.6;color:var(--mut);max-width:40em}
.lead p{margin-bottom:.9em}
.mut{color:var(--mut)}
.dim{color:var(--dim)}
.num{font:500 .8125rem/1 var(--sans);letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- links, buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.85rem 1.5rem;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font:500 .9375rem/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--rl2)}
.btn:hover{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn--ghost:hover{border-color:var(--fg)}
.btn--small{min-height:44px;padding:.6rem 1.1rem;font-size:.875rem}
.actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:2.5rem}
.arrow{display:inline-block}
.textlink{display:inline-flex;align-items:center;gap:.5em;min-height:44px;color:var(--fg);font-weight:500;text-decoration:underline;text-decoration-color:var(--rl2);text-underline-offset:.3em;text-decoration-thickness:1px}
.textlink:hover{text-decoration-color:var(--fg)}
@media (prefers-reduced-motion:no-preference){
  .btn,.textlink,.nav a{transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),text-decoration-color .25s var(--ease)}
  .btn .arrow,.textlink .arrow{transition:transform .25s var(--ease)}
  .btn:hover .arrow,.textlink:hover .arrow{transform:translateX(3px)}
  .btn:hover .arrow--out,.textlink:hover .arrow--out{transform:translate(2px,-2px)}
}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rl)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--fg);flex:none;padding-block:10px}
.brand img{width:auto;height:56px}
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
.nav ul{display:flex;gap:clamp(16px,2vw,30px);list-style:none}
.nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;color:var(--mut);text-decoration:none;font-size:.9375rem;border-bottom:1px solid transparent}
.nav a:not(.btn):hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--acc)}
.langs{display:flex;gap:4px;list-style:none;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.langs a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:44px;color:var(--dim);text-decoration:none}
.langs a[aria-current="true"]{color:var(--fg)}
.menu-toggle{display:none}

@media (max-width:1023px){
  .menu-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;background:none;border:0;color:var(--fg);font:500 .875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .menu-toggle__bars{position:relative;width:22px;height:10px}
  .menu-toggle__bars::before,.menu-toggle__bars::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor}
  .menu-toggle__bars::before{top:0}
  .menu-toggle__bars::after{bottom:0}
  .nav{display:none}
  .js .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 28px;background:var(--bg);border-bottom:1px solid var(--rl);max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto}
  .nav[data-open]{display:flex}
  .nav ul{flex-direction:column;gap:0}
  .nav a:not(.btn){width:100%;min-height:56px;font-family:var(--serif);font-size:1.5rem;color:var(--fg);border-bottom:1px solid var(--rl)}
  .nav a[aria-current="page"]{border-bottom-color:var(--rl);color:var(--acc)}
  .nav .btn{margin-top:24px;width:100%}
  .langs{margin-top:16px}
  /* Without JavaScript there is no toggle: the menu is simply shown. */
  html:not(.js) .menu-toggle{display:none}
  html:not(.js) .nav{display:flex;flex-direction:column;align-items:stretch;padding-bottom:20px}
  html:not(.js) .site-header{position:static}
  html:not(.js) .site-header .wrap{flex-wrap:wrap}
}
@media (min-width:1024px) and (max-width:1199px){.nav .btn{display:none}}

/* ---------------------------------------------------------------- sections */
.section{padding-block:var(--band-y)}
.section--tight{padding-block:clamp(56px,6vw,96px)}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.5vw,40px)}
.head{grid-column:1/-1;margin-bottom:clamp(40px,5vw,72px)}
.head .h2{max-width:20ch}
.head .lead{margin-top:1.5rem}
/* Base first, wide screens after: in the other order the base rule wins the
   cascade and the two columns never sit side by side. */
.body--side,.body--full{grid-column:1/-1}
@media (min-width:900px){
  .head--side{grid-column:1/span 5;margin-bottom:0}
  .body--side{grid-column:7/-1}
  .body--full{grid-column:1/-1}
  .head--wide .h2{max-width:24ch}
  .body--side > .lead:first-child{margin-top:0}
}

/* rows: the editorial list */
.rows{list-style:none;border-top:1px solid var(--rl)}
.row{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:6px 16px;padding-block:28px;border-bottom:1px solid var(--rl)}
.row .num{padding-top:.55rem}
.row .h3{grid-column:2}
.row__text{grid-column:2;color:var(--mut);max-width:38em}
.row__link{grid-column:2}
@media (min-width:900px){
  .rows--full .row{grid-template-columns:4rem minmax(0,5fr) minmax(0,7fr);column-gap:clamp(16px,2.5vw,40px);padding-block:36px}
  .rows--full .row .h3{grid-column:2}
  .rows--full .row__text,.rows--full .row__link{grid-column:3}
  .rows--full .row__link{margin-top:-8px}
}

/* grid: principles */
.cols{list-style:none;display:grid;grid-template-columns:1fr;gap:0 clamp(24px,3vw,48px)}
.cols li{padding:28px 0 32px;border-top:1px solid var(--rl)}
.cols .h3{margin-bottom:.6rem}
.cols p{color:var(--mut)}
@media (min-width:640px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* steps: the process */
.steps{list-style:none;display:grid;grid-template-columns:1fr;gap:40px clamp(24px,3vw,48px);counter-reset:step}
.step{position:relative;padding-top:24px;border-top:1px solid var(--rl2)}
.step__n{display:block;margin-bottom:1rem;font-family:var(--serif);font-size:3rem;line-height:1;color:var(--acc-lg)}
.step .h3{margin-bottom:.6rem}
.step p{color:var(--mut)}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* tags: audiences, set as a typographic list */
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rl)}
.tags li{flex:1 1 100%;display:grid;grid-template-columns:1fr;gap:6px;padding:22px 0;border-bottom:1px solid var(--rl);font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + 1vw,2rem);line-height:1.2}
.tags li span{font:400 1rem/1.55 var(--sans);color:var(--mut);max-width:30em}
@media (min-width:768px){.tags li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(16px,2.5vw,40px);align-items:baseline}}

.section__cta{margin-top:clamp(40px,5vw,64px)}

/* ---------------------------------------------------------------- hero */
.hero{padding-block:clamp(56px,8vw,120px) clamp(72px,9vw,136px);overflow:hidden}
.hero .grid12{align-items:center;row-gap:56px}
.hero__text{grid-column:1/-1}
.hero__text .lead{margin-top:2rem;max-width:34em}
.hero__note{margin-top:1.75rem;font-size:.875rem;color:var(--dim)}
.hero .display{font-size:clamp(2.5rem,1.3rem + 4.4vw,4.75rem)}
@media (min-width:1024px){.hero__text{grid-column:1/span 7}}

/* The home's photograph opens the page, edge to edge, above the text, and
   fades into the band at its foot. Beside the text it lost either the villa
   or the lake: the picture is twice as wide as it is tall. The text never
   sits on it, so the contrast gate still measures what is read. */
.hero--photo{display:flex;flex-direction:column;padding-top:0}
.hero.hero--photo > .hero__photo{order:-1;margin:0 0 clamp(28px,3.5vw,56px)}
.hero--photo .hero__photo picture{display:block;height:clamp(220px,58svh,640px);
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
.hero--photo .hero__photo img{width:100%;height:100%;object-fit:cover;object-position:42% 52%}
.hero--photo .hero__photo .photo-cap{text-align:right}
/* The faded foot of the picture is transparent: the figure's own ground
   keeps the map's lines from showing through it. */
.hero--photo .hero__photo{background:var(--bg)}
/* On a phone the 2:1 photograph becomes 4:3: keep the villa, on the left. */
@media (max-width:599px){.hero--photo .hero__photo picture{height:auto;aspect-ratio:4/3}.hero--photo .hero__photo img{object-position:18% 52%}}
/* On a wide screen the heading and the lead stand side by side under the
   photograph, aligned on their first line: the heading and the buttons stay
   in the first screen. */
@media (min-width:1024px){
  .hero--photo .hero__text{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.5vw,40px);align-items:start}
  .hero--photo .hero__head{grid-column:1/span 7}
  .hero--photo .hero__side{grid-column:8/span 5}
  .hero--photo .hero__side .lead{margin-top:0}
  /* 46svh: at 1440×900 the first button stays in the first screen in all four languages. */
  .hero--photo .hero__photo picture{height:clamp(220px,46svh,600px)}
}
@media (max-width:599px){
  .hero--photo .hero__photo .photo-cap{text-align:left;font-size:.6875rem;letter-spacing:.1em}
  .hero.hero--photo > .hero__photo{margin-bottom:44px}
}

/* Photographs in the page (blocks/image_band.html, blocks/media_split.html).
   The caption sits under the picture on the band's own ground, in --dim,
   which the contrast gate measures on every band. */
.photo-cap{margin-top:.75rem;font:500 .75rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
/* A short gold rule before the caption: decorative, it carries no text. */
.photo-cap::before{content:"";display:inline-block;width:1.5rem;height:1px;margin-right:.75em;vertical-align:.3em;background:var(--acc)}
.photo-band{padding-block:clamp(40px,5vw,80px)}
.photo-band__fig{margin-block:0}
.photo-band__fig picture,.media-split__fig picture{display:block;overflow:hidden;background:var(--rl)}
.photo-band__fig img,.media-split__fig img{width:100%;height:100%;object-fit:cover}
/* The panorama runs edge to edge; its caption keeps to the text column. */
.photo-band__fig--wide{max-width:none;padding-inline:0}
.photo-band__fig--wide picture{aspect-ratio:21/9;max-height:78svh}
.photo-band__fig--wide .photo-cap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.photo-band:has(.photo-band__fig--wide){padding-block:0 clamp(40px,5vw,80px)}
/* The classic band is a framed print: never wider than its 1024 px source. */
.photo-band__fig--classic{max-width:960px}
.photo-band__fig--classic picture{aspect-ratio:3/2}
.photo-band__fig--classic .photo-cap{text-align:center}
.photo-band:has(.photo-band__fig--classic){padding-block:clamp(56px,7vw,112px)}
@media (max-width:599px){.photo-band .wrap{padding-inline:0}.photo-band .photo-cap{padding-inline:var(--gutter)}.photo-band__fig--wide picture{aspect-ratio:4/3}.photo-band__fig--classic .photo-cap{text-align:left}}
.media-split{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,72px);align-items:center}
.media-split__fig{margin:0}
.media-split__fig--classic picture{aspect-ratio:3/2}
.media-split__fig--portrait picture{aspect-ratio:4/5;max-height:80svh}
.media-split__body{margin-top:1.5rem;color:var(--mut);max-width:32em}
@media (min-width:1024px){
  .media-split{grid-template-columns:repeat(12,minmax(0,1fr))}
  .media-split{column-gap:clamp(32px,4vw,64px)}
  .media-split--left .media-split__fig{grid-column:1/span 7}
  .media-split--left .media-split__text{grid-column:8/span 5}
  .media-split--right .media-split__fig{grid-column:6/span 7;order:2}
  .media-split--right .media-split__text{grid-column:1/span 5;order:1}
}
/* Photographs from our mandates (blocks/mandate_gallery.html): two columns
   of 3:2 tiles, the second set lower. */
.mandates__intro{max-width:40em}
.mandates{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,56px) clamp(16px,2vw,32px);margin:clamp(40px,5vw,72px) 0 0;padding:0;list-style:none;align-items:start}
.mandates__item figure{margin:0}
.mandates__item picture{display:block;overflow:hidden;background:var(--rl);aspect-ratio:3/2}
.mandates__item img{width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){
  .mandates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mandates__item:nth-child(2n){margin-top:clamp(48px,6vw,96px)}
}

/* page opening for inner pages */
.opening{padding-block:clamp(56px,7vw,112px) clamp(48px,6vw,88px);border-bottom:1px solid var(--rl)}
.opening .display{font-size:clamp(2.4rem,1.4rem + 3.6vw,4.5rem);max-width:18ch}
.opening .lead{margin-top:1.75rem}
.crumb{display:flex;gap:.5em;margin:0 0 1.25rem;padding:0;list-style:none;font:500 .75rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.crumb a{color:var(--acc);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- split: public / private */
.split{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rl2)}
.panel{display:flex;flex-direction:column;padding:36px 0 44px}
.panel + .panel{border-top:1px solid var(--rl)}
.panel .h3{font-size:clamp(1.6rem,1.25rem + 1.1vw,2.25rem);margin-bottom:1rem}
/* align-self: the panel is a flex column, which would stretch the logo to its
   full width at 40px high. */
.panel__logo{align-self:flex-start;width:auto;height:40px;margin-bottom:1.5rem}
.panel p{color:var(--mut);max-width:30em}
.panel .actions{margin-top:auto;padding-top:2rem}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .panel{padding:48px clamp(24px,4vw,64px) 56px 0}
  .panel + .panel{border-top:0;border-left:1px solid var(--rl);padding-left:clamp(24px,4vw,64px);padding-right:0}
}

/* ---------------------------------------------------------------- services */
.toc{list-style:none;display:grid;grid-template-columns:1fr;border-top:1px solid var(--rl);counter-reset:toc}
.toc a{display:flex;gap:16px;align-items:baseline;min-height:52px;padding:14px 0;border-bottom:1px solid var(--rl);text-decoration:none;color:var(--fg)}
.toc a:hover .toc__t{text-decoration:underline;text-decoration-color:var(--rl2);text-underline-offset:.25em}
.toc__t{font-family:var(--serif);font-size:1.25rem;line-height:1.3}
@media (min-width:768px){.toc{grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,48px)}}

.service{padding-block:clamp(56px,6vw,96px);border-top:1px solid var(--rl)}
.service:first-of-type{border-top:0}
.service__head{grid-column:1/-1;margin-bottom:32px}
.service__head .num{display:block;margin-bottom:1rem;color:var(--acc)}
.service__head .h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.6rem);max-width:16ch}
.service__body{grid-column:1/-1}
.service__summary{font-size:clamp(1.125rem,1.04rem + .35vw,1.3rem);line-height:1.6;margin-bottom:2.5rem;max-width:36em}
.facets{display:grid;grid-template-columns:1fr;gap:28px 40px;margin:0}
.facets div{padding-top:18px;border-top:1px solid var(--rl)}
.facets dt{margin-bottom:.6rem;font:500 .75rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.facets dd{margin:0;color:var(--mut)}
.facets ul{list-style:none}
.facets li{position:relative;padding-left:1.1em;margin-bottom:.4em}
.facets li::before{content:"";position:absolute;left:0;top:.8em;width:.45em;height:1px;background:var(--acc)}
@media (min-width:768px){.facets{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){
  .service__head{grid-column:1/span 4;margin-bottom:0}
  .service__head-inner{position:sticky;top:120px}
  .service__body{grid-column:5/-1}
}

/* ---------------------------------------------------------------- statement, cta */
.statement{font-family:var(--serif);font-size:clamp(1.6rem,1.1rem + 2vw,2.75rem);line-height:1.25;letter-spacing:-.01em;max-width:28ch;text-wrap:balance}
.cta .h2{max-width:18ch}
.cta .lead{margin-top:1.5rem}
.cta__mark{width:56px;margin-bottom:2rem;opacity:.9}

/* ---------------------------------------------------------------- facts, prose */
.facts{display:grid;grid-template-columns:1fr;margin:0;border-top:1px solid var(--rl)}
.facts div{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--rl)}
.facts dt{font:500 .75rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.facts dd{margin:0}
@media (min-width:640px){.facts div{grid-template-columns:minmax(10rem,1fr) 2fr;gap:24px}}

.prose{max-width:44rem}
.prose h2{font-family:var(--serif);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.2;margin:2.5em 0 .75em}
.prose h2:first-child{margin-top:0}
.prose h3{font-weight:600;font-size:1.0625rem;margin:2em 0 .5em}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose a{text-decoration-color:var(--rl2);text-underline-offset:.2em}
.prose a:hover{text-decoration-color:var(--fg)}
.updated{margin-top:3rem;font-size:.875rem;color:var(--dim)}

/* ---------------------------------------------------------------- form */
.form{display:grid;gap:36px;max-width:46rem}
.field{display:grid;gap:8px}
.field label,.field legend{font-weight:500;font-size:.9375rem}
.field .help{font-size:.875rem;color:var(--dim)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{width:100%;min-height:52px;padding:.8rem 1rem;border:1px solid var(--rl2);border-radius:0;background:var(--bg);color:var(--fg);font:inherit;font-size:1rem;line-height:1.5}
.field textarea{min-height:140px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--fg)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline-offset:0;border-color:var(--fg)}
fieldset.field{margin:0;padding:0;border:0}
.field legend{padding:0;margin-bottom:12px}
.choices{display:grid;grid-template-columns:1fr;gap:8px;list-style:none}
@media (min-width:640px){.choices{grid-template-columns:1fr 1fr}}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice label{display:flex;align-items:center;gap:12px;min-height:52px;padding:.7rem 1rem;border:1px solid var(--rl2);cursor:pointer;font-weight:400}
.choice label::before{content:"";flex:none;width:14px;height:14px;border:1px solid var(--rl2);border-radius:50%}
.choice input:checked + label{border-color:var(--fg)}
.choice input:checked + label::before{border-color:var(--fg);background:radial-gradient(circle,var(--fg) 0 3px,transparent 3.5px)}
.choice input:focus-visible + label{outline:2px solid var(--acc,var(--gold-deep));outline-offset:2px}
.choice label:hover{border-color:var(--fg)}
.row2{display:grid;grid-template-columns:1fr;gap:36px}
@media (min-width:640px){.row2{grid-template-columns:1fr 1fr;gap:24px}}
.errors{margin:0;padding:0;list-style:none;color:var(--fg);font-size:.9375rem;font-weight:500}
.errors li::before{content:"— "}
.field--error input,.field--error textarea,.field--error .choice label{border-color:var(--fg);border-width:2px}
.form__summary{padding:20px 24px;border:2px solid var(--fg)}
.form__summary h2{font:600 1rem/1.4 var(--sans);margin-bottom:.5rem}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.privacy-note{font-size:.875rem;color:var(--dim);max-width:40em}
.privacy-note a{color:var(--mut)}
.thanks{padding:32px;border:1px solid var(--rl2);max-width:46rem}
.thanks .h3{margin-bottom:.75rem}
.contact-aside{display:grid;gap:28px;align-content:start}
.contact-aside dt{font:500 .75rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.contact-aside dd{margin:0}
.contact-aside a{text-decoration-color:var(--rl2);text-underline-offset:.2em}
.form-col,.aside-col{grid-column:1/-1}
.form-col > .lead{margin:1rem 0 2.75rem}
.aside-col{margin-top:56px}
@media (min-width:1024px){
  .form-col{grid-column:1/span 7}
  .aside-col{grid-column:9/-1;margin-top:0;padding-top:.75rem}
}

/* ---------------------------------------------------------------- insights */
.articles{list-style:none;border-top:1px solid var(--rl)}
.article-row{display:grid;gap:8px;padding:32px 0;border-bottom:1px solid var(--rl)}
.article-row a{text-decoration:none}
.article-row a:hover .h3{text-decoration:underline;text-decoration-color:var(--rl2);text-underline-offset:.2em}
.article-meta{display:flex;flex-wrap:wrap;gap:.25em 1.25em;font:500 .75rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.article-meta .cat{color:var(--acc)}

/* ---------------------------------------------------------------- footer */
.site-footer{padding-block:clamp(64px,7vw,104px) 40px}
.footer-top{display:grid;grid-template-columns:1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid var(--rl)}
.footer-brand img{height:96px;width:auto}
.footer-brand p{margin-top:1.5rem;color:var(--mut);max-width:24em}
.footer-brand .footer-reg{margin-top:1rem;font-size:.875rem;line-height:1.6}
.footer-reg a{color:var(--fg);text-decoration-color:var(--rl2);text-underline-offset:.2em}
.footer-reg a:hover{text-decoration-color:var(--fg)}
.footer-col h2{margin-bottom:1rem;font:500 .75rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.25rem}
.footer-col a{display:inline-flex;align-items:center;min-height:36px;color:var(--mut);text-decoration:none}
.footer-col a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:.2em}
.footer-col address{font-style:normal;color:var(--mut);line-height:1.8}
.footer-homehunt p{color:var(--mut);margin-bottom:1rem;max-width:22em}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:28px;font-size:.8125rem;color:var(--dim)}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:4px 24px;list-style:none}
.footer-bottom a{display:inline-flex;align-items:center;min-height:36px;color:var(--dim);text-decoration:none}
.footer-bottom a:hover{color:var(--fg);text-decoration:underline}
@media (min-width:768px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.footer-top{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}

/* ---------------------------------------------------------------- error pages */
.error-page{min-height:60vh;display:flex;align-items:center}

/* ---------------------------------------------------------------- reveal
   The state lives outside the motion query; only the transition is inside.
   Without JavaScript, or with reduced motion, nothing is ever hidden. */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .js [data-reveal].is-in{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- print
   Print rewrites the tokens, not the containers: everything added later is
   covered without a rule of its own. */
@media print{
  .band,.band--paper,.band--warm,.band--dark,.band--deep{--bg:#fff;--fg:#000;--mut:#222;--dim:#444;--acc:#000;--acc-lg:#000;--rl:#999;--rl2:#666}
  .site-header{position:static}
  .nav,.menu-toggle,.skip,.hero__photo,.photo-band,.media-split__fig,.mandates,.actions,.section__cta,.footer-homehunt,.terrain,form{display:none!important}
  .section,.hero,.opening{padding-block:24px}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
  .js [data-reveal]{opacity:1!important;transform:none!important}
}