/* self-hosted — no third-party font CDN */
@font-face{font-family:Switzer;src:url('/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Switzer;src:url('/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Switzer;src:url('/fonts/switzer-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Switzer;src:url('/fonts/switzer-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Gambetta;src:url('/fonts/gambetta-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Gambetta;src:url('/fonts/gambetta-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Gambetta;src:url('/fonts/gambetta-500.woff2') format('woff2');font-weight:500;font-display:swap}

/* ============================================================
   CHARTER — KaNun Advisory
   Bone / oxblood / brass. Engine-turned guilloche as house material.
   ============================================================ */
:root{
  --bone:#E7E3DA;        /* ground — warm greige, not cream */
  --paper:#F2EFE9;
  --ink:#16130F;         /* warm near-black */
  --ink-2:#4A443C;
  --ox:#0E2138;          /* the colour, used as FIELD not accent */
  --ox-lift:#A9BCD4;
  --brass:#8A6D33;
  --brass-lift:#D9BC7A;
  --rule:rgba(22,19,15,.18);
  --rule-o:rgba(231,227,218,.22);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bone);color:var(--ink);
  font-family:Gambetta,Georgia,serif;font-weight:300;
  font-size:clamp(1.02rem,.96rem + .3vw,1.2rem);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ox);color:var(--bone)}
.d{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:600;
  text-transform:uppercase;line-height:.86;letter-spacing:-.038em}
.lbl{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;line-height:1.4}
b,strong{font-weight:500}

.frame{display:grid;grid-template-columns:
  [edge-l] minmax(20px,7.2vw) [main-l] minmax(0,1fr) [main-r] minmax(16px,3vw) [edge-r]}
.frame > *{grid-column:main-l/main-r}
.bleed-r{grid-column:main-l/edge-r !important}

/* ---- nav ---- */
.nav{position:absolute;top:0;left:0;right:0;z-index:40;padding:28px 0 0;
  display:grid;grid-template-columns:minmax(20px,7.2vw) 1fr auto minmax(16px,3vw)}
.nav .mark{grid-column:2;font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:600;
  font-size:.9rem;letter-spacing:-.015em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.nav .mark i{font-style:normal;color:var(--ox)}
.nav ul{grid-column:3;display:flex;gap:1.6rem;list-style:none;padding-top:3px}
.nav a{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.17em;text-decoration:none;color:var(--ink);padding-bottom:3px;
  background-image:linear-gradient(var(--ox),var(--ox));background-repeat:no-repeat;
  background-size:0 1px;background-position:0 100%;transition:background-size .3s var(--ease)}
.nav a:hover{background-size:100% 1px}
@media(max-width:860px){.nav ul{display:none}}

/* ---- 1 HERO — guilloche bleeds off the right ---- */
.hero{min-height:100svh;position:sticky;top:0;align-content:end;
  padding:0 0 clamp(30px,4.6vh,58px);background:var(--bone);z-index:1;overflow:hidden}
.hero .plate{position:absolute;right:-7vw;top:clamp(74px,10vh,118px);width:min(34vw,470px);aspect-ratio:1;opacity:.13;pointer-events:none;z-index:0;background:url('/img/seal-wm.svg') center/contain no-repeat}
.hero-in{position:relative;z-index:2;width:100%;padding-top:clamp(72px,11vh,140px);
  display:grid;row-gap:clamp(22px,3.8vh,46px)}
.hero h1{font-size:clamp(2.4rem,7.6vw,8.4rem);max-width:15ch}
.hero h1 .ox{color:var(--ox)}
.hero-foot{display:grid;gap:24px}
@media(min-width:940px){.hero-foot{grid-template-columns:minmax(0,1fr) minmax(290px,30%);gap:clamp(36px,5.5vw,110px);align-items:end}}
.hero-lede{font-size:clamp(1.02rem,.9rem + .4vw,1.28rem);line-height:1.44;max-width:42ch;color:var(--ink-2)}
.hero-lede b{color:var(--ink)}
.tl{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.19em;text-decoration:none;color:var(--ink);
  display:inline-block;padding-bottom:6px;background-image:linear-gradient(var(--ox),var(--ox));
  background-repeat:no-repeat;background-size:100% 1.5px;background-position:0 100%;
  transition:background-size .45s var(--ease),color .3s}
.tl:hover{background-size:0 1.5px;color:var(--ox)}
.tl .a{display:inline-block;margin-left:.5em;transition:transform .45s var(--ease)}
.tl:hover .a{transform:translateX(6px)}
.credit{border-top:1px solid var(--brass);padding-top:14px;display:flex;flex-wrap:wrap;gap:.45rem 1.9rem}
.credit span{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.63rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2)}

/* ---- 2 OXBLOOD FIELD ---- */
.field{position:relative;z-index:2;background:var(--ox);color:var(--bone);
  padding:clamp(80px,13vh,180px) 0 clamp(70px,11vh,150px)}

.field .in{display:grid;gap:34px}
@media(min-width:1000px){.field .in{grid-template-columns:24% 1fr;column-gap:clamp(36px,5.5vw,100px)}}
.field .side{color:var(--ox-lift)}
.field h2{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;
  font-size:clamp(1.7rem,3.8vw,3.3rem);line-height:1.08;letter-spacing:-.03em;max-width:19ch;
  margin-bottom:clamp(30px,4.6vh,54px)}
.field h2 .hl{color:var(--ox-lift)}
.qs{list-style:none;counter-reset:q}
.qs li{counter-increment:q;display:grid;grid-template-columns:46px 1fr;gap:clamp(12px,2vw,30px);
  padding:20px 0;border-top:1px solid var(--rule-o);align-items:start}
.qs li:last-child{border-bottom:1px solid var(--rule-o)}
.qs li::before{content:counter(q,decimal-leading-zero);font-family:Switzer,"Helvetica Neue",Arial,sans-serif;
  font-weight:500;font-size:.72rem;letter-spacing:.1em;color:var(--brass-lift);padding-top:.4em}
.qs p{font-size:clamp(1rem,.93rem + .3vw,1.2rem);line-height:1.42;color:rgba(231,227,218,.86);max-width:50ch}
.qs b{color:var(--bone);font-weight:500}

/* ---- 3 ENGAGEMENTS — ledger ---- */
.eng{position:relative;z-index:2;background:var(--bone);padding:clamp(78px,12vh,165px) 0 clamp(60px,9vh,130px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--brass);padding-bottom:16px;margin-bottom:clamp(26px,4.5vh,54px)}
.sec-head h2{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:-.03em;font-size:clamp(1.4rem,2.9vw,2.5rem);line-height:1}
.sec-head .lbl{color:var(--ink-2)}
.row{display:grid;gap:8px;padding:clamp(24px,3.6vh,42px) 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit}
@media(min-width:880px){
  .row{grid-template-columns:9% 1fr 21%;column-gap:clamp(18px,3vw,56px);align-items:start}
  .row.b{grid-template-columns:9% 21% 1fr}
}
.row .rn{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;
  font-size:clamp(1.1rem,1.9vw,1.6rem);letter-spacing:.02em;color:var(--brass);
  font-variant-numeric:tabular-nums;transition:transform .5s var(--ease)}
.row:hover .rn{transform:translateX(7px)}
.row h3{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;
  font-size:clamp(1.22rem,2.3vw,1.95rem);line-height:1.1;letter-spacing:-.025em;max-width:22ch;
  background-image:linear-gradient(var(--ox),var(--ox));background-repeat:no-repeat;
  background-size:0 1px;background-position:0 100%;transition:background-size .5s var(--ease);padding-bottom:2px}
.row:hover h3{background-size:100% 1px}
.row p{color:var(--ink-2);max-width:45ch;font-size:.99rem;line-height:1.45;margin-top:9px}
.row .meta{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.63rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--ink-2);line-height:1.8}
@media(min-width:880px){.row .meta{text-align:right}.row.b .meta{text-align:left}}

/* ---- 4 STATEMENT ---- */
.stmt{position:relative;z-index:2;background:var(--bone);overflow:hidden;
  padding:clamp(56px,9vh,120px) 0 clamp(66px,11vh,150px)}
.stmt .plate{display:none}
.stmt .big{position:relative;z-index:2;font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:-.042em;line-height:.87;font-size:clamp(2rem,7vw,7.6rem);color:var(--ink)}
.stmt .big em{font-style:normal;color:var(--ox)}
.stmt .under{position:relative;z-index:2;display:grid;gap:22px;margin-top:clamp(28px,4.6vh,54px)}
@media(min-width:960px){.stmt .under{grid-template-columns:34% minmax(0,1fr);column-gap:clamp(36px,5.5vw,100px)}}
.stmt .under p{max-width:50ch;color:var(--ink-2)}

/* ---- 5 PRINCIPAL ---- */
.prin{position:relative;z-index:2;background:var(--paper);padding:clamp(78px,12vh,165px) 0}
.prin .in{display:grid;gap:32px}
@media(min-width:960px){.prin .in{grid-template-columns:minmax(0,1fr) 31%;column-gap:clamp(36px,5.5vw,100px)}}
.prin h2{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;
  font-size:clamp(1.45rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.03em;max-width:20ch;margin-bottom:24px}
.prin p{max-width:56ch;color:var(--ink-2);margin-bottom:1rem}
.prin p b{color:var(--ink)}
.cv{border-top:1px solid var(--brass);padding-top:12px}
.cv div{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule)}
.cv .y{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.65rem;
  letter-spacing:.09em;color:var(--ox);font-variant-numeric:tabular-nums;padding-top:.3em}
.cv .w{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:.78rem;line-height:1.4;color:var(--ink)}

/* ---- 6 INSIGHTS ---- */
.ins{position:relative;z-index:2;background:var(--bone);padding:clamp(66px,10vh,145px) 0}
.icard{display:grid;gap:10px;text-decoration:none;color:inherit;padding:24px 0;border-bottom:1px solid var(--rule)}
@media(min-width:880px){.icard{grid-template-columns:14% minmax(0,1fr) 21%;column-gap:clamp(18px,3vw,56px);align-items:start}}
.icard .k{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.63rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--brass)}
.icard .t{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;
  font-size:clamp(1.12rem,2.1vw,1.72rem);line-height:1.14;letter-spacing:-.025em;max-width:26ch;
  background-image:linear-gradient(var(--ox),var(--ox));background-repeat:no-repeat;
  background-size:0 1px;background-position:0 100%;transition:background-size .5s var(--ease);padding-bottom:2px}
.icard:hover .t{background-size:100% 1px}
.icard .m{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.63rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2)}
@media(min-width:880px){.icard .m{text-align:right}}

/* ---- 7 CLOSE ---- */
.close{position:relative;z-index:2;background:var(--ox);color:var(--bone);overflow:hidden;
  padding:clamp(78px,13vh,175px) 0 clamp(54px,8vh,100px)}
.close .plate{display:none}
.close .in{position:relative;z-index:2;display:grid;gap:42px}
@media(min-width:980px){.close .in{grid-template-columns:1fr 43%;column-gap:clamp(36px,5.5vw,100px)}}
.close h2{font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:-.042em;line-height:.9;font-size:clamp(2rem,5.6vw,5rem)}
.close h2 .lift{color:var(--ox-lift);display:block}
.close .note{margin-top:22px;color:rgba(231,227,218,.66);max-width:34ch}
form{display:grid}
.f{border-bottom:1px solid var(--rule-o);padding:13px 0 7px}
.f label{display:block;font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.6rem;
  text-transform:uppercase;letter-spacing:.19em;color:var(--brass-lift);margin-bottom:5px}
.f input,.f textarea{width:100%;background:transparent;border:0;color:var(--bone);
  font-family:Gambetta,Georgia,serif;font-weight:300;font-size:1.02rem;padding:3px 0;resize:none}
.f input:focus,.f textarea:focus{outline:none}
.f:focus-within{border-color:var(--brass-lift)}
button{margin-top:24px;justify-self:start;background:transparent;border:0;cursor:pointer;
  font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.19em;color:var(--bone);padding-bottom:6px;
  background-image:linear-gradient(var(--brass-lift),var(--brass-lift));background-repeat:no-repeat;
  background-size:100% 1.5px;background-position:0 100%;transition:background-size .45s var(--ease),color .3s}
button:hover{color:var(--brass-lift);background-size:0 1.5px}

/* ---- footer ---- */
footer{position:relative;z-index:2;background:var(--ox);color:rgba(231,227,218,.6);
  padding:0 0 40px;font-family:Switzer,"Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:.7rem;line-height:1.9}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--rule-o);padding-top:24px}
@media(min-width:820px){.fg{grid-template-columns:repeat(4,1fr)}}
.fg .k{display:block;font-weight:500;font-size:.6rem;text-transform:uppercase;letter-spacing:.19em;
  color:var(--brass-lift);margin-bottom:8px}
.fg a{color:rgba(231,227,218,.78);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;transition:background-size .3s var(--ease)}
.fg a:hover{background-size:100% 1px}
.strip{display:none}

@media (prefers-reduced-motion:no-preference){
  html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  html.js .rv.on{opacity:1;transform:none}
}

.foot-seal{margin:36px auto 0;display:block;height:72px;opacity:.55}

@media(max-width:940px){.hero .plate{display:none}}
.stamp-obj{display:block;width:clamp(120px,14vw,190px);margin-top:clamp(28px,5vh,48px);transform:rotate(-8deg);opacity:.95}