/* ============================================================
   Doubleslash Studio — production stylesheet
   Strict separation of concerns: all presentation lives here.
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root {
  --ink: #2d0045;        /* dark purple  */
  --electric: #5500f4;   /* electric purple */
  --magenta: #cd236c;    /* accent */
  --orchid: #e472b7;     /* supporting */
  --lamp-accent: #f0a8d2; /* light orchid — accent text on the lamp panels */
  --gap-section: 88px;   /* the single vertical rhythm between page sections */
  --burgundy: #780030;   /* supporting */
  --canvas: #f7f5fb;     /* light background */
  --footer: #1c002d;     /* deep footer */
  --body-ink: #3a2b47;   /* body copy */
  --white: #ffffff;

  --f-head: "Heebo", system-ui, sans-serif;
  --f-ui: "Titillium Web", system-ui, sans-serif;
  --f-body: "Libre Franklin", system-ui, sans-serif;

  --maxw: 1360px;
  --pad: 96px;
  --radius: 9px;
  --radius-lg: 20px;

  --grad-mark: linear-gradient(135deg, var(--ink), var(--electric));
}

/* ---- Reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* No scroll-behavior here: Lenis owns scrolling and animates anchor jumps
   itself (see initAnchors in main.js). Native smooth fights it. */
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-body);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--magenta); color: var(--white); }
:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul { margin: 0; }

/* ---- Utilities -------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.narrow { max-width: 900px; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--white); padding: 12px 18px;
  border-radius: 8px; font: 600 18px var(--f-ui); text-decoration: none; transition: top .2s;
}
.skip:focus { top: 16px; }
.eyebrow {
  font: 500 15px var(--f-body); text-transform: uppercase; letter-spacing: .22em;
  color: var(--magenta); margin: 0 0 24px;
}
.mark {
  font: 800 28px var(--f-head); letter-spacing: -.04em;
  background: var(--grad-mark); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Buttons ---------------------------------------------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer; border: none;
  font: 600 19px var(--f-ui); color: var(--white); background: var(--magenta);
  padding: 16px 32px; border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(205, 35, 108, .7); }
.btn:disabled { opacity: .6; transform: none; box-shadow: none; cursor: default; }
.btn--sm { font-size: 18px; padding: 11px 22px; border-radius: 8px; }
/* Border at .55 white: .32 only reached ~2.4:1 against the lit lamp, under the
   3:1 minimum for component boundaries; .55 measures 3.4:1. */
.btn--ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); box-shadow: none; }
.btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); box-shadow: none; }
/* Secondary button for light backgrounds; ink border at .6 measures 4.8:1
   against the canvas (.45 was borderline at ~3.0:1). */
.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid rgba(45, 0, 69, .6); box-shadow: none; }
.btn--outline:hover { border-color: var(--ink); background: rgba(45, 0, 69, .05); box-shadow: none; }
/* ---- Header / nav ----------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 245, 251, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(45, 0, 69, .09);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.site-header__left { display: flex; align-items: center; gap: 26px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__logo { width: 38px; height: 38px; }
.brand__name { font: 700 20px var(--f-head); color: var(--ink); letter-spacing: -.02em; }
.nav { display: flex; align-items: center; gap: 34px; }
.nav__link { font: 600 18px var(--f-ui); color: var(--ink); text-decoration: none; position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--magenta); transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Mobile nav toggle + panel ------------------------------ */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: none; background: transparent; cursor: pointer;
}
.nav-toggle__box { width: 24px; height: 18px; position: relative; display: block; }
.nav-toggle__bar,
.nav-toggle__box::before,
.nav-toggle__box::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.nav-toggle__bar { top: 8px; }
.nav-toggle__box::before { top: 0; }
.nav-toggle__box::after { top: 16px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::before { top: 8px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::after { top: 8px; transform: rotate(-45deg); }

.nav-mobile {
  display: none; flex-direction: column; gap: 4px;
  padding: 8px var(--pad) 20px;
  border-top: 1px solid rgba(45, 0, 69, .09);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile__link {
  font: 600 19px var(--f-ui); color: var(--ink); text-decoration: none;
  padding: 13px 4px; border-bottom: 1px solid rgba(45, 0, 69, .08);
}
.nav-mobile__cta { margin: 10px 0 12px; text-align: center; }

/* ---- Hero ------------------------------------------------- */
.hero { padding-top: 76px; padding-bottom: 8px; position: relative; overflow: hidden; }

/* ---- Hero lamp --------------------------------------------
   The hero panel itself is the apw-lamp container: a WebGL field of
   drifting "//" marks (js/apw-lamp.standalone.js) painted on an opaque
   dark gradient, so the copy on top runs light. Brand colours are passed
   in per page via the data-lamp-* attributes on the section. */
/* Full-bleed: the section spans the viewport, and the .container lives on
   .hero__panel inside it so the copy still lines up with the rest of the page. */
.hero--lamp {
  /* Low floor so short heroes (portfolio, testimonials) hug their copy instead
     of padding out; the longer ones grow past it on their own. */
  min-height: 440px; display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 76px;
  background: var(--footer);        /* WebGL fallback + canvas backdrop */
  color: var(--white);
}
.hero--lamp + .section .split { border-top: none; }
.hero--lamp + .section:not(.pt-56),
.hero--lamp + .prose { margin-top: var(--gap-section); }
.hero--lamp .hero__lead { max-width: 46ch; }
/* .hero__panel's max-width:100% would beat .container's cap and, as a flex item
   with auto margins, shrink to fit-content and centre. Restore the container width. */
.hero--lamp .hero__panel { width: 100%; max-width: var(--maxw); z-index: 1; }
/* Contrast scrim. The marks peak at #a920a5, which leaves the small copy under
   WCAG AA, so this knocks the lit pixels back where the text sits and clears to
   the right so the marks still read. ::after (not ::before) so it paints over the
   canvas; the panel's z-index lifts the copy back above it. */
.hero--lamp::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to right,
    rgba(28, 0, 45, .56) 0%, rgba(28, 0, 45, .5) 45%, rgba(28, 0, 45, .2) 100%);
}
/* Copy sitting directly on a lamp panel — the heroes and the contact intro.
   Orchid itself only reaches 4.09:1 on the lit lamp (under AA for this small
   copy), so the accent text uses a lighter tint of it (6.2:1). */
.on-lamp { color: var(--white); }
.on-lamp .eyebrow { color: var(--lamp-accent); }
.on-lamp .hero__title,
.on-lamp .page-title { color: var(--white); }
.on-lamp .hero__lead { color: rgba(255, 255, 255, .84); }
.on-lamp .hero__note { color: rgba(255, 255, 255, .68); }
.on-lamp .section-h { color: var(--white); }
.on-lamp .lead-p { color: rgba(255, 255, 255, .84); }
/* Burgundy is near-black against the lamp; the accent tint reads at 6.2:1. */
.on-lamp .kicker { color: var(--lamp-accent); }
/* The default electric-purple focus ring only reaches 1.81:1 on the dark lamp,
   under the 3:1 minimum for non-text contrast. */
.on-lamp :focus-visible { outline-color: var(--lamp-accent); }
.hero__panel { position: relative; max-width: 100%; }
/* Home hero: copy on the left, compact enquiry form on a white card right.
   The title drops a size so the narrower column doesn't wrap it to pieces. */
.hero__panel--split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.hero__panel--split .hero__title { font-size: clamp(48px, 6.3vw, 85px); }
/* Glass panel, same recipe as the contact aside-card: heavy tint because the
   marks drift beneath it and the copy on it has to clear AA against the
   brightest pixel the shader produces. Inputs stay white, so field text is
   ink-on-white regardless of what passes underneath. */
.hero__form {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 32px 34px;
  margin-right: 32px;   /* nudge the card left of the grid's right edge */
  background: rgba(28, 0, 45, .62);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .6),
              inset 0 1px 0 rgba(255, 255, 255, .18);
}
.hero__form::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 46%);
}
.hero__form-title { font: 800 24px/1.2 var(--f-head); color: var(--white); letter-spacing: -.02em; margin: 0 0 18px; }
.hero__form .form { gap: 14px; }
.hero__form .field label { color: var(--white); }
.hero__form .form__hint { color: rgba(255, 255, 255, .68); }
.hero__form textarea.control { min-height: 88px; }
.hero__form .form__alert { background: rgba(255, 255, 255, .12); border-color: rgba(240, 168, 210, .55); color: var(--white); }
.hero__form .form-success { padding: 24px 8px; }
.hero__form .form-success h2 { color: var(--white); }
.hero__form .form-success p { color: rgba(255, 255, 255, .84); }
/* The mark's ink-start gradient vanishes on the dark glass. */
.hero__form .form-success__mark { background: linear-gradient(135deg, var(--white), var(--lamp-accent) 60%, var(--orchid)); -webkit-background-clip: text; background-clip: text; }
/* No backdrop-filter: opaque ink panel, never a see-through box with no blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__form { background: var(--ink); }
}

.hero__title { font: 800 78px/1.02 var(--f-head); color: var(--ink); letter-spacing: -.03em; margin: 0 0 24px; max-width: 32ch; text-wrap: balance; }
/* The two slashes animate in individually (see initHeroIntro). inline-block so
   they can take a transform; the wrapper keeps them from breaking across lines. */
.hero__slashes { display: inline-block; white-space: nowrap; }
.hero__slash { display: inline-block; will-change: transform; }
.hero__lead { font: 400 21px/1.62 var(--f-body); color: var(--body-ink); max-width: 62ch; margin: 0 0 34px; }
.hero__actions { display: flex; align-items: center; gap: 26px; margin-bottom: 30px; flex-wrap: wrap; }
.hero__note { font: 500 16px/1.6 var(--f-body); color: rgba(45, 0, 69, .6); max-width: 74ch; margin: 0; }
.page-title { font: 800 66px/1.04 var(--f-head); color: var(--ink); letter-spacing: -.03em; margin: 0 0 22px; max-width: 17ch; text-wrap: balance; }

/* ---- Split seam ------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 92px 1fr; align-items: stretch; border-top: 1px solid rgba(45, 0, 69, .12); }
/* Flex column with the button pushed to the bottom, so the two "Explore"
   buttons align across columns whose copy runs to different lengths. */
.split__col { padding: 28px 0; display: flex; flex-direction: column; align-items: flex-start; }
.split__col .btn { margin-top: auto; }
.split__col--left { padding-right: 48px; }
.split__col--right { padding-left: 48px; }
.seam { position: relative; }
/* Each stroke is a bar inside its own slot. The slot carries the skew and clips,
   so the bar can slide down inside it (see initSplitIntro) instead of being
   revealed by a scale. Splitting slot from bar is what makes that possible:
   pseudo-elements can't be animated, and the slots sit at negative offsets, so
   clipping the .seam box itself would cut them off entirely. */
.seam__slot {
  position: absolute; top: 62.5px; bottom: 62.5px;
  /* hidden, not clip: clip needs Safari 16+, and an unsupported keyword falls
     back to visible, which would show the bars sliding over the copy during the
     reveal. Nothing here scrolls or focuses, so hidden costs nothing. */
  width: 44px; overflow: hidden;
  transform: skewX(-16deg);
}
.seam__slot:nth-child(1) { left: -57px; }
.seam__slot:nth-child(2) { left: -5px; }
.seam__bar {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--ink), var(--electric) 55%, var(--magenta));
}
.kicker { font: 600 18px var(--f-ui); text-transform: uppercase; letter-spacing: .18em; margin: 0 0 18px; }
.kicker--electric { color: var(--electric); }
.kicker--magenta { color: var(--magenta); }
.kicker--muted { color: rgba(45, 0, 69, .62); }
.section-h { font: 800 40px/1.1 var(--f-head); color: var(--ink); letter-spacing: -.02em; margin: 0 0 16px; }
.lead-p { font: 400 17px/1.6 var(--f-body); color: var(--body-ink); margin: 0 0 26px; max-width: 44ch; }
.slash-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.slash-list li { font: 600 18px var(--f-ui); color: var(--ink); padding-left: 24px; position: relative; }
.slash-list li::before { content: "//"; position: absolute; left: 0; color: var(--electric); }
.slash-list--magenta li::before { color: var(--magenta); }

/* ---- Generic sections ------------------------------------- */
.section { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
/* Full-bleed lamp band behind a section's content (the contact intro + form).
   Same apw-lamp panel as the heroes; the inner .container/.section keeps the
   content on grid. */
.section-lamp {
  position: relative; overflow: hidden;
  padding-bottom: 88px;
  background: var(--footer);        /* WebGL fallback + canvas backdrop */
}
/* Same contrast scrim as the heroes — the intro copy sits straight on the lamp. */
.section-lamp::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to right,
    rgba(28, 0, 45, .56) 0%, rgba(28, 0, 45, .5) 45%, rgba(28, 0, 45, .2) 100%);
}
.section-lamp > .section,
.section-lamp > .hero { position: relative; z-index: 1; }
.hero--on-lamp { padding-bottom: 56px; }
/* Standalone band (the "Web + software" block): padded top and bottom, since
   it sits between two light sections rather than running into the footer. */
/* No margin-top: the light section above supplies the gap with its padding.
   The 88px here is the panel's internal breathing room, not section spacing. */
.section-lamp--band { padding-top: var(--gap-section); padding-bottom: var(--gap-section); }
.section--gap { margin-top: var(--gap-section); }
.section--gap-lg { margin-top: var(--gap-section); }

/* ---- Cards ------------------------------------------------ */
.card { background: var(--white); border: 1px solid rgba(45, 0, 69, .1); border-radius: 16px; }
.card--pad { padding: 36px 38px; }
.quote { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.quote__mark { font: 900 40px/1 var(--f-head); color: var(--magenta); letter-spacing: -.05em; }
.quote blockquote { font: 400 20px/1.6 var(--f-body); color: var(--ink); margin: 0; }
.quote figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.quote__name { font: 700 17px var(--f-head); color: var(--ink); }
.quote__role { font: 400 15px var(--f-body); color: rgba(45, 0, 69, .62); }
.service-card { background: var(--white); border: 1px solid rgba(45, 0, 69, .1); border-radius: 14px; padding: 28px 30px; border-left: 3px solid var(--electric); }
.service-card--magenta { border-left-color: var(--magenta); }
.service-card h3 { font: 700 22px var(--f-head); color: var(--ink); margin: 0 0 8px; }
.service-card p { font: 400 16px/1.62 var(--f-body); color: var(--body-ink); margin: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-2--wide { gap: 28px; }
.covers-label { font: 600 18px var(--f-ui); text-transform: uppercase; letter-spacing: .16em; color: rgba(45, 0, 69, .62); margin: 44px 0 22px; }

.work-card { text-decoration: none; border-radius: 16px; overflow: hidden; border: 1px solid rgba(45, 0, 69, .1); background: var(--white); display: block; transition: transform .3s ease, box-shadow .3s ease; }
.work-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -26px rgba(45, 0, 69, .5); }
.work-card__art { height: 280px; position: relative; overflow: hidden; }
.work-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-card__art--a { background: linear-gradient(140deg, var(--ink), var(--electric)); }
.work-card__art--b { background: linear-gradient(140deg, var(--electric), var(--magenta)); }
.work-card__art .streak { position: absolute; inset: 0; }
.work-card__art--a .streak { background: linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.14) 44% 48%, transparent 48% 60%, rgba(228,114,183,.5) 60% 63%, transparent 63%); }
.work-card__art--b .streak { background: linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.14) 40% 43%, transparent 43% 55%, rgba(45,0,69,.4) 55% 60%, transparent 60%); }
.work-card__art .watermark { position: absolute; left: 32px; bottom: 20px; font: 900 90px var(--f-head); color: rgba(255,255,255,.16); letter-spacing: -.05em; }
.work-card__body { padding: 28px 30px 30px; }
.work-card__tag { font: 600 18px var(--f-ui); margin: 0 0 10px; }
.work-card__body h3 { font: 700 25px var(--f-head); color: var(--ink); margin: 0 0 8px; }
.work-card__body p { font: 400 16px/1.6 var(--f-body); color: var(--body-ink); margin: 0; }

/* ---- Full-bleed dark banners ------------------------------ */
.banner { position: relative; overflow: hidden; background: var(--ink); }
.banner__mark { position: absolute; font: 900 340px/1 var(--f-head); color: var(--white); opacity: .06; letter-spacing: -.06em; pointer-events: none; }
.banner__mark--bl { left: -24px; bottom: -150px; }
.banner__mark--tr { right: -30px; top: -90px; }
.banner__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 80px var(--pad); }
/* Lamp behind the CTA. The banner was already a full-bleed dark panel with light
   copy, so it only needs the canvas, the same contrast scrim as the other lamp
   panels, and the accent kicker — orchid drops to 4.09:1 on the lit marks. */
/* Flat, not clearing to the right like the heroes: this CTA has copy on both
   sides (the price block sits far right), so an uneven scrim left "Fixed fee,
   from" at 3.7:1 over the lit marks. Even scrim puts it back over AA. */
.banner.apw-lamp::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(28, 0, 45, .52);
}
.banner.apw-lamp > .banner__inner { z-index: 1; }
.banner.apw-lamp .kicker--orchid { color: var(--lamp-accent); }
.banner__row { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
/* Both are dark ink panels, so orchid lands at 6.17:1. Scoped rather than global
   because orchid on the light canvas would not meet contrast. */
.banner .kicker--orchid,
.aside-card .kicker--orchid { color: var(--orchid); }
.banner__title { font: 800 46px/1.1 var(--f-head); color: var(--white); letter-spacing: -.02em; margin: 0 0 16px; }
.banner__text { font: 400 18px/1.65 var(--f-body); color: rgba(255, 255, 255, .82); margin: 0; max-width: 54ch; }
.price-block { text-align: right; }
.price-block__label { font: 500 15px var(--f-body); color: rgba(255, 255, 255, .6); margin: 0 0 8px; }
.price-block__value { font: 800 52px var(--f-head); color: var(--white); letter-spacing: -.02em; margin: 0 0 22px; }

/* ---- Prose (privacy) -------------------------------------- */
.prose h2 { font: 800 30px/1.16 var(--f-head); color: var(--ink); letter-spacing: -.02em; margin: 44px 0 14px; }
.prose p { font: 400 17px/1.72 var(--f-body); color: var(--body-ink); margin: 0 0 14px; max-width: 70ch; }
.prose ul { margin: 0 0 14px; padding-left: 22px; max-width: 70ch; }
.prose li { font: 400 17px/1.7 var(--f-body); color: var(--body-ink); margin: 0 0 8px; }
.prose a { color: var(--magenta); text-decoration: none; border-bottom: 1px solid rgba(205, 35, 108, .35); }

/* ---- Forms ------------------------------------------------ */
.form { display: flex; flex-direction: column; gap: 22px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font: 600 18px var(--f-ui); color: var(--ink); }
.field .optional { color: rgba(45, 0, 69, .6); font-weight: 400; }
.control {
  width: 100%; font: 400 17px var(--f-body); color: var(--ink); background: var(--white);
  border: 1.5px solid rgba(45, 0, 69, .2); border-radius: 10px; padding: 14px 16px;
}
.control:focus { border-color: var(--electric); outline: none; box-shadow: 0 0 0 3px rgba(85, 0, 244, .18); }
textarea.control { resize: vertical; min-height: 130px; line-height: 1.55; }
select.control {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--electric) 50%), linear-gradient(135deg, var(--electric) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 15px) 22px;
  background-size: 7px 7px, 7px 7px; background-repeat: no-repeat;
}
.form__submit-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.form__hint { font: 400 15px var(--f-body); color: rgba(45, 0, 69, .6); }
.form__alert { background: rgba(205, 35, 108, .08); border: 1px solid rgba(205, 35, 108, .35); border-radius: 10px; padding: 14px 16px; font: 400 15px/1.55 var(--f-body); color: var(--ink); }
.form__alert a { color: var(--magenta); font-weight: 600; text-decoration: none; }
.form-success { text-align: center; padding: 36px 12px; }
.form-success__mark { font: 900 64px var(--f-head); background: linear-gradient(135deg, var(--ink), var(--electric) 60%, var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.05em; margin: 0 0 16px; }
.form-success h2 { font: 800 34px var(--f-head); color: var(--ink); letter-spacing: -.02em; margin: 0 0 12px; }
.form-success p { font: 400 18px/1.6 var(--f-body); color: var(--body-ink); margin: 0 auto; max-width: 44ch; }
.is-hidden { display: none !important; }

/* ---- Contact layout --------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; }
.form-panel { background: var(--white); border: 1px solid rgba(45, 0, 69, .1); border-radius: var(--radius-lg); padding: 44px; }
.aside-stack { display: flex; flex-direction: column; gap: 20px; }
/* Glass card over the lamp. The tint is deliberately heavy (62%): the marks
   behind it peak at #a920a5, and a lighter glass would drop the kicker and the
   muted white copy below AA. At this tint the worst case still clears — kicker
   5.2:1, body 14:1. The blur only ever averages the backdrop, so it can't push
   contrast below the flat-colour worst case measured here. */
.aside-card {
  position: relative; overflow: hidden; border-radius: 18px; padding: 36px;
  background: rgba(28, 0, 45, .62);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .6),
              inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* Frosted top-edge sheen — the "2.0" bit: a soft light gradient rather than a
   flat translucent slab. */
.aside-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 46%);
}
/* No backdrop-filter (older Firefox, some Android): fall back to the opaque ink
   card, which is what it was before — never a see-through box with no blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .aside-card { background: var(--ink); }
}
.aside-card__mark { position: absolute; right: -20px; bottom: -70px; font: 900 200px/1 var(--f-head); color: var(--white); opacity: .07; letter-spacing: -.06em; }
.aside-card__content { position: relative; }
.aside-card__title { font: 800 27px/1.18 var(--f-head); color: var(--white); letter-spacing: -.02em; margin: 0 0 12px; }
.aside-card__text { font: 400 16px/1.6 var(--f-body); color: rgba(255, 255, 255, .82); margin: 0 0 18px; }
.aside-card__price-label { font: 500 14px var(--f-body); color: rgba(255, 255, 255, .6); margin: 0; }
.aside-card__price { font: 800 34px var(--f-head); color: var(--white); letter-spacing: -.02em; margin: 0; }
.aside-card__note { font: 400 14px/1.55 var(--f-body); color: rgba(255, 255, 255, .6); margin: 14px 0 0; }
.reach-card { background: var(--white); border: 1px solid rgba(45, 0, 69, .1); border-radius: 18px; padding: 32px 34px; }
.reach-card__head { font: 600 18px var(--f-ui); text-transform: uppercase; letter-spacing: .14em; color: rgba(45, 0, 69, .5); margin: 0 0 16px; }
.reach-card__email { font: 600 20px var(--f-ui); color: var(--magenta); text-decoration: none; display: block; margin-bottom: 14px; }
.reach-card__loc { font: 400 16px/1.55 var(--f-body); color: var(--body-ink); margin: 0; }

/* ---- Founder bios ----------------------------------------- */
.bio { display: grid; grid-template-columns: 380px 1fr; gap: 52px; align-items: start; }
.bio--reverse { grid-template-columns: 1fr 380px; }
.bio--reverse > div:first-child { order: 2; }
.bio--reverse > .bio__body { order: 1; }
.bio__heading-right { text-align: right; margin-left: auto; width: fit-content; max-width: 100%; }
/* Glass panel framing each founder photo. On the light canvas the frost reads
   through the translucent surface, the light border, the inset top-edge sheen
   and the lifted shadow; the photo is inset with its own radius. */
.bio__art {
  height: 380px; border-radius: 20px; position: relative; padding: 12px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .32));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 22px 50px -24px rgba(45, 0, 69, .4),
              inset 0 1px 0 rgba(255, 255, 255, .7);
}
.bio__art img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }
/* No backdrop-filter: a solid light panel rather than a near-invisible
   translucent one with no blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bio__art { background: rgba(255, 255, 255, .85); border-color: rgba(45, 0, 69, .12); }
}
.bio__art--dom { background: linear-gradient(150deg, var(--ink), var(--electric)); }
.bio__art--andy { background: linear-gradient(150deg, var(--burgundy), var(--magenta)); }
.bio__art .monogram { position: absolute; left: 28px; bottom: 20px; font: 900 88px var(--f-head); color: rgba(255,255,255,.9); letter-spacing: -.04em; }
.bio__caption { font: 400 13px var(--f-body); color: rgba(45, 0, 69, .62); margin: 10px 2px 0; }
.bio__body p { font: 400 18px/1.72 var(--f-body); color: var(--body-ink); margin: 0 0 18px; max-width: 62ch; }
.bio__body p:last-child { margin-bottom: 0; }
.stat-value { font: 800 56px/1 var(--f-head); letter-spacing: -.03em; margin: 0 0 10px; background: var(--grad-mark); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-value--sm { font-size: 30px; line-height: 1.2; }
.stat-value--magenta { background: linear-gradient(135deg, var(--electric), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat p { font: 400 17px/1.6 var(--f-body); color: var(--body-ink); margin: 0; }

/* ---- Footer ----------------------------------------------- */
.site-footer { background: var(--footer); color: var(--white); margin-top: 96px; }
.site-footer--flush { margin-top: 0; }
.site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--pad) 40px; }
/* Brand takes the free space; Services and Studio hug the right edge. */
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 40px 72px; }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; text-decoration: none; width: fit-content; }
.footer-brand img { width: 30px; height: 30px; }
.footer-brand span { font: 700 20px var(--f-head); color: var(--white); }
.footer-tagline { font: 400 16px/1.6 var(--f-body); color: rgba(255, 255, 255, .6); margin: 0; max-width: 34ch; }
.footer-col__head { font: 600 18px var(--f-ui); color: var(--orchid); margin-bottom: 16px; }
.footer-col__links { display: flex; flex-direction: column; gap: 12px; }
.footer-col__links a, .footer-col__links span { font: 400 16px var(--f-body); color: rgba(255, 255, 255, .78); text-decoration: none; }
.footer-col__links span { color: rgba(255, 255, 255, .6); }
/* Copyright and Privacy/Manage cookies sit together on the left; the strap
   pushes itself to the right. */
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: flex-start; gap: 16px 28px; flex-wrap: wrap; }
.footer-bottom .strap { margin-left: auto; }
.footer-bottom span { font: 400 14px var(--f-body); color: rgba(255, 255, 255, .5); }
.footer-bottom a { color: rgba(255, 255, 255, .5); }
.footer-bottom .strap { font-weight: 500; }
.link-btn {
  font: inherit; color: inherit; background: none; border: none; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* ---- Cookie banner ---------------------------------------- */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300;
  max-width: 600px; margin: 0 auto; background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 20px 24px;
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .6); flex-direction: column; gap: 14px; display: none;
}
.cookie.is-visible { display: flex; }
.cookie p { font: 400 15px/1.6 var(--f-body); color: rgba(255, 255, 255, .85); margin: 0; }
.cookie p a { color: var(--orchid); text-decoration: none; border-bottom: 1px solid rgba(228, 114, 183, .4); }
.cookie__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie__actions button { font: 600 18px var(--f-ui); color: var(--white); border-radius: 8px; padding: 11px 24px; cursor: pointer; border: none; }
.cookie__actions .accept { background: var(--magenta); }
.cookie__actions .reject { background: transparent; border: 1.5px solid rgba(255, 255, 255, .32); }

/* ---- Reveal animation ------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }

/* ---- Page utilities --------------------------------------- */
/* Light section between two lamp panels: its own padding is the gap on both
   sides, so the panels either side need no margin. The split's own 28px block
   padding would stack on top of that (making the gap 116px), and it has nothing
   to space from here since the top border is suppressed under the lamp hero. */
.pt-56 { padding-top: var(--gap-section); padding-bottom: var(--gap-section); }
.pt-56 .split__col { padding-block: 0; }
.measure-52 { max-width: 52ch; }
.measure-56 { max-width: 56ch; }
.measure-58 { max-width: 58ch; }
.measure-60 { max-width: 60ch; }
.measure-66 { max-width: 66ch; }
.measure-68 { max-width: 68ch; }
.section-h--38 { font-size: 38px; line-height: 1.14; }
.section-h--flush { margin: 0; }
.section-h--intro { max-width: 20ch; margin: 0 0 20px; }
#web-h, #soft-h { scroll-margin-top: 110px; }
.kicker--burgundy { color: var(--burgundy); }
.tag--electric { color: var(--electric); }
.tag--magenta { color: var(--magenta); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.combined-card { display: flex; gap: 48px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 56px; }
/* On the lamp band the card is just a layout row — the panel is the background,
   so drop the card padding back to the page gutter to stay on grid. */
.section-lamp > .combined-card { padding: 0 var(--pad); }
.combined-mark { position: relative; width: 130px; height: 120px; flex: 0 0 auto; color: transparent; font-size: 0; }
.combined-mark::before, .combined-mark::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 44px;
  background: linear-gradient(160deg, var(--ink), var(--electric) 55%, var(--magenta));
  transform: skewX(-16deg);
}
.combined-mark::before { left: 12px; }
.combined-mark::after { left: 64px; }
.banner__col { max-width: 58ch; }
.banner__title--40 { font-size: 40px; line-height: 1.14; }

/* services */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.intro-p { font: 400 18px/1.68 var(--f-body); color: var(--body-ink); margin: 0; max-width: 52ch; }
.dont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.dont-item { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(45, 0, 69, .12); }
.dont-item__mark { font: 800 20px var(--f-head); color: rgba(120, 0, 48, .55); flex: none; }
.dont-item h3 { font: 700 20px var(--f-ui); color: var(--ink); margin: 0 0 6px; }
.dont-item p { font: 400 15px/1.6 var(--f-body); color: rgba(45, 0, 69, .68); margin: 0; }
.dont-closing { display: flex; align-items: center; padding: 18px 0; border-top: 1px solid rgba(45, 0, 69, .12); }
.dont-closing p { font: 500 16px/1.6 var(--f-body); color: var(--ink); margin: 0; }
.dont-closing a { color: var(--magenta); text-decoration: none; border-bottom: 2px solid rgba(205, 35, 108, .3); }

/* work / case studies */
.case__art { height: 440px; border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.case__art a { display: block; width: 100%; height: 100%; }
.case__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case__art--a { background: linear-gradient(135deg, var(--ink), var(--electric)); }
.case__art--b { background: linear-gradient(135deg, var(--electric), var(--magenta)); }
.case__art .streak--a { position: absolute; inset: 0; background: linear-gradient(112deg, transparent 0 40%, rgba(255,255,255,.12) 40% 43%, transparent 43% 58%, rgba(228,114,183,.5) 58% 61%, transparent 61% 74%, rgba(255,255,255,.08) 74% 76%, transparent 76%); }
.case__art .streak--b { position: absolute; inset: 0; background: linear-gradient(112deg, transparent 0 36%, rgba(255,255,255,.12) 36% 39%, transparent 39% 54%, rgba(45,0,69,.42) 54% 58%, transparent 58% 72%, rgba(255,255,255,.08) 72% 74%, transparent 74%); }
.case__art .watermark { position: absolute; left: 44px; bottom: 24px; font: 900 150px/1 var(--f-head); color: rgba(255,255,255,.14); letter-spacing: -.05em; }
.case__body { display: grid; grid-template-columns: 340px 1fr; gap: 56px; margin-top: 40px; }
.case__meta { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.case__meta dt { font: 600 18px var(--f-ui); color: rgba(45, 0, 69, .62); }
.case__meta dd { margin: 2px 0 0; font: 500 17px var(--f-body); color: var(--ink); }
.case__narrative { display: flex; flex-direction: column; gap: 26px; }
.case__step-label { font: 600 18px var(--f-ui); margin: 0 0 8px; }
.case__step p { font: 400 17px/1.66 var(--f-body); color: var(--body-ink); margin: 0; max-width: 60ch; }
.tag-title { font: 600 18px var(--f-ui); text-transform: uppercase; letter-spacing: .16em; margin: 0 0 14px; }
.case__title { font: 800 36px/1.1 var(--f-head); color: var(--ink); letter-spacing: -.02em; margin: 0 0 20px; }
.dashed-cta { border: 1px dashed rgba(45, 0, 69, .28); border-radius: 18px; padding: 48px 52px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.dashed-cta h2 { font: 800 30px/1.16 var(--f-head); color: var(--ink); letter-spacing: -.02em; margin: 0 0 10px; }
.dashed-cta p { font: 400 17px/1.62 var(--f-body); color: var(--body-ink); margin: 0; }
/* On a lamp band the panel is the frame, so drop the dashed box back to a plain
   layout row on the page gutter and flip the copy to light. */
.section-lamp > .dashed-cta { border: none; border-radius: 0; padding: 0 var(--pad); }
.on-lamp .dashed-cta h2 { color: var(--white); }
.on-lamp .dashed-cta p { color: rgba(255, 255, 255, .84); }
.on-lamp .dashed-cta p a { color: var(--lamp-accent); }

/* about */
.together-title { font: 800 42px/1.14 var(--f-head); color: var(--white); letter-spacing: -.02em; margin: 0 0 18px; }
.light-cta { position: relative; overflow: hidden; background: var(--canvas); border: 1px solid rgba(45,0,69,.12); border-radius: var(--radius-lg); padding: 56px; }
.light-cta__row { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.light-cta h2 { font: 800 34px/1.14 var(--f-head); color: var(--ink); letter-spacing: -.02em; margin: 0 0 10px; }
.light-cta p { font: 400 17px/1.62 var(--f-body); color: var(--body-ink); margin: 0; }
/* Same as .dashed-cta on a lamp band: the panel is the frame, so drop the box's
   own canvas background and border and flip the copy to light. */
.section-lamp > .light-cta { background: none; border: none; border-radius: 0; padding: 0 var(--pad); }
.on-lamp .light-cta h2 { color: var(--white); }
.on-lamp .light-cta p { color: rgba(255, 255, 255, .84); }

/* privacy */
.qa { border: 1px solid rgba(45, 0, 69, .12); border-radius: 16px; padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.qa h2 { font: 800 26px/1.16 var(--f-head); color: var(--ink); letter-spacing: -.02em; margin: 0 0 8px; }
.qa p { font: 400 16px/1.6 var(--f-body); color: var(--body-ink); margin: 0; }
/* Same as .dashed-cta on a lamp band: the panel is the frame, so drop the box's
   border and flip the copy to light. */
.section-lamp > .qa { border: none; border-radius: 0; padding: 0 var(--pad); }
.on-lamp .qa h2 { color: var(--white); }
.on-lamp .qa p { color: rgba(255, 255, 255, .84); }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 900px) {
  :root { --pad: 24px; }
  .nav { display: none; }
  .nav-toggle { display: flex; }
  /* The mobile drawer has its own CTA; logo + button + burger won't fit. */
  .site-header__left .btn { display: none; }
  .split { grid-template-columns: 1fr; }
  .split .seam { display: none; }
  .split__col--left, .split__col--right { padding-left: 0; padding-right: 0; }
  .hero__title { font-size: clamp(44px, 11vw, 78px); }
  .hero--lamp { min-height: 0; padding-bottom: 56px; }
  .hero__panel--split { grid-template-columns: 1fr; gap: 40px; }
  .hero__form { margin-right: 0; }
  /* Copy spans the full width here, so the scrim can't clear to the right. */
  .hero--lamp::after,
  .section-lamp::after { background: rgba(28, 0, 45, .55); }
  .page-title { font-size: clamp(40px, 10vw, 60px); }
  .grid-2, .footer-grid, .contact-grid, .bio, .intro-grid, .dont-grid, .case__body { grid-template-columns: 1fr; }
  .section-h--intro { max-width: none; }
  .case__art { height: 300px; }
  .combined-card, .light-cta, .form-panel { padding: 32px; }
  .form__row { grid-template-columns: 1fr; }
  .price-block { text-align: left; }
  .banner__row { flex-direction: column; align-items: flex-start; }
  .bio__art { max-width: 380px; }
  .bio--reverse > div:first-child, .bio--reverse > .bio__body { order: initial; }
  .bio__heading-right { text-align: left; margin-left: 0; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* apw-lamp handles prefers-reduced-motion itself: one still frame, no loop. */
}