/* UniPure Modern — main stylesheet */

/* ---------- Fonts (bundled; no outside requests) ---------- */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --night: #071A2E;      /* hero / footer ground */
  --night-2: #0C243D;    /* panels on night */
  --night-line: #1B3B5C;
  --navy: #00467F;       /* UniPure brand navy */
  --navy-ink: #0B2540;   /* headings */
  --orange: #F7A11A;     /* UniPure brand orange (fills, large text on dark) */
  --orange-ink: #A85A00; /* orange text on light grounds (AA) */
  --text: #1B2733;
  --text-2: #3A4856;
  --muted: #51606F;
  --on-dark: #E8EEF4;
  --on-dark-2: #B9C7D5;
  --on-dark-3: #8FA3B7;
  --line: #D9E1E8;
  --tint: #F2F5F8;
  --fallback: #E6ECF2;
  --radius: 14px;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
a:hover { color: #002F57; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; color: var(--navy-ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 12px 18px; background: #FFFFFF; color: var(--navy); border-radius: 8px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.section { padding-block: 96px; }
.section-tight { padding-block: 64px 72px; }
.section-dark { background: var(--night); color: var(--on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #FFFFFF; }
.section-tint { background: var(--tint); }
.section-orange { background: var(--orange); color: var(--night); }
.section-orange h2 { color: var(--night); }

.eyebrow { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 12px; }
.section-dark .eyebrow { color: var(--orange); }
.h1 { font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.02em; max-width: 900px; }
.h1-sm { font-size: clamp(36px, 4.8vw, 58px); line-height: 1.04; letter-spacing: -0.02em; max-width: 880px; }
.h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; max-width: 820px; }
.h2-sm { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; }
.lead { font-size: 20px; line-height: 1.5; color: var(--text-2); max-width: 700px; margin-top: 20px; }
.section-dark .lead { color: var(--on-dark-2); }
.body-lg { font-size: 19px; color: var(--text-2); }
.section-dark .body-lg { color: var(--on-dark-2); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

.head-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.head-split > :first-child { flex: 1 1 520px; min-width: 0; }
.head-split > p { flex: 0 1 400px; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 8px; font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .15s, color .15s, border-color .15s; }
.btn svg { flex: none; }
.btn-orange { background: var(--orange); color: var(--night); }
.btn-orange:hover { background: #FFB43F; color: var(--night); }
.btn-navy { background: var(--navy); color: #FFFFFF; }
.btn-navy:hover { background: #003866; color: #FFFFFF; }
.btn-night { background: var(--night); color: #FFFFFF; }
.btn-night:hover { background: #10304F; color: #FFFFFF; }
.btn-ghost-dark { border-color: #5A7896; color: #FFFFFF; font-weight: 600; }
.btn-ghost-dark:hover { border-color: #FFFFFF; color: #FFFFFF; }
.btn-ghost { border-color: #9FB1C2; color: var(--navy-ink); font-weight: 600; }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn-outline-night { border: 2px solid var(--night); color: var(--night); }
.btn-outline-night:hover { background: var(--night); color: #FFFFFF; }
.btn-sm { min-height: 48px; padding: 0 20px; font-size: 16px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; }

/* ---------- Header ---------- */
.site-header { background: var(--night); border-bottom: 1px solid #16324F; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 16px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.brand-name { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--orange); }
.brand:hover .brand-name { color: #FFB43F; }
.main-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 28px; }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); text-decoration: none; font-weight: 500; }
.main-nav a:hover { color: #FFFFFF; box-shadow: inset 0 -2px 0 #5A7896; }
.main-nav .current-menu-item > a, .main-nav .current_page_item > a, .main-nav a[aria-current="page"] { color: var(--orange); font-weight: 600; box-shadow: inset 0 -2px 0 var(--orange); }
.header-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid #3A5A7A; border-radius: 8px; color: #FFFFFF; text-decoration: none; font-weight: 600; }
.header-call:hover { color: #FFFFFF; border-color: #FFFFFF; }

/* ---------- Hero + counter ---------- */
.hero { padding-block: 80px 72px; }
.hero .lead { color: var(--on-dark-2); max-width: 680px; margin-top: 24px; }
.counter-panel { margin-top: 64px; background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--radius); padding: 28px 32px 30px; display: flex; flex-direction: column; gap: 18px; }
.counter-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.counter-label { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-2); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(247,161,26,.22); animation: livepulse 2s ease-in-out infinite; }
@keyframes livepulse { 50% { box-shadow: 0 0 0 7px rgba(247,161,26,.08); } }
.counter-rate { font-family: var(--mono); font-size: 13px; color: var(--on-dark-3); }
.odometer { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 5px; font-family: var(--mono); font-weight: 600; font-size: clamp(22px, 6vw, 68px); line-height: 1; font-variant-numeric: tabular-nums; }
.odometer .d { display: inline-flex; align-items: center; justify-content: center; min-width: .78em; padding: .14em .1em; background: #12304F; border: 1px solid #23476B; border-radius: .12em; color: #FFFFFF; }
.odometer .s { display: inline-flex; align-items: flex-end; padding: 0 .02em .12em; color: #6F8AA5; }
.odometer .d:last-child { background: var(--orange); border-color: var(--orange); color: var(--night); }
.counter-caption { font-size: 18px; color: var(--on-dark); }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Cards ---------- */
.cards { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; }
.card { flex: 1 1 320px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 16px; background: #FFFFFF; }
.card-num { font-family: var(--mono); font-size: 14px; color: var(--orange-ink); }
.card h3 { font-size: 26px; line-height: 1.15; }
.card > p { color: var(--muted); }
.card .link-arrow { margin-top: auto; }
.checklist { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.checklist li { display: flex; gap: 10px; }
.checklist svg { flex: none; margin-top: 3px; }
.section-dark .checklist { gap: 12px; }
.spec-list { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; font-size: 16px; }
.spec-list dd { margin: 0; font-family: var(--mono); font-size: 14px; color: var(--muted); text-align: right; }

/* ---------- Split feature ---------- */
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.split > * { flex: 1 1 440px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stats { display: flex; flex-wrap: wrap; gap: 16px; }
.stat-box { flex: 1 1 150px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.stat-box strong { display: block; font-size: clamp(30px, 2.6vw, 44px); white-space: nowrap; line-height: 1; font-weight: 600; color: var(--navy); }
.stat-box span { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }
.media { border-radius: var(--radius); overflow: hidden; background: var(--fallback); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--fallback) repeating-linear-gradient(-55deg, transparent 0 22px, rgba(0,70,127,.045) 22px 24px); }
.media-fallback svg { opacity: .35; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-16x9 { aspect-ratio: 16 / 9; }

/* ---------- Evolution bars ---------- */
.evo { margin-top: 48px; border-top: 1px solid var(--line); }
.evo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.evo-meta { flex: 1 1 260px; min-width: 0; }
.evo-year { font-family: var(--mono); font-size: 15px; color: var(--orange-ink); }
.evo-title { font-size: 20px; font-weight: 600; color: var(--navy-ink); margin-top: 4px; }
.evo-sub { font-size: 15px; color: var(--muted); margin-top: 2px; }
.evo-bars { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bar { display: flex; align-items: center; gap: 14px; }
.bar-label { flex: none; width: 104px; font-size: 14px; color: var(--muted); }
.bar-track { flex: 1; height: 14px; background: #EEF2F6; border-radius: 7px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 7px; background: var(--navy); }
.bar-fill.orange { background: var(--orange); }
.bar-value { flex: none; width: 104px; text-align: right; font-family: var(--mono); font-size: 15px; color: var(--navy-ink); }
.bar-value.win { font-weight: 600; color: var(--navy); }

/* ---------- Steps on dark ---------- */
.steps-dark { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.steps-dark li { display: flex; gap: 18px; background: var(--night-2); border: 1px solid var(--night-line); border-radius: 12px; padding: 22px 24px; }
.steps-dark .num { flex: none; font-family: var(--mono); font-size: 15px; color: var(--orange); }
.steps-dark strong { display: block; font-size: 19px; font-weight: 600; color: #FFFFFF; }
.steps-dark span span { color: var(--on-dark-2); }

/* ---------- Proof ---------- */
.big-stats { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; }
.big-stat { flex: 1 1 240px; border-top: 3px solid var(--navy); padding-top: 18px; }
.big-stat strong { display: block; font-size: 40px; line-height: 1.05; font-weight: 600; color: var(--navy-ink); }
.big-stat span { display: block; margin-top: 10px; color: var(--muted); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; }
.chips .mono { color: var(--orange-ink); margin-right: 6px; }

/* ---------- CTA band ---------- */
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding-block: 72px; }
.cta-band h2 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; }
.cta-band p { margin-top: 12px; font-size: 19px; color: #2A2410; }
.cta-band .btn-row { margin-top: 0; }
.cta-box { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; border-radius: 16px; padding: 32px 36px; }
.cta-box.dark { background: var(--night); color: var(--on-dark); }
.cta-box.orange { background: var(--orange); color: var(--night); }
.cta-box .title { font-size: 24px; font-weight: 700; }
.cta-box.dark .title { color: #FFFFFF; font-weight: 600; }
.cta-box.dark p:not(.title) { color: var(--on-dark-2); margin-top: 6px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--on-dark-2); font-size: 15px; }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; padding-block: 56px 40px; }
.site-footer .cols > * { flex: 1 1 240px; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer a { color: #FFFFFF; }
.site-footer .legal { border-top: 1px solid #16324F; padding-block: 20px 32px; font-size: 14px; color: var(--on-dark-3); }

/* ---------- Equipment ---------- */
.product-pair { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; }
.product { flex: 1 1 480px; min-width: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.product .media { border-radius: 0; border-bottom: 1px solid var(--line); }
.product-body { padding: 32px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.product-body h3 { font-size: 28px; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.badge { padding: 4px 10px; border-radius: 999px; background: #E3EDF7; color: var(--navy); font-size: 13px; font-weight: 600; }
.faq { margin-top: 8px; border-top: 1px solid #E3E9EF; padding-top: 18px; }
.faq h4 { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.faq ul { list-style: none; }
.faq li + li { border-top: 1px solid #EEF2F6; }
.faq a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; text-decoration: none; font-weight: 500; }
.doc-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.doc-links a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; font-weight: 600; }
.doc-links a:hover { border-color: var(--navy); }
.doc-links .tag { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.callout { margin-top: auto; background: var(--tint); border-radius: 12px; padding: 20px 22px; }
.callout strong { display: block; color: var(--navy-ink); font-weight: 600; }
.callout p { margin-top: 6px; font-size: 16px; color: var(--text-2); }
.sale-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 44px; }
.sale-item { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.sale-item .media { border-radius: 0; }
.sale-item .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.sale-item h3 { font-size: 21px; }
.sale-item .spec { font-family: var(--mono); font-size: 15px; color: var(--navy); }
.sale-item .note { font-size: 14px; color: var(--muted); }
.divider-top { border-top: 1px solid var(--line); padding-top: 56px; }

/* ---------- Technology ---------- */
.fact-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; list-style: none; }
.fact-row li { padding: 10px 16px; border: 1px solid var(--night-line); background: var(--night-2); border-radius: 999px; font-size: 15px; color: var(--on-dark); }
.chart { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 18px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.step-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 44px; }
.step-grid li { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.step-grid .num { font-family: var(--mono); font-size: 15px; color: var(--orange-ink); }
.step-grid p { color: var(--text-2); }
.benefits { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 48px; }
.benefits > div { border-top: 1px solid var(--line); padding: 24px 0; }
.benefits h3 { font-size: 20px; margin-bottom: 6px; }
.benefits p { color: var(--text-2); }
.configs { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 20px; }
.config { flex: 1 1 420px; min-width: 0; background: var(--night); color: var(--on-dark); border-radius: 16px; padding: 32px; }
.config .eyebrow { color: var(--orange); margin-bottom: 8px; }
.config h3 { color: #FFFFFF; font-size: 26px; margin-bottom: 10px; }
.config p { color: var(--on-dark-2); }
.service-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-top: 44px; }
.service-list li { display: flex; gap: 18px; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.service-list .n { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 15px; }
.service-list strong { display: block; font-size: 19px; font-weight: 600; color: var(--navy-ink); }
.service-list span span { color: var(--text-2); }
.anim-wrap { margin-top: 48px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--night-line); background: var(--night-2); }
.anim-wrap iframe { display: block; width: 100%; aspect-ratio: 820 / 613; border: 0; }

/* ---------- About timeline ---------- */
.timeline { list-style: none; margin-top: 48px; border-left: 2px solid var(--line); padding-left: 0; }
.timeline li { position: relative; display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 0 0 26px 32px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--navy); }
.timeline li.key::before { background: var(--orange); border-color: var(--orange); }
.timeline .yr { flex: none; width: 64px; font-family: var(--mono); font-size: 16px; color: var(--orange-ink); }
.timeline .ev { flex: 1 1 420px; min-width: 0; color: var(--text-2); }

/* ---------- Contact ---------- */
.contact-grid { display: flex; flex-wrap: wrap; gap: 48px; }
.contact-side { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; }
.contact-card h2 { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.contact-card .big-phone { display: block; font-size: 30px; line-height: 1.2; font-weight: 600; color: var(--navy-ink); text-decoration: none; }
.contact-card dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; font-size: 16px; }
.contact-card dt { color: var(--muted); }
.contact-card dd { margin: 0; color: var(--navy-ink); }
.contact-card dd a { color: var(--navy-ink); }
.map-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.map-card iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; background: var(--fallback); }
.map-card .body { padding: 20px 28px 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.map-card h2 { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.map-card address { font-style: normal; color: var(--navy-ink); line-height: 1.6; }
.contact-form { flex: 1.4 1 480px; min-width: 0; background: var(--tint); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 20px; align-self: flex-start; }
.contact-form h2 { font-size: 28px; }
.field-row { display: flex; flex-wrap: wrap; gap: 20px; }
.field { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; color: var(--navy-ink); }
.field input, .field select, .field textarea { min-height: 48px; padding: 0 14px; border: 1px solid #9FB1C2; border-radius: 8px; font: inherit; color: var(--text); background: #FFFFFF; width: 100%; }
.field textarea { padding: 12px 14px; resize: vertical; min-height: 170px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(0,70,127,.25); border-color: var(--navy); }
.field .hint { font-size: 15px; color: var(--muted); }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { border-radius: 10px; padding: 16px 18px; font-weight: 600; }
.notice.ok { background: #E3F3E8; color: #1D5C33; border: 1px solid #A9D7B7; }
.notice.err { background: #FBE9E7; color: #8A2418; border: 1px solid #EDB3AA; }

/* ---------- Generic page content ---------- */
.entry { max-width: 780px; }
.entry > * + * { margin-top: 1em; }
.entry h2 { font-size: 30px; margin-top: 1.6em; }
.entry h3 { font-size: 22px; margin-top: 1.4em; }
.entry ul, .entry ol { padding-left: 1.4em; }
.entry img { border-radius: 10px; }

/* ---------- Phones ---------- */
@media (max-width: 700px) {
  .section { padding-block: 64px; }
  .hero { padding-block: 56px 48px; }
  .counter-panel { padding: 22px 18px 24px; margin-top: 44px; }
  .odometer { gap: 3px; }
  .card, .product-body, .contact-form, .config { padding: 24px; }
  .main-nav ul { gap: 0 20px; }
  .header-call { width: 100%; justify-content: center; }
  .cta-box { padding: 26px 24px; }
  .bar-label { width: 84px; }
  .bar-value { width: 92px; }
}

/* Counter heading sits inside a dark section but keeps its small label style */
.counter-panel .counter-label { color: var(--on-dark-2); font-weight: 500; letter-spacing: 0.12em; }

/* ---------- Photos ---------- */
/* Photo strip across the top of a home-page card (one or two photos) */
.card { overflow: hidden; }
.card-media { margin: -32px -32px 8px; aspect-ratio: 16 / 10; display: grid; grid-template-rows: minmax(0, 1fr); gap: 3px; background: #FFFFFF; }
.card-media.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.card-media .media { position: relative; border-radius: 0; height: 100%; aspect-ratio: auto; }
.card-media .media img { position: absolute; inset: 0; }

/* Section intro with a photo beside the heading */
.intro-split { align-items: center; }
.intro-split .media { box-shadow: 0 1px 0 var(--line); }

/* Main photo plus a row of three */
.photo-set { display: flex; flex-direction: column; gap: 12px; }
.photo-set .thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.photo-set .thumbs .media { border-radius: 10px; }

@media (max-width: 700px) {
  .card-media { margin: -24px -24px 6px; }
  .photo-set .thumbs { gap: 8px; }
}
/* Product cards shown without a photo get a slim accent instead */
.sale-item:not(:has(.media)), .product:not(:has(.media)) { border-top: 3px solid var(--navy); }