/* ─────────────────────────────────────────────
   Creative Camel Studio — Golden Hour
   ───────────────────────────────────────────── */
:root{
  --cream:#FFF6E6;
  --yellow-500:#F7B733;
  --yellow-600:#F0A415;
  --yellow-100:#FDECC3;
  --yellow-50:#FFF3D6;
  --ink:#241C10;
  --ink-soft:#3A2D1B;
  --grey:#6B6455;
  --grey-light:#A79C89;
  --white:#FFFFFF;
  --heart-red:#FF3B30;
  --line:rgba(36,28,16,.10);
  --line-2:rgba(36,28,16,.16);
  --shadow-sm:0 2px 10px rgba(36,28,16,.06);
  --shadow-md:0 16px 40px -12px rgba(36,28,16,.16);
  --shadow-lg:0 30px 70px -20px rgba(36,28,16,.24);
  --font-display:"Plus Jakarta Sans",sans-serif;
  --font-body:"Plus Jakarta Sans",sans-serif;
  /* Critically damped spring approximation — settles smoothly, no overshoot.
     Reserved for anything tap-triggered with no thrown momentum behind it. */
  --ease-spring:cubic-bezier(.32,.72,0,1);
  --ease-tap:cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
::selection{background:var(--ink);color:var(--yellow-100)}

h1{
  font-family:var(--font-display);font-size:clamp(42px,6.4vw,84px);
  line-height:1.04;font-weight:800;letter-spacing:-.03em;color:var(--ink);
}
h1 .light{font-weight:400}
h2{font-family:var(--font-display);font-size:clamp(28px,3.8vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.serif-accent{color:var(--yellow-600)}

/* ── Nav (lives inside the hero card, scrolls with the page) ── */
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 0}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.brand img{width:34px}
.nav-links{display:flex;gap:32px;font-size:15px;color:var(--ink-soft)}
.nav-links a{position:relative;padding:4px 0;font-weight:500;transition:opacity .2s var(--ease-tap)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:currentColor;transition:right .25s var(--ease-spring)}
.nav-links a:hover::after{right:0}
.nav-links a:hover,.nav-links a.active{opacity:1;font-weight:700}
.nav-links a:active{opacity:.55;transition:opacity .1s var(--ease-tap)}
.nav-cta{
  background:var(--ink);color:var(--white);padding:12px 24px;border-radius:999px;
  font-weight:600;font-size:14.5px;white-space:nowrap;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease-spring);
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.nav-cta:active{transform:scale(.96)}
.nav-toggle{
  display:none;background:none;border:none;color:var(--ink);font-size:26px;cursor:pointer;line-height:1;
  transition:transform .15s var(--ease-tap);
}
.nav-toggle:active{transform:scale(.85)}

/* ── Buttons ─────────────────────────────── */
.btn{
  display:inline-block;border-radius:999px;font-weight:600;font-size:16px;cursor:pointer;text-align:center;
  transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease-spring),border-color .3s var(--ease-spring),background-color .3s var(--ease-spring);
}
.btn:active{transition:transform .1s var(--ease-tap)}
.btn-primary{
  background:var(--ink);color:var(--white);padding:17px 34px;
  box-shadow:var(--shadow-md);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-primary:active{transform:translateY(-2px) scale(.96)}
.btn-ghost{
  border:1.5px solid var(--line-2);padding:15.5px 32px;font-weight:600;
  background:var(--white);color:var(--ink);
}
.btn-ghost:hover{border-color:var(--ink)}
.btn-ghost:active{transform:scale(.96);background:var(--yellow-50)}

/* ── Hero card ───────────────────────────── */
.hero-card{
  position:relative;border-radius:40px;
  background:linear-gradient(155deg,var(--yellow-500) 0%,var(--yellow-600) 100%);
  padding:20px 44px 0;margin:18px 18px 0;
}
.hero-card .bubble{position:absolute;border-radius:50%;background:#fff;pointer-events:none}
.hero{position:relative;padding:70px 0 120px;z-index:1;min-width:0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;position:relative;min-width:0}
.hero-copy{position:relative;z-index:2;min-width:0}
.hero h1{margin:0 0 22px}
.hero-sub{color:var(--ink-soft);opacity:.75;font-size:18px;max-width:460px;margin:0 0 34px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.hero-illustration{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.mark-wrap{position:relative;width:100%;max-width:540px;cursor:pointer}
.mark-wrap img{width:100%;display:block;filter:drop-shadow(0 24px 30px rgba(36,28,16,.16));transition:transform .5s var(--ease-spring)}
.mark-wrap:hover img,.mark-wrap:focus-visible img{transform:rotate(-2deg) scale(1.015)}
/* Heart cavity measured from the raw alpha-channel mask (not a color composite — eliminates
   gradient/shadow misreading) at x:322-550, y:562-802 of the 1400x917 image, center 31.14%,74.37%.
   Verified by drawing the box back onto the binary mask before shipping. */
.mark-heart{
  position:absolute;left:23.56%;top:62.92%;width:15.16%;height:22.90%;
  transform-origin:50% 50%;pointer-events:none;
}
.mark-heart path{fill:var(--heart-red)}
.mark-wrap:hover .mark-heart,.mark-wrap:focus-visible .mark-heart,.mark-wrap.beat .mark-heart{
  animation:heartbeat 1s var(--ease-spring) 1;
}
@keyframes heartbeat{
  0%,100%{transform:scale(1)}
  22%{transform:scale(1.22)}
  38%{transform:scale(1)}
  55%{transform:scale(1.14)}
  72%{transform:scale(1)}
}
.paper-plane{position:absolute;opacity:.85}

/* Heart burst — fires once, on the moment that actually matters: a submitted lead */
.burst-heart{
  position:fixed;z-index:999;pointer-events:none;
  line-height:1;color:var(--heart-red);
  animation:burst-fly .9s var(--ease-tap) forwards;
  will-change:transform,opacity;
}
@keyframes burst-fly{
  0%{transform:translate(-50%,-50%) scale(.4) rotate(0deg);opacity:1}
  15%{transform:translate(calc(-50% + var(--tx) * .25),calc(-50% + var(--ty) * .25)) scale(1.15) rotate(calc(var(--r) * .3));opacity:1}
  100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.7) rotate(var(--r));opacity:0}
}

/* Easter-egg toast */
.egg-toast{
  position:fixed;left:50%;bottom:28px;z-index:1000;
  background:var(--ink);color:var(--white);padding:16px 24px;border-radius:16px;
  max-width:min(420px,calc(100vw - 40px));font-size:14.5px;line-height:1.5;box-shadow:var(--shadow-lg);
  opacity:0;transform:translate(-50%,16px);
  transition:opacity .4s var(--ease-spring),transform .4s var(--ease-spring);
  pointer-events:none;
}
.egg-toast.show{opacity:1;transform:translate(-50%,0)}

/* Cursor companion — the native cursor stays; a little dot tags along behind it
   and blooms into a ring over anything clickable */
.cursor-dot{
  position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--heart-red);
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease-spring),height .3s var(--ease-spring),background-color .3s var(--ease-spring),opacity .25s var(--ease-tap);
  will-change:transform;
}
.cursor-dot.cursor-hover{width:44px;height:44px;background:transparent;outline:2px solid var(--heart-red);outline-offset:-2px}
.cursor-dot.cursor-hidden{opacity:0}

/* Floating stat cards */
.stat-cards{position:absolute;left:0;right:0;bottom:-225px;z-index:3;display:flex;justify-content:center;gap:160px;padding:0 4px;min-width:0}
.stat-card{
  background:var(--white);border-radius:25px;padding:24px;box-shadow:var(--shadow-lg);
  width:250px;height:250px;flex:none;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-spring);
}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),0 30px 50px -20px rgba(36,28,16,.2)}
/* Corner swoosh — a quarter-disk accent with its category label set along the arc itself.
   The icon badge overflows past the card's own edge and sits on top, which is what makes the
   disk read as a "stripe": the badge covers the disk's inner corner, leaving only its outer
   curved band visible. Kept to the site's yellow/ink palette, not a rainbow. */
.stat-card .card-swoosh{position:absolute;top:0;left:0;width:90%;aspect-ratio:1;z-index:0;pointer-events:none}
.stat-card .badge{
  position:absolute;top:-30px;left:-30px;z-index:2;
  width:135px;height:135px;border-radius:50%;background:var(--white);border:2px solid var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px rgba(36,28,16,.18);
}
.stat-card .badge svg,.stat-card .badge img{width:64px;height:64px}
.stat-card .stat-text{position:relative;z-index:1;text-align:right}
.stat-card .value{font-family:var(--font-display);font-weight:800;font-size:40px;letter-spacing:-.02em;color:var(--ink)}
.stat-card .desc{color:var(--grey);font-size:16px;margin-top:6px;white-space:nowrap;margin-left:-60px}

/* ── Sections ────────────────────────────── */
.section{padding:100px 0}
/* Stat cards now hang far down past the hero card's bottom edge (per spec: only the top 20%
   sits in the yellow area) — extra top clearance so they don't collide with this heading. */
#projects{padding-top:285px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:44px;gap:20px;flex-wrap:wrap}
.section-link{color:var(--ink);font-size:15px;font-weight:600;border-bottom:2px solid var(--yellow-500);padding-bottom:2px;transition:opacity .2s}
.section-link:hover{opacity:.6}
.kicker{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--yellow-600);font-weight:700;display:block;margin-bottom:12px;
}

/* ── Work cards ──────────────────────────── */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:24px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-spring);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.card:active{transform:translateY(-2px) scale(.985);transition:transform .12s var(--ease-tap)}
.card-thumb{height:250px;display:flex;align-items:flex-end;justify-content:center;padding-top:26px;position:relative;overflow:hidden}
.tint-yellow{background:linear-gradient(160deg,var(--yellow-100),var(--yellow-50))}
/* FitTrack thumb — matches the app's own blue→magenta gradient, sampled from the screenshot */
.tint-fittrack{background:linear-gradient(135deg,#09BDFF,#F309E7)}
.card-thumb.tint-fittrack img.phone{height:100%;width:auto}
/* PractWorks thumb — live looping product demo; bg matches the site's sky-blue header while loading */
.tint-practwork{background:#57BBF2}
/* AMBIT thumb — white like the college site's page background while loading.
   The recording carries the page's own side margins, so the video is zoomed a step
   further to read edge-to-edge like the PractWorks card. */
.tint-ambit{background:#FDFCFA}
.tint-ambit .thumb-video{transform:scale(1.22)}
.card:hover .tint-ambit .thumb-video{transform:scale(1.28)}
.card-thumb .thumb-video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-spring)}
.card:hover .card-thumb .thumb-video{transform:scale(1.05)}
.tint-cream{background:linear-gradient(160deg,#FFF9EC,#FBF0D6)}
.tint-ink{background:linear-gradient(160deg,#F1EAD9,#E7DCC0)}
.card-thumb img.phone{width:150px;border-radius:18px 18px 0 0;box-shadow:0 -14px 34px rgba(36,28,16,.18);transition:transform .5s var(--ease-spring)}
.card:hover .card-thumb img.phone{transform:translateY(-8px)}
.card-thumb .cover-word{
  font-family:var(--font-display);font-weight:800;font-size:44px;letter-spacing:-.02em;
  align-self:center;margin:auto;color:var(--ink);opacity:.85;
}
.card-body{padding:22px 24px 26px}
.tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow-600);font-weight:700}
.card-body h3{font-size:20px;margin:9px 0 6px}
.card-body p{color:var(--grey);font-size:14.5px}

/* ── Services — white card over a tilted accent panel, per Vijay's infographic reference ── */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.service{
  position:relative;
  transition:transform .4s var(--ease-spring);
}
.service::before{
  content:"";position:absolute;top:14px;bottom:14px;left:26px;right:-12px;
  background:#FE8A80;
  border-radius:26px;transform:rotate(-3deg);
  transition:transform .4s var(--ease-spring);
}
.service:hover{transform:translateY(-4px)}
.service:hover::before{transform:rotate(-4.5deg)}
.service-card{
  position:relative;height:100%;
  background:var(--white);border-radius:24px;padding:36px 28px 30px;
  box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.service .icon{color:var(--ink);margin-bottom:18px}
.service .icon svg{width:42px;height:42px;display:block}
.service h3{font-size:17px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:10px}
.service .promise{color:var(--yellow-600);font-size:14px;font-weight:600;margin-bottom:10px;display:block}
.service p{color:var(--grey);font-size:14.5px}
.service p{margin-bottom:22px}
.service .num{
  margin-top:auto;flex:none;
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--yellow-500),var(--yellow-600));
  color:var(--white);font-family:var(--font-display);font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;
}

/* ── Process — pinned sticky notes on a dotted board, per Vijay's Framer-site reference ── */
.pinboard{
  position:relative;height:990px;
  background-image:radial-gradient(circle,rgba(36,28,16,.16) 1.2px,transparent 1.6px);
  background-size:14px 120px;background-position:0 40px;
}
.pin-card{position:absolute;width:min(400px,100%)}
.pc-1{top:0;right:2%}
.pc-2{top:165px;left:3%}
.pc-3{top:330px;right:11%}
.pc-4{top:495px;left:11%}
.pc-5{top:660px;right:3%}
.pin-tilt{
  position:relative;background:var(--white);border-radius:26px;
  padding:78px 20px 20px;box-shadow:var(--shadow-lg);
  transition:transform .5s var(--ease-spring);
}
.pc-1 .pin-tilt{transform:rotate(8deg)}
.pc-2 .pin-tilt{transform:rotate(-8deg)}
.pc-3 .pin-tilt{transform:rotate(7deg)}
.pc-4 .pin-tilt{transform:rotate(-7deg)}
.pc-5 .pin-tilt{transform:rotate(8deg)}
.pin-card:hover .pin-tilt{transform:rotate(0deg) scale(1.02)}
.pin{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:45px;height:45px;border-radius:50%;
  background:var(--pin-color,#409CFF);
  box-shadow:0 8px 14px rgba(36,28,16,.30);
}
.pin::after{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,rgba(255,255,255,.22),transparent 62%),var(--pin-light,#6EB4FF);
}
.pin-inner{
  background:var(--note-bg,#FCEBDB);border:1px solid var(--note-line,#F0A415);
  border-radius:16px;padding:20px 22px;
}
.pin-inner .pnum{display:block;font-family:var(--font-display);font-weight:700;font-style:italic;font-size:19px;color:var(--note-num,#E8442E);margin-bottom:4px}
.pin-inner h3{font-size:20px;margin-bottom:8px}
.pin-inner p{color:var(--ink-soft);opacity:.8;font-size:14.5px;line-height:1.55}
.pc-1{--pin-color:#E8821A;--pin-light:#F5A957;--note-bg:#FCEBDB;--note-line:#F0B45A;--note-num:#E8442E}
.pc-2{--pin-color:#409CFF;--pin-light:#6EB4FF;--note-bg:#DCEAFB;--note-line:#7FB2EE;--note-num:#2E7FE8}
.pc-3{--pin-color:#9A44E0;--pin-light:#BC79EE;--note-bg:#F0DFF7;--note-line:#C793EA;--note-num:#9333EA}
.pc-4{--pin-color:#E8821A;--pin-light:#F5A957;--note-bg:#FCEBDB;--note-line:#E8C05A;--note-num:#F05A3C}
.pc-5{--pin-color:#409CFF;--pin-light:#6EB4FF;--note-bg:#DCEAFB;--note-line:#7FB2EE;--note-num:#2E7FE8}

/* ── Workshop banner ─────────────────────── */
.ws-banner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:32px;
  padding:56px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
}
.ws-banner h2{margin-bottom:16px}
.ws-banner p{color:var(--grey);margin-bottom:28px;max-width:460px}
.ws-photo{border-radius:20px;position:relative;z-index:1;box-shadow:var(--shadow-md)}
.ws-stats{display:flex;gap:40px;margin-bottom:30px}
.ws-stats b{display:block;font-family:var(--font-display);font-weight:800;font-size:26px}
.ws-stats span{color:var(--grey);font-size:13.5px}

/* ── Testimonials ────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{
  background:var(--white);border:1px solid var(--line);border-radius:24px;padding:30px;
  display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-spring);
}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.quote .mark{font-family:var(--font-display);font-weight:800;font-size:44px;line-height:.5;color:var(--yellow-500)}
.quote p{color:var(--ink-soft);font-size:15.5px;line-height:1.65;flex:1}
.quote footer{display:flex;align-items:center;gap:12px}
.quote footer img{width:42px;height:42px;border-radius:50%}
.quote footer b{display:block;font-size:14.5px;font-family:var(--font-display)}
.quote footer span{color:var(--grey);font-size:13px}

/* ── FAQ ─────────────────────────────────── */
/* Physical accordion: grid-template-rows 0fr→1fr animates the real height,
   so it opens/closes like a hinge instead of native <details> snapping instantly. */
.faq{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  all:unset;box-sizing:border-box;cursor:pointer;display:flex;width:100%;
  justify-content:space-between;align-items:center;padding:24px 4px;
  font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink);gap:20px;
}
.faq-q:active{opacity:.6;transition:opacity .1s var(--ease-tap)}
.faq-icon{font-size:22px;color:var(--yellow-600);flex-shrink:0;transition:transform .4s var(--ease-spring)}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-spring)}
.faq-a-inner{overflow:hidden;min-height:0}
.faq-a-inner p{padding:0 4px 24px;color:var(--grey);font-size:15.5px;max-width:640px}
.faq-item.open .faq-a{grid-template-rows:1fr}

/* ── CTA band ────────────────────────────── */
.cta-band{position:relative;text-align:center;padding:110px 44px;overflow:hidden;border-radius:40px;background:linear-gradient(155deg,var(--yellow-500) 0%,var(--yellow-600) 100%);margin:0 18px}
.cta-band h2{font-size:clamp(32px,4.6vw,52px);max-width:720px;margin:0 auto 20px}
.cta-band p{color:var(--ink-soft);opacity:.8;margin-bottom:36px}
.cta-band .wrap{position:relative;z-index:1;padding:0}

/* ── Footer ──────────────────────────────── */
footer.site{border-radius:32px;padding:56px 44px 34px;background:var(--ink);margin:18px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-brand img{width:100px;margin-bottom:16px}
.foot-brand .tagline{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--yellow-500)}
.foot-col h4{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#B8AE99;margin-bottom:16px}
.foot-col a{display:block;color:#E7DFCB;font-size:15px;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--yellow-500)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;color:#938971;font-size:13.5px;flex-wrap:wrap;gap:10px}

/* ── Reveal animations ───────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}

/* ── Page hero (inner pages) ─────────────── */
.page-hero{padding:60px 0 72px}
.page-hero h1{font-size:clamp(38px,5.6vw,64px);margin:20px 0 16px;max-width:760px}
.page-hero .hero-sub{margin:0}

/* ── Projects page ───────────────────────── */
.project{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  padding:64px 0;border-bottom:1px solid var(--line);
}
.project:first-of-type{padding-top:0}
.project:last-of-type{border-bottom:none;padding-bottom:0}
.project .shots{
  display:flex;gap:18px;justify-content:center;align-items:flex-end;
  border-radius:28px;padding:40px 30px 0;overflow:hidden;min-height:380px;
}
.project .shots img{width:44%;max-width:200px;border-radius:16px 16px 0 0;box-shadow:0 -14px 34px rgba(36,28,16,.18)}
.project .shots img:first-child{transform:translateY(24px)}
.project h3{font-size:30px;margin:10px 0 14px}
.project .desc{color:var(--grey);margin-bottom:22px}
.project .facts{display:flex;flex-direction:column;gap:10px}
.project .facts li{display:flex;gap:12px;align-items:baseline;color:var(--ink-soft);font-size:15px}
.project .facts li::before{content:"→";color:var(--yellow-600);font-weight:700}
.outcome{
  margin-top:24px;padding:18px 22px;border-left:3px solid var(--yellow-500);
  background:var(--yellow-50);color:var(--ink);font-size:15px;border-radius:0 16px 16px 0;
}
.outcome b{display:block;font-family:var(--font-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow-600);margin-bottom:6px}

/* ── Workshops page ──────────────────────── */
/* ── Case study pages (FitTrack) ─────────── */
/* Light hero variant — the FitTrack hero artwork carries its own colors on a soft cream ground */
.hero-card.hero-light{background:#FEF7E5}
.fittrack-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;padding-bottom:40px}
.fittrack-hero img{width:100%;height:auto;min-width:0}
.fittrack-hero .hero-sub{max-width:460px}
@media (max-width:980px){
  .fittrack-hero{grid-template-columns:1fr;gap:10px}
  .fittrack-hero img{max-width:520px;margin:0 auto}
}
.why-rows{display:flex;flex-direction:column;gap:16px;max-width:820px}
.why-row{
  display:flex;gap:20px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:22px 26px;box-shadow:var(--shadow-sm);
}
.why-row .wicon{
  flex:none;width:54px;height:54px;border-radius:50%;border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
}
.why-row .wicon svg{width:26px;height:26px}
.why-row h3{font-size:17px;margin-bottom:4px}
.why-row p{color:var(--grey);font-size:14.5px}
.showcase-img{display:block;max-width:620px;width:100%;margin:44px auto 0}
.plain-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plain-cards.two{grid-template-columns:1fr 1fr}
.plain-card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow-sm)}
.plain-card h3{font-size:18px;margin-bottom:8px}
.plain-card p{color:var(--grey);font-size:14.5px}
.plain-card p + p{margin-top:10px}
/* Research — centered star + big heading, alternating text blocks, per the old Framer layout */
.research-head{text-align:center;margin-bottom:48px}
.research-head svg{width:42px;height:42px;display:block;margin:0 auto 12px;color:var(--ink)}
.research-head h2{font-size:clamp(34px,4.5vw,52px)}
.research-item{max-width:560px}
.research-item h3{font-size:24px;margin-bottom:12px}
.research-item p{color:var(--grey);font-size:15.5px}
.research-item p + p{margin-top:10px}
.research-item.right{margin-left:auto;text-align:right}
.research-divider{border:none;border-top:1px solid var(--ink);opacity:.4;margin:40px 0}

/* PractWorks case study */
.blu-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:center}
.blu-grid > img{width:100%;max-width:340px;margin:0 auto;min-width:0}
.blu-lead{color:var(--ink-soft);font-size:16.5px;margin-bottom:14px}
.blu-grid ul{display:grid;gap:10px;margin-top:20px}
.blu-grid li{color:var(--ink-soft);font-size:14.5px;display:flex;gap:10px;align-items:baseline}
.blu-grid li::before{content:"✦";color:var(--yellow-600);flex:none}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:44px}
.result-stat{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:30px 24px;text-align:center;box-shadow:var(--shadow-sm)}
.result-stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:44px;letter-spacing:-.02em;color:var(--ink)}
.result-stat span{color:var(--grey);font-size:14.5px}
.shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.shot-grid img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
@media (max-width:980px){
  .blu-grid{grid-template-columns:1fr}
  .result-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .result-stats,.shot-grid{grid-template-columns:1fr}
}

.phone-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:center}
.phone-gallery img{width:100%;height:auto}
@media (max-width:980px){
  .plain-cards,.plain-cards.two{grid-template-columns:1fr 1fr}
  .phone-gallery{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .plain-cards,.plain-cards.two{grid-template-columns:1fr}
  .why-row{align-items:flex-start}
}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery img{border-radius:20px;border:1px solid var(--line);width:100%;height:240px;object-fit:cover;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease-spring)}
.gallery img:hover{transform:scale(1.02)}
.offer{
  background:var(--white);border:1px solid var(--line);border-radius:24px;padding:36px 32px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-spring);
}
.offer:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.offer .icon{
  width:48px;height:48px;border-radius:14px;background:var(--yellow-100);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;
}
.offer h3{font-size:21px;margin-bottom:8px}
.offer .aud{color:var(--yellow-600);font-size:13.5px;font-weight:600;margin-bottom:14px}
.offer p{color:var(--grey);font-size:15px;margin-bottom:20px}
.offer ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:26px;flex:1}
.offer ul li{color:var(--ink-soft);font-size:13.5px;display:flex;gap:8px;align-items:baseline}
.offer ul li::before{content:"✦";color:var(--yellow-600);font-size:10px}
.offer .btn{margin-top:auto}
.mini-quotes{columns:3;column-gap:24px}
.mini-quote{
  break-inside:avoid;margin-bottom:24px;background:var(--white);
  border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow-sm);
}
.mini-quote p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:12px}
.mini-quote b{font-family:var(--font-display);font-size:13.5px;color:var(--yellow-600)}

/* ── Contact page ────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start}
.contact-info h2{margin-bottom:14px}
.contact-info>p{color:var(--grey);margin-bottom:34px;max-width:400px}
.c-line{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.c-line .ic{width:42px;height:42px;border-radius:12px;background:var(--yellow-100);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.c-line a:hover{color:var(--yellow-600)}
.c-line span{color:var(--grey);font-size:13px;display:block}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:28px;padding:40px;box-shadow:var(--shadow-sm)}
.form-card h3{font-size:22px;margin-bottom:6px}
.form-card .fc-sub{color:var(--grey);font-size:14.5px;margin-bottom:28px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-soft);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;background:var(--cream);border:1.5px solid var(--line);border-radius:14px;
  color:var(--ink);padding:13px 16px;font-family:var(--font-body);font-size:15px;
  transition:border-color .25s var(--ease-tap),box-shadow .25s var(--ease-tap);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--yellow-600);box-shadow:0 0 0 3px var(--yellow-100)}
.field textarea{resize:vertical;min-height:110px}
.form-note{color:var(--grey);font-size:12.5px;margin-top:14px}

/* ── Focus visibility ────────────────────── */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--yellow-600);outline-offset:3px;border-radius:4px;
}

/* ── Reduced motion ──────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ── Responsive ──────────────────────────── */
/* Stat cards need more raw width than the general tablet breakpoint gives (250px×3 + 160px×2
   gaps = 1070px) — switch them to static/stacked layout earlier than the rest of the page,
   so the fragile "20% in yellow" absolute-positioning math never has to handle a wrapped
   2-row state at some in-between viewport width. */
@media (max-width:1250px){
  .stat-cards{flex-wrap:wrap;position:static;margin-top:44px;padding:0;justify-content:center}
  /* Cards stay fully inside the yellow card at this width (no overhang) — the desktop-only
     extra top padding on #projects would just be excess whitespace here. */
  #projects{padding-top:100px}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero{padding-bottom:60px}
  .hero-illustration{order:-1;max-width:340px;margin:0 auto}
  .mark-wrap{max-width:340px;margin:0 auto}
  .cards-3,.services,.quotes{grid-template-columns:1fr 1fr}
  /* Pinboard leaves the absolute canvas and stacks to one straight column of tilted notes */
  .pinboard{height:auto;background-size:14px 100px;display:flex;flex-direction:column;align-items:center;gap:26px;padding:10px 0}
  .pin-card{position:static}
  .pc-1 .pin-tilt,.pc-3 .pin-tilt,.pc-5 .pin-tilt{transform:rotate(3.5deg)}
  .pc-2 .pin-tilt,.pc-4 .pin-tilt{transform:rotate(-3.5deg)}
  .ws-banner{grid-template-columns:1fr;padding:40px}
  .project{grid-template-columns:1fr;gap:36px}
  .contact-grid{grid-template-columns:1fr}
  .mini-quotes{columns:2}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* Nav collapses to the hamburger earlier than the general content breakpoint —
   "Workshops & Mentoring" plus the CTA pill need more than 680-980px to lay out in one row. */
@media (max-width:920px){
  .nav-inner{padding:6px 0 0}
  /* Tap-triggered, no thrown velocity behind it — critically damped (--ease-spring), no bounce. */
  .nav-links{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--white);box-shadow:var(--shadow-lg);
    padding:16px 22px 22px;gap:2px;border-radius:0 0 22px 22px;
    opacity:0;transform:translateY(-10px) scale(.98);transform-origin:top center;
    pointer-events:none;visibility:hidden;
    transition:opacity .35s var(--ease-spring),transform .35s var(--ease-spring),visibility 0s linear .35s;
  }
  .nav-links a{padding:12px 4px;color:var(--ink)}
  .nav-links.open{
    opacity:1;transform:none;pointer-events:auto;visibility:visible;
    transition:opacity .35s var(--ease-spring),transform .35s var(--ease-spring),visibility 0s;
  }
  .nav-toggle{display:block}
  .nav-cta{display:none}
}
@media (max-width:680px){
  /* left/right only — a shorthand here would reset top/bottom padding on any element
     that's also .hero (e.g. <div class="wrap hero">), clobbering its own vertical spacing. */
  .wrap{padding-left:22px;padding-right:22px}
  .hero-card{padding:16px 22px 0;border-radius:28px;margin:10px 10px 0}
  .cta-band{margin:0 10px;border-radius:28px}
  footer.site{margin:10px;border-radius:28px}
  .cards-3,.services,.quotes,.gallery{grid-template-columns:1fr}
  .section{padding:60px 0}
  .page-hero{padding-bottom:60px}
  .mini-quotes{columns:1}
  .foot-grid{grid-template-columns:1fr}
  .project .shots{min-height:300px}
  .stat-cards{flex-direction:column}
  footer.site{padding:40px 26px 28px}
  .cta-band{padding:70px 26px}
}

/* ── Reduced transparency ─────────────────── */
/* Placed after Responsive so it wins at every viewport width, mobile included. */
@media (prefers-reduced-transparency:reduce){
  .nav-links{background:var(--white)}
}

/* ── Reduced contrast ──────────────────────── */
@media (prefers-contrast:more){
  /* --grey and --line feed every muted-text and border rule on the page,
     so raising them here raises contrast everywhere at once. */
  body{--grey:#463A26;--line:rgba(36,28,16,.3)}
}