/* ============================================================
   Estrella Realty Sdn Bhd
   A general works contractor working across Sarawak since 2012.
   ============================================================ */

/* ── Type: self-hosted, no third-party requests ──────────── */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:100 700;
  font-display:swap;
  src:url('../fonts/plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:100 700;
  font-display:swap;
  src:url('../fonts/plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Tokens ─────────────────────────────────────────────── */
:root{
  /* neutrals: bright warm sand carries almost the whole page now;
     coal is reserved for the hero photo overlay and the footer only */
  --coal:    #1B1714;
  --coal-2:  #242019;
  --coal-3:  #342E24;
  --sand:    #FAF6EC;
  --sand-2:  #F1E9D6;
  --sand-3:  #E2D2A8;

  /* text */
  --ink:       #1B1714;
  --on-dark:   #F6F1E7;
  --mute-dark: #C7BFAF;   /* secondary text on coal            */
  --mute-light:#6B6355;   /* secondary text on sand            */

  /* brand, sampled from the star and the script wordmark */
  --red:      #C7331F;
  --red-deep: #8F2415;
  --gold:     #EFAE49;
  --gold-deep:#8F5B10;    /* gold, dark enough to read on sand  */

  --gut: clamp(20px, 5vw, 64px);
  --max: 1240px;

  --body:    'IBM Plex Sans', ui-sans-serif, Arial, sans-serif;

  --ease: cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; }
@media (min-width:601px){ html{ scroll-padding-top:90px; } }
@media (min-width:901px){ html{ scroll-padding-top:100px; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(15.5px,.5vw + 14px,17px);
  line-height:1.65;
  color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--red); color:var(--sand); }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--coal); color:var(--sand); padding:12px 18px; text-decoration:none;
}
.skip:focus{ left:0; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

/* ── Type scale ─────────────────────────────────────────── */
h1,h2,h3{ margin:0; font-weight:600; line-height:1.05; letter-spacing:-.01em; }
h2{ font-size:clamp(1.85rem,3.6vw,2.7rem); }
h3{ font-size:1.05rem; font-weight:600; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

/* ── Scroll progress ────────────────────────────────────── */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:110;
  background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0%;
  background:var(--red);
}

/* ── Header ─────────────────────────────────────────────── */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(27,23,20,.55);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid rgba(246,241,231,.08);
  transition:background-color .25s ease, border-color .25s ease;
}
/* Past the hero the page turns bright, so the header follows it there. */
.site-header.is-scrolled{
  background:rgba(250,246,236,.92);
  border-bottom-color:var(--sand-3);
}

.site-header__in{
  display:flex; align-items:center; gap:18px;
  padding-block:12px;
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.brand img{ height:44px; width:auto; }
@media (min-width:601px){
  .brand img{ height:50px; }
}
@media (min-width:901px){
  .brand img{ height:58px; }
}
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt b{
  font-weight:600; font-size:1rem; letter-spacing:-.01em;
  color:var(--on-dark); transition:color .25s ease;
}
.brand__txt i{ font-style:normal; font-size:.7rem; color:var(--mute-dark); transition:color .25s ease; }
.site-header.is-scrolled .brand__txt b{ color:var(--ink); }
.site-header.is-scrolled .brand__txt i{ color:var(--mute-light); }

.nav{ display:flex; align-items:center; gap:2px; }
.nav a{
  position:relative;
  text-decoration:none; padding:9px 12px; font-size:.92rem; font-weight:500;
  color:var(--mute-dark); transition:color .25s ease;
}
.nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover{ color:var(--on-dark); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a.is-here{ color:var(--on-dark); }
.nav a.is-here::after{ transform:scaleX(1); }
.site-header.is-scrolled .nav a{ color:var(--mute-light); }
.site-header.is-scrolled .nav a:hover,
.site-header.is-scrolled .nav a.is-here{ color:var(--ink); }

.nav__cta{
  margin-left:10px; background:var(--red); color:var(--sand)!important;
  padding:10px 18px!important; border-radius:2px;
  transition:background-color .2s ease;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--red-deep); }

.burger{
  display:none; width:42px; height:38px; padding:9px 8px;
  background:none; border:1px solid rgba(246,241,231,.25); cursor:pointer;
  align-items:center; justify-content:center;
  transition:border-color .25s ease;
  -webkit-appearance:none; appearance:none;
}
.burger__icon{
  display:block; width:20px; height:20px;
  background-color:var(--on-dark);
  -webkit-mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAABD0lEQVR4nO3cOw4CMQwEUMP97wzNUmyHlNl85PcOkMKepADtVAEAAAAAAAAAAAAAZ3s9cObngTO5i+0tGQCLnyuyu3fikLL8FSIzTwWANYZDkAiA27/W0Py9AM0JQHMC0JwANJcIwBM/JvG/ofl7Ac42fPlSAfAKzBeZuf8CzuTCAQAAAAAAAAAAAABQ5buAU8X2lv40zPLniM05GQDLn2urjiDLX0NHEDqCGCAAzQlAcwLQnI6g823RESQEa2zTEVQlBLNt1Rb+IwRzmDMAAAAAAAAAAAAAcFERcyYVMc2piEFFDCpiKBUxjBCA5gSgOQFoTkXM+VTENKYipjEVMY2ZMwAAAAAAAAAAAABw+QKlIBpK8EHEwAAAAABJRU5ErkJggg=="); mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAABD0lEQVR4nO3cOw4CMQwEUMP97wzNUmyHlNl85PcOkMKepADtVAEAAAAAAAAAAAAAZ3s9cObngTO5i+0tGQCLnyuyu3fikLL8FSIzTwWANYZDkAiA27/W0Py9AM0JQHMC0JwANJcIwBM/JvG/ofl7Ac42fPlSAfAKzBeZuf8CzuTCAQAAAAAAAAAAAABQ5buAU8X2lv40zPLniM05GQDLn2urjiDLX0NHEDqCGCAAzQlAcwLQnI6g823RESQEa2zTEVQlBLNt1Rb+IwRzmDMAAAAAAAAAAAAAcFERcyYVMc2piEFFDCpiKBUxjBCA5gSgOQFoTkXM+VTENKYipjEVMY2ZMwAAAAAAAAAAAABw+QKlIBpK8EHEwAAAAABJRU5ErkJggg==");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  transition:background-color .25s ease;
}
.burger[aria-expanded="true"] .burger__icon{
  -webkit-mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAADnklEQVR4nO3dQW7TQBjF8ReaAhILFpQLVKrUQ3ADuAM7FpXaGyCVK4DEEThBu2ELEkWw74YbwJ4WpQkLzyiuSUrtzMz3jfv/SZad0tAvec9xEiWyBAAAAAAAAAAAAAAAAAAAAAAAAAC42VZnexK27xnM4sJ2a3uq5R00WfG7YzC1HqDLeqDHkn6F7Vnr5zuSfpYfJ6s9SR/U3M5JWLYk/Q7bz+xGs3EkaRGWWWv7QtIfSbt2oyW3K+lcy9vYXq7C+sRsOgMHuh7+Zety3D7XOErQDX8elvbluH0nSvBaq/eEVUvtJbhpz1+3HJhMWkB8YnemfndIrSXoG358JHhZcsiSLz/i3+r7DH9f0qnqKsGumpn3e1xnHtb304+zXskCXIX1orO+jZpKMCR8aZnFRdpxbvdHSxr6Gr+GEgwN30zJAmx1Lg8pgucSbBp+PAQ8SDPO7ZQswLyzHspjCVLs+XEHGf3bwm/U71WA91cHQ17qrVsOC89u5lDjKAHhb6D2EhB+ArWWgPATqq0EhJ9BLSUg/Iy8l4DwC/BaAsIvyFsJCN+AlxIQviHrEhC+A1YlIHxHSpeA8B0qVQLCdyx3CQi/ArlKQPgVSV0Cwq9QqhL8CAvhVyhVCQi/Yh5KQPjGLEtA+E5YlIDwnSlZAsJ3qkQJCN+5nCUg/ErkKAHhV+ZY6cI/Ljo5Npby7d2F7L+BhB5Sh08JKpIrfEpQgdzhUwLHSoVPCRwqHT4lcMQqfErggHX4lMCQl/ApgYHUn+Gz/gYSesj1AU5KUIHcn96lBI6V+ug2JXCo9Of2KYEjVl/aoAQOWH9jhxIYsg4/ogQGvIQfUYKCvIUfUYICvIYfUYKMvIcfUYIMagk/ogQJ1RZ+RAkSqDX8iBJsoPbwI0rQ00TSUzUnh649/ChlCfYKz27mQtdPGF1r+FGqEnyTNNW/p9gbjXjDxrDnd21Sgnje4C/Fpy5sGtZjCz8aWoJYgLPyI9uYadghwHP40SaPBF/D/zHaQ0C0UFOCsYUfDS3B93D9oedXdm9b0o7Gued39SnBXM3Z1T+ZTGrgSKvvhPmKn9cYftT3keBzuN7ozx8sSQca557f1S7BTMuix+34bycWw03//yvZvJf0RNJzNce8hZbHvrmkj5Le2YyWVLwNb3X9yV17+1TSi2ITtYz2yYZDr9QU+zJcfqjmHdFHanaGO2uif/cMigkAAAAAAAAAAAAAAAAAAAAAAAAAa/0F2ilIkPT2vPIAAAAASUVORK5CYII="); mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAADnklEQVR4nO3dQW7TQBjF8ReaAhILFpQLVKrUQ3ADuAM7FpXaGyCVK4DEEThBu2ELEkWw74YbwJ4WpQkLzyiuSUrtzMz3jfv/SZad0tAvec9xEiWyBAAAAAAAAAAAAAAAAAAAAAAAAAC42VZnexK27xnM4sJ2a3uq5R00WfG7YzC1HqDLeqDHkn6F7Vnr5zuSfpYfJ6s9SR/U3M5JWLYk/Q7bz+xGs3EkaRGWWWv7QtIfSbt2oyW3K+lcy9vYXq7C+sRsOgMHuh7+Zety3D7XOErQDX8elvbluH0nSvBaq/eEVUvtJbhpz1+3HJhMWkB8YnemfndIrSXoG358JHhZcsiSLz/i3+r7DH9f0qnqKsGumpn3e1xnHtb304+zXskCXIX1orO+jZpKMCR8aZnFRdpxbvdHSxr6Gr+GEgwN30zJAmx1Lg8pgucSbBp+PAQ8SDPO7ZQswLyzHspjCVLs+XEHGf3bwm/U71WA91cHQ17qrVsOC89u5lDjKAHhb6D2EhB+ArWWgPATqq0EhJ9BLSUg/Iy8l4DwC/BaAsIvyFsJCN+AlxIQviHrEhC+A1YlIHxHSpeA8B0qVQLCdyx3CQi/ArlKQPgVSV0Cwq9QqhL8CAvhVyhVCQi/Yh5KQPjGLEtA+E5YlIDwnSlZAsJ3qkQJCN+5nCUg/ErkKAHhV+ZY6cI/Ljo5Npby7d2F7L+BhB5Sh08JKpIrfEpQgdzhUwLHSoVPCRwqHT4lcMQqfErggHX4lMCQl/ApgYHUn+Gz/gYSesj1AU5KUIHcn96lBI6V+ug2JXCo9Of2KYEjVl/aoAQOWH9jhxIYsg4/ogQGvIQfUYKCvIUfUYICvIYfUYKMvIcfUYIMagk/ogQJ1RZ+RAkSqDX8iBJsoPbwI0rQ00TSUzUnh649/ChlCfYKz27mQtdPGF1r+FGqEnyTNNW/p9gbjXjDxrDnd21Sgnje4C/Fpy5sGtZjCz8aWoJYgLPyI9uYadghwHP40SaPBF/D/zHaQ0C0UFOCsYUfDS3B93D9oedXdm9b0o7Gued39SnBXM3Z1T+ZTGrgSKvvhPmKn9cYftT3keBzuN7ozx8sSQca557f1S7BTMuix+34bycWw03//yvZvJf0RNJzNce8hZbHvrmkj5Le2YyWVLwNb3X9yV17+1TSi2ITtYz2yYZDr9QU+zJcfqjmHdFHanaGO2uif/cMigkAAAAAAAAAAAAAAAAAAAAAAAAAa/0F2ilIkPT2vPIAAAAASUVORK5CYII=");
}
.site-header.is-scrolled .burger{ border-color:rgba(27,23,20,.22); }
.site-header.is-scrolled .burger__icon{ background-color:var(--ink); }

@media (max-width:900px){
  .burger{ display:flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(27,23,20,.98);
    border-bottom:1px solid rgba(246,241,231,.1);
    padding:6px var(--gut) 18px;
    display:none;
    transition:background-color .25s ease;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:13px 0; font-size:1.02rem; }
  .nav a::after{ left:0; right:auto; width:22px; }
  .nav__cta{ margin:14px 0 0; text-align:center; }
  .site-header.is-scrolled .nav{ background:rgba(250,246,236,.98); border-bottom-color:var(--sand-3); }
}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; cursor:pointer;
  padding:14px 26px; font-size:.94rem; font-weight:600; font-family:var(--body);
  border:1.5px solid transparent; border-radius:2px;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--red); color:var(--sand); border-color:var(--red); }
.btn--primary:hover{ background:var(--red-deep); border-color:var(--red-deep); }
.btn--ghost{ background:transparent; color:var(--on-dark); border-color:rgba(246,241,231,.4); }
.btn--ghost:hover{ background:var(--on-dark); color:var(--coal); border-color:var(--on-dark); }

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:min(100svh, 820px);
  display:flex; align-items:flex-end;
  overflow:clip;
  background:var(--coal);
}
.hero__media{
  position:absolute; inset:-8% -8%;
  background-size:cover; background-position:center 42%;
  filter:saturate(1.08) contrast(1.03);
  will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(37,20,12,.88) 0%, rgba(37,20,12,.46) 46%, rgba(37,20,12,.14) 100%),
    linear-gradient(100deg, rgba(37,20,12,.72) 0%, rgba(37,20,12,.22) 62%);
}
.hero__content{
  position:relative;
  padding-block:clamp(120px,20vw,180px) clamp(64px,9vw,96px);
  max-width:calc(var(--max) / 1.05);
}
.hero__kicker{
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mute-dark); margin:0 0 22px;
  display:flex; align-items:center; gap:10px;
}
.hero__kicker::before{ content:""; width:26px; height:1px; background:var(--red); flex:none; }
.hero__kicker span{ color:var(--gold); }

.hero__title{
  font-size:clamp(2.5rem,6.6vw,4.6rem);
  color:var(--on-dark);
  max-width:14ch;
  margin:0 0 26px;
}
.hero__lede{ max-width:52ch; color:var(--mute-dark); font-size:1.05rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin:32px 0 0; }

.hero__scroll{
  position:absolute; right:clamp(20px,4vw,56px); bottom:28px;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; text-decoration:none;
}
.hero__scroll-track{
  position:relative; width:1px; height:38px; background:rgba(246,241,231,.3);
  display:block;
}
.hero__scroll-dot{
  position:absolute; left:50%; top:0; width:5px; height:5px; margin-left:-2.5px;
  background:var(--gold); border-radius:50%;
}
@media (prefers-reduced-motion:no-preference){
  .hero__scroll-dot{ animation:scrollcue 2.2s ease-in-out infinite; }
}
@keyframes scrollcue{
  0%{ top:0; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ top:30px; opacity:0; }
}
@media (max-width:700px){ .hero__scroll{ display:none; } }

/* hero load-in: one orchestrated sequence, not repeated elsewhere */
@media (prefers-reduced-motion:no-preference){
  .hero__kicker,.hero__title,.hero__lede,.hero__actions{
    animation:rise .7s var(--ease) backwards;
  }
  .hero__kicker{ animation-delay:.05s; }
  .hero__title{ animation-delay:.14s; }
  .hero__lede{ animation-delay:.26s; }
  .hero__actions{ animation-delay:.36s; }
}
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ── Stats band ─────────────────────────────────────────── */
.stats{ background:var(--sand-2); }
.stats__row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  padding-block:clamp(30px,4vw,44px);
}
.stats__item{
  text-align:center;
  padding-inline:12px;
  border-left:1px solid var(--sand-3);
}
.stats__item:first-child{ border-left:0; }
.stats__num{
  font-weight:600;
  font-size:clamp(1.7rem,4vw,2.6rem); color:var(--red);
  margin:0 0 6px; font-variant-numeric:tabular-nums;
}
.stats__label{ margin:0; font-size:.84rem; color:var(--mute-light); }
@media (max-width:600px){
  .stats__num{ font-size:1.5rem; }
  .stats__label{ font-size:.72rem; }
  .stats__item{ padding-inline:4px; }
}

/* ── Sections, shared ───────────────────────────────────── */
.section{ padding-block:clamp(60px,8vw,104px); }
.section--light{ background:var(--sand); color:var(--ink); }
.section--dark{ background:var(--coal); color:var(--on-dark); }

.section__head{ margin-bottom:clamp(36px,4.5vw,56px); position:relative; }
.section__head h2::after{
  content:""; display:block; margin-top:18px;
  width:52px; height:3px; background:var(--red);
  transform-origin:left;
}
.section--dark .section__head h2::after{ background:var(--gold); }
.section__lede{ margin:16px 0 0; max-width:52ch; font-size:1.02rem; }
.section--light .section__lede{ color:var(--mute-light); }
.section--dark .section__lede{ color:var(--mute-dark); }

/* A one-shot keyframe animation, not a transition-on-class-toggle: it plays
   reliably the instant `is-in` is added, with no dependency on the browser
   having already painted the "before" state first. */
@media (prefers-reduced-motion:no-preference){
  html.js .section__head{ opacity:0; transform:translateY(14px); }
  html.js .section__head h2::after{ transform:scaleX(0); }
  .section__head.is-in{ animation:headReveal .6s var(--ease) forwards; }
  .section__head.is-in h2::after{ animation:underlineDraw .6s var(--ease) .15s forwards; }
}
@keyframes headReveal{ to{ opacity:1; transform:none; } }
@keyframes underlineDraw{ to{ transform:scaleX(1); } }

/* ── About ──────────────────────────────────────────────── */
.about__banner{
  width:100%; aspect-ratio:1000 / 236; object-fit:cover;
  margin-bottom:clamp(36px,4.5vw,56px);
}
.about{ display:grid; gap:clamp(36px,4.5vw,64px); }
@media (min-width:900px){ .about{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); } }

.about__lead{ font-size:1.25rem; font-weight:500; line-height:1.35; letter-spacing:-.005em; }
.about__prose p{ max-width:56ch; }
.about__prose p + p{ color:var(--mute-light); font-size:1.02rem; }

.statements{ display:flex; flex-direction:column; gap:26px; }
.statement{
  padding:22px 0 24px 22px;
  border-left:3px solid var(--red);
  background:var(--sand-2);
  padding-block:24px; padding-inline:22px;
}
.statement__tag{
  font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--red); margin:0 0 10px;
}
.statement p:last-child{ color:var(--mute-light); margin:0; }

/* ── Awards ─────────────────────────────────────────────── */
.awards-list{ display:flex; flex-direction:column; gap:20px; }
.award{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(24px,4vw,48px);
  background:var(--sand-2); border-left:3px solid var(--red);
  padding:clamp(24px,3vw,36px);
}
.award__badge{ width:clamp(96px,12vw,140px); height:auto; flex:none; }
.award__name{
  font-weight:600; font-size:1.15rem;
  margin:0 0 8px;
}
.award__text{ max-width:52ch; }
.award__text p:last-child{ color:var(--mute-light); margin:0; }

/* ── Scope ──────────────────────────────────────────────── */
.scope{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,4vw,20px) clamp(20px,3vw,40px);
}
@media (min-width:760px){ .scope{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.scope__item{ padding-right:12px; }
.scope__icon{ width:38px; height:38px; color:var(--red); margin-bottom:18px; }
.scope__item h3{ margin-bottom:8px; }
.scope__item p{ color:var(--mute-light); font-size:.94rem; max-width:26ch; }

/* icons draw themselves in, like a drawing being drafted — a one-shot
   keyframe animation, so it always plays regardless of when `is-in` lands */
html.js .scope__icon :is(path,rect,circle):not(.scope__icon-dot){
  stroke-dasharray:100; stroke-dashoffset:100;
}
html.js .scope__icon-dot{ opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .scope__item.is-in .scope__icon :is(path,rect,circle):not(.scope__icon-dot){
    animation:iconDraw .8s ease forwards;
  }
  .scope__item.is-in .scope__icon-dot{ animation:iconDot .3s ease .55s forwards; }
  .scope__icon > *:nth-child(1){ animation-delay:0s; }
  .scope__icon > *:nth-child(2){ animation-delay:.08s; }
  .scope__icon > *:nth-child(3){ animation-delay:.16s; }
  .scope__icon > *:nth-child(4){ animation-delay:.24s; }
  .scope__icon > *:nth-child(5){ animation-delay:.32s; }
  .scope__icon > *:nth-child(6){ animation-delay:.4s; }
  .scope__icon > *:nth-child(7){ animation-delay:.48s; }
  .scope__icon > *:nth-child(8){ animation-delay:.56s; }
}
.scope__item.is-in .scope__icon :is(path,rect,circle):not(.scope__icon-dot){ stroke-dashoffset:0; }
.scope__item.is-in .scope__icon-dot{ opacity:1; }
@keyframes iconDraw{ to{ stroke-dashoffset:0; } }
@keyframes iconDot{ to{ opacity:1; } }

/* ── Gallery: a full-bleed strip of site photography ─────── */
.gallery{
  display:grid; grid-template-columns:1fr;
  background:var(--coal);
}
@media (min-width:760px){ .gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.gallery__item{ margin:0; overflow:hidden; aspect-ratio:4 / 3; }
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05);
  transition:transform .5s var(--ease);
}
@media (hover:hover){
  .gallery__item:hover img{ transform:scale(1.045); }
}

/* ── Approach ───────────────────────────────────────────── */
.approach{ display:grid; gap:clamp(32px,4.5vw,56px); }
@media (min-width:960px){ .approach{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:start; } }
.approach__art{
  display:none;
  width:100%; aspect-ratio:3 / 4; object-fit:cover;
  border:1.5px solid var(--ink);
}
@media (min-width:960px){ .approach__art{ display:block; } }

/* ── Timeline (the one true sequence) ───────────────────── */
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before,.timeline::after{
  content:""; position:absolute; left:19px; top:6px; bottom:6px; width:2px;
}
.timeline::before{ background:var(--sand-3); }
.timeline::after{ background:var(--red); height:0%; }
.timeline.is-in::after{ height:100%; }
@media (prefers-reduced-motion:no-preference){
  .timeline.is-in::after{ animation:fillLine 1.3s var(--ease) forwards; }
}
@keyframes fillLine{ from{ height:0%; } to{ height:100%; } }

.timeline__item{
  position:relative;
  display:grid; grid-template-columns:40px minmax(0,1fr); gap:0 24px;
  padding-bottom:clamp(28px,3.4vw,40px);
}
.timeline__item:last-child{ padding-bottom:0; }
.timeline__node{
  position:relative; z-index:1;
  width:40px; height:40px; border-radius:50%;
  background:var(--sand); border:2px solid var(--sand-3);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; color:var(--mute-light);
}
.timeline.is-in .timeline__node{ border-color:var(--red); color:var(--red); }
@media (prefers-reduced-motion:no-preference){
  .timeline.is-in .timeline__node{ animation:nodeActivate .4s ease forwards; }
  .timeline__item:nth-child(1) .timeline__node{ animation-delay:.05s; }
  .timeline__item:nth-child(2) .timeline__node{ animation-delay:.28s; }
  .timeline__item:nth-child(3) .timeline__node{ animation-delay:.51s; }
  .timeline__item:nth-child(4) .timeline__node{ animation-delay:.74s; }
  .timeline__item:nth-child(5) .timeline__node{ animation-delay:.97s; }
}
@keyframes nodeActivate{ to{ border-color:var(--red); color:var(--red); } }

.timeline__body{ padding-top:6px; }
.timeline__body h3{ margin-bottom:6px; }
.timeline__body p{ color:var(--mute-light); max-width:56ch; }

/* ── Safety ─────────────────────────────────────────────── */
.section--safety{ border-top:3px solid var(--red); }
.section--safety h2{ max-width:16ch; }
.safety{ display:grid; gap:clamp(32px,4.5vw,56px); align-items:center; }
@media (min-width:900px){ .safety{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }
.safety__cols{ display:grid; gap:18px; }
.safety__cols p{ color:var(--mute-light); max-width:56ch; }
.safety__photo{ width:100%; aspect-ratio:4 / 3; object-fit:cover; }

/* ── Projects ───────────────────────────────────────────── */
.projects-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--sand-3); }
.projects-list__item{
  position:relative;
  padding:18px 0 18px 24px;
  border-bottom:1px solid var(--sand-3);
}
html.js .projects-list__item{ opacity:0; transform:translateX(-14px); }
.projects-list__item::before{
  content:""; position:absolute; left:0; top:26px;
  width:7px; height:7px; background:var(--red);
  transition:background-color .2s ease;
}
.projects-list__item span{
  font-size:1.02rem; line-height:1.5; max-width:62ch; display:inline-block;
  transition:transform .2s ease;
}
.projects-list__item:hover::before{ background:var(--ink); }
.projects-list__item:hover span{ transform:translateX(4px); }

.projects-list.is-in .projects-list__item{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
  .projects-list.is-in .projects-list__item{ animation:rowIn .55s var(--ease) forwards; }
  .projects-list.is-in .projects-list__item:nth-child(1){ animation-delay:.03s; }
  .projects-list.is-in .projects-list__item:nth-child(2){ animation-delay:.08s; }
  .projects-list.is-in .projects-list__item:nth-child(3){ animation-delay:.13s; }
  .projects-list.is-in .projects-list__item:nth-child(4){ animation-delay:.18s; }
  .projects-list.is-in .projects-list__item:nth-child(5){ animation-delay:.23s; }
  .projects-list.is-in .projects-list__item:nth-child(6){ animation-delay:.28s; }
  .projects-list.is-in .projects-list__item:nth-child(7){ animation-delay:.33s; }
  .projects-list.is-in .projects-list__item:nth-child(8){ animation-delay:.38s; }
  .projects-list.is-in .projects-list__item:nth-child(9){ animation-delay:.43s; }
}
@keyframes rowIn{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:none; } }

/* ── Contact ────────────────────────────────────────────── */
.contact__grid{ display:grid; gap:clamp(34px,4vw,60px); align-items:start; }
@media (min-width:920px){ .contact__grid{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); } }

.contact__photo{
  width:100%; margin-bottom:22px;
  aspect-ratio:4 / 3; object-fit:cover; object-position:center 8%;
  filter:saturate(1.05);
}
.contact__facts{ margin:0; }
.contact__fact{ padding:16px 0; border-top:1px solid var(--sand-3); }
.contact__fact dt{
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mute-light); margin-bottom:6px;
}
.contact__fact dd{ margin:0; font-size:1rem; }
.contact__fact dd a{ text-decoration:none; border-bottom:1px solid var(--sand-3); }
.contact__fact dd a:hover{ border-bottom-color:var(--red); color:var(--red); }

.form{ margin:0; }
.form__row{ display:grid; gap:0 20px; margin:0; }
@media (min-width:560px){
  .form__row--name{ grid-template-columns:130px minmax(0,1fr); }
  .form__row--pair{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.field{ margin:0 0 22px; display:block; }
.field label{
  display:block; margin-bottom:8px;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mute-light);
}
.field label b{ color:var(--red); font-weight:inherit; }

.field input,.field select,.field textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1.5px solid var(--sand-3);
  padding:10px 2px;
  border-radius:0;
  transition:border-color .2s ease;
}
.field textarea{ resize:vertical; min-height:110px; line-height:1.55; }
.field select{
  appearance:none; cursor:pointer; padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236B6355' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
}
.field select option{ color:var(--ink); }
.field input::placeholder,.field textarea::placeholder{ color:var(--mute-light); opacity:.7; }
.field input:hover,.field select:hover,.field textarea:hover{ border-bottom-color:var(--mute-light); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--red); }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-bottom-color:var(--red); }

.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:26px 0 0; }
.form__req{ font-size:.8rem; color:var(--mute-light); }
.form__req b{ color:var(--red); font-weight:inherit; }

.form__status{ margin:18px 0 0; font-size:.92rem; display:none; padding:12px 16px; border-left:3px solid var(--sand-3); }
.form__status.is-on{ display:block; }
.form__status.is-ok{ border-left-color:#2F8455; background:rgba(47,132,85,.09); color:#1F6640; }
.form__status.is-err{ border-left-color:var(--red); background:rgba(199,51,31,.08); color:var(--red-deep); }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{ background:var(--coal); color:var(--mute-dark); padding-block:clamp(34px,4vw,48px); border-top:1px solid var(--coal-3); }
.site-footer__in{ display:grid; gap:8px; }
.site-footer__name{ color:var(--on-dark); font-weight:600; font-size:1.05rem; margin:0; }
.site-footer__name span{ font-family:var(--body); font-weight:400; color:var(--mute-dark); font-size:.78rem; letter-spacing:.04em; }
.site-footer__addr{ margin:0; font-size:.9rem; }
.site-footer__copy{ margin:14px 0 0; font-size:.78rem; color:#7C7466; }

@media print{
  .site-header,.burger,.hero__scroll,.form,.hero__actions,.progress{ display:none; }
  body{ background:#fff; color:#000; }
}