:root {
  /* Core brand */
  --turwa-black: #12110f;
  --turwa-charcoal: #2f2f2c;
  --turwa-gold: #c6a074;
  --turwa-gold-dark: #795d39;
  --turwa-ivory: #f9f4ed;
  --turwa-cream: #ecd7bf;

  /* Supporting colors */
  --turwa-sage: #666a3d;
  --turwa-blush: #b39a8e;
  --turwa-blush-dark: #805b49;

  /* Semantic website colors */
  --color-background: var(--turwa-ivory);
  --color-surface: #fffcf7;
  --color-text: var(--turwa-black);
  --color-text-muted: #5a5549;
  --color-primary: var(--turwa-black);
  --color-accent: var(--turwa-gold);
  --color-accent-text: var(--turwa-gold-dark);
  --color-border: rgb(198 160 116 / 30%);

  --turwa-gold-gradient:
    linear-gradient(135deg, #f3d797 0%, #c6a074 48%, #795d39 100%);

  /* Tokens consumed across this sheet, mapped onto the TURWA palette */
  --ink: var(--turwa-black);
  --ink-soft: var(--turwa-charcoal);
  --bone: var(--turwa-ivory);
  --paper: var(--color-surface);
  --cream: var(--turwa-cream);
  --coral: var(--turwa-gold);
  --coral-dark: var(--turwa-gold-dark);
  --silver: rgba(249, 244, 237, 0.66);
  --muted: var(--color-text-muted);
  --line: rgb(198 160 116 / 26%);
  --line-light: rgb(198 160 116 / 45%);
  --white: var(--turwa-ivory);
  --font-display: "Newsreader", Georgia, serif;
  --font-sans: "Archivo", Arial, sans-serif;
  --shell: min(1440px, calc(100% - 64px));
  --header-height: 82px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

body.menu-open,
body.dialog-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

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

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-weight: 400;
}

em {
  font-family: var(--font-display);
  font-weight: 400;
}

::selection {
  background: var(--coral);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
}

.skip-link {
  background: var(--coral);
  color: var(--ink);
  left: 16px;
  padding: 10px 16px;
  position: fixed;
  top: -60px;
  z-index: 200;
}

.skip-link:focus {
  top: 16px;
}

.scroll-progress {
  background: rgba(249, 244, 237, 0.14);
  height: 2px;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 150;
}

.scroll-progress span {
  background: var(--turwa-gold-gradient);
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  width: 100%;
}

.section-shell {
  margin-inline: auto;
  width: var(--shell);
}

.section-pad {
  padding-block: 128px;
}

#work,
#occasions,
#process,
#inquiry {
  scroll-margin-top: 64px;
}

.section-index,
.eyebrow {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
}

.section-index-light {
  color: var(--silver);
}

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 2px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 22px;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 18px;
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
}

.button svg {
  height: 17px;
  stroke-width: 1.7;
  width: 17px;
}

.button-accent {
  background: var(--coral);
  color: var(--ink);
}

.button-accent:hover {
  background: var(--coral-dark);
  color: var(--turwa-ivory);
}

.icon-button {
  align-items: center;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  padding: 0;
  width: 42px;
}

.icon-button svg {
  height: 18px;
  stroke-width: 1.7;
  width: 18px;
}

.site-header {
  align-items: center;
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: var(--header-height);
  left: 32px;
  position: absolute;
  right: 32px;
  top: 0;
  z-index: 100;
}

.site-header::after {
  background: rgb(198 160 116 / 34%);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
}

.site-header.is-fixed {
  animation: header-in 260ms ease both;
  background: rgba(18, 17, 15, 0.94);
  height: 64px;
  left: 0;
  padding-inline: 32px;
  position: fixed;
  right: 0;
}

@keyframes header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.wordmark {
  align-items: baseline;
  display: inline-flex;
  font-size: 21px;
  font-weight: 600;
  justify-self: start;
  line-height: 1;
}

.wordmark span:last-child {
  color: var(--coral);
}

.desktop-nav {
  display: flex;
  gap: 34px;
}

.desktop-nav a,
.header-cta {
  font-size: 12px;
  font-weight: 500;
}

.desktop-nav a {
  position: relative;
}

.desktop-nav a::after {
  background: var(--coral);
  bottom: -7px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
  width: 100%;
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  align-items: center;
  border-bottom: 1px solid rgba(249, 244, 237, 0.5);
  display: inline-flex;
  gap: 9px;
  justify-self: end;
  padding-bottom: 5px;
}

.header-cta svg {
  height: 14px;
  width: 14px;
}

.menu-toggle {
  display: none;
  justify-self: end;
}

.mobile-menu {
  background: var(--coral);
  color: var(--ink);
  display: none;
  inset: 0;
  padding: 110px 24px 30px;
  position: fixed;
  z-index: 90;
}

.mobile-menu nav {
  border-top: 1px solid rgba(18, 17, 15, 0.3);
}

.mobile-menu a {
  align-items: baseline;
  border-bottom: 1px solid rgba(18, 17, 15, 0.3);
  display: flex;
  font-family: var(--font-display);
  font-size: 38px;
  justify-content: space-between;
  line-height: 1;
  padding-block: 20px;
}

.mobile-menu a span {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
}

.mobile-menu p {
  bottom: 22px;
  font-size: 12px;
  margin: 0;
  position: absolute;
}

.mobile-menu.is-open {
  display: block;
}

.site-header.menu-active .wordmark span:last-child {
  color: var(--turwa-black);
}

.hero {
  background: var(--ink);
  color: var(--white);
  min-height: 720px;
  height: 88svh;
  overflow: hidden;
  position: relative;
}

.hero-image {
  height: 110%;
  inset: -5% 0;
  object-fit: cover;
  object-position: 56% center;
  position: absolute;
  width: 100%;
  will-change: transform;
}

/* Directional, not flat: the hero still has to carry white type over a
   sunlit frame. Darkening the whole image to reach contrast would throw
   away the light that makes the shot worth using, so the wash is heavy
   on the side the copy sits on and clears off the other. The second
   layer lifts the lower strip, which carries the paragraph, the CTAs
   and the meta row. ar.css mirrors the horizontal pass for RTL. */
.hero-wash {
  background:
    linear-gradient(
      to right,
      rgba(18, 17, 15, 0.74) 0%,
      rgba(18, 17, 15, 0.52) 34%,
      rgba(18, 17, 15, 0.18) 66%,
      rgba(18, 17, 15, 0.08) 100%
    ),
    linear-gradient(
      to top,
      rgba(18, 17, 15, 0.58) 0%,
      rgba(18, 17, 15, 0) 46%
    );
  inset: 0;
  position: absolute;
}

/* The header has no plate of its own until it goes fixed, so the wash
   carries a short scrim to keep the wordmark, the nav and the language
   switch legible against a bright sky. It rides on ::after rather than
   in the shorthand above so neither the RTL flip nor the mobile rule
   can drop it while replacing `background`. */
.hero-wash::after {
  background: linear-gradient(
    to bottom,
    rgba(18, 17, 15, 0.62) 0%,
    rgba(18, 17, 15, 0.26) 46%,
    rgba(18, 17, 15, 0) 100%
  );
  content: "";
  height: 170px;
  inset: 0 0 auto;
  position: absolute;
}

.hero-grain,
.hero-grain::after {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-grain {
  mix-blend-mode: soft-light;
  opacity: 0.14;
}

.hero-grain::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  content: "";
}

.hero-content {
  bottom: 102px;
  left: max(32px, calc((100vw - 1440px) / 2));
  max-width: 880px;
  position: absolute;
  z-index: 2;
}

.hero-eyebrow {
  color: rgba(249, 244, 237, 0.78);
  margin-bottom: 20px;
}

.hero h1 {
  font-family: var(--font-sans);
  font-size: 82px;
  font-weight: 500;
  line-height: 0.95;
  margin: 0 0 28px;
}

.hero h1 em {
  font-size: 1.06em;
}

.hero-lower {
  align-items: flex-end;
  display: flex;
  gap: 64px;
}

.hero-lower > p {
  color: rgba(249, 244, 237, 0.8);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 390px;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 24px;
}

.text-button {
  align-items: center;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  gap: 10px;
  padding: 0;
}

.play-mark {
  align-items: center;
  border: 1px solid rgba(249, 244, 237, 0.7);
  border-radius: 50%;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  transition:
    background-color 180ms ease,
    color 180ms ease;
  width: 40px;
}

.text-button:hover .play-mark {
  background: var(--coral);
  color: var(--ink);
}

.play-mark svg {
  fill: currentColor;
  height: 13px;
  width: 13px;
}

.hero-meta {
  bottom: 22px;
  display: flex;
  gap: 22px;
  left: 32px;
  position: absolute;
  z-index: 2;
}

.hero-meta span {
  color: rgba(249, 244, 237, 0.7);
  font-size: 10px;
  text-transform: uppercase;
}

.hero-timecode {
  bottom: 20px;
  color: rgba(249, 244, 237, 0.7);
  font-size: 10px;
  margin: 0;
  position: absolute;
  right: 32px;
  z-index: 2;
}

.manifesto {
  background: var(--bone);
}

.manifesto-grid {
  display: grid;
  grid-template-columns: 2fr 10fr;
}

.statement {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 0.98;
  margin: 0 0 64px;
  max-width: 1020px;
}

.statement em {
  color: var(--coral-dark);
}

.manifesto-copy {
  border-top: 1px solid var(--line-light);
  display: grid;
  gap: 32px;
  grid-template-columns: 5fr 3fr;
  margin-left: 25%;
  padding-top: 24px;
}

.manifesto-copy p {
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 0;
}

.manifesto-copy .quiet {
  color: var(--color-text-muted);
  font-size: 13px;
}

.work {
  background: var(--paper);
  border-top: 1px solid var(--line-light);
}

.section-heading {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 64px;
}

.section-heading h2 {
  font-family: var(--font-display);
  font-size: 68px;
  line-height: 1;
  margin: 14px 0 0;
}

.filter-tabs {
  align-items: center;
  border-bottom: 1px solid var(--line-light);
  display: flex;
  gap: 28px;
}

.filter-tab {
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 10px 0;
  position: relative;
}

.filter-tab::after {
  background: var(--coral);
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transition: transform 180ms ease;
  width: 100%;
}

.filter-tab.is-active {
  color: var(--ink);
}

.filter-tab.is-active::after {
  transform: scaleX(1);
}

.project-grid {
  display: grid;
  gap: 110px 28px;
  grid-template-columns: repeat(12, 1fr);
}

.project {
  min-width: 0;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.project.is-hidden {
  display: none;
}

.project-wide {
  grid-column: 1 / span 8;
}

.project-portrait {
  align-self: end;
  grid-column: 9 / span 4;
}

.project-full {
  grid-column: 2 / span 10;
}

.project-offset {
  grid-column: 5 / span 8;
}

/* One card carries a vertical clip rather than a landscape still, so it
   takes a narrower column and a portrait frame instead of the 16/9 the
   other wide cards use. Cropping a 9:16 film into a 16:9 slot would keep
   about a third of its height and throw away the top of every shot. */
.project-vertical {
  grid-column: 7 / span 5;
}

.project-vertical .project-media {
  aspect-ratio: 4 / 5;
}

.project-media {
  background: var(--ink);
  border-radius: 2px;
  cursor: pointer;
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.project-wide .project-media {
  aspect-ratio: 16 / 9;
}

.project-portrait .project-media {
  aspect-ratio: 4 / 5;
}

.project-full .project-media {
  aspect-ratio: 2 / 1;
}

/* A card's media is usually an <img>, but the wedding card plays a
   silent looping clip instead. Both fill the frame identically, so the
   sizing, the cover crop and the hover push are shared rather than
   duplicated. */
.project-media img,
.project-media video {
  height: 100%;
  object-fit: cover;
  transition:
    transform 700ms cubic-bezier(0.2, 0.65, 0.25, 1),
    opacity 220ms ease;
  width: 100%;
}

.project-portrait .project-media img {
  object-position: center;
}

.project-media:hover img,
.project-media:hover video {
  transform: scale(1.025);
}

.project-view {
  align-items: center;
  background: var(--coral);
  border-radius: 50%;
  color: var(--ink);
  display: flex;
  height: 58px;
  justify-content: center;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -42%);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  width: 58px;
}

.project-view svg {
  fill: currentColor;
  height: 17px;
  width: 17px;
}

.project-media:hover .project-view,
.project-media:focus-visible .project-view {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.frame-corners::before,
.frame-corners::after {
  border-color: rgba(249, 244, 237, 0.7);
  border-style: solid;
  content: "";
  height: 15px;
  position: absolute;
  top: 14px;
  width: 15px;
}

.frame-corners::before {
  border-width: 1px 0 0 1px;
  left: 14px;
}

.frame-corners::after {
  border-width: 1px 1px 0 0;
  right: 14px;
}

.project-caption {
  align-items: flex-start;
  border-top: 1px solid var(--line-light);
  display: grid;
  gap: 30px;
  grid-template-columns: 1.2fr 1fr;
  margin-top: 16px;
  padding-top: 16px;
}

.project-caption h3 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  margin: 5px 0 0;
}

.project-type {
  color: var(--turwa-sage);
  font-size: 10px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.project-caption > p {
  color: var(--color-text-muted);
  font-size: 12px;
  margin: 0;
  max-width: 300px;
}

.occasions {
  background: var(--ink);
  color: var(--white);
}

.occasions-header {
  align-items: end;
  display: grid;
  grid-template-columns: 2fr 10fr;
  margin-bottom: 74px;
}

.occasions-header h2 {
  font-family: var(--font-sans);
  font-size: 70px;
  line-height: 0.97;
  margin: 0;
}

.occasions-header h2 em {
  color: var(--coral);
}

.occasion-stage {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 4fr 8fr;
}

.occasion-list {
  border-right: 1px solid var(--line);
}

.occasion-tab {
  align-items: center;
  background: transparent;
  border-bottom: 1px solid var(--line);
  color: rgba(249, 244, 237, 0.55);
  cursor: pointer;
  display: grid;
  font-family: var(--font-display);
  font-size: 28px;
  grid-template-columns: 42px 1fr auto;
  padding: 26px 26px 26px 0;
  text-align: left;
  transition: color 220ms ease;
  width: 100%;
}

.occasion-tab span {
  font-family: var(--font-sans);
  font-size: 9px;
}

.occasion-tab svg {
  height: 17px;
  opacity: 0;
  transform: translateX(-7px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  width: 17px;
}

.occasion-tab:hover,
.occasion-tab.is-active {
  color: var(--white);
}

.occasion-tab.is-active svg {
  opacity: 1;
  transform: translateX(0);
}

.occasion-panel {
  display: grid;
  grid-template-columns: 7fr 5fr;
  min-width: 0;
}

.occasion-image-wrap {
  aspect-ratio: 1 / 1;
  margin: 28px;
  overflow: hidden;
  position: relative;
}

.occasion-image-wrap img {
  height: 100%;
  object-fit: cover;
  transition: opacity 240ms ease;
  width: 100%;
}

.occasion-image-wrap img.is-switching {
  opacity: 0;
}

.occasion-number {
  background: var(--coral);
  bottom: 0;
  color: var(--ink);
  font-size: 10px;
  left: 0;
  padding: 8px 10px;
  position: absolute;
}

.occasion-copy {
  align-self: end;
  padding: 28px 28px 40px 0;
}

.occasion-copy .eyebrow {
  color: var(--turwa-blush);
  margin-bottom: 16px;
}

.occasion-copy h3 {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.05;
  margin: 0 0 22px;
}

.occasion-copy > p:last-child {
  color: var(--silver);
  font-size: 13px;
  margin-bottom: 0;
}

.point-of-view {
  background: var(--cream);
  color: var(--ink);
  min-height: 850px;
  overflow: hidden;
}

.point-grid {
  display: grid;
  gap: 60px;
  grid-template-columns: 6fr 6fr;
}

.point-copy h2 {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 0.98;
  margin: 84px 0 36px;
}

.point-copy h2 em {
  color: var(--turwa-gold-dark);
}

.point-copy .section-index {
  color: var(--color-text-muted);
}

.point-copy > p:not(.section-index) {
  font-size: 17px;
  max-width: 560px;
}

.text-link {
  align-items: center;
  border-bottom: 1px solid currentColor;
  display: inline-flex;
  font-size: 12px;
  gap: 38px;
  margin-top: 34px;
  padding-bottom: 5px;
}

.text-link svg {
  height: 15px;
  width: 15px;
}

.film-stack {
  min-height: 630px;
  position: relative;
}

.film-frame {
  background: var(--ink);
  color: var(--white);
  margin: 0;
  padding: 10px 10px 7px;
  position: absolute;
  width: min(470px, 76%);
}

.film-frame img {
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.film-frame figcaption {
  font-size: 8px;
  margin-top: 6px;
}

.frame-one {
  right: 1%;
  top: -22px;
  transform: rotate(2deg);
}

.frame-two {
  bottom: -46px;
  left: -2%;
  transform: rotate(-3deg);
}

.frame-two img {
  object-position: center 45%;
}

.process {
  background: var(--bone);
}

.process-heading {
  display: grid;
  grid-template-columns: 2fr 6fr 4fr;
  margin-bottom: 84px;
}

.process-heading h2 {
  font-family: var(--font-sans);
  font-size: 60px;
  line-height: 0.98;
  margin: 0;
}

.process-heading h2 em {
  color: var(--coral-dark);
}

.process-heading > p:last-child {
  align-self: end;
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0 0 0 20%;
}

.process-list {
  border-top: 1px solid var(--line-light);
  list-style: none;
  margin: 0;
  padding: 0;
}

.process-list li {
  align-items: start;
  border-bottom: 1px solid var(--line-light);
  display: grid;
  gap: 26px;
  grid-template-columns: 2fr 8fr 2fr;
  padding: 30px 0;
}

.step-number {
  color: var(--turwa-blush-dark);
  font-size: 10px;
  font-weight: 600;
}

.process-list h3 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 8px;
}

.process-list p {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0;
  max-width: 530px;
}

.process-list svg {
  align-self: center;
  height: 24px;
  justify-self: end;
  stroke-width: 1.25;
  width: 24px;
}

.deliverables {
  background: var(--ink);
  color: var(--white);
  display: grid;
  grid-template-columns: 7fr 5fr;
  min-height: 760px;
}

.deliverables-image {
  min-height: 660px;
  overflow: hidden;
  position: relative;
}

.deliverables-image::after {
  background: rgba(0, 0, 0, 0.08);
  content: "";
  inset: 0;
  position: absolute;
}

.deliverables-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.deliverables-image > p {
  bottom: 20px;
  color: rgba(249, 244, 237, 0.75);
  font-size: 9px;
  left: 24px;
  margin: 0;
  position: absolute;
  z-index: 1;
}

.deliverables-copy {
  align-self: center;
  padding: 72px;
}

.deliverables-copy h2 {
  font-family: var(--font-sans);
  font-size: 52px;
  line-height: 0.98;
  margin: 56px 0 60px;
}

.deliverables-copy h2 em {
  color: var(--coral);
}

.deliverables-copy ul {
  border-top: 1px solid var(--line);
  list-style: none;
  margin: 0;
  padding: 0;
}

.deliverables-copy li {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: 36px 1fr;
  padding: 22px 0;
}

.deliverables-copy li > span {
  color: var(--coral);
  font-size: 9px;
}

.deliverables-copy h3 {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 3px;
}

.deliverables-copy li p {
  color: var(--silver);
  font-size: 11px;
  margin: 0;
}

.inquiry {
  background: var(--ink-soft);
  border-top: 1px solid var(--line);
  color: var(--white);
}

.inquiry-grid {
  display: grid;
  gap: 9%;
  grid-template-columns: 1fr 1fr;
}

.inquiry-copy h2 {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 0.98;
  margin: 68px 0 34px;
}

.inquiry-copy h2 em {
  color: var(--coral);
}

.inquiry-copy > p:last-child {
  color: var(--silver);
  font-size: 14px;
  max-width: 500px;
}

.inquiry-form {
  position: relative;
}

.form-row {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr 1fr;
}

.inquiry-form label {
  display: block;
  margin-bottom: 22px;
}

.inquiry-form label > span:first-child {
  color: var(--silver);
  display: block;
  font-size: 9px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(198 160 116 / 32%);
  border-radius: 0;
  color: var(--white);
  font-size: 13px;
  outline: none;
  padding: 10px 0 13px;
  resize: vertical;
  width: 100%;
}

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  border-color: var(--coral);
}

.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder {
  color: rgba(249, 244, 237, 0.42);
}

.inquiry-form select {
  appearance: none;
  cursor: pointer;
}

.inquiry-form select option {
  background: var(--ink);
}

.select-wrap {
  display: block;
  position: relative;
}

.select-wrap svg {
  height: 15px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 12px;
  width: 15px;
}

.form-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}

.form-footer p {
  color: rgba(249, 244, 237, 0.55);
  font-size: 9px;
  margin: 0;
}

.form-footer .button {
  cursor: pointer;
  min-width: 180px;
}

.form-success {
  align-items: center;
  background: var(--coral);
  color: var(--ink);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 40px;
  position: absolute;
}

.form-success[hidden] {
  display: none;
}

.form-success > svg {
  border: 1px solid currentColor;
  border-radius: 50%;
  height: 46px;
  margin-right: 18px;
  padding: 12px;
  width: 46px;
}

.form-success strong,
.form-success span {
  display: block;
}

.form-success strong {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
}

.form-success span {
  font-size: 11px;
  margin-top: 5px;
}

.site-footer {
  background: var(--ink);
  color: var(--white);
  padding: 72px 32px 24px;
}

.footer-top {
  align-items: end;
  display: grid;
  grid-template-columns: 3fr 4fr 5fr;
  min-height: 180px;
}

.footer-wordmark {
  font-size: 48px;
}

.footer-top > p {
  color: var(--silver);
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0;
}

.footer-email {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  font-family: var(--font-display);
  font-size: 34px;
  justify-content: space-between;
  padding-bottom: 12px;
}

.footer-email svg {
  height: 24px;
  width: 24px;
}

.footer-bottom {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  font-size: 9px;
  grid-template-columns: 1fr auto 1fr;
  margin-top: 76px;
  padding-top: 20px;
  text-transform: uppercase;
}

.footer-bottom p {
  color: rgba(249, 244, 237, 0.55);
  margin: 0;
}

.footer-bottom > p:last-child {
  justify-self: end;
}

.footer-bottom div {
  display: flex;
  gap: 24px;
}

.footer-bottom a:hover {
  color: var(--coral);
}

.reel-dialog {
  background: var(--ink);
  border: 0;
  color: var(--white);
  height: 100dvh;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
  width: 100vw;
}

.reel-dialog::backdrop {
  background: rgba(0, 0, 0, 0.9);
}

.reel-topbar {
  align-items: center;
  display: flex;
  height: 72px;
  justify-content: space-between;
  padding-inline: 24px;
}

.reel-topbar > div {
  display: flex;
  gap: 24px;
}

.reel-topbar p,
.reel-topbar span {
  font-size: 9px;
  margin: 0;
  text-transform: uppercase;
}

.reel-topbar span {
  color: var(--silver);
}

.reel-stage {
  height: calc(100dvh - 72px);
  overflow: hidden;
  position: relative;
}

.reel-slide {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  transform: scale(1.02);
  transition:
    opacity 900ms ease,
    transform 4s linear;
  width: 100%;
}

.reel-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.reel-shade {
  background: rgba(0, 0, 0, 0.28);
  inset: 0;
  position: absolute;
}

.reel-title-wrap {
  bottom: 100px;
  left: 5vw;
  position: absolute;
}

.reel-title-wrap p {
  color: var(--coral);
  font-size: 10px;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.reel-title-wrap h2 {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  margin: 0;
}

.reel-controls {
  align-items: center;
  bottom: 20px;
  display: flex;
  gap: 18px;
  left: 24px;
  position: absolute;
  right: 24px;
}

.reel-controls .icon-button {
  flex: 0 0 42px;
}

.reel-timeline {
  background: rgba(249, 244, 237, 0.3);
  height: 1px;
  position: relative;
  width: 100%;
}

.reel-timeline span {
  background: var(--turwa-gold-gradient);
  height: 2px;
  left: 0;
  position: absolute;
  top: -1px;
  transform: scaleX(0);
  transform-origin: left;
  width: 100%;
}

#reel-time {
  flex: 0 0 auto;
  font-size: 9px;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.2, 0.68, 0.25, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  :root {
    --shell: calc(100% - 48px);
  }

  .hero h1 {
    font-size: 66px;
  }

  .statement {
    font-size: 58px;
  }

  .occasion-panel {
    grid-template-columns: 1fr;
  }

  .occasion-image-wrap {
    aspect-ratio: 16 / 10;
  }

  .occasion-copy {
    padding: 0 28px 36px;
  }

  .point-copy h2 {
    font-size: 52px;
  }

  .deliverables-copy {
    padding: 46px;
  }

  .deliverables-copy h2 {
    font-size: 42px;
  }
}

@media (max-width: 820px) {
  :root {
    --header-height: 70px;
    --shell: calc(100% - 32px);
  }

  .section-pad {
    padding-block: 90px;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    left: 16px;
    right: 16px;
  }

  .site-header.is-fixed {
    padding-inline: 16px;
  }

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

  .menu-toggle {
    display: inline-flex;
  }

  .site-header.menu-active {
    color: var(--ink);
    position: fixed;
  }

  .site-header.menu-active::after {
    background: rgba(18, 17, 15, 0.3);
  }

  .hero {
    height: 88svh;
    min-height: 680px;
  }

  .hero-content {
    bottom: 76px;
    left: 16px;
    right: 16px;
  }

  .hero h1 {
    font-size: 54px;
  }

  .hero-lower {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }

  .hero-meta {
    display: none;
  }

  .hero-timecode {
    bottom: 16px;
    right: 16px;
  }

  .manifesto-grid,
  .occasions-header,
  .process-heading {
    grid-template-columns: 1fr;
  }

  .manifesto-grid > .section-index,
  .occasions-header > .section-index,
  .process-heading > .section-index {
    margin-bottom: 48px;
  }

  .statement {
    font-size: 52px;
  }

  .manifesto-copy {
    margin-left: 0;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 34px;
  }

  .filter-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .project-grid {
    column-gap: 0;
    row-gap: 72px;
  }

  .project-wide,
  .project-portrait,
  .project-full,
  .project-offset,
  .project-vertical {
    grid-column: 1 / -1;
  }

  /* Full width and 4/5 would run past the fold on a phone; the clip
     still reads as vertical at 1/1 without dominating the scroll. */
  .project-vertical .project-media {
    aspect-ratio: 1 / 1;
  }

  .project-portrait {
    margin-left: 24%;
  }

  .project-full .project-media {
    aspect-ratio: 16 / 9;
  }

  .occasions-header h2 {
    font-size: 54px;
  }

  .occasion-stage {
    grid-template-columns: 1fr;
  }

  .occasion-list {
    border-right: 0;
    display: flex;
    overflow-x: auto;
  }

  .occasion-tab {
    border-right: 1px solid var(--line);
    flex: 0 0 auto;
    font-family: var(--font-sans);
    font-size: 12px;
    gap: 8px;
    grid-template-columns: auto auto;
    padding: 18px 22px;
    width: auto;
  }

  .occasion-tab svg {
    display: none;
  }

  .occasion-panel {
    border-top: 1px solid var(--line);
    grid-template-columns: 1fr 1fr;
  }

  .occasion-image-wrap {
    aspect-ratio: 4 / 5;
    margin: 22px;
  }

  .occasion-copy {
    align-self: end;
    padding: 22px 22px 38px 0;
  }

  .occasion-copy h3 {
    font-size: 32px;
  }

  .point-of-view {
    min-height: auto;
  }

  .point-grid {
    grid-template-columns: 1fr;
  }

  .film-stack {
    min-height: 600px;
  }

  .frame-one {
    right: 2%;
  }

  .frame-two {
    bottom: 0;
  }

  .process-heading h2 {
    font-size: 52px;
  }

  .process-heading > p:last-child {
    margin: 26px 0 0;
    max-width: 500px;
  }

  .deliverables {
    grid-template-columns: 1fr;
  }

  .deliverables-image {
    min-height: 560px;
  }

  .inquiry-grid {
    grid-template-columns: 1fr;
  }

  .inquiry-copy {
    margin-bottom: 54px;
  }

  .footer-top {
    gap: 42px;
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    gap: 20px;
    grid-template-columns: 1fr;
  }

  .footer-bottom > p:last-child {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .section-pad {
    padding-block: 76px;
  }

  .hero {
    height: 90svh;
    min-height: 660px;
  }

  .hero-image {
    object-position: 62% center;
  }

  /* At this width the copy runs the full width of the screen, so a
     side-weighted wash buys nothing. It becomes a floor instead: heavy
     under the paragraph and the buttons, light across the sky. */
  .hero-wash {
    background: linear-gradient(
      to top,
      rgba(18, 17, 15, 0.82) 0%,
      rgba(18, 17, 15, 0.56) 34%,
      rgba(18, 17, 15, 0.3) 62%,
      rgba(18, 17, 15, 0.24) 100%
    );
  }

  .hero-content {
    bottom: 64px;
  }

  .hero-eyebrow {
    margin-bottom: 14px;
  }

  .hero h1 {
    font-size: 43px;
    line-height: 0.98;
    margin-bottom: 22px;
  }

  .hero-lower > p {
    font-size: 12px;
    max-width: 340px;
  }

  .hero-actions {
    gap: 16px;
    width: 100%;
  }

  .hero-actions .button {
    gap: 12px;
  }

  .text-button {
    white-space: nowrap;
  }

  .statement,
  .section-heading h2,
  .occasions-header h2,
  .point-copy h2,
  .process-heading h2,
  .inquiry-copy h2 {
    font-size: 42px;
  }

  .manifesto-copy {
    gap: 24px;
    grid-template-columns: 1fr;
  }

  .manifesto-copy p {
    font-size: 16px;
  }

  .filter-tabs {
    gap: 23px;
    width: 100%;
  }

  .project-grid {
    row-gap: 60px;
  }

  .project-portrait {
    margin-left: 14%;
  }

  .project-caption {
    grid-template-columns: 1fr;
  }

  .project-caption h3 {
    font-size: 25px;
  }

  .project-caption > p {
    display: none;
  }

  .project-view {
    height: 46px;
    opacity: 1;
    transform: translate(-50%, -50%);
    width: 46px;
  }

  .occasion-panel {
    grid-template-columns: 1fr;
  }

  .occasion-image-wrap {
    aspect-ratio: 4 / 5;
    margin: 16px;
  }

  .occasion-copy {
    padding: 12px 16px 32px;
  }

  .occasion-copy h3 {
    font-size: 31px;
  }

  .point-copy h2 {
    margin-top: 60px;
  }

  .point-copy > p:not(.section-index) {
    font-size: 15px;
  }

  .film-stack {
    min-height: 460px;
  }

  .film-frame {
    width: 84%;
  }

  .frame-two {
    left: 4%;
  }

  .process-heading {
    margin-bottom: 54px;
  }

  .process-list li {
    grid-template-columns: 34px 1fr auto;
  }

  .process-list h3 {
    font-size: 24px;
  }

  .process-list svg {
    height: 19px;
    width: 19px;
  }

  .deliverables-image {
    min-height: 430px;
  }

  .deliverables-copy {
    padding: 68px 20px;
  }

  .deliverables-copy h2 {
    font-size: 40px;
    margin: 46px 0;
  }

  .inquiry-copy h2 br {
    display: none;
  }

  .form-row {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .form-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .form-footer .button {
    width: 100%;
  }

  .site-footer {
    padding-inline: 20px;
  }

  .footer-email {
    font-size: 24px;
  }

  .footer-bottom div {
    flex-wrap: wrap;
  }

  .reel-title-wrap {
    bottom: 120px;
    left: 20px;
    right: 20px;
  }

  .reel-title-wrap h2 {
    font-size: 38px;
  }

  .reel-controls {
    gap: 10px;
    left: 14px;
    right: 14px;
  }

  #reel-time {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .hero-image {
    transform: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ---------------------------------------------------------------- */
/* Inquiry form — contact method switch and field interactions       */
/* ---------------------------------------------------------------- */

/* The switch lives in the field's micro-label slot, so it carries the
   exact metrics of every other label: 9px, 600, uppercase, 8px below.
   Nothing here introduces a fill or a radius the rest of the form
   does not already use. */
.contact-group {
  margin-bottom: 22px;
}

/* 4px rather than the labels' 8px: the active option's 3px padding plus
   its 1px rule make up the difference, so both columns sit on the same
   baseline. */
.method-switch {
  align-items: baseline;
  display: flex;
  gap: 9px;
  margin-bottom: 4px;
}

.method-switch input {
  height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
}

.method-switch label {
  border-bottom: 1px solid transparent;
  color: var(--silver);
  cursor: pointer;
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  margin: 0;
  padding-bottom: 3px;
  text-transform: uppercase;
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}

.method-switch label:hover {
  color: var(--white);
}

.method-switch input:checked + label {
  border-bottom-color: var(--coral);
  color: var(--white);
}

.method-switch input:focus-visible + label {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}

.method-sep {
  color: rgb(198 160 116 / 40%);
  font-size: 9px;
  line-height: 1;
}

.contact-field[hidden] {
  display: none;
}

/* A gold rule that sweeps in from the left on focus, instead of the
   whole border switching colour at once. */
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  background-color: transparent;
  background-image: linear-gradient(var(--coral), var(--coral));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition:
    background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease;
}

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  background-size: 100% 1px;
}

/* A filled field keeps a slightly brighter rule, so completed rows read
   at a glance without needing an icon. Date inputs are excluded: they
   never show a placeholder, so they would always look filled. */
.inquiry-form input:not([type="date"]):not(:placeholder-shown),
.inquiry-form textarea:not(:placeholder-shown) {
  border-bottom-color: rgb(198 160 116 / 58%);
}

.inquiry-form label:focus-within > span:first-child {
  color: var(--coral);
  transition: color 0.25s ease;
}

.select-wrap svg {
  transition: transform 0.25s ease;
}

.select-wrap:focus-within svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .method-switch label,
  .inquiry-form input,
  .inquiry-form select,
  .inquiry-form textarea,
  .select-wrap svg {
    transition: none;
  }
}

/* ---------------------------------------------------------------- */
/* Premiere date — custom picker                                     */
/* ---------------------------------------------------------------- */

.datefield {
  margin-bottom: 22px;
  position: relative;
}

.datefield-label {
  color: var(--silver);
  display: block;
  font-size: 9px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* Matches the other fields exactly: transparent, hairline underneath,
   and the same sweeping gold rule on focus. */
.datefield-trigger {
  align-items: center;
  background-color: transparent;
  background-image: linear-gradient(var(--coral), var(--coral));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  border-bottom: 1px solid rgb(198 160 116 / 32%);
  color: rgba(249, 244, 237, 0.42);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  padding: 10px 0 13px;
  text-align: left;
  transition:
    background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease,
    color 0.25s ease;
  width: 100%;
}

.datefield-trigger:hover {
  border-color: rgb(198 160 116 / 55%);
}

.datefield-trigger[aria-expanded="true"],
.datefield-trigger:focus-visible {
  background-size: 100% 1px;
}

.datefield-trigger.has-value {
  color: var(--white);
}

.datefield-trigger svg {
  flex: none;
  height: 15px;
  stroke-width: 1.6;
  width: 15px;
}

.datefield:focus-within .datefield-label {
  color: var(--coral);
  transition: color 0.25s ease;
}

.datepicker {
  background: #1b1a17;
  border: 1px solid rgb(198 160 116 / 34%);
  border-radius: 2px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  left: 0;
  max-height: min(70vh, 440px);
  overflow-y: auto;
  padding: 18px;
  position: absolute;
  top: calc(100% + 10px);
  width: min(320px, 100%);
  z-index: 40;
}

.datepicker[hidden] {
  display: none;
}

.datepicker.is-open {
  animation: datepicker-in 200ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes datepicker-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.datepicker-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.datepicker-title {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.01em;
}

.datepicker-nav {
  align-items: center;
  background: transparent;
  border: 1px solid rgb(198 160 116 / 30%);
  border-radius: 50%;
  color: var(--silver);
  cursor: pointer;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  transition:
    border-color 200ms ease,
    color 200ms ease;
  width: 30px;
}

.datepicker-nav:hover {
  border-color: var(--coral);
  color: var(--coral);
}

.datepicker-nav svg {
  height: 15px;
  stroke-width: 1.7;
  width: 15px;
}

.datepicker-weekdays,
.datepicker-grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(7, 1fr);
}

.datepicker-weekdays {
  border-bottom: 1px solid rgb(198 160 116 / 20%);
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.datepicker-weekdays span {
  color: var(--silver);
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.datepicker-grid {
  transition: opacity 160ms ease;
}

.datepicker-grid.is-turning {
  opacity: 0;
}

.datepicker-day {
  aspect-ratio: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--white);
  cursor: pointer;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.datepicker-day:hover:not(:disabled) {
  border-color: rgb(198 160 116 / 55%);
}

.datepicker-day:disabled {
  color: rgba(249, 244, 237, 0.22);
  cursor: default;
}

.datepicker-day.is-outside {
  color: rgba(249, 244, 237, 0.28);
}

/* Today reads as a marker, not a selection — a rule beneath it rather
   than a fill, so it never competes with the chosen date. */
.datepicker-day.is-today {
  border-bottom-color: var(--coral);
}

.datepicker-day.is-selected {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink);
  font-weight: 600;
}

.datepicker-foot {
  border-top: 1px solid rgb(198 160 116 / 20%);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
}

.datepicker-foot button {
  background: transparent;
  color: var(--silver);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0;
  text-transform: uppercase;
  transition: color 200ms ease;
}

.datepicker-foot button:hover {
  color: var(--coral);
}

.datepicker::-webkit-scrollbar {
  width: 4px;
}

.datepicker::-webkit-scrollbar-thumb {
  background: rgb(198 160 116 / 40%);
}

@media (prefers-reduced-motion: reduce) {
  .datepicker.is-open {
    animation: none;
  }

  .datefield-trigger,
  .datepicker-grid,
  .datepicker-day,
  .datepicker-nav,
  .datepicker-foot button {
    transition: none;
  }
}

/* ---------------------------------------------------------------- */
/* Occasion — custom listbox, same language as the date picker       */
/* ---------------------------------------------------------------- */

.selectfield {
  margin-bottom: 22px;
  position: relative;
}

.selectfield-label {
  color: var(--silver);
  display: block;
  font-size: 9px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.selectfield:focus-within .selectfield-label {
  color: var(--coral);
  transition: color 0.25s ease;
}

/* Once script takes over, the native control is clipped rather than
   removed: a required field that is not rendered cannot show its own
   validation message, and submission fails with nothing on screen. */
.selectfield.is-enhanced .select-wrap {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.selectfield-trigger {
  align-items: center;
  background-color: transparent;
  background-image: linear-gradient(var(--coral), var(--coral));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  border-bottom: 1px solid rgb(198 160 116 / 32%);
  color: rgba(249, 244, 237, 0.42);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  padding: 10px 0 13px;
  text-align: left;
  transition:
    background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease,
    color 0.25s ease;
  width: 100%;
}

.selectfield-trigger:hover {
  border-color: rgb(198 160 116 / 55%);
}

.selectfield-trigger[aria-expanded="true"],
.selectfield-trigger:focus-visible {
  background-size: 100% 1px;
}

.selectfield-trigger.has-value {
  color: var(--white);
}

.selectfield-trigger svg {
  flex: none;
  height: 15px;
  stroke-width: 1.7;
  transition: transform 0.25s ease;
  width: 15px;
}

.selectfield-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.selectlist {
  background: #1b1a17;
  border: 1px solid rgb(198 160 116 / 34%);
  border-radius: 2px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  left: 0;
  list-style: none;
  margin: 0;
  max-height: min(58vh, 280px);
  overflow-y: auto;
  padding: 6px;
  position: absolute;
  top: calc(100% + 10px);
  width: 100%;
  z-index: 40;
}

.selectlist[hidden] {
  display: none;
}

.selectlist.is-open {
  animation: datepicker-in 200ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

.selectlist li {
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--white);
  cursor: pointer;
  font-size: 13px;
  padding: 10px 12px;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.selectlist li:hover,
.selectlist li.is-active {
  border-color: rgb(198 160 116 / 55%);
}

.selectlist li[aria-selected="true"] {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink);
  font-weight: 600;
}

.selectlist::-webkit-scrollbar {
  width: 4px;
}

.selectlist::-webkit-scrollbar-thumb {
  background: rgb(198 160 116 / 40%);
}

@media (prefers-reduced-motion: reduce) {
  .selectlist.is-open {
    animation: none;
  }

  .selectfield-trigger,
  .selectfield-trigger svg,
  .selectlist li {
    transition: none;
  }
}

/* ---------------------------------------------------------------- */
/* Content sections added with the new copy                          */
/* ---------------------------------------------------------------- */

.section-lede {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 14px 0 0;
  max-width: 46ch;
}

/* Case study — sits on the light .work ground */

.case-study {
  border-top: 1px solid var(--line-light);
  display: grid;
  gap: 22px 56px;
  grid-template-columns: 1fr 1.4fr;
  margin-top: 72px;
  padding-top: 44px;
}

.case-study .section-index {
  grid-column: 1;
  grid-row: 1;
}

.case-study h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  grid-column: 1;
  grid-row: 2;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.case-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.case-copy p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  max-width: 58ch;
}

/* The chain is the argument the section makes, so it is typeset as a
   sequence rather than decorated with icons. */
.case-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  grid-column: 1 / -1;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.case-chain li {
  align-items: center;
  color: var(--coral-dark);
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case-chain li:not(:last-child)::after {
  color: var(--line-light);
  content: "→";
  font-size: 13px;
  letter-spacing: 0;
  margin: 0 14px;
}

.case-study .button {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 8px;
}

@media (max-width: 860px) {
  .case-study {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .case-study .section-index,
  .case-study h3,
  .case-copy {
    grid-column: 1;
    grid-row: auto;
  }
}

/* FAQ — light ground between two dark sections */

.faq {
  background: var(--paper);
}

.faq-heading {
  margin-bottom: 44px;
  max-width: 40ch;
}

.faq-heading h2 {
  font-family: var(--font-sans);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 0.98;
  margin: 10px 0 0;
  text-wrap: balance;
}

.faq-list {
  border-top: 1px solid var(--line);
  max-width: 900px;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 17px;
  font-weight: 500;
  gap: 24px;
  justify-content: space-between;
  list-style: none;
  padding: 26px 0;
  transition: color 200ms ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--coral-dark);
}

.faq-item summary svg {
  color: var(--coral-dark);
  flex: none;
  height: 18px;
  stroke-width: 1.6;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 18px;
}

/* A plus turned 45° reads as a close mark without a second icon. */
.faq-item[open] summary svg {
  transform: rotate(45deg);
}

.faq-item p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  max-width: 68ch;
  padding: 0 0 30px;
}

.faq-item[open] p {
  animation: faq-reveal 280ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer contact block */

.footer-contact {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 26px 48px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 56px;
  padding-top: 34px;
}

.footer-contact p {
  font-size: 14px;
  margin: 0;
}

.footer-label {
  color: var(--silver);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 8px !important;
  text-transform: uppercase;
}

.footer-contact a:not(.social-button) {
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.footer-contact a:not(.social-button):hover,
.footer-contact a:not(.social-button):focus-visible {
  border-bottom-color: var(--coral);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary,
  .faq-item summary svg,
  .footer-contact a {
    transition: none;
  }

  .faq-item[open] p {
    animation: none;
  }
}

/* ---------------------------------------------------------------- */
/* Inner pages — About and Services                                  */
/* ---------------------------------------------------------------- */

/* The header is built to float over the home page's dark hero image.
   Inner pages have no image behind it, so their opening section
   supplies the dark ground instead. */
.page-hero {
  background: var(--ink);
  color: var(--white);
  padding: calc(var(--header-height) + 96px) 0 112px;
}

.page-hero .eyebrow {
  color: var(--silver);
  margin-bottom: 22px;
}

.page-hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(42px, 6.6vw, 78px);
  line-height: 0.98;
  margin: 0 0 40px;
  max-width: 16ch;
  text-wrap: balance;
}

.page-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 62ch;
}

.page-hero-copy p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
}

.page-hero-copy .quiet {
  color: var(--silver);
}

/* Long-form editorial block */

.prose-section {
  background: var(--ink-soft);
  color: var(--white);
}

.prose-grid {
  display: grid;
  gap: 32px 72px;
  grid-template-columns: 0.85fr 1.15fr;
}

.prose-grid h2 {
  font-family: var(--font-sans);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 0.98;
  margin: 12px 0 0;
  text-wrap: balance;
}

.prose-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.prose-copy p {
  color: var(--silver);
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
  max-width: 62ch;
}

.prose-emphasis {
  border-left: 2px solid var(--coral);
  color: var(--white) !important;
  padding-left: 22px;
}

@media (max-width: 860px) {
  .prose-grid {
    grid-template-columns: 1fr;
  }
}

/* Closing call to action */

.page-cta {
  background: var(--cream);
  color: var(--ink);
  padding-block: 112px;
  text-align: center;
}

.page-cta h2 {
  font-family: var(--font-sans);
  font-size: clamp(34px, 4.8vw, 62px);
  line-height: 0.98;
  margin: 0 auto 20px;
  max-width: 18ch;
  text-wrap: balance;
}

.page-cta p {
  color: var(--coral-dark);
  font-size: 16px;
  margin: 0 auto 34px;
  max-width: 46ch;
}

/* Service blocks */

.services {
  background: var(--paper);
}

.service {
  border-top: 1px solid var(--line-light);
  display: grid;
  gap: 26px 72px;
  grid-template-columns: 0.8fr 1.2fr;
  padding: 56px 0;
}

.service:first-child {
  border-top: 0;
  padding-top: 0;
}

.service-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 0.99;
  margin: 12px 0 0;
  text-wrap: balance;
}

.service-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-body p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  max-width: 60ch;
}

.service-lede {
  color: var(--ink) !important;
  font-size: 17px !important;
}

.service-label {
  color: var(--coral-dark) !important;
  font-size: 9px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-top: 6px !important;
  text-transform: uppercase;
}

.service-list {
  columns: 2;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-list li {
  break-inside: avoid;
  color: var(--muted);
  font-size: 14px;
  padding: 5px 0 5px 18px;
  position: relative;
}

.service-list li::before {
  color: var(--coral);
  content: "—";
  left: 0;
  position: absolute;
}

/* What you hand over, and what comes back */
.service-exchange {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px 28px;
  grid-template-columns: 108px 1fr;
  margin: 8px 0 0;
  padding-top: 20px;
}

.service-exchange dt {
  color: var(--coral-dark);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding-top: 3px;
  text-transform: uppercase;
}

.service-exchange dd {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

.service .button {
  justify-self: start;
  margin-top: 10px;
}

@media (max-width: 860px) {
  .service {
    grid-template-columns: 1fr;
  }

  .service-list {
    columns: 1;
  }

  .service-exchange {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .service-exchange dt {
    margin-top: 12px;
  }
}

/* The chain also appears inside the dark case-study panel, where the
   dark gold would disappear. */
.deliverables .case-chain {
  margin: 30px 0 26px;
}

.deliverables .case-chain li {
  color: var(--coral);
}

.deliverables-copy .button {
  margin-top: 4px;
}

/* The serif is reserved for the gold accent inside a heading, exactly as
   the home page uses it — never for the whole line. */
.page-hero h1 em,
.prose-grid h2 em {
  color: var(--coral);
}

.page-cta h2 em,
.faq-heading h2 em,
.service-head h2 em {
  color: var(--coral-dark);
}

/* WhatsApp is the contact route the number actually opens, so the entry
   carries the icon rather than reading as a plain telephone line. */
.footer-whatsapp {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.footer-whatsapp svg {
  color: var(--coral);
  flex: none;
  height: 15px;
  stroke-width: 1.7;
  width: 15px;
}

/* The number itself dials; WhatsApp sits under it as a second route to
   the same person, so the digits are not printed twice. */
.footer-alt {
  margin-top: 7px !important;
}

/* Social marks — same circular language as .icon-button in the header,
   so the footer does not introduce a new shape. */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.social-button {
  align-items: center;
  border: 1px solid rgb(198 160 116 / 38%);
  border-radius: 50%;
  color: var(--white);
  display: inline-flex;
  flex: none;
  height: 42px;
  justify-content: center;
  transition:
    background-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 260ms cubic-bezier(0.34, 1.4, 0.64, 1);
  width: 42px;
}

.social-button svg {
  height: 18px;
  width: 18px;
}

.social-button:hover,
.social-button:focus-visible {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink);
  transform: translateY(-4px);
}

.social-button:active {
  transform: translateY(-1px);
}

/* The WhatsApp mark sits inline with its label rather than in a circle,
   because it labels an action, not a profile. */
.footer-whatsapp svg {
  color: var(--coral);
  flex: none;
  height: 15px;
  transition: transform 260ms cubic-bezier(0.34, 1.4, 0.64, 1);
  width: 15px;
}

.footer-whatsapp:hover svg {
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .social-button,
  .footer-whatsapp svg {
    transition: none;
  }

  .social-button:hover,
  .social-button:focus-visible {
    transform: none;
  }

  .footer-whatsapp:hover svg {
    transform: none;
  }
}

/* ---------------------------------------------------------------- */
/* Sent — a strip of film running through the panel                  */
/* ---------------------------------------------------------------- */

/* The panel arrives the way a projector lamp strikes: it catches, dips
   once, then holds. Brief enough to read as light, not as a loading bar. */
.form-success:not([hidden]) {
  animation: success-strike 520ms ease both;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

@keyframes success-strike {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  52% {
    opacity: 0.78;
  }
  64% {
    opacity: 1;
  }
}

/* Sprocket holes along both edges, scrolling like film through a gate. */
.success-perf {
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0 13px,
    transparent 13px 32px
  );
  height: 15px;
  left: 0;
  opacity: 0.22;
  position: absolute;
  right: 0;
}

.success-perf-top {
  animation: success-film 900ms linear infinite;
  top: 16px;
}

.success-perf-bottom {
  animation: success-film 900ms linear infinite reverse;
  bottom: 16px;
}

@keyframes success-film {
  to {
    background-position-x: 32px;
  }
}

.success-body {
  align-items: center;
  display: flex;
  gap: 20px;
  margin: auto;
  max-width: 46ch;
}

/* The ring closes like an aperture, then the check strokes through it. */
.success-mark {
  flex: none;
  height: 52px;
  stroke: currentColor;
  stroke-width: 1.4;
  width: 52px;
}

.success-mark circle {
  animation: success-ring 720ms cubic-bezier(0.4, 0, 0.2, 1) 140ms forwards;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  transform: rotate(-90deg);
  transform-origin: center;
}

.success-mark path {
  animation: success-check 380ms cubic-bezier(0.4, 0, 0.2, 1) 660ms forwards;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes success-ring {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes success-check {
  to {
    stroke-dashoffset: 0;
  }
}

.success-copy strong {
  animation: success-rise 520ms cubic-bezier(0.2, 0, 0.2, 1) 540ms both;
}

.success-copy span {
  animation: success-rise 520ms cubic-bezier(0.2, 0, 0.2, 1) 700ms both;
}

@keyframes success-rise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Held still for anyone who asked for less motion — the panel still says
   everything it needs to, it simply does not perform. */
@media (prefers-reduced-motion: reduce) {
  .form-success:not([hidden]),
  .success-perf-top,
  .success-perf-bottom,
  .success-copy strong,
  .success-copy span {
    animation: none;
  }

  .success-mark circle,
  .success-mark path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

@media (max-width: 620px) {
  .success-body {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* Placeholder for the address that is not live yet — it keeps the slot's
   weight but reads as text, not as something to click. */
.footer-email-pending {
  color: var(--silver);
  cursor: default;
  margin: 0;
}

.footer-email-pending svg {
  opacity: 0.6;
}

/* ---------------------------------------------------------------- */
/* Language switch                                                   */
/* ---------------------------------------------------------------- */

/* The header's right column now carries two things, so it becomes a
   flex row instead of a single justify-self:end child. */
.header-end {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-self: end;
}

.header-end .header-cta {
  justify-self: auto;
}

.lang-switch {
  border-bottom: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  padding-bottom: 5px;
  transition: border-color 220ms ease;
  white-space: nowrap;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  border-bottom-color: var(--coral);
}

.mobile-menu .lang-switch {
  border-bottom: 1px solid rgba(18, 17, 15, 0.3);
  display: flex;
  font-family: var(--font-display);
  font-size: 38px;
  justify-content: space-between;
  line-height: 1;
  padding-block: 20px;
  padding-bottom: 20px;
}

@media (max-width: 820px) {
  .header-end .header-cta {
    display: none;
  }

  .header-end {
    gap: 16px;
  }
}