:root {
  --bg: #0c0b0d; --ink: #f1ede6; --dim: #a39d93; --line: rgba(241, 237, 230, .12);
  --magma: #ff5a1f; --heat: .3;
  --g-deep: #1c0c07; --g-glow: #ff5a1f; --gx: 72%; --gy: 44%;
  --sans: "Archivo", system-ui, sans-serif; --serif: "Bodoni Moda", Georgia, serif; --mono: "Space Mono", "Rupee Figure", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; color: var(--ink); font: 17px/1.55 var(--sans); background: #140907; }
/* the ground (round 2): not flat black. It takes the colour of what is in focus (the lit wall piece in the hero, then each
   product) and glows where the render sits, so the object lights the page; a fine grain gives it a material. */
.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(130% 70% at 50% 115%, color-mix(in srgb, var(--g-glow) 26%, var(--g-deep)) 0%, transparent 62%),
    radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--g-glow) 12%, var(--g-deep)) 0%, transparent 70%),
    var(--g-deep); }
.ground::after { content: ""; position: absolute; inset: 0; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
body.locked { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: #fff; color: #000; padding: 8px 12px; }
.skip:focus { left: 8px; }
.eyebrow { font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--magma); }
.lede { color: var(--dim); max-width: 46ch; font-size: 18px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; background: var(--ink); color: #111; text-decoration: none; font-weight: 600; font-size: 16px; border: 1px solid var(--ink); transition: background .2s, color .2s; }
.btn:hover { background: var(--magma); border-color: var(--magma); color: #111; }
.btn.ghost { background: transparent; color: var(--ink); border-color: rgba(241, 237, 230, .35); }
.btn.ghost:hover { border-color: var(--ink); background: rgba(241, 237, 230, .08); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--magma); outline-offset: 3px; }

/* the persistent object */
/* site-r3: ONE opaque canvas under all text; it draws the ground, the glow, the light band, the wall (hero), the object
   and its shadow. The .ground, .glow, .beam, .wall and .heatlight DOM layers are gone (their rules below are unused). */
canvas.confluence { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; }
.hero.pick { cursor: pointer; }
main > section > :where(:not(.wall):not(.heatlight):not(.wallcap)) { position: relative; z-index: 3; }

/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; gap: 28px; padding: 18px 40px; transition: background .3s, backdrop-filter .3s; }
.nav.solid { background: rgba(20, 10, 8, .9);  border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.brand svg { width: 30px; height: 30px; }
.links { display: flex; gap: 24px; margin-left: auto; }
.links a { text-decoration: none; color: var(--dim); font-size: 16px; }
.links a:hover { color: var(--ink); }
.nav .btn { padding: 10px 16px; }

/* 1. hero */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end; padding: 0 40px 64px; }
.wall { position: absolute; inset: 0; z-index: 0; perspective: 1400px; overflow: hidden; }
.wall .plane { position: absolute; left: -18%; top: -30%; width: 136%; height: 160%; display: flex; gap: 18px;
  transform: rotateX(24deg) rotateZ(-9deg); transform-origin: 50% 40%; }
.col { flex: 1; overflow: visible; }
.strip { display: flex; flex-direction: column; gap: 18px; animation: drift var(--dur) linear infinite; will-change: transform; }
.col.up .strip { animation-direction: reverse; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 9px)); } }
body.still .strip { animation: none; }
.strip figure { margin: 0; border-radius: 10px; overflow: hidden; cursor: pointer; transform-origin: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); transition: filter 1.4s ease, transform 1.4s ease, box-shadow 1.4s ease; }
.strip figure img { width: 100%; height: auto; }
.strip figure.lit, .strip figure:hover { transform: scale(1.06); box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .15); z-index: 1; position: relative; }
/* the object's heat lights the wall: a magma spill that breathes with the cycle */
.heatlight { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 62% at 10% 92%, color-mix(in srgb, var(--g-deep) 86%, transparent) 0%, color-mix(in srgb, var(--g-deep) 50%, transparent) 42%, transparent 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, transparent 14%);
  mix-blend-mode: normal; }
.hero-copy { max-width: 620px; }
.hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .55); font-weight: 500; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.02em; margin: 18px 0 28px; max-width: 16ch; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: .5em; margin: 0; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: rgba(241, 237, 230, .08); border: 1px solid rgba(241, 237, 230, .18);  font-size: 17px; color: var(--dim); }
.pill:hover { border-color: var(--magma); }
.reel { position: relative; display: inline-grid; overflow: hidden; height: 1.5em; color: var(--ink); font-weight: 600; }
.reel > span { grid-area: 1 / 1; white-space: nowrap; }
.reel > span.in { animation: rin .6s cubic-bezier(.2, .8, .2, 1) both; }
.reel > span.out { animation: rout .6s cubic-bezier(.6, 0, .8, .2) both; }
@keyframes rin { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rout { to { transform: translateY(-105%); } }
.reel.b { color: var(--magma); }
.hero .wallcap { position: absolute; z-index: 3; right: 40px; bottom: 64px; margin: 0; font: 16px/1.3 var(--mono); color: var(--dim); text-align: right; max-width: 30ch; }
.wallcap b { display: block; color: var(--ink); font: 700 18px/1.3 var(--sans); }

/* bands */
.band { padding: 140px 40px; border-top: 1px solid var(--line); }
.band h2, .contact h2, .sheet h2 { font: 700 clamp(40px, 5.2vw, 76px)/1.02 var(--serif); letter-spacing: -.02em; margin: 14px 0 16px; }
.head { margin-bottom: 56px; }

/* 2. index */
.rows { list-style: none; margin: 0; padding: 0; max-width: 74%; }
.rows li { border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows button { width: 100%; display: grid; grid-template-columns: 3.2em minmax(0, 1.1fr) minmax(0, 1fr) 4em; align-items: baseline; gap: 20px; text-align: left; padding: 18px 0; transition: opacity .3s, padding .3s; }
.rows .i, .rows .yr { font: 15px var(--mono); color: var(--dim); }
.rows .yr { text-align: right; }
.rows .nm { font: 900 clamp(36px, 4.6vw, 68px)/1 var(--serif); letter-spacing: -.02em; transition: color .3s; }
.rows .wh { color: var(--dim); font-size: 17px; }
.rows .sh { display: none; }
.rows:hover button { opacity: .35; }
.rows:hover button:hover { opacity: 1; padding-left: 14px; }
.rows button:hover .nm { color: var(--c); }
.float { position: fixed; left: 0; top: 0; z-index: 5; width: 400px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .35s; box-shadow: 0 40px 100px -20px color-mix(in srgb, var(--c, #ff5a1f) 55%, transparent), 0 20px 50px rgba(0, 0, 0, .6); }
.float.on { opacity: 1; }
.float img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .float { display: none; } }

/* 3. services */
.services { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 60px; align-items: start; }
main > .services > .head { position: sticky; top: 120px; }  /* specific enough to beat the section-child rule (it was relative + top 120: pushed into the list) */
.svc { list-style: none; margin: 0; padding: 0; }
.svc li { display: grid; grid-template-columns: 2.6em 1fr auto; gap: 4px 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.svc .n { font: 15px var(--mono); color: var(--dim); grid-row: span 2; padding-top: 4px; }
.svc .t { font-size: 21px; font-weight: 600; }
.svc .f { grid-column: 3; grid-row: 1; font: 700 16px var(--mono); color: var(--ink); text-align: right; white-space: nowrap; }
.svc .f.closed { color: var(--dim); font-weight: 400; }
.svc .p { color: var(--dim); font-size: 16px; grid-column: 2 / 4; }
.svc .p a { color: var(--ink); }
.svc .p a:hover { color: var(--magma); }

/* 4. process */
.process .head, .process .steps { max-width: 64%; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.step { background: rgba(241, 237, 230, .04); border: 1px solid var(--line); border-radius: 14px; padding: 24px;  }
.step .k { font: 700 14px var(--mono); color: var(--magma); }
.step h4 { font-size: 21px; margin: 8px 0 8px; }
.step p { color: var(--dim); margin: 10px 0 0; }
.step img { border-radius: 8px; margin-top: 10px; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.thumbs img { margin: 0; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* 5. contact */
.contact { min-height: 100vh; display: flex; align-items: center; padding: 120px 40px; border-top: 1px solid var(--line); }
.contact .copy { max-width: 560px; }
.routes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
footer { position: relative; z-index: 3; display: flex; gap: 24px; padding: 28px 40px; border-top: 1px solid var(--line); color: var(--dim); font-size: 16px; }
footer .r { margin-left: auto; }

/* the sheet */
.sheet { position: fixed; inset: 0; z-index: 10; overflow-y: auto; background: rgba(10, 9, 11, .97);
  clip-path: circle(0% at 50% 50%); transition: clip-path .7s cubic-bezier(.76, 0, .24, 1); }
.sheet.open { clip-path: circle(150% at 50% 50%); }
.sh-in { max-width: 1240px; margin: 0 auto; padding: 100px 40px 80px; }
.sheet header { margin-bottom: 40px; border-left: 3px solid var(--c); padding-left: 22px; }
.close { position: fixed; top: 22px; right: 28px; z-index: 2; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(241, 237, 230, .3); font-size: 16px; background: rgba(12, 11, 13, .7); }
.close:hover { border-color: var(--ink); }
.frames { display: grid; gap: 22px; }
.frames figure { margin: 0; border-radius: 12px; overflow: hidden; }
.frames img { width: 100%; height: auto; }
.next { display: grid; gap: 8px; text-align: left; margin-top: 60px; padding: 40px 0; border-top: 1px solid var(--line); width: 100%; }
.next .nm { font: 900 clamp(44px, 6vw, 90px)/1 var(--serif); }
.next .wh { color: var(--dim); }
.next:hover .nm { color: var(--magma); }

/* phones */
@media (max-width: 820px) {
  .nav { padding: 14px 18px; gap: 14px; }
  .links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { padding: 0 20px 40px; }
  .heatlight { background: linear-gradient(0deg, color-mix(in srgb, var(--g-deep) 94%, transparent) 0%, color-mix(in srgb, var(--g-deep) 62%, transparent) 40%, transparent 68%); }
  .wall .plane { left: -30%; width: 160%; }
  .wallcap { display: none; }
  .pill { font-size: 16px; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; border-radius: 18px; }
  .pill .reel { justify-self: start; }
  .band, .contact { padding: 96px 20px; }
  .rows { max-width: none; }
  .rows button { grid-template-columns: 2.4em 1fr; }
  .rows .wh { grid-column: 2; }
  .rows .yr { display: none; }
  .services { grid-template-columns: 1fr; gap: 0; }
  main > .services > .head { position: static; }
  .process .head, .process .steps { max-width: none; }
  .steps { grid-template-columns: 1fr; }
  .svc li { grid-template-columns: 2.2em 1fr; }
  .svc .f { grid-column: 2; grid-row: auto; text-align: left; }
  .svc .p { grid-column: 2; }
  footer { flex-wrap: wrap; padding: 24px 20px; }
  .sh-in { padding: 80px 20px 60px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sheet { transition: none; }
  .strip figure { transition: none; }
}

/* round 2: the wall is bright now, so the small type over it gets its own soft backing */
.nav::before { content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-deep) 78%, transparent) 0%, transparent 100%); transition: opacity .3s; }
.nav.solid::before { opacity: 0; }
.links a { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.hero .wallcap { padding: 10px 14px; border-radius: 12px; background: rgba(20, 10, 8, .82);  }
.hero .wallcap:empty { display: none; }
.pill { background: rgba(20, 10, 8, .78); }

/* scene C (ruled 3 Nov late): a low raking beam from the left crosses the page through the object (--gy follows it);
   brighter near the source, falling off to the right; outside the band the page sits a little deeper. Soft-light, so the
   wall's own colours stay; ?nobeam turns it off for comparison. */
.beam { position: fixed; left: 0; right: 0; top: -50vh; height: 200vh; z-index: 1; pointer-events: none; will-change: transform;
  /* the raking band and its falloff to the right are drawn in the gradient itself: no mask (a mask costs a GPU pass per frame) */
  background: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(8,3,2,.12) 100%),
    linear-gradient(174deg, rgba(8,3,2,.34) 0%, rgba(8,3,2,.2) 34%, rgba(255,196,140,.10) 46%, rgba(255,204,150,.12) 52%, rgba(8,3,2,.2) 64%, rgba(8,3,2,.34) 100%); }
/* the object's glow on the page: one soft disc moved by transform (no full-page repaint), no animation */
.glow { position: fixed; left: 50%; top: 50%; width: 84vmax; height: 84vmax; margin: -42vmax 0 0 -42vmax; z-index: 0; pointer-events: none; will-change: transform; opacity: .85;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g-glow, #ff5a1f) 46%, transparent) 0%, color-mix(in srgb, var(--g-glow, #ff5a1f) 12%, transparent) 50%, transparent 100%); }
.nobeam .beam { display: none; }

/* perf test switch (?noblur) */
.noblur * { backdrop-filter: none !important; }
.nofilter .strip figure, .nofx .strip figure { filter: none !important; box-shadow: none !important; transition: none !important; }
.nograin .ground::after, .nofx .ground::after { display: none; }
.nofx .beam { display: none; }
.nofx * { backdrop-filter: none !important; }
.hidewall .wall { display: none; }
.noglow .glow { display: none; }
.noradius .strip figure { border-radius: 0 !important; overflow: visible !important; }