/* Sunset Solutions v3: premium restyle
   Warm white page, deep plum type, Sora headings over Inter body.
   The pink-to-orange gradient appears in exactly two places: primary buttons, and the hero horizon. */

:root {
  --bg: #FBF7F2;
  --surface: #FFFFFF;
  --text: #17121C;
  --muted: #6B6472;
  --line: rgba(23, 18, 28, .08);
  --line-strong: rgba(23, 18, 28, .16);
  --tint: #F3ECE4;          /* solid warm tint for quiet panels */
  --accent: linear-gradient(90deg, #E91E63, #FF7A18);
  --accent-solid: #E91E63;  /* focus rings and selection only */

  --head: "Sora", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1160px;
  --gutter: max(20px, 4vw);
  --section: clamp(4rem, 10vw, 7.5rem);
  --measure: 68ch;
  --radius: 12px;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; scrollbar-color: rgba(23, 18, 28, .22) var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
}
::selection { background: rgba(233, 30, 99, .16); color: var(--text); }
input, textarea { caret-color: var(--accent-solid); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--head); font-weight: 500; letter-spacing: 0; text-wrap: balance; color: var(--text); }
h1, h2 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; }
h3 { font-size: 1.25rem; line-height: 1.3; }
h4 { font-size: 1.125rem; line-height: 1.3; }
h2 em, h3 em { font-style: normal; color: var(--muted); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }

.eyebrow { display: block; font: 500 .75rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lead { color: var(--muted); font-size: 1.0625rem; max-width: var(--measure); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--text);
  font: 500 .9375rem/1 var(--body); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(233, 30, 99, .55); }
.btn:active { transform: translateY(0); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .875rem; }
.link {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px;
  font-weight: 500; color: var(--text); text-decoration: none;
}
.link span { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color 200ms ease-out; }
.link:hover span { border-color: var(--text); }
.link svg { width: 1em; height: 1em; transition: transform 200ms ease-out; }
.link:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color 300ms ease-out;
  padding-top: env(safe-area-inset-top, 0px);
}
.header.scrolled { border-color: var(--line); }
.header .wrap { display: flex; align-items: center; gap: 28px; height: 76px; }
.logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.logo img { height: 44px; width: auto; mix-blend-mode: multiply; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 10px 12px; font-size: .9375rem; font-weight: 400; color: var(--muted); text-decoration: none; transition: color 200ms ease-out; }
.nav a:hover { color: var(--text); }
.menu-btn { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--text); font: 500 .9375rem var(--body); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .x { display: none; }
.header.open .menu-btn .x { display: block; }
.header.open .menu-btn .bars { display: none; }

@media (max-width: 880px) {
  .header .wrap { height: 66px; gap: 12px; }
  .logo img { height: 36px; }
  .menu-btn { display: inline-flex; }
  .header .btn-sm { display: none; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px max(var(--gutter), env(safe-area-inset-left, 0px)) 20px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 200ms ease-out, transform 250ms ease-out, visibility 0s 250ms;
  }
  .header.open .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li + li { border-top: 1px solid var(--line); }
  .nav a { padding: 15px 0; font-size: 1.0625rem; color: var(--text); }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 8vw, 6.5rem) 0 var(--section); }
.hero .wrap { display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: clamp(32px, 6vw, 88px); }
.hero-text { min-width: 0; }
.hero h1 { margin-top: 22px; line-height: 1.08; }
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero h1 .l2 { color: var(--muted); font-weight: 400; }
.hero .lead { margin-top: 24px; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); max-width: 34rem; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }

/* Hero animation, "one click away": a fingertip taps, a ripple spreads, and orders arrive */
.art { position: relative; width: 100%; max-width: 360px; justify-self: end; }
.tap-zone { position: relative; height: 168px; }
.tap-glow {
  position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 30, 99, .2) 0%, rgba(255, 122, 24, .2) 38%, rgba(255, 122, 24, 0) 70%);
  opacity: 0; transform: scale(.6);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.tap-ripple { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: none; }
.tap-ripple::before, .tap-ripple::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(233, 30, 99, .6); opacity: 0; }
.tap-finger {
  /* the fingertip (9,2 in the 24-unit icon) sits exactly on the tap point */
  position: absolute; left: calc(50% - 19.5px); top: calc(50% - 4.3px); width: 52px; height: 52px;
  color: var(--text); transform-origin: 19.5px 4.3px;
  animation: pulse 2.4s ease-in-out infinite;
}
.tap-finger .hand { fill: var(--surface); }
.tap-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.tap-card {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow);
  opacity: 0; transform: translateY(12px);
  transition: opacity 300ms ease-out, transform 300ms ease-out, border-color 250ms ease-out;
}
.tap-card:nth-child(1) { margin-right: 22px; }
.tap-card:nth-child(2) { margin-left: 22px; }
.tap-card svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--tint); fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tap-card span { min-width: 0; display: grid; line-height: 1.35; }
.tap-card b { font-weight: 500; font-size: .875rem; }
.tap-card small { font-size: .8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tap-card time { font-size: .75rem; color: var(--muted); white-space: nowrap; }

/* The tap */
.is-tapped .tap-finger { animation: press .4s ease-out, pulse 2.4s ease-in-out .4s infinite; }
.is-tapped .tap-ripple::before { animation: ripple 1.2s cubic-bezier(0, 0, .2, 1) .12s both; }
.is-tapped .tap-ripple::after { animation: ripple 1.2s cubic-bezier(0, 0, .2, 1) .32s both; }
.is-tapped .tap-glow { opacity: 1; transform: none; }
.is-tapped .tap-card { opacity: 1; transform: none; transition-delay: calc(.3s + var(--i) * 150ms); }
.no-anim, .no-anim * { animation: none !important; transition: none !important; }

/* ---------- Sections ---------- */
.section { position: relative; padding: var(--section) 0; }
/* Between major sections: a short gradient rule, centred on the boundary */
main > section + section::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: min(120px, 32vw); height: 1px; background: linear-gradient(90deg, #E91E63, #FF7A18);
}
.section-head { display: grid; gap: 16px; max-width: var(--measure); margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* Services: open rows with hairlines */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 6vw, 96px); list-style: none; margin: 0; padding: 0; }
.service { display: grid; grid-template-columns: 36px 1fr; gap: 0 20px; padding: 32px 0 36px; border-top: 1px solid var(--line); min-width: 0; }
.service svg { width: 26px; height: 26px; margin-top: 2px; stroke: var(--text); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.service p { margin-top: 8px; color: var(--muted); max-width: 30rem; }
.service .link { margin-top: 6px; font-size: .9375rem; }

/* Packages: four cards */
.subhead { margin: var(--section) 0 32px; display: grid; gap: 12px; max-width: var(--measure); }
.subhead h3 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.offer { margin-bottom: 28px; max-width: var(--measure); color: var(--muted); }
.offer strong { color: var(--text); font-weight: 500; }
.offer a { color: var(--text); font-weight: 500; }
.packages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; align-items: stretch; }
.package, .care li {
  min-width: 0; display: flex; flex-direction: column;
  padding: 28px 24px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow);
}
.package .tag { font: 500 .75rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--text); min-height: 1em; }
.package:has(.tag:not(:empty)) { border-color: var(--text); }
.package h4 { margin-top: 14px; }
.package .price, .care .price { margin-top: 14px; font: 500 2rem/1 var(--head); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.package .price small, .care .price small { font: 400 .8125rem var(--body); color: var(--muted); margin-right: 4px; letter-spacing: .02em; }
.package .meta { margin-top: 8px; font-size: .875rem; color: var(--muted); }
.package ul { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: .9375rem; color: var(--muted); }
.package li { padding-left: 16px; position: relative; }
.package li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 1px; background: var(--text); }
.package .link { margin-top: auto; padding-top: 18px; font-size: .9375rem; }
.small-print { margin-top: 32px; display: grid; gap: 10px; color: var(--muted); font-size: .9375rem; max-width: var(--measure); }
.small-print strong { color: var(--text); font-weight: 500; }

/* Care plans: three cards */
.care { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.care h4 { margin: 0; }
.care .price { font-size: 1.75rem; color: var(--text); }
.care p { margin-top: 14px; font-size: .9375rem; color: var(--muted); }

/* Work: editorial project rows */
.projects { display: grid; gap: clamp(4.5rem, 10vw, 7.5rem); }
.project { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(36px, 7vw, 104px); }
.project:nth-child(even) .shots { order: 2; }
.shots { position: relative; display: flex; justify-content: center; align-items: flex-end; min-width: 0; padding: 40px 0; }
.shots::before { content: ""; position: absolute; inset: 0 6%; border-radius: var(--radius); background: var(--tint); z-index: 0; }
.phone {
  position: relative; z-index: 1; width: min(220px, 44vw); aspect-ratio: 390 / 844;
  border-radius: 24px; padding: 6px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 40px -28px rgba(23, 18, 28, .35);
  overflow: hidden;
}
.phone img, .phone video { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 18px; }
.phone + .phone { margin-left: -36px; margin-bottom: -24px; }
.project-text { min-width: 0; }
.project .kind { margin-top: 12px; color: var(--muted); font-weight: 500; font-size: .9375rem; }
.project h3 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; }
.project dl { margin: 26px 0 0; display: grid; gap: 18px; }
.project dt { font: 500 .75rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.project dd { margin: 4px 0 0; max-width: 34rem; }
.project .links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 22px; }
.text-btn { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 1rem var(--body); color: var(--text); }
.text-btn span { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color 200ms ease-out; }
.text-btn:hover span { border-color: var(--text); }
.text-btn svg { width: .85em; height: .85em; }

.next {
  margin-top: clamp(4rem, 8vw, 6rem);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px 48px;
  padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.next h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
.next h3 em { color: var(--muted); }
.next p { margin-top: 8px; color: var(--muted); max-width: var(--measure); }

/* About */
.about .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 7vw, 104px); align-items: start; }
.about-body { display: grid; gap: 20px; color: var(--muted); max-width: var(--measure); }
.about-body p:first-child { color: var(--text); font: 400 clamp(1.25rem, 2.2vw, 1.5rem)/1.45 var(--head); }
.values { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.values li { padding: 16px 0; border-top: 1px solid var(--line); color: var(--muted); }
.values strong { display: block; color: var(--text); font-weight: 500; }

/* How we work */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 48px); list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { min-width: 0; padding-top: 20px; border-top: 1px solid var(--line-strong); counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 400 .875rem/1 var(--head); font-variant-numeric: tabular-nums; color: var(--muted); margin-bottom: 16px; }
.steps h3 { font-size: 1.125rem; }
.steps p { margin-top: 8px; color: var(--muted); font-size: .9375rem; }

/* Contact */
.contact .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 104px); align-items: start; }
.contact-details { list-style: none; margin: 32px 0 0; padding: 0; display: grid; }
.contact-details li { padding: 16px 0; border-top: 1px solid var(--line); }
.contact-details span { display: block; font: 500 .75rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-details a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.contact-details a:hover { text-decoration: underline; }
.form {
  display: grid; gap: 20px; padding: clamp(24px, 4vw, 36px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow);
}
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font-weight: 500; font-size: .875rem; color: var(--text); }
.field label small { font-weight: 400; color: var(--muted); font-size: inherit; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 1rem/1.5 var(--body); color: var(--text);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, background-color 200ms ease-out;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317121C' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: var(--surface); border-color: var(--text); box-shadow: 0 0 0 3px rgba(233, 30, 99, .14); }
.field .error { display: none; color: #B0123F; font-size: .875rem; }
.field.invalid input, .field.invalid select { border-color: #B0123F; }
.field.invalid .error { display: block; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-foot p { color: var(--muted); font-size: .875rem; max-width: 24rem; }

/* Footer */
.footer { padding: 56px 0 max(36px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.footer img { height: 40px; width: auto; mix-blend-mode: multiply; }
.footer p { margin-top: 14px; color: var(--muted); font-size: .9375rem; max-width: 22rem; }
.footer h2 { font: 500 .75rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; font-size: .9375rem; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.footer li a:hover { text-decoration: underline; }
.footer .copy { grid-column: 1 / -1; margin-top: 16px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .875rem; }

/* ---------- Motion ---------- */
/* Sections: fade in and rise 16px as they enter (class added by script, so no-JS visitors see everything) */
.js .enter { opacity: 0; transform: translateY(16px); }   /* hidden instantly: nothing moves on load */
.js .enter.in { opacity: 1; transform: none; transition: opacity 600ms ease-out, transform 600ms ease-out; }

/* Cards: lift 2px and darken the border */
.package, .care li, .phone, .form { transition: transform 250ms ease-out, border-color 250ms ease-out; }
.package:hover, .care li:hover, .phone:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.package:has(.tag:not(:empty)):hover { border-color: var(--text); }
.is-tapped .tap-card:hover { transform: translateY(-2px); border-color: var(--line-strong); transition-delay: 0s; }
.form:hover, .form:focus-within { border-color: var(--line-strong); }

/* Links: an underline draws in from the left over the resting hairline */
.link span, .text-btn span {
  border-bottom: 0; padding-bottom: 3px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat;
  transition: background-size 250ms ease-out;
}
.link:hover span, .text-btn:hover span, .link:focus-visible span, .text-btn:focus-visible span { background-size: 100% 1px, 100% 1px; }
.offer a, .contact-details a, .footer li a {
  text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 250ms ease-out;
}
.offer a { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat; }
.offer a:hover, .contact-details a:hover, .footer li a:hover,
.offer a:focus-visible, .contact-details a:focus-visible, .footer li a:focus-visible { text-decoration: none; background-size: 100% 1px; }
.offer a:hover, .offer a:focus-visible { background-size: 100% 1px, 100% 1px; }
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 250ms ease-out;
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* ---------- Cinematic entrance (only when <html> has .intro, i.e. motion is welcome) ----------
   0ms      logo fades and scales in (600ms), then holds 400ms
   1000ms   overlay slides up and away (800ms)
   1300ms   hero glow and tap scene fade in
   1500ms   headline words slide up, 60ms apart
   2000ms   supporting text, 2200ms buttons; all done by 2.8s */
.intro-overlay { display: none; }
.intro .intro-overlay {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 200; background: #17121C;
  animation: overlay-up 800ms cubic-bezier(.83, 0, .17, 1) 1000ms forwards;
}
.intro .intro-overlay img { width: 120px; height: auto; animation: logo-in 600ms ease-out both; }
.intro-lock, .intro-lock body { overflow: hidden; }

.hero { position: relative; isolation: isolate; overflow: hidden; }
/* ---------- Alive hero: a night sky after sunset ---------- */
.hero { background: #17121C; }
.hero-glow { position: absolute; z-index: -1; inset: 0; pointer-events: none; overflow: hidden; }
.blobs { position: absolute; inset: 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .35; will-change: transform; }
.b1 { width: 560px; height: 560px; background: #E91E63; left: -6%; top: -22%; animation: drift-a 18s ease-in-out infinite alternate; }
.b2 { width: 520px; height: 520px; background: #FF7A18; right: -4%; bottom: -34%; animation: drift-b 26s ease-in-out infinite alternate; }
.stars { position: absolute; inset: 0; }
.star-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.star-layer.s0 { animation: twinkle 4.2s ease-in-out infinite alternate; }
.star-layer.s1 { animation: twinkle 5.6s ease-in-out -2.8s infinite alternate; }
.spotlight {
  position: absolute; z-index: -1; left: 0; top: 0; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 30, 99, .15) 0%, rgba(233, 30, 99, 0) 70%);
  mix-blend-mode: screen; pointer-events: none; opacity: 0; transition: opacity 300ms ease-out;
}
.hero.spot-on .spotlight { opacity: 1; }

/* Light type on the night sky */
.hero h1 { color: #FBF7F2; }
.hero h1 .l2 { color: rgba(251, 247, 242, .6); }
.hero .eyebrow { color: rgba(251, 247, 242, .62); }
.hero .lead { color: rgba(251, 247, 242, .76); }
.hero .link { color: #FBF7F2; }
.hero .link span { background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(251, 247, 242, .3), rgba(251, 247, 242, .3)); }
.hero .tap-finger { color: #17121C; }

/* ---------- Scroll spectacle ---------- */
html.lenis { scroll-behavior: auto; }
.stars { inset: -25% 0; }   /* taller than the hero so parallax never reveals an empty edge */

/* Portfolio screenshots: 3D tilt with a highlight that follows the cursor */
.project .phone::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: screen; opacity: 0; transition: opacity 250ms ease-out;
}
.project .phone.tilting { transition: transform 90ms linear, border-color 250ms ease-out; border-color: var(--line-strong); }
.project .phone.tilting::after { opacity: 1; }

/* Marquee strip */
.marquee { background: #17121C; overflow: hidden; padding: 22px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; }
.marquee-set span {
  padding-right: .9em; white-space: nowrap;
  font: 500 14px/1.2 var(--body); text-transform: uppercase; letter-spacing: .2em;
  background: linear-gradient(90deg, #E91E63, #FF7A18); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Micro-interactions ---------- */
/* Custom cursor (added by script for a real mouse only) */
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input, .has-cursor textarea { cursor: text !important; }
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; opacity: 0; transition: opacity 200ms ease-out; }
.cursor-dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #E91E63; }
.cursor-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 299; }
.cursor-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(233, 30, 99, .7); background: rgba(233, 30, 99, 0);
  transition: transform 250ms ease-out, background-color 250ms ease-out;
}
.cursor-ring.is-link::before { transform: scale(1.6); background: rgba(233, 30, 99, .2); }
.cursor-on .cursor-dot, .cursor-on .cursor-ring { opacity: 1; }
.cursor-on.cursor-text .cursor-dot, .cursor-on.cursor-text .cursor-ring { opacity: 0; }
@media (max-width: 780px) {
  .cursor-dot, .cursor-ring { display: none; }
  .has-cursor, .has-cursor * { cursor: revert !important; }
}

/* Button ripple */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-ripple {
  position: absolute; z-index: -1; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); pointer-events: none; animation: btn-ripple 600ms ease-out forwards;
}
@keyframes btn-ripple { from { transform: scale(0); opacity: .7; } to { transform: scale(14); opacity: 0; } }

/* Footer sign-off: a sunset strip shows through the letters (lighten blend), sliding on hover.
   Each letter sits on a different stop. Only transform (the strip) and opacity (the veil) animate. */
.footer .wordmark {
  grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden;
  width: max-content; max-width: none; margin-top: 24px; white-space: nowrap; user-select: none;
  padding: 0 6px; margin-left: -6px;   /* keeps the blended strip off the box's fractional edge pixels */
  background: var(--bg);
  font: 500 clamp(4.5rem, 19vw, 13rem)/.9 var(--head); letter-spacing: -.02em;
}
.wm-text { position: relative; color: var(--text); }
.wm-sheen {
  position: absolute; top: 0; bottom: 0; left: 3px; width: calc(200% - 12px); pointer-events: none; mix-blend-mode: lighten;
  background: linear-gradient(90deg, #C2185B, #E91E63, #F0446A, #FF5A3C, #FF7A18, #FFA62B, #C2185B, #E91E63, #F0446A, #FF5A3C, #FF7A18, #FFA62B, #C2185B);
  animation: wm-slide 4s linear infinite; animation-play-state: paused;
}
.wm-veil { position: absolute; inset: 0; background: var(--bg); opacity: .93; pointer-events: none; transition: opacity 300ms ease-out; }
.footer:hover .wm-veil { opacity: 0; }
.footer:hover .wm-sheen { animation-play-state: running; }
@keyframes wm-slide { to { transform: translateX(-50%); } }

@keyframes drift-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(16vw, 12vh) scale(1.15); } 100% { transform: translate(4vw, 26vh) scale(.95); } }
@keyframes drift-b { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-22vw, -14vh) scale(.9); } 100% { transform: translate(-8vw, -26vh) scale(1.1); } }
@keyframes twinkle { from { opacity: 1; } to { opacity: .3; } }
@media (max-width: 780px) {
  .b1 { width: 340px; height: 340px; }
  .b2 { width: 320px; height: 320px; }
}
.hero h1 .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.hero h1 .word > span { display: inline-block; }

.intro .hero-glow, .intro .tap-scene { animation: fade-in 600ms ease-out 1300ms both; }
.intro .hero .eyebrow { animation: rise 600ms ease-out 1400ms both; }
.intro .hero h1 .word > span { animation: word-up 700ms ease-out both; animation-delay: calc(1500ms + var(--w) * 60ms); }
.intro .hero .lead { animation: rise 600ms ease-out 2000ms both; }
.intro .hero .actions { animation: rise 600ms ease-out 2200ms both; }

@keyframes logo-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes overlay-up { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes word-up { from { transform: translateY(110%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes press { 0% { transform: scale(1); } 40% { transform: scale(.86); } 100% { transform: scale(1); } }
@keyframes ripple { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .packages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  .footer .wrap > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .hero { padding-top: 24px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .art { justify-self: center; max-width: 360px; margin-top: 8px; }
  .tap-zone { height: 140px; }
  .tap-glow { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .services-grid { grid-template-columns: 1fr; }
  .project, .about .wrap, .contact .wrap { grid-template-columns: 1fr; }
  .project:nth-child(even) .shots { order: 0; }
  .care { grid-template-columns: 1fr; }
  .next { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero .actions .btn { flex: 1 1 100%; }
  .packages { grid-template-columns: 1fr; }
  .package .tag:empty { display: none; }
  .steps { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .form-foot .btn { flex: 1 1 100%; }
  /* one column so the phone number and email sit on one line each */
  .footer .wrap { grid-template-columns: 1fr; gap: 28px; }
  .service { grid-template-columns: 28px 1fr; gap: 0 14px; }
  .service svg { width: 22px; height: 22px; }
  .phone { width: min(190px, 42vw); border-radius: 20px; padding: 5px; }
  .phone img, .phone video { border-radius: 15px; }
  .phone + .phone { margin-left: -24px; }
}

/* ==========================================================================
   Performance guardrails: only transform and opacity ever animate.
   Colour, border, shadow and background changes still happen, but instantly.
   ========================================================================== */
.btn { transition: transform 200ms ease-out; }
.header, .nav a, .field input, .field select, .field textarea { transition: none; }
.package, .care li, .phone, .form { transition: transform 250ms ease-out; }
.tap-card { transition: opacity 300ms ease-out, transform 300ms ease-out; }
.project .phone.tilting { transition: none; }   /* the loop already eases the tilt */

/* Blobs: the only filtered elements; promoted to their own layer and contained */
.blob { filter: blur(80px); will-change: transform; contain: layout; }
@media (max-width: 780px) { .blob { filter: blur(60px); } }

/* Underlines draw in with scaleX over a static hairline */
.link span, .text-btn span, .offer a, .contact-details a, .footer li a { position: relative; transition: none; }
.link span, .text-btn span { background: linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat; }
.hero .link span { background-image: linear-gradient(rgba(251, 247, 242, .3), rgba(251, 247, 242, .3)); }
.offer a { background: linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat; }
.contact-details a, .footer li a { background: none; }
.link span::after, .text-btn span::after, .offer a::after, .contact-details a::after, .footer li a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 250ms ease-out;
}
.contact-details a::after, .footer li a::after { bottom: 10px; }
.link:hover span::after, .text-btn:hover span::after, .link:focus-visible span::after, .text-btn:focus-visible span::after,
.offer a:hover::after, .contact-details a:hover::after, .footer li a:hover::after,
.offer a:focus-visible::after, .contact-details a:focus-visible::after, .footer li a:focus-visible::after { transform: scaleX(1); }

/* Cursor ring: border scales, the pink fill fades in on a separate layer */
.cursor-ring::before { background: none; transition: transform 250ms ease-out; }
.cursor-ring.is-link::before { background: none; }
.cursor-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(233, 30, 99, .2);
  opacity: 0; transform: scale(1); transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.cursor-ring.is-link::after { opacity: 1; transform: scale(1.6); }

/* Tilt highlight: a fixed radial spot moved with transform (no repainted gradient) */
.project .phone::after {
  inset: auto; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  transform: translate(-50%, -50%) translate(var(--sx, 0px), var(--sy, 0px));
}

/* Reveal covers (desktop): a block the colour of the background slides away */
h2.reveal-cover { position: relative; }
h2.reveal-cover::after {
  content: ""; position: absolute; inset: -15% -3% -20% -1%; background: var(--bg);
  transform-origin: right center; transition: transform 900ms cubic-bezier(.22, 1, .36, 1);
}
h2.reveal-cover.revealed::after { transform: scaleX(0); }
.project .phone.reveal-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 3; background: var(--surface);
  transform-origin: top center; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.project .phone.reveal-cover.revealed::before { transform: scaleY(0); }
.project .phone.reveal-cover img { transform: scale(1.05); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.project .phone.reveal-cover.revealed img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .enter { opacity: 1; transform: none; }
  .btn:hover, .package:hover, .care li:hover, .phone:hover, .is-tapped .tap-card:hover { transform: none; }
  .tap-card, .tap-glow { opacity: 1; transform: none; }   /* show the finished scene, still */
}
@media (max-width: 400px) {
  .tap-card:nth-child(1) { margin-right: 0; }
  .tap-card:nth-child(2) { margin-left: 0; }
}

/* Homepage services preview (links to services.html) */
.service .from { margin-top: 10px; color: var(--muted); font-size: .9375rem; }
.service .from strong { color: var(--text); font-weight: 500; }
.services-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.services-more p { max-width: 32rem; color: var(--muted); }
.service .from .usd { margin-left: 6px; color: var(--muted); font-size: .875rem; }

/* ==========================================================================
   Premium feel (22 Oct): instant press feedback, frosted header, menu scrim, swipe dots
   ========================================================================== */
/* Everything you can tap answers the instant a finger lands, not when it lifts */
.btn:active { transform: scale(.97); transition-duration: 80ms; }
.work-card a:active, .aftercare:active, .acc summary:active { transform: scale(.98); transition: transform 80ms ease-out; }
.link:active, .nav a:active, .menu-btn:active, .svc-tabs a:active, .work-jump a:active, .more-btn:active, .film-btn:active, .plan-switch button:active { opacity: .55; }

/* Frosted-glass header: the page glides underneath; a soft shadow replaces the hard line */
.header { background: rgba(251, 247, 242, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.header.scrolled { border-color: transparent; box-shadow: 0 10px 24px -18px rgba(23, 18, 28, .45); }

/* Phone menu: the page behind dims, and a tap on it closes the menu */
.scrim { position: fixed; inset: 0; z-index: 45; background: rgba(23, 18, 28, .45); opacity: 0; pointer-events: none; transition: opacity 250ms ease-out; }
.menu-open .scrim { opacity: 1; pointer-events: auto; }
@media (min-width: 881px) { .scrim { display: none; } }

/* Swipe dots under package rows on phones (added by services.js) */
.dots { display: none; }
@media (max-width: 780px) {
  .dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
  .dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .28; transition: opacity 200ms ease-out, transform 200ms ease-out; }
  .dots i.on { opacity: 1; transform: scale(1.3); }
}

@media (prefers-reduced-transparency: reduce) {
  .header, .svc-tabs { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* The header logo has a see-through background, so it sits cleanly on the frosted glass */
.logo img { mix-blend-mode: normal; }

/* Big headings: slightly tighter letter spacing, so large type looks crisp (small labels keep their own spacing) */
h1, h2 { letter-spacing: -.02em; }
h3 { letter-spacing: -.01em; }