/* ConlanDesign — conlandesign.co.uk
   White site with a soft cursor-reactive glow and faint exposed grid behind the content. Neue Haas Grotesk via Adobe Fonts. */

:root {
  --ink: #17120e;          /* warm near-black */
  --paper: #fbf8f3;        /* warm off-white */
  --mute: #7a7069;
  --line: #e6dfd6;
  --accent: #e4572e;       /* burnt orange */
  --accent-ink: #ffffff;
  --glow-2: #f2b134;       /* amber, secondary glow */
  --radius: 10px;

  --display: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max: 1520px;
  --space-l: clamp(4rem, 10vw, 9rem);
  --space-m: clamp(2rem, 5vw, 4rem);
  --space-s: 1.25rem;
}

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

html {
  font-size: 100%; /* 16px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (min-width: 60em) { html { font-size: 106.25%; } } /* 17px */

body {
  margin: 0;
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
main, .site-head, .dark-band { position: relative; z-index: 1; }

/* Cursor-reactive glow: two soft radial gradients on a fixed layer behind everything.
   JS moves --mx/--my toward the pointer; the drift keyframe keeps it alive without one. */
.glow {
  position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  --mx: 50%; --my: 35%;
  --glow: var(--accent);            /* main tint: site accent, or the project colour */
  --glow2: var(--glow-2);           /* secondary tint on the home and general pages */
  background:
    radial-gradient(36% 36% at var(--mx) var(--my), color-mix(in srgb, var(--glow) 24%, transparent), transparent 70%),
    radial-gradient(42% 42% at calc(100% - var(--mx)) calc(100% - var(--my)), color-mix(in srgb, var(--glow2) 12%, transparent), transparent 70%),
    radial-gradient(30% 30% at calc(var(--mx) * 0.4 + 30%) calc(100% - var(--my) * 0.6), color-mix(in srgb, var(--glow) 10%, transparent), transparent 70%);
  filter: blur(50px);
  will-change: transform;
  transition: --glow .9s ease, --glow2 .9s ease;
}
@property --glow { syntax: '<color>'; inherits: false; initial-value: #e4572e; }
@property --glow2 { syntax: '<color>'; inherits: false; initial-value: #f2b134; }
/* Case studies take the project colour for both tints */
.case .glow { --glow: var(--accent); --glow2: var(--accent); }

/* Exposed grid: faint column lines aligned to the page gutters */
.grid-lines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.grid-lines span { border-left: 1px solid rgba(60,40,20,0.08); }
.grid-lines span:last-child { border-right: 1px solid rgba(60,40,20,0.08); }
.grid-lines span:nth-child(n+7) { display: none; }
@media (min-width: 64em) { .grid-lines { grid-template-columns: repeat(12, 1fr); } .grid-lines span:nth-child(n+7) { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .glow { animation: drift 24s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: translate(-2%, -1%) scale(1); } to { transform: translate(2%, 2%) scale(1.06); } }
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Weights. The Adobe Fonts kit serves Roman (400) and Bold (700) of both families.
   Large display sizes use Roman: at 60px+ Neue Haas Grotesk Roman has plenty of presence and Bold gets heavy.
   Small headings, labels and buttons use Bold so they hold their own against body text.
   If you add 65 Medium to the kit, change --w-display to 500. */
:root { --w-display: 400; --w-ui: 700; }
h1, h2, h3 { font-family: var(--display); font-weight: var(--w-display); margin: 0; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; }
h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.005em; font-weight: var(--w-ui); }
p { margin: 0 0 1em; max-width: 38em; }
p:last-child { margin-bottom: 0; }

.display {
  font-family: var(--display);
  font-weight: var(--w-display);
  font-size: clamp(2.75rem, 7.6vw, 7.25rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 12em;
}
.lede {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 30em;
}

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Header */
.site-head { padding-block: var(--space-s); }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; font-family: var(--display); font-weight: var(--w-ui);
  font-size: 1.1rem; letter-spacing: -0.015em;
}
.brand img { width: 2rem; height: auto; }
.brand:hover { color: var(--ink); }
/* Small mono metadata line in the header (desktop only) */
.meta-line { display: none; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); align-items: center; gap: 0.75rem; margin: 0; max-width: none; }
.meta-line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
@media (min-width: 64em) { .meta-line { display: inline-flex; } }

/* Rolling text: on hover the label slides up and a copy slides in from below */
.roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; line-height: 1.2; }
.roll > span { display: block; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.roll > span + span { position: absolute; left: 0; top: 100%; }
a:hover .roll > span, .button:hover .roll > span { transform: translateY(-100%); }
.button .roll { line-height: 1; }
@media (prefers-reduced-motion: reduce) { .roll > span { transition: none; } }

/* Arrow list of disciplines under the hero lede */
.arrow-list { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.arrow-list button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font-family: var(--text); font-weight: var(--w-ui); font-size: 0.85rem; letter-spacing: 0.02em; text-transform: uppercase; display: inline-flex; gap: 0.4em; transition: color .3s ease; }
.arrow-list button::before { content: "\2192"; color: var(--accent); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.arrow-list button:hover::before { transform: translateX(4px); }
.arrow-list button[aria-pressed="true"] { color: var(--accent); }
.arrow-list button[aria-pressed="true"]::before { content: "\2713"; }
/* Filtered tiles collapse away */
.work-item { transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.work-item.is-hidden { opacity: 0; transform: scale(0.98); pointer-events: none; }
.work-item.is-gone { display: none; }
.count { color: var(--mute); font-size: 0.55em; vertical-align: 0.35em; letter-spacing: 0; }
.arrow-down { display: inline-block; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .arrow-down { animation: bob 1.8s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(4px); } } }

.menu-links { display: flex; gap: clamp(1rem, 3vw, 2.25rem); }
.menu-foot { display: none; }
.menu-btn { display: none; }
.site-nav a { text-decoration: none; font-size: 1rem; }

/* Mobile: hamburger button and a full-screen menu with large links */
@media (max-width: 48em) {
  .site-head { position: relative; z-index: 60; }
  .menu-btn {
    display: grid; gap: 6px; width: 44px; height: 44px; padding: 0; margin-right: -8px;
    place-content: center; background: transparent; border: 0; cursor: pointer; z-index: 70; position: relative;
  }
  .menu-btn span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s ease; transform-origin: center; }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-nav {
    position: fixed; inset: 0; z-index: 65; background: var(--paper);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--space-s) + 44px + 2rem) var(--gutter) 2rem;
    opacity: 0; visibility: hidden; transform: translateY(-2%);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
  .menu-links { flex-direction: column; gap: 0.25em; }
  .menu-links a { font-family: var(--display); font-weight: var(--w-display); font-size: clamp(2.6rem, 13vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; opacity: 0; transform: translateY(0.4em); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
  .site-nav.is-open .menu-links a { opacity: 1; transform: none; }
  .site-nav.is-open .menu-links a:nth-child(1) { transition-delay: .08s; }
  .site-nav.is-open .menu-links a:nth-child(2) { transition-delay: .16s; }
  .site-nav.is-open .menu-links a:nth-child(3) { transition-delay: .24s; }
  .site-nav a[aria-current="page"] .roll { border-bottom: 0; color: var(--accent); }
  .menu-foot { display: grid; gap: 1rem; color: var(--mute); font-size: 0.95rem; }
  .menu-foot p { margin: 0; }
  .menu-foot a { color: var(--ink); }
  body.menu-open { overflow: hidden; }
}
.site-nav a[aria-current="page"] .roll { border-bottom: 1px solid currentColor; }
.text-link .roll { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.text-link { text-decoration: none; }

/* Hero (home) */
.hero { padding-block: clamp(4rem, 11vw, 10rem) clamp(4rem, 8vw, 7rem); }
.hero-h { max-width: 9.5em; font-size: clamp(2.9rem, 8.4vw, 8.25rem); letter-spacing: -0.04em; }
.hero-h .accent { color: var(--accent); }
.hero-h .kw {
  display: inline; cursor: default;
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
  background-repeat: no-repeat; background-size: 0% 38%; background-position: 0 88%;
  transition: background-size .5s cubic-bezier(.2,.7,.2,1), color .3s ease;
  border-radius: 0.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero-h .kw:hover { background-size: 100% 38%; color: var(--accent); }
.hero-h .kw.accent:hover { color: var(--ink); }

.hero-row { display: grid; gap: 1.5rem 3rem; margin-top: clamp(2.5rem, 6vw, 5rem); align-items: end; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
@media (min-width: 48em) {
  .hero-row { grid-template-columns: minmax(0, 30em) 1fr; }
  .hero-actions { justify-content: flex-end; }
}



/* Statement */
.statement { padding-block: var(--space-l); border-top: 1px solid var(--line); }
.eyebrow { font-size: 0.95rem; color: var(--mute); margin-bottom: 1.5rem; }
.statement-text { font-size: clamp(1.9rem, 4.6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.025em; max-width: 18em; }

/* Three-up columns (why section) */
.cols { display: grid; gap: 2rem; }
.col { padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.col h3 { font-size: 1.35rem; margin-bottom: 0.6rem; font-weight: var(--w-display); }
@media (min-width: 48em) { .cols { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

.section-foot { margin-top: var(--space-m); }
.outputs { color: var(--mute); font-size: 0.95rem; margin-top: 0.75rem; }

/* Page heads */
.page-head { padding-block: clamp(2.5rem, 7vw, 6rem) var(--space-m); }
.page-head .lede { margin-top: var(--space-m); }
.crumb { font-size: 0.95rem; color: var(--mute); margin-bottom: 1.25rem; }
.crumb a { text-decoration: none; }
.crumb a::before { content: "\2190\00a0"; }

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, max-content));
  gap: 1rem 4rem; margin: var(--space-m) 0 0; padding-top: 1.25rem; border-top: 1px solid var(--ink);
}
.facts div { margin: 0; }
.facts dt { color: var(--mute); font-size: 0.95rem; }
.facts dd { margin: 0.15rem 0 0; }

/* Buttons and links */
.button {
  display: inline-block; padding: 0.9em 1.5em; border-radius: 999px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font-family: var(--text); font-weight: var(--w-ui); font-size: 0.95rem; line-height: 1;
  border: 1px solid var(--ink); cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.button-light { background: var(--paper); }
.button-light { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.button-light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.text-link { font-family: var(--text); font-weight: var(--w-ui); font-size: 0.95rem; }

/* Sections */
.section { padding-block: var(--space-l); border-top: 1px solid var(--line); }
.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 2rem; margin-bottom: var(--space-m);
}
.section-head p { color: var(--mute); }

/* Two-column rows: heading left, content right */
.rows { display: grid; }
.row {
  display: grid; grid-template-columns: 1fr; gap: 0.75rem 3rem;
  padding-block: 1.75rem; border-top: 1px solid var(--line);
}
.row:first-child { border-top: 0; padding-top: 0; }
.row p { max-width: 36em; }
@media (min-width: 48em) {
  .row { grid-template-columns: minmax(12rem, 1fr) 2fr; padding-block: 2.25rem; }
  .row > h2, .row > h3 { align-self: start; }
}

/* Work list */
.work-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-l); }
.work-link { display: block; text-decoration: none; color: inherit; }
.work-link:hover { color: inherit; }
.work-figure { margin: 0; overflow: hidden; background: var(--accent); border-radius: var(--radius); }
.work-figure { position: relative; }
.work-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.work-figure video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.work-figure.has-video:hover video { opacity: 1; }
.work-link:hover .work-figure img { transform: scale(1.02); }
.work-meta {
  display: grid; grid-template-columns: 1fr; gap: 0.25rem 3rem;
  padding-top: 1rem; border-top: 1px solid var(--ink); margin-top: 1rem;
}
.work-meta h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: var(--w-display); }
.work-meta p { color: var(--mute); }
.work-meta .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.tags span { font-size: 0.8rem; padding: 0.3em 0.75em; border: 1px solid #d6cdc2; border-radius: 999px; color: var(--ink); background: rgba(251,248,243,0.7); }
.work-item { position: relative; }
.work-item::after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 6px; background: var(--accent); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.work-item:hover::after { width: 100%; }
@media (min-width: 48em) {
  .work-meta { grid-template-columns: minmax(12rem, 1fr) 2fr; }
  .work-list { gap: var(--space-m); }
}
@media (min-width: 64em) {
  /* first project full width, the rest in pairs */
  .work-list { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .work-list .work-item:first-child { grid-column: 1 / -1; }
  .work-list .work-item:not(:first-child) .work-meta { grid-template-columns: 1fr; gap: 0.25rem; }
  .work-list .work-item:not(:first-child) .work-meta h3 { font-size: 1.4rem; font-weight: var(--w-display); }
}

/* Case study */
.case-body { display: grid; gap: var(--space-m); margin-top: var(--space-m); padding-bottom: var(--space-l); }
.case-images { display: grid; gap: 1.5rem; min-width: 0; }
.case-text { font-size: 0.95rem; }
.case-text .facts { margin: 0 0 1.5rem; padding-top: 0; border-top: 0; grid-template-columns: 1fr; gap: 1rem; }
/* Scope reads as the same pills used on the work tiles. */
.case-text .facts dd.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* A rule above every section heading splits the column into its parts.
   The kit only carries Roman and Bold, so there is no semi-bold to drop to:
   these headings use Roman and lean on the rules, size and colour for
   hierarchy instead of weight. */
.case-text h2 {
  font-size: 1.35rem; font-weight: var(--w-display);
  margin: 2rem 0 0.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.case-text h2:first-of-type { margin-top: 0; }
.case-text h3 {
  font-size: 1.05rem; font-weight: var(--w-display);
  color: var(--ink); margin: 1.25rem 0 0.3rem;
}
.case-text p { max-width: none; color: #3d3630; }
@media (min-width: 60em) {
  .case-body { grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr); gap: 4rem; align-items: start; }
  .case-text.stick { position: sticky; top: 2rem; }
}
@media (max-width: 59.99em) { .case-text { order: -1; } }
.case-cover { margin: 0; }
.case-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--accent); border-radius: var(--radius); }
.gallery { display: grid; gap: 2rem; }
.gallery-item { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; min-width: 0; }
.gallery-item:not(.palette):not(.logo-guide), .case-cover { background: var(--accent); }
.gallery-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--accent); border-radius: var(--radius); }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem 1.1rem; font-size: 0.95rem; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.gallery-item:hover figcaption, .gallery-item:focus-within figcaption { opacity: 1; transform: none; }
@media (hover: none) { .gallery-item figcaption { display: none; } }
.gallery-item.palette, .gallery-item.logo-guide { overflow: visible; }
.gallery-item.palette figcaption, .gallery-item.logo-guide figcaption { position: static; opacity: 1; transform: none; padding: 0.6rem 0 0; background: none; color: var(--mute); font-size: 0.85rem; display: block; }

/* Interactive palette: swatches share the row, the hovered one expands and shows its values */
.swatches { display: flex; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; gap: 0; }
.swatch {
  flex: 1 1 0; min-width: 0; border: 0; padding: 1rem; cursor: pointer; text-align: left;
  background: var(--c); color: var(--ink); font: inherit;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem;
  transition: flex-grow .5s cubic-bezier(.2,.7,.2,1);
  position: relative;
}
.swatch:hover, .swatch.is-open, .swatch:focus-visible { flex-grow: 3.2; }
.sw-name { font-family: var(--text); font-weight: var(--w-ui); font-size: 0.95rem; line-height: 1.15; writing-mode: vertical-rl; transform: rotate(180deg); align-self: flex-start; white-space: nowrap; transition: writing-mode 0s, transform .3s ease; }
.swatch:hover .sw-name, .swatch.is-open .sw-name, .swatch:focus-visible .sw-name { writing-mode: horizontal-tb; transform: none; font-size: 1.15rem; }
.sw-meta { display: grid; gap: 0.15rem; font-size: 0.8rem; line-height: 1.3; opacity: 0; transform: translateY(6px); transition: opacity .3s ease .1s, transform .3s ease .1s; white-space: nowrap; }
.sw-meta b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; letter-spacing: 0.04em; }
.sw-copy { opacity: 0.7; }
.swatch:hover .sw-meta, .swatch.is-open .sw-meta, .swatch:focus-visible .sw-meta { opacity: 1; transform: none; }
.swatch.is-copied .sw-copy { opacity: 1; font-weight: 500; }
.swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
@media (max-width: 40em) { .swatch { padding: 0.75rem; } .sw-name { font-size: 0.85rem; } }

/* Logo construction guides: a slider fades in a grid, centre axes, bounding box, clear space and a circle */
.logo-stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; --g: 0; }
.logo-stage .logo { position: relative; z-index: 1; width: 60%; height: 54%; overflow: visible; }
/* Construction state (slider at 0): stroke only, anchors and handles on, grid on.
   Finished state (slider at 100): solid fill, construction hidden. */
.logo-fill path { fill: var(--c); opacity: clamp(0, (var(--g) - 0.45) / 0.45, 1); transition: opacity .15s linear; }
.logo-stage { --guide: #e4572e; --ink-line: #17120e; }
.logo-outline path { fill: none; stroke: var(--ink-line); stroke-width: var(--sw); stroke-linejoin: round; opacity: clamp(0, 1 - (var(--g) - 0.6) / 0.4, 1); }
.logo-handles line { stroke: var(--guide); stroke-width: calc(var(--sw) * 0.6); opacity: 0.8; }
.logo-anchors circle { fill: #fff; stroke: var(--guide); stroke-width: calc(var(--sw) * 0.8); }
.logo-anchors .cp { fill: var(--guide); stroke: none; }
.logo-handles, .logo-anchors { opacity: clamp(0, 1 - var(--g) / 0.55, 1); }
.guides { position: absolute; inset: 0; pointer-events: none; }
.guides > div { position: absolute; }
.g-grid { inset: 0; opacity: clamp(0, 1 - (var(--g) - 0.4) / 0.4, 1);
  background-image: linear-gradient(to right, rgba(228,87,46,0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(228,87,46,0.18) 1px, transparent 1px);
  background-size: 5% 8%; }
.g-axes { inset: 0; opacity: clamp(0, 1 - (var(--g) - 0.3) / 0.4, 1); }
.g-axes::before, .g-axes::after { content: ""; position: absolute; background: rgba(228,87,46,0.6); }
.g-axes::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.g-axes::after { top: 50%; left: 0; right: 0; height: 1px; }
.g-box { top: var(--lt, 23%); height: var(--lh, 54%); left: var(--ll, 30%); width: var(--lw, 40%); border: 1px solid var(--guide); opacity: clamp(0, 1 - (var(--g) - 0.5) / 0.3, 1); }
.g-clear { top: calc(var(--lt, 23%) - 10%); height: calc(var(--lh, 54%) + 20%); left: calc(var(--ll, 30%) - 6.25%); width: calc(var(--lw, 40%) + 12.5%); border: 1px dashed rgba(228,87,46,0.7); opacity: clamp(0, 1 - (var(--g) - 0.55) / 0.3, 1); }
.g-circle { top: 50%; left: 50%; width: calc(max(var(--lw, 40%), var(--lh, 54%) * 0.625) * 1.3); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(228,87,46,0.5); opacity: clamp(0, 1 - (var(--g) - 0.2) / 0.4, 1); }
.guide-control { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; font-size: 0.85rem; color: var(--mute); }
.guide-control input { flex: 1; accent-color: var(--accent); }
.gallery-item.logo-guide { display: block; }
@media (min-width: 48em) {
  .gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
  .gallery-item:first-child { grid-column: 1 / -1; }
  .gallery-item:last-child:nth-child(2n) { grid-column: 1 / -1; }
}
.next-project { padding-block: var(--space-l); border-top: 1px solid var(--line); }
.next-project a { display: grid; gap: 2rem; align-items: center; text-decoration: none; color: inherit; }
.next-project p { color: var(--mute); margin-bottom: 0.75rem; }
.next-project .next-tile { margin-top: 1rem; margin-bottom: 0; }
.next-project .display { font-size: clamp(2.5rem, 6vw, 5.5rem); }
.next-project img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.next-project a:hover .display { color: var(--accent); }
.next-project a:hover img { transform: scale(1.02); }
@media (min-width: 48em) { .next-project a { grid-template-columns: 1.2fr 1fr; gap: 4rem; } }

/* Contact form */
.contact-form { max-width: 40rem; display: grid; gap: 1.5rem; }
.field { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-family: var(--text); font-weight: var(--w-ui); font-size: 0.95rem; padding: 0; }
.field input[type="text"], .field input[type="email"], .field textarea {
  font: inherit; color: inherit; width: 100%; padding: 0.8em 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
}
.field input:focus, .field textarea:focus { outline: 0; border-bottom: 2px solid var(--accent); }
.field textarea { resize: vertical; min-height: 8rem; }
.field ::placeholder { color: var(--mute); }
.check { display: flex; align-items: center; gap: 0.6rem; font-family: var(--text); font-weight: 400; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); margin: 0; }
.hp { position: absolute; left: -9999px; }
.contact-form .button { justify-self: start; }

/* Dark band: CTA + footer */
.dark-band { background: #17120e; color: var(--paper); margin-top: var(--space-l); border-radius: 24px 24px 0 0; overflow: hidden; }
.dark-band .button-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.dark-band .button-light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.dark-band a:hover { color: var(--glow-2); }
.dark-band a:hover { color: var(--accent); }
.cta { padding-block: var(--space-l); }
.cta .lede { margin-top: var(--space-m); color: var(--mute); }
.cta .button { margin-top: 2rem; }
.site-foot {
  display: grid; gap: 2rem; padding-block: var(--space-m) var(--space-l);
}
.dark-band .foot-brand p, .dark-band .foot-small { color: #a89f96; }

/* Marquee strip between the CTA and the footer */
.marquee { overflow: hidden; border-block: 1px solid #3a322b; padding-block: 1rem; }
.marquee-track { display: flex; gap: 3rem; width: max-content; font-family: var(--display); font-weight: var(--w-display); font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: -0.01em; color: #a89f96; white-space: nowrap; }
.marquee-track span::after { content: "\00a0\00a0\2022"; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 24s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-25%); } }
}

.foot-brand img { width: 2.5rem; height: auto; margin-bottom: 1rem; }
.foot-brand p { color: var(--mute); }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.foot-links a { text-decoration: none; }
.foot-small { grid-column: 1 / -1; color: var(--mute); font-size: 0.9rem; margin-top: 1rem; }
@media (min-width: 48em) {
  .site-foot { grid-template-columns: 2fr 1fr 1fr; }
}

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

/* One page-load reveal on the home hero: words rise in sequence, then the lede and buttons */
.hero-h .w { display: inline-block; }
.hero-h .nowrap { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .home .hero-h .w {
    opacity: 0; transform: translateY(0.35em);
    animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: calc(var(--i) * 55ms);
  }
  .home .hero-p, .home .hero-actions {
    opacity: 0; transform: translateY(0.6rem);
    animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .home .hero-p { animation-delay: .45s; }
  .home .hero-actions { animation-delay: .55s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* Page transitions between work tiles and case studies (native, no library).
   Browsers without support simply do a normal navigation. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  /* Old page lifts and fades, new page rises in underneath it */
  ::view-transition-old(root) { animation: vt-out .45s cubic-bezier(.4,0,.6,1) forwards; }
  ::view-transition-new(root) { animation: vt-in .75s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-2%); filter: blur(12px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(3%); filter: blur(12px); } 60% { filter: blur(0); } }
}

/* Scroll reveal: elements start slightly low and faded, then rise as they enter the viewport.
   Only applied when JS is running (html.js), so nothing is hidden without it. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Custom "View" cursor over work tiles (pointer devices only) */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  padding: 0.6em 1em; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-family: var(--text); font-weight: var(--w-ui); font-size: 0.9rem; line-height: 1;
  opacity: 0; transform: translate(-50%, -50%) scale(0.6);
  transition: opacity .12s ease;
  will-change: transform;
}
.cursor.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
body.cursor-on .work-link { cursor: none; }

/* Parallax on case study cover: transform is set by JS, image is oversized to hide the edges.
   --sy comes from the scroll position, --px/--py from the pointer; scale() leaves room for both. */
[data-parallax] { overflow: hidden; border-radius: var(--radius); }
[data-parallax] img { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  [data-parallax] img, [data-parallax] video {
    transform: scale(1.18) translate(var(--px, 0%), calc(var(--sy, 0%) + var(--py, 0%)));
  }
}
.case-cover { position: relative; }
.case-cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.case-cover.is-playing video { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .work-figure img { transition: none; }
}

/* Print */
@media print {
  .site-nav, .dark-band, .hero-actions { display: none; }
}


/* ---------------------------------------------------------------------------
   Image loading
   Pictures sit on their project's accent block and fade up once the bitmap has
   actually decoded, instead of snapping in halfway through the download. The
   fade is a keyframe rather than a transition so it never clobbers the
   transform transitions the tiles and the parallax rely on.
   Only applied under html.js, and a failsafe reveals everything after 3s in
   case the script never gets to run. */
.js .work-figure img,
.js .case-cover img,
.js .gallery-item img,
.js .next-project img {
  opacity: 0;
  animation: media-failsafe .8s linear 3s forwards;
}
.js .work-figure img.is-loaded,
.js .case-cover img.is-loaded,
.js .gallery-item img.is-loaded,
.js .next-project img.is-loaded {
  /* opacity, not the animation's fill, is what holds the image visible, so a
     suppressed animation (background tab, reduced motion) still shows it. */
  opacity: 1;
  animation: media-in .8s cubic-bezier(.2, .7, .2, 1);
}
@keyframes media-in {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes media-failsafe { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .work-figure img, .js .case-cover img, .js .gallery-item img, .js .next-project img { opacity: 1; animation: none; }
  .js .work-figure img.is-loaded, .js .case-cover img.is-loaded,
  .js .gallery-item img.is-loaded, .js .next-project img.is-loaded { animation: none; }
}

/* ---------------------------------------------------------------------------
   Cursor parallax on case study images
   Each picture is scaled a touch past its frame so it can drift as the pointer
   crosses it. Pointer devices only: on touch there is no cursor to react to,
   so the images stay uncropped. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .case .gallery-item:not(.palette):not(.logo-guide) img {
    transform: scale(1.07) translate(var(--px, 0%), var(--py, 0%));
  }
  .case .is-tilting img, .case .is-tilting video { will-change: transform; }
}


/* ---------------------------------------------------------------------------
   Case study information column
   Each section heading is a rule-topped row. On narrow screens JS turns the
   headings into buttons and the column becomes a set of dropdowns, so the
   write-up does not push the images down the page. Without JS every section
   simply stays open. */
.case-toggle {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  width: 100%; margin: 0; padding: 0;
  font: inherit; letter-spacing: inherit; color: inherit;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.case-chevron {
  flex: none; align-self: center;
  width: 0.58em; height: 0.58em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.case-toggle[aria-expanded="true"] .case-chevron { transform: translateY(0.1em) rotate(-135deg); }

.case-text.is-accordion { border-bottom: 1px solid var(--line); }
.case-text.is-accordion h2 { margin: 0; padding: 1.1rem 0; }
.case-text.is-accordion .case-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.2, .7, .2, 1);
}
.case-text.is-accordion .case-panel.is-open { grid-template-rows: 1fr; }
.case-text.is-accordion .case-panel > .case-panel-in { overflow: hidden; min-height: 0; }
.case-text.is-accordion .case-panel > .case-panel-in > :last-child { margin-bottom: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
  .case-text.is-accordion .case-panel { transition: none; }
  .case-chevron { transition: none; }
}