/* ABC Areal (Dinamo): the site's main typeface */
@font-face {
  font-family: "ABC Areal";
  src: url("assets/fonts/ABCAreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Areal";
  src: url("assets/fonts/ABCAreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Areal";
  src: url("assets/fonts/ABCAreal-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #0f0d0d;
  --color-surface: #282322;
  --color-text: #ffffff;
  --color-ink: #130f0e;
  --color-accent: #ed5b29;
  --color-placeholder: #535353;
  --color-card: #272626;
  --color-media: #3b3b3b;
  --color-muted: #c0c0c0;
  --color-wordmark: #3a3432;

  --font-display: "ABC Areal", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --gutter: 40px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

/* Hero (Figma frame "Wireframe - 2", 1440 × 760) */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  min-height: 100svh;
  padding: 41px var(--gutter) 56px;
}

/* Header */
.site-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 45px;
}

/* Mobile menu button (Figma 118:18487): white circle with a hamburger. On open the
   top and bottom lines slide into the middle, then turn into a cross; closing plays it
   backwards. Each line has two layers: the inner path slides, the outer group turns. */
.menu-toggle {
  position: relative;
  z-index: 101;
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 73px;
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu-icon {
  overflow: visible;
}

.menu-icon__bar {
  fill: none;
  stroke: #121923;
  stroke-width: 2.536;
}

.menu-icon__bar--top,
.menu-icon__bar--bottom {
  transition: transform 0.22s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}

.menu-icon__turn {
  transform-origin: 16px 16px;
  transition: transform 0.22s cubic-bezier(0.65, 0, 0.35, 1);
}

.menu-icon__bar--mid {
  transform-origin: 16px 16px;
  transition: opacity 0.12s ease 0.18s, transform 0.12s ease 0.18s;
}

.menu-toggle[aria-expanded="true"] .menu-icon__bar--top {
  transform: translateY(6.4px);
  transition-delay: 0s;
}

.menu-toggle[aria-expanded="true"] .menu-icon__bar--bottom {
  transform: translateY(-6.4px);
  transition-delay: 0s;
}

.menu-toggle[aria-expanded="true"] .menu-icon__turn--top {
  transform: rotate(45deg);
  transition-delay: 0.2s;
}

.menu-toggle[aria-expanded="true"] .menu-icon__turn--bottom {
  transform: rotate(-45deg);
  transition-delay: 0.2s;
}

.menu-toggle[aria-expanded="true"] .menu-icon__bar--mid {
  opacity: 0;
  transform: scaleX(0.4);
  transition-delay: 0.1s;
}

/* Full-screen mobile menu (Figma 119:18491): slides down from the top of the screen
   like a curtain; the header row (logo and button) stays on top of it */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  padding: calc(var(--menu-top, 69px) + 48px) var(--gutter) 48px;
  overflow-y: auto;
  background: #0f0d0d;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1) 0.1s, visibility 0s linear 0.65s;
}

.mobile-menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.65s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Links and the button glide up into place one after another once the curtain is down */
.mobile-menu__link,
.cta.mobile-menu__cta {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mobile-menu.is-open .mobile-menu__link,
.mobile-menu.is-open .cta.mobile-menu__cta {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.3s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.36s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.42s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 0.48s; }
.mobile-menu.is-open .cta.mobile-menu__cta { transition-delay: 0.5s; }

.mobile-menu__link {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.56px;
  text-decoration: none;
}

.cta.mobile-menu__cta {
  justify-content: center;
  font-size: 16px;
  align-items: center;
  margin-top: auto;
  padding: 16px 12px 16px 20px;
}

/* The header row sits above the menu so the logo and button stay put */
.site-header {
  z-index: 101;
}

html.menu-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu.is-open,
  .menu-icon__bar,
  .menu-icon__turn,
  .mobile-menu__link,
  .cta.mobile-menu__cta {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
}

/* Wordmark at the far left of the nav bar */
.site-logo {
  display: block;
  flex-shrink: 0;
}

.site-logo img {
  display: block;
  width: 145px;
  height: auto;
}

.nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.nav__link {
  padding: 10px 16px;
  border-radius: 20px;
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.nav__link:hover,
.nav__link:focus-visible {
  background: #3a3331;
}

.cta {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 12px 20px;
  border-radius: 72px;
  background: var(--color-text);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.cta:hover,
.cta:focus-visible {
  opacity: 0.88;
}

/* Hero content */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 670px;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.2;
  letter-spacing: -1.92px;
}

.hero__link {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__link span {
  text-underline-offset: 4px;
}

.hero__link:hover span,
.hero__link:focus-visible span {
  text-decoration: underline;
}

.hero__link img {
  transition: transform 0.2s ease;
}

.hero__link:hover img,
.hero__link:focus-visible img {
  transform: translate(2px, -2px);
}

/* Video section (Figma frame "Wireframe - 3", 1440 × 900) */
.video-section {
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  background: var(--color-placeholder);
}

.video-section > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Section label: "— SELECTED WORKS ———" */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1px 0;
}

.section-label__rule {
  flex: none;
  /* SVG is 7.5 tall in a 6px slot, offset up by its 1.5px stroke overhang */
  margin-top: -1.5px;
}

.section-label__rule--fill {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
}

.section-label__text {
  margin: 0;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Works page (works.html) */
.page-top {
  padding: 41px var(--gutter) 0;
  background: var(--color-bg);
}

.works.works--page {
  padding-top: 120px;
}

.page-title {
  margin: 40px 0 0;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.2;
  letter-spacing: -1.92px;
}

.works--page .works__intro {
  margin-top: 24px;
}

.works--page .works__grid {
  margin-top: 120px;
}

/* Selected works (Figma frame "Wireframe - 4", 1440 × 3656) */
.works {
  padding: 80px var(--gutter);
  background: var(--color-bg);
}

.works__intro {
  max-width: 555px;
  margin: 40px 0 0;
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: -0.8px;
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  column-gap: 12px;
  row-gap: 104px;
  margin-top: 193px;
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.work-card__media {
  aspect-ratio: 674 / 580;
  overflow: hidden;
  background: var(--color-card);
}

.work-card__media--short {
  aspect-ratio: 674 / 500;
}

.work-card__media > img,
.work-card__media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.work-card:hover .work-card__media > *,
.work-card:focus-visible .work-card__media > * {
  transform: scale(1.02);
}

.work-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.work-card__title {
  margin: 0;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.24px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 6px 12px;
  border-radius: 40px;
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Statement (Figma frame "Wireframe - 5", 1440 × 489) */
.statement {
  padding: 120px var(--gutter);
  background: var(--color-bg);
}

.statement__text {
  max-width: 994px;
  font-size: 64px;
  line-height: 1.3;
  letter-spacing: -2.56px;
}

.statement__text p {
  margin: 0;
}

.statement__muted {
  color: rgba(255, 255, 255, 0.6);
}

/* Our services (Figma frame "Wireframe - 6", 1440 × 2386) */
.services {
  padding: 80px var(--gutter);
  background: var(--color-bg);
}

.services__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 135px;
}

.service {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.service__info {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 0 1 427px;
}

.service__title {
  margin: 0;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: -0.8px;
}

.service__media {
  flex: 0 1 660px;
  aspect-ratio: 660 / 636;
  overflow: hidden;
  background: var(--color-media);
}

.service__media > img,
.service__media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contact CTA (Figma frame "Wireframe - 7", 1440 × 574) */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 120px var(--gutter);
  background: var(--color-bg);
  text-align: center;
}

.contact__text {
  max-width: 720px;
  margin: 0;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: -0.8px;
}

.cta--wide {
  align-items: center;
  border-radius: 32px;
  letter-spacing: 0.32px;
}

/* Footer (Figma frame "Wireframe - 8", 1440 × 360) */
.site-footer {
  overflow: hidden;
  padding: 20px var(--gutter) 0;
  background: var(--color-bg);
}

.site-footer__rule {
  width: 100%;
  margin-top: -1.5px;
}

.site-footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-top: 28px;
  font-size: 16px;
}

.social-links {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.32px;
  text-transform: uppercase;
}

.social-links a {
  text-decoration: underline;
  text-decoration-thickness: 8%;
  transition: opacity 0.2s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  opacity: 0.75;
}

.site-footer__legal {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.3;
  letter-spacing: -0.16px;
  text-align: right;
}

/* Oversized "Orange Peel" wordmark (Figma 122:18511, 1211 × 220 on a 1440 frame),
   cropped by the footer's bottom edge as in the design. It scales with the page;
   --w is its width and the crop and spacing keep Figma's proportions. */
.site-footer__wordmark {
  --w: min(1211px, 84.1vw);
  width: var(--w);
  height: calc(var(--w) * 174 / 1211);
  margin: calc(var(--w) * 111 / 1211) auto 0;
  overflow: hidden;
}

.site-footer__wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

/* Phones: socials and copyright stacked and centred, copyright smaller */
@media (max-width: 600px) {
  .site-footer__bar {
    flex-direction: column;
    justify-content: center;
    gap: 16px;
  }

  .social-links {
    justify-content: center;
  }

  .site-footer__legal {
    font-size: 15px;
    text-align: center;
  }
}

/* ==========================================================================
   Case study overlay (Figma "Desktop - 250")
   ========================================================================== */
.case-overlay {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.45s ease 0.15s;
}

/* Tinted, blurred backdrop over the homepage. Kept on a pseudo-element:
   a backdrop-filter on the overlay itself would trap the fixed close button. */
.case-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(221, 173, 160, 0.2);
  -webkit-backdrop-filter: blur(25.85px);
  backdrop-filter: blur(25.85px);
}

.case-overlay[hidden] {
  display: none;
}

.case-overlay.is-open {
  opacity: 1;
  transition-delay: 0s;
}

/* Close button: orange pill with an outer ring */
.case-close {
  position: fixed;
  top: 36px;
  left: 50%;
  z-index: 2;
  padding: 0;
  border: 1px solid #e44a03;
  border-radius: 44px;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -24px);
  opacity: 0;
  transition: transform 0.3s var(--ease-in), opacity 0.3s ease;
}

.case-overlay.is-open .case-close {
  transform: translate(-50%, 0);
  opacity: 1;
  transition: transform 0.6s var(--ease-out) 0.3s, opacity 0.4s ease 0.3s;
}

.case-close__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 41px;
  background: #fd540b;
  box-shadow: inset 0 -2px 4px #cf4100, inset 0 2px 4px #ffb898;
  transition: background-color 0.2s ease;
}

/* Focus rings: none for mouse/touch, a ring that matches the site for keyboard */
.case-close:focus,
.case-sheet:focus {
  outline: none;
}

html[data-input="keyboard"] .case-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.case-close:hover .case-close__inner,
.case-close:focus-visible .case-close__inner {
  background: #ff6a29;
}

/* The sheet slides up from the bottom of the screen */
/* The sheet stays fixed in place; only its content scrolls. */
.case-sheet {
  position: absolute;
  top: 130px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 88px var(--gutter) 0;
  border-radius: 40px 40px 0 0;
  background: var(--color-ink);
  transform: translateY(100vh);
  transition: transform 0.55s var(--ease-in);
}

.case-overlay.is-open .case-sheet {
  transform: none;
  transition: transform 0.9s var(--ease-out) 0.05s;
}

/* Header content rises in once the sheet has mostly arrived */
.case-header > *,
.case-figure--hero {
  opacity: 0;
  transform: translateY(32px);
}

.case-overlay.is-open .case-header > *,
.case-overlay.is-open .case-figure--hero {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.9s var(--ease-out);
}

.case-overlay.is-open .case-header__main { transition-delay: 0.35s; }
.case-overlay.is-open .case-intro { transition-delay: 0.45s; }
.case-overlay.is-open .case-figure--hero { transition-delay: 0.55s; }

/* Header: tags + title on the left, intro on the right */
.case-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.case-header__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 1 656px;
}

.case-header .tag {
  border-radius: 20px;
}

.case-title {
  margin: 0;
  font-weight: 500;
  font-size: 56px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.case-intro,
.case-chapter__body p {
  margin: 0;
  color: #e6e5e5;
  font-size: 18px;
  line-height: 1.58;
  letter-spacing: -0.18px;
}

.case-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 1 539px;
  padding-top: 12px;
}

.case-intro p {
  margin: 0;
}

/* Large standalone line that closes a chapter */
.case-statement {
  max-width: 900px;
  margin: 120px 0 0;
  font-size: 56px;
  line-height: 1.25;
  letter-spacing: -1.68px;
}

/* Right-column text that continues a chapter after a full-width block */
.case-chapter.case-chapter--continued {
  margin-top: 80px;
}

/* Press logos (Figma "Section 1"): TV row above, magazines below, centred */
.case-press {
  --logo-scale: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 82px;
  margin-top: 120px;
  padding: 80px 0;
}

.case-press__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-press__row:first-child {
  column-gap: 26px;
}

.case-press__row li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-press__row img {
  width: calc(var(--logo-w) * var(--logo-scale));
  height: calc(var(--logo-h) * var(--logo-scale));
}

/* Short list inside a chapter (e.g. "The Experience") */
.case-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.case-list li {
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.18px;
}

/* Bullet-point version of the list: same text as the body, no dividing lines */
.case-list.case-list--bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 1.25em;
  border-bottom: 0;
  list-style: disc;
  color: #e6e5e5;
}

.case-list.case-list--bullets li {
  padding: 0 0 0 4px;
  border-top: 0;
  line-height: 1.58;
}

.case-list.case-list--bullets li::marker {
  color: var(--color-accent);
}

/* Media placeholders: put an <img>/<video> inside .case-media */
.case-figure {
  margin: 0;
}

.case-media {
  overflow: hidden;
  aspect-ratio: 1360 / 720;
  background: #e5e5e5;
}

.case-media > img,
.case-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-figure--hero {
  margin-top: 72px;
}

.case-figure--full {
  margin-top: 120px;
}

/* A full-width image straight after the colour palette sits close to it, as one block */
.case-palette + .case-figure--full {
  margin-top: 12px;
}

.case-caption {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14px;
}

.case-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 120px;
}

/* Edge-to-edge image: spans the full sheet width, ignoring the side margins
   (at a 1440px window it shows at the Figma frame's exact 1440px width) */
.case-figure--bleed {
  margin-right: calc(var(--gutter) * -1);
  margin-left: calc(var(--gutter) * -1);
}

/* Edge-to-edge pair: two images spanning the full sheet width */
.case-pair--bleed {
  gap: 16px;
  margin-right: calc(var(--gutter) * -1);
  margin-left: calc(var(--gutter) * -1);
}

/* Back-to-back edge-to-edge slides sit close together */
.case-figure--bleed + .case-pair.case-pair--bleed,
.case-figure--bleed + .case-figure--bleed {
  margin-top: 16px;
}

/* Open Runde (SIL Open Font License; see assets/fonts/open-runde/LICENSE.txt) */
@font-face {
  font-family: "Open Runde";
  src: url("assets/fonts/open-runde/OpenRunde-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Open Runde";
  src: url("assets/fonts/open-runde/OpenRunde-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* Colour palette (Figma 19:864): 652 / 318 / 318 columns, 1320 x 400 at design size */
.case-palette {
  display: grid;
  grid-template-columns: 652fr 318fr 318fr;
  gap: 16px;
  aspect-ratio: 1320 / 400;
  margin-top: 120px;
}

.case-figure--full + .case-palette,
.case-pair + .case-palette {
  margin-top: 12px;
}

.case-palette__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}

.swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  overflow: hidden;
  border-radius: 0;
  font-family: "Open Runde", var(--font-display);
}

.swatch--bottom {
  justify-content: flex-end;
}

.swatch__name,
.swatch__hex {
  margin: 0;
  line-height: 22.4px;
}

.swatch__name {
  color: #fff;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.48px;
}

.swatch__hex {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.36px;
}

/* Grid of landscape cards (e.g. Glint's stat cards, 652 x 400 each) */
.case-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 120px;
}

.case-media.case-media--card {
  aspect-ratio: 652 / 400;
}

/* A pair directly under a full-width image reads as one block */
.case-figure--full + .case-pair {
  margin-top: 12px;
}

.case-pair .case-media {
  aspect-ratio: var(--pair-ratio, 674 / 720);
}

/* Product strip (Figma "Frame 296"): cards keep their Figma proportions and
   scale with the frame's height (--u = 1 at the 720px design height). */
.case-media.case-shop {
  container-type: size;
  display: flex;
  align-items: center;
  background: #fff;
}

.case-shop__track {
  --u: calc(100cqh / 720);
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: shop-scroll 48s linear infinite;
  animation-delay: -4s;
}

.case-shop:hover .case-shop__track {
  animation-play-state: paused;
}

@keyframes shop-scroll {
  to {
    transform: translateX(-50%);
  }
}

.shop-card {
  display: flex;
  flex-direction: column;
  width: calc(331 * var(--u));
  margin-right: calc(12 * var(--u));
  font-family: "Barlow", var(--font-display);
  font-weight: 500;
}

.shop-card__media {
  position: relative;
  min-height: calc(452 * var(--u));
  overflow: hidden;
  background: #faf5f2;
}

.shop-card__frame {
  position: relative;
  height: calc(406 * var(--u));
  overflow: hidden;
}

.shop-card__box {
  position: absolute;
  top: calc(50% + 17 * var(--u));
  left: 50%;
  width: calc(356 * var(--u));
  height: calc(340 * var(--u));
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.shop-card__box img {
  position: absolute;
  max-width: none;
}

.shop-card__cta {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: calc(16 * var(--u)) calc(14 * var(--u));
  background: #0b0b0b;
  color: #fff;
  font-size: max(10px, calc(12 * var(--u)));
  letter-spacing: calc(0.84 * var(--u));
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-card:hover .shop-card__cta {
  opacity: 1;
  transform: none;
}

.shop-card__name,
.shop-card__price {
  margin: 0;
}

.shop-card__name {
  margin-top: calc(20 * var(--u));
  color: #727272;
  font-size: max(10px, calc(12 * var(--u)));
  line-height: 1.1;
  letter-spacing: calc(0.96 * var(--u));
  text-transform: uppercase;
}

.shop-card__price {
  margin-top: calc(4 * var(--u));
  color: #272727;
  font-size: max(11px, calc(13 * var(--u)));
  line-height: 1.6;
  letter-spacing: calc(0.78 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  .case-media.case-media--pan > img {
    animation: none;
  }

  .case-media.case-shop {
    overflow-x: auto;
  }

  .case-shop__track {
    animation: none;
  }
}

/* Small mono label used for chapter numbers, gallery, credits */
.case-kicker {
  margin: 0;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.32px;
  text-transform: uppercase;
}

/* Project facts */
.case-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 12px;
  margin: 40px 0 0;
}

.case-meta__item {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.case-meta dt,
.case-credits dt {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14px;
  text-transform: uppercase;
}

.case-meta dd,
.case-credits dd {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 1.4;
}

/* Chapters (Figma 202:2907): number + heading beside the copy, the pair centred on the page */
.case-chapter {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 72px;
  margin-top: 160px;
}

/* 315px wide, or wider when a single word of the heading needs it */
.case-chapter__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: none;
  width: min-content;
  min-width: 315px;
}

.case-chapter__title {
  margin: 0;
  font-weight: 500;
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -2.8px;
}

.case-chapter__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 0 1 537px;
}

.case-chapter__body p {
  color: #d2d2d2;
  line-height: 28.44px;
}

/* Gallery carousel with counter */
.case-carousel {
  margin-top: 160px;
}

.case-carousel__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.case-carousel__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 16px;
}

.case-carousel__count {
  margin-right: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.case-carousel__btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.case-carousel__btn:hover,
.case-carousel__btn:focus-visible {
  background: #3a3331;
}

.case-carousel__track {
  display: flex;
  gap: 12px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
  list-style: none;
}

.case-carousel__track::-webkit-scrollbar {
  display: none;
}

.case-carousel__slide {
  flex: 0 0 min(900px, 80%);
  scroll-snap-align: start;
}

.case-carousel__slide .case-media {
  aspect-ratio: 900 / 600;
}

/* Client quote */
.case-quote {
  max-width: 1100px;
  margin: 160px 0 0;
}

.case-quote p {
  margin: 0;
  font-size: 56px;
  line-height: 1.25;
  letter-spacing: -1.68px;
}

.case-quote footer {
  margin-top: 32px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.16px;
  text-transform: uppercase;
}

/* Results */
.case-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

.case-stats li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.case-stats strong {
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -3.2px;
}

.case-stats span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
}

/* Credits */
.case-credits {
  margin-top: 160px;
}

.case-credits__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 12px;
  margin: 24px 0 0;
}

/* Next project */
.case-next {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 160px calc(var(--gutter) * -1) 0;
  padding: 80px var(--gutter) 96px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.case-next__title {
  display: block;
  font-family: "Nanum Myeongjo", Georgia, serif;
  font-size: clamp(48px, 9vw, 128px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  transition: color 0.2s ease;
}

.case-next__title img {
  display: inline-block;
  width: 0.35em;
  height: auto;
  margin-left: 0.12em;
  vertical-align: 0.1em;
  transition: transform 0.3s var(--ease-out);
}

.case-next:hover .case-next__title,
.case-next:focus-visible .case-next__title {
  color: var(--color-accent);
}

.case-next:hover .case-next__title img,
.case-next:focus-visible .case-next__title img {
  transform: translate(6px, -6px);
}

@media (prefers-reduced-motion: reduce) {
  .case-overlay,
  .case-overlay *,
  .case-overlay.is-open,
  .case-overlay.is-open * {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Responsive */
@media (max-width: 900px) {
  :root {
    --gutter: 24px;
  }

  .hero {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  /* Phones and tablets: just the logo and a menu button; the links and
     "Get in touch" move into the full-screen menu */
  .site-header {
    align-items: center;
  }

  .site-logo img {
    width: 120px;
  }

  .site-header .nav,
  .site-header .cta {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .mobile-menu {
    display: flex;
  }

  .nav__link {
    font-size: 14px;
    padding: 8px 14px;
  }

  .hero__title {
    font-size: clamp(40px, 9vw, 64px);
    letter-spacing: -0.03em;
  }

  .works {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .works__intro {
    font-size: clamp(28px, 6vw, 40px);
    letter-spacing: -0.02em;
  }

  .works__grid,
  .works--page .works__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    margin-top: 80px;
  }

  .page-top {
    padding-top: 24px;
  }

  .works.works--page {
    padding-top: 64px;
  }

  .page-title {
    font-size: clamp(40px, 9vw, 64px);
    letter-spacing: -0.03em;
  }

  .work-card__media--short {
    aspect-ratio: 674 / 580;
  }

  .work-card__title {
    font-size: 20px;
  }

  .tag {
    font-size: 14px;
  }

  .statement {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .statement__text {
    font-size: clamp(32px, 8vw, 64px);
    letter-spacing: -0.04em;
  }

  .services {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .services__list {
    gap: 64px;
    margin-top: 64px;
  }

  .service {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .service__info,
  .service__media {
    flex: none;
  }

  .service__title {
    font-size: clamp(28px, 6vw, 40px);
    letter-spacing: -0.02em;
  }

  .contact {
    gap: 48px;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .contact__text {
    font-size: clamp(26px, 6vw, 40px);
    letter-spacing: -0.02em;
  }

  .case-close {
    top: 16px;
  }

  .case-close__inner {
    padding: 10px 24px;
  }

  .case-sheet {
    top: 84px;
    padding-top: 48px;
    border-radius: 28px 28px 0 0;
  }

  .case-header,
  .case-chapter {
    flex-direction: column;
    gap: 24px;
  }

  .case-header__main,
  .case-intro,
  .case-chapter__head,
  .case-chapter__body {
    flex: none;
  }

  .case-intro,
  .case-chapter__body {
    padding-top: 0;
  }

  .case-title {
    font-size: clamp(32px, 8vw, 56px);
    letter-spacing: -0.01em;
  }

  .case-intro,
  .case-chapter__body p {
    font-size: 16px;
  }

  .case-figure--hero {
    margin-top: 40px;
  }

  .case-media {
    aspect-ratio: 4 / 3;
  }

  .case-figure--full,
  .case-pair,
  .case-chapter,
  .case-carousel,
  .case-quote,
  .case-credits {
    margin-top: 88px;
  }

  .case-meta,
  .case-credits__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-chapter__head {
    width: auto;
    min-width: 0;
  }

  .case-chapter__title {
    font-size: clamp(32px, 8vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.05em;
  }

  .case-chapter__body p {
    line-height: 1.58;
  }

  .case-pair,
  .case-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Palette on phones: orange across the top, mint beside the stacked pair */
  .case-palette {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 260px;
    gap: 12px;
    aspect-ratio: auto;
  }

  .case-palette .swatch:first-child {
    grid-column: 1 / -1;
  }

  .case-palette__stack {
    gap: 12px;
  }

  .swatch {
    gap: 8px;
    padding: 20px;
  }

  .swatch__name {
    font-size: 18px;
  }

  .swatch__hex {
    font-size: 14px;
  }

  /* Edge-to-edge images can be taller on phones, cropped around a focal point */
  .case-media.case-media--mobile-crop {
    aspect-ratio: auto !important;
    height: var(--m-height);
  }

  .case-media--mobile-crop > img {
    object-position: var(--m-position);
  }

  /* Slowly pan from the left edge to the right edge and back */
  .case-media--pan > img {
    animation: case-pan 14s ease-in-out infinite alternate;
  }

  @keyframes case-pan {
    0%, 12% {
      object-position: 0% 50%;
    }

    88%, 100% {
      object-position: 100% 50%;
    }
  }

  .case-cards {
    margin-top: 88px;
  }

  .case-quote p,
  .case-statement {
    font-size: clamp(28px, 7vw, 56px);
    letter-spacing: -0.03em;
  }

  .case-statement {
    margin-top: 72px;
  }

  .case-list li {
    font-size: 16px;
  }

  /* Product strip on phones: a shorter frame sized so two cards fit across
     (two cards + gap = 686 design px against the 720 design height). Capped on
     wider screens so the strip doesn't grow too tall. */
  .case-media.case-shop {
    aspect-ratio: auto;
    height: min(440px, calc((100vw - 2 * var(--gutter)) * 720 / 686));
  }

  .case-press {
    --logo-scale: 0.72;
    gap: 48px;
    margin-top: 72px;
    padding: 48px 0;
  }

  .case-press__row {
    gap: 28px 32px;
  }

  .case-chapter.case-chapter--continued {
    margin-top: 48px;
  }

  .case-chapter--continued .case-chapter__head {
    display: none;
  }

  .case-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .case-stats strong {
    font-size: 56px;
  }

  .case-next {
    margin-top: 88px;
    padding: 56px var(--gutter) 72px;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 16px;
  }

  .cta {
    font-size: 14px;
  }

  .hero__title {
    font-size: 36px;
  }
}

/* Title card (Nookly): a 1440 × 825 Figma frame that scales with the page.
   --u is one Figma pixel at the current width. */
.case-banner {
  container-type: inline-size;
}

.case-banner__frame {
  --u: calc(100cqw / 1440);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1440 / 825;
  background: #fefcf7;
}

.case-banner__title {
  position: absolute;
  top: calc(254 * var(--u));
  left: 50%;
  width: calc(895 * var(--u));
  margin: 0;
  color: #0f181c;
  font-family: "Baloo 2", var(--font-display);
  font-weight: 600;
  font-size: calc(96 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-align: center;
  transform: translateX(-50%);
}

.case-banner__sticker {
  position: absolute;
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  transform: translate(-50%, -50%) var(--t);
}

.case-banner__sticker img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--iw);
  height: var(--ih);
  max-width: none;
}

@media (max-width: 480px) {
  .case-banner__frame {
    --u: calc(100cqw / 375);
    aspect-ratio: 375 / 481;
  }

  .case-banner__title {
    top: calc(var(--m-top) * var(--u));
    width: calc(var(--m-width) * var(--u));
    font-size: calc(var(--m-size) * var(--u));
  }

  .case-banner__sticker {
    top: calc(var(--my) * var(--u));
    left: calc(var(--mx) * var(--u));
    width: calc(var(--mw) * var(--u));
    height: calc(var(--mh) * var(--u));
    transform: translate(-50%, -50%) var(--mt);
  }
}

/* Claremont-Amani DNA frame (Figma 84:11062, 674 × 720). --u is one Figma pixel.
   The helix is pre-flattened onto the navy, so the grid is laid over it with
   "lighten": grid lines show on the navy and disappear behind the brighter helix. */
.case-dna {
  --u: calc(100cqw / 674);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  background: #032449;
}

.case-dna > img {
  position: absolute;
  display: block;
  max-width: none;
}

.case-dna__helix {
  top: calc(362.77 * var(--u));
  left: calc(341.56 * var(--u));
  width: calc(1120 * var(--u));
  height: calc(972.6 * var(--u));
  transform: translate(-50%, -50%) rotate(-45deg);
  animation: dna-drift 9s ease-in-out infinite alternate;
  will-change: transform;
}

.case-dna__grid {
  top: calc(-665 * var(--u));
  left: calc(-285.22 * var(--u));
  width: calc(2868.5 * var(--u));
  height: calc(1433.06 * var(--u));
  mix-blend-mode: lighten;
  pointer-events: none;
}

/* The helix slides gently along its own axis, turning and swelling slightly */
@keyframes dna-drift {
  from {
    transform: translate(-50%, -50%) rotate(-46deg) translateX(calc(-22 * var(--u))) scale(1);
  }
  to {
    transform: translate(-50%, -50%) rotate(-44deg) translateX(calc(22 * var(--u))) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-dna__helix {
    animation: none;
  }
}

/* ==========================================================================
   Scroll-in motion (motion.js). Only active when the <html> element has the
   "motion" class, which the head script skips for Reduce Motion.
   ========================================================================== */

/* Big headings: each word rises from behind its own mask, line by line */
html.motion :is(.hero__title, .page-title, .enquiry__title, .statement__text > p, .contact__text):not([data-rv]) {
  visibility: hidden; /* until motion.js has wrapped the words, so nothing flashes */
}

.rv-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for descenders (g, y, p) inside the mask */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.rv-i {
  display: inline-block;
}

html.motion .rv-text .rv-i {
  transform: translateY(110%);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--l, 0) * 90ms + 60ms);
}

html.motion .rv-text.is-in .rv-i {
  transform: none;
}

/* Photos and videos: open out from slightly inset edges as the image settles */
html.motion .rv-media {
  clip-path: inset(7% 7% 7% 7%);
  transition: clip-path 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0ms);
}

html.motion .rv-media > :is(img, video) {
  scale: 1.12;
  transition: scale 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0ms);
}

html.motion .rv-media.is-in {
  clip-path: inset(0 0 0 0);
}

html.motion .rv-media.is-in > :is(img, video) {
  scale: 1;
}

/* Smaller text blocks: a soft fade up */
html.motion .rv-fade {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.9s ease, translate 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0ms);
}

html.motion .rv-fade.is-in {
  opacity: 1;
  translate: none;
}

/* ==========================================================================
   Contact page (contact.html): a calm two-column enquiry page. Details and
   what-happens-next on the left, a short conversational form on the right.
   ========================================================================== */
.enquiry {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 96px;
  align-items: start;
  padding: 120px var(--gutter) 160px;
}

.enquiry__intro {
  position: sticky;
  top: 48px;
}

.enquiry__kicker {
  margin: 0 0 24px;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.28px;
  text-transform: uppercase;
}

.enquiry__title {
  margin: 0;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -1.68px;
}

.enquiry__lede {
  max-width: 460px;
  margin: 28px 0 0;
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.18px;
}

/* "Prefer email?" card: a quiet panel that separates the intro from the form */
.email-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon label copy" "address address address";
  align-items: center;
  gap: 16px 14px;
  margin-top: 56px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  background: #1a1716;
}

.email-card__icon {
  grid-area: icon;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(237, 91, 41, 0.12);
}

.email-card__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.email-card__body {
  display: contents;
}

.email-card__label {
  grid-area: label;
  margin: 0;
  color: #8a8483;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}

.email-card__address {
  grid-area: address;
  color: var(--color-text);
  font-size: 18px;
  letter-spacing: -0.18px;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.email-card__address:hover {
  color: var(--color-accent);
}

.email-card__copy {
  grid-area: copy;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 72px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.email-card__copy .enquiry__copy-hint {
  color: inherit;
}

.email-card__copy:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.email-card__copy.is-copied {
  border-color: var(--color-accent);
  background: rgba(237, 91, 41, 0.12);
}

.email-card__copy.is-copied .enquiry__copy-hint {
  color: var(--color-accent);
}

/* The form */
.enquiry__panel {
  max-width: 720px;
}

.enquiry-form {
  display: grid;
  gap: 48px;
  transition: opacity 0.35s ease, translate 0.35s ease;
}

.enquiry-form.is-leaving {
  opacity: 0;
  translate: 0 -12px;
}

.field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  display: block;
  margin-bottom: 14px;
  padding: 0;
  color: var(--color-muted);
  font-size: 18px;
  letter-spacing: -0.18px;
}

.field__optional {
  margin-left: 8px;
  color: #6f6968;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}

.field__input {
  display: block;
  width: 100%;
  padding: 6px 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.56px;
  transition: border-color 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}

.field__input::placeholder {
  color: #4d4746;
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}

.field__input--area {
  min-height: 96px;
  resize: none;
  overflow: hidden;
}

.field__error {
  display: none;
  margin: 10px 0 0;
  color: #ff8a65;
  font-size: 14px;
}

.field.is-invalid .field__input {
  border-bottom-color: #ff8a65;
}

.field.is-invalid .field__error {
  display: block;
}

/* Tap-to-select options */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  position: relative;
  cursor: pointer;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 72px;
  font-size: 16px;
  letter-spacing: -0.16px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chip:hover span {
  border-color: rgba(255, 255, 255, 0.5);
}

.chip input:checked + span {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-ink);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.enquiry-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry-form__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.cta.enquiry-form__submit {
  align-items: center;
  border: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.enquiry-form.is-sending .enquiry-form__submit {
  opacity: 0.6;
  cursor: progress;
}

.enquiry-form__note {
  margin: 0;
  color: #8a8483;
  font-size: 14px;
}

.enquiry-form__failed {
  margin: -24px 0 0;
  color: #ff8a65;
  font-size: 15px;
  line-height: 1.5;
}

.enquiry-form__failed a {
  color: inherit;
}

/* Sent */
.enquiry-done {
  padding: 24px 0;
  outline: none;
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.6s ease, translate 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.enquiry-done.is-shown {
  opacity: 1;
  translate: none;
}

.enquiry-done__tick {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.enquiry-done__tick path {
  stroke-width: 2.5;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  transition: stroke-dashoffset 0.6s ease 0.35s;
}

.enquiry-done.is-shown .enquiry-done__tick path {
  stroke-dashoffset: 0;
}

.enquiry-done__title {
  max-width: 560px;
  margin: 32px 0 0;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1.2px;
}

.enquiry-done__text {
  max-width: 480px;
  margin: 20px 0 0;
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1.55;
}

.enquiry-done__text strong {
  color: var(--color-text);
  font-weight: 500;
}

.enquiry-done__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  text-decoration: none;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .enquiry {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
    padding-top: 64px;
    padding-bottom: 96px;
  }

  .enquiry__intro {
    position: static;
  }

  .enquiry__title {
    font-size: clamp(36px, 9vw, 48px);
    letter-spacing: -0.03em;
  }

  .enquiry__lede {
    font-size: 17px;
  }

  .email-card {
    margin-top: 40px;
  }

  .enquiry-form {
    gap: 40px;
  }

  .field__label {
    font-size: 17px;
  }

  .field__input {
    font-size: 22px;
  }

  .enquiry-done__title {
    font-size: 32px;
  }
}

/* Phones: a slightly tighter card, and less space around it so the name and
   email fields still sit on the first screen */
@media (max-width: 480px) {
  .enquiry {
    gap: 44px;
  }

  .email-card {
    gap: 12px 14px;
    margin-top: 32px;
    padding: 16px 18px;
  }

  .email-card__icon {
    width: 40px;
    height: 40px;
  }

  .email-card__address {
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .chip span {
    padding: 10px 16px;
    font-size: 15px;
  }

  .enquiry-form__submit {
    width: 100%;
    justify-content: center;
  }
}