/* =====================================================================
   BASE — reset, typography, layout primitives.

   MOBILE-FIRST. Base rules describe the 390px phone layout. Every media
   query below is min-width. There is no max-width query in this build;
   if you add one you are working against the grain of the file.
   Breakpoints: 480, 640, 768, 960, 1024, 1200.
   ===================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0; background:var(--void); color:var(--paper);
  font-family:"IBM Plex Sans","Plex Sans Fallback",ui-sans-serif,system-ui,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--yellow);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* Skip link — first focusable element on every page. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--yellow);color:var(--ink);padding:12px 18px;
  font-family:"IBM Plex Mono","Plex Mono Fallback",monospace;font-size:13px;font-weight:600;
  text-decoration:none;border-radius:0 0 3px 0;
}
.skip-link:focus{left:0}

sup.ref{
  font-family:"IBM Plex Mono","Plex Mono Fallback",monospace; font-size:.62em; font-weight:500;
  color:var(--orange-hi); text-decoration:none; margin-left:2px; vertical-align:super;
}
sup.ref:hover{color:var(--yellow)}

.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.narrow{max-width:940px;margin:0 auto;padding:0 20px}
@media (min-width:640px){
  .wrap,.narrow{padding:0 26px}
}

/* ---- type ---- */
.display{
  font-family:"Archivo","Archivo Fallback",system-ui,Arial,sans-serif;
  font-weight:800; letter-spacing:-.025em;
  line-height:.98; text-wrap:balance; margin:0;
}
h1.display{font-size:clamp(38px,4.6vw,62px);line-height:.95}
h2.display{font-size:clamp(29px,3.9vw,50px)}
h3{margin:0;font-family:"IBM Plex Sans","Plex Sans Fallback",sans-serif}

.kicker{
  font-family:"IBM Plex Mono","Plex Mono Fallback",ui-monospace,monospace; font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--orange-hi);
  display:inline-flex; align-items:flex-start; gap:9px; margin:0;
}
/* The pip used to animate box-shadow, which forces a repaint every frame on
   every kicker on the page. A pseudo-element scaling out is the same effect on
   the compositor only. */
.kicker .pip{
  position:relative;
  width:6px;height:6px;border-radius:50%;background:var(--orange);
  margin-top:5px;flex:none;
}
.kicker .pip::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(255,90,0,.55);
  animation:pulse 2.4s ease-out infinite;
  will-change:transform,opacity;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(4);opacity:0}
  100%{transform:scale(4);opacity:0}
}
.lede{font-size:18px;color:var(--paper-dim);max-width:58ch;margin:0}

/* ---- buttons ---- */
.btn{
  font-family:"IBM Plex Sans","Plex Sans Fallback",sans-serif; font-weight:600; font-size:15px;
  border-radius:2px; padding:15px 26px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  min-height:48px; /* tap target >= 44px (spec 03 section 8) */
  transition:transform .14s ease,background .14s ease,box-shadow .14s ease,border-color .14s ease,color .14s ease;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-hot{background:var(--orange);color:var(--ink)}
.btn-hot:hover{background:var(--yellow);transform:translate(-2px,-2px);box-shadow:4px 4px 0 0 var(--orange)}
.btn-wa{background:var(--wa);color:#04361b}
.btn-wa:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 0 rgba(37,211,102,.4)}
.btn-line{background:transparent;color:var(--paper);border-color:var(--hair-2)}
.btn-line:hover{border-color:var(--paper);background:rgba(250,247,241,.05)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 0 rgba(23,8,0,.35)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* ---- sections ---- */
section{padding:56px 0}
@media (min-width:768px){section{padding:88px 0}}

.head{margin-bottom:32px;display:grid;grid-template-columns:1fr;row-gap:14px;align-items:end}
.head .kicker{grid-column:1/-1}
.head h2{margin:0}
.head p{margin:0;color:var(--paper-dim);font-size:16.5px}
@media (min-width:960px){
  .head{margin-bottom:44px;grid-template-columns:1.18fr .82fr;column-gap:52px;row-gap:16px}
  .head p{margin:0 0 5px}
}
hr.rule{border:none;border-top:1px solid var(--hair);margin:0}

/* ---- scroll reveal ---- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.rv.on{opacity:1;transform:none}


/* content-visibility:auto was tried here and REMOVED after measuring live.

   It cut Style & Layout from 1619ms to ~900ms on a throttled phone, which was
   worth ~2 Performance points. But contain-intrinsic-size only guesses a
   section's height until it has been rendered once, and on /services the real
   section is several times the 640px placeholder. Over a real network the
   placeholder collapsed into the true height after paint and shifted everything
   below it: CLS 0.287 live, against 0.000 on localhost, where the timing never
   exposed it.

   CLS is a hard gate and 0.287 is a bad experience. Do not reintroduce this
   without per-section intrinsic sizes measured from the real pages, and verify
   the result on the live site, not locally. */