/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:#FAFAFA;color:#1A1A1A;font-family:'Noto Serif SC','Times New Roman',serif;font-weight:400;overflow-x:hidden}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{cursor:pointer;font:inherit;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid #E63946;outline-offset:2px}

/* ===== VARIABLES ===== */
:root{
  --color-gray:#5B5B5B;
  --color-red:#E63946;
  --color-green:#2A9D8F;
  --color-light:#F4F4F4;
  --color-dark:#1A1A1A;
  --color-white:#FFFFFF;
  --color-black:#000000;
  --color-border:#D3D3D3;
  --font-headline:Impact,'Arial Black',sans-serif;
  --font-body:'Noto Serif SC','Times New Roman',serif;
  --font-mono:monospace;
  --size-h1:4rem;
  --size-h2:2.5rem;
  --size-h3:1.8rem;
  --size-body:1rem;
  --size-small:0.8rem;
  --weight-h1:900;
  --weight-h2:700;
  --weight-body:400;
  --shadow-card:0 2px 8px rgba(0,0,0,0.08);
  --shadow-hover:0 4px 16px rgba(0,0,0,0.12);
  --radius:4px;
  --max-width:1200px;
  --space-xs:0.25rem;
  --space-sm:0.5rem;
  --space-md:1rem;
  --space-lg:2rem;
  --space-xl:3rem;
  --space-2xl:4rem;
}

/* ===== CONTAINER ===== */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}

/* ===== SKIP LINK ===== */
.skiplink{position:absolute;top:-100px;left:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-red);color:var(--color-white);font-family:var(--font-headline);font-size:var(--size-small);z-index:1000;transition:top 0.2s}
.skiplink:focus{top:var(--space-sm)}

/* ===== HEADER ===== */
.site-header{background:var(--color-gray);color:var(--color-white);position:relative}
.site-header__inner{display:flex;align-items:center;justify-content:center;padding:var(--space-lg) 0 var(--space-md);position:relative}
.site-header__brand{text-align:center}
.site-header__logo{display:block;font-family:var(--font-headline);font-size:var(--size-h2);font-weight:var(--weight-h1);letter-spacing:0.04em;line-height:1.1}
.site-header__tagline{display:block;font-family:var(--font-body);font-size:var(--size-small);font-weight:var(--weight-body);color:rgba(255,255,255,0.75);margin-top:var(--space-xs);letter-spacing:0.2em}
.site-header__toggle{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%);width:2rem;height:2rem;flex-direction:column;justify-content:center;gap:5px;padding:4px;background:transparent;border:1px solid rgba(255,255,255,0.3);border-radius:var(--radius)}
.site-header__toggle-bar{display:block;width:100%;height:2px;background:var(--color-white);border-radius:1px;transition:transform 0.3s,opacity 0.3s}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2){opacity:0}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== STRIPE ===== */
.site-header__stripe{height:6px;background:repeating-linear-gradient(45deg,var(--color-red) 0,var(--color-red) 4px,transparent 4px,transparent 10px);opacity:0.9}

/* ===== NAV ===== */
.site-nav{background:var(--color-gray);border-top:1px solid rgba(255,255,255,0.1)}
.site-nav__list{display:flex;justify-content:center;gap:0;padding:var(--space-sm) 0}
.site-nav__link{display:block;padding:var(--space-sm) var(--space-lg);font-family:var(--font-headline);font-size:var(--size-body);font-weight:var(--weight-body);color:var(--color-white);letter-spacing:0.08em;border-right:1px solid rgba(255,255,255,0.15);transition:color 0.2s,background 0.2s}
.site-nav__list li:last-child .site-nav__link{border-right:none}
.site-nav__link:hover{color:var(--color-red)}
.site-nav__link[aria-current="page"]{color:var(--color-red);position:relative}
.site-nav__link[aria-current="page"]::after{content:'';position:absolute;bottom:0;left:var(--space-lg);right:var(--space-lg);height:2px;background:var(--color-red)}

/* ===== FOOTER ===== */
.site-footer{background:var(--color-dark);color:var(--color-white);padding:var(--space-2xl) 0 0}
.site-footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xl)}
.site-footer__section{}
.site-footer__brand{}
.site-footer__logo{display:block;font-family:var(--font-headline);font-size:var(--size-h3);font-weight:var(--weight-h1);margin-bottom:var(--space-sm);letter-spacing:0.04em}
.site-footer__desc{font-family:var(--font-body);font-size:var(--size-small);color:rgba(255,255,255,0.7);line-height:1.6}
.site-footer__heading{font-family:var(--font-headline);font-size:var(--size-body);font-weight:var(--weight-h2);margin-bottom:var(--space-md);letter-spacing:0.06em;color:var(--color-green)}
.site-footer__links li{margin-bottom:var(--space-sm)}
.site-footer__links a{font-family:var(--font-body);font-size:var(--size-small);color:rgba(255,255,255,0.7);transition:color 0.2s}
.site-footer__links a:hover{color:var(--color-red)}
.site-footer__contact li{margin-bottom:var(--space-sm);font-family:var(--font-body);font-size:var(--size-small);color:rgba(255,255,255,0.7)}
.site-footer__contact a{color:rgba(255,255,255,0.9);transition:color 0.2s}
.site-footer__contact a:hover{color:var(--color-green)}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,0.1);padding:var(--space-lg) 0;margin-top:var(--space-xl);text-align:center;font-family:var(--font-body);font-size:var(--size-small);color:rgba(255,255,255,0.5)}
.site-footer__trust{margin-top:var(--space-sm);color:var(--color-green);font-family:var(--font-mono);font-size:var(--size-small)}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-lg);font-family:var(--font-headline);font-size:var(--size-body);font-weight:var(--weight-body);letter-spacing:0.06em;border-radius:var(--radius);border:1px solid transparent;transition:all 0.2s;cursor:pointer}
.btn--primary{background:var(--color-red);color:var(--color-white);border-color:var(--color-red)}
.btn--primary:hover{background:transparent;color:var(--color-red)}
.btn--secondary{background:var(--color-green);color:var(--color-white);border-color:var(--color-green)}
.btn--secondary:hover{background:transparent;color:var(--color-green)}

/* ===== CARDS ===== */
.card{background:var(--color-light);border-radius:var(--radius);padding:var(--space-lg);box-shadow:var(--shadow-card);border:1px solid var(--color-border);transition:box-shadow 0.2s}
.card:hover{box-shadow:var(--shadow-hover)}
.card--data{border-top:3px solid var(--color-red);position:relative}
.card--data::before{content:'';position:absolute;top:0;right:0;width:40px;height:40px;background:linear-gradient(135deg,transparent 50%,var(--color-red) 50%);opacity:0.15}

/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;font-family:var(--font-body);font-size:var(--size-small);color:rgba(26,26,26,0.6);padding:var(--space-md) 0}
.breadcrumb a{color:var(--color-green);transition:color 0.2s}
.breadcrumb a:hover{color:var(--color-red)}
.breadcrumb span::after{content:'/';margin-left:var(--space-sm);color:var(--color-border)}
.breadcrumb span:last-child::after{content:none}

/* ===== DIVIDER ===== */
.divider{height:1px;background:var(--color-border);border:none;margin:var(--space-lg) 0}

/* ===== UTILITY ===== */
.text-center{text-align:center}
.text-red{color:var(--color-red)}
.text-green{color:var(--color-green)}
.font-headline{font-family:var(--font-headline)}
.font-mono{font-family:var(--font-mono)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .site-footer__grid{grid-template-columns:repeat(2,1fr)}
  .site-header__logo{font-size:2.8rem}
}

@media(max-width:768px){
  :root{--size-h1:2.8rem;--size-h2:2rem;--size-h3:1.4rem}
  .container{padding:0 var(--space-md)}
  .site-header__inner{justify-content:center;padding:var(--space-md) 0}
  .site-header__toggle{display:flex}
  .site-header__logo{font-size:2rem}
  .site-header__tagline{font-size:0.7rem}
  .site-nav{max-height:0;overflow:hidden;transition:max-height 0.4s ease,border 0.3s}
  .site-nav[data-open]{max-height:600px;border-top:1px solid rgba(255,255,255,0.1)}
  .site-nav__list{flex-direction:column;align-items:center;padding:var(--space-sm) 0}
  .site-nav__link{border-right:none;border-bottom:1px solid rgba(255,255,255,0.08);padding:var(--space-md) var(--space-lg);width:100%;text-align:center}
  .site-nav__list li:last-child .site-nav__link{border-bottom:none}
  .site-nav__link[aria-current="page"]::after{left:var(--space-xl);right:var(--space-xl)}
  .site-footer__grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .site-footer__bottom{text-align:center}
  .card{padding:var(--space-md)}
}

@media(max-width:480px){
  .site-header__logo{font-size:1.6rem}
  .site-header__tagline{font-size:0.65rem;letter-spacing:0.1em}
  .site-nav__link{font-size:0.9rem;padding:var(--space-sm) var(--space-md)}
  .site-footer{padding:var(--space-xl) 0 0}
  .site-footer__grid{gap:var(--space-md)}
}

/* ===== PREFERS REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important}
  .site-header__toggle-bar{transition:none!important}
  .site-nav{transition:none!important}
}

/* ===== REVEAL ANIMATION (base) ===== */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
[data-reveal][data-revealed]{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
}

/* ===== IMAGE CONTAINER (base for page use) ===== */
.img-frame{background:var(--color-light);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;position:relative}
.img-frame::before{content:'';display:block;padding-bottom:56.25%}
.img-frame--tall::before{padding-bottom:75%}
.img-frame--square::before{padding-bottom:100%}
.img-frame--hero::before{padding-bottom:40%}
.img-frame img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}

/* ===== GRID HELPERS (for page use) ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}
@media(max-width:768px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}
@media(min-width:769px)and(max-width:1024px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
}