/* ==========================================================================
   LYS Insurance Agency
   Warm editorial. Paper ground, plum ink, magenta + gold from her own logo.
   Fraunces (display) + Source Sans 3 (body), both self-hosted variable WOFF2.
   See DESIGN.md for the system this file implements.

   The metric-matched fallback faces are measured from the real font files
   (upm, typoAscender, typoDescender, lineGap) so the box a line of text
   occupies is identical before and after the swap. Without this the swap
   moved every line of copy and cost real CLS on mobile.
   ========================================================================== */

/* ---------- fonts ----------
   Fraunces is instanced to weight 500 with its optical-size axis still live, so the
   letterforms tighten as the size drops. Source Sans 3 keeps its full weight range
   because body copy needs 400 and the UI needs 600. Both are the latin subset only:
   every Spanish character this site uses (á é í ó ú ñ ¿ ¡) lives in U+0000-00FF.
   Total 86 KB for the whole type system, self-hosted, font-display: swap. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/fraunces-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/fraunces-italic-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/source-sans-3-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* metric-matched local fallbacks: same box, no swap shift */
@font-face{font-family:'Fraunces Fallback';font-style:normal;font-weight:500;src:local('Georgia'),local('Times New Roman');
  ascent-override:97.8%;descent-override:25.5%;line-gap-override:0%;size-adjust:100%;}
@font-face{font-family:'Fraunces Fallback';font-style:italic;font-weight:400;src:local('Georgia Italic'),local('Times New Roman Italic'),local('Georgia'),local('Times New Roman');
  ascent-override:97.8%;descent-override:25.5%;line-gap-override:0%;size-adjust:100%;}
@font-face{font-family:'Source Sans 3 Fallback';font-style:normal;font-weight:400 700;src:local('Segoe UI'),local('Helvetica Neue'),local('Arial');
  ascent-override:102.4%;descent-override:40%;line-gap-override:0%;size-adjust:100%;}

/* ---------- tokens ---------- */
:root{
  /* ground */
  --paper:#FBF6EF; --paper-2:#F4EADF; --paper-3:#EFE1D3;
  /* ink */
  --ink:#2B1524; --ink-2:#5A3F52;
  /* brand */
  --plum:#3E0F2C; --plum-2:#55163C;
  --magenta:#BB1473; --magenta-soft:#CB509E; --magenta-wash:#F8E6F0;
  --gold:#F6C024; --gold-soft:#F6D366; --gold-deep:#8A6210;
  --rule:rgba(62,15,44,.13); --rule-strong:rgba(62,15,44,.26);
  --focus:#1E5AA8;
  --shadow-portrait:0 2px 4px rgba(62,15,44,.06),0 18px 44px -20px rgba(62,15,44,.34);
  --maxw:1240px; --gut:clamp(20px,4vw,56px);
  --sans:'Source Sans 3','Source Sans 3 Fallback',ui-sans-serif,sans-serif;
  --serif:'Fraunces','Fraunces Fallback',Georgia,serif;
  /* type scale */
  --step--2:.78rem; --step--1:.9rem; --step-0:clamp(1.06rem,1.02rem + .2vw,1.19rem);
  --step-1:clamp(1.14rem,1.06rem + .35vw,1.35rem);
  --step-2:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  --step-3:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);
  --step-4:clamp(2.1rem,1.4rem + 2.6vw,3.4rem);
  --step-5:clamp(2.9rem,1.6rem + 5.4vw,5.4rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --sec-y:clamp(72px,9vw,148px);
  /* the header bar height. The logo carries 12px of padding above and below
     its artwork, so the bar is taller than the artwork itself. The sticky
     "how it goes" heading is offset by this value. */
  --head-h:128px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;overflow-x:hidden;
}
img,picture,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--magenta);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--plum)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--magenta-wash);color:var(--plum)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--plum);line-height:1.08;margin:0 0 .5em;letter-spacing:-.012em}
h1{font-size:var(--step-5);font-variation-settings:'opsz' 96}
h2{font-size:var(--step-4);font-variation-settings:'opsz' 72}
h3{font-size:var(--step-2);font-variation-settings:'opsz' 36}
h4{font-size:var(--step-1);font-variation-settings:'opsz' 24}
p{margin:0 0 1em;max-width:66ch}
strong{font-weight:600}
em{font-style:italic}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin:0 0 .35em}
.skip{position:absolute;left:-9999px;top:0;background:var(--plum);color:var(--paper);padding:12px 20px;z-index:200;font-weight:600}
.skip:focus{left:8px;top:8px;color:var(--paper)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:760px;margin-inline:auto}
.i{width:1.15em;height:1.15em;flex:0 0 auto;display:inline-block;vertical-align:-.18em}

/* ---------- section rhythm ---------- */
.section{padding-block:var(--sec-y)}
.section--tight{padding-block:clamp(48px,5vw,84px)}
.section--paper2{background:var(--paper-2)}
.section--plum{background:var(--plum);color:var(--paper)}
.section--plum h2,.section--plum h3{color:var(--paper)}
.section--plum p{color:var(--paper)}
.rule-top{border-top:1px solid var(--rule)}

/* the label above a heading, in the sans. Not an eyebrow: it names the content. */
.label{
  font-family:var(--sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  margin:0 0 .9rem;display:block;
}
.label--gold{color:var(--gold-soft)}
.label--mag{color:var(--magenta)}

.lead{font-size:var(--step-1);line-height:1.55;color:var(--ink);max-width:60ch}
.section--plum .lead{color:var(--paper)}

/* ---------- header ----------
   A solid paper ground, not a blurred one. The backdrop-filter measured about 44 ms of
   first paint on a throttled phone, and on a page this warm the blur was invisible
   anyway: the header is paper against paper.

   The bar height is a variable because the sticky "how it goes" heading is
   offset by it: without that, the heading would slide under the header.

   The logo lockup is 772x480, so at 166px wide it is 103px tall. The bar is
   128px: the artwork plus 12px of air above and below. The bar used to be
   88px while the logo was 107px tall, so the artwork ran into the top of the
   viewport. The logo asset is now truly transparent, so there is no pale
   plate behind it either. */
.site-head{position:sticky;top:0;z-index:60;background:#FBF6EF;border-bottom:1px solid transparent;transition:border-color .18s linear,background .18s linear}
.site-head.is-stuck{border-bottom-color:var(--rule);background:#FBF6EF}
.site-head__bar{display:flex;align-items:center;gap:28px;min-height:var(--head-h)}
.brand{display:block;flex:0 0 auto;text-decoration:none;padding-block:12px}
.brand img{width:166px;height:auto;display:block}
/* The language switch sits in the bar, not inside the nav: on a phone the
   nav collapses behind a Menu button, and a reader has to be able to change
   the language before they start reading. The nav is pushed right by its
   own margin, so the switch stays next to the logo. */
.nav{margin-left:auto;order:1;display:flex;align-items:center;gap:26px;font-size:var(--step--1);font-weight:600}
.nav a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.nav a:hover{color:var(--magenta)}
/* the header CTA sits on a plum plate, so its label must be the paper colour, not ink */
.nav .head-cta{color:var(--paper)}
.nav .head-cta:hover{color:var(--paper);background:var(--plum-2)}
.nav-toggle{display:none;order:3;margin-left:auto;background:none;border:1px solid var(--rule-strong);border-radius:2px;padding:9px 13px;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;min-height:44px}

/* ---------- the language switch ----------
   Two visible options, EN and ES, with the active one filled. The old single
   button said "ESPAÑOL" on an English page, which put Spanish on the English
   screen and left the reader guessing which language they were in.

   The switch lives in the header bar, not inside the nav: on a phone the nav
   collapses behind a Menu button, and a reader has to be able to change the
   language before they start reading.

   Placement: on a wide screen the switch sits at the far right, after the nav
   and its phone button. On a phone it sits between the logo and the Menu
   button. The order values place it there at both widths. */
.langswitch{
  display:inline-flex;align-items:stretch;border:1px solid var(--rule-strong);
  border-radius:2px;overflow:hidden;background:none;flex:0 0 auto;
  order:2;margin-left:0;
}
.langswitch__b{
  background:none;border:0;padding:8px 11px;font:inherit;font-size:var(--step--2);
  font-weight:600;letter-spacing:.08em;color:var(--ink-2);cursor:pointer;
  min-height:40px;line-height:1.2;transition:background-color .16s linear,color .16s linear;
}
.langswitch__b + .langswitch__b{border-left:1px solid var(--rule-strong)}
.langswitch__b:hover{color:var(--magenta);background:var(--magenta-wash)}
.langswitch__b.is-on{background:var(--plum);color:var(--paper)}
.langswitch__b.is-on:hover{background:var(--plum-2);color:var(--paper)}
.langswitch__b:focus-visible{outline:2px solid var(--focus);outline-offset:2px;position:relative;z-index:1}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;min-height:46px;
  padding:12px 22px;border-radius:2px;border:1px solid transparent;
  font-family:var(--sans);font-size:.95rem;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:background-color .16s linear,color .16s linear,border-color .16s linear;
}
.btn--primary{background:var(--plum);color:var(--paper)}
.btn--primary:hover{background:var(--plum-2);color:var(--paper)}
.btn--ghost{background:transparent;color:var(--plum);border-color:var(--rule-strong)}
.btn--ghost:hover{border-color:var(--magenta);color:var(--magenta);background:var(--magenta-wash)}
.btn--gold{background:var(--gold);color:var(--plum)}
.btn--gold:hover{background:var(--gold-soft);color:var(--plum)}
.btn--onplum{background:transparent;color:var(--paper);border-color:rgba(251,246,239,.4)}
.btn--onplum:hover{background:rgba(251,246,239,.1);color:var(--paper);border-color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* a text pair, split by a vertical rule. Used where a filled button would shout. */
.textpair{display:flex;flex-wrap:wrap;align-items:center;gap:0;font-size:var(--step--1);font-weight:600}
.textpair a{padding:6px 16px;text-decoration:none;color:var(--plum)}
.textpair a:first-child{padding-left:0}
.textpair a+a{border-left:1px solid var(--rule-strong)}
.textpair a:hover{color:var(--magenta)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,6vw,92px) clamp(56px,7vw,110px);position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.78fr);gap:clamp(32px,5vw,80px);align-items:center}
.hero h1{margin-bottom:.34em;max-width:15ch}
.hero h1 em{font-style:italic;font-variation-settings:'opsz' 96;color:var(--magenta)}
.hero__lead{font-size:var(--step-1);line-height:1.55;max-width:52ch;color:var(--ink);margin-bottom:1.6em}
.hero__meta{margin:2.2rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:var(--step--1);color:var(--ink-2)}
.hero__meta li{display:flex;align-items:center;gap:8px;margin:0}
.hero__meta .i{color:var(--magenta)}

/* the one authored moment: portrait clipped in from the bottom */
.hero__figure{position:relative;margin:0}
.hero__figure::before{
  content:"";position:absolute;inset:8% -6% -6% 10%;background:var(--magenta-wash);
  border-radius:2px;z-index:0;
}
.hero__figure img{
  position:relative;z-index:1;width:100%;height:auto;
  box-shadow:var(--shadow-portrait);
  clip-path:inset(0 0 0 0);
}
.js .hero__figure img{clip-path:inset(0 0 100% 0)}
.hero__caption{
  position:relative;z-index:2;margin:18px 0 0;font-size:var(--step--1);
  color:var(--ink-2);max-width:40ch;
}

/* ---------- the sequence ----------
   The "how it goes" section runs as two columns: the heading sits on the
   left and stays put while the four steps scroll past it on the right. The
   right half of the section used to be empty, which read as a half-finished
   page rather than a designed one. */
.how{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,5vw,80px);align-items:start;
}
.how__aside{position:sticky;top:calc(var(--head-h) + clamp(24px,4vw,52px))}
.how__aside h2{margin-bottom:.4em}
.how__aside .lead{margin-bottom:0}
.seq{display:grid;gap:0;position:relative}
.seq__step{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:clamp(20px,3vw,44px);
  padding-block:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule);position:relative;
}
.seq__step:last-child{border-bottom:1px solid var(--rule)}
.seq__num{
  font-family:var(--serif);font-size:clamp(2rem,1.4rem + 1.6vw,2.9rem);font-weight:400;
  color:var(--magenta);line-height:1;font-variation-settings:'opsz' 48;
  font-variant-numeric:tabular-nums;
}
.seq__body h3{margin-bottom:.4em}
.seq__body p{margin-bottom:0;color:var(--ink-2);max-width:60ch}
/* the drawn connector */
.seq__step::before{
  content:"";position:absolute;left:31px;top:0;bottom:0;width:1px;background:var(--rule-strong);
  transform-origin:top;transform:scaleY(0);
}
.seq__step.is-drawn::before{transform:scaleY(1);transition:transform .9s var(--ease)}
.seq__step:first-child::before{top:28%}
.seq__step:last-child::before{bottom:28%}

/* ---------- services as editorial rows ---------- */
.svc{margin-top:clamp(28px,3.4vw,52px)}
.svc__row{
  display:grid;grid-template-columns:60px minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,44px);align-items:start;
  padding-block:clamp(28px,3.2vw,44px);border-top:1px solid var(--rule);
}
.svc__row:last-child{border-bottom:1px solid var(--rule)}
.svc__mark{width:44px;height:44px;color:var(--magenta);margin-top:.35em}
.svc__mark .i{width:100%;height:100%;vertical-align:0}
.svc__title h3{margin-bottom:.35em}
.svc__title p{margin-bottom:0;color:var(--ink-2);max-width:44ch}
.svc__list{margin:0;padding:0;list-style:none;font-size:var(--step--1);color:var(--ink)}
.svc__list li{display:flex;gap:9px;align-items:baseline;padding-block:7px;border-bottom:1px dotted var(--rule-strong);margin:0}
.svc__list li:last-child{border-bottom:0}
.svc__list .i{color:var(--gold-deep);width:1em;height:1em}

/* ---------- split (about) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr);gap:clamp(32px,5vw,84px);align-items:start}
.split--reverse .split__media{order:-1}
.split__media img{width:100%;height:auto;box-shadow:var(--shadow-portrait)}
.prose p{color:var(--ink-2)}
.prose p:first-of-type{font-size:var(--step-1);color:var(--ink)}
/* a note panel: a tinted field, never a card with a shadow */
.card-note{
  background:var(--paper-2);border-left:2px solid var(--magenta);
  padding:clamp(24px,3vw,40px);
}
.card-note__lead{
  font-family:var(--serif);font-size:var(--step-2);color:var(--plum);line-height:1.2;
  margin:0 0 .6em;font-variation-settings:'opsz' 36;
}
.card-note p{color:var(--ink-2);max-width:38ch;margin-bottom:1.4em}
.card-note__facts{margin:0;padding:0;border-top:1px solid var(--rule)}
.card-note__facts > div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding-block:12px;border-bottom:1px solid var(--rule)}
.card-note__facts dt{font-size:var(--step--2);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.card-note__facts dd{margin:0;font-size:var(--step--1);color:var(--plum)}
.facts{list-style:none;padding:0;margin:2rem 0 0;border-top:1px solid var(--rule)}
.facts li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;padding-block:16px;border-bottom:1px solid var(--rule);margin:0;font-size:var(--step--1)}
.facts .i{color:var(--magenta);width:20px;height:20px;margin-top:.15em}
.facts strong{color:var(--ink);font-weight:600}

/* ---------- the philosophy band ---------- */
.quote-band{padding-block:clamp(72px,8vw,132px);background:var(--plum);color:var(--paper);text-align:center}
.quote-band blockquote{margin:0 auto;max-width:34ch}
.quote-band p{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,1.05rem + 1.4vw,2.4rem);
  line-height:1.24;color:var(--paper);margin:0 0 1.2em;
  font-variation-settings:'opsz' 48;text-wrap:balance;
}
.quote-band cite{display:block;font-style:normal;font-family:var(--sans);font-size:var(--step--1);color:var(--gold-soft);letter-spacing:.1em;text-transform:uppercase}
.quote-band .btn-row{justify-content:center;margin-top:2.4rem}

/* ---------- credential rosettes (replaces the stats band) ---------- */
.creds{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);margin-top:clamp(30px,3.4vw,52px);padding:0;list-style:none}
.cred{display:flex;align-items:center;gap:14px;max-width:250px}
.cred svg{width:52px;height:52px;flex:0 0 auto;color:var(--gold)}
.cred span{font-size:var(--step--1);font-weight:600;color:var(--plum);line-height:1.35}
.section--plum .cred span{color:var(--paper)}

/* ---------- coverage ---------- */
.cov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(32px,4vw,72px);align-items:start;margin-top:clamp(30px,3.4vw,52px)}
.cov__states{list-style:none;padding:0;margin:0}
.cov__states li{padding-block:22px;border-top:1px solid var(--rule);margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.cov__states li:last-child{border-bottom:1px solid var(--rule)}
.cov__states strong{font-family:var(--serif);font-size:var(--step-2);font-weight:500;color:var(--plum);letter-spacing:-.01em;line-height:1.15}
.cov__states span{font-size:var(--step--1);color:var(--ink-2)}
.cov__map{position:sticky;top:100px}
.cov__map svg{width:100%;height:auto;max-width:420px}

/* ---------- marquee ----------
   The track is 4000px wide and it scrolls forever. Running that animation while the
   marquee is still below the fold costs about 136 ms of first paint for content
   nobody can see, so the animation is paused until the strip is actually on screen,
   and it stops again when it scrolls away. */
.marquee{background:var(--paper-3);border-block:1px solid var(--rule);overflow:hidden;padding-block:18px}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite;animation-play-state:paused;will-change:transform}
.marquee.is-live .marquee__track{animation-play-state:running}
.marquee__track span{
  font-family:var(--serif);font-size:clamp(1.05rem,.9rem + .6vw,1.45rem);
  color:var(--plum);padding-inline:26px;white-space:nowrap;
  font-variation-settings:'opsz' 24;
}
.marquee__track span::after{content:"·";color:var(--magenta);margin-left:52px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ---------- faq ---------- */
.faq{margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--serif);font-size:var(--step-1);font-weight:500;color:var(--plum);
  line-height:1.3;min-height:44px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--magenta)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;
  margin-top:-7px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h12M7 1v12' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h12M7 1v12' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{margin:0;padding:0 0 24px;color:var(--ink-2);max-width:62ch}

/* ---------- closing call ---------- */
.close{padding-block:clamp(72px,8vw,132px);background:var(--plum);color:var(--paper);text-align:center}
.close h2{color:var(--paper);max-width:16ch;margin-inline:auto}
.close p{color:var(--paper);max-width:48ch;margin-inline:auto;font-size:var(--step-1)}
.close .phone{display:inline-block;font-family:var(--serif);font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);color:var(--gold);text-decoration:none;margin:1.2rem 0 2rem;font-variation-settings:'opsz' 60}
.close .phone:hover{color:var(--gold-soft)}
.close .btn-row{justify-content:center}

/* ---------- footer ---------- */
.site-foot{background:var(--plum-2);color:var(--paper);padding-block:clamp(52px,6vw,86px) 34px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px)}
/* the footer logo sits on a paper plate because the mark itself is plum and
   gold: on the plum footer it would disappear. The plate is the paper
   colour, and the logo is transparent, so the plate is the only thing
   behind it now. */
.foot-logo{width:230px;height:auto;margin-bottom:22px;background:var(--paper);padding:10px 14px;border-radius:2px}
.site-foot h2{color:var(--paper);font-size:var(--step-2);margin-bottom:.5em}
.site-foot h3{color:var(--gold-soft);font-family:var(--sans);font-size:var(--step--2);font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1em}
.site-foot p{color:#EBDDE4;max-width:40ch;font-size:var(--step--1)}
.foot-list{list-style:none;padding:0;margin:0;font-size:var(--step--1)}
.foot-list li{display:flex;gap:10px;align-items:center;padding-block:7px;margin:0;min-height:44px}
.foot-list a{color:#F2E4EB;display:inline-flex;align-items:center;min-height:44px}
.foot-list a:hover{color:var(--gold-soft)}
/* a bare link sitting in a footer list without the .foot-list wrapper */
.site-foot li>a{display:inline-flex;align-items:center;min-height:44px;color:#F2E4EB}
.site-foot li>a:hover{color:var(--gold-soft)}
.foot-list .i{color:var(--magenta-soft);width:1.05em;height:1.05em}
.foot-social{display:flex;gap:14px;margin-top:22px}
.foot-social a{color:#F2E4EB;display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid rgba(251,246,239,.22);border-radius:2px}
.foot-social a:hover{color:var(--gold-soft);border-color:var(--gold-soft)}
.foot-social .i{width:20px;height:20px}
.disclaimer{margin-top:clamp(40px,5vw,68px);padding-top:26px;border-top:1px solid rgba(251,246,239,.16);columns:2;column-gap:44px}
.disclaimer p{font-size:.82rem;line-height:1.6;color:#D9C4CE;max-width:none;margin-bottom:1em;break-inside:avoid}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;margin-top:30px;padding-top:22px;border-top:1px solid rgba(251,246,239,.16);font-size:.82rem;color:#C9B2BE}
.foot-bottom a{color:#EBDDE4;display:inline-flex;align-items:center;min-height:44px}
.foot-bottom span:last-child{display:flex;flex-wrap:wrap;gap:0 18px;align-items:center}

/* ---------- forms (contact page) ---------- */
.field{margin-bottom:18px;display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--step--1);font-weight:600;color:var(--plum)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;padding:12px 14px;border:1px solid var(--rule-strong);
  border-radius:2px;background:var(--paper);color:var(--ink);min-height:46px;width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--magenta)}
.field--error input,.field--error select,.field--error textarea{border-color:#B3261E}
.field__err{font-size:.82rem;color:#B3261E}
.form-status{font-size:var(--step--1);color:#B3261E;margin-bottom:14px}
.form-status.is-on{display:block}

/* ---------- inner-page components ----------
   The service, about, contact, legal and offers pages were written before the v3
   system and use their own class names. These rules bring them onto the same
   tokens, the same type scale and the same surfaces, so no page looks like a
   different website. Nothing here is a card: it is paper, a hairline or a tint. */

/* the old eyebrow becomes the same content label the home page uses */
.eyebrow{
  font-family:var(--sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  margin:0 0 .9rem;display:block;
}
.section--cream2{background:var(--paper-2)}

/* a portrait standing in a split */
.split--portrait{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,64px)}
.portrait{margin:0;max-width:340px}
.portrait img{width:100%;height:auto;box-shadow:var(--shadow-portrait)}

/* a proof list: the same ruled treatment as the home page's fact list */
.proof{list-style:none;padding:0;margin:2rem 0 0;border-top:1px solid var(--rule)}
.proof li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:13px;padding-block:16px;border-bottom:1px solid var(--rule);margin:0;font-size:var(--step--1)}
.proof .i{color:var(--magenta);width:20px;height:20px;margin-top:.15em}
.proof strong{color:var(--ink);font-weight:600}

/* three state blocks, set as a typographic list rather than cards */
.states{display:grid;gap:0;margin-top:clamp(24px,3vw,40px)}
.state{padding-block:22px;border-top:1px solid var(--rule)}
.state:last-child{border-bottom:1px solid var(--rule)}
.state__label{
  display:block;font-family:var(--sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--magenta);margin-bottom:.4rem;
}
.state h3{margin-bottom:.4em}
.state p{margin-bottom:0;color:var(--ink-2);max-width:56ch}

/* the closing call on inner pages */
/* The closing call to action. The text is the paper colour, so the block
   carries its own plum ground: the section around it is a plain paper
   section, and without this plate the copy was paper on paper and could
   not be read at all. */
.cta-close{
  text-align:center;max-width:640px;margin-inline:auto;
  background:var(--plum);color:var(--paper);
  padding-block:clamp(36px,4.5vw,64px);padding-inline:clamp(24px,4vw,56px);
  border-radius:2px;
}
.cta-close h2{color:var(--paper)}
.cta-close p{color:var(--paper);margin-inline:auto}
.cta-close__phone{
  display:inline-block;font-family:var(--serif);font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem);
  color:var(--gold);text-decoration:none;margin:1rem 0 1.8rem;
  font-variation-settings:'opsz' 60;
}
.cta-close__phone:hover{color:var(--gold-soft)}
.cta-close .btn-row{justify-content:center}
/* the ghost button sits on plum, so its border and label must be paper */
.cta-close .btn--ghost{color:var(--paper);border-color:rgba(251,246,239,.4)}
.cta-close .btn--ghost:hover{color:var(--paper);border-color:var(--paper);background:rgba(251,246,239,.1)}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start}
.meta-list{list-style:none;padding:0;margin:2.2rem 0 0;border-top:1px solid var(--rule)}
.meta-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:13px;padding-block:15px;border-bottom:1px solid var(--rule);margin:0;font-size:var(--step--1)}
.meta-list .i{color:var(--magenta);width:19px;height:19px;margin-top:.2em}
.meta-list__k{display:block;font-size:var(--step--2);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
.meta-list a{display:inline-flex;align-items:center;min-height:44px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.form{max-width:100%}
.form__note{font-size:var(--step--1);color:var(--ink-2);margin-bottom:1.2em}
.form__status{font-size:var(--step--1);color:#B3261E;margin-bottom:1em}
.field__error{display:none;font-size:.82rem;color:#B3261E}
.field--error .field__error{display:block}
.field--error input,.field--error select,.field--error textarea{border-color:#B3261E}
.err{color:#B3261E;font-size:.82rem}

/* legal pages */
.legal{max-width:74ch}
.legal h2{margin-top:2.2em}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--ink-2)}
.legal ul,.legal ol{color:var(--ink-2)}
.legal li{margin-bottom:.5em}

/* a two-column block */
.grid-2--page{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}

/* the nav's secondary links read a step quieter than the primary action */
.nav__link--secondary{color:var(--ink-2)}
.nav__link--secondary:hover{color:var(--magenta)}

/* the copy block inside a split */
.split__copy p{color:var(--ink-2)}
.hero__copy p{color:var(--ink-2)}

@media (max-width:1080px){
  .contact-grid{grid-template-columns:1fr}
  .split--portrait{grid-template-columns:1fr}
  .portrait{max-width:300px}
}
@media (max-width:560px){
  .grid-2{grid-template-columns:1fr}
  .grid-2--page{grid-template-columns:1fr}
}

/* ---------- motion ----------
   The whole page's motion is CSS and one IntersectionObserver. No animation library:
   GSAP + ScrollTrigger + Lenis cost 130 KB of script and about 1.2 s of main-thread
   boot-up on a throttled phone, and none of it is needed for a site with one
   authored entrance and a set of one-shot reveals. The easing curve is the same
   everywhere and never overshoots. */
@keyframes wordRise{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes clipUp{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.js .hero h1 .w{
  display:inline-block;transform:translateY(18px);opacity:0;
  animation:wordRise .9s var(--ease) both;
}
/* the stagger, in the order the words are read */
.js .hero h1 .w:nth-child(1){animation-delay:.10s}
.js .hero h1 .w:nth-child(2){animation-delay:.16s}
.js .hero h1 .w:nth-child(3){animation-delay:.22s}
.js .hero h1 .w:nth-child(4){animation-delay:.28s}
.js .hero h1 .w:nth-child(5){animation-delay:.34s}
.js .hero__figure img{clip-path:inset(0 0 100% 0);animation:clipUp 1.05s var(--ease) both}
.js .hero__copy > .btn-row{opacity:0;animation:wordRise .8s var(--ease) .46s both}
.js .hero__copy > .hero__meta{opacity:0;animation:wordRise .8s var(--ease) .56s both}

.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .52s var(--ease),transform .52s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .js .hero h1 .w{transform:none;opacity:1;animation:none}
  .js .hero__figure img{clip-path:inset(0 0 0 0);animation:none}
  .js .hero__copy > .btn-row,.js .hero__copy > .hero__meta{opacity:1;animation:none}
  .marquee__track{animation:none;transform:none}
  .seq__step::before{transform:scaleY(1)}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:38px}
  .hero h1{max-width:18ch}
  .hero__figure{max-width:440px}
  .split,.cov{grid-template-columns:1fr}
  .cov__map{position:static;order:-1}
  .svc__row{grid-template-columns:52px minmax(0,1fr);row-gap:18px}
  .svc__list{grid-column:2}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div:first-child{grid-column:1/-1}
  .disclaimer{columns:1}
  /* two columns is too tight to read at this width */
  .how{grid-template-columns:1fr;gap:30px}
  .how__aside{position:static}
  .seq{margin-top:0}
}
@media (max-width:820px){
  .nav-toggle{display:inline-flex;order:3;margin-left:0}
  /* the nav is out of flow here, so the switch takes over the job of
     pushing the Menu button to the right */
  .langswitch{order:2;margin-left:auto}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:8px var(--gut) 18px;margin:0;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--rule);min-height:44px;display:flex;align-items:center}
  .nav .head-cta{border:0;padding:12px 0}
  .seq__step{grid-template-columns:52px minmax(0,1fr)}
  .seq__step::before{left:19px}
  .cred svg{width:44px;height:44px}
}
@media (max-width:560px){
  :root{--head-h:110px}
  .hero h1{max-width:none}
  .brand img{width:140px}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .btn-row{flex-direction:column;align-items:stretch}
  .close .btn-row,.quote-band .btn-row{flex-direction:column;align-items:stretch}
  .textpair a{padding:6px 12px}
  .seq__step{grid-template-columns:44px minmax(0,1fr)}
  .seq__step::before{left:15px}
  .foot-logo{width:200px}
  .langswitch__b{padding:8px 9px}
}
@media print{
  .site-head,.marquee,.foot-social,.btn,.btn-row{display:none}
  body{background:#fff;color:#000}
  .section--plum,.close,.site-foot{background:#fff;color:#000}
}