/* ═══════════════════════════════════════════════════════════════════════════════════════════
   DUKE MEDIA
   The crest decides the design: black marble, silver, a serif wordmark cut like a Didone. So the
   site is a heritage house, not a neon growth-hack page — which is also what separates it from
   every other agency in this industry, all of which look the same.
   Palette is the supplied tailoring swatch, used by its own pairing key: charcoal and navy are the
   evening depth, cream is the core neutral that carries every word, camel is the one accent that
   gets to be bright, oxblood appears rarely and means something when it does.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* evening depth */
  --ink:#14161a;
  --navy:#1b2a41;
  --charcoal:#2b2e33;
  /* core neutral */
  --cream:#efe7d8;
  --white:#ffffff;
  /* anchor + accent */
  --camel:#c19a5b;
  --camel-lift:#d3ae72;
  --brown:#6b4423;
  --olive:#4a5233;
  --oxblood:#6e1b23;
  --lightblue:#a8c0dc;

  --text:var(--cream);
  --text-dim:rgba(239,231,216,.66);
  --text-faint:rgba(239,231,216,.60);   /* .42 measured 3.4:1 — below AA. Do not lower it. */
  --rule:rgba(239,231,216,.14);
  --rule-strong:rgba(239,231,216,.28);

  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --measure:66ch;
  --gutter:clamp(20px,5vw,64px);
  --maxw:1180px;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:112px;
  --dur:240ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.65;font-weight:350;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--camel);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* The header is fixed, so an anchor jump would put the section's own heading behind it. */
section[id]{scroll-margin-top:108px}
.section{padding-block:clamp(64px,10vw,var(--s7))}
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--camel);margin-bottom:var(--s2);
}
.lede{font-size:clamp(17px,2vw,19px);color:var(--text-dim);max-width:var(--measure)}

/* ── the metal rule: a thin platinum gradient, the crest's material as a divider ──────────── */
.rule{
  height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,rgba(239,231,216,.34),transparent);
}
.rule--short{max-width:120px;background:linear-gradient(90deg,var(--camel),rgba(193,154,91,0))}

/* ═══ HEADER ══════════════════════════════════════════════════════════════════════════════ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.solid{background:rgba(20,22,26,.86);backdrop-filter:blur(14px);border-bottom-color:var(--rule)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:88px;gap:var(--s3)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{
  height:64px;width:auto;
  /* The file is genuinely transparent now (luminance-as-alpha), so no blend mode is needed and
     the mark sits correctly on any ground, including a light one. */
}
.nav{display:flex;align-items:center;gap:var(--s4)}
.nav a{
  text-decoration:none;font-size:14px;color:var(--text-dim);letter-spacing:.02em;
  transition:color var(--dur) var(--ease);
}
.nav a:hover{color:var(--cream)}
.navtoggle{display:none;background:none;border:0;padding:10px;cursor:pointer;color:var(--cream)}

/* ═══ BUTTONS ═════════════════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 26px;border-radius:2px;border:1px solid transparent;
  font-family:var(--font-body);font-size:14.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn--primary{background:var(--camel);color:#231a0c;border-color:var(--camel)}
.btn--primary:hover{background:#d3ae72;border-color:#d3ae72}
.btn--ghost{border-color:var(--rule-strong);color:var(--cream)}
.btn--ghost:hover{border-color:var(--cream);background:rgba(239,231,216,.06)}
.btn:active{transform:translateY(1px)}

/* ═══ HERO ════════════════════════════════════════════════════════════════════════════════ */
.hero{position:relative;padding-top:164px;padding-bottom:clamp(64px,9vw,110px);overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 460px at 50% -6%,rgba(193,154,91,.16),transparent 66%),
    radial-gradient(900px 620px at 84% 16%,rgba(27,42,65,.72),transparent 70%);
}
.hero .wrap{position:relative;z-index:1;text-align:center;display:grid;justify-items:center}
.hero__crest{width:clamp(240px,34vw,360px);margin-bottom:var(--s3);filter:drop-shadow(0 20px 52px rgba(0,0,0,.55))}
.hero h1{font-size:clamp(38px,6.6vw,74px);max-width:16ch}
.hero h1 em{font-style:italic;color:var(--camel)}
.hero .lede{margin-top:var(--s3);font-size:clamp(17px,2.1vw,20px);max-width:56ch}
.hero__cta{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;margin-top:var(--s5)}
.hero__platforms{
  display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;justify-content:center;
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);width:100%;
}
.pmark{
  font-family:var(--font-display);font-size:clamp(19px,2.4vw,25px);color:var(--cream);
  letter-spacing:.01em;line-height:1;
}
.pjoin{font-family:var(--font-display);font-size:19px;color:var(--camel);line-height:1}
.pnote{
  flex-basis:100%;text-align:center;margin-top:10px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);
}

/* The knight is the crest's own animal, pulled out as a section mark. Decorative only — it carries
   no information, so it is alt="" and hidden from screen readers. */
.knight{width:76px;height:auto;margin-bottom:var(--s3);opacity:.92}

/* ═══ STACKED — the differentiator gets its own architecture ══════════════════════════════ */
.stack{background:var(--navy);border-block:1px solid var(--rule)}
.stack__grid{display:grid;gap:var(--s5);grid-template-columns:1fr;align-items:start}
.stack__cards{display:grid;gap:var(--s2);grid-template-columns:1fr}
.plat--sum{grid-column:1/-1}
.plat{
  border:1px solid var(--rule);border-radius:3px;padding:var(--s3);
  background:rgba(239,231,216,.03);
}
.plat h3{font-size:19px;margin-bottom:6px}
.plat p{font-size:15px;color:var(--text-dim)}
.plat__tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--camel);margin-bottom:10px;
}
.plat--sum{background:rgba(193,154,91,.09);border-color:rgba(193,154,91,.4)}
.plat--sum .plat__tag{color:var(--camel)}

/* ═══ SERVICES ════════════════════════════════════════════════════════════════════════════ */
.svc{display:grid;gap:1px;grid-template-columns:1fr;background:var(--rule);margin-top:var(--s5);border:1px solid var(--rule)}
.svc__item{background:var(--ink);padding:var(--s4) var(--s3)}
.svc__item h3{font-size:20px;margin-bottom:10px}
.svc__item p{font-size:15px;color:var(--text-dim)}
.svc__ico{color:var(--camel);margin-bottom:var(--s2)}
.svc__ico svg{width:26px;height:26px;stroke-width:1.4}

/* ═══ PROCESS ═════════════════════════════════════════════════════════════════════════════ */
.steps{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-top:var(--s5);counter-reset:step}
.step{padding-top:var(--s3);border-top:1px solid var(--rule-strong);position:relative}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-display);font-size:13px;letter-spacing:.1em;color:var(--camel);
  display:block;margin-bottom:12px;
}
.step h3{font-size:21px;margin-bottom:8px}
.step p{font-size:15px;color:var(--text-dim)}

/* ═══ COMPARISON ══════════════════════════════════════════════════════════════════════════ */
.cmp{width:100%;border-collapse:collapse;margin-top:var(--s5);font-size:15px}
.cmp th,.cmp td{padding:15px var(--s2);text-align:left;border-bottom:1px solid var(--rule)}
.cmp thead th{
  font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint);border-bottom-color:var(--rule-strong);
}
.cmp thead th:nth-child(2){color:var(--camel)}
.cmp td:first-child{color:var(--text-dim)}
.cmp td:nth-child(2){color:var(--cream);font-weight:500}
.cmp td:nth-child(3){color:var(--text-faint)}
.cmp .yes{color:var(--camel)}
.cmp__scroll{overflow-x:auto}

/* ═══ STATS + TESTIMONIALS (self-removing when empty) ═════════════════════════════════════ */
.stats{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:var(--s5)}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(34px,5vw,50px);color:var(--cream);line-height:1}
.stat span{display:block;margin-top:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.quotes{display:grid;gap:var(--s3);grid-template-columns:1fr;margin-top:var(--s5)}
.quote{border-left:2px solid var(--camel);padding-left:var(--s3)}
.quote p{font-family:var(--font-display);font-size:19px;font-style:italic;line-height:1.45}
.quote cite{display:block;margin-top:12px;font-style:normal;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}

/* ═══ FAQ ═════════════════════════════════════════════════════════════════════════════════ */
.faq{margin-top:var(--s5);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s3) 40px var(--s3) 0;position:relative;
  font-family:var(--font-display);font-size:19px;color:var(--cream);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--camel);border-bottom:1.5px solid var(--camel);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur) var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .ans{padding:0 0 var(--s3);color:var(--text-dim);font-size:15.5px;max-width:var(--measure)}

/* ═══ APPLY ═══════════════════════════════════════════════════════════════════════════════ */
.apply{background:var(--navy);border-top:1px solid var(--rule)}
.apply .wrap{text-align:center;display:grid;justify-items:center}
.apply h2{font-size:clamp(30px,5vw,50px);max-width:18ch}
.apply__cta{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;margin-top:var(--s4)}
.apply__note{margin-top:var(--s3);font-size:13.5px;color:var(--text-faint);max-width:50ch}

/* ═══ FOOTER ══════════════════════════════════════════════════════════════════════════════ */
.ftr{padding-block:var(--s5) var(--s4);font-size:13.5px;color:var(--text-faint)}
.ftr__top{display:flex;gap:var(--s4);justify-content:space-between;flex-wrap:wrap;align-items:flex-start}
.ftr__mark{height:120px;width:auto;opacity:.92}
.ftr a{text-decoration:none;color:var(--text-dim)}
.ftr a:hover{color:var(--cream)}
.ftr__links{display:flex;gap:var(--s3);flex-wrap:wrap}
.ftr__legal{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}

/* ═══ REVEAL — one idea, used once per section, from a VISIBLE resting state ══════════════ */
.rv{opacity:0;transform:translateY(16px);transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.rv.in{opacity:1;transform:none}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:700px){
  .stack__cards{grid-template-columns:1fr 1fr}
  .svc{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .quotes{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .stack__grid{grid-template-columns:.8fr 1.2fr;gap:var(--s6)}
  .stack__cards{grid-template-columns:repeat(3,1fr)}
  .svc{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .nav{
    position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(20,22,26,.98);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--rule);padding:var(--s2) var(--gutter) var(--s3);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  }
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px}
  .nav .btn{margin-top:var(--s2)}
  .navtoggle{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}