:root{
  --red:#B32134;
  --red-deep:#8C1A29;
  --blue:#0830B3;
  --blue-deep:#0A1F63;
  --black:#0B0B0C;
  --logo-tint:#C5D4E7;
  --tint-light:#EEF2F8;
  --paper:#FAFAF8;
  --ink:#171717;
  --line:rgba(255,255,255,0.14);
  --line-dark:rgba(11,11,12,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'IBM Plex Sans', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.5;
}

/* Reserved for hero/banner moments only — not every heading */
.display{
  font-family:'Anton', sans-serif;
  letter-spacing:0.01em;
  line-height:0.98;
  text-transform:uppercase;
}
/* Everyday section headings — normal case, tighter, easier to scan */
.section-title{
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.15;
  text-transform:none;
}
.section-title--light{color:#fff;}

.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.02em;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
a{color:inherit; text-decoration:none;}
img,svg{display:block;}

.js-enabled .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.js-enabled .reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .js-enabled .reveal{opacity:1 !important; transform:none !important;}
}

.tri-rule{ height:5px; display:flex; }
.tri-rule span{ flex:1; }
.tri-rule .r1{background:var(--red);}
.tri-rule .r2{background:var(--black);}
.tri-rule .r3{background:var(--blue);}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--logo-tint);
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 28px;
  max-width:1120px; margin:0 auto;
}
.brand-logo img{ height:56px; width:auto; display:block; object-fit:contain; }
nav{display:flex; align-items:center; gap:24px;}
nav a.navlink{
  color:var(--black);
  font-size:13px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-weight:600;
  opacity:0.72;
  transition:opacity .2s ease;
}
nav a.navlink:hover, nav a.navlink[aria-current="page"]{opacity:1;}
nav a.navlink[aria-current="page"]{border-bottom:2px solid var(--red); padding-bottom:2px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px;
  font-size:13px; letter-spacing:0.04em; text-transform:uppercase; font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{transform:translateY(-1px); background:var(--red-deep);}
.btn-ghost{border-color:var(--black); color:var(--black);}
.btn-ghost:hover{background:var(--black); color:#fff;}
.btn-white{background:#fff; color:var(--red);}
.btn-white:hover{transform:translateY(-1px); background:var(--tint-light);}

.hero .btn-ghost, .page-banner .btn-ghost{border-color:rgba(255,255,255,0.4); color:#fff;}
.hero .btn-ghost:hover, .page-banner .btn-ghost:hover{background:#fff; color:var(--black); border-color:#fff;}

@media (max-width:760px){
  nav a.navlink{display:none;}
  .brand-logo img{height:44px;}
}

/* ---------- hero (home only) ---------- */
.hero{
  background:var(--black); color:#fff;
  padding:84px 0 92px; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px; opacity:0.18;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.hero-inner{position:relative; z-index:1;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:#fff; background:var(--red);
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; margin-bottom:22px;
}
h1.hero-title{ font-size:clamp(40px, 7vw, 76px); max-width:17ch; }
h1.hero-title .accent{color:var(--red);}
.hero-sub{
  max-width:56ch; font-size:17px; line-height:1.65;
  color:rgba(255,255,255,0.78); margin-top:22px;
}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}

/* ---------- page banner (about / services / contact) ---------- */
.page-banner{
  background:var(--black); color:#fff;
  padding:56px 0 52px; position:relative; overflow:hidden;
}
.page-banner::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px; opacity:0.14;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.page-banner-inner{position:relative; z-index:1;}
.page-title{ font-size:clamp(32px, 5vw, 48px); }
.page-lede{ margin-top:14px; max-width:60ch; font-size:15.5px; line-height:1.65; color:rgba(255,255,255,0.72); }

/* ---------- plaque (signature element, home hero only) ---------- */
.plaque-wrap{ display:flex; justify-content:center; margin-top:56px; position:relative; z-index:1; }
.plaque{
  background:#111; color:#fff; padding:22px 42px; text-align:center; position:relative;
  border-top:3px solid var(--red); border-bottom:3px solid var(--blue);
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
}
.plaque .screw{ position:absolute; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #eee, #666 70%); }
.plaque .screw.tl{top:9px; left:9px;} .plaque .screw.tr{top:9px; right:9px;}
.plaque .screw.bl{bottom:9px; left:9px;} .plaque .screw.br{bottom:9px; right:9px;}
.plaque .p-title{ font-family:'Anton', sans-serif; font-size:22px; letter-spacing:0.02em; text-transform:uppercase; }
.plaque .p-sub{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; margin-top:6px; color:rgba(255,255,255,0.65); }

/* ---------- section label (small eyebrow above a section-title) ---------- */
.section-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--red); margin-bottom:12px; font-weight:600;
}
.section-label--light{color:#fff; opacity:0.8;}

/* ---------- stat strip (home) ---------- */
.stat-strip{background:var(--tint-light); padding:52px 0;}
.stat-row{display:flex; flex-wrap:wrap; gap:32px 40px;}
.stat-item{flex:1 1 180px;}
.stat-item .num{font-family:'Anton', sans-serif; font-size:26px; color:var(--blue); text-transform:uppercase;}
.stat-item .label{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#5a584f; margin-top:6px;}

/* ---------- about / service record ---------- */
.about{background:var(--tint-light); padding:88px 0;}
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px;}
@media (max-width:800px){ .about-grid{grid-template-columns:1fr; gap:44px;} }
.about .section-title{font-size:clamp(28px, 3.6vw, 38px); max-width:16ch; margin-bottom:20px;}
.about p{font-size:15.5px; line-height:1.75; color:#3a3a37; max-width:56ch;}
.about p + p{margin-top:16px;}
.record{border:1px solid var(--line-dark); background:#fff;}
.record-row{display:flex; justify-content:space-between; align-items:baseline; padding:18px 22px; border-bottom:1px solid var(--line-dark);}
.record-row:last-child{border-bottom:none;}
.record-row .num{font-family:'Anton', sans-serif; font-size:22px; color:var(--blue); text-transform:uppercase;}
.record-row .label{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#5a584f; text-align:right;}

/* ---------- services ---------- */
.services{padding:88px 0; background:var(--paper);}
.services-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap;}
.services .section-title{font-size:clamp(28px, 3.6vw, 38px);}
.svc-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark);}
@media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:520px){ .svc-grid{grid-template-columns:1fr;} }
.svc-card{background:#fff; padding:30px 24px; transition:background .2s ease;}
.svc-card:hover{background:var(--tint-light);}
.svc-card svg{width:28px; height:28px; margin-bottom:18px; color:var(--red);}
.svc-card h3{font-family:'IBM Plex Sans', sans-serif; font-weight:700; font-size:16px; margin-bottom:8px;}
.svc-card p{font-size:13.5px; line-height:1.6; color:#5a584f;}
.svc-preview-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); margin-top:8px;}
@media (max-width:900px){ .svc-preview-grid{grid-template-columns:repeat(2,1fr);} }
.svc-preview{background:#fff; padding:24px 20px;}
.svc-preview svg{width:24px; height:24px; margin-bottom:12px; color:var(--red);}
.svc-preview h3{font-family:'IBM Plex Sans', sans-serif; font-weight:700; font-size:14.5px;}

/* ---------- process ---------- */
.process{background:var(--blue-deep); color:#fff; padding:88px 0;}
.process .section-title{font-size:clamp(28px, 3.6vw, 38px); margin-bottom:48px;}
.steps{display:grid; grid-template-columns:repeat(4, 1fr); gap:0;}
@media (max-width:800px){ .steps{grid-template-columns:1fr; gap:32px;} }
.step{position:relative; padding-right:22px;}
.step-num{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--red);
  letter-spacing:0.06em; font-weight:600;
  border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:14px;
  display:flex; justify-content:space-between;
}
.step h3{font-family:'IBM Plex Sans', sans-serif; font-weight:700; font-size:16px; margin-bottom:8px;}
.step p{font-size:13.5px; line-height:1.6; color:rgba(255,255,255,0.72);}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--red); color:#fff; padding:60px 0; text-align:center;}
.cta-banner .section-title{color:#fff; font-size:clamp(24px, 3.4vw, 32px);}
.cta-banner p{margin-top:10px; color:rgba(255,255,255,0.85); font-size:14.5px;}
.cta-banner .hero-cta{justify-content:center; margin-top:24px;}

/* ---------- contact ---------- */
.contact{background:var(--black); color:#fff; padding:88px 0;}
.contact-inner{display:grid; grid-template-columns:1fr 1.1fr; gap:52px; align-items:start;}
@media (max-width:840px){ .contact-inner{grid-template-columns:1fr; gap:36px;} }
.contact .section-title{font-size:clamp(28px, 4vw, 40px); color:#fff;}
.contact .page-lede{color:rgba(255,255,255,0.68); margin-top:14px;}

.contact-info-list{margin-top:28px; border:1px solid var(--line);}
.contact-info-list .row{display:flex; justify-content:space-between; gap:20px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:13.5px;}
.contact-info-list .row:last-of-type{border-bottom:none;}
.contact-info-list .row span:first-child{color:rgba(255,255,255,0.5); text-transform:uppercase; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.05em;}
.contact-info-list .row a{color:#fff; text-decoration:underline;}

.contact-form-wrap{background:#141416; border:1px solid var(--line); padding:30px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-bottom:7px;}
.form-control{width:100%; background:#0b0b0c; border:1px solid var(--line); color:#fff; padding:12px 14px; font-family:'IBM Plex Sans', sans-serif; font-size:14px; outline:none; transition:border-color .2s ease;}
.form-control:focus{border-color:var(--red);}
select.form-control option{background:#111; color:#fff;}
textarea.form-control{resize:vertical; min-height:100px;}
.form-submit-btn{width:100%; justify-content:center; margin-top:6px;}

/* ---------- footer ---------- */
footer{background:var(--black); color:rgba(255,255,255,0.45); border-top:1px solid var(--line); padding:22px 0; font-size:12px;}
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}