@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-condensed-500.woff2") format("woff2"), url("../fonts/barlow-condensed-500.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-400.woff2") format("woff2"), url("../fonts/source-sans-400.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-600.woff2") format("woff2"), url("../fonts/source-sans-600.ttf") format("truetype"); }

/* Overland: the metal leads, the type stays quiet, red marks what matters. */
:root {
  --paper: #f6f6f3;
  --stone: #e7e8e4;
  --graphite: #1e2220;
  --ink: #1f2220;
  --muted: #555a56;
  --line: #c6c9c3;
  --red: #d4141c;
  --red-dark: #ae1118;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --gutter: clamp(20px, 4.5vw, 72px);
  --section: clamp(56px, 7vw, 112px);
  --radius: 8px;
  --max: 1440px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--red); color: white; }
img, video { display: block; max-width: 100%; height: auto; }
figure, dl, dd { margin: 0; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; cursor: pointer; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: 0 0 auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.02; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(3rem, 5.6vw, 5.4rem); }
h2 { font-size: clamp(2.4rem, 3.7vw, 3.8rem); }
h3 { font-size: 1.65rem; line-height: 1.1; }
p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.5; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 14px 18px; background: white; color: var(--ink); }
[hidden] { display: none !important; }

/* Layout */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap > *, .split > *, .head > *, .intro-grid > * { min-width: 0; }
.section { padding-block: var(--section); }
.stone { background: var(--stone); }
.dark { background: var(--graphite); color: var(--paper); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: start; margin-bottom: clamp(40px, 4.5vw, 64px); }
.head p { max-width: 50ch; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split--flip > figure { order: -1; }
.split-copy h2 { margin-bottom: 24px; }
/* Home sections open with the menu word they lead to, styled like the active menu item. */
.section-tag { display: inline-block; margin-bottom: 20px; padding: 16px 0 8px; border-bottom: 2px solid var(--red); font-size: 1.1rem; font-weight: 600; line-height: 1; text-decoration: none; }
.section-tag:hover { color: var(--red); }
.split figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

/* Links and buttons */
.actions { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; gap: 18px; min-height: 52px; padding: 13px 22px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent; transition: background-color 160ms, color 160ms, border-color 160ms; }
.btn-red { background: var(--red); color: white; }
.btn-red:hover { background: var(--red-dark); }
.btn-white { background: var(--paper); color: var(--ink); }
.btn-white:hover { background: var(--ink); color: white; }
.btn-line { border-color: currentColor; }
.btn-line:hover { background: var(--ink); border-color: var(--ink); color: white; }
.text-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-weight: 600; font-size: 1rem; text-decoration: none; border-bottom: 1px solid currentColor; }
.text-link svg { transition: transform 160ms; }
.text-link:hover { color: var(--red); }
.text-link:hover svg { transform: translateX(4px); }
.split-copy .text-link, .split-copy .btn { margin-top: 28px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(246 246 243 / .96); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.header-row { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand img { width: 140px; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 10px; }
.site-nav .nav-contact { gap: 12px; padding-inline: 18px; min-height: 44px; background: var(--red); color: white; }
.site-nav .nav-contact:hover, .site-nav .nav-contact[aria-current="page"] { background: var(--red-dark); text-decoration: none; }
.site-nav .nav-contact svg { width: 16px; height: 16px; }
.nav-toggle { display: none; }

/* Home hero: red band over the full film */
.hero-statement { background: var(--red); color: white; }
.hero-statement .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 64px; padding-block: clamp(32px, 3.4vw, 52px); }
.hero-statement h1 { font-size: clamp(2.8rem, 4.8vw, 4.6rem); line-height: .98; }
.hero-intro { max-width: 30rem; }
.hero-intro p { font-size: 1.2rem; margin-bottom: 20px; }
.hero-statement .btn-white:focus-visible { outline-color: white; }
.hero-film { position: relative; background: var(--graphite); }
.hero-film video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Play/pause as a small round icon in the bottom-left corner, the one spot the words in the film never reach; the text stays for screen readers. */
.video-toggle { position: absolute; left: 16px; bottom: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgb(255 255 255 / .6); border-radius: 50%; font-size: 0; color: white; background: rgb(30 34 32 / .5); }
.video-toggle:hover { background: var(--red); border-color: var(--red); }
.video-toggle:focus-visible { outline-color: white; }
.video-toggle::before { content: ""; box-sizing: border-box; width: 12px; height: 13px; border-inline: 4px solid white; }
.video-toggle[aria-pressed="false"]::before { width: 0; height: 0; margin-left: 4px; border: 7px solid transparent; border-right: 0; border-left: 11px solid white; }

/* Home blocks */
.sector-links { margin-top: 28px; border-bottom: 1px solid var(--line); }
.sector-links a { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 50px; border-top: 1px solid var(--line); font: 500 1.35rem/1.1 var(--font-display); text-decoration: none; }
.sector-links a:hover { color: var(--red); }
.sector-links a:hover svg { transform: translate(3px, -3px); }
.sector-links svg { transition: transform 160ms; }

/* Inner page intro: title and lede, then a wide image band */
.intro { padding-block: clamp(56px, 6vw, 96px) clamp(40px, 4vw, 64px); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.intro .lede { max-width: 46ch; }
.jump { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 24px; }
.jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 1rem; text-decoration: none; border-bottom: 1px solid currentColor; }
.jump a:hover { color: var(--red); }
/* Inner page opening, as on the previous site: a darkened photo across the full width with the title in white on it. */
.page-hero { position: relative; display: flex; align-items: center; min-height: clamp(420px, 58vh, 620px); padding-block: clamp(56px, 6vw, 96px); color: #fff; }
.page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(12 14 13 / .78) 0%, rgb(12 14 13 / .5) 50%, rgb(12 14 13 / .12) 100%); }
.page-hero .wrap { position: relative; z-index: 2; width: 100%; }
.page-hero-card { max-width: 720px; }
.page-hero-card h1 { margin-bottom: 20px; color: #fff; }
.page-hero-card .lede { max-width: 46ch; color: rgb(255 255 255 / .88); }
.page-hero-card .jump a { color: #fff; }
.page-hero-card .jump a:hover { color: #fff; border-color: var(--red); }

/* Company */
.facts-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--ink); }
.facts-band div { padding: 24px 24px 0 0; }
.facts-band div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts-band dt { font: 500 clamp(2rem, 2.8vw, 2.7rem)/1.02 var(--font-display); color: var(--red); }
.facts-band dd { margin-top: 10px; font-size: 1rem; color: var(--muted); line-height: 1.45; }
.mosaic { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.mosaic .m-main { grid-row: span 2; }
.mosaic .m-main img { aspect-ratio: 4 / 5; }
.mosaic .m-side img { aspect-ratio: 4 / 3; }

/* Technology: line diagram, drawn as in the brochure (grey strip band, dark rollers, light tanks) with soft shadows */
.line-figure { background: var(--paper); padding: clamp(20px, 3vw, 44px); border-radius: var(--radius); }
.line-scroll { overflow-x: auto; }
.line-svg { display: block; width: 100%; min-width: 760px; height: auto; }
.line-svg .shadow, .cb-shadow { fill: #000; opacity: .14; filter: url(#ls-blur); }
.line-svg .bath { fill: url(#ls-tank); stroke: var(--line); stroke-width: 1.5; }
.line-svg .liquid { fill: url(#ls-liquid); }
.line-svg .key .bath { stroke: var(--red); }
.line-svg .key .liquid { fill: url(#ls-liquid-key); }
.line-svg .roll, .cb-silver-roll { fill: url(#ls-roll); }
.line-svg .rings, .cb-rings { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: 1.2; }
.line-svg .hub { fill: #fff; }
.line-svg .axle { fill: var(--ink); }
.line-svg .turn { fill: none; stroke: #7a807b; stroke-width: 1.5; stroke-linecap: round; }
.line-svg .strip { fill: none; stroke: #aab1b5; stroke-width: 8; stroke-linejoin: round; }
.line-svg .strip-light { stroke: #eef1f2; stroke-width: 3.5; }
.line-svg .rollers { fill: #fff; stroke: var(--ink); stroke-width: 6.5; }
.line-svg text { fill: var(--ink); font: 500 18px var(--font-body); }
.line-svg .labels text, .line-svg .phases text { text-anchor: middle; }
.line-svg .labels text:not(.end) { font-weight: 600; }
.line-svg .labels text.end { fill: var(--muted); }
.line-svg .phases path { fill: none; stroke: #7a807b; stroke-width: 1; }
.line-svg .phases text { font-size: 13px; letter-spacing: .08em; }
.line-svg .key text, .line-svg text.key { fill: var(--red); }
.line-caption { margin: 16px 0 0; font-size: 1rem; color: var(--muted); }
/* On narrower screens the diagram keeps its size and scrolls sideways; this line says so. */
.line-hint { display: none; margin: 0 0 10px; font-size: .9rem; color: var(--muted); }
/* The step list supports the diagram: small names, little space. */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding: 14px 18px 0 0; border-top: 2px solid var(--ink); }
.steps li + li { padding-left: 18px; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 8px; font: 500 .95rem/1 var(--font-display); color: var(--muted); }
.steps .is-key { border-top: 4px solid var(--red); margin-top: -2px; padding: 14px 20px 16px; background: var(--paper); }
.steps .is-key::before, .steps .is-key strong { color: var(--red); }
.steps strong { display: block; margin-bottom: 6px; font: 500 1.3rem/1.1 var(--font-display); }
.steps span { display: block; font-size: 1rem; color: var(--muted); line-height: 1.5; }

/* Technology: coil or batch. Each difference is drawn as the surface you receive, in soft satin metal;
   both methods are styled alike, so neither reads as the right or wrong answer. */
.cb { display: grid; grid-template-columns: minmax(110px, .4fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(32px, 4vw, 56px); }
.cb-head { display: flex; flex-direction: column; padding: 0 0 20px; border-bottom: 2px solid var(--ink); }
.cb-head p:last-child { margin-top: auto; padding-top: 10px; }
.cb-head h3 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1; }
.cb-head p { margin: 0; max-width: 36ch; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.cb-label { margin: 0; padding: 22px 0; border-bottom: 1px solid var(--line); font: 500 clamp(1.3rem, 1.7vw, 1.6rem)/1.15 var(--font-display); }
.cb-cell { margin: 0; padding: 20px 0 22px; border-bottom: 1px solid var(--line); font-size: 1.05rem; line-height: 1.5; }
.cb-cell > svg { display: block; width: 100%; max-width: 480px; height: auto; margin-bottom: 12px; }
.cb-silver { fill: url(#cb-silver); }
.cb-gold-l { fill: url(#cb-gold-l); }
.cb-gold-m { fill: url(#cb-gold-m); }
.cb-gold-d { fill: url(#cb-gold-d); }
.cb-gold-roll { fill: url(#cb-gold-roll); }
.cb-core { fill: var(--paper); }
.cb-rail { fill: none; stroke: #7a807b; stroke-width: 2; stroke-linecap: round; }
.cb-mark { fill: var(--ink); }
.cb-halo { fill: var(--ink); opacity: .12; }

/* Products */
.props-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.props-intro h2 { margin-bottom: 20px; }
.props-intro figure { margin-top: 36px; }
.props-intro img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.props div { padding: 22px 24px 24px 0; border-bottom: 1px solid var(--line); }
.props div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
.props h3 { margin-bottom: 10px; font-size: 1.55rem; }
.props p { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.tablist { display: none; }
.finish-tabs.is-enhanced .tablist { display: flex; gap: 8px; margin-bottom: 24px; }
/* Finish tabs and the finish card sit on the page as white, softly shadowed pieces, rounded like the photos. */
.tab { min-height: 46px; padding: 6px 24px; border: 1px solid #d3d6d0; border-radius: var(--radius); background: #fff; box-shadow: 0 1px 2px rgb(30 34 32 / .06), 0 6px 16px rgb(30 34 32 / .08); font: 500 1.4rem/1 var(--font-display); transition: box-shadow 160ms, border-color 160ms; }
.tab:hover { border-color: var(--ink); box-shadow: 0 1px 2px rgb(30 34 32 / .08), 0 10px 22px rgb(30 34 32 / .12); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: white; box-shadow: 0 1px 2px rgb(30 34 32 / .12), 0 8px 20px rgb(30 34 32 / .18); }
.tab-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.tab-panel + .tab-panel { margin-top: 64px; }
.is-enhanced .tab-panel + .tab-panel { margin-top: 0; }
.tab-panel:focus-visible { outline-offset: 8px; }
.tab-finish { position: sticky; top: 104px; background: #fff; border: 1px solid #d3d6d0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 3px rgb(30 34 32 / .06), 0 14px 36px rgb(30 34 32 / .12); }
.tab-finish > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 0; border-bottom: 1px solid var(--line); }
.tab-finish figcaption { padding: 16px 22px 20px; }
.tab-finish h3 { font-size: 1.7rem; margin-bottom: 4px; }
.tab-finish p { font-size: 1rem; color: var(--muted); }
.chart-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; margin: 0; padding: 0; list-style: none; }
.swatch-button { display: block; width: 100%; padding: 0; text-align: left; border: 0; background: none; }
.swatch-button img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; outline: 1px solid rgb(0 0 0 / .08); outline-offset: -1px; transition: transform 160ms, outline-color 160ms; }
.swatch-button:hover img { transform: translateY(-3px); }
.swatch-button[aria-pressed="true"] img { outline: 2px solid var(--ink); outline-offset: 3px; }
.chart-note { margin-top: 32px; font-size: 1rem; color: var(--muted); }
.spec-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.7fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.spec-layout .head { display: block; position: sticky; top: 104px; margin: 0; }
.spec-layout .head h2 { margin-bottom: 20px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.spec-table caption { text-align: left; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 500 1.9rem/1.1 var(--font-display); }
.spec-table th, .spec-table td { text-align: left; vertical-align: top; padding-block: 16px; border-bottom: 1px solid var(--line); }
.spec-table th { width: 36%; padding-right: 20px; font-weight: 400; color: var(--muted); }
.spec-table td { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.imp { font-weight: 400; color: var(--muted); }
.spec-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 44px; }
.spec-note { margin-top: 28px; font-size: 1rem; color: var(--muted); }
.brochure { grid-template-columns: minmax(0, 24rem) auto; justify-content: start; }
.split .brochure-cover img { width: clamp(150px, 14vw, 200px); border-radius: 2px; box-shadow: 0 1px 3px rgb(30 34 32 / .08), 0 14px 32px rgb(30 34 32 / .16); }
.brochure-meta { display: block; margin-top: 10px; font-size: .95rem; color: var(--muted); }

/* Applications */
.sector-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 4vw, 56px); }
.sector-index a { display: block; text-decoration: none; }
.sector-thumb { display: block; overflow: hidden; border-radius: var(--radius); }
.sector-index img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.sector-index span:not(.sector-thumb) { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; padding-top: 8px; border-bottom: 1px solid var(--line); font: 400 1.125rem/1.25 var(--font-body); transition: color 200ms, border-color 200ms; }
.sector-index span svg { transition: transform 300ms cubic-bezier(.2, .7, .2, 1); }
.sector-index a:is(:hover, :focus-visible) span:not(.sector-thumb) { color: var(--red); border-color: var(--red); }
.sector-index a:is(:hover, :focus-visible) img { transform: scale(1.08); }
.sector-index a:is(:hover, :focus-visible) span svg { transform: translateY(4px); }
/* Sector header, as on the previous site: wide photo with a dark text panel over it. */
.sector-hero { position: relative; }
.sector-hero > img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.sector-card { position: absolute; top: 50%; right: clamp(24px, 4vw, 64px); width: min(480px, 44%); transform: translateY(-50%); padding: clamp(28px, 3vw, 44px); background: var(--graphite); color: #fff; }
.sector-card h2 { margin-bottom: 18px; font-size: clamp(2rem, 3vw, 3rem); color: #fff; }
.sector-card p { font-size: 1.0625rem; line-height: 1.6; color: rgb(255 255 255 / .78); }
.sector-card .lede { margin-bottom: 12px; font-size: 1.25rem; color: #fff; }
/* Each use on its own row, as on the previous site: two photos beside the text, sides alternating. */
.use-grid { margin-top: 24px; border-bottom: 1px solid var(--line); }
.use { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "title pair" "text pair"; column-gap: clamp(32px, 5vw, 80px); padding-block: clamp(20px, 2.2vw, 32px); border-top: 1px solid var(--line); }
.use:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "pair title" "pair text"; }
.use-pair { grid-area: pair; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.use-photo { display: block; overflow: hidden; border-radius: var(--radius); }
.use-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.use-photo:hover img { transform: scale(1.06); }
.use h3 { grid-area: title; align-self: end; margin: 0 0 14px; font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
.use p { grid-area: text; align-self: start; max-width: 40ch; font-size: 1.125rem; color: var(--muted); line-height: 1.6; }

/* Contact */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Contact: the map on the left in a rounded frame, the details on a light panel beside it. */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; }
.map { min-height: 460px; overflow: hidden; border-radius: var(--radius); background: var(--paper); box-shadow: 0 24px 48px -16px rgb(20 22 21 / .22); }
.map iframe { display: block; width: 100%; height: 100%; min-height: 460px; border: 0; }
.contact-card { align-self: center; padding: clamp(28px, 3vw, 44px); background: var(--paper); border-radius: var(--radius); box-shadow: 0 24px 48px -12px rgb(20 22 21 / .18); }
.contact-card h2 { margin-bottom: 24px; font-size: clamp(2.2rem, 3vw, 3rem); }
.contact-list { border-bottom: 1px solid var(--line); }
.contact-list div { padding-block: 16px; border-top: 1px solid var(--line); }
.contact-list dt { margin-bottom: 4px; font-size: .95rem; color: var(--muted); }
.contact-list dd { font: 500 clamp(1.5rem, 2vw, 1.8rem)/1.2 var(--font-display); overflow-wrap: anywhere; }
.contact-list .contact-address { font: 400 1.05rem/1.55 var(--font-body); }
.contact-list a { text-decoration: none; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat; transition: background-size 300ms cubic-bezier(.2, .7, .2, 1); }
.contact-list a:is(:hover, :focus-visible) { background-size: 100% 2px; }
.contact-card .text-link { margin-top: 24px; }

/* Footer */
/* Footer: one quiet line (logo, menu, contacts, copyright); the full address lives on the Contact page. */
.site-footer { padding-block: 18px; border-top: 1px solid var(--line); font-size: .95rem; color: var(--muted); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.footer-brand img { width: 88px; }
.footer-row nav, .footer-contact { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer-contact { margin-left: auto; font-style: normal; }
.footer-row nav a, .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.footer-row nav a:hover, .footer-contact a:hover { text-decoration: underline; }
/* Email and phone always look like links: on a phone there is no hover to reveal them. */
.footer-contact a { text-decoration: underline; text-decoration-color: var(--line); }
.footer-contact a:hover { text-decoration-color: currentColor; }
.footer-copy { margin: 0; }

/* One entrance moment: the home title settles as the page opens */
@media (prefers-reduced-motion: no-preference) {
  .hero-statement h1, .hero-intro { animation: rise 700ms cubic-bezier(.2, .8, .2, 1) both; }
  .hero-intro { animation-delay: 120ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Tablet */
@media (max-width: 1000px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-card { order: -1; }
  .props-layout { grid-template-columns: 1fr; }
  .props-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; align-items: start; }
  .props-intro figure { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .facts-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .facts-band div:nth-child(3) { padding-left: 0; border-left: 0; }
  /* Architecture leads full width, the other four sectors sit below it. */
  .sector-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sector-index a:first-child { grid-column: 1 / -1; }
  .sector-index a:first-child img { aspect-ratio: 21 / 9; }
  .spec-layout { grid-template-columns: 1fr; }
  .spec-layout .head { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
  .spec-layout .head h2 { margin: 0; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .steps li:nth-child(4) { padding-left: 0; }
}
@media (max-width: 899px) {
  .sector-hero > img { aspect-ratio: 16 / 9; }
  .sector-card { position: static; width: auto; transform: none; }
  .header-row { min-height: 72px; flex-wrap: wrap; gap: 0; }
  .brand img { width: 124px; }
  .nav-enhanced .nav-toggle { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 0 8px 12px; border: 0; background: none; font-size: 1rem; }
  .nav-toggle-bars { display: block; width: 22px; height: 10px; border-block: 1.5px solid currentColor; }
  .site-nav { width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 20px; }
  .site-nav a { min-height: 52px; border-bottom: 1px solid var(--line); }
  /* Phone menu: Contact sits in the list like the other items, marked in red text instead of a red block. */
  .site-nav .nav-contact, .site-nav .nav-contact:hover, .site-nav .nav-contact[aria-current="page"] { justify-content: space-between; padding-inline: 0; background: none; color: var(--red); font-weight: 600; border-bottom: 1px solid var(--line); }
  .site-nav .nav-contact[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 10px; }
  .nav-enhanced .site-nav { display: none; }
  .nav-enhanced .site-nav.is-open { display: flex; max-height: calc(100dvh - 72px); overflow-y: auto; }
  .line-hint { display: block; }
  .hero-statement .wrap { flex-direction: column; align-items: flex-start; }
  .head, .intro-grid, .spec-layout .head { grid-template-columns: 1fr; }
  .split, .split--flip { grid-template-columns: 1fr; }
  /* Heading and text first, photo after, in every split section. */
  .split > figure { order: 1; }
  .split .brochure-cover img { width: 120px; }
  .page-hero { min-height: 480px; align-items: flex-end; }
  .page-hero::before { background: linear-gradient(0deg, rgb(12 14 13 / .82) 0%, rgb(12 14 13 / .55) 60%, rgb(12 14 13 / .25) 100%); }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .mosaic .m-main { grid-column: 1 / -1; grid-row: auto; }
  .mosaic .m-main img { aspect-ratio: 16 / 10; }
  .tab-panel { grid-template-columns: 1fr; }
  .tab-finish { position: static; display: grid; grid-template-columns: 1fr 1.2fr; }
  .tab-finish > img { height: 100%; }
}
/* Phone */
@media (max-width: 639px) {
  body { font-size: 1.0625rem; }
  h1 { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  h2 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  /* Phone: a thin red strip and a taller video, so the video leads the first screen. */
  .hero-statement .wrap { gap: 8px; padding-block: 20px 18px; }
  .hero-statement h1 { font-size: clamp(2.1rem, 9vw, 2.5rem); }
  .hero-intro p { font-size: 1rem; line-height: 1.45; margin-bottom: 10px; }
  .hero-statement .btn { min-height: 40px; padding: 6px 14px; gap: 10px; font-size: .9rem; }
  .video-toggle { left: 8px; bottom: 8px; width: 32px; height: 32px; }
  .sector-links a { font-size: 1.25rem; }
  .facts-band { grid-template-columns: 1fr 1fr; row-gap: 0; }
  .facts-band div, .facts-band div + div { padding: 20px 16px 20px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .facts-band div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .steps li, .steps li + li, .steps li:nth-child(4) { padding: 18px 0 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; border-top-width: 1px; }
  .steps .is-key { border-top-width: 2px; margin: 0 -12px; padding: 18px 12px 20px; }
  .steps li::before { grid-row: span 2; margin: 4px 0 0; }
  .cb { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .cb-corner { display: none; }
  .cb-head { padding-bottom: 14px; }
  .cb-head h3 { font-size: 1.6rem; }
  .cb-head p { font-size: .95rem; }
  .cb-label { grid-column: 1 / -1; padding: 18px 0 0; border-bottom: 0; }
  .cb-cell { padding: 10px 0 18px; font-size: .95rem; }
  .props-intro { grid-template-columns: 1fr; }
  .props-intro figure { grid-column: auto; grid-row: auto; margin-top: 28px; }
  /* Two columns on phones too, with smaller type, so the eight properties read as a grid, not a long list. */
  .props div { padding: 16px 12px 16px 0; }
  .props div:nth-child(even) { padding: 16px 0 16px 12px; }
  .props h3 { margin-bottom: 6px; font-size: 1.25rem; }
  .props p { font-size: .95rem; line-height: 1.45; }
  .finish-tabs.is-enhanced .tablist { gap: 6px; margin-bottom: 16px; }
  .tab { flex: 1; min-height: 42px; padding-inline: 8px; font-size: 1.2rem; }
  .tab-finish { grid-template-columns: 1fr; }
  .tab-finish > img { aspect-ratio: 16 / 9; }
  .tab-finish figcaption { padding: 14px 18px 16px; }
  .tab-finish h3 { font-size: 1.5rem; margin-bottom: 2px; }
  .chart-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }
  .spec-pair { grid-template-columns: 1fr; gap: 32px; }
  .spec-table th { width: 42%; }
  .sector-index { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sector-index a:first-child img { aspect-ratio: 16 / 9; }
  .sector-index span:not(.sector-thumb) { min-height: 56px; font-size: 1rem; }
  .use, .use:nth-child(even) { grid-template-columns: 1fr; grid-template-areas: "title" "text" "pair"; }
  .use p { margin-bottom: 20px; }
  .use-pair { gap: 6px; }
  .map, .map iframe { min-height: 340px; }
  .line-figure { padding: 16px 12px; }
  /* Phone: the menu is already in the header, so the footer keeps two short lines: logo and copyright, then email and phone. */
  .footer-row { gap: 0 20px; }
  .footer-row nav { display: none; }
  .footer-copy { order: 1; margin-left: auto; font-size: .9rem; }
  .footer-contact { order: 2; width: 100%; margin-left: 0; justify-content: space-between; }
  .contact-list a { display: inline-block; padding-block: 8px; }
}
/* Statement heading across the page, the text below in two columns. */
.head--stack { display: block; }
.head--stack h2 { max-width: 18ch; margin-bottom: clamp(24px, 3vw, 40px); }
.head--stack > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 64px; }
.head--stack p { max-width: 52ch; }
@media (max-width: 700px) { .head--stack > div { grid-template-columns: 1fr; } }
.split figure.natural img { aspect-ratio: auto; }

/* Laptops with Windows display scaling (125-175%) give the page a short window, about 1100 x 580.
   Heights and type follow the window height there, so the first screen shows more than one block. */
@media (min-width: 900px) and (max-height: 760px) {
  :root { --section: clamp(48px, 5.5vw, 80px); }
  .header-row { min-height: 64px; }
  .brand img { width: 118px; }
  html { scroll-padding-top: 80px; }
  h1 { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
  h2 { font-size: clamp(2rem, 3vw, 3rem); }
  .hero-statement .wrap { padding-block: 28px; }
  .hero-statement h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
  .page-hero { min-height: clamp(340px, 62vh, 620px); padding-block: 40px; }
  .sector-hero > img { aspect-ratio: auto; height: clamp(300px, 64vh, 470px); }
  .sector-index img { aspect-ratio: 3 / 2; }
  .map, .map iframe { min-height: clamp(340px, 64vh, 460px); }
}
.head--last { margin-bottom: 0; }

/* Company: sustainability cards */
.res-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.res-cards article { background: var(--paper); border-top: 2px solid var(--ink); border-radius: var(--radius); padding: 16px 20px 18px; }
.res-cards small { display: block; margin-bottom: 8px; font: 500 1rem/1 var(--font-display); color: var(--red); }
.res-cards h3 { margin-bottom: 6px; font-size: 1.3rem; }
.res-cards p { color: var(--muted); font-size: .95rem; line-height: 1.45; }
@media (max-width: 899px) { .res-cards { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; } }