/* Top Energy Set — static build.
   The design (Design Canvas export) keeps its styling inline in the HTML.
   This file provides: base reset, keyframes, hover/focus utilities that replace
   the design tool's style-hover / style-focus attributes, and media queries that
   replace its JS window-width switches. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #ffffff; color: #111; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:hover { color: inherit; }
input, button, textarea { font: inherit; }
input::placeholder, textarea::placeholder { color: rgba(0,0,0,0.32); }
[hidden] { display: none !important; }

/* keyframes (verbatim from the design) */
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wordReveal { from { opacity: 0; transform: translateY(100%); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0px); } }
@keyframes barFillA { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes barFillB { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes qStep { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* responsive visibility (was: sc-if wide / notWide with state.w >= 1024) */
@media (max-width: 1023px) { .only-wide { display: none !important; } }
@media (min-width: 1024px) { .only-narrow { display: none !important; } }
@media (max-width: 639px) { .hide-below-640 { display: none !important; } }

/* phone-only / desktop-only inline copy (shorter captions on small screens) */
.only-mob-inline { display: none; }
@media (max-width: 767px) {
  .only-desk-inline { display: none; }
  .only-mob-inline { display: inline; }
}

/* home intro strip panels (was: panelWide / panelNarrow flex values) */
.panel-wide { flex: 2 1 0; }
.panel-narrow { flex: 1 1 0; }
@media (max-width: 767px) { .panel-wide, .panel-narrow { flex: 1 1 100%; } }

/* home capability card inner list (was: capListCols) */
.cap-list-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
@media (max-width: 699px) { .cap-list-grid { grid-template-columns: 1fr; } }

/* carousel slides on phones: photo spans the full card width above the text
   (inline flex/min-width otherwise pins it to a 220px column with white space) */
@media (max-width: 767px) {
  [data-cap-track] > div > div:first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
  }
  [data-cap-track] > div > div:last-child { flex: 1 1 100% !important; }
  /* out of flow, so the image's own proportions cannot stretch the box: same height on every slide */
  .slide-photo { position: relative; }
  [data-cap-track] > div, .story-slide { align-content: flex-start; }
  .slide-photo img { position: absolute; inset: 0; }
}

/* capabilities "how it works" timeline (was: timelineCols/timelineGap + reversed row) */
.timeline-row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 56px); }
@media (max-width: 1023px) { .timeline-row { grid-template-columns: 1fr; gap: 28px; } }
@media (min-width: 1024px) {
  .how-row2 .hs-0 { grid-column: 3; grid-row: 1; }
  .how-row2 .hs-1 { grid-column: 2; grid-row: 1; }
  .how-row2 .hs-2 { grid-column: 1; grid-row: 1; }
}

/* The timeline reads as one continuous stripe: right across row 1, a U-turn down
   the right side, left across row 2, then a turn down to "stock at your door".
   Both turns sit in the card's own padding (30px lane), never over the text. */
.how-turn { position: absolute; top: 7px; width: 30px; border-style: solid; border-width: 0; border-color: rgba(0,0,0,0.16); }
.how-turn-r {
  right: -30px; height: calc(100% + 52px);
  border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px;
  border-top-right-radius: 22px; border-bottom-right-radius: 22px;
}
.how-turn-l {
  left: -30px; height: calc(100% + 54px); /* row-2 line (top:7) → centre of the end-row arrow: 52px gap + 9px half-arrow − 7px */
  border-top-width: 1px; border-left-width: 1px; border-bottom-width: 1px;
  border-top-left-radius: 22px; border-bottom-left-radius: 22px;
}

/* news grid (was: gridCols) */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
@media (max-width: 1099px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 699px) { .news-grid { grid-template-columns: 1fr; } }

/* about values grid (was: valueCols) */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 32px); }
@media (max-width: 1099px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 699px) { .values-grid { grid-template-columns: 1fr; } }

/* about story slides (was: storyWidth) */
.story-slide { flex: none; width: 92%; }
@media (max-width: 899px) { .story-slide { width: 100%; } }

/* phones: story photo spans the full slide width above the text */
@media (max-width: 767px) {
  .story-slide > div:first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
  }
  .story-slide > div:last-child { flex: 1 1 100% !important; }
}

/* home quote widget: full width on phones (inline style pins it to 52%/260px) */
@media (max-width: 767px) { [data-hquote] { width: 100% !important; min-width: 0 !important; } }

/* brand in the header: keep on one line on narrow screens */
@media (max-width: 560px) { .site-brand { font-size: 19px !important; white-space: nowrap; } }

/* phones: the quote pill leaves the fixed nav — the hero CTA and the burger
   menu carry it; the row otherwise overflows on narrow screens */
@media (max-width: 560px) { [data-nav-cta] { display: none !important; } }

/* phones: capsules cascade becomes a narrow, clipped column at the right edge
   of the first strip panel; the panel text gets room so nothing collides */
@media (max-width: 767px) {
  /* capsules at nearly desktop scale (content ~230px wide vs 270px on desktop),
     cropped to the height of the first strip panel */
  /* NB: the element carries inline object-fit: contain — must be overridden,
     otherwise the cascade shrinks into a thin strip regardless of width */
  [data-caps-float] {
    width: 300px !important;    /* desktop renders the cascade at 270px */
    right: -70px !important;    /* bleeds off the right edge, like the hero bottle */
    height: 100% !important;
    max-height: 230px !important;
    object-fit: cover !important;
    object-position: top left !important;
  }
  [data-strip] .panel-wide:first-child {
    padding-right: 200px !important;
    min-height: 230px !important;
  }
  [data-strip] .panel-wide:first-child p { font-size: 23px !important; line-height: 1.15 !important; }

  /* trust-card rotator: compact single row + progress dots */
  [data-rot-panel] { min-height: 0 !important; padding: 18px 22px !important; gap: 14px !important; }
  [data-rot-panel] > div:first-child { min-height: 54px; }
  [data-rot-card] > span:first-child { width: 38px !important; height: 38px !important; }
  [data-rot-card] > span:last-child { font-size: 14px !important; }

  /* EU panel: map, number and short caption on one line */
  [data-strip] .panel-wide:last-child {
    min-height: 0 !important;
    padding: 18px 22px !important;
    gap: 16px !important;
  }
  [data-strip] .panel-wide:last-child img { width: 66px !important; height: 60px !important; }
  [data-strip] .panel-wide:last-child [data-count] { font-size: 54px !important; }
  [data-strip] .panel-wide:last-child > span:last-child { font-size: 13px !important; line-height: 1.25 !important; }
}

/* hero sticky container: real viewport height on phones (URL bar aware) */
.hero-sticky { height: 100vh; }
@supports (height: 100svh) { .hero-sticky { height: 100svh; } }

/* mobile hero typography: lines wrap freely at a big size — no JS fitting,
   and no pre-JS horizontal overflow (which made phones zoom out to a
   desktop-looking view) */
@media (max-width: 767px) {
  h1[data-fit] { font-size: clamp(36px, 10.5vw, 46px) !important; line-height: 0.95 !important; }
  h1[data-fit] > span { white-space: normal !important; }
}

/* empty photo slots (design-time image-slot elements). Fill them with real
   photos by replacing the div with an <img> — see README. */
.img-slot { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0,0,0,0.3); }
.img-slot--dark { color: rgba(255,255,255,0.38); }

/* hover utilities (was: style-hover attributes) */
.hv-mint:hover { background: #E2F0DC !important; }
.hv-mint-lift:hover { background: #E2F0DC !important; transform: translateY(-2px); }
.hv-fill-dark:hover { background: #111 !important; color: #fff !important; border-color: #111 !important; }
.hv-dark2:hover { background: #2a2a2a !important; }
.hv-dark2-lift:hover { background: #2a2a2a !important; transform: translateY(-2px); }
.hv-ink:hover { color: #111 !important; border-color: #111 !important; }
.hv-ink-c:hover { color: #111 !important; }
.hv-gray:hover { background: #F4F4F4 !important; }
.hv-gray2:hover { background: #ECEDEC !important; }
.hv-white:hover { color: #fff !important; }
.hv-lang:hover { background: #F4F4F2 !important; color: #111 !important; }
.hv-chip:hover { background: #fff !important; border-color: rgba(0,0,0,0.3) !important; }
.hv-bg-white:hover { background: #fff !important; }
.hv-chip2:hover { background: #F4F5F3 !important; }
.hv-lift4:hover { transform: translateY(-4px); }
.hv-opt:hover { background: #F1F1EF !important; border-color: rgba(0,0,0,0.3) !important; }
.hv-op1:hover { opacity: 1 !important; }

/* validated-form buttons: hover only when active */
.is-valid { background: #111 !important; cursor: pointer !important; }
.is-valid:hover { background: #2a2a2a !important; }

/* focus utility (was: style-focus on inputs) */
.fc-ink:focus { border-color: #111 !important; background: #fff !important; }

/* ===== animations (static-build additions) ===== */

/* scroll-reveal: elements with data-rv fade-rise in when they enter the
   viewport; the number in data-rv is the stagger index within its group.
   Gated on .js so content stays visible without JavaScript. */
.js [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.js [data-rv].rv-in { opacity: 1; transform: none; }
/* quiet profile for subpages: smaller offset, faster, headers only */
.js [data-rv-q] { opacity: 0; transform: translateY(15px); transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.js [data-rv-q].rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-rv], .js [data-rv-q] { opacity: 1; transform: none; transition: none; }
}

/* ticker: animation lives here (not inline) so hover can pause it */
.ticker-track { animation: tickerScroll 90s linear infinite; }
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }

/* capabilities carousel: slow Ken Burns on slide photos, drag affordances */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
[data-cap-track] img { animation: kenburns 14s ease-in-out infinite alternate; }
[data-cap-track] { user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; }
[data-cap-track].dragging { cursor: grabbing; }

/* drawn checkmark on "received" screens */
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.draw-check { stroke-dasharray: 30; stroke-dashoffset: 30; animation: drawCheck 0.55s cubic-bezier(0.16,1,0.3,1) 0.2s forwards; }
@media (prefers-reduced-motion: reduce) {
  .draw-check { stroke-dashoffset: 0; animation: none; }
}

/* ================= quote form (.tq, static/js/quote-form.js) ================= */
.tq { font-family: 'Inter', system-ui, sans-serif; color: #111; letter-spacing: -0.02em; }
.tq *, .tq *::before, .tq *::after { box-sizing: border-box; }
.tq p { margin: 0; }
.tq-inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(240px, 400px) minmax(0, 1fr); grid-template-areas: "side card" "talk card"; grid-template-rows: auto 1fr; gap: 26px clamp(20px, 4vw, 72px); align-items: start; }
.tq-side { grid-area: side; display: flex; flex-direction: column; gap: 16px; }
.tq-side .tq-steps { margin-top: 28px; }
.tq-talk { grid-area: talk; max-width: 340px; }
.tq-frame { grid-area: card; min-width: 0; }
@media (max-width: 860px) {
  .tq-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "card" "talk"; grid-template-rows: auto; }
  .tq-side .tq-steps { display: none; }
}
.tq-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tq-steps li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: rgba(0,0,0,0.35); transition: color 0.3s; }
.tq-steps .n { flex: none; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; color: rgba(0,0,0,0.4); border: 1px solid rgba(0,0,0,0.2); transition: all 0.3s; }
.tq-steps li.done, .tq-steps li.cur, .tq-steps li.sent { color: #111; }
.tq-steps li.done .n, .tq-steps li.cur .n { color: #fff; background: #111; border-color: #111; }
.tq-steps li.sent .n { color: #fff; background: #17301A; border-color: #17301A; }
.tq-talk { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(0,0,0,0.12); font-size: 14px; }
.tq-talk .tq-eyebrow { font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0,0,0,0.42); }
.tq-talk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: rgba(0,0,0,0.55); text-decoration: none; }
.tq-talk-row span { min-width: 76px; }
.tq-talk-row b { color: #111; font-weight: 500; }
a.tq-talk-row:hover b { text-decoration: underline; text-underline-offset: 3px; }
.tq-copy { font: inherit; font-size: 13px; padding: 2px 9px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.16); background: transparent; color: rgba(0,0,0,0.6); cursor: pointer; }
.tq-copy:hover { border-color: #111; color: #111; }
.tq-talk-note { font-size: 13px; line-height: 1.45; color: rgba(0,0,0,0.5); }

.tq-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; min-width: 0; scroll-margin-top: 96px; }
.tq-card.split { grid-template-columns: minmax(0, 1fr) minmax(210px, 270px); }
.tq-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tq-col.anim { animation: qStep 0.45s cubic-bezier(0.16,1,0.3,1) both; }
.tq-prog { display: flex; align-items: center; gap: 8px; }
.tq-bars { flex: 1; display: flex; gap: 8px; }
.tq-bar { flex: 1; height: 3px; border-radius: 999px; background: rgba(0,0,0,0.12); overflow: hidden; }
.tq-bar i { display: block; height: 100%; border-radius: 999px; background: #111; transform-origin: left center; transform: scaleX(0); transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), background 0.35s; }
.tq-bar.on i { transform: scaleX(1); }
.tq-prog.sent .tq-bar i { background: #17301A; }
.tq-prog-lbl { flex: none; margin-left: 6px; font-size: 13px; color: rgba(0,0,0,0.45); white-space: nowrap; }
.tq-prog.sent .tq-prog-lbl { color: #17301A; font-weight: 500; }
.tq-q { margin: 0; font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.04em; text-wrap: pretty; outline: none; }
.tq-hint { max-width: 520px; font-size: 15px; line-height: 1.5; color: rgba(0,0,0,0.55); text-wrap: pretty; }
.tq-group { display: flex; flex-direction: column; gap: 10px; }
.tq-glabel { font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0,0,0,0.45); }
.tq-glabel span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tq-scope { font-size: 13px; line-height: 1.45; color: rgba(0,0,0,0.5); }

/* single choice rows (numbered, like the original quiz) */
.tq-opts { display: flex; flex-direction: column; gap: 10px; }
.tq-opt { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 12px 18px; text-align: left; cursor: pointer; border-radius: 8px; background: #FAFAF9; border: 1px solid rgba(0,0,0,0.12); color: #111; transition: background 0.25s, border-color 0.25s; }
.tq-opt[aria-pressed="true"] { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.tq-num { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; font-size: 14px; line-height: 1; color: rgba(0,0,0,0.5); border: 1px solid rgba(0,0,0,0.2); }
.tq-opt-txt { flex: 1; font-family: 'DM Sans', sans-serif; font-size: 18px; line-height: 1.25; letter-spacing: -0.03em; text-wrap: pretty; }
.tq-opt-txt .sub { display: block; margin-top: 3px; font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: -0.01em; color: rgba(0,0,0,0.5); }
.tq-opt > svg { flex: none; color: rgba(0,0,0,0.45); }

/* multi-select tiles with icons */
.tq-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(135px, 30%, 240px), 1fr)); grid-auto-rows: 1fr; gap: 8px; }
/* phones: equal squares, a bit tighter so labels wrap less */
@media (max-width: 480px) {
  .tq-tiles { grid-auto-rows: auto; }
  .tq-tile:not(.wide) { position: relative; min-height: 96px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 12px 14px; }
  .tq-tile:not(.wide) .tx { flex: none; }
  .tq-tile:not(.wide) .ck { position: absolute; top: 12px; right: 12px; }
  .tq-tile .tx, .tq-lg .tq-tile .tx { font-size: 15px; }
}
.tq-tile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 14px; text-align: left; cursor: pointer; border-radius: 8px; border: 1px solid rgba(0,0,0,0.14); background: #FAFAF9; color: #111; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.tq-tile.wide { grid-column: 1 / -1; }
.tq-tile .ic { flex: none; display: flex; opacity: 0.7; }
.tq-tile .tx { flex: 1; font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.2; letter-spacing: -0.03em; text-wrap: pretty; }
.tq-tile .ck { flex: none; display: flex; opacity: 0; }
.tq-tile[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }
.tq-tile[aria-pressed="true"] .ic, .tq-tile[aria-pressed="true"] .ck { opacity: 1; }

/* single-select chips */
.tq-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 30%, 220px), 1fr)); gap: 8px; }
.tq-chip { display: flex; align-items: center; min-height: 46px; padding: 8px 14px; text-align: left; cursor: pointer; border-radius: 8px; border: 1px solid rgba(0,0,0,0.14); background: #FAFAF9; color: #111; font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.2; letter-spacing: -0.02em; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.tq-chip[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }

.tq-note { font-size: 13px; line-height: 1.45; color: #6B4E00; padding: 8px 12px; border-radius: 8px; background: #FFF4D6; }
.tq-slider { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.14); background: #FAFAF9; }
.tq-slider .sv { font-size: 14px; color: rgba(0,0,0,0.6); }
.tq-slider output { font-family: 'DM Sans', sans-serif; font-size: 26px; letter-spacing: -0.04em; color: #111; font-variant-numeric: tabular-nums; }
.tq-slider.unset output { font-size: 20px; color: rgba(0,0,0,0.45); }
.tq-slider .jars { margin-left: 6px; font-size: 13px; color: rgba(0,0,0,0.45); }
.tq-slider input[type=range] { width: 100%; height: 32px; margin: 0; accent-color: #111; cursor: pointer; }
.tq-slider.unset input[type=range] { accent-color: rgba(0,0,0,0.4); }
.tq-ticks { position: relative; width: 100%; height: 16px; font-size: 12px; color: rgba(0,0,0,0.45); font-variant-numeric: tabular-nums; }
.tq-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tq-ticks span:first-child { transform: none; }
.tq-ticks span:last-child { transform: translateX(-100%); }
.tq-slider .tq-note { align-self: stretch; }

.tq-form { display: flex; flex-direction: column; gap: 14px; }
.tq-field { display: flex; flex-direction: column; gap: 6px; }
.tq-field label { font-size: 13px; font-weight: 500; color: #111; }
.tq-field label span { font-weight: 400; color: rgba(0,0,0,0.45); }
.tq-field input, .tq-field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.16); background: rgba(255,255,255,0.7); font: inherit; font-size: 16px; letter-spacing: -0.02em; color: #111; outline: none; transition: border-color 0.2s, background 0.2s; }
.tq-field textarea { min-height: 92px; resize: vertical; }
.tq-field input::placeholder, .tq-field textarea::placeholder { color: rgba(0,0,0,0.4); }
.tq-field .err { font-size: 13px; color: #B3261E; }
.tq-field.bad input { border-color: #B3261E; }
.tq-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tq-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 4px; }
.tq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: 8px; background: #111; color: #fff; font: inherit; font-weight: 500; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; cursor: pointer; transition: background 0.25s; }
.tq-btn:hover { background: #2a2a2a; }
.tq-btn.ghost { background: transparent; color: #111; border: 1px solid rgba(0,0,0,0.3); }
.tq-btn.ghost:hover { background: rgba(0,0,0,0.04); }
.tq-btn.loading { pointer-events: none; background: #2a2a2a; }
.tq-link { padding: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: rgba(0,0,0,0.45); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.tq-link:hover { color: #111; }
.tq-link.add { align-self: flex-start; color: #111; }
.tq-link.add span { color: rgba(0,0,0,0.45); }
.tq-formerr { font-size: 14px; color: #B3261E; }
.tq-editing { font-size: 13px; color: rgba(0,0,0,0.65); padding: 8px 12px; border-radius: 8px; background: #FFF4D6; }
.tq-fineprint { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.1); }
.tq-legal { font-size: 13px; line-height: 1.5; color: rgba(0,0,0,0.45); }
.tq-legal a { color: inherit; }
.tq-fast { font-size: 14px; color: #17301A; }
.tq-fast a { color: inherit; font-weight: 500; }
.tq-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: #111; cursor: pointer; }
.tq-check input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; display: grid; place-items: center; background: #fff; border: 1px solid rgba(0,0,0,0.3); border-radius: 5px; cursor: pointer; }
.tq-check input:checked { background: #111; border-color: #111; }
.tq-check input:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.tq-check span span { display: block; font-size: 13px; color: rgba(0,0,0,0.5); }
.tq-check.small { font-size: 13px; color: rgba(0,0,0,0.55); }
.tq-check.small input { width: 16px; height: 16px; }

/* preliminary fit (side) and summary (contact step, done) */
.tq-fit, .tq-sum { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: rgba(244,245,243,0.85); border: 1px solid rgba(0,0,0,0.06); font-size: 14px; line-height: 1.4; }
.tq-fit { position: sticky; top: 96px; }
.tq-fit h4, .tq-sum h4 { margin: 0; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: -0.03em; }
.tq-muted { font-size: 13px; color: rgba(0,0,0,0.45); }
.tq-fit ul, .tq-sum ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tq-fit li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; color: rgba(0,0,0,0.6); }
.tq-fit li b, .tq-sum li b { color: #111; font-weight: 500; }
.tq-fit .ic { width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; margin-top: 1px; }
.tq-fit .ic.y { background: #17301A; color: #fff; }
.tq-fit .ic.q { background: #FFF4D6; color: #6B4E00; }
.tq-fit .ic.i { background: #111; color: #fff; }
.tq-fit hr { border: 0; border-top: 1px solid rgba(0,0,0,0.1); margin: 0; }
.tq-sum { align-items: flex-start; }
.tq-sum ul { align-self: stretch; }
.tq-sum li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; color: rgba(0,0,0,0.6); }
.tq-sum li em { font-style: normal; color: rgba(0,0,0,0.45); }
.tq-sum .fi { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: rgba(0,0,0,0.6); border: 1px solid rgba(0,0,0,0.12); }
.tq-sum li.ok .fi { color: #17301A; border-color: rgba(23,48,26,0.3); background: #E7F1E9; }
.tq-sum li.warn .fi { color: #6B4E00; border-color: rgba(107,78,0,0.3); background: #FFF4D6; }
.tq-recap { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.tq-recap-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tq-rc { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.14); background: #fff; color: #111; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.tq-rc:hover { border-color: #111; }
.tq-rc svg { flex: none; color: rgba(0,0,0,0.45); }
.tq-done { display: flex; flex-direction: column; gap: 14px; }
.tq-tick { width: 46px; height: 46px; border-radius: 999px; background: #17301A; color: #fff; display: grid; place-items: center; animation: tq-tick 0.3s cubic-bezier(0.16,1,0.3,1) both; }
.tq-tick .draw { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tq-draw 0.45s 0.15s ease-out forwards; }
.tq-done ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; color: rgba(0,0,0,0.6); }
.tq-fit li.new, .tq-sum li.new { animation: qStep 0.35s cubic-bezier(0.16,1,0.3,1) both; }
.tq-spin { width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: tq-spin 0.7s linear infinite; }
@keyframes tq-spin { to { transform: rotate(360deg); } }
@keyframes tq-draw { to { stroke-dashoffset: 0; } }
@keyframes tq-tick { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tq button:focus-visible, .tq input:focus-visible, .tq textarea:focus-visible, .tq a:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.tq-tile:active, .tq-chip:active, .tq-opt:active, .tq-btn:active { transform: scale(0.98); }

/* /quote/: the page header carries progress, so the form runs bigger and frameless */
.tq-lg .tq-q { font-size: clamp(30px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.05em; }
.tq-lg .tq-hint { font-size: clamp(15px, 1.15vw, 17px); color: rgba(0,0,0,0.5); }
.tq-lg .tq-col { gap: 20px; }
.tq-lg .tq-opt { min-height: 72px; padding: 14px 24px; border-radius: 10px; }
.tq-lg .tq-num { width: 26px; height: auto; border: 0; font-size: 14px; letter-spacing: 0.04em; }
.tq-lg .tq-opt-txt { font-size: clamp(18px, 1.8vw, 22px); }
.tq-lg .tq-tile { min-height: 64px; border-radius: 10px; }
.tq-lg .tq-tile .tx { font-size: clamp(16px, 1.4vw, 18px); }
.tq-lg .tq-btn { height: 64px; padding: 0 32px; border-radius: 10px; font-size: 17px; }
.tq-lg .tq-card.split { grid-template-columns: minmax(0, 1fr) minmax(220px, 290px); gap: clamp(24px, 3vw, 44px); }

@media (max-width: 860px) {
  .tq-card.split, .tq-lg .tq-card.split { grid-template-columns: minmax(0, 1fr); }
  .tq-fit { position: static; }
  .tq-actions .tq-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tq *, .tq *::before, .tq *::after { animation: none !important; transition: none !important; }
  .tq-tick .draw { stroke-dashoffset: 0; }
}

/* how it works: four steps in one row */
.timeline-row.t4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .timeline-row.t4 { grid-template-columns: 1fr; } }

/* services tabs: never wider than the screen */
@media (max-width: 480px) {
  .cluster-tabs button { padding: 0 12px !important; font-size: 14px !important; }
}

/* home hero on phones: text first, dark underlay, jar lower and to the right */
@media (max-width: 480px) {
  [data-hero] { justify-content: flex-start !important; padding-top: 104px !important; }
  /* one column inside the underlay: badge, divider, product line, full-width button */
  .hero-meta { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 18px !important; padding: 16px; border-radius: 14px; background: rgba(10,26,12,0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .hero-badges { flex-wrap: wrap; }
  .hero-badges > span:first-child { width: 32px !important; height: 22px !important; }
  .hero-badges > span:nth-child(2) { flex: 1 1 0; max-width: none !important; }
  .hero-badges > span:nth-child(3) { flex: 1 1 100%; max-width: none !important; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.82) !important; }
  [data-hero-bottle] { bottom: -30% !important; right: -36% !important; width: 108vw !important; }
  /* long compounds (DE) break with a hyphen instead of running off the screen */
  [data-hero] h1 > span { white-space: normal !important; }
  [data-hero] h1 span span { max-width: 100%; -webkit-hyphens: manual; hyphens: manual; }
}