/* ===========================================================================
   IMPERION CONSULTING LTD — stylesheet
   Warm ink / parchment / bronze. Single page, alternating bands.

   Band system: every component paints with --fg, --fg-muted, --accent, --rule
   and --surface. A band redefines those tokens, so the same markup works on a
   dark band and on a parchment band without variant classes.
   Self-hosted fonts (SIL OFL) — nothing is requested from a third party.
   =========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;
  font-display:swap;src:url(/fonts/fraunces-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;
  font-display:swap;src:url(/fonts/fraunces-italic.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;
  font-display:swap;src:url(/fonts/hankengrotesk-normal.woff2) format('woff2')}

/* ------------------------------------------------------------------ tokens */
:root{
  --ink:#14100d; --ink-2:#1a1512; --ink-3:#231c17; --ink-4:#2e2620;
  --parchment:#f3ece0; --parchment-2:#ece2d2; --parchment-3:#e2d7c3;
  --muted:#ab9e8c; --muted-2:#9d9080; --muted-ink:#6f6557;
  --bronze:#b8864f; --bronze-soft:#d4ac78; --bronze-deep:#8a6233;
  --garnet:#b4544c; --garnet-soft:#d08b85;
  --line:rgba(243,236,224,.12); --line-strong:rgba(243,236,224,.24);
  --line-ink:rgba(20,16,13,.14); --line-ink-strong:rgba(20,16,13,.28);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --mw:1240px; --r:4px; --r-lg:12px;
  --t:.25s cubic-bezier(.2,.6,.2,1);
  --shadow:0 18px 50px -24px rgba(0,0,0,.75);
  --hdr-h:72px;
}

/* dark is the default band */
body{
  --fg:var(--parchment); --fg-muted:var(--muted); --fg-dim:var(--muted-2);
  --accent:var(--bronze); --accent-strong:var(--bronze-soft);
  --signal:var(--garnet-soft);
  --rule:var(--line); --rule-strong:var(--line-strong);
  --surface:rgba(243,236,224,.035); --surface-2:rgba(243,236,224,.07);
}
.band.light{
  --fg:var(--ink); --fg-muted:var(--muted-ink); --fg-dim:var(--muted-ink);
  --accent:var(--bronze-deep); --accent-strong:var(--bronze-deep);
  --signal:#8f3f38;
  --rule:var(--line-ink); --rule-strong:var(--line-ink-strong);
  --surface:rgba(20,16,13,.035); --surface-2:rgba(20,16,13,.065);
  background:var(--parchment); color:var(--ink);
}

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
     scroll-padding-top:calc(var(--hdr-h) + 18px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;background:var(--ink);color:var(--parchment);
  font-family:var(--sans);font-size:17px;line-height:1.68;font-weight:350;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bronze-soft);outline-offset:3px;border-radius:2px}
::selection{background:rgba(184,134,79,.32)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--bronze);
  color:#14100d;padding:.7rem 1.1rem;font-weight:600;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- structure */
.wrap{max-width:var(--mw);margin:0 auto;padding:0 clamp(1.15rem,4vw,2.5rem)}
.band{position:relative;padding:clamp(4.5rem,9vw,7.5rem) 0;color:var(--fg)}
.band.tight{padding:clamp(3rem,6vw,4.5rem) 0}
.band.ink-2{background:var(--ink-2)}
.band.ink-3{background:var(--ink-3)}
.band.hair{border-top:1px solid var(--line)}

/* ------------------------------------------------------------- typography */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;
  letter-spacing:-.015em;line-height:1.08}
h1{font-size:clamp(2.4rem,6.1vw,4.4rem);line-height:1.02;letter-spacing:-.025em}
h2{font-size:clamp(1.95rem,4.1vw,3.05rem);letter-spacing:-.02em}
h3{font-size:clamp(1.16rem,1.9vw,1.4rem);line-height:1.22;letter-spacing:-.01em}
h4{font-size:1.02rem;line-height:1.3}
h1 em,h2 em,h3 em{font-style:italic;color:var(--accent-strong);font-weight:300}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--fg)}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.6;color:var(--fg-muted);
  max-width:62ch}
.small{font-size:.9rem;line-height:1.6;color:var(--fg-muted)}
.eyebrow{display:inline-flex;align-items:center;gap:.65rem;margin:0 0 1.15rem;
  font-size:.705rem;font-weight:600;letter-spacing:.235em;text-transform:uppercase;
  color:var(--accent)}
.eyebrow::before{content:'';width:26px;height:1px;background:currentColor;opacity:.75}
.sec-head{max-width:70ch;margin:0 0 clamp(2.4rem,4.5vw,3.6rem)}
.sec-head .lead{margin-top:1.25rem}

/* ------------------------------------------------------------------ header */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr-h);
  background:rgba(20,16,13,.72);backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t),background var(--t),height .32s cubic-bezier(.4,0,.2,1)}
.hdr.scrolled{border-bottom-color:var(--line);background:rgba(20,16,13,.92);
  --hdr-h:60px}
.hdr.scrolled .brand .mark{width:26px;height:26px}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.brand .mark{width:30px;height:30px;flex:0 0 auto;
  transition:width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1)}
.brand b{font-family:var(--display);font-weight:500;font-size:1.08rem;
  letter-spacing:.055em;color:var(--parchment);line-height:1;display:block}
.brand span{display:block;font-size:.565rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted-2);margin-top:.22rem;font-weight:500}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.7rem}
/* :not(.btn) throughout — the call to action is an <a> inside .nav too, and
   must keep its own button colours rather than inherit the link styling */
.nav a:not(.btn){text-decoration:none;font-size:.88rem;color:var(--muted);font-weight:450;
  position:relative;padding:.3rem 0;transition:color var(--t)}
.nav a:not(.btn)::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--bronze);transition:right var(--t)}
.nav a:not(.btn):hover,.nav a:not(.btn).active{color:var(--parchment)}
.nav a:not(.btn):hover::after,.nav a:not(.btn).active::after{right:0}
/* the call to action inside .nav is the mobile copy only — on desktop the one
   in .hdr-end is shown instead, so exactly one is ever visible */
.nav .btn{display:none}
.hdr-end{display:flex;align-items:center;gap:.9rem;flex:0 0 auto}
.lang{display:flex;align-items:center;gap:.1rem;font-size:.74rem;font-weight:600;
  letter-spacing:.1em;border:1px solid var(--line);border-radius:999px;padding:.2rem}
.lang a,.lang span{padding:.22rem .58rem;border-radius:999px;text-decoration:none;
  color:var(--muted-2);transition:color var(--t),background var(--t)}
.lang a:hover{color:var(--parchment)}
.lang .cur{background:rgba(243,236,224,.1);color:var(--parchment)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.78rem 1.5rem;border-radius:999px;text-decoration:none;font-size:.9rem;
  font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:transform var(--t),background var(--t),border-color var(--t),color var(--t)}
.btn-primary{background:var(--bronze);color:#14100d;border-color:var(--bronze)}
.btn-primary:hover{background:var(--bronze-soft);border-color:var(--bronze-soft);
  transform:translateY(-1px)}
.btn-ghost{border-color:var(--rule-strong);color:var(--fg);background:none}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-strong);transform:translateY(-1px)}
.band.light .btn-primary{background:var(--ink);border-color:var(--ink);color:var(--parchment)}
.band.light .btn-primary:hover{background:var(--bronze-deep);border-color:var(--bronze-deep)}
.hdr .btn{padding:.6rem 1.15rem;font-size:.85rem}

.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.burger i{display:block;width:17px;height:1.5px;background:var(--parchment);position:relative;
  transition:background var(--t)}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:17px;height:1.5px;
  background:var(--parchment);transition:transform var(--t),top var(--t)}
.burger i::before{top:-5.5px}
.burger i::after{top:5.5px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

@media (max-width:1000px){
  .burger{display:inline-flex}
  .nav{position:fixed;inset:var(--hdr-h) 0 auto;margin:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--ink-2);border-bottom:1px solid var(--line);
    padding:.4rem clamp(1.15rem,4vw,2.5rem) 1.6rem;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform var(--t),opacity var(--t),visibility var(--t);
    max-height:calc(100dvh - var(--hdr-h));overflow-y:auto}
  .nav.open{transform:none;opacity:1;visibility:visible}
  .nav a:not(.btn){padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.02rem}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{display:inline-flex;margin-top:1.3rem}
  .hdr-end .btn-primary{display:none}
  .hdr .wrap{gap:.8rem}
}
/* below this width the brand sub-line, the language pill and the burger stop
   fitting on one row — the sub-line is the one that can go */
@media (max-width:560px){
  .brand span span{display:none}
  .brand b{font-size:1.02rem}
}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;padding-top:calc(var(--hdr-h) + clamp(3.6rem,9vw,7rem));
  padding-bottom:clamp(4rem,8vw,6.5rem);overflow:hidden}
.hero::before{content:'';position:absolute;inset:-25% -10% auto;height:140%;pointer-events:none;
  transform:translate3d(0,var(--par,0px),0);
  background:
    radial-gradient(62% 52% at 62% 14%,rgba(184,134,79,.17),transparent 64%),
    radial-gradient(48% 42% at 10% 74%,rgba(180,84,76,.1),transparent 65%),
    radial-gradient(75% 60% at 50% 112%,rgba(243,236,224,.05),transparent 70%)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E")}
.hero .wrap{position:relative;z-index:1}
/* the hero is text only — the registered details moved to the About section,
   so the headline gets the full measure instead of sharing it with a card */
.hero-inner{max-width:68ch}
.hero h1{margin-bottom:1.7rem;max-width:15ch;
  font-size:clamp(2.5rem,6.8vw,5rem)}
.hero .lead{max-width:56ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.hero-note{margin-top:1.9rem;font-size:.82rem;color:var(--muted-2);display:flex;
  flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
.hero-note b{color:var(--muted);font-weight:600}
.dot{width:3px;height:3px;border-radius:50%;background:var(--bronze);flex:0 0 auto}

.card{background:linear-gradient(180deg,rgba(243,236,224,.055),rgba(243,236,224,.02));
  border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.75rem;
  box-shadow:var(--shadow)}
.card h3{font-size:1.02rem;margin-bottom:1.15rem}
.card dl{margin:0}
.card dl div{display:flex;justify-content:space-between;gap:1.2rem;padding:.72rem 0;
  border-top:1px solid var(--rule);font-size:.87rem}
.card dl div:first-of-type{border-top:0;padding-top:0}
.card dt{color:var(--fg-dim);flex:0 0 auto}
.card dd{margin:0;text-align:right;color:var(--fg);font-weight:500}
.card .seal{display:flex;align-items:flex-start;gap:.6rem;margin-top:1.4rem;padding-top:1.2rem;
  border-top:1px solid var(--rule);font-size:.78rem;color:var(--fg-dim);line-height:1.5}
.card .seal svg{flex:0 0 auto;color:var(--bronze);margin-top:2px}

/* ----------------------------------------------------------------- ticker */
.ticker-band{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink-2);overflow:hidden}
.ticker{display:flex;width:max-content;animation:slide 48s linear infinite}
.ticker:hover{animation-play-state:paused}
.ticker ul{display:flex;align-items:center;gap:2.6rem;margin:0;padding:1.05rem 2.6rem 1.05rem 0;
  list-style:none;flex:0 0 auto}
.ticker li{display:flex;align-items:center;gap:2.6rem;font-family:var(--display);
  font-size:.95rem;color:var(--muted);white-space:nowrap}
.ticker li::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--bronze);
  opacity:.8}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker{animation:none;width:100%;overflow-x:auto}
  .ticker ul[aria-hidden="true"]{display:none}
}

/* -------------------------------------------------------------- statement */
.stmt-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:end}
.stmt{font-family:var(--display);font-size:clamp(1.55rem,3.4vw,2.6rem);line-height:1.22;
  letter-spacing:-.02em;max-width:22ch;margin:0}
.stmt em{font-style:italic;color:var(--accent)}
.stmt-side{display:grid;gap:1.3rem}
.stmt-side p{color:var(--fg-muted);font-size:1.01rem}

/* --------------------------------------------------------------- services */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.svc-item{background:var(--ink);padding:clamp(1.6rem,3vw,2.4rem);display:flex;
  flex-direction:column;gap:.95rem;transition:background var(--t)}
.band.light .svc-item{background:var(--parchment)}
.svc-item:hover{background:var(--ink-2)}
.band.light .svc-item:hover{background:var(--parchment-2)}
.svc-num{font-family:var(--display);font-size:.8rem;font-weight:600;letter-spacing:.2em;
  color:var(--accent)}
.svc-item p{color:var(--fg-muted);font-size:.96rem;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.5rem}
.chip{font-size:.745rem;letter-spacing:.04em;padding:.3rem .66rem;border-radius:999px;
  border:1px solid var(--rule-strong);color:var(--fg-muted);white-space:nowrap}

/* ---------------------------------------------------------------- process */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--rule)}
.phase{padding:2rem 1.6rem 0 0;position:relative}
.phase + .phase{padding-left:1.6rem;border-left:1px solid var(--rule)}
.phase::before{content:'';position:absolute;top:-4px;left:0;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
.phase + .phase::before{left:-4px}
.phase-n{font-size:.7rem;font-weight:700;letter-spacing:.22em;color:var(--accent);
  display:block;margin-bottom:.7rem}
.phase h3{margin-bottom:.6rem}
.phase p{color:var(--fg-muted);font-size:.93rem;margin:0}
.phase-out{margin-top:1rem;font-size:.8rem;color:var(--fg-dim);display:flex;gap:.45rem}
.phase-out b{color:var(--fg-muted);font-weight:600;flex:0 0 auto}

/* ------------------------------------------------------------- situations */
.sit{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.3rem,2.6vw,2.2rem)}
.sit-item{border-left:2px solid var(--rule-strong);padding:.2rem 0 .2rem 1.5rem;
  transition:border-color var(--t)}
.sit-item:hover{border-left-color:var(--accent)}
.sit-item h3{margin-bottom:.55rem;font-size:1.1rem}
.sit-item p{color:var(--fg-muted);font-size:.95rem;margin:0}

/* ----------------------------------------------------------------- notice */
.notice{border:1px solid var(--rule);border-left:3px solid var(--signal);
  border-radius:var(--r);padding:1.3rem 1.5rem;background:var(--surface);
  font-size:.9rem;line-height:1.62;color:var(--fg-muted);margin-top:2.4rem}
.notice b{display:block;color:var(--fg);font-weight:600;margin-bottom:.35rem;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}

/* ------------------------------------------------------------------ facts */
.about-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(2.2rem,5vw,4.5rem);
  align-items:start}
.facts{width:100%;border-collapse:collapse;font-size:.9rem}
.facts th,.facts td{text-align:left;padding:.8rem 0;border-bottom:1px solid var(--rule);
  vertical-align:top}
.facts th{font-weight:500;color:var(--fg-dim);width:40%;font-size:.84rem}
.facts td{color:var(--fg)}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0;padding-bottom:0}
.facts td small{display:block;color:var(--fg-dim);font-size:.8rem;margin-top:.15rem}

/* -------------------------------------------------------------------- faq */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:1.4rem 2.5rem 1.4rem 0;position:relative;
  font-family:var(--display);font-size:clamp(1.02rem,1.6vw,1.18rem);line-height:1.35;
  color:var(--fg);transition:color var(--t)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:'';position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg);transition:transform var(--t)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq .ans{padding:0 clamp(0rem,6vw,4rem) 1.6rem 0;color:var(--fg-muted);font-size:.97rem;
  max-width:78ch}

/* ------------------------------------------------------------------- form */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.2rem,5vw,4.5rem);
  align-items:start}
.contact-list{display:grid;gap:1.5rem;margin-top:2.2rem}
.contact-list div{display:grid;gap:.25rem}
.contact-list b{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:600}
.contact-list span,.contact-list a{color:var(--fg-muted);font-size:.95rem;line-height:1.55;
  text-decoration:none}
.contact-list a:hover{color:var(--accent-strong)}
form{display:grid;gap:1.1rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
label{display:grid;gap:.45rem;font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-dim)}
.req{font-style:normal;color:var(--accent);margin-left:.3rem}
input,textarea,select{font:inherit;font-size:.96rem;font-weight:400;color:var(--fg);
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r);
  padding:.78rem .95rem;width:100%;transition:border-color var(--t),background var(--t)}
textarea{min-height:140px;resize:vertical;line-height:1.6}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);
  background:var(--surface-2)}
input::placeholder,textarea::placeholder{color:var(--fg-dim);opacity:.75}
select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
  linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.84rem;text-transform:none;
  letter-spacing:0;font-weight:400;color:var(--fg-muted);line-height:1.55}
.consent input{width:17px;height:17px;flex:0 0 auto;margin-top:3px;accent-color:var(--bronze)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.8rem;color:var(--fg-dim);line-height:1.55}
.form-msg{font-size:.88rem;padding:.8rem 1rem;border-radius:var(--r);display:none}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(184,134,79,.14);border:1px solid rgba(184,134,79,.4);color:var(--fg)}
.form-msg.err{background:rgba(180,84,76,.14);border:1px solid rgba(180,84,76,.45);color:var(--fg)}

/* ------------------------------------------------------------------ legal */
.legal{max-width:84ch}
.legal h3{font-size:clamp(1.3rem,2.4vw,1.75rem);margin:2.8rem 0 .9rem;
  padding-top:1.8rem;border-top:1px solid var(--rule)}
.legal h3:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal h4{margin:1.9rem 0 .5rem;font-size:1.02rem;color:var(--fg)}
.legal p,.legal li{color:var(--fg-muted);font-size:.945rem;line-height:1.7}
.legal ul{margin:.5rem 0 1.1rem;padding-left:1.15rem}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal dl{margin:.6rem 0 1.2rem}
.legal dl div{display:grid;grid-template-columns:200px 1fr;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--rule);font-size:.92rem}
.legal dt{color:var(--fg-dim)}
.legal dd{margin:0;color:var(--fg)}
.legal .updated{font-size:.82rem;color:var(--fg-dim);margin-top:2rem}

/* ----------------------------------------------------------------- footer */
.foot{background:var(--ink);border-top:1px solid var(--line);
  padding:clamp(3rem,6vw,4.5rem) 0 2rem;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);
  padding-bottom:2.8rem}
.foot h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);
  font-family:var(--sans);font-weight:600;margin-bottom:1.1rem}
.foot p{font-size:.9rem;color:var(--muted-2);max-width:40ch}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot a{color:var(--muted);text-decoration:none;font-size:.9rem;transition:color var(--t)}
.foot a:hover{color:var(--parchment)}
.foot address{font-style:normal;font-size:.9rem;color:var(--muted-2);line-height:1.7}
.foot-bar{border-top:1px solid var(--line);padding-top:1.6rem;display:flex;
  justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;
  font-size:.81rem;color:var(--muted-2)}
.foot-bar nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.to-top{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  color:var(--muted-2);font-size:.81rem;transition:color var(--t)}
.to-top:hover{color:var(--bronze-soft)}

/* ------------------------------------------------------------- responsive */
@media (max-width:980px){
  .stmt-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .stmt-grid{gap:2.2rem}
  .flow{grid-template-columns:repeat(2,1fr);border-top:0}
  .phase{border-top:1px solid var(--rule);padding:2rem 1.4rem 1.8rem 0}
  .phase:nth-child(even){padding-left:1.6rem;border-left:1px solid var(--rule)}
  .phase:nth-child(odd){border-left:0;padding-left:0}
  .phase::before{left:0}
  .phase:nth-child(even)::before{left:-4px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > div:first-child{grid-column:1/-1}
}
@media (max-width:680px){
  body{font-size:16px}
  .svc,.sit{grid-template-columns:1fr}
  .svc{border-radius:var(--r)}
  .flow{grid-template-columns:1fr}
  .phase,.phase:nth-child(even){padding:1.8rem 0 1.6rem;border-left:0;padding-left:0}
  .phase::before,.phase:nth-child(even)::before{left:0}
  .row{grid-template-columns:1fr}
  .legal dl div{grid-template-columns:1fr;gap:.1rem}
  .foot-grid{grid-template-columns:1fr}
  .foot-bar{flex-direction:column;align-items:flex-start}
  .card dl div{flex-direction:column;gap:.15rem}
  .card dd{text-align:left}
}

/* ===========================================================================
   Motion layer

   Everything below is gated on `html.js-anim`, which main.js adds only when
   JavaScript actually runs AND the visitor has not asked for reduced motion.
   Without that class every element is already in its finished state, so the
   page is complete and readable with JavaScript off — nothing is hidden behind
   an animation that may never fire.
   =========================================================================== */

/* ------------------------------------------------------- block reveal */
.rv{opacity:1;transform:none}
.js-anim .rv{opacity:0;transform:translateY(26px);will-change:opacity,transform;
  transition:opacity .75s cubic-bezier(.4,0,.2,1),
             transform .75s cubic-bezier(.4,0,.2,1)}
.js-anim .rv.in{opacity:1;transform:none;will-change:auto}

/* --------------------------------------------- headline, word by word
   main.js wraps each word of a headline in .w > i. The mask is the .w
   element; the inner <i> slides up out of it. font-style:inherit keeps the
   italic of an <em> intact, and the padding/margin pair stops the mask from
   clipping descenders. */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.12em;margin-bottom:-.12em}
.w > i{display:inline-block;font-style:inherit}
.js-anim .w > i{transform:translateY(112%);opacity:0;will-change:transform;
  transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .55s ease}
.js-anim .ln.in .w > i{transform:none;opacity:1;will-change:auto}

/* ------------------------------------------------------ the eyebrow dash */
.js-anim .eyebrow::before{width:0;
  transition:width .75s cubic-bezier(.4,0,.2,1) .12s}
.js-anim .in .eyebrow::before,
.js-anim .eyebrow.in::before,
.js-anim .ln.in + .lead .eyebrow::before{width:26px}

/* -------------------------------------------------- scroll progress bar */
.scroll-progress{position:fixed;left:0;top:0;z-index:110;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,var(--bronze-deep),var(--bronze) 55%,var(--bronze-soft))}

/* ------------------------------------------------ floating back-to-top */
.to-top-fab{position:fixed;right:clamp(1rem,2.5vw,1.6rem);bottom:clamp(1rem,2.5vw,1.6rem);
  z-index:120;width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:50%;color:var(--bronze-soft);
  background:rgba(26,21,18,.86);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.4,0,.2,1),
             visibility .35s,background .25s,color .25s,border-color .25s}
.to-top-fab.in{opacity:1;visibility:visible;transform:none}
.to-top-fab:hover{background:var(--bronze);color:#14100d;border-color:var(--bronze)}

/* ------------------------------------------- the process dots, breathing */
@keyframes dot-pulse{
  0%   {box-shadow:0 0 0 0 rgba(184,134,79,.55)}
  70%  {box-shadow:0 0 0 9px rgba(184,134,79,0)}
  100% {box-shadow:0 0 0 0 rgba(184,134,79,0)}
}
.js-anim .phase.in::before{animation:dot-pulse 3.4s cubic-bezier(.4,0,.2,1) infinite}

/* ------------------------------------------------------ hover behaviour */
.svc-item{position:relative}
.svc-item::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.4,0,.2,1)}
.svc-item:hover::after,.svc-item:focus-within::after{transform:scaleX(1)}
.sit-item{transition:border-color var(--t),transform var(--t)}
.sit-item:hover{transform:translateX(5px)}
.card{transition:border-color .5s ease,box-shadow .5s ease}
.card:hover{border-color:var(--rule-strong);
  box-shadow:0 0 0 1px rgba(184,134,79,.18),var(--shadow)}
.chip{transition:border-color var(--t),color var(--t)}
.svc-item:hover .chip{border-color:var(--accent);color:var(--fg)}

/* a light sweep across the primary button, once per hover */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.3) 50%,transparent 68%);
  transform:translateX(-130%)}
.js-anim .btn-primary::after{transition:transform .75s cubic-bezier(.4,0,.2,1)}
.js-anim .btn-primary:hover::after{transform:translateX(130%)}
.to-top svg{transition:transform var(--t)}
.to-top:hover svg{transform:translateY(-3px)}

/* ------------------------------------------------------ the FAQ answers */
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.js-anim .faq details[open] .ans{animation:faq-in .45s cubic-bezier(.4,0,.2,1)}

/* ------------------------------------------------------ the ticker edges
   fade the marquee out at both ends so words do not hit the viewport edge */
.ticker-band{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rv,.w > i{opacity:1!important;transform:none!important}
  .scroll-progress,.to-top-fab{display:none}
  .phase::before{animation:none!important}
}

/* ------------------------------------------------------------------ print */
@media print{
  .hdr,.ticker-band,.burger,form,.to-top,.cta-row{display:none!important}
  body,.band,.band.light{background:#fff!important;color:#000!important}
  .band{padding:1.2rem 0;border:0}
  a{text-decoration:underline}
  .hero::before,.hero::after{display:none}
}