/* /emface/ - page-specific styles, ported from the 2026-09 redesign mock (reference/emface-redesign.html).
   Loaded only by that page. The site header, nav, drawer, footer and sticky mobile bar are styled by
   the inline block in the page itself, exactly as on every other page.

   Palette: the tokens below are the site's own values (same as the chrome block); --gold and --ink are
   shared with the chrome on purpose. --gold-deep is the SkinPen button hover, reused here so the .btn
   rules are identical to /css/skinpen.css. */

/* Self-hosted fonts (latin subsets, variable weight). Served from /fonts/ - see _headers
   for the cache rule. The three files replace the Google Fonts call in the mock. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/cormorant-garamond-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:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-italic-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:Inter;font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/inter-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}
/* DM Sans is used only by the site chrome (nav, drawer, footer, cookie banner). */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 500;font-display:swap;src:url(/fonts/dm-sans-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}

/* ===== Tokens: site palette (same values as the live chrome) ===== */
:root{
  --gold:#A78F5C; --gold-light:rgba(167,143,92,.10); --gold-mid:rgba(167,143,92,.20);
  --gold-border:rgba(167,143,92,.28); --gold-text:#7B6442; --gold-on-dark:#B09860; --gold-deep:#8B6F3D;
  --cream:#faf8f4; --cream-mid:#f5f1ea; --cream-deep:#efe9df;
  --ink:#1a1a1a; --ink-soft:#2e2e2e; --muted:#59564f; --muted-light:#6b6660;
  --line-gold:rgba(167,143,92,.18); --line:rgba(26,26,26,.10);
  --white:#ffffff; --green:#eef2ea; --green-line:rgba(88,110,70,.25); --green-text:#3f5a33;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);background:var(--cream)}
img{max-width:100%;display:block}
a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(38px,4.6vw,56px)}
h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:12px}
h3{font-size:24px}
p{max-width:64ch}
ul,ol{padding-left:20px}
li{margin:4px 0}
.wrap{max-width:1160px;margin:0 auto;padding:0 40px}
.eyebrow{font-family:var(--serif);font-size:18px;color:var(--gold-text);margin-bottom:10px}
section{padding:88px 0}
section[id]{scroll-margin-top:16px}
.white{background:var(--white)}
.dark{background:var(--ink);color:#e9e5dc}
.dark h2,.dark h3{color:#fff}
.dark .eyebrow{color:var(--gold-on-dark)}
.dark a{color:var(--gold-on-dark)}
.dark a:hover{color:#fff}
.lead{font-size:19px;color:var(--ink-soft);margin:18px 0 22px}
.small{font-size:14px;color:var(--muted)}

/* Buttons: same rules as /css/skinpen.css. */
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:6px;background:var(--gold-deep);color:#fff;font-weight:500;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s}
.btn:hover{background:#6F5830;color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.wa{background:transparent;color:var(--ink);border:1px solid var(--ink)}.btn.wa:hover{background:var(--ink);color:#fff}
.btn.sm{height:38px;padding:0 16px;font-size:14px}
.btn.link{background:none;color:var(--gold-deep);padding:0;height:auto;text-decoration:underline;text-underline-offset:3px}
.btn.link:hover{background:none;color:var(--ink)}
.cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px}

/* ===== Hero ===== */
.hero{padding:72px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.hero ul{list-style:none;padding:0;margin:0 0 26px}
.hero li{padding-left:26px;position:relative;margin:8px 0;font-size:17px}
.hero li::before{content:'';position:absolute;left:0;top:11px;width:14px;height:1.5px;background:var(--gold)}
.hero .consult{font-size:15px;color:var(--muted);margin-top:14px;max-width:52ch}
.hero-img{aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--cream-deep);position:relative}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 14px 10px;font-size:14px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}

/* jump */
.jump{border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold);background:var(--cream)}
.jump .wrap{display:flex;gap:26px;align-items:center;height:52px;font-size:14px;overflow-x:auto}
.jump span{color:var(--muted);white-space:nowrap}
.jump a{color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent}
.jump a:hover{border-color:var(--gold)}

/* stats */
.stats{background:var(--white);border-bottom:1px solid var(--line-gold)}
.stats .wrap{display:grid;grid-template-columns:repeat(5,1fr);padding-top:22px;padding-bottom:22px}
.stats div{padding:0 22px;border-left:1px solid var(--line-gold);font-size:14px;color:var(--muted)}
.stats div:first-child{border-left:0;padding-left:0}
.stats b{display:block;font-family:var(--serif);font-size:24px;font-weight:500;color:var(--ink);line-height:1.15;margin-top:2px}

/* ===== Prices ===== */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.builder{background:var(--white);border:1px solid var(--line-gold);border-radius:12px;padding:28px 30px;margin:26px 0 22px}
.summary{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-gold);font-size:17px}
.summary b{font-family:var(--serif);font-size:34px;font-weight:500;margin-right:8px}
.summary s{color:var(--muted);font-size:16px}
.summary-sub{font-size:15px;color:var(--muted);margin-top:6px}
.founding{margin-top:16px;padding:14px 16px;background:var(--green);border:1px solid var(--green-line);border-radius:8px;font-size:15px;color:var(--ink-soft)}
.founding a{color:var(--green-text)}
.single{font-size:16px;margin:14px 0}
.note-line{font-size:15px;color:var(--muted);padding:16px 0;border-top:1px solid var(--line-gold);max-width:none}
details.terms{font-size:14px;color:var(--muted);margin-top:8px}
details.terms summary{cursor:pointer;color:var(--gold-text)}
details.terms p{margin-top:8px;max-width:72ch}
.side{position:sticky;top:88px;background:var(--white);border:1px solid var(--line-gold);border-radius:12px;padding:24px}
.side .t{font-family:var(--serif);font-size:22px}
.side .price{font-family:var(--serif);font-size:34px;font-weight:500;margin:4px 0 14px}
.side .price small{font-family:var(--sans);font-size:14px;color:var(--muted);font-weight:400;margin-left:6px}
.side .row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);padding:8px 0;border-top:1px solid var(--line-gold)}
.side .row b{color:var(--ink);font-weight:500}
.side .btn{width:100%;margin-top:14px}
.side .btn.wa{margin-top:8px}

/* zone picker */
.zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:26px 0 18px}
.zone{position:relative;text-align:left;background:var(--white);border:1px solid var(--gold-border);border-radius:12px;padding:0 0 18px;cursor:pointer;font:inherit;color:var(--ink);overflow:hidden}
.zone img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;background:var(--cream-deep);margin-bottom:14px}
.zone b{display:block;font-family:var(--serif);font-size:22px;font-weight:500;padding:0 18px;margin-bottom:6px}
.zone>span:not(.chk){display:block;padding:0 18px;font-size:15px;color:var(--muted);line-height:1.5}
.zone .chk{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;color:transparent}
.zone.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:#F6F0E4}
.zone.on .chk{background:var(--gold);border-color:var(--gold);color:#fff}
.zone:focus-visible{outline:2px solid var(--gold-border);outline-offset:2px}
.builder .summary{border-top:0;padding-top:0;margin-top:0}

/* ===== Evidence (dark) ===== */
.data{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:34px 0}
.data div{border-top:1px solid rgba(255,255,255,.18);padding-top:18px;font-size:15px;color:#cfcac0}
.data b{display:block;font-family:var(--serif);font-size:52px;font-weight:500;color:#fff;line-height:1;margin-bottom:8px}
.data em{display:block;font-style:normal;color:#fff;font-size:17px;margin-bottom:6px}
.evi-note{font-size:15px;color:#cfcac0;max-width:72ch;margin-top:8px}
.note{margin-top:44px;background:#292824;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:32px 36px}
.note .nl{font-size:14px;letter-spacing:.06em;color:var(--gold-on-dark);margin-bottom:14px}
.note p{max-width:72ch;font-size:17px;margin-bottom:14px;color:#e9e5dc}
.note .sig{font-family:var(--serif);font-size:19px;color:#fff;margin-top:6px}

/* ===== How it works (white) ===== */
.how .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.layers{background:var(--cream);border:1px solid var(--line-gold);border-radius:12px;padding:26px}
.layers svg{width:100%;height:auto}
.layers-mobile{display:none;font-size:15px;color:var(--muted)}
.layers-mobile div{border-left:2px solid var(--gold);padding:4px 0 4px 14px}
.layers-mobile b{display:block;font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:2px}
.how p{margin-bottom:14px}
.how .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:15px;margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line-gold)}
.how .kv b{font-weight:500;color:var(--ink)}
.how .kv span{color:var(--muted)}

/* ===== On the day ===== */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:30px 0 40px}
.tl.three{grid-template-columns:repeat(3,1fr)}
.tl div{border-top:1px solid var(--gold);padding-top:14px;font-size:15px;color:var(--muted)}
.tl .t{font-family:var(--serif);font-size:20px;color:var(--gold-text);display:block}
.tl b{display:block;color:var(--ink);font-weight:500;font-size:17px;margin:4px 0 6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.box{background:var(--white);border:1px solid var(--line-gold);border-radius:12px;padding:26px 28px}
.box.check{background:var(--green);border-color:var(--green-line)}
.box.check p{font-size:15px;color:var(--muted);margin-bottom:10px}
.box.check li{font-size:15px}
@media (min-width:981px){.box.check ul{columns:2;column-gap:24px}.box.check li{break-inside:avoid}}
.box h3{font-size:24px;margin-bottom:10px}
.box ul{margin:0}
.box li{font-size:17px}
.box .small{margin-top:10px}

/* ===== Results timeline ===== */
.track{position:relative;margin:36px 0 10px;padding:0 0 8px}
.track .line{height:2px;background:var(--line-gold);position:relative}
.track .line i{position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.track .marks{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;font-size:14px;color:var(--muted);margin-top:14px}
.track .marks b{display:block;color:var(--ink);font-weight:500;font-size:15px}

/* ===== FAQ ===== */
.faq details{border-top:1px solid var(--line-gold);padding:18px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line-gold)}
.faq summary{cursor:pointer;font-weight:500;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold-text);font-family:var(--serif);font-size:24px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{margin-top:12px;max-width:72ch;color:var(--ink-soft)}
.faq details p+p{margin-top:8px}

/* ===== Device / refs ===== */
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.about ol{font-size:15px;color:var(--muted)}
.about .rev{font-size:14px;color:var(--muted);margin-top:18px}
.related{background:var(--cream);border-top:1px solid var(--line-gold);padding:20px 0}
.related .wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--muted)}

/* combi */
.combi{background:var(--white);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold);padding:44px 0}
.combi .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.combi p{margin-top:8px}

/* final */
.final{text-align:left;padding:88px 0}
.final p{margin:14px 0 24px}

@media (max-width:980px){
  .wrap{padding:0 22px}
  section{padding:64px 0}
  .hero .wrap,.how .wrap,.about .wrap,.combi .wrap{grid-template-columns:1fr;gap:32px}
  .hero-img{aspect-ratio:4/3}
  .stats .wrap{grid-template-columns:repeat(2,1fr);row-gap:16px}
  .stats div:nth-child(odd){border-left:0;padding-left:0}
  .layout{grid-template-columns:1fr}
  .side{display:none}
  .data,.tl,.tl.three,.two{grid-template-columns:1fr}
  .zones{grid-template-columns:1fr 1fr}
  /* Results timeline runs vertically: the rail hides and each mark gets a left border and dot. */
  .track .line{display:none}
  .track .marks{grid-template-columns:1fr;gap:0}
  .track .marks div{padding:10px 0 10px 18px;border-left:2px solid var(--line-gold);position:relative}
  .track .marks div::before{content:'';position:absolute;left:-6px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--gold)}
  .jump span{display:none}
}
@media (max-width:768px){
  /* Room for the fixed sticky booking bar (styled in the page's chrome block). */
  body{padding-bottom:64px}
}
@media (max-width:600px){.zones{grid-template-columns:1fr}.layers{display:none}.layers-mobile{display:grid;gap:12px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}