/* ============================================================
   AQUOS ENTERPRISE LIMITED — MAIN STYLESHEET
   Charcoal Grey Edition · Full Site Redesign
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* Charcoal palette (replaces green) */
  --forest:#2A2E32;          /* primary charcoal */
  --forest-deep:#1B1F22;     /* deeper charcoal */
  --forest-soft:#3A3F44;     /* lighter charcoal */
  --bronze:#C9A75E;          /* warm bronze accent */
  --bronze-dark:#A8863E;
  --ivory:#F4F2EC;           /* warm light bg */
  --ivory-soft:#EAE7DF;
  --graphite:#22262A;
  --grey:#5B6167;
  --white:#FFFFFF;

  --line:rgba(34,38,42,.12);
  --line-soft:rgba(34,38,42,.06);
  --line-invert:rgba(255,255,255,.14);

  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --container:1300px;
  --gutter:clamp(1.25rem,4.5vw,3rem);
  --section-y:clamp(4.5rem,9vw,8.5rem);

  --radius:3px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  margin:0;
  background:var(--white);
  color:var(--graphite);
  font-family:var(--font);
  font-size:clamp(1rem,.95rem + .15vw,1.0625rem);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.is-locked{overflow:hidden}

img{max-width:100%;display:block;height:auto}
svg{display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4,h5{
  font-family:var(--font);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}

p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
::selection{background:var(--forest);color:var(--ivory)}

:focus-visible{
  outline:2px solid var(--bronze);
  outline-offset:3px;
  border-radius:1px;
}

.skip-link{
  position:absolute;
  left:1rem;
  top:-120px;
  z-index:200;
  background:var(--forest);
  color:#fff;
  padding:.85rem 1.4rem;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:1rem}

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--section-y)}
.section--ivory{background:var(--ivory)}
.section--forest{background:var(--forest);color:var(--ivory)}
.section--deep{background:var(--forest-deep);color:var(--ivory)}

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
.h2{
  font-size:clamp(1.9rem,4.4vw,3.4rem);
  font-weight:700;
  letter-spacing:-.032em;
  line-height:1.06;
}
.h3{
  font-size:clamp(1.3rem,2vw,1.75rem);
  font-weight:700;
  letter-spacing:-.02em;
}

.lead{
  font-size:clamp(1.0625rem,1.2vw,1.1875rem);
  line-height:1.68;
  color:var(--grey);
  max-width:58ch;
}
.section--forest .lead,
.section--deep .lead{color:rgba(255,255,255,.76)}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:1.25rem;
}
.eyebrow::before{
  content:"";
  width:clamp(22px,3.5vw,44px);
  height:1px;
  background:var(--bronze);
  flex:none;
}
.eyebrow--light{color:var(--bronze)}

/* ============================================================
   5. BUTTONS & LINKS
   ============================================================ */
.btn{
  --btn-bg:var(--forest);
  --btn-fg:#fff;
  --btn-bd:var(--forest);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:1rem 1.75rem;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:var(--radius);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .45s var(--ease),background .45s var(--ease),
             color .45s var(--ease),border-color .45s var(--ease);
  will-change:transform;
  text-align:center;
}
.btn > *{position:relative;z-index:2}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--bronze);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover{
  transform:translateY(-2px);
  border-color:var(--bronze);
  color:#fff;
}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(0)}
.btn svg{width:16px;height:16px;flex:none}

.btn--bronze{--btn-bg:var(--bronze);--btn-fg:#fff;--btn-bd:var(--bronze)}
.btn--bronze::after{background:var(--forest)}
.btn--bronze:hover{border-color:var(--forest)}

.btn--forest{--btn-bg:var(--forest);--btn-fg:#fff;--btn-bd:var(--forest)}
.btn--forest::after{background:var(--bronze)}

.btn--outline{--btn-bg:transparent;--btn-fg:var(--forest);--btn-bd:rgba(42,46,50,.3)}
.btn--outline::after{background:var(--forest)}
.btn--outline:hover{color:#fff}

.btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.5)}
.btn--ghost::after{background:#fff}
.btn--ghost:hover{color:var(--forest);border-color:#fff}

.btn--sm{padding:.6rem 1.1rem;font-size:.68rem;letter-spacing:.14em}
.btn--block{width:100%}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--forest);
  padding-bottom:.35rem;
  position:relative;
  align-self:flex-start;
  margin-top:.5rem;
}
.link-arrow svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.link-arrow::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--bronze);
  transform-origin:right;
  transform:scaleX(1);
  transition:transform .5s var(--ease);
}
.link-arrow:hover::after{transform:scaleX(0);transform-origin:left}
.link-arrow:hover svg{transform:translateX(5px)}

/* ============================================================
   6. HEADER
   ============================================================ */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transform:translateY(0);
  transition:background .4s var(--ease),
             border-color .4s var(--ease),
             box-shadow .4s var(--ease),
             transform .4s var(--ease);
  will-change:transform;
}
.site-header.is-hidden{transform:translateY(-100%)}

.site-header.is-scrolled{
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line-soft);
  box-shadow:0 1px 20px rgba(42,46,50,.05);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:12px;
  transition:padding .3s var(--ease);
}
.site-header.is-scrolled .header__inner{padding-block:10px}

.logo{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  color:#fff;
  transition:color .4s var(--ease);
}
.site-header.is-scrolled .logo{color:var(--forest)}
.logo--light{color:#fff}

.logo__img{
  display:block;
  height:52px;
  width:auto;
  max-width:170px;
  object-fit:contain;
  background:transparent;
  transition:height .3s var(--ease);
}
.site-header.is-scrolled .logo__img{height:44px}

.nav__list{
  display:flex;
  align-items:center;
  gap:clamp(1.25rem,2.2vw,2rem);
}
.nav__list a{
  position:relative;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  padding:.3rem 0;
  transition:color .35s var(--ease);
}
.site-header.is-scrolled .nav__list a{color:var(--graphite)}
.nav__list a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--bronze);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__list a:hover{color:#fff}
.site-header.is-scrolled .nav__list a:hover{color:var(--forest)}
.nav__list a:hover::after{transform:scaleX(1);transform-origin:left}

.header__actions{display:flex;align-items:center;gap:.75rem;flex-shrink:0}

.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--radius);
  cursor:pointer;
  position:relative;
  color:#fff;
  transition:border-color .35s,background .35s,color .35s;
}
.site-header.is-scrolled .menu-toggle{
  border-color:rgba(42,46,50,.3);
  color:var(--forest);
}
.menu-toggle:hover{border-color:var(--bronze);color:var(--bronze)}
.menu-toggle__bars{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.menu-toggle__bars i{
  display:block;
  width:20px;
  height:1.5px;
  background:currentColor;
  transition:transform .4s var(--ease),opacity .3s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(1){
  transform:translateY(3.25px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(2){
  transform:translateY(-3.25px) rotate(-45deg);
}

/* ============================================================
   7. MOBILE MENU
   ============================================================ */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:95;
  background:var(--forest);
  color:var(--ivory);
  padding:6rem var(--gutter) 2rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:2rem;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s var(--ease),visibility .5s;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mobile-menu.is-open{opacity:1;visibility:visible;pointer-events:auto}

.mobile-menu__list{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line-invert);
}
.mobile-menu__list a{
  display:block;
  font-size:clamp(1.4rem,6.5vw,2rem);
  font-weight:700;
  letter-spacing:-.025em;
  padding:.9rem 0;
  border-bottom:1px solid var(--line-invert);
  color:var(--ivory);
  opacity:0;
  transform:translateY(20px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),color .3s;
}
.mobile-menu__list a:hover{color:var(--bronze)}
.mobile-menu.is-open .mobile-menu__list a{opacity:1;transform:none}
.mobile-menu.is-open .mobile-menu__list li:nth-child(1) a{transition-delay:.06s}
.mobile-menu.is-open .mobile-menu__list li:nth-child(2) a{transition-delay:.11s}
.mobile-menu.is-open .mobile-menu__list li:nth-child(3) a{transition-delay:.16s}
.mobile-menu.is-open .mobile-menu__list li:nth-child(4) a{transition-delay:.21s}
.mobile-menu.is-open .mobile-menu__list li:nth-child(5) a{transition-delay:.26s}

.mobile-menu__foot{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line-invert);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s var(--ease) .3s,transform .55s var(--ease) .3s;
}
.mobile-menu.is-open .mobile-menu__foot{opacity:1;transform:none}

.mobile-menu__contact{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:.8rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-menu__contact .label{
  font-size:.625rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  font-weight:600;
}
.mobile-menu__contact .value{
  font-size:.95rem;
  color:var(--ivory);
  font-weight:500;
  word-break:break-word;
}
.mobile-menu__contact:hover .value{color:var(--bronze)}

/* ============================================================
   8. HERO — cinematic with layered animations
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--forest-deep);
  isolation:isolate;
}
.hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  animation:heroZoom 2.6s var(--ease) both;
}
@keyframes heroZoom{
  from{transform:scale(1.15);opacity:0}
  to{transform:scale(1.02);opacity:1}
}
.hero__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(20,24,28,.68) 0%,rgba(20,24,28,.28) 30%,
                    rgba(20,24,28,.55) 65%,rgba(20,24,28,.94) 100%),
    linear-gradient(90deg,rgba(20,24,28,.75) 0%,rgba(20,24,28,.15) 68%);
}
.hero__grid{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:clamp(60px,10vw,120px) clamp(60px,10vw,120px);
  pointer-events:none;
}
.hero__content{
  position:relative;
  width:100%;
  padding-bottom:clamp(4rem,8vw,6rem);
  padding-top:9rem;
  color:#fff;
  max-width:920px;
}
.hero__eyebrow{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:clamp(1.25rem,2.5vw,1.75rem);
  animation:fadeUp 1s var(--ease) .3s both;
}
.hero__title{
  font-size:clamp(2.75rem,8vw,6.5rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:.98;
  color:#fff;
  animation:fadeUp 1.1s var(--ease) .45s both;
}
.hero__title em{
  font-style:normal;
  color:var(--bronze);
}
.hero__lead{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  max-width:56ch;
  font-size:clamp(1rem,1.2vw,1.1875rem);
  line-height:1.68;
  color:rgba(255,255,255,.85);
  animation:fadeUp 1.1s var(--ease) .62s both;
}
.hero__actions{
  margin-top:clamp(2rem,3.8vw,3rem);
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  animation:fadeUp 1.1s var(--ease) .78s both;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:none}
}

.hero__badges{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(2rem,5vw,3rem);
  display:flex;
  flex-direction:column;
  gap:1rem;
  text-align:right;
  z-index:2;
  animation:fadeUp 1.2s var(--ease) 1s both;
}
.hero__badge{
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(255,255,255,.65);
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:.75rem;
}
.hero__badge::after{
  content:"";
  width:32px;
  height:1px;
  background:var(--bronze);
  flex:none;
}

.hero__scroll{
  position:absolute;
  left:var(--gutter);
  bottom:clamp(2rem,5vw,3rem);
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  font-size:.65rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  font-weight:600;
  z-index:2;
}
.hero__scroll-line{
  width:52px;
  height:1px;
  background:rgba(255,255,255,.28);
  position:relative;
  overflow:hidden;
}
.hero__scroll-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--bronze);
  animation:scrollCue 2.4s var(--ease-soft) infinite;
}
@keyframes scrollCue{
  0%{transform:translateX(-100%)}
  55%{transform:translateX(0)}
  100%{transform:translateX(100%)}
}
.hero__scroll:hover{color:#fff}

/* ============================================================
   9. SECTION HEADERS
   ============================================================ */
.section-head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.section-head__text{
  font-size:1rem;
  line-height:1.72;
  color:var(--grey);
  max-width:52ch;
  padding-bottom:.5rem;
}
.section-head--invert .section-head__text{color:rgba(255,255,255,.72)}
.section-head--stack{
  grid-template-columns:1fr;
  gap:1.25rem;
  max-width:64ch;
}
.section-head__text--wide{
  max-width:62ch;
  font-size:clamp(1rem,1.15vw,1.125rem);
}

/* ============================================================
   10. MARQUEE / CAPABILITY BAND
   ============================================================ */
.band{
  background:var(--forest);
  color:var(--ivory);
  padding-block:1.35rem;
  overflow:hidden;
  border-block:1px solid var(--line-invert);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.band__track{
  display:flex;
  width:max-content;
  animation:marquee 44s linear infinite;
}
.band:hover .band__track{animation-play-state:paused}
.band__group{display:flex;align-items:center;flex:none}
.band__item{
  display:inline-flex;
  align-items:center;
  gap:2.5rem;
  padding-inline:1.3rem;
  font-family:var(--font);
  font-size:clamp(.85rem,1.05vw,1rem);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ivory);
  white-space:nowrap;
}
.band__item::after{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--bronze);
  flex:none;
}
@keyframes marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ============================================================
   11. ABOUT
   ============================================================ */
.about{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
}
.about__media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius);
  background:#E7E3DA;
}
.about__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.about__media:hover img{transform:scale(1.04)}
.about__media-tag{
  position:absolute;
  left:1.25rem;
  bottom:1.25rem;
  background:rgba(42,46,50,.92);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--ivory);
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:.55rem .9rem;
  border-radius:var(--radius);
}
.about__body{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.about__body p{color:var(--grey);max-width:58ch}
.about__body p.lead{color:var(--graphite)}

/* ============================================================
   12. VALUES LIST
   ============================================================ */
.values-list{
  display:grid;
  gap:.85rem;
  padding:1.5rem 0 .5rem;
  border-top:1px solid var(--line);
  margin-top:.5rem;
}
.values-list li{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--graphite);
}
.values-list__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--bronze);
  flex:none;
  margin-top:.62rem;
}

/* ============================================================
   13. SERVICES GRID
   ============================================================ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.4vw,2rem);
}
.service-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.5rem,2.6vw,2.25rem);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:border-color .45s var(--ease),
             transform .45s var(--ease),
             box-shadow .45s var(--ease);
}
.service-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:var(--bronze);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease);
}
.service-card:hover{
  border-color:rgba(201,167,94,.4);
  transform:translateY(-4px);
  box-shadow:0 22px 44px -28px rgba(42,46,50,.24);
}
.service-card:hover::before{transform:scaleX(1)}

.service-card__icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--forest);
  margin-bottom:1.5rem;
  transition:background .45s var(--ease),
             border-color .45s var(--ease),
             color .45s var(--ease);
}
.service-card__icon svg{width:24px;height:24px}
.service-card:hover .service-card__icon{
  background:var(--forest);
  border-color:var(--forest);
  color:var(--bronze);
}
.service-card__title{
  font-size:clamp(1.1rem,1.4vw,1.3rem);
  font-weight:700;
  letter-spacing:-.018em;
  margin-bottom:.75rem;
}
.service-card__text{
  font-size:.9375rem;
  line-height:1.7;
  color:var(--grey);
  margin-bottom:1.5rem;
}
.service-card__link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--forest);
  align-self:flex-start;
  transition:color .35s;
}
.service-card__link svg{
  width:14px;
  height:14px;
  transition:transform .45s var(--ease);
}
.service-card__link:hover{color:var(--bronze-dark)}
.service-card__link:hover svg{transform:translateX(5px)}

.service-card--cta{
  background:var(--forest);
  border-color:var(--forest);
  color:var(--ivory);
  justify-content:center;
  gap:1rem;
}
.service-card--cta:hover{border-color:var(--forest)}
.service-card--cta::before{background:var(--bronze);transform:scaleX(1)}
.service-card--cta .service-card__title{color:#fff}
.service-card--cta .service-card__text{
  color:rgba(255,255,255,.7);
  margin-bottom:1rem;
}

/* ============================================================
   14. FEATURED PROJECT
   ============================================================ */
.featured{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.featured__gallery{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.featured__main{
  aspect-ratio:16/11;
  overflow:hidden;
  border-radius:var(--radius);
  background:rgba(0,0,0,.2);
}
.featured__main img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .4s ease;
}
.featured__thumbs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.75rem;
}
.featured__thumb{
  padding:0;
  border:1px solid var(--line-invert);
  background:none;
  cursor:pointer;
  overflow:hidden;
  border-radius:var(--radius);
  opacity:.55;
  transition:opacity .35s,border-color .35s;
  aspect-ratio:4/3;
}
.featured__thumb img{width:100%;height:100%;object-fit:cover}
.featured__thumb:hover{opacity:.85}
.featured__thumb.is-active{opacity:1;border-color:var(--bronze)}

.featured__info{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  padding-top:.5rem;
}
.featured__name{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:700;
  color:#fff;
  letter-spacing:-.025em;
}
.featured__info > p{
  font-size:1rem;
  line-height:1.72;
  color:rgba(255,255,255,.75);
  max-width:52ch;
}
.featured__info .btn{align-self:flex-start}

.specs{
  border-top:1px solid var(--line-invert);
  margin-top:.5rem;
}
.specs__row{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:1rem;
  padding-block:1.1rem;
  border-bottom:1px solid var(--line-invert);
  align-items:baseline;
}
.specs dt{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.specs dd{
  margin:0;
  font-size:1.0625rem;
  font-weight:600;
  color:var(--ivory);
  display:flex;
  align-items:center;
  gap:.55rem;
}
.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--bronze);
  flex:none;
  box-shadow:0 0 0 4px rgba(201,167,94,.18);
}

.media-note{
  margin-top:1rem;
  font-size:.75rem;
  line-height:1.6;
  color:var(--grey);
  font-style:italic;
  max-width:60ch;
}
.media-note--center{
  text-align:center;
  margin-inline:auto;
}
.section--forest .media-note,
.section--deep .media-note{color:rgba(255,255,255,.55)}

/* ============================================================
   15. PORTFOLIO
   ============================================================ */
.portfolio{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.project-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .45s var(--ease),
             transform .45s var(--ease),
             box-shadow .45s var(--ease);
}
.project-card:hover{
  border-color:rgba(201,167,94,.4);
  transform:translateY(-4px);
  box-shadow:0 26px 50px -30px rgba(42,46,50,.26);
}
.project-card__media{
  aspect-ratio:16/11;
  overflow:hidden;
  background:#E7E3DA;
}
.project-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease);
}
.project-card:hover .project-card__media img{transform:scale(1.055)}
.project-card__body{
  padding:clamp(1.25rem,2.2vw,1.75rem);
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.project-card__tag{
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bronze-dark);
}
.project-card__title{
  font-size:clamp(1.125rem,1.5vw,1.35rem);
  font-weight:700;
  letter-spacing:-.02em;
}
.project-card__text{
  font-size:.9375rem;
  line-height:1.68;
  color:var(--grey);
}

/* ============================================================
   16. WHY AQUOS
   ============================================================ */
.why{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.why__intro{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  position:sticky;
  top:7rem;
}
.why__list{border-top:1px solid var(--line)}
.why__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  padding-block:clamp(1.5rem,2.8vw,2.25rem);
  border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease);
}
.why__item:hover{padding-left:.75rem}
.why__num{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--bronze);
  padding-top:.35rem;
}
.why__title{
  font-size:clamp(1.0625rem,1.4vw,1.25rem);
  font-weight:700;
  margin-bottom:.5rem;
  letter-spacing:-.015em;
}
.why__text{
  font-size:.9375rem;
  line-height:1.7;
  color:var(--grey);
  max-width:52ch;
}

/* ============================================================
   17. SECTORS
   ============================================================ */
.sectors-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);
}
.sector-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.5rem,2.4vw,2rem);
  display:flex;
  flex-direction:column;
  gap:.85rem;
  transition:border-color .4s var(--ease),transform .4s var(--ease),
             box-shadow .4s var(--ease);
}
.sector-card:hover{
  border-color:var(--bronze);
  transform:translateY(-4px);
  box-shadow:0 18px 40px -28px rgba(42,46,50,.3);
}
.sector-card__icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--forest);
  margin-bottom:.5rem;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.sector-card:hover .sector-card__icon{
  background:var(--forest);
  border-color:var(--forest);
  color:var(--bronze);
}
.sector-card__icon svg{width:24px;height:24px}
.sector-card__title{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.015em;
}
.sector-card__text{
  font-size:.875rem;
  line-height:1.65;
  color:var(--grey);
}

/* ============================================================
   18. STATS
   ============================================================ */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
  padding-block:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line-invert);
  border-bottom:1px solid var(--line-invert);
}
.stat{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.stat__num{
  font-family:var(--font);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--bronze);
  line-height:1;
}
.stat__label{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

/* ============================================================
   19. PROCESS
   ============================================================ */
.process{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2rem);
}
.process__step{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  position:relative;
}
.process__step::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:36px;
  height:2px;
  background:var(--bronze);
}
.process__num{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.22em;
  color:var(--bronze-dark);
}
.process__title{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.015em;
}
.process__text{
  font-size:.9rem;
  line-height:1.65;
  color:var(--grey);
}

/* ============================================================
   20. SPLIT SECTIONS (image + text)
   ============================================================ */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.split--reverse .split__media{order:2}
.split--reverse .split__body{order:1}
.split__media{
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius);
  background:#E7E3DA;
  position:relative;
}
.split__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.split__media:hover img{transform:scale(1.045)}
.split__body{display:flex;flex-direction:column;gap:1.25rem}

/* ============================================================
   21. GALLERY STRIP (full-width image)
   ============================================================ */
.gallery-strip{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:1rem;
  height:clamp(240px,38vw,420px);
}
.gallery-strip figure{
  overflow:hidden;
  border-radius:var(--radius);
  background:#E7E3DA;
}
.gallery-strip img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.gallery-strip figure:hover img{transform:scale(1.06)}

/* ============================================================
   22. CTA BAND
   ============================================================ */
.cta-band{
  background:var(--forest);
  color:var(--ivory);
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute;
  right:-15%;
  top:-40%;
  width:60vw;
  height:60vw;
  max-width:760px;
  max-height:760px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,167,94,.14) 0%,transparent 68%);
  pointer-events:none;
}
.cta-band__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.5rem;
  max-width:760px;
  margin-inline:auto;
}

/* ============================================================
   23. CONTACT
   ============================================================ */
.contact{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
.contact__details{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.75rem,3vw,2.5rem);
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}
.contact__heading{
  font-size:1.125rem;
  font-weight:700;
  letter-spacing:-.015em;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--line);
}
.contact__list{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.contact__list li{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.contact__label{
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grey);
}
.contact__value{
  font-size:1.0625rem;
  font-weight:600;
  color:var(--forest);
  word-break:break-word;
  transition:color .3s;
}
a.contact__value:hover{color:var(--bronze-dark)}
.contact__value--plain{color:var(--graphite);font-weight:500}
.contact__actions{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.contact__actions .btn{width:100%}

.contact__form-wrap{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.75rem,3vw,2.5rem);
}

/* ============================================================
   24. FORM
   ============================================================ */
.form{display:grid;gap:1.25rem}
.form__row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
}
.field{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  position:relative;
}
.field label{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--graphite);
}
.field label .req{color:var(--bronze-dark);margin-left:.15rem}

.field input,
.field select,
.field textarea{
  width:100%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  font-size:.9375rem;
  color:var(--graphite);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
  -webkit-appearance:none;
  appearance:none;
  font-family:inherit;
}
.field textarea{
  resize:vertical;
  min-height:130px;
  line-height:1.6;
}
.field input::placeholder,
.field textarea::placeholder{color:rgba(34,38,42,.35)}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(42,46,50,.08);
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322262A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:16px;
  padding-right:2.75rem;
  cursor:pointer;
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{
  border-color:#B54F3C;
  box-shadow:0 0 0 3px rgba(181,79,60,.08);
}
.field__error{
  font-size:.75rem;
  color:#B54F3C;
  line-height:1.5;
  min-height:0;
}
.field__error:empty{display:none}

.form__hint{
  font-size:.78rem;
  color:var(--grey);
  line-height:1.55;
  margin-top:-.35rem;
}

.form__status{
  font-size:.875rem;
  line-height:1.6;
  padding:0;
  border-radius:var(--radius);
  transition:all .35s var(--ease);
}
.form__status:empty{display:none}
.form__status[data-state]{
  padding:.9rem 1.1rem;
  border:1px solid var(--line);
}
.form__status[data-state="error"]{
  background:rgba(181,79,60,.06);
  border-color:rgba(181,79,60,.3);
  color:#8E3D2E;
}
.form__status[data-state="success"]{
  background:rgba(42,46,50,.06);
  border-color:rgba(42,46,50,.25);
  color:var(--forest);
}
.form__status[data-state="notice"]{
  background:rgba(201,167,94,.1);
  border-color:rgba(201,167,94,.4);
  color:#7A5A1F;
}
.form__status a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:600;
}

.form__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
}
.form__note{
  font-size:.78rem;
  color:var(--grey);
  line-height:1.5;
  max-width:32ch;
}

/* ============================================================
   25. FOOTER
   ============================================================ */
.footer{
  background:var(--forest-deep);
  color:rgba(255,255,255,.72);
  padding-top:clamp(3.5rem,7vw,5.5rem);
  padding-bottom:0;
}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4.5vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.footer__brand{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  max-width:44ch;
}
.footer__brand .logo__img{height:72px;max-width:200px}
.footer__desc{
  font-size:.9rem;
  line-height:1.72;
  color:rgba(255,255,255,.6);
}
.footer__col ul{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.footer__title{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:1.25rem;
}
.footer__col a,
.footer__contact li{
  font-size:.9rem;
  color:rgba(255,255,255,.72);
  transition:color .3s,padding-left .3s var(--ease);
  word-break:break-word;
}
.footer__col a:hover{color:var(--bronze);padding-left:4px}
.footer__contact{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.footer__contact a:hover{color:var(--bronze);padding-left:4px}

.footer__bottom{
  border-top:1px solid var(--line-invert);
  padding-block:1.75rem clamp(1.75rem,3.5vw,2.5rem);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
  font-size:.8125rem;
  color:rgba(255,255,255,.5);
}
.footer__tagline{
  font-style:italic;
  color:var(--bronze);
}

/* ============================================================
   26. REVEAL ANIMATIONS
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.40s}

.reveal[data-anim="left"]{transform:translateX(-36px)}
.reveal[data-anim="right"]{transform:translateX(36px)}
.reveal[data-anim="scale"]{transform:scale(.94);opacity:0}
.reveal[data-anim="left"].is-in,
.reveal[data-anim="right"].is-in,
.reveal[data-anim="scale"].is-in{transform:none;opacity:1}

/* Image reveal — mask grows from bottom */
.img-reveal{
  position:relative;
  overflow:hidden;
}
.img-reveal img{
  transform:scale(1.14);
  transition:transform 1.4s var(--ease);
  will-change:transform;
}
.img-reveal.is-in img{transform:scale(1)}

/* ============================================================
   27. RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .nav__list{gap:1.25rem}
  .nav__list a{font-size:.7rem;letter-spacing:.1em}
  .logo__img{height:48px;max-width:160px}
  .site-header.is-scrolled .logo__img{height:42px}
  .sectors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1024px){
  .nav{display:none}
  .header__cta{display:none}
  .menu-toggle{display:block}

  .logo__img{height:48px;max-width:160px}
  .site-header.is-scrolled .logo__img{height:42px}

  .section-head{grid-template-columns:1fr;gap:1.25rem;align-items:start}
  .about{grid-template-columns:1fr;gap:2.5rem}
  .about__media{max-width:560px;aspect-ratio:4/3}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .featured{grid-template-columns:1fr;gap:2.5rem}
  .why{grid-template-columns:1fr;gap:2.5rem}
  .why__intro{position:static}
  .split{grid-template-columns:1fr;gap:2.5rem}
  .split--reverse .split__media{order:0}
  .split--reverse .split__body{order:1}
  .contact{grid-template-columns:1fr;gap:2.5rem}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}
  .footer__brand .logo__img{height:64px;max-width:180px}
  .hero__badges{display:none}
}

@media (max-width:820px){
  .hero__scroll{display:none}
  .portfolio{grid-template-columns:1fr}
  .specs__row{grid-template-columns:1fr;gap:.35rem}
  .gallery-strip{grid-template-columns:1fr 1fr;height:clamp(220px,45vw,340px)}
  .gallery-strip figure:last-child{grid-column:1/-1}
}

@media (max-width:640px){
  html{scroll-padding-top:5.5rem}
  :root{--section-y:clamp(3.5rem,10vw,5rem)}

  .logo__img{height:44px;max-width:150px}
  .site-header.is-scrolled .logo__img{height:38px}
  .footer__brand .logo__img{height:60px;max-width:170px}

  .hero{min-height:92svh}
  .hero__content{padding-top:7rem}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}

  .services-grid{grid-template-columns:1fr}
  .sectors-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start;text-align:left}
  .form__foot{flex-direction:column;align-items:stretch}
  .form__note{max-width:none}
  .contact__actions{flex-direction:column}
  .gallery-strip{grid-template-columns:1fr;height:auto}
  .gallery-strip figure{aspect-ratio:16/10}
  .gallery-strip figure:last-child{grid-column:auto}
}

@media (max-width:400px){
  .logo__img{height:40px;max-width:130px}
  .site-header.is-scrolled .logo__img{height:34px}
  .hero__title{font-size:clamp(2.25rem,11vw,2.75rem)}
}

/* ============================================================
   28. MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
  .img-reveal img{transform:none !important}
  .hero__media img{animation:none;transform:scale(1.02)}
  .hero__scroll-line::after{animation:none;transform:none}
  .band__track{animation:none}
}