/* ==========================================================================
   BASE / RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;}
html,body{height:100%;}
body{
  font-family:var(--f-body);
  font-size:var(--fs-base);
  line-height:1.7;
  color:var(--c-slate);
  background:var(--c-bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4{
  font-family:var(--f-head);
  color:var(--c-primary);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-0.01em;
}
h1{font-size:var(--fs-3xl);font-weight:700;}
h2{font-size:var(--fs-2xl);}
h3{font-size:var(--fs-lg);}
h4{font-size:var(--fs-md);}
p{max-width:65ch;}
.container{width:var(--container);margin-inline:auto;}
.container-narrow{width:var(--container-narrow);margin-inline:auto;}
section{position:relative;}
::selection{background:var(--c-accent);color:var(--c-primary);}

/* Focus visibility (accessibility) */
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:4px;}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-60px;left:1rem;background:var(--c-primary);color:var(--c-white);
  padding:0.75rem 1.25rem;border-radius:var(--r-sm);z-index:999;transition:top var(--dur-fast);
}
.skip-link:focus{top:1rem;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}

/* ==========================================================================
   TYPE UTILITIES
   ========================================================================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:0.6em;
  font-family:var(--f-body);font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--c-accent-dim);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--c-accent);}
.eyebrow.on-dark{color:var(--c-accent-glow);}
.lede{font-size:var(--fs-md);color:var(--c-slate);max-width:56ch;}
.on-dark{color:var(--c-white);}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--c-white);}
.on-dark p{color:rgba(255,255,255,0.78);}
.text-gold{color:var(--c-accent);}
.font-voice{font-style:italic;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  --btn-fg:var(--c-white);
  display:inline-flex;align-items:center;justify-content:center;gap:0.6em;
  padding:1rem 1.9rem;border-radius:var(--r-pill);
  font-family:var(--f-head);font-weight:600;font-size:var(--fs-sm);letter-spacing:0.01em;
  white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;
  min-height:52px;transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.btn:active{transform:scale(0.97);}
.btn-gold{background:linear-gradient(135deg,var(--c-accent-glow),var(--c-accent) 55%,var(--c-accent-dim));color:var(--c-primary);box-shadow:var(--shadow-gold);}
.btn-gold:hover{box-shadow:0 14px 40px rgba(212,175,55,0.4);transform:translateY(-2px);}
.btn-outline{border:1.5px solid rgba(255,255,255,0.55);color:var(--c-white);background:rgba(255,255,255,0.06);backdrop-filter:blur(8px);}
.btn-outline:hover{background:rgba(255,255,255,0.16);border-color:var(--c-white);}
.btn-outline-dark{border:1.5px solid var(--c-line);color:var(--c-primary);}
.btn-outline-dark:hover{border-color:var(--c-primary);background:rgba(11,34,57,0.04);}
.btn-text{gap:0.5em;color:var(--c-secondary);font-weight:600;padding:0.4rem 0;min-height:auto;}
.btn-text .arrow{transition:transform var(--dur-fast) var(--ease-out);}
.btn-text:hover .arrow{transform:translateX(5px);}
.btn-block{width:100%;}
.btn-sm{padding:0.7rem 1.3rem;min-height:42px;font-size:var(--fs-xs);}

/* ==========================================================================
   GLASS SURFACES
   ========================================================================== */
.glass-dark{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
}
.glass-light{
  background:var(--glass-bg-light);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid rgba(11,34,57,0.06);
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  background:var(--c-white);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);border:1px solid var(--c-line);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}

/* Gradient-border utility */
.gradient-border{position:relative;border-radius:var(--r-md);}
.gradient-border::before{
  content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;
  background:linear-gradient(135deg,var(--c-accent),transparent 40%,var(--c-secondary));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* ==========================================================================
   SIGNATURE SEAL MOTIF
   ========================================================================== */
.seal{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;position:relative;flex-shrink:0;
}
.seal svg{width:100%;height:100%;}
.seal-sm{width:40px;height:40px;}

/* ==========================================================================
   SECTION SPACING
   ========================================================================== */
.section{padding-block:var(--sp-2xl);}
.section-tight{padding-block:var(--sp-xl);}
.section-head{max-width:640px;margin-bottom:var(--sp-xl);}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head .eyebrow{margin-bottom:var(--sp-sm);}
.section-head h2{margin-top:var(--sp-xs);}
.section-dark{background:var(--c-primary);}
.section-cream{background:var(--c-cream);}

.divider-gold{width:64px;height:3px;background:var(--c-accent);border-radius:2px;margin-block:var(--sp-sm);}

/* ==========================================================================
   RESPONSIVE GRID UTILITIES
   Applied to inline `display:grid;grid-template-columns:...` sections that
   were previously fixed-column and broke on mobile (content squeezed off
   screen). Inline styles still set the desktop column count/gap; these
   classes force sane column counts at narrower widths.
   ========================================================================== */
.g-multi,.g-split{min-width:0;}
.g-multi > *,.g-split > *{min-width:0;}
@media (max-width:900px){
  .g-multi{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:600px){
  .g-multi{grid-template-columns:minmax(0,1fr) !important;}
}
@media (max-width:820px){
  .g-split{grid-template-columns:minmax(0,1fr) !important;gap:1.5rem !important;}
}

/* ==========================================================================
   SR / SKIP already above. RESPONSIVE IMG
   ========================================================================== */
.ratio{position:relative;overflow:hidden;border-radius:var(--r-md);}
.ratio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ratio-4-5{aspect-ratio:4/5;}
.ratio-1-1{aspect-ratio:1/1;}
.ratio-16-9{aspect-ratio:16/9;}
.ratio-3-2{aspect-ratio:3/2;}