:root{
  --navy:#0d2033;
  --navy-2:#16334f;
  --ink:#1b2b3a;
  --slate:#4d6274;
  --sand:#f6efe4;
  --cream:#fdfaf5;
  --sunset:#e08a3c;
  --cta:#a85f18;        /* white text passes WCAG AA on this */
  --cta-deep:#8c4d12;
  --sunset-deep:#c96f26;
  --ocean:#2f7d9c;
  --foam:#dbe9ee;
  --line:rgba(13,32,51,.12);
  --shadow:0 1px 2px rgba(13,32,51,.05), 0 12px 32px -12px rgba(13,32,51,.18);
  --shadow-lg:0 2px 4px rgba(13,32,51,.06), 0 30px 70px -24px rgba(13,32,51,.30);
  --max:1180px;
  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.12; margin:0; letter-spacing:-.015em}
h2{font-size:clamp(2rem,4.2vw,3rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem)}
p{margin:0 0 1.1em}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}
.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cta-deep);
  margin:0 0 .9rem;
}
.eyebrow.on-dark{color:var(--sunset)}
.lede{font-size:1.12rem; color:var(--slate); max-width:60ch}
section{padding:clamp(64px,9vw,116px) 0}

/* ---------- nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(253,250,245,.86); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{max-width:var(--max); margin:0 auto; padding:10px 28px; display:flex; align-items:center; gap:28px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand img{width:46px; height:46px}
.brand b{font-family:var(--serif); font-size:1.12rem; font-weight:600; letter-spacing:-.01em; display:block; line-height:1.1}
.brand span{font-size:.73rem; letter-spacing:.18em; text-transform:uppercase; color:var(--slate)}
.nav nav{display:flex; gap:26px}
.nav nav a{
  text-decoration:none; font-size:.88rem; font-weight:500; color:var(--slate);
  padding:6px 0; border-bottom:1.5px solid transparent; transition:.18s;
}
.nav nav a:hover{color:var(--navy); border-color:var(--sunset)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-size:.9rem; font-weight:600; text-decoration:none;
  padding:.72em 1.35em; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:.18s; white-space:nowrap;
}
.btn-primary{background:var(--sunset); color:#fff}
.btn-primary:hover{background:var(--sunset-deep)}
.btn-ghost{border-color:rgba(255,255,255,.5); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14); border-color:#fff}
.btn-outline{border-color:var(--navy); color:var(--navy)}
.btn-outline:hover{background:var(--navy); color:#fff}
.menu-btn{display:none; background:none; border:0; font-size:1.5rem; color:var(--navy); cursor:pointer; padding:4px 6px}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(88vh,760px); display:flex; align-items:flex-end; padding:0; overflow:hidden}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:52% 45%}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(8,22,36,.95) 0%, rgba(8,22,36,.82) 26%, rgba(8,22,36,.42) 58%, rgba(8,22,36,.18) 78%, rgba(8,22,36,.42) 100%),
    linear-gradient(to right, rgba(8,22,36,.42) 0%, rgba(8,22,36,0) 62%);
}
.cap{font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--slate); margin:.9rem 0 0; text-align:center}
.hero-inner{position:relative; z-index:2; width:100%; max-width:var(--max); margin:0 auto; padding:0 28px clamp(48px,7vw,84px); color:#fff}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem); font-weight:400; letter-spacing:-.03em; max-width:16ch}
.hero h1 em{font-style:italic; color:#f5c48a}
.hero p{max-width:52ch; margin-top:1.1rem; font-size:1.09rem; color:rgba(255,255,255,.86)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:1.9rem}

/* ---------- marquee facts ---------- */
.facts{background:var(--navy); color:#fff; padding:0}
.facts .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.fact{padding:34px 34px; border-right:1px solid rgba(255,255,255,.12)}
.fact:first-child{padding-left:0}
.fact:last-child{border-right:0; padding-right:0}
.fact h2{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sunset); margin-bottom:.5rem}
.fact p{margin:0; font-size:.97rem; color:rgba(255,255,255,.76); line-height:1.55}

/* ---------- generic grid ---------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center}
.split.reverse .media{order:2}
.media img{border-radius:4px; box-shadow:var(--shadow-lg)}

/* ---------- shoreline ---------- */
.shoreline{background:var(--sand)}
.beaches{margin:2rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.beaches li{
  font-size:.86rem; font-weight:500; color:var(--navy-2);
  background:rgba(255,255,255,.75); border:1px solid var(--line);
  padding:.42em .9em; border-radius:999px;
}
.beaches li.hot{background:var(--navy); color:#fff; border-color:var(--navy)}
.note{font-size:.86rem; color:var(--slate); margin-top:1rem}

.ladder{margin-top:clamp(48px,6vw,76px)}
.ladder-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:2rem}
.tier{
  background:var(--cream); border:1px solid var(--line); border-radius:6px;
  padding:22px 20px 20px; display:flex; flex-direction:column; gap:.35rem;
}
.tier.featured{background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:var(--shadow-lg)}
.tier .size{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); font-weight:600}
.tier.featured .size{color:var(--sunset)}
.tier .name{font-family:var(--serif); font-size:1.18rem; font-weight:600}
.tier .price{font-family:var(--serif); font-size:1.9rem; font-weight:400; margin-top:.2rem; letter-spacing:-.02em}
.tier .why{font-size:.85rem; color:var(--slate); line-height:1.5; margin-top:.4rem}
.tier.featured .why{color:rgba(255,255,255,.72)}
.tier .flag{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--navy); background:var(--sunset); padding:.3em .7em; border-radius:99px;
  align-self:flex-start; margin-bottom:.5rem;
}

/* ---------- personalization band ---------- */
.band{background:var(--navy); color:#fff}
.band .split{align-items:center}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.78)}
.band .examples{list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:10px}
.band .examples li{
  font-family:var(--serif); font-size:1.15rem; color:#f5c48a;
  border-left:2px solid var(--sunset); padding-left:16px;
}

/* ---------- collections ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:26px; margin-top:3rem}
.card{background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card .ph{aspect-ratio:4/3; overflow:hidden; background:var(--foam)}
.card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.04)}
.card .body{padding:22px 22px 24px}
.card h3{font-size:1.22rem; margin-bottom:.5rem}
.card p{font-size:.93rem; color:var(--slate); margin:0 0 .9rem}
.card .from{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--cta-deep)}

/* ---------- tables ---------- */
.tbl{width:100%; border-collapse:collapse; margin-top:2rem; font-size:.95rem}
.tbl th{
  text-align:left; font-family:var(--sans); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); font-weight:600;
  padding:0 16px 10px 0; border-bottom:1px solid var(--line);
}
.tbl td{padding:16px 16px 16px 0; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .t-name{font-family:var(--serif); font-size:1.08rem; font-weight:600; white-space:nowrap}
.tbl .t-price{font-family:var(--serif); font-size:1.25rem; text-align:right; padding-right:0; white-space:nowrap}
.tbl td:last-child, .tbl th:last-child{padding-right:0}

/* ---------- b2b ---------- */
.b2b{background:var(--sand)}
.panels{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:3rem}
.panel{background:var(--cream); border:1px solid var(--line); border-radius:6px; padding:32px 30px}
.panel.dark{background:var(--navy); border-color:var(--navy); color:#fff}
.panel.dark p, .panel.dark li{color:rgba(255,255,255,.78)}
.panel h3{margin-bottom:.8rem}
.panel.dark h3{color:#fff}
.checks{list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.6rem; font-size:.94rem; color:var(--slate)}
.checks li{padding-left:24px; position:relative}
.checks li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--sunset)}
.clients{margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.16); font-size:.85rem; color:rgba(255,255,255,.6)}
.clients b{color:#fff; font-weight:600}

/* ---------- market ---------- */
.market-card{
  background:var(--navy); color:#fff; border-radius:8px; overflow:hidden;
  display:grid; grid-template-columns:1.1fr .9fr; box-shadow:var(--shadow-lg);
}
.market-card .info{padding:clamp(34px,4vw,54px)}
.market-card h2{color:#fff; margin-bottom:1rem}
.market-card p{color:rgba(255,255,255,.78)}
.market-card .media{position:relative; min-height:280px}
.market-card .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.dl{margin:1.8rem 0 0; display:grid; gap:0}
.dl div{display:flex; gap:18px; padding:13px 0; border-top:1px solid rgba(255,255,255,.14)}
.dl dt{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sunset); font-weight:600; width:118px; flex:none; margin:0; padding-top:.25em}
.dl dd{margin:0; font-size:.96rem; color:rgba(255,255,255,.9)}

/* ---------- about ---------- */
.about-quote{
  font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,2rem); font-weight:300;
  line-height:1.4; letter-spacing:-.015em; color:var(--navy); max-width:22ch;
}

/* ---------- contact ---------- */
.contact{background:var(--navy); color:#fff}
.contact h2{color:#fff}
.contact .lede{color:rgba(255,255,255,.76)}
form{display:grid; gap:16px; margin-top:2rem}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label{display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--sunset); margin-bottom:.5rem}
input,select,textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2);
  border-radius:4px; padding:.8em .95em; transition:.18s;
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.38)}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--sunset); background:rgba(255,255,255,.11)}
select option{background:var(--navy); color:#fff}
textarea{resize:vertical; min-height:120px}
.form-note{font-size:.82rem; color:rgba(255,255,255,.5); margin:0}
.contact-side{display:grid; gap:26px; align-content:start}
.cbox{border:1px solid rgba(255,255,255,.16); border-radius:6px; padding:26px 24px}
.cbox h3{font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sunset); margin-bottom:.7rem}
.cbox p{margin:0; font-size:.95rem; color:rgba(255,255,255,.82)}
.cbox a{color:#fff}

/* ---------- footer ---------- */
footer{background:#081827; color:rgba(255,255,255,.55); padding:52px 0; font-size:.87rem}
footer .wrap{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
footer img{width:48px; height:48px; opacity:.95}
footer .fbrand{font-family:var(--serif); color:#fff; font-size:1.05rem; margin-right:auto}
footer .fbrand span{display:block; font-family:var(--sans); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45)}
footer a{color:rgba(255,255,255,.7); text-decoration:none}
footer a:hover{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split, .panels, .market-card, .row{grid-template-columns:1fr}
  .ladder-grid{grid-template-columns:repeat(2,1fr)}
  .split.reverse .media{order:0}
  .facts .wrap{grid-template-columns:1fr}
  .fact{border-right:0; border-bottom:1px solid rgba(255,255,255,.12); padding:26px 0}
  .fact:last-child{border-bottom:0}
  .market-card .media{min-height:240px; order:-1}
  .nav nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 28px 18px;
  }
  .nav nav.open{display:flex}
  .nav nav a{padding:11px 0; border-bottom:1px solid var(--line)}
  .menu-btn{display:block}
  .nav .btn-primary{display:none}
  .dl dt{width:100px}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .ladder-grid{grid-template-columns:1fr}
  .hero-inner{padding-left:20px; padding-right:20px}
  .nav{padding:10px 20px}
  .tbl .t-name{white-space:normal}
}
/* A 320px screen (iPhone SE, older Androids) could not fit .panel: 60px of
   side padding plus two white-space:nowrap table columns gave it a
   min-content width of 321px, which pushed the whole page sideways on
   /wedding-gifts/. Grid children default to min-width:auto, so the column
   could not shrink below that. */
@media (max-width:420px){
  .panel{padding:24px 18px}
  .panels{gap:16px}
  .panel > *{min-width:0}
  .tbl .t-price{white-space:normal}
  .tbl td{padding-right:10px}
  .tbl td:last-child{padding-right:0}
}
.panels > *{min-width:0}

/* ---------- buy ---------- */
.buy{display:flex; gap:.55rem; align-items:stretch; margin-top:.95rem; flex-wrap:wrap}
.buy-opt{
  flex:1 1 8rem; min-width:0; font:inherit; font-size:.86rem; color:var(--ink);
  padding:.6rem .7rem; border:1px solid rgba(16,42,67,.18); border-radius:7px;
  background:#fff; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23557' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .65rem center; background-size:10px;
  padding-right:1.9rem;
}
.buy-opt:focus{outline:2px solid var(--sunset); outline-offset:1px}
.buy-design{flex:1 1 100%}
.buy-btn{
  flex:0 0 auto; font:inherit; font-size:.86rem; font-weight:600; line-height:1;
  padding:.72rem 1.05rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--sunset); color:#fff; text-decoration:none; display:inline-flex;
  align-items:center; transition:background .2s ease, transform .2s ease;
}
.buy-btn:hover{background:var(--sunset-deep); transform:translateY(-1px)}
.buy-btn:active{transform:translateY(0)}
.buy-ask{background:transparent; color:var(--ink); border:1px solid rgba(16,42,67,.25)}
.buy-ask:hover{background:rgba(13,32,51,.05)}


/* ---------- cart ---------- */
.cart-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none; margin-left:6px; border:0; border-radius:50%;
  background:none; color:var(--navy); cursor:pointer;
}
.cart-btn:hover{background:rgba(13,32,51,.06)}
.cart-count{
  position:absolute; top:3px; right:1px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--cta); color:#fff; font-size:.68rem; font-weight:700;
  line-height:18px; text-align:center;
}
.cart-backdrop{
  position:fixed; inset:0; background:rgba(13,32,51,.45); z-index:60;
  opacity:0; transition:opacity .25s ease;
}
.cart-backdrop.open{opacity:1}
.cart-panel{
  position:fixed; top:0; right:0; bottom:0; width:min(390px,92vw); z-index:61;
  background:#fff; box-shadow:-8px 0 40px rgba(13,32,51,.22);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .25s ease;
}
.cart-panel.open{transform:none}
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 20px 14px; border-bottom:1px solid var(--line);
}
.cart-head h2{font-size:1.15rem; margin:0}
.cart-close{
  width:44px; height:44px; border:0; background:none; font-size:1.7rem; line-height:1;
  color:var(--slate); cursor:pointer; border-radius:50%;
}
.cart-close:hover{background:rgba(13,32,51,.06); color:var(--ink)}
.cart-body{flex:1; overflow-y:auto; padding:6px 20px}
.cart-empty{color:var(--slate); font-size:.92rem; padding:28px 0}
.cart-row{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
.cart-row-main{flex:1; min-width:0}
.cart-row-title{margin:0; font-weight:600; font-size:.93rem}
.cart-row-opt{margin:.2rem 0 0; font-size:.8rem; color:var(--slate)}
.cart-row-pers{margin:.35rem 0 0; font-size:.78rem; color:var(--cta-deep); word-break:break-word}
.cart-row-side{text-align:right; flex:none}
.cart-row-price{margin:0; font-weight:600; font-size:.93rem}
.cart-row-fee{background:rgba(224,138,60,.06); margin:0 -20px; padding:14px 20px}
.qty{display:inline-flex; align-items:center; gap:2px; margin-top:.45rem}
.qty-btn{
  width:30px; height:30px; border:1px solid var(--line); background:#fff; cursor:pointer;
  font-size:1rem; line-height:1; color:var(--ink); border-radius:6px;
}
.qty-btn:hover{background:var(--sand)}
.qty-n{min-width:26px; text-align:center; font-size:.88rem}
.cart-rm{
  display:block; margin:.4rem 0 0 auto; border:0; background:none; padding:4px 0;
  font:inherit; font-size:.76rem; color:var(--slate); cursor:pointer; text-decoration:underline;
}
.cart-rm:hover{color:var(--ink)}
.cart-foot{padding:16px 20px 20px; border-top:1px solid var(--line); background:var(--cream)}
.cart-line-total{display:flex; justify-content:space-between; align-items:baseline; font-size:1rem}
.cart-line-total strong{font-size:1.25rem}
.cart-note{margin:.3rem 0 .9rem; font-size:.78rem; color:var(--slate)}
.cart-checkout{width:100%; justify-content:center}
.cart-checkout:disabled{opacity:.45; cursor:not-allowed}

/* ---------- contrast + tap targets ---------- */
.btn-primary{background:var(--cta)}
.btn-primary:hover{background:var(--cta-deep)}
.buy-btn{background:var(--cta); min-height:44px}
.buy-btn:hover{background:var(--cta-deep)}
/* .buy-btn above re-declares the background at equal specificity, which was
   silently turning the transparent "Ask for a quote" button into ink-on-orange
   at 2.97:1. Restate it here, after, so the outline style wins. */
.buy-ask{background:transparent; color:var(--ink); border:1px solid rgba(16,42,67,.25)}
.buy-ask:hover{background:rgba(13,32,51,.05)}
.pers-toggle{color:var(--cta-deep)}
/* .card .from is more specific than a bare .from, so the accessible colour was
   never reaching the product cards. Match the specificity. */
.from, .card .from{color:var(--cta-deep)}
/* --sunset-deep is 3.18:1 on the sand background, below AA for small text.
   The eyebrow is 11.5px, so it needs the deeper tone. .eyebrow.on-dark is
   more specific and still wins on the navy sections. */
.eyebrow{color:var(--cta-deep)}
.menu-btn{min-width:44px; min-height:44px; font-size:1.35rem}
.cap, footer, .cart-note, .pers-note, .pers label{color:var(--slate)}
footer{color:rgba(255,255,255,.72)}
footer a{color:rgba(255,255,255,.86)}
footer .fbrand span{color:rgba(255,255,255,.66)}

/* ---------- skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100; padding:12px 18px;
  background:var(--navy); color:#fff; text-decoration:none; border-radius:0 0 6px 0;
}
.skip:focus{left:0}

@media (max-width:820px){
  .nav-cta{display:none}
  .cart-btn{margin-left:auto}
}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* The padding lives on the control, not on the <li>. With it on the li the
   pill looked 36px tall but the actual clickable target was only 23px. */
.beaches li{padding:0}
.beaches button.beach, .beaches a.beach{
  font:inherit; font-size:inherit; color:inherit; background:none; border:0;
  display:inline-flex; align-items:center; padding:.42em .9em;
  cursor:pointer; text-align:inherit;
  /* These chips are how people get into the Shoreline collection, and on a
     phone they were 34px tall - under the 44px everyone's thumb guidelines
     assume. min-height on the CONTROL (not the li) is what actually grows
     the tap target rather than just the pill. */
  min-height:44px;
}
.beaches li:hover{border-color:var(--cta)}

picture{display:contents}
.buy-btn{min-height:44px}
.buy-opt{min-height:44px}
/* Dependent menus on the coaster card. .buy-opt sets no display of its own,
   so the UA [hidden] rule would normally do this - the !important is here
   because a flex item that picks up a display later is a silent, ugly bug. */
.buy-opt[hidden]{display:none !important}
.buy-material{flex:1 1 100%}
.btn{min-height:44px; display:inline-flex; align-items:center}
.pers-toggle{
  flex:1 1 100%; margin-top:.15rem; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.82rem; color:var(--cta-deep); text-align:left;
  display:inline-flex; align-items:center; gap:.4rem; min-height:44px;
}
.pers-toggle:hover{color:var(--ink)}
.pers-toggle .pers-ico{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border:1px solid currentColor; border-radius:50%; font-size:.7rem; line-height:1; flex:none;
}
.pers-toggle[aria-expanded="true"] .pers-ico{transform:rotate(45deg)}
.pers{flex:1 1 100%; margin-top:.5rem}
.pers label{display:block; font-size:.78rem; color:var(--slate); margin-bottom:.35rem}
.pers-in{
  width:100%; font:inherit; font-size:.86rem; color:var(--ink); padding:.6rem .7rem;
  border:1px solid rgba(13,32,51,.18); border-radius:7px; background:#fff; resize:vertical;
}
.pers-in:focus{outline:2px solid var(--sunset); outline-offset:1px; border-color:transparent}
.pers-note{font-size:.74rem; color:var(--slate); margin:.4rem 0 0}
a:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible,
input:focus-visible{outline:2px solid var(--sunset); outline-offset:2px}
@media (max-width:420px){
  .buy{gap:.5rem}
  .buy-opt{flex:1 1 100%}
  .buy-btn{flex:1 1 100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* =========================================================================
   Components used only by the standalone pages (corporate, realtors,
   beaches). Appended to the shared stylesheet for every page, including the
   homepage, so a component can be promoted to the homepage without a move.
   ========================================================================= */

/* ---------- page head band ---------- */
.page-head{background:var(--navy); color:#fff; padding:clamp(48px,7vw,86px) 0 clamp(40px,6vw,70px)}
.page-head h1{
  font-size:clamp(2.1rem,5vw,3.4rem); font-weight:400; letter-spacing:-.03em;
  max-width:19ch; color:#fff;
}
.page-head h1 em{font-style:italic; color:#f5c48a}
.page-head .lede{color:rgba(255,255,255,.8); margin-top:1.1rem}
.page-head .hero-cta{margin-top:1.9rem}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.78rem; letter-spacing:.02em; color:rgba(255,255,255,.6); margin:0 0 1.4rem}
.crumb a{color:rgba(255,255,255,.82); text-decoration:none}
.crumb a:hover{color:#fff; text-decoration:underline}
.crumb span{padding:0 .45em}

/* ---------- stat row ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; margin-top:clamp(34px,5vw,52px)}
.stat{padding:24px 28px 24px 0; border-right:1px solid rgba(255,255,255,.14)}
.stat:last-child{border-right:0}
.stat b{
  display:block; font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.3rem);
  font-weight:400; letter-spacing:-.02em; color:#fff;
}
.stat span{display:block; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sunset); margin-top:.35rem; font-weight:600}

/* ---------- proof grid ---------- */
/* 300px min lands on three columns at desktop width, so six figures read as
   two even rows rather than a row of four and an orphaned pair. */
.proof{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:18px; margin-top:2.6rem}
.proof figure{margin:0; background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--shadow)}
.proof .ph{aspect-ratio:4/3; overflow:hidden; background:var(--foam)}
.proof .ph img{width:100%; height:100%; object-fit:cover}
.proof figcaption{padding:14px 16px 16px; font-size:.86rem; color:var(--slate); line-height:1.5}
.proof figcaption b{display:block; color:var(--ink); font-weight:600; margin-bottom:.2rem}

.proof-wide{grid-template-columns:1fr}
.proof-wide .ph{aspect-ratio:16/7}

/* Four real photographs deserve the size. Two columns, not three. */
/* min() keeps the track from forcing a 400px column on a 390px phone, which
   pushed the corporate page 31px wider than the viewport and gave it a
   horizontal scrollbar. auto-fit alone will not shrink past the minmax floor. */
.proof-2{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr)); gap:22px}

/* ---------- numbered process ---------- */
.steps{list-style:none; padding:0; margin:2.4rem 0 0; display:grid; gap:0; counter-reset:step}
.steps li{
  counter-increment:step; position:relative; padding:20px 0 20px 62px;
  border-top:1px solid var(--line);
}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:20px;
  width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--serif); font-size:1rem; display:flex; align-items:center; justify-content:center;
}
.steps b{display:block; font-family:var(--serif); font-size:1.12rem; font-weight:600; margin-bottom:.25rem}
.steps p{margin:0; font-size:.94rem; color:var(--slate)}
.panel.dark .steps li{border-color:rgba(255,255,255,.16)}
.panel.dark .steps li::before{background:var(--sunset); color:var(--navy)}
.panel.dark .steps p{color:rgba(255,255,255,.75)}

/* ---------- quantity ladder ---------- */
.qtable{width:100%; border-collapse:collapse; margin-top:2rem; font-size:.95rem}
.qtable th{
  text-align:left; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); font-weight:600; padding:0 16px 10px 0; border-bottom:1px solid var(--line);
}
.qtable td{padding:15px 16px 15px 0; border-bottom:1px solid var(--line); vertical-align:top}
.qtable tr:last-child td{border-bottom:0}
.qtable .q-run{font-family:var(--serif); font-size:1.1rem; font-weight:600; white-space:nowrap}
/* The price is a middle column here, not the last one, so it needs real space
   on its right or it collides with the description beside it. */
.qtable th.q-h-price{text-align:right; padding-right:32px}
.qtable .q-price{font-family:var(--serif); font-size:1.15rem; text-align:right; padding-right:32px; white-space:nowrap}
.qtable td:last-child, .qtable th:last-child{padding-right:0}
@media (max-width:560px){
  .qtable .q-run{white-space:normal}
  .qtable th.q-h-price, .qtable .q-price{padding-right:16px}
}

/* ---------- FAQ ---------- */
.faq{margin-top:2.4rem; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:18px 34px 18px 0; position:relative; list-style:none;
  font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:1.3rem; font-weight:300; color:var(--sunset-deep);
}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 20px; margin:0; font-size:.95rem; color:var(--slate); max-width:70ch}

/* ---------- inline related links ---------- */
.related{display:flex; flex-wrap:wrap; gap:10px; margin-top:2rem; padding:0; list-style:none}
.related li a{
  display:inline-block; font-size:.86rem; font-weight:500; color:var(--navy-2);
  background:rgba(255,255,255,.75); border:1px solid var(--line);
  padding:.45em .95em; border-radius:999px; text-decoration:none;
}
.related li a:hover{border-color:var(--cta); color:var(--cta-deep)}

/* ---------- quote form section ---------- */
.quote{background:var(--navy); color:#fff}
.quote h2{color:#fff}
.quote .lede{color:rgba(255,255,255,.78)}
.quote .row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}
.quote input[type=file]{
  padding:.6em .7em; font-size:.9rem; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.07); border:1px dashed rgba(255,255,255,.3);
}
.quote input[type=file]::file-selector-button{
  font:inherit; font-size:.82rem; font-weight:600; color:var(--navy); background:var(--sunset);
  border:0; border-radius:999px; padding:.45em 1em; margin-right:.9em; cursor:pointer;
}
@media (max-width:900px){ .quote .row3{grid-template-columns:1fr} }

/* a beach chip becomes a real link once that beach has its own page */
.beaches a.beach{display:inline-block; text-decoration:none; color:inherit}
.beaches li:has(a.beach){border-color:var(--cta)}

/* ---------- misc ---------- */
.kicker{
  font-family:var(--serif); font-size:clamp(1.25rem,2.3vw,1.65rem); font-weight:300;
  line-height:1.45; color:var(--navy); max-width:34ch; margin:0;
}
.rule{border:0; border-top:1px solid var(--line); margin:clamp(48px,6vw,76px) 0}

@media (max-width:900px){
  .stat{border-right:0; border-bottom:1px solid rgba(255,255,255,.14); padding:20px 0}
  .stat:last-child{border-bottom:0}
}

/* ---------- the beach ladder sells ---------- */
/* Each tier on a Shoreline beach page carries its own Add to cart box. The
   .why line is pushed to grow so the buttons line up across a row even when
   the descriptions run to different lengths. */
.tier .why{flex:1 0 auto}
.tier .buy{margin-top:1rem; display:flex; flex-direction:column; gap:.55rem}
/* .pers-toggle and .pers carry flex:1 1 100% for the wrapping row on a product
   card. In this column that basis is a HEIGHT, so the children overflow the box
   and the select ends up sitting on top of the toggle, swallowing its clicks.
   Reset the basis here rather than reordering the shared rules. */
.tier .buy > *{flex:0 0 auto}
.tier .buy .buy-opt{width:100%}
.tier .buy .buy-btn{width:100%; text-align:center; justify-content:center}
.tier.featured .buy-opt{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); color:#fff;
}
.tier.featured .buy-opt option{color:var(--ink); background:#fff}
.tier.featured .pers-toggle{color:rgba(255,255,255,.82)}
.tier.featured .pers-toggle:hover{color:#fff}
.tier.featured .pers-note,
.tier.featured .pers label{color:rgba(255,255,255,.7)}
.tier .pers textarea{width:100%}

/* WCAG 2.2 SC 2.5.8 wants 24x24 minimum. The footer nav links measured 23px,
   one pixel short, so they were the only failing targets on the site. */
footer .wrap > a{display:inline-flex; align-items:center; min-height:24px}

/* ---------- wedding page ---------- */
/* Four cards in an auto-fit grid land 3 + 1, and the orphan on the second row
   reads like something failed to load. Two-up is even and gives the engraving
   field room to open without the card jumping. */
#shop-wedding .cards{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){ #shop-wedding .cards{grid-template-columns:1fr} }