/* dnbestup-clone — Base reset + typography */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  font-family:var(--f-sans);
  font-size:var(--t-body);
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--warm-gold);color:var(--deep-ocean-2)}

.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--t-eyebrow);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--warm-gold-deep);
  font-weight:500;
}
.serif{font-family:var(--f-serif);font-weight:500;letter-spacing:-.01em}
.italic{font-family:var(--f-italic);font-style:italic;font-weight:400}

.h1{font-family:var(--f-sans);font-size:var(--t-h1);font-weight:800;line-height:1.02;letter-spacing:-.025em}
.h2{font-size:var(--t-h2);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.h3{font-size:var(--t-h3);font-weight:700;line-height:1.15;letter-spacing:-.015em}
.h4{font-size:var(--t-h4);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.h5{font-size:var(--t-h5);font-weight:600;line-height:1.3}

.lead{font-size:clamp(16px,1.2vw,19px);line-height:1.55;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.tabular{font-variant-numeric:tabular-nums}

/* Reusable button */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 22px;
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:15px;
  letter-spacing:-.005em;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s var(--ease-out);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--deep-ocean);color:var(--cream);box-shadow:var(--sh-2)}
.btn-primary:hover{background:var(--deep-ocean-2);box-shadow:var(--sh-3)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 10px 24px -8px rgba(255,107,91,.6)}
.btn-coral:hover{background:#ee5848}
.btn-gold{background:var(--warm-gold);color:var(--deep-ocean-2);box-shadow:var(--sh-warm)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-warm);border-color:var(--warm-gold)}

/* Section frame */
.section{padding-block:clamp(60px,8vw,120px);position:relative}
.section-eyebrow{
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
}
.section-eyebrow::before{
  content:"";width:36px;height:1px;background:var(--warm-gold);
}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(32px,4vw,56px);
}
.section-title{flex:1 1 auto;min-width:0}
.section-title h2{font-size:var(--t-h2);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.section-title h2 em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--coral);
}

/* Anti-template helpers */
.tilt-l{transform:rotate(-1.5deg)}
.tilt-r{transform:rotate(1.5deg)}
.outline-text{
  -webkit-text-stroke:1.5px var(--deep-ocean);
  color:transparent;
}
.bg-grain{
  background-image:
    radial-gradient(rgba(199,145,60,.05) 1px,transparent 1px),
    radial-gradient(rgba(27,58,87,.04) 1px,transparent 1px);
  background-size:14px 14px,22px 22px;
  background-position:0 0,7px 11px;
}
.bg-gold-haze{
  background:
    radial-gradient(900px 480px at 80% -10%,rgba(232,181,96,.22),transparent 60%),
    radial-gradient(700px 400px at -10% 110%,rgba(255,107,91,.10),transparent 60%),
    var(--bg);
}

/* Marquee/ticker base */
.ticker{
  display:flex;gap:48px;width:max-content;
  animation:tickerScroll 36s linear infinite;
}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* A11y */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--warm-gold);outline-offset:3px;border-radius:4px}