/*
Theme Name: MRM Technical
Theme URI: http://localhost:8090
Author: DeLemon Studio
Description: Custom theme for MRM Technical Services LLC — Fit Out & Renovation, Dubai. Single-page homepage built from the original static design (tape-measure ruler dividers, spec-sheet services, dark gallery).
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: mrm
*/

:root{
  --ink:#0e2038;
  --steel:#16314f;
  --steel-2:#1d3f62;
  --plaster:#f3f6f8;
  --plaster-dim:#e6edf1;
  --hivis:#16a89a;
  --hivis-deep:#0f7f75;
  --chalk:#8ea6bd;
  --swoosh-1:#c7d92e;
  --swoosh-2:#16a89a;
  --swoosh-3:#1d3f8f;
  --line: rgba(243,246,248,0.14);
  --line-dark: rgba(14,32,56,0.12);
  --maxw: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
body{
  background:var(--plaster);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.05;
}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--hivis);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--hivis); display:inline-block;}

/* ===== Tape measure ruler divider — the signature element ===== */
.ruler{
  position:relative;
  height:34px;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(14,32,56,0.9) 0, rgba(14,32,56,0.9) 2px,
      transparent 2px, transparent 20px
    ),
    linear-gradient(90deg, var(--swoosh-1) 0%, var(--swoosh-2) 52%, var(--swoosh-3) 100%);
  background-position: 0 100%, 0 0;
  background-repeat: repeat-x, no-repeat;
  background-size: 20px 12px, 100% 100%;
  overflow:hidden;
}
.ruler::after{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    90deg,
    rgba(14,32,56,0.9) 0, rgba(14,32,56,0.9) 2px,
    transparent 2px, transparent 100px
  );
  background-size:100px 22px;
  background-position:0 100%;
  background-repeat:repeat-x;
}
.ruler span{
  position:absolute; bottom:14px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  color:rgba(14,32,56,0.85);
  transform:translateX(-50%);
}

/* ===== Hero with video background ===== */
.hero-video{position:relative;}
.hero-bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-video .hero-inner{position:relative; z-index:1;}
/* Ink-blue overlay covering the full left half of the hero. */
.hero.hero-video::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:50%; height:100%; min-height:100%;
  background:var(--ink);
  opacity:0.75;
  z-index:1;
}
.hero-video .hero-inner{z-index:2;}

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line-dark);
}
body.admin-bar header{top:32px;}
@media screen and (max-width: 782px){
  body.admin-bar header{top:46px;}
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  max-width:var(--maxw); margin:0 auto;
}
.logo{
  display:flex; align-items:center; gap:10px;
}
.logo-img{height:48px; width:auto; display:block;}
nav.links{display:flex; align-items:center; gap:32px;}
nav.links a{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.75;
  transition:opacity .2s;
}
nav.links a:hover{opacity:1; color:var(--hivis-deep);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:12px 20px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.btn-primary{background:var(--hivis); color:var(--ink); font-weight:600;}
.btn-primary:hover{background:var(--plaster); transform:translateY(-1px);}
.btn-ghost{border-color:var(--line); color:var(--plaster);}
.btn-ghost:hover{border-color:var(--hivis); color:var(--hivis);}
.menu-toggle{
  display:none;
  background:none; border:none; color:var(--ink);
  font-size:24px; cursor:pointer;
}

/* ===== Hero ===== */
.hero{
  background:var(--ink);
  color:var(--plaster);
  position:relative;
  overflow:hidden;
  background-image:
    linear-gradient(rgba(22,168,154,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,168,154,0.06) 1px, transparent 1px);
  background-size:40px 40px;
}
.hero::before{
  content:"";
  position:absolute; top:-30%; right:-10%;
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(22,168,154,0.16) 0%, transparent 70%);
  pointer-events:none;
}
.hero-video::after{
  content:""; position:absolute; top:-30%; right:-10%;
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(22,168,154,0.16) 0%, transparent 70%);
  pointer-events:none; z-index:2;
}
.hero-inner{
  max-width:var(--maxw); margin:0 auto; padding:96px 28px 80px;
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:56px; align-items:end;
  position:relative;
}
.hero h1{
  font-size:clamp(40px, 6vw, 76px);
  margin:22px 0 24px;
  max-width:11ch;
}
.hero h1 em{
  font-style:normal;
  color:var(--hivis);
}
.hero p.lede{
  font-size:17px; color:#fff; max-width:46ch; margin-bottom:32px;
  text-shadow:0 1px 2px rgba(14,32,56,0.5);
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px;}
.rating{
  display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--chalk);
}
.rating .stars{color:var(--hivis); letter-spacing:2px;}
.hero-spec{
  border-left:2px solid var(--line);
  padding-left:28px;
  display:flex; flex-direction:column; gap:22px;
}
.spec-row{display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--line); padding-bottom:14px;}
.spec-row:last-child{border-bottom:none;}
.spec-row .label{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--chalk); text-transform:uppercase; letter-spacing:0.06em;}
.spec-row .val{font-family:'Oswald',sans-serif; font-size:15px; font-weight:500;}

/* ===== Section shared ===== */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,3.6vw,44px); margin-top:14px;}
.section-head p{color:#555; margin-top:14px; font-size:16px;}

/* ===== Services — spec sheet list ===== */
.services-list{border-top:1px solid var(--line-dark);}
.service-row{
  display:grid;
  grid-template-columns:80px 1fr 1.3fr;
  gap:32px;
  align-items:start;
  padding:32px 0;
  border-bottom:1px solid var(--line-dark);
  transition:background .2s;
}
.service-row:hover{background:rgba(22,168,154,0.06);}
.service-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px; color:var(--hivis); font-weight:600; padding-top:4px;
}
.service-row h3{font-size:24px;}
.service-row p{color:#555; font-size:15px; max-width:56ch;}

/* ===== Gallery ===== */
.gallery-dark{background:var(--ink); color:var(--plaster);}
.gallery-dark .section-head p{color:var(--chalk);}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:130px;
  gap:6px;
}
.gallery-grid figure{
  overflow:hidden; position:relative; background:var(--steel);
}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.gallery-grid figure:hover img{transform:scale(1.06);}
.gallery-grid figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding:10px 12px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--plaster);
  background:linear-gradient(to top, rgba(16,24,38,0.85), transparent);
}
.g1{grid-column:span 3; grid-row:span 2;}
.g2{grid-column:span 3; grid-row:span 1;}
.g3{grid-column:span 3; grid-row:span 1;}
.g4{grid-column:span 2; grid-row:span 2;}
.g5{grid-column:span 2; grid-row:span 2;}
.g6{grid-column:span 2; grid-row:span 2;}

/* ===== About + stats ===== */
.about{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.about p{color:#444; margin-top:16px; font-size:16px;}
.readouts{display:flex; gap:0; border:1px solid var(--line-dark);}
.readout{
  flex:1; padding:28px 20px; text-align:left;
  border-right:1px solid var(--line-dark);
}
.readout:last-child{border-right:none;}
.readout .num{
  font-family:'IBM Plex Mono',monospace;
  font-size:40px; font-weight:600; color:var(--hivis); display:block; line-height:1;
}
.readout .cap{
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:0.06em; color:#666; margin-top:10px; display:block;
}

/* ===== Testimonial ===== */
.quote-band{
  background:var(--plaster-dim);
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  text-align:center;
}
.quote-band blockquote{
  font-family:'Oswald',sans-serif;
  font-size:clamp(22px,3vw,32px);
  max-width:780px; margin:0 auto;
  text-transform:none;
  color:var(--ink);
}
.quote-band .stars{color:var(--hivis); letter-spacing:4px; display:block; margin-bottom:20px;}
.quote-band cite{
  display:block; margin-top:22px; font-style:normal;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:#777; text-transform:uppercase; letter-spacing:0.08em;
}

/* ===== Contact ===== */
.contact{
  background:var(--ink); color:var(--plaster);
}
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
}
.contact h2{font-size:clamp(28px,3.6vw,44px); margin-top:14px;}
.contact-lede{color:var(--chalk); margin-top:16px; max-width:44ch;}
.contact-ctas{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.info-block{border-top:1px solid var(--line); padding-top:22px; margin-top:22px;}
.info-block:first-child{margin-top:0;}
.info-block .label{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--hivis); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px;}
.info-block .value{font-family:'Oswald',sans-serif; font-size:19px;}
.info-block .value a:hover{color:var(--hivis);}

/* ===== Footer ===== */
footer{background:var(--ink); color:var(--chalk); padding:28px 0;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.footer-inner .mono{font-size:11px; letter-spacing:0.06em;}
.foot-social{display:flex; gap:16px;}
.foot-social a{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.7;}
.foot-social a:hover{opacity:1; color:var(--hivis);}

/* ===== Reveal on scroll ===== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ===== Focus visibility ===== */
a:focus-visible, button:focus-visible{outline:2px solid var(--hivis); outline-offset:3px;}

/* ===== Mobile ===== */
@media (max-width: 860px){
  .hero-inner{grid-template-columns:1fr; padding-top:56px;}
  .hero-spec{border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:24px;}
  .about{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .service-row{grid-template-columns:56px 1fr; }
  .service-row .service-desc{grid-column:1 / -1;}
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .g1,.g2,.g3,.g4,.g5,.g6{grid-column:span 1; grid-row:span 1;}
  .g1{grid-column:span 2; grid-row:span 2;}
  nav.links{
    position:fixed; inset:77px 0 0 0; background:var(--ink);
    flex-direction:column; padding:36px 28px; gap:26px; align-items:flex-start;
    transform:translateX(100%); transition:transform .25s ease; z-index:40;
  }
  nav.links.open{transform:translateX(0);}
  .menu-toggle{display:block;}
  nav.links a{font-size:16px; color:var(--plaster); opacity:0.85;}
}

/* ===== Service pages ===== */
.svc-hero{
  background:var(--ink); color:var(--plaster);
  position:relative; overflow:hidden;
  background-image:
    linear-gradient(rgba(22,168,154,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,168,154,0.06) 1px, transparent 1px);
  background-size:40px 40px;
}
.svc-hero::before{
  content:""; position:absolute; top:-30%; right:-10%;
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(22,168,154,0.16) 0%, transparent 70%);
  pointer-events:none;
}
.svc-hero .wrap{max-width:var(--maxw); margin:0 auto; padding:72px 28px 64px; position:relative;}
.svc-hero h1{font-size:clamp(34px,4.8vw,58px); margin:22px 0 24px; max-width:18ch;}
.svc-hero h1 em{font-style:normal; color:var(--hivis);}
.svc-hero .lede{font-size:17px; color:var(--chalk); max-width:54ch; margin-bottom:32px;}

.svc-check{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 40px; list-style:none;}
.svc-check li{display:flex; gap:12px; align-items:flex-start; color:#444; font-size:16px;}
.svc-check li::before{content:"✓"; font-family:'IBM Plex Mono',monospace; color:var(--hivis); font-weight:600;}

.svc-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; grid-auto-rows:240px;}
.svc-gallery figure{overflow:hidden; position:relative; background:var(--steel);}
.svc-gallery img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.svc-gallery figure:hover img{transform:scale(1.06);}
.svc-gallery figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:10px 12px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--plaster);
  background:linear-gradient(to top, rgba(16,24,38,0.85), transparent);
}

.step-row{
  display:grid; grid-template-columns:80px 1fr 1.3fr; gap:32px; align-items:start;
  padding:28px 0; border-bottom:1px solid var(--line-dark);
}
.step-row:first-child{border-top:1px solid var(--line-dark);}
.step-num{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--hivis); font-weight:600; padding-top:4px;}
.step-row h3{font-size:22px;}
.step-row p{color:#555; font-size:15px; max-width:56ch;}

.faq-list{border-top:1px solid var(--line-dark);}
.faq-list details{border-bottom:1px solid var(--line-dark);}
.faq-list summary{
  cursor:pointer; list-style:none; padding:22px 0;
  font-family:'Oswald',sans-serif; font-size:20px; text-transform:uppercase; letter-spacing:0.01em;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+"; font-family:'IBM Plex Mono',monospace; color:var(--hivis); font-size:22px; flex-shrink:0;}
.faq-list details[open] summary::after{content:"–";}
.faq-list summary:hover{color:var(--hivis-deep);}
.faq-list .faq-a{padding:0 0 22px; color:#555; max-width:64ch; font-size:16px;}

.related{padding-bottom:88px;}
.related-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.related-card{border:1px solid var(--line-dark); padding:22px; display:block; transition:border-color .2s, background .2s;}
.related-card:hover{border-color:var(--hivis); background:rgba(22,168,154,0.05);}
.related-card .rc-tag{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--hivis); letter-spacing:0.12em; text-transform:uppercase;}
.related-card h3{font-size:19px; margin-top:10px;}
.related-card p{color:#555; font-size:14px; margin-top:8px; line-height:1.5;}

/* Homepage service sub-links */
.svc-sublinks{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
.svc-sublinks a{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid var(--line-dark); padding:8px 14px; color:var(--ink);
  transition:border-color .2s, color .2s;
}
.svc-sublinks a:hover{border-color:var(--hivis); color:var(--hivis-deep);}

/* ===== Map ===== */
.map-band{background:var(--plaster-dim); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:72px 0;}
.map-frame{border:1px solid var(--line-dark); background:#fff;}
.map-frame iframe{width:100%; height:420px; border:0; display:block;}

/* ===== Contact page ===== */
.info-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.info-card{border:1px solid var(--line-dark); padding:24px; transition:border-color .2s;}
.info-card:hover{border-color:var(--hivis);}
.info-card .label{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--hivis); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px;}
.info-card .value{font-family:'Oswald',sans-serif; font-size:19px; line-height:1.4;}
.info-card .value a:hover{color:var(--hivis);}
.info-card .sub{font-size:15px; color:#555; margin-top:8px;}
.social-row{display:flex; flex-wrap:wrap; gap:16px; margin-top:32px;}
.social-row a{
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:0.06em; opacity:0.75; border:1px solid var(--line-dark);
  padding:8px 14px; transition:opacity .2s, border-color .2s, color .2s;
}
.social-row a:hover{opacity:1; border-color:var(--hivis); color:var(--hivis-deep);}

.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1 / -1;}
.field label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--chalk);}
.field input, .field textarea{
  background:rgba(243,246,248,0.05);
  border:1px solid var(--line);
  color:var(--plaster);
  font-family:'Inter',sans-serif;
  font-size:16px;
  padding:14px 16px;
  transition:border-color .2s;
  width:100%;
}
.field input::placeholder, .field textarea::placeholder{color:rgba(142,166,189,0.5);}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--hivis);}
.field textarea{min-height:150px; resize:vertical;}
.hp{position:absolute; left:-9999px;}
.form-actions{grid-column:1 / -1;}
.form-note{grid-column:1 / -1; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--chalk); letter-spacing:0.04em;}
.sent-notice{
  grid-column:1 / -1;
  border:1px solid var(--hivis);
  color:var(--hivis);
  padding:16px 20px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.04em;
}
.err-notice{
  grid-column:1 / -1;
  border:1px solid #d0654e;
  color:#e08a76;
  padding:16px 20px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.04em;
}
.next-steps{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line);}
.next-step{padding:20px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start;}
.next-step .ns-num{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--hivis); font-weight:600; padding-top:3px;}
.next-step h3{font-size:18px; color:var(--plaster);}
.next-step p{color:var(--chalk); font-size:15px; margin-top:6px;}
.contact .form-link{margin-top:22px; font-size:16px; color:var(--chalk);}
.contact .form-link a{color:var(--hivis);}
.contact .form-link a:hover{color:var(--plaster);}

/* ===== Nav dropdowns ===== */
.nav-item{position:relative;}
.nav-item > a{display:inline-flex; align-items:center;}
.caret{font-size:9px; opacity:0.7; margin-left:5px;}
.caret-r{color:var(--hivis-deep); opacity:1;}
.sub-menu{
  display:none; position:absolute; top:calc(100% + 6px); left:-18px;
  min-width:235px; background:#fff;
  border:1px solid var(--line-dark); border-top:2px solid var(--hivis);
  box-shadow:0 14px 34px rgba(14,32,56,0.14);
  padding:8px 0; z-index:60;
  flex-direction:column; gap:1px;
}
.nav-item:hover > .sub-menu,
.nav-item:focus-within > .sub-menu{display:flex;}
.sub-menu a{
  font-size:12px; padding:9px 20px; opacity:0.8;
  display:block; white-space:nowrap;
}
.sub-menu a:hover{opacity:1; color:var(--hivis-deep); background:rgba(22,168,154,0.07);}
.sub-menu .nav-item .sub-menu{top:-9px; left:100%;}

/* ===== Breadcrumbs ===== */
.crumbs{
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--chalk); margin-bottom:18px;
}
.crumbs a{color:var(--hivis);}
.crumbs a:hover{color:var(--plaster);}
.crumbs .sep{opacity:0.5; margin:0 8px;}

/* ===== Services index ===== */
.svc-cat-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin:56px 0 20px;}
.svc-cat-head:first-of-type{margin-top:0;}
.svc-cat-head h2{font-size:clamp(24px,3vw,34px);}
.svc-cat-link{
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--hivis-deep);
  border-bottom:1px solid var(--hivis); padding-bottom:3px; white-space:nowrap;
}
.svc-cat-link:hover{color:var(--ink);}
.svc-index-grid{display:grid; gap:14px;}
.svc-index-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.svc-index-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.svc-index-card{
  border:1px solid var(--line-dark); padding:24px;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .2s, background .2s;
}
.svc-index-card:hover{border-color:var(--hivis); background:rgba(22,168,154,0.05);}
.svc-index-card h3{font-size:20px;}
.svc-index-card p{color:#555; font-size:15px; line-height:1.5;}
.svc-arrow{font-family:'IBM Plex Mono',monospace; color:var(--hivis); margin-top:auto; padding-top:10px;}

/* ===== Projects page ===== */
.proj-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; grid-auto-rows:210px;}
.proj-strip figure{overflow:hidden; position:relative; background:var(--steel);}
.proj-strip img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.proj-strip figure:hover img{transform:scale(1.06);}
.proj-strip figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:10px 12px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--plaster);
  background:linear-gradient(to top, rgba(16,24,38,0.85), transparent);
}
.proj-link-row{margin-top:28px;}
.proj-link-row a{
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--hivis-deep); border-bottom:1px solid var(--hivis);
  padding-bottom:3px;
}
.proj-link-row a:hover{color:var(--ink);}

.testi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.testi-card{border:1px solid var(--line-dark); padding:28px; background:#fff;}
.testi-card .stars{color:var(--hivis); letter-spacing:3px; font-size:15px;}
.testi-card blockquote{
  font-family:'Oswald',sans-serif; font-size:21px; line-height:1.35;
  color:var(--ink); margin-top:14px; text-transform:none;
}
.testi-foot{display:flex; align-items:center; gap:12px; margin-top:20px;}
.testi-foot img{width:46px; height:46px; border-radius:50%; object-fit:cover;}
.testi-foot cite{
  font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:#666; text-transform:uppercase; letter-spacing:0.08em;
}

@media (min-width: 861px) and (max-width: 1100px){
  .related-grid{grid-template-columns:repeat(2,1fr);}
  .proj-strip{grid-template-columns:repeat(2,1fr);}
  .testi-grid{grid-template-columns:1fr;}
  .svc-index-grid.cols-3, .svc-index-grid.cols-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 860px){
  .svc-check{grid-template-columns:1fr;}
  .svc-gallery{grid-template-columns:1fr; grid-auto-rows:200px;}
  .step-row{grid-template-columns:56px 1fr;}
  .step-row .step-desc{grid-column:1 / -1;}
  .related-grid{grid-template-columns:1fr;}
  .svc-hero .wrap{padding:56px 28px 48px;}
  .service-row .service-body{grid-column:1 / -1;}
  .info-cards{grid-template-columns:1fr;}
  .contact-form{grid-template-columns:1fr;}
  .proj-strip{grid-template-columns:repeat(2,1fr); grid-auto-rows:160px;}
  .testi-grid{grid-template-columns:1fr;}
  .svc-index-grid.cols-3, .svc-index-grid.cols-4{grid-template-columns:1fr;}
  .svc-cat-head{flex-direction:column; gap:10px;}

  /* Nav dropdowns become static nested lists in the mobile panel */
  nav.links{overflow-y:auto;}
  nav.links .caret{display:none;}
  nav.links .sub-menu{
    display:flex; position:static; min-width:0;
    background:none; border:none; border-left:1px solid var(--line);
    box-shadow:none; padding:2px 0 6px 16px; margin:4px 0 14px; z-index:auto;
  }
  nav.links .sub-menu a{font-size:14px; color:var(--chalk); opacity:0.85; padding:6px 0; white-space:normal;}
  nav.links .sub-menu a:hover{background:none; color:var(--hivis);}
  nav.links .sub-menu .sub-menu{margin:2px 0 6px;}
  nav.links .sub-menu .sub-menu a{font-size:13px; opacity:0.7; padding-left:14px;}
}