/* S.K. Plastic Engineerings — Manufactt-inspired theme in SK maroon */
/* Self-hosted fonts (no third-party font requests) */
@font-face { font-family: 'Aileron'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/aileron-400.woff2) format('woff2'); }
@font-face { font-family: 'Aileron'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/aileron-600.woff2) format('woff2'); }
@font-face { font-family: 'Aileron'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/aileron-700.woff2) format('woff2'); }
@font-face { font-family: 'Fragment Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/fragment-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Fragment Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/fragment-mono-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; }

:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #151515;
  --ink-2: #151515;
  --ink-3: #151515;
  --line: rgba(21, 21, 21, .1);
  --dark: #191919;
  --dark-2: #222222;
  --line-dark: rgba(255, 255, 255, .12);
  --maroon: #5f1a23;
  --maroon-2: #7a2430;
  --maroon-deep: #3a0d13;
  --maroon-tint: #f4e9ea;
  --frost-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  --maroon-frost:
    var(--frost-noise),
    radial-gradient(60% 80% at 10% 0%, rgba(255,255,255,.14), transparent 70%),
    radial-gradient(55% 75% at 95% 100%, rgba(30,4,8,.55), transparent 70%),
    radial-gradient(45% 60% at 75% 0%, rgba(200,16,46,.32), transparent 70%),
    var(--maroon);
  --radius: 10px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --head: "Aileron", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --body: "Aileron", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-size: 16px; line-height: 1.5; color: var(--ink-2); background: var(--bg); }
/* thin dashed column guides, as on the reference: five verticals aligned to the content grid,
   painted on the page background so cards and dark sections sit on top of them */
body {
  --wrap-w: min(var(--max), 100vw - 2 * var(--gutter));
  --line-x0: calc(50vw - var(--wrap-w) / 2);
  --dash: repeating-linear-gradient(to bottom, rgba(21,21,21,.1) 0 5px, transparent 5px 11px);
  background-image: var(--dash), var(--dash), var(--dash), var(--dash), var(--dash);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position:
    var(--line-x0) 0,
    calc(var(--line-x0) + var(--wrap-w) * .25) 0,
    calc(var(--line-x0) + var(--wrap-w) * .5) 0,
    calc(var(--line-x0) + var(--wrap-w) * .75) 0,
    calc(var(--line-x0) + var(--wrap-w) - 1px) 0;
}
@media (max-width: 760px) { body { background-image: var(--dash), none, var(--dash), none, var(--dash); } }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }

/* type */
h1, h2, h3, h4 { margin: 0; font-family: var(--head); color: var(--ink); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.5rem); font-weight: 700; line-height: 1.04; }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.08; }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.2; }
h4 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
.hl { color: var(--maroon); }
.lead { font-size: 1.1rem; line-height: 1.65; color: var(--ink-2); max-width: 36em; }
.mono { font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.on-dark { background: var(--dark); color: rgba(255,255,255,.7); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .hl { color: #d9a3aa; }

/* layout */
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-tight { padding-block: clamp(40px, 6vw, 72px); }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 56px); }
.head-row h2 { max-width: 14em; margin-top: 18px; }
.head-center { text-align: center; max-width: 46rem; margin: 0 auto clamp(32px, 5vw, 56px); }
.head-center h2 { margin-top: 18px; }
.head-center p { margin: 18px auto 0; }

/* pill label */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--maroon); }
.on-dark .pill { background: rgba(255,255,255,.06); border-color: var(--line-dark); color: rgba(255,255,255,.8); }
.on-dark .pill::before { background: #d9a3aa; }

/* buttons: label + inset arrow square */
.btn { display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 18px; border-radius: 10px; border: 0; background: var(--maroon); color: #fff; font-weight: 500; font-size: .95rem; text-decoration: none; cursor: pointer; line-height: 1.2; transition: background .2s; box-shadow: 0 3px 0 var(--maroon-deep); }
.btn .ico { width: 34px; height: 34px; border-radius: 6px; background: var(--maroon-deep); display: grid; place-items: center; transition: transform .25s; }
.btn .ico svg { width: 16px; height: 16px; }
.btn:hover { background: var(--maroon-2); }
.btn:hover .ico { transform: translateX(2px); }
.btn-ink { background: var(--ink); box-shadow: 0 3px 0 #000; }
.btn-ink .ico { background: var(--maroon); }
.btn-ink:hover { background: #2a2a2a; }
.btn-light { background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.btn-light .ico { background: var(--maroon); color: #fff; }
.btn-light:hover { background: #eee; }
.btn-plain { padding: 12px 18px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.on-dark .link { color: #fff; }

/* header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: #fff;
  background: var(--frost-noise), linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  background-blend-mode: overlay, normal;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 30px -20px rgba(0,0,0,.5);
  transition: background-color .3s, color .3s, border-color .3s;
}
.site-header .brand, .site-header .nav-links a { color: inherit; }
.site-header .brand small { color: inherit; opacity: .8; }
.site-header .nav-toggle { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.site-header .nav-toggle span { background: currentColor; }
/* past the hero (or menu open): light frosted plastic, black text */
.site-header.solid { color: var(--ink); background-color: rgba(255,255,255,.78); border-bottom-color: var(--line); }
.site-header.solid .nav-toggle { background: var(--paper); border-color: var(--line); }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--head); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-size: 1.05rem; line-height: 1.1; }
.brand img { width: 40px; height: 40px; }
.brand small { display: block; font-family: var(--body); font-weight: 400; font-size: .82rem; color: var(--ink-3); letter-spacing: 0; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: .95rem; font-weight: 500; white-space: nowrap; }
/* desktop menu: one rounded tray, current page as a solid pill */
@media (min-width: 1081px) {
  .nav-links { gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); transition: background .3s, border-color .3s; }
  .nav-links a { padding: 8px 16px; border-radius: 999px; opacity: .85; transition: background .2s, color .2s, opacity .2s, box-shadow .2s; }
  .nav-links a:hover { opacity: 1; background: rgba(255,255,255,.14); }
  .site-header .nav-links a[aria-current="page"] { opacity: 1; background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px -6px rgba(0,0,0,.25); }
  .site-header.solid .nav-links { background: var(--surface); border-color: var(--line); }
  .site-header.solid .nav-links a:hover { background: rgba(255,255,255,.8); }
}
.nav-cta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 4px auto; transition: transform .2s, opacity .2s; }
@media (max-width: 1080px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav > nav { position: absolute; left: 0; right: 0; top: 76px; }
  .nav-links { display: none; flex-direction: column; gap: 0; background: rgba(255,255,255,.96); color: var(--ink); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px; }
  .nav-links a { padding: 14px 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); width: 100%; }
  .site-header.open .nav-links { display: flex; }
  .nav-toggle { display: block; }
  .site-header.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 560px) { .nav-cta .btn { display: none; } .brand small { display: none; } }

/* hero: full-bleed photo, header floats over it */
.hero { --fade-h: clamp(180px, 24vw, 340px); position: relative; isolation: isolate; overflow: hidden; min-height: min(78svh, 760px); display: flex; flex-direction: column; justify-content: flex-end; padding: 140px 0 calc(var(--fade-h) * .5); background: var(--maroon-deep); color: #fff; }
.hero-full { min-height: max(620px, min(100svh, 980px)); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.12) 24%, rgba(10,10,10,.24) 44%, rgba(15,15,15,.6) 62%, rgba(15,15,15,.42) 72%, rgba(15,15,15,.16) 86%, rgba(15,15,15,0) 100%),
    linear-gradient(90deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 60%); }
.hero h1, .hero .lead, .hero .mono { color: #fff; }
.hero .lead { color: rgba(255,255,255,.92); }
.hero .pill { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero .pill::before { background: #fff; }
.hero-split { position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.hero-split h1 { margin-top: 20px; max-width: 11em; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero-side { display: grid; gap: 18px; justify-items: start; padding-bottom: 8px; }
.hero-side p { max-width: 30em; }
/* bottom of every hero: progressive frosted glass.
   Five stacked layers, each blurring more than the one above and masked to its own slice,
   so the blur ramps up with no visible edge. The milky tint follows an eased curve
   (not linear), which avoids the grey "mud" band where the dark photo meets the light page. */
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fade-h); z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.013) 10%, rgba(255,255,255,.05) 20%, rgba(255,255,255,.11) 30%,
    rgba(255,255,255,.2) 40%, rgba(255,255,255,.31) 50%, rgba(255,255,255,.45) 60%, rgba(255,255,255,.6) 70%,
    rgba(255,255,255,.76) 80%, rgba(255,255,255,.9) 90%, var(--bg) 100%); }
.hero-fade i { position: absolute; inset: 0; }
.hero-fade i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 60%); mask: linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 60%); }
.hero-fade i:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask: linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 80%); mask: linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 80%); }
.hero-fade i:nth-child(3) { -webkit-backdrop-filter: blur(7px) saturate(130%); backdrop-filter: blur(7px) saturate(130%); -webkit-mask: linear-gradient(to bottom, transparent 40%, #000 60%, #000 80%, transparent 100%); mask: linear-gradient(to bottom, transparent 40%, #000 60%, #000 80%, transparent 100%); }
.hero-fade i:nth-child(4) { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); -webkit-mask: linear-gradient(to bottom, transparent 60%, #000 80%); mask: linear-gradient(to bottom, transparent 60%, #000 80%); }
.hero-fade i:nth-child(5) { -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); -webkit-mask: linear-gradient(to bottom, transparent 80%, #000 100%); mask: linear-gradient(to bottom, transparent 80%, #000 100%); }
/* frosted grain, fading in with the glass */
.hero-fade::after { content: ""; position: absolute; inset: 0; background: var(--frost-noise); mix-blend-mode: overlay; opacity: .9;
  -webkit-mask: linear-gradient(to bottom, transparent 15%, #000 70%, transparent 100%); mask: linear-gradient(to bottom, transparent 15%, #000 70%, transparent 100%); }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }

/* full-bleed photo band with maroon fade */
.band-photo { position: relative; min-height: clamp(420px, 62vw, 760px); overflow: hidden; color: #fff; display: grid; align-items: end; isolation: isolate; background: var(--maroon-deep); }
.band-photo.short { min-height: clamp(260px, 34vw, 440px); }
.band-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21,21,21,.2) 0%, rgba(21,21,21,.45) 45%, rgba(95,26,35,.95) 100%); }
.band-inner { padding: clamp(32px, 5vw, 64px) var(--gutter); display: grid; gap: 28px; justify-items: center; text-align: center; }
.badge-card { display: grid; justify-items: center; gap: 10px; padding: 18px 26px; border-radius: var(--radius); background: rgba(21,21,21,.38); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.badge-card img { width: 64px; height: 64px; background: #fff; border-radius: 50%; padding: 3px; }
.badge-card b { font-family: var(--head); font-size: 1.15rem; font-weight: 600; }
.badge-card span { font-size: .875rem; color: rgba(255,255,255,.85); }
.band-quote { font-family: var(--head); font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 500; line-height: 1.45; max-width: 30em; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.band-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: 100%; font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.88); }

/* who we are */
.intro { display: grid; grid-template-columns: 1fr 3fr; gap: 32px; }
.intro h2 { max-width: 18em; }
.intro .lead { margin-top: 24px; max-width: 38em; }
.intro .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } }
.circles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: clamp(48px, 7vw, 88px); }
.circle { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); display: grid; place-content: center; text-align: center; gap: 6px; padding: 24px; overflow: hidden; }
.circle .mono { color: var(--maroon); }
.circle b { font-family: var(--head); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -0.03em; }
.circle span { font-size: .88rem; max-width: 13em; margin-inline: auto; }
.circle.photo { padding: 0; display: block; }
.circle.photo img { width: 100%; height: 100%; object-fit: cover; }
.circle.solid { background: var(--maroon); border-color: var(--maroon); color: rgba(255,255,255,.8); }
.circle.solid b { color: #fff; }
.circle.solid .mono { color: #e7b9bf; }
@media (max-width: 860px) { .circles { grid-template-columns: repeat(2, 1fr); } }

/* capability accordion */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px 1fr 44px; gap: 24px; align-items: center; padding: 24px 0; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ic { width: 48px; height: 48px; display: grid; place-items: center; color: var(--maroon); }
.acc summary .ic svg { width: 36px; height: 36px; }
.acc summary h3 { transition: color .2s; }
.acc summary:hover h3 { color: var(--maroon); }
.acc .go { width: 44px; height: 44px; border-radius: 10px; background: var(--maroon); color: #fff; display: grid; place-items: center; transition: transform .25s, background .2s; box-shadow: 0 3px 0 var(--maroon-deep); }
.acc .go svg { width: 18px; height: 18px; }
.acc details[open] .go { transform: rotate(90deg); }
.acc .body { display: grid; grid-template-columns: 48px 1.1fr 1fr; gap: 24px; padding: 0 0 32px; }
.acc .body img { grid-column: 2; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.acc .body .feat { grid-column: 3; }
.feat small { display: block; font-size: .85rem; color: var(--ink-3); margin-bottom: 14px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: baseline; color: var(--ink); }
.checks li::before { content: ""; flex: none; width: 12px; height: 7px; border-left: 1.8px solid var(--maroon); border-bottom: 1.8px solid var(--maroon); transform: rotate(-45deg) translateY(-3px); }
.on-dark .checks li { color: #fff; }
.on-dark .checks li::before { border-color: #d9a3aa; }
.feat p { margin-bottom: 16px; }
@media (max-width: 760px) {
  .acc summary { grid-template-columns: 36px 1fr 40px; gap: 14px; }
  .acc summary .ic svg { width: 28px; height: 28px; }
  .acc .body { grid-template-columns: 1fr; }
  .acc .body img, .acc .body .feat { grid-column: 1; }
}

/* CTA banner */
.cta { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--maroon); color: rgba(255,255,255,.8); padding: clamp(32px, 5vw, 56px); display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; isolation: isolate; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0); background-size: 18px 18px; -webkit-mask: linear-gradient(90deg, transparent 30%, #000); mask: linear-gradient(90deg, transparent 30%, #000); }
.cta h3 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 14em; }
.cta p { margin-top: 10px; max-width: 32em; }

/* dark product section */
.big-stat { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin: 24px 0 clamp(32px, 5vw, 56px); }
.big-stat b { font-family: var(--head); font-size: clamp(3.5rem, 9vw, 7.5rem); font-weight: 600; line-height: .95; color: #fff; letter-spacing: -0.04em; }
.big-stat b span { color: #d9a3aa; }
.big-stat p { max-width: 24em; }
.pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .pcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pcards { grid-template-columns: 1fr; } }
.pcard { background: var(--dark-2); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 14px 14px 20px; display: flex; flex-direction: column; text-decoration: none; transition: border-color .2s; }
.pcard:hover { border-color: rgba(217,163,170,.5); }
.pcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.pcard h4 { color: #fff; margin: 18px 6px 6px; font-size: 1.25rem; }
.pcard > p { margin: 0 6px 12px; font-size: .95rem; color: rgba(255,255,255,.78); }
.pcard dl { margin: auto 6px 0; }
.pcard dl div { padding: 10px 0; border-top: 1px solid var(--line-dark); }
.pcard dt { font-size: .84rem; color: rgba(255,255,255,.66); }
.pcard dd { margin: 2px 0 0; color: #fff; font-weight: 500; font-size: .95rem; }
.range-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 72px); padding-top: 32px; border-top: 1px solid var(--line-dark); }
.range-foot h3 { max-width: 16em; }
.range-foot .actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

/* tabs */
.tabs { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.tab-list { display: grid; border-left: 2px solid var(--line); }
.tab-list button { text-align: left; padding: 12px 0 12px 22px; margin-left: -2px; border: 0; border-left: 2px solid transparent; background: none; cursor: pointer; font-family: var(--head); font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 600; color: var(--ink-3); letter-spacing: -0.02em; transition: color .2s, border-color .2s; }
.tab-list button:hover { color: var(--ink); }
.tab-list button[aria-selected="true"] { color: var(--ink); border-left-color: var(--maroon); }
.tab-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.tab-panel[hidden] { display: none; }
.tab-panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.tab-panel .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--maroon-tint); color: var(--maroon); display: grid; place-items: center; margin-bottom: 18px; }
.tab-panel .ic svg { width: 22px; height: 22px; }
.tab-panel h3 { margin-bottom: 10px; }
.tab-panel .checks { margin-top: 20px; }
@media (max-width: 900px) {
  .tabs { grid-template-columns: 1fr; }
  .tab-list { grid-auto-flow: column; overflow-x: auto; border-left: 0; border-bottom: 2px solid var(--line); scrollbar-width: none; }
  .tab-list button { padding: 10px 16px; margin: 0 0 -2px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; font-size: 1rem; }
  .tab-list button[aria-selected="true"] { border-bottom-color: var(--maroon); }
  .tab-panel { grid-template-columns: 1fr; }
}

/* why us over photo */
.why { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(64px, 9vw, 120px); background: var(--dark); }
.why > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.why::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(25,25,25,.92) 0%, rgba(25,25,25,.6) 50%, rgba(25,25,25,.15) 100%); }
.why-card { max-width: 460px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); background: rgba(25,25,25,.72); border: 1px solid var(--line-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,255,255,.75); }
.why-card h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 18px 0 24px; }
.why-card .btn { margin-top: 28px; }

/* trust: testimonial + stats */
.trust { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
.trust > div { border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.trust .quote p { font-family: var(--head); font-size: 1.2rem; font-weight: 500; line-height: 1.5; color: var(--ink); }
.trust .quote small { margin-top: auto; padding-top: 24px; color: var(--ink-3); font-size: .85rem; }
.trust .stat .mono { color: var(--maroon); }
.trust .stat b { font-family: var(--head); font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -0.04em; margin-top: auto; padding-top: 40px; }
.trust .stat span { margin-top: 10px; }
.trust .stat.solid { background: var(--maroon); border-color: var(--maroon); color: rgba(255,255,255,.8); }
.trust .stat.solid b { color: #fff; }
.trust .stat.solid .mono { color: #e7b9bf; }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr; } }

/* numbered step cards */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.step .mono { color: var(--maroon); }
.step h4 { margin: 0; font-size: 1.25rem; }
.step p { margin: 0; flex: 1; }
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.step .ic { width: 44px; height: 44px; border-radius: 10px; background: #fff; color: var(--maroon); display: grid; place-items: center; }
.step .ic svg { width: 22px; height: 22px; }
.step-out { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 19.5px; font-weight: 600; }
.step-out svg { flex: none; width: 18px; height: 18px; color: var(--maroon); }
/* arrow in the gap: the steps read as one flow */
.step:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 32px; right: -27px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f1a23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } .step:nth-child(2n)::after { display: none; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } .step:nth-child(2n)::after { display: block; } .step:not(:last-child)::after { top: auto; right: auto; bottom: -27px; left: 50%; margin-left: -15px; transform: rotate(90deg); } }
.on-dark .step { background: var(--dark-2); border-color: var(--line-dark); }

/* generic cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--maroon-tint); color: var(--maroon); display: grid; place-items: center; margin-bottom: 28px; }
.card .ic svg { width: 22px; height: 22px; }
.card h4 { margin-bottom: 8px; }
.card.solid { background: var(--maroon); border-color: var(--maroon); color: rgba(255,255,255,.8); }
.card.solid h4 { color: #fff; }
.card.solid .ic { background: rgba(255,255,255,.12); color: #fff; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.split h2 { margin: 18px 0 20px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.strip { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 16px; }
.strip img { width: 100%; height: clamp(220px, 28vw, 380px); object-fit: cover; border-radius: var(--radius); }
@media (max-width: 760px) { .strip { grid-template-columns: 1fr; } }
.lineart { stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* spec table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec th, .spec td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line-dark); white-space: nowrap; }
.spec th { font-size: .82rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.68); }
.spec td { color: #fff; }
.spec td:first-child { color: #d9a3aa; font-weight: 600; }

/* products page (catalogue rendered by js/products.js) */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.filters button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: #fff; }
/* filter bar stays under the site header so the shopper always knows which family they are in */
.filters { position: sticky; top: 77px; z-index: 20; margin: 0 calc(50% - 50vw) 48px; padding: 14px calc(50vw - 50%); background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.filters button { display: inline-flex; align-items: center; gap: 8px; }
.f-count { font-size: 12px; line-height: 18px; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface); color: rgba(21,21,21,.65); text-align: center; }
.filters button[aria-pressed="true"] .f-count { background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 760px) { .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; top: 72px; } .filters button { flex: none; } }

/* family header: dark rule, name with count on the left, blurb on the right */
.product-group { margin-bottom: clamp(64px, 9vw, 112px); scroll-margin-top: 160px; }
.pg-head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px clamp(24px, 4vw, 64px); align-items: end; padding-top: 24px; margin-bottom: 28px; border-top: 2px solid var(--ink); }
.pg-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.pg-count { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; color: rgba(21,21,21,.6); }
.pg-head p { font-size: 1.05rem; max-width: 34em; justify-self: end; }
@media (max-width: 760px) { .pg-head { grid-template-columns: 1fr; } .pg-head p { justify-self: start; } }

/* grid rows share one set of tracks, so names, descriptions, specs and quote bars line up across a row */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
@media (max-width: 960px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .product-grid { grid-template-columns: 1fr; } }

/* product card: edge-to-edge photo, name and two key facts, quote action as the card footer */
.product { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.product:hover { border-color: rgba(21,21,21,.18); box-shadow: 0 24px 48px -32px rgba(0,0,0,.28); }
.p-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; transition: background .3s; }
.p-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s, transform .6s; }
/* white-background shots sit straight on the grey */
.p-media img.blend { mix-blend-mode: multiply; }
.product:hover .p-media img { transform: scale(1.03); }
.p-badge { position: absolute; left: 14px; bottom: 14px; z-index: 1; font-size: 12px; line-height: 18px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: opacity .2s; }
.p-badge.on { background: var(--maroon); color: #fff; }
.p-info { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.1); display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background .2s, color .2s, transform .25s; }
.p-info span { font-family: var(--head); font-size: 14px; font-weight: 600; line-height: 1; }
.p-info:hover { color: var(--maroon); }
.p-info[aria-pressed="true"] { transform: rotate(45deg); background: var(--maroon); color: #fff; }
.p-info[aria-pressed="true"] span { font-size: 0; }
.p-info[aria-pressed="true"] span::before { content: "+"; font-size: 20px; font-weight: 400; }
.p-specs { position: absolute; inset: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 18px 16px; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.p-specs div { display: grid; justify-items: center; text-align: center; gap: 2px; }
.p-specs div:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.p-specs svg { width: 28px; height: 28px; color: var(--maroon); margin-bottom: 6px; }
.p-specs dt { font-size: 13px; line-height: 19.5px; font-weight: 600; color: var(--ink); }
.p-specs dd { margin: 0; font-size: 13px; line-height: 19.5px; color: rgba(21,21,21,.7); }
/* spec face: the photo area switches to the maroon tint so the mode change is obvious */
.show-specs .p-media { background: var(--maroon-tint); }
.show-specs .p-media img, .show-specs .p-badge { opacity: 0; }
.show-specs .p-specs { opacity: 1; visibility: visible; }
.product > h3 { margin: 0; padding: 20px 20px 0; }
.product > .desc { padding: 6px 20px 0; color: rgba(21,21,21,.7); }
.p-key { margin: 0; padding: 18px 20px 20px; align-self: end; }
.p-key div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 19.5px; }
.p-key dt { color: rgba(21,21,21,.6); }
.p-key dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); }
.p-quote { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 8px 8px 20px; border: 0; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); cursor: pointer; text-align: left; transition: background .2s, color .2s; }
.p-quote .ico { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; background: var(--maroon); color: #fff; }
.p-quote .ico svg { width: 16px; height: 16px; }
.p-quote:hover, .p-quote:focus-visible { background: var(--maroon); color: #fff; }
.p-quote:hover .ico, .p-quote:focus-visible .ico { background: rgba(255,255,255,.16); }
.p-quote:focus-visible { outline: 2px solid var(--maroon); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .product, .p-media, .p-media img, .p-specs, .p-info, .p-quote { transition: none; } .product:hover .p-media img { transform: none; } }
.btn-sm { padding: 10px 16px; box-shadow: 0 3px 0 var(--maroon-deep); }

/* dialog */
dialog { border: 0; border-radius: 10px; padding: 0; width: min(600px, 100% - 32px); max-height: calc(100vh - 32px); background: var(--bg); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(21,21,21,.55); }
.close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 1.25rem; line-height: 1; flex: none; }
.close:hover { background: var(--maroon-tint); }

/* ===== Innovate: co-development intro, scroll story, capability cards ===== */
/* intro: photo bleeds off the left edge; the claim and its three reasons sit on ruled rows */
.codev2 { overflow: hidden; }
.codev2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.codev2-photo { position: relative; margin: 0 0 0 calc(50% - 50vw); height: clamp(420px, 46vw, 640px); border-radius: 0 10px 10px 0; overflow: hidden; background: var(--surface); }
.codev2-photo img { width: 100%; height: 100%; object-fit: cover; }
.codev2-kicker { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--maroon); }
.codev2-copy h2 { margin-top: 14px; max-width: 13em; }
.codev2-points { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.codev2-points li { display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.codev2-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--maroon-tint); color: var(--maroon); }
.codev2-ic svg { width: 22px; height: 22px; }
.codev2-points p { font-size: 1.125rem; line-height: 1.556; color: var(--ink); max-width: 30em; }
@media (max-width: 860px) {
  .codev2-grid { grid-template-columns: 1fr; }
  .codev2-photo { margin: 0 calc(-1 * var(--gutter)); height: clamp(260px, 62vw, 420px); border-radius: 0; }
}

/* five steps as a scroll story: the stage holds still while the steps scroll past it */
.lab { background: var(--maroon-frost); color: rgba(255,255,255,.75); }
.lab h2, .lab h4 { color: #fff; }
.lab .hl { color: #f0c9ce; }
.lab .pill { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
.lab .pill::before { background: #fff; }
.lab-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.lab-stage { position: sticky; top: 100px; height: min(calc(100svh - 140px), 720px); }
.lab-photo { position: absolute; inset: 0; margin: 0; border-radius: 10px; overflow: hidden; background: #2a090e; }
.lab-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease-out), transform 1.4s var(--ease-out); }
.lab-photo img.on { opacity: 1; transform: none; }
.lab-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,4,8,.85), rgba(30,4,8,.35) 40%, transparent 65%); }
.lab-num { position: absolute; left: clamp(20px, 3vw, 36px); bottom: 92px; z-index: 1; font-family: var(--head); font-weight: 700; font-size: clamp(5rem, 11vw, 9.5rem); line-height: .8; letter-spacing: -0.05em; color: #fff; font-variant-numeric: tabular-nums; }
.lab-bar { position: absolute; left: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); bottom: 22px; z-index: 1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lab-bar li { display: grid; gap: 10px; align-content: start; }
.lab-bar i { height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); transition: background .4s; }
.lab-bar span { font-size: 13px; line-height: 17px; font-weight: 500; color: rgba(255,255,255,.5); transition: color .4s; }
.lab-bar li.done i { background: rgba(255,255,255,.6); }
.lab-bar li.done span { color: rgba(255,255,255,.7); }
.lab-bar li.on i { background: #fff; }
.lab-bar li.on span { color: #fff; }
.lab-steps { display: grid; }
.lab-step { min-height: min(46svh, 420px); display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px 0; border-top: 1px solid rgba(255,255,255,.14); opacity: .32; transition: opacity .5s; }
.lab-step:last-child { min-height: min(calc(100svh - 140px), 720px); justify-content: flex-start; padding-top: clamp(80px, 18svh, 200px); }
.lab-step.is-on { opacity: 1; }
.lab-step .mono { font-family: var(--head); font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: none; font-weight: 600; color: #f0c9ce; }
.lab-step h4 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; }
.lab-step p { max-width: 26em; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.8); }
.lab-tags { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 30em; }
.lab-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: 13px; line-height: 18px; color: #fff; }
.lab-tags svg { width: 14px; height: 14px; fill: none; stroke: #f0c9ce; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lab-step-img { display: none; }
@media (max-width: 900px) {
  .lab-grid { grid-template-columns: 1fr; }
  .lab-stage { display: none; }
  .lab-step, .lab-step:last-child { min-height: 0; opacity: 1; padding: 28px 0; justify-content: flex-start; }
  .lab-step-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .lab-photo img, .lab-step, .lab-bar i { transition: none; } .lab-photo img { transform: none; } }

/* "Have a part in mind?": quiet grey panel, neutral ink, the exchange as two plain lists */
.brief { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: var(--radius); background: var(--surface); }
.brief-copy { display: grid; justify-items: start; gap: 16px; }
.brief-copy h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--ink); }
.brief-copy p { max-width: 30em; font-size: 1.05rem; line-height: 1.6; color: rgba(21,21,21,.7); }
.brief .brief-btn { margin-top: 12px; background: var(--ink); color: #fff; }
.brief .brief-btn .ico { background: rgba(255,255,255,.14); }
.brief .brief-btn:hover { background: #000; }
.brief .brief-btn:focus-visible { outline-color: var(--ink); }
.brief-io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 clamp(16px, 2.5vw, 32px); align-items: start; }
.brief-io b { display: block; padding-bottom: 14px; font-size: 13px; line-height: 19.5px; font-weight: 500; color: rgba(21,21,21,.55); }
.brief-io ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(21,21,21,.85); }
.brief-io li { padding: 16px 0; border-bottom: 1px solid rgba(21,21,21,.1); font-family: var(--head); font-size: 1.125rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.brief-swap { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 34px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.25); }
.brief-swap svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .brief { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .brief-io { grid-template-columns: 1fr; } .brief-swap { justify-self: center; margin: 20px 0; transform: rotate(90deg); } }

.cap-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cap-photo { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.cap-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.cap-card:hover .cap-photo img { transform: scale(1.04); }
.cap-body { position: relative; padding: 0 24px 26px; }
.cap-body .ic { width: 56px; height: 56px; margin: -28px 0 18px; border: 4px solid #fff; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .cap-photo img { transition: none; } .cap-card:hover .cap-photo img { transform: none; } }

/* quote dialog: product summary beside the order form, styled like the product cards */
.qd[open] { display: grid; grid-template-columns: 320px 1fr; width: min(940px, 100% - 32px); height: min(680px, 100svh - 32px); max-height: none; border-radius: 10px; overflow: hidden; background: #fff; animation: qd-in .28s cubic-bezier(.2,.8,.2,1); }
.qd::backdrop { background: rgba(21,21,21,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes qd-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.qd-product { display: flex; flex-direction: column; gap: 18px; padding: 16px 16px 20px; background: var(--surface); border-right: 1px solid var(--line); }
.qd-photo { margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #fff; }
.qd-photo img { width: 100%; height: 100%; object-fit: cover; }
.qd-photo img.blend { mix-blend-mode: multiply; }
.qd-summary { padding: 0 4px; }
.qd-family { display: block; font-size: 13px; line-height: 19.5px; color: rgba(21,21,21,.6); }
.qd-name { display: block; margin-top: 2px; font-family: var(--head); font-size: 1.25rem; line-height: 1.18; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); }
.qd-key { padding: 0; margin-top: 14px; }
.qd-key div:last-child { border-bottom: 1px solid var(--line); }
.qd-promise { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: #fff; font-size: 13px; line-height: 19.5px; color: var(--ink); }
.qd-promise svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--maroon); }
.qd-main { display: flex; flex-direction: column; min-height: 0; }
.qd-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.qd-head .close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); }
.qd-head .close svg { width: 18px; height: 18px; }
.qd-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }
.qd-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 24px; overscroll-behavior: contain; }
.qd-group { margin: 0; padding: 18px 0 0; border: 0; display: grid; gap: 16px; }
.qd-group + .qd-group { margin-top: 22px; border-top: 1px solid var(--line); }
.qd-group legend { float: left; width: 100%; padding: 0; margin-bottom: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--maroon); }
.qd-group legend + * { clear: both; }
.field .label { display: block; font-size: 13px; line-height: 19.5px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.opt { font-weight: 400; color: rgba(21,21,21,.5); }
.qd .field textarea { min-height: 88px; }
.qd-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.qd-size { position: relative; cursor: pointer; }
.qd-size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qd-size span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; line-height: 19.5px; color: var(--ink); transition: background .15s, border-color .15s, color .15s; }
.qd-size:hover span { border-color: rgba(21,21,21,.3); }
.qd-size input:checked + span { background: var(--maroon-tint); border-color: var(--maroon); color: var(--maroon); font-weight: 600; }
.qd-size input:focus-visible + span { outline: 2px solid var(--maroon); outline-offset: 2px; }
.field-err { margin-top: 6px; font-size: 13px; line-height: 19.5px; color: #b3261e; }
.field [aria-invalid="true"] { border-color: #b3261e; }
.qd-send { flex: none; padding: 10px 10px 10px 24px; background: var(--maroon); color: #fff; border-top-color: var(--maroon); }
.qd-send .ico { background: rgba(255,255,255,.16); }
.qd-send:hover, .qd-send:focus-visible { background: var(--maroon-2); }
.qd-send:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.qd-send .ico { width: 40px; height: 40px; }
.qd .qd-done { flex: 1; display: none; padding: 40px 32px; background: #fff; border-radius: 0; text-align: center; }
.qd .form.sent .qd-done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.qd-done:focus { outline: none; }
.qd-tick { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--maroon-tint); color: var(--maroon); }
.qd-tick svg { width: 26px; height: 26px; }
.qd .qd-done b { font-family: var(--head); font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: 0; }
.qd-done p { max-width: 26em; font-size: 14px; line-height: 20px; color: rgba(21,21,21,.7); }
.qd-done .btn { margin-top: 12px; }
@media (max-width: 760px) {
  .qd[open] { grid-template-columns: 1fr; grid-template-rows: auto 1fr; width: 100%; max-width: 100%; height: min(100svh - 24px, 760px); margin: auto 0 0; border-radius: 10px 10px 0 0; }
  .qd-product { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .qd-photo { aspect-ratio: 1; }
  .qd-summary { padding: 0; }
  .qd-key, .qd-promise { display: none; }
  .qd-name { font-size: 1rem; }
  .qd-head { padding: 14px 16px 12px; }
  .qd-scroll { padding: 4px 16px 20px; }
}
@media (prefers-reduced-motion: reduce) { .qd[open] { animation: none; } .qd-size span { transition: none; } }

/* forms */
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .85rem; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.field .hint { font-size: .875rem; color: var(--ink-3); margin-top: 6px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 3px var(--maroon-tint); }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: #b3261e; }
.field textarea { min-height: 130px; resize: vertical; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.form-foot small { color: var(--ink-3); font-size: .875rem; }
.form-success { background: var(--maroon-tint); border-radius: 10px; padding: 18px 20px; color: var(--ink); display: none; }
.form-success b { display: block; margin-bottom: 4px; color: var(--maroon); }
.form.sent .form-success { display: block; }
.form.sent > :not(.form-success) { display: none; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.info { display: grid; gap: 12px; }
.info > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.info small { display: block; font-size: .875rem; color: var(--ink-3); margin-bottom: 4px; }
.info a, .info b { font-family: var(--head); font-weight: 600; font-size: 1.1rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.info a:hover { color: var(--maroon); }
.map { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 16 / 10; display: grid; place-items: center; color: var(--ink-3); }
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); }
.form-card h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 16px 0 8px; }
.form-card > p { margin-bottom: 24px; }

/* frosted maroon surface shared by every maroon container (matches the footer) */
.cta, .circle.solid, .card.solid, .trust .stat.solid {
  background: var(--maroon-frost);
  background-blend-mode: overlay, normal, normal, normal;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* footer: brand maroon with frosted finish */
.site-footer { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 7vw, 88px) 0 28px; background: var(--maroon); color: rgba(255,255,255,.72); font-size: .95rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.site-footer::before { content: ""; position: absolute; inset: -20%; z-index: -2; filter: blur(40px); background: radial-gradient(34% 50% at 14% 20%, rgba(255,255,255,.14), transparent 70%), radial-gradient(30% 44% at 86% 85%, rgba(30,4,8,.55), transparent 70%), radial-gradient(26% 40% at 68% 8%, rgba(200,16,46,.35), transparent 70%); }
.site-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.site-footer .brand { color: #fff; }
.site-footer .brand img { background: #fff; border-radius: 50%; padding: 2px; }
.site-footer .brand small { color: rgba(255,255,255,.75); }
.site-footer h4 { font-family: var(--body); font-size: .82rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer ul a:hover, .foot-bottom a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); font-size: .85rem; }


/* ===== Typography: Finseo scale (measured at 1440px), Genesis pairing: Aileron + Fragment Mono =====
   display 57.6/60 · h2 40/46 · h2 small 30/36 · card title 20/23.6 · subtitle 18/28
   stat 46/46 · lead 18/28 · body 16/24 · small 14/20 · caption 13/19.5 · label 11/16.5 mono caps */
h1, h2, h3, h4 { font-weight: 600; }
h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; line-height: 1.18; letter-spacing: -0.02em; }
h4 { font-size: 1.125rem; line-height: 1.556; letter-spacing: -0.02em; }
.lead { font-size: 1.125rem; line-height: 1.556; }
.intro .lead, .hero-side p { font-size: 1.125rem; line-height: 1.556; }

/* small uppercase labels: mono, 11px, tracked */
.mono, .feat small, .info small, .pcard dt, .spec th, .site-footer h4, .band-meta {
  font-family: var(--mono); font-size: 11px; line-height: 1.5; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
}
.pill { font-size: 13px; line-height: 1.5; }

/* nav, buttons, brand */
.nav-links a { font-size: 14px; line-height: 20px; font-weight: 500; }
.btn { font-size: 14px; line-height: 20px; font-weight: 500; }
.brand { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; }
.brand small { font-size: 12px; letter-spacing: 0; }

/* section-level 30px titles */
.cta h3, .range-foot h3, .why-card h2, .form-card h2, .product-group > h2, .qd-head h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600;
}
/* 20px card titles */
.acc summary h3, .tab-panel h3, .card h4, .step h4, .product h3 { font-size: 1.25rem; line-height: 1.18; letter-spacing: -0.02em; font-weight: 600; }
.pcard h4 { font-size: 1.125rem; line-height: 1.556; font-weight: 600; }
.tab-list button { font-family: var(--head); font-size: 1.125rem; line-height: 1.556; font-weight: 500; letter-spacing: -0.02em; }

/* stats: 46px, weight 600, tight */
.circle b, .trust .stat b, .big-stat b { font-size: clamp(2.25rem, 3.2vw, 2.875rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.big-stat b { font-size: clamp(2.5rem, 3.2vw, 2.875rem); }

/* body copy inside cards: 14/20; captions 13/19.5 */
.card p, .step p, .product .desc, .pcard > p, .acc .feat p, .tab-panel p, .circle span, .trust .stat span, .cta p, .big-stat p { font-size: 14px; line-height: 20px; }
.checks li { font-size: 14px; line-height: 20px; }
.product dl, .pcard dd, .spec td, .field .hint, .form-foot small, .trust .quote small, .badge-card span { font-size: 13px; line-height: 19.5px; }
.field label { font-size: 13px; line-height: 19.5px; }
.band-quote { font-size: 1.25rem; line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; }
.trust .quote p { font-size: 1.25rem; line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; }
.info a, .info b { font-size: 1.125rem; line-height: 1.556; font-weight: 500; letter-spacing: -0.02em; }
.site-footer { font-size: 14px; line-height: 20px; }
.foot-bottom { font-size: 13px; }

/* ===== One text colour: black on light surfaces, white on dark and maroon surfaces.
   Maroon stays on fills, icons and markers only, never on type. ===== */
.hl, .on-dark .hl, .big-stat b span { color: inherit; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: inherit; }
.acc summary:hover h3 { color: var(--ink); }
.info a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.circle .mono, .trust .stat .mono, .step .mono, .form-success b { color: var(--ink); }
.tab-list button { color: var(--ink); }
.tab-list button[aria-selected="true"] { font-weight: 600; }
.on-dark, .on-dark p, .on-dark li, .on-dark dd, .on-dark dt, .on-dark td, .on-dark th, .on-dark .mono,
.on-dark .pill, .on-dark .link, .pcard > p, .pcard dt, .spec th, .spec td, .spec td:first-child,
.cta, .cta p, .circle.solid, .circle.solid .mono, .card.solid, .card.solid p, .trust .stat.solid, .trust .stat.solid .mono,
.band-photo, .band-quote, .band-meta, .badge-card span, .why-card, .why-card p,
.site-footer, .site-footer p, .site-footer li, .site-footer h4, .site-footer .brand small, .foot-bottom { color: #fff; }

/* whatsapp */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.wa svg { width: 28px; height: 28px; fill: #fff; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* phone: opaque menu panel, single location line in the hero strip */
@media (max-width: 1080px) {
  .site-header .nav-links { background: #f6f6f6; box-shadow: 0 20px 40px -20px rgba(0,0,0,.35); }
  .nav-links a[aria-current="page"] { margin-left: -12px; padding-inline: 12px; width: calc(100% + 24px); border-radius: 10px; border-bottom-color: transparent; background: #fff; font-weight: 600; }
}


/* ===== Home: who we are (stat + scroll-revealed statement). Uses existing type styles only. ===== */
.who-grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.who-stat { display: grid; justify-items: start; gap: 18px; max-width: 26rem; }
.who-stat .rule-line { position: relative; display: block; width: 100%; height: 1px; background: var(--line); }
.who-stat .rule-line i { position: absolute; left: 0; top: -0.5px; width: 52px; height: 2px; background: var(--ink); }
.who-stat b { font-family: var(--head); font-size: clamp(2.25rem, 3.2vw, 2.875rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--ink); margin-top: 6px; }
.who-stat p { font-size: 14px; line-height: 20px; max-width: 18em; }
.who-copy .reveal-text { font-family: var(--head); font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); max-width: 22em; }
.who-copy .reveal-text + .reveal-text { margin-top: .7em; }
.who-copy .actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 40px; }
/* scroll reveal: words darken from light grey to ink as the paragraph moves up the screen */
.reveal-text .w { color: #c9c7c6; transition: color .35s ease; }
.reveal-text .w.on { color: var(--ink); }
@media (max-width: 860px) { .who-grid { grid-template-columns: 1fr; } }

/* ===== Photo reel: endless drift, drag to scrub, click to centre ===== */
.photo-reel { overflow: hidden; background: var(--bg); padding-block: 4px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.photo-reel.dragging { cursor: grabbing; }
.reel-track { display: flex; gap: 12px; width: max-content; will-change: transform; }
.reel-track img { height: clamp(240px, 31vw, 460px); width: auto; aspect-ratio: 4 / 3; border-radius: 10px; object-fit: cover; flex: none; background: var(--dark-2); transition: filter .4s var(--ease-out, ease); }
.photo-reel:hover .reel-track img { filter: saturate(.85); }
.photo-reel:hover .reel-track img:hover { filter: none; }


/* ===== Stat circles as identical white bottle caps (top view): knurled grip rim, domed top,
   raised seal ring. Same colour and size for all four; type inside unchanged. ===== */
.circles { gap: clamp(28px, 3.5vw, 44px); }
.circle {
  --rim: clamp(8px, 1vw, 12px);
  position: relative; isolation: isolate; overflow: visible; border: 0;
  background: radial-gradient(circle at 34% 26%, #ffffff 0%, #f8f8f8 38%, #ebebeb 70%, #d8d8d8 100%);
  box-shadow: 0 22px 34px -20px rgba(0,0,0,.35), inset 0 -8px 16px rgba(0,0,0,.07), inset 0 6px 12px rgba(255,255,255,.95);
}
.circle > * { position: relative; z-index: 2; }
.circle::before {
  content: ""; position: absolute; inset: calc(-1 * var(--rim)); border-radius: 50%; z-index: -1;
  background:
    radial-gradient(farthest-side, transparent 78%, rgba(0,0,0,.16) 100%),
    repeating-conic-gradient(from 0deg, #cfcfcf 0deg 1.6deg, #f4f4f4 1.6deg 3.2deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--rim) - 1px), #000 calc(100% - var(--rim)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--rim) - 1px), #000 calc(100% - var(--rim)));
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.circle:hover::before { transform: rotate(24deg); }
.circle .cap-d { position: absolute; inset: 9%; z-index: 1; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(0,0,0,.07); box-shadow: inset 0 2px 3px rgba(255,255,255,.9), 0 1px 2px rgba(0,0,0,.05); }
/* logo cap: same white cap, logo embossed white-on-white */
.circle.cap-logo { display: grid; place-items: center; }
.circle.cap-logo img { width: 46%; height: auto; aspect-ratio: 1; object-fit: contain;
  filter: grayscale(1) brightness(1.18) contrast(.85) drop-shadow(0 -1px 0 rgba(255,255,255,.95)) drop-shadow(0 1.5px 1.5px rgba(0,0,0,.18));
  opacity: .7; mix-blend-mode: multiply; }


/* ===== What we do: stacking service cards =====
   Warm stone pair (sits with the maroon): #e4e0db / #efece8, hairline border, on a #f6f6f6 page. */
.stack { display: grid; gap: 28px; }
.stack-card { position: sticky; top: calc(96px + var(--i) * 16px); }
.stack-inner {
  display: grid; grid-template-columns: 1fr 1.15fr;
  min-height: clamp(400px, 38vw, 480px); overflow: hidden;
  border-radius: 10px; background: #e4e0db; border: 1px solid rgba(60,45,35,.09);
  box-shadow: 0 -14px 34px -22px rgba(40,25,20,.28);
  transform-origin: 50% 0; will-change: transform;
}
.stack-card:nth-child(even) .stack-inner { background: #efece8; }
.stack-text { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 52px); }
.stack-text h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
.stack-text p { margin-top: 12px; max-width: 28em; }
.stack-metric { display: grid; gap: 6px; margin-top: auto; padding-top: 32px; }
.stack-metric b { font-family: var(--head); font-size: clamp(2.25rem, 3.2vw, 2.875rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.stack-metric span { font-size: 14px; line-height: 20px; color: var(--ink); }
.spec-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(60,45,35,.14); }
.spec-grid li { padding: 14px 16px 14px 0; font-size: 14px; line-height: 20px; color: var(--ink); border-bottom: 1px solid rgba(60,45,35,.14); }
.spec-grid li:nth-child(odd) { border-right: 1px solid rgba(60,45,35,.14); }
.spec-grid li:nth-child(even) { padding-left: 16px; }
/* photo alternates sides through the stack */
.stack-card:nth-child(even) .stack-inner { grid-template-columns: 1.15fr 1fr; }
.stack-card:nth-child(even) .stack-photo { order: -1; }
.stack-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; align-self: flex-start;
  font-weight: 500; font-size: 14px; color: var(--ink); text-decoration: none; }
.stack-link span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--maroon); color: #fff; transition: transform .3s var(--ease-out, ease); }
.stack-link span svg { width: 15px; height: 15px; }
.stack-link:hover span { transform: translateX(3px); }
.stack-photo { position: relative; margin: 0; }
.stack-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .stack-inner, .stack-card:nth-child(even) .stack-inner { grid-template-columns: 1fr; }
  .stack-photo { height: 220px; order: -1; }
  .stack-card { top: calc(84px + var(--i) * 12px); }
}


/* ===== What we manufacture: pinned horizontal scroll (scrubbed by vertical scroll) ===== */
.hscroll { position: relative; background: radial-gradient(70% 60% at 20% 10%, rgba(95,26,35,.55), transparent 70%), var(--dark); }
.hs-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hs-track { display: flex; align-items: stretch; gap: clamp(16px, 2vw, 28px); padding: 96px var(--gutter) 40px max(var(--gutter), calc(50vw - var(--max) / 2)); width: max-content; will-change: transform; }
.hs-intro { flex: 0 0 min(440px, 80vw); display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-right: clamp(8px, 3vw, 48px); }
.hs-intro h2 { color: #fff; }
.hs-stat { display: grid; gap: 8px; margin-top: 8px; }
.hs-stat b { font-family: var(--head); font-size: clamp(2.25rem, 3.2vw, 2.875rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.hs-stat span { font-size: 14px; line-height: 20px; color: #fff; max-width: 22em; }
.hs-hint { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #fff; opacity: .8; }
.hs-hint span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); animation: hs-nudge 1.8s ease-in-out infinite; }
.hs-hint svg { width: 13px; height: 13px; }
@keyframes hs-nudge { 50% { transform: translateX(6px); } }
.hs-card { position: relative; flex: 0 0 clamp(300px, 34vw, 500px); height: min(66vh, 620px); border-radius: 10px; overflow: hidden; isolation: isolate; text-decoration: none; color: #fff; background: var(--dark-2);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); transition: box-shadow .4s; }
.hs-card img { position: absolute; inset: -4% -12%; width: 124%; max-width: none; height: 108%; object-fit: cover; z-index: -2; will-change: transform; transition: scale 1s cubic-bezier(.22,1,.36,1); }
.hs-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,.55) 58%, rgba(20,8,10,.92) 100%); }
.hs-card:hover img { scale: 1.05; }
.hs-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 10px; }
.hs-body h3 { color: #fff; font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; max-width: 14em; }
.hs-body dl { margin: 10px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.2); }
.hs-body dl div { padding: 12px 10px 0 0; }
.hs-body dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; opacity: .7; }
.hs-body dd { margin: 4px 0 0; font-size: 13px; line-height: 19.5px; color: #fff; }
.hs-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; font-weight: 500; }
.hs-go i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--maroon); transition: transform .3s; }
.hs-go svg { width: 15px; height: 15px; }
.hs-card:hover .hs-go i { transform: translateX(4px); }
.hs-end { flex: 0 0 min(420px, 80vw); display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 clamp(16px, 4vw, 64px); }
.hs-end h3 { color: #fff; font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
.hs-end p { color: #fff; opacity: .85; }
.hs-end .actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
/* phones, or no JS: native swipe with snap instead of pinning */
.hscroll:not(.pinned) .hs-sticky { position: static; height: auto; padding-block: 24px; }
.hscroll:not(.pinned) .hs-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 56px; }
.hscroll:not(.pinned) .hs-track::-webkit-scrollbar { display: none; }
.hscroll:not(.pinned) .hs-card, .hscroll:not(.pinned) .hs-intro, .hscroll:not(.pinned) .hs-end { scroll-snap-align: start; }
@media (max-width: 760px) { .hs-card { flex-basis: 84vw; height: 520px; } .hs-body dl { grid-template-columns: 1fr 1fr; } }


/* ===== Built for every industry: minimal tabs + product photography ===== */
.ind { background: var(--bg); }
.ind .tabs { display: block; }
.ind-title { text-align: center; }
.ind-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 760px; margin: 32px auto clamp(40px, 6vw, 72px); }
.ind-tabs button { padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(21,21,21,.14); background: transparent; cursor: pointer;
  font-size: 16px; line-height: 24px; color: var(--ink); transition: background .25s, border-color .25s; }
.ind-tabs button:hover { border-color: rgba(21,21,21,.3); }
.ind-tabs button[aria-selected="true"] { background: #ebebeb; border-color: transparent; }
.ind-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; max-width: 1100px; margin: 0 auto; }
.ind-panel[hidden] { display: none; }
/* industry visual: product photo fills the frame, a second shot inset */
.ind-visual { position: relative; min-height: clamp(420px, 42vw, 540px); border-radius: 10px; overflow: hidden; background: var(--surface); display: grid; align-items: end; justify-items: start; padding: clamp(16px, 2.5vw, 28px); }
.ind-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ind-inset { position: absolute; z-index: 2; top: clamp(16px, 2.5vw, 28px); right: clamp(16px, 2.5vw, 28px); width: 36%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 5px solid #fff; background: #fff; box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); }
.ind-copy { display: grid; justify-items: start; gap: 18px; }
.ind-ic { width: 52px; height: 52px; border-radius: 10px; border: 1px solid rgba(21,21,21,.1); background: #fff; color: var(--maroon); display: grid; place-items: center; }
.ind-ic svg { width: 24px; height: 24px; }
.ind-copy h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; max-width: 12em; }
.ind-copy p { font-size: 1.125rem; line-height: 1.556; max-width: 26em; }
.ind-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 14px 26px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; transition: background .2s; }
.ind-btn svg { width: 18px; height: 18px; transition: transform .25s; }
.ind-btn:hover { background: var(--maroon); }
.ind-btn:hover svg { transform: translate(2px, -2px); }
.anim .ind-panel:not([hidden]) .ind-copy > * { animation: fade-up-slip .6s var(--ease-out) both; }
.anim .ind-panel:not([hidden]) .ind-copy > :nth-child(2) { animation-delay: .06s; }
.anim .ind-panel:not([hidden]) .ind-copy > :nth-child(3) { animation-delay: .12s; }
.anim .ind-panel:not([hidden]) .ind-copy > :nth-child(4) { animation-delay: .18s; }
@keyframes fade-up-slip { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .ind-panel { grid-template-columns: 1fr; } }

/* ===== Scroll motion =====
   Each kind of content has its own movement (data-anim="type"), assigned in js/main.js.
   Only active when <html> has .anim (skipped for reduced motion), so content shows without JS.
   Final state for every type is the same: visible, in place, unclipped. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-wipe: cubic-bezier(.77, 0, .18, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }
.anim [data-anim] {
  transition-property: opacity, transform, clip-path, filter;
  transition-duration: .9s; transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * var(--step, 80ms));
}
.anim [data-anim].in { opacity: 1; transform: none; filter: none; }
/* only wipe types animate a clip, so only they end on one (a final clip would cut off anything
   drawn outside the box, like the bottle-cap rims) */
.anim [data-anim="wipe"].in, .anim [data-anim="wipe-up"].in { clip-path: inset(0 0 0 0); }

/* headings: lines slide up from behind a mask */
.anim [data-anim="mask"] { clip-path: inset(0 0 100% 0); transform: translateY(35%); transition-duration: 1.05s; }
.anim [data-anim="mask"].in { clip-path: inset(-25% -6% -30% -6%); } /* room for descenders once revealed */
/* supporting copy, pills, buttons: soft lift after the heading */
.anim [data-anim="fade"] { opacity: 0; transform: translateY(12px); transition-duration: .8s; --d: .18s; }
/* stat circles: spring pop */
.anim [data-anim="pop"] { opacity: 0; transform: scale(.8); transition-duration: 1s; transition-timing-function: var(--ease-spring); --step: 110ms; }
/* rows that read left to right */
.anim [data-anim="slide-l"] { opacity: 0; transform: translateX(-36px); --step: 90ms; }
.anim [data-anim="slide-r"] { opacity: 0; transform: translateX(36px); transition-duration: 1s; }
/* cards and blocks: rise */
.anim [data-anim="rise"] { opacity: 0; transform: translateY(40px); transition-duration: 1s; --step: 100ms; }
/* banners: wipe open left to right */
.anim [data-anim="wipe"] { clip-path: inset(0 100% 0 0 round var(--radius)); transition-duration: 1.2s; transition-timing-function: var(--ease-wipe); }
/* photos: wipe up from the bottom edge */
.anim [data-anim="wipe-up"] { clip-path: inset(100% 0 0 0); transition-duration: 1.1s; transition-timing-function: var(--ease-wipe); --step: 140ms; }
/* trust tiles: tilt up from the bottom edge */
.anim [data-anim="tilt"] { opacity: 0; transform: perspective(900px) rotateX(22deg) translateY(30px); transform-origin: 50% 100%; transition-duration: 1.1s; --step: 120ms; }
/* frosted glass panel: comes into focus */
.anim [data-anim="focus"] { opacity: 0; transform: translateX(-40px) scale(.97); filter: blur(12px); transition-duration: 1.2s; }
/* catalogue: quick and light, browsing must stay fast */
.anim [data-anim="quick"] { opacity: 0; transform: translateY(14px); transition-duration: .5s; --step: 45ms; }
/* table rows and list items: fast cascade */
.anim [data-anim="cascade"] { opacity: 0; transform: translateX(-14px); transition-duration: .6s; --step: 55ms; }

/* who-we-are rule draws in, quote mark drops in */
.anim [data-anim="draw"] { transform: scaleX(0); transition-duration: 1.1s; transition-timing-function: var(--ease-wipe); --d: .2s; }
.anim [data-anim="drop"] { opacity: 0; transform: translateY(-18px) scale(.8); transition-duration: .9s; transition-timing-function: var(--ease-spring); }
.anim [data-anim="sign"] { clip-path: inset(0 100% 0 0); transition-duration: 1.6s; transition-timing-function: cubic-bezier(.65, 0, .35, 1); --d: .6s; }
.anim [data-anim="sign"].in { clip-path: inset(-20% -10% -40% -10%); }

/* hero: photo settles, then copy rises in sequence */
@keyframes hero-settle { from { scale: 1.08; } to { scale: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.anim .hero > img { animation: hero-settle 2.2s var(--ease-out) both; }
.anim .hero .pill, .anim .hero h1, .anim .hero-side > * { animation: rise 1s var(--ease-out) both; }
.anim .hero .pill { animation-delay: .15s; }
.anim .hero h1 { animation-delay: .25s; }
.anim .hero-side > :nth-child(1) { animation-delay: .45s; }
.anim .hero-side > :nth-child(2) { animation-delay: .55s; }
.anim .hero-side > :nth-child(3) { animation-delay: .65s; }

/* tab and accordion content eases in when switched or opened */
@keyframes fade-in-r { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in-d { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.anim .tab-panel:not([hidden]) { animation: fade-in-r .55s var(--ease-out) both; }
.anim .acc details[open] .body { animation: fade-in-d .45s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .anim [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; }
  .anim .hero > img, .anim .hero *, .anim .tab-panel, .anim .acc .body { animation: none !important; }
}


/* =====================================================================
   Minimal white theme: white pages, subtle grey surfaces, black buttons.
   Maroon remains only as a small accent (logo, pill markers, icons).
   Photo-backed areas (hero, why-us, product cards) keep white text.
   ===================================================================== */
:root { --surface: #f5f5f5; --surface-2: #efefef; --line: rgba(0,0,0,.08); }

/* buttons: black everywhere */
.btn, .btn-ink { background: var(--ink); color: #fff; box-shadow: none; }
.btn .ico, .btn-ink .ico { background: rgba(255,255,255,.14); color: #fff; }
.btn:hover, .btn-ink:hover { background: #333; }
.btn-light { background: #fff; color: var(--ink); box-shadow: none; }
.btn-light .ico { background: var(--ink); color: #fff; }
.btn-light:hover { background: #f0f0f0; }
.acc .go, .stack-link span, .hs-go i { background: var(--ink); box-shadow: none; }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ind-btn:hover { background: #333; }
.site-header .btn { background: var(--ink); }

/* dark sections become subtle grey (not the photo-backed why-us block) */
.on-dark:not(.why) { background: var(--surface); }
.on-dark:not(.why), .on-dark:not(.why) p, .on-dark:not(.why) li, .on-dark:not(.why) dd, .on-dark:not(.why) dt,
.on-dark:not(.why) td, .on-dark:not(.why) th, .on-dark:not(.why) .mono, .on-dark:not(.why) .pill, .on-dark:not(.why) .link,
.on-dark:not(.why) h1, .on-dark:not(.why) h2, .on-dark:not(.why) h3, .on-dark:not(.why) h4,
.on-dark:not(.why) .spec td:first-child { color: var(--ink); }
.on-dark:not(.why) .pill { background: #fff; border-color: var(--line); }
.on-dark:not(.why) .pill::before { background: var(--maroon); }
.on-dark:not(.why) .checks li::before { border-color: var(--maroon); }
.on-dark:not(.why) .step { background: #fff; border-color: var(--line); }
.on-dark:not(.why) .spec th, .on-dark:not(.why) .spec td { border-color: var(--line); }
.on-dark:not(.why) .head-row, .on-dark:not(.why) .range-foot { border-color: var(--line); }

/* horizontal product scroll on a light ground; cards keep white text over their photos */
.hscroll.on-dark:not(.why) { background: var(--bg); }
.hs-intro h2, .hs-stat b, .hs-stat span, .hs-hint, .hs-end h3, .hs-end p { color: var(--ink); }
.hs-hint span { border-color: rgba(0,0,0,.2); }
.on-dark:not(.why) .hs-card, .on-dark:not(.why) .hs-card p, .on-dark:not(.why) .hs-card dt, .on-dark:not(.why) .hs-card dd, .on-dark:not(.why) .hs-card .mono, .on-dark:not(.why) .hs-card h3, .on-dark:not(.why) .hs-card .hs-go { color: #fff; }

/* banners and solid tiles: subtle grey with black text */
.cta, .circle.solid, .card.solid, .trust .stat.solid { background: var(--surface); background-blend-mode: normal; box-shadow: none; border: 1px solid var(--line); }
.cta, .cta p, .cta h3, .card.solid, .card.solid p, .card.solid h4, .trust .stat.solid, .trust .stat.solid b, .trust .stat.solid span, .trust .stat.solid .mono { color: var(--ink); }
.cta::before { background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.09) 1px, transparent 0); }
.cta .btn-light { background: var(--ink); color: #fff; }
.cta .btn-light .ico { background: rgba(255,255,255,.14); }
.card.solid .ic { background: #fff; color: var(--maroon); }

/* cards and panels: subtle greys */
.card, .step, .trust > div, .info > div, .form-card, .product, .tab-panel { border-color: var(--line); }
.stack-inner { background: var(--surface); border-color: var(--line); box-shadow: 0 -12px 30px -22px rgba(0,0,0,.18); }
.stack-card:nth-child(even) .stack-inner { background: var(--surface-2); }
.spec-grid, .spec-grid li, .spec-grid li:nth-child(odd) { border-color: rgba(0,0,0,.1); }
.ind-tabs button[aria-selected="true"] { background: var(--surface-2); }

/* footer: subtle grey, black text, no glows */
.site-footer { background: var(--surface); box-shadow: inset 0 1px 0 var(--line); }
.site-footer::before, .site-footer::after { display: none; }
.site-footer, .site-footer p, .site-footer li, .site-footer h4, .site-footer a, .site-footer .brand, .site-footer .brand small, .foot-bottom { color: var(--ink); }
.foot-bottom { border-top-color: var(--line); }
.site-footer .brand img { background: transparent; }

/* header once past the hero */
.site-header.solid { background-color: rgba(255,255,255,.85); }

/* ===== Section rhythm: one spacing value for the whole site =====
   Plain sections carry half the gap top and bottom, so any two neighbours sit one full gap apart.
   Sections with their own background carry the full gap inside, so content never crowds the edge. */
:root { --space: clamp(96px, 11vw, 160px); }
.section, .section-tight { padding-block: calc(var(--space) / 2); }
.hero + .section { padding-top: var(--space); }
.photo-reel { margin-block: calc(var(--space) / 2); }
.on-dark:not(.why).section, .why { padding-block: var(--space); }
.site-footer { margin-top: calc(var(--space) / 2); }
.circles { margin-top: 0; }
.head-row, .head-center { margin-bottom: clamp(40px, 5vw, 64px); }

/* ===== Built on trust: testimonials only, endless two-row marquee ===== */
.tmarquee { display: grid; gap: 20px; margin-inline: calc(50% - 50vw); overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tm-row { display: flex; }
.tm-track { display: flex; gap: 20px; padding-right: 20px; width: max-content; animation: tm-scroll 60s linear infinite; }
@keyframes tm-scroll { to { transform: translateX(-50%); } }
.tcard { flex: none; width: clamp(300px, 30vw, 420px); margin: 0; padding: 28px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.tcard blockquote { margin: 0; font-family: var(--head); font-size: 1.25rem; line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.tcard figcaption { display: flex; align-items: center; gap: 12px; }
.tc-avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 600; color: var(--ink); }
.tcard b { display: block; font-size: 14px; line-height: 20px; color: var(--ink); font-weight: 600; }
.tcard small { display: block; font-size: 13px; line-height: 19.5px; color: var(--ink); opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .tm-track { animation: none; }
  .tm-row { overflow-x: auto; scrollbar-width: none; }
}

/* ===== About: team ===== */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.team-photo { aspect-ratio: 4 / 3; background: var(--surface-2); display: grid; place-items: center; color: rgba(0,0,0,.18); border-bottom: 1px solid var(--line); }
.team-photo svg { width: 34%; height: auto; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-body { padding: 22px 22px 26px; display: grid; gap: 6px; }
.team-body h4 { font-size: 1.25rem; line-height: 1.18; letter-spacing: -0.02em; font-weight: 600; }
.team-body .mono { color: var(--ink); opacity: .7; }
.team-body p { margin-top: 6px; font-size: 14px; line-height: 20px; }

/* ===== Home: Why S.K. Plastic as a supplier comparison ===== */
.why2-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.why2-intro { position: sticky; top: 110px; display: grid; justify-items: start; gap: 20px; }
.why2-intro h2 { margin-top: 2px; }
.why2-photo { margin: 16px 0 0; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.why2-photo img { width: 100%; height: 100%; object-fit: cover; }
/* the S.K. Plastic column: one raised white column running down the table */
@media (max-width: 860px) {
  .why2-grid { grid-template-columns: 1fr; }
  .why2-intro { position: static; }
          }

/* ===== Why S.K. Plastic: supplier comparison table ===== */
.sheet { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 30px 60px -40px rgba(0,0,0,.3); }
.sheet-cmp { width: 100%; border-collapse: collapse; }
.sheet-cmp caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sheet-cmp thead th { padding-block: 22px !important; }
.sheet-cmp th, .sheet-cmp td { text-align: left; vertical-align: top; padding: 18px 28px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink); }
.sheet-cmp thead th { padding-block: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: rgba(21,21,21,.55); vertical-align: middle; }
.sheet-cmp thead th.c-sk { color: #fff; }
.sheet-cmp thead th.c-sk img { display: inline-block; vertical-align: middle; width: 28px; height: 28px; margin: -4px 10px 0 0; border-radius: 50%; background: #fff; }
.sheet-cmp tbody th { font-weight: 600; width: 24%; }
.sheet-cmp tbody tr:last-child > * { border-bottom: 0; }
/* generic column: muted, with a neutral dash */
.c-gen { width: 34%; color: rgba(21,21,21,.6) !important; }
.c-gen::before { content: ""; display: inline-block; width: 10px; height: 2px; margin: 0 10px 4px 0; background: rgba(21,21,21,.3); vertical-align: middle; }
/* S.K. column: one solid maroon band running down the table */
.sheet-cmp .c-sk { background: var(--maroon); color: #fff; border-bottom-color: rgba(255,255,255,.14); }
.sheet-cmp tbody .c-sk { padding-left: 54px; position: relative; }
.sheet-cmp tbody .c-sk::before { content: ""; position: absolute; left: 26px; top: 19px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3L10.5 4.8' fill='none' stroke='%235f1a23' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sheet-cmp tbody tr { transition: background .2s; }
.sheet-cmp tbody tr:hover { background: var(--surface); }
.sheet-cmp tbody tr:hover .c-sk { background: var(--maroon-2); }
.sheet-foot { display: grid; gap: 14px; padding: 22px 28px 24px; background: var(--surface); border-top: 1px solid var(--line); }
.sheet-foot ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sheet-foot li { display: grid; font-size: 13px; line-height: 19.5px; color: rgba(21,21,21,.65); }
.sheet-foot li + li { border-left: 1px solid var(--line); padding-left: 16px; }
.sheet-foot b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--maroon); }
.sheet-foot small { font-size: 12px; color: rgba(21,21,21,.5); }
@media (max-width: 760px) {
  .sheet-cmp thead { display: none; }
  .sheet-cmp tbody tr { display: grid; gap: 8px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
  .sheet-cmp tbody tr:last-child { border-bottom: 0; }
  .sheet-cmp th, .sheet-cmp td, .sheet-cmp tbody th { border: 0; padding: 0; width: auto; }
  .sheet-cmp tbody .c-sk { padding: 12px 14px 12px 42px; border-radius: 10px; }
  .sheet-cmp tbody .c-sk::before { left: 14px; top: 13px; }
  .sheet-foot { padding: 20px; }
  .sheet-foot ul { grid-template-columns: 1fr; gap: 10px; }
  .sheet-foot li + li { border-left: 0; padding-left: 0; }
}

/* ===== Home: product guidance with sales desk card ===== */
.guide { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; background: var(--surface); border-radius: 10px; padding: clamp(28px, 6vw, 80px); }
.guide-copy h2 { margin-top: 18px; max-width: 13em; }
.guide-copy .lead { margin-top: 16px; max-width: 30em; color: var(--ink); }
.guide-copy .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.desk { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: clamp(20px, 2.4vw, 32px); box-shadow: 0 30px 60px -40px rgba(0,0,0,.3); }
.desk-who { display: flex; align-items: center; gap: 14px; }
.desk-av { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--maroon); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.desk-who div b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
.desk-who div span { display: block; font-size: 13px; line-height: 19.5px; color: var(--ink); opacity: .65; }
.desk-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 12px; border-radius: 999px; background: var(--surface); font-size: 13px; line-height: 19.5px; color: var(--ink); }
.desk-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: desk-pulse 2.4s ease-out infinite; }
@keyframes desk-pulse { 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.desk-k { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.desk-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.desk-list li { display: flex; align-items: flex-start; gap: 14px; padding: 10px; margin-inline: -10px; border-radius: 10px; transition: background .2s; }
.desk-list li:hover { background: var(--surface); }
.desk-list .lineart { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--surface); color: var(--maroon); transition: background .2s; }
.desk-list li:hover .lineart { background: #fff; }
.desk-list b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.desk-list span { display: block; font-size: 14px; line-height: 20px; color: var(--ink); opacity: .65; }
.desk-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.desk-links a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; line-height: 20px; color: var(--ink); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.desk-links .lineart { width: 16px; height: 16px; }
.desk-links a:hover, .desk-links a:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 900px) { .guide { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .desk-links { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .desk-live::before { animation: none; } }

/* ===== Footer: maroon with half-cut wordmark ===== */
.site-footer { background: var(--maroon); box-shadow: none; padding-bottom: 0; }
.site-footer::before, .site-footer::after { display: block; }
.site-footer, .site-footer p, .site-footer li, .site-footer a, .site-footer .brand, .foot-bottom { color: #fff; }
.site-footer h4, .site-footer .brand small, .foot-bottom > span:first-child { color: rgba(255,255,255,.7); }
.site-footer .brand img { background: #fff; }
.foot-bottom { border-top-color: rgba(255,255,255,.18); }
.foot-mark { display: block; width: min(var(--max), 100% - 2 * var(--gutter)); height: auto; margin: clamp(28px, 4vw, 48px) auto 0; overflow: hidden; pointer-events: none; user-select: none; }
.foot-mark text { font-family: var(--head); font-weight: 700; font-size: 200px; letter-spacing: -6px; }

/* ===== Buttons: brand maroon instead of black ===== */
.btn, .btn-ink, .site-header .btn, .cta .btn-light, .ind-btn { background: var(--maroon); color: #fff; }
.btn:hover, .btn-ink:hover, .site-header .btn:hover, .cta .btn-light:hover, .ind-btn:hover { background: var(--maroon-2); }
.btn-light .ico, .acc .go, .stack-link span, .hs-go i { background: var(--maroon); }
.filters button[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); }
.desk-links a:hover, .desk-links a:focus-visible { background: var(--maroon); border-color: var(--maroon); }
.btn:focus-visible, .ind-btn:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }

/* ===== One button layout everywhere: label + square arrow tile ===== */
.btn { min-height: 46px; padding: 6px 6px 6px 18px; border-radius: 10px; gap: 14px; font-size: 14px; line-height: 20px; font-weight: 500; }
.btn .ico { width: 34px; height: 34px; border-radius: 6px; }
.product .btn, .stack-card .btn, .ind .btn { align-self: flex-start; }
.stack-card .btn { margin-top: 24px; }
.desk-links a { border-radius: 10px; }

/* spam trap: off-screen field only bots fill in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 0 0 10px; font-size: 13px; line-height: 19.5px; color: var(--ink-3); }
.form-error { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--maroon); background: var(--maroon-tint); font-size: 13px; line-height: 19.5px; color: var(--ink); }
.form.sending [type="submit"] { opacity: .6; cursor: progress; }
.cf-turnstile { margin: 4px 0 14px; min-height: 65px; }