/* ==========================================================================
   Winnipesaukee Dock & Waterfront — design system
   Premium classic-nautical. This is the wealthiest clientele in the portfolio;
   the site should read like a yacht club's printed matter, not a contractor flyer.
   Deliberately unlike the other sites: serif display (Playfair), light sail-white
   paper, hairline brass rules instead of borders, generous whitespace, and NO
   cards-with-coloured-top-borders anywhere.
   Served immutable for a year, so build.py links it as /style.css?v=<hash>.
   ========================================================================== */

:root{
  --navy:#0B2545;          /* ink + structure */
  --navy-2:#173A63;
  --navy-soft:#3D5A7D;     /* secondary text */
  --brass:#B8860B;         /* the one metallic accent */
  --brass-lt:#D8A93A;
  --water:#4A7BA6;         /* links */
  --water-dk:#37608A;
  --sail:#F8F9FA;          /* paper */
  --sail-2:#EDF1F4;        /* panel */
  --rule:#D5DCE3;
  --ink:var(--navy);
  --muted:#6B7A8C;
  --white:#FFFFFF;
  --radius:2px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sail); color:var(--ink);
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17.5px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--water-dk); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--brass)}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif; font-weight:600; line-height:1.18;
  letter-spacing:-.005em; margin:0 0 .55em; color:var(--navy)}
h1{font-size:clamp(2.1rem,4.8vw,3.4rem); font-weight:700}
h2{font-size:clamp(1.5rem,2.9vw,2.1rem); margin-top:0}
h3{font-size:1.18rem}
p{margin:0 0 1.05rem}
strong{font-weight:600; color:var(--navy)}
em{font-style:italic; color:var(--brass)}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}

/* ---- header -------------------------------------------------------------- */
header{background:var(--navy); color:var(--white); position:sticky; top:0; z-index:40}
.nav{max-width:1120px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:1.3rem; min-height:76px}
.logo{display:flex; align-items:center; gap:.7rem; color:var(--white); text-decoration:none; flex:0 0 auto}
.logo .mark{width:38px; height:38px}
.logo .lt{font-family:"Playfair Display",Georgia,serif; font-weight:700; font-size:1.12rem;
  line-height:1; letter-spacing:.005em}
.logo .lt small{display:block; font-family:"Source Sans 3",sans-serif; font-weight:400; font-size:.63rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brass-lt); margin-top:.35rem}
.nav ul{list-style:none; display:flex; gap:1.15rem; margin:0 0 0 auto; padding:0; flex-wrap:wrap}
.nav ul a{color:#D3DCE6; text-decoration:none; font-size:.88rem; font-weight:400; white-space:nowrap;
  letter-spacing:.02em}
.nav ul a:hover{color:var(--brass-lt)}
.call-btn{background:transparent; color:var(--brass-lt); font-weight:600; padding:.6rem 1.15rem;
  border:1px solid var(--brass); border-radius:var(--radius); text-decoration:none; font-size:.86rem;
  white-space:nowrap; letter-spacing:.04em; text-transform:uppercase}
.call-btn:hover{background:var(--brass); color:var(--navy)}
/* the signature: a single hairline brass rule, never a thick stripe */
.stripe{height:2px; background:linear-gradient(90deg,var(--brass) 0%,var(--brass-lt) 50%,var(--brass) 100%)}

/* mobile nav */
.navtoggle{display:none}
.burger{display:none; margin-left:auto; cursor:pointer; padding:.5rem; color:var(--white)}
.burger span{display:block; width:24px; height:1px; background:currentColor; margin:6px 0}
@media(max-width:960px){
  .nav ul{display:none; order:3; width:100%; flex-direction:column; gap:0; margin:0; padding:.4rem 0 1rem}
  .nav ul li{border-top:1px solid #23446B}
  .nav ul a{display:block; padding:.8rem .1rem; font-size:1rem}
  .burger{display:block}
  .navtoggle:checked ~ ul{display:flex}
  .nav{flex-wrap:wrap; padding-bottom:0; min-height:64px}
  .call-btn{order:2; margin-left:.4rem}
  .logo{flex:1 1 auto}
}

/* ---- hero: light, split, generous ---------------------------------------- */
.hero{background:var(--white); padding:4.2rem 0 3.6rem; border-bottom:1px solid var(--rule)}
.hero h1{max-width:18ch}
.hero .lede{font-size:clamp(1.08rem,1.9vw,1.3rem); color:var(--navy-soft); max-width:58ch;
  margin-bottom:1.6rem; line-height:1.6}
.hero .kicker{display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin-bottom:1.2rem}
.hero .kicker:after{content:""; display:block; width:44px; height:1px; background:var(--brass); margin-top:.7rem}
/* 40% navy panel left / 60% photo right */
.hero.split .wrap{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:3.2rem;
  align-items:center}
@media(max-width:900px){.hero.split .wrap{grid-template-columns:1fr; gap:2rem}}
.crumb{font-size:.82rem; color:var(--muted); margin-bottom:1.1rem; padding:0; letter-spacing:.02em}
.crumb a{color:var(--water-dk); text-decoration:none}
.crumb a:hover{color:var(--brass)}

/* ---- buttons ------------------------------------------------------------- */
.cta-row{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem}
.btn{display:inline-block; background:var(--navy); color:var(--white); font-weight:600;
  padding:.88rem 1.7rem; border-radius:var(--radius); text-decoration:none; font-size:.92rem;
  border:1px solid var(--navy); cursor:pointer; font-family:"Source Sans 3",sans-serif;
  letter-spacing:.06em; text-transform:uppercase}
.btn:hover{background:var(--navy-2); border-color:var(--navy-2); color:var(--white)}
.btn.ghost{background:transparent; color:var(--navy); border-color:var(--rule)}
.btn.ghost:hover{background:transparent; border-color:var(--brass); color:var(--brass)}
.dark .btn{background:var(--brass); border-color:var(--brass); color:var(--navy)}
.dark .btn:hover{background:var(--brass-lt); border-color:var(--brass-lt); color:var(--navy)}
.dark .btn.ghost{background:transparent; color:var(--white); border-color:#3F5E80}
.dark .btn.ghost:hover{border-color:var(--brass-lt); color:var(--brass-lt)}

/* ---- sections ------------------------------------------------------------ */
section{padding:3.8rem 0}
section.tight{padding:2.2rem 0}
.tag{display:block; font-size:.7rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin-bottom:.9rem}
.tag:after{content:""; display:block; width:36px; height:1px; background:var(--brass); margin-top:.6rem}
.dark{background:var(--navy); color:#C8D3DF}
.dark h2,.dark h3{color:var(--white)}
.dark p{color:#B4C2D1}
.dark .tag{color:var(--brass-lt)}
.dark .tag:after{background:var(--brass-lt)}
.dark a:not(.btn):not(.call-btn){color:var(--brass-lt)}
.band{background:var(--sail-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}

/* ---- cards: hairline rules, no coloured top borders ---------------------- */
.grid{display:grid; gap:1.6rem}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid.c2,.grid.c3{grid-template-columns:1fr}}
.card{background:transparent; border:none; border-top:1px solid var(--rule);
  border-radius:0; padding:1.4rem 0 0; box-shadow:none}
.card h3{margin-bottom:.45rem}
.card h3 a{text-decoration:none; color:var(--navy)}
.card h3 a:hover{color:var(--brass)}
.card p{color:var(--navy-soft); font-size:.98rem}
.card.tip{border-top:1px solid var(--brass); background:transparent; padding-top:1.2rem}
.card.tip h3{color:var(--brass); font-size:.76rem; text-transform:uppercase; letter-spacing:.18em}
.dark .card{border-top-color:#2B4A70}
.dark .card p{color:#B4C2D1}
.callout{border-left:2px solid var(--brass); background:var(--sail-2); padding:1.2rem 1.5rem;
  margin:1.8rem 0}
.callout.warn{border-left-color:var(--water-dk); background:#EAF0F6}
.dark .callout{background:#0E2D52; border-left-color:var(--brass-lt)}

/* serif pull-quote — a premium-print device the other sites don't use */
.pull{font-family:"Playfair Display",Georgia,serif; font-size:clamp(1.25rem,2.4vw,1.7rem);
  line-height:1.4; color:var(--navy); border-top:1px solid var(--brass);
  border-bottom:1px solid var(--brass); padding:1.6rem 0; margin:2.4rem 0; font-style:italic}
.dark .pull{color:var(--white); border-color:var(--brass-lt)}

/* ---- lists --------------------------------------------------------------- */
ul.checks{list-style:none; padding:0; margin:1.4rem 0; display:grid;
  grid-template-columns:repeat(2,1fr); gap:.7rem 2rem}
@media(max-width:760px){ul.checks{grid-template-columns:1fr}}
ul.checks li{padding-left:1.5rem; position:relative; font-size:.98rem; color:var(--navy-soft)}
ul.checks li:before{content:""; position:absolute; left:0; top:.68em; width:10px; height:1px;
  background:var(--brass)}
.dark ul.checks li{color:#B4C2D1}
ul.towns{list-style:none; padding:0; margin:1.1rem 0; display:flex; flex-wrap:wrap; gap:.4rem .5rem}
ul.towns li a{display:inline-block; background:transparent; border:1px solid var(--rule);
  border-radius:var(--radius); padding:.42rem .85rem; font-size:.88rem; text-decoration:none;
  color:var(--navy-soft); letter-spacing:.01em}
ul.towns li a:hover{border-color:var(--brass); color:var(--brass)}
.steps{counter-reset:s; list-style:none; padding:0; margin:1.8rem 0}
.steps li{counter-increment:s; position:relative; padding:0 0 1.8rem 3.4rem}
.steps li:before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:.1rem;
  font-family:"Playfair Display",serif; font-size:1.3rem; color:var(--brass); font-weight:600}
.steps li h3{margin-bottom:.3rem}

/* ---- stats --------------------------------------------------------------- */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:2rem 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
@media(max-width:760px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat{padding:1.3rem 1rem; text-align:left; border-right:1px solid var(--rule)}
.stat:last-child{border-right:none}
@media(max-width:760px){.stat:nth-child(2n){border-right:none}}
.stat b{display:block; font-family:"Playfair Display",serif; font-size:1.1rem; color:var(--navy);
  line-height:1.3; font-weight:600}
.stat span{display:block; font-size:.74rem; color:var(--muted); margin-top:.4rem; line-height:1.4;
  letter-spacing:.06em; text-transform:uppercase}

/* ---- details / FAQ ------------------------------------------------------- */
details{border-bottom:1px solid var(--rule); padding:1.15rem 0}
details summary{cursor:pointer; font-family:"Playfair Display",serif; font-weight:600; font-size:1.08rem;
  list-style:none; position:relative; padding-right:2rem; color:var(--navy)}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"+"; position:absolute; right:.2rem; top:-.15rem; color:var(--brass);
  font-size:1.4rem; font-weight:300; line-height:1; font-family:"Source Sans 3",sans-serif}
details[open] summary:after{content:"\2212"}
details p{margin:.8rem 0 0; color:var(--navy-soft)}

/* ---- tables -------------------------------------------------------------- */
.table-scroll{overflow-x:auto; margin:1.8rem 0}
table{border-collapse:collapse; width:100%; font-size:.93rem; background:transparent}
th,td{text-align:left; padding:.8rem 1rem .8rem 0; border-bottom:1px solid var(--rule);
  vertical-align:top}
th{font-family:"Source Sans 3",sans-serif; font-weight:600; font-size:.7rem; color:var(--brass);
  letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid var(--brass)}
tr:last-child td{border-bottom:none}

/* ---- photography: wide-format bands -------------------------------------- */
/* width/height attributes on <img> override aspect-ratio unless height is reset */
.feature-photo{margin:2.4rem 0; overflow:hidden}
.feature-photo img{width:100%; height:auto; aspect-ratio:21/9; object-fit:cover}
.photo-band{margin:0; padding:0}
.photo-band img{width:100%; height:auto; aspect-ratio:3/1; object-fit:cover}
@media(max-width:760px){.photo-band img{aspect-ratio:16/9}}
.photo-pair{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin:2.2rem 0}
@media(max-width:760px){.photo-pair{grid-template-columns:1fr}}
.photo-pair img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
figure.shot-fig{margin:0}
figure.shot-fig figcaption{font-size:.82rem; color:var(--muted); margin-top:.6rem; font-style:italic}

/* ---- interactive tools --------------------------------------------------- */
.qc{background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  padding:2rem; box-shadow:none}
.qc h3{margin-top:0}
.qc .opt{display:block; width:100%; text-align:left; background:transparent;
  border:1px solid var(--rule); border-radius:var(--radius); padding:.9rem 1.1rem; margin:.5rem 0;
  cursor:pointer; font-size:1rem; font-family:"Source Sans 3",sans-serif; color:var(--navy)}
.qc .opt:hover{border-color:var(--brass); color:var(--brass)}
.qc-result{margin-top:1.6rem; padding:1.5rem 0 0; border-top:1px solid var(--brass)}
.qc-result h4{font-family:"Playfair Display",serif; font-size:1.2rem; margin:0 0 .6rem; color:var(--navy)}
.qc-result .urgency{display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; padding:.3rem .7rem; border:1px solid var(--brass); color:var(--brass);
  margin-bottom:.9rem}
.est{font-family:"Playfair Display",serif; font-size:2.3rem; color:var(--navy); margin:.4rem 0;
  font-weight:700}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin:.9rem 0}
@media(max-width:700px){.tiles{grid-template-columns:1fr 1fr}}
.tile{background:transparent; border:1px solid var(--rule); border-radius:var(--radius);
  padding:.75rem .6rem; text-align:center; cursor:pointer; font-size:.88rem; color:var(--navy);
  font-family:"Source Sans 3",sans-serif; line-height:1.35}
.tile small{color:var(--muted); font-size:.76rem}
.tile:hover{border-color:var(--brass)}
.tile.on{border-color:var(--brass); background:var(--sail-2); color:var(--brass); font-weight:600}
.tile.on small{color:var(--brass)}
.slider-row{margin:1rem 0}
.slider-row label{display:flex; justify-content:space-between; font-size:.86rem; font-weight:600;
  margin-bottom:.5rem; color:var(--navy)}
.slider-row output{font-family:"Playfair Display",serif; color:var(--brass); font-size:1.05rem}
input[type=range]{width:100%; accent-color:var(--brass)}

/* ---- forms --------------------------------------------------------------- */
form{display:grid; gap:1rem; max-width:640px; margin-top:1.5rem}
form label{display:block; font-size:.78rem; font-weight:600; margin-bottom:.4rem; color:#AFC0D2;
  letter-spacing:.1em; text-transform:uppercase}
section:not(.dark) form label{color:var(--navy-soft)}
input,select,textarea{width:100%; padding:.78rem .9rem; border:1px solid #3F5E80;
  border-radius:var(--radius); background:var(--white); color:var(--navy);
  font-family:"Source Sans 3",sans-serif; font-size:1rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass); outline-offset:1px;
  border-color:var(--brass)}
section:not(.dark) input,section:not(.dark) select,section:not(.dark) textarea{border-color:var(--rule)}
form .btn{justify-self:start}
.form-trust{margin:.8rem 0 0}
.assurances{list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.4rem}
.assurances li{font-size:.9rem; padding-left:1.5rem; position:relative; color:#B4C2D1}
.assurances li:before{content:""; position:absolute; left:0; top:.68em; width:10px; height:1px;
  background:var(--brass-lt)}
section:not(.dark) .assurances li{color:var(--navy-soft)}
section:not(.dark) .assurances li:before{background:var(--brass)}
.sla{font-size:.86rem; color:var(--brass-lt); font-weight:600}
section:not(.dark) .sla{color:var(--brass)}
.form-consent{font-size:.78rem; color:#8FA2B6; line-height:1.55}
section:not(.dark) .form-consent{color:var(--muted)}

/* ---- proof --------------------------------------------------------------- */
.proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:1.4rem}
@media(max-width:860px){.proof-grid{grid-template-columns:1fr}}
.proof-card{background:transparent; border:none; border-top:1px solid var(--rule); padding:1.3rem 0 0}
.proof-stars{color:var(--brass); letter-spacing:.14em; font-size:.9rem}
.proof-card .quote{font-family:"Playfair Display",serif; font-size:1.02rem; font-style:italic;
  margin:.6rem 0; color:var(--navy)}
.proof-card .where{font-size:.8rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}

/* ---- footer -------------------------------------------------------------- */
footer{background:var(--navy); color:#9FB0C4; padding:3.6rem 0 1.6rem}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1.5fr; gap:2.6rem}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr}}
footer h3{color:var(--white); font-size:.74rem; margin-bottom:.9rem; letter-spacing:.2em;
  text-transform:uppercase; font-family:"Source Sans 3",sans-serif; font-weight:600}
footer p{font-size:.9rem; line-height:1.85}
footer a{color:#C0CDDB; text-decoration:none}
footer a:hover{color:var(--brass-lt)}
.fine{border-top:1px solid #1E3C60; margin-top:2.4rem; padding-top:1.4rem; font-size:.78rem;
  color:#75879C; letter-spacing:.04em}

/* ---- sticky mobile CTA --------------------------------------------------- */
.sticky-cta{display:none}
@media(max-width:760px){
  .sticky-cta{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--navy); border-top:1px solid var(--brass); padding:.65rem .8rem; gap:.6rem}
  .sticky-cta a{flex:1; text-align:center; background:var(--brass); color:var(--navy); font-weight:600;
    padding:.82rem; border-radius:var(--radius); text-decoration:none; letter-spacing:.06em;
    text-transform:uppercase; font-size:.86rem}
  .sticky-cta.two a:last-child{background:transparent; color:var(--white); border:1px solid #3F5E80}
  body{padding-bottom:4.6rem}
}

/* ---- print --------------------------------------------------------------- */
@media print{
  header,footer,.sticky-cta,.cta-row,form,.stripe{display:none}
  body{background:#fff; font-size:11.5pt}
  .hero{padding:0; border:none}
  a{color:#000; text-decoration:none}
}