/* zackleaudais.com — shared across all pages */
:root{
  /* Light build — warm paper, not a naive inversion. Page is a shade darker
     than the frame so the canvas reads as a sheet lifted off the surface. */
  --page:#eae6e0;          /* outside the frame */
  --frame:#faf8f5;         /* the rounded canvas */
  --card:#f2efe9;
  --card-2:#e7e2da;
  --line:rgba(22,19,15,.11);
  --ink:#16130f;
  --mute:rgba(22,19,15,.58);
  --dim:rgba(22,19,15,.34);
  --accent:#FF6B2C;        /* Zalio orange — unchanged across both builds */
  --accent-deep:#ff530d;
  --sans:'Onest',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(1.15rem,3.4vw,3.25rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
  font-size:clamp(.94rem,.9rem + .18vw,1rem);line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* faint diagonal hairlines behind the frame, like the reference */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(115deg,transparent 48.6%,rgba(22,19,15,.055) 48.7%,transparent 48.9%),
    linear-gradient(65deg,transparent 71.6%,rgba(22,19,15,.04) 71.7%,transparent 71.9%);
}

.frame{
  position:relative;z-index:1;max-width:1240px;margin:clamp(.6rem,1.6vw,1.6rem) auto;
  background:var(--frame);border-radius:clamp(18px,2vw,30px);
  border:1px solid var(--line);overflow:clip;box-shadow:0 24px 70px rgba(22,19,15,.09);
}

/* ---------------- nav ---------------- */
/* Sticky glass nav. Tint is derived from --frame so it adapts to each build;
   backdrop-filter needs content passing underneath, hence position:sticky.
   NOTE: .frame uses overflow:clip (not hidden) — hidden would break sticky. */
.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem);flex-wrap:wrap;
  position:sticky;top:clamp(.5rem,1.2vw,1rem);z-index:60;
  margin:var(--pad) var(--pad) 0;padding:.5rem .5rem .5rem .55rem;
  border-radius:999px;
  background:color-mix(in oklab,var(--frame) 74%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:1px solid color-mix(in oklab,var(--ink) 12%,transparent);
  box-shadow:0 1px 0 color-mix(in oklab,var(--frame) 70%,transparent) inset,
             0 10px 30px color-mix(in oklab,var(--page) 45%,transparent);
}
@supports not (backdrop-filter:blur(1px)){
  .nav{background:var(--card)}
}
.brand{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .55rem;font-weight:600;letter-spacing:-.02em}
.mark{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;color:var(--accent)}
.mark svg{width:100%;height:100%}
.nav-links{display:flex;gap:clamp(.9rem,1.9vw,1.7rem);margin-left:.6rem}
.nav-links a{font-size:.86rem;color:var(--mute);white-space:nowrap;transition:color .18s}
.nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.pill-light{background:var(--ink);color:var(--frame);font-size:.84rem;font-weight:600;
  padding:.62rem 1.15rem;border-radius:999px;white-space:nowrap;transition:transform .18s,background .18s}
.pill-light:hover{transform:translateY(-1px);background:#000}

/* ---------------- hero ---------------- */
/* Hero sits in an inset panel of the OPPOSITE tone for delineation.
   Type colours are flipped by redefining the custom properties in this scope,
   so every child (buttons, rules, muted copy) follows automatically. */
.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;
  gap:clamp(1.5rem,3.4vw,3rem);
  margin:clamp(.9rem,1.8vw,1.5rem) var(--pad) var(--pad);
  padding:clamp(1.9rem,4.2vw,3.4rem);
  border-radius:clamp(16px,1.8vw,26px);
  background:#0e0e11;color:var(--ink);
  --ink:#f4f3f1;
  --mute:rgba(244,243,241,.52);
  --dim:rgba(244,243,241,.30);
  --line:rgba(255,255,255,.10);
  --card:#17171b;
  --card-2:#1e1e23;
}
.eyebrow{display:inline-block;margin:0 0 1rem;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);font-weight:600}
.dots{display:inline-flex;align-items:center;margin:0 .85rem .55rem 0;vertical-align:middle}
.dots i{width:30px;height:30px;border-radius:50%;display:block}
.dots i:first-child{background:var(--ink)}
.dots i:last-child{background:var(--card-2);border:1px solid var(--line);margin-left:-11px}
h1{margin:0;font-weight:400;font-size:clamp(2.6rem,1.1rem + 5.6vw,4.7rem);
  line-height:1.02;letter-spacing:-.036em;text-wrap:balance}
h1 b{font-weight:600}
.hero-sub{display:flex;gap:clamp(1rem,2.4vw,2.2rem);margin-top:clamp(1.5rem,3vw,2.3rem);max-width:52ch}
.idx{font-size:.78rem;color:var(--dim);letter-spacing:.06em;padding-top:.18rem;flex:0 0 auto}
.hero-sub p{margin:0;color:var(--mute);font-size:clamp(.9rem,.86rem + .2vw,1rem);line-height:1.55}
.hero-sub a{color:var(--ink);border-bottom:1px solid var(--dim);padding-bottom:1px}
.hero-sub a:hover{border-color:var(--accent);color:var(--accent)}

.cta-row{display:flex;align-items:center;gap:.6rem;margin-top:clamp(1.6rem,3vw,2.4rem);flex-wrap:wrap}
.btn-accent{background:var(--accent);color:#1a0d05;font-weight:600;font-size:.9rem;
  padding:.85rem 1.5rem;border-radius:999px;transition:transform .18s,box-shadow .18s}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,107,44,.32)}
.btn-round{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);transition:background .18s,transform .18s,border-color .18s}
.btn-round:hover{background:var(--accent);border-color:var(--accent);color:#1a0d05;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);border-radius:999px;padding:.85rem 1.4rem;
  font-size:.9rem;font-weight:500;color:var(--ink);transition:background .18s,border-color .18s}
.btn-ghost:hover{background:var(--card);border-color:color-mix(in oklab,var(--ink) 30%,transparent)}

/* hero portrait */
/* portrait source is 2:3 — crop to a squarer card so it doesn't tower over the copy */
.shot{position:relative;border-radius:20px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);aspect-ratio:1/1.06}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(8,8,10,.80) 100%)}
.tag{position:absolute;z-index:2;background:rgba(14,14,17,.82);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.5rem .9rem;font-size:.78rem;
  font-weight:500;color:#f4f3f1}
.tag-top{top:.9rem;left:.9rem;background:var(--accent);color:#1a0d05;border-color:transparent}
.tag-bot{left:.9rem;bottom:.9rem;right:.9rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.tag-bot span{color:rgba(244,243,241,.58);font-size:.74rem}

/* ---------------- statement ---------------- */
.statement{padding:clamp(2.6rem,5.6vw,4.6rem) var(--pad);border-top:1px solid var(--line)}
.statement h2,.statement p{margin:0;font-weight:400;max-width:22ch;font-weight:400;color:var(--dim);
  font-size:clamp(1.5rem,.8rem + 2.9vw,2.85rem);line-height:1.16;letter-spacing:-.028em;max-width:26ch}
.statement .on{color:var(--ink)}
.statement .hl{color:var(--accent)}
.statement-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.statement-row h2,.statement-row p{max-width:30ch}

/* ---------------- record cards ---------------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.4vw,1rem);
  padding:0 var(--pad) clamp(2.6rem,5vw,4rem)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1.2rem,2.2vw,1.7rem);display:flex;flex-direction:column;gap:.8rem;min-height:220px}
.card .num{font-size:clamp(2.1rem,1.2rem + 2.4vw,3.1rem);font-weight:300;letter-spacing:-.04em;
  line-height:1;color:var(--accent)}
.card h3,.card h2{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.card p{margin:0;color:var(--mute);font-size:.87rem;line-height:1.5}
.card .chip{margin-top:auto;align-self:flex-start;border:1px solid var(--line);border-radius:999px;
  padding:.42rem .85rem;font-size:.75rem;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}

/* ---------------- build strip ---------------- */
.strip{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.5rem,1vw,.85rem);margin:clamp(1.8rem,3.4vw,2.8rem) 0 0;padding:0}
.strip figure{margin:0}
.strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);background:var(--card)}
.strip figcaption{margin-top:.6rem;font-size:.76rem;line-height:1.45;color:var(--mute);letter-spacing:0}
.strip figcaption b{color:var(--accent);font-weight:600;margin-right:.35rem}
@media (max-width:900px){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip li:first-child{grid-column:1 / -1}
}

/* ---------------- offer ---------------- */
.offer{list-style:none;margin:clamp(1.8rem,3.4vw,2.8rem) 0 0;padding:0;counter-reset:s}
.offer li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:clamp(1rem,2.2vw,2rem);
  padding:clamp(1.3rem,2.4vw,1.8rem) 0;border-top:1px solid var(--line);align-items:start}
.offer li:last-child{border-bottom:1px solid var(--line)}
.offer .step{font-size:1.05rem;font-weight:500;color:var(--accent);letter-spacing:.02em;padding-top:.15rem}
.offer h3{margin:0 0 .45rem;font-size:1.15rem;font-weight:600;letter-spacing:-.015em}
.offer p{margin:0;color:var(--mute);font-size:.94rem;line-height:1.6;max-width:58ch}
.statement .offer-note{margin:clamp(1.2rem,2.2vw,1.8rem) 0 0;font-size:.86rem;line-height:1.55;
  color:var(--dim);letter-spacing:0;max-width:46ch}
@media (max-width:640px){ .offer li{grid-template-columns:2.6rem minmax(0,1fr)} }

/* ---------------- ask form ---------------- */
.contact-grid h2{max-width:18ch}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.6rem,3.4vw,3.4rem);align-items:start}
.ask{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1.1rem,2.2vw,1.6rem);display:flex;flex-direction:column;gap:.85rem}
.ask-q{font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ask textarea,.ask input,.ask select{width:100%;font:inherit;font-size:.92rem;color:var(--ink);
  background:var(--frame);border:1px solid var(--line);border-radius:12px;
  padding:.8rem .95rem;resize:vertical;transition:border-color .18s,box-shadow .18s}
.ask textarea::placeholder,.ask input::placeholder{color:var(--dim)}
.ask textarea:focus,.ask input:focus,.ask select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent)}
.ask-row{display:flex;gap:.6rem;flex-wrap:wrap}
#name {flex:1 1 60%}
.ask-row select{flex:1 1 34%;min-width:8.5rem;cursor:pointer}
#email{flex:1 1 62%}
#phone{flex:1 1 32%}
.ask-row input{min-width:0}
.ask-submit{align-self:flex-start;border:0;cursor:pointer;font-family:inherit;margin-top:.15rem}
.ask select:invalid{color:var(--dim)}
.ask-row .btn-accent{border:0;cursor:pointer;font-family:inherit;flex:0 0 auto}
/* .statement p is (0,1,1) and outranks a lone class — scope it up */
.ask .ask-note{margin:0;font-size:.76rem;line-height:1.5;color:var(--dim);letter-spacing:0}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line);padding:clamp(1.6rem,3vw,2.2rem) var(--pad);
  display:flex;flex-wrap:wrap;gap:1rem 1.8rem;align-items:center}
.foot a{font-size:.86rem;color:var(--mute)}
.foot a:hover{color:var(--accent)}
.foot .cr{margin-left:auto;font-size:.78rem;color:var(--dim)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .shot img{min-height:300px}
  .cards{grid-template-columns:1fr}
  .nav-links{order:3;width:100%;justify-content:space-between;
    margin:.15rem .2rem .25rem;padding-top:.5rem;
    border-top:1px solid color-mix(in oklab,var(--ink) 10%,transparent)}
  .statement p{max-width:none}
}


/* ---------------- interior pages ---------------- */
.page-head{padding:clamp(2.6rem,5.4vw,4.4rem) var(--pad) clamp(1.4rem,2.6vw,2rem);max-width:64rem}
.page-head h1{margin:.7rem 0 0;font-weight:400;font-size:clamp(2.1rem,1rem + 3.9vw,3.5rem);
  line-height:1.05;letter-spacing:-.032em;text-wrap:balance}
.page-head .lede{margin:1.3rem 0 0;max-width:56ch;color:var(--mute);
  font-size:clamp(1rem,.94rem + .4vw,1.18rem);line-height:1.55}

.prose{padding:0 var(--pad) clamp(3rem,6vw,5rem);max-width:52rem}
.prose h2{margin:clamp(2.2rem,4vw,3.2rem) 0 0;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem)}
.prose p{margin:1rem 0 0;max-width:62ch;color:var(--mute);line-height:1.68;font-size:1rem}
.prose p strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);border-bottom:1px solid color-mix(in oklab,var(--ink) 28%,transparent)}
.prose a:hover{color:var(--accent);border-color:var(--accent)}
.prose .wide{margin:clamp(1.6rem,3vw,2.4rem) 0 0}
.prose .wide img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.prose .wide figcaption{margin-top:.65rem;font-size:.8rem;line-height:1.5;color:var(--dim)}
.prose .offer{margin-top:0}
.prose .offer h2{margin:0 0 .45rem;font-size:1.15rem}
.elsewhere-list{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.elsewhere-list a{display:inline-flex;padding:.5rem 1rem;border-radius:999px;background:var(--card);
  border:1px solid var(--line);font-size:.87rem;color:var(--mute)}
.elsewhere-list a:hover{color:var(--ink);border-color:color-mix(in oklab,var(--ink) 26%,transparent)}
.nav-links a[aria-current="page"]{color:var(--ink)}


/* ---------------- interior page hero ---------------- */
/* Same inset dark panel as the homepage hero so interior pages have an anchor
   instead of opening on bare paper. Vars flip in-scope, as they do in .hero. */
.page-hero{
  margin:clamp(.9rem,1.8vw,1.5rem) var(--pad) var(--pad);
  padding:clamp(2rem,4.4vw,3.6rem);
  border-radius:clamp(16px,1.8vw,26px);
  background:#0e0e11;color:var(--ink);
  --ink:#f4f3f1; --mute:rgba(244,243,241,.58); --dim:rgba(244,243,241,.34);
  --line:rgba(255,255,255,.12); --card:#17171b;
}
.page-hero h1{margin:.7rem 0 0;font-weight:400;
  font-size:clamp(2.2rem,1rem + 4.1vw,3.7rem);line-height:1.03;letter-spacing:-.034em}
.page-hero .lede{margin:1.4rem 0 0;max-width:54ch;color:var(--mute);
  font-size:clamp(1rem,.94rem + .4vw,1.14rem);line-height:1.55}




.card .num sup{font-size:.4em;vertical-align:super;letter-spacing:0}