/* Simplify Creative — site styles
   Brand palette (exact HEX from the brand guide) + type tokens.
   Contrast rules: body text only Jet on White/Tea/Sun/lilac-tint, or White/Tea on Lilac/Jet.
   Coral only for large text (24px+) or decoration. Never Sun/Tea text on white,
   coral on lilac, or jet on lilac. Never the color logo on Sun or Coral.
   Animations live in motion.js and only apply under html.motion (see the page head). */

:root {
  --lilac: #7255A4;
  --coral: #F06568;
  --tea: #BEFFC7;
  --jet: #1C2826;
  --sun: #F7C548;
  --white: #FFFFFF;

  --lilac-tint: #F4F1F9;      /* very light lilac for soft sections */
  --line: #E4E1EA;
  --muted: #4A5552;           /* secondary text on white (8.2:1) */
  --muted-dark: #B9C3C0;      /* secondary text on jet (8.9:1) */
  --line-dark: rgba(255, 255, 255, .14);

  --font-head: "Gloock", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-script: cursive;     /* only used if a handwritten word has not been drawn yet (npm run script-words) */

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
  --wrap: 1240px;
  --gutter: 16px;
  --radius: 18px;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--jet);
  font: 400 17px/1.6 var(--font-body);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lilac); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--tea); }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
::selection { background: var(--tea); color: var(--jet); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }
.center { text-align: center; margin-top: 72px; }
.mt { margin-top: 40px; }
.small { font-size: 14px; color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--jet); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------- */
.display { font-family: var(--font-head); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; color: var(--jet); }
.headline    { font-size: clamp(54px, 10.5vw, 172px); line-height: .95; }
.headline-sm { font-size: clamp(44px, 7vw, 104px); padding-bottom: .35em; } /* room for the dipping script word */
.h1-size     { font-size: clamp(44px, 7vw, 100px); }
.h2          { font-size: clamp(38px, 5.2vw, 72px); }
.h2.plain    { font-size: clamp(32px, 4vw, 52px); margin-bottom: 18px; }

/* The logo motif: bold serif + coral handwritten word overlapping it */
.serif-line { display: block; }
.script-word {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--coral);
  font-size: .9em;
  line-height: .9;
  margin-top: -0.36em;   /* crosses the bottom of the serif line, like "Creative" under "Simplify" */
  padding-left: 50%;
  transform: rotate(-4deg);
  transform-origin: left;
  letter-spacing: 0;
}
/* The handwritten word is an SVG drawn from the Photograph Signature brand font
   (src/lib/script.mjs). It sits on the text baseline and takes the coral color. */
.script-word svg { display: inline-block; fill: currentColor; overflow: visible; }
.tie { white-space: nowrap; }  /* last serif word + handwritten word wrap together */
/* Smaller headings: the script word follows the last serif word and dips below it */
.h2 .serif-line, .h1-size .serif-line, .headline-sm .serif-line { display: inline; }
.h2 .script-word, .h1-size .script-word, .headline-sm .script-word {
  display: inline-block; font-size: 1.02em; margin: 0 0 0 -0.55em; padding: 0 .06em 0 0;
  transform: translateY(0.34em) rotate(-4deg);   /* starts under the last serif word and crosses its baseline */
}

.eyebrow, .label {
  font: 600 13px/1.4 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lilac);
  margin: 0 0 18px;
}
.eyebrow a { color: inherit; }
.lede { font-size: clamp(18px, 1.6vw, 21px); max-width: 34em; color: var(--muted); margin-top: 26px; }

/* ---------- Dark sections ---------- */
.dark { background: var(--jet); color: var(--white); }
.dark .display { color: var(--white); }
.dark .eyebrow, .dark .label { color: var(--tea); }
.dark .lede, .dark .section-intro { color: var(--muted-dark); }
.dark a:not(.btn) { color: var(--tea); }
/* Dotted grid texture */
.grid-bg {
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  background-position: center top;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 26px;
  border-radius: 999px; border: 2px solid transparent;
  font: 600 16px/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .3s var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:disabled { opacity: .6; cursor: wait; }
.btn-sm { min-height: 42px; padding: 8px 18px; font-size: 15px; }
.btn-primary { background: var(--lilac); color: var(--white); }
.btn-primary:hover { background: #5E4590; }
.btn-ghost { border-color: var(--jet); color: var(--jet); background: none; }
.btn-ghost:hover { background: var(--jet); color: var(--white); }
.btn-light { background: var(--white); color: var(--lilac); }
.btn-tea { background: var(--tea); color: var(--jet); }
.btn-tea:hover { background: var(--white); }
.btn-outline-light { border-color: rgba(255, 255, 255, .5); color: var(--white); background: none; }
.btn-outline-light:hover { background: var(--white); color: var(--jet); border-color: var(--white); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 32px; }
.text-link { color: var(--white); font-weight: 500; }

.arrow-link { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease); padding-bottom: 4px; }
.arrow-link::after { content: "→"; transition: transform .3s var(--ease); }
.arrow-link:hover { background-size: 100% 2px; }
.arrow-link:hover::after { transform: translateX(4px); }

/* ---------- Floating pill header ---------- */
.site-header {
  position: fixed; top: 12px; left: 0; right: 0; z-index: 40;
  padding: 0 var(--gutter);
  pointer-events: none;
  transition: transform .5s var(--ease);
}
.site-header.nav-hidden { transform: translateY(calc(-100% - 24px)); }
.nav-pill {
  position: relative; z-index: 0;
  max-width: 1180px; margin: 0 auto; min-height: 62px;
  display: flex; align-items: center; gap: 28px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  pointer-events: auto;
}
/* Glass background lives on a pseudo-element so the full-screen phone menu can be position: fixed */
.nav-pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(28, 40, 38, .84);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 12px 40px -16px rgba(0, 0, 0, .5);
}
.brand img { width: 118px; height: auto; }
.main-nav { display: flex; gap: 26px; margin-left: auto; }
.main-nav a { color: var(--white); text-decoration: none; font-weight: 500; font-size: 15px; position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--tea); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-num { display: none; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-switch { display: flex; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 2px; }
.lang-switch a {
  font: 600 13px/1 var(--font-body); color: var(--muted-dark); text-decoration: none;
  display: grid; place-items: center; min-width: 38px; min-height: 34px; padding: 0 9px; border-radius: 999px;
}
.lang-switch a[aria-current] { background: var(--white); color: var(--jet); }
.menu-toggle { display: none; }

@media (max-width: 900px) {
  .nav-pill { gap: 10px; padding-left: 18px; min-height: 58px; }
  .brand img { width: 104px; }
  .hide-mobile { display: none; }
  .header-actions { margin-left: auto; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px;
    border: 0; border-radius: 999px; background: var(--white); color: var(--jet);
    font: 600 14px/1 var(--font-body); cursor: pointer;
  }
  .burger, .burger::before { display: block; width: 16px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
  .burger { position: relative; transform: translateY(-3px); }
  .burger::before { content: ""; position: absolute; top: 6px; }
  .menu-toggle[aria-expanded="true"] .burger { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .burger::before { transform: translateY(-6px) rotate(-90deg); }

  .main-nav {
    position: fixed; inset: 0; z-index: -2;
    flex-direction: column; justify-content: center; gap: 4px;
    padding: 100px 24px 40px; margin: 0;
    background: var(--jet);
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.4px); background-size: 26px 26px;
    visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s .35s;
  }
  .main-nav.open { visibility: visible; opacity: 1; transition: opacity .35s ease; }
  .main-nav a { font: 400 clamp(44px, 12vw, 64px)/1.15 var(--font-head); padding: 6px 0; display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--line-dark); }
  .main-nav a::after { display: none; }
  .main-nav a[aria-current="page"] { color: var(--tea); }
  .nav-num { display: inline; font: 600 13px/1 var(--font-body); color: var(--tea); letter-spacing: .1em; }
  .motion .main-nav a { opacity: 0; transform: translateY(30px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
  .motion .main-nav.open a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 60ms + 120ms); }
  html.menu-open { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; overflow: hidden; isolation: isolate; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 40, 38, 0) 35%, rgba(28, 40, 38, .9) 85%); pointer-events: none; }
.hero-inner { width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 120px; padding-bottom: 36px; gap: 40px; }
.hero-top { display: flex; justify-content: space-between; gap: 16px; }
.hero-since { color: var(--muted-dark) !important; }
.hero .headline { margin-top: auto; }
.hero .lede { color: #DCE3E1; margin: 0; }
.hero-bottom { display: grid; gap: 28px; align-items: end; }
.hero-bottom .cta-row { margin: 0; }
@media (min-width: 1000px) { .hero-bottom { grid-template-columns: 1.2fr 1fr auto; gap: 48px; } }
.scroll-hint { display: none; margin: 0; font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); writing-mode: vertical-rl; }
.scroll-hint span { display: inline-block; width: 1px; height: 56px; margin-bottom: 12px; background: linear-gradient(var(--tea), transparent); }
@media (min-width: 1000px) { .scroll-hint { display: flex; align-items: center; } }
.motion .scroll-hint span { animation: drip 2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Hero headline: the script word follows the last serif word and tucks under it, like the logo
   (works for any language length and screen size) */
.hero .headline .serif-line { display: inline; }
.hero .headline .script-word { display: inline-block; padding: 0 .08em 0 0; margin: 0 0 0 -.62em; font-size: 1.15em; transform: translateY(.42em) rotate(-5deg); }
.hero .headline { padding-bottom: .3em; }

/* Phones: tighter hero so headline, text and both buttons fit on one screen */
@media (max-width: 600px) {
  .hero-inner { padding-top: 100px; padding-bottom: 24px; gap: 24px; }
  .hero-top .eyebrow { font-size: 12px; letter-spacing: .1em; margin: 0; }
  .hero-since { display: none; }
  .hero .headline { font-size: clamp(48px, 14.5vw, 68px); line-height: .98; }
  .hero .lede { font-size: 17px; line-height: 1.55; }
  .hero-bottom { gap: 22px; }
  .hero-bottom .btn { flex: 1 1 0; padding: 12px 16px; }
}

/* Crosshair corner marks */
.corner { position: absolute; width: 14px; height: 14px; z-index: 1; pointer-events: none; }
.corner::before, .corner::after { content: ""; position: absolute; background: rgba(255, 255, 255, .45); }
.corner::before { left: 6px; top: 0; width: 1px; height: 14px; }
.corner::after { top: 6px; left: 0; height: 1px; width: 14px; }
.corner.tl { top: 92px; left: var(--gutter); }
.corner.tr { top: 92px; right: var(--gutter); }

/* ---------- Page heroes (inner pages) ---------- */
.page-hero { padding: 150px 0 64px; }
@media (min-width: 1024px) { .page-hero { padding: 180px 0 88px; } }
.page-hero.dark .lede { color: var(--muted-dark); }

/* ---------- Project reel (homepage) ---------- */
.reel { padding: 8px 0 96px; overflow: hidden; }
.reel-track, .marquee { display: flex; width: max-content; will-change: transform; }
.reel-set { display: flex; gap: 20px; padding-right: 20px; }
.reel-item { width: clamp(250px, 27vw, 400px); text-decoration: none; color: var(--white); }
.reel-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); transition: transform .6s var(--ease), border-radius .6s var(--ease); background: #26332F; }
.reel-item:hover img { transform: scale(.97); border-radius: 30px; }
.reel-item span { display: block; margin-top: 12px; font: 400 22px/1.2 var(--font-head); color: var(--white); }

/* ---------- Manifesto (lights up while scrolling) ---------- */
.manifesto { padding-top: 40px; }
.manifesto-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .manifesto-grid { grid-template-columns: 1fr 3fr; gap: 48px; } }
.manifesto-text { font: 400 clamp(30px, 4.3vw, 62px)/1.12 var(--font-head); letter-spacing: -0.01em; color: var(--white) !important; margin-bottom: 40px; }
.motion .manifesto-text [aria-hidden] span { color: rgba(255, 255, 255, .17); transition: color .35s ease; }
.motion .manifesto-text [aria-hidden] span.lit { color: var(--white); }

/* ---------- Clients band ---------- */
.clients-band { background: var(--lilac); color: var(--white); padding: 30px 0; overflow: hidden; }
.marquee-set { list-style: none; margin: 0; padding: 0; display: flex; }
.marquee-set li { font: 400 clamp(32px, 4.4vw, 60px)/1.1 var(--font-head); white-space: nowrap; display: flex; align-items: center; }
.marquee-set li::after { content: "✳"; color: var(--tea); font-size: .6em; margin: 0 .7em; }
/* Without animation the band wraps instead of scrolling */
html:not(.motion) .marquee { width: auto; }
html:not(.motion) .marquee-set { flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); }
html:not(.motion) .marquee-set[aria-hidden] { display: none; }
html:not(.motion) .reel { overflow-x: auto; }
html:not(.motion) .reel-set[aria-hidden] { display: none; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
@media (min-width: 1024px) { .section { padding: 140px 0; } }
.section-top-0 { padding-top: 0; }
.section-tint { background: var(--lilac-tint); }
.section-head { display: grid; gap: 20px; margin-bottom: 64px; align-items: end; }
@media (min-width: 900px) { .section-head { grid-template-columns: 1fr 1fr; } }
.section-intro { color: var(--muted); max-width: 30em; margin: 0; }

/* ---------- Work ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.filters button {
  font: 600 15px/1 var(--font-body); color: var(--jet); background: none; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 999px; min-height: 44px; padding: 0 18px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.filters button:hover { border-color: var(--jet); }
.filters button[aria-pressed="true"] { background: var(--jet); border-color: var(--jet); color: var(--white); }
.work-grid { display: grid; gap: 64px 40px; }
@media (min-width: 700px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-grid-stagger > :nth-child(even) { margin-top: 140px; margin-bottom: -140px; }
  .work-grid-stagger { padding-bottom: 140px; }
}
.work-card { color: var(--jet); text-decoration: none; display: block; }
.work-img { display: block; overflow: hidden; border-radius: var(--radius); background: var(--lilac-tint); }
.work-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); }
.work-card:hover .work-img img { transform: scale(1.05); }
.work-meta { display: flex; gap: 14px; align-items: baseline; margin: 20px 0 6px; font-size: 14px; color: var(--muted); }
.work-num { font-weight: 700; color: var(--lilac); }
.work-card h3 { font: 400 clamp(32px, 3.4vw, 46px)/1.05 var(--font-head); margin-bottom: 8px; transition: color .3s ease; }
.work-card:hover h3 { color: var(--lilac); }
.work-card p { margin: 0; color: var(--muted); }

/* ---------- Case study ---------- */
.case-head { padding-bottom: 160px; }
.case-title { font-size: clamp(36px, 5.6vw, 76px); max-width: 15em; line-height: 1.04; }
.case-hero-frame { margin-top: -110px; border-radius: var(--radius); overflow: hidden; background: var(--lilac-tint); position: relative; z-index: 1; }
.case-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case-grid { display: grid; gap: 40px; padding: 64px 0; }
@media (min-width: 900px) { .case-grid { grid-template-columns: 1fr 2fr; gap: 80px; padding: 100px 0; } }
.facts { margin: 0; display: grid; gap: 18px; align-content: start; }
@media (min-width: 900px) { .facts { position: sticky; top: 110px; } }
.facts div { border-top: 1px solid var(--line); padding-top: 12px; }
.facts dt { font: 600 12px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--lilac); }
.facts dd { margin: 4px 0 0; }
.prose { max-width: 40em; }
.prose h2 { font: 400 clamp(28px, 3.2vw, 38px)/1.12 var(--font-head); margin: 48px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 600 17px/1.4 var(--font-body); margin: 22px 0 6px; }
.prose ul { padding-left: 20px; margin: 0 0 1em; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--lilac); }
.gallery { columns: 1; column-gap: 24px; }
@media (min-width: 700px) { .gallery { columns: 2; } }
.gallery-item { break-inside: avoid; margin: 0 0 24px; border-radius: var(--radius); overflow: hidden; background: var(--lilac-tint); }
.gallery-item img { width: 100%; }
.case-cta { background: var(--lilac); border-radius: var(--radius); padding: 48px 40px; margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.case-cta .display { font-size: clamp(30px, 3.6vw, 48px); margin: 0; color: var(--white); max-width: 16em; }
.case-cta .btn-primary { background: var(--white); color: var(--lilac); }
.next-case { position: relative; display: block; padding: 72px 0 104px; text-decoration: none; color: var(--jet); border-top: 1px solid var(--line); margin-top: 80px; }
.next-case .label { display: block; }
.next-case .display { font-size: clamp(48px, 8vw, 120px); transition: color .3s ease; }
.next-case:hover .display { color: var(--lilac); }
.next-img { position: absolute; right: 0; top: 50%; width: min(34vw, 360px); border-radius: var(--radius); overflow: hidden; opacity: 0; transform: translateY(-40%) rotate(4deg) scale(.9); transition: opacity .4s ease, transform .6s var(--ease); pointer-events: none; }
.next-case:hover .next-img { opacity: 1; transform: translateY(-50%) rotate(-3deg) scale(1); }
@media (max-width: 700px) { .next-img { display: none; } }

/* ---------- Homepage services: stacking cards ---------- */
.stack-grid { display: grid; gap: 48px; }
@media (min-width: 1000px) {
  .stack-grid { grid-template-columns: .9fr 1.3fr; gap: 80px; align-items: start; }
  .stack-intro { position: sticky; top: 130px; }
}
.stack-intro .section-intro { margin: 24px 0 32px; }
.stack { list-style: none; margin: 0; padding: 0; }
.stack-card { position: sticky; top: calc(96px + var(--i) * 22px); margin-bottom: 28px; }
.stack-card > a {
  display: block; min-height: 340px; padding: 40px; border-radius: 26px; text-decoration: none;
  box-shadow: 0 -12px 40px -20px rgba(28, 40, 38, .35);
  transition: transform .5s var(--ease);
}
.stack-card > a:hover { transform: translateY(-6px); }
.stack-num { display: block; font: 600 13px/1 var(--font-body); letter-spacing: .14em; margin-bottom: 64px; opacity: .85; }
.stack-card h3 { font: 400 clamp(34px, 3.6vw, 50px)/1.05 var(--font-head); margin-bottom: 14px; }
.stack-card p { max-width: 32em; margin-bottom: 22px; }
.stack-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stack-card ul li { font-size: 14px; font-weight: 500; border: 1px solid currentColor; border-radius: 999px; padding: 6px 12px; }
.stack-1 > a { background: var(--lilac); color: var(--white); }
.stack-2 > a { background: var(--tea); color: var(--jet); }
.stack-3 > a { background: var(--white); color: var(--jet); border: 1px solid var(--line); }
.stack-4 > a { background: var(--sun); color: var(--jet); }
.stack-5 > a { background: var(--jet); color: var(--white); }
@media (max-width: 999px) { .stack-card { top: calc(84px + var(--i) * 14px); } .stack-card > a { min-height: 300px; padding: 30px; } .stack-num { margin-bottom: 40px; } }

/* ---------- Services page ---------- */
.service-intro { max-width: 44em; margin-bottom: 40px; }
.packages { display: grid; gap: 20px; }
@media (min-width: 900px) { .packages { grid-template-columns: repeat(3, 1fr); } }
.package { border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.package:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -30px rgba(28, 40, 38, .45); }
.package h3 { font: 400 38px/1.1 var(--font-head); margin-bottom: 8px; }
.package .pk-for { color: var(--muted); }
.package .ticks { flex: 1; }
.package .btn { align-self: flex-start; }
.package-featured { background: var(--lilac); color: var(--white); border: 0; }
.package-featured .pk-for { color: var(--white); }
.package-featured .btn-primary { background: var(--white); color: var(--lilac); }
.pk-time { font-size: 15px; }
.badge { display: inline-block; background: var(--tea); color: var(--jet) !important; font: 600 13px/1 var(--font-body) !important; padding: 8px 12px; border-radius: 999px; margin: 0 0 20px !important; }
.ticks { list-style: none; padding: 0; margin: 0 0 32px; }
.ticks li { padding: 10px 0 10px 30px; border-top: 1px solid var(--line); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 12px; height: 7px; border-left: 2.5px solid var(--lilac); border-bottom: 2.5px solid var(--lilac); transform: rotate(-45deg); }
.package-featured .ticks li { border-top-color: rgba(255, 255, 255, .25); }
.package-featured .ticks li::before { border-color: var(--tea); }
.service-list { display: grid; gap: 0; }
.service-block { display: grid; gap: 24px; padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.service-block:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .service-block { grid-template-columns: 1fr 1.6fr; gap: 56px; } }
.service-block > h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; }
.sb-what { font-size: 19px; }
.sb-cols { display: grid; gap: 8px 32px; margin-bottom: 24px; }
@media (min-width: 640px) { .sb-cols { grid-template-columns: 1fr 1fr; } }
.sb-cols h3 { font: 600 13px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--lilac); margin: 12px 0 4px; }
#brand-identity { scroll-margin-top: 100px; }

/* ---------- Niche ---------- */
.niche-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .niche-grid { grid-template-columns: .85fr 1.15fr; gap: 88px; } }
.niche-grid p { max-width: 32em; }
.niche-grid .parallax-frame { max-width: 460px; aspect-ratio: 4 / 5; }

/* Parallax image frames (motion.js sets --py while scrolling) */
.parallax-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--lilac-tint); }
.parallax-frame .parallax-img { width: 100%; height: 100%; object-fit: cover; }
.motion .parallax-frame .parallax-img { transform: translateY(var(--py, 0)) scale(1.16); will-change: transform; transition: clip-path 1.2s var(--ease-io); }

/* ---------- Process (pinned sideways scroll on desktop) ---------- */
.process { padding: 96px 0; }
.process-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 56px; }
.process-bar { display: none; }
.steps { list-style: none; padding: 0 var(--gutter); max-width: var(--wrap); margin: 0 auto; display: grid; gap: 20px; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.steps li { border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03); border-radius: 22px; padding: 30px; }
.steps .num { font: 400 72px/1 var(--font-head); color: var(--coral); }
.steps h3 { font: 400 32px/1.15 var(--font-head); margin: 28px 0 10px; color: var(--white); }
.steps p { color: var(--muted-dark) !important; margin: 0; }
.process.pinned { padding: 0; }
.process.pinned .process-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.process.pinned .process-bar { display: block; width: min(280px, 30vw); height: 2px; background: var(--line-dark); margin-bottom: 1.4em; }
.process.pinned .process-bar span { display: block; height: 100%; background: var(--tea); transform: scaleX(var(--progress, 0)); transform-origin: left; }
.process.pinned .steps {
  display: flex; gap: 24px; width: max-content; max-width: none; margin: 0;
  padding: 0 0 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  will-change: transform;
}
.process.pinned .steps li { width: 420px; min-height: 360px; padding: 40px; display: flex; flex-direction: column; }
.process.pinned .steps .num { font-size: 120px; }
.process.pinned .steps h3 { margin-top: auto; }

/* ---------- Founder / About ---------- */
.founder { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) { .founder { grid-template-columns: .8fr 1.2fr; gap: 88px; } }
.portrait-frame { max-width: 440px; aspect-ratio: 4 / 5; }
.portrait { border-radius: var(--radius); width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.portrait-frame .portrait { max-width: none; border-radius: 0; }
.founder .display { margin-bottom: 28px; }
.founder p { max-width: 34em; }
.dark-link { color: var(--jet) !important; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0 28px; }
.stats div { border-top: 2px solid var(--jet); padding-top: 14px; }
.stats dt { font: 400 clamp(38px, 4.4vw, 60px)/1 var(--font-head); color: var(--lilac); }
.stats dd { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.dark .stats div { border-top-color: rgba(255, 255, 255, .4); }
.dark .stats dt { color: var(--tea); }
.dark .stats dd { color: var(--muted-dark); }
.values { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 800px) { .values { grid-template-columns: repeat(3, 1fr); } }
.values article { background: var(--white); border-radius: var(--radius); padding: 36px; transition: transform .5s var(--ease); }
.values article:hover { transform: translateY(-6px); }
.values h3 { font: 400 32px/1.15 var(--font-head); margin-bottom: 10px; color: var(--lilac); }
.values p { margin: 0; color: var(--muted); }
.two-col { display: grid; gap: 56px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.4fr 1fr; gap: 88px; } }
.timeline { list-style: none; margin: 24px 0 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.tl-year { font-weight: 600; color: var(--lilac); }
.timeline h3 { font: 600 18px/1.35 var(--font-body); margin-bottom: 6px; }
.timeline p { margin: 0; color: var(--muted); }
@media (max-width: 520px) { .timeline li { grid-template-columns: 1fr; gap: 4px; } }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { background: var(--tea); color: var(--jet); border-radius: 999px; padding: 8px 14px; font-size: 15px; font-weight: 500; }
.page-hero.dark p:not(.lede):not(.eyebrow) { color: #DCE3E1; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 56px; align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.contact-ways { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 18px; }
.contact-ways .label { display: block; margin: 0 0 2px; font-size: 12px; }
.brief { background: var(--lilac-tint); color: var(--jet); border-radius: 24px; padding: 28px; }
@media (min-width: 700px) { .brief { padding: 40px; } }
.page-hero.dark .brief p.small { color: var(--muted); }
.page-hero.dark .brief p.form-status.ok { color: #1E6B3A; }
.page-hero.dark .brief p.form-status.err { color: #A3262A; }
.dark .brief a:not(.btn) { color: var(--lilac); }
.form-title { font: 400 34px/1.1 var(--font-head); margin-bottom: 20px; color: var(--jet); }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field-row { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { font-weight: 600; font-size: 15px; }
.field input, .field select, .field textarea {
  font: 400 16px/1.4 var(--font-body); color: var(--jet); background: var(--white);
  border: 1.5px solid #C9C4D6; border-radius: 12px; padding: 12px 14px; min-height: 50px; width: 100%;
  transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--lilac); outline-offset: 0; border-color: var(--lilac); }
.hp { position: absolute; left: -9999px; }
.form-status { margin: 16px 0 0; font-weight: 600; }
.form-status.ok { color: #1E6B3A; }
.form-status.err { color: #A3262A; }

/* ---------- Final CTA ---------- */
.cta-final-grid { display: grid; gap: 48px; align-items: end; }
@media (min-width: 900px) { .cta-final-grid { grid-template-columns: 1fr auto; gap: 64px; } }
.cta-final .lede { max-width: 30em; }
.round-cta {
  width: 190px; height: 190px; border-radius: 50%; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: var(--lilac); color: var(--white) !important; text-decoration: none;
  font: 600 18px/1.2 var(--font-body);
  transition: transform .4s var(--ease), background-color .3s ease, color .3s ease;
}
.round-cta svg { width: 28px; height: 28px; transition: transform .4s var(--ease); }
.round-cta:hover { background: var(--tea); color: var(--jet) !important; }
.round-cta:hover svg { transform: rotate(45deg); }
@media (max-width: 899px) { .round-cta { width: 150px; height: 150px; font-size: 16px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--jet); color: var(--muted-dark); padding: 88px 0 32px; border-top: 1px solid var(--line-dark); overflow: hidden; }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-big { font: 400 clamp(26px, 3vw, 38px)/1.2 var(--font-head); color: var(--white); }
.footer-big a { display: inline-block; margin-top: 8px; font-size: clamp(19px, 2.2vw, 30px); color: var(--tea) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.site-footer nav { display: flex; flex-direction: column; gap: 10px; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer nav a:hover { color: var(--tea); }
.footer-logo { margin-top: 72px; }
.footer-logo img { width: 100%; height: auto; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: 14px; }
.footer-base p { margin: 0; }

/* ---------- Sticky CTA (phones) ---------- */
.sticky-cta {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: 14px; z-index: 30;
  display: none; justify-content: center; align-items: center; min-height: 54px;
  background: var(--lilac); color: var(--white); border-radius: 999px;
  font: 600 16px/1 var(--font-body); text-decoration: none;
  border: 2px solid var(--white);
  box-shadow: 0 12px 30px -10px rgba(28, 40, 38, .55);
}
@media (max-width: 900px) {
  .sticky-cta.show { display: flex; }
  .site-footer { padding-bottom: 96px; }
  .corner { display: none; }
}

/* ---------- Custom cursor (mouse only, added by motion.js) ---------- */
.cursor { display: none; }
.has-cursor .cursor {
  display: block; position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  width: 0; height: 0;
}
.cursor::before {
  content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); mix-blend-mode: difference;
  transform: translate(-50%, -50%) scale(0); transition: transform .35s var(--ease), width .35s var(--ease), height .35s var(--ease), background-color .3s ease;
}
.cursor.on::before { transform: translate(-50%, -50%) scale(1); }
.cursor.link::before { width: 46px; height: 46px; }
.cursor.big::before { width: 96px; height: 96px; background: var(--lilac); mix-blend-mode: normal; }
.cursor.hide::before { transform: translate(-50%, -50%) scale(0); }
.cursor-label { position: absolute; transform: translate(-50%, -50%) scale(.5); opacity: 0; font: 600 14px/1 var(--font-body); color: var(--white); white-space: nowrap; transition: opacity .25s ease, transform .35s var(--ease); }
.cursor.big .cursor-label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.has-cursor [data-cursor] { cursor: none; }

/* ---------- Scroll animations (only with html.motion) ---------- */
/* Heading words slide up from behind a mask */
.motion [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.motion [data-split] .wi { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease) calc(var(--d, 0) * 55ms); }
.motion [data-split].is-in .wi { transform: none; }
/* The coral script word "writes" itself from left to right */
.motion [data-split] .script-word { clip-path: inset(-30% 100% -50% -10%); transition: clip-path 1.3s var(--ease-io) calc(var(--d, 0) * 55ms + 250ms); }
.motion [data-split].is-in .script-word { clip-path: inset(-30% -10% -50% -10%); }
/* Fade up */
.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion .hero [data-reveal] { transition-delay: .5s; }
/* Images uncovered from the bottom */
/* (the clip sits on the image, not the frame: a fully clipped element never counts as "in view") */
.motion [data-clip] > img { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-io), transform 1.6s var(--ease); }
.motion [data-clip].is-in > img { clip-path: inset(0 0 0 0); }
.motion .work-img img { transform: scale(1.25); }
.motion .work-img.is-in img { transform: scale(1); }
.motion .work-card:hover .work-img.is-in img { transform: scale(1.05); transition-duration: .9s; }

/* ---------- Page-to-page transition (browsers that support it) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .35s var(--ease) both; }
::view-transition-new(root) { animation: page-in .6s var(--ease) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-20px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(24px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}