/* ==========================================================================
   PT. AMANAT MULTI KARYA — Company Profile
   Implemented from the Claude Design canvas "Amanat Multi Karya.dc.html".
   ========================================================================== */

/* ------------------------------------------------------------- Typefaces --
   Self-hosted so the page needs no connection to fonts.googleapis.com or
   fonts.gstatic.com before it can paint — two DNS/TLS round trips removed
   from the critical path. One variable file per family covers every weight
   the design uses; the subset is Latin, which is all the copy needs.
   Refresh with: https://fonts.googleapis.com/css2?family=Archivo:wght@400..800
   &family=Source+Sans+3:wght@300..700&family=JetBrains+Mono:wght@400..500     */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/archivo-latin-var.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:'Source Sans 3';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/source-sans-3-latin-var.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:'JetBrains Mono';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-var.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;
}

/* --------------------------------------------------------------- Tokens -- */
:root{
  /* Brand */
  --navy:#00215f;
  --navy-deep:#001741;
  --yellow:#f5b905;
  --orange:#ee7d2f;

  /* Surfaces */
  --paper:#f7f7f5;
  --stone:#ebebeb;

  /* Ink on light surfaces */
  --ink:#141821;
  --ink-body:#4a5163;
  --ink-soft:#5b6274;
  --ink-meta:#6b7386;
  --ink-label:#7b8296;
  --ink-faint:#8b92a4;

  /* Ink on navy surfaces */
  --sky:#c8d1e4;
  --sky-soft:#a9b5cd;
  --sky-dim:#9aa8c4;
  --sky-link:#cdd5e6;

  /* Rules */
  --rule:#dcdcd8;
  --rule-navy:rgba(0,33,95,.18);
  --rule-navy-soft:rgba(0,33,95,.14);
  --rule-navy-mid:rgba(0,33,95,.16);
  --rule-navy-strong:rgba(0,33,95,.26);
  --rule-white:rgba(255,255,255,.18);
  --rule-white-soft:rgba(255,255,255,.14);
  --rule-white-mid:rgba(255,255,255,.2);
  --rule-white-strong:rgba(255,255,255,.22);
  --rule-white-input:rgba(255,255,255,.3);

  /* Type */
  --f-display:Archivo,"Segoe UI",Roboto,system-ui,sans-serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Layout */
  --shell:1240px;
  --gutter:40px;
  --band-y:104px;
  --header-h:72px;
}

/* ----------------------------------------------------------------- Base -- */
*{box-sizing:border-box}

html{scroll-behavior:smooth}
html,body{height:auto}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:rgba(245,185,5,.24);
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

a{color:var(--navy);text-decoration:none}
a:hover{color:var(--orange)}

img{display:block;max-width:100%}
input,textarea,button{font-family:inherit}
::selection{background:var(--yellow);color:var(--navy)}

/* Several toggled blocks are grid or flex containers, whose `display` would
   otherwise beat the `hidden` attribute. */
[hidden]{display:none !important}

section{scroll-margin-top:86px}

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

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--yellow);color:var(--navy);
  padding:15px 20px;
  font-family:var(--f-display);font-weight:700;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;
}
.skip-link:focus{left:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ----------------------------------------------------------- Primitives -- */
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.band{padding-top:var(--band-y);padding-bottom:var(--band-y)}

.band--paper{background:var(--paper)}
.band--stone{background:var(--stone)}
.band--navy{background:var(--navy);color:#fff}

.eyebrow{
  display:block;
  font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-label);
}
.band--navy .eyebrow{color:var(--yellow)}

.h2{
  margin:18px 0 0;
  font-family:var(--f-display);font-weight:700;
  font-size:42px;line-height:1.1;letter-spacing:-.02em;
  color:var(--navy);
}
.band--navy .h2{color:#fff}

.lede{margin:0;font-size:20px;line-height:1.6;color:var(--ink);text-wrap:pretty}

/* Section intro: heading block left, supporting copy right. */
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.band-head__note{margin:0;max-width:440px;font-size:15.5px;line-height:1.68;color:var(--ink-body)}

/* Hairline grids: a 1px gap over a coloured backdrop draws the dividers. */
.hairline{display:grid;gap:1px;background:var(--rule)}
.hairline--navy{background:var(--rule-white)}

.split{display:grid;gap:64px;align-items:start}
.duo{display:grid;grid-template-columns:1fr 1fr}
.trio{display:grid;grid-template-columns:repeat(3,1fr)}
.quad{display:grid;grid-template-columns:repeat(4,1fr)}

/* ---------------------------------------------------------------- Header -- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(0,33,95,.97);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule-white-soft);
}

.site-header__bar{height:var(--header-h);display:flex;align-items:center;gap:40px}

.lockup{display:flex;align-items:center;gap:12px;color:#fff}
.lockup:hover{color:#fff}

.lockup__mark{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  background:var(--yellow);color:var(--navy);
  font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.02em;
}

.lockup__text{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}

.lockup__name{
  font-family:var(--f-display);font-weight:700;font-size:14px;
  letter-spacing:.06em;color:#fff;white-space:nowrap;
}

.lockup__sub{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.22em;
  color:var(--sky-dim);text-transform:uppercase;white-space:nowrap;
}

.site-nav{
  margin-left:auto;
  display:flex;align-items:center;gap:18px;
  min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.site-nav::-webkit-scrollbar{display:none;height:0}

.site-nav a{
  font-size:13.5px;font-weight:500;letter-spacing:.01em;
  color:var(--sky-link);white-space:nowrap;
}
.site-nav a:hover{color:var(--yellow)}

.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}

.lang{display:flex;align-items:center;gap:2px;border:1px solid var(--rule-white-strong);padding:2px}

.lang__btn{
  background:transparent;border:none;
  color:var(--sky-link);
  padding:6px 11px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;font-weight:500;
  cursor:pointer;
}
.lang__btn[aria-current="page"]{background:var(--yellow);color:var(--navy)}

.menu-btn{
  display:none;
  width:40px;height:40px;
  place-items:center;
  align-content:center;
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  cursor:pointer;
  gap:4px;grid-auto-rows:2px;
}
.menu-btn span{width:18px;height:2px;background:var(--yellow);display:block}

.mobile-nav{
  background:var(--navy-deep);
  border-top:1px solid var(--rule-white-soft);
  padding:8px 24px 20px;
  display:grid;gap:2px;
  /* Landscape phones are short: let the panel scroll rather than run off. */
  max-height:calc(100vh - var(--header-h));
  max-height:calc(100dvh - var(--header-h));
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* Menu open: freeze the page behind the panel. */
body.is-menu-open{overflow:hidden}
.mobile-nav a{
  padding:13px 2px;
  font-size:15.5px;font-weight:500;
  color:var(--sky-link);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-nav a:hover{color:var(--yellow)}

/* ------------------------------------------------------------------ Main -- */
.site-main{padding-top:73px}

/* ------------------------------------------------------------------ Hero -- */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}

.hero__grid{
  padding-top:76px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:end;
}

.hero__copy{padding-bottom:96px}

.hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.hero__eyebrow span:first-child{width:44px;height:3px;background:var(--yellow);flex:none}
.hero__eyebrow span:last-child{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--yellow);
}

.hero__title{
  margin:0;
  font-family:var(--f-display);font-weight:800;
  font-size:64px;line-height:1.03;letter-spacing:-.025em;
  text-wrap:balance;
}

.hero__body{
  margin:28px 0 0;max-width:520px;
  font-size:18px;line-height:1.62;font-weight:300;
  color:var(--sky);text-wrap:pretty;
}

.hero__actions{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}

.hero__media{
  height:420px;
  border:1px solid var(--rule-white-mid);
  background:var(--navy-deep);
  overflow:hidden;
}
/* <picture> is inline by default, which would leave the img sizing itself
   against an inline box. Make the wrapper fill its frame instead. */
.hero__media picture,.about__media picture,.project__media picture{
  display:block;width:100%;height:100%;
}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.03);
}

.btn{
  display:inline-block;
  padding:15px 30px;
  font-family:var(--f-display);font-size:13.5px;
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;
}

.btn--primary{background:var(--yellow);color:var(--navy);font-weight:700;border:none}
.btn--primary:hover{background:var(--orange);color:#fff}

.btn--ghost{border:1px solid rgba(255,255,255,.34);color:#fff;font-weight:600;background:transparent}
.btn--ghost:hover{border-color:var(--yellow);color:var(--yellow)}

.stats{border-top:1px solid var(--rule-white-mid)}
.stats__cell{padding:32px 28px 34px;border-left:1px solid var(--rule-white-mid)}
.stats__value{
  font-family:var(--f-display);font-weight:700;font-size:34px;
  letter-spacing:-.02em;color:var(--yellow);
}
.stats__label{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--sky-soft)}

/* ----------------------------------------------------------------- About -- */
#about .split{grid-template-columns:.9fr 1.1fr;gap:72px}

.about__media{
  height:220px;margin-top:36px;
  border:1px solid var(--rule-navy);
  overflow:hidden;
}
.about__media img{width:100%;height:100%;object-fit:cover}

.about__body{margin:24px 0 0;font-size:16.5px;line-height:1.72;color:var(--ink-body);text-wrap:pretty}

.milestones{margin-top:40px}
.milestone{background:var(--paper);padding:24px 26px}
.milestone__year{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--orange)}
.milestone__title{margin-top:10px;font-family:var(--f-display);font-weight:600;font-size:15.5px;color:var(--navy)}
.milestone__body{margin-top:6px;font-size:14px;line-height:1.55;color:var(--ink-soft)}

/* -------------------------------------------------------- Vision/Mission -- */
#vision .split{grid-template-columns:.7fr 1.3fr}
#vision .h2{line-height:1.05}

.vision__statement{
  margin:0;
  font-family:var(--f-display);font-weight:500;
  font-size:27px;line-height:1.42;letter-spacing:-.015em;
  color:#fff;text-wrap:pretty;
}

.pillars{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:36px}
.pillar{border-top:3px solid var(--yellow);padding-top:20px}
.pillar__label{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);
}
.pillar__body{margin:12px 0 0;font-size:16px;line-height:1.68;color:var(--sky)}

.mission{margin-top:88px;padding-top:56px;border-top:1px solid var(--rule-white)}
.mission__head{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.mission__title{margin:0;font-family:var(--f-display);font-weight:700;font-size:28px;letter-spacing:-.015em}
.mission__note{margin:0;max-width:620px;font-size:15.5px;line-height:1.65;color:var(--sky-soft)}

.mission__grid{margin-top:40px}
.mission__cell{background:var(--navy);padding:30px 26px 34px}
.mission__num{font-family:var(--f-mono);font-size:11px;color:var(--orange)}
.mission__name{margin-top:22px;font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.25;color:#fff}
.mission__body{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--sky-soft)}

/* -------------------------------------------------------------- Services -- */
#services .h2{line-height:1.08}

.services{margin-top:48px;gap:20px}

.service{
  background:#fff;
  border:1px solid var(--rule-navy-soft);
  padding:32px 28px 36px;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .18s ease;
}
.service:hover{border-color:var(--yellow)}

.service__code{display:flex;align-items:center;gap:12px}
.service__code::before{content:"";width:10px;height:10px;background:var(--yellow);flex:none}
.service__code span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-label);
}
.service__title{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:20px;line-height:1.22;letter-spacing:-.01em;color:var(--navy);
}
.service__body{margin:0;font-size:15px;line-height:1.65;color:var(--ink-body)}

/* ------------------------------------------------------------- Portfolio -- */
#portfolio .h2{line-height:1.08}
#portfolio .band-head__note{max-width:420px}

.projects{margin-top:48px;gap:24px}

.project{display:flex;flex-direction:column}
.project__media{
  flex:none;
  height:260px;
  border:1px solid var(--rule-navy);
  background:var(--stone);
  overflow:hidden;
}
.project__media img{width:100%;height:100%;object-fit:cover}

/* Grow the body so the meta rule sits on a common baseline across the row,
   however far the titles above it wrap. */
.project__body{padding:26px 0 0;flex:1;display:flex;flex-direction:column}
.project__category{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange);
}
.project__title{
  margin:14px 0 0;font-family:var(--f-display);font-weight:600;
  font-size:21px;line-height:1.22;letter-spacing:-.012em;color:var(--navy);
}
.project__text{margin:12px 0 18px;font-size:15px;line-height:1.66;color:var(--ink-body)}
.project__meta{
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--rule-navy-mid);
  display:flex;gap:18px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-meta);text-transform:uppercase;
}

/* ------------------------------------------------------------ Ready stock --
   One full-width row per item rather than a three-up grid: a catalogue of
   stock grows a few items at a time, and a three-column grid reads as a gap
   waiting to be filled until the third one arrives.

   Product photographs are letterboxed (object-fit:contain on white) where
   the rest of the page crops (object-fit:cover). A crane photo survives
   losing its edges; a photograph of a box does not — the thing being sold
   is the box.                                                             */
#products .h2{line-height:1.08}

.products{margin-top:48px;display:grid;gap:40px}

.product{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start;
  background:var(--paper);
  border:1px solid var(--rule-navy-soft);
  padding:32px;
}

.product__gallery{display:grid;gap:12px}
/* Tall enough that the portrait shot fills the frame almost edge to edge:
   letterboxing is the price of not cropping, and a short frame pays it
   twice over. */
.product__media{
  position:relative;
  height:400px;
  border:1px solid var(--rule-navy-soft);
  background:#fff;
  overflow:hidden;
}
.product__media picture{display:block;width:100%;height:100%}
.product__media img{width:100%;height:100%;object-fit:contain}
.product__media--alt{height:200px}

.product__badge{
  position:absolute;left:0;top:0;
  background:var(--yellow);color:var(--navy);
  padding:7px 12px;
  font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}

.product__brand{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange);
}
.product__title{
  margin:14px 0 0;font-family:var(--f-display);font-weight:600;
  font-size:24px;line-height:1.2;letter-spacing:-.014em;color:var(--navy);
  text-wrap:balance;
}
.product__text{margin:14px 0 0;font-size:15.5px;line-height:1.68;color:var(--ink-body);text-wrap:pretty}

.product__specs{margin:26px 0 0;border-top:1px solid var(--rule-navy-soft)}
.spec{
  display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:baseline;
  padding:11px 2px;border-bottom:1px solid var(--rule-navy-soft);
}
.spec__label{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-label);
}
.spec__value{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}

.product__note{
  margin:22px 0 0;border-left:3px solid var(--yellow);padding-left:13px;
  font-size:13.5px;line-height:1.6;color:var(--ink-soft);
}

.product__actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:30px}
.product__doc{
  display:grid;gap:4px;
  font-family:var(--f-display);font-weight:600;font-size:13.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--navy);
  border-bottom:3px solid var(--yellow);padding-bottom:5px;
}
.product__doc:hover{color:var(--orange)}
.product__doc-meta{
  font-family:var(--f-mono);font-weight:400;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---------------------------------------------------------- Organization -- */
#organization .split{grid-template-columns:.8fr 1.2fr}
#organization .h2{line-height:1.05}
.org__intro{margin:22px 0 0;font-size:16px;line-height:1.7;color:var(--sky);text-wrap:pretty}

.leaders{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.leader{border:1px solid var(--rule-white-strong);padding:26px}

.leader__portrait{
  height:140px;
  border:1px solid var(--rule-white-mid);
  margin-bottom:22px;position:relative;
  background-color:var(--navy-deep);
  background-size:cover;background-position:center;
}
.leader__veil{
  position:absolute;inset:0;
  background:rgba(0,23,65,.72);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
}
.leader__initials{
  width:40px;height:40px;display:grid;place-items:center;
  background:var(--yellow);color:var(--navy);
  font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:.03em;
}
.leader__note{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;
  color:var(--sky-link);text-transform:uppercase;
}
.leader__role{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);
}
.leader__name{margin-top:10px;font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.leader__body{margin:12px 0 0;font-size:14.5px;line-height:1.62;color:var(--sky-soft)}

.divisions{margin-top:20px;border:1px solid var(--rule-white-strong);padding:28px 26px}
.divisions__label{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);
}
.divisions__grid{margin-top:22px}
.division{background:var(--navy);padding:4px 20px}
.division__name{font-family:var(--f-display);font-weight:600;font-size:16px}
.division__unit{margin-top:6px;font-size:14px;color:var(--sky-soft)}

/* ------------------------------------------------------------- Legality -- */
#documents .split{grid-template-columns:.8fr 1.2fr}
#documents .h2{line-height:1.06}
.docs__intro{margin:22px 0 0;font-size:16px;line-height:1.7;color:var(--ink-body);text-wrap:pretty}
.docs__cta{
  display:inline-block;margin-top:26px;
  font-family:var(--f-display);font-weight:600;font-size:13.5px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);border-bottom:3px solid var(--yellow);padding-bottom:4px;
}
.docs__cta:hover{color:var(--orange)}

.docs__list{border-top:1px solid var(--rule-navy)}
.doc{
  display:grid;grid-template-columns:52px 1fr auto;gap:20px;align-items:center;
  padding:20px 4px;border-bottom:1px solid var(--rule-navy-soft);
}
.doc__num{font-family:var(--f-mono);font-size:11px;color:var(--ink-faint)}
.doc__name{display:block;font-family:var(--f-display);font-weight:600;font-size:16.5px;color:var(--navy)}
.doc__note{display:block;margin-top:4px;font-size:14px;color:var(--ink-soft)}
.doc__status{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);
  border:1px solid var(--rule-navy-strong);padding:6px 12px;white-space:nowrap;
}

/* --------------------------------------------------------------- Contact -- */
#contact .split{grid-template-columns:1fr 1.05fr;gap:72px}
#contact .h2{font-size:44px;line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
.contact__intro{margin:22px 0 0;max-width:420px;font-size:16.5px;line-height:1.7;color:var(--ink-body);text-wrap:pretty}

.contact__list{margin-top:44px}
.contact__item{background:var(--paper);padding:22px 0}
.contact__label{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-label);
}
.contact__value{
  margin-top:8px;display:block;
  font-family:var(--f-display);font-weight:600;font-size:17.5px;line-height:1.45;color:var(--navy);
  font-style:normal;
}
a.contact__value:hover{color:var(--orange)}

.form-card{background:var(--navy);padding:44px 40px 48px}
.form__title{margin:0;font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:-.015em;color:#fff}
.form__note{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--sky-soft)}
.form__fields{margin-top:30px;display:grid;gap:20px}

.field{display:block}
.field__label{
  display:block;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sky-dim);margin-bottom:8px;
}
.field input,
.field textarea{
  width:100%;
  background:transparent;border:none;
  border-bottom:1px solid var(--rule-white-input);
  color:#fff;font-size:16px;padding:10px 0;outline:none;
  transition:border-color .18s ease;
}
.field textarea{resize:vertical}
.field input:focus,
.field textarea:focus{border-bottom-color:var(--yellow)}
.field input:user-invalid,
.field textarea:user-invalid{border-bottom-color:var(--orange)}

.field--pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  background:transparent;
  border:1px solid var(--rule-white-input);
  color:var(--sky-link);
  padding:9px 14px;font-size:13px;font-weight:500;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.chip[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}

/* Off-screen rather than display:none — naive bots skip hidden inputs. */
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Cloudflare Turnstile draws a 300x65 iframe in here. The reserved height
   keeps the submit button from jumping when the widget finishes loading;
   the slot stays hidden on a deployment using the proof-of-work fallback,
   which has nothing to show. */
.captcha:not([hidden]){min-height:65px}
.captcha iframe{max-width:100%}

/* Marked by main.js from the server's answer, so a refused submission
   points at the field it means. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-bottom-color:var(--orange)}

.form__note--warn{
  margin:0;border-left:3px solid var(--orange);padding-left:12px;color:#ffd9be;
}

.form__error{
  margin:0;
  border-left:3px solid var(--orange);
  padding:12px 14px;
  background:rgba(238,125,47,.14);
  font-size:14.5px;line-height:1.55;
  color:#ffd9be;
}

.form__submit{
  margin-top:8px;
  background:var(--yellow);border:none;color:var(--navy);
  padding:16px 28px;
  font-family:var(--f-display);font-weight:700;font-size:13.5px;
  letter-spacing:.07em;text-transform:uppercase;cursor:pointer;
}
.form__submit:hover{background:var(--orange);color:#fff}
.form__submit[disabled]{opacity:.6;cursor:progress}

.form-sent{min-height:420px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.form-sent__bar{width:44px;height:3px;background:var(--yellow)}
.form-sent__title{margin:0;font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1.15;letter-spacing:-.018em;color:#fff}
.form-sent__body{margin:0;font-size:16px;line-height:1.68;color:var(--sky)}
.form-sent__again{
  align-self:flex-start;margin-top:12px;
  background:none;border:1px solid rgba(255,255,255,.32);color:#fff;
  padding:12px 22px;
  font-family:var(--f-display);font-weight:600;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.form-sent__again:hover{border-color:var(--yellow);color:var(--yellow)}

/* ---------------------------------------------------------------- Footer -- */
.site-footer{background:var(--navy-deep);color:var(--sky-dim)}
.site-footer__grid{
  padding-top:56px;padding-bottom:40px;
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;
}
.footer__lockup{display:flex;align-items:center;gap:12px}
.footer__mark{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  background:var(--yellow);color:var(--navy);
  font-family:var(--f-display);font-weight:800;font-size:12px;
}
.footer__name{font-family:var(--f-display);font-weight:700;font-size:13.5px;letter-spacing:.06em;color:#fff}
.footer__blurb{margin:20px 0 0;max-width:330px;font-size:14.5px;line-height:1.66}

.footer__heading{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);
}
.footer__links{margin-top:18px;display:grid;gap:10px}
.footer__links a{font-size:14.5px;color:var(--sky-dim)}
.footer__links a:hover{color:var(--yellow)}

.footer__contact{margin-top:18px;display:grid;gap:12px;font-size:14.5px;line-height:1.6}
.footer__contact a{color:#fff}
.footer__contact a:hover{color:var(--yellow)}

.site-footer__base{border-top:1px solid var(--rule-white-soft)}
.site-footer__baseline{
  padding-top:20px;padding-bottom:20px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}

/* ------------------------------------------------------------ Responsive -- */
@media (max-width:1180px){
  .site-nav{gap:14px}
  .site-nav a{font-size:12.5px}
}

@media (max-width:1080px){
  .lockup__sub{display:none}
}

@media (max-width:940px){
  .site-nav a[data-lowpri]{display:none}
}

@media (max-width:900px){
  :root{--gutter:24px;--band-y:64px}

  .split,
  .duo,
  .trio,
  .quad,
  .hero__grid,
  .pillars,
  .leaders,
  .field--pair,
  .site-footer__grid,
  #about .split,
  #vision .split,
  #contact .split,
  #organization .split,
  #documents .split{grid-template-columns:1fr}

  .split,
  #about .split,
  #contact .split{gap:36px}

  .hero__grid{padding-top:56px;gap:36px}
  .hero__copy{padding-bottom:56px}
  .hero__title{font-size:40px}
  .h2,
  #contact .h2{font-size:30px}
  .lede,
  .vision__statement{font-size:22px}

  .site-nav{display:none}
  .menu-btn{display:grid}

  /* Stacked cells read better with a top rule than a dangling left one. */
  .stats__cell{border-left:none;border-top:1px solid var(--rule-white-mid);padding:24px 0 26px}
  .stats__cell:first-child{border-top:none}

  .mission{margin-top:56px;padding-top:40px}
  .form-card{padding:32px 24px 36px}

  /* Stacked, the gallery sits above the copy and no longer needs to hold a
     column's worth of height. The spec labels move above their values —
     a 170px label column leaves nothing for "Protect from direct sunlight
     and high temperature". */
  .product{grid-template-columns:1fr;gap:28px;padding:24px}
  .product__media{height:280px}
  .product__media--alt{height:130px}
  .spec{grid-template-columns:1fr;gap:5px;padding:13px 2px}

  /* --- Touch targets ------------------------------------------------------
     Every control reaches ~44px of tappable height. Desktop keeps the
     canvas's tighter proportions; only the mobile layout opens up.        */

  .lang{padding:0}
  .lang__btn{padding:15px 15px;font-size:11px}

  /* Padding only grows the hit area - the badge and wordmark do not move. */
  .lockup{padding:3px 0}

  .menu-btn{width:44px;height:44px}

  .chip{padding:12px 16px}

  .field input,
  .field textarea{padding:12px 0}

  a.contact__value{margin-top:2px;padding:10px 0}

  .footer__links{gap:0}
  .footer__links a{padding:12px 0}

  .footer__contact{gap:6px}
  .footer__contact a{display:inline-block;padding:11px 0}

  /* Stacked division rows need real vertical room; 4px is a desktop value. */
  .division{padding:14px 18px}

  /* A 420px slab of imagery pushes the page too far down on a phone. */
  .hero__media{height:300px}

  .form-sent{min-height:320px}
}

@media (max-width:600px){
  :root{--gutter:18px}

  /* Keep the language toggle and menu button on screen: let the wordmark
     wrap instead of forcing one long unbreakable line. */
  .site-header__bar{gap:14px}
  .lockup{min-width:0}
  .lockup__name{font-size:12px;letter-spacing:.04em;white-space:normal}

  .hero__title{font-size:33px}
  .h2,
  #contact .h2{font-size:26px}
  .doc{grid-template-columns:36px 1fr;row-gap:12px}
  .doc__status{grid-column:2;justify-self:start}
  .hero__media{height:240px}

  .product{padding:20px}
  .product__media{height:240px}
  .product__title{font-size:21px}

  /* The RFQ button beside the manual link leaves neither room to breathe.
     Stacked, the button takes the full width and the manual link keeps its
     own, so the yellow underline still reads as a link and not as a rule. */
  .product__actions{flex-direction:column;align-items:flex-start;gap:22px}
  .product__actions .btn{width:100%;text-align:center}

  /* Side-by-side CTAs get cramped; stack them full width instead. */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{text-align:center}
}

/* ---------------------------------------------------------------- Touch -- */
/* Hover styling sticks after a tap on touch screens, which reads as a
   selected state. Neutralise it and give a press cue instead. */
@media (hover:none){
  .service:hover{border-color:var(--rule-navy-soft)}
  .btn--primary:hover{background:var(--yellow);color:var(--navy)}
  .btn--ghost:hover{border-color:rgba(255,255,255,.34);color:#fff}
  .form__submit:hover{background:var(--yellow);color:var(--navy)}
  .docs__cta:hover,
  .product__doc:hover,
  a.contact__value:hover,
  .site-nav a:hover,
  .mobile-nav a:hover,
  .footer__links a:hover,
  .footer__contact a:hover{color:inherit}
  .footer__contact a:hover{color:#fff}
}

.btn:active,
.form__submit:active,
.form-sent__again:active,
.chip:active,
.lang__btn:active,
.menu-btn:active{transform:translateY(1px)}