/* =========================================================
   Grow With Nabeela — Marketing & Sales Consultant
   Single-page site
   Fourart Designs

   PALETTE   paper #F1F0ED · surface #F9F8F6 · ink #14171A
             one colour: deep teal #0F4C5C, used for brand and action alike
   TYPE      Libre Franklin (display + body) · Petrona italic (emphasis)
   IDEA      Structure made visible, in a single hue. Restraint over contrast.
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --paper:#F1F0ED;
  --surface:#F9F8F6;
  --ink:#14171A;
  --ink-2:#4B5257;
  --ink-3:#828A8F;
  --rule:#D8D9D6;
  --rule-soft:#E6E7E4;

  /* One colour carries both brand and action. There is no second hue on the page. */
  --brand:#0F4C5C;
  --brand-soft:#DCE7EA;
  --accent:#0F4C5C;
  --accent-dark:#0A3846;
  --accent-soft:#DCE7EA;

  --on-ink:#EDF0F1;
  --on-ink-2:#9AA3A8;
  --on-ink-rule:#282D31;
  --brand-on-ink:#6FC0D4;

  --f-sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Petrona",Georgia,"Times New Roman",serif;

  --shell:1180px;
  --gutter:24px;
  --pad-y:clamp(44px,5.2vw,96px);
  --r:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,.84,.34,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
h1,h2,h3,p,ul,ol,dl,dd,blockquote,figure{margin:0;}
ul,ol{list-style:none;padding:0;}
a{color:inherit;}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

.u-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--on-ink);padding:12px 18px;
}
.skip:focus{left:12px;top:12px;}

.shell{
  width:100%;max-width:var(--shell);
  margin-inline:auto;padding-inline:var(--gutter);
}

/* ---------- shared type ---------- */
.eyebrow--head{margin:0 0 4px;font-weight:700;}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin-bottom:18px;
}
.h2{
  font-family:var(--f-sans);
  font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.1;
  letter-spacing:-.028em;
  text-wrap:balance;
  max-width:22ch;
}
.h2 em,.hero__title em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--brand);
}
.section{padding-block:var(--pad-y);}
.section--surface{background:var(--surface);}
.sec-head{margin-bottom:clamp(22px,2.6vw,34px);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:.9rem;font-weight:600;letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;border-radius:100px;
  padding:11px 22px;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease);
}
.btn--lg{padding:15px 30px;font-size:.95rem;}
.btn--block{width:100%;}
.btn--accent{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn--accent:hover{background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-1px);}
.btn--ink{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
.btn--ink:hover{background:var(--brand);border-color:var(--brand);transform:translateY(-1px);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule);}
.btn--ghost:hover{border-color:var(--ink);background:rgba(14,23,20,.04);}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--rule);}
.header-inner{
  display:flex;align-items:center;gap:clamp(16px,2vw,28px);
  min-height:74px;
}
.wordmark{
  display:inline-flex;align-items:baseline;gap:.34em;flex:none;white-space:nowrap;
  text-decoration:none;font-weight:700;font-size:1.02rem;
  letter-spacing:-.02em;margin-right:auto;
}
.wordmark__grow{color:var(--ink);}
.wordmark__name{
  font-family:var(--f-serif);font-style:italic;font-weight:500;
  font-size:1.24em;color:var(--brand);letter-spacing:-.01em;
}
.header-cta{display:none;}
.nav{display:none;gap:clamp(16px,1.8vw,28px);}
.nav a{
  position:relative;text-decoration:none;font-size:.88rem;font-weight:500;
  white-space:nowrap;
  color:var(--ink-2);padding-block:6px;transition:color .18s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .24s var(--ease);
}
.nav a:hover{color:var(--ink);}
.nav a.is-active{color:var(--ink);}
.nav a.is-active::after,.nav a:hover::after{transform:scaleX(1);}

.burger{
  display:flex;flex:none;width:42px;height:42px;border:1px solid var(--rule);
  background:transparent;border-radius:100px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .2s var(--ease),opacity .2s var(--ease);}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg);}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg);}

.drawer{
  position:sticky;top:74px;z-index:99;
  background:var(--surface);border-bottom:1px solid var(--rule);
  padding:14px var(--gutter) 22px;
  max-height:calc(100vh - 74px);overflow-y:auto;
}
.drawer nav{display:flex;flex-direction:column;}
.drawer nav a{
  text-decoration:none;padding:10px 0;border-bottom:1px solid var(--rule-soft);
  font-weight:500;font-size:.98rem;
}
.drawer nav a:last-child{border-bottom:0;}
.drawer .btn{margin-top:20px;width:100%;}

/* =========================================================
   01 HERO — paper on the left, portrait bleeding off the right
   ========================================================= */
.hero{
  display:grid;grid-template-columns:1fr;
  border-bottom:1px solid var(--rule);
}
.hero__text{
  padding:clamp(34px,4.6vw,72px) var(--gutter) clamp(30px,3.8vw,56px);
  display:flex;align-items:center;
}
.hero__inner{width:100%;max-width:600px;}


.hero__title{
  font-size:clamp(1.95rem,3.7vw,3rem);
  font-weight:800;line-height:1.07;letter-spacing:-.034em;margin:0;
}
.hero__title .line{
  display:block;overflow:hidden;
  /* the reveal mask clips italic descenders without this */
  padding-bottom:.09em;margin-bottom:-.09em;
}
.hero__title .line__i{display:block;will-change:transform;}
.line__i--accent{
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  color:var(--brand);letter-spacing:-.018em;
}

.hero__divider{display:flex;align-items:center;margin:18px 0 16px;}
.hero__divider::before{content:"";height:1px;width:58px;background:var(--rule);}
.hero__divider span{
  width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:7px;
}

.hero__sub{
  font-size:clamp(.98rem,1.15vw,1.06rem);color:var(--ink-2);max-width:50ch;margin-bottom:24px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;}


.hero__media{margin:0;overflow:hidden;background:var(--brand-soft);}
.hero__media img{
  width:100%;height:clamp(340px,64vw,520px);
  object-fit:cover;object-position:center 6%;display:block;
}


/* ---------- sticky booking bar ---------- */
.stickybook{
  position:fixed;z-index:150;
  left:var(--gutter);right:var(--gutter);bottom:var(--gutter);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  background:var(--ink);color:var(--on-ink);
  border-radius:var(--r);padding:12px 14px 12px 20px;
  box-shadow:0 12px 34px rgba(14,23,20,.22);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
}
.stickybook.is-visible{opacity:1;transform:none;pointer-events:auto;}
.stickybook__t{margin:0;font-size:.92rem;font-weight:500;}
.stickybook .btn{flex:none;}
@media (min-width:700px){
  .stickybook{left:auto;right:24px;bottom:24px;max-width:min(440px,calc(100vw - 48px));}
}

/* ---------- scroll progress ---------- */
.progress{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:200;pointer-events:none;
}
.progress span{
  display:block;height:100%;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
}

/* =========================================================
   01 WHY — pillar cards
   ========================================================= */
.pillars{display:grid;grid-template-columns:1fr;gap:14px;}
.pillar{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:26px 26px 28px;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.pillar:hover{border-color:var(--brand);transform:translateY(-2px);}
.pillar__t{
  font-size:1.12rem;font-weight:700;letter-spacing:-.022em;line-height:1.25;
  margin-bottom:10px;
}
.pillar__t::before{
  content:"";display:block;width:26px;height:2px;background:var(--accent);margin-bottom:14px;
}
.pillar__d{color:var(--ink-2);font-size:.96rem;}

/* =========================================================
   02 WHAT YOU GET — numbered rows
   ========================================================= */
.deliverables{border-top:1px solid var(--rule);}
.deliverable{
  display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:6px 16px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--rule);
  transition:background .2s var(--ease);
}
.deliverable:hover{background:color-mix(in srgb,var(--brand-soft) 55%,transparent);}
.deliverable__idx{
  font-size:.8rem;font-weight:700;letter-spacing:.1em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.deliverable__t{
  font-size:clamp(1.05rem,1.7vw,1.24rem);font-weight:700;letter-spacing:-.022em;line-height:1.25;
}
.deliverable__d{color:var(--ink-2);font-size:.95rem;grid-column:2;}

/* ---------- optional photographic backdrop on an ink section ---------- */
.section.has-bg{position:relative;isolation:isolate;overflow:hidden;}
.section__bg{
  position:absolute;inset:0;z-index:-1;
  background:url("../img/outcomes-bg.jpg") center/cover no-repeat;
  opacity:.5;
}
.section.has-bg::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--ink) 88%,transparent) 0%,
    color-mix(in srgb,var(--ink) 78%,transparent) 45%,
    color-mix(in srgb,var(--ink) 92%,transparent) 100%);
}

/* ---------- How It Works intro ---------- */
.process-figure{margin:0 0 clamp(28px,3.4vw,44px);}
.process-figure img{
  width:100%;height:auto;aspect-ratio:5/2;object-fit:cover;object-position:center 55%;
  border-radius:var(--r);background:var(--brand-soft);
}

/* =========================================================
   03 OUTCOMES — the caveat matters as much as the numbers
   ========================================================= */
.caveat{
  margin-top:clamp(22px,2.6vw,30px);
  padding-top:18px;border-top:1px solid var(--on-ink-rule);
  color:var(--on-ink-2);font-size:.92rem;line-height:1.55;max-width:70ch;
}

/* =========================================================
   05 FAQ — native disclosure, no JS
   ========================================================= */
.faq-wrap{
  display:grid;grid-template-columns:1fr;gap:clamp(24px,3.5vw,56px);align-items:start;
}
.faq{border-top:1px solid var(--rule);}
.faq__item{border-bottom:1px solid var(--rule);}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 0;
  font-size:1.02rem;font-weight:600;letter-spacing:-.015em;line-height:1.35;
  transition:color .18s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:"";flex:none;margin-left:auto;margin-top:.45em;
  width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .22s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(-135deg);}
.faq__item summary:hover{color:var(--brand);}
.faq__item p{
  margin:0;padding:0 0 20px;color:var(--ink-2);font-size:.96rem;max-width:68ch;
}

/* =========================================================
   06 MY APPROACH
   ========================================================= */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,172px),1fr));
  gap:clamp(20px,2.4vw,30px) clamp(14px,2vw,26px);
}
.step{
  display:flex;flex-direction:column;gap:9px;position:relative;
  padding-top:20px;border-top:1px solid var(--rule);
}
.step::before{
  content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;
  border-radius:50%;background:var(--paper);border:2px solid var(--accent);
}
.step__n{
  font-size:.74rem;font-weight:700;letter-spacing:.12em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.step__t{font-size:1.14rem;font-weight:700;letter-spacing:-.022em;}
.step__d{color:var(--ink-2);font-size:.94rem;line-height:1.55;}

/* =========================================================
   07 RESULTS — ink band
   ========================================================= */
.section--ink{background:var(--ink);color:var(--on-ink);}
.section--ink .eyebrow{color:var(--brand-on-ink);}
.section--ink .h2 em{color:var(--brand-on-ink);}
.sec-head--invert .h2{color:var(--on-ink);}

.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--on-ink-rule);
  border:1px solid var(--on-ink-rule);border-radius:var(--r);overflow:hidden;
}


.stat:last-child{grid-column:1/-1;}
.stat{background:var(--ink);padding:28px 22px 26px;display:flex;flex-direction:column;gap:6px;}
.stat__v{
  font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;letter-spacing:-.04em;
  color:var(--on-ink);font-variant-numeric:tabular-nums;line-height:1;
}
.stat__k{font-size:.87rem;color:var(--on-ink-2);line-height:1.4;}

/* =========================================================
   11 CONTACT
   ========================================================= */
.contact{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,72px);align-items:start;}
/* once the booking calendar sits alongside, centre the short left column against it */
.contact__lead{color:var(--ink-2);margin-top:18px;max-width:46ch;}
.contact__direct{margin-top:34px;border-top:1px solid var(--rule);}
.contact__direct li{
  display:flex;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rule);
}
.contact__direct span{
  flex:0 0 82px;font-size:.68rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);
}
.contact__direct a{color:var(--brand);text-decoration:none;font-weight:500;border-bottom:1px solid transparent;}
.contact__direct a:hover{border-bottom-color:var(--brand);}

.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.socials a{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--rule);border-radius:50%;
  color:var(--brand);text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),
             color .18s var(--ease),transform .18s var(--ease);
}
.socials svg{width:17px;height:17px;fill:currentColor;display:block;}
.socials a:hover{
  border-color:var(--brand);background:var(--brand);color:#fff;transform:translateY(-2px);
}
.socials--footer{margin-top:22px;}
.socials--footer a{color:var(--on-ink-2);border-color:var(--on-ink-rule);}
.socials--footer a:hover{
  background:var(--brand-on-ink);border-color:var(--brand-on-ink);color:var(--ink);
}

/* The booking card carries the brand teal. On paper it was surface-on-paper —
   two shades of off-white — and simply did not read as the place to act. */
.booking{
  background:var(--brand);border:1px solid var(--brand);border-radius:var(--r);
  padding:clamp(18px,2.2vw,26px);
  color:var(--on-ink);
}
/* Solid values, not white-at-an-opacity: on a saturated teal the dimmed
   whites technically cleared 4.5:1 but read as muddy. Ratios noted. */
.booking .booking__step{color:#9FD8E6;}             /* 6.08:1 */
.booking .booking__step b{background:#fff;color:var(--brand);}
.booking .leadform__intro{color:#E8F1F3;}           /* 8.29:1 */

.booking .field label{color:#DCE7EA;}               /* 7.54:1 */
.booking .field input{
  background:#FBFCFC;border-color:transparent;color:var(--ink);
}
.booking .field input::placeholder{color:#6A7276;}   /* 4.8:1 on the white field */
.booking .field input:focus{
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.28);
}
.booking .field input:user-invalid,
.booking .field input[aria-invalid="true"]{border-color:#E8927E;}
.booking .field__err{color:#FFC4B4;}

/* An accent button would vanish against the teal, so the primary action
   inverts to white. */
.booking .leadform__submit,
.booking .leadform__submit.btn--accent{
  background:#fff;color:var(--brand);border-color:#fff;
}
.booking .leadform__submit:hover,
.booking .leadform__submit.btn--accent:hover{
  background:var(--brand-soft);border-color:var(--brand-soft);color:var(--accent-dark);
}

.booking .leadform__note{color:#CBDDE2;}            /* 6.78:1 */
.booking .leadform__msg[data-state="error"]{color:#FFC4B4;}
.booking .leadform__msg[data-state="ok"]{color:#BFE4EC;}

.booking .booking__fallback{
  color:#CBDDE2;border-top-color:rgba(255,255,255,.22);   /* 6.78:1 */
}
.booking .booking__fallback a{color:#9FD8E6;}

/* the confirmation that replaces the calendar, still inside the teal card */
.booking .done__tick{background:#fff;color:var(--brand);}
.booking .done__t{color:#fff;}
.booking .done__p{color:#E8F1F3;}                   /* 8.29:1 */
.booking .done__p a{color:#9FD8E6;}
.booking__label{
  font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;
}
/* Calendly's inline embed is built for a minimum width of 320px — below that
   its own layout spills sideways — and its widget.css pins the height. Both are
   set here through .booking so this wins on specificity whatever order the two
   stylesheets load in. */
.booking .calendly-inline-widget{
  width:100%;min-width:0;
  height:1040px;                     /* phones stack the date picker above the times */
  border-radius:var(--r);overflow:hidden;
  background:var(--paper);
}
@media (min-width:560px){ .booking .calendly-inline-widget{height:800px;} }
@media (min-width:820px){ .booking .calendly-inline-widget{height:700px;} }


/* ---------- thank-you page (page-thank-you.php) ---------- */
.thanks{min-height:72svh;display:flex;align-items:center;}
.thanks__inner{max-width:620px;text-align:center;}
.thanks .done__tick{width:52px;height:52px;margin-bottom:22px;}
.thanks .done__tick svg{width:25px;height:25px;}
.thanks__t{
  font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;line-height:1.1;
  letter-spacing:-.032em;margin:0 0 16px;text-wrap:balance;
}
.thanks__body{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.06rem);line-height:1.65;}
.thanks__body p{margin:0 0 14px;}
.thanks__body a{color:var(--brand);font-weight:500;}
.thanks__steps{
  margin:clamp(26px,3.4vw,38px) auto 0;padding:0;list-style:none;
  text-align:left;max-width:460px;
  border-top:1px solid var(--rule);
}
.thanks__steps li{
  display:flex;gap:13px;align-items:flex-start;
  padding:15px 0;border-bottom:1px solid var(--rule-soft);
  font-size:.95rem;color:var(--ink-2);line-height:1.5;
}
.thanks__steps span{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;margin-top:1px;
}
.thanks__mail{margin-top:clamp(24px,3vw,32px);font-size:.92rem;color:var(--ink-2);}
.thanks__mail a{color:var(--brand);font-weight:500;}
.thanks__back{margin-top:22px;}
.thanks .done__tick{margin-inline:auto;}

/* ---------- the thank-you panel, after a booking is confirmed ---------- */
.booking__done{text-align:center;padding-block:clamp(26px,5vw,44px);}
.done__tick{
  width:46px;height:46px;margin:0 auto 18px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.done__tick svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}
.done__t{
  font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800;letter-spacing:-.028em;
  margin-bottom:10px;
}
.done__p{color:var(--ink-2);font-size:.95rem;line-height:1.6;max-width:42ch;margin:0 auto 12px;}
.done__p a{color:var(--brand);font-weight:500;}
.booking__fallback{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--rule-soft);
  font-size:.86rem;color:var(--ink-2);line-height:1.5;
}
.booking__fallback a{color:var(--brand);font-weight:500;}
.booking.is-ready .booking__fallback{display:none;}

/* ---------- lead form: the gate in front of the calendar ---------- */
.leadform__intro{
  font-size:.92rem;color:var(--ink-2);line-height:1.55;margin-bottom:18px;
}
.leadfields{display:grid;grid-template-columns:1fr;gap:14px;}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field label{
  font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);
}
.field input{
  font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:12px 14px;width:100%;min-width:0;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.field input::placeholder{color:var(--ink-3);}
.field input:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent);
}
.field input:user-invalid,.field input[aria-invalid="true"]{border-color:#B4452F;}
.field__err{font-size:.78rem;color:#B4452F;min-height:0;}
.field__err:empty{display:none;}

/* honeypot — hidden from people, reachable by bots */
.leadform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.leadform__submit{margin-top:18px;}
.leadform__note{
  margin-top:12px;font-size:.8rem;color:var(--ink-3);line-height:1.5;
}
.leadform__msg{margin-top:12px;font-size:.88rem;line-height:1.5;}
.leadform__msg:empty{display:none;}
.leadform__msg[data-state="error"]{color:#B4452F;}
.leadform__msg[data-state="ok"]{color:var(--brand);}
.leadform.is-sending .leadform__submit{opacity:.6;pointer-events:none;}

/* a class with a display value outranks the hidden attribute, which silently
   broke the two-step reveal — this keeps [hidden] authoritative everywhere */
[hidden]{display:none !important;}

.booking__step{
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
  font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);
}
.booking__step b{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:.66rem;letter-spacing:0;
}

@media (min-width:560px){
  .leadfields{grid-template-columns:1fr 1fr;}
}

/* =========================================================
   INNER PAGES (page.php, 404.php, archives)
   ========================================================= */
.pagewrap{max-width:760px;}
.pagehead{margin-bottom:clamp(26px,3vw,38px);}
.pagehead__t{
  font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;line-height:1.1;
  letter-spacing:-.03em;margin:0;text-wrap:balance;
}
.pagebody.prose > *{max-width:66ch;}
.pagebody h2{
  font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.022em;
  margin:clamp(26px,3vw,36px) 0 10px;
}
.pagebody h3{font-size:1.12rem;font-weight:700;margin:26px 0 8px;letter-spacing:-.018em;}
.pagebody a{color:var(--brand);}
.pagebody ul,.pagebody ol{margin:0 0 20px;padding-left:1.1em;color:var(--ink-2);}
.pagebody li{list-style:disc;margin-bottom:6px;}
.pagebody ol li{list-style:decimal;}
.pagebody img{max-width:100%;height:auto;border-radius:var(--r);}
.pagebody blockquote{
  margin:24px 0;padding:4px 0 4px 20px;border-left:2px solid var(--accent);
  font-family:var(--f-serif);font-style:italic;font-size:1.1rem;color:var(--ink);
}
.pageback{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,3.4vw,44px);}

/* =========================================================
   COMING SOON (front page)
   ========================================================= */
.soon{
  min-height:100svh;min-height:100vh;
  display:grid;place-items:center;
  padding:clamp(40px,8vw,88px) var(--gutter);
  background:var(--paper);
}
.soon__inner{width:100%;max-width:620px;text-align:center;}
.wordmark--soon{
  font-size:clamp(1.15rem,2.4vw,1.4rem);font-weight:700;letter-spacing:-.02em;
  margin-bottom:clamp(28px,5vw,48px);
}
.soon .eyebrow{margin-bottom:16px;}
.soon__title{
  font-size:clamp(2rem,5.2vw,3.1rem);font-weight:800;line-height:1.08;
  letter-spacing:-.034em;margin:0 0 20px;text-wrap:balance;
}
.soon__title em{
  font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--brand);
}
.soon__lead{
  color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.08rem);
  max-width:48ch;margin:0 auto clamp(26px,3.4vw,36px);
}
.soon__actions{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-bottom:clamp(30px,4vw,44px);
}
.soon .socials{justify-content:center;margin-top:0;}
.soon__mail{
  margin-top:clamp(24px,3vw,34px);padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:.92rem;
}
.soon__mail a{color:var(--brand);text-decoration:none;font-weight:500;}
.soon__mail a:hover{text-decoration:underline;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--ink);color:var(--on-ink-2);padding-block:clamp(44px,5vw,68px) 28px;}
.footer-top{
  display:grid;grid-template-columns:1fr;gap:clamp(30px,3.6vw,48px);
  padding-bottom:clamp(30px,3.6vw,44px);
}
.footer-brand__desc{
  margin-top:14px;font-size:.92rem;line-height:1.6;max-width:42ch;color:var(--on-ink-2);
}
.wordmark--footer{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;}
.wordmark--footer .wordmark__grow{color:var(--on-ink);}
.wordmark--footer .wordmark__name{color:var(--brand-on-ink);}

.footer-col{display:flex;flex-direction:column;gap:9px;}
.footer-col__t{
  font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-ink);margin-bottom:6px;
}
.footer-col a,.footer-col p{
  margin:0;font-size:.9rem;color:var(--on-ink-2);text-decoration:none;
  transition:color .18s var(--ease);
}
.footer-col a:hover{color:var(--brand-on-ink);}
.footer-mail{
  color:var(--on-ink)!important;font-weight:500;word-break:break-all;margin-bottom:6px;
}
.footer-col--cta .btn{align-self:flex-start;margin-top:6px;}

.footer-bottom{
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
  padding-top:22px;border-top:1px solid var(--on-ink-rule);
}
.footer-bottom p{margin:0;font-size:.8rem;color:var(--on-ink-2);}

/* --- below the desktop nav breakpoint the header and drawer come off entirely.
       The sticky booking bar carries the call to action, and the footer carries
       the section links, so nothing is actually lost. --- */
@media (max-width:979px){
  .site-header,.drawer{display:none;}
  .hero__text{padding-top:clamp(40px,7vw,64px);}
}

/* --- short laptop screens: shrink the hero rather than overflow it --- */
@media (min-width:820px) and (max-height:820px){
  .hero{min-height:0;}
  .hero__text{padding-block:clamp(24px,3vw,40px);}
  .hero__title{font-size:clamp(1.75rem,2.7vw,2.3rem);}
  .hero__sub{margin-bottom:18px;font-size:.98rem;}
  .hero__divider{margin:14px 0 12px;}
}

/* =========================================================
   ENTRANCE — the hero choreographs itself once fonts are ready
   ========================================================= */
.anim{opacity:0;transform:translateY(16px);}
.hero__title .line__i{opacity:0;transform:translateY(105%);}

.is-ready .anim{
  opacity:1;transform:none;
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
}
.is-ready .hero__title .line__i{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.is-ready [data-anim="1"]{transition-delay:.05s;}
.is-ready [data-anim="2"]{transition-delay:.14s;}
.is-ready [data-anim="3"]{transition-delay:.22s;}
.is-ready [data-anim="4"]{transition-delay:.30s;}
.is-ready [data-anim="5"]{transition-delay:.42s;}
.is-ready [data-anim="6"]{transition-delay:.50s;}
.is-ready [data-anim="7"]{transition-delay:.58s;}
.is-ready [data-anim="8"]{transition-delay:.66s;}

.hero__media{clip-path:inset(0 0 0 100%);}
.hero__media img{transform:scale(1.07);}
.is-ready .hero__media{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ease-out) .12s;
}
.is-ready .hero__media img{
  transform:none;transition:transform 1.5s var(--ease-out) .12s;
}

/* =========================================================
   MOTION
   ========================================================= */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}

/* =========================================================
   RESPONSIVE — mobile-first ladder.
   The base styles above are the phone layout. Each step below
   adds structure only once there is room for it; the card grids
   reflow on their own via auto-fit, so there are no dead tiers.
   ========================================================= */

/* --- 560px: problem/resolution pairs sit side by side --- */
@media (min-width:560px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* --- 700px: text blocks gain a second column --- */
@media (min-width:700px){
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));}
  .deliverable{
    grid-template-columns:44px minmax(180px,250px) minmax(0,1fr);
    gap:24px;padding:22px 0;
  }
  .deliverable__d{grid-column:auto;font-size:.97rem;}
}

/* --- 820px: hero and booking split --- */
@media (min-width:820px){
  .hero{grid-template-columns:1.06fr 1fr;min-height:min(82vh,760px);}
  .hero__text{
    padding-left:max(var(--gutter),calc((100vw - var(--shell))/2 + var(--gutter)));
    padding-right:clamp(32px,4vw,64px);
  }
  /* The figure is absolutely filled so the photo's own aspect ratio can never
     drive the row height — only the text column and .hero's min-height do.
     Without this the image resolved to its intrinsic height (column width /
     0.758) and pushed the CTAs below the fold on short laptop screens. */
  .hero__media{position:relative;min-height:100%;}
  .hero__media img{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;object-position:center 15%;
  }
  .contact{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;}
}

/* --- below 820px the portrait fills the hero and the words sit over it on a
       gradient. The copy goes light, so the hero carries its own dark ground
       and the photo fades in on top of it: the stock wipe-in would leave white
       type on light paper for the best part of a second. --- */
@media (max-width:819px){
  .hero{
    position:relative;border-bottom:0;
    background:#0A1013;
    min-height:86vh;min-height:86svh;
  }
  .hero__media,.is-ready .hero__media{clip-path:none;}
  .hero__media{
    position:absolute;inset:0;background:#0A1013;
    opacity:0;transition:opacity .9s var(--ease-out) .05s;
  }
  .is-ready .hero__media{opacity:1;}
  .hero__media img{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;object-position:66% 8%;
  }
  .hero__media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,
      rgba(8,15,18,.06) 0%,rgba(8,15,18,.26) 28%,
      rgba(8,15,18,.62) 50%,rgba(8,15,18,.86) 72%,rgba(8,15,18,.96) 100%);
  }
  .hero__text{
    position:relative;z-index:2;align-items:flex-end;
    padding-block:clamp(90px,22vw,140px) clamp(34px,8vw,52px);
  }
  .hero__title{color:#fff;}
  .line__i--accent{color:var(--brand-on-ink);}
  .hero__sub{color:rgba(255,255,255,.82);}
  .hero__divider::before{background:rgba(255,255,255,.34);}
  .hero__divider span{background:var(--brand-on-ink);}
  .hero__actions .btn--ghost{
    color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.08);
  }
  .hero__actions .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.16);}
}

/* --- landscape phones and other short viewports: let the hero collapse to its
       content rather than holding 86svh and pushing the CTAs off-screen. --- */
@media (max-width:819px) and (max-height:560px){
  .hero{min-height:0;}
  .hero__text{padding-block:clamp(40px,10vw,64px) clamp(20px,4vw,28px);}
  .hero__title{font-size:clamp(1.6rem,4.4vw,2.1rem);}
  .hero__divider{margin:12px 0 10px;}
  .hero__sub{margin-bottom:16px;font-size:.92rem;}
}

/* --- below 520px the two hero CTAs share one line rather than stacking.
       Each takes half the row and the type scales with the viewport, so the
       longer label still fits at 320px. --- */
@media (max-width:519px){
  .hero__actions{flex-wrap:nowrap;gap:9px;}
  .hero__actions .btn{
    flex:1 1 0;min-width:0;
    padding-inline:8px;letter-spacing:0;
    font-size:clamp(.74rem,3.35vw,.95rem);
  }
}

/* --- 820-1023px the hero is already split but the text column is narrow, so
       the CTAs are trimmed rather than allowed to stack. --- */
@media (min-width:820px) and (max-width:1023px){
  .hero__actions{flex-wrap:nowrap;}
  .hero__actions .btn--lg{padding-inline:18px;font-size:.9rem;}
}

/* --- 940px: full desktop navigation --- */
@media (min-width:900px){
  .stats{grid-template-columns:repeat(5,minmax(0,1fr));}
  .stat:last-child{grid-column:auto;}
}

@media (min-width:980px){
  .footer-top{grid-template-columns:1.5fr 1fr 1fr 1.1fr;}
  .nav{display:flex;}
  .header-cta{display:inline-flex;}
  .burger{display:none;}
  .drawer{display:none;}
}

/* --- small screens: same layout, tighter rhythm.
       Nothing is hidden; the page just stops wasting vertical space. --- */
@media (max-width:640px){
  .pillar{padding:20px 18px 22px;}
  .deliverable{padding:15px 0;}
  .faq__item summary{font-size:.98rem;padding:14px 0;}
  .sec-head{margin-bottom:24px;}
  .stat{padding:20px 16px 18px;}
  .booking{padding:14px;}
  .site-footer{padding-block:40px 30px;}
}

@media (max-width:420px){
  body{font-size:16px;}
  :root{--gutter:18px;}
  .contact__direct li{flex-direction:column;gap:4px;}
  .contact__direct span{flex:none;}
}

/* On phones the card goes edge to edge so the calendar gets the whole viewport
   width. Inside a padded card it was down to 254px at 320px wide. */
@media (max-width:559px){
  .booking{
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:0;
    border-left:0;border-right:0;border-radius:0;
  }
  .leadform,
  .booking__step,
  .booking__fallback,
  .booking__done{padding-inline:var(--gutter);}
  .booking .calendly-inline-widget{border-radius:0;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
  .reveal,.anim,.hero__title .line__i{opacity:1!important;transform:none!important;}
  .hero__media{clip-path:none!important;opacity:1!important;}
  .progress{display:none;}
}

@media print{
  .site-header,.drawer,.hero__actions,.booking{display:none;}
  body{background:#fff;color:#000;}
}