/*
Theme Name: Techno Fire Safety Systems
Theme URI: https://technofiresafetyllp.com
Author: Techno Fire Safety Systems LLP
Description: Custom brand theme for Techno Fire Safety Systems LLP -- Fire, Civil, Plumbing & Interiors.
Version: 1.1
Text Domain: techno-fire
*/

  :root{
    --ember:#B4270F;
    --ember-dark:#7A1B0B;
    --ember-light:#D6431F;
    --charcoal:#2B2B2B;
    --charcoal-deep:#141413;
    --steel:#4A4A48;
    --flame-orange:#F17614;
    --flame-gold:#FAC850;
    --paper:#FAF7F2;
    --paper-dim:#F1ECE3;
    --ink:#1C1A17;
    --ink-soft:#5B564D;
    --line: rgba(28,26,23,0.1);
    --line-dark: rgba(255,255,255,0.12);
    --shadow: 0 20px 50px rgba(20,15,10,0.15);
    --ease: cubic-bezier(.22,.9,.32,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Work Sans', sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4,.display{font-family:'Barlow Condensed', sans-serif;text-transform:uppercase;letter-spacing:0.01em;font-weight:800;line-height:0.98;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  .wrap{max-width:1280px;margin:0 auto;padding:0 32px;}
  .eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:0.32em;font-size:12.5px;text-transform:uppercase;}
  ::selection{background:var(--ember);color:#fff;}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-stagger > *{transition-delay:calc(var(--i, 0) * 90ms);}
  @media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;} .reveal{opacity:1;transform:none;}}

  /* ---------- One-time fire-sprinkle intro overlay (site-wide) ---------- */
  #fireSprinkleIntro{
    position:fixed; inset:0; z-index:9999; pointer-events:none;
    background:rgba(10,9,8,0.0); opacity:1; transition:opacity 1.1s ease;
  }
  #fireSprinkleIntro.fade-out{opacity:0;}
  #fireSprinkleIntro svg{width:100% !important; height:100% !important;}

  /* ---------- Utility bar ---------- */
  .util-bar{
    background:var(--charcoal-deep); color:rgba(255,255,255,0.65);
    font-size:12.5px; padding:8px 0; position:relative; z-index:250;
  }
  .util-bar .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}
  .util-bar a{color:rgba(255,255,255,0.65); transition:color .3s;}
  .util-bar a:hover{color:var(--flame-gold);}
  .util-left{display:flex; gap:22px; flex-wrap:wrap;}
  .util-left span{display:inline-flex; align-items:center; gap:7px;}
  .util-left svg{width:13px; height:13px;}
  .util-right{display:flex; gap:16px; align-items:center;}
  .util-right a{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;}
  .util-right svg{width:12px;height:12px;}

  /* ---------- Nav ---------- */
  header.nav{position:sticky; top:0; left:0; right:0; z-index:200; padding:18px 0; background:var(--paper); border-bottom:1px solid var(--line); transition:padding .35s var(--ease), box-shadow .35s var(--ease);}
  header.nav.shrink{padding:10px 0; box-shadow:0 8px 26px rgba(20,15,10,0.08);}
  header.nav .wrap{display:flex;align-items:center;justify-content:space-between;}
  .brand{display:flex;align-items:center;gap:12px; min-width:0;}
  .brand img{height:48px;width:auto;transition:height .35s var(--ease); flex:none;}
  header.nav.shrink .brand img{height:38px;}
  .brand-type{font-family:'Barlow Condensed',sans-serif;font-weight:800;line-height:1.15; min-width:0; white-space:nowrap;}
  .brand-type .t1{font-size:19px;letter-spacing:0.03em;color:var(--ink);}
  .brand-type .t2{font-size:10px;letter-spacing:0.2em;color:var(--ember);}
  nav.links{display:flex;gap:32px;align-items:center;}
  nav.links a{font-size:14px;font-weight:600;letter-spacing:0.02em;color:var(--ink);position:relative;padding:4px 0;}
  nav.links a::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;background:linear-gradient(90deg,var(--flame-orange),var(--ember));transition:width .35s var(--ease);}
  .nav-drop{position:relative;}
  .nav-drop > a{display:flex; align-items:center; gap:5px;}
  .nav-drop > a .caret{width:9px;height:9px; transition:transform .3s var(--ease); opacity:0.6;}
  .nav-drop:hover > a .caret{transform:rotate(180deg);}
  .nav-drop-panel{
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px); width:560px;
    background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 26px 60px rgba(20,15,10,0.16);
    padding:20px; margin-top:14px; display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
    opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); z-index:300;
  }
  .nav-drop:hover .nav-drop-panel{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
  .nav-drop-panel a{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:7px; font-size:13.5px; font-weight:600; color:var(--ink); transition:background .2s, color .2s;}
  .nav-drop-panel a:hover{background:var(--paper-dim); color:var(--ember);}
  .nav-drop-panel a svg{width:17px;height:17px;color:var(--ember); flex:none;}
  .nav-drop-panel .drop-foot{grid-column:1 / -1; margin-top:8px; padding-top:14px; border-top:1px solid var(--line);}
  .nav-drop-panel .drop-foot a{color:var(--ember); font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; font-size:12.5px; justify-content:center;}
  .nav-drop-panel .drop-foot a:hover{background:transparent; color:var(--flame-orange);}
  nav.links a:hover::after{width:100%;}
  .nav-cta{display:flex;align-items:center;gap:16px;}
  .nav-call{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;}
  .nav-call svg{width:16px;height:16px;flex:none;color:var(--ember);}
  .btn{display:inline-flex;align-items:center;gap:10px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;font-size:14px;padding:13px 26px;border-radius:3px;cursor:pointer;border:none;transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-position .5s var(--ease);}
  .btn-flame{color:#fff;background:linear-gradient(100deg,var(--ember) 0%, var(--flame-orange) 55%, var(--ember) 110%);background-size:220% 100%; background-position:0% 0;box-shadow:0 10px 26px rgba(180,39,15,0.32);}
  .btn-flame:hover{background-position:100% 0; transform:translateY(-2px); box-shadow:0 14px 30px rgba(180,39,15,0.42);}
  .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.55);}
  .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.08); transform:translateY(-2px);}
  .btn-ghost-dark{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
  .btn-ghost-dark:hover{border-color:var(--ink); transform:translateY(-2px);}
  .hamburger{display:none;}
  .mobile-panel, .mobile-overlay{display:none;}

  /* ---------- Hero ---------- */
  .hero{position:relative; min-height:96vh; display:flex; align-items:center; overflow:hidden; padding-top:60px;}
  .hero-bg{position:absolute; inset:0; z-index:0;}
  .hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
  .hero-bg .slide{position:absolute; inset:0; opacity:0; animation:heroSlideshow 20s infinite;}
  .hero-bg .slide:nth-child(1){animation-delay:0s;}
  .hero-bg .slide:nth-child(2){animation-delay:5s;}
  .hero-bg .slide:nth-child(3){animation-delay:10s;}
  .hero-bg .slide:nth-child(4){animation-delay:15s;}
  @keyframes heroSlideshow{
    0%{opacity:0; transform:scale(1.06);}
    4%{opacity:1; transform:scale(1.06);}
    22%{opacity:1; transform:scale(1);}
    27%{opacity:0; transform:scale(1);}
    100%{opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){
    .hero-bg .slide{animation:none; opacity:0;}
    .hero-bg .slide:first-child{opacity:1;}
  }
  .hero-bg .overlay{
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(100deg, rgba(10,9,8,0.94) 0%, rgba(10,9,8,0.86) 32%, rgba(122,27,11,0.72) 62%, rgba(180,39,15,0.55) 100%);
  }
  .hero-bg .slash{
    display:none;
  }
  .embers{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
  .fire-drops-layer{position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; opacity:1; filter:drop-shadow(0 0 3px rgba(250,200,80,0.6));}
  .fire-drops-layer svg{width:100% !important; height:100% !important;}
  .ember-particle{position:absolute; bottom:-20px; width:6px;height:6px;border-radius:50%;background:radial-gradient(circle, var(--flame-gold), var(--flame-orange) 70%, transparent 75%);opacity:0;animation:rise linear infinite;}
  @keyframes rise{0%{transform:translateY(0) translateX(0) scale(0.6); opacity:0;}8%{opacity:0.9;}50%{transform:translateY(-52vh) translateX(20px) scale(1);}90%{opacity:0.35;}100%{transform:translateY(-95vh) translateX(-10px) scale(0.4); opacity:0;}}

  .hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.85fr; align-items:center; gap:40px; width:100%; padding-top:40px; padding-bottom:60px;}
  .hero-copy .eyebrow{color:var(--flame-gold); margin-bottom:20px; display:flex; align-items:center; gap:12px;}
  .hero-copy .eyebrow::before{content:''; width:34px; height:1.5px; background:var(--flame-gold); display:inline-block;}
  .hero-copy h1{color:#fff; font-size:clamp(38px, 5vw, 70px); margin-bottom:24px;}
  .hero-copy h1 em{font-style:normal; color:transparent; background:linear-gradient(100deg, var(--flame-gold), var(--flame-orange)); -webkit-background-clip:text; background-clip:text;}
  .hero-copy p.lede{color:rgba(255,255,255,0.82); font-size:17px; line-height:1.65; max-width:480px; margin-bottom:34px; font-weight:400;}
  .hero-pillars{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
  .hero-pillars span{
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
    color:#fff; border:1px solid rgba(255,255,255,0.3); padding:8px 16px; border-radius:30px; background:rgba(255,255,255,0.06);
  }
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px;}
  .hero-meta{display:flex; gap:30px; flex-wrap:wrap;}
  .hero-meta .num{font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:28px; color:#fff; line-height:1; text-shadow:0 0 0 rgba(241,118,20,0); animation:numGlow 3.4s ease-in-out infinite;}
  @keyframes numGlow{0%,100%{text-shadow:0 0 0 rgba(241,118,20,0);}50%{text-shadow:0 0 14px rgba(241,118,20,0.55);}}
  @keyframes statPunch{0%{transform:scale(0.55); opacity:0;}55%{transform:scale(1.15); opacity:1;}75%{transform:scale(0.95);}100%{transform:scale(1);}}
  [data-count]{display:inline-block;}
  [data-count].counted{animation:statPunch .65s cubic-bezier(.34,1.56,.64,1) both;}
  .hero-meta .lbl{font-size:11.5px; letter-spacing:0.09em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-top:4px;}

  .hero-mark{position:relative; display:flex; align-items:center; justify-content:center; height:460px;}
  .hero-mark .ring{position:absolute; width:400px; height:400px; border-radius:50%; border:1px dashed rgba(255,255,255,0.28); animation:spin 60s linear infinite;}
  .hero-mark .ring.r2{width:470px; height:470px; border-color:rgba(250,200,80,0.2); animation-duration:90s; animation-direction:reverse;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .hero-mark .glow{position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(241,118,20,0.65), rgba(180,39,15,0.25) 55%, transparent 72%); filter:blur(6px); animation:glowPulse 3.2s ease-in-out infinite;}
  @keyframes glowPulse{0%,100%{opacity:0.75; transform:scale(1);}50%{opacity:1; transform:scale(1.08);}}
  .flame-figure{position:relative; width:290px; height:360px; z-index:2; filter:drop-shadow(0 24px 50px rgba(0,0,0,0.6));}
  .flame-figure svg{display:block; width:100%; position:absolute; left:0; bottom:0;}
  .flame-outer{transform-origin:50% 96%; animation:flameSwayA 3.6s ease-in-out infinite;}
  .flame-inner{width:60% !important; left:20% !important; transform-origin:50% 96%; animation:flameSwayB 2.4s ease-in-out infinite;}
  .flame-core{width:32% !important; left:34% !important; transform-origin:50% 96%; animation:flameSwayC 1.8s ease-in-out infinite;}
  @keyframes flameSwayA{0%{transform:scaleY(1) skewX(-2deg);}25%{transform:scaleY(1.04) skewX(1.5deg);}50%{transform:scaleY(0.98) skewX(-1deg);}75%{transform:scaleY(1.05) skewX(2deg);}100%{transform:scaleY(1) skewX(-2deg);}}
  @keyframes flameSwayB{0%{transform:scaleY(1) skewX(2deg);}30%{transform:scaleY(0.95) skewX(-2deg);}60%{transform:scaleY(1.06) skewX(1deg);}100%{transform:scaleY(1) skewX(2deg);}}
  @keyframes flameSwayC{0%,100%{transform:scaleY(1) translateX(0);}50%{transform:scaleY(1.1) translateX(2px);}}

  .hero-divider{position:absolute; left:0; right:0; bottom:-1px; z-index:2; line-height:0; height:40px; overflow:hidden;}
  .hero-divider svg{width:100%; height:100%; display:block;}
  .hero-divider path{fill:var(--ink); animation:dividerFlicker 4s ease-in-out infinite;}
  @keyframes dividerFlicker{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}
  .scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,0.55); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;}
  .scroll-cue .line{width:1px; height:30px; background:linear-gradient(180deg, rgba(255,255,255,0.7), transparent); animation:pulse 2s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:0.3;}50%{opacity:1;}}

  /* ---------- Ticker ---------- */
  .ticker-strip{background:var(--ink); overflow:hidden; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.06);}
  .ticker-track{display:flex; width:max-content; animation:ticker 26s linear infinite;}
  .ticker-track span{font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:0.14em; font-size:13.5px; color:rgba(255,255,255,0.55); text-transform:uppercase; padding:0 22px; white-space:nowrap; display:flex; align-items:center; gap:22px;}
  .ticker-track span b{color:var(--flame-gold); font-weight:700;}
  @keyframes ticker{to{transform:translateX(-50%);}}

  /* ---------- Trust strip ---------- */
  .trust{padding:52px 0; background:var(--paper); border-bottom:1px solid var(--line);}
  .trust-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px;}
  .trust-item{display:flex; align-items:center; gap:14px; flex:1; min-width:200px;}
  .trust-item .ico{width:38px;height:38px;color:var(--ember); flex:none; animation:iconPulse 3s ease-in-out infinite;}
  .trust-item:nth-child(2) .ico{animation-delay:.4s;}
  .trust-item:nth-child(3) .ico{animation-delay:.8s;}
  .trust-item:nth-child(4) .ico{animation-delay:1.2s;}
  @keyframes iconPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(180,39,15,0));}50%{filter:drop-shadow(0 0 6px rgba(180,39,15,0.45));}}
  .trust-item h5{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16.5px; text-transform:uppercase; letter-spacing:0.02em;}
  .trust-item p{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}

  /* ---------- Section heads ---------- */
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .section-head .eyebrow{color:var(--ember); margin-bottom:14px; display:flex; align-items:center; gap:12px;}
  .section-head.center .eyebrow{justify-content:center;}
  .section-head .eyebrow::before{content:''; width:34px; height:1.5px; background:var(--ember); display:inline-block;}
  .section-head.center .eyebrow::before{display:none;}
  .section-head h2{font-size:clamp(30px,3.8vw,48px); color:var(--ink);}
  .section-head p{margin-top:16px; color:var(--ink-soft); font-size:16px; line-height:1.6; max-width:560px;}
  .section-head.center p{margin-left:auto; margin-right:auto;}

  /* ---------- About ---------- */
  .about{padding:110px 0; background:var(--paper);}
  .about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
  .about-media{position:relative;}
  .about-media img{border-radius:4px; width:100%; height:460px; object-fit:cover; box-shadow:var(--shadow);}
  .about-media .badge{
    position:absolute; bottom:-26px; left:-26px; background:var(--charcoal-deep); color:#fff;
    padding:22px 26px; border-radius:4px; box-shadow:0 16px 40px rgba(0,0,0,0.3);
  }
  .about-media .badge .n{font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:38px; color:var(--flame-gold); line-height:1;}
  .about-media .badge .l{font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-top:4px;}
  .about-copy p{font-size:16px; line-height:1.75; color:var(--ink-soft); margin-bottom:18px;}
  .about-list{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px;}
  .about-list div{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; font-weight:600;}
  .about-list svg{width:18px;height:18px;color:var(--ember); flex:none; margin-top:2px;}

  /* ---------- Pillars ---------- */
  .pillars{background:var(--charcoal-deep); padding:110px 0;}
  .pillars .section-head h2, .pillars .section-head p{color:#fff;}
  .pillars .section-head p{color:rgba(255,255,255,0.62);}
  .pillars .section-head .eyebrow{color:var(--flame-gold);}
  .pillar-row{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; margin-bottom:2px; background:rgba(255,255,255,0.04);}
  .pillar-row.reverse{direction:rtl;}
  .pillar-row.reverse > *{direction:ltr;}
  .pillar-media{position:relative; min-height:340px; overflow:hidden;}
  .pillar-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .8s var(--ease);}
  .pillar-row:hover .pillar-media img{transform:scale(1.06);}
  .pillar-media .num{
    position:absolute; top:24px; left:24px; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:15px;
    color:#fff; background:rgba(20,20,19,0.55); backdrop-filter:blur(4px); padding:8px 14px; border-radius:30px; letter-spacing:0.1em;
  }
  .pillar-copy{padding:56px 60px; display:flex; flex-direction:column; justify-content:center; color:#fff;}
  .pillar-copy .eyebrow{color:var(--flame-orange); margin-bottom:14px;}
  .pillar-copy h3{font-size:clamp(26px,3vw,38px); margin-bottom:16px;}
  .pillar-copy p{color:rgba(255,255,255,0.65); font-size:15px; line-height:1.7; margin-bottom:24px; max-width:440px;}
  .pillar-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
  .pillar-tags span{font-size:12px; font-weight:600; color:rgba(255,255,255,0.75); border:1px solid rgba(255,255,255,0.18); padding:6px 12px; border-radius:20px;}
  .pillar-link{display:inline-flex; align-items:center; gap:8px; font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; font-size:14px; color:var(--flame-gold);}
  .pillar-link svg{width:16px;height:16px; transition:transform .3s var(--ease);}
  .pillar-row:hover .pillar-link svg{transform:translateX(5px);}

  /* ---------- Fire services grid ---------- */
  .services{padding:110px 0 100px; background:var(--paper);}
  .svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .svc-card{background:var(--paper); padding:32px 24px; position:relative; overflow:hidden; transition:background .4s var(--ease);}
  .svc-card::before{content:''; position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 40px 40px 0; border-color:transparent var(--paper-dim) transparent transparent; transition:border-color .4s var(--ease);}
  .svc-card:hover{background:var(--charcoal-deep);}
  .svc-card:hover::before{border-color:transparent var(--ember) transparent transparent;}
  .svc-card .ico{width:44px; height:44px; margin-bottom:20px; color:var(--ember); transition:transform .5s var(--ease), color .4s var(--ease);}
  .svc-card:hover .ico{color:var(--flame-gold); transform:rotate(-8deg) scale(1.08);}
  .svc-card h3{font-size:19px; letter-spacing:0.01em; margin-bottom:9px; color:var(--ink); transition:color .4s var(--ease); font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;}
  .svc-card:hover h3{color:#fff;}
  .svc-card p{font-size:13.5px; line-height:1.6; color:var(--ink-soft); transition:color .4s var(--ease);}
  .svc-card:hover p{color:rgba(255,255,255,0.65);}
  .svc-card .tag{position:absolute; top:16px; right:16px; font-family:'Barlow Condensed',sans-serif; font-size:11.5px; font-weight:700; color:var(--paper); z-index:2;}

  /* ---------- Process ---------- */
  .process{padding:110px 0; background:var(--paper-dim);}
  .process-track{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:20px;}
  .process-track::before{content:''; position:absolute; top:29px; left:8%; right:8%; height:3px; background:linear-gradient(90deg, var(--ember), var(--flame-orange), var(--flame-gold), var(--flame-orange), var(--ember)); background-size:200% 100%; animation:flowFlame 3.5s linear infinite; border-radius:2px;}
  @keyframes flowFlame{0%{background-position:0% 0;}100%{background-position:200% 0;}}
  .process-step{position:relative;}
  .process-step .idx{
    width:60px; height:60px; border-radius:50%; background:var(--paper); border:2px solid var(--ember); color:var(--ember);
    display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:22px;
    position:relative; z-index:1; margin-bottom:22px; transition:background .35s var(--ease), color .35s var(--ease);
  }
  .process-step:hover .idx{background:var(--ember); color:#fff;}
  .process-step h4{font-size:20px; letter-spacing:0.01em; margin-bottom:10px;}
  .process-step p{font-size:14px; color:var(--ink-soft); line-height:1.6;}

  /* ---------- Why us ---------- */
  .why{background:var(--charcoal-deep); color:#fff; padding:110px 0; position:relative; overflow:hidden;}
  .why::before{content:''; position:absolute; top:-20%; right:-10%; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(180,39,15,0.35), transparent 70%);}
  .why-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center; position:relative; z-index:1;}
  .why-media{position:relative; border-radius:4px; overflow:hidden; box-shadow:var(--shadow);}
  .why-media img{width:100%; height:480px; object-fit:cover;}
  .why-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6) 100%);}
  .why-list{display:flex; flex-direction:column;}
  .why-left .eyebrow{color:var(--flame-gold); margin-bottom:16px; display:flex; align-items:center; gap:12px;}
  .why-left .eyebrow::before{content:''; width:34px; height:1.5px; background:var(--flame-gold); display:inline-block;}
  .why-left h2{font-size:clamp(30px,3.4vw,42px); margin-bottom:20px;}
  .why-item{display:grid; grid-template-columns:56px 1fr; gap:20px; padding:22px 0; border-top:1px solid rgba(255,255,255,0.1);}
  .why-item:last-child{border-bottom:1px solid rgba(255,255,255,0.1);}
  .why-item .ico{width:38px; height:38px; color:var(--flame-orange);}
  .why-item h4{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:19px; letter-spacing:0.01em; text-transform:uppercase; margin-bottom:6px;}
  .why-item p{color:rgba(255,255,255,0.6); font-size:13.5px; line-height:1.6;}

  /* ---------- Values ---------- */
  .values{padding:100px 0; background:var(--paper);}
  .values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:10px;}
  .value-card{padding:8px 0; border-top:2px solid var(--ember);}
  .value-card .ico{width:36px;height:36px;color:var(--ember); margin:18px 0 16px;}
  .value-card h4{font-size:20px; margin-bottom:10px; letter-spacing:0.01em;}
  .value-card p{font-size:14px; color:var(--ink-soft); line-height:1.65;}

  /* ---------- Clients ---------- */
  .clients{padding:100px 0 90px; background:var(--paper-dim);}
  .marquee-row{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0; margin-top:14px; background:var(--paper);}
  .marquee-row + .marquee-row{border-top:none;}
  .marquee-inner{display:flex; width:max-content; animation:marquee 34s linear infinite;}
  .marquee-row.rev .marquee-inner{animation-direction:reverse; animation-duration:38s;}
  .marquee-inner .chip{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:24px; letter-spacing:0.02em; color:var(--ink-soft); padding:0 38px; white-space:nowrap; display:flex; align-items:center; gap:38px; text-transform:uppercase;}
  .marquee-inner .chip::after{content:'🔥'; font-size:15px; display:inline-block; animation:flickerScale 1.6s ease-in-out infinite;}
  @keyframes flickerScale{0%,100%{transform:scale(1) rotate(0deg); opacity:0.85;}50%{transform:scale(1.18) rotate(-4deg); opacity:1;}}
  @keyframes marquee{to{transform:translateX(-50%);}}
  .reviews-cta{margin-top:44px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}
  .reviews-cta .stars{color:var(--flame-orange); letter-spacing:2px; font-size:18px;}

  /* ---------- CTA band ---------- */
  .cta-band{position:relative; padding:110px 0; overflow:hidden;}
  .cta-band .cta-bg{position:absolute; inset:0; z-index:0;}
  .cta-band .cta-bg img{width:100%; height:100%; object-fit:cover;}
  .cta-band .cta-bg .overlay{position:absolute; inset:0; background:linear-gradient(100deg, rgba(122,27,11,0.94) 0%, rgba(180,39,15,0.88) 55%, rgba(20,20,19,0.85) 100%);}
  .cta-inner{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;}
  .cta-inner h2{color:#fff; font-size:clamp(28px,3.8vw,46px); max-width:600px;}
  .cta-inner .sub{color:rgba(255,255,255,0.8); margin-top:14px; font-size:16px; max-width:480px;}
  .cta-actions{display:flex; gap:16px; flex-wrap:wrap;}
  .btn-white{background:#fff; color:var(--ember); box-shadow:0 10px 26px rgba(0,0,0,0.25);}
  .btn-white:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,0.3);}

  /* ---------- Newsletter ---------- */
  .newsletter{background:var(--ink); padding:56px 0;}
  .newsletter .wrap{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
  .newsletter h4{color:#fff; font-size:22px; letter-spacing:0.01em;}
  .newsletter p{color:rgba(255,255,255,0.55); font-size:13.5px; margin-top:6px;}
  .newsletter-form{display:flex; gap:0; max-width:400px; width:100%;}
  .newsletter-form input{flex:1; padding:14px 18px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); color:#fff; font-size:14px; border-radius:3px 0 0 3px; outline:none;}
  .newsletter-form input::placeholder{color:rgba(255,255,255,0.4);}
  .newsletter-form button{border-radius:0 3px 3px 0; padding:14px 22px;}

  /* ---------- Footer ---------- */
  footer{background:var(--charcoal-deep); color:rgba(255,255,255,0.75); padding:80px 0 30px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:50px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.1);}
  .foot-brand img{height:52px; margin-bottom:18px;}
  .foot-brand p{font-size:14px; line-height:1.7; color:rgba(255,255,255,0.5); max-width:280px;}
  .foot-social{display:flex; gap:10px; margin-top:20px;}
  .foot-social a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center; transition:.3s;}
  .foot-social a:hover{background:var(--ember); border-color:var(--ember);}
  .foot-social svg{width:14px;height:14px;}
  .foot-col h5{font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:0.14em; font-size:12.5px; text-transform:uppercase; color:var(--flame-gold); margin-bottom:20px;}
  .foot-col a, .foot-col p{display:block; font-size:14.5px; color:rgba(255,255,255,0.62); margin-bottom:12px; line-height:1.6; transition:color .3s;}
  .foot-col a:hover{color:#fff;}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12.5px; color:rgba(255,255,255,0.4); flex-wrap:wrap; gap:12px;}
  .foot-bottom .credentials{display:flex; gap:18px; flex-wrap:wrap;}

  /* ---------- Responsive ---------- */
  @media (max-width: 1080px){
    .about-grid, .why-grid{grid-template-columns:1fr;}
    .about-media img, .why-media img{height:340px;}
    .about-media .badge{left:0;}
    .pillar-row, .pillar-row.reverse{grid-template-columns:1fr; direction:ltr;}
    .pillar-media{min-height:260px;}
    .pillar-copy{padding:44px 34px;}
  }
  @media (max-width: 980px){
    .hero .wrap{grid-template-columns:1fr; text-align:left; padding-top:20px;}
    .hero-mark{margin-top:40px; transform:scale(0.8); justify-content:flex-start;}
    .trust-grid{gap:24px;}
    .trust-item{min-width:45%;}
    .svc-grid{grid-template-columns:repeat(2,1fr);}
    .values-grid{grid-template-columns:repeat(2,1fr);}
    .process-track{grid-template-columns:repeat(2,1fr); row-gap:40px;}
    .process-track::before{display:none;}
    .foot-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
    .about-list{grid-template-columns:1fr;}
  }
  @media (max-width: 720px){
    .util-bar .util-left span:nth-child(2){display:none;}
    nav.links, .nav-cta .nav-call, .nav-cta .btn-flame{display:none;}
    .brand img{height:34px;}
    .brand-type .t1{font-size:14px; letter-spacing:0.01em;}
    .brand-type .t2{font-size:7.5px; letter-spacing:0.12em;}
    header.nav .wrap{flex-wrap:nowrap; gap:10px;}
    .nav-cta{gap:10px;}
    .hamburger{display:flex; flex-direction:column; gap:5px; width:24px; cursor:pointer; z-index:210; flex:none;}
    .hamburger span{height:2px; background:var(--ink); transition:.3s;}
    .mobile-panel{position:fixed; inset:0 0 0 auto; width:80%; max-width:320px; height:100vh; background:var(--charcoal-deep); z-index:220; padding:100px 34px; transform:translateX(100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; gap:24px; overflow-y:auto;}
    .mobile-panel.open{transform:translateX(0);}
    .mobile-panel a{color:#fff; font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700; text-transform:uppercase;}
    .mobile-overlay{display:block; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:210; opacity:0; pointer-events:none; transition:opacity .4s;}
    .mobile-overlay.open{opacity:1; pointer-events:auto;}
    .hero{min-height:auto; padding-bottom:40px;}
    .hero-copy h1{font-size:36px;}
    .hero-meta{gap:20px;}
    .trust-item{min-width:100%;}
    .svc-grid{grid-template-columns:1fr;}
    .values-grid{grid-template-columns:1fr;}
    .process-track{grid-template-columns:1fr;}
    .cta-inner{flex-direction:column; align-items:flex-start;}
    .foot-grid{grid-template-columns:1fr;}
    .newsletter .wrap{flex-direction:column; align-items:flex-start;}
    .newsletter-form{max-width:100%;}
    .pillar-copy{padding:36px 22px;}
    .about-media .badge{position:static; margin-top:16px; display:inline-block;}
    .about{padding:70px 0;}
    .pillars, .services, .process, .why, .values, .clients, .cta-band{padding:70px 0;}
  }

/* ===== About page ===== */
  /* ---------- Page hero (inner pages) ---------- */
  .page-hero{position:relative; padding:150px 0 90px; overflow:hidden; background:linear-gradient(150deg, #201f1d 0%, #131211 55%, #3d0c05 130%);}
  .page-hero .fire-drops-layer{opacity:0.6;}
  .page-hero .wrap{position:relative; z-index:2;}
  .breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:18px; font-weight:600;}
  .breadcrumb a{color:rgba(255,255,255,0.55);}
  .breadcrumb a:hover{color:var(--flame-gold);}
  .breadcrumb svg{width:12px;height:12px;}
  .page-hero h1{color:#fff; font-size:clamp(38px,5.4vw,64px); max-width:760px;}
  .page-hero h1 em{font-style:normal; color:transparent; background:linear-gradient(100deg, var(--flame-gold), var(--flame-orange)); -webkit-background-clip:text; background-clip:text;}
  .page-hero p.lede{color:rgba(255,255,255,0.72); font-size:16.5px; line-height:1.65; max-width:560px; margin-top:18px;}
  nav.links a.active{color:var(--ember);}
  nav.links a.active::after{width:100%;}

  /* ---------- Story ---------- */
  .story{padding:110px 0; background:var(--paper);}
  .story-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;}
  .story-media{position:relative;}
  .story-media img{border-radius:4px; width:100%; height:440px; object-fit:cover; box-shadow:var(--shadow);}
  .story-copy p{font-size:16px; line-height:1.75; color:var(--ink-soft); margin-bottom:18px;}

  /* ---------- Timeline ---------- */
  .timeline-sec{padding:110px 0; background:var(--paper-dim);}
  .timeline{position:relative; margin-top:60px;}
  .timeline::before{content:''; position:absolute; left:29px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, var(--ember), var(--flame-orange), var(--flame-gold)); transform:scaleY(0); transform-origin:top; transition:transform 1.6s cubic-bezier(.22,.9,.32,1) .2s;}
  .timeline.in::before{transform:scaleY(1);}
  .t-item{position:relative; padding-left:80px; margin-bottom:50px; opacity:0; transform:translateX(-24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .t-item:nth-child(even){transform:translateX(24px);}
  .timeline.in .t-item{opacity:1; transform:translateX(0);}
  .timeline.in .t-item:nth-child(1){transition-delay:.3s;}
  .timeline.in .t-item:nth-child(2){transition-delay:.7s;}
  .timeline.in .t-item:nth-child(3){transition-delay:1.1s;}
  .timeline.in .t-item:nth-child(4){transition-delay:1.5s;}
  .t-item:last-child{margin-bottom:0;}
  .t-item .dot{
    position:absolute; left:12px; top:2px; width:36px; height:36px; border-radius:50%; background:var(--paper-dim);
    border:2px solid var(--ember); display:flex; align-items:center; justify-content:center; z-index:1;
  }
  .t-item .dot::after{content:''; width:10px; height:10px; border-radius:50%; background:var(--ember); animation:dotPulse 2.4s ease-in-out infinite;}
  @keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(180,39,15,0.5);}50%{box-shadow:0 0 0 8px rgba(180,39,15,0);}}
  .t-item .tag{font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:0.1em; font-size:12.5px; color:var(--ember); text-transform:uppercase;}
  .t-item h4{font-size:23px; margin-top:6px; margin-bottom:8px;}
  .t-item p{font-size:14.5px; color:var(--ink-soft); line-height:1.65; max-width:560px;}

  /* ---------- Mission / Vision ---------- */
  .mv{padding:100px 0; background:var(--paper);}
  .mv-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line);}
  .mv-card{background:var(--paper); padding:48px 44px;}
  .mv-card.dark{background:var(--charcoal-deep); color:#fff;}
  .mv-card .ico{width:42px;height:42px;color:var(--ember); margin-bottom:22px;}
  .mv-card.dark .ico{color:var(--flame-gold);}
  .mv-card h3{font-size:26px; margin-bottom:16px;}
  .mv-card p{font-size:15.5px; line-height:1.75; color:var(--ink-soft);}
  .mv-card.dark p{color:rgba(255,255,255,0.68);}

  /* ---------- Team ---------- */
  .team{padding:110px 0; background:var(--paper-dim);}
  .team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:20px;}
  .team-card{background:var(--paper); border:1px solid var(--line); padding:30px 24px; text-align:center; transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
  .team-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(20,15,10,0.12);}
  .team-avatar{
    width:78px; height:78px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--ember), var(--flame-orange)); color:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:24px;
    position:relative;
  }
  .team-avatar::after{content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px dashed rgba(180,39,15,0.35); animation:spin 30s linear infinite;}
  .team-card h4{font-size:18px; letter-spacing:0.01em; margin-bottom:4px;}
  .team-card .role{font-size:12.5px; color:var(--ember); font-weight:600; letter-spacing:0.06em; text-transform:uppercase;}

  /* ---------- Certifications ---------- */
  .certs{padding:100px 0; background:var(--paper);}
  .certs-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .certs-media{position:relative; display:flex; align-items:center; justify-content:center;}
  .certs-media img{width:100%; max-width:340px; border-radius:8px; box-shadow:var(--shadow);}
  .certs-list{display:flex; flex-direction:column; gap:0;}
  .cert-item{display:grid; grid-template-columns:50px 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--line);}
  .cert-item:last-child{border-bottom:1px solid var(--line);}
  .cert-item .ico{width:34px;height:34px;color:var(--ember);}
  .cert-item h4{font-size:18px; margin-bottom:5px;}
  .cert-item p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}

  @media (max-width: 980px){
    .story-grid, .certs-grid{grid-template-columns:1fr;}
    .story-media img{height:320px;}
    .mv-grid{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width: 720px){
    .page-hero{padding:120px 0 60px;}
    .team-grid{grid-template-columns:1fr 1fr; gap:16px;}
    .timeline::before{left:21px;}
    .t-item{padding-left:60px;}
    .t-item .dot{left:4px; width:30px; height:30px;}
    .story, .timeline-sec, .mv, .team, .certs{padding:64px 0;}
  }

  /* ---------- About stats + rating ---------- */
  .about-stats{padding:70px 0; background:var(--charcoal-deep);}
  .about-stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; align-items:center;}
  .about-stat{text-align:center; padding:20px; border-right:1px solid rgba(255,255,255,0.1);}
  .about-stat:last-child{border-right:none;}
  .about-stat .figure{font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:46px; color:var(--flame-gold); line-height:1;}
  .about-stat .caption{margin-top:8px; font-size:12.5px; letter-spacing:0.04em; color:rgba(255,255,255,0.6); text-transform:uppercase;}
  .rating-chip{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:36px; flex-wrap:wrap;}
  .rating-chip .stars{color:var(--flame-gold); letter-spacing:2px; font-size:18px;}
  .rating-chip span{color:rgba(255,255,255,0.65); font-size:14px;}
  .rating-chip a{color:var(--flame-gold); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid rgba(250,200,80,0.4);}

  /* ---------- Expertise cards ---------- */
  .expertise{padding:110px 0; background:var(--paper); position:relative; overflow:hidden;}
  .expertise::before{content:''; position:absolute; top:-120px; right:-120px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(180,39,15,0.06), transparent 70%);}
  .expertise-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px; position:relative; z-index:1;}
  .exp-card{
    background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:32px 24px;
    display:flex; flex-direction:column; align-items:flex-start; text-align:left;
    position:relative; overflow:hidden;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  }
  .exp-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--ember),var(--flame-orange),var(--flame-gold));
    transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
  }
  .exp-card:hover{transform:translateY(-6px); box-shadow:0 20px 44px rgba(20,15,10,0.13); border-color:rgba(180,39,15,0.15);}
  .exp-card:hover::before{transform:scaleX(1);}
  .exp-card .ico-badge{
    width:52px; height:52px; border-radius:50%; flex:none;
    background:linear-gradient(135deg, rgba(180,39,15,0.09), rgba(241,118,20,0.14));
    display:flex; align-items:center; justify-content:center; margin-bottom:22px;
    transition:background .4s var(--ease);
  }
  .exp-card:hover .ico-badge{background:linear-gradient(135deg, var(--ember), var(--flame-orange));}
  .exp-card .ico{width:24px; height:24px; color:var(--ember); flex:none; transition:color .4s var(--ease);}
  .exp-card:hover .ico{color:#fff;}
  .exp-card h4{font-size:19px; letter-spacing:0.01em; margin-bottom:10px; line-height:1.2;}
  .exp-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:20px; flex:1;}
  .exp-card a{
    display:inline-flex; align-items:center; gap:6px; font-family:'Barlow Condensed',sans-serif; font-weight:700;
    font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ember); transition:color .3s var(--ease), gap .3s var(--ease);
  }
  .exp-card a:hover{color:var(--flame-orange); gap:9px;}

  /* ---------- Customer-centric band ---------- */
  .centric{padding:100px 0; background:var(--paper-dim); text-align:center;}
  .centric .wrap{max-width:780px;}
  .centric .eyebrow{justify-content:center; color:var(--ember); display:flex; align-items:center; gap:12px; margin-bottom:16px;}
  .centric .eyebrow::before, .centric .eyebrow::after{content:''; width:34px; height:1.5px; background:var(--ember); display:inline-block;}
  .centric h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:20px;}
  .centric p{font-size:16px; line-height:1.75; color:var(--ink-soft);}

  @media (max-width: 980px){
    .about-stats-grid{grid-template-columns:repeat(2,1fr); row-gap:26px;}
    .about-stat{border-right:none;}
    .expertise-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width: 720px){
    .expertise-grid{grid-template-columns:1fr;}
    .about-stats, .expertise, .centric{padding:60px 0;}
  }


/* ===== Products & Services page ===== */

  /* ---------- Page hero reuse (inner pages) ---------- */
  .page-hero{position:relative; padding:150px 0 80px; overflow:hidden; background:linear-gradient(150deg, #201f1d 0%, #131211 55%, #3d0c05 130%);}
  .page-hero .fire-drops-layer{opacity:0.6;}
  .page-hero .wrap{position:relative; z-index:2;}
  .breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:18px; font-weight:600;}
  .breadcrumb a{color:rgba(255,255,255,0.55);}
  .breadcrumb a:hover{color:var(--flame-gold);}
  .breadcrumb svg{width:12px;height:12px;}
  .page-hero h1{color:#fff; font-size:clamp(36px,5vw,60px); max-width:760px;}
  .page-hero h1 em{font-style:normal; color:transparent; background:linear-gradient(100deg, var(--flame-gold), var(--flame-orange)); -webkit-background-clip:text; background-clip:text;}
  .page-hero p.lede{color:rgba(255,255,255,0.72); font-size:16.5px; line-height:1.65; max-width:600px; margin-top:18px;}
  .hero-quick-links{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px;}
  .hero-quick-links a{
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.05em; text-transform:uppercase;
    color:#fff; border:1px solid rgba(255,255,255,0.28); padding:9px 18px; border-radius:30px; background:rgba(255,255,255,0.06);
    transition:background .3s, border-color .3s;
  }
  .hero-quick-links a:hover{background:var(--ember); border-color:var(--ember);}

  /* ---------- Sub nav (sticky section tabs) ---------- */
  .subnav{position:sticky; top:0; z-index:150; background:rgba(250,247,242,0.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); box-shadow:0 4px 20px rgba(20,15,10,0.05);}
  .subnav .wrap{display:flex; gap:6px; overflow-x:auto; padding:14px 32px; scrollbar-width:none;}
  .subnav .wrap::-webkit-scrollbar{display:none;}
  .subnav a{
    flex:none; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--ink-soft); padding:9px 18px; border-radius:30px; white-space:nowrap; transition:background .3s, color .3s;
  }
  .subnav a:hover{background:var(--paper-dim); color:var(--ink);}
  .subnav a.tag-fire:hover{color:var(--ember);}

  /* ---------- Intro stats ---------- */
  .ps-stats{padding:56px 0; background:var(--paper); border-bottom:1px solid var(--line);}
  .ps-stats-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
  .ps-stat{flex:1; min-width:180px; text-align:center;}
  .ps-stat .figure{font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:38px; color:var(--ember); line-height:1;}
  .ps-stat .caption{margin-top:6px; font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em;}

  /* ---------- Category grid (Fire sub-services) ---------- */
  .cat-section{padding:100px 0; background:var(--paper); scroll-margin-top:70px;}
  .cat-section.alt{background:var(--paper-dim);}
  .cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px;}
  .cat-card{
    background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--line);
    display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .cat-card:hover{transform:translateY(-6px); box-shadow:0 22px 48px rgba(20,15,10,0.14);}
  .cat-media{position:relative; height:170px; overflow:hidden;}
  .cat-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
  .cat-card:hover .cat-media img{transform:scale(1.09);}
  .cat-media .cat-num{
    position:absolute; top:12px; left:12px; background:rgba(20,20,19,0.65); backdrop-filter:blur(3px); color:#fff;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.08em; padding:5px 11px; border-radius:20px;
  }
  .cat-body{padding:22px 20px 24px; display:flex; flex-direction:column; flex:1;}
  .cat-body h4{font-size:18px; margin-bottom:8px; letter-spacing:0.01em;}
  .cat-body p{font-size:13px; color:var(--ink-soft); line-height:1.6; margin-bottom:14px; flex:1;}
  .cat-chips{display:flex; flex-wrap:wrap; gap:6px;}
  .cat-chips span{font-size:11px; font-weight:600; color:var(--ember); background:rgba(180,39,15,0.07); padding:4px 9px; border-radius:20px;}

  /* ---------- Division blocks (Civil / Plumbing / Interiors) ---------- */
  .division-block{padding:100px 0; background:var(--paper); scroll-margin-top:70px;}
  .division-block.alt{background:var(--paper-dim);}
  .division-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .division-grid.reverse{direction:rtl;}
  .division-grid.reverse > *{direction:ltr;}
  .division-media{position:relative; border-radius:10px; overflow:hidden; box-shadow:var(--shadow);}
  .division-media img{width:100%; height:420px; object-fit:cover;}
  .division-copy .eyebrow{color:var(--ember); display:flex; align-items:center; gap:12px; margin-bottom:16px;}
  .division-copy .eyebrow::before{content:''; width:34px; height:1.5px; background:var(--ember); display:inline-block;}
  .division-copy h2{font-size:clamp(28px,3.4vw,42px); margin-bottom:18px;}
  .division-copy p{font-size:16px; color:var(--ink-soft); line-height:1.75; margin-bottom:24px;}
  .division-list{display:flex; flex-direction:column; gap:12px; margin-bottom:28px;}
  .division-list div{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; font-weight:600;}
  .division-list svg{width:18px;height:18px;color:var(--ember); flex:none; margin-top:2px;}

  /* ---------- Brands wall ---------- */
  .brands-section{padding:110px 0; background:var(--charcoal-deep); color:#fff;}
  .brands-section .section-head .eyebrow{color:var(--flame-gold);}
  .brands-section .section-head h2, .brands-section .section-head p{color:#fff;}
  .brands-section .section-head p{color:rgba(255,255,255,0.62);}
  .brand-group{margin-top:50px;}
  .brand-group h5{
    font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:0.12em; font-size:13px; text-transform:uppercase;
    color:var(--flame-orange); margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .brand-chips{display:flex; flex-wrap:wrap; gap:12px;}
  .brand-chips span{
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; letter-spacing:0.02em; text-transform:uppercase;
    color:rgba(255,255,255,0.85); border:1px solid rgba(255,255,255,0.16); padding:12px 22px; border-radius:8px;
    background:rgba(255,255,255,0.03); transition:border-color .3s, background .3s, color .3s;
  }
  .brand-chips span:hover{border-color:var(--flame-orange); background:rgba(241,118,20,0.1); color:#fff;}

  @media (max-width: 1080px){
    .cat-grid{grid-template-columns:repeat(2,1fr);}
    .division-grid, .division-grid.reverse{grid-template-columns:1fr; direction:ltr;}
    .division-media img{height:320px;}
  }
  @media (max-width: 720px){
    .page-hero{padding:120px 0 60px;}
    .cat-grid{grid-template-columns:1fr;}
    .cat-section, .division-block, .brands-section{padding:64px 0;}
    .ps-stats-grid{gap:20px;}
    .ps-stat{min-width:42%;}
    .subnav .wrap{padding:12px 20px;}
  }

/* ===== Projects & Clients page ===== */
  /* ---------- Page hero ---------- */
  .page-hero{position:relative; padding:150px 0 80px; overflow:hidden; background:linear-gradient(150deg, #201f1d 0%, #131211 55%, #3d0c05 130%);}
  .page-hero .fire-drops-layer{opacity:0.6;}
  .page-hero .wrap{position:relative; z-index:2;}
  .breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:18px; font-weight:600;}
  .breadcrumb a{color:rgba(255,255,255,0.55);}
  .breadcrumb a:hover{color:var(--flame-gold);}
  .breadcrumb svg{width:12px;height:12px;}
  .page-hero h1{color:#fff; font-size:clamp(36px,5vw,58px); max-width:760px;}
  .page-hero h1 em{font-style:normal; color:transparent; background:linear-gradient(100deg, var(--flame-gold), var(--flame-orange)); -webkit-background-clip:text; background-clip:text;}
  .page-hero p.lede{color:rgba(255,255,255,0.72); font-size:16.5px; line-height:1.65; max-width:600px; margin-top:18px;}

  /* ---------- Stats ---------- */
  .cl-stats{padding:56px 0; background:var(--paper); border-bottom:1px solid var(--line);}
  .cl-stats-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
  .cl-stat{flex:1; min-width:180px; text-align:center;}
  .cl-stat .figure{font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:38px; color:var(--ember); line-height:1;}
  .cl-stat .caption{margin-top:6px; font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em;}

  /* ---------- Featured projects ---------- */
  .featured{padding:110px 0; background:var(--paper);}
  .feat-row{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:90px;}
  .feat-row:last-child{margin-bottom:0;}
  .feat-row.reverse{direction:rtl;}
  .feat-row.reverse > *{direction:ltr;}
  .feat-media{position:relative; border-radius:10px; overflow:hidden; box-shadow:var(--shadow);}
  .feat-media img{width:100%; height:400px; object-fit:cover;}
  .feat-media .feat-tag{
    position:absolute; top:18px; left:18px; background:rgba(20,20,19,0.65); backdrop-filter:blur(3px); color:#fff;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; padding:7px 14px; border-radius:20px;
  }
  .feat-copy .eyebrow{color:var(--ember); display:flex; align-items:center; gap:12px; margin-bottom:14px;}
  .feat-copy .eyebrow::before{content:''; width:34px; height:1.5px; background:var(--ember); display:inline-block;}
  .feat-copy h3{font-size:clamp(24px,2.8vw,34px); margin-bottom:14px;}
  .feat-copy p{font-size:15.5px; color:var(--ink-soft); line-height:1.75; margin-bottom:20px;}
  .feat-scope{display:flex; flex-wrap:wrap; gap:8px;}
  .feat-scope span{font-size:12px; font-weight:600; color:var(--ember); background:rgba(180,39,15,0.07); padding:6px 13px; border-radius:20px;}

  /* ---------- Filter tabs + directory ---------- */
  .directory{padding:100px 0; background:var(--paper-dim);}
  .filter-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; margin-bottom:44px;}
  .filter-tabs button{
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); padding:10px 20px; border-radius:30px; cursor:pointer;
    transition:background .3s, color .3s, border-color .3s;
  }
  .filter-tabs button:hover{border-color:var(--ember); color:var(--ember);}
  .filter-tabs button.active{background:var(--ember); border-color:var(--ember); color:#fff;}
  .client-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @keyframes cardIn{0%{opacity:0; transform:translateY(14px) scale(0.96);}100%{opacity:1; transform:translateY(0) scale(1);}}
  .client-card{
    background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:20px 22px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
    animation:cardIn .5s cubic-bezier(.22,.9,.32,1) both;
    animation-delay:calc(var(--ci, 0) * 35ms);
  }
  .client-card:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(20,15,10,0.1); border-color:rgba(180,39,15,0.18);}
  .client-grid.filtering{opacity:0.3; transform:scale(0.99); transition:opacity .18s, transform .18s;}
  .filter-tabs button{position:relative; overflow:hidden;}
  .filter-tabs button.active{box-shadow:0 6px 18px rgba(180,39,15,0.28);}
  .client-card h5{font-size:16px; letter-spacing:0.01em; margin-bottom:4px;}
  .client-card .loc{font-size:12px; color:var(--ink-soft); margin-bottom:10px; display:flex; align-items:center; gap:5px;}
  .client-card .loc svg{width:12px;height:12px;color:var(--ember);}
  .client-card .scope{font-size:12.5px; color:var(--ink-soft); line-height:1.5;}
  .client-card.hidden{display:none;}
  .directory-count{font-size:13.5px; color:var(--ink-soft); margin-bottom:20px;}

  @media (max-width: 1080px){
    .feat-row, .feat-row.reverse{grid-template-columns:1fr; direction:ltr;}
    .feat-media img{height:300px;}
    .client-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width: 720px){
    .page-hero{padding:120px 0 60px;}
    .featured, .directory{padding:64px 0;}
    .client-grid{grid-template-columns:1fr;}
    .cl-stat{min-width:42%;}
  }


/* ===== Contact page ===== */

  /* ---------- Page hero ---------- */
  .page-hero{position:relative; padding:150px 0 80px; overflow:hidden; background:linear-gradient(150deg, #201f1d 0%, #131211 55%, #3d0c05 130%);}
  .page-hero .fire-drops-layer{opacity:0.6;}
  .page-hero .wrap{position:relative; z-index:2;}
  .breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:18px; font-weight:600;}
  .breadcrumb a{color:rgba(255,255,255,0.55);}
  .breadcrumb a:hover{color:var(--flame-gold);}
  .breadcrumb svg{width:12px;height:12px;}
  .page-hero h1{color:#fff; font-size:clamp(36px,5vw,58px); max-width:720px;}
  .page-hero h1 em{font-style:normal; color:transparent; background:linear-gradient(100deg, var(--flame-gold), var(--flame-orange)); -webkit-background-clip:text; background-clip:text;}
  .page-hero p.lede{color:rgba(255,255,255,0.72); font-size:16.5px; line-height:1.65; max-width:580px; margin-top:18px;}

  /* ---------- Contact info cards ---------- */
  .contact-info{padding:0; background:var(--paper); position:relative; margin-top:-56px; z-index:5;}
  .info-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); box-shadow:0 24px 60px rgba(20,15,10,0.14); border-radius:10px; overflow:hidden;}
  .info-card{background:#fff; padding:30px 24px; text-align:left;}
  .info-card .ico{width:36px; height:36px; color:var(--ember); margin-bottom:16px;}
  .info-card h5{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;}
  .info-card a, .info-card p{font-size:15px; font-weight:600; color:var(--ink); line-height:1.5;}
  .info-card a:hover{color:var(--ember);}

  /* ---------- Split: form + map/details ---------- */
  .contact-split{padding:110px 0 100px; background:var(--paper);}
  .split-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start;}
  .form-card{background:var(--paper-dim); border:1px solid var(--line); border-radius:12px; padding:40px;}
  .form-card h3{font-size:26px; margin-bottom:10px;}
  .form-card > p{font-size:14.5px; color:var(--ink-soft); margin-bottom:28px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
  .form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
  .form-field label{font-size:12.5px; font-weight:700; letter-spacing:0.03em; color:var(--ink-soft); text-transform:uppercase; font-family:'Barlow Condensed',sans-serif;}
  .form-field input, .form-field select, .form-field textarea{
    padding:13px 15px; border:1px solid var(--line); border-radius:6px; background:#fff; font-family:'Work Sans',sans-serif;
    font-size:14.5px; color:var(--ink); outline:none; transition:border-color .3s, box-shadow .3s;
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{border-color:var(--ember); box-shadow:0 0 0 3px rgba(180,39,15,0.1);}
  .form-field textarea{resize:vertical; min-height:110px;}
  .form-submit{width:100%; justify-content:center; margin-top:6px;}
  .form-note{font-size:12px; color:var(--ink-soft); margin-top:14px; text-align:center;}
  .form-success{
    display:none; background:rgba(180,39,15,0.06); border:1px solid rgba(180,39,15,0.2); border-radius:8px;
    padding:16px 18px; font-size:14px; color:var(--ember); font-weight:600; margin-top:16px; align-items:center; gap:10px;
  }
  .form-success.show{display:flex;}
  .form-success svg{width:20px;height:20px; flex:none;}

  .map-card{border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:28px;}
  .map-card iframe{width:100%; height:300px; border:0; display:block;}
  .side-block{background:var(--charcoal-deep); color:#fff; border-radius:12px; padding:32px; margin-bottom:20px;}
  .side-block h4{font-size:18px; margin-bottom:18px; letter-spacing:0.01em;}
  .dept-list{display:flex; flex-direction:column; gap:0;}
  .dept-item{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:1px solid rgba(255,255,255,0.1); font-size:13.5px;}
  .dept-item:first-child{border-top:none;}
  .dept-item .role{color:rgba(255,255,255,0.55);}
  .dept-item .name{font-weight:600;}
  .dept-item a{color:var(--flame-gold);}
  .side-cta{background:linear-gradient(120deg, var(--ember), var(--ember-dark)); border-radius:12px; padding:30px 28px; color:#fff;}
  .side-cta h4{font-size:19px; margin-bottom:10px;}
  .side-cta p{font-size:13.5px; color:rgba(255,255,255,0.85); margin-bottom:20px; line-height:1.6;}

  /* ---------- FAQ ---------- */
  .faq{padding:100px 0; background:var(--paper-dim);}
  .faq-list{max-width:800px; margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
  .faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:18px; letter-spacing:0.01em;}
  .faq-q svg{width:18px; height:18px; color:var(--ember); flex:none; transition:transform .3s var(--ease);}
  .faq-item.open .faq-q svg{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
  .faq-item.open .faq-a{max-height:200px;}
  .faq-a p{font-size:14.5px; color:var(--ink-soft); line-height:1.7; padding-top:14px;}

  @media (max-width: 1080px){
    .info-grid{grid-template-columns:repeat(2,1fr);}
    .split-grid{grid-template-columns:1fr;}
  }
  @media (max-width: 720px){
    .page-hero{padding:120px 0 50px;}
    .info-grid{grid-template-columns:1fr;}
    .contact-info{margin-top:-30px;}
    .form-card{padding:26px 20px;}
    .form-row{grid-template-columns:1fr;}
    .contact-split, .faq{padding:60px 0;}
  }