/* ============================================================
   Premura shared design system (pf-*)
   Lifted from the Claude Design sources (Homepage Final + Tobago,
   Blue Haven). One source of truth for the elevated marketing pages.
   Desktop-first like the mockups, but with responsive rules added
   so the fixed 1280 grids collapse gracefully on tablet/mobile.
   ============================================================ */

/* Smooth cross-fade between pages (multi-page View Transitions).
   Modern Chrome/Edge/Safari animate same-origin navigations; older
   browsers ignore this and just load normally. The nav is named so it
   stays visually stable across the transition instead of fading. */
@view-transition { navigation: auto; }
.hp-nav, .pf-stickynav { view-transition-name: site-nav; }

:root{
  --pf-navy:#1A2D3A;      /* deep navy, headings + dark sections */
  --pf-navy-2:#2C4A5E;    /* mid blue, secondary dark band */
  --pf-navy-d:#0E1A22;    /* near-black hero base */
  --pf-bronze:#B0824F;    /* primary accent (light bg) */
  --pf-gold:#D4A574;      /* secondary accent (dark bg) */
  --pf-cream:#FBF8F2;     /* lightest cream */
  --pf-cream-2:#F4EFE6;   /* page cream */
  --pf-cream-3:#F0E8D8;   /* warm sand band */
  --pf-ink:#1A2D3A;       /* body on light, strong */
  --pf-body:#52616a;      /* body text */
  --pf-muted:#6B7880;     /* muted labels */
  --pf-serif:'Playfair Display',Georgia,serif;
  --pf-sans:'Jost',system-ui,sans-serif;
}

/* ---------- type ---------- */
.pf-h{ font-family:var(--pf-serif); font-weight:400; }
.pf-body{ font-family:var(--pf-sans); font-weight:300; }
.pf-display{ font-family:var(--pf-serif); font-weight:400; font-size:clamp(34px,5.2vw,62px); line-height:1.06; }
.pf-h1{ font-family:var(--pf-serif); font-weight:400; font-size:clamp(30px,4.6vw,52px); line-height:1.12; }
.pf-h2{ font-family:var(--pf-serif); font-weight:400; font-size:clamp(27px,3.8vw,46px); line-height:1.12; }
.pf-h3{ font-family:var(--pf-serif); font-weight:400; font-size:clamp(21px,2.4vw,26px); line-height:1.2; }
.pf-eyebrow{ font-family:var(--pf-sans); font-weight:500; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--pf-bronze); }
.pf-lead{ font-family:var(--pf-sans); font-weight:300; font-size:17px; line-height:1.8; color:var(--pf-body); }

/* ---------- links / buttons ---------- */
.pf-btn{ font-family:var(--pf-sans); font-weight:600; font-size:13px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:#FBF8F2; background:#B0824F; padding:16px 36px; display:inline-block; border:none; cursor:pointer; border-radius:4px; box-shadow:0 6px 18px rgba(176,130,79,.34); transition:filter .3s ease, transform .3s ease, box-shadow .3s ease; }
.pf-btn:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 10px 24px rgba(176,130,79,.42); }
.pf-ghost{ font-family:var(--pf-sans); font-weight:400; font-size:13px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:#F4EFE6; border:1.5px solid rgba(244,239,230,.45); padding:15px 32px; display:inline-block; transition:background .3s; }
.pf-ghost:hover{ background:rgba(244,239,230,.1); }
.pf-tlink{ font-family:var(--pf-sans); font-weight:500; font-size:15px; letter-spacing:.04em; text-decoration:none; color:var(--pf-bronze); }
.pf-tlink:hover{ text-decoration:underline; }
.pf-nav{ font-family:var(--pf-sans); font-weight:400; font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:rgba(244,239,230,.84); transition:color .3s; }
.pf-nav:hover{ color:var(--pf-gold); }
.pf-divlink{ font-family:var(--pf-sans); font-weight:500; font-size:15px; text-decoration:none; color:var(--pf-bronze); }
.pf-divlink:hover{ text-decoration:underline; }
.pf-btn-dk{ font-family:var(--pf-sans); font-weight:600; font-size:13px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:#FBF8F2; background:#B0824F; padding:16px 36px; display:inline-block; border:none; cursor:pointer; border-radius:4px; box-shadow:0 6px 18px rgba(176,130,79,.34); transition:filter .3s ease, transform .3s ease, box-shadow .3s ease; }
.pf-btn-dk:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 10px 24px rgba(176,130,79,.42); }

/* ---------- folio header (numbered section opener) ---------- */
.pf-folio{ display:flex; align-items:center; gap:22px; margin-bottom:54px; }
.pf-folio-num{ font-family:var(--pf-serif); font-weight:400; font-size:17px; color:var(--pf-bronze); }
.pf-folio-label{ font-family:var(--pf-sans); font-weight:500; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--pf-bronze); }
.pf-folio-line{ flex:1; height:1px; background:rgba(26,45,58,.14); }
/* light-on-dark variant */
.pf-folio-num-lt{ font-family:var(--pf-serif); font-weight:400; font-size:17px; color:var(--pf-gold); }
.pf-folio-label-lt{ font-family:var(--pf-sans); font-weight:500; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--pf-gold); }
.pf-folio-line-lt{ flex:1; height:1px; background:rgba(244,239,230,.18); }

/* ---------- cards ---------- */
.pf-card{ background:#FFFFFF; border:1px solid rgba(26,45,58,.08); border-radius:16px; box-shadow:0 8px 24px rgba(26,45,58,.05); transition:transform .5s ease, box-shadow .5s ease; }
.pf-card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(26,45,58,.1); }
.pf-imgcard{ position:relative; border-radius:16px; overflow:hidden; transition:transform .5s ease, box-shadow .5s ease; }
/* a card's autoplay video is GPU-composited; keep it under the overlay/text */
.pf-imgcard > video{ z-index:0; }
.pf-imgcard > video ~ div{ z-index:2; }
.pf-imgcard:hover{ transform:translateY(-5px); }
.pf-imgcard:hover .pf-dimg{ transform:scale(1.05); }
.pf-dimg{ transition:transform 1.3s ease; }
.pf-check-card{ background:#FFFFFF; border:1px solid rgba(26,45,58,.09); border-radius:14px; padding:26px 24px; }
.pf-feature{ border-top:1px solid rgba(176,130,79,.38); padding-top:22px; }
.pf-feature-lt{ border-top:1px solid rgba(212,165,116,.35); padding-top:22px; }

/* ---------- pills ---------- */
.pf-pill-lt{ font-family:var(--pf-sans); font-weight:400; font-size:13px; letter-spacing:.04em; border:1px solid rgba(26,45,58,.2); color:var(--pf-body); border-radius:40px; padding:9px 18px; display:inline-block; }
.pf-pill-dk{ font-family:var(--pf-sans); font-weight:400; font-size:13px; letter-spacing:.04em; border:1px solid rgba(244,239,230,.4); color:rgba(244,239,230,.9); border-radius:40px; padding:9px 18px; display:inline-block; }

/* ---------- form inputs (on dark) ---------- */
.pf-input{ width:100%; background:rgba(244,239,230,.08); border:1px solid rgba(244,239,230,.2); border-radius:8px; padding:14px 18px; font-family:var(--pf-sans); font-weight:300; font-size:15px; color:var(--pf-cream); outline:none; transition:border-color .3s; }
.pf-input::placeholder{ color:rgba(244,239,230,.42); }
.pf-input:focus{ border-color:rgba(212,165,116,.6); }

/* ---------- footer link ---------- */
.pf-footer-link{ font-family:var(--pf-sans); font-weight:300; font-size:15px; color:var(--pf-body); text-decoration:none; transition:color .25s; }
.pf-footer-link:hover{ color:var(--pf-navy); }

/* ---------- layout helpers (responsive) ---------- */
.pf-wrap{ max-width:1280px; margin:0 auto; padding:0 60px; }
.pf-section{ padding:112px 0; }
.pf-2col{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.pf-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.pf-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.pf-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pf-grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:32px; }
/* shared footer grid (same footer on every page) */
.hp-foot{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; padding-bottom:46px; border-bottom:1px solid rgba(26,45,58,.13); }
@media (max-width:860px){ .hp-foot{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:560px){ .hp-foot{ grid-template-columns:1fr; } }

/* ---------- scroll reveal ---------- */
.pf-reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.pf-reveal.pf-in{ opacity:1; transform:none; }

/* staggered children (grids) */
.pf-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.pf-stagger.pf-in > *{ opacity:1; transform:none; }
.pf-stagger.pf-in > *:nth-child(1){ transition-delay:.04s; }
.pf-stagger.pf-in > *:nth-child(2){ transition-delay:.10s; }
.pf-stagger.pf-in > *:nth-child(3){ transition-delay:.16s; }
.pf-stagger.pf-in > *:nth-child(4){ transition-delay:.22s; }
.pf-stagger.pf-in > *:nth-child(5){ transition-delay:.28s; }
.pf-stagger.pf-in > *:nth-child(6){ transition-delay:.34s; }
.pf-stagger.pf-in > *:nth-child(7){ transition-delay:.40s; }
.pf-stagger.pf-in > *:nth-child(8){ transition-delay:.46s; }

/* steps that reveal one-by-one, tied to scroll position (JS-driven) */
.pf-seq > *{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.pf-seq > *.pf-in{ opacity:1; transform:none; }

/* folio line draws in left-to-right when its row reveals */
.pf-reveal.pf-folio .pf-folio-line,
.pf-reveal.pf-folio .pf-folio-line-lt{ transform:scaleX(0); transform-origin:left; transition:transform 1s cubic-bezier(.2,.7,.2,1) .15s; }
.pf-reveal.pf-folio.pf-in .pf-folio-line,
.pf-reveal.pf-folio.pf-in .pf-folio-line-lt{ transform:scaleX(1); }

/* hero entrance (auto on load) */
@keyframes pfUp{ to{ opacity:1; transform:none; } }
.hp-hero-content > *{ opacity:0; transform:translateY(20px); animation:pfUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hp-hero-content > *:nth-child(1){ animation-delay:.15s; }
.hp-hero-content > *:nth-child(2){ animation-delay:.30s; }
.hp-hero-content > *:nth-child(3){ animation-delay:.48s; }
.hp-hero-content > *:nth-child(4){ animation-delay:.64s; }

/* hero scroll cue */
.pf-scrollcue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:9px; color:rgba(244,239,230,.7); text-decoration:none; }
.pf-scrollcue span{ font-family:var(--pf-sans); font-weight:400; font-size:10px; letter-spacing:.28em; text-transform:uppercase; }
.pf-scrollcue svg{ animation:pfBounce 1.9s ease-in-out infinite; }
@keyframes pfBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* micro-interactions */
.pf-card:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(26,45,58,.13); }
.pf-nav{ position:relative; }
.pf-nav::after{ content:''; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:currentColor; transition:width .3s ease; opacity:.7; }
.pf-nav:hover::after{ width:100%; }
.pf-footer-link{ position:relative; }
.pf-footer-link::after{ content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--pf-bronze); transition:width .3s ease; }
.pf-footer-link:hover::after{ width:100%; }

/* sticky condensing nav (homepage style) */
.pf-stickynav{ position:fixed; top:0; left:0; right:0; z-index:60; transition:background .35s ease, padding .35s ease, box-shadow .35s ease; background:transparent; }
.pf-stickynav.scrolled{ background:var(--pf-navy); box-shadow:0 2px 24px rgba(0,0,0,.22); }

/* mobile drawer */
.pf-burger{ display:none; background:none; border:none; cursor:pointer; width:30px; height:20px; padding:0; position:relative; z-index:61; }
.pf-burger span{ display:block; height:2px; width:100%; background:#F4EFE6; border-radius:2px; margin:0 0 6px; transition:.3s; }
.pf-burger span:last-child{ margin-bottom:0; }
.pf-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(82vw,340px); background:var(--pf-navy); z-index:90; transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; padding:78px 30px 32px; box-shadow:-20px 0 60px rgba(0,0,0,.4); }
.pf-drawer.open{ transform:none; }
.pf-drawer a{ font-family:var(--pf-sans); font-weight:400; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:#dfe7ea; text-decoration:none; padding:15px 0; border-bottom:1px solid rgba(244,239,230,.1); transition:color .25s; }
.pf-drawer a:hover{ color:var(--pf-gold); }
.pf-drawer-close{ position:absolute; top:22px; right:24px; background:none; border:none; color:#F4EFE6; font-size:28px; line-height:1; cursor:pointer; }
.pf-overlay{ position:fixed; inset:0; background:rgba(14,26,34,.5); z-index:85; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; }
.pf-overlay.open{ opacity:1; visibility:visible; }
@media (max-width:860px){ .pf-burger{ display:block; } }

@media (prefers-reduced-motion: reduce){
  .pf-reveal,.pf-stagger > *,.pf-seq > *{ opacity:1; transform:none; transition:none; }
  .hp-hero-content > *{ opacity:1; transform:none; animation:none; }
  .pf-reveal.pf-folio .pf-folio-line,.pf-reveal.pf-folio .pf-folio-line-lt{ transform:none; }
  .pf-scrollcue svg{ animation:none; }
  .pf-card,.pf-imgcard,.pf-dimg,.pf-btn,.pf-btn-dk{ transition:none; }
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .pf-grid-3{ grid-template-columns:1fr 1fr; gap:32px; }
  .pf-grid-4{ grid-template-columns:1fr 1fr; }
  .pf-grid-5{ grid-template-columns:1fr 1fr 1fr; gap:24px; }
}
@media (max-width:760px){
  .pf-wrap{ padding:0 24px; }
  .pf-section{ padding:64px 0; }
  .pf-2col{ grid-template-columns:1fr; gap:28px; }
  .pf-grid-2,.pf-grid-3{ grid-template-columns:1fr; gap:24px; }
  .pf-grid-4{ grid-template-columns:1fr 1fr; }
  .pf-grid-5{ grid-template-columns:1fr 1fr; }
  .pf-folio{ margin-bottom:36px; }
}
@media (max-width:560px){
  .pf-grid-4{ grid-template-columns:1fr; }
  .pf-grid-5{ grid-template-columns:1fr; }
}

/* ===== Accessibility additions (July 2026 audit) ===== */
/* visible keyboard focus everywhere, bronze on light, gold on dark sections */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid #B0824F; outline-offset:2px; border-radius:3px;
}
.pf-dark a:focus-visible, .pf-dark button:focus-visible,
[style*="background:#1A2D3A"] a:focus-visible, [style*="background:#1A2D3A"] button:focus-visible{
  outline-color:#D4A574;
}
/* the mobile burger needs a 44px tap target; keep the 30x20 glyph centred inside */
.pf-burger{ width:44px; height:44px; display:none; flex-direction:column; align-items:center; justify-content:center; }
@media (max-width:860px){ .pf-burger{ display:flex; } }
.pf-burger span{ width:30px; flex:0 0 auto; }

/* ===== Motion polish (July 2026) ===== */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
/* tactile press on primary buttons */
.pf-btn:active, .pf-btn-dk:active{ transform:translateY(0) scale(.98); box-shadow:0 4px 12px rgba(176,130,79,.3); }