@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ===== Design Tokens ===== */
:root {
  --ink:            #071a36;
  --black:          #070707;
  --paper:          #fffdfa;
  --red:            #f20d0d;
  --gold:           #c8a34a;
  --gold-light:     #e9d59d;
  --warm:           #f3eee3;
  --muted:          #536174;
  --line:           rgba(7, 26, 54, .17);
  --violet:         #7c3aed;
  --navy:           #071a36;
  --bg-soft:        #f3eee3;
  --shadow:         0 20px 60px rgba(7, 26, 54, .1);
}

/* ===== Base / Reset ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== Layout ===== */
.shell{max-width:1240px;margin:auto;padding:0 28px}

/* ===== Notice Bar ===== */
.notice{
  background:var(--black);
  color:#fff;
  font-size:12px;
  letter-spacing:.05em;
}
.notice .shell{
  padding-block:11px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.notice b{color:var(--gold-light)}

/* ===== Header / Navigation ===== */
nav{
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border-bottom:1px solid var(--line);
  flex-wrap:nowrap;
}
.brand{
  display:flex;
  align-items:center;
  font:700 21px/1 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing:-.06em;
}
.brand-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:var(--gold-light);
  border-radius:50%;
  margin-right:10px;
}
.links{
  display:flex;
  flex-wrap:nowrap;
  gap:23px;
  font:600 13px 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing:.02em;
  overflow-x:auto;
  padding-bottom:4px;
}
.links a{
  padding:4px 0;
  position:relative;
  transition:color .25s ease;
  white-space:nowrap;
}
.links a:hover,
.links .active{
  color:var(--red);
}
.links .active{
  font-weight:700;
}
.links .active::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:2px;
  background:var(--red);
  border-radius:2px;
}
.links::-webkit-scrollbar{
  height:4px;
}
.links::-webkit-scrollbar-track{
  background:transparent;
}
.links::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:2px;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:45px;
  padding:0 19px;
  background:var(--ink);
  border:1px solid var(--ink);
  color:#fff;
  font:600 14px 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing:.02em;
  transition:.2s;
  border-radius:8px;
}
.btn:hover{
  background:var(--red);
  border-color:var(--red);
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(242, 13, 13, .25);
}
.btn.outline{
  background:transparent;
  color:var(--ink);
}
.btn.outline:hover{
  background:var(--gold-light);
  border-color:var(--gold-light);
  color:var(--ink);
}

/* ===== Hero Section ===== */
.hero{
  padding:88px 0;
  background:var(--ink);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero:after{
  content:'';
  position:absolute;
  width:510px;
  height:510px;
  background:var(--red);
  border-radius:50%;
  right:-120px;
  top:-250px;
  opacity:.93;
}
.hero .shell{position:relative;z-index:1}
.eyebrow,
.kicker{
  font:700 11px 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gold-light);
}
/* Colour modifiers for .eyebrow / .kicker, replacing inline style declarations. */
.kicker--violet,
.eyebrow--violet{
  color:var(--violet);
}
.kicker--red,
.eyebrow--red{
  color:var(--red);
}
.kicker--gold,
.eyebrow--gold{
  color:var(--gold-light);
}
.kicker--muted,
.eyebrow--muted{
  color:var(--muted);
}
h1{
  max-width:860px;
  margin:18px 0 23px;
  font:700 clamp(42px, 6vw, 76px)/1.02 'Playfair Display', Georgia, serif;
  letter-spacing:-.06em;
}
h1 em{color:var(--gold-light)}
.hero p{
  max-width:590px;
  margin:0 0 30px;
  color:#edf0f6;
  font-size:18px;
  line-height:1.6;
}
.hero .btn{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
  margin-right:8px;
}
.hero .btn:hover{
  background:#bd0000;
  border-color:#bd0000;
}
.hero .btn.outline{
  background:transparent;
  color:#fff;
  border-color:#fff;
}
.hero .btn.outline:hover{
  color:var(--ink);
  background:var(--gold-light);
  border-color:var(--gold-light);
}

/* ===== Sections ===== */
section{padding:96px 0}
.top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:42px;
}
.top h2{
  max-width:690px;
  margin:10px 0 0;
  font:700 clamp(32px, 5vw, 52px)/.98 'Playfair Display', Georgia, serif;
  letter-spacing:-.055em;
}
.top p{
  max-width:370px;
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:16px;
}

/* ===== Cards ===== */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-left:1px solid var(--line);
}
.card{
  min-height:280px;
  padding:25px;
  border:1px solid var(--line);
  border-left:0;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:background .25s ease, transform .2s ease;
}
.card:hover{
  background:var(--ink);
  color:#fff;
  transform:translateY(-4px);
}
.card small{
  font:700 12px 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--red);
}
.card h3{
  margin:42px 0 12px;
  font:600 27px/1 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing:-.06em;
}
.card p{
  margin:0;
  opacity:.76;
  font-size:14px;
  line-height:1.55;
}
.card a{
  margin-top:auto;
  padding-top:22px;
  font:700 12px 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ===== Two-column Split ===== */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.art{
  min-height:420px;
  background:linear-gradient(140deg, #90050a, #f20d0d 57%, #efc971);
  position:relative;
  overflow:hidden;
}
.art:after{
  content:'JS';
  position:absolute;
  bottom:-35px;
  left:30px;
  color:var(--gold-light);
  font:700 260px/.7 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing:-.17em;
  opacity:.08;
}
.copy{
  padding:64px;
  background:var(--warm);
}
.copy h2{
  margin:10px 0 20px;
  font:700 clamp(32px, 5vw, 52px)/.96 'Playfair Display', Georgia, serif;
  letter-spacing:-.06em;
}
.copy p{
  max-width:460px;
  line-height:1.65;
  color:var(--muted);
  font-size:16px;
}

/* ===== Facts Grid ===== */
.facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--ink);
}
.fact{
  padding:26px;
  background:var(--paper);
}
.fact b{
  display:block;
  margin-bottom:9px;
  font:600 24px 'Playfair Display', Georgia, serif;
}
.fact span{
  font:700 11px 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

/* ===== Lists ===== */
.panel{background:var(--warm)}
.list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
}
.list article{
  padding:30px;
  background:var(--paper);
  position:relative;
  overflow:hidden;
  color:#fff;
}
.list h3{
  margin:0 0 10px;
  font:600 24px 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing:-.05em;
}
.list p{
  margin:0;
  color:rgba(255,255,255,.76);
  line-height:1.6;
  font-size:14px;
}

/* ===== Quote ===== */
.quote{
  max-width:900px;
  margin:auto;
  text-align:center;
  font:600 clamp(28px, 5vw, 52px)/1.04 'Playfair Display', Georgia, serif;
  letter-spacing:-.05em;
}
.quote em{color:var(--red)}

/* ===== Contact ===== */
.contact{text-align:center}
.contact h2{
  max-width:840px;
  margin:11px auto 25px;
  font:700 clamp(36px, 6vw, 64px)/.98 'Playfair Display', Georgia, serif;
  letter-spacing:-.06em;
}
.contact p{
  max-width:590px;
  margin:0 auto 28px;
  color:var(--muted);
  line-height:1.6;
  font-size:16px;
}
.address{
  margin-top:50px;
  padding-top:23px;
  border-top:1px solid var(--line);
  font:600 14px/1.65 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===== Footer ===== */
footer{padding:46px 0 26px;background:var(--black);color:#fff}
.foot{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:35px;
}
.foot h3{
  margin:0 0 13px;
  color:var(--gold-light);
  font:700 12px 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.foot p,
.foot a{
  display:block;
  margin:0 0 7px;
  color:#cbd1dc;
  font-size:13px;
  line-height:1.5;
}
.copyright{
  margin-top:42px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.18);
  color:#a8b1c0;
  font-size:11px;
}
.copyright a{
  color:inherit;
  text-decoration:none;
}
.copyright a:hover{text-decoration:underline}

/* ===== Responsive ===== */
@media(max-width:820px){
  .links{display:none}
  .cards{grid-template-columns:1fr 1fr}
  .split,
  .list{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .top{display:block}
  .top p{margin-top:18px}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .shell{padding:0 20px}
  .notice .shell span:last-child{display:none}
  nav{min-height:76px}
  .brand{font-size:17px}
  .brand-mark{width:34px;height:34px}
  .btn{padding:0 12px;font-size:11px}
  .hero{padding:60px 0}
  .hero p{font-size:16px}
  .hero .btn.outline{
    margin-left:0;
    margin-top:10px;
  }
  .cards,
  .facts{grid-template-columns:1fr}
  section{padding:70px 0}
  .copy{padding:40px 20px}
  .foot{grid-template-columns:1fr}
}