/* ==========================================================================
   ПРОМ-ОБЕСПЕЧЕНИЕ — фирменные стили
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#1D2024;
  --charcoal:#2A2D33;
  --steel:#6D6E71;
  --steel-light:#9A9B9E;
  --steel-pale:#E7E6E3;
  --orange:#F2A71B;
  --orange-dark:#D9900B;
  --orange-deep:#9C6008;
  --blue:#28417A;
  --blue-light:#3C5CA6;
  --bg:#F5F4F0;
  --white:#FFFFFF;
  --line:#DFDDD6;
  --radius:2px;
  --container:1200px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-offset, 120px);}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.mono{
  font-family:'JetBrains Mono',monospace;
}
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}
.section{
  padding:96px 0;
}
.section--tight{padding:64px 0;}
.section--dark{
  background:var(--ink);
  color:var(--white);
}
.section--charcoal{
  background:var(--charcoal);
  color:var(--white);
}
.section--pale{
  background:var(--white);
}

/* anchor targets: compensate for the sticky header so links land below it, not behind it.
   --header-offset is measured live in JS from the actual header height; 120px is the fallback. */
#about,#directions,#contact,#leadForm{
  scroll-margin-top:var(--header-offset, 120px);
}

/* ---------- signature: hazard stripe divider ---------- */
.hazard{
  height:10px;
  width:100%;
  background:repeating-linear-gradient(
    -45deg,
    var(--orange) 0 18px,
    var(--ink) 18px 36px
  );
}
.hazard--thin{height:6px;}

/* ---------- eyebrow / kicker ---------- */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-deep);
  font-weight:600;
  margin-bottom:16px;
}
.kicker::before{
  content:"";
  width:22px;height:2px;
  background:var(--orange);
  display:inline-block;
}
.section--dark .kicker,
.section--charcoal .kicker{color:var(--orange);}
.section--dark .kicker::before,
.section--charcoal .kicker::before{background:var(--orange);}

h2.h-title{
  font-size:clamp(28px,3.6vw,42px);
  margin-bottom:18px;
}
p.lead{
  font-size:17px;
  color:var(--steel);
  max-width:680px;
}
.section--dark p.lead,
.section--charcoal p.lead{color:#C7C9CD;}

/* ==========================================================================
   HEADER
   ========================================================================== */
header.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.header-top{
  background:var(--ink);
  color:#B9BBC0;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
}
.header-top .wrap{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:8px;padding-bottom:8px;
}
.header-top a{color:#EDEEEF;}
.header-top .h-phone{color:var(--orange);font-weight:600;}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
  max-width:var(--container);
  margin:0 auto;
  gap:24px;
}
.logo-block{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.logo-block img{height:52px;width:auto;}
.logo-text{display:flex;flex-direction:column;line-height:1.1;}
.logo-text b{
  font-family:'Oswald',sans-serif;
  font-size:15px;letter-spacing:.03em;
  color:var(--ink);
}
.logo-text span{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;color:var(--steel);letter-spacing:.03em;
}
nav.main-nav{display:flex;gap:30px;}
nav.main-nav a{
  font-size:14.5px;font-weight:500;color:var(--charcoal);
  position:relative;padding:4px 0;
}
nav.main-nav a.active,
nav.main-nav a:hover{color:var(--blue);}
nav.main-nav a.active::after{
  content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;
  background:var(--orange);
}
.header-cta{
  background:var(--orange);
  color:var(--ink);
  font-weight:600;
  font-size:14px;
  padding:12px 22px;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease;
}
.header-cta:hover{background:var(--orange-dark);}
.nav-toggle{display:none;}

@media(max-width:900px){
  nav.main-nav{
    position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100vh;
    background:var(--ink);flex-direction:column;padding:100px 32px 32px;
    gap:26px;transition:right .25s ease;z-index:200;
  }
  nav.main-nav.open{right:0;}
  nav.main-nav a{color:#fff;font-size:17px;}
  .nav-toggle{
    display:block;background:none;border:2px solid var(--ink);
    width:42px;height:38px;position:relative;cursor:pointer;z-index:201;
  }
  .nav-toggle span,.nav-toggle::before,.nav-toggle::after{
    content:"";position:absolute;left:8px;right:8px;height:2px;background:var(--ink);
  }
  .nav-toggle span{top:18px;}
  .nav-toggle::before{top:11px;}
  .nav-toggle::after{top:25px;}
  .header-cta{
    display:inline-flex;
    padding:9px 14px;
    font-size:12.5px;
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--white);
  overflow:hidden;
  padding:88px 0 0;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(120deg, rgba(29,32,36,.97) 30%, rgba(29,32,36,.75) 60%, rgba(29,32,36,.55) 100%),
    repeating-linear-gradient(-45deg, transparent 0 40px, rgba(242,167,27,.05) 40px 41px);
  pointer-events:none;
}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;
  max-width:var(--container);margin:0 auto;padding:0 28px;
}
.hero-copy{padding-bottom:64px;}
.hero-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;color:var(--orange);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:10px;
}
.hero-tag::before{content:"";width:26px;height:2px;background:var(--orange);}
h1.hero-title{
  font-size:clamp(32px,4.6vw,54px);
  color:var(--white);
  margin-bottom:22px;
}
h1.hero-title em{
  font-style:normal;color:var(--orange);
}
.hero-copy p{
  font-size:17px;color:#C7C9CD;max-width:560px;margin-bottom:34px;
}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:14.5px;
  padding:15px 28px;
  border:2px solid transparent;
  cursor:pointer;
  transition:all .15s ease;
}
.btn-primary{background:var(--orange);color:var(--ink);}
.btn-primary:hover{background:var(--orange-dark);}
.btn-outline{border-color:#4A4D53;color:#fff;background:transparent;}
.btn-outline:hover{border-color:var(--orange);color:var(--orange);}

.hero-panel{
  position:relative;z-index:1;
  background:var(--charcoal);
  border-top:4px solid var(--orange);
  padding:32px 30px;
  margin-bottom:0;
  align-self:end;
}
.hero-panel h4{
  font-size:13px;color:var(--orange);margin-bottom:18px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.08em;
}
.hero-stat{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:13px 0;border-bottom:1px solid #3B3E44;
}
.hero-stat:last-child{border-bottom:none;}
.hero-stat b{font-family:'Oswald',sans-serif;font-size:16px;color:#fff;font-weight:500;}
.hero-stat span{font-size:13px;color:#9A9DA3;text-align:right;max-width:200px;}

.hero-strip{position:relative;z-index:1;margin-top:56px;}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;padding-top:20px;}
  .hero-panel{margin-top:24px;}
}

/* ==========================================================================
   ABOUT / INTRO TEXT
   ========================================================================== */
.about-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;
}
.about-grid .num-plate{
  font-family:'Oswald',sans-serif;font-size:110px;font-weight:600;
  color:var(--steel-pale);line-height:1;
}
.about-copy p{margin-bottom:18px;color:var(--charcoal);font-size:16px;}
.about-copy p:last-child{margin-bottom:0;}
@media(max-width:800px){
  .about-grid{grid-template-columns:1fr;gap:32px;}
}

/* ==========================================================================
   DIRECTIONS GRID (icon cards)
   ========================================================================== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:48px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:48px;}
.dir-card{
  background:var(--white);
  padding:32px 28px;
  transition:background .15s ease;
}
.dir-card:hover{background:#FBF7EE;}

.dir-card .idx{
  font-family:'JetBrains Mono',monospace;color:var(--orange-deep);
  font-size:12.5px;letter-spacing:.08em;margin-bottom:14px;display:block;
}
.dir-card--dark .idx{color:var(--orange);}
.dir-card h4{
  font-size:16px;text-transform:none;letter-spacing:0;
  font-family:'Inter',sans-serif;font-weight:600;
  color:var(--ink);margin-bottom:8px;
}
.dir-card p{font-size:14.5px;color:var(--steel);}

/* dark variant: used on charcoal section backgrounds — declared AFTER the base
   rules above so its text-color overrides reliably win despite equal specificity */
.dir-card--dark{
  background:var(--charcoal);
  transition:background .15s ease;
}
.dir-card--dark:hover{background:#34383F;}
.dir-card--dark h4{color:#fff;}
.dir-card--dark p{color:#B9BBC0;}

/* outlined variant: used for pale cards with a visible border */
.dir-card--outline{
  background:var(--white);
  border:1px solid var(--line);
  transition:background .15s ease;
}
.dir-card--outline:hover{background:#FBF7EE;}

@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-3,.grid-2{grid-template-columns:1fr;}}

/* ==========================================================================
   PRODUCT SPOTLIGHT CARDS
   ========================================================================== */
.spotlight-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px;
}
.spot-card{
  position:relative;
  background:var(--ink);
  color:#fff;
  min-height:340px;
  padding:36px;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.spot-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg, var(--charcoal), var(--ink) 70%);
}
.spot-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:var(--orange);
}
.spot-card.blue::after{background:var(--blue-light);}
.spot-tag{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--orange);
  letter-spacing:.1em;margin-bottom:14px;text-transform:uppercase;
}
.spot-card.blue .spot-tag{color:#6E8FD6;}
.spot-card h3{font-size:26px;color:#fff;margin-bottom:12px;}
.spot-card p{font-size:14.5px;color:#B9BBC0;margin-bottom:22px;max-width:400px;}
.spot-link{
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;
  color:var(--orange);display:inline-flex;align-items:center;gap:8px;
}
.spot-card.blue .spot-link{color:#6E8FD6;}
.spot-link::after{content:"→";transition:transform .15s ease;}
.spot-card:hover .spot-link::after{transform:translateX(6px);}
@media(max-width:800px){.spotlight-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   ADVANTAGE PLATES
   ========================================================================== */
.plate-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;
}
.plate{
  background:var(--white);
  border:1px solid var(--line);
  padding:30px 26px;
  position:relative;
}
.plate::before,.plate::after{
  content:"";position:absolute;width:14px;height:14px;
  border-top:2px solid var(--orange);border-left:2px solid var(--orange);
  top:-1px;left:-1px;
}
.plate::after{
  border-top:none;border-left:none;
  border-bottom:2px solid var(--orange);border-right:2px solid var(--orange);
  top:auto;left:auto;bottom:-1px;right:-1px;
}
.plate .p-num{
  font-family:'JetBrains Mono',monospace;color:var(--steel);font-size:12px;
  margin-bottom:14px;display:block;
}
.plate h4{
  font-size:16.5px;text-transform:none;letter-spacing:0;color:var(--ink);
  font-family:'Inter',sans-serif;font-weight:700;margin-bottom:10px;
}
.plate p{font-size:14.5px;color:var(--steel);}
@media(max-width:900px){.plate-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.plate-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   AUDIENCE TAGS
   ========================================================================== */
.tag-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;}
.tag-list li{
  font-family:'JetBrains Mono',monospace;font-size:13.5px;
  border:1px solid #4A4D53;color:#D9DADC;
  padding:11px 20px;
}
.section--dark .tag-list li{border-color:#4A4D53;}

/* ==========================================================================
   MISSION / QUOTE
   ========================================================================== */
.quote-block{
  border-left:4px solid var(--orange);
  padding:8px 0 8px 32px;
  margin-top:36px;
}
.quote-block p{
  font-family:'Oswald',sans-serif;font-size:clamp(20px,2.4vw,28px);
  font-weight:400;text-transform:none;line-height:1.4;color:var(--ink);
}
.section--dark .quote-block p,
.section--charcoal .quote-block p{color:#fff;}

/* ==========================================================================
   FAQ / INFO BLOCKS ACCORDION
   ========================================================================== */
.faq-list{margin-top:44px;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:24px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:'Oswald',sans-serif;font-size:17px;text-transform:none;color:var(--ink);
}
.faq-q .plus{
  font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--orange-deep);
  flex-shrink:0;transition:transform .2s ease;
}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .25s ease;
}
.faq-a p{padding:0 4px 24px;color:var(--steel);font-size:15px;max-width:720px;}

/* ==========================================================================
   FORM
   ========================================================================== */
.form-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:40px;align-items:start;
}
.form-side h3{
  font-size:22px;color:#fff;margin-bottom:14px;
}
.form-side p{color:#B9BBC0;font-size:15px;margin-bottom:26px;}
.form-side .phone-big{
  font-family:'Oswald',sans-serif;font-size:28px;color:var(--orange);margin-bottom:6px;
}
.contact-line{
  display:flex;gap:12px;padding:14px 0;border-top:1px solid #3B3E44;font-size:14.5px;color:#C7C9CD;
}
.contact-line b{color:#fff;font-weight:600;min-width:88px;display:inline-block;}

form.lead-form{
  background:var(--white);
  padding:36px;
}
form.lead-form .f-row{margin-bottom:18px;}
form.lead-form label{
  display:block;font-size:12.5px;font-family:'JetBrains Mono',monospace;
  color:var(--steel);margin-bottom:8px;letter-spacing:.03em;
}
form.lead-form input,form.lead-form textarea,form.lead-form select{
  width:100%;border:1px solid var(--line);background:var(--bg);
  padding:13px 14px;font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);
  outline:none;transition:border-color .15s ease;
}
form.lead-form input:focus,form.lead-form textarea:focus,form.lead-form select:focus{
  border-color:var(--orange);
}
form.lead-form textarea{resize:vertical;min-height:90px;}
form.lead-form .submit-btn{
  width:100%;background:var(--orange);color:var(--ink);border:none;
  padding:16px;font-weight:700;font-size:14.5px;cursor:pointer;letter-spacing:.02em;
  transition:background .15s ease;
}
form.lead-form .submit-btn:hover{background:var(--orange-dark);}
form.lead-form .consent{
  font-size:12px;color:var(--steel);margin-top:14px;line-height:1.5;
}
.hp-field{
  position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden;
}
.form-status{
  font-size:13.5px;margin-top:14px;min-height:0;
}
.form-status--ok{color:#6FCF97;}
.form-status--error{color:#F2994A;}
@media(max-width:800px){.form-wrap{grid-template-columns:1fr;gap:36px;}}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--ink);color:#9A9DA3;padding:56px 0 26px;}
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;
}
.foot-logo{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.foot-logo img{height:46px;background:#fff;padding:4px;}
.foot-col h5{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;
  color:var(--orange);margin-bottom:18px;text-transform:uppercase;
}
.foot-col a,.foot-col li{
  display:block;font-size:14px;color:#B9BBC0;margin-bottom:11px;
}
.foot-col a:hover{color:var(--orange);}
.foot-desc{font-size:14px;color:#8B8D92;max-width:300px;line-height:1.6;}
.foot-bottom{
  border-top:1px solid #34373D;padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12.5px;color:#9A9DA3;font-family:'JetBrains Mono',monospace;
}
.foot-bottom-link{
  color:#B9BBC0;text-decoration:underline;
}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.page-hero{
  background:var(--ink);color:#fff;padding:64px 0 56px;position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg, transparent 0 40px, rgba(242,167,27,.05) 40px 41px);
}
.page-hero .wrap{position:relative;z-index:1;}
.breadcrumb{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#9A9DA3;margin-bottom:18px;
}
.breadcrumb a{color:#C7C9CD;}
.breadcrumb a:hover{color:var(--orange);}
.page-hero h1{font-size:clamp(28px,4vw,44px);color:#fff;max-width:760px;}
.page-hero p.lead{color:#C7C9CD;margin-top:16px;}

.icon-list{margin-top:8px;}
.icon-list li{
  position:relative;padding-left:28px;margin-bottom:14px;font-size:15.5px;color:var(--charcoal);
}
.icon-list li::before{
  content:"";position:absolute;left:0;top:8px;width:10px;height:10px;background:var(--orange);
}
.section--dark .icon-list li,.section--charcoal .icon-list li{color:#D9DADC;}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
@media(max-width:800px){.two-col{grid-template-columns:1fr;gap:32px;}}

.cta-banner{
  background:var(--orange);
  padding:56px 0;
}
.cta-banner .wrap{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;
}
.cta-banner h3{font-size:24px;color:var(--ink);max-width:520px;}
.cta-banner p{color:#4a3a0f;font-size:14.5px;margin-top:8px;max-width:520px;}
.cta-banner .btn-outline{border-color:var(--ink);color:var(--ink);}
.cta-banner .btn-outline:hover{background:var(--ink);color:#fff;}

.back-to-top{
  position:fixed;bottom:28px;right:28px;z-index:90;
  width:48px;height:48px;background:var(--orange);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  border:none;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.back-to-top.show{opacity:1;pointer-events:auto;}

/* ==========================================================================
   MOBILE REFINEMENTS
   ========================================================================== */
@media(max-width:640px){
  /* prevent iOS Safari auto-zoom on input focus (requires >=16px font-size) */
  form.lead-form input,
  form.lead-form textarea,
  form.lead-form select{
    font-size:16px;
  }

  /* keep header-top compact: hide the long promo line, keep the tappable phone number */
  .header-top .wrap{gap:10px;}
  .header-top .wrap > span:first-child{
    display:none;
  }
  .header-top .wrap{justify-content:flex-end;}
  .header-top .h-phone{
    padding:4px 0;
    font-size:13.5px;
  }

  /* smaller logo on very small screens so header doesn't crowd */
  .logo-block img{height:40px;}
  .logo-text span{display:none;}

  /* map: shorter on mobile to reduce scroll length */
  #contact iframe{height:280px !important;}

  /* larger tap targets for nav links inside the mobile drawer */
  nav.main-nav a{padding:10px 0;}

  /* full-width CTA buttons stack better on narrow screens */
  .hero-btns .btn{width:100%;justify-content:center;}

  .cta-banner .wrap{flex-direction:column;align-items:flex-start;}
  .cta-banner .btn-outline{width:100%;justify-content:center;}
}

@media(max-width:400px){
  .wrap{padding:0 18px;}
  h1.hero-title{font-size:28px;}
  .nav-row{padding:14px 16px;gap:10px;}
  .header-cta{padding:8px 10px;font-size:11.5px;}
}

/* respect users who prefer less motion */
@media(prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}
}