/* Ultra Red Technologies — shared components */

/* ---------- Header / Nav ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(9,6,10,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }

.logo-lockup{ display:flex; align-items:center; gap:var(--sp-3); }
.logo-lockup .mark{ width:34px; height:34px; flex-shrink:0; }
.logo-lockup .wm{ display:flex; flex-direction:column; line-height:1; }
.logo-lockup .wm b{
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-500);
  letter-spacing:.24em; color:var(--bone);
}
.logo-lockup .wm span{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.2em;
  color:var(--ash-dim); text-transform:uppercase; margin-top:3px;
}

.nav{ display:flex; align-items:center; gap:var(--sp-7); }
.nav-links{ display:flex; align-items:center; gap:var(--sp-6); }
.nav-links > li{ position:relative; }
.nav-links a{
  font-family:var(--font-mono); font-size:var(--fs-200); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ash); padding:var(--sp-2) 0; position:relative;
  transition:color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--bone); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--red-bright);
}

.nav-dd{ position:relative; }
.nav-dd > button{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:var(--fs-200); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ash); transition:color var(--dur-fast) var(--ease-out);
}
.nav-dd > button:hover, .nav-dd.open > button{ color:var(--bone); }
.nav-dd:has(.nav-dd-menu a[aria-current="page"]) > button{ color:var(--bone); }
.nav-dd > button svg{ width:10px; height:10px; transition:transform var(--dur-fast) var(--ease-out); }
.nav-dd.open > button svg{ transform:rotate(180deg); }
.nav-dd-menu{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:240px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--sp-2); box-shadow:0 24px 48px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.nav-dd.open .nav-dd-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dd-menu a{
  display:block; padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md);
  font-family:var(--font-sans); font-size:var(--fs-300); text-transform:none; letter-spacing:normal; color:var(--bone);
}
.nav-dd-menu a:hover{ background:var(--surface2); color:var(--red-bright); }
.nav-dd-menu a small{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--ash-dim); margin-top:2px; }

.nav-actions{ display:flex; align-items:center; gap:var(--sp-4); }

.nav-toggle{
  display:none; width:40px; height:40px; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ width:20px; height:2px; background:var(--bone); transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.drawer{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:400;
  background:var(--void);
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out);
  overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.drawer .wrap{ padding-block:var(--sp-7); display:flex; flex-direction:column; gap:var(--sp-1); }
.drawer a{
  padding:var(--sp-4) var(--sp-2); border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-600); font-family:var(--font-sans);
}
.drawer .drawer-sub{ padding-left:var(--sp-5); display:flex; flex-direction:column; }
.drawer .drawer-sub a{ font-size:var(--fs-400); color:var(--ash); border-bottom:none; padding-block:var(--sp-2); }
.drawer .drawer-cta{ margin-top:var(--sp-6); }

@media (max-width:959px){
  .nav-links, .nav-dd, .nav-actions{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width:340px){
  .logo-lockup .wm span{ display:none; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-6); border-radius:var(--radius-md);
  font-family:var(--font-mono); font-size:var(--fs-300); letter-spacing:.03em;
  white-space:nowrap; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  min-height:48px;
}
.btn:active{ transform:scale(.97); }
.btn.primary{ background:var(--red); color:#fff; box-shadow:0 8px 24px -8px rgba(200,56,46,.6); }
.btn.primary:hover{ background:var(--red-bright); box-shadow:0 12px 32px -8px rgba(240,64,46,.7); }
.btn.ghost{ border:1px solid var(--line); color:var(--bone); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn.whatsapp{ border:1px solid var(--line); color:var(--bone); }
.btn.whatsapp::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--status-positive);
  box-shadow:0 0 0 3px rgba(62,207,110,.18);
}
.btn.whatsapp:hover{ border-color:var(--status-positive); color:var(--status-positive); }
.btn.block{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ---------- Hero ---------- */
.hero{ padding-top:calc(var(--header-h) + var(--sp-11)); padding-bottom:var(--sp-11); }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-10); align-items:center; }
.hero h1{ margin-top:var(--sp-5); }
.hero h1 em{ font-style:normal; color:var(--red-bright); }
.hero .lede{ margin-top:var(--sp-5); }
.hero .cta-row{ display:flex; gap:var(--sp-4); margin-top:var(--sp-8); flex-wrap:wrap; }
.hero-stage{
  position:relative; aspect-ratio:1/1; border-radius:var(--radius-lg);
  border:1px solid var(--line); background:radial-gradient(circle at 50% 40%, var(--surface2), var(--void));
  overflow:hidden;
}
@media (max-width:959px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-stage{ order:-1; max-height:280px; }
}

/* ---------- Stat band ---------- */
.statband{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-7);
  padding:var(--sp-8) 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.stat b{ display:block; font-family:var(--font-mono); font-size:var(--fs-800); color:var(--bone); font-weight:500; }
.stat span{ display:block; font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:.08em; text-transform:uppercase; color:var(--ash-dim); margin-top:var(--sp-2); }
@media (max-width:768px){ .statband{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Section heads ---------- */
.section-head{ max-width:640px; margin-bottom:var(--sp-9); }
.section-head h2{ margin-top:var(--sp-4); }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---------- Service grid ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); position:relative; z-index:1; }
.svc-card{
  padding:var(--sp-7); border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface), var(--void));
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  display:flex; flex-direction:column; gap:var(--sp-4); min-height:100%;
}
.svc-card:hover{ border-color:var(--red); transform:translateY(-4px); }
.svc-card .num{ font-family:var(--font-mono); font-size:var(--fs-200); color:var(--red-bright); }
.svc-card h3{ font-size:var(--fs-600); }
.svc-card p{ font-size:var(--fs-300); flex-grow:1; }
.svc-card .more{ font-family:var(--font-mono); font-size:var(--fs-200); color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
@media (max-width:959px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); position:relative; z-index:1; }
.step{ position:relative; padding-top:var(--sp-6); border-top:1px solid var(--line); }
.step .num{ font-family:var(--font-mono); font-size:var(--fs-200); color:var(--ash-dim); }
.step h4{ font-family:var(--font-sans); font-size:var(--fs-500); font-weight:500; margin-top:var(--sp-2); color:var(--bone); }
.step p{ font-size:var(--fs-300); margin-top:var(--sp-2); }
@media (max-width:768px){ .steps{ grid-template-columns:1fr 1fr; } }

/* ---------- Client logo strip ---------- */
/* Source logos are inconsistent (some transparent PNG, one baked-white-bg JPG) —
   unify with a light card behind every logo rather than per-file blend hacks. */
.logo-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--sp-5); position:relative; z-index:1; }
.logo-card{
  width:150px; height:84px; display:flex; align-items:center; justify-content:center;
  background:var(--bone); border-radius:var(--radius-md); padding:var(--sp-4);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.logo-card:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -12px rgba(0,0,0,.5); }
.logo-card img{
  max-height:38px; max-width:100%; width:auto; object-fit:contain;
  filter:grayscale(1) opacity(.75);
  transition:filter var(--dur-base) var(--ease-out);
}
.logo-card:hover img{ filter:grayscale(0) opacity(1); }

/* ---------- Materials band ---------- */
.materials-band{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--sp-3); position:relative; z-index:1; }
.material-chip{
  padding:var(--sp-5) var(--sp-3); text-align:center; border:1px solid var(--line); border-radius:var(--radius-md);
  transition:border-color var(--dur-base) var(--ease-out);
}
.material-chip:hover{ border-color:var(--accent-dim); }
.material-chip b{ display:block; font-family:var(--font-mono); font-size:var(--fs-300); color:var(--bone); }
.material-chip span{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--ash-dim); margin-top:var(--sp-1); text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:768px){ .materials-band{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:420px){ .materials-band{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Values ---------- */
.vgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-6); position:relative; z-index:1; }
.vcard{ padding:var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.vcard .num{ font-family:var(--font-mono); font-size:var(--fs-200); color:var(--red-bright); }
.vcard h3{ font-size:var(--fs-600); margin-top:var(--sp-3); }
.vcard p{ margin-top:var(--sp-3); font-size:var(--fs-400); }
@media (max-width:768px){ .vgrid{ grid-template-columns:1fr; } }

/* ---------- Final CTA ---------- */
.final{ position:relative; text-align:center; overflow:hidden; }
.final .wrap{ position:relative; z-index:1; }
.final h2{ margin-top:var(--sp-4); }
.final .cta-row{ justify-content:center; margin-top:var(--sp-7); }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line-soft); padding-block:var(--sp-9); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-8); }
.footer h5{ font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:.1em; text-transform:uppercase; color:var(--ash-dim); margin-bottom:var(--sp-4); }
.footer ul{ display:flex; flex-direction:column; gap:var(--sp-3); }
.footer a{ font-size:var(--fs-300); color:var(--ash); transition:color var(--dur-fast); }
.footer a:hover{ color:var(--bone); }
.footer .about-blurb{ font-size:var(--fs-300); max-width:32ch; margin-top:var(--sp-4); }
.footer-bottom{
  margin-top:var(--sp-9); padding-top:var(--sp-6); border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-3);
  font-family:var(--font-mono); font-size:var(--fs-100); color:var(--ash-dim);
}
@media (max-width:768px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Spec panel ---------- */
.spec-panel{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; position:relative; z-index:1; }
.spec-item{ background:var(--surface); padding:var(--sp-6); }
.spec-item b{ display:block; font-family:var(--font-mono); font-size:var(--fs-600); color:var(--bone); }
.spec-item span{ display:block; font-family:var(--font-mono); font-size:var(--fs-100); text-transform:uppercase; letter-spacing:.06em; color:var(--ash-dim); margin-top:var(--sp-2); }
@media (max-width:768px){ .spec-panel{ grid-template-columns:1fr 1fr; } }

/* ---------- Fit cards ---------- */
.fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); position:relative; z-index:1; }
.fit-card{ padding:var(--sp-7); border-radius:var(--radius-lg); border:1px solid var(--line); }
.fit-card.good{ border-color:rgba(62,207,110,.3); background:rgba(62,207,110,.04); }
.fit-card.bad{ border-color:rgba(200,56,46,.25); background:rgba(200,56,46,.04); }
.fit-card h4{ font-family:var(--font-sans); font-size:var(--fs-500); font-weight:500; display:flex; align-items:center; gap:var(--sp-2); }
.fit-card.good h4::before{ content:"✓"; color:var(--status-positive); }
.fit-card.bad h4::before{ content:"✕"; color:var(--red-bright); }
.fit-card ul{ margin-top:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); }
.fit-card li{ font-size:var(--fs-300); color:var(--ash); padding-left:var(--sp-4); position:relative; }
.fit-card li::before{ content:"—"; position:absolute; left:0; color:var(--ash-dim); }
@media (max-width:768px){ .fit-grid{ grid-template-columns:1fr; } }

/* ---------- Tiers ---------- */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); position:relative; z-index:1; }
.tier{ padding:var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:var(--sp-4); }
.tier.featured{ border-color:var(--red); background:linear-gradient(180deg, rgba(200,56,46,.08), transparent); }
.tier .tier-label{ font-family:var(--font-mono); font-size:var(--fs-200); text-transform:uppercase; letter-spacing:.08em; color:var(--ash-dim); }
.tier h3{ font-size:var(--fs-600); }
.tier .price{ font-family:var(--font-mono); font-size:var(--fs-700); color:var(--bone); }
.tier .price span{ font-size:var(--fs-300); color:var(--ash-dim); }
.tier ul{ display:flex; flex-direction:column; gap:var(--sp-2); flex-grow:1; }
.tier li{ font-size:var(--fs-300); color:var(--ash); padding-left:var(--sp-4); position:relative; }
.tier li::before{ content:"+"; position:absolute; left:0; color:var(--red-bright); }
@media (max-width:768px){ .tiers{ grid-template-columns:1fr; } }

/* ---------- Gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); position:relative; z-index:1; }
.shot{ aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.shot img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.03); transition:transform var(--dur-slow) var(--ease-out); }
.shot:hover img{ transform:scale(1.05); }
@media (max-width:768px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .gallery{ grid-template-columns:1fr; } }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); position:relative; z-index:1; }
.cmethod{ padding:var(--sp-7); border:1px solid var(--line); border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:var(--sp-3); }
.cmethod .icon{ width:36px; height:36px; color:var(--red-bright); }
.cmethod h4{ font-family:var(--font-sans); font-size:var(--fs-500); font-weight:500; color:var(--bone); }
.cmethod a.value{ font-family:var(--font-mono); font-size:var(--fs-400); color:var(--accent); }
.cmethod .resp{ font-size:var(--fs-200); color:var(--ash-dim); }
@media (max-width:768px){ .contact-grid{ grid-template-columns:1fr; } }

.map-embed{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-top:var(--sp-7); position:relative; z-index:1; }
.map-embed iframe{ width:100%; height:360px; border:0; display:block; filter:grayscale(.4) invert(.92) contrast(.9); }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:var(--sp-2); }
.field label{ font-family:var(--font-mono); font-size:var(--fs-200); letter-spacing:.04em; color:var(--ash); }
.field label .req{ color:var(--red-bright); }
.field input, .field select, .field textarea{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--sp-4); color:var(--bone); min-height:48px;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.field textarea{ min-height:96px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); outline:none; }
.field .hint{ font-size:var(--fs-100); color:var(--ash-dim); }
.field .error{ font-size:var(--fs-200); color:var(--red-bright); display:none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:var(--red-bright); }
.field.invalid .error{ display:block; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
.form-stack{ display:flex; flex-direction:column; gap:var(--sp-5); }

.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px;
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  border:1px solid var(--line); color:var(--ash);
}
.badge.ok{ border-color:rgba(62,207,110,.35); color:var(--status-positive); }
.badge.warn{ border-color:rgba(255,106,77,.35); color:var(--ember); }