/* ═══════════════════════════════════════
   FONTS
═══════════════════════════════════════ */
@font-face {
  font-family: 'Inter';
  src: url('../src/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../src/fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --cream:    #f8f8f4;
  --charcoal: #3a3a3a;
  --forest:   #373e31;
  --black:    #000;
  --white:    #fff;
  --fi: 'Inter', sans-serif;
  --fr: 'Inter', sans-serif;

  /* 8-pt spacing */
  --sp1:4px; --sp2:8px; --sp3:16px; --sp4:24px; --sp5:32px;
  --sp6:40px; --sp7:48px; --sp8:56px; --sp9:64px; --sp10:80px;
  --sp11:96px; --sp12:112px;

  /* type */
  --tsm:14px; --tbase:16px; --tlg:18px;
  --h6:20px; --h5:24px; --h4:32px; --h3:40px; --h2:48px; --h1:56px;

  --maxw: 1280px;
  --px: 64px;
}

/* ═══════════════════════════════════════
   RESET
═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fi);background:var(--cream);overflow-x:clip;color:var(--black)}
img{display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;font:inherit;border:none;background:none;padding:0}

/* ═══════════════════════════════════════
   PAGE WRAP
═══════════════════════════════════════ */
.page-wrap{width:100%}

/* ═══════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
.navbar{
  position:sticky;top:0;z-index:100;
  background:var(--charcoal);
  height:72px;padding:0 var(--px);
  display:flex;align-items:center;
}
.navbar__inner{
  max-width:var(--maxw);width:100%;margin:0 auto;
  display:flex;align-items:center;gap:var(--sp5);
}
.navbar__logo{flex:1;display:flex;align-items:center}
.navbar__logo a{display:flex;align-items:center;padding:16px 12px 16px 0}
.navbar__logo-svg{height:40px;width:auto;display:block;flex-shrink:0;color:var(--white)}
.navbar__links{display:flex;align-items:center;gap:var(--sp5)}
.navbar__links a{
  font-family:var(--fi);font-size:var(--tbase);
  color:var(--white);white-space:nowrap;transition:opacity .2s;
  padding:20px 10px
}
.navbar__links a:hover{opacity:.65}
.navbar__right{flex:1;display:flex;justify-content:flex-end}
.navbar__right-svg{height:16px;width:auto;display:block;color:var(--white)}

/* hamburger – hidden on desktop */
.navbar__burger{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:40px;height:40px;
  background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0;z-index:200
}
.navbar__burger span{
  display:block;width:24px;height:2px;background:var(--white);
  border-radius:2px;transition:transform .3s,opacity .3s;transform-origin:center
}
.navbar__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbar__burger.is-open span:nth-child(2){opacity:0}
.navbar__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero{
  position:relative;height:900px;
  padding:0 var(--px);
  display:flex;align-items:center;overflow:hidden
}
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;pointer-events:none
}
.hero__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.hero__inner{position:relative;max-width:var(--maxw);width:100%;margin:0 auto}
.hero__col{max-width:640px;display:flex;flex-direction:column;gap:var(--sp5)}
.hero__text{display:flex;flex-direction:column;gap:var(--sp4);color:var(--cream)}
.hero__title{font-family:var(--fi);font-weight:700;font-size:var(--h1);line-height:1.2;max-width:631px}
.hero__body{font-family:var(--fi);font-size:var(--tbase);line-height:1.6;max-width:560px}
.hero__actions{display:flex;gap:var(--sp3)}

/* ═══════════════════════════════════════
   SHARED BUTTONS
═══════════════════════════════════════ */
.btn-solid{
  background:var(--white);border:1px solid var(--white);color:var(--black);
  padding:12px 24px;font-family:var(--fi);font-size:var(--tbase);
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;
  transition:opacity .2s
}
.btn-solid:hover{opacity:.88}
.btn-ghost{
  border:1px solid var(--white);color:var(--white);
  padding:12px 24px;font-family:var(--fi);font-size:var(--tbase);
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s
}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-outline{
  border:1px solid var(--black);color:var(--black);
  padding:12px 24px;font-family:var(--fr);font-size:var(--tbase);
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s
}
.btn-outline:hover{background:var(--black);color:var(--white)}
.btn-ghost-dark{
  border:1px solid var(--white);color:var(--white);
  padding:12px 24px;font-family:var(--fi);font-size:var(--tbase);
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s
}
.btn-ghost-dark:hover{background:rgba(255,255,255,.1)}
.btn-text{
  display:inline-flex;align-items:center;gap:var(--sp2);
  font-family:var(--fi);font-size:var(--tbase);
  color:var(--white);white-space:nowrap;transition:opacity .2s
}
.btn-text:hover{opacity:.7}
.btn-text__arr{font-size:20px;line-height:1}

/* ═══════════════════════════════════════
   SERVICES
═══════════════════════════════════════ */
.services{background:var(--cream);padding:var(--sp12) var(--px)}
.services__inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:var(--sp10)}

.sec-hdr{display:flex;flex-direction:column;gap:var(--sp3);align-items:center;text-align:center;max-width:768px;margin:0 auto}
.sec-hdr__tag{font-family:var(--fr);font-weight:600;font-size:var(--tbase);line-height:1.5}
.sec-hdr__h2{font-family:var(--fr);font-weight:700;font-size:var(--h2);line-height:1.2;width:100%}
.sec-hdr__body{font-family:var(--fr);font-size:var(--tlg);line-height:1.5;width:100%}

.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp5)}
.cards-col{display:flex;flex-direction:column;gap:var(--sp5)}

.card{position:relative;overflow:hidden;padding:var(--sp5);display:flex;flex-direction:column;justify-content:flex-end}
.card--512{height:512px}
.card--456{height:456px}
.card--auto{min-height:280px;flex:1}
.card__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__veil{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.card__body{position:relative;display:flex;flex-direction:column;gap:var(--sp4)}
.card__tag{font-family:var(--fr);font-weight:600;font-size:var(--tbase);color:var(--white)}
.card__h3{font-family:var(--fr);font-weight:700;font-size:var(--h4);line-height:1.3;color:var(--white)}
.card__p{font-family:var(--fr);font-size:var(--tbase);line-height:1.5;color:var(--white)}
.card__link{display:inline-flex;align-items:center;gap:var(--sp2);font-family:var(--fr);font-size:var(--tbase);color:var(--white);transition:opacity .2s}
.card:hover .card__link{opacity:.7}
.card__link-arr{font-size:20px;line-height:1}

/* ═══════════════════════════════════════
   BANNER – staggered scroll-reveal
═══════════════════════════════════════ */
.banner-section{background:var(--cream);padding:var(--sp12) 0;overflow-x:hidden}
.banner-inner{position:relative;width:1280px;height:230px;margin:0 auto}
.banner-line{
  position:absolute;white-space:nowrap;
  font-family:var(--fr);font-weight:700;
  font-size:clamp(48px,6.667vw,96px);
  line-height:1.2;color:var(--black);
}
#banner-line1{top:0;left:50%;transform:translateX(60%);opacity:0}
#banner-line2{
  top:calc(clamp(48px,6.667vw,96px) * 1.2);
  left:50%;transform:translateX(-150%);opacity:0
}

/* ═══════════════════════════════════════
   ABOUT
═══════════════════════════════════════ */
.about{background:var(--cream);padding:var(--sp12) var(--px) var(--sp8)}
.about__inner{max-width:var(--maxw);margin:0 auto}
.about__row{display:flex;gap:var(--sp10);align-items:center;min-height:640px}
.about__left{flex:1;display:flex;flex-direction:column;gap:var(--sp5)}
.about__eyebrow{font-family:var(--fi);font-weight:600;font-size:var(--tbase)}
.about__titles{display:flex;flex-direction:column;gap:var(--sp4)}
.about__h2{font-family:var(--fi);font-weight:700;font-size:var(--h2);line-height:1.2}
.about__lead{font-family:var(--fi);font-size:var(--tlg);line-height:1.5}
.about__list{display:flex;flex-direction:column;gap:var(--sp3)}
.about__item{display:flex;gap:var(--sp4);align-items:flex-start}
.about__icon{width:28px;height:28px;flex-shrink:0;margin-top:2px}
.about__item-text{font-family:var(--fi);font-size:var(--tlg);line-height:1.5;flex:1}
.about__cta{display:inline-flex;align-items:center;gap:var(--sp2);font-family:var(--fi);font-size:var(--tlg);transition:opacity .2s}
.about__cta:hover{opacity:.6}
.about__cta-arr{font-size:22px}
.about__photo{width:754px;height:640px;flex-shrink:0;border-radius:2px;box-shadow:0 4px 4px rgba(0,0,0,.25);overflow:hidden}
.about__photo img{width:100%;height:100%;object-fit:cover}

/* ═══════════════════════════════════════
   AION INTRO
═══════════════════════════════════════ */
.aion-intro{background:var(--cream);padding:var(--sp12) var(--px)}
.aion-intro__inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:var(--sp10)}
.aion-intro__hdr{max-width:768px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp5);align-items:center;text-align:center}
.aion-intro__h2{font-family:var(--fr);font-weight:700;font-size:var(--h2);line-height:1.2;width:100%}
.aion-intro__body{font-family:var(--fr);font-size:var(--tlg);line-height:1.5;width:100%}

.aion-collage{position:relative;width:100%;height:768px}
.aion-collage__main{position:absolute;top:0;left:8.75%;right:8.75%;aspect-ratio:1056/704;overflow:hidden}
.aion-collage__main img{width:100%;height:100%;object-fit:cover}
.aion-collage__left{position:absolute;top:236px;left:0;width:30%;aspect-ratio:1/1;overflow:hidden;border-radius:2px}
.aion-collage__left img{width:100%;height:100%;object-fit:cover}
.aion-collage__right{position:absolute;top:192px;left:70%;right:0;aspect-ratio:384/576;overflow:hidden;border-radius:2px}
.aion-collage__right img{width:100%;height:100%;object-fit:cover}

/* ═══════════════════════════════════════
   GALLERY SLIDER
   Two half-page columns (50% each of 1440px).
   Text column carries page padding on the left.
   Photo column clips slides with overflow:hidden.
═══════════════════════════════════════ */
.gallery-section{background:var(--cream);padding-top:var(--sp12);padding-bottom:var(--sp12);overflow:hidden}
.gallery-section__inner{width:100%;max-width:1440px;margin:0 auto}
.gallery-layout{display:flex;gap:0;align-items:flex-start}

.gallery-text{
  flex:0 0 50%;width:50%;
  padding:0 var(--sp10) var(--sp11) var(--px);
  display:flex;flex-direction:column;gap:var(--sp4)
}
.gallery-text__h2{font-family:var(--fi);font-weight:700;font-size:var(--h2);line-height:1.2}
.gallery-text__body{font-family:var(--fi);font-size:var(--tlg);line-height:1.5}

.gallery-slider-col{
  flex:0 0 50%;width:50%;
  min-width:0;overflow:hidden;
  display:flex;flex-direction:column;gap:var(--sp7)
}
.gallery-viewport{overflow:hidden;width:100%}
.gallery-track{display:flex;gap:var(--sp5);width:max-content;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.gallery-slide{flex:0 0 560px;width:560px;height:560px;object-fit:cover;border-radius:2px}

.gallery-controls{display:flex;flex-direction:column;align-items:center;gap:var(--sp4)}
.gallery-buttons{display:flex;gap:var(--sp3)}
.slider-btn{
  background:var(--forest);border-radius:50px;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:opacity .2s
}
.slider-btn:hover{opacity:.8}
.gallery-dots{display:flex;gap:var(--sp2);align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:#ccc;cursor:pointer;transition:background .3s}
.dot.active{background:var(--forest)}

/* ═══════════════════════════════════════
   TIMELINE
═══════════════════════════════════════ */
.timeline-section{background:var(--forest);padding:var(--sp11) var(--px) var(--sp12);min-height:900px}
.timeline-section__inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:var(--sp12)}
.timeline-intro{max-width:768px;display:flex;flex-direction:column;gap:var(--sp5)}
.timeline-intro__h2{font-family:var(--fi);font-weight:700;font-size:var(--h2);line-height:1.2;color:var(--white)}
.timeline-intro__p{font-family:var(--fi);font-size:var(--tlg);line-height:1.5;color:var(--white)}
.timeline-intro__actions{display:flex;gap:var(--sp4);align-items:center;flex-wrap:wrap}

/* horizontal 5-step layout */
.timeline-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp2)}
.t-step{display:flex;flex-direction:column;align-items:center}
.t-step__space{height:200px;width:100%}
.t-step__rail{display:flex;align-items:center;width:100%}
.t-step__circle{width:15px;height:15px;border-radius:50%;border:3px solid var(--white);background:var(--forest);flex-shrink:0}
.t-step__line{flex:1;height:3px;background:var(--white)}
.t-step__text{width:100%;display:flex;flex-direction:column;gap:var(--sp2);color:var(--white)}
.t-step__text--top{height:200px;justify-content:flex-end;padding-bottom:var(--sp2);display:flex;flex-direction:column;gap:var(--sp2)}
.t-step__text--btm{padding-top:var(--sp2)}
.t-step__title{font-family:var(--fi);font-weight:700;font-size:var(--h5);line-height:1.4}
.t-step__body{font-family:var(--fi);font-size:var(--tbase);line-height:1.5;color:rgba(255,255,255,.9)}

/* ═══════════════════════════════════════
   COMPANY OVERLAY
═══════════════════════════════════════ */
.company-section{position:relative;padding:var(--sp12) var(--px);overflow:hidden}
.company-section__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.company-section__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.company-section__inner{position:relative;max-width:var(--maxw);margin:0 auto}
.company-row{display:flex;gap:var(--sp10);align-items:flex-start}
.company-row__col{flex:1}
.company-h2{font-family:var(--fi);font-weight:700;font-size:var(--h3);line-height:1.2;color:var(--white)}
.company-body{font-family:var(--fi);font-size:var(--tlg);line-height:1.5;color:var(--white)}

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
.contact-section{background:var(--white);padding:var(--sp12) var(--px)}
.contact-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:var(--sp7)}
.contact-header{max-width:768px;display:flex;flex-direction:column;gap:var(--sp4)}
.contact-title{font-family:var(--fi);font-weight:700;font-size:var(--h2);line-height:1.2}
.contact-subtitle{font-family:var(--fi);font-size:var(--tlg);line-height:1.5}
.contact-layout{display:flex;gap:var(--sp10);align-items:flex-start}

.contact-form{width:616px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--sp4)}
.form-group{display:flex;flex-direction:column;gap:var(--sp2)}
.form-label{font-family:var(--fi);font-size:var(--tbase)}
.form-input{
  width:100%;border:1px solid var(--black);border-radius:4px;
  padding:12px;font-family:var(--fi);font-size:var(--tbase);
  background:transparent;outline:none;transition:border-color .2s
}
.form-input:focus{border-color:var(--forest)}
textarea.form-input{resize:vertical;min-height:180px}
.form-check-row{display:flex;align-items:center;gap:var(--sp2);padding-bottom:var(--sp3)}
.form-check-row input[type="checkbox"]{
  width:18px;height:18px;border:1px solid var(--black);
  border-radius:2px;accent-color:var(--forest);flex-shrink:0;cursor:pointer
}
.form-check-row label{font-family:var(--fi);font-size:var(--tsm);cursor:pointer}
.btn-submit{
  align-self:flex-start;
  background:var(--forest);border:1px solid var(--black);border-radius:2px;
  color:var(--white);padding:12px 24px;
  font-family:var(--fi);font-weight:700;font-size:var(--tbase);
  cursor:pointer;transition:opacity .2s
}
.btn-submit:hover{opacity:.88}
.btn-submit:disabled{opacity:.55;cursor:default}

.contact-info{flex:1;display:flex;flex-direction:column;gap:var(--sp6)}
.contact-row{display:flex;gap:var(--sp4)}
.contact-col{flex:1;display:flex;flex-direction:column;gap:var(--sp3)}
.contact-col__icon{width:32px;height:32px}
.contact-col__title{font-family:var(--fi);font-weight:700;font-size:var(--h6);line-height:1.4}
.contact-col__body{font-family:var(--fi);font-size:var(--tbase);line-height:1.5}
.contact-col__links{font-family:var(--fi);font-size:var(--tsm);text-decoration:underline;display:flex;flex-direction:column}
.contact-col__links a:hover{opacity:.7}
.contact-addr{display:flex;flex-direction:column;gap:var(--sp3);max-width:240px}
.contact-addr__label{font-family:var(--fi);font-weight:700;font-size:var(--h6);line-height:1.4}
.contact-addr__text{font-family:var(--fi);font-size:var(--tsm);line-height:1.5}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer{background:var(--charcoal);padding:var(--sp6) var(--px)}
.footer__inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:var(--sp6)}
.footer__top{display:flex;gap:var(--sp9);align-items:flex-start}
.footer__brand{flex:1;display:flex;flex-direction:column;gap:var(--sp5)}
.footer__logo{height:40px;width:auto;display:block;color:var(--white);align-self:flex-start}
.footer__info{display:flex;flex-direction:column;gap:var(--sp4);font-family:var(--fi);font-size:var(--tsm);color:var(--white);line-height:1.5}
.footer__info-block{display:flex;flex-direction:column;gap:4px}
.footer__info-label{font-weight:600}
.footer__info-links{text-decoration:underline;display:flex;flex-direction:column}
.footer__info-links a:hover{opacity:.7}
.footer__social{display:flex;gap:12px;align-items:center}
.footer__social a{width:24px;height:24px;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s}
.footer__social a:hover{opacity:1}
.footer__nav{max-width:400px;flex:1;display:flex;gap:var(--sp4)}
.footer__nav-col{flex:1;display:flex;flex-direction:column}
.footer__nav-col a{display:block;padding:var(--sp2) 0;font-family:var(--fi);font-weight:600;font-size:var(--tsm);color:var(--white);line-height:1.5;transition:opacity .2s}
.footer__nav-col a:hover{opacity:.7}
.footer__divider{border:none;border-top:1px solid rgba(255,255,255,.2)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;font-size:var(--tsm);color:var(--white)}
.footer__copy{font-family:var(--fi)}
.footer__legal{display:flex;gap:var(--sp4);font-family:var(--fr);text-decoration:underline}
.footer__legal a:hover{opacity:.7}

/* ═══════════════════════════════════════
   COMPACT DESKTOP  1024–1279px
═══════════════════════════════════════ */
@media (max-width:1279px){
  :root{
    --px:48px;
    --h1:48px; --h2:40px; --h3:34px; --h4:28px;
    --sp12:96px; --sp10:64px;
  }

  /* banner – prevent overflow */
  .banner-inner{width:100%;padding:0 var(--px)}

  /* about – fluid photo so left col doesn't collapse */
  .about__photo{width:min(600px,50%);height:520px}

  /* gallery – smaller slides */
  .gallery-slide{flex:0 0 440px;width:440px;height:440px}

  /* contact – form fills its flex cell */
  .contact-form{width:100%;max-width:560px}
}

/* ═══════════════════════════════════════
   TABLET  768–1023px
═══════════════════════════════════════ */
@media (max-width:1023px){
  :root{
    --px:32px;
    --h1:40px; --h2:34px; --h3:28px; --h4:24px; --h5:20px;
    --sp12:80px; --sp11:88px; --sp10:56px; --sp9:48px;
  }

  /* ── navbar ── */
  .navbar{padding:0 var(--px)}
  .navbar__right{display:none}

  /* ── hero ── */
  .hero{height:640px;padding:0 var(--px)}
  .hero__col{max-width:100%}
  .hero__title,.hero__body{max-width:100%}

  /* ── services ── */
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .card--512{height:380px}
  .card--456{height:340px}
  .card--auto{min-height:240px}

  /* ── banner ── */
  .banner-inner{width:100%;padding:0 var(--px)}

  /* ── about ── */
  .about__row{flex-direction:column;min-height:unset;gap:var(--sp7)}
  .about__photo{width:100%;height:420px}

  /* ── aion collage ── */
  .aion-collage{height:480px}

  /* ── gallery ── */
  .gallery-layout{flex-direction:column}
  .gallery-text{flex:none;width:100%;padding:0 var(--px) var(--sp5)}
  .gallery-slider-col{flex:none;width:100%}
  .gallery-slide{flex:0 0 400px;width:400px;height:360px}

  /* ── timeline ── */
  .timeline-section{min-height:unset;padding:var(--sp10) var(--px)}
  .timeline-section__inner{gap:var(--sp9)}
  .timeline-steps{display:flex;flex-direction:column;gap:var(--sp5)}
  .t-step{flex-direction:row;align-items:flex-start;gap:var(--sp4)}
  .t-step__space{display:none}
  .t-step__rail{flex-direction:column;align-items:center;width:15px;flex-shrink:0;padding-top:4px}
  .t-step__line{flex:none;width:3px;height:48px}
  .t-step__text--top,.t-step__text--btm{height:auto;padding:0;justify-content:flex-start}
  .t-step__text{width:auto;flex:1}

  /* ── company ── */
  .company-row{flex-direction:column;gap:var(--sp5)}

  /* ── contact ── */
  .contact-layout{flex-direction:column}
  .contact-form{width:100%;max-width:560px}
  .contact-row{flex-direction:column;gap:var(--sp5)}

  /* ── footer ── */
  .footer__top{flex-direction:column;gap:var(--sp7)}
  .footer__nav{max-width:100%}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:var(--sp3)}
}

/* ═══════════════════════════════════════
   MOBILE  ≤767px
═══════════════════════════════════════ */
@media (max-width:767px){
  :root{
    --px:20px;
    --h1:30px; --h2:26px; --h3:22px; --h4:20px; --h5:18px;
    --tlg:16px;
    --sp12:56px; --sp11:72px; --sp10:40px; --sp9:48px; --sp8:48px;
  }

  /* ── navbar ── */
  .navbar{height:64px;padding:0 var(--px)}
  .navbar__inner{gap:var(--sp3)}
  .navbar__right{display:none}
  .navbar__burger{display:flex}

  /* slide-down mobile menu */
  .navbar__links{
    position:fixed;top:64px;left:0;right:0;
    background:var(--charcoal);
    display:flex;flex-direction:column;
    padding:var(--sp4) var(--px) var(--sp5);
    gap:var(--sp4);
    transform:translateY(-110%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    z-index:150;
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 8px 24px rgba(0,0,0,.3);
  }
  .navbar__links.is-open{transform:translateY(0)}
  .navbar__links a{font-size:var(--tlg);padding:var(--sp2) 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .navbar__links a:last-child{border-bottom:none}

  /* ── hero ── */
  .hero{height:auto;min-height:520px;padding:72px var(--px) 56px;align-items:flex-end}
  .hero__col{max-width:100%;gap:var(--sp4)}
  .hero__title{font-size:var(--h1);max-width:100%}
  .hero__body{max-width:100%}
  .hero__actions{flex-direction:column;gap:var(--sp3)}
  .btn-solid,.btn-ghost{width:100%;justify-content:center}

  /* ── services ── */
  .services{padding:var(--sp10) var(--px)}
  .services__inner{gap:var(--sp7)}
  .cards-grid{grid-template-columns:1fr;gap:var(--sp4)}
  .cards-col{gap:var(--sp4)}
  .card--512{height:300px}
  .card--456{height:280px}
  .card--auto{min-height:220px}
  .card__h3{font-size:var(--h4)}
  .card__p{font-size:var(--tsm)}

  /* ── banner ── */
  .banner-section{padding:var(--sp10) 0}
  .banner-inner{
    position:static;width:100%;height:auto;
    padding:0 var(--px);
    display:flex;flex-direction:column;gap:6px;
  }
  #banner-line1,
  #banner-line2{
    position:static;left:auto;top:auto;
    font-size:clamp(22px,7vw,38px);
    white-space:normal;word-break:break-word;
    transform:none;opacity:1;
  }
  #banner-line2{text-align:right}

  /* ── about ── */
  .about{padding:var(--sp10) var(--px) var(--sp7)}
  .about__row{flex-direction:column;min-height:unset;gap:var(--sp5)}
  .about__photo{order:-1;width:100%;height:260px;flex-shrink:0}

  /* ── aion intro ── */
  .aion-intro{padding:var(--sp10) var(--px)}
  .aion-collage{position:static;height:auto}
  .aion-collage__main{position:static;aspect-ratio:4/3;width:100%;left:auto;right:auto}
  .aion-collage__left,.aion-collage__right{display:none}

  /* ── gallery ── */
  .gallery-section{padding:var(--sp10) 0}
  .gallery-layout{flex-direction:column}
  .gallery-text{flex:none;width:100%;padding:0 var(--px) var(--sp5)}
  .gallery-text__h2{font-size:var(--h2)}
  .gallery-text__body{font-size:var(--tbase)}
  .gallery-slider-col{flex:none;width:100%}
  .gallery-slide{flex:0 0 calc(100vw - 40px);width:calc(100vw - 40px);height:260px}
  .gallery-controls{padding:0 var(--px)}

  /* ── timeline ── */
  .timeline-section{min-height:unset;padding:var(--sp10) var(--px)}
  .timeline-section__inner{gap:var(--sp9)}
  .timeline-intro__h2{font-size:var(--h2)}
  .timeline-intro__p{font-size:var(--tbase)}
  .timeline-intro__actions{flex-direction:column;align-items:stretch;gap:var(--sp3)}
  .btn-ghost-dark{width:100%;justify-content:center}
  .timeline-steps{display:flex;flex-direction:column;gap:0}
  .t-step{
    display:grid;grid-template-columns:28px 1fr;
    column-gap:var(--sp3);padding-bottom:var(--sp5);align-items:start;
  }
  .t-step__space{display:none}
  .t-step__rail{
    grid-column:1;grid-row:1;flex-direction:column;
    align-items:center;width:28px;align-self:stretch;padding-top:2px;
  }
  .t-step__line{width:3px;flex:1;min-height:24px}
  .t-step:last-child .t-step__line{display:none}
  .t-step__text--top,.t-step__text--btm{
    grid-column:2;grid-row:1;
    height:auto;padding:0;justify-content:flex-start;display:flex;flex-direction:column;gap:var(--sp2)
  }
  .t-step__title{font-size:var(--h6)}
  .t-step__body{font-size:var(--tsm)}

  /* ── company ── */
  .company-section{padding:var(--sp10) var(--px)}
  .company-row{flex-direction:column;gap:var(--sp5)}
  .company-h2{font-size:var(--h3)}
  .company-body{font-size:var(--tbase)}

  /* ── contact ── */
  .contact-section{padding:var(--sp10) var(--px)}
  .contact-title{font-size:var(--h2)}
  .contact-subtitle{font-size:var(--tbase)}
  .contact-layout{flex-direction:column;gap:var(--sp7)}
  .contact-form{width:100%}
  .contact-row{flex-direction:column;gap:var(--sp6)}
  .btn-submit{width:100%;justify-content:center;align-self:stretch}

  /* ── footer ── */
  .footer{padding:var(--sp7) var(--px)}
  .footer__top{flex-direction:column;gap:var(--sp6)}
  .footer__nav{max-width:100%;flex-wrap:wrap}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:var(--sp3)}
  .footer__legal{flex-wrap:wrap;gap:var(--sp3)}
}

/* ═══════════════════════════════════════
   STANDARDY – section primitives
═══════════════════════════════════════ */
.std-section{background:var(--cream);padding:var(--sp12) var(--px)}
.std-section__inner{max-width:var(--maxw);margin:0 auto}

.std-row{display:flex;gap:var(--sp10);align-items:center}

/* Text column */
.std-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp5)}
.std-text-block{display:flex;flex-direction:column;gap:var(--sp4)}

/* Typography */
.std-eyebrow{font-family:var(--fi);font-weight:600;font-size:var(--tbase);line-height:1.5}
.std-h2{font-family:var(--fi);font-weight:700;font-size:var(--h2);line-height:1.2}
.std-body{font-family:var(--fi);font-size:var(--tlg);line-height:1.5}

/* Image column (portrait / square) */
.std-img-col{flex:1;min-width:0;overflow:hidden}
.std-img-col img{width:100%;height:100%;object-fit:cover;display:block}
.std-img-col--portrait{aspect-ratio:600/640}
.std-img-col--square{aspect-ratio:1/1}

/* Full-width wide image (1280:738) */
.std-img-wide{width:100%;aspect-ratio:1280/738;overflow:hidden}
.std-img-wide img{width:100%;height:100%;object-fit:cover;display:block}

/* Tall fixed image (Layout/207) */
.std-img-tall{width:min(754px,50%);height:640px;flex-shrink:0;border-radius:2px;box-shadow:0 4px 4px rgba(0,0,0,.25);overflow:hidden}
.std-img-tall img{width:100%;height:100%;object-fit:cover;display:block}

/* Centered text block */
.std-centered{display:flex;flex-direction:column;align-items:center;gap:var(--sp10)}
.std-centered__text{max-width:768px;text-align:center;display:flex;flex-direction:column;gap:var(--sp4)}
.std-centered__h3{font-family:var(--fi);font-weight:700;font-size:var(--h3);line-height:1.2}
.std-centered__body{font-family:var(--fi);font-size:var(--tlg);line-height:1.5}

/* Tabs column (Layout/28) */
.std-tabs{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp6)}
.std-tab{padding-left:var(--sp5);border-left:3px solid rgba(0,0,0,.12);display:flex;flex-direction:column;gap:var(--sp3)}
.std-tab:first-child{border-color:var(--black)}
.std-tab__h4{font-family:var(--fi);font-weight:700;font-size:var(--h4);line-height:1.3}
.std-tab__body{font-family:var(--fi);font-size:var(--tbase);line-height:1.5}

/* Bullet list */
.std-list{display:flex;flex-direction:column;gap:var(--sp4)}
.std-list__item{font-family:var(--fi);font-size:var(--tlg);line-height:1.5}

/* Image collage (Layout/474) */
.std-collage{flex:1;min-width:0;position:relative;height:640px}
.std-collage__main{position:absolute;inset:0 26% 0 0;overflow:hidden}
.std-collage__main img{width:100%;height:100%;object-fit:cover;display:block}
.std-collage__inset{position:absolute;top:64px;left:50%;right:0;aspect-ratio:1/1;overflow:hidden;border-radius:2px;box-shadow:0 4px 4px rgba(0,0,0,.25)}
.std-collage__inset img{width:100%;height:100%;object-fit:cover;display:block}

/* Centered CTA section */
.std-cta{background:var(--cream);padding:var(--sp12) var(--px)}
.std-cta__inner{max-width:768px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:var(--sp4)}

/* ── std responsive ── */
@media (max-width:1279px){
  .std-row{gap:var(--sp9)}
  .std-img-tall{width:min(560px,50%);height:520px}
}
@media (max-width:1023px){
  .std-row{flex-direction:column;gap:var(--sp7)}
  .std-img-col--portrait,.std-img-col--square{aspect-ratio:unset;width:100%;height:420px}
  .std-img-tall{width:100%;height:420px;flex-shrink:1}
  .std-collage{height:380px}
}
@media (max-width:767px){
  .std-section{padding:var(--sp10) var(--px)}
  .std-h2{font-size:var(--h2)}
  .std-centered__h3{font-size:var(--h2)}
  .std-tab__h4{font-size:var(--h5)}
  .std-body,.std-list__item,.std-tab__body,.std-centered__body{font-size:var(--tbase)}
  .std-img-col--portrait,.std-img-col--square{height:280px}
  .std-img-tall{height:260px}
  .std-collage{height:260px}
  .std-tabs{gap:var(--sp4)}
  .std-cta{padding:var(--sp10) var(--px)}
}

/* ═══════════════════════════════════════
   AION PAGE
═══════════════════════════════════════ */
/* Two-image staggered collage */
.aion-collage2{flex:1;min-width:0;position:relative;height:560px}
.aion-collage2__left{position:absolute;left:0;bottom:0;width:58%;height:78%;overflow:hidden}
.aion-collage2__left img{width:100%;height:100%;object-fit:cover;display:block}
.aion-collage2__right{position:absolute;right:0;top:0;width:70%;height:70%;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.12)}
.aion-collage2__right img{width:100%;height:100%;object-fit:cover;display:block}

/* Parameters list */
.aion-params-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp2)}
.aion-params-list li{font-family:var(--fi);font-size:var(--tlg);line-height:1.6;padding-left:var(--sp4);position:relative}
.aion-params-list li::before{content:"•";position:absolute;left:0}

/* Stats row */
.aion-stats{display:flex;gap:var(--sp7);padding-top:var(--sp5);border-top:1px solid rgba(0,0,0,.12)}
.aion-stat{flex:1}
.aion-stat__num{font-family:var(--fi);font-weight:700;font-size:clamp(36px,4vw,56px);line-height:1.1}
.aion-stat__body{font-family:var(--fi);font-size:var(--tbase);line-height:1.5;margin-top:var(--sp3)}

@media(max-width:1023px){
  .aion-collage2{height:400px}
  .aion-stats{gap:var(--sp5)}
}
@media(max-width:767px){
  .aion-collage2{height:280px}
  .aion-stats{flex-direction:column;gap:var(--sp4)}
  .aion-stat__num{font-size:clamp(32px,8vw,48px)}
}