/* ============================================================
   PEIGO · Brand Site Stylesheet
   Aligned with Official Brand Guidelines · 2025
   ============================================================
   Primary  Pantone 4008 C  Orange  #FFB757
            Pantone 101 C   Yellow  #FDED61
            Pantone 2250 C  Green   #00BB74
            Cool Gray 10 C  Gray    #727171
   Auxiliary Pantone Y0131 C  Cream  #FFF9E6
            Pantone 7478 C  Mint    #C8EDDA
            Pantone 2915 C  SkyBlue #63B7FC
            Pantone 2145 C  Royal   #0053CC

   Web Type:  English  → Rubik / Arial
              Chinese  → Noto Sans TC (思源黑體)
   ============================================================ */

:root{
  /* === Brand Primary === */
  --orange:        #FFB757;   /* Pantone 4008 C  PRIMARY */
  --orange-rich:   #F09F35;   /* deeper accent */
  --orange-deep:   #D8842F;   /* darkest accent */
  --orange-soft:   #FFD79C;   /* tint */
  --yellow:        #FDED61;   /* Pantone 101 C */
  --yellow-soft:   #FEF4A6;
  --green:         #00BB74;   /* Pantone 2250 C */
  --green-deep:    #008F58;
  --green-soft:    #66D4A6;
  --mint:          #C8EDDA;   /* Pantone 7478 C */
  --mint-soft:     #E2F4EA;

  /* === Auxiliary === */
  --sky:           #63B7FC;
  --royal:         #0053CC;

  /* === Neutrals（warm-aligned with brand cup tones） === */
  --cream:         #FFF9E6;   /* Pantone Y0131 C — main background */
  --cream-light:   #FFFCF2;
  --paper:         #FFFFFF;
  --gray-cool:     #6E5F4F;   /* warm 卡其灰 */
  --gray-warm:     #4F3F2F;   /* 暖深褐 */
  --gray-soft:     #A89980;
  --gray-pale:     #EFE6D2;
  --line:          #F0E8C8;
  --line-soft:     #F7F0D8;
  --ink:           #2A1F12;   /* 暖咖啡黑（更貼近 PEIGO LOGO 杯身陰影） */
  --charcoal-soft: #5A4736;   /* warm soft brown for body text */
  --charcoal-muted:#8B7867;

  /* === Re-mapped legacy tokens (so existing markup keeps working) === */
  --bone:          #FFF9E6;
  --bone-light:    #FFFCF2;
  --bone-warm:     #FEF4D5;
  --sage:          #FFB757;
  --sage-deep:     #00BB74;
  --sage-darker:   #008F58;
  --sage-soft:     #C8EDDA;
  --sage-mist:     #E2F4EA;
  --rose-gold:     #F09F35;
  --rose-gold-soft:#FFD79C;
  --charcoal:      #2A1F12;

  /* === Typography (per brand guideline · web set) === */
  --display: 'Rubik', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', Arial, sans-serif;
  --sans:    'Rubik', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', Arial, sans-serif;
  --han:     'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --mono:    'JetBrains Mono', 'Courier New', monospace;

  /* legacy alias — anywhere old code says "serif" we now use Rubik */
  --serif:   'Rubik', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', Arial, sans-serif;
}

/* ============== reset & base ============== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  line-height:1.7;
  font-weight:400;
  letter-spacing:0.2px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* === 標題層級（沿用 PEIGO 品牌色） === */
h1,h2,h3,h4,h5,h6{
  font-family:var(--display);font-weight:800;
  color:var(--ink);letter-spacing:0.5px;line-height:1.3;
}

/* === 行內強調 === */
em{font-style:normal;color:var(--orange-rich);font-weight:700}
em.accent{color:var(--orange-rich);font-weight:700}
em.gold{color:var(--green-deep);font-weight:700}
strong{color:var(--green-deep);font-weight:700}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .25s, opacity .25s}
button{font:inherit;cursor:pointer;border:none;background:none}

/* === selection 選取色（小細節呼應品牌） === */
::selection{background:var(--orange);color:var(--ink)}
::-moz-selection{background:var(--orange);color:var(--ink)}

::selection{background:var(--orange);color:var(--ink)}

/* ============== type system ============== */
.serif{font-family:var(--display);font-weight:500}
.italic{font-style:italic}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
/* === Eyebrow / Section Label (designed, brandbook style) === */
.eyebrow{
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:4px;
  text-transform:uppercase;color:var(--orange-rich);white-space:nowrap;
}
.eyebrow.muted{color:var(--gray-cool)}
.eyebrow.green{color:var(--green)}

.h-display{
  font-family:var(--display);font-weight:800;letter-spacing:-1px;line-height:0.95;
  font-size:clamp(56px,9vw,140px);color:var(--ink);
}
.h-section{
  font-family:var(--display);font-weight:700;letter-spacing:-0.6px;line-height:1.05;
  font-size:clamp(40px,5.5vw,80px);color:var(--ink);
}
.h-card{
  font-family:var(--display);font-weight:600;letter-spacing:-0.2px;line-height:1.2;
  font-size:clamp(22px,2.4vw,30px);color:var(--ink);
}
.lead{
  font-family:var(--sans);font-weight:400;font-size:clamp(17px,1.5vw,20px);
  line-height:1.7;color:var(--gray-warm);
}
em.accent{font-style:normal;color:var(--orange-rich);font-weight:700}
em.gold{font-style:normal;color:var(--green);font-weight:700}

/* ============== logo (official PNG, transparent bg) ============== */
.peigo-cup-img{
  height:38px;width:auto;display:block;
  user-select:none;-webkit-user-drag:none;
}
.nav.scrolled .peigo-cup-img{height:32px}
.peigo-logo-img{
  height:96px;width:auto;display:block;
  user-select:none;-webkit-user-drag:none;
}
/* === 全幅 nav logo（cup + PEIGO + Let's PEIGO 一體圖） === */
.peigo-nav-logo{
  height:108px;width:auto;display:block;
  user-select:none;-webkit-user-drag:none;
  transition:height .25s ease;
}
.nav.scrolled .peigo-nav-logo{height:84px}
/* legacy SVG class — kept in case future inline SVG is reintroduced */
.peigo-cup{display:block}
.peigo-cup-sm{width:36px;height:36px}
.peigo-cup-md{width:56px;height:56px}
.peigo-cup-lg{width:120px;height:120px}

/* ============== nav ============== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 48px;
  background:rgba(255,249,230,0.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, padding .3s;
}
.nav.scrolled{
  border-bottom-color:var(--line);
  background:rgba(255,249,230,0.98);
  padding:12px 48px;
}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo .name{
  font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:1px;color:var(--green-deep);
}
.nav-logo .name em{font-style:normal;color:var(--orange-rich);font-weight:800}

.nav-links{display:flex;gap:42px}
.nav-links a{
  font-size:18px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;
  color:var(--gray-warm);position:relative;padding:8px 0;
  font-family:var(--display);
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;width:0;
  background:var(--orange);transition:width .3s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--orange-rich)}

.nav-cta{
  font-family:var(--display);font-size:18px;letter-spacing:3px;text-transform:uppercase;
  font-weight:800;color:var(--paper);padding:16px 32px;
  background:var(--green);border:1.5px solid var(--green);border-radius:999px;
  transition:background .25s, transform .25s, box-shadow .25s;
}
.nav-cta:hover{background:var(--green-deep);border-color:var(--green-deep);transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,187,116,0.25)}

/* ============== buttons ============== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  padding:18px 28px;border-radius:999px;cursor:pointer;
  transition:transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn-dark{background:var(--ink);color:var(--cream-light);border:1px solid var(--ink)}
.btn-dark:hover{background:var(--green-deep);border-color:var(--green-deep);transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,143,88,0.25)}
.btn-sage,.btn-orange{background:var(--orange);color:var(--ink);border:1px solid var(--orange)}
.btn-sage:hover,.btn-orange:hover{background:var(--orange-rich);border-color:var(--orange-rich);transform:translateY(-1px);box-shadow:0 10px 22px rgba(240,159,53,0.3)}
.btn-green{background:var(--green);color:var(--paper);border:1px solid var(--green)}
.btn-green:hover{background:var(--green-deep);border-color:var(--green-deep);transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,187,116,0.3)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-ghost-light{background:transparent;color:var(--cream);border:1.5px solid var(--cream)}
.btn-ghost-light:hover{background:var(--cream);color:var(--ink)}

/* ============== layout ============== */
.container{max-width:1320px;margin:0 auto;padding:0 48px}
.container-narrow{max-width:920px;margin:0 auto;padding:0 48px}
section{padding:120px 0;position:relative}
.section-pad-lg{padding:160px 0}
.section-pad-sm{padding:80px 0}

.bg-bone{background:var(--cream)}
.bg-bone-light{background:var(--cream-light)}
.bg-bone-warm{background:var(--paper)}
.bg-paper{background:var(--paper)}
.bg-sage-mist{background:var(--mint-soft)}
.bg-charcoal{background:var(--ink);color:var(--cream-light)}
.bg-charcoal .lead,.bg-charcoal p{color:rgba(255,249,230,0.78)}
.bg-charcoal .h-section,.bg-charcoal .h-display,.bg-charcoal .h-card{color:var(--cream-light)}
.bg-charcoal .eyebrow{color:var(--orange)}
.bg-sage-deep{background:var(--green-deep);color:var(--cream-light)}
.bg-sage-deep .lead,.bg-sage-deep p{color:rgba(255,249,230,0.85)}
.bg-sage-deep .h-section,.bg-sage-deep .h-display,.bg-sage-deep .h-card{color:var(--cream-light)}
.bg-sage-deep .eyebrow{color:var(--yellow)}
.bg-orange{background:var(--orange);color:var(--ink)}
.bg-orange .h-section,.bg-orange .h-display,.bg-orange .h-card{color:var(--ink)}
.bg-orange .eyebrow{color:var(--green-deep)}

/* ============== editorial header strip ============== */
.editorial-strip{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gray-cool);font-weight:600;
}
.editorial-strip span{display:inline-flex;align-items:center;gap:10px}
.editorial-strip .dot{width:5px;height:5px;border-radius:50%;background:var(--orange)}

/* ============== photo placeholder system ============== */
/*
  Editorial-style placeholder. Replace the entire <div class="photo-frame">…</div>
  with <img src="…"> when real photography is available.
*/
.photo{position:relative;display:block}
.photo-frame{
  position:relative;width:100%;aspect-ratio:4/5;
  background:var(--mint-soft);
  overflow:hidden;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  isolation:isolate;
}
.photo-frame::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 25%,rgba(0,0,0,0.04) 1px,transparent 1.5px),
    radial-gradient(circle at 70% 60%,rgba(0,0,0,0.04) 1px,transparent 1.5px),
    radial-gradient(circle at 40% 80%,rgba(0,0,0,0.03) 1px,transparent 1.5px);
  background-size:80px 80px,120px 120px,160px 160px;
  opacity:0.6;
}
.photo-frame::after{
  content:attr(data-label);
  position:relative;z-index:2;
  font-family:var(--display);font-weight:500;
  font-size:16px;color:var(--green-deep);letter-spacing:0.3px;
  text-align:center;padding:20px;line-height:1.4;
  opacity:0.7;
}
.photo-frame .placeholder-meta{
  position:absolute;top:18px;left:18px;z-index:3;
  font-family:var(--sans);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--green-deep);font-weight:700;opacity:0.75;
}
.photo-frame .placeholder-num{
  position:absolute;bottom:18px;right:18px;z-index:3;
  font-family:var(--display);font-style:normal;font-weight:700;font-size:16px;color:var(--green-deep);opacity:0.55;letter-spacing:1px;
}

.photo-frame.tall{aspect-ratio:3/4}
.photo-frame.taller{aspect-ratio:2/3}
.photo-frame.square{aspect-ratio:1/1}
.photo-frame.wide{aspect-ratio:4/3}
.photo-frame.cinema{aspect-ratio:16/9}
.photo-frame.banner{aspect-ratio:21/9}
.photo-frame.portrait{aspect-ratio:5/7}

/* photo color tones — mapped to brand palette */
.photo-frame[data-tone="bone"]{background:linear-gradient(135deg,var(--cream),var(--cream-light))}
.photo-frame[data-tone="cream"]{background:linear-gradient(135deg,var(--cream),var(--yellow-soft))}
.photo-frame[data-tone="sage"]{background:linear-gradient(135deg,var(--mint),var(--mint-soft))}
.photo-frame[data-tone="sage-deep"]{background:linear-gradient(135deg,var(--green-soft),var(--green));color:var(--cream)}
.photo-frame[data-tone="sage-deep"]::after{color:var(--cream-light);opacity:0.85}
.photo-frame[data-tone="sage-deep"] .placeholder-meta,.photo-frame[data-tone="sage-deep"] .placeholder-num{color:var(--cream-light)}
.photo-frame[data-tone="charcoal"]{background:linear-gradient(135deg,#3a3835,var(--ink));color:var(--cream-light)}
.photo-frame[data-tone="charcoal"]::after{color:var(--cream-light);opacity:0.6}
.photo-frame[data-tone="charcoal"] .placeholder-meta{color:var(--orange)}
.photo-frame[data-tone="charcoal"] .placeholder-num{color:var(--orange);opacity:0.65}
.photo-frame[data-tone="berry"]{background:linear-gradient(135deg,var(--orange-soft),var(--orange))}
.photo-frame[data-tone="mango"]{background:linear-gradient(135deg,var(--yellow-soft),var(--orange))}
.photo-frame[data-tone="green"]{background:linear-gradient(135deg,var(--mint),var(--green-soft))}
.photo-frame[data-tone="purple"]{background:linear-gradient(135deg,#FFE3B0,var(--orange-rich))}
.photo-frame[data-tone="rose"]{background:linear-gradient(135deg,var(--yellow),var(--orange))}

.photo figcaption{
  margin-top:14px;font-family:var(--sans);font-size:13.5px;
  color:var(--gray-cool);letter-spacing:0.3px;line-height:1.5;
}
.photo figcaption .num{
  font-family:var(--sans);font-size:10px;
  letter-spacing:2px;text-transform:uppercase;color:var(--orange-rich);
  margin-right:10px;font-weight:700;
}

/* ============== editorial blocks ============== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.split.golden{grid-template-columns:1.4fr 1fr}
.split.golden-r{grid-template-columns:1fr 1.4fr}
.split.thirds{grid-template-columns:1fr 2fr}
.split.thirds-r{grid-template-columns:2fr 1fr}
.split-narrow{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.split-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.split-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.split-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}

/* === Eyebrow bar — short orange tick + long fading line (matches Peigo brandbook section heads) === */
.eyebrow-bar{
  display:flex;align-items:center;gap:20px;margin-bottom:40px;
}
.eyebrow-bar::before{
  content:'';width:54px;height:3px;background:var(--orange);border-radius:2px;flex:none;
}
.eyebrow-bar::after{
  content:'';flex:1;height:1px;background:var(--orange);opacity:0.28;max-width:580px;
}
.bg-charcoal .eyebrow-bar::before,
.bg-sage-deep .eyebrow-bar::before{background:var(--orange)}
.bg-charcoal .eyebrow-bar::after,
.bg-sage-deep .eyebrow-bar::after{background:var(--orange);opacity:0.45}

/* === Section title pairing — pulls eye after the eyebrow === */
.h-section{position:relative}
.h-section + .lead,
.h-section + .deck,
.h-section + p{margin-top:24px}

hr.rule{border:none;border-top:1px solid var(--line);margin:80px 0}
hr.rule.short{max-width:80px;margin:30px 0;border-top:2px solid var(--orange)}

.drop-cap::first-letter{
  font-family:var(--display);font-weight:800;font-size:5em;
  float:left;line-height:0.85;padding:8px 14px 0 0;color:var(--orange-rich);
}

/* page header (editorial) */
.page-head{
  padding:160px 0 100px;border-bottom:1px solid var(--line);background:var(--cream-light);
}
.page-head .issue{
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;
  margin-bottom:60px;
  font-family:var(--sans);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gray-cool);font-weight:600;
}
.page-head .issue .pg{font-family:var(--display);font-weight:500;font-style:normal;font-size:17px;color:var(--orange-rich);text-transform:none;letter-spacing:0}
.page-head h1{
  font-family:var(--display);font-weight:800;letter-spacing:-2px;line-height:0.95;
  font-size:clamp(64px,10vw,160px);color:var(--ink);
}
.page-head h1 em{font-style:normal;color:var(--green);font-weight:800}
.page-head .deck{
  margin-top:40px;font-family:var(--sans);font-weight:500;font-size:clamp(20px,2vw,28px);
  line-height:1.5;color:var(--gray-warm);max-width:780px;
}

/* ============== footer ============== */
footer{
  background:var(--ink);color:var(--cream-light);padding:100px 0 36px;
  font-size:14px;
}
footer .container{padding:0 48px}
.foot-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:60px;
  padding-bottom:60px;border-bottom:1px solid rgba(255,249,230,0.1);
}
.foot-brand .nav-logo{display:inline-block}
.foot-tag{
  margin-top:24px;font-family:var(--display);font-weight:700;font-size:24px;
  color:var(--orange);line-height:1.2;letter-spacing:-0.3px;
}
.foot-desc{margin-top:18px;color:rgba(255,249,230,0.65);max-width:380px;line-height:1.7;font-size:13px}
.foot-desc-line{white-space:nowrap}
@media (max-width:560px){.foot-desc-line{white-space:normal}}

.foot-col h6{
  font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--cream-light);margin-bottom:22px;
}
.foot-col ul{list-style:none;display:grid;gap:12px}
.foot-col a{font-size:13.5px;color:rgba(255,249,230,0.65)}
.foot-col a:hover{color:var(--orange)}

.foot-bottom{
  padding-top:32px;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;font-family:var(--sans);font-size:11px;letter-spacing:1.5px;
  color:rgba(255,249,230,0.5);text-transform:uppercase;font-weight:500;
}
.foot-social{display:flex;gap:14px;align-items:center}
.foot-social a{
  width:44px;height:44px;border-radius:50%;
  background:var(--orange);
  border:1.5px solid var(--orange);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(240,159,53,0.25);
}
.foot-social a svg{display:block;width:22px;height:22px}
.foot-social a:hover{
  background:#fff;color:var(--orange);border-color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(255,255,255,0.2);
}

/* ============== shared components ============== */

/* number stat */
.stat{display:flex;flex-direction:column;gap:8px}
.stat .num{
  font-family:var(--display);font-weight:700;font-size:clamp(48px,5vw,80px);
  line-height:1;letter-spacing:-1.5px;color:var(--ink);
}
.bg-charcoal .stat .num,.bg-sage-deep .stat .num{color:var(--cream-light)}
.stat .num small{
  font-size:0.4em;font-weight:700;color:var(--orange-rich);font-style:normal;letter-spacing:0;
}
.bg-charcoal .stat .num small,.bg-sage-deep .stat .num small{color:var(--yellow)}
.stat .lbl{
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gray-cool);font-weight:600;
  border-top:1px solid var(--line);padding-top:10px;
}
.bg-charcoal .stat .lbl,.bg-sage-deep .stat .lbl{
  color:rgba(255,249,230,0.6);border-top-color:rgba(255,249,230,0.18);
}

/* feature card */
.feat-card{
  padding:36px 32px;background:var(--cream-light);border:1px solid var(--line);border-radius:8px;
  display:flex;flex-direction:column;gap:20px;
  transition:background .3s,border-color .3s,transform .3s,box-shadow .3s;
}
.feat-card:hover{background:var(--paper);border-color:var(--orange);transform:translateY(-4px);box-shadow:0 14px 30px rgba(240,159,53,0.1)}
.feat-card .num{
  font-family:var(--display);font-style:normal;font-weight:700;font-size:13px;color:var(--orange-rich);
  letter-spacing:1px;text-transform:uppercase;
}
.feat-card h4{
  font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);line-height:1.25;
}
.feat-card p{font-size:14px;color:var(--gray-warm);line-height:1.7}

/* tag pill */
.tag{
  display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-warm);
  background:var(--cream-light);font-weight:600;
}
.tag.sage{background:var(--mint-soft);border-color:var(--mint);color:var(--green-deep)}
.tag.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.tag.orange{background:var(--orange);color:var(--ink);border-color:var(--orange)}

/* simple link */
.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  color:var(--ink);border-bottom:2px solid var(--orange);padding-bottom:4px;
}
.link-arrow:hover{color:var(--orange-rich);border-bottom-color:var(--orange-rich)}
.bg-charcoal .link-arrow,.bg-sage-deep .link-arrow{color:var(--cream);border-bottom-color:var(--orange)}
.bg-charcoal .link-arrow:hover,.bg-sage-deep .link-arrow:hover{color:var(--orange);border-bottom-color:var(--orange)}

/* quote */
.quote{
  font-family:var(--display);font-weight:600;
  font-size:clamp(28px,3.5vw,46px);line-height:1.4;color:var(--ink);
  letter-spacing:-0.5px;max-width:920px;
}
.quote::before{
  content:'\201C';display:block;font-size:120px;line-height:0.5;color:var(--orange);
  margin-bottom:30px;font-weight:700;
}
.quote-attr{
  margin-top:30px;font-family:var(--sans);font-size:11px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--gray-cool);font-weight:600;
}

/* marquee */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;background:var(--cream-light)}
.marquee-track{
  display:flex;gap:60px;white-space:nowrap;animation:marquee 50s linear infinite;
  font-family:var(--display);font-weight:600;font-size:24px;color:var(--ink);
}
.marquee-track span{display:inline-flex;align-items:center;gap:60px}
.marquee-track .sep{font-style:normal;color:var(--orange);font-size:14px;font-weight:400}
.bg-charcoal .marquee,.bg-sage-deep .marquee{border-color:rgba(255,249,230,0.18);background:transparent}
.bg-charcoal .marquee-track,.bg-sage-deep .marquee-track{color:var(--cream-light)}
.bg-charcoal .marquee-track .sep,.bg-sage-deep .marquee-track .sep{color:var(--orange)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============== responsive ============== */
@media (max-width:1024px){
  .container{padding:0 32px}
  .nav{padding:14px 32px}
  .nav.scrolled{padding:10px 32px}
  footer .container{padding:0 32px}
  .split,.split.golden,.split.golden-r,.split.thirds,.split.thirds-r{grid-template-columns:1fr;gap:50px}
  .split-3,.split-4{grid-template-columns:repeat(2,1fr)}
  .split-5{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr;gap:40px}
  section{padding:90px 0}
  .page-head{padding:130px 0 70px}
}
@media (max-width:640px){
  .container{padding:0 22px}
  .nav{padding:12px 22px}
  .nav-links{display:none}
  footer .container{padding:0 22px}
  .split-3,.split-4,.split-5{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:36px}
  section{padding:70px 0}
  .page-head{padding:110px 0 60px}
  .editorial-strip{flex-wrap:wrap;gap:8px;font-size:10px}
}