/* ============================================================
   Boatworks Caribbean — Synthetic Teak Decking
   Built on the Boatworks Caribbean Design System:
   tokens live in tokens/*.css, this file is the component layer.
   ============================================================ */

@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/effects.css";
@import "tokens/base.css";

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body { overflow-x: hidden; }

/* Global reset: nav links and buttons are chrome without underline; footer
   and contact-row links re-apply the design system's underline treatment. */
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--eyebrow-weight);
  font-size: var(--size-eyebrow);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--text-accent);
  display: inline-block;
}

.section { padding: var(--section-y) 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-weight: var(--btn-weight);
  font-size: var(--size-btn); letter-spacing: var(--btn-tracking);
  padding: 0.95rem 1.7rem; border-radius: var(--radius-pill);
  cursor: pointer; border: 1.5px solid transparent;
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.btn-primary { background: var(--action-primary); color: var(--action-primary-text); box-shadow: var(--shadow-cta); }
.btn-primary:hover { background: var(--action-primary-hover); transform: var(--lift); }
.btn-ghost { border-color: var(--border-ghost); color: var(--text-on-dark); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: var(--text-on-dark); }
.btn-dark { background: var(--action-dark); color: var(--text-on-dark); }
.btn-dark:hover { background: var(--action-dark-hover); transform: var(--lift); }
.btn .arrow { transition: transform var(--dur-fast) ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center;
  padding: 1.1rem 0;
  transition: background var(--dur-mid) ease, box-shadow var(--dur-mid) ease, padding var(--dur-mid) ease;
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand img { height: 38px; width: auto; transition: filter var(--dur-mid) ease; }
.header:not(.scrolled) .brand img { filter: brightness(0) invert(1); }
.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a { font-weight: 500; font-size: var(--size-small); color: var(--text-on-dark); transition: color var(--dur-fast) ease, opacity var(--dur-fast) ease; opacity: .9; }
.nav a:hover { opacity: 1; color: var(--orange); }
.header.scrolled {
  background: rgba(246,241,232,.88);
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  box-shadow: var(--shadow-header);
  padding: 0.6rem 0;
}
.header.scrolled .nav a { color: var(--text-body); }
.header.scrolled .nav a:hover { color: var(--orange-dark); }
/* a.btn-nav beats the .header.scrolled .nav a (0,3,1) colour override */
.header.scrolled .nav a.btn-nav { background: var(--action-dark); color: var(--text-on-dark); border-color: var(--action-dark); }
.header.scrolled .nav a.btn-nav:hover { background: var(--action-dark-hover); color: var(--text-on-dark); border-color: var(--action-dark-hover); }
.btn-nav { padding: 0.7rem 1.3rem; font-size: var(--size-xs); border: 1.5px solid var(--border-ghost); color: var(--text-on-dark); border-radius: var(--radius-pill); font-weight: var(--btn-weight); transition: all var(--dur-fast) ease; }
/* a.btn-nav beats the .nav a:hover (0,2,1) colour override */
.nav a.btn-nav:hover { background: var(--action-primary); color: var(--action-primary-text); border-color: var(--action-primary); }
.menu-toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.menu-toggle span { width: 26px; height: 2px; background: var(--text-on-dark); transition: background .3s; }
.header.scrolled .menu-toggle span { background: var(--text-body); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--text-on-dark); isolation: isolate; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--scrim-hero);
}
.hero .wrap { padding-bottom: clamp(3rem, 7vw, 6rem); padding-top: 8rem; width: 100%; }
.hero-eyebrow { color: var(--text-accent); }
.hero h1 {
  font-size: var(--size-h1);
  max-width: 16ch; margin: 1.4rem 0 1.3rem;
  text-wrap: balance;
}
.hero p.lead { font-size: var(--size-lead); max-width: 46ch; color: rgba(255,255,255,.9); font-weight: var(--lead-weight); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hero-locations {
  margin-top: 3.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.2);
  font-size: 0.92rem; letter-spacing: 0.02em; color: rgba(255,255,255,.8);
  display: flex; align-items: center; gap: .8rem; max-width: 60ch;
}
.hero-locations svg { flex: none; }
.scroll-hint { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 1; opacity: .7; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }

/* ---------- Intro / What we do ---------- */
.intro { background: var(--surface-page); }
.intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.intro h2 { font-size: var(--size-h2); color: var(--text-heading); margin-top: 1.2rem; }
.intro h2 em { font-style: italic; color: var(--teak-dark); }
.intro .body { color: var(--text-muted); font-size: var(--size-body-lg); }
.intro .body p + p { margin-top: 1.1rem; }
.distributor {
  margin-top: 2.2rem; display: inline-flex; align-items: center; gap: 1.1rem;
  background: var(--surface-dark); color: var(--text-on-dark); padding: 1rem 1.5rem; border-radius: var(--radius);
}
.distributor img { height: 30px; filter: none; }
.distributor .d-text { line-height: 1.25; }
.distributor .d-text strong { display: block; font-weight: 600; font-size: var(--size-small); }
.distributor .d-text span { font-size: .8rem; color: rgba(255,255,255,.65); letter-spacing: .04em; text-transform: uppercase; }
.intro-figure { position: relative; }
.intro-figure img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--shadow-figure); }
.intro-figure .tag {
  position: absolute; bottom: -20px; left: -20px; background: var(--action-primary); color: var(--action-primary-text);
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem; padding: .9rem 1.4rem; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-tag);
}

/* ---------- Value props ---------- */
.values { background: var(--surface-dark); color: var(--text-on-dark); }
.values .head { max-width: 60ch; margin-bottom: var(--stack-lg); }
.values .head h2 { font-size: var(--size-h2-sm); margin-top: 1rem; }
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
.value-card {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border-on-dark); border-radius: var(--radius);
  padding: var(--card-pad);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.value-card:hover { transform: var(--lift-card); border-color: rgba(238,138,66,.55); }
.value-card .num { font-family: var(--font-display); font-style: italic; color: var(--text-accent-serif); font-size: 1.1rem; }
.value-card h3 { font-size: var(--size-h3); margin: .6rem 0 .9rem; }
.value-card p { color: var(--text-on-dark-muted); }

/* ---------- Projects ---------- */
.projects { background: var(--surface-page); }
.projects .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem,5vw,3.5rem); }
.projects .head h2 { font-size: var(--size-h2-sm); color: var(--text-heading); margin-top: 1rem; max-width: 18ch; }
.projects .head p { color: var(--text-muted); max-width: 40ch; }
.project-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--grid-gap-tight); }
.project-grid figure { position: relative; overflow: hidden; border-radius: var(--radius); }
.project-grid figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.project-grid figure:hover img { transform: var(--zoom-image); }
.project-grid .p1, .project-grid .p4, .project-grid .p7 { grid-row: span 2; }
.project-grid .p1 img, .project-grid .p4 img, .project-grid .p7 img { min-height: 100%; }
.project-grid figure figcaption {
  position: absolute; left: 1rem; bottom: 1rem; background: var(--scrim-caption);
  backdrop-filter: var(--blur-caption); color: var(--text-on-dark); font-size: .82rem; letter-spacing: .04em;
  padding: .5rem .9rem; border-radius: var(--radius-pill);
}

/* ---------- Colors ---------- */
.colors { background: var(--surface-darkest); color: var(--text-on-dark); position: relative; }
.colors .head { max-width: 62ch; margin-bottom: clamp(2.5rem,5vw,3.5rem); }
.colors .head h2 { font-size: var(--size-h2); margin: 1rem 0 1.1rem; }
.colors .head p { color: rgba(255,255,255,.72); font-size: var(--size-body-lg); }
.swatch-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--swatch-min), 1fr)); gap: var(--grid-gap-swatch);
}
.swatch {
  border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,255,255,.04);
  border: 1px solid var(--border-on-dark);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.swatch .tile { aspect-ratio: 16/10; overflow: hidden; }
.swatch .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.swatch:hover { transform: translateY(-5px); border-color: var(--orange); box-shadow: var(--shadow-lift); }
.swatch:hover .tile img { transform: scale(1.08); }
.swatch .label { padding: .7rem .85rem; font-size: .88rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.swatch .label .caulk { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid rgba(255,255,255,.3); }
.caulk.white { background: var(--caulk-white); }
.caulk.silver { background: var(--caulk-silver); }
.caulk.black { background: var(--caulk-black); }
.colors-note { margin-top: 2.2rem; font-size: .92rem; color: rgba(255,255,255,.6); }
.colors-note strong { color: var(--text-accent); font-weight: 600; }

/* ---------- CTA / Contact ---------- */
.cta { background: var(--surface-page-alt); }
.cta-card {
  background: var(--surface-dark); color: var(--text-on-dark); border-radius: var(--radius-lg);
  padding: var(--card-pad-lg); position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.2fr .9fr; gap: clamp(2rem,5vw,4rem); align-items: center;
}
.cta-card::before {
  content: ""; position: absolute; right: -120px; top: -120px; width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(238,138,66,.35), transparent 70%); pointer-events: none;
}
.cta-card h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 1rem 0 1.1rem; max-width: 18ch; }
.cta-card p { color: rgba(255,255,255,.8); max-width: 44ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.contact-card { background: var(--surface-card-dark); border: 1px solid var(--border-on-dark); border-radius: var(--radius); padding: 1.8rem; }
.contact-card .row { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--border-on-dark); }
.contact-card .row:last-child { border-bottom: 0; }
.contact-card .row svg { flex: none; color: var(--orange); }
.contact-card .row .k { font-size: var(--size-key); letter-spacing: var(--key-tracking); text-transform: uppercase; color: rgba(255,255,255,.55); }
.contact-card .row .v { font-size: 1.02rem; font-weight: 500; }
.contact-card .row a.v { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.5); transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease; }
.contact-card .row a.v:hover { color: var(--orange); text-decoration-color: var(--orange); }

/* ---------- Footer ---------- */
.footer { background: var(--surface-darkest); color: rgba(255,255,255,.7); padding: clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand img { height: 42px; filter: brightness(0) invert(1); margin-bottom: 1rem; }
.footer-brand p { max-width: 34ch; font-size: var(--size-small); }
.footer-cols { display: flex; gap: clamp(2rem,6vw,5rem); flex-wrap: wrap; }
.footer-cols h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--size-eyebrow); letter-spacing: .16em; text-transform: uppercase; color: var(--text-accent-serif); margin-bottom: .9rem; }
.footer-cols a, .footer-cols p { display: block; font-size: var(--size-small); margin-bottom: .5rem; }
.footer-cols a { color: rgba(255,255,255,.92); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.55); transition: color .2s, text-decoration-color .2s; }
.footer-cols a:hover { color: var(--orange); text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; }
.footer-bottom { padding-top: 1.6rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--size-xs); color: rgba(255,255,255,.5); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .intro-grid, .project-grid, .cta-card { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .project-grid .p1, .project-grid .p4, .project-grid .p7 { grid-row: auto; }
  .intro-figure { max-width: 460px; margin-inline: auto; }
  .cta-card { text-align: left; }
}
@media (max-width: 720px) {
  .nav { position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px); background: var(--surface-dark);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem;
    padding: 2rem; transform: translateX(100%); transition: transform .4s var(--ease-out); box-shadow: -20px 0 60px -20px rgba(0,0,0,.6); }
  .nav.open { transform: none; }
  .nav a { color: var(--text-on-dark) !important; font-size: 1.15rem; }
  .nav .btn-nav { color: var(--text-on-dark); border-color: rgba(255,255,255,.5); }
  .menu-toggle { display: flex; z-index: 110; }
  .header.scrolled .menu-toggle span { background: var(--text-body); }
  .nav.open ~ .menu-toggle span { background: var(--text-on-dark); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}