@font-face{font-family:"Silk Flower";src:url(../fonts/silkflower-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Silk Flower Slant";src:url(../fonts/silkflower-slant.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Silk Flower Outline";src:url(../fonts/silkflower-outline.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Silka";src:url(../fonts/silka-light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Silka";src:url(../fonts/silka-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Silka";src:url(../fonts/silka-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Silka";src:url(../fonts/silka-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Silka";src:url(../fonts/silka-semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Silka";src:url(../fonts/silka-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Layout concept: a dark petrol night lit by slow-drifting sunset glows. One pinned,
   full-screen stage carries the big projects; the personal parts (polaroids, a hand-drawn
   lily for the process) sit on that night like things from a studio wall. Film grain over all. */
:root {
  color-scheme: dark;
  /* colour (from the Lily Bailey brand guidelines) */
  --night: #001a24;
  --petrol: #093747;
  --peach: #fbaf79;
  --coral: #ff8166;
  --cream: #ffd4a4;
  --magenta: #d22067;
  --glow: #e43b7f;
  --slate: #525a6b;
  --mist: #c4c4c4;
  --white: #ffffff;
  --text-soft: #b7c3c8;
  --paper: #f5eee4;
  --pencil: #24323b;

  /* type */
  --display: "Silk Flower", "Cormorant Garamond", Georgia, serif;
  --display-slant: "Silk Flower Slant", "Silk Flower", Georgia, serif;
  --outline: "Silk Flower Outline", "Silk Flower", Georgia, serif;
  --body: "Silka", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.3rem, 1.6rem + 3vw, 4.25rem);
  --step-4: clamp(3rem, 1.6rem + 6.2vw, 7.5rem);
  --step-5: clamp(2.6rem, 1rem + 7vw, 8rem);
  --title: clamp(2.3rem, 1.2rem + 3.2vw, 4rem);
  --lh: 1.2;
  --head-gap: clamp(1.75rem, 3.33vw, 4rem);   /* space between a heading and the text under it: 64 px on 1920 (Figma) */   /* line height of all running text: tight, as in Figma */   /* page and section headings on subpages: 64 px from ~1400 px wide */

  /* rhythm: generous on purpose, sections need air */
  --text-lead: clamp(1.125rem, 1rem + .55vw, 1.5rem);  /* 24px on desktop: lead copy + button labels */
  --space-section: clamp(8rem, 16vw, 15rem);
  --space-section-lg: clamp(10rem, 20vw, 19rem);

  /* grid from Figma: 10 columns, 1 column of margin each side, running text spans 5 columns */
  --gutter: clamp(16px, 10vw - 8px, 192px);
  --max: 1920px;
  --col: calc(min(100vw, 1920px) / 10);
  --measure: calc(var(--col) * 5);
}
@media (max-width: 960px) { :root { --measure: 100%; } }
:root {
  --radius-btn: 1.15rem;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; font-variant-ligatures: inherit; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
  background: var(--night);
  color: var(--white);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
.page { position: relative; overflow: clip; }  /* keeps the glows from adding scroll space */
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--peach);
}

/* ---------- film grain over the whole site ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.4' intercept='-.7'/><feFuncG type='linear' slope='2.4' intercept='-.7'/><feFuncB type='linear' slope='2.4' intercept='-.7'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  background-size: 220px;
  opacity: .055;
  animation: grain 3.2s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* ---------- glows (drift with a little inertia, see script) ---------- */
.glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(120vw, 1920px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(251,175,121,.62) 0%, rgba(255,129,102,.34) 22%, rgba(210,32,103,.08) 42%, rgba(210,32,103,.02) 52%, rgba(0,26,36,0) 62%);
  --edge: calc(-1 * min(60vw, 960px) - 2vw);
  will-change: transform;
}
.glow::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background-image: var(--grain); background-size: 180px; opacity: .35; mix-blend-mode: overlay;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 55%);
          mask-image: radial-gradient(circle, #000 0%, transparent 55%);
}

/* ---------- buttons (brand button system) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: clamp(3.4rem, 2.7rem + 1vw, 4rem); padding: 0 clamp(2rem, 1.4rem + 1.4vw, 2.9rem);
  border: 0; border-radius: 23px;
  font: 600 var(--text-lead)/1 var(--body); letter-spacing: -.03em; text-decoration: none;
  color: var(--white); background: var(--magenta);
  box-shadow: 0 0 16px 5px var(--glow), inset 0 0 10px 6px var(--coral);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
  cursor: pointer;
}
.btn:hover {
  background: var(--cream); color: var(--night);
  box-shadow: 0 0 16px 5px var(--glow), inset 0 0 11px 6px var(--coral), inset 0 0 0 3px var(--coral);
}
.btn:active { transform: translateY(1px); }
.btn--ghost { background: var(--night); font-weight: 400; }
@media (max-width: 640px) {
  .btn { min-height: 3.4rem; padding: 0 1.9rem; border-radius: 19px;
    box-shadow: 0 0 13px 4px var(--glow), inset 0 0 8px 5px var(--coral); }
  .btn:hover { box-shadow: 0 0 13px 4px var(--glow), inset 0 0 9px 5px var(--coral), inset 0 0 0 3px var(--coral); }
}
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled {
  background: rgba(0, 26, 36, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 5.5rem; }
.logo { display: inline-flex; color: var(--white); }
.logo svg { width: clamp(150px, 14vw, 210px); height: auto; }
.nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.nav a { font-weight: 700; font-size: 1rem; text-decoration: none; padding-block: .3rem; transition: color .25s ease; }
.nav a:hover, .nav a:focus-visible { color: var(--peach); }
.menu-btn { display: none; }

@media (max-width: 760px) {
  .menu-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: none; border: 0; color: var(--white); font: 700 1rem var(--body); padding: .5rem 0; cursor: pointer;
  }
  .menu-btn__bars { width: 22px; height: 10px; position: relative; }
  .menu-btn__bars::before, .menu-btn__bars::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, top .3s ease;
  }
  .menu-btn__bars::before { top: 0; }
  .menu-btn__bars::after { top: 8px; }
  .site-header.is-open .menu-btn__bars::before { top: 4px; transform: rotate(45deg); }
  .site-header.is-open .menu-btn__bars::after { top: 4px; transform: rotate(-45deg); }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 1.1rem;
    padding: 1.5rem var(--gutter) 2rem; background: rgba(0, 26, 36, .97);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav a { font-family: var(--display); font-weight: 400; font-size: 2rem; }
  .site-header:not(.is-open) .nav { display: none; }
  .site-header.is-open { background: rgba(0, 26, 36, .97); }
}

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; z-index: 1; }
.hero__media { position: relative; overflow: hidden; height: min(56.25vw, 90svh); min-height: 520px; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 55% 6%;
  animation: hero-settle 2.6s cubic-bezier(.2,.7,.2,1) both;
}
.hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--night) 0%, rgba(0,26,36,.82) 16%, rgba(0,26,36,0) 52%),
    linear-gradient(to bottom, rgba(0,26,36,.65) 0%, rgba(0,26,36,0) 22%),
    radial-gradient(120% 90% at 50% 45%, rgba(0,26,36,0) 55%, rgba(0,26,36,.55) 100%);
}
.hero__title { position: absolute; inset: auto 0 0 0; z-index: 3; padding-bottom: clamp(1.5rem, 3.5vw, 3.5rem); text-align: center; }
.hero h1 {
  font-family: var(--outline); font-size: clamp(2.4rem, 1rem + 4.6vw, 6rem); line-height: 1.05; letter-spacing: -.005em;
  color: var(--white);
}
.hero h1 { -webkit-text-stroke: .2px currentColor; -webkit-font-smoothing: auto; }
.hero h1 .line { display: inline-block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; vertical-align: bottom; }
.hero h1 .line > span { display: block; animation: reveal-up 1.3s cubic-bezier(.16,.84,.24,1) both; animation-delay: .25s; }
.hero h1 .line + .line > span { animation-delay: .4s; }

.hero__intro {
  position: relative; z-index: 3;
  --even: clamp(6.5rem, 18vw - 4rem, 24rem);
  padding-block: calc(var(--even) - clamp(1.5rem, 3.5vw, 3.5rem)) var(--even);
}
.hero__lede {
  font-family: var(--display); font-size: clamp(1.75rem, 1.1rem + 2vw, 3.1rem); line-height: var(--lh);
  color: var(--white); max-width: var(--measure);
}
.hero-wrap { position: relative; }
/* glow box reaches far below the intro; its top edge is faded out with a mask, so the glow
   is at zero exactly where the hero ends — no seam at any viewport size or scroll offset */
.hero-glows {
  position: absolute; inset: 0 0 calc(-1 * min(60vw, 960px)) 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(7rem, 16vw, 18rem));
          mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(7rem, 16vw, 18rem));
}
.hero-glows .glow { left: var(--edge); top: calc(100% - min(60vw, 960px) - min(60vw, 960px) + 14rem); }

@keyframes hero-settle { from { transform: scale(1.07); filter: brightness(.7); } to { transform: scale(1); filter: brightness(1); } }
@keyframes reveal-up { from { transform: translateY(105%); } to { transform: none; } }

@media (max-width: 860px) {
  .hero__media { width: 100%; height: min(125vw, 86svh); min-height: 420px; }
  .hero__media img { object-position: 60% 50%; }
}

/* ---------- pinned work stage ---------- */
.work { position: relative; z-index: 1; height: calc(100svh + (var(--n) - 1) * 115svh + 35svh); }
.work__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--night); }
.tile {
  position: absolute; inset: 0; display: block; text-decoration: none; color: var(--white);
  --r: 1; --dim: 0;
  clip-path: inset(calc((1 - var(--r)) * 100%) 0 0 0);
}
.tile + .tile { --r: 0; }
.tile__img { position: absolute; inset: 0; overflow: hidden; }
.tile__img img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translateY(calc((1 - var(--r)) * 14%)) scale(calc(1.12 - var(--r) * .12));
  filter: saturate(.94);
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(0,26,36,.95) 0%, rgba(0,26,36,.6) 24%, rgba(0,26,36,0) 52%),
    linear-gradient(to bottom, rgba(0,26,36,.5) 0%, rgba(0,26,36,0) 18%);
}
.tile::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--night); opacity: calc(var(--dim) * .6); pointer-events: none; }
.tile__content { position: absolute; inset: auto 0 0 0; z-index: 3; padding-bottom: calc(clamp(7.75rem, 15vh, 10rem) + clamp(1.2rem, 2.8vh, 2rem)); }
.tile__text { display: grid; gap: 1rem; }
/* outline → filled on hover: one font, one layout. The outline is a stroke on the same glyphs,
   so the line breaks can never differ between the two states. */
.tile__title { position: relative; font-family: var(--display); font-size: var(--step-5); line-height: 1; letter-spacing: -.01em; overflow-wrap: anywhere; justify-self: start;
  color: transparent; -webkit-text-stroke: .016em var(--white); transition: color .6s ease; }
.tile:hover .tile__title, .tile:focus-visible .tile__title { color: var(--white); }
.tile__line { font-size: var(--step-1); line-height: var(--lh); color: rgba(255,255,255,.86); max-width: var(--measure); }

.work__bottom { position: absolute; z-index: 5; inset: auto 0 0 0; padding-bottom: clamp(1.5rem, 3vh, 2.25rem); display: grid; gap: clamp(1rem, 2vh, 1.4rem); pointer-events: none; }
.work__bottom > * { pointer-events: auto; }
.marquees { position: relative; height: 1.9rem; }
.marquee { position: absolute; inset: 0; overflow: hidden; opacity: 0; display: flex; align-items: center; }
.marquee:first-child { opacity: 1; }
.marquee__track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.marquee__track span { display: flex; align-items: center; white-space: nowrap; font-style: italic; font-size: clamp(.95rem, .88rem + .3vw, 1.15rem); color: var(--white); }
.marquee__track svg { width: 1.9em; height: 1.9em; margin-inline: clamp(1.75rem, 3.5vw, 3.25rem); color: var(--white); flex: none; }
@keyframes marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.work__bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.5rem); }
.work__bar {
  position: relative; display: block; height: 1rem; padding: 0; border: 0; background: none; cursor: pointer;
}
.work__bar::before, .work__bar::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; }
.work__bar::before { right: 0; background: rgba(255,255,255,.22); }
.work__bar::after { width: calc(var(--fill, 0) * 100%); background: var(--peach); }

.work--static { height: auto; }
.work--static .work__stage { position: relative; height: auto; overflow: visible; }
.work--static .tile { position: relative; height: 100svh; clip-path: none; --r: 1; }
.work--static .work__bottom { display: none; }

/* ---------- about + polaroids ---------- */
.about { position: relative; padding-block: var(--space-section-lg) clamp(3rem, 6vw, 6rem); }
.about .glow { left: var(--edge); top: calc(50% - min(60vw, 960px)); }
.about__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4rem clamp(2rem, 6vw, 6rem); align-items: center;
}
.about__copy { display: grid; gap: 1.5rem; align-content: start; }
.about__copy h2 { font-family: var(--display); font-size: var(--step-3); line-height: 1.02; }
.about__copy h2 + p { margin-top: calc(var(--head-gap) - 1.5rem); }
.about__copy h2 em { font-family: var(--display-slant); font-style: normal; color: var(--peach); }
.about__copy p { color: var(--text-soft); max-width: var(--measure); font-size: var(--text-lead); line-height: var(--lh); }
.about__copy p strong { color: var(--white); font-weight: 500; }
.about__copy .btn { justify-self: start; margin-top: 2.75rem; }
.about__photos { display: grid; gap: 1.5rem; }
.about__photos .hint { justify-self: center; }
.about__photos .hint svg { transform: scaleY(-1); }
.hint { font-family: var(--display-slant); font-size: var(--step-1) !important; color: var(--cream) !important; display: flex; align-items: center; gap: .6rem; }
.hint svg { width: 46px; height: 24px; flex: none; }

.board { position: relative; height: clamp(560px, 50vw, 720px); }
.polaroid {
  --w: clamp(12rem, 15.5vw, 16.5rem);
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  margin: 0; padding: .7rem .7rem 0; background: var(--paper); border-radius: 3px;
  transform: rotate(var(--r));
  box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 18px 34px -10px rgba(0,0,0,.6);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.polaroid::before {
  content: ""; position: absolute; left: 50%; top: -14px; width: 42%; height: 26px;
  transform: translateX(-50%) rotate(var(--tape, -3deg));
  background: rgba(255, 212, 164, .78);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 82% 0, 88% 9%, 94% 0, 100% 10%, 100% 90%, 94% 100%, 88% 91%, 82% 100%, 18% 100%, 12% 92%, 6% 100%, 0 90%);
}
.polaroid__photo { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--pencil); }
.polaroid__photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(.95) sepia(.06); pointer-events: none; }
.polaroid__photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 18px rgba(0,0,0,.25); }
.polaroid figcaption {
  font-family: var(--display-slant); color: var(--pencil); font-size: 1.15rem; line-height: 1.2;
  text-align: center; padding: .65rem .25rem .8rem;
}
.can-drag .polaroid { cursor: grab; }
.can-drag .polaroid:hover { transform: rotate(0deg) translateY(-6px) scale(1.03); box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 30px 50px -12px rgba(0,0,0,.65); }
.polaroid.is-dragging { cursor: grabbing; transform: rotate(0deg) scale(1.06); transition: box-shadow .2s ease; box-shadow: 0 40px 60px -14px rgba(0,0,0,.7); }

@media (max-width: 960px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .board { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.25rem; padding-top: 1rem; }
  .polaroid { position: relative; left: auto; top: auto; width: 100%; max-width: 17rem; justify-self: center; }
  .about__photos .hint { display: none !important; }
}

/* ---------- process: a lily growing from seed to bloom ---------- */
.process { position: relative; padding-block: clamp(5rem, 9vw, 9rem) clamp(3rem, 6vw, 6rem); }
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.section-head h2 { font-family: var(--display); font-size: var(--step-3); line-height: 1.02; }
.section-head p { color: var(--text-soft); max-width: var(--measure); }
.section-head__text { display: grid; gap: 1.5rem; }
.section-head__text .eyebrow { margin-bottom: -.75rem; }
.section-head__text h2 + p { margin-top: calc(var(--head-gap) - 1.5rem); }
.section-head__text p { max-width: var(--measure); font-size: var(--text-lead); line-height: var(--lh); }
.growth { --g: clamp(1.5rem, 3vw, 3.5rem); }
.growth__steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4rem var(--g); }
.growth__fig { position: relative; margin-bottom: clamp(1.25rem, 2.2vw, 2rem); }
.growth__soil { position: absolute; top: 75%; left: calc(var(--g) * -.5); width: calc(100% + var(--g)); height: 16px; transform: translateY(-50%); overflow: visible; fill: none; stroke: var(--white); stroke-linecap: round; }
.growth__soil path { vector-effect: non-scaling-stroke; stroke-width: 1.2; opacity: .5; }
.growth__soil .soil-fine { stroke-width: .8; opacity: .28; }
.growth__fig .growth__soil .ln { transition-duration: 1.3s; }
.growth__art { position: relative; display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--white); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.growth__fig .ln { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.5,.1,.25,1) var(--d, 0s); }
.growth__art .fine { stroke-width: .9; opacity: .85; }
.growth__art .speck { opacity: .45; }
.growth__art .ac { stroke: var(--peach); transition-delay: calc(var(--d, 0s) + .7s); }
.growth__art .back { opacity: .7; }
.growth__art .pt { fill: var(--night); }
.growth__text { display: grid; gap: .55rem; transition: opacity 1s ease calc(var(--d, 0s) + .5s), transform 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0s) + .5s); }
.growth__num { font-family: var(--outline); font-size: clamp(2.2rem, 1.6rem + 1.2vw, 3rem); line-height: 1; -webkit-text-stroke: .3px currentColor; color: var(--white); }
.growth__step h3 { font-family: var(--body); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; color: var(--peach); }
.growth__step p { color: var(--text-soft); line-height: var(--lh); max-width: 26ch; }
.growth__step.reveal-pending { opacity: 1; transform: none; }
.growth__step.reveal-pending .ln { stroke-dashoffset: 1px; transition: none; }
.growth__step.reveal-pending .growth__text { opacity: 0; transform: translateY(18px); transition: none; }
.process__foot { display: flex; justify-content: flex-end; margin-top: clamp(3rem, 6vw, 5rem); }
@media (max-width: 1024px) { .growth__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .growth__steps { row-gap: 3rem; } .growth__step p { font-size: .95rem; } }

/* ---------- expertise accordion (from Figma) ---------- */
.services { position: relative; padding-block: clamp(5rem, 9vw, 9rem) var(--space-section); }
.services .glow { right: var(--edge); top: calc(20% - min(60vw, 960px)); }
.services .wrap { position: relative; z-index: 1; }
.services .section-head { margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.expertise { position: relative; z-index: 1; }
.exp { position: relative; }
.expertise::before, .exp::after { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; height: 1px; background: rgba(255,255,255,.18); }
.expertise::before { top: 0; }
.exp::after { bottom: 0; }
.exp__head {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%;
  padding-block: clamp(2.4rem, 4.4vw, 4rem); background: none; border: 0; color: var(--white); cursor: pointer; text-align: left;
}
.exp__title { position: relative; font-family: var(--display); font-size: var(--step-3); line-height: 1.05;
  color: transparent; -webkit-text-stroke: .016em var(--mist); transition: color .5s ease, -webkit-text-stroke-color .5s ease; }
.exp.is-open .exp__title, .exp__head:hover .exp__title { color: var(--white); -webkit-text-stroke-color: var(--white); }
.exp__icon { position: relative; width: 2.2rem; height: 2.2rem; flex: none; }
.exp__icon::before, .exp__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--white); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.exp__icon::after { transform: rotate(90deg); }
.exp.is-open .exp__icon::after { transform: rotate(0deg); }
.exp__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.2,.7,.2,1); }
.exp.is-open .exp__panel { grid-template-rows: 1fr; }
.exp__inner { overflow: hidden; min-height: 0; margin-inline: -32px; padding-inline: 32px; }  /* room for the button glow */
.exp__body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: end;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease .1s, transform .7s cubic-bezier(.2,.7,.2,1) .1s;
}
.exp.is-open .exp__body { opacity: 1; transform: none; }
.exp__main { display: grid; gap: 1.6rem; min-width: 0; }
.exp__desc { font-size: var(--text-lead); line-height: var(--lh); color: var(--text-soft); max-width: var(--measure); }
.exp__subs { margin-top: clamp(.75rem, 1.6vw, 1.6rem); font-style: italic; color: var(--white); max-width: var(--measure); padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.22); line-height: var(--lh); }
.exp__label { font-weight: 700; margin-top: clamp(1.6rem, 2.8vw, 2.5rem); }
.exp__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 15rem)); gap: clamp(1rem, 2.4vw, 2.75rem); }
.ex-card { display: block; text-decoration: none; color: var(--white); background: rgba(9, 55, 71, .55); overflow: hidden; }
.ex-card__img { aspect-ratio: 262 / 364; overflow: hidden; }
.ex-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.ex-card:hover .ex-card__img img { transform: scale(1.05); }
.ex-card__cap { display: grid; gap: .1rem; padding: .8rem 1rem .9rem; }
.ex-card__cap b { font-size: .95rem; }
.ex-card__cap i { font-size: .8rem; color: var(--text-soft); }
.exp__actions { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: flex-end; }
@media (max-width: 960px) {
  .exp__body { grid-template-columns: minmax(0, 1fr); }
  .exp__actions { justify-content: flex-start; }
  .exp__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .ex-card { flex: 0 0 62%; scroll-snap-align: start; }
}

/* ---------- clients marquee ---------- */
.clients { position: relative; z-index: 1; padding-bottom: clamp(4rem, 7vw, 6.5rem); }
.clients h2 { font-family: var(--display); font-size: var(--step-3); line-height: 1.02; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.logo-rail { position: relative; overflow: hidden; padding-block: clamp(2rem, 4vw, 3.25rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.logo-rail__lines::before, .logo-rail__lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.18); }
.logo-rail__lines { position: relative; }
.logo-rail__lines::before { top: 0; } .logo-rail__lines::after { bottom: 0; }
.logo-rail__track { display: flex; width: max-content; animation: marquee 55s linear infinite; }
.logo-rail__set { display: flex; align-items: center; }
.client {
  display: flex; align-items: center; justify-content: center; flex: none;
  height: calc(var(--h, 2) * clamp(.72rem, .55rem + .35vw, 1rem)); margin-inline: clamp(1.75rem, 3.6vw, 3.75rem);
  opacity: .6;
}
.client img { display: block; height: 100%; width: auto; }

/* ---------- testimonials ---------- */
.testimonials { position: relative; z-index: 1; padding-bottom: calc(var(--space-section) + clamp(1.5rem, 3vw, 3rem)); }
.quotes { position: relative; background: rgba(9, 55, 71, .62); border-radius: 32px; padding: clamp(2.25rem, 5.5vw, 5.5rem) clamp(1.5rem, 5.5vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; }
.quotes::before { content: "\201C"; position: absolute; right: clamp(1.5rem, 5vw, 5rem); top: clamp(1.25rem, 3vw, 3rem); font-family: var(--display); font-size: clamp(10rem, 22vw, 20rem); line-height: 1; color: var(--peach); opacity: .14; pointer-events: none; }
.quotes__stage { display: grid; }
.quote { grid-area: 1 / 1; display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); align-content: start; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1), visibility 0s linear .7s; visibility: hidden; }
.quote.is-active { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.quote blockquote { margin: 0; font-family: var(--body); font-weight: 600; font-size: clamp(1.25rem, .95rem + .9vw, 1.9rem); line-height: var(--lh); letter-spacing: -.01em; max-width: 42ch; }
.quote figcaption { display: grid; gap: .2rem; }
.quote figcaption b { font-size: var(--text-lead); }
.quote figcaption span { color: var(--text-soft); }
.quotes__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.qtab { position: relative; display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border: 0; border-radius: 18px; background: transparent; color: var(--white); font-family: var(--body); text-align: left; cursor: pointer; transition: background-color .3s ease; min-width: 0; }
.qtab:hover { background: rgba(255,255,255,.05); }
.qtab.is-active { background: rgba(255,255,255,.08); }
.qtab__avatar { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; background: var(--petrol); filter: saturate(.9); transition: box-shadow .3s ease; }
.qtab.is-active .qtab__avatar { box-shadow: 0 0 0 2px var(--cream); }
.qtab__who { display: grid; gap: .1rem; min-width: 0; }
.qtab__who b { font-size: .95rem; }
.qtab__who span { font-size: .8rem; color: var(--text-soft); line-height: var(--lh); }
.qtab__bar { position: absolute; left: 1rem; right: 1rem; bottom: .35rem; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; opacity: 0; }
.qtab.is-active .qtab__bar { opacity: 1; }
.qtab__bar::after { content: ""; position: absolute; inset: 0; background: var(--peach); transform-origin: left; transform: scaleX(0); }
.quotes.is-playing .qtab.is-active .qtab__bar::after { animation: qprogress 9s linear forwards; }
.quotes.is-paused .qtab.is-active .qtab__bar::after { animation-play-state: paused; }
@keyframes qprogress { to { transform: scaleX(1); } }
@media (max-width: 960px) { .quotes__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .qtab__who span { display: none; } .qtab { padding: .7rem; } .qtab__avatar { width: 2.6rem; height: 2.6rem; } }

/* ---------- CTA ---------- */
.cta { --word: clamp(5rem, 13.3vw, 16rem); --air: clamp(5rem, 9vw, 10rem); position: relative; text-align: center;
  padding-block: calc(var(--word) * .8 + var(--air)) calc(4.5rem + var(--word) * .8 + var(--air)); }
.cta .glow { left: var(--edge); top: calc(55% - min(60vw, 960px)); }
.cta__word {
  position: absolute; z-index: 0; font-family: var(--outline); color: var(--slate); line-height: .8;
  font-size: var(--word); pointer-events: none; user-select: none; white-space: nowrap; will-change: transform;
}
.cta__word--a { left: 0; top: 0; }
.cta__word--b { right: 0; bottom: 4.5rem; }
.cta__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(2rem, 3.5vw, 3rem); }
.cta h2 { font-family: var(--display); font-size: clamp(2.3rem, 1.2rem + 3vw, 4rem); line-height: 1.04; }
@media (min-width: 720px) { .cta h2 { white-space: nowrap; } }
@media (max-width: 719px) { .cta h2 { max-width: 14ch; } }
.cta .btn { min-height: clamp(3.6rem, 2.4rem + 2.4vw, 5.7rem); padding: 0 clamp(3.2rem, 8vw, 9.6rem); font-size: clamp(1.4rem, .8rem + 1.76vw, 2.25rem); border-radius: clamp(22px, 2.1vw, 34px); }

/* ---------- footer ---------- */
.site-footer {
  position: relative; z-index: 2; background: var(--petrol); border-radius: 60px 60px 0 0; overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem) calc(7.5rem + env(safe-area-inset-bottom, 0px));
}
/* footer follows the 10-column page grid: newsletter in columns 2-4, link columns in 6, 7, 8, 9 */
.footer__grid { --fg: clamp(1rem, 1.6vw, 2rem); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3.5rem var(--fg); }
.footer__brand { grid-column: 1 / 4; }
.footer__right { grid-column: 5 / 9; }
.footer__brand { display: grid; gap: 2.4rem; align-content: start; }
.footer .logo { color: var(--white); }
.footer__brand .logo svg { width: 190px; }
.newsletter { display: grid; gap: 1rem; max-width: 30rem; }
.newsletter h3 { font-family: var(--body); font-weight: 700; font-size: var(--step-2); letter-spacing: -.01em; margin-bottom: .6rem; }
.newsletter label[for="nl-email"] { font-size: 1rem; }
.newsletter input[type="email"] {
  width: 100%; height: 3.5rem; border: 0; border-radius: 5px; padding: 0 1rem;
  font: 400 1rem var(--body); color: var(--night); background: var(--white);
}
.newsletter input[type="email"]::placeholder { color: #9aa3a8; opacity: 1; }
.newsletter input[type="email"]:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.newsletter__legal { font-size: .78rem; line-height: var(--lh); color: var(--text-soft); margin-top: .5rem; }
.footer .newsletter__legal a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.newsletter__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: .4rem; }
.check { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; font-size: 1rem; }
.check input { appearance: none; -webkit-appearance: none; width: 1.1rem; height: 1.1rem; margin: 0; border: 1px solid var(--white); border-radius: 50%; display: grid; place-content: center; cursor: pointer; }
.check input::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--peach); transform: scale(0); transition: transform .2s ease; }
.check input:checked::before { transform: scale(1); }
.btn--tiny { min-height: 2.3rem; padding: 0 2.1rem; font-size: 1rem; border-radius: 10px; box-shadow: 0 0 12px 3px var(--glow), inset 0 0 8px 4px var(--coral); }
.btn--tiny:hover { box-shadow: 0 0 12px 3px var(--glow), inset 0 0 8px 4px var(--coral), inset 0 0 0 2px var(--coral); }
.newsletter { position: relative; }
.newsletter__msg { position: absolute; top: 100%; left: 0; margin-top: .6rem; font-size: .9rem; color: var(--cream); }
/* link columns size to their content and spread out: Contact starts in column 6, the last column ends exactly where "Contact" in the menu ends, gaps between columns are equal */
.footer__right { display: grid; grid-template-columns: repeat(4, auto); grid-template-rows: auto 1fr; justify-content: space-between; column-gap: var(--fg); row-gap: 3rem; min-width: 0; }
.footer__cols { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 2rem; align-content: start; }
.footer__cols ul { gap: .55rem; }
.footer__cols li, .footer__cols a { font-size: 1rem; line-height: var(--lh); }
.footer__cols .footer__mail { letter-spacing: -.025em; }
@media (min-width: 1181px) { .footer__bottom > * { white-space: nowrap; } }
@media (min-width: 1181px) and (max-width: 1366px) { .ar-long { display: none; } }
.footer h4 { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; }
.footer ul { display: grid; gap: .45rem; }
.footer a { text-decoration: none; color: var(--text-soft); transition: color .2s ease; }
.footer a:hover { color: var(--peach); }
.footer__cols li { color: var(--text-soft); }
/* bottom line sits on the same four columns as the links above: © under Contact, Terms under Expertise, Privacy under Links */
.footer__bottom {
  grid-column: 1 / -1; align-self: end; display: grid; grid-template-columns: subgrid; row-gap: .75rem; align-items: baseline;
  font-size: var(--step--1); line-height: 1; color: var(--mist); font-weight: 300; padding-bottom: 0;
}
.footer__bottom a { color: var(--mist); }
.footer__bottom > :first-child { grid-column: 1 / 3; }
.footer__bottom > .footer__link { grid-column: 4; justify-self: start; }
.footer__lily { position: absolute; left: 0; bottom: 0; width: clamp(14rem, 20vw, 24rem); height: auto; pointer-events: none; z-index: 0; }
.site-footer .wrap { position: relative; z-index: 1; }
@media (max-width: 1180px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } .footer__brand, .footer__right { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; row-gap: 2.5rem; } .footer__cols li { overflow-wrap: anywhere; } .footer__bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; } .footer__bottom > :first-child { grid-column: 1 / -1; } .footer__bottom > .footer__link { grid-column: auto; } .site-footer { padding-bottom: 9rem; } }

/* ---------- quiet motion ---------- */
.reveal-pending { opacity: 0; transform: translateY(28px); }
.reveal-in { transition: opacity 1s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
.polaroid.reveal-pending { opacity: 0; transform: translateY(30px) rotate(calc(var(--r) * 1.8)); }
.words .w { display: inline-block; }
.words.reveal-pending { opacity: 1; transform: none; }
.words.reveal-pending .w { opacity: 0; transform: translateY(.45em); filter: blur(4px); }
.words .w { transition: opacity .9s ease calc(var(--i) * 45ms), transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 45ms), filter .9s ease calc(var(--i) * 45ms); }
.polaroid { animation: sway 7s ease-in-out infinite; animation-delay: var(--sd, 0s); }
.polaroid:hover, .polaroid.is-dragging { animation-play-state: paused; }
@keyframes sway { 0%, 100% { rotate: 0deg; } 50% { rotate: .9deg; } }
.cta__word { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-pending, .reveal-pending * { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- small pages: 404, terms, privacy ---------- */
.lost { position: relative; min-height: min(100svh, 64rem); display: flex; align-items: center; padding-block: clamp(9rem, 14vw, 12rem) clamp(13rem, 24vw, 22rem); }
.lost .glow { left: var(--edge); top: calc(80% - min(60vw, 960px)); }
.lost__inner { position: relative; z-index: 2; width: 100%; }
.lost h1 { font-family: var(--display); font-size: var(--title); line-height: 1.05; max-width: 26ch; }
.lost__sub { margin-top: clamp(1.25rem, 2vw, 1.75rem); font-style: italic; font-size: var(--text-lead); line-height: var(--lh); max-width: 48ch; }
.lost .btn { margin-top: clamp(3rem, 6vw, 5.5rem); }
.lost__art { position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; align-items: flex-end; color: var(--slate); pointer-events: none; user-select: none; }
.lost__num { font-family: var(--outline); font-size: clamp(9rem, 3rem + 24vw, 31rem); line-height: .74; -webkit-text-stroke: .6px currentColor; margin-right: -.04em; }
.lost__hmm { position: relative; z-index: 1; font-family: var(--display); font-size: clamp(2.6rem, 1rem + 5.4vw, 8.5rem); line-height: .8; margin-right: -.35em; margin-bottom: .02em; }

.legal-hero { position: relative; padding-block: clamp(10rem, 17vw, 15rem) clamp(4rem, 8vw, 6.5rem); text-align: center; border-bottom: 1px solid rgba(255,255,255,.18); }
.legal-hero .glow { left: var(--edge); top: calc(15% - min(60vw, 960px)); }
.legal-hero__inner { position: relative; z-index: 1; }
.legal-hero h1 { font-family: var(--display); font-size: var(--title); line-height: 1.05; }
.legal-hero p { max-width: 34rem; margin: clamp(1.25rem, 2vw, 2rem) auto 0; font-size: var(--text-lead); line-height: var(--lh); }
.legal { position: relative; width: min(100% - 2 * var(--gutter), 48rem); margin-inline: auto; padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(6rem, 12vw, 11rem); }
.legal > *:not(.glow) { position: relative; z-index: 1; }
.legal .glow { right: calc(var(--edge) - (100vw - 100%) / 2); top: calc(100% - min(60vw, 960px) - 4rem); }
.legal__updated { font-size: .9rem; color: var(--text-soft); }
.legal h2 { font-family: var(--body); font-weight: 600; font-size: var(--step-1); letter-spacing: -.01em; margin: clamp(2.5rem, 4vw, 3.5rem) 0 1rem; }
.legal p, .legal li { color: var(--text-soft); line-height: var(--lh); }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 1rem; }
.legal ul { display: grid; gap: .75rem; }
.legal li { position: relative; padding-left: 1.4rem; }
.legal li::before { content: ""; position: absolute; left: .1rem; top: .78em; width: .45rem; height: 1px; background: var(--peach); }
.legal strong { color: var(--white); font-weight: 600; }
.legal a:not(.btn) { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal a:not(.btn):hover { color: var(--cream); }
.legal mark { background: rgba(251,175,121,.25); color: var(--white); padding: 0 .2em; border-radius: 3px; }
.legal__foot { display: flex; justify-content: flex-end; margin-top: clamp(3.5rem, 6vw, 5rem); }
@media (max-width: 640px) { .legal__foot { justify-content: flex-start; } }
.legal h3 { font-family: var(--body); font-weight: 600; font-size: var(--step-0); color: var(--white); margin: 1.75rem 0 .6rem; }
.legal h2 + p, .legal h2 + ul, .legal h3 + p, .legal h3 + ul { margin-top: 0; }

/* ---------- cookie consent ---------- */
.footer__link { background: none; border: 0; padding: 0; font: inherit; color: var(--mist); cursor: pointer; }
.footer__link:hover { color: var(--white); }
.cookie {
  position: fixed; z-index: 60; left: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); width: min(26rem, calc(100vw - 2rem));
  display: grid; gap: .9rem; padding: 1.4rem 1.5rem 1.3rem;
  background: var(--petrol); border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.cookie.is-in { opacity: 1; transform: none; }
.cookie[hidden] { display: none; }
.cookie__title { font-family: var(--display); font-size: 1.5rem; line-height: 1.1; }
.cookie__text { font-size: .9rem; line-height: var(--lh); color: var(--text-soft); }
.cookie__text a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.cookie__prefs { display: grid; gap: .8rem; padding-block: .35rem; border-block: 1px solid rgba(255,255,255,.12); }
.cookie__prefs[hidden] { display: none; }
.cookie__opt { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; cursor: pointer; font-size: .85rem; line-height: var(--lh); color: var(--text-soft); padding-block: .45rem; }
.cookie__opt strong { display: block; color: var(--white); font-weight: 600; font-size: .92rem; }
.cookie__opt input { appearance: none; -webkit-appearance: none; margin: .15rem 0 0; width: 2.1rem; height: 1.2rem; border-radius: 1rem; background: rgba(255,255,255,.18); position: relative; cursor: pointer; transition: background .25s ease; }
.cookie__opt input::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--white); transition: transform .25s ease; }
.cookie__opt input:checked { background: var(--coral); }
.cookie__opt input:checked::after { transform: translateX(.9rem); }
.cookie__opt input:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.cookie__actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; margin-top: .2rem; }
.cookie__actions .btn--tiny { padding: 0 1.15rem; font-size: .9rem; }
.cookie__link { margin-right: auto; background: none; border: 0; padding: 0; font: inherit; font-size: .9rem; color: var(--white); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie__link:hover { color: var(--cream); }
@media (max-width: 480px) { .cookie { left: .75rem; right: .75rem; width: auto; bottom: .75rem; } }
.legal__inline-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--white); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- intro: a glow rises, blends into a full peach screen, the logo draws itself,
   then the peach shrinks back into the sun of the hero photo ---------- */
@property --ir { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --isoft { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ix { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
@property --iy { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
.intro { display: none; }
.intro-on .intro {
  --ir: 130vmax; --isoft: 40vmax; --ix: 50%; --iy: 50%;
  display: block; position: fixed; inset: 0; z-index: 100; background-color: var(--night); cursor: pointer;
  transition: background-color .8s ease;
}
.intro-on body { overflow: hidden; }
html { scrollbar-gutter: stable; }   /* the page never shifts sideways when the intro releases the scrollbar */
.intro-hold .hero h1 .line > span { animation-play-state: paused; }   /* the photo settles under the intro, only the title waits */
.intro__fill {
  position: absolute; inset: 0; background: var(--peach);
  -webkit-mask-image: radial-gradient(circle at var(--ix) var(--iy), #000 calc(var(--ir) - var(--isoft)), transparent var(--ir));
          mask-image: radial-gradient(circle at var(--ix) var(--iy), #000 calc(var(--ir) - var(--isoft)), transparent var(--ir));
}
.intro__grain { position: absolute; inset: 0; pointer-events: none; opacity: .12; background-size: 256px; mix-blend-mode: multiply; }
.intro__art { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity .45s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.intro__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.intro__art--lily { width: min(44vh, 64vw); }
.intro__art--logo { width: min(540px, 74vw); }
[data-intro="lily"] .intro__art--logo, [data-intro="logo"] .intro__art--lily { display: none; }
.intro .ln { stroke-dasharray: 1 1; stroke-dashoffset: 1px; transition: stroke-dashoffset 1.1s cubic-bezier(.5,.1,.25,1); }
.intro.is-draw .ln { stroke-dashoffset: 0; }
.intro__lily { fill: none; stroke: var(--night); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.intro__lily .fine { stroke-width: .9; opacity: .8; }
.intro__lily .ac { stroke: var(--night); }
.intro__lily .back { opacity: .65; }
.intro__lily .pt { fill: var(--peach); }
.intro__logo { fill: var(--night); fill-opacity: 0; stroke: var(--night); stroke-width: 7; stroke-linejoin: round; }
.intro__logo .ln { transition: stroke-dashoffset 1s cubic-bezier(.5,.1,.25,1), fill-opacity .5s ease, stroke-opacity .5s ease; }
.intro.is-solid .intro__logo .ln { fill-opacity: 1; stroke-opacity: 0; }
/* ---- endings (the drawing of the logo is always the same) ---- */
.intro.is-exit { cursor: default; }   /* keeps catching clicks until it is gone, so nothing underneath is clicked by accident */
/* curtain: the whole peach panel with the logo lifts up */
.intro.is-exit.x-curtain { transform: translateY(-100%); transition: transform 1.1s cubic-bezier(.76,0,.24,1); }
.intro.is-exit.x-curtain .intro__art--logo { transform: translate(-50%, -50%) translateY(18vh); transition: transform 1.1s cubic-bezier(.76,0,.24,1); }
/* cut: a clean hard cut to the page */
.intro.is-exit.x-cut { display: none; }
/* fly: the logo travels into its place in the menu and turns white, the peach lifts away underneath */
.intro.is-exit.x-fly { background-color: transparent; }
.intro.is-exit.x-fly .intro__fill, .intro.is-exit.x-fly .intro__grain { transform: translateY(-100%); transition: transform 1s cubic-bezier(.76,0,.24,1) .05s; }
.intro.is-exit.x-fly .intro__art--logo { transition: left 1.05s cubic-bezier(.65,0,.25,1), top 1.05s cubic-bezier(.65,0,.25,1), width 1.05s cubic-bezier(.65,0,.25,1); }
.intro.is-exit.x-fly .intro__logo .ln { fill: var(--white); transition: fill .6s ease .25s; }
.intro-fly .site-header .logo { opacity: 0; }
/* split: the peach (and the logo with it) is cut in half, the halves slide apart */
.intro__half { position: absolute; inset: 0; overflow: hidden; transition: transform 1.1s cubic-bezier(.76,0,.24,1); }
.intro__half--top { clip-path: inset(0 0 50% 0); }
.intro__half--bottom { clip-path: inset(50% 0 0 0); }
.intro.is-exit.x-split { background-color: transparent; }
.intro.is-exit.x-split .intro__half--top { transform: translateY(-50%); }
.intro.is-exit.x-split .intro__half--bottom { transform: translateY(50%); }
/* film: projector look while the logo draws (moving grain, gate weave, flicker, vignette, a scratch),
   then the film advances to the next frame and the page flashes in like a fresh exposure */
.intro.x-film .intro__grain { opacity: .2; animation: film-grain .45s steps(1) infinite; }
.intro.x-film .intro__fill { animation: film-flicker 1.3s steps(1) infinite; }
.intro.x-film .intro__art--logo { animation: film-weave .9s steps(1) infinite; }
.intro.x-film::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 52%, rgba(70,25,5,.38) 100%); }
.intro.x-film::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 31%; width: 1px; background: rgba(40,15,5,.35); pointer-events: none; animation: film-scratch 2.2s steps(1) infinite; }
@keyframes film-grain { 0% { background-position: 0 0; } 20% { background-position: -47px 31px; } 40% { background-position: 63px -18px; } 60% { background-position: -22px -71px; } 80% { background-position: 39px 54px; } }
@keyframes film-flicker { 0% { filter: brightness(1); } 12% { filter: brightness(.95); } 19% { filter: brightness(1.03); } 33% { filter: brightness(.98); } 51% { filter: brightness(1.04); } 64% { filter: brightness(.94); } 78% { filter: brightness(1.01); } 90% { filter: brightness(.97); } }
@keyframes film-weave { 0% { transform: translate(-50%, -50%); } 22% { transform: translate(calc(-50% + 1px), calc(-50% - 1.5px)); } 41% { transform: translate(calc(-50% - 1px), calc(-50% + 1px)); } 63% { transform: translate(-50%, calc(-50% - 1px)); } 82% { transform: translate(calc(-50% + 1.5px), calc(-50% + .5px)); } }
@keyframes film-scratch { 0% { opacity: 0; left: 31%; } 14% { opacity: 1; left: 31.4%; } 28% { opacity: 0; } 55% { opacity: .8; left: 68%; } 63% { opacity: 0; } }
.intro.is-exit.x-film { transform: translateY(-100%); box-shadow: 0 2.2vh 0 #140b07; transition: transform .55s cubic-bezier(.7,0,.3,1); }
.film-in .hero__media { animation: film-expose .8s steps(1) both; }
@keyframes film-expose { 0% { filter: brightness(1.7) sepia(.25); } 18% { filter: brightness(1.15); } 30% { filter: brightness(1.4) sepia(.15); } 48% { filter: brightness(1.05); } 70% { filter: brightness(1.12); } 100% { filter: none; } }
/* light: a warm light leak, like the end of a roll of film, washes over the logo; the page appears
   out of the overexposure and slowly settles to its normal colours */
.intro__leak { position: absolute; z-index: 3; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, #ffe8cc 0%, #ffd6ad 30%, rgba(251,175,121,.85) 55%, rgba(251,175,121,.35) 78%, rgba(251,175,121,0) 100%); }
.intro.is-exit.x-light { background-color: transparent; }
/* the logo lingers and melts into the light, which blooms from the centre */
.intro.is-exit.x-light .intro__art--logo { animation: logo-melt .7s cubic-bezier(.4,0,.6,1) forwards; }
.intro.is-exit.x-light .intro__leak { animation: leak 1.45s cubic-bezier(.4,0,.3,1) forwards, leak-flicker .5s steps(1) infinite; }
.intro.is-exit.x-light .intro__fill, .intro.is-exit.x-light .intro__grain { animation: peach-out .62s ease .58s forwards; }   /* the peach dissolves while the light is at its brightest */
@keyframes peach-out { to { opacity: 0; } }
/* film texture: the same gently moving grain, flicker, dust and the odd scratch for the whole intro,
   only slightly stronger while the light washes over */
.intro.x-light .intro__grain { animation: film-grain-soft .5s steps(1) infinite; }
.intro__film { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background-size: 220px; mix-blend-mode: soft-light; }
.intro.x-light .intro__film { opacity: .2; animation: film-grain-soft .5s steps(1) infinite; }
.intro__film::before, .intro__film::after { content: ""; position: absolute; pointer-events: none; }
.intro.x-light::before { content: ""; position: absolute; z-index: 5; pointer-events: none; width: 3px; height: 3px; border-radius: 50%; left: 0; top: 0; background: transparent; animation: film-dust 2s steps(1) infinite; }
.intro.x-light::after { content: ""; position: absolute; z-index: 5; pointer-events: none; width: 1.5px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(178,82,38,0), rgba(178,82,38,.55) 15%, rgba(178,82,38,.4) 60%, rgba(178,82,38,0)); opacity: 0; animation: film-scratch-l 3s steps(1) infinite; }
@keyframes film-dust {
  0% { box-shadow: 23vw 31vh 1px 1px rgba(178,82,38,.6), 71vw 64vh 1px 0px rgba(178,82,38,.6), 48vw 12vh 1px 0px rgba(255,236,210,.7); }
  12% { box-shadow: 86vw 22vh 1px 0px rgba(178,82,38,.6); }
  22% { box-shadow: 64vw 22vh 1px 1px rgba(178,82,38,.6), 12vw 77vh 1px 0px rgba(178,82,38,.6), 39vw 46vh 1px 0px rgba(255,236,210,.7); }
  34% { box-shadow: 52vw 68vh 1px 1px rgba(178,82,38,.6), 91vw 12vh 1px 0px rgba(178,82,38,.6); }
  46% { box-shadow: 83vw 41vh 1px 1px rgba(178,82,38,.6), 36vw 58vh 1px 0px rgba(255,236,210,.7), 17vw 15vh 1px 0px rgba(178,82,38,.6); }
  57% { box-shadow: 0 0 0 0 transparent; }
  64% { box-shadow: 9vw 18vh 1px 1px rgba(178,82,38,.6), 67vw 33vh 1px 0px rgba(178,82,38,.6), 55vw 88vh 1px 0px rgba(178,82,38,.6); }
  76% { box-shadow: 41vw 82vh 1px 0px rgba(255,236,210,.7), 78vw 57vh 1px 1px rgba(178,82,38,.6); }
  88% { box-shadow: 44vw 36vh 1px 1px rgba(178,82,38,.6), 27vw 49vh 1px 0px rgba(178,82,38,.6), 6vw 62vh 1px 0px rgba(178,82,38,.6); }
}



@keyframes film-scratch-l { 0% { opacity: 0; } 8% { opacity: 1; left: 63%; } 14% { opacity: .8; left: 63.2%; } 18% { opacity: 0; } 62% { opacity: .9; left: 24%; } 67% { opacity: 0; } }
.intro.is-exit.x-light::before, .intro.is-exit.x-light::after { transition: opacity .6s ease .7s; }
.intro.is-exit.x-light .intro__film { animation: film-on 1.45s ease forwards, film-grain-soft .5s steps(1) infinite; }
@keyframes film-on { 0% { opacity: .2; } 30% { opacity: .3; } 65% { opacity: .27; } 100% { opacity: 0; } }
@keyframes film-grain-soft { 0% { background-position: 0 0; } 25% { background-position: -23px 15px; } 50% { background-position: 31px -9px; } 75% { background-position: -11px -27px; } }
@keyframes leak-flicker { 0% { filter: brightness(1); } 30% { filter: brightness(.94); } 55% { filter: brightness(1.04); } 80% { filter: brightness(.97); } }
@keyframes logo-melt { 0% { filter: blur(0); opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { filter: blur(14px); opacity: 0; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes leak {
  0% { opacity: 0; transform: scale(.15); }
  50% { opacity: .82; transform: scale(.85); }
  100% { opacity: 0; transform: scale(1.25); }
}
.light-in .hero__media, .light-in .hero__title { animation: light-settle 1.1s cubic-bezier(.2,.6,.2,1) both; }
@keyframes light-settle { from { filter: brightness(1.4) saturate(.8) sepia(.18); } to { filter: none; } }
@media (prefers-reduced-motion: reduce) { .intro.is-exit { display: none; } }

/* temporary switch to replay the intro while choosing a variant */
.intro-review { position: fixed; z-index: 110; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .4rem; padding: .35rem .4rem .35rem .8rem; border-radius: 999px; background: rgba(9,55,71,.92); border: 1px solid rgba(255,255,255,.15); font-size: .8rem; }
.intro-review span { color: var(--text-soft); margin-right: .2rem; }
.intro-review button { font: inherit; color: var(--white); background: rgba(255,255,255,.08); border: 0; border-radius: 999px; padding: .35rem .8rem; cursor: pointer; }
.intro-review button:hover, .intro-review button[aria-pressed="true"] { background: var(--coral); color: var(--night); }

/* testimonials on phones: avatars sit above the quote, the card is only as tall as the active quote */
@media (max-width: 640px) {
  .quotes { display: flex; flex-direction: column; padding-top: 1.5rem; }
  .quotes::before { top: auto; bottom: -2rem; font-size: 9rem; }
  .quotes__tabs { order: -1; grid-template-columns: repeat(4, auto); justify-content: start; gap: .6rem; margin: 0 0 2rem; }
  .qtab { padding: .3rem .3rem .75rem; border-radius: 50%; background: none !important; }
  .qtab__who { display: none; }
  .qtab__avatar { width: 3.1rem; height: 3.1rem; opacity: .55; transition: opacity .3s ease, box-shadow .3s ease; }
  .qtab.is-active .qtab__avatar { opacity: 1; }
  .qtab__bar { left: .55rem; right: .55rem; bottom: .2rem; }
  .quote { display: none; }
  .quote.is-active { display: grid; animation: qfade .6s ease both; }
  .quote figcaption b { font-size: 1.15rem; }
}
@keyframes qfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* the outlined "contact" words are links too: they fill in on hover */
a.cta__word { pointer-events: auto; text-decoration: none; color: transparent; font-family: var(--display); -webkit-text-stroke: 2.2px var(--slate); transition: color .45s ease, -webkit-text-stroke-color .45s ease; cursor: pointer; }
a.cta__word:hover { color: var(--slate); }

/* preview only: quick access to pages that have no menu link */
.hidden-pages { right: auto; left: 1rem; }
.hidden-pages a { color: var(--white); background: rgba(255,255,255,.08); border-radius: 999px; padding: .35rem .8rem; text-decoration: none; }
.hidden-pages a:hover, .hidden-pages a[aria-current="page"] { background: var(--coral); color: var(--night); }
@media (max-width: 640px) { .hidden-pages { bottom: auto; top: 5.5rem; left: .5rem; right: .5rem; flex-wrap: wrap; font-size: .75rem; border-radius: 1rem; } }

/* =====================================================================
   Subpages: work hub, case study, expertise, service, about, contact, blog
   Built from the same pieces as the homepage: night background, drifting
   glows, petrol panels, outline headlines and glowing buttons.
   ===================================================================== */

.nav a[aria-current="page"] { color: var(--peach); }
.section-title { font-family: var(--display); font-size: var(--title); line-height: 1.02; }
.section-title--center { text-align: center; }

/* shared prose */
.prose { display: grid; gap: 1.4rem; max-width: calc(var(--measure) + 4rem); }
.prose h2 { font-family: var(--display); font-size: var(--title); line-height: 1.04; margin-bottom: calc(var(--head-gap) - 1.4rem); }
.prose h3 { font-family: var(--body); font-weight: 700; font-size: var(--step-1); margin-top: .8rem; }
.prose p, .prose li { color: var(--text-soft); font-size: var(--text-lead); line-height: var(--lh); }
.prose a { color: var(--white); text-underline-offset: 3px; }
.prose strong { color: var(--white); font-weight: 600; }
.prose ul { display: grid; gap: .5rem; }
.prose ul li { position: relative; padding-left: 1.4rem; }
.prose ul li::before { content: ""; position: absolute; left: .1rem; top: .8em; width: .5rem; height: 1px; background: var(--peach); }
.prose--center { margin-inline: auto; text-align: center; justify-items: center; }

.tag { display: inline-flex; align-items: center; min-height: 1.5rem; padding: .1rem .7rem; border-radius: 999px; background: rgba(255,255,255,.12); font-size: .75rem; font-style: italic; color: var(--white); white-space: nowrap; }
.tag--concept { background: none; border: 1px solid var(--peach); color: var(--peach); font-style: normal; letter-spacing: .04em; }
.tag--draft { background: var(--coral); color: var(--night); font-style: normal; font-weight: 600; }

/* ---------- photo hero (case studies, expertise, about, services) ---------- */
.phero { position: relative; isolation: isolate; z-index: 1; }
.phero__media { position: relative; overflow: hidden; height: min(52vw, 84svh); min-height: 440px; background: var(--petrol); }
.phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: hero-settle 2.2s cubic-bezier(.2,.7,.2,1) both; }
.phero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, var(--night) 0%, rgba(0,26,36,.78) 18%, rgba(0,26,36,0) 58%),
              linear-gradient(to bottom, rgba(0,26,36,.6) 0%, rgba(0,26,36,0) 24%);
}
.phero__title { position: absolute; inset: auto 0 0 0; z-index: 2; padding-bottom: clamp(2rem, 4.5vw, 4.5rem); display: grid; gap: .9rem; justify-items: start; }
.phero h1 { font-family: var(--display); font-size: var(--title); line-height: 1; letter-spacing: -.01em; max-width: 16ch; }
.phero h1 .line { display: inline-block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.phero h1 .line > span { display: block; animation: reveal-up 1.2s cubic-bezier(.16,.84,.24,1) both; animation-delay: .2s; }
.phero__eyebrow { animation: fade-in 1s ease .1s both; }
.phero__sub { font-size: var(--text-lead); color: var(--text-soft); animation: fade-in 1s ease .5s both; }
.phero--center .phero__title { inset: 0; align-content: center; justify-items: center; text-align: center; padding-top: 5.5rem; }
.phero--center h1 { max-width: 18ch; }
/* crisp photo edge, no fade into the page (About); a soft shade only behind the title */
.phero--crisp .phero__media { height: clamp(28rem, 40vw, 48rem); min-height: 0; }
.page-about .phero--crisp .phero__media img { object-position: 22% 45%; }
.phero--crisp .phero__media::before { background: radial-gradient(60% 85% at 12% 100%, rgba(0,26,36,.62), rgba(0,26,36,0) 70%), linear-gradient(to bottom, rgba(0,26,36,.55) 0%, rgba(0,26,36,0) 22%); }
@media (max-width: 640px) { .phero--crisp .phero__media::before { background: linear-gradient(to top, rgba(0,26,36,.78) 0%, rgba(0,26,36,.4) 55%, rgba(0,26,36,.55) 100%); } }
.phero--crisp h1, .phero--crisp .phero__eyebrow, .phero--crisp .phero__sub { text-shadow: 0 2px 24px rgba(0,26,36,.45); }
.phero--center .phero__media::before { background: radial-gradient(70% 60% at 50% 55%, rgba(0,26,36,.55), rgba(0,26,36,.15) 70%), linear-gradient(to top, var(--night) 0%, rgba(0,26,36,0) 40%), linear-gradient(to bottom, rgba(0,26,36,.6) 0%, rgba(0,26,36,0) 24%); }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- plain hero (contact, blog) ---------- */
.thero { position: relative; text-align: center; padding-block: clamp(9.5rem, 15vw, 14rem) clamp(5.5rem, 10vw, 9.5rem); border-bottom: 1px solid rgba(255,255,255,.18); }
.thero .glow { left: var(--edge); top: calc(10% - min(60vw, 960px)); }
.thero__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(2rem, 4.2vw, 4.25rem); }
.thero h1 { font-family: var(--display); font-size: var(--title); line-height: 1; animation: fade-in 1s ease both; }
.thero__intro { max-width: 33ch; font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem); line-height: var(--lh); color: var(--text-soft); animation: fade-in 1s ease .15s both; }

/* ---------- centred lead paragraph ---------- */
.lead { position: relative; padding-block: clamp(6rem, 11vw, 11rem); }
.lead .glow { right: var(--edge); top: calc(70% - min(60vw, 960px)); }
.lead .wrap { position: relative; z-index: 1; }
.lead__text { max-width: 36ch; margin-inline: auto; text-align: center; font-size: clamp(1.3rem, 1rem + 1vw, 2rem); line-height: var(--lh); color: var(--text-soft); }

/* ---------- big rounded feature image ---------- */
.feature { position: relative; padding-bottom: clamp(5rem, 9vw, 9rem); }
.feature .glow { left: var(--edge); top: calc(40% - min(60vw, 960px)); }
.feature .wrap { position: relative; z-index: 1; display: grid; gap: clamp(4rem, 8vw, 8rem); }
.feature__img { margin: 0; border-radius: clamp(18px, 2vw, 32px); overflow: hidden; aspect-ratio: 16 / 8; background: var(--petrol); }
.feature__img img, .feature__img video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- filters ---------- */
.filters-bar { border-top: 1px solid rgba(255,255,255,.18); }
.filters { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: 0 1.4rem; border-radius: 14px;
  border: 0; background: var(--night); color: var(--white); font: 400 1rem/1 var(--body); cursor: pointer;
  box-shadow: 0 0 10px 2px var(--glow), inset 0 0 6px 3px var(--coral);
  transition: background-color .25s ease, color .25s ease;
}
.chip:hover { background: rgba(210,32,103,.35); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--magenta); font-weight: 600; }
.filter-empty { padding-block: 3rem; color: var(--text-soft); }
[data-filter-group] > .is-filtered { display: none !important; }

/* ---------- work strips ---------- */
.strips { display: grid; }
.strip { position: relative; display: block; overflow: hidden; height: clamp(22rem, 34vw, 38rem); color: var(--white); text-decoration: none; border-top: 1px solid rgba(255,255,255,.08); }
.strip__img { position: absolute; inset: 0; }
.strip__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .8s ease; filter: brightness(.82); }
.strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,26,36,.88) 0%, rgba(0,26,36,.35) 38%, rgba(0,26,36,0) 65%); pointer-events: none; }
.strip:hover .strip__img img, .strip:focus-visible .strip__img img { transform: scale(1.04); filter: brightness(1); }
/* hover: photos from the case study flick through on top of the cover */
.strip__img .strip__flick { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; will-change: transform, opacity; }
.strip__img .strip__flick.is-on { opacity: 1; }
/* the slow drift keeps running while a photo fades out, so nothing ever snaps back */
.strip__img .strip__flick.is-moving { animation: strip-drift 5.5s linear forwards; }
.strip__img .strip__flick.is-moving.is-alt { animation-name: strip-drift-alt; }
@keyframes strip-drift { from { transform: scale(1.1) translate(-1.5%, .8%); } to { transform: scale(1.02) translate(1.5%, -.8%); } }
@keyframes strip-drift-alt { from { transform: scale(1.02) translate(1.5%, .8%); } to { transform: scale(1.1) translate(-1.5%, -.8%); } }
.strip__text { position: absolute; inset: auto 0 0 0; z-index: 1; display: grid; gap: .5rem; justify-items: start; padding-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.strip__title { font-family: var(--body); font-weight: 700; font-size: clamp(1.25rem, .9rem + 1.1vw, 2.1rem); line-height: 1.2; letter-spacing: -.01em; max-width: 34ch; }
.strip__title span { font-weight: 700; }
.strip__line { font-style: italic; color: var(--text-soft); max-width: 60ch; }

/* ---------- small tiles ---------- */
.more { position: relative; padding-block: clamp(6rem, 11vw, 10rem) clamp(2rem, 4vw, 4rem); }
.more .glow { right: var(--edge); top: calc(30% - min(60vw, 960px)); }
.more .wrap { position: relative; z-index: 1; }
.more__head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.more__rule { height: 1px; background: rgba(255,255,255,.18); margin-block: clamp(2rem, 3.5vw, 3rem) clamp(2.5rem, 4.5vw, 4rem); position: relative; z-index: 1; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.wtile { display: block; color: var(--white); text-decoration: none; background: rgba(9, 55, 71, .55); overflow: hidden; }
.wtile__media { position: relative; aspect-ratio: 2 / 3; overflow: hidden; display: grid; place-items: center; }
.wtile__media img:not(.wtile__logo) { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.wtile__logo { width: 62%; max-height: 42%; object-fit: contain; }
.wtile__word { font-family: var(--display); font-size: clamp(1.4rem, 1rem + 1vw, 2.1rem); text-align: center; padding: 1rem; line-height: 1.05; }
.wtile--petrol .wtile__media { background: var(--petrol); }
.wtile--night .wtile__media { background: #0a2632; }
.wtile--coral .wtile__media { background: linear-gradient(160deg, #ff8166, #d22067); }
.wtile--magenta .wtile__media { background: linear-gradient(160deg, #d22067, #6d1a4b); }
.wtile--peach .wtile__media { background: linear-gradient(160deg, var(--cream), var(--peach)); color: var(--night); }
/* name and scope slide up over the image on hover */
.wtile { position: relative; overflow: hidden; transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease; }
a.wtile:hover, a.wtile:focus-visible, div.wtile:hover { transform: translateY(-8px) scale(1.025); box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 22px rgba(251,175,121,.18); z-index: 2; }
.wtile__media img:not(.wtile__logo), .wtile__logo { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.wtile:hover .wtile__media img:not(.wtile__logo) { transform: scale(1.08); }
.wtile:hover .wtile__logo { transform: scale(1.08) translateY(-6%); }
.wtile__cap { position: absolute; inset: auto 0 0 0; z-index: 1; display: grid; gap: .25rem; padding: 2.75rem 1rem 1rem; background: linear-gradient(to top, rgba(0,26,36,.92) 0%, rgba(0,26,36,.7) 55%, rgba(0,26,36,0) 100%); transform: translateY(101%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.wtile:hover .wtile__cap, .wtile:focus-visible .wtile__cap { transform: none; }
.wtile__cap b { font-size: 1rem; line-height: 1.15; }
.wtile__cap i { font-size: .82rem; font-style: normal; color: var(--text-soft); line-height: var(--lh); }
@media (hover: none) { .wtile__cap { transform: none; padding-top: 2rem; } }
@media (max-width: 1180px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- case study ---------- */
.case-intro { position: relative; }
.case-intro .glow { left: var(--edge); top: calc(60% - min(60vw, 960px)); }
/* text starts where the logo starts; the lighter panel runs to the right edge of the screen */
.case-intro__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 31%); }
.case-intro__text { display: grid; gap: 1.4rem; align-content: center; padding-block: clamp(4rem, 8vw, 8rem); padding-right: clamp(2rem, 5vw, 6rem); }
.case-intro__text p { font-size: var(--text-lead); line-height: var(--lh); max-width: var(--measure); }
.case-intro__text p + p { color: var(--text-soft); }
.case-intro__side { --bleed: calc(var(--gutter) + max(0px, (100vw - var(--max)) / 2)); margin-right: calc(-1 * var(--bleed)); background: var(--petrol); padding: clamp(3rem, 6vw, 6rem) var(--bleed) clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 4.5rem); display: grid; gap: 2.2rem; align-content: start; }
.case-intro__side h2 { font-family: var(--body); font-weight: 700; font-size: var(--step-1); margin-bottom: 1.15rem; }
.case-intro__side ul { display: grid; gap: .5rem; }
.case-intro__side li { color: var(--text-soft); line-height: var(--lh); }
@media (max-width: 960px) {
  .case-intro__inner { grid-template-columns: minmax(0, 1fr); }
  .case-intro__text { padding-right: 0; }
  .case-intro__side { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

.cblock { position: relative; margin: 0; }
.cblock--image { overflow: hidden; }
.cblock--image img { width: 100%; height: auto; max-height: 92svh; object-fit: cover; }
.cblock--short img { max-height: 70svh; }
.cblock--pair { display: grid; grid-template-columns: 1fr 1fr; }
.cblock--pair figure { margin: 0; aspect-ratio: 1 / .92; overflow: hidden; background: var(--petrol); }
.cblock--pair img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .cblock--pair { grid-template-columns: 1fr; } }
.cblock--text { padding-block: clamp(6rem, 11vw, 11rem); }
.cblock--text:nth-of-type(odd) .glow { right: var(--edge); top: calc(50% - min(60vw, 960px)); }
.cblock--text:nth-of-type(even) .glow { left: var(--edge); top: calc(50% - min(60vw, 960px)); }
.cblock__text { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; display: grid; gap: 1.4rem; text-align: center; justify-items: center; }
.cblock__text { width: min(100% - 2 * var(--gutter), 60rem) !important; }
.cblock__text h2 { font-family: var(--body); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.9rem, .9rem + 3vw, 4rem); line-height: 1.05; white-space: nowrap; margin-bottom: calc(var(--head-gap) - 1.4rem); }
@media (max-width: 640px) { .cblock__text h2 { white-space: normal; } }
.cblock__text p { font-size: clamp(1.15rem, .85rem + 1.1vw, 2rem); line-height: var(--lh); color: var(--text-soft); }
/* photos, pairs and slideshows that follow each other sit together without a gap; a slideshow with a title gets room above */
.cblock--slider.cblock--titled { padding-top: clamp(5rem, 9vw, 9rem); }
.cblock--slider .section-title { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.case .cblock--slider .section-title { font-family: var(--body); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.9rem, .9rem + 3vw, 4rem); line-height: 1.05; white-space: nowrap; }
@media (max-width: 640px) { .case .cblock--slider .section-title { white-space: normal; } }
/* case study slideshow: taller, photo close to 5:4 */
.case .slider { min-height: 0; }
.case .slider__media { aspect-ratio: 5 / 4; }
.cblock--quote { padding-block: clamp(7rem, 13vw, 14rem) clamp(6rem, 11vw, 11rem); }
.bigquote { margin: 0 auto; max-width: 58rem; display: grid; gap: 2rem; position: relative; }
.bigquote::before { content: "\201C"; position: absolute; left: -.08em; top: -.52em; font-family: var(--display); font-size: clamp(8rem, 16vw, 14rem); line-height: 1; color: var(--peach); opacity: .2; pointer-events: none; }
.bigquote blockquote { margin: 0; position: relative; font-family: var(--body); font-weight: 600; font-size: clamp(1.35rem, 1rem + 1.2vw, 2.2rem); line-height: var(--lh); letter-spacing: -.01em; }
.bigquote figcaption { display: flex; align-items: center; gap: 1rem; }
.bigquote figcaption > span { display: grid; gap: .15rem; }
.bigquote figcaption span span { color: var(--text-soft); font-size: .95rem; }
.bigquote__avatar { width: 3.75rem; height: 3.75rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cream); }
/* case study testimonial: lighter panel like the homepage, quote mark top right */
.bigquote--panel { max-width: none; background: rgba(9, 55, 71, .62); border-radius: 32px; padding: clamp(3rem, 6vw, 6rem) clamp(1.75rem, 8vw, 9rem); }
.bigquote--panel::before { left: auto; right: clamp(1.5rem, 5vw, 5rem); top: clamp(1rem, 2.5vw, 2.5rem); }
.bigquote--panel blockquote { max-width: 46ch; }

/* ---------- slider: image + numbered petrol panel ---------- */
.slider { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 32%); min-height: clamp(26rem, 44vw, 46rem); }
.slider__media { position: relative; overflow: hidden; background: var(--petrol); }
.slider__img { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.slider__img.is-active { opacity: 1; }
.slider__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s ease-out; }
.slider__img.is-active img { transform: scale(1); }
.slider__panel { position: relative; background: var(--petrol); padding: clamp(2.5rem, 5vw, 5rem) clamp(4rem, 6vw, 6.5rem) clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4.5rem); display: grid; }
.slider__slides { display: grid; }
.slider__slide { grid-area: 1 / 1; display: grid; align-content: center; gap: 1.2rem; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1), visibility 0s linear .6s; }
.slider__slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }
.slider__label { font-size: .8rem; letter-spacing: .08em; color: var(--text-soft); }
.slider__slide h3 { font-family: var(--body); font-weight: 700; font-size: var(--step-2); line-height: 1.15; }
.slider__slide p { color: var(--text-soft); line-height: var(--lh); max-width: 34ch; }
.slider__num { font-family: var(--outline); font-size: clamp(3.5rem, 2rem + 3vw, 5.5rem); line-height: 1; color: var(--mist); margin-top: clamp(1rem, 3vw, 3rem); -webkit-text-stroke: .3px currentColor; }
.slider__arrow { position: absolute; top: 50%; z-index: 2; width: 3.2rem; height: 4.2rem; margin-top: -2.1rem; display: grid; place-items: center; background: none; border: 0; color: var(--white); cursor: pointer; transition: transform .3s ease, opacity .3s ease; }
.slider__arrow svg { width: 1.4rem; height: 2.4rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.slider__arrow--prev { left: clamp(.5rem, 2vw, 2rem); }
.slider__arrow--next { right: clamp(.25rem, 1.2vw, 1.5rem); }
.slider__arrow--prev:hover { transform: translateX(-3px); }
.slider__arrow--next:hover { transform: translateX(3px); }
@media (max-width: 860px) {
  .slider { grid-template-columns: minmax(0, 1fr); }
  .slider__media { aspect-ratio: 4 / 3; }
  .slider__panel { padding-bottom: 4.5rem; }
  .slider__arrow { top: auto; bottom: 1rem; margin-top: 0; }
  .slider__arrow--prev { left: auto; right: 4.5rem; }
}

/* ---------- expertise / service ---------- */
.split { position: relative; padding-block: clamp(2rem, 4vw, 4rem) clamp(6rem, 11vw, 10rem); }
.split .glow { right: var(--edge); top: calc(40% - min(60vw, 960px)); }
.split__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(3rem, 7vw, 8rem); align-items: center; }
.split__img { margin: 0; border-radius: clamp(18px, 2vw, 28px); overflow: hidden; aspect-ratio: 4 / 4.4; }
.split__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) { .split__grid { grid-template-columns: minmax(0, 1fr); } .split__img { aspect-ratio: 4 / 3; } }
.disciplines { position: relative; padding-block: clamp(3rem, 6vw, 6rem); }
.disciplines .section-title { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.expertise--small .exp__head { padding-block: clamp(1.4rem, 2.6vw, 2.3rem); }
.expertise--small .exp__title { font-size: var(--step-2); }
.exp__body--simple { display: block; padding-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.others { position: relative; padding-block: clamp(5rem, 9vw, 9rem) clamp(2rem, 4vw, 4rem); }
.others .glow { left: var(--edge); top: calc(40% - min(60vw, 960px)); }
.others .wrap { position: relative; z-index: 1; }
.others .section-title { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.scards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); }
.scard { position: relative; overflow: hidden; display: grid; gap: 1rem; align-content: start; justify-items: start; min-height: clamp(15rem, 20vw, 18rem); padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--petrol); color: var(--white); text-decoration: none; transition: transform .4s cubic-bezier(.2,.7,.2,1), background-color .4s ease; }
.scard:hover { transform: translateY(-4px); background: #0c4257; }
.scard h3 { position: relative; z-index: 1; font-family: var(--body); font-weight: 700; font-size: var(--step-1); }
.scard p { position: relative; z-index: 1; color: var(--text-soft); }
.scard .btn { position: relative; z-index: 1; margin-top: .5rem; }
.scard .footer__lily { left: auto; right: -1rem; width: 70%; opacity: .5; }
@media (max-width: 960px) { .scards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { position: relative; padding-block: clamp(6rem, 11vw, 10rem) clamp(2rem, 4vw, 4rem); }
.faq .glow { right: var(--edge); top: calc(30% - min(60vw, 960px)); }
.faq .wrap { position: relative; z-index: 1; }
.faq .section-title { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.faq__list { border-top: 1px solid rgba(255,255,255,.18); }
.faq__item { border-bottom: 1px solid rgba(255,255,255,.18); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; padding-block: clamp(1.4rem, 2.4vw, 2rem); background: none; border: 0; color: var(--white); font: 500 var(--step-1)/1.35 var(--body); text-align: left; cursor: pointer; }
.faq__q:hover span:first-child { color: var(--cream); }
.faq__icon { width: 1.6rem; height: 1.6rem; }
.faq__item.is-open .exp__icon::after { transform: rotate(0deg); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2,.7,.2,1); }
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__inner { overflow: hidden; min-height: 0; }
.faq__inner p { max-width: var(--measure); padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); color: var(--text-soft); font-size: var(--text-lead); line-height: var(--lh); }

/* ---------- about ---------- */
.story { position: relative; padding-block: clamp(6rem, 11vw, 10rem); }
.story .glow { right: var(--edge); top: calc(40% - min(60vw, 960px)); }
.story .wrap { position: relative; z-index: 1; }
.story__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(3rem, 7vw, 8rem); align-items: start; }
.story__grid--media { align-items: center; }
.story__img { margin: 0; border-radius: clamp(18px, 2vw, 28px); overflow: hidden; aspect-ratio: 4 / 4.3; }
.story__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) { .story__grid { grid-template-columns: minmax(0, 1fr); } }
.timeline { display: grid; gap: 1.6rem; padding-left: 1.6rem; border-left: 1px solid rgba(255,255,255,.22); margin-top: .5rem; }
.timeline li { position: relative; display: grid; gap: .2rem; }
.timeline li::before { content: ""; position: absolute; left: calc(-1.6rem - 4.5px); top: .35rem; width: 8px; height: 8px; border-radius: 50%; background: var(--peach); box-shadow: 0 0 0 4px var(--night); }
.timeline__when { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--peach); }
.timeline b { font-weight: 600; font-size: 1.05rem; }
.timeline li > span:last-child:not(.timeline__when) { color: var(--text-soft); font-size: .95rem; line-height: var(--lh); }
.values { position: relative; padding-top: clamp(6rem, 11vw, 10rem); }
.values .glow { left: var(--edge); top: calc(20% - min(60vw, 960px)); }
.values > .wrap { position: relative; z-index: 1; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

/* ---------- contact ---------- */
.enquiry { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 8vw, 7rem); border-bottom: 1px solid rgba(255,255,255,.18); }
.enquiry__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem clamp(2rem, 6vw, 7rem); }
.enquiry__col { display: flex; flex-direction: column; gap: 1.35rem; }
.field.field--grow { flex: 1 1 auto; display: flex; flex-direction: column; gap: .5rem; }
.field--grow textarea { flex: 1 1 auto; }
.field { display: grid; gap: .5rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-size: .95rem; padding: 0; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 3.1rem; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.55); border-radius: 8px;
  background: rgba(255,255,255,.03); color: var(--white); font: 400 1rem/1.4 var(--body); transition: border-color .2s ease, background-color .2s ease;
}
.field textarea { resize: vertical; min-height: 10rem; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--white) 50%), linear-gradient(135deg, var(--white) 50%, transparent 50%); background-position: calc(100% - 1.3rem) 55%, calc(100% - .95rem) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field select option { background: var(--night); }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.4); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--cream); background-color: rgba(255,255,255,.06); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--coral); }
.field.is-invalid legend { color: var(--coral); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.chips { display: flex; flex-wrap: wrap; gap: 1rem .9rem; padding: .5rem .3rem .2rem; }
.chip--check { position: relative; min-height: 2.4rem; padding: 0 1.1rem; font-size: .92rem; white-space: nowrap; box-shadow: 0 0 8px 1px var(--glow), inset 0 0 5px 2px var(--coral); }
.field .chip--check { padding: 0 1.35rem; }
.chip--check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip--check:has(input:checked) { background: var(--magenta); font-weight: 600; }
.chip--check:has(input:focus-visible) { outline: 2px solid var(--cream); outline-offset: 3px; }
/* the button's top edge lines up with the consent line; the extra margin keeps the consent exactly where it was */
.enquiry__foot { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; row-gap: 1.5rem; margin-top: calc(1.1rem + clamp(3.4rem, 2.7rem + 1vw, 4rem) - 2.5rem - 1px); }
.enquiry__foot .check { display: flex; }
.enquiry__foot .btn { justify-self: end; min-width: min(100%, 22rem); }
.enquiry__foot .check a { color: var(--white); text-underline-offset: 2px; }
.enquiry__legal { margin-top: .6rem; font-size: .82rem; color: var(--text-soft); }
.enquiry__msg { grid-column: 1 / -1; color: var(--cream); min-height: 1.5em; }
.enquiry__msg.is-error { color: var(--coral); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 860px) { .enquiry__form { grid-template-columns: minmax(0, 1fr); } .enquiry__foot { grid-template-columns: minmax(0, 1fr); margin-top: 1.1rem; } .enquiry__foot .btn { justify-self: stretch; } .field--grow textarea { min-height: 10rem; } }
@media (max-width: 480px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

.steps { position: relative; padding-block: clamp(6rem, 11vw, 10rem); }
.steps .glow { right: var(--edge); top: calc(40% - min(60vw, 960px)); }
.steps .wrap { position: relative; z-index: 1; }
.steps .section-title { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.steps__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: auto; gap: clamp(.75rem, 1.4vw, 1.25rem); }
.step { position: relative; overflow: hidden; display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; row-gap: .6rem; min-height: clamp(15rem, 19vw, 19rem); padding: clamp(1.25rem, 2vw, 2rem); background: var(--petrol); }
.step h3 { align-self: end; line-height: 1.2; }
.step__num { font-family: var(--outline); font-size: clamp(3rem, 2rem + 2.5vw, 4.75rem); line-height: 1; color: var(--mist); -webkit-text-stroke: .3px currentColor; margin-bottom: auto; }
.step h3 { position: relative; z-index: 1; margin-top: clamp(2.5rem, 5vw, 4.5rem); font-family: var(--body); font-weight: 700; font-size: var(--step-1); }
.step p { position: relative; z-index: 1; color: var(--text-soft); font-size: .95rem; line-height: var(--lh); }
.step .footer__lily { left: -1.1rem; right: auto; bottom: -1.1rem; width: 82%; }
@media (max-width: 1180px) { .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps__list { grid-template-columns: minmax(0, 1fr); } .step { min-height: 0; } .step h3 { margin-top: 1rem; } .step .footer__lily { width: 13rem; } }

.direct { position: relative; padding-top: clamp(4rem, 8vw, 7rem); }
.direct .section-title { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.direct__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 40%); height: clamp(34rem, 42vw, 50rem); }
.direct__img { margin: 0; overflow: hidden; background: var(--petrol); }
.direct__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.direct__panel { background: var(--petrol); padding: clamp(2.5rem, 5vw, 5rem) var(--gutter) clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4.5vw, 5rem); display: grid; align-content: center; }
/* small heading sits well above the title, as in Figma */
.direct__eyebrow { font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--text-soft); margin-bottom: clamp(2.5rem, 5vw, 6rem); }
.direct__panel h3 { font-family: var(--body); font-weight: 700; font-size: var(--step-2); line-height: 1.05; margin-bottom: clamp(1.75rem, 2.2vw, 2.5rem); }
.direct__panel dl { margin: 0; display: grid; gap: clamp(1.4rem, 2.2vw, 2.5rem); }
.direct__panel dt { font-size: .9rem; font-weight: 700; color: var(--white); margin-bottom: .45rem; }
.direct__panel dd { margin: 0; font-size: 1.1rem; line-height: var(--lh); color: var(--text-soft); }
.direct__panel a { color: var(--text-soft); text-underline-offset: 3px; transition: color .2s ease; }
.direct__panel a:hover { color: var(--white); }
@media (max-width: 860px) { .direct__grid { grid-template-columns: minmax(0, 1fr); height: auto; } .direct__img { aspect-ratio: 4 / 3; } .direct__panel { padding-inline: var(--gutter); } }

/* ---------- blog ---------- */
.blog-list { padding-bottom: clamp(9rem, 18vw, 18rem); }
.blog-list .filters { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.blog-list .pcards { padding-top: clamp(2.5rem, 5vw, 4rem); }
.blog-list .filters + .wrap .pcards { padding-top: 0; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
.pcard { display: grid; grid-template-rows: auto 1fr; color: var(--white); text-decoration: none; background: rgba(9, 55, 71, .55); overflow: hidden; }
.pcard__img { aspect-ratio: 16 / 10.5; overflow: hidden; background: var(--petrol); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .pcard__img img { transform: scale(1.04); }
.pcard__body { display: grid; align-content: space-between; gap: 1.6rem; padding: 1.2rem 1.4rem 1.3rem; }
.pcard h3 { font-family: var(--body); font-weight: 700; font-size: 1.1rem; line-height: var(--lh); }
.pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .78rem; font-style: italic; color: var(--text-soft); }
.pcard__tags { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 960px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pcards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- blog post ---------- */
/* header photo: about 650 px including the menu on a 1920 screen (Figma), and always short enough
   that the photo and the whole title block fit on one screen */
.post__cover { height: clamp(17rem, min(34vw, 58svh), 40.625rem); overflow: hidden; background: var(--petrol); }
.post__cover img { width: 100%; height: 100%; object-fit: cover; }
.post__head { position: relative; }
.post__head .glow { left: var(--edge); top: calc(50% - min(60vw, 960px)); }
/* title starts where the logo starts, the author block ends where "Contact" ends */
.post__head-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 31%); }
.post__title { display: grid; gap: 1.4rem; align-content: center; padding-block: clamp(2.5rem, 4.2vw, 5rem); padding-right: clamp(2rem, 4vw, 5rem); }
.post__title h1 { font-family: var(--display); font-size: var(--title); line-height: 1.04; max-width: 20ch; }
.post__tags { display: flex; gap: .5rem; flex-wrap: wrap; }
/* the lighter panel runs to the right edge of the screen and the author sits in its middle */
.post__author { --bleed: calc(var(--gutter) + max(0px, (100vw - var(--max)) / 2)); display: grid; place-content: center; margin-right: calc(-1 * var(--bleed)); padding: 2.5rem 1.5rem; background: var(--petrol); }
.post__author-inner { display: grid; justify-items: center; gap: .4rem; text-align: center; }
.post__avatar { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; margin-bottom: .5rem; }
.post__author time { color: var(--text-soft); font-size: .95rem; }
@media (max-width: 860px) {
  .post__head-inner { grid-template-columns: minmax(0, 1fr); }
  .post__title { padding-right: 0; }
  .post__author { justify-content: start; margin-inline: calc(-1 * var(--gutter)); padding: 1.5rem var(--gutter); }
  .post__author-inner { grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 1rem; row-gap: .1rem; justify-items: start; text-align: left; }
  .post__avatar { grid-row: 1 / 3; width: 3rem; height: 3rem; margin: 0; align-self: center; }
}

/* article blocks: text, full-width photo, photo in the text, two photos side by side.
   Photos that follow each other sit together without a gap. */
.post__body { --pgap: clamp(4rem, 13vw, 16rem); padding-bottom: clamp(4rem, 9.5vw, 11.5rem); }
.pblock { margin: 0; }
.pblock + .pblock { margin-top: var(--pgap); }
.pblock--text + .pblock--text { margin-top: 1.4rem; }
.pblock--media + .pblock--media { margin-top: 0; }
.post__body > .pblock--text:first-child { margin-top: var(--pgap); }
.pblock--text { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; max-width: none; }
.pblock--text > :first-child { margin-top: 0; }
.pblock--text h2 { margin-top: 1.6rem; margin-bottom: calc(var(--head-gap) - 1.4rem); font-size: var(--step-2); }
.pblock--text img { width: 100%; height: auto; border-radius: 14px; margin-block: 1rem; }
.pblock--text em { color: var(--cream); }
.pblock--full { overflow: hidden; }
.pblock--full img { width: 100%; height: auto; max-height: 92svh; object-fit: cover; }
/* photos in the text: 255–1664 px of the 1920 px Figma frame, centred */
.pblock--inset { width: min(100% - 2 * var(--gutter), var(--col) * 7.34); margin-inline: auto; }
.pblock--inset.pblock--image { overflow: hidden; }
.pblock--inset.pblock--image img { width: 100%; height: auto; max-height: 90svh; object-fit: cover; }
.pblock--pair { display: grid; grid-template-columns: 1fr 1fr; }
.pblock--pair figure { margin: 0; aspect-ratio: 705 / 792; overflow: hidden; background: var(--petrol); }
.pblock--pair img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .pblock--pair { grid-template-columns: 1fr; } }
.post__share-wrap { padding-bottom: clamp(3rem, 6vw, 5rem); }
.post__share-wrap:last-child { padding-bottom: clamp(9rem, 18vw, 18rem); }   /* no recent posts below: same room above the footer as on the blog page */
.post__share { width: min(100%, 46rem); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 1rem 1rem 1.6rem; border: 1px solid rgba(255,255,255,.4); border-radius: 14px; }
.post__share > span { font-size: 1.1rem; }
.post__share-links { display: flex; gap: .4rem; background: var(--white); border-radius: 8px; padding: .35rem .6rem; }
.post__share-links a, .post__share-links button { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; background: none; color: var(--night); border-radius: 6px; cursor: pointer; transition: background-color .2s ease; }
.post__share-links a:hover, .post__share-links button:hover { background: rgba(0,26,36,.1); }
.post__share-links svg { width: 1.15rem; height: 1.15rem; }

/* ---------- mobile tweaks ---------- */
@media (max-width: 640px) {
  .phero__media { height: 78svh; min-height: 420px; max-height: 640px; }
  .strip { height: 24rem; }
  .post__share { flex-direction: column; align-items: flex-start; }
}

/* subpages: give the closing "contact" section room to breathe */
body:not(.page-index) main > .cta { margin-top: clamp(5rem, 11vw, 11rem); }

/* glows always sit behind panels, photos and cards, never on top of them */
.direct__grid, .enquiry__form, .steps__list, .slider, .strips, .strip, .tiles, .pcards, .scards,
.cblock--image, .cblock--pair, .cblock--quote .wrap, .post__cover, .post__body, .post__share-wrap, .pblock--media,
.filters-bar, .blog-list .wrap, .faq .wrap, .feature__img, .story__img, .split__img { position: relative; z-index: 1; }

/* photos drift slightly inside their frames while scrolling (see pages.js) */
.px-frame { overflow: hidden; }
.px-frame > img, .px-frame > picture img { scale: var(--px-scale, 1.12); will-change: translate; }
@media (prefers-reduced-motion: reduce) { .px-frame > img { scale: 1; translate: none !important; } }

/* subpages: shared homepage components use the same heading size as everything else (64 px on desktop) */
body:not(.page-index) .section-head h2, body:not(.page-index) .expertise:not(.expertise--small) .exp__title, body:not(.page-index) .cta h2 { font-size: var(--title); }

/* ---------- thank-you pages ---------- */
.thanks .eyebrow { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.thanks__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin-top: clamp(3rem, 6vw, 5.5rem); }
.thanks__actions .btn { margin-top: 0; }

/* ---------- links page (own "link in bio") ---------- */
.links { position: relative; min-height: 100svh; display: grid; place-items: start center; padding: clamp(3rem, 8vw, 5.5rem) var(--gutter) 2.5rem; }
.links .glow { left: var(--edge); top: calc(30% - min(60vw, 960px)); }
.links__inner { position: relative; z-index: 1; width: min(100%, 31rem); display: grid; justify-items: center; text-align: center; }
.links__avatar { display: block; width: 7.5rem; height: 7.5rem; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--petrol), 0 0 28px rgba(251,175,121,.28); }
.links__avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08) translateX(-4%); }   /* photo sits a bit further left inside the circle */
.links__name { margin-top: 1.4rem; font-family: var(--display); font-size: clamp(2.2rem, 1.6rem + 1.6vw, 2.8rem); line-height: 1.05; }
.links__intro { margin-top: .8rem; color: var(--text-soft); line-height: var(--lh); }
.links__list { list-style: none; margin: clamp(2rem, 5vw, 2.75rem) 0 0; padding: 0; width: 100%; display: grid; gap: .9rem; }
.links__btn { display: grid; gap: .2rem; padding: 1.1rem 1.5rem; border-radius: var(--radius-btn); color: var(--white); text-decoration: none; font-weight: 600; transition: transform .25s ease, box-shadow .25s ease; }
.links__btn small { font-weight: 400; font-size: .85rem; }
.links__btn--main { background: var(--magenta); box-shadow: 0 0 18px 2px var(--glow), inset 0 0 6px 2px var(--coral); }
.links__btn--main small { color: rgba(255,255,255,.85); }
.links__btn:hover { transform: translateY(-2px); }
/* cards: featured case study and latest journal post */
.links__card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 1.1rem; padding: .7rem 1.2rem .7rem .7rem; border-radius: var(--radius-btn); background: var(--petrol); color: var(--white); text-decoration: none; text-align: left; border: 1px solid transparent; transition: border-color .25s ease, transform .25s ease; }
.links__card:hover { border-color: var(--peach); transform: translateY(-2px); }
.links__card-img { display: block; aspect-ratio: 1; border-radius: calc(var(--radius-btn) - .4rem); overflow: hidden; background: var(--night); }
.links__card-img img { width: 100%; height: 100%; object-fit: cover; }
.links__card-text { display: grid; gap: .25rem; min-width: 0; }
.links__card-text small { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--peach); }
.links__card-text b { font-size: 1.05rem; line-height: 1.15; }
.links__card-text span { font-size: .88rem; line-height: var(--lh); color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* "footer": lighter block with the logo and icon links */
.links__foot { width: 100%; margin-top: .9rem; padding: 1.75rem 1.5rem 1.6rem; border-radius: clamp(18px, 2vw, 28px); background: var(--petrol); display: grid; justify-items: center; gap: 1.3rem; }
.links__logo svg { width: 150px; }
.links__icons { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.links__icons a { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .8rem; border: 1px solid rgba(255,255,255,.28); color: var(--white); transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.links__icons a:hover { color: var(--night); background: var(--peach); border-color: var(--peach); }
.links__icons svg { width: 1.2rem; height: 1.2rem; }
/* business email card: icon instead of a photo */
.links__card-icon { display: grid; place-items: center; aspect-ratio: 1; border-radius: calc(var(--radius-btn) - .4rem); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--peach); }
.links__card-icon svg { width: 2rem; height: 2rem; }
.links__card--mail b { overflow-wrap: anywhere; }
@media (max-width: 380px) { .links__intro br { display: none; } }

/* ---------- Expertise: "Let's shift" table ---------- */
.shift { position: relative; padding-block: clamp(6rem, 11vw, 10rem); }
.shift .glow { right: var(--edge); top: calc(50% - min(60vw, 960px)); }
.shift .wrap { position: relative; z-index: 1; }
.shift__table { margin-top: clamp(2.5rem, 4vw, 4rem); border-top: 1px solid rgba(255,255,255,.22); }
.shift__row { display: grid; grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr); align-items: center; gap: 1rem; padding-block: clamp(1.1rem, 1.8vw, 1.6rem); border-bottom: 1px solid rgba(255,255,255,.22); font-size: var(--text-lead); line-height: var(--lh); }
.shift__row--head { padding-block: 1rem; font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--peach); }
.shift__from { color: var(--text-soft); }
.shift__to { color: var(--white); font-weight: 600; }
.shift__arrow { justify-self: center; color: var(--peach); font-size: 1.4em; line-height: 1; }
@media (max-width: 640px) {
  .shift__row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .shift__row--head { display: none; }
  .shift__arrow { justify-self: start; transform: rotate(90deg); font-size: 1.1em; }
}

/* growth steps: small phase label under the name */
.growth__label { display: block; margin-top: .2rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }

/* ---------- Expertise: the four phases in depth ---------- */
.phases { position: relative; padding-block: clamp(6rem, 12vw, 13rem) clamp(5rem, 9vw, 9rem); }
.phases .wrap { position: relative; z-index: 1; }
.phase { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 6rem); padding-block: clamp(3rem, 5vw, 5rem); border-top: 1px solid rgba(255,255,255,.22); }
.phase:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.phase__head { display: grid; align-content: start; gap: .5rem; }
.phase__num { font-family: var(--outline); font-size: clamp(3rem, 2rem + 2.5vw, 4.75rem); line-height: 1; color: var(--mist); -webkit-text-stroke: .3px currentColor; }
.phase__name { margin-top: .6rem; font-family: var(--display); font-size: var(--title); line-height: 1; }
.phase__label { font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--peach); }
.phase__body { display: grid; gap: var(--head-gap); align-content: start; }
.phase__text { font-size: var(--text-lead); line-height: var(--lh); color: var(--text-soft); max-width: 40ch; }
.phase__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); }
.phase__lists h4 { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; color: var(--white); }
.phase__lists ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.phase__lists li { position: relative; padding-left: 1.4rem; color: var(--text-soft); line-height: var(--lh); }
.phase__lists li::before { content: ""; position: absolute; left: .1rem; top: .65em; width: .55rem; height: 1px; background: var(--peach); }
@media (max-width: 860px) { .phase { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .phase__lists { grid-template-columns: minmax(0, 1fr); } }

/* case study header photo: only a light shade (20 %) so the work stays visible */
.case .phero__media::before { opacity: .2; }
.case .phero__title h1 { text-shadow: 0 2px 28px rgba(0,26,36,.55); }
.case .phero__eyebrow { text-shadow: 0 1px 2px rgba(0,26,36,.7), 0 0 18px rgba(0,26,36,.6); }