/* ==========================================================================
   Mugic Labs — static site
   Fonts: Chakra Petch (headings), Roboto Mono (text). Self-hosted, SIL OFL.
   Layout: column grid — 12 columns ≥1200px, 8 columns 810–1199px, 4 columns <810px.
   ========================================================================== */

@font-face { font-family: "Chakra Petch"; font-weight: 400; font-display: swap;
  src: url("../fonts/chakra-petch-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-weight: 400; font-display: swap;
  src: url("../fonts/chakra-petch-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap;
  src: url("../fonts/chakra-petch-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap;
  src: url("../fonts/chakra-petch-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Mono"; font-weight: 400; font-display: swap;
  src: url("../fonts/roboto-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Mono"; font-weight: 400; font-display: swap;
  src: url("../fonts/roboto-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens (values measured from the Framer site) ---------- */
:root {
  --bg: #0a0a0a;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.64);
  --text-faint: rgba(255, 255, 255, 0.32);
  --text-ghost: rgba(255, 255, 255, 0.18);
  --line: rgba(255, 255, 255, 0.16);
  --border: rgba(255, 255, 255, 0.32);
  --accent: #eb3912;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --font-display: "Chakra Petch", "Arial Narrow", Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Fluid column grid, like the Framer original: stretches with the window,
     72px side margins, content capped at 1920px and centred on wider screens.
     The dev overlay reads the same variables. */
  --cols: 12;
  --gap: 32px;
  --gutter: 72px;
  --max: 1920px;

  --section-space: 200px;
  --devbar-h: 0px;          /* set by the dev grid bar while it is included */
}
@media (max-width: 1279px) { :root { --gutter: 48px; } }
@media (max-width: 1199px) { :root { --cols: 8; --gap: 24px; --gutter: 32px; --section-space: 150px; } }
@media (max-width: 809px)  { :root { --cols: 4; --gap: 16px; --gutter: 20px; --section-space: 112px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-top: var(--devbar-h);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.13px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Pictures that slide in from the right start off-screen; clip them without breaking position: sticky */
main, .site-footer { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.full { grid-column: 1 / -1; }

.accent { color: var(--accent); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.h-xl { font-size: 64px; line-height: 72px; letter-spacing: -1px; font-weight: 400; }
.h-l  { font-size: 40px; line-height: 56px; letter-spacing: -1px; }

/* Section intro: white label + orange lead */
.intro__label { grid-column: 1 / 3; }
.intro__lead  { grid-column: 3 / 6; }

/* ---------- Rolling text hover (pointer devices only) ---------- */
.roll { display: inline-flex; overflow: hidden; height: 20px; line-height: 20px; vertical-align: top; }
.roll > span { display: block; }
@media (hover: hover) and (pointer: fine) {
  /* The copy that rolls in is a real text line (::after, filled from data-roll by main.js), not a text-shadow:
     a shadow is rasterised differently and looked like a colour change on hover. */
  /* Moved with `top`, not `transform`: a transform puts the text on a GPU layer for the duration of the
     animation, and Windows then drops ClearType, so the label looked dimmer while rolling. */
  .roll > span { position: relative; top: 0; transition: top .45s cubic-bezier(.6, 0, .2, 1); }
  .roll > span[data-roll]::after { content: attr(data-roll); display: block; }
  a:hover .roll > span, button:hover .roll > span { top: -20px; }
}

/* ---------- Buttons ---------- */
/* As on the original: thin 32% white border, orange fill fades in on hover */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-mono); font-size: 14px; line-height: 20px; white-space: nowrap;
  isolation: isolate;
}
.btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--accent); opacity: 0; transition: opacity .35s ease; }
@media (hover: hover) and (pointer: fine) { .btn:hover::before { opacity: 1; } }

/* ---------- Header ---------- */
.site-header { position: absolute; top: var(--devbar-h); left: 0; right: 0; z-index: 20; }
.header__grid { padding-top: 40px; align-items: start; }
.logo { grid-column: 1 / 4; align-self: start; }
.logo img { display: block; width: 190px; height: auto; }
.nav {
  grid-column: 8 / 10;   /* starts ~40% from the right edge */
  display: grid; grid-template-columns: subgrid; grid-template-rows: repeat(4, auto); grid-auto-flow: column;
  row-gap: 2px; white-space: nowrap;
}
.nav a { font-size: 14px; }
.nav .nav__cta { display: none; }
.header-cta { grid-column: 11 / 13; justify-self: end; }
.nav-toggle { display: none; width: 40px; height: 40px; position: relative; justify-self: end; }
.nav-toggle span { position: absolute; left: 0; right: 0; height: 2px; background: #fff; transition: transform .3s, top .3s; }
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 24px; }
.menu-open .nav-toggle span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.menu-open .nav-toggle span:nth-child(2) { top: 19px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
/* Height follows the viewport but is capped, so the background never upscales on tall screens */
.hero { position: relative; min-height: clamp(720px, 100svh, 1000px); display: flex; flex-direction: column; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,10,10,0) 45%, var(--bg) 100%); }
.hero__inner { flex: 1; align-items: center; position: relative; padding-top: 120px; }
.hero__title { grid-column: 1 / 7; font-size: 72px; line-height: 72px; letter-spacing: -1.5px; color: var(--accent); position: relative; z-index: 2; }
.hero__sub { grid-column: 7 / 13; font-family: var(--font-display); font-weight: 500; text-wrap: balance; font-size: 40px; line-height: 56px; letter-spacing: -1px; text-align: right; position: relative; z-index: 2; }
.hero__mug {
  position: absolute; left: 50%; top: 50%; width: 420px; z-index: 1;
  translate: -50% -42%; animation: float 7s ease-in-out infinite;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.6));
  pointer-events: none;
}
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(-2deg); } }
.hero__tagline { grid-column: 1 / 4; grid-row: 1; padding-bottom: 56px; }
/* Animated scroll hint in the bottom-right corner of the first screen (as on the original) */
.hero__scroll { grid-column: 12 / 13; grid-row: 1; justify-self: end; align-self: end; margin-bottom: 56px; width: 24px; height: 24px; color: var(--text); }
.hero__scroll svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; animation: scrollHint 1.8s ease-in-out infinite; }
@keyframes scrollHint { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }

/* ---------- Sectors ---------- */
.sectors { padding-top: 72px; padding-bottom: var(--section-space); }
.sectors__count { grid-column: 2 / 3; justify-self: end; margin-top: 56px; padding-top: 18px; color: var(--text-faint); }
/* The number sits next to the active sector line: it fades out, jumps to the new line and fades in */
.sectors__count span { display: inline-block; transform: translateY(var(--tab-y, 0px)); transition: opacity .2s ease; }
.sectors__count span.is-switching { opacity: 0; }
.sectors__tabs { grid-column: 3 / 9; margin-top: 56px; }
.sectors__content { grid-column: 9 / 13; margin-top: 56px; }
.tabs { display: flex; flex-direction: column; align-items: flex-start; }
.tab {
  font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 56px; letter-spacing: -1px;
  color: var(--text-faint); text-align: left; transition: color .3s;
}
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--text-muted); } }
.tab[aria-selected="true"] { color: var(--text); }
.sectors__tabs .btn { margin-top: 40px; }
.sectors__media { position: relative; aspect-ratio: 424 / 295; overflow: hidden; }
.sectors__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }   /* cross-fade only, no zoom-out */
.sectors__media img.is-active { opacity: 1; }
.tab-panel { margin-top: 32px; }
.tab-panel[hidden] { display: none; }
.tab-panel.is-entering { animation: fadeUp .5s ease both; }
.sectors__also { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-faint); }

/* 24px arrow icon (same glyph as the original, Material "arrow forward") */
:root { --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(4 4)' d='M8 0 6.59 1.41 12.17 7H0v2h12.17l-5.58 5.59L8 16l8-8z'/%3E%3C/svg%3E"); }
.arrow-list li { position: relative; padding-left: 34px; color: var(--text-muted); }
.arrow-list li + li { margin-top: 16px; }
.arrow-list li::before {
  content: ""; position: absolute; left: 0; top: -2px; width: 24px; height: 24px; background: var(--accent);
  -webkit-mask: var(--arrow-icon) center / contain no-repeat; mask: var(--arrow-icon) center / contain no-repeat;
}
.arrow-list strong { font-weight: 400; color: inherit; }

/* ---------- Concept ---------- */
.concept { position: relative; padding: 40px 0 var(--section-space); }
/* Background rocks are centred on the text block (section padding: 40px top, --section-space bottom) */
.concept__bg { position: absolute; left: 0; right: 0; top: calc(50% + 20px - var(--section-space) / 2); transform: translateY(-50%); z-index: -1; pointer-events: none; }
.concept__bg img { width: 100%; max-width: var(--max); height: auto; margin: 0 auto; opacity: .9; }
.concept__lead { grid-column: 1 / 4; display: flex; flex-direction: column; gap: 16px; padding-top: 12px; }
.concept__main { grid-column: 6 / 13; }
.concept__statement { font-size: 64px; line-height: 72px; letter-spacing: -1.5px; font-weight: 400; }
.concept__text { margin-top: 32px; display: grid; gap: 16px; }

/* ---------- Branding ---------- */
.branding { padding-bottom: 120px; }
.branding__title { grid-column: 1 / -1; margin-bottom: 72px; }
.branding__media { grid-column: 1 / 7; position: sticky; top: calc(40px + var(--devbar-h)); aspect-ratio: 684 / 351; overflow: hidden; }   /* 20% lower than the original 684 / 439 */
.branding__frame { position: absolute; inset: 0; }
/* Picture swap: cross-fade only, no zoom (timing from the original component: 0.6s, 0.1s delay, ease (.94,.01,.56,1)) */
.branding__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.94, .01, .56, 1) .1s;
}
.branding__media img.is-active { opacity: 1; }
.branding__specs { grid-column: 7 / 13; display: grid; grid-template-columns: subgrid; row-gap: 120px; }
.spec-block { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
.spec-block__img { display: none; }
.spec-block__num { grid-column: 1 / 2; justify-self: end; color: var(--text-faint); }
.spec-block__body { grid-column: 2 / -1; }
.spec-block h3 { font-family: var(--font-mono); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.13px; margin-bottom: 24px; }
.spec-block__intro { color: var(--text-muted); margin-bottom: 24px; }
.spec { display: grid; grid-template-columns: minmax(120px, 2fr) 3fr; gap: 20px var(--gap); margin: 0; }
.spec dt { color: var(--accent); }
.spec dd { margin: 0; color: var(--text-muted); }
.spec-block .btn { margin-top: 32px; }

/* Liquid strip: scroll-scrubbed Blender video over a static poster frame */
/* The bottom 13% of the video is empty; a negative margin pulls Solutions 30% of that band closer */
.liquid { --liquid-h: calc(min(100vw, var(--max)) * 816 / 1920);
  position: relative; margin: calc(var(--section-space) / 2) auto calc(var(--liquid-h) * -0.039); max-width: var(--max); aspect-ratio: 1920 / 816; }
.liquid__fallback, .liquid__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.liquid__fallback { transition: opacity .8s ease; }
.liquid__video { opacity: 0; transition: opacity .8s ease; }
.liquid.is-live .liquid__video { opacity: 1; }
.liquid.is-live .liquid__fallback { opacity: 0; }

/* ---------- Solutions ---------- */
.solutions { padding: 28px 0 var(--section-space); }
.solution { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding-top: 56px; align-items: start; }
.solution + .solution { margin-top: 40px; }
.solution__num { grid-column: 2 / 3; justify-self: end; color: var(--text-faint); padding-top: 18px; }
.solution__body { grid-column: 3 / 8; }
.solution__media { grid-column: 9 / 13; }
.solution h3 { margin-bottom: 32px; }
.solution__media img { width: 100%; aspect-ratio: 466 / 324; object-fit: cover; }

/* ---------- Workflow ---------- */
.workflow { padding-bottom: var(--section-space); }
.workflow__title { grid-column: 1 / -1; text-align: center; margin-bottom: 72px; }
.steps { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 48px; }
.step { grid-column: span 6; display: grid; grid-template-columns: subgrid; }
.step__num { grid-column: 1 / 2; justify-self: end; color: var(--text-faint); }
.step__body { grid-column: 2 / 6; }
.step h3 { font-family: var(--font-mono); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.13px; color: var(--accent); margin-bottom: 8px; }

/* ---------- FAQ ---------- */
.faq { padding-bottom: var(--section-space); }
.faq__title { grid-column: 5 / 13; margin-bottom: 56px; }
.faq__media { grid-column: 1 / 4; }
.faq__media img { width: 100%; aspect-ratio: 315 / 394; object-fit: cover; }
.accordion { grid-column: 6 / 13; border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item h3 { font: inherit; }
.acc-trigger {
  width: 100%; display: flex; justify-content: space-between; gap: 24px; align-items: flex-start;
  padding: 24px 0; text-align: left; color: var(--accent);
  font-size: 15px; line-height: 22px; letter-spacing: -0.15px;
}
.acc-icon { position: relative; flex: 0 0 14px; height: 22px; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1.5px; background: #fff; transition: transform .3s; }
.acc-icon::after { transform: rotate(90deg); }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: rotate(0deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { color: var(--text-muted); padding-bottom: 24px; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }

/* ---------- CTA / contact form ---------- */
.cta { position: relative; padding: 120px 0; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; z-index: -1; display: flex; justify-content: center; }
.cta__bg img { width: 100%; max-width: var(--max); height: 100%; object-fit: cover; object-position: left center; opacity: 1; } /* 8% is baked into cta-mountains.webp with dithering (no banding) */
/* the picture is never cropped: its own edges already fade to the page colour (#0a0a0a), so no cut line can appear */
.cta__bg img { object-fit: contain; }
.cta__lead { grid-column: 1 / 4; display: flex; flex-direction: column; gap: 16px; text-shadow: 0 1px 12px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
.form { grid-column: 6 / 13; display: grid; grid-template-columns: subgrid; row-gap: 40px; }
.field { display: flex; flex-direction: column; gap: 12px; }
.field--a { grid-column: 1 / 4; }
.field--b { grid-column: 5 / 8; }
.field--full { grid-column: 1 / -1; }
.field label, .field__label { font-size: 14px; line-height: 20px; letter-spacing: -0.13px; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  color: var(--text); font-family: var(--font-mono); font-size: 14px; line-height: 20px;
  padding: 0 0 14px; outline: none; transition: border-color .3s;
}
/* Hints inside the fields are dim (18%); what the visitor types or picks is white */
.field input::placeholder, .field textarea::placeholder { color: var(--text-ghost); }
.field input:not([type="checkbox"]):focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field select { appearance: none; cursor: pointer; color: var(--text);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%23fff' stroke-opacity='.64' d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 4px top 6px; }
.field select:invalid { color: var(--text-ghost); }   /* "Select" placeholder until a quantity is chosen */
.field select option { background: var(--bg); color: var(--text); }
.field textarea { resize: vertical; min-height: 90px; }
.form__hp { display: none; }
.form__footer { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.form__submit { color: var(--accent); font-size: 14px; }
.form__submit[disabled] { opacity: .5; cursor: progress; }
.form__consent, .form__check { display: flex; gap: 12px; align-items: flex-start; color: var(--text-faint); max-width: 560px; cursor: pointer; }
.form__consent a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.form__consent input, .form__check input {
  appearance: none; flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0;
  border: 1px solid var(--text-muted); background: transparent; cursor: pointer; display: grid; place-content: center;
}
.form__consent input::after, .form__check input::after { content: ""; width: 8px; height: 8px; background: var(--accent); transform: scale(0); transition: transform .15s; }
.form__consent input:checked, .form__check input:checked { border-color: var(--accent); }
.form__consent input:checked::after, .form__check input:checked::after { transform: scale(1); }
.form__status { min-height: 20px; }
.form__check { color: var(--text-muted); padding-bottom: 14px; border-bottom: 1px solid transparent; }   /* sample checkbox: same baseline as the inputs */
.field__opt { color: var(--text-ghost); }
.form__status.is-ok { color: var(--text); }
.form__status.is-error { color: var(--accent); }

/* ---------- Footer ---------- */
/* Footer — mirrors the Framer original: legal lines, e-mail with copy icon, a faint divider,
   social links with arrows + claim, then Back / Privacy / copyright. */
.site-footer { padding: 32px 0 40px; }
.footer__legal { color: var(--text-faint); }
.footer__email { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.copy-email { position: relative; display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.copy-email__text, .copy-email__done { transition: opacity .3s ease; }
.copy-email__done { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.copy-email .icon--copy { transition: opacity .3s ease; }
.copy-email.is-copied .copy-email__text, .copy-email.is-copied .icon--copy { opacity: 0; }
.copy-email.is-copied .copy-email__done { opacity: 1; }
.icon { display: inline-block; flex: none; width: 16px; height: 16px; background: var(--accent);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon--copy { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(2.5 1)' d='M14 0H2C.9 0 0 .9 0 2v14h2V2h12zm3 4H6c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 16H6V6h11z'/%3E%3C/svg%3E"); }
.icon--up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(4 4)' d='m0 8 1.41 1.41L7 3.83V16h2V3.83l5.58 5.59L16 8 8 0z'/%3E%3C/svg%3E"); }
.footer__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; }
.footer__row--social { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.footer__social { display: flex; gap: 16px; }
.social-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.social-link svg { width: 12px; height: 12px; fill: currentColor; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .social-link:hover svg { transform: rotate(-45deg); } }
.footer__claim { color: var(--text-muted); text-align: right; }
.back-top { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.footer__meta { color: var(--text-muted); text-align: right; }
.footer__meta a { color: var(--accent); }

/* ---------- Privacy page ---------- */
.legal-page .site-header { position: relative; top: 0; }
.legal { padding: 80px 0 var(--section-space); }
.legal__head { grid-column: 1 / -1; margin-bottom: 72px; }
.legal__head p { margin-top: 16px; max-width: 720px; }
.legal-sec { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 40px 0; border-top: 1px solid var(--line); }
.legal-sec > span { grid-column: 1 / 2; }
.legal-sec h2 { grid-column: 2 / 5; font-family: var(--font-mono); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.13px; color: var(--accent); }
.legal-sec__body { grid-column: 6 / 13; color: var(--text-muted); display: grid; gap: 12px; }
.legal-sec__body ul { display: grid; gap: 8px; }
.legal-sec__body li { position: relative; padding-left: 34px; }
.legal-sec__body li::before {
  content: ""; position: absolute; left: 0; top: -2px; width: 24px; height: 24px; background: var(--accent);
  -webkit-mask: var(--arrow-icon) center / contain no-repeat; mask: var(--arrow-icon) center / contain no-repeat;
}
.legal-sec__body strong { color: var(--text); font-weight: 400; }
.legal-sec__body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.legal-page .header-cta { grid-column: 9 / 13; }

/* ---------- Privacy Policy pop-up ---------- */
/* The page dims, a window 60% of the viewport wide opens on top; the text scrolls inside it */
.modal {
  width: 60vw; max-width: calc(100vw - 32px); max-height: 86vh; margin: auto; padding: 0;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); overflow: hidden;
}
.modal::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[open] { animation: modalIn .45s var(--ease-out) both; }
.modal[open]::backdrop { animation: fadeIn .45s ease both; }
.modal.is-closing { animation: modalOut .3s ease both; }
.modal.is-closing::backdrop { animation: fadeIn .3s ease reverse both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(16px); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
html:has(.modal[open]) { overflow: hidden; }
.modal__scroll { max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; padding: 56px 56px 48px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.modal__close { position: absolute; top: 16px; right: 16px; z-index: 1; width: 40px; height: 40px; background: var(--bg); }
.modal__close span { position: absolute; left: 10px; right: 10px; top: 19px; height: 2px; background: var(--text); transition: background .3s; }
.modal__close span:first-child { transform: rotate(45deg); }
.modal__close span:last-child { transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .modal__close:hover span { background: var(--accent); } }
.modal .legal__head { margin-bottom: 40px; padding-right: 48px; }
.modal .legal__head .h-xl { font-size: 48px; line-height: 56px; }
.modal .legal-sec { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 2fr); column-gap: 24px; padding: 28px 0; }
.modal .legal-sec > span { grid-column: 1; }
.modal .legal-sec h2 { grid-column: 2; }
.modal .legal-sec__body { grid-column: 3; }
@media (max-width: 1199px) {
  .modal { width: 80vw; }
  .modal__scroll { padding: 32px 40px 40px; }
  .modal .legal__head { padding-right: 56px; }
  .modal .legal-sec { grid-template-columns: 40px minmax(0, 1fr); row-gap: 12px; }
  .modal .legal-sec__body { grid-column: 2; }
}
@media (max-width: 809px) {
  .modal { width: calc(100vw - 32px); max-height: calc(100svh - 32px); }
  .modal__scroll { max-height: calc(100svh - 32px); padding: 24px 20px 32px; }
  .modal .legal__head { padding-right: 48px; }
  .modal .legal__head .h-xl { font-size: 36px; line-height: 42px; }
  .modal .legal-sec { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .modal .legal-sec > span, .modal .legal-sec h2, .modal .legal-sec__body { grid-column: 1; }
}

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Appear animations (start states measured on the Framer original) ----------
   data-anim="…" sets the start state; main.js adds .is-in when the element enters the view
   (or right after load for [data-onload]). --d is a per-element delay (data-delay / data-stagger). */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.js [data-anim] {
  transition: opacity .9s var(--ease-out) var(--d, 0s), transform 1.2s var(--ease-out) var(--d, 0s), color .3s;
}
.js [data-anim="fade"]  { opacity: 0; }
.js [data-anim="up"]    { opacity: 0; transform: translateY(40px); }
.js [data-anim="up-lg"] { opacity: 0; transform: translateY(140px); }
.js [data-anim="hero"]  { opacity: 0; transform: translateY(45px); }
.js [data-anim="drop"]  { opacity: 0; transform: translateY(-53px); }
.js [data-anim="x30"]   { opacity: 0; transform: translateX(30px); }
.js [data-anim="persp"] { opacity: 0; transform: perspective(1200px) translateX(118px); }
.js [data-anim="slide"] { transform: perspective(1200px) translateX(360px) scale(1.1); transition-duration: .9s, 1.4s; }
.js [data-anim="rise"]  { transform: translateY(240px); transition-duration: .9s, 1.4s; }
.js [data-anim].is-in   { opacity: 1; transform: none; }

/* Split text: characters rise 15px and fade in one after another (headings, orange leads);
   "words-fade" reveals body copy word by word with opacity only. */
.js [data-split] .sw { display: inline-block; white-space: nowrap; }
.js [data-split="chars"] .sc { display: inline-block; opacity: 0; transform: translateY(15px);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i) * 14ms + var(--d, 0s)); }
.js [data-split="words-fade"] .sw { opacity: .001; transition: opacity .6s ease; transition-delay: calc(var(--i) * 30ms + var(--d, 0s)); }
.js [data-split].is-in .sc, .js [data-split].is-in .sw { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__mug { animation: none; }
  .js [data-anim], .js [data-split] .sc, .js [data-split] .sw { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   Tablet — 8 columns (810–1199px)
   ========================================================================== */
@media (max-width: 1199px) {
  .h-xl, .concept__statement { font-size: 48px; line-height: 56px; }
  .h-l, .tab { font-size: 32px; line-height: 44px; }

  .logo { grid-column: 1 / 4; }
  .nav { grid-column: 5 / 7; }
  .header-cta { grid-column: 7 / 9; }

  .hero__title { grid-column: 1 / 5; font-size: 56px; line-height: 60px; }
  .hero__sub { grid-column: 5 / 9; font-size: 30px; line-height: 40px; }
  .hero__mug { width: 340px; }
  .hero__tagline { grid-column: 1 / 4; }
  .hero__scroll { grid-column: 8 / 9; }

  .intro__label { grid-column: 1 / 3; }
  .intro__lead { grid-column: 3 / 7; }

  .sectors__count { display: none; }
  .sectors__tabs { grid-column: 1 / 5; }
  .sectors__content { grid-column: 5 / 9; }

  .concept__lead { grid-column: 1 / 4; }
  .concept__main { grid-column: 4 / 9; }

  .branding__media { grid-column: 1 / 5; }
  .branding__specs { grid-column: 5 / 9; row-gap: 96px; }
  .spec-block__num { grid-column: 1 / -1; justify-self: start; margin-bottom: 8px; }
  .spec-block__body { grid-column: 1 / -1; }

  .solution__num { display: none; }
  .solution__body { grid-column: 1 / 5; }
  .solution__media { grid-column: 5 / 9; }

  .step { grid-column: span 4; }
  .step__body { grid-column: 2 / 5; }

  .faq__title { grid-column: 3 / 9; }
  .faq__media { display: none; }
  .accordion { grid-column: 1 / -1; }

  .cta__lead { grid-column: 1 / 4; }
  .form { grid-column: 4 / 9; }
  .field--a, .field--b { grid-column: 1 / -1; }


  .legal-sec h2 { grid-column: 2 / 4; }
  .legal-sec__body { grid-column: 4 / 9; }
  .legal-page .header-cta { grid-column: 5 / 9; }
}

/* ==========================================================================
   Mobile — 4 columns (<810px)
   ========================================================================== */
@media (max-width: 809px) {
  .hero { min-height: clamp(600px, 100svh, 900px); }
  .hero__inner { align-content: end; row-gap: 16px; padding-top: 100px; padding-bottom: 32px; }
  .hero__title { grid-column: 1 / -1; font-size: 48px; line-height: 50px; letter-spacing: -1px; }
  .hero__sub { grid-column: 1 / -1; font-size: 24px; line-height: 32px; text-align: left; }
  .hero__mug { width: 280px; top: 34%; }
  .hero__tagline { grid-column: 1 / 4; padding-bottom: 32px; }
  .hero__scroll { grid-column: 4 / 5; margin-bottom: 32px; }

  .h-xl, .concept__statement { font-size: 36px; line-height: 42px; letter-spacing: -1px; }
  .h-l, .tab { font-size: 28px; line-height: 38px; letter-spacing: -.5px; }

  .intro__label, .intro__lead { grid-column: 1 / -1; }
  .intro__label { margin-bottom: 8px; }

  .sectors__tabs, .sectors__content { grid-column: 1 / -1; margin-top: 32px; }

  .concept__lead, .concept__main { grid-column: 1 / -1; }
  .concept__main { margin-top: 32px; }

  .branding__title { margin-bottom: 40px; }
  .branding__media { display: none; }
  .branding__specs { grid-column: 1 / -1; row-gap: 72px; }
  .spec-block__img { display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; margin-bottom: 24px; }
  .spec { grid-template-columns: 1fr; gap: 4px; }
  .spec dd + dt { margin-top: 16px; }

  .liquid { aspect-ratio: 16 / 10; --liquid-h: calc(100vw * 10 / 16); }

  .solution { padding-top: 40px; }
  .solution__media { grid-column: 1 / -1; grid-row: 1; margin-bottom: 24px; }
  .solution__body { grid-column: 1 / -1; }

  .workflow__title { text-align: left; margin-bottom: 40px; }
  .step { grid-column: 1 / -1; }
  .step__num { grid-column: 1 / -1; justify-self: start; margin-bottom: 8px; }
  .step__body { grid-column: 1 / -1; }

  .faq__title { grid-column: 1 / -1; }
  .faq__title { margin: 0 0 32px; }

  .cta { padding: 96px 0; }
  .cta__lead, .form { grid-column: 1 / -1; }
  .form { margin-top: 40px; row-gap: 32px; }

  .footer__row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__claim, .footer__meta { text-align: left; }

  .legal-sec > span, .legal-sec h2, .legal-sec__body { grid-column: 1 / -1; }
  .legal-sec h2 { margin: 8px 0; }
  .legal-page .header-cta { display: none; }
}

/* ==========================================================================
   Burger header — phones in portrait (<810px) and phones turned sideways (low + touch)
   ========================================================================== */
@media (max-width: 809px), (max-height: 560px) and (pointer: coarse) {
  section[id], footer[id] { scroll-margin-top: 72px; }

  /* Header: fixed bar; the menu drops down under it with a blurred backdrop (as on the Framer site) */
  .site-header {
    position: fixed;
    background: linear-gradient(180deg, #000 0%, rgba(10, 10, 10, 0) 100%);
    transition: background-color .3s, transform .45s var(--ease-out);
  }
  .site-header.is-hidden { transform: translateY(-110%); }
  .header__grid { padding-top: 20px; padding-bottom: 20px; align-items: center; row-gap: 0; }
  .logo { grid-column: 1 / 4; align-self: center; }   /* centred on the menu icon */
  .logo img { width: 150px; }
  .header-cta { display: none; }
  .nav-toggle { display: block; grid-column: -2 / -1; }
  .nav { display: none; }
  .menu-open .site-header {
    bottom: 0; overflow-y: auto;                /* the open menu covers the whole screen height */
    background: rgba(0, 0, 0, 0.64);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .menu-open .nav {
    grid-column: 1 / -1; grid-row: 2;
    display: flex; flex-direction: column; padding: 24px 0 10px;
  }
  .menu-open .nav a:not(.nav__cta) { padding: 10px 0; }   /* ~40px tall rows: easy to hit with a finger */
  .menu-open .nav .nav__cta { display: inline-flex; align-self: flex-end; margin-top: 16px; }
  .nav .roll { height: auto; }
  /* The burger menu shows the whole .roll (height: auto), so no rolling copy and no shift there */
  .nav .roll > span[data-roll]::after { display: none; }
  .nav a:hover .roll > span { top: 0; }

}
/* Not enough height for the menu in one column (phone in landscape): two columns */
@media (max-height: 560px) and (pointer: coarse) {
  .menu-open .nav { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: var(--gap); }
  .menu-open .nav .nav__cta { grid-column: 1 / -1; grid-row: 5; justify-self: end; }
}