/* Cutsway: the brand over shared/page.css (load after it). Everything here comes from the logo:
   the CUTSWAY wordmark, wide and black, in its spectrum from blue through cream to red. */
  :root {
    --night: #07070a;
    --paper: #f4f2ec;
    --soft: #c4c4d0;
    --yellow: #fddf4b;
    --cyan: #03c0f4;
    --blue: #1c4cdd;
    --red: #fb3b27;
    --spec: linear-gradient(90deg, #272ed2, #1c4cdd 7.1%, #108ae8 14.3%, #03c0f4 21.4%, #5ae2e8 28.6%, #a9f0dc 35.7%, #e8f8cd 42.9%, #fcf397 50%, #fddf4b 57.1%, #fcb51c 64.3%, #fc8020 71.4%, #fb3b27 78.6%, #e21c2f 85.7%, #a81d30 92.9%, #761a2b);
    /* headlines speak like the wordmark: wide, black, upper case */
    --step-head: clamp(2.1rem, 0.7rem + 4.3vw, 5.4rem);
    --step-giant: clamp(3rem, 10.2vw, 11.5rem);
  }
  html { scrollbar-color: #2a2a3a var(--night); }
  /* the line above a page's headline: who we are, in words (and in the h1, for search) */
  .h1__k { display: block; margin-bottom: 0.9em; font-size: clamp(0.875rem, 0.76rem + 0.45vw, 1.1875rem); font-weight: 700; font-stretch: 100%; letter-spacing: 0.01em; line-height: 1.3; text-transform: none; color: var(--paper); text-shadow: 0 1px 2px rgb(7 7 10 / 0.9), 0 0 18px rgb(7 7 10 / 0.85); }
  .display { text-transform: uppercase; letter-spacing: -0.012em; line-height: 0.87; }
  .due strong, .night__time { text-transform: uppercase; letter-spacing: -0.01em; }
  .no-webgl body { background: radial-gradient(70% 50% at 15% 110%, rgb(28 76 221 / 0.4), transparent 70%), radial-gradient(70% 50% at 90% 110%, rgb(251 59 39 / 0.32), transparent 70%), var(--night) fixed; }
  .scrim { background: linear-gradient(to top, rgb(7 7 10 / 0.82), rgb(7 7 10 / 0) 48%); }
  .nav::before { background: linear-gradient(to bottom, rgb(7 7 10 / 0.74), rgb(7 7 10 / 0)); }
  .glass { background: rgb(14 14 22 / 0.46); border-color: rgb(244 242 236 / 0.24); }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgb(14 14 22 / 0.92); } }

  /* the logo: a gradient wordmark, 8 to 1 */
  .nav__logo svg { width: clamp(124px, 11vw, 168px); height: auto; aspect-ratio: 8 / 1; }

  /* export intro: the wordmark fills in left to right, like a render bar */
  .export__logo { position: relative; width: min(560px, 80vw); aspect-ratio: 8 / 1; }
  .export__logo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .export__logo svg:first-child { opacity: 0.1; filter: grayscale(1); }
  .export__logo .export__fill { clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0); }

  /* pills: paper wipes up through the ghost pill; the solid one carries the spectrum along its foot */
  .pill { position: relative; overflow: hidden; isolation: isolate; }
  .pill::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--paper); transform: translateY(101%); transition: transform 380ms var(--ease-out); }
  .pill:hover { background: rgb(244 242 236 / 0.1); color: var(--night); border-color: var(--paper); }
  .pill:hover::after { transform: none; }
  .pill--solid { background: var(--paper); border-color: var(--paper); color: var(--night); }
  .pill--solid::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1; background: var(--spec); }
  .pill--solid::after { background: var(--yellow); }
  .pill--solid:hover { background: var(--paper); border-color: var(--yellow); }
  .pill svg { transition: transform 380ms var(--ease-out); }
  .pill:hover svg { transform: translate(2px, 2px); }
  .chip[aria-pressed="true"] { box-shadow: inset 0 -3px 0 0 var(--cyan); }
  [data-magnet] { transition: transform 500ms var(--ease-out); will-change: transform; }

  /* the closing call: the logo's light follows the pointer, in the colour of the logo where the pointer is */
  .foot { position: relative; overflow: hidden; }
  .foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(var(--fire, 0) * 0.42); transition: opacity 600ms ease;
    background: var(--spec);
    -webkit-mask-image: radial-gradient(34vmax 28vmax at var(--fx, 50%) var(--fy, 80%), #000, transparent 70%); mask-image: radial-gradient(34vmax 28vmax at var(--fx, 50%) var(--fy, 80%), #000, transparent 70%); }
  .foot h2 a { display: inline-block; }
  .foot h2 a:hover { color: transparent; background: var(--spec); -webkit-background-clip: text; background-clip: text; }
  @media (hover: none), (prefers-reduced-motion: reduce) { .foot::before { display: none; } [data-magnet] { transform: none !important; } }

  /* ── launch layer: skip link, phone menu, footer, poster fallback ── */
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skip { position: fixed; z-index: 100; left: var(--m); top: 10px; padding: 0.7em 1.1em; border-radius: 999px; background: var(--yellow); color: var(--night); font-weight: 800; font-size: var(--step-small); text-decoration: none; transform: translateY(-160%); transition: transform 240ms var(--ease-out); }
  .skip:focus { transform: none; }
  .no-webgl .export { display: none; }

  .nav__burger { display: none; width: 44px; height: 44px; margin-left: 8px; border-radius: 50%; border: 1.5px solid rgb(244 242 236 / 0.42); background: rgb(244 242 236 / 0.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; position: relative; }
  .nav__burger i { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--paper); transition: transform 320ms var(--ease-out), opacity 200ms; }
  .nav__burger i:nth-child(1) { top: 17px; } .nav__burger i:nth-child(2) { top: 24px; }
  .nav__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  .menu { position: fixed; inset: 0; z-index: 29; display: grid; align-content: end; gap: 28px; padding: 110px var(--m) calc(40px + env(safe-area-inset-bottom, 0px)); background: rgb(7 7 10 / 0.88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 280ms; }
  .menu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--spec); }
  .menu.open { opacity: 1; visibility: visible; }
  .menu nav { display: grid; gap: 8px; }
  .menu nav a { font-weight: 900; font-stretch: 125%; letter-spacing: -0.01em; font-size: clamp(2rem, 9vw, 3rem); line-height: 1; text-transform: uppercase; text-decoration: none; transform: translateY(14px); opacity: 0; transition: transform 500ms var(--ease-out), opacity 400ms; }
  .menu.open nav a { transform: none; opacity: 1; }
  .menu.open nav a:nth-child(2) { transition-delay: 50ms; } .menu.open nav a:nth-child(3) { transition-delay: 100ms; } .menu.open nav a:nth-child(4) { transition-delay: 150ms; }
  .menu .pill { justify-self: start; font-size: 1rem; }
  .menu__mail { color: var(--soft); font-weight: 700; }
  .nav__cta { display: flex; align-items: center; }
  @media (max-width: 820px) { .nav__burger { display: block; } }

  .foot__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--m); padding-top: 24px; position: relative; }
  .foot__grid::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--spec); }
  .foot__k { display: block; margin-bottom: 8px; font-size: var(--step-small); font-weight: 700; color: var(--soft); }
  .foot__grid a { font-weight: 800; text-decoration: none; }
  .foot__grid a:hover { color: var(--yellow); }
  .foot__grid nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .foot__row { border-top: 0; padding-top: 4px; }
  .foot__row a { text-decoration: none; }
  .foot__row a:hover { color: var(--paper); }
  @media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__grid > :first-child { grid-column: 1 / -1; } }

  .hud, .counter { transition: opacity 400ms ease; }
  .at-end .hud, .at-end .counter { opacity: 0; }
  /* the closing words sit on a dark floor, whatever the scene behind them is doing */
  .foot { background: linear-gradient(to top, rgb(7 7 10 / 0.9), rgb(7 7 10 / 0.6) 42%, rgb(7 7 10 / 0) 78%); }
  @media (max-width: 820px) {
    .foot { background: linear-gradient(to top, rgb(7 7 10 / 0.94), rgb(7 7 10 / 0.8) 52%, rgb(7 7 10 / 0) 76%); }
    .ch h1 { font-size: 13.2vw; }
    .foot h2 { font-size: 13.2vw; }
  }
  /* ── the enquiry sheet: a panel on desktop, a sheet from the bottom on phones ── */
  .enq { width: min(660px, calc(100% - 2 * var(--m))); max-height: calc(100svh - 40px); margin: auto; padding: 0; border: 1.5px solid rgb(244 242 236 / 0.18); border-radius: 26px; background: #0e0e15; color: var(--paper); overflow: auto; overscroll-behavior: contain; box-shadow: 0 40px 120px rgb(0 0 0 / 0.6); }
  .enq::before { content: ""; position: sticky; top: 0; display: block; height: 4px; background: var(--spec); z-index: 1; }
  .enq::backdrop { background: rgb(7 7 10 / 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .enq[open] { animation: enq-in 440ms var(--ease-out); }
  .enq[open]::backdrop { animation: enq-fade 300ms ease; }
  @keyframes enq-in { from { opacity: 0; transform: translateY(22px) scale(0.985); } }
  @keyframes enq-fade { from { opacity: 0; } }
  .enq__form, .enq__done { padding: clamp(22px, 3vw, 34px); display: grid; gap: 18px; }
  .enq [hidden] { display: none !important; }
  .enq__done:focus { outline: none; }
  .enq__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .enq h2 { font-size: clamp(2rem, 1rem + 3vw, 3.2rem); }
  .enq__x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgb(244 242 236 / 0.3); background: transparent; color: var(--paper); cursor: pointer; transition: background-color 200ms, border-color 200ms; }
  .enq__x:hover { background: rgb(244 242 236 / 0.1); border-color: var(--paper); }
  .enq__x svg { width: 18px; }
  .enq__lede { margin: 0; max-width: 46ch; color: var(--soft); font-size: var(--step-body); }
  .enq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .fld { display: grid; gap: 7px; font-size: var(--step-small); font-weight: 700; color: var(--soft); }
  .fld em { font-style: normal; font-weight: 600; opacity: 0.65; }
  .fld input, .fld textarea { width: 100%; min-width: 0; font: 500 1rem/1.35 "Archivo", system-ui, sans-serif; color: var(--paper); background: rgb(244 242 236 / 0.06); border: 1.5px solid rgb(244 242 236 / 0.2); border-radius: 14px; padding: 0.8em 0.95em; transition: border-color 200ms, background-color 200ms; }
  .fld textarea { resize: vertical; min-height: 92px; }
  .fld input::placeholder, .fld textarea::placeholder { color: rgb(196 196 208 / 0.5); }
  .fld input:focus, .fld textarea:focus { outline: none; border-color: var(--cyan); background: rgb(244 242 236 / 0.09); }
  .fld [aria-invalid="true"] { border-color: var(--red); }
  .enq__needs { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .enq__needs legend { padding: 0; margin-bottom: 9px; font-size: var(--step-small); font-weight: 700; color: var(--soft); }
  .enq__needs legend em { font-style: normal; font-weight: 600; opacity: 0.65; }
  .enq__needs[data-invalid] .need span { border-color: var(--red); }
  .need { position: relative; cursor: pointer; }
  .need input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .need span { display: inline-block; padding: 0.6em 1em; border-radius: 999px; border: 1.5px solid rgb(244 242 236 / 0.3); font-weight: 700; font-size: var(--step-small); transition: background-color 160ms, color 160ms, border-color 160ms; }
  .need:hover span { background: rgb(244 242 236 / 0.1); }
  .need input:checked + span { background: var(--paper); color: var(--night); border-color: var(--paper); box-shadow: inset 0 -3px 0 0 var(--cyan); }
  .need input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 3px; }
  .enq__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .enq__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; }
  .enq__foot .pill { font-size: 1rem; }
  .enq__foot .pill[disabled] { opacity: 0.6; cursor: progress; }
  .enq__alt { margin: 0; font-size: var(--step-small); font-weight: 600; color: var(--soft); }
  .enq__alt a { color: var(--paper); font-weight: 800; }
  .enq__status { margin: -6px 0 0; min-height: 1.2em; font-size: var(--step-small); font-weight: 700; color: var(--yellow); }
  .enq__status:empty { display: none; }
  .enq__note { margin: -6px 0 0; font-size: 0.8rem; color: rgb(196 196 208 / 0.7); }
  @media (max-width: 820px) {
    .enq { width: 100%; max-width: none; margin: auto 0 0; max-height: 92svh; border-radius: 24px 24px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .enq[open] { animation-name: enq-up; }
    @keyframes enq-up { from { transform: translateY(40px); opacity: 0; } }
    .enq__grid { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) { .enq[open], .enq[open]::backdrop { animation: none; } }

  /* footer: email and WhatsApp stacked */
  .foot__talk { display: grid; justify-items: start; gap: 6px; }

  /* the corner readouts and the pile hint describe the live 3D; without it they step out */
  .no-webgl .hud, .no-webgl .counter, .no-webgl .hint { display: none; }