:root {
  --paper: #f6f6f4;
  --ink: #292929;
  --muted: #777777;
  --soft: #e9e9e6;
  --coral: #ff624d;
  --coral-light: #ff9b8e;
  --line: rgba(41, 41, 41, .16);
  --serif: Didot, 'Bodoni MT', 'Times New Roman', serif;
  --sans: Inter, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.5; overflow-x: hidden; }
body::selection { background: var(--coral); color: #fff; }
a { color: inherit; }
button { font: inherit; }

body::before { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.cursor-glow { position: fixed; width: 320px; height: 320px; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,98,77,.13), transparent 68%); z-index: 49; opacity: 0; transition: opacity .3s ease; }
@media (hover: hover) { .cursor-glow { opacity: 1; } }

#content { display: block; }
header { position: fixed; z-index: 100; top: 0; left: 0; right: 0; padding: 22px 28px; background: linear-gradient(var(--paper), rgba(246,246,244,.88), transparent); transition: padding .3s ease, background .3s ease; }
header.scrolled { padding-top: 14px; padding-bottom: 14px; background: rgba(246,246,244,.88); backdrop-filter: blur(14px); }
.header-content { display: flex; align-items: center; justify-content: space-between; width: min(100%, 1380px); margin: auto; }
.logo { font: 600 27px/.9 var(--serif); letter-spacing: -.08em; text-decoration: none; }
.logo span { font: 500 10px var(--sans); letter-spacing: 0; vertical-align: top; margin-left: 4px; }
nav { display: flex; gap: clamp(18px, 3vw, 48px); }
nav a { color: var(--ink); font: 10px var(--sans); text-decoration: none; text-transform: uppercase; transition: color .25s ease; }
nav a:hover, nav a.active { color: var(--coral); }

main { overflow: hidden; }
.hero { min-height: 100svh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 130px 28px 90px; }
.hero-copy { position: relative; z-index: 2; width: min(1040px, 100%); margin: 0 auto; text-align: center; }
.eyebrow { color: var(--muted); font: 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.hero .eyebrow { margin-bottom: 35px; }
.hero h1 { font: 500 clamp(70px, 11.1vw, 166px)/.81 var(--serif); letter-spacing: -.09em; text-align: center; }
.hero h1 em { font-style: italic; font-weight: 400; }
.hero h1 span { font-style: italic; }
.hero-intro { max-width: 365px; margin: 40px auto 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.hero-link { display: inline-flex; align-items: center; gap: 16px; margin-top: 30px; color: var(--ink); font: 10px var(--sans); text-decoration: none; text-transform: uppercase; transition: color .25s ease; }
.hero-link span { color: var(--coral); font-size: 17px; animation: bob 1.5s ease-in-out infinite; }
.hero-link:hover { color: var(--coral); }
.hero-orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.orbit-one { width: 850px; height: 380px; bottom: -165px; left: 50%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(255,98,77,.78) 0%, rgba(255,154,140,.4) 30%, rgba(255,207,198,.16) 57%, transparent 72%); filter: blur(18px); }
.orbit-two { width: 480px; height: 210px; bottom: 30px; left: 50%; transform: translateX(-50%); border: 1px solid rgba(255,98,77,.25); opacity: .8; }
.hero-star { position: absolute; z-index: 2; color: var(--ink); font-family: var(--serif); line-height: 1; }
.star-one { top: 28%; left: 14%; font-size: 20px; }.star-two { top: 29%; right: 14%; font-size: 18px; }.star-three { bottom: 28%; left: 14%; font-size: 19px; letter-spacing: .25em; }
.portrait-card { position: absolute; z-index: 3; top: 29%; right: 18%; width: 138px; height: 142px; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #d7d3c9 0%, #a0a3a0 45%, #423f3d 100%); box-shadow: 0 18px 40px rgba(41,41,41,.14); transform: rotate(4deg); }
.portrait-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 65% 32%, rgba(250,220,189,.9) 0 15%, transparent 16%), radial-gradient(ellipse at 66% 15%, #3d3835 0 24%, transparent 25%), linear-gradient(145deg, transparent 36%, rgba(40,40,40,.5) 37% 48%, transparent 49%), linear-gradient(90deg, transparent 45%, rgba(255,255,255,.32) 46% 49%, transparent 50%); mix-blend-mode: multiply; }
.portrait-shape { position: absolute; width: 70px; height: 115px; right: 18px; top: 26px; border-radius: 50% 45% 42% 45%; background: #d7b99c; opacity: .62; transform: rotate(-7deg); }
.portrait-letter { position: absolute; left: 16px; bottom: 15px; color: rgba(255,255,255,.85); font: 600 24px var(--serif); }
.portrait-caption { position: absolute; bottom: 12px; right: 10px; color: rgba(255,255,255,.72); font: 8px var(--sans); text-transform: uppercase; writing-mode: vertical-rl; }
.hero-side-note { position: absolute; right: 28px; bottom: 90px; color: var(--muted); font: 9px/1.5 var(--sans); text-align: right; text-transform: uppercase; }.hero-side-note span { color: var(--coral); font-size: 14px; }

.intro-strip, .section-topline, .about-foot, .footer-inner { width: min(1200px, calc(100% - 56px)); margin: auto; }
.intro-strip { display: flex; justify-content: space-between; align-items: end; padding: 85px 0 120px; border-bottom: 1px solid var(--line); }
.intro-strip p { font: 500 24px/1.15 var(--serif); letter-spacing: -.03em; }.intro-strip span { color: var(--muted); font: 10px var(--mono); }
.portfolio, .about, .skills { width: min(1200px, calc(100% - 56px)); margin: auto; padding: 120px 0; }
.section-topline { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }.section-note { color: var(--muted); font-size: 11px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; padding: 65px 0 80px; }.section-heading h2, .about-heading h2, .skills h2, .contact h2 { font: 500 clamp(53px, 7vw, 98px)/.87 var(--serif); letter-spacing: -.08em; }.section-heading h2 em, .about-heading h2 em, .skills h2 em, .contact h2 em { font-style: italic; font-weight: 400; }.section-heading > p { max-width: 300px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.project-list { display: grid; grid-template-columns: 1.05fr .75fr; gap: clamp(25px, 6vw, 90px); align-items: start; }.project-offset { margin-top: 130px; }.project-visual { position: relative; height: 490px; overflow: hidden; }.visual-blue { background: #b9d8df; }.visual-sand { background: #e2d7c7; }.project-index { position: absolute; top: 20px; left: 20px; font: 11px var(--mono); }.visual-meta { position: absolute; right: 20px; bottom: 20px; font: 9px var(--sans); text-transform: uppercase; }.visual-window { position: absolute; left: 16%; right: 9%; top: 22%; bottom: 17%; display: flex; flex-direction: column; justify-content: center; padding: 28px; background: #f2f0eb; box-shadow: 20px 24px 0 rgba(41,41,41,.1); transform: rotate(-4deg); color: var(--ink); }.visual-window span { font: 500 clamp(30px, 5vw, 62px) var(--serif); letter-spacing: -.1em; }.visual-window b { margin-top: -6px; font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; }.visual-sand::after { content: ''; position: absolute; width: 400px; height: 400px; left: 50%; top: 50%; border: 1px solid rgba(41,41,41,.13); border-radius: 50%; transform: translate(-50%, -50%); }.visual-word { position: absolute; z-index: 1; left: 18%; top: 26%; font: 500 clamp(56px, 8vw, 105px)/.76 var(--serif); letter-spacing: -.1em; }.project-details { display: flex; justify-content: space-between; gap: 20px; padding: 25px 0 0; }.project-type { color: var(--coral); font: 10px var(--sans); text-transform: uppercase; margin-bottom: 10px; }.project-details h3 { font: 500 30px var(--serif); letter-spacing: -.04em; }.project-details p:last-child { max-width: 360px; color: var(--muted); font-size: 12px; line-height: 1.65; margin-top: 8px; }.project-details a, .text-link { align-self: start; white-space: nowrap; border-bottom: 1px solid var(--ink); color: var(--ink); font: 10px var(--sans); text-decoration: none; text-transform: uppercase; padding-bottom: 5px; transition: color .25s ease, border-color .25s ease; }.project-details a span, .text-link span { color: var(--coral); font-size: 14px; margin-left: 5px; }.project-details a:hover, .text-link:hover { color: var(--coral); border-color: var(--coral); }

.about { border-top: 1px solid var(--line); }.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding: 80px 0 110px; align-items: start; }.about-copy { padding-top: 16px; max-width: 390px; }.about-copy p { color: var(--muted); font: 19px/1.55 var(--serif); margin-bottom: 22px; }.about-copy .text-link { display: inline-block; margin-top: 20px; }.about-foot { width: 100%; display: flex; justify-content: space-between; color: var(--muted); padding-top: 22px; border-top: 1px solid var(--line); font: 10px var(--mono); }
.skills { border-top: 1px solid var(--line); }.skills-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: center; padding-top: 80px; }.tool-cloud { display: flex; flex-wrap: wrap; gap: 9px; max-width: 500px; }.tool-cloud span { padding: 11px 15px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: 12px; transition: .25s ease; }.tool-cloud span:hover { color: var(--ink); border-color: var(--coral); background: rgba(255,98,77,.08); transform: translateY(-3px); }.tool-cloud span:last-child { color: var(--coral); border-color: var(--coral); }
.contact { position: relative; min-height: 640px; overflow: hidden; padding: 135px 28px 100px; background: var(--ink); color: var(--paper); text-align: center; }.contact::before { content: ''; position: absolute; width: 900px; height: 460px; left: 50%; bottom: -300px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(255,98,77,.8), transparent 68%); filter: blur(20px); }.contact .eyebrow { color: var(--coral-light); }.contact h2 { position: relative; z-index: 1; margin: 36px 0 25px; }.contact h2 em { color: var(--coral-light); }.contact-copy { position: relative; z-index: 1; max-width: 360px; margin: auto; color: rgba(246,246,244,.66); font: 17px/1.6 var(--serif); }.contact-button { position: relative; z-index: 1; display: inline-flex; margin-top: 32px; padding: 14px 20px; border: 1px solid rgba(246,246,244,.5); color: var(--paper); font: 10px var(--sans); text-decoration: none; text-transform: uppercase; transition: .25s ease; }.contact-button span { color: var(--coral-light); font-size: 15px; margin-left: 12px; }.contact-button:hover { background: var(--coral); border-color: var(--coral); transform: translateY(-3px); }.contact-mark { position: absolute; top: 100px; right: 13%; color: var(--coral); font-size: 22px; animation: spin 8s linear infinite; }
footer { background: var(--ink); color: var(--paper); padding: 28px; }.footer-inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; align-items: center; gap: 30px; }.footer-inner .logo { font-size: 24px; }.footer-inner p { color: rgba(246,246,244,.58); font: 12px/1.5 var(--serif); }.footer-links { display: flex; gap: 22px; }.footer-links a { color: rgba(246,246,244,.7); font: 10px var(--sans); text-decoration: none; text-transform: uppercase; }.footer-links a:hover { color: var(--coral-light); }.footer-year { color: rgba(246,246,244,.45); font: 10px var(--mono); }

@keyframes bob { 50% { transform: translateY(5px); } } @keyframes spin { to { transform: rotate(360deg); } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) { .portrait-card { right: 10%; }.project-list { grid-template-columns: 1fr; }.project-offset { margin-top: 75px; }.project-visual { height: 430px; }.about-layout, .skills-row { gap: 50px; }.footer-inner { grid-template-columns: 1fr 1fr; }.footer-year { justify-self: end; } }
@media (max-width: 620px) { header { padding: 18px 18px; }.header-content { align-items: flex-start; }.logo { font-size: 24px; }nav { gap: 14px; align-items: center; }nav a { font-size: 8px; }.hero { min-height: 790px; padding: 120px 20px 50px; align-items: flex-start; }.hero-copy { padding-top: 80px; }.hero .eyebrow { margin-bottom: 25px; font-size: 8px; }.hero h1 { font-size: clamp(57px, 16.7vw, 94px); }.hero-intro { margin-top: 30px; font-size: 12px; }.portrait-card { top: 142px; right: 16px; width: 94px; height: 98px; }.portrait-letter { font-size: 18px; left: 10px; bottom: 10px; }.portrait-caption { font-size: 6px; }.hero-side-note { display: none; }.hero-star { font-size: 14px; }.star-one { left: 8%; top: 24%; }.star-two { right: 7%; top: 31%; }.star-three { left: 9%; bottom: 21%; }.orbit-one { width: 620px; height: 320px; bottom: -170px; }.intro-strip, .portfolio, .about, .skills { width: calc(100% - 40px); }.intro-strip { padding: 65px 0 85px; }.intro-strip p { font-size: 20px; }.section-topline { align-items: flex-start; }.section-note { max-width: 100px; text-align: right; }.portfolio, .about, .skills { padding: 85px 0; }.section-heading { display: block; padding: 45px 0 55px; }.section-heading > p { margin-top: 28px; }.section-heading h2, .about-heading h2, .skills h2, .contact h2 { font-size: 58px; }.project-visual { height: 330px; }.project-details { display: block; }.project-details a { display: inline-block; margin-top: 18px; }.about-layout, .skills-row { display: block; padding: 55px 0 75px; }.about-copy { padding-top: 38px; }.about-copy p { font-size: 18px; }.about-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; font-size: 8px; }.about-foot span:last-child { grid-column: 1 / -1; }.tool-cloud { margin-top: 45px; }.tool-cloud span { font-size: 11px; padding: 9px 12px; }.contact { min-height: 580px; padding: 100px 22px 80px; }.contact-mark { top: 75px; right: 14%; }.footer-inner { width: 100%; grid-template-columns: 1fr 1fr; gap: 25px 18px; }.footer-inner .logo { grid-column: 1 / -1; }.footer-links { gap: 13px; flex-wrap: wrap; }.footer-year { grid-column: 1 / -1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Dark editorial refresh — inspired by the supplied reference. */
:root {
  --paper: #080808;
  --ink: #f5f2ed;
  --muted: #aaa6a0;
  --soft: #151313;
  --coral: #ff3b2f;
  --coral-light: #ff9f7e;
  --line: rgba(255,255,255,.15);
}

body {
  background:
    radial-gradient(circle at 52% 4%, rgba(255,96,88,.28), transparent 25rem),
    radial-gradient(circle at 82% 18%, rgba(120,18,15,.28), transparent 28rem),
    #080808;
  color: var(--ink);
}

body::before { opacity: .14; mix-blend-mode: screen; }
.cursor-glow { background: radial-gradient(circle, rgba(255,63,48,.18), transparent 68%); }

header {
  top: 18px;
  left: 50%;
  right: auto;
  width: min(1160px, calc(100% - 36px));
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(10,10,10,.78);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

header.scrolled { padding: 12px 18px; background: rgba(8,8,8,.92); }
.header-content { width: 100%; }
.logo { letter-spacing: -.05em; }
nav { padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,.07); }
nav a { color: rgba(255,255,255,.72); font-size: 11px; }
nav a:hover, nav a.active { color: #fff; }

.hero {
  width: min(1360px, calc(100% - 36px));
  min-height: calc(100svh - 36px);
  margin: 18px auto 0;
  padding-top: 150px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 16% 92%, rgba(255,35,27,.96) 0, rgba(255,49,37,.58) 18%, transparent 42%),
    radial-gradient(ellipse at 73% 105%, rgba(255,58,37,.72), transparent 37%),
    linear-gradient(180deg, #050505 0%, #050505 62%, #130908 100%);
  box-shadow: 0 40px 110px rgba(255,42,32,.16);
}

.hero-copy { align-self: flex-start; }
.hero .eyebrow { color: rgba(255,255,255,.62); }
.hero h1 {
  max-width: 1120px;
  margin: 0 auto;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(66px, 10.2vw, 148px);
  font-weight: 500;
  line-height: .86;
  letter-spacing: -.085em;
}
.hero h1 em { color: var(--coral-light); font-family: var(--serif); font-weight: 400; }
.hero h1 span { color: rgba(255,255,255,.48); }
.hero-intro { max-width: 480px; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.65; }
.hero-link { color: #fff; border-color: rgba(255,255,255,.35); }
.hero-side-note { color: rgba(255,255,255,.58); }
.hero-orbit { border-color: rgba(255,255,255,.12); }
.portrait-card { border: 1px solid rgba(255,255,255,.2); box-shadow: 0 20px 55px rgba(0,0,0,.45); }

.intro-strip, .portfolio, .about, .skills { width: min(1160px, calc(100% - 40px)); }
.intro-strip p { color: #fff; font-size: clamp(24px, 3vw, 38px); }
.section-note, .section-heading > p, .project-details p:last-child, .about-copy p { color: var(--muted); }
.section-heading > p, .project-details p:last-child { font-size: 14px; }

.project-visual { border: 1px solid rgba(255,255,255,.12); border-radius: 22px; }
.visual-blue {
  background: radial-gradient(circle at 22% 88%, #ff4a3b, transparent 42%), linear-gradient(145deg, #101113, #262d31);
}
.visual-sand {
  background: radial-gradient(circle at 78% 84%, #ff563f, transparent 40%), linear-gradient(145deg, #171313, #36231f);
}
.project-index, .visual-meta { color: rgba(255,255,255,.7); }
.visual-window { background: rgba(9,9,9,.9); color: #fff; box-shadow: 20px 24px 0 rgba(255,66,48,.2); }
.project-details h3 { color: #fff; font-size: 36px; }

.about, .skills { border-color: var(--line); }
.tool-cloud span { color: #d6d2cc; background: rgba(255,255,255,.035); }
.tool-cloud span:hover { color: #fff; background: rgba(255,59,47,.14); }

.contact {
  width: min(1360px, calc(100% - 36px));
  margin: 0 auto 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  background: #050505;
}
.contact::before { bottom: -240px; background: radial-gradient(ellipse, rgba(255,50,36,.95), transparent 67%); }
footer { background: #080808; }

/* Editorial About section. */
.about { position: relative; overflow: hidden; padding-top: 42px; }
.about::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  left: -250px;
  top: 20%;
  border: 1px solid rgba(255,107,81,.14);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(255,56,38,.07);
}
.about-layout { position: relative; grid-template-columns: 1.08fr .92fr; align-items: center; min-height: 590px; }
.about-heading { position: relative; min-height: 450px; display: flex; align-items: center; }
.about-number {
  position: absolute;
  left: -.07em;
  top: -.04em;
  color: rgba(255,108,81,.1);
  font: 600 clamp(190px, 26vw, 380px)/1 var(--sans);
  letter-spacing: -.12em;
  pointer-events: none;
}
.about-coordinate { position: absolute; top: 28px; left: 8px; color: var(--coral-light); font: 9px var(--mono); letter-spacing: .12em; writing-mode: vertical-rl; }
.about-heading h2 { position: relative; z-index: 2; margin-left: clamp(35px, 6vw, 90px); }
.about-heading h2 em {
  position: relative;
  display: inline-block;
  color: var(--coral-light);
  text-shadow: 0 0 35px rgba(255,88,62,.16);
}
.about-heading h2 em::after {
  content: '';
  position: absolute;
  left: -.08em;
  right: -.12em;
  bottom: -.04em;
  height: .12em;
  border: 1px solid rgba(255,133,104,.42);
  border-width: 1px 0;
  transform: rotate(-2deg);
}
.about-orbit { position: absolute; right: 1%; bottom: 9%; width: 120px; height: 120px; border: 1px dashed rgba(255,255,255,.16); border-radius: 50%; animation: symbol-spin 18s linear infinite; }
.about-orbit::before { content: ''; position: absolute; inset: 17px; border: 1px solid rgba(255,104,78,.22); border-radius: 50%; }
.about-orbit span { position: absolute; top: -10px; left: 50%; color: var(--coral-light); font-size: 16px; }
.about-copy {
  position: relative;
  max-width: 500px;
  padding: clamp(32px, 4vw, 58px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 2px 42px 2px 42px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 3px 0 0 rgba(255,80,55,.65);
}
.about-copy::before { content: '“'; position: absolute; right: 30px; top: -35px; color: rgba(255,107,80,.15); font: 180px/.8 var(--serif); }
.about-label { display: block; margin-bottom: 34px; color: var(--coral-light); font: 9px var(--mono); letter-spacing: .16em; }
.about-copy p { position: relative; z-index: 1; color: #c2beb8; font-size: 18px; }
.about-copy mark { color: #fff; background: linear-gradient(transparent 62%, rgba(255,80,55,.32) 62%); }
.about-signoff { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: 42px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.11); }
.about-signoff > span { color: rgba(255,255,255,.36); font: 8px var(--mono); letter-spacing: .12em; }
.about-copy .text-link { margin-top: 0; }
.about-foot { position: relative; }
.about-foot span::before { content: '●'; margin-right: 9px; color: var(--coral); font-size: 6px; vertical-align: middle; }

@media (max-width: 720px) {
  .about-layout { min-height: 0; }
  .about-heading { min-height: 390px; }
  .about-heading h2 { margin-left: 20px; }
  .about-number { top: .08em; font-size: 190px; }
  .about-coordinate { top: 50px; left: 0; }
  .about-orbit { right: 4%; bottom: 2%; width: 90px; height: 90px; }
  .about-copy { padding: 34px 25px; border-radius: 2px 30px 2px 30px; }
  .about-signoff { display: block; }
  .about-signoff > span { display: block; margin-bottom: 22px; }
}

@media (max-width: 900px) {
  .portrait-card { top: auto; right: 6%; bottom: 24%; }
}

@media (max-width: 620px) {
  header { top: 10px; width: calc(100% - 20px); padding: 12px 14px; }
  nav { gap: 10px; padding: 8px 10px; }
  nav a { font-size: 8px; }
  .hero { width: calc(100% - 20px); min-height: 760px; margin-top: 10px; border-radius: 20px; }
  .hero-copy { padding-top: 68px; }
  .hero h1 { font-size: clamp(54px, 16vw, 88px); }
  .hero-intro { font-size: 14px; }
  .project-visual { border-radius: 16px; }
  .contact { width: calc(100% - 20px); border-radius: 20px; }
}

/* Enquiry page refinement. */
body .enquiry-main { position: relative; grid-template-columns: minmax(0, .8fr) minmax(560px, 1.2fr); gap: clamp(55px, 7vw, 110px); align-items: start; padding-top: 128px; }
body .enquiry-intro { position: sticky; top: 108px; min-height: calc(100vh - 150px); padding: clamp(65px, 8vw, 115px) 0 50px; overflow: hidden; }
body .enquiry-intro::before { content: ''; position: absolute; z-index: 0; width: 480px; height: 230px; right: -260px; bottom: 10%; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; transform: rotate(-28deg); }
body .enquiry-intro::after { content: '✦'; position: absolute; right: 8%; bottom: 25%; color: var(--coral-light); font-size: 18px; animation: spin 10s linear infinite; }
body .enquiry-intro > * { position: relative; z-index: 1; }
body .enquiry-intro .eyebrow { color: var(--coral-light); }
body .enquiry-intro h1 { max-width: 720px; margin: 34px 0 38px; font-size: clamp(72px, 7.6vw, 122px); }
body .enquiry-intro > p:not(.eyebrow) { max-width: 480px; color: rgba(255,255,255,.58); font: 17px/1.7 var(--serif); }
body .enquiry-details { display: grid; gap: 0; max-width: 480px; margin-top: 55px; border-top: 1px solid rgba(255,255,255,.1); }
body .enquiry-details span { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.47); font: 8px/1.5 var(--mono); letter-spacing: .04em; }
body .enquiry-details b { color: var(--coral); font-weight: 400; }
body .enquiry-availability { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: rgba(255,255,255,.68); font: 8px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
body .enquiry-availability i { width: 7px; height: 7px; border-radius: 50%; background: #77e493; box-shadow: 0 0 12px rgba(119,228,147,.45); }
body .enquiry-panel { position: relative; margin: 0 0 100px; padding: clamp(34px, 4.4vw, 62px); overflow: hidden; border-color: rgba(255,255,255,.13); border-radius: 3px 3px 38px 3px; background: radial-gradient(circle at 100% 0, rgba(255,76,50,.11), transparent 28%), linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: 0 35px 90px rgba(0,0,0,.24); }
body .enquiry-panel::before { content: 'BRIEF'; position: absolute; right: -2%; top: 22%; color: transparent; font: 700 clamp(120px, 14vw, 220px)/1 var(--sans); letter-spacing: -.09em; -webkit-text-stroke: 1px rgba(255,255,255,.025); pointer-events: none; }
body .enquiry-panel-head { position: relative; display: flex; justify-content: space-between; align-items: end; margin-bottom: 44px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.12); }
body .enquiry-panel-head div { display: grid; gap: 9px; }
body .enquiry-panel-head span { color: var(--coral-light); font: 8px var(--mono); letter-spacing: .14em; }
body .enquiry-panel-head strong { color: #f4f1ec; font: 400 25px var(--serif); }
body .enquiry-panel-head > span { color: rgba(255,255,255,.3); }
body .enquiry-panel form { position: relative; gap: 20px; }
body .enquiry-panel label { gap: 9px; padding: 16px 17px 12px; border: 1px solid rgba(255,255,255,.085); border-radius: 10px; background: rgba(0,0,0,.16); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
body .enquiry-panel label:focus-within { border-color: rgba(255,114,84,.65); background: rgba(255,72,46,.035); transform: translateY(-1px); }
body .enquiry-panel label > span { color: rgba(255,255,255,.42); font-size: 7px; letter-spacing: .1em; }
body .enquiry-panel input,
body .enquiry-panel select,
body .enquiry-panel textarea { min-height: 34px; padding: 5px 0; border: 0; color: #f5f2ed; font-size: 14px; }
body .enquiry-panel input::placeholder,
body .enquiry-panel textarea::placeholder { color: rgba(255,255,255,.25); }
body .enquiry-panel textarea { min-height: 145px; line-height: 1.65; }
body .enquiry-submit { margin-top: 10px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
body .enquiry-submit p { display: grid; gap: 7px; color: rgba(255,255,255,.38); font: 9px/1.55 var(--sans); }
body .enquiry-submit p span { color: var(--coral-light); font: 7px var(--mono); letter-spacing: .12em; }
body .enquiry-submit button { min-width: 220px; padding: 17px 21px; border-radius: 999px; background: #f4f1ed; transition: transform .2s ease, background .2s ease; }
body .enquiry-submit button:hover { background: #fff; transform: translateY(-2px); }

@media (max-width: 1050px) {
  body .enquiry-main { grid-template-columns: 1fr; width: min(820px, calc(100% - 40px)); padding-top: 90px; }
  body .enquiry-intro { position: relative; top: auto; min-height: auto; padding-bottom: 20px; }
  body .enquiry-intro h1 { font-size: clamp(72px, 13vw, 118px); }
}

@media (max-width: 600px) {
  body .enquiry-main { width: calc(100% - 20px); gap: 38px; padding-top: 78px; }
  body .enquiry-intro { padding: 62px 10px 10px; }
  body .enquiry-intro h1 { margin-top: 27px; font-size: 18vw; }
  body .enquiry-intro > p:not(.eyebrow) { font-size: 15px; }
  body .enquiry-details { margin-top: 38px; }
  body .enquiry-panel { margin-bottom: 60px; padding: 28px 18px; border-radius: 3px 3px 26px 3px; }
  body .enquiry-panel-head strong { font-size: 21px; }
  body .enquiry-panel .field-row { grid-template-columns: 1fr; gap: 20px; }
  body .enquiry-submit { gap: 24px; }
  body .enquiry-submit button { width: 100%; }
}

/* Full-width, low-noise layout. */
body { background: #080808; }
body::before, .cursor-glow, .hero-orbit, .hero-star, .portrait-card, .hero-side-note { display: none !important; }

header {
  top: 0;
  width: 100%;
  border-width: 0 0 1px;
  border-radius: 0;
}

.hero {
  width: 100%;
  min-height: 100svh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, #080808 0%, #080808 68%, #2a0b08 100%);
}

.hero h1 { max-width: none; }
.hero h1 span { color: rgba(255,255,255,.62); }
.hero-intro { color: rgba(255,255,255,.78); }

.intro-strip, .portfolio, .about, .skills, .footer-inner {
  width: min(1440px, calc(100% - 80px));
}

.contact {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}

@media (max-width: 620px) {
  header, .hero, .contact { width: 100%; margin: 0; border-radius: 0; }
  .intro-strip, .portfolio, .about, .skills, .footer-inner { width: calc(100% - 40px); }
}

/* Expressive details: distinctive, but deliberately lightweight. */
.hero {
  --pointer-x: 50%;
  --pointer-y: 45%;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,71,52,.17), transparent 20rem),
    linear-gradient(180deg, #080808 0%, #080808 66%, #280a07 100%);
}

.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(78vw, 1040px);
  aspect-ratio: 2.4;
  left: 50%;
  bottom: -15%;
  border: 1px solid rgba(255,99,76,.32);
  border-radius: 50%;
  transform: translateX(-50%) rotate(-4deg);
  box-shadow: 0 0 80px rgba(255,52,38,.1), inset 0 0 80px rgba(255,52,38,.08);
  animation: orbit-breathe 6s ease-in-out infinite;
}

.hero-symbols { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.symbol { position: absolute; color: rgba(255,255,255,.68); font-family: var(--mono); text-shadow: 0 0 18px rgba(255,92,71,.7); }
.symbol-one { top: 24%; left: 8%; font-size: 20px; animation: symbol-float 4.8s ease-in-out infinite; }
.symbol-two { top: 36%; right: 9%; color: var(--coral-light); font-size: 34px; animation: symbol-float 6s ease-in-out -2s infinite; }
.symbol-three { left: 14%; bottom: 22%; font-size: 18px; animation: symbol-spin 12s linear infinite; }
.symbol-four { right: 16%; bottom: 18%; padding: 8px 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; font-size: 13px; animation: symbol-float 5.5s ease-in-out -1s infinite; }
.symbol-five { top: 18%; right: 27%; color: rgba(255,255,255,.28); font-size: 44px; animation: symbol-pulse 4s ease-in-out infinite; }

.hero h1 em { position: relative; display: inline-block; }
.hero h1 em::after {
  content: '';
  position: absolute;
  left: 4%;
  right: -2%;
  bottom: .04em;
  height: .04em;
  background: linear-gradient(90deg, transparent, var(--coral-light), transparent);
  transform: scaleX(.25);
  transform-origin: center;
  transition: transform .55s ease;
}
.hero:hover h1 em::after { transform: scaleX(1); }

.hero-link, .contact-button { position: relative; overflow: hidden; }
.hero-link::before, .contact-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.2), transparent 75%);
  transform: translateX(-130%);
  transition: transform .65s ease;
}
.hero-link:hover::before, .contact-button:hover::before { transform: translateX(130%); }

.inline-symbol, .section-symbol { color: var(--coral-light); }
.inline-symbol { display: inline-block; margin-right: .3em; animation: symbol-spin 10s linear infinite; }
.section-symbol { display: inline-block; margin-right: 7px; font-size: 1.3em; }

.project-visual { transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease; }
.project:hover .project-visual { transform: translateY(-8px); box-shadow: 0 28px 70px rgba(255,48,34,.15); }
.project-visual::before {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .8s ease;
}
.project:hover .project-visual::before { transform: translateX(120%); }

@keyframes symbol-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(8deg); } }
@keyframes symbol-spin { to { transform: rotate(360deg); } }
@keyframes symbol-pulse { 0%,100% { opacity: .3; transform: scale(.9); } 50% { opacity: .72; transform: scale(1.08); } }
@keyframes orbit-breathe { 0%,100% { opacity: .5; transform: translateX(-50%) rotate(-4deg) scale(.96); } 50% { opacity: 1; transform: translateX(-50%) rotate(-1deg) scale(1.03); } }

@media (max-width: 620px) {
  .symbol-two, .symbol-five { display: none; }
  .symbol-one { top: 20%; left: 6%; }
  .symbol-three { left: 8%; bottom: 17%; }
  .symbol-four { right: 8%; bottom: 15%; }
  .hero::before { background-size: 38px 38px; }
}

/* Signature toolkit section. */
.skills {
  position: relative;
  width: min(1440px, calc(100% - 40px));
  margin: 80px auto;
  padding: 32px clamp(22px, 4vw, 64px) 70px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 78%, rgba(255,58,43,.2), transparent 30%),
    linear-gradient(135deg, #111 0%, #080808 70%);
}
.skills::before {
  content: '03';
  position: absolute;
  right: -2vw;
  top: -12vw;
  color: transparent;
  font: 600 clamp(230px, 35vw, 520px)/1 var(--sans);
  letter-spacing: -.12em;
  -webkit-text-stroke: 1px rgba(255,255,255,.055);
  pointer-events: none;
}
.skills .section-topline { position: relative; z-index: 2; }
.skills-row { position: relative; z-index: 2; grid-template-columns: .85fr 1.15fr; gap: clamp(45px, 8vw, 120px); }
.skills-heading { position: relative; padding-top: 40px; }
.skills-number {
  position: absolute;
  left: -.08em;
  top: -.35em;
  color: rgba(255,126,100,.12);
  font: 600 clamp(120px, 16vw, 240px)/1 var(--sans);
  letter-spacing: -.1em;
}
.skills-heading h2 { position: relative; z-index: 1; }
.skills-heading p { position: relative; z-index: 1; max-width: 330px; margin-top: 28px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.tool-console {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(3,3,3,.72);
  box-shadow: 24px 28px 0 rgba(255,58,43,.07), 0 30px 80px rgba(0,0,0,.3);
  transform: rotate(1.4deg);
  transition: transform .45s ease, border-color .45s ease;
}
.tool-console:hover { transform: rotate(0) translateY(-5px); border-color: rgba(255,123,94,.45); }
.console-bar { display: flex; align-items: center; gap: 7px; padding: 13px 15px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }
.console-bar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
.console-bar span:first-child { background: var(--coral); }
.console-bar b { margin-left: auto; color: rgba(255,255,255,.44); font: 8px var(--mono); letter-spacing: .12em; }
.tool-console .tool-cloud { max-width: none; padding: clamp(26px, 4vw, 52px); gap: 10px; }
.tool-console .tool-cloud span { border-color: rgba(255,255,255,.18); color: #eee; background: rgba(255,255,255,.045); font-family: var(--mono); }
.tool-console .tool-cloud span:nth-child(3n+1) { transform: rotate(-2deg); }
.tool-console .tool-cloud span:nth-child(3n+2) { transform: rotate(1.8deg); }
.tool-console .tool-cloud span:hover { transform: translateY(-4px) rotate(0); background: var(--coral); border-color: var(--coral); color: #fff; }
.console-status { display: flex; justify-content: space-between; padding: 13px 16px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.38); font: 8px var(--mono); }
.console-status span:first-child { color: #8bffae; }

/* Contact finale. */
.contact {
  min-height: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 62%, rgba(255,63,44,.26), transparent 24rem),
    linear-gradient(180deg, #050505, #0b0504);
}
.contact::after {
  content: '?';
  position: absolute;
  z-index: -1;
  right: 3%;
  top: -15%;
  color: transparent;
  font: 600 min(70vw, 900px)/1 var(--sans);
  -webkit-text-stroke: 1px rgba(255,255,255,.055);
  transform: rotate(7deg);
}
.contact h2 { font-family: var(--sans); font-size: clamp(76px, 11vw, 180px); line-height: .73; letter-spacing: -.09em; }
.contact h2 span { color: rgba(255,255,255,.5); font-size: .54em; font-weight: 500; letter-spacing: -.06em; }
.contact h2 strong { display: inline-block; color: var(--coral-light); font: 400 italic 1em var(--serif); transform: rotate(-4deg); text-shadow: 0 0 45px rgba(255,79,54,.25); }
.contact h2 em { color: #fff; font-family: var(--sans); font-style: normal; font-weight: 500; }
.contact-copy { margin-top: 42px; }
.contact-symbols span { position: absolute; color: var(--coral-light); text-shadow: 0 0 20px rgba(255,73,48,.5); }
.contact-symbols span:nth-child(1) { left: 12%; top: 31%; font-size: 28px; animation: symbol-spin 12s linear infinite; }
.contact-symbols span:nth-child(2) { right: 14%; top: 28%; padding: 13px 16px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; animation: symbol-float 5s ease-in-out infinite; }
.contact-symbols span:nth-child(3) { left: 18%; bottom: 27%; font-size: 38px; animation: symbol-float 6s ease-in-out -2s infinite; }
.contact-ticker { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); background: var(--coral); color: #080808; white-space: nowrap; transform: rotate(-1.2deg) scale(1.02); }
.contact-ticker span { display: inline-block; padding: 13px 0; font: 600 11px var(--mono); letter-spacing: .12em; animation: ticker-move 14s linear infinite; }
@keyframes ticker-move { to { transform: translateX(-50%); } }

@media (max-width: 720px) {
  .skills { width: calc(100% - 20px); margin: 35px auto; padding: 24px 20px 50px; border-radius: 20px; }
  .skills-row { display: block; }
  .skills-heading p { margin-bottom: 36px; }
  .tool-console { transform: none; }
  .contact { min-height: 680px; padding-left: 20px; padding-right: 20px; }
  .contact h2 { font-size: clamp(68px, 22vw, 110px); }
  .contact-symbols span:nth-child(1) { left: 7%; top: 24%; }
  .contact-symbols span:nth-child(2) { right: 7%; top: 22%; }
  .contact-symbols span:nth-child(3) { display: none; }
}

/* Layered atmosphere behind the contact finale. */
.contact-background { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.contact-aurora {
  position: absolute;
  width: 78%;
  height: 55%;
  left: 11%;
  bottom: 2%;
  border-radius: 50%;
  opacity: .75;
  background:
    radial-gradient(circle at 24% 62%, rgba(255,119,79,.7), transparent 25%),
    radial-gradient(circle at 70% 52%, rgba(255,38,28,.65), transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(145,18,13,.8), transparent 48%);
  filter: blur(55px) saturate(1.2);
  animation: contact-aurora 9s ease-in-out infinite alternate;
}
.contact-grid {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -42%;
  height: 78%;
  opacity: .3;
  background-image:
    linear-gradient(rgba(255,106,78,.23) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,106,78,.23) 1px, transparent 1px);
  background-size: 72px 54px;
  transform: perspective(480px) rotateX(62deg);
  transform-origin: center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 76%, transparent);
  animation: contact-grid-drift 7s linear infinite;
}
.contact-ring { position: absolute; border: 1px solid rgba(255,134,105,.22); border-radius: 50%; }
.ring-a { width: min(72vw, 980px); aspect-ratio: 2.4; left: 50%; bottom: 7%; transform: translateX(-50%) rotate(-7deg); box-shadow: inset 0 0 80px rgba(255,54,37,.05); animation: contact-ring-a 11s ease-in-out infinite; }
.ring-b { width: min(48vw, 650px); aspect-ratio: 2.2; left: 50%; bottom: 18%; transform: translateX(-50%) rotate(9deg); border-style: dashed; opacity: .5; animation: contact-ring-b 15s linear infinite; }
.contact-particle { position: absolute; color: rgba(255,176,150,.6); font-family: var(--mono); text-shadow: 0 0 18px rgba(255,68,44,.8); }
.particle-a { left: 8%; top: 18%; font-size: 17px; animation: particle-drift 6s ease-in-out infinite; }
.particle-b { right: 9%; top: 45%; font-size: 42px; animation: particle-drift 8s ease-in-out -3s infinite; }
.particle-c { left: 28%; bottom: 17%; font-size: 20px; animation: particle-drift 7s ease-in-out -1s infinite; }
.particle-d { right: 25%; top: 17%; font-size: 32px; animation: particle-drift 9s ease-in-out -4s infinite; }
.contact > :not(.contact-background):not(.contact-ticker) { position: relative; z-index: 2; }

@keyframes contact-aurora {
  0% { transform: translate3d(-3%, 2%, 0) scale(.92) rotate(-3deg); opacity: .55; }
  100% { transform: translate3d(4%, -3%, 0) scale(1.08) rotate(3deg); opacity: .85; }
}
@keyframes contact-grid-drift { to { background-position: 0 54px, 72px 0; } }
@keyframes contact-ring-a {
  0%,100% { transform: translateX(-50%) rotate(-7deg) scale(.96); opacity: .55; }
  50% { transform: translateX(-50%) rotate(-2deg) scale(1.04); opacity: 1; }
}
@keyframes contact-ring-b { to { transform: translateX(-50%) rotate(369deg); } }
@keyframes particle-drift {
  0%,100% { transform: translate(0,0) rotate(0); opacity: .3; }
  50% { transform: translate(14px,-22px) rotate(18deg); opacity: .9; }
}

@media (max-width: 620px) {
  .contact-aurora { width: 120%; left: -10%; height: 48%; filter: blur(42px); }
  .contact-grid { background-size: 42px 38px; }
  .ring-a { width: 120vw; }
  .ring-b { width: 86vw; }
  .particle-c, .particle-d { display: none; }
}

/* Straight, deliberate toolkit capsule. */
.tool-console {
  position: relative;
  width: 100%;
  aspect-ratio: auto;
  justify-self: stretch;
  border-radius: 16px;
  border-color: rgba(255,255,255,.2);
  background:
    radial-gradient(circle at 18% 50%, rgba(255,72,51,.11), transparent 34%),
    rgba(4,4,4,.88);
  box-shadow: 0 24px 70px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.025);
  transform: none;
}
.tool-console:hover { transform: translateY(-5px); }
.tool-console::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,94,70,.09);
  border-radius: inherit;
  pointer-events: none;
}
.console-bar {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 42px;
  right: 42px;
  padding: 0;
  border: 0;
  background: transparent;
}
.console-bar b { margin-left: auto; }
.tool-console .tool-cloud {
  justify-content: center;
  align-content: center;
  height: auto;
  min-height: 280px;
  padding: 68px 54px 58px;
}
.console-status {
  position: absolute;
  z-index: 2;
  left: 42px;
  right: 42px;
  bottom: 23px;
  padding: 0;
  border: 0;
}

@media (max-width: 900px) {
  .tool-console { width: 100%; border-radius: 14px; }
  .tool-console .tool-cloud { min-height: 290px; padding: 62px 25px 54px; }
  .console-bar, .console-status { left: 26px; right: 26px; }
}

/* One seamless base colour across the full page. */
html,
body,
#content,
main,
header,
.hero,
.intro-strip,
.portfolio,
.about,
.skills,
.contact,
footer {
  background-color: #080808;
}

body { background-image: none; }
header, header.scrolled { background: rgba(8,8,8,.94); }
.hero { background: #080808; }
.skills { background: #080808; }
.contact { background: #080808; }
footer { background: #080808; }

/* Shared visual language across every main section. */
.process { background: #080808; }
.portfolio, .about, .process {
  width: min(1440px, calc(100% - 40px));
  margin: 70px auto;
  padding: 42px clamp(22px, 4vw, 64px) 90px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
}
.portfolio .section-topline, .about .section-topline, .skills .section-topline, .process .section-topline { width: 100%; border-color: rgba(255,255,255,.13); }
.portfolio .section-symbol, .about .section-symbol, .skills .section-symbol, .process .section-symbol { color: var(--coral-light); text-shadow: 0 0 14px rgba(255,75,51,.35); }
.portfolio .section-heading h2 em, .process h2 em { color: var(--coral-light); }

/* Website process / Steps. */
.process { position: relative; overflow: hidden; }
.process::before {
  content: 'STEPS'; position: absolute; right: -1vw; top: 4vw; color: transparent;
  font: 600 clamp(130px, 18vw, 280px)/1 var(--sans); letter-spacing: -.1em;
  -webkit-text-stroke: 1px rgba(255,255,255,.045); pointer-events: none;
}
.process-intro { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 70px; padding: 80px 0 70px; }
.process-kicker { display: block; margin-bottom: 22px; color: var(--coral-light); font: 9px var(--mono); letter-spacing: .14em; }
.process-intro h2 { font: 500 clamp(58px, 7vw, 104px)/.84 var(--serif); letter-spacing: -.075em; }
.process-intro h2 em { font-weight: 400; }
.process-intro > p { max-width: 390px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.process-list { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.14); }
.process-step { display: grid; grid-template-columns: 54px 70px minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 44px); min-height: 138px; padding: 22px 18px; border-bottom: 1px solid rgba(255,255,255,.12); transition: background .35s ease, padding .35s ease; }
.process-step:hover { padding-left: 32px; background: linear-gradient(90deg, rgba(255,67,46,.11), transparent 72%); }
.step-number { color: rgba(255,255,255,.38); font: 10px var(--mono); }
.step-symbol { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: var(--coral-light); font-size: 16px; transition: transform .4s ease, background .4s ease; }
.process-step:hover .step-symbol { transform: rotate(14deg) scale(1.08); background: var(--coral); color: #fff; }
.process-step > div { display: grid; grid-template-columns: minmax(130px, .4fr) 1fr; align-items: center; gap: 30px; }
.process-step h3 { color: #fff; font: 500 clamp(30px, 3vw, 46px) var(--serif); letter-spacing: -.04em; }
.process-step p { max-width: 560px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.step-meta { color: rgba(255,255,255,.34); font: 8px var(--mono); letter-spacing: .1em; white-space: nowrap; }

@media (max-width: 720px) {
  nav { gap: 9px; }
  nav a { font-size: 7px; }
  .portfolio, .about, .process { width: calc(100% - 20px); margin: 35px auto; padding: 25px 20px 60px; border-radius: 20px; }
  .process-intro { display: block; padding: 58px 0 50px; }
  .process-intro > p { margin-top: 30px; }
  .process-step { grid-template-columns: 34px 46px 1fr; gap: 12px; padding: 28px 0; }
  .process-step:hover { padding-left: 8px; }
  .step-symbol { width: 40px; height: 40px; }
  .process-step > div { display: block; }
  .process-step p { margin-top: 10px; font-size: 12px; }
  .step-meta { display: none; }
}

/* Turn the process into a staggered visual journey. */
@media (min-width: 901px) {
  .process { padding-bottom: 140px; }
  .process-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding-top: 54px;
    border-top: 0;
  }
  .process-list::before {
    content: '';
    position: absolute;
    left: 3%;
    right: 3%;
    top: 92px;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(255,116,88,.55) 0 8px, transparent 8px 18px);
  }
  .process-list::after {
    content: 'IDEA  →  LIVE';
    position: absolute;
    right: 1%;
    top: 70px;
    padding: 5px 9px;
    color: var(--coral-light);
    background: #080808;
    font: 8px var(--mono);
    letter-spacing: .14em;
  }
  .process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 390px;
    padding: 88px 24px 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px 16px 54px 16px;
    background: rgba(255,255,255,.018);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .4s ease, background .4s ease;
  }
  .process-step:nth-child(even) { transform: translateY(42px); border-radius: 54px 16px 16px 16px; }
  .process-step:hover, .process-step:nth-child(even):hover {
    padding-left: 24px;
    transform: translateY(-10px);
    border-color: rgba(255,111,82,.55);
    background: linear-gradient(160deg, rgba(255,71,48,.15), rgba(255,255,255,.018) 55%);
  }
  .process-step:nth-child(even):hover { transform: translateY(30px); }
  .process-step::after {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    right: -100px;
    bottom: -100px;
    border: 1px solid rgba(255,111,82,.2);
    border-radius: 50%;
    transition: transform .5s ease, background .5s ease;
  }
  .process-step:hover::after { transform: scale(1.7); background: rgba(255,68,45,.05); }
  .step-number {
    position: absolute;
    right: 16px;
    top: 8px;
    color: rgba(255,255,255,.055);
    font: 600 100px/.9 var(--sans);
    letter-spacing: -.09em;
  }
  .step-symbol {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 20px;
    width: 46px;
    height: 46px;
    background: #080808;
    box-shadow: 0 0 0 8px #080808;
  }
  .process-step > div { display: block; }
  .process-step h3 { margin-bottom: 24px; font-size: clamp(34px, 3.1vw, 52px); }
  .process-step p { font-size: 12px; line-height: 1.75; }
  .step-meta { margin-top: auto; padding-top: 30px; color: var(--coral-light); }
}

@media (max-width: 900px) {
  .process-list { border-top: 0; }
  .process-step {
    position: relative;
    margin-bottom: 12px;
    padding: 28px 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px 14px 36px 14px;
    background: rgba(255,255,255,.018);
  }
  .process-step:nth-child(even) { border-radius: 36px 14px 14px 14px; }
}

/* Final site-wide design system pass. */
:root {
  --surface: rgba(255,255,255,.022);
  --surface-hover: rgba(255,255,255,.045);
  --edge: rgba(255,255,255,.13);
  --edge-hot: rgba(255,111,82,.5);
  --corner: 18px 18px 62px 18px;
}

header { border-color: var(--edge); }
nav { border: 1px solid rgba(255,255,255,.08); background: var(--surface-hover); }
nav a { letter-spacing: .06em; }

.hero { border-bottom: 1px solid var(--edge); }
.hero .eyebrow, .section-topline .eyebrow, .process-kicker, .about-label { color: var(--coral-light); font-family: var(--mono); letter-spacing: .14em; }
.hero h1, .section-heading h2, .about-heading h2, .skills-heading h2, .process-intro h2, .contact h2 { text-wrap: balance; }
.hero-intro, .section-heading > p, .about-copy p, .skills-heading p, .process-intro > p, .process-step p, .contact-copy { color: #aaa6a0; }

.intro-strip,
.portfolio,
.about,
.skills,
.process {
  width: min(1440px, calc(100% - 40px));
  margin: 70px auto;
  border: 1px solid var(--edge);
  border-radius: var(--corner);
  background: var(--surface);
}

.intro-strip { padding: 34px 40px; }
.portfolio, .about, .skills, .process { padding: 42px clamp(22px, 4vw, 64px) 90px; }
.portfolio:hover, .about:hover, .skills:hover, .process:hover { border-color: rgba(255,255,255,.18); }

.section-topline {
  width: 100%;
  align-items: center;
  padding-bottom: 20px;
  border-color: var(--edge);
}
.section-note { color: rgba(255,255,255,.48); font-family: var(--mono); font-size: 9px; letter-spacing: .04em; }
.section-symbol { color: var(--coral-light); text-shadow: 0 0 15px rgba(255,73,48,.45); }
.section-heading h2 em, .about-heading h2 em, .skills-heading h2 em, .process-intro h2 em, .contact h2 strong { color: var(--coral-light); }

.project-visual,
.about-copy,
.tool-console,
.process-step {
  border: 1px solid var(--edge);
  border-radius: var(--corner);
  background-color: var(--surface);
}
.project-visual:hover, .about-copy:hover, .tool-console:hover, .process-step:hover { border-color: var(--edge-hot); }
.project-details h3, .process-step h3 { font-family: var(--serif); }
.project-details a, .text-link, .hero-link { border-color: rgba(255,255,255,.55); }

.tool-cloud span {
  border-color: var(--edge);
  background: var(--surface-hover);
  font-family: var(--mono);
}
.console-bar, .console-status, .about-signoff, .about-foot { border-color: var(--edge); }

.contact {
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.contact-button { border-radius: 999px; border-color: rgba(255,255,255,.38); }
.contact-mark, .contact-symbols, .hero-symbols, .about-orbit { color: var(--coral-light); }

/* Contact finale — the site's precision-interface language, distilled. */
.contact {
  isolation: isolate;
  min-height: 760px;
  background:
    radial-gradient(circle at 50% 115%, rgba(255,71,48,.3), transparent 42%),
    linear-gradient(180deg, #080808 0%, #050505 100%);
}
.contact::before {
  width: min(94vw, 1320px);
  height: 1px;
  bottom: 112px;
  background: linear-gradient(90deg, transparent, rgba(255,102,78,.9), transparent);
  filter: none;
  box-shadow: 0 0 42px 12px rgba(255,64,41,.16);
}
.contact::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 24px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 2px 2px 38px 2px;
  pointer-events: none;
}
.contact-background { z-index: -1; }
.contact-aurora {
  width: min(76vw, 1050px);
  height: min(76vw, 1050px);
  left: 50%;
  bottom: -74%;
  border: 1px solid rgba(255,103,77,.24);
  border-radius: 50%;
  opacity: 1;
  background:
    repeating-radial-gradient(circle, transparent 0 58px, rgba(255,94,70,.055) 59px 60px),
    radial-gradient(circle, rgba(255,64,42,.17), transparent 58%);
  filter: none;
  transform: translateX(-50%);
  animation: none;
  box-shadow: 0 0 100px rgba(255,55,35,.12), inset 0 0 100px rgba(255,55,35,.08);
}
.contact-grid {
  inset: 0;
  height: 100%;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: none;
  -webkit-mask-image: radial-gradient(circle at 50% 58%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 50% 58%, #000, transparent 72%);
  animation: none;
}
.contact-ring { border-color: rgba(255,116,87,.3); }
.ring-a {
  width: min(58vw, 820px);
  aspect-ratio: 1;
  bottom: -70%;
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 40px rgba(255,72,50,.018), inset 0 0 0 80px rgba(255,72,50,.012);
}
.ring-b {
  width: min(34vw, 470px);
  aspect-ratio: 1;
  bottom: -36%;
  border-style: dashed;
  transform: translateX(-50%);
  opacity: .65;
}
.contact-particle { color: rgba(255,255,255,.5); text-shadow: none; }
.particle-a { left: 4%; top: 13%; }
.particle-b { right: 5%; top: 48%; color: var(--coral-light); }
.particle-c { left: 15%; bottom: 18%; }
.particle-d { right: 18%; top: 16%; }
.contact .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(8,8,8,.72);
}
.contact .eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--coral-light); box-shadow: 0 0 10px var(--coral-light); }
.contact-copy { max-width: 420px; }
.contact-button {
  align-items: center;
  justify-content: center;
  padding: 15px 22px;
  border-color: rgba(255,255,255,.42);
  background: rgba(8,8,8,.82);
  color: #fff;
  backdrop-filter: blur(12px);
}
.contact-button span { color: var(--coral-light); }
.contact-button:hover {
  border-color: var(--coral-light);
  background: var(--coral);
  color: #fff;
  box-shadow: 0 12px 38px rgba(255,62,40,.2);
}
.contact-button:hover span { color: #fff; }
.contact-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (max-width: 620px) {
  .contact { min-height: 680px; }
  .contact::after { inset: 10px; border-radius: 2px 2px 26px 2px; }
  .contact-grid { background-size: 38px 38px; }
  .contact-aurora { width: 150vw; height: 150vw; left: 50%; bottom: -75%; filter: none; }
  .ring-a { width: 130vw; bottom: -66%; }
  .ring-b { width: 78vw; bottom: -34%; }
}

footer { border-top: 1px solid var(--edge); }
.footer-links a { padding-bottom: 3px; border-bottom: 1px solid transparent; }
.footer-links a:hover { border-color: var(--coral-light); }

@media (max-width: 720px) {
  :root { --corner: 14px 14px 38px 14px; }
  .intro-strip, .portfolio, .about, .skills, .process { width: calc(100% - 20px); margin: 28px auto; }
  .intro-strip { padding: 28px 20px; }
  .portfolio, .about, .skills, .process { padding: 25px 20px 60px; }
  .section-note { max-width: 116px; }
}

/* Creative command-bar header. */
header {
  top: 12px;
  width: min(1480px, calc(100% - 24px));
  padding: 10px 12px 9px;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: rgba(8,8,8,.86);
  box-shadow: 0 14px 50px rgba(0,0,0,.28);
  transform: translateX(-50%);
}
header.scrolled { padding: 8px 12px 7px; border-color: rgba(255,255,255,.18); background: rgba(8,8,8,.94); }
.header-content { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; }
.header-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-role { padding-left: 14px; border-left: 1px solid var(--edge); color: rgba(255,255,255,.38); font: 8px var(--mono); letter-spacing: .12em; white-space: nowrap; }

header nav { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.035); }
header nav a { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 8px; color: rgba(255,255,255,.55); font: 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: color .25s ease, background .25s ease, transform .25s ease; }
header nav a span { color: rgba(255,255,255,.25); font-size: 7px; }
header nav a:hover { color: #fff; transform: translateY(-1px); }
header nav a.active { color: #fff; background: var(--coral); }
header nav a.active span { color: rgba(255,255,255,.72); }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: clamp(10px, 1.6vw, 24px); min-width: 0; }
.header-status { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.5); font: 8px var(--mono); letter-spacing: .1em; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #7dff9c; box-shadow: 0 0 12px rgba(125,255,156,.65); animation: status-pulse 2.2s ease-in-out infinite; }
.active-section { color: var(--coral-light); font: 8px var(--mono); letter-spacing: .1em; white-space: nowrap; }
.header-cta { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; color: #fff; background: rgba(255,255,255,.055); font: 9px var(--mono); text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.header-cta span { color: var(--coral-light); font-size: 13px; }
.header-cta:hover { border-color: var(--coral); background: var(--coral); transform: translateY(-1px); }
.header-cta:hover span { color: #fff; }
.scroll-progress { position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; overflow: hidden; background: rgba(255,255,255,.05); }
.scroll-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--coral), var(--coral-light)); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px var(--coral); }
@keyframes status-pulse { 0%,100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.12); } }

@media (max-width: 1040px) {
  .brand-role, .status-copy, .active-section { display: none; }
  .header-content { grid-template-columns: auto 1fr auto; gap: 10px; }
  header nav { justify-self: center; }
}

@media (max-width: 680px) {
  header { top: 7px; width: calc(100% - 14px); padding: 8px; border-radius: 13px; }
  header.scrolled { padding: 7px 8px; }
  .header-brand .logo { font-size: 22px; }
  header nav { gap: 1px; padding: 3px; }
  header nav a { gap: 0; padding: 7px 8px; font-size: 0; }
  header nav a span { font-size: 8px; color: rgba(255,255,255,.55); }
  .header-cta { gap: 5px; padding: 8px 9px; font-size: 0; }
  .header-cta::before { content: 'Talk'; font: 8px var(--mono); }
  .header-cta span { font-size: 11px; }
  .scroll-progress { left: 8px; right: 8px; }
}

/* Professional refinement for the command bar. */
header {
  top: 14px;
  padding: 9px 11px 8px;
  border-color: rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(8,8,8,.9);
  box-shadow: 0 12px 38px rgba(0,0,0,.22);
}
header.scrolled { padding: 8px 11px 7px; border-color: rgba(255,255,255,.15); }
.header-content { gap: 18px; }
.nav-toggle { display: none; }

.first-project-card {
  position: relative;
  isolation: isolate;
  min-height: 520px;
  margin-top: 35px;
  padding: clamp(28px, 5vw, 70px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: end;
  gap: 40px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px 2px 52px 2px;
  color: #f4f1ec;
  background:
    radial-gradient(circle at 78% 85%, rgba(255,73,49,.42), transparent 34%),
    linear-gradient(135deg, #111 0%, #070707 72%);
}
.first-project-card::after { content: ''; position: absolute; inset: 18px; z-index: -1; border: 1px solid rgba(255,255,255,.055); border-radius: 1px 1px 39px 1px; pointer-events: none; }
.first-project-label { position: absolute; top: 38px; left: clamp(28px, 5vw, 70px); color: rgba(255,255,255,.42); font: 8px var(--mono); letter-spacing: .16em; }
.first-project-card h3,
.first-project-card h2 { margin: 0; font: 400 clamp(46px, 6vw, 88px)/.88 var(--serif); letter-spacing: -.04em; }
.first-project-card div > p { max-width: 440px; margin: 28px 0 0; color: rgba(255,255,255,.55); font: 15px/1.65 var(--serif); }
.first-project-card > a { justify-self: end; padding: 14px 18px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; color: #fff; font: 8px var(--mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: .25s ease; }
.first-project-card > a:hover { border-color: var(--coral-light); background: var(--coral); transform: translateY(-2px); }
.first-project-card > a span { margin-left: 12px; color: var(--coral-light); }
.first-project-orbit { position: absolute; z-index: -1; width: 570px; height: 280px; top: 38px; right: -120px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; transform: rotate(-18deg); }
.first-project-star { position: absolute; top: 26%; right: 25%; color: var(--coral-light); font-size: 20px; animation: spin 9s linear infinite; }

@media (max-width: 680px) {
  .first-project-card { min-height: 520px; grid-template-columns: 1fr; align-content: end; padding: 28px 24px; border-radius: 2px 2px 30px 2px; }
  .first-project-label { top: 28px; left: 24px; }
  .first-project-card h3,
  .first-project-card h2 { font-size: clamp(46px, 15vw, 68px); }
  .first-project-card > a { justify-self: start; }
  .first-project-orbit { right: -310px; }
}

@media (max-width: 720px) {
  header { overflow: visible; }
  header .header-content { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; }
  header .header-brand { position: relative; z-index: 12; }
  header .header-actions { display: none; }
  .nav-toggle {
    position: relative;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 72px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.045);
    font: 7px var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
  }
  .nav-toggle:hover,
  header.menu-open .nav-toggle { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.09); }
  .nav-toggle-icon { position: relative; display: block; width: 13px; height: 9px; }
  .nav-toggle-icon i { position: absolute; right: 0; display: block; width: 13px; height: 1px; background: currentColor; transition: top .25s ease, transform .25s ease, width .25s ease; }
  .nav-toggle-icon i:first-child { top: 2px; }
  .nav-toggle-icon i:last-child { top: 7px; width: 9px; }
  header.menu-open .nav-toggle-icon i:first-child { top: 4px; transform: rotate(45deg); }
  header.menu-open .nav-toggle-icon i:last-child { top: 4px; width: 13px; transform: rotate(-45deg); }
  header nav {
    position: absolute;
    z-index: 11;
    top: calc(100% + 12px);
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 2px 2px 22px 2px;
    background: rgba(8,8,8,.97);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  }
  header.menu-open nav { opacity: 1; visibility: visible; transform: translateY(0); }
  header nav a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 10px; }
  header nav a:last-child { border-bottom: 0; }
}
.brand-role { color: rgba(255,255,255,.32); letter-spacing: .1em; }
header nav { padding: 3px; border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.025); }
header nav a { padding: 8px 12px; color: rgba(255,255,255,.57); transition-duration: .2s; }
header nav a:hover { color: #fff; transform: none; background: rgba(255,255,255,.045); }
header nav a.active {
  color: #fff;
  background: rgba(255,91,66,.14);
  box-shadow: inset 0 0 0 1px rgba(255,111,82,.28);
}
header nav a.active span { color: var(--coral-light); }
.header-status { color: rgba(255,255,255,.42); }
.status-dot { width: 6px; height: 6px; box-shadow: 0 0 8px rgba(125,255,156,.45); animation-duration: 3.4s; }
.active-section { color: rgba(255,160,129,.82); }
.header-cta {
  padding: 10px 15px;
  border-color: rgba(255,255,255,.85);
  color: #0a0a0a;
  background: #f3f1ed;
  transition-duration: .2s;
}
.header-cta span { color: var(--coral); }
.header-cta:hover { border-color: #fff; color: #080808; background: #fff; transform: none; }
.header-cta:hover span { color: var(--coral); }
.scroll-progress { height: 1px; background: transparent; }
.scroll-progress span { box-shadow: none; }

@media (max-width: 680px) {
  header { top: 7px; padding: 7px 8px; border-radius: 11px; }
  header nav {
    right: 0;
    left: 0;
    width: auto;
    justify-self: stretch;
    padding: 8px;
    border-color: rgba(255,255,255,.12);
    background: rgba(8,8,8,.98);
  }
  header nav a {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    font-size: 9px;
  }
  .header-cta { padding: 8px 10px; }
}

/* Hero red-light composition inspired by the supplied reference. */
.hero {
  min-height: 100svh;
  isolation: isolate;
  background: #050505;
}
.hero-red-stage { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.hero-red-stage::before {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -22%;
  height: 68%;
  background:
    radial-gradient(ellipse at 15% 45%, rgba(255,84,55,.95), transparent 33%),
    radial-gradient(ellipse at 55% 75%, rgba(255,36,27,.82), transparent 43%),
    radial-gradient(ellipse at 91% 52%, rgba(255,82,51,.9), transparent 33%);
  filter: blur(26px) saturate(1.25);
  animation: hero-red-breathe 8s ease-in-out infinite alternate;
}
.hero-red-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,.98) 0%, rgba(5,5,5,.94) 38%, rgba(5,5,5,.25) 78%, rgba(33,5,3,.08) 100%);
}
.red-beam { position: absolute; z-index: 2; width: 22%; height: 120%; top: -30%; opacity: .78; background: linear-gradient(90deg, transparent, rgba(255,45,31,.92), rgba(255,131,91,.68), transparent); filter: blur(28px); mix-blend-mode: screen; }
.beam-left { left: 5%; transform: rotate(-28deg); animation: beam-sway-left 9s ease-in-out infinite alternate; }
.beam-centre { left: 48%; width: 15%; opacity: .48; transform: rotate(17deg); animation: beam-sway-centre 12s ease-in-out infinite alternate; }
.beam-right { right: 5%; transform: rotate(30deg); animation: beam-sway-right 10s ease-in-out infinite alternate; }
.hero-giant {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -0.11em;
  width: 100%;
  color: transparent;
  font: 600 clamp(190px, 37vw, 620px)/.75 var(--sans);
  letter-spacing: -.11em;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%) scaleX(1.06);
  -webkit-text-stroke: 1px rgba(255,255,255,.045);
  background: linear-gradient(180deg, rgba(255,255,255,.025) 15%, rgba(255,132,97,.32) 58%, rgba(255,222,193,.95) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 32px rgba(255,51,34,.24));
  opacity: .88;
}
.hero-horizon { position: absolute; z-index: 4; left: 4%; right: 4%; bottom: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,169,130,.62), transparent); box-shadow: 0 0 24px rgba(255,69,45,.55); }
.hero-copy { z-index: 8; }
.hero .eyebrow { color: rgba(255,173,143,.82); }
.hero h1 { text-shadow: 0 8px 45px rgba(0,0,0,.4); }
.hero-intro { color: rgba(255,255,255,.76); text-shadow: 0 4px 18px rgba(0,0,0,.65); }
.hero-link { z-index: 9; }
.hero-symbols { z-index: 6; }

@keyframes hero-red-breathe {
  0% { transform: translate3d(-2%,2%,0) scale(.96); opacity: .72; }
  100% { transform: translate3d(2%,-2%,0) scale(1.06); opacity: 1; }
}
@keyframes beam-sway-left { to { transform: translateX(7vw) rotate(-18deg) scaleX(1.14); } }
@keyframes beam-sway-centre { to { transform: translateX(-5vw) rotate(10deg) scaleX(.88); } }
@keyframes beam-sway-right { to { transform: translateX(-7vw) rotate(20deg) scaleX(1.12); } }

@media (max-width: 720px) {
  .hero-red-stage::before { left: -35%; right: -35%; bottom: -8%; height: 55%; filter: blur(22px); }
  .hero-giant { bottom: 4%; font-size: clamp(150px, 54vw, 230px); transform: translateX(-50%) scaleX(1.2); }
  .beam-centre { display: none; }
  .red-beam { width: 34%; filter: blur(22px); }
  .beam-left { left: -8%; }
  .beam-right { right: -8%; }
  .hero-horizon { bottom: 14%; }
}

/* Reference-matched hero composition. */
.hero { min-height: 100svh; padding: 0; align-items: initial; justify-content: initial; }
.hero-copy {
  position: absolute;
  z-index: 8;
  top: 24%;
  right: clamp(7%, 11vw, 13%);
  width: min(390px, 34vw);
  margin: 0;
  text-align: left;
}
.hero .hero-copy .eyebrow { margin-bottom: 24px; color: rgba(255,255,255,.42); font-size: 8px; }
.hero .hero-copy h1 {
  max-width: 100%;
  color: #f6f4f0;
  font-family: var(--sans);
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.055em;
  text-align: left;
  text-shadow: none;
}
.hero .hero-copy h1 em { color: var(--coral-light); font-family: var(--serif); font-weight: 400; }
.hero .hero-copy h1 em::after { display: none; }
.hero-studio-note {
  position: absolute;
  z-index: 8;
  left: 3.5%;
  bottom: 42%;
  display: flex;
  gap: 28px;
  color: rgba(255,255,255,.48);
  font: 8px var(--mono);
}
.hero > .hero-link {
  position: absolute;
  z-index: 8;
  right: 3.5%;
  bottom: 42%;
  margin: 0;
  color: rgba(255,255,255,.4);
  font-size: 8px;
  border: 0;
}
.hero-symbols .symbol-two, .hero-symbols .symbol-three, .hero-symbols .symbol-four, .hero-symbols .symbol-five { display: none; }
.hero-symbols .symbol-one { top: auto; left: 3.5%; bottom: 39%; color: rgba(255,168,135,.72); font-size: 10px; }

.hero-red-stage::after { background: linear-gradient(180deg, #050505 0%, rgba(5,5,5,.99) 36%, rgba(5,5,5,.82) 55%, rgba(5,5,5,.08) 86%, transparent 100%); }
.hero-red-stage::before {
  left: -12%;
  right: -12%;
  bottom: -28%;
  height: 66%;
  background:
    radial-gradient(ellipse at 10% 34%, rgba(255,61,41,.98), transparent 30%),
    radial-gradient(ellipse at 45% 84%, rgba(255,40,28,.88), transparent 42%),
    radial-gradient(ellipse at 92% 60%, rgba(255,71,43,.94), transparent 32%);
  filter: blur(20px) saturate(1.2);
}
.red-beam { top: 33%; height: 80%; opacity: .48; filter: blur(32px); }
.beam-left { left: -2%; transform: rotate(-42deg); }
.beam-centre { left: 48%; opacity: .22; }
.beam-right { right: -2%; transform: rotate(38deg); }
.hero-giant {
  bottom: -.08em;
  font-size: clamp(240px, 38vw, 640px);
  line-height: .72;
  opacity: .96;
  background: linear-gradient(180deg, rgba(255,255,255,.015) 8%, rgba(255,255,255,.05) 28%, rgba(255,118,82,.42) 66%, rgba(255,228,199,.98) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-horizon { bottom: 7%; opacity: .62; }

@media (max-width: 720px) {
  .hero-copy { top: 21%; left: 24px; right: 24px; width: auto; }
  .hero .hero-copy h1 { font-size: clamp(34px, 10vw, 52px); }
  .hero-studio-note { left: 24px; right: 24px; bottom: 38%; justify-content: space-between; gap: 12px; font-size: 7px; }
  .hero > .hero-link { right: 24px; bottom: 32%; }
  .hero-symbols .symbol-one { left: 24px; bottom: 32%; }
  .hero-giant { bottom: 3%; font-size: clamp(170px, 58vw, 260px); }
  .hero-red-stage::before { bottom: -8%; height: 50%; }
}

/* Preserve the original introduction as a compact signature. */
.hero-signature {
  position: absolute;
  z-index: 8;
  left: 3.5%;
  top: 19%;
  width: min(390px, 34vw);
}
.hero-signature > span { display: block; margin-bottom: 22px; color: rgba(255,164,132,.72); font: 8px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.hero-signature h2 { color: #f6f4f0; font: 500 clamp(42px, 5vw, 76px)/.78 var(--sans); letter-spacing: -.075em; }
.hero-signature h2 em { color: var(--coral-light); font: 400 italic 1.06em var(--serif); }
.hero-signature h2 i { color: rgba(255,255,255,.36); font-style: italic; font-weight: 500; }
.hero-signature::after {
  content: '';
  display: block;
  width: 72px;
  height: 1px;
  margin-top: 25px;
  background: linear-gradient(90deg, var(--coral-light), transparent);
  box-shadow: 0 0 10px rgba(255,80,55,.35);
}

@media (max-width: 900px) {
  .hero-signature { top: 18%; width: 42vw; }
  .hero-signature h2 { font-size: clamp(38px, 7vw, 60px); }
  .hero-copy { top: 22%; right: 5%; width: 40vw; }
}

@media (max-width: 720px) {
  .hero-signature { left: 24px; right: 24px; top: 17%; width: auto; }
  .hero-signature h2 { font-size: clamp(48px, 15vw, 74px); }
  .hero-copy { top: 49%; left: 24px; right: 24px; width: auto; }
  .hero .hero-copy .eyebrow { display: none; }
  .hero .hero-copy h1 { font-size: 22px; line-height: 1.08; color: rgba(255,255,255,.7); }
  .hero-studio-note { display: none; }
  .hero > .hero-link { bottom: 24%; }
}

/* Cohesive centred hero hierarchy. */
.hero-signature {
  left: 50%;
  top: 16%;
  width: min(920px, 78vw);
  text-align: center;
  transform: translateX(-50%);
}
.hero-signature > span { margin-bottom: 20px; }
.hero-signature h2 { font-size: clamp(54px, 7.4vw, 112px); line-height: .76; }
.hero-signature::after { width: 90px; margin: 28px auto 0; }
.hero-copy {
  top: 56%;
  left: 50%;
  right: auto;
  width: min(600px, 60vw);
  text-align: center;
  transform: translateX(-50%);
}
.hero .hero-copy .eyebrow { display: none; }
.hero .hero-copy h1 {
  color: rgba(255,255,255,.68);
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.16;
  letter-spacing: -.035em;
  text-align: center;
}
.hero .hero-copy h1 br { display: none; }
.hero .hero-copy h1 em { color: var(--coral-light); }
.hero-studio-note { bottom: 34%; }
.hero > .hero-link { bottom: 34%; }
.hero-symbols .symbol-one { bottom: 31%; }

@media (max-width: 720px) {
  .hero-signature { left: 24px; right: 24px; top: 15%; width: auto; transform: none; }
  .hero-signature > span { font-size: 7px; }
  .hero-signature h2 { font-size: clamp(48px, 15vw, 72px); line-height: .79; }
  .hero-copy { top: 52%; left: 24px; right: 24px; width: auto; transform: none; }
  .hero .hero-copy h1 { font-size: 18px; line-height: 1.2; }
  .hero > .hero-link { bottom: 24%; }
  .hero-symbols .symbol-one { bottom: 24%; }
}

/* Place the glowing name behind the main introduction. */
.hero-red-stage {
  background: radial-gradient(ellipse at 50% 34%, rgba(255,54,37,.2), transparent 34%);
}
.hero-giant {
  top: 18%;
  bottom: auto;
  font-size: clamp(220px, 31vw, 500px);
  line-height: .8;
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,112,83,.025), rgba(255,112,83,.07) 60%, rgba(255,190,155,.12));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(255,127,96,.13);
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 26px rgba(255,48,32,.14));
  -webkit-mask-image: radial-gradient(ellipse at center, #000 36%, rgba(0,0,0,.72) 58%, transparent 82%);
  mask-image: radial-gradient(ellipse at center, #000 36%, rgba(0,0,0,.72) 58%, transparent 82%);
}
.hero-giant::selection { background: transparent; }
.hero-signature { z-index: 9; }
.hero-copy { z-index: 9; }

@media (max-width: 720px) {
  .hero-giant { top: 21%; bottom: auto; font-size: clamp(145px, 52vw, 220px); opacity: .82; }
  .hero-red-stage { background: radial-gradient(ellipse at 50% 30%, rgba(255,54,37,.24), transparent 42%); }
}

/* Production accessibility and interaction polish. */
.skip-link {
  position: fixed;
  z-index: 1000;
  left: 18px;
  top: 14px;
  padding: 11px 15px;
  border-radius: 8px;
  color: #080808;
  background: #f5f2ed;
  font: 600 11px var(--sans);
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--coral-light); outline-offset: 4px; }
a:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }
section[id] { scroll-margin-top: 100px; }

@media (prefers-reduced-motion: reduce) {
  .red-beam, .hero-red-stage::before, .symbol, .about-orbit, .contact-mark, .contact-aurora, .contact-grid, .contact-ring, .contact-particle, .contact-ticker span, .status-dot { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Distinctive precision interface for the hero. */
.hero-interface {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 35%;
  width: min(620px, 50vw);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.interface-ring { position: absolute; border-radius: 50%; }
.ring-outer {
  inset: 0;
  border: 1px solid rgba(255,123,91,.16);
  border-top-color: rgba(255,154,116,.45);
  border-right-color: transparent;
  box-shadow: 0 0 55px rgba(255,49,31,.06), inset 0 0 55px rgba(255,49,31,.035);
  animation: interface-turn 26s linear infinite;
}
.ring-outer::before, .ring-outer::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral-light);
  box-shadow: 0 0 16px rgba(255,93,65,.8);
}
.ring-outer::before { left: 13%; top: 13%; }
.ring-outer::after { right: 4%; bottom: 28%; }
.ring-inner {
  inset: 16%;
  border: 1px dashed rgba(255,255,255,.1);
  animation: interface-turn-reverse 34s linear infinite;
}
.ring-inner::after {
  content: '';
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255,102,73,.1);
  border-radius: 50%;
}
.interface-axis { position: absolute; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); }
.axis-x { left: -12%; right: -12%; top: 50%; height: 1px; }
.axis-y { top: -12%; bottom: -12%; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.1), transparent); }
.interface-node { position: absolute; display: grid; place-items: center; color: rgba(255,255,255,.4); font: 8px var(--mono); }
.node-a { left: -14px; top: 50%; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: #080808; }
.node-b { right: 8%; top: 4%; color: var(--coral-light); font-size: 13px; animation: symbol-pulse 4s ease-in-out infinite; }
.node-c { right: -14px; top: 50%; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: #080808; }
.interface-caption { position: absolute; left: 50%; bottom: -7px; padding: 4px 9px; color: rgba(255,163,128,.58); background: #080808; font: 7px var(--mono); letter-spacing: .14em; white-space: nowrap; transform: translateX(-50%); }

.hero-signature h2 { position: relative; }
.hero-signature h2::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 52%;
  width: 115%;
  height: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,58,38,.14), transparent);
  filter: blur(18px);
  transform: translate(-50%, -50%) rotate(-2deg);
}
.hero-signature h2 em { text-shadow: 0 0 28px rgba(255,81,54,.2); }

@keyframes interface-turn { to { transform: rotate(360deg); } }
@keyframes interface-turn-reverse { to { transform: rotate(-360deg); } }

@media (max-width: 720px) {
  .hero-interface { top: 33%; width: min(520px, 112vw); opacity: .72; }
  .interface-caption, .node-a, .node-c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .interface-ring, .interface-node { animation: none !important; }
}

/* Restrain the interface so the typography remains the hero. */
.hero-interface { width: min(560px, 46vw); opacity: .52; }
.ring-outer {
  border-color: rgba(255,123,91,.11);
  border-top-color: rgba(255,154,116,.25);
  box-shadow: 0 0 38px rgba(255,49,31,.035);
  animation-duration: 60s;
}
.ring-inner { opacity: .42; animation: none; }
.interface-axis { opacity: .35; }
.node-a, .node-c { color: rgba(255,255,255,.32); border-color: rgba(255,255,255,.1); }
.node-b { opacity: .62; animation-duration: 6s; }
.interface-caption { color: rgba(255,163,128,.45); letter-spacing: .12em; }
.hero-signature h2::before { opacity: .55; }
.red-beam { opacity: .34; }

@media (max-width: 720px) {
  .hero-interface { width: min(460px, 104vw); opacity: .42; }
  .ring-inner, .interface-axis, .node-a, .node-c, .interface-caption { display: none; }
}

/* Reposition the studio details as a restrained edge label. */
.hero-studio-note {
  left: -118px;
  top: 50%;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(255,255,255,.4);
  transform: rotate(-90deg);
  white-space: nowrap;
}
.studio-label { color: var(--coral-light); letter-spacing: .13em; }
.studio-location b { color: var(--coral-light); font-weight: 400; }

/* New professional footer. */
footer { position: relative; padding: 0; overflow: hidden; }
footer::before {
  content: '';
  position: absolute;
  width: 760px;
  height: 360px;
  left: -180px;
  bottom: -260px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,60,40,.28), transparent 68%);
  filter: blur(20px);
  pointer-events: none;
}
.footer-inner { position: relative; z-index: 1; display: block; width: min(1440px, calc(100% - 80px)); margin: auto; padding: 100px 0 28px; }
.footer-lead { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 50px; padding-bottom: 80px; border-bottom: 1px solid var(--edge); }
.footer-kicker { grid-column: 1 / -1; color: var(--coral-light); font: 9px var(--mono); letter-spacing: .15em; }
.footer-lead h2 { color: #f5f2ed; font: 500 clamp(62px, 8vw, 122px)/.82 var(--serif); letter-spacing: -.075em; }
.footer-lead h2 em { color: var(--coral-light); font-weight: 400; }
.footer-email { align-self: end; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.45); color: #f5f2ed; font: 11px var(--mono); text-decoration: none; }
.footer-email span { margin-left: 14px; color: var(--coral-light); font-size: 15px; }
.footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; max-width: 720px; margin-left: auto; padding: 68px 0; }
.footer-columns > div { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.footer-label { margin-bottom: 12px; color: rgba(255,255,255,.36); font: 8px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.footer-columns a, .footer-columns > div > span:not(.footer-label), .cookie-settings { color: rgba(255,255,255,.68); font: 11px var(--sans); text-decoration: none; }
.footer-columns a:hover, .cookie-settings:hover { color: var(--coral-light); }
.cookie-settings { padding: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.22); background: transparent; cursor: pointer; }
.footer-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 24px; padding-top: 24px; border-top: 1px solid var(--edge); color: rgba(255,255,255,.35); font: 8px var(--mono); letter-spacing: .06em; }
.footer-bottom .logo { color: #f5f2ed; font-size: 30px; }
.footer-bottom > a:last-child { color: rgba(255,255,255,.5); text-decoration: none; }
.footer-bottom > a:last-child:hover { color: var(--coral-light); }
.legal-links { display: flex; justify-content: flex-end; gap: 18px; width: min(1440px, calc(100% - 80px)); margin: 0 auto; padding: 0 0 28px; }
.legal-links a { color: rgba(255,255,255,.58); font: 9px var(--mono); letter-spacing: .05em; text-decoration: none; }
.legal-links a:hover, .legal-links a:focus-visible { color: var(--coral-light); }
.policy-main { width: min(860px, calc(100% - 48px)); margin: 0 auto; padding: 170px 0 110px; }
.policy-main h1 { margin: 18px 0 28px; font: 500 clamp(58px, 9vw, 104px)/.88 var(--serif); letter-spacing: -.07em; }
.policy-main .policy-intro { max-width: 700px; color: var(--muted); font: 20px/1.55 var(--serif); }
.policy-section { padding: 42px 0; border-top: 1px solid var(--line); }
.policy-section:first-of-type { margin-top: 70px; }
.policy-section h2 { margin-bottom: 16px; font: 500 34px var(--serif); letter-spacing: -.03em; }
.policy-section h3 { margin: 24px 0 8px; font-size: 15px; }
.policy-section p, .policy-section li { max-width: 720px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.policy-section ul { padding-left: 20px; }
.policy-section a { color: inherit; }
.work-page .portfolio { padding-top: 190px; min-height: 100vh; }
.work-page .section-heading h1 { font: 500 clamp(53px, 7vw, 98px)/.87 var(--serif); letter-spacing: -.08em; }
.work-page .section-heading h1 em { color: var(--coral-light); font-style: italic; font-weight: 400; }
.work-page .project-details h2 { font: 500 30px var(--serif); letter-spacing: -.04em; }

/* Honest essential-cookie notice. */
.cookie-notice {
  position: fixed;
  z-index: 999;
  right: 20px;
  bottom: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  width: min(620px, calc(100% - 40px));
  padding: 24px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 14px 14px 38px 14px;
  color: #f5f2ed;
  background: rgba(8,8,8,.96);
  box-shadow: 0 24px 80px rgba(0,0,0,.52);
  backdrop-filter: blur(18px);
}
.cookie-notice[hidden] { display: none; }
.cookie-index { display: block; margin-bottom: 12px; color: var(--coral-light); font: 8px var(--mono); letter-spacing: .13em; }
.cookie-notice h2 { margin-bottom: 8px; font: 500 24px var(--serif); letter-spacing: -.03em; }
.cookie-notice p { max-width: 430px; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.6; }
.cookie-actions { display: flex; align-items: center; gap: 8px; }
.cookie-actions button { padding: 10px 13px; border-radius: 8px; font: 8px var(--mono); text-transform: uppercase; cursor: pointer; }
.cookie-accept { border: 1px solid #f5f2ed; color: #080808; background: #f5f2ed; }
.cookie-close { border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.58); background: transparent; }
.cookie-actions button:hover { border-color: var(--coral-light); }

@media (max-width: 720px) {
  .hero-studio-note { left: 24px; top: auto; bottom: 29%; gap: 12px; transform: none; font-size: 7px; }
  .studio-label { display: none; }
  .footer-inner { width: calc(100% - 40px); padding-top: 75px; }
  .footer-lead { display: block; padding-bottom: 55px; }
  .footer-lead h2 { margin: 24px 0 36px; font-size: clamp(56px, 17vw, 86px); }
  .footer-email { display: inline-block; font-size: 9px; }
  .footer-columns { grid-template-columns: 1fr 1fr; gap: 45px 28px; margin: 0; padding: 55px 0; }
  .footer-columns > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { grid-template-columns: 1fr auto; gap: 18px; }
  .footer-bottom > span { display: none; }
  .cookie-notice { right: 10px; bottom: 10px; display: block; width: calc(100% - 20px); padding: 20px; }
  .cookie-actions { margin-top: 18px; }
  .legal-links { justify-content: flex-start; width: calc(100% - 40px); }
  .work-page .portfolio { padding-top: 130px; }
  .work-page .section-heading h1 { font-size: 58px; }
}

/* Separate FAQ page. */
.faq-main { padding-top: 1px; }
.faq-hero, .faq-content {
  position: relative;
  width: min(1440px, calc(100% - 40px));
  margin: 90px auto 70px;
  padding: 56px clamp(24px, 5vw, 76px) 68px;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--corner);
  background: var(--surface);
}
.faq-hero { min-height: 630px; margin-top: 110px; display: flex; flex-direction: column; justify-content: space-between; }
.faq-hero::before {
  content: 'FAQ';
  position: absolute;
  right: -3%;
  bottom: -10%;
  color: transparent;
  font: 600 clamp(220px, 36vw, 570px)/.8 var(--sans);
  letter-spacing: -.12em;
  -webkit-text-stroke: 1px rgba(255,116,88,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,80,55,.12));
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}
.faq-hero::after {
  content: '';
  position: absolute;
  width: 680px;
  height: 420px;
  right: -180px;
  bottom: -220px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,56,37,.3), transparent 67%);
  filter: blur(24px);
  pointer-events: none;
}
.faq-hero > * { position: relative; z-index: 2; }
.faq-hero-layout { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 80px; }
.faq-hero h1 { color: #f5f2ed; font: 500 clamp(72px, 9vw, 142px)/.79 var(--serif); letter-spacing: -.085em; }
.faq-hero h1 em { color: var(--coral-light); font-weight: 400; }
.faq-hero-layout > div { max-width: 410px; padding-bottom: 12px; }
.faq-hero-layout p { color: var(--muted); font-size: 16px; line-height: 1.7; }
.faq-hero-layout a { display: inline-block; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.42); color: #f5f2ed; font: 9px var(--mono); text-decoration: none; text-transform: uppercase; }
.faq-hero-layout a span { margin-left: 8px; color: var(--coral-light); }
.faq-hero-meta { display: flex; justify-content: space-between; gap: 24px; padding-top: 22px; border-top: 1px solid var(--edge); color: rgba(255,255,255,.38); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.faq-orbit { position: absolute; z-index: 1; right: 9%; top: 12%; display: grid; place-items: center; width: 120px; height: 120px; border: 1px dashed rgba(255,255,255,.12); border-radius: 50%; animation: interface-turn 40s linear infinite; }
.faq-orbit::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(255,106,78,.2); border-radius: 50%; }
.faq-orbit span { color: var(--coral-light); font: 400 44px var(--serif); }

.faq-content { padding-bottom: 80px; }
.faq-list { margin-top: 36px; }
.faq-list details { border-bottom: 1px solid var(--edge); }
.faq-list details:first-child { border-top: 1px solid var(--edge); }
.faq-list summary { display: grid; grid-template-columns: 54px minmax(0, 1fr) 32px; align-items: center; gap: 24px; min-height: 104px; padding: 20px 8px; color: #f5f2ed; cursor: pointer; list-style: none; transition: color .25s ease, padding .25s ease, background .25s ease; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { padding-left: 18px; color: var(--coral-light); background: linear-gradient(90deg, rgba(255,66,45,.08), transparent 68%); }
.faq-list summary > span { color: rgba(255,255,255,.35); font: 9px var(--mono); }
.faq-list summary strong { font: 500 clamp(22px, 2.3vw, 34px) var(--serif); letter-spacing: -.035em; }
.faq-list summary i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: var(--coral-light); font: 400 16px var(--sans); transition: transform .3s ease, background .3s ease; }
.faq-list details[open] summary i { color: #fff; background: var(--coral); transform: rotate(45deg); }
.faq-list details > div { padding: 0 74px 32px; }
.faq-list details > div p { max-width: 800px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.faq-list details > div a { display: inline-block; margin-top: 18px; color: var(--coral-light); font: 9px var(--mono); text-decoration: none; text-transform: uppercase; }

.faq-cta { position: relative; min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 100px 24px; text-align: center; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); background: #080808; }
.faq-cta::before { content: ''; position: absolute; width: 780px; height: 430px; left: 50%; bottom: -310px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,59,39,.62), transparent 67%); filter: blur(22px); transform: translateX(-50%); }
.faq-cta > * { position: relative; z-index: 1; }
.faq-cta > span { position: absolute; right: 16%; top: 22%; color: var(--coral-light); font-size: 20px; animation: symbol-spin 16s linear infinite; }
.faq-cta h2 { margin: 30px 0; color: #f5f2ed; font: 500 clamp(70px, 9vw, 135px)/.79 var(--serif); letter-spacing: -.08em; }
.faq-cta h2 em { color: var(--coral-light); font-weight: 400; }
.faq-cta .contact-button { margin-top: 10px; }

@media (max-width: 720px) {
  .faq-hero, .faq-content { width: calc(100% - 20px); margin: 80px auto 28px; padding: 30px 20px 58px; border-radius: var(--corner); }
  .faq-hero { min-height: 680px; margin-top: 82px; }
  .faq-hero-layout { display: block; }
  .faq-hero h1 { margin: 44px 0 38px; font-size: clamp(66px, 21vw, 100px); }
  .faq-hero-layout p { font-size: 14px; }
  .faq-hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .faq-hero-meta span:last-child { grid-column: 1 / -1; }
  .faq-orbit { right: -25px; top: 16%; width: 90px; height: 90px; opacity: .55; }
  .faq-list summary { grid-template-columns: 30px 1fr 30px; gap: 10px; min-height: 90px; padding: 18px 0; }
  .faq-list summary strong { font-size: 21px; }
  .faq-list details > div { padding: 0 40px 28px; }
  .faq-cta { min-height: 560px; }
  .faq-cta h2 { font-size: clamp(64px, 20vw, 96px); }
}

@media (prefers-reduced-motion: reduce) {
  .faq-orbit, .faq-cta > span { animation: none !important; }
}

/* Merged FAQ: questions and answers read as one continuous entry. */
.faq-list details {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(40px, 7vw, 110px);
  padding: 42px 8px;
}
.faq-list summary {
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 0;
  padding: 0;
  cursor: default;
}
.faq-list summary:hover { padding-left: 0; color: #f5f2ed; background: transparent; }
.faq-list summary i { display: none; }
.faq-list details > div { padding: 2px 0 0; }
.faq-list details > div p { max-width: 680px; font-size: 15px; }

@media (max-width: 760px) {
  .faq-list details { display: block; padding: 34px 0; }
  .faq-list summary { grid-template-columns: 34px 1fr; margin-bottom: 20px; }
  .faq-list details > div { padding: 0 0 0 44px; }
}

/* Keep the five Q&As inside the Questions / Answers section. */
.faq-hero { justify-content: flex-start; }
.faq-hero-meta { margin-top: 70px; }
.faq-hero > .faq-content {
  width: 100%;
  margin: 70px 0 0;
  padding: 42px 0 12px;
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 720px) {
  .faq-hero-meta { margin-top: 52px; }
  .faq-hero > .faq-content { width: 100%; margin: 52px 0 0; padding: 32px 0 0; }
}

/* Branded 404 and 500 pages. */
.error-main { min-height: 100svh; padding: 1px 0; }
.error-page {
  position: relative;
  width: min(1440px, calc(100% - 40px));
  min-height: calc(100svh - 130px);
  margin: 100px auto 30px;
  padding: 58px clamp(24px, 5vw, 76px) 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--corner);
  background:
    radial-gradient(ellipse at 82% 76%, rgba(255,56,37,.22), transparent 34%),
    radial-gradient(ellipse at 12% 98%, rgba(255,80,48,.18), transparent 30%),
    #080808;
}
.error-page::before {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -18%;
  height: 48%;
  background: radial-gradient(ellipse at center, rgba(255,50,34,.32), transparent 68%);
  filter: blur(26px);
}
.error-page > * { position: relative; z-index: 2; }
.error-code {
  position: absolute;
  z-index: 1;
  right: -2%;
  bottom: -9%;
  color: transparent;
  font: 600 clamp(260px, 40vw, 650px)/.72 var(--sans);
  letter-spacing: -.11em;
  -webkit-text-stroke: 1px rgba(255,128,94,.13);
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,94,64,.14));
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}
.error-copy { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 80px; }
.error-copy h1 { color: #f5f2ed; font: 500 clamp(72px, 9vw, 142px)/.79 var(--serif); letter-spacing: -.085em; }
.error-copy h1 em { color: var(--coral-light); font-weight: 400; }
.error-copy > div { max-width: 420px; padding-bottom: 12px; }
.error-copy p { color: var(--muted); font-size: 15px; line-height: 1.72; }
.error-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.error-actions a { color: rgba(255,255,255,.62); font: 9px var(--mono); text-decoration: none; text-transform: uppercase; }
.error-actions .error-primary { padding: 12px 16px; border: 1px solid rgba(255,255,255,.8); border-radius: 9px; color: #080808; background: #f5f2ed; }
.error-actions .error-primary span { margin-left: 9px; color: var(--coral); }
.error-actions a:hover { color: var(--coral-light); }
.error-actions .error-primary:hover { color: #080808; background: #fff; }
.error-meta { display: flex; justify-content: space-between; gap: 24px; padding-top: 20px; border-top: 1px solid var(--edge); color: rgba(255,255,255,.38); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.error-orbit { position: absolute; right: 8%; top: 15%; display: grid; place-items: center; width: 110px; height: 110px; border: 1px dashed rgba(255,255,255,.12); border-radius: 50%; animation: interface-turn 38s linear infinite; }
.error-orbit::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(255,105,77,.2); border-radius: 50%; }
.error-orbit span { color: var(--coral-light); font-size: 20px; }
.error-500 { background: radial-gradient(ellipse at 20% 78%, rgba(255,56,37,.18), transparent 34%), #080808; }
.error-footer { padding: 0; border: 0; }
.error-footer > div { width: min(1440px, calc(100% - 80px)); margin: auto; padding: 24px 0 34px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 24px; color: rgba(255,255,255,.34); font: 8px var(--mono); }
.error-footer .logo { color: #f5f2ed; font-size: 26px; }

@media (max-width: 720px) {
  .error-page { width: calc(100% - 20px); min-height: calc(100svh - 100px); margin-top: 82px; padding: 30px 20px; }
  .error-copy { display: block; }
  .error-copy h1 { margin: 60px 0 38px; font-size: clamp(65px, 21vw, 98px); }
  .error-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .error-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .error-meta span:last-child { grid-column: 1 / -1; }
  .error-orbit { right: -24px; top: 14%; width: 86px; height: 86px; opacity: .55; }
  .error-code { right: -12%; bottom: 3%; font-size: 66vw; }
  .error-footer > div { width: calc(100% - 40px); grid-template-columns: 1fr auto; }
  .error-footer > div span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .error-orbit { animation: none !important; }
}

/* Sales, case-study and enquiry pages. */
.sales-main,.case-main,.enquiry-main{padding-top:92px;background:#080808}
.sales-hero,.enquiry-intro{width:min(1440px,calc(100% - 80px));margin:auto;padding:clamp(90px,11vw,170px) 0 55px;border-bottom:1px solid var(--edge)}
.sales-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end;margin-top:42px}
.sales-hero h1,.enquiry-intro h1{font:500 clamp(72px,10vw,155px)/.78 var(--serif);letter-spacing:-.085em;color:#f4f1ec}
.sales-hero h1 em,.enquiry-intro h1 em{color:var(--coral-light);font-weight:400}
.sales-hero-grid>div{max-width:450px;padding-bottom:10px}.sales-hero-grid p,.enquiry-intro>p{color:var(--muted);font-size:16px;line-height:1.75}
.sales-hero-grid a{display:inline-block;margin-top:28px;color:#eee;font:10px var(--mono);text-decoration:none;text-transform:uppercase;border-bottom:1px solid var(--coral);padding-bottom:7px}
.sales-meta{display:flex;justify-content:space-between;margin-top:80px;color:rgba(255,255,255,.38);font:8px var(--mono);text-transform:uppercase}
.service-list{width:min(1440px,calc(100% - 80px));margin:auto}.service-card{position:relative;display:grid;grid-template-columns:52px 1.1fr .85fr .55fr;gap:42px;padding:74px 0;border-bottom:1px solid var(--edge);align-items:start}
.service-card:before{content:'';position:absolute;inset:15px -20px;z-index:0;border:1px solid transparent;border-radius:16px;transition:.3s}.service-card:hover:before,.service-featured:before{border-color:rgba(255,105,77,.13);background:linear-gradient(90deg,rgba(255,67,44,.06),transparent 58%)}
.service-card>*{position:relative;z-index:1}.service-number{color:var(--coral);font:10px var(--mono)}.service-card h2{margin:13px 0 22px;color:#f3f0eb;font:500 clamp(44px,5vw,76px)/.86 var(--serif);letter-spacing:-.06em}.service-card h2 em{font-weight:400;color:var(--coral-light)}.service-card>div>p:last-child,.sales-note>p{max-width:530px;color:var(--muted);font-size:14px;line-height:1.7}.service-card ul{list-style:none;margin:32px 0 0;padding:0}.service-card li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.64);font-size:12px}.service-card li:before{content:'↳';margin-right:10px;color:var(--coral)}.service-price{padding-top:30px}.service-price span,.service-price small{display:block;color:rgba(255,255,255,.36);font:8px var(--mono);text-transform:uppercase}.service-price strong{display:block;margin:15px 0;color:#f3f0eb;font:500 clamp(24px,2.5vw,38px) var(--serif)}
.sales-note{width:min(920px,calc(100% - 80px));margin:130px auto;padding:70px;border:1px solid var(--edge);border-radius:18px;background:radial-gradient(circle at 90% 110%,rgba(255,61,38,.18),transparent 45%),#0a0a0a;text-align:center}.sales-note h2{margin:22px 0;color:#f3f0eb;font:500 clamp(38px,5vw,70px)/.95 var(--serif)}.sales-note>p{margin:0 auto}.sales-note .contact-button{display:inline-block;margin-top:32px}
.case-hero{position:relative;width:min(1440px,calc(100% - 40px));min-height:780px;margin:20px auto 0;padding:60px clamp(24px,5vw,75px);overflow:hidden;border:1px solid var(--edge);border-radius:var(--corner);display:flex;flex-direction:column;justify-content:space-between}.case-blue{background:radial-gradient(circle at 82% 35%,rgba(44,93,255,.32),transparent 28%),linear-gradient(145deg,#070708 50%,#101732)}.case-red{background:radial-gradient(circle at 82% 38%,rgba(255,53,38,.30),transparent 28%),linear-gradient(145deg,#070707 50%,#25100e)}.case-index{color:rgba(255,255,255,.42);font:9px var(--mono)}.case-hero h1{z-index:2;color:#f5f2ed;font:500 clamp(105px,17vw,260px)/.68 var(--serif);letter-spacing:-.1em}.case-hero h1 em{font-weight:400;color:var(--coral-light)}.case-summary{z-index:2;display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px}.case-summary p{max-width:500px;color:rgba(255,255,255,.68);font-size:15px;line-height:1.7}.case-summary a{color:#f3f0eb;font:9px var(--mono);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:8px}.case-marquee{position:absolute;right:-4%;bottom:-9%;color:transparent;font:600 clamp(160px,24vw,360px)/.8 var(--sans);letter-spacing:-.11em;-webkit-text-stroke:1px rgba(255,255,255,.09);white-space:nowrap;opacity:.8}.case-facts{width:min(1440px,calc(100% - 80px));margin:auto;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--edge)}.case-facts div{padding:36px 0;border-right:1px solid var(--edge)}.case-facts div:not(:first-child){padding-left:30px}.case-facts span{display:block;color:rgba(255,255,255,.32);font:8px var(--mono)}.case-facts strong{display:block;margin-top:12px;color:#eee;font:500 13px var(--sans)}
.case-story{width:min(1160px,calc(100% - 80px));margin:140px auto;display:grid;grid-template-columns:1fr 1fr;gap:100px}.case-story h2{margin-top:22px;color:#f3f0eb;font:500 clamp(48px,6vw,85px)/.9 var(--serif);letter-spacing:-.06em}.case-story h2 em{color:var(--coral-light);font-weight:400}.case-story>div:last-child{padding-top:34px}.case-story>div:last-child p{margin-bottom:22px;color:var(--muted);font-size:15px;line-height:1.82}
.case-interface{width:min(1320px,calc(100% - 80px));margin:0 auto 140px;padding:7vw;border:1px solid var(--edge);border-radius:20px}.case-interface-blue{background:radial-gradient(circle at 50% 70%,rgba(35,84,255,.24),transparent 55%),#09090b}.case-interface-red{background:radial-gradient(circle at 50% 70%,rgba(255,55,36,.23),transparent 55%),#090909}.case-browser{overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45);background:#060606}.case-browser-bar{display:flex;align-items:center;gap:6px;height:45px;padding:0 17px;border-bottom:1px solid var(--edge)}.case-browser-bar>span{width:7px;height:7px;border-radius:50%;background:#555}.case-browser-bar>span:first-child{background:var(--coral)}.case-browser-bar small{margin-left:auto;color:#555;font:7px var(--mono)}.case-browser-body{min-height:400px;padding:54px;display:flex;flex-direction:column;justify-content:space-between}.case-browser-body p,.case-browser-body div{color:rgba(255,255,255,.48);font:8px var(--mono)}.case-browser-body strong{color:#f3f3f3;font:700 clamp(80px,15vw,210px)/.72 var(--sans);letter-spacing:-.09em}.case-browser-body div{display:flex;gap:28px}.next-case{width:min(1160px,calc(100% - 80px));margin:0 auto 140px;display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--edge);padding-top:42px}.next-case>span{color:#555;font:8px var(--mono)}.next-case a{color:#f3f0eb;font:500 clamp(50px,7vw,100px)/1 var(--serif);text-decoration:none;letter-spacing:-.06em}.next-case em{color:var(--coral);font-weight:400}
.enquiry-main{display:grid;grid-template-columns:.82fr 1.18fr;width:min(1440px,calc(100% - 80px));margin:auto;gap:90px;padding-bottom:130px}.enquiry-intro{position:sticky;top:92px;width:auto;height:max-content;margin:0;padding:120px 0 60px;border-bottom:0}.enquiry-intro h1{margin:36px 0 38px;font-size:clamp(68px,7vw,115px)}.enquiry-intro>p{max-width:480px}.enquiry-intro>div{display:grid;gap:10px;margin-top:55px;color:rgba(255,255,255,.35);font:8px var(--mono);text-transform:uppercase}.enquiry-panel{margin-top:80px;padding:55px;border:1px solid var(--edge);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.025),transparent)}.enquiry-panel form{display:grid;gap:32px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:25px}.enquiry-panel label{display:grid;gap:11px}.enquiry-panel label>span{color:rgba(255,255,255,.45);font:8px var(--mono);text-transform:uppercase}.enquiry-panel input,.enquiry-panel select,.enquiry-panel textarea{width:100%;padding:14px 0;border:0;border-bottom:1px solid rgba(255,255,255,.16);border-radius:0;outline:0;color:#f1eee9;background:transparent;font:13px var(--sans)}.enquiry-panel textarea{resize:vertical}.enquiry-panel select{color-scheme:dark}.enquiry-panel input:focus,.enquiry-panel select:focus,.enquiry-panel textarea:focus{border-color:var(--coral)}.enquiry-submit{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:10px}.enquiry-submit p{max-width:280px;color:rgba(255,255,255,.35);font-size:10px;line-height:1.6}.enquiry-submit button{padding:16px 20px;border:0;border-radius:9px;background:#f3f0eb;color:#090909;font:500 9px var(--mono);text-transform:uppercase;cursor:pointer}.enquiry-submit button span{margin-left:12px;color:var(--coral)}.form-status{min-height:1.4em;color:var(--coral-light);font:9px var(--mono)}
@media(max-width:900px){.sales-hero-grid,.case-story,.enquiry-main{grid-template-columns:1fr}.service-card{grid-template-columns:38px 1fr}.service-card ul,.service-price{grid-column:2}.case-facts{grid-template-columns:1fr 1fr}.enquiry-intro{position:static;padding-bottom:0}.enquiry-panel{margin-top:0}.case-hero{min-height:650px}.case-hero h1{font-size:19vw}}
@media(max-width:600px){.sales-main,.case-main,.enquiry-main{padding-top:75px}.sales-hero,.service-list,.case-facts,.case-story,.case-interface,.next-case,.enquiry-main{width:calc(100% - 28px)}.sales-hero{padding-top:70px}.sales-hero h1,.enquiry-intro h1{font-size:18vw}.sales-hero-grid{gap:35px}.sales-meta{display:grid;gap:9px;margin-top:45px}.service-card{gap:12px;padding:52px 0}.service-card ul,.service-price{grid-column:1/-1;margin-left:50px}.sales-note{width:calc(100% - 28px);margin:80px auto;padding:45px 22px}.case-hero{width:calc(100% - 20px);min-height:550px;padding:35px 22px}.case-summary{grid-template-columns:1fr}.case-facts div{padding:25px 15px!important}.case-story{margin:90px auto;gap:35px}.case-interface{margin-bottom:90px;padding:20px}.case-browser-body{min-height:280px;padding:28px}.case-browser-body strong{font-size:22vw}.next-case{margin-bottom:90px}.next-case{display:block}.next-case a{display:block;margin-top:20px}.enquiry-main{gap:30px;padding-bottom:80px}.enquiry-intro{padding-top:70px}.enquiry-panel{padding:28px 20px}.field-row{grid-template-columns:1fr}.enquiry-submit{align-items:flex-start;flex-direction:column}.enquiry-submit button{width:100%}}

/* First-project feature panel — kept last so its layout remains consistent. */
body .first-project-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(170px, .55fr) minmax(360px, 1.35fr) auto;
  align-items: end;
  gap: clamp(30px, 5vw, 80px);
  min-height: 390px;
  margin-top: clamp(38px, 6vw, 75px);
  padding: clamp(38px, 5vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 3px 3px 44px 3px;
  color: #f5f2ed;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(circle at 82% 115%, rgba(255,73,48,.52), transparent 42%),
    #090909;
}
body .first-project-card::before { content: '001'; position: absolute; right: 3%; bottom: -18%; z-index: -1; color: transparent; font: 700 clamp(180px, 25vw, 360px)/.8 var(--sans); letter-spacing: -.12em; -webkit-text-stroke: 1px rgba(255,126,91,.12); }
body .first-project-card::after { inset: 16px; border-color: rgba(255,255,255,.065); border-radius: 2px 2px 31px 2px; }
body .first-project-label { position: static; align-self: start; margin: 0; padding-top: 4px; color: var(--coral-light); font: 8px var(--mono); letter-spacing: .15em; }
body .first-project-label::before { content: '✦'; display: block; margin-bottom: 22px; color: #fff; font-size: 17px; }
body .first-project-card > div { position: relative; z-index: 2; }
body .first-project-card h2,
body .first-project-card h3 { margin: 0; color: #f5f2ed; font: 400 clamp(46px, 5.1vw, 78px)/.88 var(--serif); letter-spacing: -.055em; }
body .first-project-card div > p { max-width: 530px; margin: 25px 0 0; color: rgba(255,255,255,.59); font: 15px/1.65 var(--serif); }
body .first-project-card > a { position: relative; z-index: 2; align-self: end; justify-self: end; white-space: nowrap; padding: 15px 19px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: #fff; background: rgba(8,8,8,.35); font: 8px var(--mono); letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
body .first-project-card > a:hover { border-color: var(--coral-light); background: var(--coral); }
body .first-project-star { display: none; }
body .first-project-orbit { width: 520px; height: 230px; top: -80px; right: 9%; border-color: rgba(255,255,255,.1); }

@media (max-width: 900px) {
  body .first-project-card { grid-template-columns: 135px 1fr; min-height: 430px; }
  body .first-project-card > a { grid-column: 2; justify-self: start; }
}

@media (max-width: 620px) {
  body .first-project-card { grid-template-columns: 1fr; gap: 26px; min-height: 510px; padding: 30px 24px; align-content: end; }
  body .first-project-label { position: absolute; top: 28px; left: 24px; }
  body .first-project-label::before { display: none; }
  body .first-project-card h2,
  body .first-project-card h3 { font-size: clamp(48px, 15vw, 68px); }
  body .first-project-card > a { grid-column: 1; justify-self: start; white-space: normal; line-height: 1.4; }
  body .first-project-orbit { top: 20px; right: -330px; }
}