/* =========================================================
   The redesigned look for the content pages (guides, Shell Key,
   gift cards, privacy). Loaded after each page's own styles, and
   scoped by a class on <body>, so nothing else on the site changes.
   Same fonts as before; the same tokens, buttons, panels and header
   as the redesigned home page.
   ========================================================= */
.pg{
  --navy:#0C2531; --navy-deep:#081A23;
  --gold:#E3AC48; --gold-deep:#C8902E; --gold-soft:#F1CD86; --gold-ink:#8A5A0B;
  --paper:#F7F3EC; --sand-2:#EFE8DC; --ink:#10293A; --muted:#4D6370; --sea-ink:#0B6F7C;
  --line-dark:rgba(16,41,58,.12);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --script:"Dancing Script",cursive;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --inset:12px; --panel-r:30px;
  --shadow-card:0 1px 2px rgba(8,26,35,.05),0 22px 50px -32px rgba(8,26,35,.45);
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
@media(max-width:760px){ .pg{ --inset:8px; --panel-r:24px; } }
.pg h1,.pg h2,.pg h3{ text-wrap:balance; }
.pg p,.pg li{ text-wrap:pretty; }
.pg :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- header: the floating navy bar ---------- */
.pg > header{ position:sticky; top:0; z-index:50; padding:var(--inset) var(--inset) 0;
  /* the page colour fills the strip above the floating bar, so the page never peeks through the gap */
  background:var(--paper); }
.pg > header::after{ content:""; position:absolute; left:0; right:0; top:100%; height:var(--inset); background:var(--paper); pointer-events:none; }   /* the same margin below the bar as above it */
.pg > header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  max-width:1200px; margin:0 auto; background:var(--navy-deep); border-radius:22px;
  padding:9px 10px 9px 18px; min-height:62px; box-shadow:0 18px 40px -24px rgba(0,0,0,.7);
}
.pg .brand{ display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; flex:none; }
.pg .brand img{ width:32px; height:32px; flex:none; }
.pg .wordmark{ display:flex; flex-direction:column; line-height:1; color:#fff; }
.pg .wm-top{ font-family:var(--serif); font-weight:800; font-size:1.22rem; letter-spacing:.02em; }
.pg .wm-sub{ display:flex; align-items:center; gap:7px; font-family:var(--sans); font-size:.54rem; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:var(--gold-soft); margin-top:4px; }
.pg .wm-sub::before,.pg .wm-sub::after{ content:""; flex:1; height:1px; background:rgba(241,205,134,.4); }

/* ---------- buttons: pills (text size and capitals come from each page's own styles, as on the live site) ---------- */
.pg .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:0 28px;
  border:0; border-radius:999px; background:var(--gold); color:var(--navy-deep); text-decoration:none;
  font-family:var(--sans); font-weight:700; line-height:1.2;
  box-shadow:0 12px 28px -14px rgba(227,172,72,.85),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .3s var(--ease-out),background .25s,box-shadow .3s; cursor:pointer;
}
.pg .btn:hover{ background:#ECB955; transform:translateY(-2px); }
.pg > header .btn{ min-height:44px; padding:0 20px; box-shadow:none; white-space:nowrap; }

/* ---------- small labels over headings ---------- */
.pg .kick{ display:inline-block; font-family:var(--sans); font-weight:700; color:var(--gold-soft); }
.pg .hero .kick,.pg .hero h1,.pg .hero p{ text-shadow:0 1px 14px rgba(8,26,35,.55); }   /* words over a busy photo stay readable */
.pg .script{ font-family:var(--script); font-weight:700; color:var(--gold); }

/* ---------- footer: a rounded navy panel ---------- */
.pg > footer{
  margin:0 var(--inset) var(--inset); border-radius:var(--panel-r); background:var(--navy-deep);
  color:rgba(255,255,255,.66); text-align:center; padding:26px 20px; line-height:1.7;
}
.pg > footer a{ color:var(--gold-soft); font-weight:600; text-decoration:underline; text-decoration-color:rgba(241,205,134,.4); text-underline-offset:3px; white-space:nowrap; }

/* ===== GUIDES (sandbar guide, things to do) ===== */
.pg-guide .hero{
  margin:var(--inset) var(--inset) 0; border-radius:var(--panel-r); min-height:clamp(340px,52vh,520px);
  isolation:isolate;
}
.pg-guide .hero::after{ background:linear-gradient(0deg,rgba(8,26,35,.9) 6%,rgba(8,26,35,.45) 42%,rgba(8,26,35,.08) 72%); }
.pg-guide .hero .wrap{ padding-top:110px; padding-bottom:40px; }
.pg-guide h1{ font-weight:800; letter-spacing:-.01em; line-height:1.06; margin-top:12px; max-width:18ch; }
/* the article needs its own space top and bottom (".wrap" was cancelling it, so the
   closing card sat right on the footer) */
.pg-guide main.wrap{ padding-top:clamp(40px,6vw,64px); padding-bottom:clamp(48px,7vw,80px); }
.pg-guide main h2{ font-weight:800; line-height:1.18; letter-spacing:-.005em; }
.pg-guide main p,.pg-guide main li{ color:#2A4350; }
.pg-guide main a{ color:var(--sea-ink); font-weight:600; text-decoration:underline; text-decoration-color:rgba(11,111,124,.35); text-underline-offset:3px; }
.pg-guide main a:hover{ text-decoration-color:currentColor; }
.pg-guide main .btn{ text-decoration:none; color:var(--navy-deep); }
.pg-guide .tip{ border-radius:18px; border-left:4px solid var(--gold); padding:18px 20px; box-shadow:var(--shadow-card); }
.pg-guide .cta{ border-radius:var(--panel-r); padding:clamp(34px,6vw,48px) clamp(22px,5vw,40px); margin-top:48px; box-shadow:0 30px 60px -36px rgba(8,26,35,.6); }
.pg-guide .cta p{ color:rgba(255,255,255,.84); }

/* ===== SHELL KEY ===== */
.pg-shellkey .hero{ margin:var(--inset) var(--inset) 0; border-radius:var(--panel-r); isolation:isolate; min-height:clamp(420px,64vh,640px); }
.pg-shellkey .hero::after{ background:linear-gradient(0deg,rgba(8,26,35,.94) 0%,rgba(8,26,35,.8) 38%,rgba(8,26,35,.48) 68%,rgba(8,26,35,.22) 100%); }
.pg-shellkey .hero .wrap{ padding-top:110px; padding-bottom:44px; }
.pg-shellkey h1{ font-weight:800; letter-spacing:-.01em; line-height:1.06; }
.pg-shellkey h2{ font-weight:800; letter-spacing:-.005em; line-height:1.15; }
.pg-shellkey .feat li{ border-radius:20px; padding:18px 20px; box-shadow:var(--shadow-card); border:1px solid rgba(16,41,58,.05); }
.pg-shellkey .cta-band{ margin:0 var(--inset) var(--inset); border-radius:var(--panel-r); padding:clamp(48px,7vw,72px) 0; }
.pg-shellkey .cta-band .btn{ margin-top:4px; }

/* ===== GIFT CARDS ===== */
.pg-gift .hero{ margin:var(--inset) var(--inset) 0; border-radius:var(--panel-r); padding:clamp(48px,8vw,80px) 22px; }
.pg-gift h1{ font-weight:800; letter-spacing:-.01em; line-height:1.08; }
.pg-gift .amt{ border-radius:16px; border:1px solid rgba(16,41,58,.18); min-height:58px; transition:border-color .2s,background .2s,box-shadow .2s; }
.pg-gift .amt:hover{ border-color:var(--ink); }
.pg-gift .amt.active{ background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 10px 22px -12px rgba(8,26,35,.75); }
.pg-gift .deliv-btn{ border-radius:16px; border:1px solid rgba(16,41,58,.18); transition:border-color .2s,background .2s,box-shadow .2s; }
.pg-gift .deliv-btn.active{ border-color:var(--gold); background:#FFFBF2; box-shadow:0 0 0 1px var(--gold); }
.pg-gift .ecards{ gap:14px; }
.pg-gift .ecard{ position:relative; aspect-ratio:1.6; border:0; border-radius:18px; line-height:1.2; background:var(--navy-deep);
  box-shadow:0 1px 2px rgba(8,26,35,.08),0 18px 34px -20px rgba(8,26,35,.6); }
.pg-gift .ecard .art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* shade for the words, and a fine gold frame inside the edge, like a printed card */
.pg-gift .ecard::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,26,35,.45) 0%,rgba(8,26,35,0) 34%,rgba(8,26,35,0) 52%,rgba(8,26,35,.78) 100%); border-radius:inherit; }
.pg-gift .ec-frame{ position:absolute; z-index:2; inset:7px; border:1px solid rgba(241,205,134,.62); border-radius:12px; pointer-events:none; }
.pg-gift .ec-label{ position:absolute; z-index:2; top:14px; left:16px; font-family:var(--sans); font-size:.56rem; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold-soft); text-shadow:0 1px 8px rgba(8,26,35,.6); }
.pg-gift .ec-brand{ position:absolute; z-index:2; left:16px; bottom:13px; display:flex; align-items:center; gap:8px; color:#fff; }
.pg-gift .ec-mark{ width:22px; height:22px; color:var(--gold-soft); flex:none; }
.pg-gift .ec-name{ display:flex; flex-direction:column; line-height:1; text-shadow:0 1px 10px rgba(8,26,35,.6); }
.pg-gift .ec-top{ font-family:var(--serif); font-weight:800; font-size:.98rem; letter-spacing:.01em; }
.pg-gift .ec-sub{ font-family:var(--sans); font-weight:600; font-size:.48rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold-soft); margin-top:3px; }
.pg-gift .ecard.active{ box-shadow:0 0 0 3px var(--gold),0 18px 34px -14px rgba(227,172,72,.75); }
.pg-gift .ecard.active::after{ z-index:3; top:10px; right:10px; }
@media(max-width:420px){ .pg-gift .ecards{ gap:10px; } .pg-gift .ec-label{ top:11px; left:12px; font-size:.5rem; letter-spacing:.26em; }
  .pg-gift .ec-brand{ left:12px; bottom:10px; gap:6px; } .pg-gift .ec-mark{ width:18px; height:18px; } .pg-gift .ec-top{ font-size:.82rem; } .pg-gift .ec-sub{ font-size:.42rem; } }
.pg-gift input,.pg-gift textarea{ border:1px solid rgba(16,41,58,.22); border-radius:14px; min-height:54px; }
.pg-gift textarea{ min-height:90px; }
.pg-gift input:focus,.pg-gift textarea:focus{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(227,172,72,.35); }
.pg-gift .btn{ width:100%; min-height:58px; }
.pg-gift .note{ border-radius:16px; border-left:4px solid var(--gold); }

/* ===== GIFT CARD READY ===== */
.pg-thanks .card{ border-radius:26px; padding:40px 30px; box-shadow:0 30px 70px -40px rgba(8,26,35,.55); }
.pg-thanks .check{ background:var(--gold); color:var(--navy-deep); }
.pg-thanks .check svg{ width:32px; height:32px; }
.pg-thanks h1{ letter-spacing:-.01em; }
.pg-thanks a{ color:var(--sea-ink); font-weight:600; }
.pg-thanks a.btn{ color:var(--navy-deep); }

/* ===== PRIVACY ===== */
.pg-privacy main{ padding-top:clamp(36px,6vw,56px); }
.pg-privacy h1{ color:var(--ink); letter-spacing:-.01em; }
.pg-privacy h2{ color:var(--ink); }
.pg-privacy p,.pg-privacy li{ color:#2A4350; }
.pg-privacy main a{ color:var(--sea-ink); font-weight:600; }
.pg-privacy .back{ background:var(--gold); color:var(--navy-deep); min-height:52px; display:inline-flex; align-items:center; padding:0 26px; box-shadow:0 12px 28px -14px rgba(227,172,72,.85); }

/* ---------- small phones ---------- */
@media(max-width:400px){
  .pg > header .wrap{ padding-left:14px; }
  .pg .wm-top{ font-size:1.1rem; }
  .pg .brand img{ width:29px; height:29px; }
  .pg > header .btn{ padding:0 14px; letter-spacing:.06em; }
}
@media(prefers-reduced-motion:reduce){ .pg .btn{ transition:none; } }