/* ============================================================
   RKW — DESIGN MOCKUP V2
   PT Rencana Kita Wisesa · Homepage stylesheet
   Structure:
     1. Tokens
     2. Base & utilities
     3. Image placeholders
     4. Buttons & links
     5. Navigation
     6. Hero
     7. Solutions
     8. Projects
     9. Capability
    10. Clients / Certifications
    11. CTA & form
    12. Footer
    13. Motion
    14. Responsive
   ============================================================ */

/* ============ 1. TOKENS ============ */
:root{
  /* surface */
  --ink:        #0E0F10;   /* near black — dark sections */
  --graphite:   #17191B;   /* raised dark surface */
  --paper:      #F1F0EC;   /* warm off-white — default page */
  --paper-2:    #E7E5DF;   /* recessed light surface */

  /* content */
  --text:       #14161A;
  --text-dim:   #5E646A;
  --on-dark:    #F4F3F0;
  --on-dark-dim:#9BA1A7;

  /* structure */
  --steel:      #6E7479;
  --rule:       rgba(20,22,26,0.14);
  --rule-dark:  rgba(244,243,240,0.14);

  /* accent — used sparingly: CTA, active state, small markers */
  --signal:     #F2C200;
  --signal-ink: #1A1500;

  /* type */
  --display: 'Archivo', 'Arial Narrow', Helvetica, sans-serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* layout */
  --shell: 1320px;
  --gutter: clamp(20px, 5vw, 56px);
  --band: clamp(88px, 11vw, 168px);   /* vertical section rhythm */
  --nav-h: 76px;
}

/* ============ 2. BASE & UTILITIES ============ */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(15px, 1.05vw, 17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
ul, ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button, input, textarea{ font:inherit; color:inherit; }

h1, h2, h3, h4{
  font-family:var(--display);
  font-weight:700;
  font-stretch:88%;          /* Archivo variable width — condensed industrial */
  line-height:1.02;
  letter-spacing:-0.015em;
  margin:0;
}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--band); }
.section--dark{ background:var(--ink); color:var(--on-dark); }
.section--dark h2, .section--dark h3{ color:var(--on-dark); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--signal); color:var(--signal-ink);
  padding:12px 18px; font-size:14px;
}
.skip:focus{ left:12px; top:12px; }

:where(a, button, input, textarea):focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}

/* section headers */
.head{ max-width:44ch; margin-bottom:clamp(40px, 5vw, 72px); }
.head--split{
  max-width:none; display:flex; gap:32px;
  align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
}
.head__index{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--steel); margin-bottom:18px;
}
.section--dark .head__index{ color:var(--signal); }
.head__title{ font-size:clamp(34px, 5vw, 66px); }
.head__note{
  margin-top:20px; color:var(--text-dim); max-width:46ch; font-size:1.02rem;
}

/* ============ 3. IMAGE PLACEHOLDERS ============
   Flat neutral grey + hatch + explicit label.
   Swap the .shot element for <img> when real photography lands. */
.shot{
  position:relative;
  width:100%;
  background-color:#C9C7C1;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(20,22,26,0.05) 0 1px,
      transparent 1px 11px);
  overflow:hidden;
}
.section--dark .shot{ background-color:#2A2D30; }
.shot__tag{
  position:absolute; left:16px; bottom:16px; right:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.05em;
  color:#3A3D40; text-transform:uppercase;
}
.section--dark .shot__tag, .hero .shot__tag{ color:#8C9095; }

.shot--21x9{ aspect-ratio:21/9; }
.shot--16x9{ aspect-ratio:16/9; }
.shot--4x3 { aspect-ratio:4/3; }
.shot--3x2 { aspect-ratio:3/2; }
.shot--3x4 { aspect-ratio:3/4; }
.shot--fill{ position:absolute; inset:0; height:100%; aspect-ratio:auto; }

/* ============ 4. BUTTONS & LINKS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 26px;
  font-family:var(--body); font-size:0.94rem; font-weight:600;
  letter-spacing:0.01em; border:1px solid transparent;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn--signal{ background:var(--signal); color:var(--signal-ink); }
.btn--signal:hover{ background:#FFD52B; }
.btn--ghost{ border-color:rgba(244,243,240,0.4); color:var(--on-dark); }
.btn--ghost:hover{ border-color:var(--on-dark); background:rgba(244,243,240,0.08); }
.btn--sm{ padding:11px 18px; font-size:0.85rem; }
.btn--block{ width:100%; }

.link{
  display:inline-block; margin-top:18px;
  font-size:0.9rem; font-weight:600;
  padding-bottom:3px;
  border-bottom:1px solid currentColor;
  transition:opacity .2s ease;
}
.link--lg{ margin-top:0; font-size:1rem; }
a:hover .link, .link:hover{ opacity:0.6; }

/* ============ 5. NAVIGATION ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background-color .25s ease, border-color .25s ease, height .25s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(14,15,16,0.94);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--rule-dark);
  height:64px;
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:baseline; gap:12px; color:var(--on-dark); }
.brand__mark{
  font-family:var(--display); font-weight:800; font-stretch:80%;
  font-size:22px; letter-spacing:0.02em;
}
.brand__name{
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--on-dark-dim);
}
.nav__links{ display:flex; gap:30px; }
.nav__links a{
  color:var(--on-dark); font-size:0.92rem; font-weight:500;
  padding:6px 0; border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.nav__links a:hover{ border-bottom-color:rgba(244,243,240,0.5); }
.nav__links a.is-active{ border-bottom-color:var(--signal); }
.nav__end{ display:flex; align-items:center; gap:14px; }

.burger{
  display:none; width:42px; height:42px;
  background:none; border:1px solid var(--rule-dark);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ width:18px; height:1.5px; background:var(--on-dark); transition:transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.drawer{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:99;
  background:var(--ink); color:var(--on-dark);
  padding:40px var(--gutter);
  display:flex; flex-direction:column; gap:28px;
}
.drawer[hidden]{ display:none; }
.drawer__links{ display:flex; flex-direction:column; gap:4px; }
.drawer__links a{
  font-family:var(--display); font-weight:700; font-stretch:88%;
  font-size:clamp(30px, 9vw, 44px); line-height:1.25;
  border-bottom:1px solid var(--rule-dark); padding-block:10px;
}
.drawer__cta{ align-self:flex-start; }
.drawer__meta{
  font-family:var(--mono); font-size:12px; line-height:1.9;
  color:var(--on-dark-dim); margin-top:auto;
}

/* ============ 6. HERO ============ */
.hero{
  position:relative;
  min-height:min(92vh, 860px);
  display:flex; align-items:flex-end;
  padding-block:calc(var(--nav-h) + 48px) clamp(56px, 8vw, 96px);
  background:var(--ink); color:var(--on-dark);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(14,15,16,0.94) 0%, rgba(14,15,16,0.72) 38%, rgba(14,15,16,0.35) 100%);
}
/* subtle engineering-drawing layer — a detail, not the focal point */
.blueprint{
  position:absolute; inset:0; opacity:0.16;
  background-image:
    linear-gradient(to right, rgba(244,243,240,0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,243,240,0.5) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:linear-gradient(to left, rgba(0,0,0,0.9), transparent 62%);
  -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,0.9), transparent 62%);
}
.hero__inner{ position:relative; z-index:2; }
.hero__kicker{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--signal); margin-bottom:26px;
}
.hero__title{
  font-size:clamp(52px, 10.5vw, 132px);
  font-weight:800; font-stretch:82%;
  letter-spacing:-0.03em; line-height:0.92;
  text-transform:uppercase;
}
.hero__lede{
  margin-top:28px; max-width:52ch;
  font-size:clamp(1rem, 1.35vw, 1.18rem);
  color:var(--on-dark-dim);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }
.hero__trust{
  display:flex; flex-wrap:wrap; gap:24px; margin-top:40px;
  padding-top:20px; border-top:1px solid var(--rule-dark);
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.12em;
  color:var(--on-dark-dim);
}
/* drawing title-block style plate, bottom-right */
.hero__plate{
  position:absolute; right:var(--gutter); bottom:clamp(56px, 8vw, 96px); z-index:2;
  display:flex; flex-direction:column; gap:6px; text-align:right;
  padding-right:14px; border-right:2px solid var(--signal);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  color:var(--on-dark-dim); text-transform:uppercase;
}

/* ============ 7. SOLUTIONS ============ */
.sol-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(28px, 3vw, 48px) clamp(24px, 2.4vw, 36px);
}
.sol--lead{ grid-column:1 / -1; }
.sol__content{ display:block; }
.sol .shot{ transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.sol__content:hover .shot{ transform:scale(1.015); }
.sol__body{ padding-top:22px; }
.sol--lead .sol__body{
  display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap:8px 48px; align-items:start;
}
.sol__title{ font-size:clamp(21px, 2.1vw, 30px); }
.sol__text{ margin-top:10px; color:var(--text-dim); max-width:44ch; }
.sol--lead .sol__title{ font-size:clamp(28px, 3.4vw, 44px); margin-top:0; }
.sol--lead .sol__text{ margin-top:0; }

/* ============ 8. PROJECTS ============ */
.proj-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(36px, 4vw, 64px) clamp(24px, 2.4vw, 40px);
}
.proj--lead{ grid-column:1 / -1; }
.proj--lead .proj__link{
  display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap:clamp(24px, 3vw, 56px); align-items:end;
}
.proj .shot{ transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.proj__link:hover .shot{ transform:scale(1.02); }
.proj__meta{ padding-top:22px; }
.proj--lead .proj__meta{ padding-top:0; padding-bottom:6px; }
.proj__client{
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--signal); margin-bottom:14px;
}
.proj__title{ font-size:clamp(22px, 2.4vw, 34px); }
.proj__scope{ margin-top:12px; color:var(--on-dark-dim); max-width:42ch; font-size:0.96rem; }

/* ============ 9. CAPABILITY ============ */
.cap__inner{
  display:grid; grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap:clamp(36px, 6vw, 96px); align-items:start;
}
.cap__media{ position:sticky; top:calc(var(--nav-h) + 32px); }
.cap__caption{
  margin-top:14px; font-family:var(--mono); font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--steel);
}
.cap__list{ border-top:1px solid var(--rule); }
.cap__list li{
  display:grid; grid-template-columns:64px 1fr;
  gap:16px; padding-block:clamp(22px, 2.4vw, 32px);
  border-bottom:1px solid var(--rule);
}
.cap__num{
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em;
  color:var(--steel); padding-top:6px;
}
.cap__list h3{ font-size:clamp(19px, 1.7vw, 25px); }
.cap__list p{ margin-top:8px; color:var(--text-dim); max-width:48ch; }
.cap__closing{
  margin-top:32px; font-size:1.05rem; max-width:48ch;
  padding-left:18px; border-left:2px solid var(--signal);
}

/* ============ 10. CLIENTS / CERTIFICATIONS ============ */
.clients{
  background:var(--paper-2);
  padding-block:clamp(28px, 3.5vw, 44px);
  border-block:1px solid var(--rule);
}
.clients__inner{
  display:flex; align-items:center; gap:clamp(24px, 4vw, 64px); flex-wrap:wrap;
}
.clients__label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--steel); white-space:nowrap;
}
.clients__list{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(20px, 3.5vw, 56px); margin-left:auto;
}
.clients__list li{
  font-family:var(--display); font-weight:700; font-stretch:85%;
  font-size:clamp(17px, 1.7vw, 23px); color:#8A8F94;
}

.certs{ padding-block:clamp(56px, 7vw, 96px); }
.certs__inner{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:32px; flex-wrap:wrap;
}
.certs__title{ font-size:clamp(22px, 2.2vw, 30px); }
.certs__list{
  display:flex; flex-wrap:wrap; gap:clamp(24px, 4vw, 64px);
  font-size:0.95rem; color:var(--text-dim);
}
.certs__list span{
  display:block; font-family:var(--display); font-weight:700; font-stretch:88%;
  font-size:clamp(20px, 1.9vw, 26px); color:var(--text); margin-bottom:4px;
}

/* ============ 11. CTA & FORM ============ */
.cta__inner{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap:clamp(40px, 6vw, 96px); align-items:start;
}
.cta__title{ font-size:clamp(34px, 4.6vw, 62px); max-width:16ch; }
.cta__text{ margin-top:22px; color:var(--on-dark-dim); max-width:44ch; }
.cta__contact{
  display:flex; gap:48px; flex-wrap:wrap; margin:40px 0 0;
  padding-top:24px; border-top:1px solid var(--rule-dark);
}
.cta__contact dt{
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--steel); margin-bottom:6px;
}
.cta__contact dd{ margin:0; }
.cta__contact a{ border-bottom:1px solid var(--rule-dark); padding-bottom:2px; }
.cta__contact a:hover{ border-bottom-color:var(--signal); }

.form{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--on-dark-dim);
}
.field input, .field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--rule-dark);
  color:var(--on-dark); padding:10px 0; font-size:1rem;
  border-radius:0; resize:vertical;
  transition:border-color .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:#6B7176; }
.field input:focus, .field textarea:focus{
  outline:none; border-bottom-color:var(--signal);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{
  border-bottom-color:#E06B5A;
}
.form__status{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em;
  color:var(--on-dark-dim); min-height:1.2em;
}

/* ============ 12. FOOTER ============ */
.foot{ background:var(--graphite); color:var(--on-dark); padding-top:clamp(56px, 6vw, 88px); }
.foot__inner{
  display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;
  gap:clamp(28px, 3vw, 48px);
}
.foot__brand p{ margin-top:14px; color:var(--on-dark-dim); max-width:26ch; font-size:0.92rem; }
.foot__heading{
  font-family:var(--mono); font-weight:500; font-size:11px; font-stretch:100%;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--steel); margin-bottom:16px;
}
.foot__col p, .foot__col li{ color:var(--on-dark-dim); font-size:0.92rem; line-height:1.8; }
.foot__col a:hover{ color:var(--on-dark); }
.foot__contact{ margin-top:16px; }
.foot__base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:clamp(48px, 5vw, 72px); padding-block:24px;
  border-top:1px solid var(--rule-dark);
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--steel);
}

/* ============ 13. MOTION ============
   One orchestrated hero entrance + a quiet fade-up for media blocks. */
.reveal{ opacity:1; transform:none; }
.js-reveal .reveal{ opacity:0; transform:translateY(18px); }
.js-reveal .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1);
}
.hero__kicker, .hero__title, .hero__lede, .hero__actions, .hero__trust{
  opacity:0; transform:translateY(14px);
  animation:rise .9s cubic-bezier(.2,.6,.2,1) forwards;
}
.hero__title{ animation-delay:.08s; }
.hero__lede{ animation-delay:.16s; }
.hero__actions{ animation-delay:.24s; }
.hero__trust{ animation-delay:.32s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__kicker, .hero__title, .hero__lede, .hero__actions, .hero__trust{ opacity:1; transform:none; }
}

/* ============ 14. RESPONSIVE ============ */

/* Tablet */
@media (max-width: 1024px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .nav__end .btn--sm{ display:none; }

  .sol-grid{ grid-template-columns:repeat(2, 1fr); }
  .sol--lead .sol__body{ grid-template-columns:1fr; gap:12px; }
  .proj--lead .proj__link{ grid-template-columns:1fr; align-items:start; }
  .proj--lead .proj__meta{ padding-top:22px; }

  .cap__inner{ grid-template-columns:1fr; }
  .cap__media{ position:static; max-width:520px; }
  .cta__inner{ grid-template-columns:1fr; }

  .foot__inner{ grid-template-columns:repeat(2, 1fr); gap:40px; }
  .hero__plate{ display:none; }
}

/* Mobile — reordered and re-cropped, not a shrunk desktop */
@media (max-width: 680px){
  :root{ --nav-h:64px; }

  .hero{ min-height:auto; align-items:stretch; padding-bottom:48px; }
  .hero__title{ font-size:clamp(40px, 13vw, 60px); line-height:0.95; }
  .hero__lede{ font-size:1rem; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .hero__trust{ gap:14px 20px; }
  /* portrait crop reads better on a phone than a 21:9 band */
  .hero__media .shot--fill{ background-size:auto; }

  .sol-grid{ grid-template-columns:1fr; gap:44px; }
  .sol--lead .shot--21x9{ aspect-ratio:4/3; }
  .proj-grid{ grid-template-columns:1fr; gap:48px; }
  .proj--lead .shot--16x9{ aspect-ratio:4/3; }

  .cap__list li{ grid-template-columns:40px 1fr; gap:10px; }
  .clients__inner{ flex-direction:column; align-items:flex-start; gap:18px; }
  .clients__list{ margin-left:0; gap:18px 28px; }
  .certs__inner{ flex-direction:column; gap:28px; }
  .certs__list{ flex-direction:column; gap:20px; }

  .foot__inner{ grid-template-columns:1fr; gap:36px; }
  .foot__base{ flex-direction:column; gap:8px; }
}

/* Production integration — V2 composition retained. */
[hidden]{display:none!important}
.brand{align-items:center}.brand__logo{width:132px;height:54px;object-fit:contain}.foot__brand .brand__logo{width:180px;height:auto}
.shot{background-image:none}.shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.hero .shot img{object-position:50% 50%}
.shot--detail{display:flex;align-items:center;justify-content:center;background:var(--paper-2)}.shot--detail img{position:static;width:min(100%,305px);height:auto;object-fit:contain}
.sol__number{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--text-dim);margin-bottom:12px;font-weight:400}
.cap__intro{margin:0 0 32px;color:var(--text-dim);max-width:46ch}.cap__content .head{margin-bottom:24px}
.clients__inner{display:block}.clients__title{font-size:clamp(22px,3vw,34px);margin-bottom:12px}.clients__label{white-space:normal;line-height:1.8;color:var(--text-dim)}
.clients__list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 30px;margin:32px 0 0}.clients__list li{height:64px;display:flex;align-items:center;justify-content:center}.clients__list img{max-width:130px;max-height:48px;width:auto;height:auto;object-fit:contain}
.certs__note{color:var(--text-dim);margin-top:12px}.cert-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:32px}.cert a{display:flex;align-items:center;gap:18px;padding-top:24px;border-top:1px solid var(--rule)}.cert img{width:86px;height:auto;flex:none}.cert h3{font-size:24px}.cert p{font-size:14px;margin-top:8px;color:var(--text-dim)}.cert__format{display:block;font-size:11px;color:var(--text-dim);margin-top:8px}
.form__note{font-size:13px;color:var(--on-dark-dim)}.form__note a{text-decoration:underline}.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--signal);outline-offset:4px}.field textarea::placeholder{color:#9ba1a7}
.foot__heading,.foot__base,.cta__contact dt{color:var(--on-dark-dim)}.head__index,.cap__caption,.cap__num{color:var(--text-dim)}.section--dark .head__index{color:var(--signal)}
:where(a,button):focus-visible{outline-color:#946d00}.section--dark :focus-visible,.nav :focus-visible,.drawer :focus-visible,.foot :focus-visible{outline-color:var(--signal)}
.drawer{overflow-y:auto;overscroll-behavior:contain}.nav.menu-open{background:var(--ink);height:var(--nav-h)}.burger{min-width:44px;min-height:44px;cursor:pointer}.foot__col a{display:inline-block;padding-block:5px}
.page-projects .nav{background:var(--ink)}.projects-intro{padding:calc(var(--nav-h) + 72px) 0 64px}.projects-intro .head__title{max-width:15ch;font-size:clamp(44px,7vw,88px)}.projects-intro .head__note{color:var(--on-dark-dim)}.gallery-jump{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px}.gallery-jump a{padding-block:10px;border-bottom:1px solid var(--rule-dark)}
.gallery-group{padding-top:80px;padding-bottom:80px;scroll-margin-top:var(--nav-h)}.gallery-group+.gallery-group{border-top:1px solid var(--rule)}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}.gallery__item{margin:0}.gallery__item .shot img{object-fit:contain;background:var(--paper-2)}.gallery__item figcaption{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-top:14px}.gallery__item figcaption span{font-family:var(--mono);color:var(--text-dim)}.gallery-cta{margin-top:32px}
@media(min-width:1025px){.nav__links{gap:24px}.brand__logo{width:130px}.nav__inner{gap:20px}}
@media(max-width:1024px){.clients__list{grid-template-columns:repeat(4,minmax(0,1fr))}.cert-grid{gap:20px}.cert a{flex-direction:column;align-items:flex-start}.cert img{width:110px}.cap__media{max-width:520px;width:100%}}
@media(max-width:680px){.hero .shot img{object-position:82% 50%}.hero__scrim{background:linear-gradient(to top,rgba(14,15,16,.97),rgba(14,15,16,.76) 55%,rgba(14,15,16,.38))}.brand__logo{width:118px;height:50px}.clients__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.cert-grid{grid-template-columns:1fr;gap:24px}.cert a{flex-direction:row;align-items:center;gap:24px}.cert img{width:96px}.gallery{grid-template-columns:1fr;gap:32px}.gallery-group{padding-block:56px}.head__title{overflow-wrap:break-word}.cap__media .shot{aspect-ratio:4/3}.cta__contact{gap:24px}.drawer{padding-top:24px;gap:20px}.gallery-jump{gap:8px 20px}}
@media(prefers-reduced-motion:reduce){.js-reveal .reveal{opacity:1;transform:none}.sol__content:hover .shot,.proj__link:hover .shot{transform:none}}

/* Block links give project media a stable paint and focus area. */
.proj__link{display:block}

/* Readable supporting text over genuine project photography. */
.hero__lede{color:#D5D7D8}.hero__trust{color:#B5BBBF}

/* Focused refinement: preserve the approved V2 layout. */
:root{--motion-duration:780ms;--motion-ease:cubic-bezier(.16,1,.3,1)}
.hero .shot img{filter:brightness(.84) saturate(.88)}
.hero__scrim{background:linear-gradient(90deg,rgba(14,15,16,.87) 0%,rgba(14,15,16,.65) 44%,rgba(14,15,16,.2) 100%),linear-gradient(0deg,rgba(14,15,16,.88),transparent 80%)}
.hero__title--business{font-size:clamp(46px,6.8vw,88px);line-height:1.02;max-width:19ch;text-wrap:balance}
.hero__tagline{font-family:var(--mono);font-size:12px;letter-spacing:.12em;margin-top:24px;color:var(--on-dark-dim)}
.sol .shot img{object-position:var(--image-position,center)}
.engineering-study{background:var(--graphite);aspect-ratio:4/5;overflow:hidden}.engineering-study img{display:block;width:100%;height:100%;object-fit:contain}
.js-reveal .reveal{opacity:0;transform:translateY(44px)}
.js-reveal .reveal.is-in{opacity:1;transform:none;transition:opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.sol .shot,.proj .shot{transition:none}.sol__content:hover .shot,.proj__link:hover .shot{transform:none}
.sol .shot img,.proj .shot img,.gallery__item .shot img,.cert img{transition:transform var(--motion-duration) var(--motion-ease)}
.link{position:relative;border-bottom-color:transparent}.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(.55);transform-origin:left;transition:transform 250ms ease}
.client-marquee{margin-top:32px;overflow:hidden}
.client-marquee .clients__list{margin-top:0}
.client-marquee.is-enabled .client-marquee__track{display:flex;width:max-content;animation:client-drift 78s linear infinite;will-change:transform}
.client-marquee.is-enabled .clients__list{display:flex;flex:none;flex-wrap:nowrap;gap:40px;padding-right:40px}
.client-marquee.is-enabled .clients__list li{flex:none;width:146px;height:72px}
.client-marquee.is-enabled .clients__list img{max-width:130px;max-height:48px;object-fit:contain}
.client-marquee.is-paused .client-marquee__track{animation-play-state:paused}
.marquee-toggle{display:block;margin-top:18px;padding:10px 0;background:none;border:0;border-bottom:1px solid var(--text-dim);font-family:var(--mono);font-size:12px;cursor:pointer;color:var(--text-dim);min-height:44px}
@keyframes client-drift{to{transform:translateX(-50%)}}
@media(hover:hover) and (pointer:fine){
 .sol__content:hover .shot:not(.shot--detail) img{transform:scale(1.03)}
 .proj__link:hover .shot img,.gallery__item:hover .shot img{transform:scale(1.04)}
 .cert a:hover img{transform:scale(1.02)}
 a:hover .link::after,.link:hover::after{transform:scaleX(1)}
 .client-marquee:hover .client-marquee__track{animation-play-state:paused}
}
a:focus-visible .link::after{transform:scaleX(1)}
@media(max-width:680px){
 .hero__scrim{background:linear-gradient(90deg,rgba(14,15,16,.86),rgba(14,15,16,.5)),linear-gradient(0deg,rgba(14,15,16,.93),transparent)}
 .hero__title--business{font-size:clamp(36px,9vw,56px);max-width:19ch}
 .client-marquee.is-enabled .clients__list{gap:24px;padding-right:24px}
 .client-marquee.is-enabled .clients__list li{width:132px}
}
@media(prefers-reduced-motion:reduce){
 .js-reveal .reveal{opacity:1!important;transform:none!important;transition:none!important}
 .sol .shot img,.proj .shot img,.gallery__item .shot img,.cert img{transform:none!important;transition:none!important}
 .client-marquee.is-enabled .client-marquee__track{display:block;width:auto;animation:none;transform:none;will-change:auto}
 .client-marquee.is-enabled .clients__list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:0;gap:24px 30px}
 .client-marquee.is-enabled .clients__list li{width:auto}
 .client-marquee [data-marquee-copy],.marquee-toggle{display:none!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:1024px){.client-marquee.is-enabled .clients__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce) and (max-width:680px){.client-marquee.is-enabled .clients__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}

/* Hero-only business hierarchy and readability. */
.hero__scrim{background:linear-gradient(90deg,rgba(14,15,16,.92) 0%,rgba(14,15,16,.78) 43%,rgba(14,15,16,.3) 100%),linear-gradient(0deg,rgba(14,15,16,.86),rgba(14,15,16,.12) 85%)}
.hero__title.hero__title--business{font-size:clamp(44px,5.3vw,76px);line-height:1.04;max-width:22ch;letter-spacing:-.025em;text-wrap:balance}
.hero__lede{max-width:57ch;margin-top:24px;color:#e0e2e1}
.hero__tagline{margin-top:20px;color:#c4c9c9;line-height:1.6;font-size:12px}
.hero__actions{margin-top:28px}
@media(max-width:680px){
 .hero{padding-top:calc(var(--nav-h) + 36px);padding-bottom:40px}
 .hero__kicker{margin-bottom:22px}
 .hero__title.hero__title--business{font-size:clamp(32px,8.7vw,42px);line-height:1.06;max-width:22ch}
 .hero__lede{margin-top:20px}
 .hero__tagline{margin-top:18px;font-size:11px}
 .hero__actions{margin-top:24px}
 .hero__trust{margin-top:28px;padding-top:18px}
 .hero__scrim{background:linear-gradient(90deg,rgba(14,15,16,.91),rgba(14,15,16,.58)),linear-gradient(0deg,rgba(14,15,16,.89),rgba(14,15,16,.14))}
}

/* Bilingual control; existing layout and motion are retained. */
.language-switch{display:flex;align-items:center;flex:none;gap:3px;color:var(--on-dark-dim);font-family:var(--mono);font-size:11px}
.language-switch button{appearance:none;background:none;border:0;border-bottom:1px solid transparent;color:var(--on-dark-dim);min-width:30px;min-height:44px;padding:8px 3px;font:inherit;cursor:pointer}
.language-switch button[aria-pressed="true"]{color:var(--signal);border-bottom-color:var(--signal)}
.language-switch button:hover{color:var(--on-dark)}
@media(max-width:680px){.nav__end{gap:8px}.nav__inner{gap:12px}.language-switch{gap:1px}}

/* Interaction polish: existing geometry, palette and photography retained. */
html{scroll-padding-top:calc(var(--nav-h) + 12px)}
.sol,.sol__content{cursor:default}
.btn{transition:background-color 220ms ease,color 220ms ease,border-color 220ms ease,transform 220ms ease,box-shadow 220ms ease}
.nav__links a{position:relative;border-bottom-color:transparent;transition:color 220ms ease}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform 220ms ease}
.nav__links a.is-active,.nav__links a:hover{border-bottom-color:transparent}
.nav__links a.is-active::after,.nav__links a[aria-current="page"]::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
.language-switch button{transition:color 220ms ease,border-color 220ms ease}
.link::after{transition-duration:220ms}
@media(hover:hover) and (pointer:fine){
 .btn:hover{transform:translateY(-2px)}
 .btn--signal:hover{box-shadow:0 6px 18px rgba(242,194,0,.18)}
 .nav__links a:hover::after{transform:scaleX(1)}
}
/* A keyboard-focused group must never be concealed pending scroll observation. */
.js-reveal .reveal:focus-within{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .btn,.language-switch button,.nav,.nav__links a,.nav__links a::after,.link::after{transition:none!important}
 .btn:hover{transform:none}
 .js-reveal .reveal{transition-delay:0ms!important}
}

/* Timed anchor travel must not compete with CSS/native smooth scrolling. */
html.is-section-scrolling{scroll-behavior:auto}
.nav{transition:background-color 300ms ease,border-color 300ms ease,height 250ms ease,backdrop-filter 300ms ease,box-shadow 300ms ease}
.nav.is-stuck{box-shadow:0 3px 18px rgba(0,0,0,.1)}
.proj__title{transition:color 250ms ease}
.proj__link:focus-visible .proj__title{color:var(--signal)}
@media(hover:hover) and (pointer:fine){
 .proj__link:hover .proj__title{color:var(--signal)}
}
.btn:active{transform:translateY(0) scale(.98);transition-duration:100ms}
@media(max-width:680px){.js-reveal .reveal{transform:translateY(35px)}.js-reveal .reveal.is-in,.js-reveal .reveal:focus-within{transform:none}}
@media(prefers-reduced-motion:reduce){.btn:active{transform:none}.proj__title{transition:none}}

/* Additive company resources and contact details. */
.safety{border-top:1px solid var(--rule-dark);color:var(--on-dark);background-color:var(--ink);background-image:linear-gradient(90deg,rgba(14,15,16,.93) 0%,rgba(14,15,16,.84) 43%,rgba(14,15,16,.52) 100%),;background-size:cover;background-position:center 48%}
.safety .head__title{color:var(--on-dark)}.safety .head__index{color:var(--signal)}.safety .head__note,.safety .safety__line{color:var(--on-dark-dim)}.safety .safety__line{border-top-color:var(--rule-dark)}
.safety__poster img{box-shadow:0 0 0 1px var(--rule-dark),0 16px 40px rgba(0,0,0,.25)}
.safety__inner{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:clamp(40px,7vw,112px)}
.safety__copy .head{margin-bottom:24px}.safety__copy .head__title{max-width:17ch}.safety__copy .head__note{max-width:46ch}
.safety__line{font-family:var(--mono);font-size:12px;line-height:1.8;color:var(--text-dim);border-top:1px solid var(--rule);padding-top:20px;max-width:42ch}
.safety__poster{margin:0;max-width:400px;justify-self:end;width:100%}.safety__poster img{display:block;width:100%;height:auto}
.resources{padding-block:clamp(48px,6vw,80px);border-top:1px solid var(--rule)}
.resources .head{margin-bottom:28px}.resources__title.head__title{font-size:clamp(22px,2.2vw,30px);letter-spacing:0}
.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.resource-card a{display:grid;grid-template-columns:136px minmax(0,1fr);align-items:center;gap:24px;height:100%;padding:24px;border:1px solid var(--rule);transition:transform 250ms ease,border-color 250ms ease,background-color 250ms ease}
.resource-card__preview{height:184px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.resource-card__preview img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform var(--motion-duration) var(--motion-ease)}
.resource-card h3{font-size:clamp(21px,2vw,26px);line-height:1.2}.resource-card p{font-size:14px;color:var(--text-dim);margin-top:12px}.resource-card__cta{display:inline-block;font-size:13px;margin-top:20px}.resource-card small{display:block;color:var(--text-dim);font-family:var(--mono);font-size:10px;margin-top:10px}
.social-links{display:flex;gap:8px;margin-top:18px}.social-links a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--on-dark-dim);border:1px solid var(--rule-dark);transition:transform 220ms ease,color 220ms ease,border-color 220ms ease}
.sales-float{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 18px;border:1px solid var(--signal);border-radius:32px;background:var(--signal);color:var(--signal-ink);font-size:13px;font-weight:600;box-shadow:0 4px 18px rgba(0,0,0,.15);animation:sales-entrance 780ms var(--motion-ease) backwards;transition:opacity 220ms ease,visibility 220ms ease,transform 220ms ease,box-shadow 220ms ease}
.sales-float svg,.sales-inline svg{flex:none}.sales-inline{margin-top:24px;gap:10px}
.sales-float.is-suppressed,.nav.menu-open ~ .sales-float{opacity:0;visibility:hidden;pointer-events:none}
@keyframes sales-entrance{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.hero__spotlight{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(circle 320px at var(--spot-x,75%) var(--spot-y,50%),rgba(244,243,240,.22) 0%,rgba(244,243,240,.10) 32%,transparent 74%);transition:opacity 250ms ease}
@media(hover:hover) and (pointer:fine){
 .resource-card a:hover{transform:translateY(-2px);border-color:var(--steel);background:var(--paper-2)}
 .resource-card a:hover img{transform:scale(1.025)}
 .social-links a:hover{color:var(--signal);border-color:var(--signal);transform:translateY(-2px)}
 .sales-float:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.2)}
}
@media(hover:hover) and (pointer:fine) and (min-width:1025px){.hero.has-spotlight .hero__spotlight{opacity:1}}
.sales-float:active{transform:scale(.98)}
@media(max-width:1024px){.resource-card a{grid-template-columns:104px minmax(0,1fr);gap:18px;padding:20px}.resource-card__preview{height:148px}}
@media(max-width:800px){.resource-grid{grid-template-columns:1fr}.resource-card a{grid-template-columns:128px minmax(0,1fr)}}
@media(max-width:680px){
 .safety__inner{grid-template-columns:1fr;gap:32px}.safety__poster{justify-self:center;max-width:340px}
 .resource-card a{grid-template-columns:88px minmax(0,1fr);gap:16px;padding:18px}.resource-card__preview{height:124px}
 .sales-float{right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:48px;height:48px;padding:12px;justify-content:center}.sales-float > span{display:none}
}
@media(prefers-reduced-motion:reduce){
 .hero__spotlight{display:none}.sales-float{animation:none}
 .resource-card a,.resource-card img,.social-links a,.sales-float{transition:none!important;transform:none!important}
}

/* Small inspection-style click ring, independent of hit testing and layout. */
.click-feedback{position:fixed;z-index:1000;width:24px;height:24px;margin:-12px 0 0 -12px;border:1.5px solid var(--signal);border-radius:50%;pointer-events:none;animation:click-feedback 360ms cubic-bezier(.16,1,.3,1) both}
.click-feedback--light{border-color:var(--on-dark)}.click-feedback--ink{border-color:var(--signal-ink)}
@keyframes click-feedback{from{opacity:.8;transform:scale(.45)}to{opacity:0;transform:scale(1.45)}}
@media(max-width:680px){.safety{background-position:62% center;background-image:linear-gradient(180deg,rgba(14,15,16,.92) 0%,rgba(14,15,16,.85) 38%,rgba(14,15,16,.6) 100%),url('../images/safety/rkw-safety-grid.webp')}}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse),(max-width:1024px){.click-feedback{display:none;animation:none}}