/* Palette sampled from the client's own hero mockup (Grant, 2026-08-19).
   Dominant ground is #001818, a near-black teal with no red in it. */
:root{
  --hull:#04191F; --hull-2:#082830; --ink:#001113; --line:rgba(255,255,255,.15);
  --paper:#F4F2EE; --paper-2:#E7E3DC;
  --brass:#C89A4E; --brass-hi:#E5B96B; --signal:#E8683D;
  --txt:#EDF3F4; --txt-dim:#9BB0B4; --txt-mid:#C2D2D5;
  --r:3px; --shell:min(1280px, 100% - 3rem);
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--hull); color:var(--txt);
  font:400 18.5px/1.6 Barlow, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h3,.cond{font-family:"Barlow Condensed", Barlow, system-ui, sans-serif; font-weight:700; letter-spacing:.005em; line-height:1.02; margin:0}
h1,h2{font-family:var(--serif); font-weight:600; letter-spacing:-.005em; line-height:1.12; margin:0}
.shell{width:var(--shell); margin-inline:auto}
.eyebrow{font:600 14px/1 Barlow; letter-spacing:.15em; text-transform:uppercase; color:var(--brass-hi)}

/* ---------- header ---------- */
.top{position:sticky; top:0; z-index:60; background:rgba(10,22,34,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:1.25rem; height:72px}
/* BAM mark, rebuilt as type per the client's mockup: a ruled box with the three
   letters set large and widely tracked, the full name small underneath. */
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; text-decoration:none; flex:0 0 auto; min-height:44px; justify-content:center}
.mark{border:2px solid #fff; padding:.3rem .8rem .34rem}
.mark b{display:block; font:700 27px/1 Barlow, sans-serif; letter-spacing:.3em; text-indent:.3em; color:#fff}
.brand small{font:600 10px/1 Barlow; letter-spacing:.17em; text-transform:uppercase; color:var(--txt-mid); white-space:nowrap}
nav.main{display:flex; gap:1.45rem; margin-left:auto; align-items:center}
nav.main a{display:inline-flex; align-items:center; text-align:center; min-height:44px; max-width:7.4em;
  font:600 12.5px/1.25 Barlow; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-mid);
  text-decoration:none; border-bottom:2px solid transparent}
nav.main a:hover{color:#fff; border-bottom-color:var(--brass)}
.top-cta{display:flex; align-items:center; gap:.65rem}
.tel{display:flex; align-items:center; gap:.5rem; min-height:44px; text-decoration:none; font:700 19px/1 "Barlow Condensed"; letter-spacing:.02em; color:#fff; white-space:nowrap}
.tel small{display:block; font:500 11.5px/1 Barlow; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:3px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:50px; padding:0 1.5rem; border-radius:var(--r); border:1px solid transparent;
  font:600 16.5px/1 Barlow; letter-spacing:.02em; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.btn-primary{background:var(--brass); color:#16110A; border-color:var(--brass)}
.btn-primary:hover{background:var(--brass-hi); border-color:var(--brass-hi)}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:#fff}
.btn-lg{min-height:62px; padding:0 2.1rem; font-size:18px}
.burger{display:none; width:48px; height:48px; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:var(--r); color:#fff; cursor:pointer}

/* ---------- hero ---------- */
/* Hero follows the client's reference: centred, high-contrast serif headline,
   full-bleed yacht desaturated back into the teal ground. */
.hero{position:relative; min-height:min(94vh, 940px); display:flex; align-items:center; overflow:hidden; text-align:center}
.hero-img{position:absolute; inset:0; background:var(--ink)}
/* Keep the vessel sharp and visible. A mix-blend-mode:color tint was tried here and
   removed: it flattened the photograph to near-black. The teal now comes only from the
   edge gradient, and legibility comes from the text shadows. */
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:center 52%; filter:saturate(.78) contrast(1.02) brightness(.92)}
.hero-img::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,17,19,.66) 0%, rgba(0,17,19,.06) 24%, rgba(0,17,19,.08) 60%, rgba(0,17,19,.74) 92%, var(--hull) 100%),
    linear-gradient(90deg, rgba(4,25,31,.42) 0%, rgba(4,25,31,0) 22%, rgba(4,25,31,0) 78%, rgba(4,25,31,.42) 100%);
}
.hero-in{position:relative; z-index:2; width:var(--shell); margin-inline:auto; padding:5.5rem 0 4rem}
/* legibility panel behind the type instead of dimming the whole photograph */
/* Light touch only. The photograph has to stay visible, so legibility comes from
   the text shadows below, not from covering the vessel. */
.hero-in::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1080px, 100%); height:calc(100% + 1rem);
  background:radial-gradient(closest-side, rgba(0,17,19,.52) 0%, rgba(0,17,19,.30) 62%, rgba(0,17,19,0) 100%);
}
.hero h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem, 3.75vw, 3.5rem); line-height:1.18;
  max-width:32ch; margin-inline:auto; color:#fff;
  text-shadow:0 2px 26px rgba(0,17,19,.72);
}
.hero .rule{width:74px; height:2px; background:var(--brass); margin:1.6rem auto 0; opacity:.9}
.hero ul.spec{list-style:none; margin:1.5rem auto 0; padding:0; max-width:64ch}
.hero ul.spec li{font:500 clamp(1.02rem,1.4vw,1.2rem)/1.6 Barlow; color:#EAF1F2;
  text-shadow:0 1px 3px rgba(0,17,19,.95), 0 2px 18px rgba(0,17,19,.9)}
.hero ul.spec li + li{margin-top:.35rem; font-size:clamp(.96rem,1.2vw,1.08rem); color:#D3DEE0}
.hero ul.spec b{color:#fff; font-weight:600}
.hero-acts{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.3rem; justify-content:center}
.hero-note{margin:1.5rem auto 0; max-width:62ch; font:500 16px/1.6 Barlow; color:#DCE6E8;
  text-shadow:0 1px 3px rgba(0,17,19,.98), 0 2px 16px rgba(0,17,19,.92)}

/* contact strip, straight off the mockup */
.contactbar{background:var(--ink); border-block:1px solid var(--line)}
.contactbar-in{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:1rem 2.4rem; padding:1.05rem 0}
.contactbar a{display:inline-flex; align-items:center; gap:.55rem; min-height:44px; text-decoration:none; color:var(--txt-mid); font:500 16px/1 Barlow}
.contactbar a b{font:700 22px/1 "Barlow Condensed"; letter-spacing:.02em; color:#fff}
.contactbar a:hover b, .contactbar a:hover{color:var(--brass-hi)}
.contactbar .lab{font:600 12px/1 Barlow; letter-spacing:.13em; text-transform:uppercase; color:var(--txt-dim)}
.yrs{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--brass); border-radius:2px; padding:.4rem .85rem}
.yrs b{font:700 21px/1 "Barlow Condensed"; color:var(--brass-hi)}
.yrs span{font:600 10.5px/1 Barlow; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-dim); margin-top:.2rem}

/* ---------- trust strip ---------- */
.trust{border-block:1px solid var(--line); background:var(--hull-2)}
.trust ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr)}
.trust li{padding:1.5rem 1.4rem; border-left:1px solid var(--line)}
.trust li:first-child{border-left:0}
.trust b{display:block; font:700 30px/1 "Barlow Condensed"; color:#fff}
.trust b .star{color:var(--brass-hi); display:inline; font-size:.78em; vertical-align:.08em; margin-right:.12em}
.trust li > span{display:block; margin-top:.45rem; font:500 15px/1.4 Barlow; color:var(--txt-dim)}

/* ---------- section furniture ---------- */
section{padding:5.5rem 0}
.sec-head{max-width:62ch; margin-bottom:2.75rem}
.sec-head h2{font-size:clamp(1.7rem,2.75vw,2.5rem); margin-top:.75rem}
.sec-head p{margin:1rem 0 0; color:var(--txt-mid); font-size:1.14rem}

/* ---------- intake ---------- */
#quote{background:var(--paper); color:#141A20; padding-block:5.5rem}
#quote .eyebrow{color:#8A6A2E}
#quote .sec-head p{color:#4A5560}
.intake{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:2.5rem; align-items:start;
}
.card{background:#fff; border:1px solid #DAD5CB; border-radius:6px; box-shadow:0 1px 0 rgba(20,26,32,.04), 0 12px 34px -22px rgba(20,26,32,.5)}
.card-pad{padding:1.9rem}
fieldset{border:0; margin:0; padding:0}
.step{border-top:1px solid #EAE6DE; padding:1.65rem 0 0; margin-top:1.65rem}
.step:first-of-type{border-top:0; padding-top:0; margin-top:0}
.step-h{display:flex; align-items:baseline; gap:.65rem; margin-bottom:1rem}
.step-n{
  flex:0 0 auto; width:25px; height:25px; border-radius:50%; background:#141A20; color:#fff;
  font:700 13px/25px Barlow; text-align:center;
}
.step-h h3{font-size:1.42rem}
.step-h em{font-style:normal; margin-left:auto; font:500 13.5px/1.3 Barlow; color:#7A838C; letter-spacing:.04em; text-transform:uppercase}

/* dropzone */
.drop{
  display:block; border:2px dashed #C6BFB2; border-radius:5px; background:#FBFAF7;
  padding:1.9rem 1.5rem; text-align:center;
  transition:border-color .16s ease, background .16s ease; cursor:pointer;
}
.drop:hover, .drop.hot{border-color:var(--brass); background:#FDF8EF}
.drop svg{margin:0 auto .7rem; display:block; color:#9AA3AC}
.drop b{display:block; font:600 18.5px/1.3 Barlow; color:#141A20}
.drop span{display:block; margin-top:.35rem; font-size:16px; color:#6C757E}
.drop input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.shots{list-style:none; margin:1.15rem 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem}
.shots li{background:#F4F2EC; border:1px solid #E4DFD5; border-radius:4px; padding:.8rem .75rem; font:500 14px/1.4 Barlow; color:#48525C}
.shots li b{display:block; font:700 12px/1 Barlow; letter-spacing:.09em; text-transform:uppercase; color:#8A6A2E; margin-bottom:.35rem}
.thumbs{list-style:none; margin:1.1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem}
.thumbs li{position:relative; width:78px; height:78px; border-radius:4px; overflow:hidden; border:1px solid #DAD5CB; background:#EEE}
.thumbs img{width:100%; height:100%; object-fit:cover}
.thumbs button{
  position:absolute; top:2px; right:2px; width:20px; height:20px; border:0; border-radius:3px;
  background:rgba(5,11,18,.72); color:#fff; font:700 12px/1 Barlow; cursor:pointer;
}

/* fields */
.row{display:grid; gap:.9rem; margin-top:.9rem}
.row.c2{grid-template-columns:1fr 1fr}
.row.c3{grid-template-columns:1.4fr 1fr 1fr}
label.f{display:block}
label.f > span{display:block; font:600 13.5px/1 Barlow; letter-spacing:.05em; text-transform:uppercase; color:#5C666F; margin-bottom:.42rem}
input[type=text], input[type=tel], input[type=email], select, textarea{
  width:100%; min-height:52px; padding:.75rem .9rem; font:400 17px/1.35 Barlow; color:#141A20;
  background:#fff; border:1px solid #CFC9BD; border-radius:4px; appearance:none;
}
select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C666F' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem;
}
textarea{min-height:92px; resize:vertical}
input:focus, select:focus, textarea:focus{outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass)}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.15rem}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip span{
  display:inline-flex; align-items:center; min-height:46px; padding:0 1.1rem; border-radius:3px;
  border:1px solid #CFC9BD; background:#fff; font:500 16px/1 Barlow; color:#3A444D; cursor:pointer;
  transition:border-color .14s, background .14s, color .14s;
}
.chip span:hover{border-color:#9C948A}
.chip input:checked + span{background:#141A20; border-color:#141A20; color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--brass); outline-offset:2px}

/* progressive reveal */
.reveal{display:none; margin-top:1.15rem; padding:1.15rem 1.25rem; background:#F7F5F0; border:1px solid #E4DFD5; border-left:3px solid var(--brass); border-radius:4px}
.reveal.on{display:block; animation:slip .22s ease-out}
@keyframes slip{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}
.reveal p.hint{margin:.7rem 0 0; font-size:16px; color:#5C666F}
.reveal p.hint b{color:#141A20}

.submit-row{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.9rem; padding-top:1.6rem; border-top:1px solid #EAE6DE}
.submit-row .or{font:500 16px Barlow; color:#6C757E}
.submit-row a.telink{display:inline-flex; align-items:center; min-height:44px; font:700 24px/1 "Barlow Condensed"; color:#141A20; text-decoration:none; box-shadow:inset 0 -2px 0 var(--brass)}

/* aside: what Ron receives */
.aside-h{display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem}
.aside-h b{font:700 13px/1 Barlow; letter-spacing:.11em; text-transform:uppercase; color:#8A6A2E}
.demo-tag{
  font:700 11px/1 Barlow; letter-spacing:.09em; text-transform:uppercase; color:#fff;
  background:#8A6A2E; padding:.32rem .5rem; border-radius:2px;
}
.jobcard{background:#141A20; color:#E7ECF1; border-radius:6px; overflow:hidden; position:sticky; top:96px}
.jobcard-t{padding:1.05rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between}
.jobcard-t b{font:700 19px/1 "Barlow Condensed"; letter-spacing:.03em}
.jobcard-t span{font:500 12.5px/1 Barlow; letter-spacing:.08em; text-transform:uppercase; color:#8FA0AF}
.jobcard-b{padding:1.25rem}
.jc-photos{display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; margin-bottom:1.1rem}
.jc-photos div{aspect-ratio:1; border-radius:3px; background:#243342 center/cover no-repeat; border:1px solid rgba(255,255,255,.09)}
.jc-photos div.empty{display:flex; align-items:center; justify-content:center; font:500 10px/1.2 Barlow; color:#5E7183; text-align:center; padding:2px}
dl.jc{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.6rem .9rem; font-size:15.5px}
dl.jc dt{color:#8FA0AF; font-weight:500}
dl.jc dd{margin:0; color:#fff; font-weight:500; text-align:right}
dl.jc dd.pending{color:#5E7183; font-weight:400; font-style:italic}
.jc-foot{margin-top:1.15rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.12); font:500 14.5px/1.5 Barlow; color:#8FA0AF}
.compare{margin-top:1.1rem; background:#FBF0EC; border:1px solid #EFD3C8; border-radius:5px; padding:1rem 1.15rem}
.compare b{display:block; font:700 12.5px/1 Barlow; letter-spacing:.09em; text-transform:uppercase; color:#B0472A; margin-bottom:.55rem}
.compare p{margin:0; font-size:15.5px; color:#6A4034}
.compare code{font:400 14px/1.5 ui-monospace, Menlo, monospace; color:#8C4A33}

/* sent state */
.sent{display:none}
.sent.on{display:block; animation:slip .25s ease-out}
.sent-in{text-align:center; padding:3rem 1.5rem}
.sent-in .tick{width:56px; height:56px; margin:0 auto 1.1rem; border-radius:50%; background:#1E6B45; display:flex; align-items:center; justify-content:center}
.sent-in h3{font-size:1.9rem; margin-bottom:.6rem}
.sent-in p{margin:0 auto; max-width:44ch; color:#4A5560}

/* mobile action bar */
.mobar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(10,22,34,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
  grid-template-columns:1fr 1fr 1.25fr; gap:.5rem;
}
.mobar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  min-height:52px; border-radius:var(--r); text-decoration:none;
  font:600 13.5px/1 Barlow; letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.22); color:#fff;
}
.mobar a.go{background:var(--brass); border-color:var(--brass); color:#16110A}
.mobar svg{width:19px; height:19px}

/* ---------- work gallery ----------
   His before/after pairs carry annotations burned into the pixels, so they are never
   cropped. Wide diptychs take the full row; squarer frames pair up. */
.worklist{display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem 1.75rem}
.worklist figure{margin:0}
.worklist figure.wide{grid-column:1 / -1}
.worklist img{
  width:100%; height:auto; display:block; border-radius:4px;
  border:1px solid rgba(255,255,255,.14); background:var(--ink);
}
.worklist figcaption{margin-top:.95rem; font:500 17px/1.5 Barlow; color:var(--txt-mid)}
.worklist .owner{
  display:block; margin-top:.4rem; font:600 13.5px/1.45 Barlow; letter-spacing:.03em;
  text-transform:uppercase; color:var(--txt-dim);
}

footer{background:var(--ink); border-top:1px solid var(--line); padding:3.5rem 0 4rem; font-size:16.5px; color:var(--txt-dim)}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem}
footer b{color:#fff; font:700 17.5px/1 "Barlow Condensed"; letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:.85rem}
footer a{display:inline-flex; align-items:center; min-height:26px; color:var(--txt-mid); text-decoration:none}
footer a:hover{color:#fff}

@media (max-width:1080px){
  .trust ul{grid-template-columns:repeat(3,1fr)}
  .trust li:nth-child(4){border-left:0}
  .intake{grid-template-columns:1fr}
  .jobcard{position:static}
}
@media (max-width:820px){
  :root{--shell:min(1280px, 100% - 2rem)}
  nav.main{display:none}
  .burger{display:flex; margin-left:auto}
  .top-cta{display:none}
  .mark{padding:.24rem .6rem .28rem}
  .mark b{font-size:21px; letter-spacing:.26em; text-indent:.26em}
  .brand small{font-size:7.5px; letter-spacing:.15em}
  .contactbar-in{gap:.5rem 1.4rem; padding:.85rem 0}
  .contactbar a{flex-direction:column; gap:.15rem; text-align:center}
  .contactbar a b{font-size:17px}
  .mobar{display:grid}
  body{padding-bottom:74px}
  .hero{min-height:auto}
  .hero-in{padding:3.5rem 0 2.5rem}
  .hero h1{text-wrap:balance; max-width:22ch}
  .trust ul{grid-template-columns:repeat(2,1fr)}
  .trust li:nth-child(odd){border-left:0}
  .trust li{padding:1.15rem 1rem}
  section{padding:3.75rem 0}
  #quote{padding-block:3.75rem}
  .card-pad{padding:1.35rem}
  .row.c2, .row.c3{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,1fr)}
  .worklist{grid-template-columns:1fr; gap:2rem}
  .foot-grid{grid-template-columns:1fr; gap:1.9rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
/* ============================================================
   Interior pages. Same tokens as the approved hero, no new palette.
   ============================================================ */

/* compact hero for interior pages */
.pagehero{position:relative; overflow:hidden; background:var(--ink); border-bottom:1px solid var(--line)}
.pagehero-img{position:absolute; inset:0}
.pagehero-img img{width:100%; height:100%; object-fit:cover; object-position:center 50%; filter:saturate(.72) brightness(.62)}
.pagehero-img::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,17,19,.72) 0%, rgba(0,17,19,.58) 45%, rgba(0,17,19,.88) 100%)}
.pagehero-in{position:relative; z-index:2; width:var(--shell); margin-inline:auto; padding:4.25rem 0 3.5rem}
.pagehero h1{font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.5vw,3.2rem); line-height:1.14;
  max-width:20ch; color:#fff; text-shadow:0 2px 20px rgba(0,17,19,.8)}
.pagehero p{margin:1.1rem 0 0; max-width:62ch; font-size:1.14rem; color:var(--txt-mid);
  text-shadow:0 1px 10px rgba(0,17,19,.85)}
.pagehero .hero-acts{justify-content:flex-start; margin-top:1.9rem}

/* breadcrumbs */
.crumbs{width:var(--shell); margin:0 auto; padding:1.05rem 0; font:500 14.5px/1 Barlow; color:var(--txt-dim)}
.crumbs a{display:inline-flex; align-items:center; min-height:26px; color:var(--txt-mid); text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{margin:0 .5rem; opacity:.5}

/* long-form copy */
.prose{max-width:70ch}
.prose p{margin:0 0 1.25rem; color:var(--txt-mid)}
.prose h3{font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1.25; color:#fff; margin:2.4rem 0 .9rem}
.prose ul{margin:0 0 1.4rem; padding-left:1.15rem; color:var(--txt-mid)}
.prose li{margin-bottom:.55rem}
.prose strong{color:#fff; font-weight:600}
.prose blockquote{margin:1.75rem 0; padding:1rem 0 1rem 1.4rem; border-left:3px solid var(--brass);
  font-family:var(--serif); font-size:1.3rem; line-height:1.45; color:#fff}
.prose blockquote cite{display:block; margin-top:.7rem; font:500 14.5px Barlow; font-style:normal; color:var(--txt-dim)}

/* generic panels + card grids */
.split{display:grid; grid-template-columns:1.35fr .9fr; gap:3.5rem; align-items:start}
.split > *{min-width:0}
.cards > *, .cfg > *, .gal > *, .worklist > *, .lbgrid > *{min-width:0}
.panel{background:var(--hull-2); border:1px solid var(--line); border-radius:5px; padding:1.75rem}
.panel h3{font:700 20px/1.2 "Barlow Condensed"; letter-spacing:.03em; text-transform:uppercase; color:#fff; margin-bottom:1rem}
.panel p{margin:0; font-size:16.5px; color:var(--txt-mid)}
.panel + .panel{margin-top:1.25rem}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.card-d{background:var(--hull-2); border:1px solid var(--line); border-radius:5px; padding:1.6rem}
.card-d h3{font-family:var(--serif); font-weight:600; font-size:1.3rem; line-height:1.25; color:#fff; margin-bottom:.7rem}
.card-d p{margin:0; font-size:16.5px; color:var(--txt-mid)}
.card-d .num{display:block; font:700 13px/1 Barlow; letter-spacing:.14em; color:var(--brass-hi); margin-bottom:.9rem}

/* facts list */
.facts{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.facts li{display:flex; gap:1.5rem; justify-content:space-between; padding:.95rem 0; border-bottom:1px solid var(--line); font-size:16.5px}
.facts b{color:var(--txt-dim); font-weight:500}
.facts span{color:#fff; text-align:right; font-weight:500}

/* price tables */
.ratecards{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start}
.ratecards > *{min-width:0}
.ptable-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 1.25rem; max-width:100%}
table.ptable{width:100%; border-collapse:collapse; min-width:520px; font-size:16.5px}
table.ptable caption{text-align:left; font:700 19px/1.3 "Barlow Condensed"; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; padding-bottom:.85rem}
table.ptable th, table.ptable td{padding:.8rem 1rem; border-bottom:1px solid var(--line); text-align:right}
table.ptable th:first-child, table.ptable td:first-child{text-align:left}
table.ptable thead th{font:600 13px/1.3 Barlow; letter-spacing:.09em; text-transform:uppercase;
  color:var(--txt-dim); border-bottom:1px solid rgba(255,255,255,.3)}
table.ptable tbody tr:hover{background:rgba(255,255,255,.03)}
table.ptable td{color:#fff; font-variant-numeric:tabular-nums}
table.ptable td:first-child{color:var(--txt-mid)}

/* the unconfirmed-price marker */
.unconfirmed{display:flex; gap:.85rem; align-items:flex-start; background:rgba(200,154,78,.10);
  border:1px solid rgba(200,154,78,.42); border-left:3px solid var(--brass); border-radius:4px;
  padding:1rem 1.15rem; margin:0 0 2rem; font-size:16px; color:var(--txt-mid)}
.unconfirmed b{display:block; color:var(--brass-hi); font:700 12.5px/1 Barlow; letter-spacing:.11em;
  text-transform:uppercase; margin-bottom:.45rem}

/* reviews */
.reviewgrid{columns:3; column-gap:1.5rem}
.review{break-inside:avoid; background:var(--hull-2); border:1px solid var(--line); border-radius:5px;
  padding:1.5rem; margin-bottom:1.5rem}
.review .stars{color:var(--brass-hi); font-size:15px; letter-spacing:.12em; margin-bottom:.75rem}
.review p{margin:0 0 1rem; font-size:16.5px; color:var(--txt-mid)}
.review footer{background:none; border:0; padding:0; font:600 15px/1.3 Barlow; color:#fff}
.review footer span{display:block; font-weight:500; font-size:13.5px; color:var(--txt-dim); margin-top:.25rem}
.ratingbar{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; background:var(--hull-2);
  border:1px solid var(--line); border-radius:5px; padding:1.5rem 1.75rem; margin-bottom:2.5rem}
.ratingbar .big{font:700 52px/1 "Barlow Condensed"; color:#fff}
.ratingbar .of{font-size:16.5px; color:var(--txt-mid)}

/* configurator */
.cfg{display:grid; grid-template-columns:1.15fr .85fr; gap:2.5rem; align-items:start}
.cfg-form{background:var(--hull-2); border:1px solid var(--line); border-radius:5px; padding:1.85rem}
.cfg-form .row{margin-top:1.1rem}
.cfg-form label.f > span{color:var(--txt-dim)}
.cfg-form input, .cfg-form select{background:rgba(0,17,19,.55); border-color:rgba(255,255,255,.24); color:#fff}
.cfg-form input::placeholder{color:#6E8085}
.cfg-form select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239BB0B4' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.cfg-form .chip span{background:rgba(0,17,19,.5); border-color:rgba(255,255,255,.24); color:var(--txt-mid)}
.cfg-form .chip input:checked + span{background:#fff; border-color:#fff; color:#04191F}
.cfg-out{position:sticky; top:96px; background:#fff; color:#141A20; border-radius:5px; overflow:hidden}
.cfg-out-t{padding:1.1rem 1.4rem; background:#141A20; color:#fff; display:flex; justify-content:space-between; align-items:center}
.cfg-out-t b{font:700 18px/1 "Barlow Condensed"; letter-spacing:.04em}
.cfg-out-t span{font:600 12px/1 Barlow; letter-spacing:.1em; text-transform:uppercase; color:#8FA0AF}
.cfg-out-b{padding:1.5rem 1.4rem}
.cfg-total{font:700 46px/1 "Barlow Condensed"; color:#141A20; font-variant-numeric:tabular-nums}
.cfg-total small{display:block; font:500 14px/1.4 Barlow; color:#6C757E; margin-top:.5rem}
.cfg-lines{list-style:none; margin:1.4rem 0 0; padding:1.2rem 0 0; border-top:1px solid #EAE6DE; font-size:15.5px}
.cfg-lines li{display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; color:#48525C}
.cfg-lines li b{color:#141A20; font-weight:600; font-variant-numeric:tabular-nums}
.cfg-lines li.sum{margin-top:.6rem; padding-top:.7rem; border-top:1px solid #EAE6DE}
.cfg-note{margin:1.3rem 0 0; padding:.9rem 1rem; background:#FBF6EC; border:1px solid #E8D9BC; border-radius:4px;
  font-size:14.5px; color:#6A5730}
.cfg-acts{margin-top:1.4rem; display:flex; flex-direction:column; gap:.7rem}

/* light box product row */
.lbgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.lb{background:var(--hull-2); border:1px solid var(--line); border-radius:5px; padding:1.6rem; display:flex; flex-direction:column}
.lb h3{font:700 26px/1 "Barlow Condensed"; color:#fff; margin-bottom:.35rem}
.lb .price{font:700 34px/1 "Barlow Condensed"; color:var(--brass-hi); margin:.7rem 0 1rem}
.lb dl{margin:0 0 1.3rem; display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; font-size:15.5px}
.lb dt{color:var(--txt-dim)} .lb dd{margin:0; color:#fff; text-align:right}
.lb .btn{margin-top:auto}

/* full gallery */
.gal{display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem 1.75rem}
.gal figure{margin:0}
.gal figure.wide{grid-column:1 / -1}
.gal img{width:100%; height:auto; border-radius:4px; border:1px solid var(--line); background:var(--ink)}
.gal figcaption{margin-top:.9rem; font:500 17px/1.5 Barlow; color:var(--txt-mid)}
.gal .owner{display:block; margin-top:.4rem; font:600 13.5px/1.45 Barlow; letter-spacing:.03em;
  text-transform:uppercase; color:var(--txt-dim)}
.filters{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem}
.filters button{min-height:46px; padding:0 1.2rem; border-radius:3px; border:1px solid var(--line);
  background:transparent; color:var(--txt-mid); font:600 15px/1 Barlow; cursor:pointer}
.filters button:hover{border-color:#fff; color:#fff}
.filters button[aria-pressed="true"]{background:#fff; border-color:#fff; color:#04191F}

/* faq */
.faq{max-width:78ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:1.35rem 0; font-family:var(--serif);
  font-weight:600; font-size:1.24rem; color:#fff; display:flex; justify-content:space-between; gap:1.5rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:400 26px/1 Barlow; color:var(--brass-hi); flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq details > div{padding:0 0 1.5rem; color:var(--txt-mid); max-width:68ch}
.faq details > div p{margin:0 0 1rem}

/* light section on dark site */
.lite{background:var(--paper); color:#141A20}
.lite h1,.lite h2{color:#141A20}
.lite .eyebrow{color:#8A6A2E}
.lite .sec-head p, .lite .prose p, .lite .prose ul{color:#4A5560}
.lite .prose h3, .lite .prose strong{color:#141A20}

@media (max-width:1080px){
  .split{grid-template-columns:1fr; gap:2.5rem}
  .ratecards{grid-template-columns:1fr; gap:2rem}
  .cards{grid-template-columns:repeat(2,1fr)}
  .reviewgrid{columns:2}
  .cfg{grid-template-columns:1fr}
  .cfg-out{position:static}
  .lbgrid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .pagehero-in{padding:2.75rem 0 2.5rem}
  .cards{grid-template-columns:1fr}
  .reviewgrid{columns:1}
  .gal{grid-template-columns:1fr; gap:2rem}
  .crumbs{padding:.85rem 0; font-size:13.5px}
  .cfg-form{padding:1.3rem}
}

/* inline links inside body copy still need a 24px target (WCAG 2.2 AA minimum) */
.facts a, .prose a, .lb a:not(.btn), section p a:not(.btn){
  display:inline-flex; align-items:center; min-height:24px;
}