/* =========================================================
   TIDZI.VFX, Design B "Cinematic" v2
   v2 = v1 + micro colour from design A (lavender-tinted greys, pastel tags, lime and peach details).
   Light page, full-bleed rounded media, giant geometric type, one pink accent (#F72585).
   Shape rule: media and panels 28px, inner tiles 20px, inputs 14px, every button a pill.
   ========================================================= */

:root {
  --bg: #fbfbfc;
  --ink: #101012;
  --ink-2: #2b2b30;
  --muted: #615e70;        /* body copy on --bg: 6.3:1, on --surface 5.6:1 */
  --quiet: #8a879a;        /* large text only (24px+): 3.5:1 */
  --hair: #e7e4ef;
  --surface: #f3f1fa;      /* lavender-tinted, from design A */
  --surface-2: #e8e5f3;
  /* micro colour from design A: tints and small details only, pink stays the one action colour */
  --peach: #ffdac2;
  --peach-tint: #fff2e9;
  --rose: #f0c4ca;
  --sage: #d5dbd7;
  --lime: #d0ff9a;
  --lime-tint: #effcdf;
  --accent: #f72585;       /* the one accent (brand pink); white text on it 3.8:1 */
  --accent-press: #d81570;
  --wa: #25d366;           /* WhatsApp green, only on the brief send button; ink text on it 9.5:1 */
  --wa-press: #1fbe5a;
  --night: #0d0d10;
  --on-media: #fafafa;
  --on-media-muted: rgba(250, 250, 250, .8);
  --glass: rgba(250, 250, 250, .16);
  --glass-strong: rgba(250, 250, 250, .26);
  --glass-line: rgba(250, 250, 250, .3);
  --scrim: rgba(10, 10, 14, .78);

  --f-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --pill: 999px;
  --pad: 16px;
  --gap: 16px;
  --sec: 152px;
  --max: 1440px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgba(16, 16, 24, .05), 0 14px 36px rgba(16, 16, 24, .08);

  /* z-index scale */
  --z-header: 50;
  --z-float: 40;
  --z-modal: 90;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.media :focus-visible, .media:focus-visible { outline-color: var(--on-media); }
.ph { display: inline-block; flex: none; width: 1em; height: 1em; font-size: 18px; fill: currentColor; vertical-align: -0.125em; }
.i-play { display: block; flex: none; width: .84em; height: 1em; fill: currentColor; }
html { -webkit-tap-highlight-color: transparent; }
body.menu-open { overflow: hidden; }
.skip { position: absolute; left: -999px; top: 8px; z-index: var(--z-modal); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--pill); }
.skip:focus { left: 16px; }
#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.sec { padding-top: var(--sec); }

/* emphasis: headings start quiet, the key phrase (from the original copy) is ink */
.h2, .statement, .contact__title { color: var(--quiet); text-wrap: balance; }
.h2 .g, .h2 .ser, .statement .g, .contact__title .g { color: var(--ink); }
.free__title { color: rgba(250, 250, 250, .62); }
.free__title .g { color: var(--on-media); }
p .hl, li .hl, blockquote .hl, dd .hl { color: var(--ink); font-weight: 600; }

/* ---------- type ---------- */
.h2 { font: 700 clamp(36px, 4.6vw, 64px)/1.03 var(--f-display); letter-spacing: -0.04em; max-width: 16ch; }
.h3 { font: 700 30px/1.1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: var(--pill); font: 600 15px/1 var(--f-body); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--primary { background: var(--accent); color: var(--on-media); }
.btn--primary:hover { background: var(--accent-press); transform: translateY(-1px); }
.btn--wa { background: var(--wa); color: var(--ink); }
.btn--wa:hover { background: var(--wa-press); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn--outline:hover { background: var(--accent); color: var(--on-media); }
.btn--glass { background: rgba(18, 18, 24, .42); color: var(--on-media); box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn--glass:hover { background: rgba(18, 18, 24, .58); }
.btn:active { transform: scale(.98); }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font: 600 15px/1.2 var(--f-body); cursor: pointer; }
.link:hover { color: var(--accent-press); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- loader: TIDZI logo while the hero footage loads, then it closes onto the hero card ---------- */
html { scrollbar-gutter: stable; }          /* the scroll lock below never shifts the layout */
.loader { display: none; }
.has-loader .loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--night);
  clip-path: inset(0px 0px 0px 0px round 0px);
}
.is-loading, .is-loading body { overflow: hidden; }
html.is-loading { background: var(--night); }   /* the reserved scrollbar gutter stays dark under the loader */
.loader__in { display: grid; justify-items: center; gap: 26px; transition: opacity .3s var(--ease), translate .4s var(--ease); }
.loader__logo { display: block; width: clamp(170px, 20vw, 280px); height: auto; overflow: visible; }
.loader__logo .lg { fill: var(--on-media); transform-box: fill-box; animation: lg-rise .95s cubic-bezier(.16, 1, .3, 1) both; }
.loader__logo .lg1 { animation-delay: .08s; }
.loader__logo .lg2 { animation-delay: .14s; }
.loader__logo .lg3 { animation-delay: .3s; }
.loader__logo .lg4 { animation-delay: .36s; }
.loader__logo .lg5 { animation-delay: .44s; }
.loader__logo .lg-play { fill: var(--accent); transform-box: fill-box; transform-origin: 35% 50%; animation: lg-pop .7s cubic-bezier(.34, 1.56, .64, 1) .2s both, lg-play 1.2s ease-in-out 1.1s infinite; }
@keyframes lg-rise { from { transform: translateY(112%); } }
@keyframes lg-pop { from { transform: scale(.2); opacity: 0; } }
@keyframes lg-play { 0%, 100% { transform: none; } 40% { transform: translateX(7%) scale(.9); } }
.loader__bar { display: block; width: 100%; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(250, 250, 250, .12); }
.loader__bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(.12); transform-origin: left center; transition: transform .45s var(--ease); }
/* exit: the logo steps back, the dark screen closes onto the hero card (inset set by app.js), then fades into the footage */
.loader--fly { opacity: 0; transition: clip-path .9s cubic-bezier(.77, 0, .18, 1), opacity .5s ease .72s; }
.loader--fade { opacity: 0; transition: opacity .45s ease; }
.loader--fly .loader__in, .loader--fade .loader__in { opacity: 0; translate: 0 -10px; }
@media (prefers-reduced-motion: reduce) {
  .loader__logo .lg, .loader__logo .lg-play { animation: none; }
  .loader__bar i, .loader__in { transition: none; }
}

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: var(--z-header); background: rgba(251, 251, 252, .97); transition: box-shadow .3s var(--ease), translate .35s var(--ease); }
.hdr--hide { translate: 0 -100%; }
.hdr.is-scrolled { box-shadow: 0 1px 0 var(--hair); }
.hdr__in { max-width: var(--max); margin: 0 auto; padding: 0 calc(var(--pad) + 8px); height: 68px; display: flex; align-items: center; gap: 32px; }
/* wordmark: Sora for the logo only, the D is a play button */
.brand { display: inline-flex; align-items: baseline; font: 800 21px/1 "Sora", var(--f-display); letter-spacing: -0.035em; color: var(--ink); white-space: nowrap; }
.brand__play { width: .6em; height: .74em; margin: 0 .035em 0 .02em; fill: var(--accent); }
.brand__dot { color: var(--ink); }
a.brand:hover .brand__play { animation: brand-play .5s var(--ease); }
@keyframes brand-play { 40% { transform: translateX(.08em) scale(.92); } }
@media (prefers-reduced-motion: reduce) { a.brand:hover .brand__play { animation: none; } }
.nav { display: flex; gap: 2px; }
.nav a { padding: 9px 13px; border-radius: var(--pill); font: 500 14px/1 var(--f-body); color: var(--ink-2); transition: background-color .2s, color .2s; }
.nav a:hover, .nav a.is-on { background: var(--surface); color: var(--ink); }
.hdr__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; padding: 3px; border-radius: var(--pill); background: var(--surface); }
.lang button { height: 32px; min-width: 40px; border: 0; border-radius: var(--pill); background: transparent; font: 600 12px/1 var(--f-body); letter-spacing: .02em; color: var(--muted); cursor: pointer; transition: background-color .2s, color .2s; }
.lang button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 16, 24, .1); }
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface); place-items: center; cursor: pointer; }
.burger .ph { font-size: 22px; }
.mnav { display: none; }

/* ---------- media base ---------- */
.media { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); clip-path: inset(0 round var(--r-lg)); background: var(--night); color: var(--on-media); }
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.mosaic { position: absolute; inset: 0; z-index: -2; }
.mosaic canvas, .hero__mosaic canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* ---------- hero ---------- */
.hero-wrap { padding-top: 4px; }
.hero {
  --hero-h: clamp(560px, 88dvh, 880px); --pt: 56px; --pb: 44px; --act: 56px; --act-gap: 40px;
  height: var(--hero-h); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto;
  column-gap: 56px; padding: var(--pt) 56px var(--pb);
}
.hero__mosaic { position: absolute; inset: 0; z-index: -3; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 14, .45) 0%, rgba(10, 10, 14, 0) 42%, rgba(10, 10, 14, 0) 62%, rgba(10, 10, 14, .5) 100%), linear-gradient(90deg, rgba(10, 10, 14, .42), rgba(10, 10, 14, 0) 62%); }
.hero__title { grid-area: 1 / 1; position: relative; z-index: 2; font: 800 clamp(64px, 10.6vw, 168px)/.9 var(--f-display); letter-spacing: -0.055em; max-width: 9.5ch; text-wrap: balance; }
.hero__title .dot, .contact__title .dot { margin-left: -0.07em; }
.hero__sub { grid-area: 2 / 1; position: relative; z-index: 2; max-width: 22ch; margin-top: 28px; font: 600 clamp(20px, 2.2vw, 32px)/1.2 var(--f-display); letter-spacing: -0.025em; color: var(--on-media-muted); }
.hero__sub .ser, .hero__sub .g { color: var(--on-media); }
.hero__ctas { grid-area: 4 / 2; justify-self: center; position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* iPhone 15 Pro mockup: titanium rim, black bezel, Dynamic Island, side keys.
   Every part is sized in cqw/cqh of the phone, so it stays true to the device at any height. */
.phone {
  grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: center; position: relative; z-index: 1;
  height: min(660px, calc(var(--hero-h) - var(--pt) - var(--pb) - var(--act) - var(--act-gap)));
  aspect-ratio: 70.6 / 146.6; margin-bottom: var(--act-gap); container-type: size; rotate: 6deg; cursor: pointer;
}
.phone__body {
  position: absolute; inset: 0; padding: 1.3cqw; border-radius: 17.5cqw;
  background: linear-gradient(140deg, #d9d5ce 0%, #8f8b84 14%, #b8b4ac 32%, #77736d 58%, #a9a59d 80%, #e2ded7 100%);
  box-shadow: inset 0 0 0 .35cqw rgba(255, 255, 255, .45), inset 0 0 .4cqw .7cqw rgba(0, 0, 0, .28), 0 4cqw 9cqw rgba(6, 6, 10, .5), 0 1.4cqw 2.4cqw rgba(6, 6, 10, .35);
}
.phone__screen { position: relative; width: 100%; height: 100%; border: 3cqw solid #050506; border-radius: 16.2cqw; overflow: hidden; clip-path: inset(0 round 16.2cqw); background: #050506; }
.phone__screen img { width: 100%; height: 100%; object-fit: cover; border-radius: 13.2cqw; }
/* faint glass reflection across the display */
.phone__screen::after { content: ""; position: absolute; inset: 0; border-radius: 13.2cqw; background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 34%, rgba(255, 255, 255, 0) 35%); pointer-events: none; }
.phone__island { position: absolute; z-index: 2; top: 2.6cqw; left: 0; right: 0; margin: 0 auto; width: 29cqw; height: 8.4cqw; border-radius: 99px; background: #000; }
.phone__key { position: absolute; z-index: -1; width: 1.6cqw; border-radius: 1cqw; background: linear-gradient(90deg, #6f6b65, #c9c5bd 45%, #85817a); }
.phone__key--action { left: -.9cqw; top: 16.5cqh; height: 4.6cqh; }
.phone__key--up { left: -.9cqw; top: 24.5cqh; height: 8.6cqh; }
.phone__key--down { left: -.9cqw; top: 35.2cqh; height: 8.6cqh; }
.phone__key--side { right: -.9cqw; top: 27cqh; height: 13.4cqh; }
.phone__play { position: absolute; z-index: 2; inset: 0; margin: auto; display: grid; place-items: center; width: clamp(44px, 24cqw, 76px); aspect-ratio: 1; border-radius: 50%; color: var(--on-media); background: rgba(18, 18, 24, .42); box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 rgba(255, 255, 255, .16); transition: scale .4s var(--ease), background-color .2s; }
.phone__play .i-play { width: 32%; height: 38%; margin-left: 7%; }
@media (hover: hover) {
  .phone:hover .phone__play { scale: 1.07; background: rgba(18, 18, 24, .58); }
}
.phone:active .phone__play { scale: .96; }
.phone:focus-visible { outline: none; }
.phone:focus-visible .phone__body { outline: 3px solid var(--accent); outline-offset: 4px; }

/* ---------- intro (copy that used to crowd the hero) ---------- */
.intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; padding-top: 72px; padding-bottom: 72px; }
.intro__bio { font: 600 clamp(24px, 2.4vw, 34px)/1.25 var(--f-display); letter-spacing: -0.025em; color: var(--ink); max-width: 30ch; text-wrap: pretty; }
.intro__side { display: flex; flex-direction: column; gap: 22px; }
.intro__stat { font-size: 17px; line-height: 1.5; color: var(--muted); }
.intro__trust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.intro__trust li { display: flex; align-items: center; gap: 10px; font: 500 15px/1.3 var(--f-body); color: var(--ink-2); }
.intro__trust .ph { color: var(--accent); font-size: 17px; }

/* ---------- marquee (the page's only one: many services, none needs attention alone) ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 64px; width: max-content; padding: 24px 32px; animation: marquee 55s linear infinite; }
.marquee:hover .marquee__track, .marquee.is-off .marquee__track { animation-play-state: paused; }
.marquee__track span { font: 600 24px/1 var(--f-display); letter-spacing: -0.025em; color: var(--ink); white-space: nowrap; }
.marquee__track span:nth-child(even) { color: var(--quiet); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- raw -> edited ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 56px; }
.card-c { aspect-ratio: 16 / 11; display: flex; align-items: flex-end; justify-content: center; text-align: center; }
.card-c::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 14, 0) 45%, var(--scrim) 100%); }
.card-c__txt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 32px 44px; }
.card-c__txt h2 { font: 700 clamp(28px, 3vw, 44px)/1.05 var(--f-display); letter-spacing: -0.035em; }
.card-c__txt p { font-size: 16px; color: var(--on-media-muted); }
.flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; padding-top: 32px; font: 600 clamp(18px, 1.6vw, 22px)/1.2 var(--f-display); letter-spacing: -0.02em; color: var(--muted); }
.flow .ph { color: var(--quiet); font-size: 20px; }
.flow b { color: var(--ink); font-weight: 700; }
.flow b, .quote .hl, .pull .hl { background: linear-gradient(180deg, transparent 60%, var(--lime) 60%, var(--lime) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em; margin: 0 -.08em; }

/* ---------- section head: stacked, never split ---------- */
.head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 64px; }
.head > p { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.head--center { align-items: center; text-align: center; }
.head--center .h2 { max-width: 18ch; }

/* ---------- work: staggered reels, unequal widths ---------- */
.work { display: grid; grid-template-columns: 1.22fr 1fr 1fr; gap: 24px var(--gap); align-items: start; }
.work__item { display: flex; flex-direction: column; gap: 20px; }
.work__item:nth-child(2) { margin-top: 128px; }
.work__item:nth-child(3) { margin-top: 48px; }
.vcard { aspect-ratio: 9 / 16; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 0 24px 36px; }
.vcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 14, 0) 52%, var(--scrim) 100%); }
.vcard img.cover { transition: transform 1s var(--ease); }
.vcard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; transition: opacity .5s var(--ease); }
.vcard.playing video { opacity: 1; }
.vcard:hover img.cover { transform: scale(1.035); }
.vcard__cue { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.vcard__cue span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 18, 24, .42); box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 rgba(255, 255, 255, .16); transition: transform .4s var(--ease), opacity .3s; }
.vcard__cue .i-play { width: 19px; height: 23px; margin-left: 3px; }
.vcard:hover .vcard__cue span { transform: scale(1.08); }
.vcard.playing .vcard__cue span { opacity: 0; }
.vcard h3 { font: 700 clamp(24px, 2.2vw, 32px)/1.05 var(--f-display); letter-spacing: -0.03em; }
.vcard .sub { margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--on-media-muted); }
.work__meta { padding: 0 6px; display: flex; flex-direction: column; gap: 10px; }
.work__meta p { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--pill); background: var(--peach); font: 500 13px/1 var(--f-body); color: var(--ink); }
.tags li:nth-child(2) { background: var(--rose); }
.tags li:nth-child(3) { background: var(--sage); }
.work__dots { display: none; }
.hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; font-size: 14px; color: var(--muted); }
.hint .i-play { width: 11px; height: 13px; color: var(--accent); }

/* ---------- process: timeline diagram (real copy, no fake app chrome) ---------- */
.tl { position: relative; overflow: hidden; padding: 36px 36px 28px; border-radius: var(--r-lg); clip-path: inset(0 round var(--r-lg)); background: var(--surface); --lbl: 190px; }
.tl__track { position: relative; }
.tl__row { display: grid; grid-template-columns: var(--lbl) 1fr; gap: 20px; align-items: center; }
.tl__row + .tl__row { margin-top: 10px; }
.tl__lbl { display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--f-body); color: var(--muted); }
.tl__lbl::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.tl__row:nth-child(2) .tl__lbl::before { background: var(--ink-2); }
.tl__row:nth-child(3) .tl__lbl::before { background: var(--lime); box-shadow: inset 0 0 0 1px rgba(16, 16, 18, .15); }
.tl__lane { display: flex; gap: 6px; height: 74px; }
.clip { flex: var(--w, 1); min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-sm); color: var(--on-media); }
.clip b { font: 600 15px/1.2 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip span { font: 400 13px/1.2 var(--f-body); color: rgba(250, 250, 250, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip--a { background: var(--accent); }
.clip--v { background: var(--ink-2); }
.clip--gap { background: transparent; box-shadow: inset 0 0 0 1px var(--surface-2); }
.clip--audio { background: var(--lime-tint); padding: 10px 12px; justify-content: center; }
.clip--audio svg { width: 100%; height: 50px; display: block; }
.clip--audio rect { fill: var(--ink-2); opacity: .45; }
.tl__play { position: absolute; top: -12px; bottom: -10px; left: calc(var(--lbl) + 20px); right: 0; pointer-events: none; transform: translateX(38%); }
.tl__play i { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ink); }
.tl__play i::before { content: ""; position: absolute; top: -2px; left: -5px; width: 12px; height: 12px; border-radius: 3px; background: var(--ink); }
.tl__end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 22px; font: 600 15px/1 var(--f-body); color: var(--ink); }
.tl__end .ph { color: var(--accent); }
/* without GSAP, modern browsers still get the playhead via CSS scroll-driven animation */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.gsap) .tl__play { animation: sweep linear both; animation-timeline: view(); animation-range: entry 40% cover 62%; }
  }
}
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* ---------- services: editorial rows, dividers between rows only ---------- */
.feat { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; padding: 40px 24px; margin: 0 -24px; border-radius: var(--r-md); transition: background-color .35s var(--ease); }
.feat:hover { background: var(--surface); }
.feat:hover + .feat, .feat + .feat:hover { border-top-color: transparent; }
.feat + .feat { border-top: 1px solid var(--hair); }
.feat:first-child { padding-top: 8px; }
.feat h3 { font: 700 clamp(24px, 2.4vw, 34px)/1.1 var(--f-display); letter-spacing: -0.035em; max-width: 14ch; }
.feat p { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 54ch; }
.feat__m { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: 500 15px/1.3 var(--f-body); color: var(--ink); }
.feat__m .ph { color: var(--accent); }

/* ---------- results ---------- */
.statement { font: 600 clamp(30px, 3.8vw, 54px)/1.12 var(--f-display); letter-spacing: -0.035em; max-width: 26ch; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; border-top: 1px solid var(--hair); }
.stat { padding: 32px 28px 8px 0; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--hair); }
.stat b { display: block; font: 800 clamp(44px, 4.6vw, 72px)/1 var(--f-display); letter-spacing: -0.045em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat p { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; margin-top: 64px; align-items: start; }
.pull { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; padding-top: 8px; }
.pull blockquote { font: 600 clamp(26px, 2.6vw, 38px)/1.2 var(--f-display); letter-spacing: -0.03em; color: var(--quiet); }
.pull blockquote .hl { color: var(--ink); font-weight: 600; }
.quote { display: flex; flex-direction: column; gap: 22px; padding: 40px; border-radius: var(--r-lg); background: var(--peach-tint); }
.quote blockquote { font: 500 20px/1.55 var(--f-body); color: var(--ink); }
.quote__more summary { list-style: none; cursor: pointer; display: inline-flex; color: var(--accent); font: 600 15px/1.2 var(--f-body); }
.quote__more summary::-webkit-details-marker { display: none; }
.quote__more summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.quote__more[open] summary { margin-bottom: 14px; }
.quote__more p { font-size: 16px; line-height: 1.65; color: var(--muted); }
.quote__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.who { display: flex; align-items: center; gap: 12px; }
.who b { display: block; font: 700 16px/1.3 var(--f-display); color: var(--ink); }
.who > span > span { display: block; font-size: 14px; color: var(--muted); }
.av { width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--rose); color: var(--ink); font: 700 14px/1 var(--f-display); letter-spacing: .02em; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.about__photo { position: sticky; top: 92px; aspect-ratio: 4 / 5; background: radial-gradient(90% 70% at 70% 15%, #2a2c35 0%, var(--night) 70%); }
.about__photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 14, 0) 52%, var(--scrim) 100%); }
.about__img { object-position: 50% 28%; }
.about__name { position: absolute; left: 36px; right: 36px; bottom: 36px; display: flex; flex-direction: column; gap: 14px; }
.giant { font: 800 clamp(80px, 10vw, 156px)/.85 var(--f-display); letter-spacing: -0.06em; }
.about__role { font-size: 16px; line-height: 1.4; color: var(--on-media-muted); }
.about__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 8px; }
.about__txt > p:not(.lead) { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 62ch; }
.ticks { display: flex; flex-direction: column; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 62ch; }
.ticks .ph { margin-top: 3px; color: var(--accent); }
.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--hair); }
.minis div { display: flex; flex-direction: column; gap: 8px; }
.minis b { font: 800 32px/1 var(--f-display); letter-spacing: -0.04em; }
.minis span { font-size: 14px; color: var(--muted); }
.about__where { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }

/* ---------- free edit ---------- */
.free { display: flex; align-items: center; padding: 88px 64px; min-height: 600px; }
.free__bg { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; }
.free::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 14, .72), rgba(10, 10, 14, .2)); }
.free__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; max-width: 760px; }
.free__title { font: 800 clamp(48px, 6.6vw, 104px)/.94 var(--f-display); letter-spacing: -0.05em; max-width: 11ch; }
.free__txt > p { max-width: 52ch; font-size: 18px; line-height: 1.6; color: var(--on-media-muted); }
.free__list { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 36px; }
.free__list li { display: flex; align-items: center; gap: 10px; font: 500 16px/1.3 var(--f-body); color: var(--on-media); }
.free__list .ph { color: var(--on-media-muted); }
.free__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ---------- brief ---------- */
.brief { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
.step { padding: 28px 0; }
.step + .step { border-top: 1px solid var(--hair); }
.step:first-child { padding-top: 0; }
.step legend { float: left; width: 100%; margin-bottom: 18px; font: 700 20px/1.2 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.opts { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.opt { height: 44px; padding: 0 18px; border: 0; border-radius: var(--pill); background: var(--bg); box-shadow: inset 0 0 0 1.5px #c4c4cb; font: 500 15px/1 var(--f-body); color: var(--ink); cursor: pointer; transition: box-shadow .2s, background-color .2s, color .2s, transform .2s var(--ease); }
.opt:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.opt:active { transform: scale(.97); }
.opt.on { background: var(--lime); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font: 600 14px/1.2 var(--f-body); color: var(--ink); }
.field--wide { grid-column: 1 / -1; }
.input { width: 100%; padding: 14px 16px; border: 1.5px solid #c4c4cb; border-radius: var(--r-sm); background: var(--bg); font: 400 16px/1.4 var(--f-body); color: var(--ink); resize: vertical; transition: border-color .2s, box-shadow .2s; }
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(247, 37, 133, .22); }
.msg { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--r-lg); background: var(--surface); }
.msg__head { font: 600 15px/1.2 var(--f-body); color: var(--muted); }
.msg__out { margin: 0; min-height: 200px; padding: 20px 22px; border-radius: var(--r-md); background: var(--bg); font: 400 16px/1.6 var(--f-body); color: var(--ink); white-space: pre-wrap; word-break: break-word; box-shadow: var(--shadow); }
.msg__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.msg__actions .btn--wa { grid-column: 1 / -1; height: 52px; }
.msg__hint { font-size: 13px; line-height: 1.5; color: var(--muted); }
.msg__hint.ok { color: var(--ink); font-weight: 600; }

/* ---------- booking ---------- */
.book { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--gap); align-items: stretch; }
.book__info { display: flex; flex-direction: column; gap: 26px; padding: 44px; border-radius: var(--r-lg); background: var(--surface); }
.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.facts div { display: flex; align-items: center; gap: 8px; }
.facts dt { display: grid; color: var(--accent); }
.facts dd { font: 600 15px/1 var(--f-body); color: var(--ink); }
.note { display: flex; gap: 12px; padding: 18px; border-radius: var(--r-md); background: var(--bg); font-size: 15px; line-height: 1.55; color: var(--muted); }
.note .ph { margin-top: 2px; color: var(--accent); }
.book__cal { position: relative; min-height: 700px; border-radius: var(--r-lg); overflow: hidden; clip-path: inset(0 round var(--r-lg)); background: var(--surface); }
.book__cal iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.book__direct { position: absolute; right: 18px; bottom: 16px; z-index: 2; padding: 10px 14px; border-radius: var(--pill); background: var(--bg); box-shadow: var(--shadow); }

/* ---------- faq: all answers visible, two columns ---------- */
@media (min-width: 1101px) {
  .faq-sec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .faq-sec .head { position: sticky; top: 110px; margin-bottom: 0; }
  .faq-sec .faq { max-width: none; }
}
/* accordion: one question open at a time, answer slides open (grid-rows 0fr -> 1fr) */
.faq { max-width: 920px; border-top: 1px solid var(--hair); }
.qa { border-bottom: 1px solid var(--hair); }
.qa h3 { font: inherit; }
.qa__q { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; padding: 26px 4px; border: 0; background: none; text-align: left; cursor: pointer; font: 700 21px/1.3 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.qa__q:focus-visible { outline-offset: -3px; border-radius: var(--r-sm); }
.qa__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--ink); transition: background-color .3s var(--ease), color .3s var(--ease), rotate .4s var(--ease); }
.qa__icon .ph { font-size: 18px; }
.qa.open .qa__icon { rotate: 45deg; background: var(--accent); color: var(--on-media); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.qa__a > div { overflow: hidden; }
.qa.open .qa__a { grid-template-rows: 1fr; }
.qa__a p { padding: 0 64px 26px 4px; max-width: 64ch; font-size: 16.5px; line-height: 1.65; color: var(--muted); opacity: 0; translate: 0 -6px; transition: opacity .3s var(--ease), translate .4s var(--ease); }
.qa.open .qa__a p { opacity: 1; translate: 0 0; transition-delay: .08s; }
@media (hover: hover) {
  .qa__q:hover .qa__icon { background: var(--surface-2); }
  .qa.open .qa__q:hover .qa__icon { background: var(--accent-press); }
}

/* ---------- contact ---------- */
.contact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding-bottom: 40px; }
.contact__title { font: 800 clamp(48px, 8vw, 128px)/.93 var(--f-display); letter-spacing: -0.055em; max-width: 13ch; }
.contact .lead { max-width: 52ch; color: var(--muted); }
.email { margin-top: 16px; display: inline-flex; align-items: center; gap: 16px; height: 76px; padding: 0 12px 0 32px; border: 0; border-radius: var(--pill); background: var(--surface); font: 700 clamp(20px, 2.4vw, 30px)/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); cursor: pointer; transition: background-color .2s, transform .25s var(--ease); }
.email:hover { background: var(--surface-2); }
.email:active { transform: scale(.99); }
.email__hint { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px; border-radius: var(--pill); background: var(--bg); font: 500 14px/1 var(--f-body); letter-spacing: 0; color: var(--muted); }
.email.copied .email__hint { color: var(--ink); }
.contact__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- footer ---------- */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 32px; padding-bottom: 40px; margin-top: 96px; border-top: 1px solid var(--hair); }
.foot__links { display: flex; gap: 24px; }
.foot__links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); transition: color .2s; }
.foot__links a:hover { color: var(--accent); }
.foot__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; color: var(--muted); text-align: right; }
.foot__credit { display: inline-flex; align-items: center; gap: 8px; }
/* husejn.dev wordmark (vector, its own colours), the whole logo is the link */
.foot__husejn { display: inline-block; border-radius: 4px; transition: opacity .2s var(--ease), translate .25s var(--ease); }
.foot__husejn img { display: block; width: 82px; height: auto; }
@media (hover: hover) { .foot__husejn:hover { opacity: .72; translate: 0 -1px; } }
.foot__husejn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- floating WhatsApp, mobile sticky bar, lightbox ---------- */
.fab { position: fixed; right: 22px; bottom: 22px; z-index: var(--z-float); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); box-shadow: 0 12px 30px rgba(16, 16, 24, .25); transition: transform .3s var(--ease); }
.fab { translate: 0 calc(-1 * var(--fab-lift, 0px)); transition: transform .3s var(--ease), translate .35s var(--ease), opacity .3s var(--ease), scale .35s var(--ease), visibility 0s; }
.fab--away { opacity: 0; scale: .6; visibility: hidden; pointer-events: none; transition: transform .3s var(--ease), translate .35s var(--ease), opacity .25s var(--ease), scale .3s var(--ease), visibility 0s linear .3s; }
.fab:hover { transform: scale(1.06); }
.fab .ph { font-size: 26px; }
.sbar { display: none; }
.lb { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 24px; background: rgba(10, 10, 14, .92); }
.lb[hidden] { display: none; }
.lb__box { width: min(460px, 100%); display: flex; flex-direction: column; gap: 14px; }
.lb__head { display: flex; justify-content: space-between; align-items: center; color: var(--on-media); }
.lb__head b { display: block; font: 700 20px/1.2 var(--f-display); letter-spacing: -0.02em; }
.lb__head span { font-size: 14px; color: var(--on-media-muted); }
.lb__x { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--glass); color: var(--on-media); cursor: pointer; }
.lb__frame { aspect-ratio: 9 / 16; max-height: 78dvh; border-radius: var(--r-lg); overflow: hidden; background: var(--night); }
.lb__frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- motion layer hooks (motion.js) ---------- */
.js-motion .hero__title, .js-motion .hero__sub, .js-motion .hero__ctas, .js-motion .phone { opacity: 0; }
.mask { overflow: hidden; padding: 0 .05em .14em; margin: 0 -.05em -.14em; }
/* with GSAP the playhead is a 2px line moved in px, so it never widens the phone scroller */
html.gsap .tl__play { transform: none; right: auto; width: 2px; }
/* clips start dimmed and light up as the playhead passes (equal specificity, .lit comes last and wins) */
.tl.is-playing .clip--a, .tl.is-playing .clip--v { opacity: .3; transition: opacity .45s var(--ease); }
.tl.is-playing .clip.lit { opacity: 1; }
.clip--audio { position: relative; }
.clip--audio { overflow: hidden; }
.wave-mask { position: absolute; left: 12px; right: 12px; top: 50%; height: 50px; translate: 0 -50%; overflow: hidden; pointer-events: none; will-change: transform; }
.wave-mask .wave-played { display: block; width: 100%; height: 100%; will-change: transform; }
.tl.is-playing .clip--audio > svg:first-child rect { opacity: .2; }
.tl.is-playing .wave-played rect { opacity: .9; }

/* ---------- reveal on scroll without GSAP (IntersectionObserver adds .in) ---------- */
.rv { opacity: 0; translate: 0 24px; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.rv.in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .qa__a, .qa__a p, .qa__icon { transition: none; }
  .rv { opacity: 1; translate: none; transition: none; }
  .marquee__track { animation: none; }
  .btn, .vcard img.cover, .phone__play { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .btn--glass, .phone__play, .vcard__cue span { background: rgba(10, 10, 14, .7); }
  .hdr { background: var(--bg); }
}

/* ---------- touch screens: no sticky hover states ---------- */
@media (hover: none) {
  .feat:hover { background: transparent; }
  .btn--primary:hover { background: var(--accent); transform: none; }
  .btn--wa:hover { background: var(--wa); transform: none; }
  .btn--outline:hover { background: transparent; color: var(--accent); }
  .btn--glass:hover { background: var(--glass); }
  .opt:hover { box-shadow: inset 0 0 0 1.5px #c4c4cb; }
  .opt.on:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .vcard:hover img.cover { transform: none; }
  .vcard:active { transform: scale(.985); }
  .hint { display: none; }            /* "hover a video" means nothing on a phone; tapping opens it */
}

/* ---------- tablet (721-1100) ---------- */
@media (max-width: 1100px) {
  :root { --sec: 120px; --pad: 20px; }
  .nav, .hdr__cta { display: none; }
  .burger { display: inline-grid; }
  /* full-screen menu sheet under the header */
  .mnav { position: fixed; inset: 68px 0 0 0; z-index: calc(var(--z-header) - 1); display: flex; flex-direction: column; padding: 8px 24px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; opacity: 0; visibility: hidden; translate: 0 -8px; transition: opacity .3s var(--ease), translate .3s var(--ease), visibility 0s linear .3s; }
  .mnav.open { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .3s var(--ease), translate .3s var(--ease); }
  .mnav a:not(.btn) { padding: 18px 2px; font: 700 30px/1.1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); border-bottom: 1px solid var(--hair); }
  .mnav .btn { margin-top: 28px; height: 56px; font-size: 16px; flex: none; }
  .menu-open .hdr { box-shadow: 0 1px 0 var(--hair); }
  .hero { --pt: 44px; --pb: 36px; column-gap: 32px; padding: var(--pt) 36px var(--pb); }
  .hero__ctas { grid-column: 1 / -1; justify-self: end; }
  .phone { height: min(560px, calc(var(--hero-h) - var(--pt) - var(--pb) - var(--act) - var(--act-gap)), calc(34vw * 2.077)); }
  .intro { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .work { grid-template-columns: 1.15fr 1fr 1fr; gap: 20px 12px; }
  .work__item:nth-child(2) { margin-top: 88px; }
  .work__item:nth-child(3) { margin-top: 32px; }
  .vcard { padding: 0 16px 26px; }
  .about, .brief, .book, .quotes { grid-template-columns: 1fr; gap: 48px; }
  .msg { position: static; }
  /* not sticky any more, but it must stay the positioning box for the photo and the name laid over it */
  .about__photo { position: relative; top: auto; }
  .about__photo { aspect-ratio: 4 / 3; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .tl { --lbl: 130px; }
  .free { padding: 64px 44px; }
}

/* ---------- phones (<=720) ---------- */
@media (max-width: 720px) {
  :root { --pad: 20px; --gap: 10px; --sec: 76px; }
  html { scroll-padding-top: 72px; }
  .head--center { align-items: flex-start; text-align: left; }
  body { font-size: 15.5px; }

  /* header */
  .hdr__in { height: 60px; gap: 10px; padding: 0 12px 0 20px; }
  .mnav { inset: 60px 0 0 0; padding: 4px 20px calc(20px + env(safe-area-inset-bottom)); }
  .mnav a:not(.btn) { font-size: 28px; padding: 16px 2px; }
  .lang { padding: 3px; }
  .lang button { height: 38px; min-width: 44px; font-size: 13px; }

  /* media blocks run nearly edge to edge, text keeps a 20px gutter */
  .hero-wrap, .duo { padding-left: 10px; padding-right: 10px; }
  #free { padding-left: 10px; padding-right: 10px; }

  /* hero fills the first screen: headline on top, iPhone on the right beside the line, actions stacked at the bottom.
     The phone takes whatever height is left between the line and the actions, so nothing overlaps in either language. */
  .hero { --pb: 30px; height: max(560px, calc(100svh - 84px)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 26px 20px var(--pb); border-radius: 24px; clip-path: inset(0 round 24px); }
  .hero__title { font-size: clamp(48px, 14.6vw, 70px); max-width: none; }
  .hero__sub { font-size: 18px; max-width: 54%; margin-top: 16px; }
  .hero__shade { background: linear-gradient(180deg, rgba(10, 10, 14, .55) 0%, rgba(10, 10, 14, .2) 40%, rgba(10, 10, 14, .1) 60%, rgba(10, 10, 14, .62) 100%); }
  .phone { grid-column: 1; grid-row: 2 / 4; justify-self: end; align-self: center; height: calc(100% - 40px); max-height: min(400px, calc((100vw - 60px) * .87)); margin: 16px -2px 24px 0; rotate: 5deg; }
  .hero__ctas { grid-area: 4 / 1; justify-self: stretch; flex-direction: column; gap: 10px; }
  .hero__ctas .btn { width: 100%; height: 54px; font-size: 15.5px; }

  /* intro */
  .intro { gap: 22px; padding-top: 44px; padding-bottom: 40px; }
  .intro__bio { font-size: 21px; line-height: 1.3; }
  .intro__stat { font-size: 15.5px; }
  .intro__trust { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .intro__trust li { font-size: 14px; gap: 8px; align-items: flex-start; }
  .intro__trust .ph { margin-top: 1px; }
  .marquee__track { gap: 36px; padding: 16px 20px; }
  .marquee__track span { font-size: 18px; }

  /* raw / edited side by side, so the comparison reads at a glance */
  .duo { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; }
  .card-c { aspect-ratio: 3 / 4; border-radius: 20px; clip-path: inset(0 round 20px); }
  .card-c__txt { gap: 6px; padding: 0 12px 16px; }
  .card-c__txt h2 { font-size: 19px; letter-spacing: -0.025em; }
  .card-c__txt p { font-size: 12.5px; line-height: 1.35; }
  .flow { gap: 6px 10px; padding-top: 22px; font-size: 16px; }
  .flow .ph { font-size: 15px; }

  /* section heads */
  .h2 { font-size: clamp(32px, 8.8vw, 40px); }
  .head { gap: 14px; margin-bottom: 32px; }
  .head > p { font-size: 16px; }

  /* work: swipeable reels instead of three full-height cards */
  .work { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 6px; scrollbar-width: none; }
  .work::-webkit-scrollbar { display: none; }
  .work__item { flex: 0 0 min(78%, 320px); scroll-snap-align: start; gap: 16px; }
  .work__item:nth-child(n) { margin-top: 0; }
  .vcard { padding: 0 16px 24px; border-radius: 20px; clip-path: inset(0 round 20px); }
  .vcard h3 { font-size: 23px; }
  .vcard .sub { font-size: 13.5px; }
  .work__meta { padding: 0 2px; }
  .work__meta p { font-size: 14.5px; }
  .work__dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
  .work__dots i { width: 16px; height: 4px; border-radius: 2px; background: var(--surface-2); transition: width .35s var(--ease), background-color .35s var(--ease); }
  .work__dots i.on { width: 28px; background: var(--accent); }

  /* timeline: the track pans with the playhead (motion.js) */
  .tl { padding: 20px 16px 18px; overflow-x: auto; --lbl: 92px; scrollbar-width: none; border-radius: 22px; clip-path: inset(0 round 22px); }
  .tl::-webkit-scrollbar { display: none; }
  .tl__track, .tl__end { min-width: 760px; }
  .tl__lane { height: 66px; }
  html.gsap .tl { overflow-x: hidden; }

  /* services */
  .feat { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; margin: 0; border-radius: 0; }
  .feat:first-child { padding-top: 0; }
  .feat h3 { font-size: 23px; max-width: none; }
  .feat p { font-size: 15.5px; }
  .feat__m { margin-top: 12px; font-size: 14px; }

  /* results */
  .statement { font-size: clamp(26px, 7.4vw, 32px); }
  .stats { grid-template-columns: 1fr; margin-top: 40px; }
  .stat, .stat + .stat { padding: 22px 0 6px; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--hair); }
  .stat b { font-size: 46px; }
  .stat p { margin-top: 12px; }

  /* testimonials */
  .quotes { gap: 36px; margin-top: 36px; }
  .pull { gap: 22px; }
  .pull blockquote { font-size: 23px; }
  .quote { padding: 24px; gap: 18px; border-radius: 22px; }
  .quote blockquote { font-size: 18px; }

  /* about */
  .about { gap: 32px; }
  .about__photo { aspect-ratio: 4 / 4.4; border-radius: 22px; clip-path: inset(0 round 22px); }
  .about__img { object-position: 50% 22%; }
  .about__name { left: 22px; right: 22px; bottom: 22px; gap: 10px; }
  .giant { font-size: clamp(60px, 18vw, 80px); }
  .about__role { font-size: 14px; }
  .about__txt { gap: 18px; padding-top: 0; }
  .about__txt > p:not(.lead) { font-size: 15.5px; line-height: 1.65; }
  .lead { font-size: 17px; }
  .ticks li { font-size: 15px; }
  .minis { gap: 12px; padding-top: 20px; }
  .minis b { font-size: 22px; }
  .minis span { font-size: 13px; }

  /* free edit */
  .free { padding: 40px 22px 24px; border-radius: 24px; clip-path: inset(0 round 24px); min-height: 0; }
  .free__txt { gap: 20px; }
  .free__title { font-size: clamp(42px, 12vw, 56px); }
  .free__txt > p { font-size: 16px; }
  .free__list { grid-template-columns: 1fr; gap: 10px; }
  .free__ctas { flex-direction: column; width: 100%; margin-top: 4px; }
  .free__ctas .btn { width: 100%; }

  /* brief */
  .brief { gap: 32px; }
  .step { padding: 22px 0; }
  .step legend { font-size: 18px; margin-bottom: 14px; }
  .opt { height: 42px; padding: 0 16px; font-size: 14.5px; }
  .fields { grid-template-columns: 1fr; gap: 16px; }
  .msg { padding: 20px; gap: 14px; border-radius: 22px; }
  .msg__out { min-height: 150px; font-size: 15px; padding: 16px 18px; }
  .msg__actions { grid-template-columns: 1fr; }

  /* booking: the calendar link sits under the embed instead of on top of it */
  .book__info { padding: 24px; gap: 22px; border-radius: 22px; }
  .h3 { font-size: 26px; }
  .book__cal { min-height: 0; background: transparent; overflow: visible; clip-path: none; border-radius: 0; }
  .book__cal iframe { display: none; }
  .book__direct { position: static; display: flex; justify-content: center; gap: 8px; width: 100%; height: 56px; padding: 0 24px; border-radius: var(--pill); background: var(--accent); color: var(--on-media); box-shadow: none; font: 600 16px/1 var(--f-body); text-decoration: none; }
  .book__direct:hover { color: var(--on-media); text-decoration: none; }

  /* faq */
  .qa__q { padding: 20px 0; gap: 14px; font-size: 18px; }
  .qa__icon { width: 36px; height: 36px; }
  .qa__a p { padding: 0 0 22px; font-size: 15.5px; }

  /* contact */
  .contact { gap: 20px; padding-bottom: 24px; }
  .contact__title { font-size: clamp(40px, 12vw, 56px); }
  .contact .lead { font-size: 16px; }
  .email { width: 100%; justify-content: space-between; height: 60px; padding: 0 8px 0 20px; font-size: 17px; gap: 10px; margin-top: 4px; }
  .email__hint { height: 44px; padding: 0 14px; }
  .email__hint > span { display: none; }
  .contact__ctas { flex-direction: column; width: 100%; }
  .contact__ctas .btn { width: 100%; }

  /* footer: real tap targets, room for the sticky bar and the iPhone home indicator */
  .foot { flex-direction: column; gap: 14px; text-align: center; margin-top: 64px; margin-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .foot__links { gap: 4px; flex-wrap: wrap; justify-content: center; }
  .foot__links a { padding: 12px 10px; }
  .foot__meta { align-items: center; text-align: center; }

  /* floating / sticky */
  .fab { display: none; }
  .sbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: var(--z-float); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: var(--pill); background: var(--ink); color: var(--on-media); box-shadow: 0 16px 40px rgba(16, 16, 24, .3); transition: translate .4s var(--ease); }
  .sbar.hide, .menu-open .sbar { translate: 0 calc(140% + env(safe-area-inset-bottom)); }
  .sbar strong { display: block; font: 700 14px/1.2 var(--f-display); }
  .sbar span { display: block; font-size: 12px; color: var(--on-media-muted); }
  .sbar .btn { height: 44px; }

  /* lightbox */
  .lb { padding: 16px; }
  .lb__frame { max-height: 74dvh; border-radius: 20px; }
}

/* small phones */
@media (max-width: 380px) {
  .hero__title { font-size: 46px; }
  .hero__sub { font-size: 17px; }
  .btn--lg { height: 54px; font-size: 15px; }
  .intro__trust { grid-template-columns: 1fr; }
  .sbar span { display: none; }
}