:root {
  --bg: #0b0c0c;
  --bg-2: #101313;
  --bg-3: #161a1a;
  --text: #eef2f1;
  --muted: #95a19e;
  --line: #222927;
  --teal: #2aa593;
  --teal-hi: #4fdcc5;
  --teal-lo: #1b6f63;
  --chrome: linear-gradient(180deg, #ffffff 0%, #e9eeee 38%, #8e9998 52%, #d9e0df 70%, #ffffff 100%);
  --display: "Chakra Petch", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --cut: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font: 400 1.05rem/1.6 var(--body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: .01em; text-transform: uppercase; }
h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
::selection { background: var(--teal); color: #041210; }

/* chrome lettering, like the logo */
.chrome { background: var(--chrome); background-size: 100% 1lh; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.eyebrow { margin: 0 0 12px; font: 600 .8rem var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--teal-hi); display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--teal); box-shadow: 0 0 10px var(--teal); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(11,12,12,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 40px; height: auto; filter: drop-shadow(0 0 8px rgba(42,165,147,.35)); }
.brand span { font: 700 1.05rem var(--display); letter-spacing: .12em; text-transform: uppercase; }
.links { display: flex; gap: 28px; }
.links a { text-decoration: none; font: 600 .82rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.links a:hover { color: var(--teal-hi); }
.call { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 600 .9rem var(--display); letter-spacing: .06em; color: var(--text); padding: 9px 16px; border: 1px solid var(--teal); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); background: rgba(42,165,147,.08); white-space: nowrap; }
.call:hover { background: rgba(42,165,147,.2); }
.call svg { width: 15px; height: 15px; fill: var(--teal-hi); }
.menu-btn { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; padding: 10px 8px; }
.menu-btn span { display: block; height: 2px; background: var(--text); margin: 6px 0; transition: transform .2s; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- buttons (angled corners, like the logo's lettering) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; font: 700 .9rem var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: #041210; background: linear-gradient(180deg, var(--teal-hi), var(--teal)); border: 0; cursor: pointer; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); transition: filter .2s, transform .2s; }
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-ghost { color: var(--text); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 110px); border-bottom: 1px solid var(--line); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; opacity: .28; filter: grayscale(.4); }
.hero.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, var(--bg) 20%, rgba(11,12,12,.6) 70%, rgba(11,12,12,.85)); }
.hero-glow { position: absolute; z-index: -1; width: 900px; height: 900px; right: -200px; top: 50%; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(42,165,147,.22), transparent 70%); pointer-events: none; }
.hero::after { /* faint geometric linework */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(42,165,147,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(42,165,147,.07) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse at 75% 50%, #000 0%, transparent 65%);
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(24px, 5vw, 64px); }
.hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: .98; }
.lead { color: #c4ccca; font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 560px; margin: 24px 0 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-area { margin: 26px 0 0; color: var(--muted); font-size: .95rem; display: flex; align-items: center; gap: 10px; }
.hero-area::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--teal-hi); box-shadow: 0 0 10px var(--teal); }
.crest { position: relative; display: grid; place-items: center; }
.crest img { position: relative; width: min(100%, 520px); filter: drop-shadow(0 20px 40px rgba(0,0,0,.7)); animation: rise 1.2s cubic-bezier(.2,.7,.2,1) both; }
.crest-ring { position: absolute; width: 112%; max-width: 620px; fill: none; stroke: var(--teal); stroke-width: .6; opacity: .45; animation: turn 60s linear infinite; }
.crest-ring polygon + polygon { stroke-dasharray: 2 4; opacity: .7; }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(20px) scale(.97); } }

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(28px, 4vw, 48px); flex-wrap: wrap; }
.section-note { margin: 0; color: var(--muted); }
.empty { border: 1px dashed var(--line); padding: 48px; text-align: center; color: var(--muted); }

/* ---------- portfolio ---------- */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.project { background: var(--bg-2); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.project-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.6fr 1fr; }
.project-info { padding: 22px 24px 26px; }
.project-lead .project-info { align-self: center; padding: 32px; }
.project-car { margin: 0 0 6px; font: 600 .78rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-hi); }
.project h3 { font-size: 1.35rem; margin-bottom: 8px; }
.project-lead h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.project-info p:not(.project-car) { margin: 0; color: var(--muted); }

.ba { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-3); user-select: none; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--teal-hi); box-shadow: 0 0 12px var(--teal); pointer-events: none; }
.ba-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%) rotate(45deg); background: var(--bg); border: 2px solid var(--teal-hi); box-shadow: 0 0 14px rgba(42,165,147,.6); }
.ba-handle::before { content: "‹ ›"; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -52%); color: var(--teal-hi); font: 700 .95rem var(--display); white-space: nowrap; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba:focus-within .ba-handle { background: #fff; }
.ba-tag { position: absolute; top: 14px; padding: 5px 10px; font: 600 .7rem var(--display); letter-spacing: .2em; text-transform: uppercase; background: rgba(11,12,12,.8); pointer-events: none; }
.ba-tag-b { left: 14px; }
.ba-tag-a { right: 14px; color: var(--teal-hi); }
.ba-single { cursor: zoom-in; }
.project-lead .ba { aspect-ratio: auto; min-height: 380px; }

/* ---------- services ---------- */
.services { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 28px; }
.filters button { font: 600 .78rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--line); padding: 9px 16px; cursor: pointer; }
.filters button:hover { color: var(--text); border-color: var(--muted); }
.filters button.on { color: #041210; background: var(--teal-hi); border-color: var(--teal-hi); }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.svc { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 22px 22px; text-decoration: none; background: var(--bg-3); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); transition: border-color .25s, transform .25s, background .25s; }
.svc::before { content: ""; position: absolute; top: 0; right: 0; width: calc(var(--cut) * 1.42); height: 1px; background: var(--line); transform-origin: right top; transform: rotate(45deg) translateY(-.5px); }
.svc:hover { border-color: var(--teal); background: #182120; transform: translateY(-3px); }
.svc[hidden] { display: none; }
.svc-icon { width: 40px; height: 40px; fill: none; stroke: var(--teal-hi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.svc-cat { font: 600 .68rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.svc h3 { font-size: 1.15rem; }
.svc p { margin: 0; color: var(--muted); font-size: .96rem; flex: 1; }
.svc-cta { margin-top: 10px; font: 600 .76rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-hi); opacity: .0; transform: translateX(-6px); transition: .25s; }
.svc:hover .svc-cta { opacity: 1; transform: none; }

/* ---------- process ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, var(--teal), var(--line)); }
.steps li { counter-increment: s; position: relative; padding-right: 26px; }
.steps li::before { content: "0" counter(s); position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; font: 700 1.1rem var(--display); color: var(--teal-hi); background: var(--bg); border: 1px solid var(--teal); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); box-shadow: inset 0 0 18px rgba(42,165,147,.25); }
.steps b { display: block; font: 700 1.15rem var(--display); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.steps span { color: var(--muted); font-size: .98rem; }

/* ---------- gallery strip ---------- */
.gallery { padding-bottom: clamp(48px, 6vw, 80px); background: var(--bg-2); border-top: 1px solid var(--line); }
.strip-nav { display: flex; gap: 8px; }
.strip-nav button { width: 46px; height: 46px; font-size: 1.5rem; color: var(--text); background: none; border: 1px solid var(--line); cursor: pointer; }
.strip-nav button:hover { border-color: var(--teal); color: var(--teal-hi); }
.strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 max(16px, calc((100vw - 1240px) / 2 + 40px)); padding: 0 max(16px, calc((100vw - 1240px) / 2 + 40px)) 18px; scrollbar-width: thin; scrollbar-color: var(--teal-lo) transparent; }
.strip:focus-visible { outline: 1px solid var(--teal); }
.tile { position: relative; flex: 0 0 auto; height: clamp(240px, 32vw, 380px); margin: 0; scroll-snap-align: start; overflow: hidden; cursor: zoom-in; background: var(--bg-3); }
.tile img { height: 100%; width: auto; max-width: none; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tile:hover img { transform: scale(1.04); }
.tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; font-weight: 600; font-size: .9rem; background: linear-gradient(transparent, rgba(0,0,0,.85)); }

/* ---------- contact ---------- */
.contact { position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; width: 700px; height: 700px; left: -250px; bottom: -350px; background: radial-gradient(closest-side, rgba(42,165,147,.18), transparent); pointer-events: none; }
.contact-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact-info p { color: var(--muted); max-width: 420px; margin: 18px 0 0; }
.big-phone { display: block; margin: 30px 0 8px; font: 700 clamp(2rem, 4.2vw, 3rem) var(--display); letter-spacing: .04em; text-decoration: none; color: var(--teal-hi); text-shadow: 0 0 24px rgba(42,165,147,.4); }
.contact-email { color: var(--text); font-weight: 500; }
.quote-form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 34px); background: var(--bg-2); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.quote-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-form label { display: grid; gap: 6px; font: 600 .74rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.quote-form input, .quote-form select, .quote-form textarea { font: 400 1rem var(--body); letter-spacing: 0; text-transform: none; color: var(--text); background: var(--bg); border: 1px solid var(--line); padding: 13px 14px; border-radius: 0; }
.quote-form select option { background: var(--bg-2); }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(42,165,147,.18); }
.quote-form textarea { resize: vertical; }
.quote-form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.form-status { margin: 0; min-height: 1.4em; font-weight: 600; }
.form-status.ok { color: var(--teal-hi); }
.form-status.err { color: #ff7a7a; }

/* ---------- footer ---------- */
.footer { background: #070808; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; padding: 48px 0 20px; }
.footer a { color: var(--text); text-decoration: none; }
.footer a:hover { color: var(--teal-hi); }
.footer p { margin: 0 0 6px; }
.footer-grid { display: grid; grid-template-columns: 160px 1fr 1.6fr; gap: 36px; align-items: start; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.footer-logo { width: 140px; opacity: .9; }
.footer-name { font: 700 1rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: 10px !important; }
.footer-links { list-style: none; margin: 0; padding: 0; columns: 2 170px; column-gap: 24px; }
.footer-links li { padding: 3px 0; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 18px; font-size: .85rem; }
.footer .admin-link { color: #3e4644; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(4,5,5,.96); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 12px; }
.lightbox img { max-width: 100%; max-height: 84vh; }
.lightbox figcaption { color: #ddd; }
.lightbox button { background: none; border: 0; color: #fff; font-size: 2.6rem; cursor: pointer; height: 100%; opacity: .7; }
.lightbox button:hover { opacity: 1; color: var(--teal-hi); }
.lb-close { position: absolute; top: 10px; right: 16px; height: auto !important; }

.nf { min-height: 45vh; }
.nf h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, .js .reveal { animation: none !important; transition: none !important; opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .crest { order: -1; }
  .crest img { width: min(70%, 340px); }
  .project-lead { grid-template-columns: 1fr; }
  .project-lead .ba { min-height: 0; aspect-ratio: 4 / 3; }
  .projects { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .steps::before { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .links { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--bg-2); flex-direction: column; padding: 8px 20px 20px; gap: 0; border-bottom: 1px solid var(--line); }
  .links.open { display: flex; }
  .links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--text); }
  .menu-btn { display: block; }
  .top-inner { gap: 12px; }
  .brand span { font-size: .9rem; letter-spacing: .08em; }
}
@media (max-width: 520px) {
  .svc-grid, .steps { grid-template-columns: 1fr; }
  .quote-form .row { grid-template-columns: 1fr; }
  .call span { display: none; }
  .call { padding: 10px 12px; }
  .tile { height: 260px; }
}

/* ---------- project cards & project page ---------- */
.ba-cover { display: block; cursor: pointer; }
.ba-cover img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.ba-cover:hover img { transform: scale(1.04); }
.ba-cover .count { position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; font: 600 .7rem var(--display); letter-spacing: .16em; text-transform: uppercase; background: rgba(11,12,12,.85); color: var(--teal-hi); }
.project-link { display: inline-flex; gap: 8px; margin-top: 16px; font: 600 .8rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-hi); text-decoration: none; }
.project-link:hover span { transform: translateX(3px); }
.project-link span { transition: transform .2s; }

.project-page { padding-top: clamp(28px, 5vw, 56px); }
.crumbs { margin-bottom: 28px; }
.crumbs a { font: 600 .8rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--teal-hi); }
.project-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 64px); align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.project-head h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
.project-text p { margin: 0 0 12px; color: #c4ccca; font-size: 1.08rem; }
.project-compare { margin-bottom: 14px; }
.project-compare .ba { aspect-ratio: 16 / 9; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.project-compare .section-note { margin: 12px 0 30px; font-size: .95rem; }
.project-photos { columns: 3 300px; column-gap: 12px; }
.project-photos .tile { height: auto; margin: 0 0 12px; break-inside: avoid; display: block; }
.project-photos .tile img { width: 100%; height: auto; }
.project-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(36px, 5vw, 60px); }
.project-nav a { display: grid; gap: 4px; padding: 20px 22px; text-decoration: none; background: var(--bg-2); border: 1px solid var(--line); transition: border-color .2s; }
.project-nav a:hover { border-color: var(--teal); }
.project-nav .next { text-align: right; }
.project-nav small { font: 600 .74rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-hi); }
.project-nav span { font: 700 1.15rem var(--display); text-transform: uppercase; }
@media (max-width: 860px) {
  .project-head { grid-template-columns: 1fr; }
  .project-compare .ba { aspect-ratio: 4 / 3; }
}

.hero-area .sep { width: 5px; height: 5px; margin: 0 4px; transform: rotate(45deg); background: var(--muted); opacity: .6; }

/* =====================================================================
   SUBTLE STYLE — a calmer version of the bold look (style-bold.css).
   Same layout; less chrome, glow, motion and shouting.
   ===================================================================== */
:root { --cut: 10px; --teal: #2a9c8c; --teal-hi: #5ccab8; }

/* Headings: plain off-white, sentence case, smaller */
.chrome { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #eef2f1; filter: none; }
h1, h2, h3 { text-transform: none; letter-spacing: 0; line-height: 1.08; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 600; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); font-weight: 700; line-height: 1.04; }
.project h3, .svc h3 { font-weight: 600; }
.eyebrow { letter-spacing: .2em; font-size: .74rem; color: var(--teal-hi); }
.eyebrow::before { box-shadow: none; width: 20px; }

/* Header */
.links a { letter-spacing: .08em; font-size: .8rem; }
.brand img { filter: none; }
.call { background: none; }

/* Buttons: flat, smaller corner cut */
.btn { background: var(--teal); color: #fff; letter-spacing: .08em; font-size: .85rem; padding: 14px 24px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.btn:hover { filter: none; background: #248a7c; transform: none; }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.btn-ghost:hover { background: rgba(255,255,255,.05); }

/* Hero: no grid lines, softer glow, still logo */
.hero::after { display: none; }
.hero-glow { background: radial-gradient(closest-side, rgba(42,165,147,.09), transparent 70%); }
.hero-area::before { box-shadow: none; }
.crest img { width: min(100%, 420px); animation: none; filter: none; }
.crest-ring { opacity: .18; animation-duration: 240s; }
.crest-ring polygon + polygon { display: none; }

/* Portfolio / slider */
.ba-handle { box-shadow: none; background: #fff; }
.ba-handle::after { border-color: #fff; box-shadow: none; }
.ba-handle::before { color: #fff; }
.ba-tag-a { color: #fff; }
.project-car, .project-link { letter-spacing: .1em; }
.ba-cover .count { color: #fff; }

/* Services: no lift or glow, lighter labels */
.svc { transition: border-color .2s; }
.svc:hover { transform: none; background: var(--bg-3); border-color: #3a4543; }
.svc::before { display: none; }
.svc-icon { stroke: #8fb9b2; stroke-width: 1.6; }
.svc-cta { letter-spacing: .1em; }
.filters button { letter-spacing: .08em; }
.filters button.on { background: #e6ecea; border-color: #e6ecea; color: #0b0c0c; }

/* Process */
.steps::before { background: var(--line); }
.steps li::before { box-shadow: none; border-color: #3a4543; color: #cfd8d6; }
.steps b { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Contact */
.contact::before { display: none; }
.big-phone { text-shadow: none; color: #eef2f1; font-weight: 600; }
.quote-form label { letter-spacing: .08em; }
.quote-form { clip-path: none; }

/* Motion: shorter, gentler */
.js .reveal { transform: translateY(8px); transition-duration: .5s; }
.tile:hover img, .ba-cover:hover img { transform: scale(1.02); }

/* ---------- Subtle, dialled back up a touch ---------- */
:root { --teal: #2aa593; --teal-hi: #4fd3bd; }
/* Soft chrome on the main headline only; section headings stay plain */
.hero h1.chrome { background: linear-gradient(180deg, #ffffff 0%, #eef2f1 45%, #aeb8b6 58%, #e6ebea 100%); background-size: 100% 1lh; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }
h2 { font-weight: 700; }
/* Buttons: gentle gradient back */
.btn { background: linear-gradient(180deg, #3cc4ae, var(--teal)); }
.btn:hover { background: linear-gradient(180deg, #45cfb8, #27998a); transform: translateY(-1px); }
/* Logo: a little bigger, eases in, soft glow and ring */
.crest img { width: min(100%, 460px); animation: rise 1s cubic-bezier(.2,.7,.2,1) both; filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)); }
.crest-ring { opacity: .28; animation-duration: 120s; }
.hero-glow { background: radial-gradient(closest-side, rgba(42,165,147,.15), transparent 70%); }
/* Teal accents back on icons, slider and phone (no glow) */
.svc-icon { stroke: var(--teal-hi); stroke-width: 1.8; }
.svc:hover { transform: translateY(-2px); border-color: var(--teal); transition: border-color .2s, transform .2s; }
.ba-handle { background: var(--teal-hi); }
.ba-handle::after { border-color: var(--teal-hi); }
.ba-handle::before { color: var(--teal-hi); }
.big-phone { color: var(--teal-hi); }
.steps li::before { border-color: var(--teal); color: var(--teal-hi); }
.steps::before { background: linear-gradient(90deg, var(--teal), var(--line)); }
.btn-ghost, .btn-ghost:hover { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.06); }

/* Phone button — matches the other buttons */
.call { gap: 8px; padding: 10px 16px; border: 0; font: 700 .8rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #3cc4ae, var(--teal)); box-shadow: none; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: transform .2s, background .2s; }
.call:hover { background: linear-gradient(180deg, #45cfb8, #27998a); transform: translateY(-1px); }
.call svg { fill: currentColor; }

/* WhatsApp + map */
.btn-wa { margin-top: 22px; background: #1fa855; color: #fff; }
.btn-wa:hover { background: #1b964c; }
.btn-wa svg, .wa-float svg { width: 18px; height: 18px; fill: currentColor; }
.map { grid-column: 1 / -1; margin: 8px 0 0; border: 1px solid var(--line); background: var(--bg-2); }
.map iframe { display: block; width: 100%; height: 340px; border: 0; filter: grayscale(.35) invert(.9) hue-rotate(180deg) contrast(.9); }
.map figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; font-size: .92rem; color: var(--muted); }
.map figcaption a { color: var(--teal-hi); text-decoration: none; font-weight: 600; }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #1fa855; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.45); transition: transform .2s; }
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { transform: scale(1.06); }
@media (max-width: 520px) { .wa-float { width: 50px; height: 50px; right: 14px; bottom: 14px; } }

/* Contact details: one item per line */
.contact-email { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--text); text-decoration: none; font-weight: 500; }
.contact-email svg { width: 18px; height: 18px; color: var(--teal-hi); flex: none; }
.contact-email:hover { color: var(--teal-hi); }
.big-phone { margin-bottom: 14px; }
.btn-wa { display: flex; width: max-content; margin-top: 26px; }

/* Form field messages */
.field-msg { min-height: 0; font: 500 .82rem var(--body); letter-spacing: 0; text-transform: none; }
.field-msg:empty { display: none; }
.field-msg.err { color: #ff8a8a; }
.field-msg.warn { color: #f0c36a; }
.field-msg .fix { font: inherit; color: var(--teal-hi); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.quote-form .invalid { border-color: #d9534f; box-shadow: 0 0 0 3px rgba(217,83,79,.15); }
.quote-form .row { align-items: start; }

.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.spam-note { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.spam-note svg { width: 15px; height: 15px; color: var(--teal-hi); }

/* Gallery page */
.gallery-page { padding-top: clamp(28px, 5vw, 56px); }
.gallery-page h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.gallery-grid { columns: 3 300px; column-gap: 12px; }
.gtile { height: auto; margin: 0 0 12px; break-inside: avoid; display: block; }
.gtile[hidden] { display: none; }
.gtile img { width: 100%; height: auto; }
.gtile figcaption { display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.gtile figcaption a { color: var(--teal-hi); text-decoration: none; font: 600 .74rem var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.strip-nav { align-items: center; }
.see-all { margin: 0 12px 0 0; }

/* All projects page */
.all-projects { margin-top: 28px; text-align: center; }
.projects-page { padding-top: clamp(28px, 5vw, 56px); }
.projects-page h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.projects-grid { grid-template-columns: repeat(3, 1fr); }
.projects-grid .project[hidden] { display: none; }
.proj-find { width: min(100%, 320px); padding: 12px 14px; font: 400 1rem var(--body); color: var(--text); background: var(--bg-2); border: 1px solid var(--line); }
.proj-find:focus { outline: none; border-color: var(--teal); }
@media (max-width: 1060px) { .projects-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .projects-grid { grid-template-columns: 1fr; } }

/* Footer: hours, socials, site links */
.footer-grid { grid-template-columns: 160px 1fr 1fr 1fr; }
.hours table { border-collapse: collapse; font-size: .92rem; }
.hours th { text-align: left; font-weight: 500; color: var(--muted); padding: 2px 16px 2px 0; }
.hours td { color: var(--text); padding: 2px 0; }
.socials { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px !important; }
.socials a { color: var(--teal-hi) !important; }
nav.footer-links { columns: auto; display: grid; gap: 6px; align-content: start; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Flat finish: no gradients ---------- */
.hero h1.chrome, .chrome { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #eef2f1; filter: none; }
.btn, .call { background: var(--teal); color: #fff; box-shadow: none; }
.btn:hover, .call:hover { background: #23917f; }
.btn-ghost, .btn-ghost:hover { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.06); }
.hero-glow { display: none; }
.hero.has-photo::before { background: rgba(11,12,12,.78); }
.tile figcaption { background: rgba(11,12,12,.82); padding: 10px 14px; }
.steps::before { background: var(--line); }

/* Services — plain price-list style */
.svc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.svc-group-h { font: 600 .78rem var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--teal-hi); padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.28); margin: 0; }
.svc-list ul, .svc-extra { list-style: none; margin: 0; padding: 0; }
.svc-extra { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 4vw, 56px); }
.svc-row { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.svc-name { display: flex; justify-content: space-between; gap: 12px; font: 600 1.1rem var(--display); text-transform: none; letter-spacing: 0; color: var(--text); transition: color .15s; }
.svc-name::after { content: "→"; color: var(--teal-hi); opacity: 0; transition: opacity .15s; }
.svc-desc { display: block; margin-top: 4px; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.svc-row:hover .svc-name { color: var(--teal-hi); }
.svc-row:hover .svc-name::after { opacity: 1; }
@media (max-width: 960px) { .svc-list, .svc-extra { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .svc-list, .svc-extra { grid-template-columns: 1fr; } }

/* ---------- Less "template": plainer labels, normal-case text ---------- */
.section-head .eyebrow, .contact-info .eyebrow { display: none; }
.eyebrow { letter-spacing: .04em; text-transform: none; font: 500 .95rem var(--body); color: var(--muted); }
.eyebrow::before { display: none; }
.crest-ring { display: none; }
.hero-area::before { display: none; }
.hero-area .sep { width: auto; height: auto; margin: 0 2px; transform: none; background: none; opacity: 1; }
.hero-area .sep::before { content: "·"; }
.links a { text-transform: none; letter-spacing: 0; font: 500 .95rem var(--body); }
.btn, .call { text-transform: none; letter-spacing: 0; font: 600 .98rem var(--body); }
.brand span { letter-spacing: .06em; }
.project-car { text-transform: none; letter-spacing: 0; font: 500 .9rem var(--body); color: var(--muted); }
.project-link, .svc-cta { text-transform: none; letter-spacing: 0; font: 600 .92rem var(--body); }
.ba-cover .count, .ba-tag { text-transform: none; letter-spacing: 0; font: 600 .78rem var(--body); }
.svc-group-h { text-transform: none; letter-spacing: 0; font: 600 1rem var(--display); color: var(--text); }
.filters button { text-transform: none; letter-spacing: 0; font: 500 .9rem var(--body); }
.quote-form label { text-transform: none; letter-spacing: 0; font: 500 .9rem var(--body); color: #cfd6d4; }
.crumbs a, .project-nav small, .gtile figcaption a { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.section-head { margin-bottom: clamp(22px, 3vw, 36px); }
.btn-wa { background: #1fa855; color: #fff; }
.btn-wa:hover { background: #1b964c; }