/* House of Creatives — introduction site
   White linen and oxblood. Serif headings and body; a sans only for small capital labels. */

:root {
  --paper: #FFFFFF;
  --white: #FFFFFF;
  --stone: #F6F5F2;
  --ink: #2A1416;
  --ink-soft: #5B4648;
  --maroon: #3D1518;
  --maroon-bright: #5A1A1E;
  --gold: #AE8E4E;
  --gold-deep: #86692D;      /* gold for small text on light grounds (AA) */
  --rule: rgba(42, 20, 22, 0.16);
  --danger: #9B1C1C;

  --display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --max: 68rem;
  --masthead-h: 5.25rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 700ms;
  --quick: 200ms;

  --z-masthead: 310; /* above the linen layer (300), so the bar is plain solid white once scrolled */
  --z-loader: 100;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable; /* no sideways jump when the opening film unlocks scrolling */
  scroll-padding-top: var(--masthead-h);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

/* Linen. A faint woven texture laid as one fixed layer above everything (including the opening
   film), so the film, the travelling crest and the page all sit on the same cloth. It is one tile
   taller than the screen so script.js can slide it upward, more slowly than the content, and wrap
   it round without a seam. */
.linen {
  position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none;
  width: 100%; height: calc(100vh + 384px); height: calc(100lvh + 384px);
  background: url("img/linen.webp") 0 0 / 384px 384px repeat;
  will-change: transform;
}

img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
::selection { background: var(--maroon); color: var(--paper); }

.skip-link {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--maroon); color: var(--paper);
  font-size: 0.875rem; font-weight: 500; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.75rem;
  border: 1px solid var(--maroon); border-radius: 2px;
  background: var(--maroon); color: var(--paper);
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--quick) var(--ease), color var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
.button:hover { background: transparent; color: var(--maroon); }
.button:active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.button[disabled] { opacity: 0.45; cursor: progress; }

/* ───────────── Pointer dot ─────────────
   A small burgundy dot that follows the mouse pointer. Added by script.js on
   devices with a mouse only; it never intercepts clicks. */
.pointer-dot {
  position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none;
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--maroon-bright);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9); /* keeps the dot visible over the burgundy section */
  opacity: 0;
  transition: opacity 250ms var(--ease);
  will-change: transform;
}
.pointer-dot.is-on { opacity: 1; }

/* ───────────── Opening film ───────────── */

.loader { display: none; }
.js .loader {
  display: block;
  position: fixed; inset: 0; z-index: var(--z-loader);
  /* The film is wider than a phone or tablet screen. Clip it hard to the screen: clip-path makes
     the browser cut the film as part of drawing it, which also holds in device simulators that
     otherwise let the video's own layer spill past the simulated screen. */
  overflow: hidden; contain: paint; clip-path: inset(0);
  background: var(--paper);
  transition: opacity 900ms var(--ease), visibility 0s linear 900ms;
}
.js .loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* The film's paper renders as a greyish off-white (about #EEEDE6). Brightness and contrast lift
   every pixel of it, compression noise included, to pure white, which is the page's own
   background, so the film's rectangle cannot be seen. The crest and lotus keep their colour to
   within a few percent. If the page background ever stops being pure white, this needs revisiting. */
.loader__film { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.08) contrast(1.12); }
video.loader__film:not(.has-frame) { opacity: 0; }
/* While the film is zoomed out to fit the bud on a narrow screen, its top and bottom edges are
   on screen; soften them so nothing in the film is cut by a hard line. */
.loader__film.is-letterboxed {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}
/* The image-sequence stand-in already has the paper lifted to white. */
.loader__film--frames { filter: brightness(1.04); } /* a touch more, to clear compression noise in the white */
.loader__crest {
  position: fixed; left: 0; top: 0; z-index: calc(var(--z-loader) + 1);
  visibility: hidden; pointer-events: none;
  transform-origin: 0 0; will-change: transform;
}
.loader__crest img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* While it follows the film, a white disc behind the logo hides the film's softer crest. The disc
   has an opening over the lotus, so the film's 3D lotus stays visible there until the logo's own
   lotus fades in over it. */
.loader__crest.is-tracking {
  border-radius: 50%; box-shadow: 0 0 0 8px var(--paper);
  background: radial-gradient(ellipse 9% 5.95% at 49.1% 79.75%, transparent 0 94%, var(--paper) 100%);
}
.loader__skip {
  position: absolute; right: var(--gutter); bottom: max(1.5rem, env(safe-area-inset-bottom));
  min-height: 44px; padding: 0 0.5rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
}
.loader__skip:hover { color: var(--maroon); }

/* ───────────── Masthead ───────────── */

.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-masthead);
  border-bottom: 1px solid transparent;
  transition: background-color 400ms var(--ease), border-color 400ms var(--ease);
}
.masthead.is-scrolled { background: var(--paper); border-bottom-color: var(--rule); }
.masthead__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--masthead-h);
  max-width: 84rem; margin-inline: auto; padding-inline: var(--gutter);
}
.masthead__nav { display: flex; }
.masthead__nav--left { grid-column: 1; }
.masthead__nav--right { grid-column: 3; justify-content: flex-end; }
.masthead__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: color var(--quick) var(--ease);
}
.masthead__nav a:hover, .masthead__nav a[aria-current="true"] { color: var(--gold-deep); }

.crest {
  grid-column: 2; justify-self: center;
  display: block; width: 3.5rem; height: 3.5rem; border-radius: 50%;
}
.crest img { width: 100%; height: 100%; }
/* Until the opening film's crest lands here, this one stays out of sight. */
.js body:not(.is-landed) .crest img { visibility: hidden; }
.js .masthead__nav { transition: opacity 900ms var(--ease); }
.js body:not(.is-landed) .masthead__nav { opacity: 0; }

@media (min-width: 48rem) {
  .masthead__nav a { letter-spacing: 0.22em; }
}

/* ───────────── Landing ───────────── */

.hero {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.25rem, 3.5vh, 3.25rem);
  padding: calc(var(--masthead-h) + clamp(2.5rem, 8vh, 6.5rem)) var(--gutter) 5rem;
  text-align: center;
}

/* The name beneath the crest, embossed in burgundy: solid colour, lifted off the linen by a
   fine highlight along the top of each letter and a soft shadow beneath. */
.hero__stitch {
  position: absolute; left: 0; right: 0; top: calc(var(--masthead-h) + 0.4rem); z-index: 0;
  text-align: center;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(0.7rem, 1.05vw, 0.875rem); line-height: 1.2;
  letter-spacing: 0.26em; text-indent: 0.26em; /* indent balances the trailing space so it stays centred */
  text-transform: uppercase; white-space: nowrap;
  color: #5A1A1E;
  text-shadow:
    0 -0.5px 0 rgba(255, 255, 255, 0.85),
    0.4px 0.9px 0.8px rgba(42, 20, 22, 0.38),
    0.6px 1.6px 2.2px rgba(42, 20, 22, 0.14);
  user-select: none; pointer-events: none;
}
.hero__title, .hero__quote { position: relative; z-index: 1; }

.hero__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3rem, min(9.6vw, 14.5vh), 11rem);
  line-height: 0.94; letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.hero__title em { display: block; font-style: normal; color: var(--maroon-bright); }
.wide-only { display: none; }

.hero__quote {
  max-width: 46rem;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.35;
  color: var(--ink-soft);
  text-wrap: balance;
}

.hero__cue {
  position: absolute; left: 50%; bottom: 1.75rem; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 0.75em; min-height: 44px;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.hero__cue:hover { color: var(--gold-deep); }

@media (min-width: 64rem) {
  .hero__title { text-wrap: wrap; white-space: nowrap; }
  .wide-only { display: inline; }
}

/* ───────────── Sections ─────────────
   An index layout: a narrow column of small labels on the left, content on the right,
   and hairlines between entries. No cards or boxes. */

.section { padding: clamp(4.5rem, 10vw, 8.5rem) var(--gutter); border-top: 1px solid var(--rule); }
.container { max-width: var(--max); margin-inline: auto; }

.band { display: grid; gap: 1.25rem; }
.band + .band { margin-top: clamp(3rem, 6vw, 5rem); }
.band--lead { margin-bottom: clamp(3.5rem, 8vw, 6.5rem); }

.band__label {
  align-self: start; padding-top: 0.45rem;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5;
  color: var(--gold-deep);
}

.statement {
  max-width: 24em;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.75rem, 3.3vw, 2.75rem); line-height: 1.16; letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}
/* The plain-words line that closes the summary: italic, in the brand maroon, a step smaller. */
.statement--coda { margin-top: 1.5rem; font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 2.5vw, 2.1rem); line-height: 1.25; color: var(--maroon-bright); }
.statement--small { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; max-width: 22em; }

.rows { margin: 0; border-bottom: 1px solid var(--rule); }
.rows--open { border-bottom: 0; } /* no closing rule after the last entry */
.row { display: grid; gap: 0.5rem; padding: 1.5rem 0 1.65rem; border-top: 1px solid var(--rule); }
.row dt { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--maroon); }
.row dd { margin: 0; max-width: 34rem; color: var(--ink-soft); }

@media (min-width: 56rem) {
  .band { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2.5rem; }
  .row { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 2.5rem; padding: 1.75rem 0 1.9rem; align-items: baseline; }
}

/* ───────────── Form ───────────── */

.field { display: grid; gap: 0.4rem; align-content: start; }
.field label { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--maroon-bright); }
.field .opt { font-weight: 400; color: var(--ink-soft); }

.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem;
  padding: 0.7rem 0.9rem;
  background: var(--white);
  border: 1px solid rgba(42, 20, 22, 0.32); border-radius: 2px;
  font-size: 1rem; line-height: 1.4; color: var(--ink);
  transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232A1416' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(61, 21, 24, 0.18);
}
.field [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.field__error { font-size: 0.875rem; line-height: 1.4; color: var(--danger); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-status { font-size: 0.9375rem; color: var(--ink-soft); }
.form-status.is-success { color: var(--maroon); }
.form-status.is-error { color: var(--danger); }

.form-summary {
  padding: 1rem 1.25rem; margin-bottom: 1.75rem;
  background: var(--white); border: 1px solid var(--danger); border-radius: 2px;
  font-size: 0.9375rem; color: var(--danger);
}
.form-summary ul { margin-top: 0.4rem; list-style: disc; padding-left: 1.25rem; }
.form-summary a { color: inherit; }

.enquiry { margin-top: clamp(2rem, 4vw, 3rem); max-width: 44rem; }
.enquiry__grid { display: grid; gap: 1.25rem; }
.enquiry__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
@media (min-width: 40rem) {
  .enquiry__grid { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
  .field--wide { grid-column: 1 / -1; }
}

/* ───────────── Contact on burgundy ───────────── */

.section--burgundy {
  --burgundy: #47101A;
  --gold-pale: #D8C08A;
  --blush: #F6C3BA;   /* error colour that reads on burgundy */
  position: relative; overflow: hidden;
  background: var(--burgundy);
  color: var(--paper); border-top: 0;
}
/* Burgundy linen: the same weave as the page, with the threads catching the light on dark cloth.
   It is its own layer, one tile taller than the section, so script.js can slide it by moving the
   layer (cheap and always drawn) instead of redrawing a background on every frame of a scroll. */
.section__cloth {
  position: absolute; left: 0; right: 0; top: -384px; height: calc(100% + 384px); pointer-events: none;
  background: url("img/linen-light.webp") 0 0 / 384px 384px repeat;
  will-change: transform;
}
.section--burgundy > .container { position: relative; }
.section--burgundy ::selection { background: var(--paper); color: var(--burgundy); }
.section--burgundy :focus-visible { outline-color: var(--gold-pale); }
.section--burgundy .band__label { color: var(--gold-pale); }
.section--burgundy .statement { color: var(--paper); }

.section--burgundy .field label { color: var(--paper); }
.section--burgundy .field .req { color: var(--gold-pale); }
.section--burgundy .field .opt { color: rgba(255, 255, 255, 0.7); }
.section--burgundy .field input, .section--burgundy .field select, .section--burgundy .field textarea {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--paper);
}
.section--burgundy .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23FFFFFF' stroke-width='1.2'/%3E%3C/svg%3E");
}
.section--burgundy .field option { background: var(--white); color: var(--ink); }
.section--burgundy .field input:hover, .section--burgundy .field select:hover, .section--burgundy .field textarea:hover { border-color: var(--paper); }
.section--burgundy .field input:focus-visible, .section--burgundy .field select:focus-visible, .section--burgundy .field textarea:focus-visible {
  border-color: var(--gold-pale); box-shadow: 0 0 0 3px rgba(216, 192, 138, 0.3);
}
.section--burgundy .field [aria-invalid="true"] { border-color: var(--blush); box-shadow: 0 0 0 1px var(--blush); }
.section--burgundy .field__error, .section--burgundy .form-status.is-error { color: var(--blush); }
.section--burgundy .form-status { color: rgba(255, 255, 255, 0.8); }
.section--burgundy .form-status.is-success { color: var(--paper); }
.section--burgundy .form-summary { background: transparent; border-color: var(--blush); color: var(--blush); }

.section--burgundy .button { background: var(--paper); border-color: var(--paper); color: var(--burgundy); }
.section--burgundy .button:hover { background: transparent; color: var(--paper); }
.section--burgundy .button:active { background: var(--gold-pale); border-color: var(--gold-pale); color: var(--burgundy); }

.section--burgundy + .colophon { border-top: 0; }

/* ───────────── Footer ───────────── */

.colophon { border-top: 1px solid var(--rule); padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2.5rem; }
.colophon__inner { display: grid; justify-items: center; gap: 1.25rem; max-width: 40rem; margin-inline: auto; text-align: center; }
.colophon img { width: 5.5rem; height: 5.5rem; }
.colophon__legal { font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft); }
.colophon__copy { font-size: 0.8125rem; color: var(--ink-soft); }

/* ───────────── Reveal on scroll ───────────── */

.js [data-reveal] {
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .loader { display: none; }
  * { transition-duration: 0.01ms !important; }
}