:root {
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Premium dark blue + gold theme */
  --navy: #0B1F33;          /* primary */
  --slate: #244A66;         /* secondary */
  --gold: #C9A227;          /* accent and buttons */
  --bg: #F7F8FA;            /* background */
  --ink: #17212B;           /* text */
  --panel: #EAEEF3; --muted: #4A5866; --line: #D5DCE4;
  --accent: #244A66; --accent-ink: #FFFFFF; --focus: #244A66;
  --on-navy: #F7F8FA; --on-navy-muted: #B8C6D3;
  --btn-ink: #0B1F33;
  --head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Albert Sans", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #06121D; --bg: #0A1826; --panel: #112A40; --ink: #E8EEF3; --muted: #9DB0C0; --line: #1F3A52;
    --accent: #8FB3CF; --accent-ink: #0B1F33; --focus: #C9A227;
  }
}
:root[data-theme="dark"] {
  --navy: #06121D; --bg: #0A1826; --panel: #112A40; --ink: #E8EEF3; --muted: #9DB0C0; --line: #1F3A52;
  --accent: #8FB3CF; --accent-ink: #0B1F33; --focus: #C9A227;
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 72px); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg, canvas { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.site-header :focus-visible, footer :focus-visible, .feature-band :focus-visible, .lead-product :focus-visible { outline-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
h1, h2, h3 { font-family: var(--head); line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1rem; max-width: 62ch; }
.muted { color: var(--muted); }
.page[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding-top: env(safe-area-inset-top, 0px); background: transparent; color: var(--on-navy); border-bottom: 1px solid transparent; transition: background-color .3s ease, border-color .3s ease; }
.site-header.solid { background: var(--navy); border-bottom-color: rgba(201,162,39,.35); }
body:not(.is-home) main { padding-top: var(--hdr, 66px); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--head); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.brand img { display: block; height: 46px; width: auto; }
nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
nav a { text-decoration: none; font-weight: 500; font-size: .98rem; padding: .35rem 0; border-bottom: 2px solid transparent; }
nav a:hover, nav a[aria-current="page"] { border-bottom-color: var(--gold); }

.btn { display: inline-block; font: 600 1rem var(--body); text-decoration: none; padding: .8rem 1.35rem; border-radius: 6px; border: 2px solid var(--gold); background: var(--gold); color: var(--btn-ink); cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); filter: none; }
.btn[disabled] { opacity: .6; cursor: wait; }
.cta-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* hero */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero p.lead { font-size: 1.2rem; color: var(--muted); margin-top: 1.3rem; }
.hero-photo { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.hero-photo img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

/* grain viewer */
.viewer { background: var(--navy); border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.viewer canvas { display: block; width: 100%; aspect-ratio: 5 / 4; }
.viewer-ctl { background: var(--panel); padding: 1rem 1.1rem 1.15rem; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { text-align: center; padding: .6rem .3rem; font-weight: 600; font-size: .95rem; cursor: pointer; border-right: 1px solid var(--line); }
.seg label:last-of-type { border-right: 0; }
.seg input:checked + label { background: var(--accent); color: var(--accent-ink); }
.seg input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: -3px; }
.viewer-note { margin: .9rem 0 0; font-size: .98rem; color: var(--muted); min-height: 3.2em; }

/* sections */
section.block { padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; margin-bottom: 2.5rem; align-items: end; }
.sec-head p { margin: 0; color: var(--muted); }

.group-list { border-top: 2px solid var(--ink); }
.group-row { padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.group-row h3 { font-size: 1.35rem; }

.feature-band { background: var(--navy); color: var(--on-navy); }
.feature-band .inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.feature-band p { color: var(--on-navy-muted); }
.feature-band .btn.ghost { background: transparent; border-color: #4A6A85; color: var(--on-navy); }
.feature-band-gems { border-top: 1px solid rgba(255,255,255,.14); }


.origins { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.origin { border-top: 3px solid var(--gold); padding-top: 1.2rem; }
.origin h3 { font-size: 1.5rem; margin-bottom: .7rem; }
.facts { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .5rem; }
.facts li { padding-left: 1.2rem; position: relative; font-size: 1rem; }
.facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

.products { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
.product { background: var(--panel); border-radius: 10px; padding: 1.8rem; }
.product.lead-product { background: var(--navy); color: var(--on-navy); }
.product.lead-product p { color: var(--on-navy-muted); }
.product h3 { margin-bottom: .6rem; }

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.steps li { counter-increment: s; border-top: 3px solid var(--gold); padding-top: 1rem; }
.steps li::before { content: counter(s); display: block; font-family: var(--head); font-weight: 700; font-size: 2rem; color: var(--accent); line-height: 1; margin-bottom: .6rem; }
.steps h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.steps p { font-size: .98rem; color: var(--muted); margin: 0; }


/* hero slider */
.hero-slider { position: relative; height: 100vh; height: 100svh; min-height: 420px; background: #000; color: #fff; overflow: hidden; }
.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.slide.active { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.slide-bg { position: absolute; inset: 0; background-color: var(--navy); background-size: cover; background-position: center; }
.slide-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,18,29,.8) 0, rgba(6,18,29,0) 170px), linear-gradient(90deg, rgba(11,31,51,.88) 0%, rgba(11,31,51,.55) 55%, rgba(11,31,51,.2) 100%); }
.slide-bg-logo { background: #000; }
.slide-bg-logo::after { display: none; }
.slide-fg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: var(--fade, 1); transform: translateY(var(--lift, 0px)) scale(var(--sc, 1)); }
.slide-fg .wrap { width: min(1120px, 100% - 2.5rem); }
.slide-bg-gem { background: #01050E url("/images/gems-slide-bg.webp") center / cover no-repeat; }
.slide-bg-gem::after { background: linear-gradient(90deg, rgba(1,5,14,.88) 0%, rgba(1,5,14,.55) 42%, rgba(1,5,14,0) 72%); }
.hero-gem-art { display: none; }
@media (max-width: 860px) { .slide-bg-gem { background-position: 88% bottom; background-size: auto 62%; } .slide-bg-gem::after { background: linear-gradient(180deg, #01050E 0, #01050E 37%, rgba(1,5,14,0) 49%); } }
.hero-gem-art { position: absolute; right: max(2rem, 8vw); top: 50%; width: min(38vw, 440px); transform: translateY(-50%); }
.hero-gem-art svg { display: block; width: 100%; height: auto; animation: gemSpin 120s linear infinite; filter: drop-shadow(0 0 40px rgba(80,120,255,.4)); }
@media (max-width: 860px) { .hero-gem-art { right: -14vw; width: 75vw; opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .hero-gem-art svg { animation: none; } }
.slide-logo { display: block; width: min(760px, 86%); height: auto; }
.slide-text { max-width: 640px; }
.slide-title { font-family: var(--head); font-weight: 700; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; margin: 0; letter-spacing: -0.01em; max-width: 18ch; }
.slide-title::before { content: ""; display: block; width: 64px; height: 4px; background: var(--gold); margin-bottom: 1.2rem; }
.slide-sub { font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--on-navy-muted); margin: 1.1rem 0 0; max-width: 46ch; }
.slide.active .slide-logo { animation: heroIn 1s ease-out backwards; }
.slide.active .slide-text { animation: heroIn .9s ease-out backwards .15s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.hero-arrow { position: absolute; top: 50%; margin-top: -23px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; background: rgba(11,31,51,.75); border: 2px solid var(--gold); color: var(--gold); z-index: 2; }
.hero-arrow:hover { background: var(--gold); color: #0B1F33; }
.hero-arrow svg { width: 22px; height: 22px; }
.hero-prev { left: 1rem; } .hero-next { right: 1rem; }
.hero-bar { position: absolute; left: 0; right: 0; bottom: 1.1rem; display: flex; justify-content: center; align-items: center; gap: 1rem; z-index: 2; }
.hero-dots { display: flex; gap: .6rem; }
.hero-dots button { width: 12px; height: 12px; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid var(--gold); background: transparent; }
.hero-dots button[aria-current="true"] { background: var(--gold); }
.hero-slider :focus-visible { outline-color: var(--gold); }
@media (max-width: 640px) { .hero-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.active { transition: none; }
  .slide.active .slide-logo, .slide.active .slide-text { animation: none; }
}

/* dropdown menu */
nav > ul { align-items: center; }
nav > ul > li > a { display: inline-block; }
.has-sub { position: relative; display: flex; align-items: center; gap: .15rem; padding: 1.1rem 0; margin: -1.1rem 0; }
.sub-toggle { background: none; border: 0; color: inherit; padding: .3rem; cursor: pointer; display: grid; place-items: center; border-radius: 4px; }
.sub-toggle svg { width: 14px; height: 14px; transition: transform .2s ease; }
.has-sub.open .sub-toggle svg { transform: rotate(180deg); }
.sub { display: none; position: absolute; top: 100%; left: -1rem; min-width: 210px; flex-direction: column; gap: 0; padding: .5rem; background: var(--navy); border: 1px solid rgba(201,162,39,.4); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.open > .sub { display: flex; }
.has-sub.suppress > .sub { display: none !important; }
.sub a { display: block; padding: .55rem .8rem; border-radius: 6px; border-bottom: 0; }
.sub a:hover { background: rgba(255,255,255,.08); }
.sub a[aria-current="page"] { color: var(--gold); }
@media (max-width: 640px) {
  .has-sub { position: static; padding: 0; margin: 0; }
  .sub { left: 1.25rem; right: 1.25rem; top: 100%; }
}

/* mineral cards */
.mineral-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 860px; }
.mcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; text-decoration: none; background: var(--panel); border-left: 4px solid var(--gold); border-radius: 8px; padding: 1.3rem 1.6rem; transition: transform .2s ease; }
.mcard:hover { transform: translateX(4px); }
.mcard h3 { grid-column: 1; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.1; margin-bottom: 0; }
.mcard p { grid-column: 1; color: var(--muted); margin: 0; }
.mcard span { grid-column: 2; grid-row: 1 / span 2; font-weight: 600; border-bottom: 2px solid var(--gold); white-space: nowrap; }
.mcard-photo { --card-img: url("/images/card-photo.webp"); grid-template-columns: 1fr; align-content: center; min-height: 310px; padding: 1.6rem 56% 1.6rem 1.8rem; color: #F7F8FA; background: #000 var(--card-img) no-repeat right center / min(56%, 460px) auto; }
.mcard-photo p { color: #B8C6D3; }
.mcard-photo span { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 1rem; }
.mcard-ilmenite { --card-img: url("/images/card-ilmenite.webp"); }
.mcard-zircon { --card-img: url("/images/card-zircon.webp"); }
.mcard-titanium { --card-img: url("/images/card-titanium.webp"); }
.mcard-graphite { --card-img: url("/images/card-graphite.webp"); }
.mcard-mica { --card-img: url("/images/card-mica.webp"); }
@media (max-width: 640px) {
  .mcard-photo { padding: 0 0 1.4rem; min-height: 0; background-image: none; }
  .mcard-photo::before { content: ""; grid-column: 1; aspect-ratio: 3 / 2; background: var(--card-img) center / contain no-repeat; margin-bottom: 1rem; }
  .mcard-photo h3, .mcard-photo p, .mcard-photo span { margin-left: 1.4rem; margin-right: 1.4rem; }
  .mcard { grid-template-columns: 1fr; }
  .mcard span { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .8rem; }
}

/* gems page: its own look */
.gems { --bg: #06101B; --panel: #0E2236; --ink: #EAF0F5; --muted: #A6B7C6; --line: #1D3550; --accent: #8FB3CF; --accent-ink: #0B1F33; --focus: #C9A227; background: var(--bg); color: var(--ink); }
.gems-hero { position: relative; min-height: min(90vh, 740px); display: flex; align-items: center; overflow: hidden; padding: 4rem 0; background: radial-gradient(60% 80% at 76% 45%, rgba(36,74,102,.6), transparent 70%), var(--bg); }
.gems-hero-art { position: absolute; right: max(2rem, 6vw); top: 50%; width: min(44vw, 500px); transform: translateY(-50%); }
.gems-hero-art svg, .gems-hero-art canvas, .gems-hero-art img { display: block; width: 100%; height: auto; animation: gemSpin 120s linear infinite; filter: drop-shadow(0 0 46px rgba(80,120,255,.4)); }
@keyframes gemSpin { to { transform: rotate(360deg); } }
.gems-hero-in { position: relative; }
.gems h1 { font-size: clamp(2.8rem, 7.5vw, 5.4rem); line-height: 1.02; max-width: 11ch; color: #E7C65A; background: linear-gradient(100deg, #F6E7A8, #C9A227 55%, #E7C65A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gems-lead { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--muted); max-width: 40ch; margin: 1.4rem 0 0; }
.gems-intro { background: var(--panel); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.gems-intro-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; align-items: start; }
.gems-intro-in p { color: var(--muted); font-size: 1.15rem; margin: 0; }
.gem-list { padding-top: 1rem; padding-bottom: 2rem; }
.gem-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; padding: clamp(1.8rem, 4vw, 3rem) 0; border-top: 1px solid var(--line); }
.gem-row:first-child { border-top: 0; }
.gem-row:nth-child(even) .gem-art { order: 2; }
.gem-art { display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 40%, transparent), transparent 78%); }
.gem-art svg, .gem-art canvas { width: min(240px, 70%); height: auto; filter: drop-shadow(0 12px 26px rgba(0,0,0,.5)); }
.gem-art img { width: min(300px, 82%); height: auto; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--glow) 60%, transparent)) drop-shadow(0 0 40px color-mix(in srgb, var(--glow) 55%, transparent)); }
.gem-art img.duo { width: min(440px, 96%); }
.gem-art img.tall { width: min(230px, 66%); }
.gem-copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.gem-copy h2::after { content: ""; display: block; width: 48px; height: 3px; border-radius: 2px; background: var(--glow); margin-top: .7rem; }
.gem-copy p { color: var(--muted); font-size: 1.15rem; margin-top: 1rem; }
@media (max-width: 860px) {
  .gems-hero-art { right: -12vw; width: 80vw; opacity: .35; }
  .gems-intro-in, .gem-row { grid-template-columns: 1fr; }
  .gem-row:nth-child(even) .gem-art { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .gems-hero-art svg, .gems-hero-art canvas, .gems-hero-art img { animation: none; } }

/* photo gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; gap: 1rem; }
.gallery figure { margin: 0; position: relative; border-radius: 8px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .8rem; font-size: .92rem; font-weight: 500; color: #fff; background: linear-gradient(to top, rgba(10,18,22,.75), rgba(10,18,22,0)); }

.contact-grid { align-items: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; align-content: start; }
.map-wrap { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.map-wrap iframe { display: block; width: 100%; height: 420px; border: 0; }
.map-ctl { background: var(--panel); padding: .7rem; }
.seg.two { grid-template-columns: repeat(2, 1fr); }
.map-link { display: block; padding: .8rem 1rem; font-weight: 600; }
.contact-list strong { display: block; font-size: .95rem; color: var(--muted); font-weight: 500; }
form { background: var(--panel); border-radius: 10px; padding: 1.6rem; display: grid; gap: 1rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label.f { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
input[type=text], input[type=email], select, textarea { font: 400 1rem var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .7rem .8rem; width: 100%; }
textarea { min-height: 110px; resize: vertical; }
textarea.big { min-height: 240px; }
.form-msg { margin: 0; font-size: .95rem; color: var(--muted); }
.form-msg.ok { color: var(--ink); font-weight: 600; }

footer { background: var(--navy); border-top: 2px solid var(--gold); padding: 2rem 0 2.5rem; font-size: .95rem; color: var(--on-navy-muted); }
footer a { color: var(--on-navy); }
footer a:hover { color: var(--gold); }
.foot { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.foot p { margin: 0; }

@media (max-width: 860px) {
  .hero-grid, .sec-head, .products, .contact-grid, .origins, .feature-band .inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .gallery figure:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 520px) {
  .steps, .row2 { grid-template-columns: 1fr; }
  nav ul { gap: 1rem; }
}

/* ===== Mineral pages (Silica quartz, Titanium, Ilmenite, Zircon, Graphite, Mica) ===== */
.tp-hero { position: relative; background: #000; color: #F7F8FA; overflow: hidden; }
.tp-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); }
.tp-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; min-height: calc(100vh - var(--hdr, 66px)); min-height: calc(100svh - var(--hdr, 66px)); padding: clamp(2.5rem, 9vh, 5.5rem) 0 3rem; }
.tp-bar { width: 64px; height: 4px; background: var(--gold); margin-bottom: 1.3rem; }
.tp-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); max-width: 13ch; color: #fff; }
.tp-lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: #B8C6D3; max-width: 38ch; margin: 1.3rem 0 0; }
.tp-chips { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; list-style: none; margin: 2rem 0 0; padding: 0; color: #DDE6EC; font-weight: 500; }
.tp-chips li { display: flex; align-items: center; gap: .5rem; }
.tp-chips li::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.tp-intro { margin-top: 2.2rem; max-width: 46ch; padding-left: 1.1rem; border-left: 3px solid var(--gold); }
.tp-intro h2 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: #fff; line-height: 1.25; margin: 0; }
.tp-intro p { color: #B8C6D3; font-size: 1rem; line-height: 1.65; margin: .85rem 0 0; }
.tp-intro .cta-row { margin-top: 1.6rem; }
.tp-hero .btn.ghost { color: #F7F8FA; border-color: #4A6A85; }
.tp-sec { padding: clamp(3rem, 6vw, 5rem) 0; }
.tp-sec h2 { max-width: 20ch; }
.tp-sec h2::before { content: ""; display: block; width: 48px; height: 4px; background: var(--gold); margin-bottom: 1rem; }
.tp-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tp-two p { color: var(--muted); font-size: 1.1rem; }
.tp-two h2 + p { margin-top: 1.3rem; }
.tp-offer { background: var(--navy); color: var(--on-navy); border-radius: 10px; padding: 1.8rem; border-left: 4px solid var(--gold); }
.tp-offer h3 { margin-bottom: 1rem; color: #fff; }
.tp-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.tp-ticks li { display: flex; gap: .7rem; align-items: flex-start; color: #DDE6EC; }
.tp-ticks svg { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: .2rem; }
.tp-dark { background: var(--navy); color: var(--on-navy); }
.tp-dark h2 { color: #fff; }
.tp-dark .tp-sub { color: #B8C6D3; max-width: 58ch; margin: 1.2rem 0 1.8rem; font-size: 1.1rem; }
.tp-min { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tp-card { background: #000; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #16324a; }
.tp-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tp-card .body { padding: 1.3rem 1.4rem 1.5rem; }
.tp-card h3 { color: #fff; margin-bottom: .4rem; }
.tp-card p { color: #B8C6D3; margin: 0; font-size: 1rem; }
.tp-card.plain { background: transparent; border: 1px dashed #3A5F78; justify-content: center; }
.tp-checks { list-style: none; counter-reset: c; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.tp-checks li { counter-increment: c; display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; align-items: start; color: var(--muted); font-size: 1.05rem; }
.tp-checks li::before { content: counter(c); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2px solid var(--gold); color: var(--ink); font-weight: 700; font-family: var(--head); }
.tp-spec { background: var(--panel); border-radius: 10px; padding: 1.6rem 1.7rem; }
.tp-spec h3 { margin-bottom: 1rem; }
.tp-spec table { width: 100%; border-collapse: collapse; }
.tp-spec th, .tp-spec td { text-align: left; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.tp-spec th { font-weight: 600; width: 45%; }
.tp-spec td { color: var(--muted); }
.tp-spec tr:last-child th, .tp-spec tr:last-child td { border-bottom: 0; }
.tp-spec .note { color: var(--muted); font-size: .95rem; margin: 1rem 0 0; }
.tp-alt { background: var(--panel); }
.tp-uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
.tp-use { background: var(--bg); border-radius: 10px; padding: 1.6rem; border-top: 3px solid var(--gold); }
.tp-use .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--gold); display: grid; place-items: center; margin-bottom: 1rem; }
.tp-use .ic svg { width: 26px; height: 26px; }
.tp-use h3 { margin-bottom: .4rem; }
.tp-use p { color: var(--muted); margin: 0; font-size: 1rem; }
.tp-steps { list-style: none; counter-reset: s; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.tp-steps li { counter-increment: s; border-top: 3px solid var(--gold); padding-top: 1rem; }
.tp-steps li::before { content: counter(s); display: block; font-family: var(--head); font-weight: 700; font-size: 2rem; color: var(--gold); line-height: 1; margin-bottom: .6rem; }
.tp-steps h3 { color: #fff; font-size: 1.1rem; margin-bottom: .3rem; }
.tp-steps p { color: #B8C6D3; margin: 0; font-size: .98rem; }
.tp-faq { max-width: 860px; margin-top: 2rem; border-top: 1px solid var(--line); }
.tp-faq details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.tp-faq summary { cursor: pointer; font-family: var(--head); font-weight: 600; font-size: 1.2rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.tp-faq summary::-webkit-details-marker { display: none; }
.tp-faq summary::after { content: "+"; color: var(--gold); font-size: 1.6rem; line-height: 1; }
.tp-faq details[open] summary::after { content: "\2212"; }
.tp-faq details p { color: var(--muted); margin: .8rem 0 0; }
.tp-more { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; margin-top: 1.4rem; }
.tp-more a { font-weight: 600; border-bottom: 2px solid var(--gold); text-decoration: none; padding-bottom: 2px; }
@media (max-width: 900px) {
  .tp-two, .tp-min, .tp-uses { grid-template-columns: 1fr; }
  .tp-steps { grid-template-columns: 1fr 1fr; }
  .tp-hero-in { grid-template-columns: 1fr; min-height: 0; padding: 0 0 2.5rem; }
  .tp-hero-photo { position: relative; width: 100%; aspect-ratio: 3 / 2; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .tp-hero-in > div:first-child { padding-top: 1.5rem; }
}
@media (max-width: 520px) { .tp-steps { grid-template-columns: 1fr; } }
#page-quartz .tp-hero-photo { background: #000 url("/images/hero-quartz.jpg") right center / cover no-repeat; }
#page-titanium .tp-hero-photo { background: #000 url("/images/hero-titanium.jpg") center bottom / cover no-repeat; }
#page-ilmenite .tp-hero-photo { background: #000 url("/images/hero-ilmenite.jpg") center bottom / cover no-repeat; }
#page-zircon .tp-hero-photo { background: #000 url("/images/hero-zircon.jpg") center bottom / cover no-repeat; }
#page-graphite .tp-hero-photo { background: #000 url("/images/hero-graphite.jpg") center bottom / cover no-repeat; }
#page-mica .tp-hero-photo { background: #000 url("/images/hero-mica.jpg") center bottom / cover no-repeat; }
@media (min-width: 901px) { #page-quartz .tp-hero-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%);  } }
/* quartz hero viewer */
.tp-gv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.tp-stack { display: grid; gap: 1rem; }
@media (max-width: 900px) { .tp-gv { grid-template-columns: 1fr; } }
.tp-dark .viewer { border-color: #16324a; }
.tp-dark .viewer-ctl { padding: 1rem 1.1rem; background: #0E2236; --bg: #06101B; --line: #1F3A52; --accent: #8FB3CF; --accent-ink: #0B1F33; --focus: #C9A227; }
.tp-dark .seg label { color: #F7F8FA; }
.tp-dark .seg input:checked + label { color: #0B1F33; }
.tp-dark .viewer-note { color: #B8C6D3; }
@media (max-width: 900px) { .tp-hero-in.qz { padding: 2rem 0 2.5rem; } }

/* quartz hero: photo fits the screen, title on top, buttons below */
#page-quartz .qz-hero { background: #000; }
#page-quartz .qz-hero .tp-hero-photo { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; transform: none; background-color: #000; background-position: center bottom; background-size: cover; -webkit-mask-image: none; mask-image: none; }
#page-quartz .qz-hero .tp-hero-in.qz { display: flex; justify-content: center; align-items: center; text-align: center; min-height: calc(100vh - var(--hdr, 66px)); min-height: calc(100svh - var(--hdr, 66px)); padding: 3rem 0; }
#page-quartz .qz-title { display: flex; flex-direction: column; align-items: center; }
#page-quartz .qz-hero h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: 1; max-width: none; letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
#page-quartz .qz-hero .cta-row { justify-content: center; margin-top: 1.4rem; }
#page-quartz .qz-hero .btn.ghost { background: rgba(6,18,29,.65); }
@media (max-width: 900px) {
  #page-quartz .qz-hero .tp-hero-photo { background-size: 100% auto; background-position: center 78%; }
  #page-quartz .qz-hero .tp-hero-in.qz { min-height: 70vh; min-height: 70svh; padding: 2rem 0; }
}
/* phones only: bigger picture, title and buttons at the top middle (laptop layout unchanged) */
@media (max-width: 700px) {
  #page-quartz .qz-hero .tp-hero-photo { background-size: 140vw auto; background-position: center bottom; }
  #page-quartz .qz-hero .tp-hero-in.qz { align-items: flex-start; justify-content: center; min-height: calc(81vw + 10.5rem); padding: 2rem 0 2.5rem; }
  #page-quartz .qz-hero h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
}
/* titanium hero */
#page-titanium .qz-hero { background: #000; }
#page-titanium .qz-hero .tp-hero-photo { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; transform: none; background-color: #000; background-position: center bottom; background-size: cover; -webkit-mask-image: none; mask-image: none; }
#page-titanium .qz-hero .tp-hero-in.qz { display: flex; justify-content: center; align-items: center; text-align: center; min-height: calc(100vh - var(--hdr, 66px)); min-height: calc(100svh - var(--hdr, 66px)); padding: 3rem 0; }
#page-titanium .qz-title { display: flex; flex-direction: column; align-items: center; }
#page-titanium .qz-hero h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: 1; max-width: none; letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
#page-titanium .qz-hero .cta-row { justify-content: center; margin-top: 1.4rem; }
#page-titanium .qz-hero .btn.ghost { background: rgba(6,18,29,.65); }
@media (max-width: 900px) {
  #page-titanium .qz-hero .tp-hero-photo { background-size: 100% auto; background-position: center 78%; }
  #page-titanium .qz-hero .tp-hero-in.qz { min-height: 70vh; min-height: 70svh; padding: 2rem 0; }
}
/* phones only: bigger picture, title and buttons at the top middle (laptop layout unchanged) */
@media (max-width: 700px) {
  #page-titanium .qz-hero .tp-hero-photo { background-size: 140vw auto; background-position: center bottom; }
  #page-titanium .qz-hero .tp-hero-in.qz { align-items: flex-start; justify-content: center; min-height: calc(81vw + 10.5rem); padding: 2rem 0 2.5rem; }
  #page-titanium .qz-hero h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
}
/* ilmenite hero */
#page-ilmenite .qz-hero { background: #000; }
#page-ilmenite .qz-hero .tp-hero-photo { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; transform: none; background-color: #000; background-position: center bottom; background-size: cover; -webkit-mask-image: none; mask-image: none; }
#page-ilmenite .qz-hero .tp-hero-in.qz { display: flex; justify-content: center; align-items: center; text-align: center; min-height: calc(100vh - var(--hdr, 66px)); min-height: calc(100svh - var(--hdr, 66px)); padding: 3rem 0; }
#page-ilmenite .qz-title { display: flex; flex-direction: column; align-items: center; }
#page-ilmenite .qz-hero h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: 1; max-width: none; letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
#page-ilmenite .qz-hero .cta-row { justify-content: center; margin-top: 1.4rem; }
#page-ilmenite .qz-hero .btn.ghost { background: rgba(6,18,29,.65); }
@media (max-width: 900px) {
  #page-ilmenite .qz-hero .tp-hero-photo { background-size: 100% auto; background-position: center 78%; }
  #page-ilmenite .qz-hero .tp-hero-in.qz { min-height: 70vh; min-height: 70svh; padding: 2rem 0; }
}
/* phones only: bigger picture, title and buttons at the top middle (laptop layout unchanged) */
@media (max-width: 700px) {
  #page-ilmenite .qz-hero .tp-hero-photo { background-size: 140vw auto; background-position: center bottom; }
  #page-ilmenite .qz-hero .tp-hero-in.qz { align-items: flex-start; justify-content: center; min-height: calc(81vw + 10.5rem); padding: 2rem 0 2.5rem; }
  #page-ilmenite .qz-hero h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
}
/* zircon hero */
#page-zircon .qz-hero { background: #000; }
#page-zircon .qz-hero .tp-hero-photo { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; transform: none; background-color: #000; background-position: center bottom; background-size: cover; -webkit-mask-image: none; mask-image: none; }
#page-zircon .qz-hero .tp-hero-in.qz { display: flex; justify-content: center; align-items: center; text-align: center; min-height: calc(100vh - var(--hdr, 66px)); min-height: calc(100svh - var(--hdr, 66px)); padding: 3rem 0; }
#page-zircon .qz-title { display: flex; flex-direction: column; align-items: center; }
#page-zircon .qz-hero h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: 1; max-width: none; letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
#page-zircon .qz-hero .cta-row { justify-content: center; margin-top: 1.4rem; }
#page-zircon .qz-hero .btn.ghost { background: rgba(6,18,29,.65); }
@media (max-width: 900px) {
  #page-zircon .qz-hero .tp-hero-photo { background-size: 100% auto; background-position: center 78%; }
  #page-zircon .qz-hero .tp-hero-in.qz { min-height: 70vh; min-height: 70svh; padding: 2rem 0; }
}
/* phones only: bigger picture, title and buttons at the top middle (laptop layout unchanged) */
@media (max-width: 700px) {
  #page-zircon .qz-hero .tp-hero-photo { background-size: 140vw auto; background-position: center bottom; }
  #page-zircon .qz-hero .tp-hero-in.qz { align-items: flex-start; justify-content: center; min-height: calc(81vw + 10.5rem); padding: 2rem 0 2.5rem; }
  #page-zircon .qz-hero h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
}
/* graphite hero */
#page-graphite .qz-hero { background: #000; }
#page-graphite .qz-hero .tp-hero-photo { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; transform: none; background-color: #000; background-position: center bottom; background-size: cover; -webkit-mask-image: none; mask-image: none; }
#page-graphite .qz-hero .tp-hero-in.qz { display: flex; justify-content: center; align-items: center; text-align: center; min-height: calc(100vh - var(--hdr, 66px)); min-height: calc(100svh - var(--hdr, 66px)); padding: 3rem 0; }
#page-graphite .qz-title { display: flex; flex-direction: column; align-items: center; }
#page-graphite .qz-hero h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: 1; max-width: none; letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
#page-graphite .qz-hero .cta-row { justify-content: center; margin-top: 1.4rem; }
#page-graphite .qz-hero .btn.ghost { background: rgba(6,18,29,.65); }
@media (max-width: 900px) {
  #page-graphite .qz-hero .tp-hero-photo { background-size: 100% auto; background-position: center 78%; }
  #page-graphite .qz-hero .tp-hero-in.qz { min-height: 70vh; min-height: 70svh; padding: 2rem 0; }
}
/* phones only: bigger picture, title and buttons at the top middle (laptop layout unchanged) */
@media (max-width: 700px) {
  #page-graphite .qz-hero .tp-hero-photo { background-size: 140vw auto; background-position: center bottom; }
  #page-graphite .qz-hero .tp-hero-in.qz { align-items: flex-start; justify-content: center; min-height: calc(81vw + 10.5rem); padding: 2rem 0 2.5rem; }
  #page-graphite .qz-hero h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
}
/* mica hero */
#page-mica .qz-hero { background: #000; }
#page-mica .qz-hero .tp-hero-photo { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; transform: none; background-color: #000; background-position: center bottom; background-size: cover; -webkit-mask-image: none; mask-image: none; }
#page-mica .qz-hero .tp-hero-in.qz { display: flex; justify-content: center; align-items: center; text-align: center; min-height: calc(100vh - var(--hdr, 66px)); min-height: calc(100svh - var(--hdr, 66px)); padding: 3rem 0; }
#page-mica .qz-title { display: flex; flex-direction: column; align-items: center; }
#page-mica .qz-hero h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: 1; max-width: none; letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
#page-mica .qz-hero .cta-row { justify-content: center; margin-top: 1.4rem; }
#page-mica .qz-hero .btn.ghost { background: rgba(6,18,29,.65); }
@media (max-width: 900px) {
  #page-mica .qz-hero .tp-hero-photo { background-size: 100% auto; background-position: center 78%; }
  #page-mica .qz-hero .tp-hero-in.qz { min-height: 70vh; min-height: 70svh; padding: 2rem 0; }
}
/* phones only: bigger picture, title and buttons at the top middle (laptop layout unchanged) */
@media (max-width: 700px) {
  #page-mica .qz-hero .tp-hero-photo { background-size: 140vw auto; background-position: center bottom; }
  #page-mica .qz-hero .tp-hero-in.qz { align-items: flex-start; justify-content: center; min-height: calc(81vw + 10.5rem); padding: 2rem 0 2.5rem; }
  #page-mica .qz-hero h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
}

/* ===== Construction page (from 19.html) ===== */
.cn-hero{position:relative;background:var(--navy);color:var(--on-navy);overflow:hidden}
.cn-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(201,162,39,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(201,162,39,.08) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(90deg,transparent 5%,#000 60%);mask-image:linear-gradient(90deg,transparent 5%,#000 60%)}
.cn-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(3rem,7vw,6rem) 0}
.cn-hero-art{display:grid;gap:1.2rem}
.cn-hero-art img{display:block;width:100%;height:auto}
.cn-tagline{margin:.4rem 0 0;text-align:center;font:500 .95rem var(--body);letter-spacing:.32em;text-transform:uppercase;color:#B8C6D3;max-width:none}
.cn-bar-gold{width:64px;height:4px;background:var(--gold);margin-bottom:1.3rem}
.cn-hero h1{color:#fff;max-width:14ch}
.cn-hero .cn-lead{color:var(--on-navy-muted);font-size:1.2rem;margin-top:1.3rem;max-width:44ch}
.cn-hero .btn.ghost{background:transparent;color:#F7F8FA;border-color:#4A6A85}
.cn-hero .btn.ghost:hover{border-color:#F7F8FA;filter:none}
.cn-sec{padding:clamp(3rem,6vw,5rem) 0}
.cn-alt{background:var(--panel)}
.cn-sec h2::before{content:"";display:block;width:48px;height:4px;background:var(--gold);margin-bottom:1rem}
.cn-sec h2{max-width:22ch}
.cn-sub{color:var(--muted);font-size:1.1rem;margin-top:1.2rem;max-width:60ch}
.cn-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.4rem}
.cn-svc{background:var(--bg);border-radius:14px;overflow:hidden;box-shadow:0 6px 22px rgba(11,31,51,.12);display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.cn-svc:hover{transform:translateY(-10px);box-shadow:0 20px 44px rgba(11,31,51,.28)}
.cn-svc-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.cn-svc-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;padding:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cn-svc:hover .cn-svc-img img{transform:scale(1.06)}
.cn-svc:first-child .cn-svc-img img{object-fit:contain;padding:.8rem}
.cn-badge{position:absolute;left:1.2rem;bottom:-1px;z-index:2;width:56px;height:46px;border-radius:12px 12px 0 0;background:var(--gold);color:#0B1F33;display:grid;place-items:center;transition:transform .4s,height .4s}
.cn-badge svg{width:24px;height:24px}
.cn-svc:hover .cn-badge{height:54px}
.cn-svc-body{padding:1.6rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
.cn-svc-body h3{font-size:1.3rem;margin-bottom:.6rem;position:relative}
.cn-svc-body p{color:var(--muted);font-size:1rem;margin:0}
.cn-js .cn-reveal{opacity:0;transform:translateY(46px)}
.cn-js .cn-reveal.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.cn-js .cn-reveal.in:hover{transform:translateY(-10px);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
@media (prefers-reduced-motion:reduce){.cn-js .cn-reveal{opacity:1;transform:none}.cn-svc,.cn-svc-img img{transition:none}}
.cn-band{background:var(--navy);padding:0}
.cn-slider{position:relative;--v:3}
.cn-viewport{overflow:hidden;touch-action:pan-y}
.cn-track{display:flex;transition:transform .7s cubic-bezier(.2,.7,.2,1);will-change:transform}
.cn-slide{position:relative;flex:0 0 calc(100% / var(--v));height:clamp(320px,36vw,460px);overflow:hidden;background:#0B1F33}
.cn-slide img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cn-slide:hover img{transform:scale(1.07)}
.cn-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%);pointer-events:none}
.cn-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:64px;padding:0;border:0;background:rgba(11,31,51,.55);color:var(--gold);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s}
.cn-nav:hover{background:var(--gold);color:#0B1F33}
.cn-nav.cn-prev{left:0;border-radius:0 8px 8px 0}.cn-nav.cn-next{right:0;border-radius:8px 0 0 8px}
@media (prefers-reduced-motion:reduce){.cn-track,.cn-slide img{transition:none}}
.cn-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.cn-contact-box{padding:clamp(1.5rem,3vw,2.4rem);background:var(--navy);color:var(--on-navy);border-radius:10px;border-left:4px solid var(--gold)}
.cn-contact-box h2{color:#fff;margin-bottom:1.6rem}
.cn-contact-list{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.cn-contact-list strong{display:block;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);font-weight:600}
.cn-contact-list a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.cn-form{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:clamp(1.3rem,3vw,2rem);display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.2rem}
.cn-form .cn-full{grid-column:1/-1}
.cn-form label{display:grid;gap:.45rem;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cn-form input:not([type=checkbox]),.cn-form textarea{font:400 1rem var(--body);letter-spacing:0;text-transform:none;color:#F7F8FA;background:#112A40;border:1px solid #244A66;border-radius:12px;padding:.85rem 1rem;width:100%}
.cn-form textarea{resize:vertical;min-height:150px}
.cn-form textarea::placeholder{color:#8DA2B5}
.cn-form input:focus,.cn-form textarea:focus{border-color:var(--gold);outline:none}
.cn-form input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #112A40 inset;-webkit-text-fill-color:#F7F8FA}
.cn-form .cn-send{grid-column:1/-1;justify-self:start;cursor:pointer}
.cn-form .cn-send:disabled{opacity:.7;cursor:wait}
.cn-form-status{margin:0;font-weight:500;min-height:1.4em}
@media (max-width:900px){.cn-svc-grid{grid-template-columns:1fr}.cn-hero-in,.cn-contact-grid{grid-template-columns:1fr}.cn-hero h1{max-width:none}.cn-hero-art{max-width:560px}}
@media (max-width:520px){.cn-form{grid-template-columns:1fr}
.cn-hero-in{padding:2.2rem 0 2.6rem}.cn-hero .cn-lead{font-size:1.05rem}
.cn-hero .cta-row .btn{flex:1 1 100%;text-align:center}
.cn-form .cn-send{justify-self:stretch;text-align:center}
.cn-contact-box{padding:1.4rem}.cn-contact-list a{overflow-wrap:anywhere}
.cn-tagline{letter-spacing:.2em;font-size:.85rem}
.cn-slide{height:300px}.cn-nav{width:40px;height:52px}}