/* TradeWinds Construction — coastal craft design system
   Ink/paper base drawn from the logo, deep-tide accent, teak detail lines. */
:root{
  --ink:#191c1f;
  --ink-soft:#3d4348;
  --paper:#fbfaf7;
  --mist:#edece6;
  --mist-deep:#e2e0d8;
  --tide:#0d5c58;
  --tide-deep:#083f3c;
  --teak:#a06b3e;
  --line:#d8d5cc;
  --white:#ffffff;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1120px;
  --radius:2px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--tide);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--tide-deep)}
:focus-visible{outline:3px solid var(--tide);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}

/* Type */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.2vw,3.15rem)}
h2{font-size:clamp(1.55rem,3.4vw,2.15rem)}
h3{font-size:1.22rem;line-height:1.3}
p{margin:0 0 1em}
.kicker{
  font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teak);
  margin:0 0 .8em;display:block;
}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:62ch}

/* Wave rule — signature motif from the logo */
.wave{width:88px;height:12px;display:block;margin:14px 0 0;color:var(--tide)}
.wave.center{margin-left:auto;margin-right:auto}
.wave.light{color:var(--mist-deep)}

/* Buttons */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:700;font-size:1rem;
  padding:14px 26px;border-radius:var(--radius);text-decoration:none;
  border:2px solid var(--tide);transition:background .15s,color .15s,border-color .15s;
  text-align:center;
}
.btn-solid{background:var(--tide);color:#fff}
.btn-solid:hover{background:var(--tide-deep);border-color:var(--tide-deep);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* Header */
.topline{background:var(--ink);color:#e8e6df;font-size:.82rem}
.topline .wrap{display:flex;justify-content:space-between;gap:14px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topline a{color:#fff;font-weight:600}
header.site{
  background:var(--paper);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{width:56px;height:56px}
.brand .b-name{font-family:var(--serif);font-weight:700;font-size:1.18rem;letter-spacing:.03em;line-height:1.1}
.brand .b-sub{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
.nav-links{display:flex;gap:26px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--tide)}
.nav-call{white-space:nowrap}
.nav-toggle{display:none;background:none;border:2px solid var(--ink);border-radius:var(--radius);padding:8px 10px;font:inherit;font-weight:700;cursor:pointer}
@media (max-width:920px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;padding:14px 22px 20px;gap:14px;
  }
  .nav-links.open{display:flex}
}

/* Hero */
.hero{background:linear-gradient(180deg,var(--paper) 0%,var(--mist) 100%);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding-top:58px;padding-bottom:58px}
.hero-media img{border-radius:var(--radius);box-shadow:0 1px 0 var(--line)}
.hero-note{font-size:.85rem;color:var(--ink-soft);margin-top:10px}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr;padding-top:38px;padding-bottom:38px}}

/* Trust bar */
.trust{background:var(--ink);color:#e8e6df}
.trust ul{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 24px;list-style:none;margin:0;padding:16px 20px;max-width:var(--maxw);margin-inline:auto}
.trust li{font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:10px}
.trust svg{flex:none;color:var(--teak)}
@media (max-width:820px){.trust ul{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.trust ul{grid-template-columns:1fr}}

/* Sections */
section.band{padding:64px 0}
section.band.tint{background:var(--mist)}
section.band.dark{background:var(--ink);color:#e8e6df}
section.band.dark h2,section.band.dark h3{color:#fff}
section.band.dark a{color:#9fd4cf}
.section-head{max-width:66ch;margin-bottom:34px}
@media (max-width:640px){section.band{padding:44px 0}}

/* Cards */
.grid{display:grid;gap:22px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media (max-width:920px){.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid.c3,.grid.c2{grid-template-columns:1fr}}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;gap:8px;
  border-top:3px solid var(--tide);
}
.card h3{margin:0}
.card p{margin:0;color:var(--ink-soft);font-size:.98rem}
.card .more{margin-top:auto;padding-top:12px;font-weight:700;font-size:.94rem;text-decoration:none}
.card.quiet{border-top-color:var(--teak);background:var(--paper)}

/* Compact trade list */
.trades{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.trades a{
  display:inline-block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 16px;font-weight:600;font-size:.95rem;
  color:var(--ink);text-decoration:none;
}
.trades a:hover{border-color:var(--tide);color:var(--tide)}

/* Split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split img{border-radius:var(--radius)}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* Area lists */
.area-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:820px){.area-cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.area-cols{grid-template-columns:1fr}}
.area-cols h3{font-size:1.05rem;border-bottom:1px solid var(--line);padding-bottom:8px}
.area-cols ul{list-style:none;margin:0;padding:0}
.area-cols li{padding:4px 0}
.area-cols a{text-decoration:none;font-weight:600}
.area-cols .plain{color:var(--ink-soft);font-weight:400}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{font-weight:700;font-size:1.05rem;cursor:pointer;padding:12px 0;list-style:none;position:relative;padding-right:34px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:8px;font-size:1.4rem;color:var(--tide)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 16px;color:var(--ink-soft)}

/* Gallery */
.slider{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--ink)}
.slides{display:flex;transition:transform .45s ease}
@media (prefers-reduced-motion:reduce){.slides{transition:none}}
.slide{min-width:100%}
.slide img{width:100%}
.slider button.sl-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(25,28,31,.72);color:#fff;border:0;border-radius:var(--radius);
  width:44px;height:44px;font-size:1.3rem;cursor:pointer;
}
.sl-prev{left:10px}.sl-next{right:10px}
.dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.dots button{width:11px;height:11px;border-radius:50%;border:2px solid var(--tide);background:transparent;cursor:pointer;padding:0}
.dots button[aria-current="true"]{background:var(--tide)}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ba-pair figure{margin:0;position:relative}
.ba-pair figcaption{
  position:absolute;left:10px;top:10px;background:var(--ink);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--radius);
}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){.gal-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.gal-grid{grid-template-columns:1fr}}
.gal-grid img{border-radius:var(--radius);width:100%}

/* Forms */
form.lead{display:grid;gap:16px;max-width:640px}
form.lead .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){form.lead .row{grid-template-columns:1fr}}
form.lead label{font-weight:700;font-size:.92rem;display:block;margin-bottom:6px}
form.lead input,form.lead select,form.lead textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius);
  font:inherit;background:var(--white);color:var(--ink);
}
form.lead input:focus,form.lead select:focus,form.lead textarea:focus{border-color:var(--tide);outline:none}
.hp{position:absolute !important;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-msg{border-radius:var(--radius);padding:14px 16px;font-weight:600;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:#e5f1ef;border:1.5px solid var(--tide);color:var(--tide-deep)}
.form-msg.err{background:#f7ebe6;border:1.5px solid var(--teak);color:#6d431f}

/* Breadcrumbs */
.crumbs{font-size:.85rem;color:var(--ink-soft);padding:16px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--ink-soft)}

/* Page hero (interior) */
.page-hero{background:var(--mist);border-bottom:1px solid var(--line);padding:40px 0 46px}
.page-hero .lede{margin-top:6px}

/* CTA band */
.cta-band{background:var(--tide);color:#fff}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding-top:40px;padding-bottom:40px}
.cta-band h2{color:#fff;margin:0}
.cta-band .btn-solid{background:#fff;color:var(--tide);border-color:#fff}
.cta-band .btn-solid:hover{background:var(--paper);color:var(--tide-deep)}
.cta-band .btn-ghost{color:#fff;border-color:#fff}
.cta-band .btn-ghost:hover{background:#fff;color:var(--tide)}

/* Footer */
footer.site{background:var(--ink);color:#c9c7bf;font-size:.94rem}
footer.site .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:34px;padding-top:52px;padding-bottom:36px}
footer.site h3{color:#fff;font-size:.8rem;font-family:var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{padding:3px 0}
footer.site a{color:#e8e6df;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site img{width:120px;margin-bottom:14px}
.nap{color:#fff;font-weight:600;line-height:1.7}
.foot-bottom{border-top:1px solid #33383c}
.foot-bottom .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 20px;font-size:.82rem;grid-template-columns:none}
@media (max-width:860px){footer.site .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer.site .wrap{grid-template-columns:1fr}}

/* Sticky mobile call bar */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--ink);padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  grid-template-columns:1fr 1fr;gap:10px;
}
.callbar a{padding:12px 10px;font-size:.98rem}
@media (max-width:860px){
  .callbar{display:grid}
  body{padding-bottom:76px}
}
@media print{.callbar,header.site,.topline{display:none}}

/* Hero collage */
.collage{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;align-items:stretch}
.collage .hm-side{display:grid;grid-template-rows:1fr 1fr;gap:10px}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block}
.collage .hm-main img{aspect-ratio:4/3}
@media (max-width:560px){.collage{grid-template-columns:1fr}.collage .hm-side{grid-template-rows:none;grid-template-columns:1fr 1fr}.collage .hm-side img{aspect-ratio:4/3}}

/* Card photo thumbs */
.card{overflow:hidden}
.card .card-img{margin:-26px -24px 16px}
.card .card-img img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}

/* Photo strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);display:block}
@media (max-width:560px){.strip{grid-template-columns:1fr 1fr}.strip img:nth-child(3){display:none}}

/* Normalize mixed aspect ratios */
.slide img{aspect-ratio:4/3;object-fit:cover}
.gal-grid img{aspect-ratio:4/3;object-fit:cover}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* Utility */
.two-col{columns:2;column-gap:40px}
@media (max-width:640px){.two-col{columns:1}}
ul.checks{list-style:none;margin:0 0 1em;padding:0}
ul.checks li{padding:6px 0 6px 30px;position:relative}
ul.checks li::before{
  content:"";position:absolute;left:0;top:12px;width:16px;height:9px;
  border-left:3px solid var(--tide);border-bottom:3px solid var(--tide);
  transform:rotate(-45deg);
}
.note{font-size:.9rem;color:var(--ink-soft)}
table.plain{border-collapse:collapse;width:100%;font-size:.96rem}
table.plain th,table.plain td{border-bottom:1px solid var(--line);text-align:left;padding:10px 12px 10px 0}