/* ==========================================================================
   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);
}

*,*::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. */
.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:88px}
.brand{display:block;flex:0 0 auto;text-decoration:none}
.brand img{width:172px;height:auto}.nav{margin-left:auto;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;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}
.lang{background:none;border:1px solid var(--rule-strong);border-radius:2px;padding:7px 11px;font:inherit;font-size:var(--step--2);font-weight:600;letter-spacing:.1em;color:var(--ink);cursor:pointer;min-height:40px}
.lang:hover{border-color:var(--magenta);color:var(--magenta)}

/* ---------- 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 ---------- */
.seq{display:grid;gap:0;margin-top:clamp(32px,4vw,56px);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)}
.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 */
.cta-close{text-align:center;max-width:640px;margin-inline:auto}
.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}

/* 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}
}
@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .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}
  .lang{margin-top:12px;align-self:flex-start}
  .seq__step{grid-template-columns:52px minmax(0,1fr)}
  .seq__step::before{left:19px}
  .cred svg{width:44px;height:44px}
}
@media (max-width:560px){
  .hero h1{max-width:none}
  .brand img{width:158px}
  .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}
}
@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}
}