/* =========================================
   TOKENS / ROOT
========================================= */
:root{
  --bg:#0a0a0a;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
  --measure:45ch;
  --pad:clamp(16px,4vw,40px);
  --gap:clamp(20px,5vw,56px);
  --footer-h:50svh;
  --ease:cubic-bezier(.2,.8,.2,1);
  --caps:.8rem;
}

/* =========================================
   BASE
========================================= */
*, *::before, *::after { box-sizing: border-box; }
html{scroll-behavior:smooth;overflow-x: clip;}
body{margin:0;font-family:var(--sans);background:var(--bg);color:#eaeaea;-webkit-font-smoothing:antialiased;width: auto;overflow-x: clip;}
section{background:black;}
img{display:block;width:100%;height:auto;}
img, video { max-width: 100%; height: auto; }
h1,h2,h3{letter-spacing:-.03em;}
p{color:#ffffff78;font-size:.9rem;line-height:1.4;}
.wrap{margin-inline:auto;padding-inline:var(--pad);}
.hide{display:none;}
.media, .overlay, .vignette, .scroll-cue { max-width:100%; }
.classes-snap { overflow-x:auto; contain:content; }

/* reveal */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease;}
[data-reveal].in{opacity:1;transform:none;}

/* =========================================
   HEADER / NAV
========================================= */
/* kill sideways scroll just in case */
html, body { overflow-x: clip; }

/* Header */
.site-header{
  position: fixed; top: 0rem; left: 0; right: 0;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0;

  transition:
    width .8s var(--ease),
    top .8s var(--ease),
    border-radius .8s var(--ease),
    background-color .8s var(--ease),
    box-shadow .8s var(--ease),
    backdrop-filter .8s var(--ease);
  will-change: width, top, border-radius, background-color, box-shadow, backdrop-filter;
}

/* Scrolled: shrink and drop slightly */
.site-header.scrolled{
  width: min(1100px, 90vw);
  top: 2rem;
  border-radius: 999px;
  margin: 0 auto;
  background: rgba(10,10,10,.7);
  border: 1px solid #1a1a1a;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}


.brand{font-size:.8rem;font-weight:700;letter-spacing:-.03em;text-transform:uppercase;color:#fff;white-space:nowrap;}
a.brand{text-decoration: none;}
.menu-area{position:relative;display:grid;align-items:center;justify-items:end;}

/* collapsed control */
.menu-toggle{
  appearance:none;text-transform:none;font-weight:600;border:0;background:transparent;color:#fff;
  font-size:var(--caps);letter-spacing:-.03em;padding:0;border-bottom:1px solid transparent;transition:border .4s ease;cursor:pointer;
}
.menu-toggle:after {content:"+"}
.menu-toggle:hover{border-bottom:1px solid #fff;}
.menu-toggle:active{transform:translateY(0);}

/* expanded links */
.links{
  display:flex;align-items:center;gap:24px;position:absolute;right:0;top:50%;
  transform:translateY(-50%) translateY(-6px);opacity:0;pointer-events:none;
  transition:opacity .35s ease,transform .35s var(--ease);will-change:transform,opacity;
}
.links a{
  font-size:.8rem;font-weight:500;color:#ddd;text-decoration:none;position:relative;padding:.25rem 0;
}
.links a:hover{color:#fff;}
.links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;transform:scaleX(0);transform-origin:right;
  background:currentColor;transition:transform .35s var(--ease);
}
.links a:hover::after{transform:scaleX(1);transform-origin:left;}

/* close button inside row */
.menu-close{
  appearance:none;font-weight:400;border:0;background:transparent;color:#ffffff7d;
  font-size:var(--caps);letter-spacing:-.03em;padding:0;border-bottom:1px solid transparent;transition:border .4s ease;cursor:pointer;
}
.menu-close:hover{border-bottom:1px solid #fff;}
.menu-close:active{transform:translateY(0);}

/* open/close state */
.nav-open .menu-toggle{opacity:0;pointer-events:none;transform:translateY(6px);}
.nav-open .links{opacity:1;pointer-events:auto;transform:translateY(-50%) translateY(0);}

/* mobile nav */
@media (max-width:720px){
  .links{
    position:fixed;top:calc(var(--header-height,0px) + 0rem);right:0rem;left:0rem;transform:translateY(-8px);
    opacity:0;pointer-events:none;padding:.75rem;border-radius:99px;border:0px solid rgba(255,255,255,.18);
    background:rgba(10,10,10,1);backdrop-filter:blur(10px);
    flex-wrap:wrap;gap:12px 16px;justify-content:space-between;
  }
  .nav-open .links{transform:translateY(0);opacity:1;pointer-events:auto;}
}

/* DESKTOP: keep nav items in one row */
.site-header .links{
  display:flex;
  flex-direction: row;
  align-items:center;
  gap:24px;

  /* key fixes */
  white-space: nowrap;       /* don't wrap words */
  min-width: max-content;    /* don't let the flex container collapse */
}

.site-header .links a{
  display: inline-block;
  flex: 0 0 auto;            /* don't shrink into columns */
  white-space: nowrap;       /* belt + suspenders */
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}


/* reduced motion */
@media (prefers-reduced-motion:reduce){.menu-toggle,.links{transition:none;}}

/* =========================================
   HERO (HOME)
========================================= */
#hero{background:#000;}
#hero .media{opacity:0;animation:heromedia 1s ease forwards;}
@keyframes heromedia{0%{opacity:0;transform:scale(1.2);}100%{opacity:1;transform:scale(1);}}

.hero{display:flex;align-items:flex-end;position:sticky;top:0;height:100svh;}
.media{position:absolute;inset:0;}
.media img{width:100%;height:100%;object-fit:cover;}
.vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.3));}
.hero-inner{padding-inline:var(--pad);position:relative;z-index:1;padding-block:clamp(var(--pad),10vh,var(--pad));max-width:var(--measure);}
.kicker{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#c5c5c5;margin-bottom:8px;}
.h1{font-family:var(--sans);font-weight:600;line-height:1.1;margin:.5rem 0 1rem;font-size:clamp(22px,5vw,58px);color:#fff;}
.lead{font-size:clamp(14px,1.4vw,16px);line-height:1.5;max-width:var(--measure);margin-bottom:20px;}
.actions{display:flex;gap:12px;}
.btn{text-decoration:none !important;border:1px solid #fff;border-radius:999px;padding:8px 16px;font-size:12px;background:transparent;color:#fff;cursor:pointer;}
.btn:hover{background:#fff;color:#000;}
.btn.primary{border:0;background:linear-gradient(135deg,hsl(345 85% 25%) 0%,hsl(345 75% 35%) 50%,hsl(45 85% 55%) 100%);color:#fff;}
.scroll-cue{position:absolute;right:0;bottom:0;padding-inline:var(--pad);padding-block:clamp(var(--pad),10vh,var(--pad));transform:translateX(0%);font-size:10px;color:#ccc;text-transform:uppercase;letter-spacing:.1em;}
#hero-wrapper{position:relative;height:200svh;z-index:0;}
.img-small,.img-large{opacity:.9;transition:all .8s ease;}
.img-small:hover,.img-large:hover{opacity:1;}

/* =========================================
   PANELS (GENERIC SECTION FRAME)
========================================= */
section.panel{position:relative;min-height:90svh;display:flex;align-items:center;}
.panel .media{position:absolute;inset:0;}
.panel .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45));}
.panel .content{position:relative;z-index:1;padding-block:clamp(56px,14vh,96px);max-width:var(--measure);}
.h2{font-family:var(--sans);font-size:clamp(18px,3vw,28px);font-weight:600;margin:0 0 10px;line-height:1.2;}
.body{font-size:clamp(13px,1.3vw,15px);line-height:1.55;color:#eee;max-width:var(--measure);}

/* About block (home page section) */
#about p,#about li{color:#fff;font-size:.9rem;}
#about .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.75));}

/* Cards */
.cards{margin-top:20px;display:grid;gap:var(--gap);grid-template-columns:1fr;}
@media (min-width:860px){.cards{grid-template-columns:1fr 1fr;}}
.card{backdrop-filter:blur(6px);background:rgba(20,20,20,.45);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:16px;}
.card h3{font-size:14px;font-weight:600;margin:0 0 6px;font-family:var(--sans);}
.meta{font-size:11px;color:#bbb;margin-bottom:6px;}

/* =========================================
   HERITAGE IMAGE PAIR (HOME) huh?????
========================================= */
.images{flex:1;display:flex;justify-content:flex-end;align-items:flex-start;gap:1rem;}
.img-small,.img-large{font-size:.8rem;}
.img-small{width:30%;}
.img-large{width:50%;}
.img-small img,.img-large img{object-fit:cover;display:block;width:100%;height:auto;}
.heritage-content-wrapper{display:flex;align-items:flex-start;gap:2rem;width:calc(100% - 2rem);padding-inline:var(--pad);position:relative;z-index:1;margin-top:0;padding:2rem;}
@media (max-width:768px){
  .heritage-content-wrapper{display:flex;flex-direction:column;width:calc(100% - 2rem);padding:1rem 0;}
  .images{flex-direction:column;align-items:center;}
  .img-small{display:none;}
  .img-large{width:93%;}
}

/* =========================================
   QUOTE BLOCK HELPERS
========================================= */
.copy-columns{display:flex;flex-wrap:wrap;gap:2rem;}
.copy-col{margin:0 auto;max-width:var(--measure);}
@media (max-width:768px){.copy-columns{flex-direction:column;gap:0;}}

/* =========================================
   CLASSES CAROUSEL
========================================= */
.classes-snap{
  position:relative;display:flex;gap:clamp(16px,3vw,24px);padding-inline:var(--pad);
  scroll-padding-inline:var(--pad);padding-bottom:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.classes-snap::-webkit-scrollbar{display:none;}
.classes-snap{scrollbar-width:none;}
.class-slide{
  position:relative;flex:0 0 calc(100% - var(--pad));height:min(680px);border-radius:22px;overflow:hidden;scroll-snap-align:start;
}
@media (min-width:980px){.class-slide{flex-basis:calc(90% - var(--pad));height:min(680px);}}
.class-slide .si{background:#fafafa;inset:0;height:100%;width:100%;}
.class-slide .si img{width:100%;height:100%;object-fit:cover;}
.class-slide .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55) 60%,rgba(0,0,0,.7));}
.class-slide .slide-content{position:absolute;top:clamp(20px,6vw,48px);left:clamp(20px,6vw,48px);max-width:var(--measure);}
.class-slide .slide-content .h2{font-size:clamp(20px,3.2vw,28px);margin:0 0 8px;}
.class-slide .slide-content .body{font-size:clamp(13px,1.3vw,15px);margin:0 0 10px;}
.classes-intro{
  opacity:1 !important;transform:none !important;padding:var(--pad);box-sizing:border-box;width:100%;margin:0;position:relative;
  display:flex;flex-direction:row;justify-content:space-between;padding-block:clamp(56px,14vh,96px);
}
.badge{display:inline-block;margin-top:6px;font-size:11px;color:#eaeaea;opacity:.9;}
@media (max-width:600px){
  .class-slide{height:78svh;}
  .class-slide .slide-content{top:clamp(16px,12vw,40px);left:clamp(16px,6vw,28px);}
  .classes-intro{padding:var(--pad);box-sizing:border-box;width:100%;margin:0;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding-block:clamp(56px,14vh,96px);}
}

/* =========================================
   CONTACT
========================================= */
.contact-section{
  --edge-pad:var(--pad,1rem);--card-radius:12px;
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch;padding:2rem var(--edge-pad);background:#000;
}
.contact-media{position:relative;overflow:hidden;border-radius:var(--card-radius);width:100%;height:100%;}
.contact-media img{width:100%;height:100%;display:block;object-fit:cover;}
.contact-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.2));mix-blend-mode:multiply;pointer-events:none;}

.contact-content{
  display:flex;box-sizing:border-box;flex-direction:column;gap:1rem;background:#000;border:1px solid rgba(255,255,255,.12);
  border-radius:var(--card-radius);padding:1.5rem;width:100%;height:100%;
}
.contact-title{font-size:clamp(1.5rem,2.5vw,2rem);margin:0;}
.contact-body{margin:0;color:rgba(255,255,255,.66);font-size:1rem;line-height:1.5;}

.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.25rem;box-sizing:border-box;}
.contact-field{display:flex;flex-direction:column;gap:.25rem;box-sizing:border-box;}
.contact-field-full{grid-column:1 / -1;}
.contact-form label{font-size:.85rem;color:rgba(255,255,255,.7);}
.contact-input,.contact-select,.contact-textarea{
  box-sizing:border-box;border:1px solid rgba(0,0,0,.15);background:#303030;border-radius:8px;padding:.65rem .75rem;font:inherit;line-height:1.4;color:#fff;
}
.contact-textarea{min-height:100px;resize:vertical;}
.contact-button{
  grid-column:1 / -1;border:1px solid #000;background:linear-gradient(135deg,hsl(345 85% 25%) 0%,hsl(345 75% 35%) 50%,hsl(45 85% 55%) 100%);
  color:#fff;padding:.65rem 1.25rem;border-radius:999px;font-weight:600;cursor:pointer;
}
.contact-button:hover{background:#111;}
@media (max-width:900px){
  .contact-section{display:flex;flex-direction:column;}
  .contact-media,.contact-content{height:auto;}
  .contact-form{grid-template-columns:1fr;}
  .contact-button{width:100%;text-align:center;}
}

/* =========================================
   FOOTER (FIXED REVEAL)
========================================= */
.footer-spacer{height:var(--footer-h,320px);}
.site-footer{
  position:fixed;left:0;right:0;bottom:0;width:100%;min-height:var(--footer-h,320px);
  display:grid;grid-template-rows:auto 1fr auto;background:#111;color:#fff;border-top:1px solid rgba(255,255,255,.1);font-size:12px;z-index:-1;
}
.footer-inner{
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;column-gap:4rem;padding:2rem var(--pad,24px) 0;text-align:left;
}
.footer-brand .brand{font-size:14px;font-weight:600;letter-spacing:.04em;margin:0;font-family:var(--sans);color:#fff;}
.footer-nav{display:flex;flex-direction:column;gap:.4rem;}
.footer-nav a{color:#bbb;text-decoration:none;letter-spacing:.02em;line-height:1.4;transition:color .25s ease;}
.footer-nav a:hover{color:#fff;}
.footer-meta{text-align:right;}
.utility-nav{display:flex;flex-direction:column;gap:.4rem;align-items:flex-end;}
.utility-nav a{color:#bbb;text-decoration:none;letter-spacing:.02em;transition:color .25s ease;}
.utility-nav a:hover{color:#fff;}
.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad,24px) 1rem;}
.footer-bottom .small{font-size:11px;color:#888;margin:0;}
.footer-bottom a.small{color:#888;text-decoration:none;justify-self:center;}
@media (max-width:768px){
  .footer-inner{grid-template-columns:1fr;row-gap:1.25rem;text-align:center;}
  .footer-meta{text-align:center;}
  .utility-nav{align-items:center;}
  .footer-bottom{grid-template-columns:1fr;row-gap:.75rem;text-align:center;}
}

/* =========================================
   ABOUT — UPDATED
   - Hero full-viewport; content bottom-left
   - Section 2 NOT full-screen; consistent spacing
   - Split & Philosophy with consistent padding
========================================= */

/* viewport helpers */
.vh-fill{height:100vh;height:100svh;}
@supports (height:100dvh){ .vh-fill{height:100dvh;} }

/* AOUT MAIN */
#about-page p {font-size: .9rem;}

/* ABOUT hero: bottom-left like index */
.about-hero{
  --about-hero-bg:url('/src/assets/g1.jpg');
  position:relative;overflow:hidden;height:100svh; /* full viewport for hero */
  display:flex;align-items:flex-end; /* bottom */
}
@supports (height:100dvh){ .about-hero{height:100dvh;} }
.about-hero::before{
  content:"";position:absolute;inset:0;background-image:var(--about-hero-bg);
  background-size:cover;background-position:center;background-repeat:no-repeat;transform:translateZ(0);
}
.about-hero::after{content:"";position:absolute;inset:0;    background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .3));}
.about-hero .hero-inner{
  position:relative;z-index:1;max-width:min(72ch,92vw);
  padding: clamp(24px,6vw,48px) var(--pad); /* left/bottom padding like index */
  text-align:left;
}
.about-hero .kicker{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#cfcfcf;margin-bottom:10px;}
.about-hero h1{font-size:clamp(28px,6vw,64px);margin:.25rem 0 1rem;font-weight:600;color:#fff;}

/* Section spacing utility for About */
.about-section{
  padding-block: clamp(48px, 12vh, 96px);
  scroll-margin-top: clamp(56px, 10vh, 96px);
}

/* Section 2: centered text but NOT full height */
.about-text{
  text-align:left;padding-inline:var(--pad);
}
.about-text .inner{max-width:min(78ch,92vw);margin-inline:auto;}
.about-text h2{margin:0 0 .75rem;font-size:clamp(22px,3.2vw,36px);}

/* Section 3: split (text + image) */
.about-split{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,4vw,40px);
  padding-inline:var(--pad);align-items:center;
}
.about-split .copy{max-width:68ch;}
.about-split h2{margin:0 0 .75rem;font-size:clamp(22px,3.2vw,34px);}
.about-split .media{position:relative;border-radius:16px;overflow:hidden;min-height:320px;}
.about-split .media img{width:100%;height:100%;display:block;object-fit:cover;}
@media (max-width:900px){
  .about-split{grid-template-columns:1fr;}
  .about-split .media{min-height:42svh;}
}

/* Section 4: philosophy grid (cards + hierarchy) */
.about-philosophy{
  padding-inline:var(--pad);
}
.about-philosophy .wrap-narrow{max-width:960px;margin-inline:auto;}
.about-philosophy header{text-align:center;margin-bottom:clamp(16px,2.4vw,24px);}
.about-philosophy h2{margin:.25rem 0 .5rem;font-size:clamp(22px,3vw,32px);}
.philosophy-grid{display:grid;gap:clamp(12px,2vw,20px);margin-top:clamp(16px,2.8vw,28px);grid-template-columns:1fr;}
@media (min-width:720px){.philosophy-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:1100px){.philosophy-grid{grid-template-columns:1fr 1fr 1fr 1fr;}}
.philosophy-card{
  border:1px solid rgba(255,255,255,.12);background:rgba(20,20,20,.45);backdrop-filter:blur(6px);
  border-radius:14px;padding:clamp(14px,2.2vw,18px);text-align:left;
}
.philosophy-card h3{
  margin:0 0 .5rem;font-size:clamp(14px,1.2vw,16px);font-weight:700;letter-spacing:.01em;color:#fff;
}
.philosophy-card p{margin:0;color:#ffffffb5;font-size:clamp(13px,1.1vw,15px);line-height:1.55;}




/* 1) Let flex/grid children actually shrink instead of overflowing */
:where(.heritage-content-wrapper,
       .classes-intro,
       .copy-columns,
       .about-split,
       .footer-inner,
       .footer-bottom) { min-width: 0; }

:where(.heritage-content-wrapper > *,
       .classes-intro > *,
       .copy-columns > *,
       .about-split > *,
       .footer-inner > *,
       .footer-bottom > *) { min-width: 0; }

/* 3) Wrap anything long (urls, emails, unbroken words) */
body, p, a, .body, .small {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Belt + suspenders: keep the page from horizontally scrolling at root */
html, body { overflow-x: clip; }