/* CAK Industries — Fencing Solutions
   Palette: navy, white, black, gold (accent only). Type: Archivo (wide for display, normal for text). */

:root {
  --navy: #0B2942;
  --navy-deep: #061B2E;
  --gold: #CFAB3B;
  --gold-ink: #6F5708;          /* gold dark enough to read on white */
  --surface: #FFFFFF;
  --surface-alt: #F1F3F6;
  --ink: #000000;
  --ink-soft: #3A4653;
  --line: #D3D9E0;
  --on-navy: #FFFFFF;
  --on-navy-soft: #B8C5D2;
  --navy-line: rgba(255, 255, 255, .16);
  --wa: #25D366;
  --gutter: clamp(20px, 4vw, 40px);
  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --head-h: 76px;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #06131F;
    --surface-alt: #0A1C2D;
    --ink: #FFFFFF;
    --ink-soft: #B5C1CD;
    --line: #1F3549;
    --gold-ink: #CFAB3B;
  }
}
:root[data-theme="dark"] {
  --surface: #06131F;
  --surface-alt: #0A1C2D;
  --ink: #FFFFFF;
  --ink-soft: #B5C1CD;
  --line: #1F3549;
  --gold-ink: #CFAB3B;
}

*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--head-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.05; }
h1, h2, .display { font-stretch: 125%; text-transform: uppercase; letter-spacing: -.012em; }
h2 { font-size: clamp(1.7rem, 3.3vw, 2.6rem); max-width: 22ch; }
h3 { font-size: 1.1875rem; font-stretch: 112%; font-weight: 700; line-height: 1.2; }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-soft); max-width: 60ch; }
.soft { color: var(--ink-soft); }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: clamp(56px, 8vw, 108px); }
.band--alt { background: var(--surface-alt); }
.band--navy { background: var(--navy); color: var(--on-navy); }
.band--navy .lead, .band--navy .soft { color: var(--on-navy-soft); }
.band__head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
.band__head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .band__head--split { grid-template-columns: 1fr auto; } }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: #000; padding: 12px 16px; font-weight: 700; }
.skip:focus { left: 8px; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 1.5em;
  font: 700 .9375rem/1 var(--font); font-stretch: 110%; text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border-radius: 3px; border: 1.5px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--gold { background: var(--gold); color: #000; }
.btn--gold:hover { background: #E0BD4E; }
.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-deep); }
.btn--line { border-color: currentColor; color: inherit; background: transparent; }
.btn--line:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.band--navy .btn--line:hover, .hero .btn--line:hover, .cta .btn--line:hover { background: #fff; color: #000; border-color: #fff; }
.btn--wa svg { color: var(--wa); }
.btn--sm { min-height: 44px; font-size: .8125rem; padding: 0 1.1em; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.textlink { font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--gold); }
.textlink:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------ top bar + header */
.topbar { background: #000; color: #fff; font-size: .8125rem; display: none; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 24px; min-height: 38px; align-items: center; }
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--gold); }
.topbar__set { display: flex; gap: 28px; align-items: center; }
.topbar__set span, .topbar__set a { display: inline-flex; align-items: center; gap: 8px; }
.topbar svg { width: 15px; height: 15px; color: var(--gold); }
@media (min-width: 900px) { .topbar { display: block; } }

.head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--navy); color: #fff; border-bottom: 1px solid rgba(207, 171, 59, .55); }
.head .wrap { display: flex; align-items: center; gap: 24px; min-height: var(--head-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 54px; height: 54px; }
.brand__name { display: block; font-weight: 800; font-stretch: 125%; font-size: 1.125rem; letter-spacing: .01em; line-height: 1.1; white-space: nowrap; }
.brand__sub { display: block; color: var(--gold); font-size: .6875rem; font-weight: 600; letter-spacing: .2em; line-height: 1.4; white-space: nowrap; }
.nav ul { display: flex; gap: 2px; }
.nav ul a { display: block; padding: 10px 11px; font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav ul a:hover { color: var(--gold); }
.nav ul a[aria-current="page"] { border-bottom-color: var(--gold); }
.head__cta { flex: none; }
.burger { display: none; width: 48px; height: 48px; padding: 0; background: none; border: 1.5px solid var(--navy-line); border-radius: 3px; color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.burger svg { width: 24px; height: 24px; }
.burger .x { display: none; }
.burger[aria-expanded="true"] .x { display: block; }
.burger[aria-expanded="true"] .bars { display: none; }
.nav__extra { display: none; }

@media (max-width: 1199px) {
  .burger { display: inline-flex; }
  .head__cta { display: none; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--navy-deep); border-bottom: 2px solid var(--gold); max-height: calc(100vh - var(--head-h)); overflow-y: auto; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 0; }
  .nav ul a { padding: 15px 0; font-size: 1.0625rem; border-bottom: 1px solid var(--navy-line); }
  .nav ul a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--navy-line); }
  .nav__extra { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px var(--gutter) 22px; }
  .nav__extra .btn { flex: 1 1 140px; }
}
@media (max-width: 420px) {
  .brand img { width: 46px; height: 46px; }
  .brand__name { font-size: 1rem; }
  .brand__sub { font-size: .625rem; letter-spacing: .16em; }
}

/* ------------------------------------------------------------ picture slots */
.shot { position: relative; overflow: hidden; background: var(--navy-deep); }
.shot > .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot.has-photo > .art { display: none; }

/* ------------------------------------------------------------ hero */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; }
.hero__inner { position: relative; z-index: 2; padding-block: clamp(40px, 5.4vw, 76px) clamp(40px, 5vw, 68px); }
.hero__copy { max-width: 620px; }
.hero__place { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .9375rem; color: var(--on-navy-soft); margin-bottom: 22px; }
.slashes { flex: none; width: 22px; height: 14px; background: linear-gradient(var(--gold), var(--gold)) 0 0 / 7px 100% no-repeat, linear-gradient(var(--gold), var(--gold)) 12px 0 / 7px 100% no-repeat; transform: skewX(-24deg); }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 5.25rem); font-weight: 900; line-height: .98; letter-spacing: -.02em; }
.hero h1 span { display: block; }
.hero h1 i { display: inline-block; width: .17em; height: .17em; margin-left: .07em; background: var(--gold); transform: rotate(45deg) translateY(-.04em); font-style: normal; overflow: hidden; text-indent: -99px; }
.hero__sub { font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.4; font-weight: 500; margin: 26px 0 30px; max-width: 30ch; }
.hero__more { margin-top: 22px; }
.hero__more a { color: #fff; }

.hero__visual { position: absolute; inset: 0 0 0 auto; width: 50%; z-index: 1; }
.hero__art { position: absolute; inset: 0; clip-path: polygon(27% 0, 100% 0, 100% 100%, 0 100%); }
.hero__band { position: absolute; top: 0; bottom: 0; width: 100%; background: var(--gold); }
.hero__band--a { left: -30px; clip-path: polygon(27% 0, calc(27% + 15px) 0, 15px 100%, 0 100%); }
.hero__band--b { left: -50px; clip-path: polygon(27% 0, calc(27% + 3px) 0, 3px 100%, 0 100%); opacity: .75; }

.hero__services { position: relative; z-index: 3; background: var(--navy-deep); border-top: 1px solid rgba(207, 171, 59, .55); }
.hero__services ul { display: grid; grid-template-columns: repeat(5, 1fr); }
.hero__services li { position: relative; }
.hero__services li + li::before { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 2px; background: var(--gold); transform: skewX(-24deg); }
.hero__services a { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 20px; text-decoration: none; font-weight: 600; font-size: .9375rem; line-height: 1.25; }
.hero__services a:hover { color: var(--gold); }
.hero__services svg { width: 26px; height: 26px; flex: none; }

@media (max-width: 959px) {
  .hero { display: flex; flex-direction: column; }
  .hero__inner { order: 1; width: 100%; }
  .hero__visual { order: 2; }
  .hero__services { order: 3; }
  .product__shot { aspect-ratio: 16 / 10; }
  .hero__copy { max-width: none; }
  .hero__inner { padding-bottom: 28px; }
  .hero__visual { position: relative; inset: auto; width: auto; height: clamp(200px, 46vw, 320px); }
  .hero__art { clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 100%); }
  .hero__band { left: 0; right: 0; width: auto; }
  .hero__band--a { top: -20px; bottom: 20px; clip-path: polygon(0 26%, 100% 0, 100% 10px, 0 calc(26% + 10px)); }
  .hero__band--b { top: -34px; bottom: 34px; clip-path: polygon(0 26%, 100% 0, 100% 3px, 0 calc(26% + 3px)); }
  .hero__services ul { grid-template-columns: 1fr 1fr; }
  .hero__services li::before { display: none; }
  .hero__services li { border-bottom: 1px solid var(--navy-line); }
  .hero__services li:nth-child(odd) { border-right: 1px solid var(--navy-line); }
  .hero__services li:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .hero__services a { min-height: 60px; padding: 10px 16px; }
}
@media (max-width: 520px) {
  .hero .btns .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1 span { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero h1 span:nth-child(2) { animation-delay: .12s; }
  .hero h1 span:nth-child(3) { animation-delay: .24s; }
  .hero__band { animation: slide .9s cubic-bezier(.2, .7, .2, 1) .2s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(.35em); } }
  @keyframes slide { from { opacity: 0; transform: translate(40px, 0); } }
}

/* ------------------------------------------------------------ inner page header */
.pagehead { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.pagehead .wrap { position: relative; z-index: 1; padding-block: clamp(36px, 6vw, 72px); }
.pagehead h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 18ch; }
.pagehead .lead { color: var(--on-navy-soft); margin-top: 18px; }
.pagehead::before, .pagehead::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 320px; background: var(--gold); }
.pagehead::before { clip-path: polygon(calc(100% - 60px) 0, calc(100% - 46px) 0, calc(100% - 166px) 100%, calc(100% - 180px) 100%); }
.pagehead::after { clip-path: polygon(calc(100% - 82px) 0, calc(100% - 79px) 0, calc(100% - 199px) 100%, calc(100% - 202px) 100%); opacity: .75; }
@media (max-width: 760px) { .pagehead::before, .pagehead::after { display: none; } .pagehead { border-bottom: 3px solid var(--gold); } }
.crumbs { display: flex; gap: 10px; font-size: .875rem; color: var(--on-navy-soft); margin-bottom: 18px; }
.crumbs a { color: #fff; text-underline-offset: 4px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--gold); }

/* ------------------------------------------------------------ home: intro + who we serve */
.split { display: grid; gap: clamp(28px, 5vw, 72px); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } .split--wide-right { grid-template-columns: 5fr 7fr; } }
.serve { border-top: 2px solid var(--ink); }
.serve li { display: grid; grid-template-columns: 1fr; gap: 4px 28px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.serve h3 { font-size: 1.125rem; }
.serve p { color: var(--ink-soft); font-size: 1rem; }
@media (min-width: 620px) { .serve li { grid-template-columns: 200px 1fr; } }

/* ------------------------------------------------------------ product cards */
.products { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.product { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.product__shot { aspect-ratio: 4 / 3; border-radius: 3px 3px 0 0; border-bottom: 2px solid var(--gold); }
.product__icon { position: relative; z-index: 1; margin: -24px 0 0 20px; width: 48px; height: 48px; display: grid; place-items: center; background: #fff; color: #000; border: 1.5px solid #000; border-radius: 3px; }
.product__icon svg { width: 26px; height: 26px; }
.product__body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 16px 20px 22px; }
.product__name { font-size: 1.1875rem; font-stretch: 112%; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: 0; max-width: none; }
.product__body p { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; margin: 0; }
.uses { font-size: .9375rem; line-height: 1.45; margin: 0 0 6px; }
.uses dt { font-weight: 700; margin-bottom: 4px; }
.uses dd { margin: 0; color: var(--ink-soft); }
.product .btn { margin-top: auto; align-self: flex-start; }

/* ------------------------------------------------------------ steps (a real sequence) */
.steps { display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--navy-line); }
.steps li { counter-increment: step; padding: 26px 0; border-bottom: 1px solid var(--navy-line); display: grid; grid-template-columns: 56px 1fr; gap: 0 12px; }
.steps li::before { content: counter(step); font-weight: 900; font-stretch: 125%; font-size: 2rem; line-height: 1; color: var(--gold); }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--on-navy-soft); font-size: 1rem; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); column-gap: 28px; border-top: 0; }
  .steps li { grid-template-columns: 1fr; gap: 14px; align-content: start; padding: 24px 0 0; border-bottom: 0; border-top: 2px solid var(--gold); }
}

/* ------------------------------------------------------------ benefits */
.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.benefits li { padding: clamp(22px, 3vw, 34px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.benefits h3 { margin: 18px 0 8px; }
.benefits p { color: var(--ink-soft); font-size: 1rem; }
.mark { position: relative; width: 52px; height: 52px; display: grid; place-items: center; background: #fff; color: #000; border: 1.5px solid #000; border-radius: 3px; }
.mark svg { width: 28px; height: 28px; }
.mark::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; border-right: 3px solid var(--gold); border-bottom: 3px solid var(--gold); }
.benefits--compact li { display: grid; grid-template-columns: 52px 1fr; gap: 4px 18px; align-items: start; }
.benefits--compact .mark { grid-row: 1 / span 2; }
.benefits--compact h3 { margin: 2px 0 0; }
.benefits--compact p { grid-column: 2; font-size: .9688rem; }

/* ------------------------------------------------------------ services */
.services { border-top: 2px solid var(--ink); }
.service { display: grid; gap: 20px 40px; padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--line); }
.service__title { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: center; }
.service__title h2 { font-size: 1.5rem; }
.service p { color: var(--ink-soft); }
.ticks { display: grid; gap: 10px; font-size: 1rem; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.ticks svg { width: 20px; height: 20px; margin-top: 3px; color: var(--gold-ink); }
.service .btn { justify-self: start; }
@media (min-width: 980px) {
  .service { grid-template-columns: 300px 1fr 1fr; align-items: start; }
  .service__title { grid-template-columns: 1fr; gap: 16px; }
}

/* ------------------------------------------------------------ about */
.emblem { background: var(--navy); border: 1px solid var(--gold); border-radius: 4px; padding: clamp(28px, 5vw, 56px); display: grid; place-items: center; }
.emblem img { width: min(100%, 340px); height: auto; }
.focus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 40px; border-top: 2px solid var(--ink); }
.focus li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.focus h3 { margin-bottom: 6px; }
.focus p { color: var(--ink-soft); font-size: 1rem; }
.duo { display: grid; gap: 24px; }
@media (min-width: 820px) { .duo { grid-template-columns: 1fr 1fr; } }
.panel { background: var(--navy); color: #fff; padding: clamp(26px, 4vw, 44px); border-radius: 4px; border-top: 3px solid var(--gold); }
.panel h2 { font-size: 1.5rem; margin-bottom: 14px; }
.panel p { color: var(--on-navy-soft); }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; }
.values li { border-top: 2px solid var(--gold); padding-top: 16px; }
.values h3 { margin-bottom: 6px; }
.values p { color: var(--ink-soft); font-size: .9688rem; }

/* ------------------------------------------------------------ projects */
.notice { display: grid; gap: 18px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--gold); border-left-width: 6px; border-radius: 4px; background: var(--surface); }
.notice h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); max-width: none; }
.projects { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.project { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); display: flex; flex-direction: column; }
.project__shot { aspect-ratio: 16 / 10; border-radius: 3px 3px 0 0; }
.tag { position: absolute; left: 0; top: 16px; z-index: 2; background: var(--gold); color: #000; font-size: .8125rem; font-weight: 700; padding: 6px 18px 6px 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.has-photo > .tag { display: none; }
.project__body { padding: 22px; display: grid; gap: 14px; }
.spec { display: grid; gap: 8px; font-size: .9688rem; margin: 0; }
.spec div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; }
.spec dt { font-weight: 700; }
.spec dd { margin: 0; color: var(--ink-soft); }
.project p { color: var(--ink-soft); font-size: 1rem; }

/* ------------------------------------------------------------ gallery */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip { min-height: 44px; padding: 0 16px; font: 600 .9375rem/1 var(--font); background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); border-radius: 3px; cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: inset 0 -3px 0 var(--gold); }
.masonry { columns: 3 280px; column-gap: 16px; }
.tile { break-inside: avoid; margin: 0 0 16px; }
.tile[hidden] { display: none; }
.tile .shot { border-radius: 3px; }
.r-wide { aspect-ratio: 4 / 3; } .r-tall { aspect-ratio: 3 / 4; } .r-sq { aspect-ratio: 1 / 1; } .r-pano { aspect-ratio: 16 / 9; }
.tile figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px 0; font-size: .9375rem; }
.tile figcaption b { font-weight: 700; }
.tile figcaption span { color: var(--ink-soft); white-space: nowrap; }

/* ------------------------------------------------------------ chooser table */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 1rem; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--navy); color: #fff; font-stretch: 112%; border-bottom: 2px solid var(--gold); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 600; width: 46%; }
tbody td { color: var(--ink-soft); }

/* ------------------------------------------------------------ CTA */
.cta { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.cta .wrap { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 88px); }
.cta h2 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); max-width: 20ch; }
.cta p { color: var(--on-navy-soft); font-size: 1.125rem; margin: 16px 0 28px; }
.cta::before, .cta::after { content: ""; position: absolute; right: 0; bottom: 0; background: var(--gold); }
.cta::before { width: 300px; height: 300px; clip-path: polygon(100% 28%, 100% 40%, 40% 100%, 28% 100%); }
.cta::after { width: 300px; height: 300px; clip-path: polygon(100% 20%, 100% 21.5%, 21.5% 100%, 20% 100%); opacity: .75; }
@media (max-width: 760px) { .cta::before, .cta::after { width: 160px; height: 160px; opacity: .9; } .cta .btn { flex: 1 1 100%; } }

/* ------------------------------------------------------------ contact */
.contact { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 960px) { .contact { grid-template-columns: 5fr 7fr; } }
.card { border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 4px; background: var(--surface); padding: clamp(22px, 3.4vw, 36px); }
.card > h2 { font-size: 1.5rem; margin-bottom: 4px; }
.card__sub { color: var(--gold-ink); font-weight: 600; letter-spacing: .18em; font-size: .75rem; margin-bottom: 22px; }
.details { display: grid; gap: 0; margin: 0 0 24px; }
.details div { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.details svg { width: 22px; height: 22px; margin-top: 2px; }
.details dt { font-size: .875rem; color: var(--ink-soft); grid-column: 2; }
.details dd { margin: 0; grid-column: 2; font-weight: 600; overflow-wrap: anywhere; }
.details svg { grid-row: 1 / span 2; }
.details a { text-decoration-color: var(--gold); text-underline-offset: 4px; }
.card .btns .btn { flex: 1 1 130px; }

.form { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: .9375rem; }
.field label small { font-weight: 400; color: var(--ink-soft); font-size: .875rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font: 400 1rem/1.4 var(--font);
  color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 3px; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: #B3261E; }
.field .err { color: #B3261E; font-size: .875rem; font-weight: 600; min-height: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field .err { color: #FF8A80; } }
:root[data-theme="dark"] .field .err { color: #FF8A80; }
.form__foot { display: grid; gap: 12px; }
.form__note { font-size: .9375rem; color: var(--ink-soft); }
.form__status { font-weight: 600; padding: 14px 16px; border-left: 4px solid var(--gold); background: var(--surface-alt); }
.form__status:empty { display: none; }

.map { position: relative; min-height: 380px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--surface-alt); display: grid; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__fallback { display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 32px 20px; }
.map__fallback svg { width: 40px; height: 40px; color: var(--gold-ink); }
.map__fallback p { margin: 0; max-width: 46ch; }
.maprow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; }

/* ------------------------------------------------------------ legal */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.375rem; margin: 2em 0 .6em; max-width: none; }
.prose ul { list-style: square; padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--gold-ink); }

/* ------------------------------------------------------------ footer */
.foot { background: var(--navy-deep); color: #fff; border-top: 3px solid var(--gold); }
.foot .wrap { padding-block: clamp(44px, 6vw, 72px) 28px; }
.foot__grid { display: grid; gap: 36px 40px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1.2fr 1.5fr; } }
.foot .brand { margin-bottom: 18px; }
.foot .brand img { width: 72px; height: 72px; }
.foot__tag { font-weight: 800; font-stretch: 125%; letter-spacing: .02em; color: var(--gold); margin-bottom: 12px; }
.foot p { color: var(--on-navy-soft); font-size: .9688rem; }
.foot h2 { font-size: 1rem; letter-spacing: .02em; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--navy-line); max-width: none; }
.foot li { margin-bottom: 4px; }
.foot li a { display: inline-block; padding: 5px 0; color: var(--on-navy-soft); text-decoration: none; font-size: .9688rem; }
.foot li a:hover { color: var(--gold); }
.foot__contact li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; margin-bottom: 12px; color: var(--on-navy-soft); font-size: .9688rem; }
.foot__contact svg { width: 18px; height: 18px; margin-top: 4px; color: var(--gold); }
.foot__contact a { padding: 0; overflow-wrap: anywhere; }
.foot__base { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--navy-line); font-size: .875rem; color: var(--on-navy-soft); }
.foot__base a { color: var(--on-navy-soft); text-underline-offset: 4px; }
.foot__base nav { display: flex; gap: 22px; }

/* ------------------------------------------------------------ always-reachable contact */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.25fr 1.3fr; background: var(--navy-deep); border-top: 1px solid var(--gold); padding-bottom: env(safe-area-inset-bottom, 0px); }
.dock a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; color: #fff; text-decoration: none; font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .02em; }
.dock a + a { border-left: 1px solid var(--navy-line); }
.dock svg { width: 20px; height: 20px; }
.dock .is-wa svg { color: var(--wa); }
.dock .is-quote { background: var(--gold); color: #000; border-left: 0; }
.wafloat { display: none; position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; place-items: center; box-shadow: 0 6px 18px rgba(6, 27, 46, .35); }
.wafloat svg { width: 32px; height: 32px; }
@media (max-width: 767px) { body { padding-bottom: 59px; } }
@media (min-width: 768px) { .dock { display: none; } .wafloat { display: grid; } }

/* preview build: one file, pages switched by the address hash */
[data-mode="preview"] [data-page] { display: none; }
[data-mode="preview"] [data-page].is-active { display: block; }

@media print { .head, .topbar, .dock, .wafloat, .cta { display: none; } }