/* =========================================================
   JSR FOUNDATION — Design Tokens & Base
   "Be someone's reason to smile"
   ========================================================= */

:root{
  /* --- Color --- */
  --primary:     #F26B0F;   /* JSR orange — from the logo */
  --primary-dk:  #C6510A;   /* deep burnt orange — hover / emphasis */
  --primary-lt:  #FF9A4D;   /* light amber — glows, gradients */
  --primary-tint:#FDEEE0;   /* pale orange wash for cards/sections */

  --ink:         #1B140F;   /* warm near-black, primary text */
  --ink-soft:    #6B5F53;   /* secondary text on white */
  --black:       #14100C;   /* true dark sections (footer, band) */
  --black-2:     #1F1712;   /* slightly lifted dark, cards on black */

  --paper:       #FFFFFF;   /* page ground */
  --cream:       #FFF8F2;   /* soft alternating section tint */
  --cream-2:     #FCEEE2;
  --line:        #EFE2D6;   /* hairline borders on white */
  --line-dark:   rgba(255,255,255,0.12);

  /* --- Type --- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Radii / shadow / motion --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 26px;
  --shadow-sm: 0 1px 3px rgba(27,20,15,0.08);
  --shadow-md: 0 10px 32px rgba(27,20,15,0.10);
  --shadow-lg: 0 26px 64px rgba(27,20,15,0.18);
  --ease: cubic-bezier(.22,.61,.36,1);

  --container: 1200px;
}

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

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ max-width: 100%; overflow-x: hidden; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  font-size: 16px;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.4em;
  line-height: 1.14;
  letter-spacing: -0.01em;
  font-weight: 600;
}
h1 em, h2 em, h3 em{ font-style: italic; color: var(--primary); }

:focus-visible{
  outline: 2.5px solid var(--primary-dk);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary-dk);
}
.eyebrow .flag{ width:14px; height:14px; color: var(--primary); flex-shrink:0; }
.section--dark .eyebrow{ color: var(--primary-lt); }

.section{ padding: 92px 0; }
.section--tight{ padding: 60px 0; }
.section--cream{ background: var(--cream); }
.section--dark{ background: var(--black); color: #F1E9DF; }
.section--dark h2, .section--dark h3{ color: #FBF6EF; }
.section--dark p{ color: #C9BCAC; }

.section-head{ max-width: 660px; margin-bottom: 50px; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 42px); }
.section-head p{ color: var(--ink-soft); font-size: 17px; margin-top: 14px; }
.section--dark .section-head p{ color: #C9BCAC; }

.section-head--split{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 24px; flex-wrap: wrap;
}

/* --- Signature flag mark (echoes the flourish on the logo's R) --- */
.flag-mark{ display:inline-block; }

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 28px; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
  white-space: nowrap; cursor: pointer;
}
.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  color: #fff;
  box-shadow: 0 8px 22px rgba(242,107,15,0.32);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(198,80,10,0.4); }
.btn-primary:active{ transform: translateY(0); }

.btn-outline{
  background: transparent; border-color: var(--ink); color: var(--ink);
}
.btn-outline:hover{ background: var(--ink); color: #fff; border-color: var(--ink); }
.section--dark .btn-outline{ color:#F1E9DF; border-color:#F1E9DF; }
.section--dark .btn-outline:hover{ background:#F1E9DF; color:var(--black); }

.btn-text{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 6px;
  border-bottom: 1.5px solid rgba(27,20,15,0.25);
  transition: border-color .2s var(--ease), gap .2s var(--ease), color .2s var(--ease);
}
.btn-text:hover{ border-color: var(--primary); color: var(--primary-dk); gap:12px; }
.btn-text svg{ width:13px; height:13px; transition: transform .2s var(--ease); }
.btn-text:hover svg{ transform: translateX(2px); }
.btn-text--light{ color:#F1E9DF; border-color: rgba(241,233,223,0.4); }
.btn-text--light:hover{ color:#fff; border-color:#fff; }

.btn-ghost{
  display:inline-flex; align-items:center; gap: 8px;
  font-weight: 800; font-size: 14px; color: var(--primary-dk);
  border-bottom: 1.5px solid transparent; padding-bottom: 2px;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.btn-ghost:hover{ border-color: var(--primary); gap: 12px; }
.btn-ghost svg{ width:15px; height:15px; }

.btn-sm{ padding: 10px 20px; font-size: 13.5px; }

/* --- Utility --- */
.visually-hidden{
  position:absolute; width:1px;height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:16px; top:-60px;
  background:var(--ink); color:#fff; padding:12px 20px;
  border-radius: 8px; z-index: 999; transition: top .2s var(--ease);
  font-weight:700; font-size:14px;
}
.skip-link:focus{ top:16px; }

::selection{ background: var(--primary); color:#fff; }

/* =========================================================
   RESPONSIVE — single breakpoint for nav collapse (980px)
   ========================================================= */
@media (max-width: 980px){
  .section{ padding: 68px 0; }
  .section--tight{ padding: 48px 0; }
}

@media (max-width: 560px){
  .container{ padding: 0 18px; }
  .section{ padding: 52px 0; }
  .section--tight{ padding: 38px 0; }
  .section-head{ margin-bottom: 34px; }
  h1{ word-break: break-word; }
  .btn{ padding: 13px 22px; font-size: 14px; }
  .eyebrow{ font-size: 11.5px; }
}

@media (max-width: 380px){
  .container{ padding: 0 14px; }
}