/* ==========================================================================
   MEHER — concept build, Skystride
   One typeface. Warm cream ground, crimson accent, glass that refracts the
   photography rather than glowing over it. Every effect earned: see
   ~/websites/DESIGN-BIBLE.md v2.
   ========================================================================== */
:root{
  --ground:#FBF7F0;          /* warm cream, never #fff */
  --ground-2:#F3ECE1;
  --deep:#2A211C;            /* warm near-black, never #000 */
  --ink:#2E2622;
  --dim:rgba(46,38,34,.64);
  --dimmer:rgba(46,38,34,.46);
  --accent:#A6543C;          /* terracotta — CTAs and nothing else */
  --accent-soft:#C98E77;
  --line:rgba(46,38,34,.13);

  /* glass: neutral tint, specular lip, no glow */
  --glass:rgba(255,253,249,.62);
  --glass-2:rgba(255,253,249,.34);
  --glass-line:rgba(255,255,255,.55);
  --glass-spec:rgba(255,255,255,.9);
  --frost:blur(30px) saturate(150%);
  --shadow:0 1px 2px rgba(42,33,28,.05),0 14px 34px -14px rgba(42,33,28,.18),
           0 44px 80px -40px rgba(42,33,28,.28);

  --r:20px; --r-sm:12px;
  --pad:clamp(20px,5vw,72px);
  --sec:clamp(76px,11vw,164px);
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.28,1.14,.4,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ground)}
body{background:var(--ground);color:var(--ink);
  font-family:'Fraunces',Georgia,serif;font-size:1.0625rem;line-height:1.62;
  font-variation-settings:'opsz' 14;-webkit-font-smoothing:antialiased;
  overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}

/* --- type ------------------------------------------------------------- */
h1,h2,h3{font-weight:400;letter-spacing:-.022em;line-height:1.06;
  font-variation-settings:'opsz' 110}
h1{font-size:clamp(2.25rem,4.4vw,3.625rem)}
h2{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.08}
h3{font-size:clamp(1.25rem,1.9vw,1.625rem);line-height:1.2}
em{font-style:italic;color:var(--accent-soft)}
.lead{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.6;color:var(--dim);
  max-width:52ch}
.eyebrow{display:block;font-size:.8125rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dimmer);font-variation-settings:'opsz' 9;
  margin-bottom:20px}
.head{max-width:62ch}
.head .lead{margin-top:22px}
/* The homepage opens on a full-bleed photograph, which gives the fixed nav
   something to sit over. The four inner pages open on type instead, so the
   first section carries the clearance itself. */
.page-open{padding-top:calc(var(--sec) * .62 + 46px)}

/* --- buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:17px 30px;
  border-radius:100px;background:var(--accent);color:#FFF9F4;font-size:1rem;
  letter-spacing:-.005em;border:1px solid transparent;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px);background:#94472F;
  box-shadow:0 14px 30px -12px rgba(166,84,60,.6)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:rgba(46,38,34,.05);box-shadow:none;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* --- glass panel ------------------------------------------------------ */
.glass{position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--glass-line);
  background:linear-gradient(180deg,var(--glass) 0%,var(--glass-2) 70%);
  -webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);
  box-shadow:var(--shadow)}
.glass::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;
  height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--glass-spec) 20%,
             var(--glass-spec) 60%,transparent)}

/* --- reveal ----------------------------------------------------------- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
      .rv{opacity:1;transform:none;transition:opacity 200ms ease}
      .btn:hover,.btn:active,.svc-card:hover,.wa:hover{transform:none}
      .gal figure:hover img,.svc-card:hover .svc-art img{transform:none}}
    /* A tap fires a hover on touch and it sticks; hover belongs to pointers. */
    @media (hover:none),(pointer:coarse){
      .btn:hover,.svc-card:hover,.wa:hover{transform:none}
      .gal figure:hover img,.svc-card:hover .svc-art img{transform:none}}
    /* Feedback on pointer-down, not on release. */
    .btn,.svc-card,.wa,.gal figure{-webkit-tap-highlight-color:transparent}
    .btn:active{transform:scale(.97);transition:transform 100ms ease-out}
    .svc-card:active{transform:scale(.99);transition:transform 100ms ease-out}
    @media (prefers-reduced-transparency:reduce){
      .nav-in,.stat-strip{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:fixed;inset:14px 14px auto;z-index:60;display:flex;
  align-items:center;justify-content:space-between;gap:20px;
  padding:12px 14px 12px 24px;border-radius:100px;
  border:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(255,253,249,.78),rgba(255,253,249,.55));
  -webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);
  box-shadow:0 10px 30px -14px rgba(42,33,28,.3);
  max-width:1240px;margin-inline:auto;
  transition:transform .5s var(--spring),opacity .3s var(--ease)}
.nav.off{transform:translateY(-140%);opacity:0}
.brand{font-size:1.125rem;letter-spacing:.3em;font-variation-settings:'opsz' 40}
.nav-links{display:flex;gap:26px;font-size:.9375rem;color:var(--dim)}
.nav-links a{transition:color .25s}
.nav-links a:hover{color:var(--ink)}
.nav .btn{padding:12px 22px;font-size:.9375rem}
@media (max-width:860px){.nav-links{display:none}}

/* ==========================================================================
   HERO — asymmetric on purpose. A 50/50 vertically-centred split is the
   single most generated-looking layout there is.
   ========================================================================== */
/* the bottom padding is not decoration: the proof panel is pulled up over
   this edge, and without the clearance it lands on the buttons */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:clamp(104px,12vh,142px) 0 clamp(122px,14vw,178px)}
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:68% 28%}
/* the scrim is a gradient, not a flat wash — it has to darken the type side
   and leave her face alone */
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(30,22,18,.86) 0%,rgba(30,22,18,.62) 34%,
             rgba(30,22,18,.12) 62%,transparent 80%)}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero-in{max-width:min(640px,50vw)}
.hero h1{max-width:13ch}
.hero .eyebrow{color:rgba(255,249,244,.62);margin-bottom:14px}
.hero h1{color:#FFF9F4}
.hero .lead{color:rgba(255,249,244,.8);max-width:46ch;margin-top:22px}
.hero .btn-ghost{color:#FFF9F4;border-color:rgba(255,249,244,.34)}
.hero .btn-ghost:hover{background:rgba(255,249,244,.12);color:#FFF9F4}
/* a quiet cue that there is more, which a full-bleed hero otherwise hides */
.scrollcue{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:2;
  width:1px;height:52px;background:linear-gradient(rgba(255,249,244,0),rgba(255,249,244,.7));
  animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6);transform-origin:bottom}
  50%{opacity:1;transform:scaleY(1)}}

/* ==========================================================================
   PROOF — the numbers, on glass, overlapping the hero's lower edge
   ========================================================================== */
.proof{position:relative;z-index:2;margin-top:clamp(-84px,-8vw,-56px)}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr);
  padding:clamp(22px,2.6vw,34px) clamp(18px,2vw,28px)}
.proof-in div{text-align:center;padding-inline:10px}
.proof-in div + div{border-left:1px solid var(--line)}
.proof b{display:block;font-weight:400;font-size:clamp(1.5rem,2.6vw,2.125rem);
  letter-spacing:-.02em;font-variation-settings:'opsz' 90;line-height:1}
.proof span{display:block;margin-top:8px;font-size:.8125rem;color:var(--dimmer);
  letter-spacing:.06em;font-variation-settings:'opsz' 9}
@media (max-width:760px){
  .proof{margin-top:-30px}
  .proof-in{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .proof-in div:nth-child(3){border-left:0}
}

/* ==========================================================================
   INTRO — text and a tall detail image, deliberately unequal
   ========================================================================== */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,84px);align-items:center}
.intro-art{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.intro-art img{width:100%;aspect-ratio:4/5;object-fit:cover}
.intro p + p{margin-top:20px}
@media (max-width:900px){.intro-grid{grid-template-columns:1fr}}

/* ==========================================================================
   GALLERY — an uneven grid with a square outer edge. Equal tiles in a row
   is the layout that reads as generated.
   ========================================================================== */
.gal{display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(8px,1vw,16px);margin-top:clamp(34px,4vw,56px)}
.gal figure{position:relative;overflow:hidden;border-radius:var(--r-sm);
  background:var(--ground-2)}
.gal img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.g-a{grid-column:span 4;aspect-ratio:16/11}
.g-b{grid-column:span 2;aspect-ratio:3/4}
.g-c{grid-column:span 2;aspect-ratio:3/4}
.g-d{grid-column:span 2;aspect-ratio:3/4}
.g-e{grid-column:span 2;aspect-ratio:3/4}
.g-f{grid-column:span 3;aspect-ratio:3/2}
.g-g{grid-column:span 3;aspect-ratio:3/2}
@media (max-width:820px){
  .gal{grid-template-columns:repeat(4,1fr)}
  .g-a{grid-column:span 4}.g-b,.g-c,.g-d,.g-e{grid-column:span 2}
  .g-f,.g-g{grid-column:span 4}
}

/* ==========================================================================
   SERVICES — tiles, not a price list. This section was 1290px of unbroken
   text on a page selling a visual service.
   ========================================================================== */
.svc{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,20px);margin-top:clamp(34px,4vw,56px)}
.svc-card{display:flex;flex-direction:column;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.svc-card:hover{transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(42,33,28,.06),0 24px 50px -18px rgba(42,33,28,.26)}
.svc-art{position:relative;overflow:hidden;aspect-ratio:16/10}
.svc-art img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.svc-card:hover .svc-art img{transform:scale(1.05)}
.svc-tag{position:absolute;z-index:2;left:14px;top:14px;padding:7px 14px;
  border-radius:100px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:#FFF9F4;background:rgba(30,22,18,.5);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-variation-settings:'opsz' 9}
.svc-body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.svc-price{display:flex;align-items:baseline;gap:9px;margin-top:12px}
.svc-price b{font-weight:400;font-size:clamp(1.625rem,2.4vw,2rem);letter-spacing:-.03em;
  font-variation-settings:'opsz' 90;line-height:1}
.svc-price span{font-size:.875rem;color:var(--dimmer)}
.svc-body ul{list-style:none;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);display:grid;gap:11px}
.svc-body li{position:relative;padding-left:20px;font-size:.9375rem;
  line-height:1.45;color:var(--dim)}
.svc-body li::before{content:"";position:absolute;left:0;top:.62em;width:7px;
  height:7px;border-radius:50%;background:var(--accent);opacity:.5}
.svc-foot{margin-top:auto;padding-top:22px;font-size:.875rem;color:var(--dimmer)}
.svc-note{margin-top:clamp(22px,2.6vw,32px);font-size:.9375rem;color:var(--dim);
  max-width:64ch}
@media (max-width:980px){.svc{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ==========================================================================
   THE MORNING — the signature moment. The image column pins while the four
   steps scroll past it, so the picture answers the words. One per page: this
   is the one.
   ========================================================================== */
.morning{background:var(--deep);color:#FFF9F4;position:relative;overflow:clip}
.morning .eyebrow{color:rgba(255,249,244,.44)}
.morning h2{color:#FFF9F4}
.morning .lead{color:rgba(255,249,244,.68)}
.mn-grid{display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(28px,5vw,80px);margin-top:clamp(40px,5vw,70px)}
/* the column stretches to the full height of the steps beside it; the sticky
   pane lives inside it and therefore has that whole height to travel in */
.mn-media{position:relative;height:100%}
.mn-stick{position:sticky;top:calc((100svh - 62svh) / 2);height:62svh;
  border-radius:var(--r);overflow:hidden;background:#1E1712;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.mn-stick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.mn-stick img.on{opacity:1;transform:scale(1)}
.mn-steps{display:grid;position:relative;list-style:none;
  padding-left:clamp(22px,2.6vw,36px)}
/* a rail down the left of the steps, with a lit segment tracking the one you
   are reading — the thing that was missing was any sense of progress */
.mn-steps::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:rgba(255,249,244,.14)}
.mn-steps::after{content:"";position:absolute;left:-1px;width:3px;border-radius:2px;
  background:var(--accent-soft);box-shadow:0 0 18px -2px var(--accent-soft);
  top:var(--lit-top,0px);height:var(--lit-h,0px);
  transition:top .6s var(--ease),height .6s var(--ease)}
.mn-step{padding-block:clamp(38px,7vw,84px);border-top:1px solid rgba(255,249,244,.14);
  transition:transform .6s var(--ease)}
.mn-step:first-child{border-top:0;padding-top:0}
.mn-n{display:inline-block;font-size:.8125rem;letter-spacing:.18em;
  color:rgba(255,249,244,.4);font-variation-settings:'opsz' 9;
  transition:color .5s var(--ease),transform .6s var(--ease)}
.mn-step h3{margin-top:14px;color:#FFF9F4;
  transition:color .5s var(--ease),opacity .5s var(--ease)}
.mn-step p{margin-top:14px;color:rgba(255,249,244,.62);max-width:44ch;
  transition:opacity .5s var(--ease)}
.mn-step:not(.live) h3,.mn-step:not(.live) p{opacity:.36}
.mn-step.live{transform:translateX(6px)}
.mn-step.live .mn-n{color:var(--accent-soft);transform:translateX(-4px)}
/* the frame counts along with you, the way a gallery does */
.mn-count{position:absolute;z-index:2;right:14px;bottom:14px;display:flex;
  align-items:baseline;gap:6px;padding:8px 14px;border-radius:100px;
  background:rgba(20,14,11,.42);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:.8125rem;letter-spacing:.08em;color:rgba(255,249,244,.9)}
.mn-count i{font-style:normal;color:rgba(255,249,244,.5)}
.mn-count b{font-weight:400;font-variation-settings:'opsz' 40}
@media (max-width:900px){
  .mn-grid{grid-template-columns:1fr}
  .mn-media{height:auto}
  .mn-stick{position:relative;top:0;height:52svh}
  .mn-step:not(.live) h3,.mn-step:not(.live) p{opacity:1}
  .mn-step.live{transform:none}
}

/* ==========================================================================
   ARTIST
   ========================================================================== */
.artist-grid{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,5vw,76px);align-items:center}
.artist-art{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.artist-art img{width:100%;aspect-ratio:5/6;object-fit:cover;object-position:30% 40%}
.sign{margin-top:26px;font-style:italic;font-size:1.25rem;color:var(--accent);
  font-variation-settings:'opsz' 60}
@media (max-width:900px){.artist-grid{grid-template-columns:1fr}}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:860px;margin-inline:auto;margin-top:clamp(30px,4vw,50px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;
  position:relative;font-size:clamp(1.0625rem,1.5vw,1.25rem);
  font-variation-settings:'opsz' 60;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;
  height:11px;border-right:1.5px solid var(--dimmer);
  border-bottom:1.5px solid var(--dimmer);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq p{padding:0 40px 28px 0;color:var(--dim);max-width:62ch}

/* ==========================================================================
   CLOSE
   ========================================================================== */
.close{position:relative;overflow:hidden;color:#FFF9F4;text-align:center}
.close-img{position:absolute;inset:0;z-index:0}
.close-img img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.close-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(30,22,18,.72),rgba(30,22,18,.86))}
.close .wrap{position:relative;z-index:1}
.close h2{color:#FFF9F4;max-width:16ch;margin-inline:auto}
.close .lead{color:rgba(255,249,244,.76);margin:24px auto 0;text-align:center}
.close .btn-row{justify-content:center}
.close .btn-ghost{color:#FFF9F4;border-color:rgba(255,249,244,.34)}
.close .btn-ghost:hover{background:rgba(255,249,244,.12);color:#FFF9F4}
.close-fine{margin-top:26px;font-size:.875rem;color:rgba(255,249,244,.5)}

/* --- footer ----------------------------------------------------------- */
footer{background:var(--deep);color:rgba(255,249,244,.6);
  padding-block:clamp(40px,5vw,64px);font-size:.9375rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  align-items:center}
footer a{color:rgba(255,249,244,.86)}
.concept-mark{font-size:.8125rem;color:rgba(255,249,244,.42)}

/* --- floating whatsapp ------------------------------------------------ */
.wa{position:fixed;right:16px;bottom:16px;z-index:70;padding:14px 22px;
  border-radius:100px;background:#1E7D50;color:#fff;font-size:.9375rem;
  box-shadow:0 12px 30px -10px rgba(30,125,80,.6);
  transition:transform .4s var(--ease)}
.wa:hover{transform:translateY(-3px)}