/* Option 5 — Sky & Saffron: sky blue with the saffron from the INDOSONNIC logo, geometric Sora headings,
   rounded panels, a sky blue menu bar, a blueprint-grid sky hero and a saffron call-to-action band. */
:root {
  --bg: #f8fbfd; --surface: #ffffff; --surface-2: #eaf5fc; --ink: #142231; --ink-2: #485a6b; --line: #d4e4ef; --field-border: #6b7c8c;
  --primary: #0369a1; --accent: #e8871e; --accent-hover: #f59a35; --accent-ink: #142231; --accent-text: #9e540b;
  --dark: #075985; --dark-2: #0c4a6e; --on-dark: #eaf6fd; --on-dark-2: #b9dcf1;
  --sky-tint: #e0f2fe; --saffron-tint: #fdf0df;
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, monospace;
  --display-transform: none; --display-weight: 700; --display-tracking: -.025em; --display-lh: 1.08;
  --h1: clamp(2.2rem, 4.6vw, 3.8rem); --h2: clamp(1.6rem, 2.8vw, 2.3rem); --h3: 1.1875rem;
  --radius: 12px; --radius-lg: 20px; --shadow: 0 1px 2px rgb(7 89 133 / .05), 0 8px 24px rgb(7 89 133 / .06);
  --section: clamp(60px, 7.5vw, 104px); --header-row: 70px;
}
body { font-size: 1.0625rem; background: var(--bg); }
:focus-visible { outline-color: var(--accent); }

/* buttons: pills */
.btn { border-radius: 999px; font-weight: 700; font-size: .9375rem; padding: 0 24px; }
.btn-primary { color: var(--accent-ink); box-shadow: 0 6px 16px rgb(232 135 30 / .28); }
.btn-secondary { border-width: 1.5px; border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-secondary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.text-link { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.eyebrow, .sec-kicker { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; font-weight: 700; color: var(--accent-text); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--accent); border-radius: 2px; flex: none; }

/* header: white logo row, sky blue menu bar */
.topbar { background: var(--surface-2); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.topbar a { color: var(--primary); }
.site-header { border-bottom: 0; box-shadow: 0 6px 20px rgb(7 89 133 / .12); }
.mainbar { background: var(--primary); border-top: 0; }
.mainbar::after { background: linear-gradient(to right, rgb(3 105 161 / 0), var(--primary)) !important; }
.menu-link { color: #e6efe9; font-weight: 500; }
.menu-link:hover { color: #fff; }
.menu-link.is-current { color: #fff; font-weight: 700; }
.menu-link.is-current::after { height: 4px; background: var(--accent); bottom: 0; border-radius: 4px 4px 0 0; }

/* hero: deep-to-bright sky blue with a faint blueprint grid; the photograph dissolves into it */
.hero, .hero--plain { background-color: var(--dark); color: var(--on-dark);
  background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(120deg, #075985 0%, #0369a1 55%, #0284c7 100%);
  background-size: 40px 40px, 40px 40px, auto; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: #f6b56c; }
.hero .breadcrumbs { color: var(--on-dark-2); }
.hero .lead, .hero .lead--more { color: var(--on-dark); }
.hero-sub { color: #fff; font-weight: 600; text-transform: none; letter-spacing: -.01em; }
.hero-tagline { color: #f6b56c; }
.hero .btn-secondary { color: #fff; border-color: rgb(255 255 255 / .6); }
.hero .btn-secondary:hover { background: #fff; color: var(--primary); border-color: #fff; }
.hero .pillars { color: var(--on-dark-2); }
.hero .slide-dot[aria-current="true"] span { background: var(--accent); }
.hero-cap { color: #fff; }
@media (min-width: 900px) {
  .hero--image .hero-media { width: min(64%, 1200px); }
  .hero--image .hero-text { max-width: min(620px, 50%); }
}
.hero--image::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--accent) 0 50%, #38bdf8 50%); opacity: .9; z-index: 1; }

/* product switcher and "On this page" */
.subnav { background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav a { border-radius: 999px; }
.subnav a[aria-current="page"] { background: var(--sky-tint); color: var(--primary); box-shadow: none; font-weight: 700; }
.pagenav { background: var(--surface-2); }
.pagenav a { background: var(--surface); border-color: var(--line); }
.pagenav a:hover { border-color: var(--primary); color: var(--primary); background: var(--sky-tint); }

/* sections: white and pale sky bands, headings on top with a saffron marker */
.sec:nth-of-type(odd) { background: var(--bg); }
.sec:nth-of-type(even) { background: var(--surface-2); }
.sec-title { font-size: var(--h2); max-width: 26ch; }
.sec-head { margin-bottom: 28px; }
.sec-head .sec-title { position: relative; }
.sec--intro .sec-main > p:first-child { font-size: 1.1875rem; color: var(--primary); }
.media img, .range-media img, .strip img { border-radius: var(--radius-lg); }
.media-cap, .cap-class { color: var(--ink-2); }
.media--head img { aspect-ratio: 16 / 10; }
@media (min-width: 1000px) {
  /* chapter sections: photograph beside the heading instead of a side column */
  .sec--chapter .sec-head:has(.sec-title) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 8px 48px; align-items: end; }
  .sec--chapter .sec-head .eyebrow, .sec--chapter .sec-head .sec-title { grid-column: 1; }
  .sec--chapter .sec-head .media--head { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  /* chapter without its own heading: photograph floats beside the opening paragraphs */
  .sec--chapter .sec-head:not(:has(.sec-title)) { margin-bottom: 8px; }
  .sec--chapter .sec-head:not(:has(.sec-title)) .media--head { float: right; width: min(380px, 38%); margin: 0 0 24px 48px; }
  .sec--chapter .subsec { clear: both; }
}

/* cards and lists */
.card { border: 0; box-shadow: var(--shadow); border-radius: var(--radius-lg); }
.sec:nth-of-type(odd) .card { background: var(--surface); }
.card--feature .card-media img { aspect-ratio: 3 / 2; }
.card--feature:hover, .card--plain:hover { box-shadow: 0 2px 4px rgb(7 89 133 / .06), 0 16px 40px rgb(7 89 133 / .12); }
.card-index { font-family: var(--font-mono); color: var(--accent-text); }
.card-title { letter-spacing: -.015em; }
.card-tagline { color: var(--primary); }
.chip { border-radius: 999px; background: var(--surface); border-color: var(--line); color: var(--primary); }
.chip:hover { background: var(--sky-tint); border-color: var(--primary); }
.check-list li::before { border-color: #38bdf8; }
.terms li { border-color: var(--line); }
.term { color: var(--primary); }
.spec-list { border-top: 3px solid var(--primary); }
.note { background: var(--saffron-tint) !important; border-left-color: var(--accent); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink); }
.statement { border-left-color: var(--accent); }
.statement-card { border-top-color: var(--accent); box-shadow: var(--shadow); border: 0; border-top: 5px solid var(--accent); }

/* specification tables: rounded, dark green heading row */
.table-wrap { border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--line); overflow: auto; background: var(--surface); }
.spec-table thead th { background: var(--primary); color: #fff; border: 0; letter-spacing: .06em; }
.spec-table tbody tr:nth-child(even) { background: #f3f9fd; }
.spec-table tbody th { color: var(--primary); }

/* link rows, formats, standards index */
.link-rows { border-top: 1px solid var(--line); }
.link-rows a:hover, .formats a:hover { background: var(--sky-tint); }
.link-rows .ico-arrow, .formats .ico-arrow { color: var(--accent-text); }
.formats { border-top-color: var(--primary); }

/* flows and steps */
.flow-n { border-radius: 50%; background: var(--primary); }
.flow li:last-child .flow-n { background: var(--accent); color: var(--accent-ink); }
.sec--flowband { background-color: var(--dark) !important; background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(120deg, #075985, #0369a1); background-size: 40px 40px, 40px 40px, auto; }
.sec--flowband .flow-n { background: rgb(255 255 255 / .1); color: #fff; }
.sec--flowband li:last-child .flow-n { background: var(--accent); color: var(--accent-ink); }
.sec--flowband .eyebrow { color: #f6b56c; }
.step-n { font-family: var(--font-mono); font-size: .875rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--saffron-tint); color: var(--accent-text); font-weight: 700; }
.faq-item summary { font-weight: 600; color: var(--primary); }

/* selectable sub-item panels: pill tabs, selected = solid sky blue */
.explorer-tab { border-radius: 999px; border-color: var(--line); background: var(--surface); padding-inline: 16px; }
.explorer-tab:hover { border-color: var(--primary); background: var(--sky-tint); }
.explorer-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 16px rgb(7 89 133 / .25); }
.explorer-tab[aria-selected="true"] .explorer-n { color: #f6b56c; opacity: 1; }
.explorer-panels { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 36px); }
.explorer.is-enhanced .explorer-panel + .explorer-panel { margin-top: 0; }
.explorer:not(.is-enhanced) .explorer-panel + .explorer-panel { border-top-color: var(--line); }
.panel-title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.panel-head { border-bottom-color: var(--line); }
.panel-media .media img { border-radius: var(--radius); }
.sec--explorer .enquiry-form { box-shadow: none; border: 1px solid var(--line); }

/* product range page: each product on its own rounded panel */
.range-item { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(16px, 2.4vw, 28px); }
@media (min-width: 900px) { .range-item { align-items: stretch; } .range-media { display: block; } .range-media img { height: 100%; min-height: 320px; aspect-ratio: auto; } }
.range-title { letter-spacing: -.025em; }
.range-h { color: var(--accent-text); font-weight: 700; }

/* forms and contact */
.enquiry-form, .contact-card { border: 1px solid var(--line); border-top: 5px solid var(--primary); box-shadow: var(--shadow); }
.form-step { background: var(--primary); color: #fff; border-radius: 999px; padding: 2px 9px; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--sky-tint); }
.choice input { accent-color: var(--primary); }
input, select, textarea { border-radius: 10px !important; }
.filter { border-radius: 999px; }
.filter[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); }

/* call-to-action band: saffron */
.cta-band { background: var(--accent); color: var(--ink); }
.cta-band h2 { color: var(--ink); }
.cta-band p { color: #2a2a22; }
.cta-band .btn-primary { background: var(--primary); color: #fff; box-shadow: none; }
.cta-band .btn-primary:hover { background: var(--dark-2); }
.cta-band .btn-secondary { color: var(--ink); border-color: var(--ink); }
.cta-band .btn-secondary:hover { background: var(--ink); color: var(--accent); border-color: var(--ink); }

/* previous / next and footer */
.pn-t { color: var(--primary); }
.pn-dir { color: var(--accent-text); }
.site-footer { background: #0b3a57; }
.footer-ctas a { color: #f6b56c !important; }