/* ============================================================
   POWER PLATE — VARIANT D · "THE PÂTISSERIE"
   Soft, playful, boutique. Arches + scallops + sticker badges.
   ============================================================ */

:root{
  --pink:      #FFC2C2;
  --pink-soft: #FFD6D6;
  --blush:     #FFE9E9;
  --cream:     #FFF6F6;
  --rose:      #E89A9A;   /* tiny accents only */
  --ink:       #141114;
  --ink-72:    rgba(20,17,20,.72);
  --ink-55:    rgba(20,17,20,.55);
  --ink-42:    rgba(20,17,20,.42);
  --line:      rgba(20,17,20,.14);

  --r-lg: 28px;
  --r-md: 22px;
  --r-sm: 16px;

  --sh-blush: 0 24px 48px -22px rgba(232,154,154,.60);
  --sh-card:  0 18px 40px -22px rgba(232,154,154,.50);
  --sh-ink:   0 14px 26px -14px rgba(20,17,20,.38);
  --sh-stick: 2px 3px 0 rgba(20,17,20,.14);

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:#fff;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

::selection{ background:var(--pink); color:var(--ink); }

:focus-visible{ outline:2px dashed var(--ink); outline-offset:3px; border-radius:6px; }

.wrap{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(20px, 4.2vw, 48px);
}

section[id]{ scroll-margin-top:96px; }

/* ---------- type helpers ---------- */

.h1{
  font-family:var(--font-head);
  font-weight:590;
  font-optical-sizing:auto;
  font-variation-settings:'opsz' 130, 'SOFT' 60, 'WONK' 0;
  font-size:clamp(38px, 4.4vw, 60px);
  line-height:1.04;
  letter-spacing:-.015em;
}
.h2{
  font-family:var(--font-head);
  font-weight:580;
  font-optical-sizing:auto;
  font-variation-settings:'opsz' 110, 'SOFT' 60, 'WONK' 0;
  font-size:clamp(31px, 3.5vw, 50px);
  line-height:1.08;
  letter-spacing:-.012em;
}
.h3{
  font-family:var(--font-head);
  font-weight:580;
  font-optical-sizing:auto;
  font-size:clamp(23px, 2.2vw, 30px);
  line-height:1.12;
}
.h1 em, .h2 em, .h3 em, .it{
  font-style:italic;
  font-weight:500;
  letter-spacing:0;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:11.5px;
  line-height:1;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-55);
}
.eyebrow::before,
.eyebrow::after{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background:var(--rose);
  flex:none;
}

.lead{
  color:var(--ink-72);
  font-size:clamp(15.5px, 1.25vw, 17.5px);
  line-height:1.7;
}

.sec-head{ max-width:640px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head .eyebrow{ margin-bottom:16px; }
.sec-head .lead{ margin-top:16px; }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 26px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  border:1.5px solid var(--ink);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  cursor:pointer;
}
.btn .ic{ flex:none; }
.btn-ink{
  background:var(--ink);
  color:#fff;
  box-shadow:var(--sh-ink);
}
.btn-ink:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -14px rgba(20,17,20,.45); }
.btn-ghost{
  background:#fff;
  color:var(--ink);
  box-shadow:var(--sh-stick);
}
.btn-ghost:hover{ transform:translateY(-2px) rotate(-.4deg); background:var(--cream); }
.btn-sm{ min-height:44px; padding:0 20px; font-size:14px; }

.ic{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- sticker badges ---------- */

.sticker{
  display:inline-block;
  font-family:var(--font-body);
  font-style:normal;
  font-weight:800;
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:#fff;
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:10px 15px;
  box-shadow:var(--sh-stick);
  white-space:nowrap;
}
.sticker.blush{ background:var(--blush); }
.sticker.pin{ position:absolute; z-index:3; }

/* ---------- scalloped section edges (pure CSS) ---------- */

.sc{
  height:22px;
  background-repeat:repeat-x;
  background-size:40px 22px;
  position:relative;
  z-index:1;
}
.sc-down-pink{
  background-image:radial-gradient(circle at 50% 0, var(--pink) 20.5px, rgba(255,194,194,0) 21.8px);
  margin-top:-1px;
}
.sc-up-pink{
  background-image:radial-gradient(circle at 50% 100%, var(--pink) 20.5px, rgba(255,194,194,0) 21.8px);
  margin-bottom:-1px;
}
.sc-down-blush{
  background-image:radial-gradient(circle at 50% 0, var(--blush) 20.5px, rgba(255,233,233,0) 21.8px);
  margin-top:-1px;
}
.sc-up-blush{
  background-image:radial-gradient(circle at 50% 100%, var(--blush) 20.5px, rgba(255,233,233,0) 21.8px);
  margin-bottom:-1px;
}
.on-cream{ background-color:var(--cream); }

/* ---------- dotted pattern backgrounds ---------- */

.dots{
  background-image:radial-gradient(rgba(232,154,154,.20) 1.4px, rgba(232,154,154,0) 1.5px);
  background-size:22px 22px;
}
.dots-white{
  background-image:radial-gradient(rgba(255,255,255,.42) 1.6px, rgba(255,255,255,0) 1.7px);
  background-size:26px 26px;
}

/* ---------- arched photo placeholder frames ---------- */

.arch{
  position:relative;
  border-radius:50% 50% 24px 24px / 38% 38% 24px 24px;
  background:linear-gradient(160deg, var(--pink-soft), var(--pink));
  border:9px solid #fff;
  box-shadow:var(--sh-blush);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:transform .25s ease;
}
.arch:hover{ transform:translateY(-4px); }
.arch.landscape{ border-radius:50% 50% 24px 24px / 60% 60% 24px 24px; }
.arch.pale{ background:linear-gradient(165deg, var(--cream), var(--pink-soft)); }
.ph-cap{
  font-weight:800;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-42);
  text-align:center;
  line-height:1.9;
  padding:0 18%;
}

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--blush);
}
.nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:78px;
}
.nav-logo{ display:inline-flex; align-items:center; padding:8px 0; }
.nav-logo img{ height:54px; width:auto; }
.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  font-weight:600;
  font-size:14.5px;
  color:var(--ink-72);
  transition:background-color .15s ease, color .15s ease;
}
.nav-links a:hover{ background:var(--blush); color:var(--ink); }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  background:var(--pink);
  position:relative;
}
.hero-pattern{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero-in{
  position:relative;
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(36px, 5vw, 72px);
  align-items:center;
  padding-top:clamp(40px, 5vw, 64px);
  padding-bottom:clamp(48px, 6vw, 88px);
}
.hero-copy .eyebrow{ color:var(--ink-72); }
.hero-copy .eyebrow::before,
.hero-copy .eyebrow::after{ background:var(--ink); opacity:.5; }
.hero-wordmark{
  width:min(430px, 78%);
  height:auto;
  margin:22px 0 26px;
}
.hero-copy .h1{ max-width:15ch; }
.hero-copy .lead{
  color:var(--ink-72);
  max-width:47ch;
  margin-top:20px;
}
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}
.hero-services{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  margin-top:26px;
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-55);
}
.hero-services i{
  font-style:normal;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--ink);
  opacity:.4;
}

.hero-stage{
  position:relative;
  padding:10px 18px 26px 10px;
}
.hero-stage::before{           /* hand-placed second arch outline */
  content:"";
  position:absolute;
  inset:10px -4px 12px 26px;
  border:2px dashed rgba(255,255,255,.8);
  border-radius:50% 50% 24px 24px / 38% 38% 24px 24px;
  transform:rotate(2.6deg);
}
.hero-arch{
  aspect-ratio:4 / 5;
  width:min(440px, 100%);
  margin-inline:auto;
  transform:rotate(-.8deg);
}
.hero-stage .pin-a{ top:26px; right:-6px; transform:rotate(6deg); }
.hero-stage .pin-b{ bottom:64px; left:-10px; transform:rotate(-7deg); }

/* ============================================================
   SERVICES OVERVIEW
   ============================================================ */

.services{
  padding-block:clamp(64px, 8vw, 104px) clamp(72px, 8vw, 112px);
}
.services .sec-head{ margin-bottom:clamp(36px, 4vw, 56px); }
.svc-grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:26px;
}
.svc-card{
  position:relative;
  border-radius:var(--r-lg);
  padding:clamp(28px, 3vw, 44px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.svc-card .num{
  position:absolute;
  right:18px;
  top:-14px;
  font-family:var(--font-head);
  font-style:italic;
  font-weight:600;
  font-size:clamp(88px, 9vw, 130px);
  line-height:1;
  pointer-events:none;
}
.svc-eyebrow{
  font-weight:800;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-55);
}
.svc-card p{ color:var(--ink-72); max-width:46ch; }
.svc-card .btn{ margin-top:auto; }
.svc-main{
  background:var(--pink);
  box-shadow:var(--sh-card);
  transform:rotate(-.5deg);
  min-height:440px;
}
.svc-main .num{ color:rgba(255,255,255,.55); }
.svc-main .svc-eyebrow{ color:var(--ink-72); }
.svc-main p{ color:var(--ink-72); }
.svc-main .spread-mini{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 10px;
}
.svc-main .spread-mini span{
  font-family:var(--font-head);
  font-style:italic;
  font-size:15px;
  background:rgba(255,255,255,.72);
  border-radius:999px;
  padding:7px 14px;
}
.svc-arches{
  position:absolute;
  right:clamp(26px, 3vw, 46px);
  bottom:clamp(30px, 3vw, 46px);
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.svc-arches i{
  display:block;
  width:46px;
  height:56px;
  background:rgba(255,255,255,.5);
  border:1.5px solid rgba(20,17,20,.32);
  border-radius:50% 50% 9px 9px / 42% 42% 9px 9px;
}
.svc-arches i:nth-child(2){ height:72px; background:rgba(255,255,255,.78); }
.svc-arches i:nth-child(3){ height:48px; background:rgba(255,255,255,.34); }
.svc-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:26px;
}
.svc-blush{
  background:var(--blush);
  transform:rotate(.55deg);
  box-shadow:var(--sh-card);
}
.svc-blush .num{ color:rgba(255,255,255,.85); }
.svc-white{
  background:#fff;
  border:1.5px solid var(--ink);
  transform:rotate(-.45deg);
  box-shadow:var(--sh-stick);
}
.svc-white .num{ color:var(--blush); }
.link-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  font-weight:700;
  font-size:14.5px;
  border-bottom:1.5px solid var(--ink);
  margin-top:auto;
  transition:gap .15s ease;
}
.link-more:hover{ gap:13px; }

/* ============================================================
   CATERING SHOWCASE
   ============================================================ */

.showcase{
  background:var(--blush);
  padding-block:clamp(56px, 7vw, 96px);
  position:relative;
}
.showcase .sec-head{ margin-bottom:clamp(40px, 4.5vw, 60px); }
.arcade{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(22px, 3vw, 40px);
  align-items:start;
}
.arcade-item{ position:relative; text-align:center; }
.arcade-item .arch{ aspect-ratio:3 / 4; }
.arcade-item:nth-child(1){ transform:rotate(-.8deg); }
.arcade-item:nth-child(2){ transform:rotate(.4deg) translateY(18px); }
.arcade-item:nth-child(3){ transform:rotate(.9deg); }
.arcade-item h3{
  font-family:var(--font-head);
  font-weight:580;
  font-size:23px;
  margin-top:22px;
}
.arcade-item h3 em{ font-weight:500; }
.arcade-item p{
  color:var(--ink-72);
  font-size:14.5px;
  max-width:30ch;
  margin:6px auto 0;
}
.arcade-item .pin-c{ top:16px; right:2px; transform:rotate(7deg); }
.arcade-item .pin-d{ bottom:-16px; left:50%; transform:translateX(-50%) rotate(-3deg); }

.chips-block{ margin-top:clamp(48px, 5vw, 64px); text-align:center; }
.chips-label{
  font-family:var(--font-head);
  font-style:italic;
  font-size:19px;
  color:var(--ink-72);
  margin-bottom:18px;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  max-width:820px;
  margin-inline:auto;
}
.chips li{
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.02em;
  background:#fff;
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:11px 18px;
  box-shadow:var(--sh-stick);
  transition:transform .15s ease;
}
.chips li:nth-child(odd):hover{ transform:rotate(-2deg); }
.chips li:nth-child(even):hover{ transform:rotate(2deg); }
.showcase-cta{
  margin-top:clamp(36px, 4vw, 48px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.showcase-cta .note{
  font-size:13.5px;
  color:var(--ink-55);
}

/* ============================================================
   HOW IT WORKS  (cream band)
   ============================================================ */

.how{
  background:var(--cream);
  padding-block:clamp(64px, 8vw, 104px) clamp(48px, 5vw, 72px);
}
.how .sec-head{ margin-bottom:clamp(44px, 5vw, 64px); }
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3vw, 44px);
  position:relative;
}
.steps::before{
  content:"";
  position:absolute;
  top:46px;
  left:14%;
  right:14%;
  border-top:2px dashed rgba(20,17,20,.22);
}
.step{
  text-align:center;
  position:relative;
  padding-top:2px;
}
.plate{
  width:92px; height:92px;
  margin-inline:auto;
  border-radius:50%;
  background:#fff;
  border:1.5px dashed var(--ink);
  box-shadow:0 0 0 9px var(--blush), var(--sh-card);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-style:italic;
  font-weight:600;
  font-size:34px;
  position:relative;
  z-index:1;
}
.step h3{
  font-family:var(--font-head);
  font-weight:580;
  font-size:22px;
  line-height:1.2;
  margin-top:24px;
}
.step p{
  color:var(--ink-72);
  font-size:14.5px;
  max-width:32ch;
  margin:10px auto 0;
}

/* ============================================================
   MONTHLY PACKAGES  (cream band continues)
   ============================================================ */

.packages{
  background:var(--cream);
  padding-block:clamp(40px, 4vw, 56px) clamp(72px, 8vw, 108px);
}
.packages .sec-head{ margin-bottom:clamp(40px, 4.5vw, 58px); }
.tiers{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  align-items:stretch;
}
.tier{
  position:relative;
  background:#fff;
  border:1.5px solid var(--ink);
  border-radius:var(--r-lg);
  padding:clamp(26px, 2.6vw, 36px);
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:var(--sh-stick);
}
.tier:nth-child(1){ transform:rotate(-.55deg); }
.tier:nth-child(3){ transform:rotate(.55deg); }
.tier-hero{
  background:var(--pink);
  border-color:var(--pink);
  box-shadow:var(--sh-card);
  transform:translateY(-10px);
}
.tier .sticker.pin{ top:-17px; right:22px; transform:rotate(6deg); }
.tier h3{
  font-family:var(--font-head);
  font-weight:590;
  font-size:26px;
}
.tier-structure{
  align-self:flex-start;
  font-family:var(--font-head);
  font-style:italic;
  font-size:19px;
  line-height:1;
  background:var(--blush);
  border-radius:999px;
  padding:13px 20px;
}
.tier-hero .tier-structure{ background:#fff; }
.tier p.tier-note{ color:var(--ink-72); font-size:14.5px; }
.tier ul{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:2px;
  margin-bottom:6px;
}
.tier li{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:14.5px;
  color:var(--ink-72);
}
.tier li::before{
  content:"";
  flex:none;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--rose);
  transform:translateY(-2px);
}
.tier-hero li::before{ background:var(--ink); opacity:.55; }
.tier .btn{ margin-top:auto; width:100%; }
.packages-note{
  text-align:center;
  margin-top:34px;
  font-size:13.5px;
  color:var(--ink-55);
}

/* ============================================================
   DAILY MEALS STRIP
   ============================================================ */

.daily{
  background:var(--pink);
  position:relative;
}
.daily-in{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding-block:clamp(44px, 5vw, 64px);
}
.daily-copy{ position:relative; max-width:56ch; }
.daily-copy .eyebrow{ display:flex; color:var(--ink-72); margin-bottom:12px; }
.daily-copy .eyebrow::before,
.daily-copy .eyebrow::after{ background:var(--ink); opacity:.5; }
.daily-copy .lead{ margin-top:12px; max-width:44ch; }
.daily-copy h2{ display:inline-block; position:relative; }
.daily-copy h2 .sticker{
  position:absolute;
  top:-12px;
  right:-150px;
  transform:rotate(8deg);
}

/* ============================================================
   ABOUT / FOUNDER
   ============================================================ */

.about{
  padding-block:clamp(72px, 9vw, 116px);
}
.about-in{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(40px, 5vw, 80px);
  align-items:center;
}
.about-stage{ position:relative; padding:8px 8px 20px; }
.about-stage::before{
  content:"";
  position:absolute;
  inset:22px -8px 6px 24px;
  border:2px dashed rgba(232,154,154,.75);
  border-radius:50% 50% 24px 24px / 60% 60% 24px 24px;
  transform:rotate(-2deg);
}
.about-arch{
  aspect-ratio:16 / 11;
  transform:rotate(.7deg);
}
.about-stage .pin-e{ top:6px; left:-6px; transform:rotate(-6deg); }
.about-copy .h2{ margin-bottom:18px; }
.about-copy p{
  color:var(--ink-72);
  max-width:52ch;
}
.about-copy p + p{ margin-top:14px; }
.about-sign{
  font-family:var(--font-head);
  font-style:italic;
  font-size:19px;
  color:var(--ink);
  margin-top:20px;
}
.about-copy .btn{ margin-top:26px; }

/* ============================================================
   FINAL CTA BAND
   ============================================================ */

.final{
  background:var(--pink);
  position:relative;
}
.final-in{
  position:relative;
  text-align:center;
  padding-block:clamp(64px, 8vw, 104px);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.final .eyebrow{ color:var(--ink-72); }
.final .eyebrow::before,
.final .eyebrow::after{ background:var(--ink); opacity:.5; }
.final .h2{ max-width:18ch; margin-top:16px; }
.final .lead{ max-width:52ch; margin-top:18px; }
.final-ctas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:32px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer{
  background:var(--ink);
  color:#fff;
  padding-block:clamp(48px, 6vw, 72px) 36px;
}
.footer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:36px;
  flex-wrap:wrap;
}
.footer-brand img{ height:52px; width:auto; }
.footer-tag{
  font-family:var(--font-head);
  font-style:italic;
  font-size:17px;
  color:var(--pink);
  margin-top:16px;
}
.footer-links{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.footer-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  font-weight:600;
  font-size:14.5px;
  color:rgba(255,255,255,.86);
  transition:background-color .15s ease;
}
.footer-links a:hover{ background:rgba(255,255,255,.1); }
.footer-social{
  display:flex;
  gap:12px;
}
.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);
  color:#fff;
  transition:background-color .15s ease, transform .15s ease;
}
.footer-social a:hover{ background:rgba(255,255,255,.12); transform:rotate(-4deg); }
.footer-bottom{
  margin-top:44px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:13px;
  color:rgba(255,255,255,.62);
}
.footer-bottom .dot-row{ display:inline-flex; gap:6px; }
.footer-bottom .dot-row i{
  width:5px; height:5px;
  border-radius:50%;
  background:var(--pink);
  display:inline-block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1020px){
  .hero-in{
    grid-template-columns:1fr;
    text-align:center;
    padding-top:44px;
  }
  .hero-copy{ display:flex; flex-direction:column; align-items:center; }
  .hero-wordmark{ width:min(380px, 74%); }
  .hero-ctas, .hero-services{ justify-content:center; }
  .hero-stage{ width:min(460px, 100%); margin-inline:auto; }

  .svc-grid{ grid-template-columns:1fr; }
  .svc-main{ min-height:0; }
  .svc-side{ grid-template-rows:none; }

  .arcade{ grid-template-columns:1fr; gap:44px; }
  .arcade-item{ max-width:420px; margin-inline:auto; }
  .arcade-item:nth-child(2){ transform:rotate(.4deg); }

  .steps{ grid-template-columns:1fr; gap:40px; }
  .steps::before{ display:none; }

  .tiers{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .tier-hero{ transform:none; }

  .daily-in{ flex-direction:column; text-align:center; }
  .daily-copy{ display:flex; flex-direction:column; align-items:center; }

  .svc-arches{ display:none; }

  .about-in{ grid-template-columns:1fr; }
  .about-stage{ max-width:560px; margin-inline:auto; }

  .footer-top{ flex-direction:column; align-items:center; text-align:center; }
  .footer-bottom{ justify-content:center; text-align:center; }
}

@media (max-width: 900px){
  .nav-links{ display:none; }
}

@media (max-width: 430px){
  body{ font-size:15px; }
  .nav-in{ min-height:66px; }
  .nav-logo img{ height:44px; }
  .btn{ padding:0 20px; min-height:48px; font-size:14px; }
  .hero-wordmark{ width:min(300px, 86%); margin:18px 0 20px; }
  .hero-copy .h1{ font-size:36px; }
  .hero-stage{ padding:8px 8px 20px 4px; }
  .hero-stage .pin-a{ right:0; top:14px; }
  .hero-stage .pin-b{ left:-2px; bottom:48px; }
  .hero-ctas{ width:100%; flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; }
  .sc{ background-size:32px 18px; height:18px; }
  .sc-down-pink, .sc-down-blush{ background-image:radial-gradient(circle at 50% 0, var(--pink) 16.4px, rgba(255,194,194,0) 17.6px); }
  .sc-down-blush{ background-image:radial-gradient(circle at 50% 0, var(--blush) 16.4px, rgba(255,233,233,0) 17.6px); }
  .sc-up-pink{ background-image:radial-gradient(circle at 50% 100%, var(--pink) 16.4px, rgba(255,194,194,0) 17.6px); }
  .sc-up-blush{ background-image:radial-gradient(circle at 50% 100%, var(--blush) 16.4px, rgba(255,233,233,0) 17.6px); }
  .svc-card{ padding:26px 22px; }
  .chips li{ font-size:12.5px; padding:10px 14px; }
  .daily-copy h2 .sticker{ position:static; display:inline-block; margin-left:10px; vertical-align:middle; transform:rotate(-3deg); }
  .final-ctas{ width:100%; flex-direction:column; align-items:stretch; }
  .final-ctas .btn{ width:100%; }
  .footer-brand img{ height:44px; }
}

/* ============================================================
   PHOTO DROP-IN SYSTEM
   Each .arch keeps its placeholder look; when a real photo
   exists in images/, the <img class="ph-img"> covers it.
   Missing file -> inline onerror adds .ph-broken -> hidden.
   ============================================================ */

.ph-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  z-index:1;
}
.ph-img.ph-broken{ display:none; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; }
  .btn-ink:hover,
  .btn-ghost:hover,
  .arch:hover,
  .chips li:nth-child(odd):hover,
  .chips li:nth-child(even):hover,
  .footer-social a:hover{ transform:none; }
}