/* Design C · "Graphite" (22-10): bone and graphite, a light Fraunces against a hard grotesk, everything square.
   Signature: column lines through the light rooms, oversized quote marks, numbered boxes, photos in black and white. */
:root{
  --l-bg:#ECEAE5;--l-bg2:#E2DFD8;--l-fg:#1C1C1C;--l-muted:#56524C;--l-line:#C9C4BA;--l-surface:#F6F5F1;
  --d-bg:#1C1C1C;--d-fg:#ECEAE5;--d-muted:#A8A39A;--d-line:#3A3936;--d-surface:#242424;
  --acc:#1C1C1C;--acc-ink:#ECEAE5;--acc-text:#665D50;
  --acc-d:#ECEAE5;--acc-d-ink:#1C1C1C;--acc-d-text:#BDB4A4;
  --bad-t:#A3312A;
  --f-display:"Fraunces",Georgia,serif;
  --f-body:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --w-display:300;--lh-display:.98;--ls-display:-.03em;
  --f-h3:var(--f-body);--w-h3:600;--ls-h3:-.01em;
  --h1:clamp(52px,8.8vw,140px);--h1-sub:clamp(46px,6.6vw,100px);--h1-measure:12ch;
  --h2:clamp(36px,4.6vw,68px);--h3:clamp(19px,1.5vw,22px);
  --r-btn:0;--r-card:0;--r-field:0;--r-chip:0;--r-photo:0;
  --w-btn:600;--ls-btn:.14em;--tt-btn:uppercase;
  --kicker-font:600 11.5px/1.3 var(--f-body);--kicker-ls:.18em;
  --brand-font:600 19px/1 var(--f-body);--brand-ls:-.01em;
  --head-bg:rgba(236,234,229,.92);--head-fg:#1C1C1C;--head-line:rgba(28,28,28,.14);--head-solid:#ECEAE5;
  --head-acc:#1C1C1C;--head-acc-ink:#ECEAE5;
  --rib-bg:#1C1C1C;--rib-fg:#ECEAE5;
  --menu-font:300 36px/1.12 var(--f-display);
  --hero-scrim:linear-gradient(to bottom,rgba(20,20,20,.72) 0,rgba(20,20,20,0) 190px),linear-gradient(to top,rgba(20,20,20,.92) 0%,rgba(20,20,20,.62) 34%,rgba(20,20,20,.22) 66%,rgba(20,20,20,.64) 100%);
  --hero-kicker:#D9D3C7;
  --field-bg:#fff;
  --num-font:600 12px/1 var(--f-body);
  --when-font:300 27px/1.1 var(--f-display);
  --dial-bg:#242424;--dial-font:300 32px/1 var(--f-display);
  --band-font:300 clamp(28px,2.9vw,44px)/1.15 var(--f-display);--band-justify:flex-end;
  --us-bg:#1C1C1C;--us-fg:#ECEAE5;
  --plan-h:22px;--price-font:300 64px/1 var(--f-display);
  --faq-h:clamp(18px,1.4vw,21px);
  --ok-font:300 38px/1.1 var(--f-display);
}
.btn{font-size:12.5px}
.btn-head{font-size:11.5px}
.kicker::before{content:"";width:9px;height:9px;background:currentColor}
/* column lines through the light rooms */
.sec.lt,.sec.lt2{background-image:linear-gradient(to right,rgba(28,28,28,.07) 1px,transparent 1px);background-size:25% 100%;background-position:calc(50% + .5px) 0}
.num{display:inline-block;padding:7px 9px;border:1px solid currentColor;letter-spacing:.14em}
.steps li{border-top:2px solid var(--fg)}
.pillars li{border-top:2px solid var(--fg);padding-top:22px}
.pillars .shot{margin-top:0}
.shot img{filter:grayscale(1) contrast(1.05)}
.ph img{filter:grayscale(1)}
/* oversized quote marks */
.band-line{border-radius:0;box-shadow:none;border-top:2px solid #1C1C1C}
.band-line::before{content:"“";display:block;height:.42em;margin:-.02em 0 .1em;font:300 3.2em/1 var(--f-display);color:#8C8273}
.dossier h2::before{content:"“";display:block;height:.5em;font:300 2.4em/1 var(--f-display);color:var(--a-text)}
.plan h3{text-transform:uppercase;letter-spacing:.08em;font-size:15px}
.plan{border-width:1px}
.plan-feat{outline:none;border-color:#1C1C1C}
.badge{left:0;top:0;transform:translateY(-100%);border-radius:0}
.dial{border-radius:0}
.qa summary h3{font-weight:500}
.tbl{border-width:2px 0 0;border-color:var(--fg);background:transparent}
.site-head .brand .wm{text-transform:uppercase;letter-spacing:.08em;font-size:15px}
@media (max-width:759px){:root{--hero-scrim:linear-gradient(to top,rgba(20,20,20,.95) 0%,rgba(20,20,20,.82) 50%,rgba(20,20,20,.55) 78%,rgba(20,20,20,.5) 100%)}}
