:root{
    --teal:#147b6e;--navy:#16313d;--steel:#1f5a6b;
    --teal-deep:#0e5950;
    --teal-soft:#e8f1ee;
    --teal-glow:rgba(20,123,110,.22);
    --gold:#1f5a6b;
    --gold-soft:#e3ebec;
    --ink:#16313d;
    --ink-2:#46524e;
    --cream:#f4f6f6;
    --cream-2:#e9eded;
    --cream-3:#dfe4e4;
    --card:#ffffff;
    --line:rgba(22,49,61,.18);
    --line-2:rgba(22,49,61,.3);
    --txt:#13212a;
    --txt-soft:#3a4a52;
    --txt-mute:#5a6a72;
    --maxw:1280px;
    --serif:'IBM Plex Sans',Arial,sans-serif;
    --sans:'IBM Plex Sans',Arial,sans-serif;
    --cond:'Barlow Condensed',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{font-family:var(--sans);background:var(--cream);color:var(--txt);line-height:1.72;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:16px}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  ::selection{background:var(--teal);color:#fff}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
  h1,h2,h3{font-family:var(--sans);font-weight:700;line-height:1.12;letter-spacing:-.01em;color:#0f1f28}
  .eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:17px;color:#0a2f3a;display:inline-flex;align-items:center;gap:16px;line-height:1.3}
  .eyebrow::before{content:"";width:40px;height:3px;background:var(--steel);border-radius:1px}

  .grid-bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}

  .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.02em;text-transform:uppercase;padding:18px 36px;border-radius:2px;cursor:pointer;border:none;transition:transform .35s cubic-bezier(.2,.7,.3,1),background .35s,color .35s,box-shadow .35s,border-color .35s}
  .btn-primary{background:var(--teal);color:#fff}
  .btn-primary:hover{background:var(--teal-deep);transform:translateY(-3px);box-shadow:0 18px 40px -16px var(--teal-glow)}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
  .btn-gold{background:var(--gold);color:#fff}
  .btn-gold:hover{background:#9a763c;transform:translateY(-3px)}
  .btn-line{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
  .btn-line:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
  .ar{transition:transform .35s}.btn:hover .ar{transform:translateX(5px)}

  /* Site navigation header — scope ALL these rules to #header so they
     can't bleed into other <header> elements such as .post-hero on blog
     articles (which has its own dark background + white text). */
  #header{position:fixed;top:0;left:0;right:0;z-index:100;padding:26px 0;transition:.45s}
  #header.scrolled{background:rgba(250,247,241,.9);backdrop-filter:blur(16px);padding:14px 0;border-bottom:1px solid var(--line)}

  body.home #header:not(.scrolled){background:linear-gradient(180deg,rgba(8,17,20,.55),rgba(8,17,20,0))}
  body.home #header:not(.scrolled) .nav-links a,
  body.home #header:not(.scrolled) .nav-links .nav-dd-trigger{color:rgba(255,255,255,.92)}
  body.home #header:not(.scrolled) .nav-links a:hover,
  body.home #header:not(.scrolled) .nav-links .nav-dd-trigger:hover{color:#fff}
  body.home #header:not(.scrolled) .logo-link img{filter:brightness(0) invert(1)}
  body.home #header:not(.scrolled) .nav-cta{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(4px)}
  body.home #header:not(.scrolled) .nav-cta:hover{background:rgba(255,255,255,.24)}
  body.home #header:not(.scrolled) .burger span{background:#fff}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:30px}
  .logo-link img{height:42px;width:auto;transition:height .45s}
  header.scrolled .logo-link img{height:34px}
  .nav-links{display:flex;align-items:center;gap:40px}
  .nav-links a{color:var(--txt-soft);font-size:15.5px;font-weight:500;position:relative;transition:color .25s}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;background:var(--gold);transition:width .3s}
  .nav-links a:hover{color:var(--ink)}.nav-links a:hover::after{width:100%}
  .nav-cta{background:var(--ink);color:#fff;padding:14px 28px;border-radius:2px;font-family:var(--sans);font-weight:700;font-size:14.5px;letter-spacing:.03em;text-transform:uppercase;transition:background .3s,transform .3s}
  .nav-cta:hover{background:var(--teal);transform:translateY(-2px)}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
  .burger span{width:26px;height:1.5px;background:var(--ink);display:block;transition:.3s}

  
  /* ===== FULL-SCREEN PREMIUM HERO ===== */
  .hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:0;background:#0c1518}
  .hero-bg{position:absolute;inset:0;z-index:0}
  .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
  .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,17,20,.92) 0%,rgba(8,17,20,.78) 42%,rgba(8,17,20,.42) 72%,rgba(8,17,20,.30) 100%)}
  .hero-bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,17,20,.5) 0%,transparent 22%,transparent 70%,rgba(8,17,20,.55) 100%)}
  .hero .wrap{position:relative;z-index:3;width:100%;padding-top:120px;padding-bottom:90px}
  .hero-tag{font-family:var(--cond);text-transform:uppercase;letter-spacing:.32em;font-weight:600;font-size:14px;color:#cdb88a;margin-bottom:32px;display:inline-flex;align-items:center;gap:16px;opacity:0;animation:rise .9s .15s forwards}
  .hero-tag::before{content:"";width:48px;height:1px;background:#cdb88a}
  .hero h1{font-family:var(--sans);font-size:clamp(2.7rem,7vw,5.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:#fff;max-width:14ch}
  .hero h1 .ln{display:block;overflow:hidden}
  .hero h1 .ln i{display:block;font-style:normal;opacity:0;transform:translateY(110%);animation:slideUp 1s cubic-bezier(.16,1,.3,1) forwards}
  .hero h1 .ln:nth-child(1) i{animation-delay:.2s}
  .hero h1 .ln:nth-child(2) i{animation-delay:.34s}
  .hero h1 .ln:nth-child(3) i{animation-delay:.48s}
  .hero h1 em{font-style:normal;color:#3fae97}
  .hero .sub{margin:34px 0 44px;font-size:19px;color:rgba(255,255,255,.8);max-width:560px;line-height:1.8;opacity:0;animation:rise .9s .72s forwards}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:rise .9s .86s forwards}
  .hero .btn-primary{background:#147b6e;color:#fff}
  .hero .btn-primary:hover{background:#1a9181;transform:translateY(-3px)}
  .hero .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(4px)}
  .hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.14);transform:translateY(-3px)}
  .hero-trust{display:flex;gap:46px;margin-top:56px;flex-wrap:wrap;opacity:0;animation:rise 1s 1s forwards}
  .hero-trust .ht b{font-family:var(--sans);font-size:30px;font-weight:700;color:#fff;display:block;line-height:1}
  .hero-trust .ht small{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:rgba(255,255,255,.6);font-weight:600}
  .hero-trust .ht{border-left:2px solid #cdb88a;padding-left:18px}
  .scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:4;font-family:var(--cond);text-transform:uppercase;letter-spacing:.28em;font-size:11px;color:rgba(255,255,255,.55);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:rise 1s 1.2s forwards}
  .scroll-hint .ln{width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.6),transparent);animation:drop 1.9s infinite}
  @media(max-width:880px){
    .hero .wrap{padding-top:110px;padding-bottom:80px}
    .hero h1{max-width:100%}
    .hero-bg::after{background:linear-gradient(180deg,rgba(8,17,20,.78),rgba(8,17,20,.86))}
    .hero-trust{gap:28px;margin-top:40px}
    .hero-trust .ht b{font-size:24px}
  }
  @media(max-width:560px){
    .hero-actions{flex-direction:column;align-items:stretch}
    .hero-actions .btn{justify-content:center;width:100%}
    .scroll-hint{display:none}
  }

  @keyframes slideUp{to{opacity:1;transform:translateY(0)}}
  @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
  @keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

  /* Legacy .marq kept for any other use; .trust-strip is the active design */
  .marq{background:#16313d;overflow:hidden}
  .marq-track{display:flex;white-space:nowrap;animation:scroll 45s linear infinite;width:max-content}
  .marq-track span{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:13.5px;color:rgba(255,255,255,.85);padding:13px 22px;display:flex;align-items:center;gap:22px}
  .marq-track span::after{content:"";width:4px;height:4px;background:#cdb88a;border-radius:50%}
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* ===== Trust strip — refined industries band ===== */
  .trust-strip{
    background:linear-gradient(180deg,#16313d 0%,#13272f 100%);
    border-top:1px solid rgba(205,184,138,.18);
    border-bottom:1px solid rgba(0,0,0,.2);
    position:relative;overflow:hidden
  }
  .ts-inner{
    display:flex;align-items:center;gap:0;
    max-width:none;padding:0;height:62px;position:relative
  }
  .ts-eyebrow{
    flex-shrink:0;display:flex;align-items:center;gap:12px;
    padding:0 26px 0 40px;height:100%;
    font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;
    font-weight:700;font-size:14.5px;color:#cdb88a;
    background:#16313d;z-index:3;position:relative
  }
  .ts-eyebrow i{
    width:24px;height:1px;background:#cdb88a;display:block;flex-shrink:0
  }
  .ts-divider{
    flex-shrink:0;width:1px;height:34px;background:rgba(205,184,138,.25);z-index:3;position:relative
  }
  .ts-marquee{
    flex:1;min-width:0;height:100%;display:flex;align-items:center;
    overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 80px),transparent 100%)
  }
  .ts-track{
    display:flex;white-space:nowrap;width:max-content;
    animation:ts-scroll 80s linear infinite
  }
  .ts-track span{
    font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;
    font-weight:600;font-size:14px;color:rgba(255,255,255,.9);
    padding:0 22px;display:flex;align-items:center;gap:22px;height:62px
  }
  .ts-track span::after{
    content:"";width:3px;height:3px;background:#cdb88a;border-radius:50%;
    opacity:.7
  }
  .ts-marquee:hover .ts-track{animation-play-state:paused}
  @keyframes ts-scroll{to{transform:translateX(-50%)}}
  @media(max-width:880px){
    .ts-eyebrow{padding:0 18px 0 22px;font-size:10px;letter-spacing:.22em}
    .ts-eyebrow i{width:16px}
    .ts-inner{height:54px}
    .ts-track span{height:54px;font-size:10.5px;padding:0 18px;gap:18px}
  }
  @media(max-width:560px){
    .ts-eyebrow{padding:0 14px 0 18px}
    .ts-divider{display:none}
  }

  .sec{padding:140px 0;position:relative}
  .sec-head{max-width:820px;margin-bottom:64px;border-top:3px solid var(--steel);padding-top:30px;display:inline-block}
  .sec-head h2{font-size:clamp(2.1rem,6.4vw,3.6rem);font-weight:700;margin:20px 0 20px;letter-spacing:-.015em}
  .sec-head p{font-size:19px;color:var(--txt-soft);line-height:1.78;font-weight:400}

  .reveal{opacity:0;transform:translateY(38px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal[data-d="1"]{transition-delay:.1s}.reveal[data-d="2"]{transition-delay:.2s}.reveal[data-d="3"]{transition-delay:.3s}

  .promise{background:var(--card)}
  .promise-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:90px;align-items:center}
  .promise-claim{font-family:var(--serif);font-size:clamp(1.5rem,4.6vw,2.4rem);font-weight:500;line-height:1.32;letter-spacing:-.018em;margin:26px 0 28px;color:var(--ink)}
  .promise-claim em{font-style:normal;color:var(--teal)}
  .promise p{font-size:16.5px;color:var(--txt-soft);margin-bottom:20px;line-height:1.9}
  .promise-card{background:var(--cream-2);border:1px solid var(--line);border-radius:2px;padding:54px 48px;position:relative}
  .promise-card h3,.promise-card .pc-h{font-family:var(--serif);font-size:1.6rem;margin-bottom:6px;font-weight:500;color:var(--ink)}
  .promise-card .vsub{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;color:var(--gold);font-size:14.5px;font-weight:700;margin-bottom:34px}
  .promise-card ul{list-style:none}
  .promise-card li{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);align-items:flex-start}
  .promise-card li:last-child{border-bottom:none}
  .promise-card li .bi{width:32px;height:32px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;font-size:14px;flex-shrink:0;font-family:var(--serif);font-weight:600}
  .promise-card li b{font-family:var(--sans);font-weight:600;font-size:16px;display:block;margin-bottom:5px;color:var(--ink)}
  .promise-card li small{color:var(--txt-soft);font-size:14.5px;line-height:1.65}

  .caps{background:var(--cream)}
  .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
  .cap{background:var(--card);padding:42px 32px;border-top:3px solid transparent;transition:background .45s;position:relative}
  .cap:hover{background:var(--card);border-top-color:var(--teal)}
  .cap-no{font-family:var(--sans);font-size:15px;letter-spacing:.04em;color:var(--gold);font-weight:700;text-transform:uppercase}
  .cap-ic{width:50px;height:50px;border-radius:2px;background:var(--cream-2);display:grid;place-items:center;color:var(--teal);font-size:23px;margin:30px 0 26px;transition:.45s}
  .cap:hover .cap-ic{background:var(--teal);color:#fff;transform:translateY(-5px)}
  .cap h3{font-family:var(--serif);font-size:1.55rem;margin-bottom:14px;font-weight:500}
  .cap p{font-size:15.5px;color:var(--txt-soft);line-height:1.78}

  .scope{background:var(--card)}
  .scope-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
  .disc{background:var(--cream);border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:transform .45s,border-color .45s,box-shadow .45s}
  .disc:hover{transform:translateY(-7px);border-color:var(--line-2);box-shadow:0 34px 64px -38px rgba(26,36,34,.3)}
  .disc-top{display:flex;align-items:center;gap:24px;padding:36px 40px;border-bottom:1px solid var(--line)}
  .disc-letter{width:60px;height:60px;border-radius:2px;border:2px solid var(--steel);background:var(--cream-2);display:grid;place-items:center;font-family:var(--serif);font-weight:500;font-size:26px;color:var(--gold);flex-shrink:0}
  .disc-top h3{font-family:var(--serif);font-size:1.65rem;font-weight:500}
  .disc-top span{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:14px;color:var(--txt-mute);font-weight:600}
  .disc-body{padding:32px 40px 40px}
  .disc-body ul{list-style:none;columns:2;column-gap:36px}
  .disc-body li{font-size:14.5px;color:var(--txt-soft);padding:9px 0 9px 22px;position:relative;break-inside:avoid;line-height:1.55}
  .disc-body li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;background:var(--gold);border-radius:50%}

  .proc{background:var(--cream)}
  .proc-track{display:grid;grid-template-columns:repeat(6,1fr);counter-reset:s;margin-top:16px}
  .step{position:relative;padding:0 20px}
  .step::before{counter-increment:s;content:"0" counter(s);font-family:var(--serif);font-weight:500;font-size:17px;color:var(--gold)}
  .step::after{content:"";position:absolute;top:38px;left:calc(50% + 22px);right:calc(-50% + 22px);height:1px;background:var(--line-2)}
  .step:last-child::after{display:none}
  .step .dot{width:13px;height:13px;border-radius:50%;background:var(--teal);margin:16px 0 24px;position:relative;z-index:2;box-shadow:0 0 0 6px var(--cream),0 0 0 7px var(--line-2)}
  .step h4{font-family:var(--serif);font-size:1.18rem;margin-bottom:10px;font-weight:500;color:var(--ink)}
  .step p{font-size:14.5px;color:var(--txt-soft);line-height:1.7}

  .ind{background:var(--card)}
  .ind-grid{display:flex;flex-wrap:wrap;gap:12px}
  .ind-pill{font-family:var(--cond);font-weight:500;font-size:15.5px;letter-spacing:.04em;padding:14px 28px;border:1px solid var(--line-2);border-radius:2px;color:var(--txt-soft);transition:.3s}
  .ind-pill:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-3px)}

  .clients{background:var(--cream)}
  .cl-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
  .cl{background:var(--card);aspect-ratio:5/3;display:grid;place-items:center;padding:24px;transition:background .4s}
  .cl:hover{background:var(--cream-2)}
  .cl span{font-family:var(--serif);font-weight:500;font-size:15px;color:var(--txt-mute);text-align:center;line-height:1.25;transition:color .4s}
  .cl:hover span{color:var(--teal)}
  .cl-note{text-align:center;margin-top:40px;font-size:14px;color:var(--txt-mute);font-style:normal;font-family:var(--serif)}

  .why{background:var(--card)}
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .why-card{background:var(--cream);border:1px solid var(--line);border-radius:2px;padding:44px 38px;transition:transform .4s,border-color .4s,box-shadow .4s}
  .why-card:hover{transform:translateY(-7px);border-color:var(--line-2);box-shadow:0 28px 52px -36px rgba(26,36,34,.28)}
  .why-card .wi{width:50px;height:50px;border-radius:2px;background:var(--cream-2);color:var(--steel);display:grid;place-items:center;font-size:22px;margin-bottom:24px}
  .why-card h4{font-family:var(--serif);font-size:1.4rem;margin-bottom:12px;font-weight:500;color:var(--ink)}
  .why-card p{font-size:15.5px;color:var(--txt-soft);line-height:1.78}

  .founder{background:var(--cream)}
  .founder-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:center}
  .founder-card{background:var(--ink);border-radius:2px;padding:54px;position:relative;overflow:hidden}
  .founder-card::after{content:"";position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:46px 46px}
  .founder-av{position:relative;width:84px;height:84px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font-family:var(--serif);font-weight:500;font-size:30px;color:var(--gold);margin-bottom:30px}
  .founder-card h3{position:relative;font-family:var(--serif);font-size:1.5rem;margin-bottom:6px;color:#fff;font-weight:500}
  .founder-card .role{position:relative;font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:14.5px;color:var(--gold);font-weight:700;margin-bottom:26px}
  .founder-card p{position:relative;color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.78}
  .founder-card .fstat{position:relative;display:flex;gap:40px;margin-top:30px;padding-top:30px;border-top:1px solid rgba(255,255,255,.13)}
  .founder-card .fstat b{font-family:var(--serif);font-size:30px;font-weight:500;display:block;color:#fff;line-height:1}
  .founder-card .fstat small{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;color:rgba(255,255,255,.85);font-weight:600}
  .founder-txt h2{font-size:clamp(1.9rem,5.4vw,3rem);font-weight:500;margin:20px 0 24px}
  .founder-txt p{font-size:17px;color:var(--txt-soft);margin-bottom:20px;line-height:1.85}
  .founder-quote{font-family:var(--serif);font-style:normal;font-size:1.4rem;color:var(--ink);line-height:1.5;padding-left:26px;border-left:2px solid var(--gold);margin-top:8px}

  .cta{background:var(--ink);position:relative;overflow:hidden}
  .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 56% 76% at 80% 50%,rgba(20,123,110,.18),transparent 62%)}
  .cta::after{content:"";position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(circle at 75% 50%,#000,transparent 72%)}
  .cta .wrap{position:relative;z-index:2}
  .cta-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:78px;align-items:center}
  .cta h2{font-size:clamp(2rem,6vw,3.5rem);font-weight:500;margin-bottom:22px;color:#fff}
  .cta .eyebrow{color:var(--gold)}.cta .eyebrow::before{background:var(--gold)}
  .cta p{font-size:18px;color:rgba(255,255,255,.82);margin-bottom:38px;line-height:1.8}
  .cta-actions{display:flex;gap:14px;flex-wrap:wrap}
  .btn-white{background:#fff;color:var(--ink)}.btn-white:hover{background:var(--gold);color:#fff;transform:translateY(-3px)}
  .cta-meta{margin-top:34px;font-size:15px;color:rgba(255,255,255,.82);line-height:1.9}
  .form-card{background:var(--card);border-radius:2px;padding:46px}
  .form-card h3{font-family:var(--serif);font-size:1.5rem;margin-bottom:6px;font-weight:500}
  .form-card .fp{font-size:14.5px;color:var(--txt-soft);margin-bottom:30px}
  .field{margin-bottom:18px}
  .field label{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;font-weight:700;color:var(--txt-soft);display:block;margin-bottom:10px}
  .field input,.field select,.field textarea{width:100%;padding:15px 16px;border:1px solid var(--line-2);border-radius:2px;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:var(--cream);transition:.25s}
  .field input::placeholder,.field textarea::placeholder{color:var(--txt-mute)}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
  .field select{appearance:none;cursor:pointer}
  .field textarea{resize:vertical;min-height:88px}
  .field .hint{font-size:13px;color:var(--txt-soft);line-height:1.55;margin-top:8px;padding:10px 12px;background:rgba(212,175,107,.08);border-left:3px solid var(--gold);border-radius:2px}
  .field .hint b{color:var(--ink);font-weight:600}
  .field .hint i{font-style:normal;font-weight:600;color:var(--ink)}
  .form-card .btn{width:100%;justify-content:center;margin-top:8px}
  .form-note{font-size:13px;color:var(--txt-mute);text-align:center;margin-top:16px;font-style:normal;font-family:var(--serif);line-height:1.6}

  footer{background:var(--ink);padding:90px 0 0;position:relative;overflow:hidden}
  footer::after{content:"";position:absolute;inset:0;opacity:.32;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(180deg,#000,transparent 58%)}
  footer .wrap{position:relative;z-index:2}
  .ft-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:64px}
  .ft-brand img{height:auto;width:160px;max-width:100%;margin-bottom:22px;filter:brightness(0) invert(1);opacity:.95}
  .ft-brand p{color:rgba(255,255,255,.68);font-size:14.5px;line-height:1.8;max-width:320px}
  .ft-col h4{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;color:var(--gold);font-weight:700;margin-bottom:22px}
  .ft-col a,.ft-col p{display:block;color:rgba(255,255,255,.72);font-size:14.5px;margin-bottom:12px;line-height:1.55;transition:color .25s}
  .ft-col a:hover{color:#fff}
  .ft-soc{display:flex;gap:12px;margin-top:10px}
  .ft-soc a{width:40px;height:40px;border:1px solid rgba(255,255,255,.16);border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.65);font-family:var(--serif);font-weight:500;font-size:15px;transition:.3s;margin:0}
  .ft-soc a:hover{background:var(--gold);border-color:var(--gold);color:#fff}
  .ft-bottom{border-top:1px solid rgba(255,255,255,.1);padding:28px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
  .ft-bottom p{font-size:13.5px;color:rgba(255,255,255,.55)}

  @media(max-width:1080px){
    .cap-grid{grid-template-columns:repeat(2,1fr)}
    .epc6{grid-template-columns:repeat(2,1fr)}
    .cl-grid{grid-template-columns:repeat(4,1fr)}
    .proc-track{grid-template-columns:repeat(3,1fr);gap:46px 0}
    .step::after{display:none}
    .why-grid{grid-template-columns:repeat(2,1fr)}
    .ft-grid{grid-template-columns:1fr 1fr 1fr;gap:38px}
  }
  @media(max-width:880px){
    .wrap{padding:0 24px}
    .nav-links,.nav-cta{display:none}
    .burger{display:flex}
    .hero-grid{grid-template-columns:1fr;gap:52px}
    .promise-grid,.founder-grid,.cta-grid{grid-template-columns:1fr;gap:52px}
    .scope-grid{grid-template-columns:1fr}
    .sec{padding:94px 0}
    .sec-head{margin-bottom:54px}
  }
  @media(max-width:560px){
    .cap-grid,.why-grid,.proc-track,.ft-grid{grid-template-columns:1fr}
    .cl-grid{grid-template-columns:repeat(2,1fr)}
    .disc-body ul{columns:1}
    .hero .sub{font-size:17px}
    .btn{font-size:15px;padding:16px 28px}
  }

  .projects{background:var(--card)}
  .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .proj{background:var(--cream);border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:transform .45s,box-shadow .45s,border-color .45s}
  .proj:hover{transform:translateY(-8px);border-color:var(--line-2);box-shadow:0 36px 66px -40px rgba(26,36,34,.32)}
  .proj-img{aspect-ratio:8/5.6;overflow:hidden;border-bottom:1px solid var(--line);background:#16313d;position:relative}
  .proj-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .proj:hover .proj-img img{transform:scale(1.05)}
  .proj-body{padding:30px 32px 34px}
  .proj-sector{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;color:var(--gold);font-weight:700;display:block;margin-bottom:12px}
  .proj-body h3{font-family:var(--serif);font-size:1.48rem;font-weight:500;margin-bottom:12px;line-height:1.25}
  .proj-body p{font-size:15px;color:var(--txt-soft);line-height:1.72;margin-bottom:18px}
  .proj-meta{display:flex;gap:26px;border-top:1px solid var(--line);padding-top:18px}
  .proj-meta div b{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--ink);display:block;line-height:1.1;margin-bottom:4px}
  .proj-meta div small{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--txt-mute);font-weight:600}
  .ph-note{margin-top:42px;text-align:center;font-family:var(--serif);font-style:normal;font-size:14px;color:var(--txt-mute)}
.proj-body .cs-link{
  display:inline-flex;align-items:center;gap:6px;margin:18px 0 4px;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;
  font-size:14px;font-weight:700;color:var(--teal);
  border-top:1px solid var(--line);padding-top:20px;width:100%;
  transition:gap .3s,color .3s
}
.proj-body .cs-link:hover{gap:12px;color:var(--ink)}
.proj-body .cs-link .ar{transition:transform .3s}
.proj-body .cs-link:hover .ar{transform:translateX(4px)}
[data-theme="dark"] .proj-body .cs-link{color:#3fae97;border-top-color:rgba(255,255,255,.08)}
[data-theme="dark"] .proj-body .cs-link:hover{color:#fff}

  .creds{background:var(--cream)}
  .creds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
  .cred{background:var(--card);padding:42px 30px;text-align:center;transition:background .4s}
  .cred:hover{background:var(--cream-2)}
  .cred .ci{width:46px;height:46px;border-radius:2px;border:2px solid var(--steel);color:var(--steel);display:grid;place-items:center;font-size:20px;margin:0 auto 18px}
  .cred b{font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--ink);display:block;margin-bottom:7px}
  .cred small{font-size:13.5px;color:var(--txt-soft);line-height:1.6;display:block}
  .creds-foot{margin-top:28px;text-align:center;font-family:var(--serif);font-style:normal;font-size:13.5px;color:var(--txt-mute)}

  .testi{background:var(--card)}
  .testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
  .quote{background:var(--cream);border:1px solid var(--line);border-radius:2px;padding:44px 42px;position:relative}
  .quote .qm{font-family:var(--serif);font-size:54px;color:var(--gold);line-height:.5;height:30px;display:block}
  .quote p{font-family:var(--serif);font-size:1.25rem;font-style:normal;color:var(--ink);line-height:1.6;margin:14px 0 26px}
  .quote .who{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:22px}
  .quote .who .av{width:46px;height:46px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:16px;flex-shrink:0}
  .quote .who b{font-size:15px;color:var(--ink);display:block;font-weight:600;margin-bottom:3px}
  .quote .who small{font-size:13.5px;color:var(--txt-mute)}
  @media(max-width:1080px){.proj-grid{grid-template-columns:repeat(2,1fr)}.creds-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:880px){.proj-grid,.testi-grid{grid-template-columns:1fr}}
  @media(max-width:560px){.creds-grid{grid-template-columns:1fr}}

  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:no-preference){
    .hero-visual{animation:floaty 6s ease-in-out infinite}
  }
  .hero-visual{position:relative;display:flex;align-items:center;justify-content:center;opacity:0;animation:rise 1s .8s forwards}
  .hero-visual img{width:100%;max-width:480px;filter:drop-shadow(0 30px 50px rgba(26,36,34,.14))}
  .hero-visual .badge{position:absolute;bottom:8px;left:8px;background:var(--card);border:1px solid var(--line);border-radius:3px;padding:12px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 18px 40px -22px rgba(26,36,34,.3)}
  .hero-visual .badge .d{width:8px;height:8px;border-radius:50%;background:var(--teal);position:relative}
  .hero-visual .badge .d::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--teal);animation:ping 2.4s ease-out infinite}
  @keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}
  .hero-visual .badge b{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink);font-weight:600}
  .disc-letter{position:relative;overflow:hidden}
  .disc-ic{width:30px;height:30px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .disc-letter img{pointer-events:none}.disc:hover .disc-ic{opacity:1!important}.disc:hover .disc-letter{color:transparent}
  .cap-ic,.why-card .wi,.cred .ci{transition:transform .5s cubic-bezier(.16,1,.3,1),background .4s,color .4s}
  .cap:hover .cap-ic{transform:translateY(-6px) scale(1.06)}
  .why-card:hover .wi{transform:rotate(8deg) scale(1.08)}
  .cred:hover .ci{transform:scale(1.12)}
  .gold-rule{height:3px;background:var(--steel);max-width:60px;margin:0 0}
  .stat-anim{font-variant-numeric:tabular-nums}
  .proj-img{position:relative}
  .proj-img::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:220% 100%;opacity:0;transition:opacity .4s}
  .proj:hover .proj-img::after{opacity:1;animation:shimmer 1.4s ease-out}
  .marq:hover .marq-track{animation-play-state:paused}
  
  .float-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}

  .mobile-menu{position:fixed;inset:0;background:var(--cream);z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .mobile-menu.open{transform:translateX(0)}
  .mobile-menu a{color:var(--ink);font-family:var(--serif);font-size:26px;font-weight:500}
  .mm-close{position:absolute;top:26px;right:26px;background:none;border:none;color:var(--ink);font-size:34px;cursor:pointer}

  /* ===== COMPREHENSIVE RESPONSIVE (added) ===== */
  @media(max-width:1024px){
    .hero-grid{grid-template-columns:1fr;gap:46px}
    .hero-visual{order:-1;max-width:440px;margin:0 auto}
    .hero-visual img{max-width:380px}
  }
  @media(max-width:880px){
    .hero{padding:130px 0 70px;min-height:auto}
    .hero-visual{max-width:380px}
    .hero-visual img{max-width:320px}
    .hero-visual .badge{padding:10px 14px}
    .float-orb{display:none}
    .sec{padding:80px 0}
    .sec-head{margin-bottom:46px}
    .wrap{padding:0 22px}
    .promise-card,.form-card,.founder-card,.quote{padding:34px 26px}
    .disc-top,.disc-body{padding-left:26px;padding-right:26px}
    .proj-body{padding:26px 24px 30px}
  }
  @media(max-width:600px){
    .scroll-hint{display:none}
    .hero h1{line-height:1.05}
    .hero-visual img{max-width:280px}
    .hero-actions{flex-direction:column;align-items:stretch}
    .hero-actions .btn{justify-content:center;width:100%}
    .cta-actions{flex-direction:column;align-items:stretch}
    .cta-actions .btn{justify-content:center;width:100%}
    .proj-grid,.testi-grid,.cap-grid,.why-grid,.creds-grid,.cl-grid{grid-template-columns:1fr!important}
    .disc-body ul{columns:1}
    .proc-track{grid-template-columns:1fr!important;gap:34px}
    .step::after{display:none}
    .ft-grid{grid-template-columns:1fr!important;gap:40px}
    .founder-grid{grid-template-columns:1fr!important;gap:40px}
    .promise-grid,.cta-grid{grid-template-columns:1fr!important;gap:40px}
    .proj-meta{gap:18px}
    .marq-track span{padding:13px 22px;font-size:13px;gap:22px}
    .eyebrow{font-size:12px;letter-spacing:.22em}
    .sec-head p,.promise p,.about p{font-size:16px}
    body{line-height:1.65}
  }
  @media(max-width:400px){
    .wrap{padding:0 16px}
    .hero-visual img{max-width:240px}
    .btn{font-size:14px;padding:14px 22px;letter-spacing:.06em}
    .nav .logo-link img{height:32px}
  }

  /* ===== Differentiators band (replaces empty photo band on home) ===== */
  .diff-band{
    position:relative;padding:120px 0 130px;overflow:hidden;
    background:#0c1518;color:#fff;isolation:isolate
  }
  .diff-band .db-bg{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    z-index:0;opacity:.32;filter:saturate(.85) contrast(1.05)
  }
  .diff-band .db-overlay{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(ellipse 60% 70% at 30% 50%,rgba(20,123,110,.18),transparent 65%),
      linear-gradient(180deg,rgba(8,17,20,.55) 0%,rgba(8,17,20,.78) 100%)
  }
  .diff-band .wrap{position:relative;z-index:2}
  .diff-band .db-head{max-width:780px;margin-bottom:64px}
  .diff-band .eyebrow{color:#cdb88a}
  .diff-band .eyebrow::before{background:#cdb88a}
  .diff-band h2{
    font-size:clamp(2rem,5.2vw,3.4rem);font-weight:600;line-height:1.12;
    letter-spacing:-.018em;color:#fff;margin:20px 0 22px
  }
  .diff-band h2 em{font-style:normal;color:#3fae97}
  .diff-band .db-head p{
    font-size:18.5px;color:rgba(255,255,255,.88);line-height:1.75;max-width:640px
  }
  .diff-band .db-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
    border-top:1px solid rgba(255,255,255,.12);padding-top:54px
  }
  .diff-band .db-col{
    position:relative;padding:0 8px 0 0
  }
  .diff-band .db-col .db-no{
    font-family:var(--sans);font-size:15px;letter-spacing:.05em;
    color:#cdb88a;font-weight:700;margin-bottom:22px;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:14px
  }
  .diff-band .db-col .db-no::after{
    content:"";width:46px;height:1px;background:rgba(205,184,138,.45);display:inline-block
  }
  .diff-band .db-col h3{
    font-family:var(--serif);font-weight:500;font-size:1.7rem;
    color:#fff;margin-bottom:16px;line-height:1.22;letter-spacing:-.005em
  }
  .diff-band .db-col p{
    font-size:16px;color:rgba(255,255,255,.82);line-height:1.78
  }
  @media(max-width:1080px){
    .diff-band .db-grid{grid-template-columns:1fr;gap:38px;padding-top:42px}
  }
  @media(max-width:880px){
    .diff-band{padding:90px 0 96px}
    .diff-band .db-head{margin-bottom:48px}
  }

  .epc-band{position:relative;width:100%;height:420px;overflow:hidden;background:var(--ink)}
  .epc-band img{width:100%;height:100%;object-fit:cover;display:block}
  .epc-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,31,40,.72) 0%,rgba(15,31,40,.32) 45%,rgba(15,31,40,.12) 100%)}
  .epc-band .band-cap{position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;gap:18px;background:var(--ink);color:#fff;padding:18px 34px;border-top-right-radius:2px}
  .epc-band .band-cap b{font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:.01em}
  .epc-band .band-cap span{width:8px;height:8px;border-radius:50%;background:#2fa890;display:inline-block;flex-shrink:0}
  @media(max-width:880px){.epc-band{height:300px}.epc-band .band-cap{padding:14px 22px}.epc-band .band-cap b{font-size:15px}}
  @media(max-width:560px){.epc-band{height:220px}}
body:not(.home){padding-top:84px}
/* Scope to the top site nav (#header) so this rule doesn't bleed into other
   <header> elements like .post-hero on blog articles — that bug was making
   blog post titles invisible (white text on near-white background). */
body:not(.home) #header:not(.scrolled){background:rgba(250,250,247,.96);border-bottom:1px solid var(--line)}

/* ===== Visible TODO marker pill (cert numbers / project figures to be filled in) ===== */
.todo-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(218,162,46,.13);color:#8a5a0b;border:1px dashed rgba(180,120,30,.6);font-family:var(--cond);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;line-height:1;vertical-align:middle;white-space:nowrap}
.todo-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#d18a1c;box-shadow:0 0 0 2px rgba(209,138,28,.22);flex-shrink:0}
.todo-num{font-family:var(--serif);font-weight:500;color:#8a5a0b;border-bottom:1.5px dashed rgba(180,120,30,.55);padding:0 3px;cursor:help}
.cred small .todo-pill{margin-top:6px;font-size:10px;padding:4px 8px;letter-spacing:.14em}
.proj-meta .todo-num{font-family:var(--serif);font-size:18px;font-weight:500}

/* ===== EPC lifecycle photo gallery ===== */
.lifecycle{background:var(--card);padding-top:0}
.lifecycle .sec-head{margin-bottom:50px}
.lc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.lc{position:relative;border-radius:2px;overflow:hidden;background:var(--ink);aspect-ratio:3/4;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.lc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.lc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,17,20,0) 28%,rgba(8,17,20,.84) 100%);z-index:1}
.lc:hover{transform:translateY(-6px);box-shadow:0 28px 60px -38px rgba(26,36,34,.42)}
.lc:hover img{transform:scale(1.06)}
.lc-cap{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;color:#fff}
.lc-cap span{font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:#cdb88a;font-weight:700;display:block;margin-bottom:10px}
.lc-cap b{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.22;display:block;letter-spacing:-.005em}
@media(max-width:1080px){
  .lc-cap b{font-size:19px}
  .lc-cap span{font-size:12.5px}
}
@media(max-width:1080px){.lc-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.lc-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* ===== People-on-site strip ===== */
.people{background:var(--cream)}
.ps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.ps{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--ink)}
.ps img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.ps::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,17,20,0) 40%,rgba(8,17,20,.78) 100%);pointer-events:none}
.ps:hover img{transform:scale(1.05)}
.ps-cap{position:absolute;left:18px;right:18px;bottom:16px;color:#fff;z-index:2;font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;font-weight:700}
@media(max-width:880px){.ps-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== Page hero (used on services/projects/about/contact) ===== */
.page-hero{position:relative;padding:140px 0 110px;background:#0c1518;overflow:hidden;color:#fff}
.page-hero::before{content:"";position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;z-index:0;opacity:.95}
.page-hero.ph-piping::before{background-image:url('img/bapl-piping-gallery.jpg')}
.page-hero.ph-facility::before{background-image:url('img/bapl-hero-facility.jpg')}
.page-hero.ph-pumphall::before{background-image:url('img/bapl-band-pumphall.jpg')}
.page-hero.ph-construction::before{background-image:url('img/bapl-band-construction.jpg')}
/* Directional overlay: dark only behind the text column on the left,
   transparent on the right so the photo shows through clearly. */
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,17,20,.86) 0%,rgba(8,17,20,.6) 38%,rgba(8,17,20,.2) 70%,rgba(8,17,20,.05) 100%);z-index:1}
.page-hero .wrap{position:relative;z-index:2;padding-top:46px}
.page-hero .eyebrow{color:#cdb88a}.page-hero .eyebrow::before{background:#cdb88a}
.page-hero h1{font-size:clamp(2.2rem,5.4vw,3.8rem);font-weight:700;color:#fff;margin:18px 0 18px;letter-spacing:-.02em;line-height:1.08;max-width:20ch}
.page-hero p{font-size:18px;color:rgba(255,255,255,.86);max-width:620px;line-height:1.75}
body:not(.home).has-page-hero{padding-top:0}
@media(max-width:880px){.page-hero{padding:120px 0 80px}}

/* ===== Image-anchored process steps ===== */
.proc-track-img{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:16px}
.step-img{background:var(--card);border:1px solid var(--line);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s,border-color .4s}
.step-img:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 28px 56px -38px rgba(26,36,34,.32)}
.step-img .si-img{aspect-ratio:4/3;overflow:hidden;background:#0c1518}
.step-img .si-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.step-img:hover .si-img img{transform:scale(1.05)}
.step-img .si-body{padding:20px 20px 24px}
.step-img .si-no{font-family:var(--sans);font-size:14.5px;letter-spacing:.05em;color:var(--gold);font-weight:700;text-transform:uppercase}
.step-img h4{font-family:var(--serif);font-size:1.18rem;margin:10px 0 8px;font-weight:500;color:var(--ink)}
.step-img p{font-size:14px;color:var(--txt-soft);line-height:1.65}
@media(max-width:1080px){.proc-track-img{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.proc-track-img{grid-template-columns:1fr;gap:12px}}

/* ===== Skip link (a11y) ===== */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 18px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700;z-index:200}
.skip-link:focus{left:12px;top:12px;outline:2px solid var(--gold)}

/* ===== Focus styles ===== */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ===== 404 ===== */
.page-404{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--cream);padding:120px 24px}
.page-404 .big{font-family:var(--serif);font-size:clamp(4rem,14vw,8rem);font-weight:700;color:var(--teal);letter-spacing:-.03em;line-height:1}
.page-404 h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:500;margin:16px 0 8px;color:var(--ink)}
.page-404 p{color:var(--txt-soft);max-width:42ch;margin:0 auto 28px}

/* =========================================================================
   PREMIUM LAYER
   ========================================================================= */

/* ---- Scroll progress bar ---- */
#ba-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  background:linear-gradient(90deg,var(--teal) 0%,#3fae97 50%,#cdb88a 100%);
  transform-origin:left center;transform:scaleX(0);
  transition:transform .12s linear;pointer-events:none;
}

/* ---- Smart header hide ---- */
#header{transition:transform .35s cubic-bezier(.4,0,.2,1),background .45s,padding .45s,border-color .45s}
#header.ba-hidden{transform:translateY(-110%)}

/* ---- Back-to-top FAB ---- */
#ba-btt{
  position:fixed;right:22px;bottom:22px;z-index:96;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;border:none;cursor:pointer;
  background:var(--ink);color:#fff;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.45),0 4px 10px -4px rgba(0,0,0,.2);
  opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),background .3s
}
#ba-btt.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
#ba-btt:hover{background:var(--teal);transform:translateY(-3px) scale(1.05)}
#ba-btt:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- Cookie banner ---- */
#ba-cookie{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);
  width:min(620px,calc(100% - 36px));z-index:97;
  background:var(--ink);color:#fff;padding:18px 22px;
  border-radius:6px;box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s
}
#ba-cookie.in{transform:translate(-50%,0);opacity:1}
#ba-cookie.out{transform:translate(-50%,140%);opacity:0}
#ba-cookie p{flex:1 1 260px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.78);margin:0}
#ba-cookie button{
  background:var(--teal);border:none;color:#fff;
  padding:11px 20px;border-radius:2px;cursor:pointer;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-size:12px;transition:.3s
}
#ba-cookie button:hover{background:#1a9181;transform:translateY(-2px)}

/* ============================================================
   PREMIUM "B" INTRO — animated brand letter on first session load
   ============================================================ */
#ba-loader{
  position:fixed;inset:0;z-index:1000;
  background:radial-gradient(ellipse at center,#1a3030 0%,#0c1518 70%);
  display:grid;place-items:center;
  transition:opacity .9s cubic-bezier(.16,1,.3,1),visibility .9s ease;
}
#ba-loader.done{opacity:0;visibility:hidden;pointer-events:none}

.ba-intro{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;position:relative;width:100%;max-width:520px;padding:0 24px;box-sizing:border-box
}
.ba-intro-stage{
  position:relative;width:200px;height:220px;
  display:flex;align-items:center;justify-content:center
}
@media(max-width:600px){.ba-intro-stage{width:160px;height:180px}}

/* The actual cropped "b" from the logo — guaranteed pixel-perfect match.
   Revealed top-to-bottom, glows, then fully exits BEFORE the logo appears
   (no stacking artifact). */
.ba-intro-b{
  position:absolute;left:50%;top:50%;
  width:150px;height:auto;display:block;
  transform:translate(-50%,-50%);
  clip-path:inset(0 0 100% 0);
  filter:drop-shadow(0 0 0 transparent);
  animation:
    ba-intro-b-reveal 1.2s .3s cubic-bezier(.55,.05,.2,1) forwards,
    ba-intro-b-glow .8s 1.5s ease-out forwards,
    ba-intro-b-exit .55s 2.0s cubic-bezier(.55,0,.45,1) forwards;
}
@media(max-width:600px){.ba-intro-b{width:118px}}
@keyframes ba-intro-b-reveal{
  0%{clip-path:inset(0 0 100% 0)}
  100%{clip-path:inset(0 0 0 0)}
}
@keyframes ba-intro-b-glow{
  0%{filter:drop-shadow(0 0 0 transparent)}
  50%{filter:drop-shadow(0 0 24px rgba(63,174,151,.55))}
  100%{filter:drop-shadow(0 0 8px rgba(63,174,151,.25))}
}
@keyframes ba-intro-b-exit{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1);visibility:visible}
  99%{opacity:0;transform:translate(-50%,-50%) scale(.7);visibility:visible}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.7);visibility:hidden}
}

/* Radial halo behind the b — fades in once the letter is fully formed */
.ba-intro-halo-bg{
  position:absolute;left:50%;top:50%;
  width:320px;height:320px;
  transform:translate(-50%,-50%) scale(.55);
  background:radial-gradient(circle at center,rgba(63,174,151,.5) 0%,rgba(63,174,151,.18) 50%,transparent 75%);
  border-radius:50%;
  opacity:0;pointer-events:none;
  animation:ba-intro-halo 2s 1.5s cubic-bezier(.16,1,.3,1) forwards
}
@media(max-width:600px){.ba-intro-halo-bg{width:240px;height:240px}}
@keyframes ba-intro-halo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  40%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
}

/* A thin vertical sweep line that appears to "draw" the b as the clip reveals */
.ba-intro-sweep{
  position:absolute;left:50%;
  width:150px;height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#3fae97 50%,transparent);
  filter:blur(.5px);
  opacity:0;
  animation:ba-intro-sweep 1.4s .3s cubic-bezier(.55,.05,.2,1) forwards
}
@media(max-width:600px){.ba-intro-sweep{width:118px}}
@keyframes ba-intro-sweep{
  0%{opacity:0;top:calc(50% - 75px)}
  10%{opacity:.9}
  90%{opacity:.9}
  100%{opacity:0;top:calc(50% + 75px)}
}

/* The full brand logo — appears AFTER the B has completely exited (no stacking).
   B exit ends at 2.55s; logo enters at 2.65s for a clean 100ms gap. */
.ba-intro-logo{
  position:absolute;left:50%;top:50%;
  width:280px;height:auto;display:block;
  opacity:0;transform:translate(-50%,-50%) scale(.92);
  animation:ba-intro-logo-in 1s 2.65s cubic-bezier(.16,1,.3,1) forwards,
            ba-intro-logo-hold .8s 3.8s ease-in-out both
}
@media(max-width:600px){.ba-intro-logo{width:220px}}
@keyframes ba-intro-logo-in{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes ba-intro-logo-hold{
  0%,100%{filter:none}
  50%{filter:drop-shadow(0 0 20px rgba(63,174,151,.4))}
}

/* Tagline beneath the logo — bigger, brighter, appears earlier so it's
   unambiguously readable before the overlay fades out. */
.ba-intro-tagline{
  opacity:0;margin-top:28px;
  font-family:var(--cond,'Barlow Condensed',sans-serif);
  text-transform:uppercase;letter-spacing:.3em;
  color:#e2cfa0;font-size:14px;font-weight:600;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
  animation:ba-intro-tag .8s 3.0s ease-out forwards
}
@media(max-width:600px){.ba-intro-tagline{font-size:12px;letter-spacing:.22em;margin-top:22px}}
@keyframes ba-intro-tag{
  from{opacity:0;transform:translateY(8px);letter-spacing:.16em}
  to{opacity:1;transform:translateY(0);letter-spacing:.3em}
}

/* Bottom progress bar */
.ba-load-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.04);overflow:hidden}
.ba-load-bar::after{
  content:'';position:absolute;inset:0;width:30%;
  background:linear-gradient(90deg,transparent,#3fae97,transparent);
  animation:ba-load 1.4s ease-in-out infinite
}
@keyframes ba-load{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}

/* Reduced motion — skip reveal/pulse, show the static full logo immediately */
@media (prefers-reduced-motion:reduce){
  .ba-intro-b{opacity:0!important;animation:none!important;clip-path:inset(0)!important;filter:none!important}
  .ba-intro-halo-bg{opacity:.7!important;animation:none!important;transform:translate(-50%,-50%) scale(1)!important}
  .ba-intro-sweep{display:none!important}
  .ba-intro-logo{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important;animation:none!important;filter:none!important}
  .ba-intro-tagline{opacity:.8!important;animation:none!important;transform:none!important}
}

/* ---- Custom cursor (desktop) ---- */
@media (hover:hover) and (pointer:fine){
  body.ba-has-cursor,
  body.ba-has-cursor a,
  body.ba-has-cursor button,
  body.ba-has-cursor input,
  body.ba-has-cursor select,
  body.ba-has-cursor textarea,
  body.ba-has-cursor label{cursor:none}
  #ba-dot,#ba-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;will-change:transform}
  #ba-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--teal);border-radius:50%;transition:opacity .2s}
  #ba-ring{
    width:34px;height:34px;margin:-17px 0 0 -17px;
    border:1.5px solid rgba(20,123,110,.55);border-radius:50%;
    transition:width .22s ease,height .22s ease,margin .22s ease,border-color .22s,opacity .25s,background .22s
  }
  #ba-ring.big{
    width:54px;height:54px;margin:-27px 0 0 -27px;
    border-color:var(--teal);background:rgba(20,123,110,.12)
  }
  #ba-dot.hide,#ba-ring.hide{opacity:0}
  [data-theme="dark"] #ba-dot{background:#3fae97}
  [data-theme="dark"] #ba-ring{border-color:rgba(63,174,151,.55)}
  [data-theme="dark"] #ba-ring.big{border-color:#3fae97;background:rgba(63,174,151,.14)}
}

/* ---- Magnetic CTAs (CSS var driven) ---- */
.btn.ba-magnetic,.nav-cta.ba-magnetic{
  --mx:0px;--my:0px;
  transform:translate(var(--mx),var(--my));
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .35s,color .35s,box-shadow .35s,border-color .35s
}
.btn.ba-magnetic:hover{transform:translate(var(--mx),calc(var(--my) - 3px))}

/* ---- 3D tilt ---- */
.ba-tilt{--tx:0deg;--ty:0deg;transform-style:preserve-3d}
.proj.ba-tilt:hover{transform:perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(-8px)}
.why-card.ba-tilt:hover{transform:perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(-7px)}
.lc.ba-tilt:hover{transform:perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(-6px)}
.step-img.ba-tilt:hover{transform:perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(-6px)}
.cred.ba-tilt:hover{transform:perspective(900px) rotateX(var(--tx)) rotateY(var(--ty))}
.disc.ba-tilt:hover{transform:perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(-7px)}
.quote.ba-tilt:hover,.promise-card.ba-tilt:hover,.form-card.ba-tilt:hover{transform:perspective(900px) rotateX(var(--tx)) rotateY(var(--ty))}

/* ---- Word-by-word headline reveal ---- */
.ba-wwrap{display:inline-block;overflow:hidden;vertical-align:baseline;line-height:1.1}
.ba-w{display:inline-block;transform:translateY(110%);opacity:0;animation:ba-rise 1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes ba-rise{to{transform:translateY(0);opacity:1}}

/* ---- Section dots (right rail) ---- */
#ba-dots{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);
  z-index:88;display:flex;flex-direction:column;gap:4px;padding:8px 4px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-radius:99px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
/* Forgiving 24×24 click target with a small 8×8 visual dot centered inside.
   The visual dot lives in ::before; the <a> itself is the larger hit area. */
#ba-dots a{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
#ba-dots a::before{
  content:"";display:block;
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.32);
  transition:all .35s cubic-bezier(.16,1,.3,1)
}
#ba-dots a:hover::before{background:#cdb88a;transform:scale(1.25)}
#ba-dots a.on::before{background:#cdb88a;transform:scale(1.55);box-shadow:0 0 0 4px rgba(205,184,138,.15)}
body:not(.home) #ba-dots{background:rgba(22,49,61,.05);border-color:rgba(22,49,61,.08)}
body:not(.home) #ba-dots a::before{background:rgba(22,49,61,.22)}
body:not(.home) #ba-dots a:hover::before{background:var(--teal)}
body:not(.home) #ba-dots a.on::before{background:var(--teal);box-shadow:0 0 0 4px rgba(20,123,110,.15)}
@media(max-width:1100px){#ba-dots{display:none}}

/* ---- Theme toggle in header ---- */
#ba-theme-toggle{
  position:relative;width:44px;height:24px;border-radius:24px;border:1px solid var(--line-2);
  background:transparent;cursor:pointer;padding:0;margin-right:8px;
  transition:background .3s,border-color .3s;flex-shrink:0
}
#ba-theme-toggle .ba-tt-knob{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--ink);transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s
}
#ba-theme-toggle .ba-tt-knob.on{transform:translateX(20px);background:#cdb88a}
body.home #header:not(.scrolled) #ba-theme-toggle{border-color:rgba(255,255,255,.4)}
body.home #header:not(.scrolled) #ba-theme-toggle .ba-tt-knob{background:#fff}
body.home #header:not(.scrolled) #ba-theme-toggle .ba-tt-knob.on{background:#cdb88a}

/* ---- Stats band (home) ---- */
.stats-band{
  position:relative;padding:90px 0;background:var(--ink);color:#fff;overflow:hidden
}
.stats-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(20,123,110,.25),transparent 60%),
             radial-gradient(ellipse 40% 70% at 18% 30%,rgba(205,184,138,.10),transparent 60%);
  pointer-events:none
}
.stats-band::after{
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at center,#000,transparent 75%);
  pointer-events:none
}
.stats-band .wrap{position:relative;z-index:2}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;align-items:start}
.stat-cell{position:relative;padding:32px 24px 30px;border-left:1px solid rgba(255,255,255,.13)}
.stat-cell:first-child{border-left-color:rgba(205,184,138,.4)}
.stat-cell .sn{font-family:var(--sans);font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;color:#cdb88a;font-weight:700;margin-bottom:18px;display:block}
.stat-cell .sb{font-family:var(--sans);font-weight:700;font-size:clamp(2.6rem,5.4vw,4.2rem);line-height:1;color:#fff;display:block;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-cell .sl{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;color:rgba(255,255,255,.85);font-weight:600;margin-top:18px;display:block;line-height:1.5}
@media(max-width:1080px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:560px){.stats-grid{grid-template-columns:1fr;gap:0}.stat-cell{padding:24px 0;border-left:none;border-top:1px solid rgba(255,255,255,.13)}.stat-cell:first-child{border-top:none}}

/* ---- Animated EPC schematic ---- */
.schematic-sec{background:var(--card);padding:120px 0 130px;position:relative;overflow:hidden}
.schematic-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:center}
.schematic-grid .stxt h2{font-size:clamp(2rem,5.4vw,3.2rem);font-weight:500;margin:18px 0 22px}
.schematic-grid .stxt p{font-size:17px;color:var(--txt-soft);line-height:1.85;margin-bottom:18px}
.schematic-wrap{position:relative;aspect-ratio:6/5;background:linear-gradient(160deg,#eef2f2,#dfe6e5);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:inset 0 0 60px rgba(22,49,61,.08)}
.schematic-wrap::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(22,49,61,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(22,49,61,.07) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(circle at center,#000 30%,transparent 90%);
}
#ba-schematic{position:absolute;inset:0;width:100%;height:100%}
#ba-schematic [data-draw]{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--delay,0s)
}
#ba-schematic.drawn [data-draw]{stroke-dashoffset:0}
#ba-schematic .node{opacity:0;transform-origin:center;transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:var(--delay,1.4s)}
#ba-schematic.drawn .node{opacity:1}
#ba-schematic .lbl{opacity:0;transition:opacity .5s ease;transition-delay:var(--delay,1.6s)}
#ba-schematic.drawn .lbl{opacity:.85}
@media(max-width:1080px){.schematic-grid{grid-template-columns:1fr;gap:48px}}

/* ---- Project filter bar ---- */
#ba-pf{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-bottom:46px;padding:8px;
  background:var(--cream-2);border:1px solid var(--line);border-radius:99px;width:fit-content;margin-left:auto;margin-right:auto
}
.flt{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:14.5px;font-weight:700;
  padding:12px 24px;border-radius:99px;border:none;background:transparent;color:var(--txt-soft);
  cursor:pointer;transition:background .3s,color .3s,transform .3s
}
.flt:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.flt.on{background:var(--ink);color:#fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.25)}
.proj{transition:opacity .35s ease,transform .35s ease,filter .35s ease,box-shadow .45s,border-color .45s}
.proj.ba-hide{opacity:0;transform:scale(.96);filter:blur(2px);pointer-events:none;position:absolute;left:-9999px}

/* ---- Decorative animated orbs ---- */
.ba-orb{
  position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;
  animation:ba-orb-float 16s ease-in-out infinite
}
@keyframes ba-orb-float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(30px,-20px) scale(1.08)}
}

/* ---- Reveal animation tuning ---- */
.reveal{transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1)}

/* ---- DARK THEME OVERRIDES ---- */
[data-theme="dark"]{
  --cream:#0e1619;--cream-2:#15211e;--cream-3:#1c2a26;
  --card:#10191c;
  --ink:#e9ecec;--ink-2:#cfd5d4;
  --txt:#e9ecec;--txt-soft:#b0b9b8;--txt-mute:#86908f;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.20);
  --teal:#3fae97;--teal-deep:#1a9181;--teal-soft:rgba(63,174,151,.16);--teal-glow:rgba(63,174,151,.30);
  --gold:#cdb88a;--gold-soft:rgba(205,184,138,.13);
  --steel:#86b3bd;
}
[data-theme="dark"] body{background:var(--cream);color:var(--txt)}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3{color:#fff}
[data-theme="dark"] header.scrolled{background:rgba(14,22,25,.92);border-bottom-color:rgba(255,255,255,.06)}
[data-theme="dark"] body:not(.home) header:not(.scrolled){background:rgba(14,22,25,.96);border-bottom-color:rgba(255,255,255,.06)}
[data-theme="dark"] .nav-links a{color:rgba(255,255,255,.78)}
[data-theme="dark"] .nav-links a:hover{color:#fff}
[data-theme="dark"] .nav-cta{background:var(--teal);color:#fff}
[data-theme="dark"] .nav-cta:hover{background:#56c1aa}
[data-theme="dark"] .logo-link img,[data-theme="dark"] .ft-brand img{filter:brightness(0) invert(1);opacity:.92}
[data-theme="dark"] body.home #header:not(.scrolled) .logo-link img{filter:brightness(0) invert(1)}

/* "Explore [discipline]" link inside each disc card on epc.html */
.disc-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--sans);font-weight:700;font-size:13.5px;letter-spacing:.02em;
  color:var(--teal);text-transform:uppercase;
  padding-top:18px;border-top:1px solid var(--line);
  transition:gap .3s ease, color .3s ease;width:100%
}
.disc-link:hover{color:var(--teal-deep);gap:14px}
.disc-link .ar{transition:transform .3s}
.disc-link:hover .ar{transform:translateX(4px)}

/* AI-generated hero backgrounds for MEPF / EPC / Industries pages.
   Apply via body class — falls back gracefully to ph-piping etc. CSS variants if image missing. */
body.hero-mechanical .page-hero::before{background-image:url('img/hero-mechanical.jpg');opacity:.95;background-position:center;background-size:cover}
body.hero-electrical .page-hero::before{background-image:url('img/hero-electrical.jpg');opacity:.95;background-position:center;background-size:cover}
body.hero-plumbing .page-hero::before{background-image:url('img/hero-plumbing.jpg');opacity:.95;background-position:center;background-size:cover}
body.hero-fire .page-hero::before{background-image:url('img/hero-fire-protection.jpg');opacity:.95;background-position:center;background-size:cover}
body.hero-industries .page-hero::before{background-image:url('img/hero-industries.jpg');opacity:.95;background-position:center;background-size:cover}
body.hero-epc .page-hero::before{background-image:url('img/hero-epc.jpg');opacity:.95;background-position:center;background-size:cover}
body.hero-mepf .page-hero::before{background-image:url('img/hero-mepf.jpg');opacity:.95;background-position:center;background-size:cover}
/* MEPF overview page — discipline summary grid */
.mepf-overview{padding:80px 0}
.mepf-disc{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-bottom:88px;padding-bottom:88px;border-bottom:1px solid rgba(0,0,0,.07)}
.mepf-disc:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.mepf-disc.flip{direction:rtl}
.mepf-disc.flip > *{direction:ltr}
.mepf-disc-media{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:#0e5950}
.mepf-disc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.mepf-disc:hover .mepf-disc-media img{transform:scale(1.03)}
.mepf-disc-media .badge{position:absolute;top:18px;left:18px;width:48px;height:48px;display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;background:rgba(14,89,80,.92);color:#fff;border-radius:6px;letter-spacing:.5px}
.mepf-disc-body h3{font-family:'Barlow Condensed',sans-serif;font-size:32px;line-height:1.15;margin:6px 0 14px;color:var(--ink)}
.mepf-disc-body .mepf-tag{font-family:'Barlow Condensed',sans-serif;letter-spacing:1.5px;text-transform:uppercase;font-size:13px;color:var(--teal);font-weight:600}
.mepf-disc-body p{color:var(--ink);opacity:.85;margin:0 0 14px;line-height:1.65}
.mepf-bullets{list-style:none;padding:0;margin:18px 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.mepf-bullets li{position:relative;padding-left:20px;font-size:14.5px;color:var(--ink);opacity:.85}
.mepf-bullets li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--teal);border-radius:2px;transform:rotate(45deg)}
.mepf-disc-cta{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:600;text-decoration:none;border-bottom:1px solid var(--teal);padding-bottom:2px;transition:gap .25s ease}
.mepf-disc-cta:hover{gap:10px}
@media(max-width:880px){
  .mepf-disc{grid-template-columns:1fr;gap:24px;margin-bottom:56px;padding-bottom:56px}
  .mepf-disc.flip{direction:ltr}
  .mepf-disc-body h3{font-size:26px}
  .mepf-bullets{grid-template-columns:1fr}
}
[data-theme="dark"] .mepf-disc{border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .mepf-disc-body h3{color:#fff}
[data-theme="dark"] .mepf-disc-body p,
[data-theme="dark"] .mepf-bullets li{color:rgba(255,255,255,.78)}
[data-theme="dark"] .burger span{background:#fff}
[data-theme="dark"] .promise{background:#10191c}
[data-theme="dark"] .promise-card{background:#162124;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .promise-card li{border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .promise-card li b{color:#fff}
[data-theme="dark"] .promise-card li small{color:rgba(255,255,255,.65)}
[data-theme="dark"] .caps,[data-theme="dark"] .proc,[data-theme="dark"] .clients,[data-theme="dark"] .founder,[data-theme="dark"] .people{background:var(--cream)}
[data-theme="dark"] .scope,[data-theme="dark"] .why,[data-theme="dark"] .ind,[data-theme="dark"] .testi,[data-theme="dark"] .projects,[data-theme="dark"] .lifecycle,[data-theme="dark"] .schematic-sec{background:#10191c}
[data-theme="dark"] .creds{background:var(--cream)}
[data-theme="dark"] .cap,[data-theme="dark"] .why-card,[data-theme="dark"] .step-img,[data-theme="dark"] .cred,[data-theme="dark"] .form-card,[data-theme="dark"] .quote,[data-theme="dark"] .disc,[data-theme="dark"] .proj,[data-theme="dark"] .cl{background:#162124;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .cap-grid,[data-theme="dark"] .cl-grid,[data-theme="dark"] .creds-grid{background:rgba(255,255,255,.08)}
[data-theme="dark"] .cap-ic,[data-theme="dark"] .why-card .wi{background:rgba(255,255,255,.06);color:#3fae97}
[data-theme="dark"] .cap:hover .cap-ic{background:var(--teal);color:#0c1518}
[data-theme="dark"] .cred .ci{border-color:rgba(255,255,255,.25);color:#cdb88a}
[data-theme="dark"] .disc-letter{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.18)}
[data-theme="dark"] .step .dot{box-shadow:0 0 0 6px var(--cream),0 0 0 7px rgba(255,255,255,.2)}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{background:#0e1619;border-color:rgba(255,255,255,.14);color:#e9ecec}
[data-theme="dark"] .field input::placeholder,[data-theme="dark"] .field textarea::placeholder{color:rgba(255,255,255,.4)}
[data-theme="dark"] .ind-pill{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.15)}
[data-theme="dark"] .ind-pill:hover{background:#fff;color:var(--cream);border-color:#fff}
[data-theme="dark"] #ba-pf{background:#162124;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .flt{color:rgba(255,255,255,.72)}
[data-theme="dark"] .flt:hover{background:rgba(255,255,255,.06);color:#fff}
[data-theme="dark"] .flt.on{background:#fff;color:var(--cream)}
[data-theme="dark"] .schematic-wrap{background:linear-gradient(160deg,#162124,#0e1619);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .schematic-wrap::before{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)}
[data-theme="dark"] #ba-schematic [data-draw]{stroke:#3fae97}
[data-theme="dark"] #ba-schematic .accent{stroke:#cdb88a}
[data-theme="dark"] #ba-schematic .lbl{fill:#cdb88a}
[data-theme="dark"] #ba-schematic .node{fill:#3fae97}
[data-theme="dark"] .todo-pill{background:rgba(218,162,46,.14);color:#e6b772;border-color:rgba(218,162,46,.45)}
[data-theme="dark"] .todo-num{color:#e6b772;border-bottom-color:rgba(218,162,46,.55)}
[data-theme="dark"] .proj-meta div b{color:#fff}
[data-theme="dark"] .step-img h4,[data-theme="dark"] .why-card h4,[data-theme="dark"] .cap h3,[data-theme="dark"] .disc-top h3,[data-theme="dark"] .form-card h3,[data-theme="dark"] .quote p,[data-theme="dark"] .proj-body h3,[data-theme="dark"] .cred b,[data-theme="dark"] .promise-card h3{color:#fff}

/* Touch devices: hide custom cursor entirely */
@media (hover:none){
  body.ba-has-cursor,body.ba-has-cursor *{cursor:auto!important}
  #ba-dot,#ba-ring{display:none}
  #ba-dots{display:none}
}

/* Reduced motion: kill the rises */
@media (prefers-reduced-motion: reduce){
  .ba-w{transform:none;opacity:1;animation:none}
  .reveal{transition:opacity .25s,transform .25s}
  #ba-schematic [data-draw]{stroke-dashoffset:0}
  #ba-wa{animation:none}
}

/* =========================================================================
   v3 — WhatsApp, FAQ, case study, legal pages
   ========================================================================= */

/* ---- Floating WhatsApp button (replaces position of back-to-top) ---- */
#ba-wa{
  position:fixed;right:22px;bottom:22px;z-index:97;
  display:inline-flex;align-items:center;gap:0;
  padding:0;width:56px;height:56px;border-radius:99px;
  background:#25D366;color:#fff;cursor:pointer;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.5),0 4px 12px -4px rgba(0,0,0,.18);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,background .3s,width .35s cubic-bezier(.16,1,.3,1),padding .35s;
  overflow:hidden;text-decoration:none;animation:ba-wa-pulse 2.8s ease-in-out infinite
}
#ba-wa svg{flex-shrink:0;margin:0 15px}
#ba-wa .ba-wa-lbl{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700;
  white-space:nowrap;max-width:0;opacity:0;transition:max-width .35s cubic-bezier(.16,1,.3,1),opacity .25s,padding .35s;padding:0
}
#ba-wa:hover{width:200px;background:#1ebd5a;transform:translateY(-3px)}
#ba-wa:hover .ba-wa-lbl{max-width:160px;opacity:1;padding-right:18px}
#ba-wa:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@keyframes ba-wa-pulse{
  0%,100%{box-shadow:0 14px 30px -8px rgba(37,211,102,.5),0 4px 12px -4px rgba(0,0,0,.18),0 0 0 0 rgba(37,211,102,.5)}
  50%    {box-shadow:0 14px 30px -8px rgba(37,211,102,.5),0 4px 12px -4px rgba(0,0,0,.18),0 0 0 14px rgba(37,211,102,0)}
}
@media(max-width:560px){
  #ba-wa{right:14px;bottom:14px}
  #ba-wa:hover{width:56px;background:#1ebd5a}
  #ba-wa:hover .ba-wa-lbl{max-width:0;opacity:0;padding-right:0}
}

/* Reposition back-to-top to stack above WhatsApp */
#ba-btt{bottom:92px;right:28px;width:44px;height:44px}
@media(max-width:560px){#ba-btt{bottom:80px;right:20px;width:40px;height:40px}}


/* ---- FAQ accordion ---- */
.faq-list{max-width:880px;margin:0 auto}
.faq-item{
  border-bottom:1px solid var(--line);background:var(--card);
  transition:background .3s
}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{
  width:100%;background:transparent;border:none;text-align:left;cursor:pointer;
  padding:26px 60px 26px 8px;font-family:var(--serif);font-weight:500;
  font-size:1.25rem;color:var(--ink);position:relative;
  transition:color .3s,padding .3s;line-height:1.4
}
.faq-q::after{
  content:"";position:absolute;right:14px;top:50%;width:18px;height:18px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23147b6e' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-size:contain;background-repeat:no-repeat;
  transform:translateY(-50%);transition:transform .35s cubic-bezier(.16,1,.3,1)
}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(180deg)}
.faq-item.open .faq-q{color:var(--teal)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1),padding .35s ease}
.faq-item.open .faq-a{max-height:600px;padding-bottom:24px}
.faq-a-inner{padding:0 60px 4px 8px;color:var(--txt-soft);font-size:16.5px;line-height:1.85}
.faq-a-inner p{margin-bottom:14px}
.faq-a-inner p:last-child{margin-bottom:0}
[data-theme="dark"] .faq-q::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fae97' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>")
}

/* ---- Empty filter state ---- */
#ba-pf-empty{text-align:center;padding:60px 30px;color:var(--txt-mute)}
#ba-pf-empty p{font-family:var(--serif);font-style:normal;font-size:1.1rem}
#ba-pf-empty button{
  margin-left:6px;background:transparent;border:none;color:var(--teal);
  cursor:pointer;font:inherit;border-bottom:1px solid var(--teal);padding:0 2px;
  transition:color .3s,border-color .3s
}
#ba-pf-empty button:hover{color:var(--ink);border-color:var(--ink)}

/* ---- Case study layout ---- */
.cs-hero{
  position:relative;padding:170px 0 90px;color:#fff;overflow:hidden;background:#0c1518
}
.cs-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;opacity:.58
}
.cs-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(110deg,rgba(8,17,20,.95) 0%,rgba(8,17,20,.7) 50%,rgba(8,17,20,.45) 100%)
}
.cs-hero .wrap{position:relative;z-index:2}
.cs-hero .cs-back{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:14.5px;font-weight:700;
  color:#cdb88a;margin-bottom:22px;transition:gap .3s
}
.cs-hero .cs-back:hover{gap:14px}
.cs-hero .cs-sector{
  display:inline-block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:14px;font-weight:700;
  padding:8px 18px;border:1px solid rgba(205,184,138,.5);color:#cdb88a;border-radius:99px;margin-bottom:18px
}
.cs-hero h1{color:#fff;font-size:clamp(2.2rem,5.6vw,4rem);font-weight:700;letter-spacing:-.02em;line-height:1.08;max-width:24ch;margin-bottom:16px}
.cs-quote blockquote{color:#fff}
.cs-hero .cs-lede{font-size:18px;color:rgba(255,255,255,.86);max-width:680px;line-height:1.75}

.cs-facts{background:var(--ink);color:#fff;padding:50px 0;border-top:1px solid rgba(255,255,255,.08)}
.cs-facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.cs-fact{border-left:1px solid rgba(255,255,255,.16);padding-left:18px}
.cs-fact:first-child{border-left-color:rgba(205,184,138,.55)}
.cs-fact .l{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;color:#cdb88a;font-weight:700;display:block;margin-bottom:11px}
.cs-fact .v{font-family:var(--sans);font-weight:700;font-size:1.6rem;line-height:1.15;color:#fff;letter-spacing:-.01em}
@media(max-width:880px){.cs-facts-grid{grid-template-columns:repeat(2,1fr);gap:24px}}

.cs-body{padding:110px 0 30px;background:var(--cream)}
.cs-grid{display:grid;grid-template-columns:1fr 1.18fr;gap:80px;align-items:start}
.cs-grid .cs-side{position:sticky;top:104px}
.cs-grid .cs-side .eyebrow{margin-bottom:14px}
.cs-grid .cs-side h2{font-size:clamp(1.7rem,3.8vw,2.4rem);font-weight:500;line-height:1.18}
.cs-grid .cs-main h3{font-family:var(--serif);font-size:1.45rem;font-weight:500;margin:0 0 14px;color:var(--ink)}
.cs-grid .cs-main h3 + p,.cs-grid .cs-main p + p{margin-top:0}
.cs-grid .cs-main p{font-size:16.5px;color:var(--txt-soft);line-height:1.85;margin-bottom:18px}
.cs-grid .cs-main .cs-block{margin-bottom:48px}
.cs-grid .cs-main ul{list-style:none;padding:0;margin:8px 0 18px}
.cs-grid .cs-main ul li{
  position:relative;padding-left:22px;font-size:16px;color:var(--txt-soft);line-height:1.8;margin-bottom:9px
}
.cs-grid .cs-main ul li::before{
  content:"";position:absolute;left:0;top:11px;width:7px;height:7px;background:var(--teal);border-radius:50%
}
@media(max-width:1080px){.cs-grid{grid-template-columns:1fr;gap:40px}.cs-grid .cs-side{position:static}}

.cs-gallery{padding:40px 0 100px;background:var(--cream)}
.cs-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cs-gal-grid img{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.cs-gal-grid figure{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:4/3;margin:0;background:var(--ink)}
.cs-gal-grid figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.cs-gal-grid figure:hover img{transform:scale(1.05)}
@media(max-width:880px){.cs-gal-grid{grid-template-columns:repeat(2,1fr)}.cs-gal-grid figure:first-child{grid-column:span 2;grid-row:auto}}

.cs-quote{background:var(--ink);color:#fff;padding:110px 0;text-align:center;position:relative;overflow:hidden}
.cs-quote::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 50% 50%,rgba(20,123,110,.25),transparent 65%)}
.cs-quote .wrap{position:relative;z-index:2;max-width:880px}
.cs-quote .qm{font-family:var(--serif);font-size:88px;color:#cdb88a;line-height:.4;display:block;margin-bottom:18px}
.cs-quote blockquote{font-family:var(--serif);font-size:clamp(1.4rem,3.2vw,2rem);font-weight:300;line-height:1.45;letter-spacing:-.01em;color:#fff;margin:0 auto 36px;max-width:780px}
.cs-quote cite{display:block;font-style:normal;font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:14.5px;color:#cdb88a;font-weight:700}
.cs-quote cite small{display:block;margin-top:5px;color:rgba(255,255,255,.6);letter-spacing:.02em;font-size:12.5px;text-transform:none;font-weight:400}

.cs-related{padding:110px 0;background:var(--card)}
.cs-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:42px}
.cs-related-card{background:var(--cream);border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:transform .45s,box-shadow .45s,border-color .45s}
.cs-related-card:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 30px 60px -36px rgba(26,36,34,.32)}
.cs-related-card .ci{aspect-ratio:8/5;overflow:hidden}
.cs-related-card .ci img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.cs-related-card:hover .ci img{transform:scale(1.05)}
.cs-related-card .cb{padding:26px 28px 30px}
.cs-related-card .cb span{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;color:var(--gold);font-weight:700}
.cs-related-card .cb h4{font-family:var(--serif);font-size:1.35rem;font-weight:500;margin:8px 0 4px;color:var(--ink)}
.cs-related-card .cb .ar{display:inline-block;margin-top:8px;color:var(--teal);font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;font-weight:700}
@media(max-width:880px){.cs-related-grid{grid-template-columns:1fr}}

/* ---- Legal pages (Privacy / Terms / Cookies) ---- */
.legal{padding:130px 0 100px;background:var(--cream)}
.legal-wrap{max-width:780px;margin:0 auto}
.legal .legal-meta{font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;color:var(--txt-mute);font-weight:700;margin-bottom:14px}
.legal h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin-bottom:14px}
.legal .legal-lede{font-size:18.5px;color:var(--txt-soft);line-height:1.78;margin-bottom:46px}
.legal h2{font-family:var(--serif);font-size:1.55rem;font-weight:500;margin:46px 0 16px;color:var(--ink);padding-top:20px;border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.legal p{font-size:16.5px;color:var(--txt-soft);line-height:1.85;margin-bottom:16px}
.legal ul{list-style:none;padding:0;margin:6px 0 18px}
.legal li{position:relative;padding-left:20px;font-size:16px;color:var(--txt-soft);line-height:1.8;margin-bottom:9px}
.legal li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;background:var(--gold);border-radius:50%}
.legal a{color:var(--teal);border-bottom:1px solid rgba(20,123,110,.3)}
.legal a:hover{border-bottom-color:var(--teal)}
[data-theme="dark"] .legal{background:#0e1619}
[data-theme="dark"] .legal h1,[data-theme="dark"] .legal h2{color:#fff}
[data-theme="dark"] .legal h2{border-top-color:rgba(255,255,255,.08)}

/* =========================================================================
   v4 — Blog (listing + post article)
   ========================================================================= */

/* ---- Blog listing grid ---- */
.blog-list{padding:90px 0 120px;background:var(--card)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px}
.blog-grid:has(> :only-child){grid-template-columns:minmax(0,640px);justify-content:center}
@media(max-width:680px){.blog-grid{grid-template-columns:1fr;gap:24px}}

.blog-card{
  display:flex;flex-direction:column;
  background:var(--cream);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s,box-shadow .45s
}
.blog-card:hover{transform:translateY(-7px);border-color:var(--line-2);box-shadow:0 32px 60px -38px rgba(26,36,34,.32)}
.blog-card .bc-img{aspect-ratio:5/3;overflow:hidden;background:var(--ink)}
.blog-card .bc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.blog-card:hover .bc-img img{transform:scale(1.05)}
.blog-card .bc-body{padding:28px 28px 30px;display:flex;flex-direction:column;gap:14px;flex:1}
.blog-card .bc-tag{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;
  color:var(--gold);font-weight:700;display:inline-block
}
.blog-card h3{
  font-family:var(--serif);font-size:1.45rem;font-weight:500;
  color:var(--ink);line-height:1.28;letter-spacing:-.005em;margin:0
}
.blog-card p{font-size:15px;color:var(--txt-soft);line-height:1.65;margin:0;flex:1}
.blog-card .bc-meta{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:14px;margin-top:6px;
  font-family:var(--sans);font-size:12.5px;color:var(--txt-mute);font-weight:500;
  text-transform:uppercase;letter-spacing:.04em
}
.blog-card .bc-meta span{display:inline-flex;align-items:center;gap:6px}
.blog-card .bc-meta span:not(:last-child)::after{
  content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--line-2);margin-left:14px
}

/* ---- Blog post article ---- */
.post{background:var(--cream)}
.post-hero{
  background:var(--ink);color:#fff;padding:160px 0 80px;
  border-bottom:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden
}
.post-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 85% 50%,rgba(20,123,110,.18),transparent 65%);
  pointer-events:none;z-index:1
}
.post-hero .wrap{position:relative;z-index:3;max-width:880px}

/* Image-backed hero (used when an AI-generated hero image is present) */
.post-hero.post-hero-image{padding:170px 0 90px}
.post-hero.post-hero-image .post-hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.32;
  z-index:1;
  transform:scale(1.02);
  filter:saturate(.85)
}
.post-hero.post-hero-image .post-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,30,28,.45) 0%,rgba(15,30,28,.78) 70%,rgba(15,30,28,.92) 100%);
  z-index:2
}
.post-hero.post-hero-image h1{text-shadow:0 2px 18px rgba(0,0,0,.4)}
.post-hero.post-hero-image .post-lede{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.post-hero .cs-back{color:#cdb88a;margin-bottom:24px;display:inline-flex;font-family:var(--sans);
  text-transform:uppercase;letter-spacing:.04em;font-size:14px;font-weight:700;
  align-items:center;gap:8px;transition:gap .3s}
.post-hero .cs-back:hover{gap:14px}
.post-hero .post-tag{
  display:inline-block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.04em;
  font-size:13px;font-weight:700;padding:7px 16px;border:1px solid rgba(205,184,138,.5);
  color:#cdb88a;border-radius:99px;margin-bottom:22px
}
.post-hero h1{
  color:#fff;font-size:clamp(2rem,4.8vw,3.2rem);font-weight:700;line-height:1.15;
  letter-spacing:-.015em;margin-bottom:22px
}
.post-hero .post-lede{
  font-size:19px;color:rgba(255,255,255,.86);line-height:1.65;max-width:720px;margin-bottom:32px
}
.post-hero .post-meta{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  font-family:var(--sans);font-size:13.5px;color:rgba(255,255,255,.65);
  text-transform:uppercase;letter-spacing:.04em;font-weight:600;
  border-top:1px solid rgba(255,255,255,.12);padding-top:24px
}

.post-body{padding:90px 0 110px}
.post-content{max-width:760px;margin:0 auto}
.post-content > p,
.post-content > ul,
.post-content > ol,
.post-content > h2,
.post-content > h3,
.post-content > blockquote{max-width:680px;margin-left:auto;margin-right:auto}
.post-content p{font-size:18px;line-height:1.78;color:var(--txt);margin-bottom:24px}
.post-content h2{
  font-family:var(--sans);font-size:1.65rem;font-weight:700;color:var(--ink);
  margin:48px 0 18px;letter-spacing:-.01em;line-height:1.28
}
.post-content h3{
  font-family:var(--sans);font-size:1.3rem;font-weight:700;color:var(--ink);
  margin:36px 0 14px;line-height:1.32
}
.post-content ul,.post-content ol{margin:8px 0 26px;padding:0;list-style:none}
.post-content li{
  position:relative;padding-left:24px;font-size:17px;color:var(--txt);
  line-height:1.78;margin-bottom:10px
}
.post-content ul li::before{
  content:"";position:absolute;left:0;top:12px;width:8px;height:8px;
  background:var(--teal);border-radius:50%
}
.post-content ol{counter-reset:c}
.post-content ol li::before{
  counter-increment:c;content:counter(c)".";position:absolute;left:0;top:0;
  font-family:var(--sans);font-weight:700;color:var(--gold)
}
.post-content strong{color:var(--ink);font-weight:600}
.post-content a{color:var(--teal);border-bottom:1px solid rgba(20,123,110,.35);transition:border-color .3s}
.post-content a:hover{border-bottom-color:var(--teal)}
.post-content blockquote{
  margin:32px 0;padding:6px 0 6px 28px;border-left:3px solid var(--gold);
  font-family:var(--serif);font-style:normal;font-size:1.35rem;line-height:1.5;color:var(--ink)
}
.post-content .post-cta-line{
  margin-top:42px;padding-top:28px;border-top:1px solid var(--line);
  font-size:17px;color:var(--txt-soft);line-height:1.75
}

@media(max-width:680px){
  .post-hero{padding:130px 0 60px}
  .post-body{padding:64px 0 80px}
  .post-content p{font-size:17px}
  .post-content h2{font-size:1.45rem;margin-top:36px}
}

/* ---- FAQ section page styling ---- */
.faq-sec{padding:130px 0 110px;background:var(--card)}
[data-theme="dark"] .faq-sec{background:#10191c}
[data-theme="dark"] .faq-item{background:#162124;border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .faq-item:first-child{border-top-color:rgba(255,255,255,.08)}
[data-theme="dark"] .faq-q{color:#fff}
[data-theme="dark"] .faq-item.open .faq-q{color:#3fae97}

/* ============== Testimonials page (full grid: text + video mixed) ============== */
.testi-page{background:var(--cream);padding:90px 0 110px}
.testi-page-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px
}
.t-card{
  background:#fff;border:1px solid var(--line);border-radius:2px;
  position:relative;display:flex;flex-direction:column
}
/* Text testimonial — matches the legacy .quote treatment */
.t-card.t-text{padding:44px 42px}
.t-card.t-text .qm{font-family:var(--serif);font-size:54px;color:var(--gold);line-height:.5;height:30px;display:block}
.t-card.t-text p{font-family:var(--serif);font-size:1.25rem;color:var(--ink);line-height:1.6;margin:14px 0 26px}
.t-card .who{display:flex;gap:14px;align-items:center;margin-top:auto}
.t-card .who .av{
  width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--sans);font-size:14px;flex-shrink:0
}
.t-card .who b{display:block;font-family:var(--sans);font-weight:700;color:var(--ink);font-size:15px}
.t-card .who small{font-size:13.5px;color:var(--txt-mute)}

/* Video testimonial card */
.t-card.t-video{padding:0;overflow:hidden}
.t-video-frame{
  position:relative;aspect-ratio:16/9;width:100%;
  background:#0c1416;cursor:pointer;overflow:hidden;display:block
}
.t-video-frame:focus{outline:2px solid var(--gold);outline-offset:2px}
.t-video-thumb{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease, filter .3s ease
}
.t-video-frame:hover .t-video-thumb{transform:scale(1.04);filter:brightness(.9)}
.t-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:transform .25s ease
}
.t-video-frame:hover .t-play{transform:scale(1.08)}
.t-video-frame.playing{cursor:default}
.t-video-frame.playing iframe{width:100%;height:100%;display:block;border:0}
.t-video-cap{
  font-family:var(--serif);font-size:1.08rem;line-height:1.55;color:var(--ink);
  margin:0;padding:24px 28px 6px
}
.t-card.t-video .who{padding:14px 28px 26px}

/* Small badge on About-page preview when a testimonial has a video */
.quote-vid-badge{
  margin-left:auto;align-self:center;font-family:var(--sans);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal);background:rgba(20,123,110,.10);
  border:1px solid rgba(20,123,110,.28);border-radius:999px;
  padding:6px 12px
}

@media(max-width:880px){
  .testi-page-grid{grid-template-columns:1fr}
  .t-card.t-text{padding:34px 26px}
  .t-card.t-text p{font-size:1.15rem}
}

/* "See all" link below testimonials preview on About page */
.testi-see-all{margin-top:36px;text-align:center}
.testi-see-all .see-all-link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.02em;
  color:var(--teal);text-transform:uppercase;
  padding:14px 26px;border:1px solid rgba(20,123,110,.32);border-radius:2px;
  transition:background .25s ease, border-color .25s ease, gap .3s ease
}
.testi-see-all .see-all-link:hover{
  background:rgba(20,123,110,.06);border-color:var(--teal);gap:16px
}
.testi-see-all .see-all-link .ar{font-family:var(--sans);font-weight:400}

/* ============== Nav dropdown (desktop) ============== */
.nav-dd{position:relative;display:inline-block}
.nav-dd-trigger{
  background:none;border:none;cursor:pointer;
  color:inherit;font:inherit;
  font-family:var(--sans);font-size:15px;font-weight:500;
  padding:8px 0;display:inline-flex;align-items:center;gap:6px;
  letter-spacing:0;
  transition:color .25s ease
}
.nav-dd-trigger:hover,.nav-dd:hover .nav-dd-trigger,.nav-dd-trigger[aria-expanded="true"]{color:var(--teal)}
.nav-dd-caret{font-size:10px;transition:transform .25s ease}
.nav-dd:hover .nav-dd-caret,.nav-dd-trigger[aria-expanded="true"] .nav-dd-caret{transform:rotate(180deg)}
.nav-dd-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-4px);
  margin-top:12px;
  background:#fff;
  border:1px solid var(--line);border-radius:3px;
  box-shadow:0 12px 36px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.06);
  min-width:220px;padding:6px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s linear .15s;
  z-index:60
}
/* Invisible hover bridge — fills the gap between trigger and menu so the
   cursor stays inside .nav-dd's hover area while crossing into the menu. */
.nav-dd-menu::after{
  content:"";position:absolute;top:-14px;left:0;right:0;height:14px;background:transparent
}
.nav-dd-menu::before{
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:#fff;
  border-left:1px solid var(--line);border-top:1px solid var(--line)
}
.nav-dd:hover .nav-dd-menu,.nav-dd-trigger[aria-expanded="true"] + .nav-dd-menu,.nav-dd-menu:focus-within{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .2s ease, transform .2s ease, visibility 0s
}
.nav-dd-menu a{
  display:block;padding:8px 14px;
  font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.45;
  color:var(--ink)!important;text-decoration:none;
  border-radius:2px;
  transition:background .15s ease, color .15s ease, padding-left .2s ease
}
.nav-dd-menu a:hover{background:rgba(20,123,110,.08);color:var(--teal)!important;padding-left:18px}
.nav-dd-menu a.active{color:var(--teal)!important;background:rgba(20,123,110,.08)}
/* Suppress underline-on-hover effect inherited from .nav-links a */
.nav-dd-menu a::after{display:none}

/* Header scrolled (white bg) — dropdown trigger should look like regular nav link */
.scrolled .nav-dd-trigger{color:var(--ink)}
.scrolled .nav-dd-trigger:hover,.scrolled .nav-dd:hover .nav-dd-trigger{color:var(--teal)}

/* ============== Mobile menu accordion ============== */
.mm-section{margin:0;width:100%;max-width:300px}
.mm-accordion{
  background:none;border:none;cursor:pointer;
  width:100%;text-align:left;
  font-family:var(--serif);font-weight:500;
  color:var(--ink);font-size:26px;
  padding:6px 0;
  display:flex;align-items:center;justify-content:center;gap:14px
}
.mm-acc-ic{font-size:22px;color:var(--gold);transition:transform .25s ease;line-height:1;font-weight:400}
.mm-accordion[aria-expanded="true"] .mm-acc-ic{transform:rotate(45deg)}
.mm-sub{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
  text-align:center
}
.mm-sub a{
  display:block;padding:9px 0;
  font-family:var(--sans);font-size:17px;font-weight:500;
  color:var(--txt-soft)
}
.mm-sub a:hover{color:var(--gold)}
.mm-section.open .mm-sub{max-height:400px;margin-bottom:6px}

/* ============== Related MEPF grid (cross-link cards on each MEPF page) ============== */
.related-mepf{background:var(--card)}
.related-mepf-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px
}
.related-mepf-card{
  display:flex;align-items:flex-start;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:24px 22px;
  text-decoration:none;color:var(--ink);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease
}
.related-mepf-card:hover{
  border-color:var(--teal);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.06)
}
.related-mepf-card .rmc-ic{
  width:46px;height:46px;border-radius:50%;
  background:var(--teal);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:700;font-size:18px;
  flex-shrink:0
}
.related-mepf-card b{display:block;font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--ink);margin-bottom:4px}
.related-mepf-card small{display:block;font-size:13.5px;color:var(--txt-mute);line-height:1.5}

/* ============== Industries rich grid (industries.html) ============== */
.inds-rich{background:var(--card);padding:90px 0 110px}
.inds-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px
}
.ind-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:30px 28px;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease
}
.ind-card:hover{
  border-color:var(--teal);
  transform:translateY(-3px);
  box-shadow:0 8px 26px rgba(0,0,0,.06)
}
.ind-card-ic{
  font-size:30px;color:var(--gold);
  margin-bottom:12px;line-height:1
}
.ind-card h3{
  font-family:var(--sans);font-weight:700;font-size:1.1rem;
  color:var(--ink);margin:0 0 12px;line-height:1.3
}
.ind-card p{
  font-size:14.5px;color:var(--txt);line-height:1.6;
  margin:0 0 16px
}
.ind-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.ind-card-tags span{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--teal);background:rgba(20,123,110,.08);
  padding:5px 10px;border-radius:999px
}

/* ============== Testimonials slider ============== */
.testi-slider-sec{background:var(--cream);padding:90px 0 110px}
.see-more-inline{color:var(--teal);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(20,123,110,.3);transition:border-color .25s ease}
.see-more-inline:hover{border-bottom-color:var(--teal)}
.testi-slider{
  position:relative;margin-top:36px
}
.tsl-track{
  display:flex;gap:24px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 4px 18px;
  scrollbar-width:thin;
  scrollbar-color:rgba(20,123,110,.3) transparent
}
.tsl-track::-webkit-scrollbar{height:6px}
.tsl-track::-webkit-scrollbar-thumb{background:rgba(20,123,110,.3);border-radius:3px}
.tsl-card{
  flex:0 0 calc(50% - 12px);
  scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:36px 32px;
  display:flex;flex-direction:column
}
.tsl-card .qm{font-family:var(--serif);font-size:54px;color:var(--gold);line-height:.5;height:30px;display:block}
.tsl-card p{font-family:var(--serif);font-size:1.18rem;color:var(--ink);line-height:1.55;margin:14px 0 24px}
.tsl-card .who{display:flex;gap:14px;align-items:center;margin-top:auto}
.tsl-card .who .av{
  width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:700;font-size:13px;flex-shrink:0
}
.tsl-card .who b{display:block;font-family:var(--sans);font-weight:700;color:var(--ink);font-size:14.5px}
.tsl-card .who small{font-size:13px;color:var(--txt-mute)}
.tsl-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
  color:var(--ink);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
  z-index:5
}
.tsl-nav:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.tsl-prev{left:-22px}
.tsl-next{right:-22px}

@media(max-width:1080px){
  .related-mepf-grid{grid-template-columns:repeat(2,1fr)}
  .inds-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){
  .related-mepf-grid{grid-template-columns:1fr}
  .inds-grid{grid-template-columns:1fr}
  .tsl-card{flex-basis:calc(100% - 12px)}
  .tsl-prev{left:8px}
  .tsl-next{right:8px}
}
@media(max-width:780px){
  /* On mobile, the desktop nav-links hide and mobile menu takes over */
  .nav-dd{display:none}
}

/* ===================================================================
   Home page motion layer — added 2026-05-20
   Hero cascade, Ken Burns parallax, lifecycle stagger,
   schematic data-flow pulse, stats-complete pulse.
   All wrapped in @media(prefers-reduced-motion:no-preference)
   at the bottom of this block.
   =================================================================== */

/* Hero entrance cascade — eyebrow, H1, paragraph, CTAs, stats fade-rise in sequence */
@keyframes ba-hc-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes ba-hc-fade{from{opacity:0}to{opacity:1}}

body.home #top .ba-hero-cascade > *{opacity:0;animation:ba-hc-rise 1s cubic-bezier(.16,1,.3,1) both}
body.home #top .ba-hero-cascade > *:nth-child(1){animation-delay:.18s}
body.home #top .ba-hero-cascade > *:nth-child(2){animation-delay:.34s}
body.home #top .ba-hero-cascade > *:nth-child(3){animation-delay:.54s}
body.home #top .ba-hero-cascade > *:nth-child(4){animation-delay:.74s}
body.home #top .ba-hero-cascade > *:nth-child(5){animation-delay:.95s}

/* Eyebrow line: tiny extra animation on the leading rule (the gold dash) */
body.home #top .ba-hero-cascade > div:first-child > span:first-child{
  transform-origin:left center;animation:ba-hc-line 1.1s .35s cubic-bezier(.16,1,.3,1) both
}
@keyframes ba-hc-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Hero Ken Burns — slow, ambient drift of the background photo */
body.home #heroPhoto{
  animation:ba-ken-burns 32s ease-in-out infinite alternate;
  transform-origin:center 58%;
  will-change:transform
}
@keyframes ba-ken-burns{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.07) translate3d(-1%,-1.6%,0)}
}

/* Lifecycle stagger — extend the existing reveal[data-d] cascade to 4 and 5 */
.reveal[data-d="4"]{transition-delay:.4s}
.reveal[data-d="5"]{transition-delay:.5s}

/* Lifecycle card hover — soften the gradient on hover so the image breathes */
.lc::after{transition:opacity .5s ease}
.lc:hover::after{opacity:.78}
.lc-cap{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.lc:hover .lc-cap{transform:translateY(-4px)}

/* Schematic data-flow pulse — the small travelling dot uses native SVG animateMotion;
   the dots themselves get a soft glow */
#ba-schematic .flow-dot{filter:drop-shadow(0 0 4px rgba(205,184,138,.85));opacity:0}
#ba-schematic.drawn .flow-dot{opacity:1;transition:opacity .4s 2.2s ease}

/* Stats complete pulse — fires once when count-up finishes (JS adds .complete) */
.stat-anim.complete{animation:ba-stat-pulse .95s cubic-bezier(.16,1,.3,1) 1}
@keyframes ba-stat-pulse{
  0%{text-shadow:0 0 0 rgba(63,174,151,0);transform:scale(1)}
  35%{text-shadow:0 0 28px rgba(63,174,151,.55);transform:scale(1.04)}
  100%{text-shadow:0 0 0 rgba(63,174,151,0);transform:scale(1)}
}
.stat-cell .sb{display:inline-block;transform-origin:left center}

/* Trust strip — gentle gold underline on hover of each industry pill */
.trust-strip .ts-cell{position:relative}
.trust-strip .ts-cell::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1px;
  background:#cdb88a;transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.16,1,.3,1)
}
.trust-strip .ts-cell:hover::after{transform:scaleX(1)}

/* CTA button arrow nudge — already partially present; reinforce */
.btn .ar,.disc-link .ar{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.btn:hover .ar{transform:translateX(6px)}

/* ── Premium schematic — engineering-grade animations ── */

/* Plant room halo — breathes outward */
#ba-schematic .plant-halo{
  opacity:0;transform-origin:300px 250px;transform-box:fill-box;
  transition:opacity .8s ease;transition-delay:1.4s
}
#ba-schematic.drawn .plant-halo{
  opacity:1;animation:ba-plant-halo 3.2s ease-in-out infinite;animation-delay:2.5s
}
@keyframes ba-plant-halo{
  0%,100%{transform:scale(.85);opacity:.55}
  50%{transform:scale(1.12);opacity:1}
}

/* Plant-room internal hatching: animate in subtly after the rect */
#ba-schematic .plant-room{filter:drop-shadow(0 4px 16px rgba(20,123,110,.18))}

/* Discipline node — subtle shadow + breathe-in stroke */
#ba-schematic .disc-node{filter:drop-shadow(0 3px 10px rgba(20,123,110,.18))}

/* Discipline icons — fade in with the label */
#ba-schematic .disc-ic{transition:opacity .55s ease;transition-delay:1.85s}
#ba-schematic.drawn .disc-ic{opacity:.95!important}

/* Junction circles (where lines bend) — pulse subtly */
#ba-schematic .junction{
  opacity:0;transform-origin:center;transform-box:fill-box;
  transition:opacity .5s ease;transition-delay:var(--delay,1.3s)
}
#ba-schematic.drawn .junction{
  opacity:1;animation:ba-junction-pulse 2.4s ease-in-out infinite;animation-delay:2.6s
}
@keyframes ba-junction-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.35);opacity:.6}
}

/* Sensor terminal dots — pulse with staggered offsets */
#ba-schematic .sensor-dot{
  opacity:0;transform-origin:center;transform-box:fill-box;
  transition:opacity .5s ease;transition-delay:var(--delay,1.9s)
}
#ba-schematic.drawn .sensor-dot{
  opacity:1;animation:ba-sensor-pulse 2.6s ease-in-out infinite
}
#ba-schematic.drawn .sensor-dot:nth-of-type(2n){animation-delay:.6s}
#ba-schematic.drawn .sensor-dot:nth-of-type(3n){animation-delay:1.1s}
#ba-schematic.drawn .sensor-dot:nth-of-type(4n){animation-delay:.3s}
@keyframes ba-sensor-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.45);opacity:.5}
}

/* Title block + scale mark — quietly fade in */
#ba-schematic .title-block,#ba-schematic .scale-mark{
  opacity:0;transition:opacity 1s ease;transition-delay:2s
}
#ba-schematic.drawn .title-block,#ba-schematic.drawn .scale-mark{opacity:1}

/* Smaller trailing flow dots — fade in slightly later */
#ba-schematic .flow-dot.small{filter:drop-shadow(0 0 3px rgba(205,184,138,.65))}
#ba-schematic .flow-dot.accent{filter:drop-shadow(0 0 4px rgba(216,173,111,.85))}

/* ───────────────────────────────────────────────────────────────
   Isometric MEPF illustration + animated callouts
   Replaces the abstract schematic with a visual showing the four
   disciplines as real equipment (HVAC, ELEC, PLUMB, FIRE).
   ─────────────────────────────────────────────────────────────── */

#ba-iso{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:100%;width:auto;max-width:100%;
  display:block;border-radius:3px;
  filter:drop-shadow(0 24px 60px rgba(22,49,61,.18))
}
#ba-callouts{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:100%;width:auto;max-width:100%;
  pointer-events:none;z-index:2
}

/* Callout dot — solid centre marker */
#ba-callouts .co-dot{
  fill:#3fae97;
  opacity:0;
  filter:drop-shadow(0 0 8px rgba(63,174,151,.9));
  transition:opacity .4s ease;transition-delay:var(--delay,0s)
}
#ba-callouts .co-dot.accent{fill:#d8ad6f;filter:drop-shadow(0 0 8px rgba(216,173,111,.9))}

/* Callout pulse — radar ring expanding outward from dot */
#ba-callouts .co-pulse{
  fill:none;stroke:#3fae97;stroke-width:1.4;
  transform-origin:center;transform-box:fill-box;
  opacity:0
}
#ba-callouts .co-pulse.accent{stroke:#d8ad6f}

/* Callout line — fades in as drawn stroke */
#ba-callouts .co-line{
  fill:none;stroke:#3fae97;stroke-width:1.2;
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .85s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--delay,0s) + .35s)
}
#ba-callouts .co-line.accent{stroke:#d8ad6f}

/* Callout label box — fades in after line */
#ba-callouts .co-label{
  opacity:0;
  transition:opacity .55s ease,transform .55s ease;
  transition-delay:calc(var(--delay,0s) + 1s);
  transform:translateY(4px)
}

/* Triggered when the wrap scrolls into view */
.schematic-wrap.in #ba-callouts .co-dot{opacity:1}
.schematic-wrap.in #ba-callouts .co-pulse{
  opacity:1;
  animation:ba-co-pulse 2.6s ease-out infinite;
  animation-delay:calc(var(--delay,0s) + .8s)
}
.schematic-wrap.in #ba-callouts .co-line{stroke-dashoffset:0}
.schematic-wrap.in #ba-callouts .co-label{opacity:1;transform:translateY(0)}

@keyframes ba-co-pulse{
  0%{transform:scale(.18);opacity:.95}
  90%{opacity:0}
  100%{transform:scale(1);opacity:0}
}

/* Hover lift: any callout group gets a small glow on hover */
#ba-callouts .callout{transition:transform .35s ease}
#ba-callouts .callout:hover{transform:translateY(-2px)}

/* Label transform applies to inner translate group */
#ba-callouts .co-label > rect{transition:fill .35s ease}

/* Mobile — labels could overlap on narrow viewports; let the SVG scale naturally */
@media(max-width:780px){
  #ba-callouts text{font-size:11px}
}

/* ═════════════════════════════════════════════════════════════════
   HAND-BUILT MEPF FACILITY ILLUSTRATION (#ba-mepf-art)
   Four-quadrant detailed equipment with central coordination hub.
   Animations: rotating fan, pulsing indicator lights, sprinkler
   activation, hub halo breathe, connection-line draw, zone cascade.
   ═════════════════════════════════════════════════════════════════ */

#ba-mepf-art{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:block
}

/* Quadrant zones cascade in */
#ba-mepf-art .art-zone{
  opacity:0;transform:translateY(8px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--delay,0s)
}
.schematic-wrap.in #ba-mepf-art .art-zone{opacity:1;transform:translateY(0)}

/* Connection lines draw in (dashed) */
#ba-mepf-art .conn-line{
  stroke-dasharray:3 3;
  stroke-dashoffset:200;
  opacity:0;
  transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1),opacity .5s ease;
  transition-delay:var(--delay,0s)
}
.schematic-wrap.in #ba-mepf-art .conn-line{stroke-dashoffset:0;opacity:.65}

/* Central MEPF hub fades in */
#ba-mepf-art .ba-hub{
  opacity:0;transform-origin:300px 250px;transform-box:fill-box;transform:scale(.85);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--delay,1.8s)
}
.schematic-wrap.in #ba-mepf-art .ba-hub{opacity:1;transform:scale(1)}

/* Hub halo breathes */
#ba-mepf-art .ba-hub-halo{
  opacity:0;transform-origin:300px 250px;transform-box:fill-box;
  transition:opacity .8s ease;transition-delay:2s
}
.schematic-wrap.in #ba-mepf-art .ba-hub-halo{
  opacity:1;animation:ba-hub-halo-pulse 3.6s ease-in-out infinite;animation-delay:2.6s
}
@keyframes ba-hub-halo-pulse{
  0%,100%{transform:scale(.78);opacity:.55}
  50%{transform:scale(1.18);opacity:1}
}

/* HVAC fan blades — continuous slow rotation */
#ba-mepf-art .ba-fan-rotate{
  animation:ba-fan-spin 6s linear infinite;
  animation-play-state:paused
}
.schematic-wrap.in #ba-mepf-art .ba-fan-rotate{animation-play-state:running}
@keyframes ba-fan-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Electrical indicator lights — staggered pulse */
#ba-mepf-art .ba-ind{
  transform-origin:center;transform-box:fill-box;
  animation:ba-ind-pulse 2.4s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(63,174,151,.85));
  animation-play-state:paused
}
.schematic-wrap.in #ba-mepf-art .ba-ind{animation-play-state:running}
#ba-mepf-art .ba-ind-amber{
  filter:drop-shadow(0 0 4px rgba(216,173,111,.85));
  animation-duration:1.8s;animation-delay:.6s
}
#ba-mepf-art .ba-ind-green:nth-of-type(2n){animation-delay:.5s}
#ba-mepf-art .ba-ind-green:nth-of-type(3n){animation-delay:1s}
@keyframes ba-ind-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(1.2)}
}

/* Sprinkler activation pulse — each sprinkler ripples outward */
#ba-mepf-art .ba-spr-pulse{
  animation:ba-spr-fire 3.6s ease-out infinite;
  animation-delay:var(--spr-delay,0s);
  animation-play-state:paused;
  transform-origin:center;transform-box:fill-box
}
.schematic-wrap.in #ba-mepf-art .ba-spr-pulse{animation-play-state:running}
@keyframes ba-spr-fire{
  0%{r:0;opacity:.85}
  60%{opacity:.25}
  100%{r:12;opacity:0}
}

/* Hub flow dots — visible only after schematic enters */
#ba-mepf-art .ba-hub-flow{
  opacity:0;
  filter:drop-shadow(0 0 4px rgba(205,184,138,.8));
  transition:opacity .4s ease;transition-delay:2.4s
}
#ba-mepf-art .ba-hub-flow.accent{filter:drop-shadow(0 0 4px rgba(216,173,111,.85))}
.schematic-wrap.in #ba-mepf-art .ba-hub-flow{opacity:1}

/* Plumbing flow + electrical cable flow */
#ba-mepf-art .ba-flow-p,#ba-mepf-art .ba-flow-e{
  opacity:0;
  filter:drop-shadow(0 0 3px rgba(205,184,138,.75));
  transition:opacity .4s ease;transition-delay:1.8s
}
.schematic-wrap.in #ba-mepf-art .ba-flow-p,
.schematic-wrap.in #ba-mepf-art .ba-flow-e{opacity:1}

/* Corner marks + title strip — quietly fade */
#ba-mepf-art .corner-marks,#ba-mepf-art text:first-of-type{
  opacity:0;transition:opacity 1s ease;transition-delay:1.8s
}
.schematic-wrap.in #ba-mepf-art .corner-marks{opacity:.5}
.schematic-wrap.in #ba-mepf-art > text:first-of-type{opacity:.7}

/* Mobile tightening */
@media(max-width:780px){
  #ba-mepf-art text{font-size:90%}
}

/* Reduced motion — turn off perpetual loops */
@media (prefers-reduced-motion: reduce){
  #ba-mepf-art .ba-fan-rotate,
  #ba-mepf-art .ba-ind,
  #ba-mepf-art .ba-spr-pulse,
  #ba-mepf-art .ba-hub-halo{animation:none!important}
  #ba-mepf-art .art-zone,
  #ba-mepf-art .conn-line,
  #ba-mepf-art .ba-hub,
  #ba-mepf-art .ba-hub-flow,
  #ba-mepf-art .ba-flow-p,
  #ba-mepf-art .ba-flow-e{
    transition-duration:.3s;transition-delay:0s
  }
}

/* Reduced motion — collapse all the above to instant or near-instant */
@media (prefers-reduced-motion: reduce){
  body.home #top .ba-hero-cascade > *,
  body.home #top .ba-hero-cascade > div:first-child > span:first-child{
    animation:ba-hc-fade .3s both;animation-delay:0s
  }
  body.home #heroPhoto{animation:none}
  .reveal[data-d="4"],.reveal[data-d="5"]{transition-delay:0s}
  #ba-schematic .flow-dot{display:none}
  #ba-schematic.drawn .plant-halo,
  #ba-schematic.drawn .junction,
  #ba-schematic.drawn .sensor-dot{animation:none}
  .stat-anim.complete{animation:none}
  .trust-strip .ts-cell::after{transition:none}
}

/* ============================================================
   Sectors-we-serve section (home page) — eyebrow + heading
   followed by full-bleed marquee of sector chips
   ============================================================ */
.sectors-sec{padding-bottom:0;background:var(--cream)}
.sectors-sec .sec-head{margin-bottom:48px}
.sectors-sec + .diff-band,
section.sectors-sec ~ section.diff-band{margin-top:0}
.sectors-marquee{margin-top:48px}
.sectors-marquee .ts-inner{padding-left:0}
.sectors-marquee .ts-marquee{
  mask-image:linear-gradient(90deg,transparent 0,#000 100px,#000 calc(100% - 120px),transparent 100%);
}
.sectors-marquee .ts-track{animation-duration:120s}
@media(max-width:880px){
  .sectors-sec{padding:90px 0 0}
  .sectors-marquee{margin-top:34px}
}

/* ============================================================
   What-we-do — 4 service-category cards (About page)
   ============================================================ */
.what-we-do{background:var(--cream-2,#f4f1ea)}
.wwd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.wwd-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:36px 28px 32px;position:relative;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s
}
.wwd-card:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:0 30px 60px -36px rgba(20,123,110,.32)}
.wwd-no{
  display:inline-block;
  font-family:var(--cond);font-weight:700;font-size:13.5px;letter-spacing:.18em;
  color:var(--gold);text-transform:uppercase;
  border-top:2px solid var(--gold);padding-top:10px;margin-bottom:18px
}
.wwd-card h3{
  font-family:var(--serif);font-size:1.35rem;font-weight:500;color:var(--ink);
  margin-bottom:18px;line-height:1.28
}
.wwd-card ul{list-style:none;padding:0;margin:0}
.wwd-card li{
  position:relative;padding:9px 0 9px 18px;
  font-size:14.5px;color:var(--txt-soft);line-height:1.55;
  border-bottom:1px dashed rgba(20,123,110,.18)
}
.wwd-card li:last-child{border-bottom:none}
.wwd-card li::before{
  content:"";position:absolute;left:0;top:16px;
  width:6px;height:6px;border-radius:50%;background:var(--teal)
}
@media(max-width:1100px){
  .wwd-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .wwd-grid{grid-template-columns:1fr;gap:18px}
  .wwd-card{padding:28px 24px}
}

/* ============================================================
   Mission / Vision split block (About page)
   ============================================================ */
.mvv{background:var(--cream)}
.mvv-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.mvv-card{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);
  padding:48px 44px;border-radius:2px;
  transition:transform .4s,box-shadow .4s
}
.mvv-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(26,36,34,.28)}
.mvv-card:nth-child(2){border-left-color:var(--gold)}
.mvv-card .eyebrow{font-family:var(--cond);font-size:13px;letter-spacing:.22em;font-weight:700;color:var(--gold);text-transform:uppercase;display:block;margin-bottom:14px}
.mvv-card:nth-child(2) .eyebrow{color:var(--teal)}
.mvv-card h3{
  font-family:var(--serif);font-size:1.55rem;line-height:1.28;font-weight:500;
  color:var(--ink);margin-bottom:22px;letter-spacing:-.01em
}
.mvv-card p{font-size:15.5px;color:var(--txt-soft);line-height:1.78;margin-bottom:14px}
.mvv-card ul{list-style:none;padding:0;margin:6px 0 0}
.mvv-card li{
  position:relative;padding:11px 0 11px 22px;
  font-size:15px;color:var(--txt-soft);line-height:1.7;
  border-bottom:1px solid var(--line)
}
.mvv-card li:last-child{border-bottom:none}
.mvv-card li::before{
  content:"";position:absolute;left:0;top:17px;
  width:8px;height:8px;border-radius:1px;background:var(--teal);transform:rotate(45deg)
}
@media(max-width:880px){
  .mvv-grid{grid-template-columns:1fr;gap:28px}
  .mvv-card{padding:36px 30px}
}

/* ============================================================
   Approach section — sits between What-we-do and Industries
   ============================================================ */
.sec.approach{background:#fff}
.sec.approach .why-card{background:var(--cream)}

/* Values section background contrast */
.sec.values{background:var(--cream-2,#f4f1ea)}
.sec.values .why-card{background:#fff}

/* ============================================================
   CAREERS PAGE — culture grid, role list, job posting layout
   ============================================================ */
.culture-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px
}
@media(max-width:1080px){.culture-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.culture-grid{grid-template-columns:1fr!important;gap:16px}}
.culture-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:32px 26px 30px;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s
}
.culture-card:hover{
  transform:translateY(-5px);border-color:var(--teal);
  box-shadow:0 28px 56px -36px rgba(20,123,110,.28)
}
.culture-card .cc-ic{
  font-size:28px;color:var(--teal);
  margin-bottom:16px;line-height:1
}
.culture-card h3{
  font-family:var(--serif);font-size:1.2rem;font-weight:500;
  margin-bottom:10px;color:var(--ink);line-height:1.3
}
.culture-card p{
  font-size:14.5px;color:var(--txt-soft);line-height:1.65
}

/* Open positions list */
.role-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:48px
}
@media(max-width:880px){.role-list{grid-template-columns:1fr;gap:16px}}
.role-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:28px 30px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s
}
.role-card:hover{
  transform:translateY(-4px);border-color:var(--teal);
  box-shadow:0 28px 56px -38px rgba(20,123,110,.32)
}
.role-card .rc-top{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap
}
.role-card .rc-cat{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:11.5px;font-weight:700;color:var(--gold)
}
.role-card .rc-type{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;
  font-size:10.5px;font-weight:600;color:var(--txt-soft);
  background:var(--cream-2);padding:4px 10px;border-radius:99px
}
.role-card h3{
  font-family:var(--serif);font-size:1.3rem;font-weight:500;line-height:1.25;color:var(--ink)
}
.role-card p{
  font-size:14.5px;color:var(--txt-soft);line-height:1.65;margin:0
}
.role-card .rc-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px
}
.role-card .rc-loc{color:var(--txt-soft)}
.role-card .rc-cta{
  color:var(--teal);font-weight:600;font-family:var(--sans);
  transition:gap .25s ease
}
.role-card:hover .rc-cta{color:var(--teal)}

/* Open application band */
.open-app-band{
  display:flex;justify-content:space-between;align-items:center;gap:32px;
  background:var(--ink);color:#fff;
  padding:44px 48px;border-radius:3px
}
.open-app-band h3{
  font-family:var(--serif);font-size:1.6rem;font-weight:500;
  margin-bottom:8px;color:#fff
}
.open-app-band p{
  color:rgba(255,255,255,.78);font-size:15px;line-height:1.7;max-width:540px;margin:0
}
.open-app-band .btn{flex-shrink:0}
@media(max-width:780px){
  .open-app-band{flex-direction:column;align-items:flex-start;gap:20px;padding:32px 28px}
}

/* Individual job posting layout */
.job-meta-strip{
  margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 18px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;
  font-size:12.5px;font-weight:600;color:#cdb88a
}
.job-meta-strip span{
  padding:6px 14px;border:1px solid rgba(205,184,138,.35);border-radius:99px
}

.job-body{padding:90px 0 110px;background:var(--cream)}
.job-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:start}
@media(max-width:1080px){.job-grid{grid-template-columns:1fr;gap:40px}}

.job-main h2{
  font-family:var(--serif);font-size:1.65rem;font-weight:500;
  color:var(--ink);margin:40px 0 16px;letter-spacing:-.005em
}
.job-main h2:first-child{margin-top:0}
.job-main p{font-size:16px;color:var(--txt-soft);line-height:1.78;margin-bottom:14px}
.job-main ul{list-style:none;padding:0;margin:8px 0 16px}
.job-main li{
  position:relative;padding:11px 0 11px 22px;
  font-size:15.5px;color:var(--txt-soft);line-height:1.65;
  border-bottom:1px dashed rgba(20,123,110,.18)
}
.job-main li:last-child{border-bottom:none}
.job-main li::before{
  content:"";position:absolute;left:0;top:18px;
  width:7px;height:7px;background:var(--teal);transform:rotate(45deg)
}
.job-skills{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 24px}
.job-skill{
  font-family:var(--cond);font-size:13px;letter-spacing:.04em;font-weight:600;
  padding:7px 14px;border:1px solid var(--line);border-radius:99px;
  color:var(--ink);background:#fff
}

.job-apply-band{
  margin-top:48px;padding:32px 34px;border-radius:3px;
  background:linear-gradient(135deg,#147b6e 0%,#0c5750 100%);color:#fff
}
.job-apply-band h3{
  font-family:var(--serif);font-size:1.5rem;font-weight:500;color:#fff;margin-bottom:8px
}
.job-apply-band p{color:rgba(255,255,255,.85);margin-bottom:18px;font-size:15px}
.job-apply-band .btn{background:#fff;color:var(--ink)}
.job-apply-band .btn:hover{background:#cdb88a;color:var(--ink)}

.job-side{position:sticky;top:120px}
@media(max-width:1080px){.job-side{position:static}}
.job-side-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:28px 26px;margin-bottom:18px
}
.job-side-card h3{
  font-family:var(--serif);font-size:1.15rem;font-weight:500;
  margin-bottom:14px;color:var(--ink)
}
.job-side-card dl{margin:0}
.job-side-card dt{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:11.5px;font-weight:700;color:var(--gold);margin-top:14px
}
.job-side-card dt:first-child{margin-top:0}
.job-side-card dd{
  margin:4px 0 0;font-size:14.5px;color:var(--ink);line-height:1.55
}
.job-side-card p{font-size:14.5px;color:var(--txt-soft);line-height:1.65;margin-bottom:10px}
.job-side-card a{color:var(--teal);text-decoration:none;font-weight:600}
.job-side-card a:hover{text-decoration:underline}

/* Apply form page layout */
.apply-section{padding:110px 0}
.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:1080px){.apply-grid{grid-template-columns:1fr;gap:40px}}

/* Clickable address — opens Google Maps listing. Subtle underline on hover
   to indicate interactivity without making it look like a regular link. */
.address-link{
  color:inherit;text-decoration:none;
  border-bottom:1px dotted transparent;
  transition:border-color .25s ease,color .25s ease
}
.address-link:hover{
  color:var(--teal);
  border-bottom-color:rgba(20,123,110,.4)
}
footer .address-link:hover{
  color:#cdb88a;
  border-bottom-color:rgba(205,184,138,.4)
}

/* ============================================================
   MEPF "WOW" VISUAL — cinematic AI-rendered facility image
   with animated SVG overlay for the wow + meaningful effect.
   ============================================================ */
.mepf-wow{
  position:relative;aspect-ratio:1/1;
  background:radial-gradient(ellipse at center,#1a3030,#0c1518 80%);
  border:1px solid rgba(205,184,138,.22);border-radius:6px;overflow:hidden;
  box-shadow:0 30px 90px -40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04)
}
.mepf-wow-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;transform:scale(1.04);
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 6s cubic-bezier(.16,1,.3,1)
}
.mepf-wow.in .mepf-wow-img{opacity:1;transform:scale(1)}
.mepf-wow-overlay{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none
}

/* Overlay element entrance choreography — animate ONLY opacity so the
   SVG transform="translate(x,y)" positioning attributes stay intact.
   (CSS transforms on SVG <g> override the transform attribute, which is
    why the tags previously all collapsed to the same corner.) */
.mepf-wow .mw-corner,
.mepf-wow .mw-title,
.mepf-wow .mw-footer,
.mepf-wow .mw-paths,
.mepf-wow .mw-halo,
.mepf-wow .mw-tag,
.mepf-wow .mw-dot{
  opacity:0;
  transition:opacity 1s cubic-bezier(.16,1,.3,1)
}
.mepf-wow.in .mw-corner{opacity:.7;transition-delay:1.4s}
.mepf-wow.in .mw-title{opacity:1;transition-delay:1.6s}
.mepf-wow.in .mw-footer{opacity:.55;transition-delay:1.8s}
.mepf-wow.in .mw-paths{opacity:.55;transition-delay:2s}

/* Discipline tags fade in, staggered around the facility */
.mepf-wow.in .mw-tag{opacity:1}
.mepf-wow.in .mw-tag-m{transition-delay:1.7s}
.mepf-wow.in .mw-tag-p{transition-delay:1.9s}
.mepf-wow.in .mw-tag-e{transition-delay:2.1s}
.mepf-wow.in .mw-tag-f{transition-delay:2.3s}

/* Particle dots converging on the hub */
.mepf-wow.in .mw-dot{opacity:1;transition-delay:2.6s}

/* Halo breathes once visible — apply animation via CSS variable trick so
   it doesn't conflict with positioning; halo is positioned by cx/cy not transform */
.mepf-wow.in .mw-halo{
  opacity:1;transition-delay:2s;
  animation:mw-halo-pulse 3.6s ease-in-out infinite;animation-delay:3s;
  transform-origin:300px 300px;transform-box:fill-box
}
@keyframes mw-halo-pulse{
  0%,100%{transform:scale(.82);opacity:.65}
  50%{transform:scale(1.18);opacity:1}
}

/* Responsive — keep square aspect on phones; tags compress */
@media(max-width:560px){
  .mepf-wow .mw-tag rect{width:78px}
  .mepf-wow .mw-tag text:nth-of-type(1){font-size:9.5px}
  .mepf-wow .mw-tag text:nth-of-type(2){font-size:7.5px}
  .mepf-wow .mw-tag text:nth-of-type(3){font-size:5.5px}
  .mepf-wow .mw-title{font-size:9px;letter-spacing:2.5px}
  .mepf-wow .mw-footer{font-size:6px;letter-spacing:1.4px}
}

/* Honor reduced-motion — show static, skip pulse + zoom. Do NOT zero out
   transform on .mw-tag (that would clobber the SVG positioning transform). */
@media(prefers-reduced-motion:reduce){
  .mepf-wow-img{
    opacity:1!important;transform:none!important;
    transition:none!important;animation:none!important
  }
  .mepf-wow .mw-corner,.mepf-wow .mw-title,.mepf-wow .mw-footer,
  .mepf-wow .mw-paths,.mepf-wow .mw-tag,.mepf-wow .mw-dot{
    opacity:1!important;transition:none!important
  }
  .mepf-wow .mw-halo{
    opacity:.7!important;transition:none!important;animation:none!important
  }
  .mepf-wow-overlay circle[r] animateMotion{display:none}
}

/* ============================================================
   COMPREHENSIVE RESPONSIVE LAYER — ensures every block
   collapses gracefully from 1440px down to 320px.
   Added after content rewrite to cover every section.
   ============================================================ */

/* --- Hero (home) inline-padding fallback ------------------- */
.ba-hero-inner{padding:150px 40px 110px}
@media(max-width:1080px){.ba-hero-inner{padding:130px 32px 90px}}
@media(max-width:880px){
  .ba-hero-inner{padding:110px 24px 72px}
  body.home #top{min-height:auto}
  .ba-hero-inner h1{font-size:clamp(1.9rem,8.4vw,2.8rem)!important;max-width:100%!important}
  .ba-hero-inner p{font-size:16px!important;max-width:100%!important}
  .ba-hero-inner > div:nth-child(1){font-size:11px!important;letter-spacing:.22em!important;margin-bottom:20px!important;gap:10px!important;flex-wrap:wrap}
  .ba-hero-inner > div:nth-child(1) span:first-child{width:24px!important}
  /* CTAs full-width on mobile */
  .ba-hero-inner > div[style*="display:flex;gap:16px"]{flex-direction:column;align-items:stretch;gap:12px!important;width:100%}
  .ba-hero-inner > div[style*="display:flex;gap:16px"] a{justify-content:center;padding:15px 22px!important;font-size:14px!important;letter-spacing:.06em!important;width:100%;box-sizing:border-box}
  /* Stat tiles wrap nicely */
  .ba-hero-inner > div[style*="margin-top:54px"]{gap:22px!important;margin-top:36px!important}
  .ba-hero-inner > div[style*="margin-top:54px"] > div{padding-left:14px!important;flex:1 1 calc(50% - 22px);min-width:130px}
  .ba-hero-inner > div[style*="margin-top:54px"] > div b{font-size:24px!important}
}
@media(max-width:480px){
  .ba-hero-inner{padding:100px 20px 60px}
  .ba-hero-inner h1{font-size:clamp(1.7rem,9vw,2.3rem)!important;line-height:1.12!important}
  .ba-hero-inner > div[style*="margin-top:54px"] > div{flex:1 1 100%}
}

/* --- Sectors marquee on mobile ----------------------------- */
@media(max-width:780px){
  .sectors-sec{padding-top:80px;padding-bottom:0}
  .sectors-marquee{margin-top:32px}
  .sectors-marquee .ts-track span{font-size:11.5px;padding:0 16px}
}

/* --- Diff-band (3 pillars) — already had styles; tighten --- */
@media(max-width:1080px){
  .diff-band{padding:90px 0 100px}
  .db-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:780px){
  .db-grid{grid-template-columns:1fr!important;gap:24px}
  .diff-band{padding:70px 0 80px}
  .db-head{margin-bottom:36px}
  .db-head h2{font-size:clamp(1.7rem,7vw,2.2rem)!important;line-height:1.12}
  .db-col{padding:30px 26px!important}
  .db-no{font-size:13px!important}
  .db-col h3{font-size:1.2rem!important}
}

/* --- Promise / about hero / CTA — global safety ------------ */
@media(max-width:780px){
  .sec{padding:80px 0}
  .promise-grid{gap:40px!important}
  .promise-claim{font-size:clamp(1.2rem,5.4vw,1.8rem)!important;line-height:1.34!important;margin:18px 0 22px!important}
  .promise-card{padding:36px 28px!important}
  .promise-card h3{font-size:1.3rem!important}
  .promise-card li{padding:18px 0!important}
  .promise-card li b{font-size:15px!important}
}
@media(max-width:480px){
  .sec{padding:64px 0}
  .promise-card{padding:28px 22px!important}
  .promise-card li{gap:14px!important}
  .promise-card li .bi{width:28px!important;height:28px!important;font-size:12px!important}
}

/* --- Schematic / MEPF illustration ------------------------- */
@media(max-width:1080px){
  .schematic-sec{padding:80px 0 90px}
  .schematic-grid{gap:36px!important}
}
@media(max-width:780px){
  .schematic-sec{padding:64px 0 72px}
  .schematic-grid{gap:28px!important}
  .schematic-grid .stxt h2{font-size:clamp(1.7rem,6.6vw,2.3rem)!important;margin:14px 0 18px!important}
  .schematic-grid .stxt p{font-size:15.5px!important;line-height:1.7!important;margin-bottom:14px!important}
  /* SVG inside aspect-ratio wrap auto-scales; text gets harder to read */
  #ba-mepf-art text{font-size:88%}
}
@media(max-width:480px){
  .schematic-wrap{aspect-ratio:1/1}  /* squarer = readable on narrow phones */
  #ba-mepf-art text[font-size="13"]{font-size:11px}
}

/* --- Lifecycle (six stages) -------------------------------- */
@media(max-width:1080px){
  .lc-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px}
}
@media(max-width:780px){
  .lc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .lc-cap{left:16px!important;right:16px!important;bottom:16px!important}
  .lc-cap span{font-size:12px!important;margin-bottom:6px!important}
  .lc-cap b{font-size:16.5px!important;line-height:1.22!important}
}
@media(max-width:420px){
  .lc-grid{grid-template-columns:1fr!important}
}

/* --- Stats band ------------------------------------------- */
@media(max-width:780px){
  .stats-band{padding:70px 0}
  .stat-cell .sb{font-size:clamp(2.2rem,12vw,3.4rem)!important}
  .stat-cell .sn{font-size:11px!important;letter-spacing:.16em!important}
  .stat-cell .sl{font-size:13px!important}
}

/* --- Sec-head global typography on phones ------------------ */
@media(max-width:780px){
  .sec-head{margin-bottom:36px!important;padding-top:22px!important;max-width:100%}
  .sec-head h2{font-size:clamp(1.7rem,6.8vw,2.4rem)!important;margin:14px 0 14px!important}
  .sec-head p{font-size:15.5px!important;line-height:1.7!important}
}

/* --- About: What-we-do, Mission/Vision, Approach, Values --- */
@media(max-width:780px){
  .wwd-grid{gap:16px!important}
  .wwd-card{padding:26px 22px 24px!important}
  .wwd-card h3{font-size:1.15rem!important;margin-bottom:14px!important}
  .wwd-card li{font-size:13.8px!important;padding:8px 0 8px 16px!important;line-height:1.5!important}
  .wwd-card li::before{top:14px!important;width:5px!important;height:5px!important}
  .mvv-card{padding:32px 26px!important}
  .mvv-card h3{font-size:1.32rem!important;margin-bottom:16px!important}
  .mvv-card p{font-size:14.8px!important;line-height:1.7!important}
  .mvv-card li{font-size:14.4px!important;padding:9px 0 9px 18px!important}
}

/* --- Why-grid → confirm responsive at all widths ----------- */
@media(max-width:780px){
  .why-grid{grid-template-columns:1fr!important;gap:16px}
  .why-card{padding:32px 28px!important}
  .why-card h4{font-size:1.2rem!important}
}

/* --- Industries pills -------------------------------------- */
@media(max-width:780px){
  .ind-grid{gap:8px}
  .ind-pill{padding:11px 18px!important;font-size:13.5px!important}
}

/* --- Page-hero (used on about / mepf / contact / etc) ------ */
@media(max-width:780px){
  .page-hero{padding:100px 0 60px!important}
  .page-hero h1{font-size:clamp(1.9rem,7.8vw,2.8rem)!important;line-height:1.1!important}
  .page-hero p{font-size:15.5px!important;line-height:1.7!important;margin-top:14px!important}
  .page-hero .eyebrow{font-size:12px!important;letter-spacing:.22em!important}
}
@media(max-width:480px){
  .page-hero{padding:90px 0 50px!important}
}

/* --- MEPF discipline articles (alternating layout) --------- */
@media(max-width:1080px){
  .mepf-disc{grid-template-columns:1fr!important;gap:0!important}
  .mepf-disc.flip .mepf-disc-media{order:0!important}
  .mepf-disc-media{aspect-ratio:16/9!important;min-height:280px}
  .mepf-disc-body{padding:36px 30px!important}
}
@media(max-width:560px){
  .mepf-disc-media{aspect-ratio:4/3!important;min-height:220px}
  .mepf-disc-body{padding:30px 24px!important}
  .mepf-disc-body h3{font-size:1.6rem!important}
  .mepf-disc-body p{font-size:15px!important;line-height:1.7!important}
  .mepf-bullets{grid-template-columns:1fr!important}
}

/* --- People / testimonials / projects / contact CTA -------- */
@media(max-width:780px){
  .ps-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .ps-cap{font-size:12px!important;padding:6px 10px!important}
  .cta-grid{grid-template-columns:1fr!important;gap:36px!important}
  .form-card{padding:32px 26px!important}
  .form-card h3{font-size:1.35rem!important}
}
@media(max-width:480px){
  .ps-grid{grid-template-columns:1fr!important}
  .form-card{padding:26px 22px!important}
  .form-card .field input,.form-card .field select,.form-card .field textarea{padding:11px 14px!important;font-size:15px!important}
}

/* --- Founder card ------------------------------------------ */
@media(max-width:780px){
  .founder-grid{grid-template-columns:1fr!important;gap:36px!important}
  .founder-card{padding:36px 30px!important;text-align:left}
  .founder-av{width:64px!important;height:64px!important;font-size:22px!important}
  .founder-txt h2{font-size:clamp(1.7rem,6.6vw,2.3rem)!important;line-height:1.18!important}
}

/* --- Footer ----------------------------------------------- */
@media(max-width:1080px){
  .ft-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:36px}
  .ft-brand{grid-column:1 / -1}
}
@media(max-width:780px){
  footer{padding:60px 0 36px}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px 24px}
  .ft-brand{grid-column:1 / -1}
  .ft-brand p{font-size:14.5px!important;line-height:1.7!important}
  .ft-col h4{font-size:14px!important;margin-bottom:14px!important}
  .ft-col a,.ft-col p{font-size:14px!important}
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
  .ft-bottom p{font-size:12.5px!important}
}
@media(max-width:480px){
  .ft-grid{grid-template-columns:1fr!important;gap:28px}
}

/* --- Nav + dropdown + burger ------------------------------- */
@media(max-width:1024px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta{display:none}
}

/* --- Trust strip / sectors-marquee polish ------------------ */
@media(max-width:560px){
  .sectors-marquee{margin-top:24px}
  .trust-strip .ts-inner{height:54px}
  .trust-strip .ts-track span{font-size:11px;padding:0 14px;gap:14px;height:54px}
}

/* --- Skip horizontal overflow safety net ------------------- */
html,body{overflow-x:hidden}
.wrap{max-width:1280px;width:100%;box-sizing:border-box}
/* Images and embeds default to fluid — but the SVG inside
   .schematic-wrap is sized by aspect-ratio + position:absolute,
   so opt it out so the "height:auto" rule below doesn't squash it. */
img,video{max-width:100%;height:auto}
svg{max-width:100%}
.schematic-wrap svg,#ba-mepf-art{max-width:none;height:100%}
table{max-width:100%;display:block;overflow-x:auto}

/* --- Honor reduced-motion globally for the new layer ------- */
@media (prefers-reduced-motion: reduce){
  .ba-hero-cascade > *{animation:none!important;opacity:1!important;transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ============================================================
   STANDARDIZED GRID SYSTEM
   Every tile-style grid uses repeat(auto-fit, minmax(W, 1fr))
   for natural responsive reflow without per-breakpoint rules.
   Asymmetric splits (promise/founder/cs/schematic) keep their
   explicit ratios but get one clean stacking breakpoint.
   ============================================================ */

/* Tile grids — fluid auto-fit for unknown counts; explicit for known counts */

/* .db-grid: 3 fixed pillars — clean 3 → 2 → 1 with no orphan risk */
.db-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:36px}
@media(max-width:1080px){.db-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px}}
@media(max-width:780px){.db-grid{grid-template-columns:1fr!important;gap:20px}}

/* .lc-grid: 6 lifecycle stages — 6 → 3 → 2 → 1 (clean divisors of 6) */
.lc-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:14px}
@media(max-width:1280px){.lc-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:780px){.lc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}}
@media(max-width:480px){.lc-grid{grid-template-columns:1fr!important}}

/* .stats-grid: 4 stats — 4 → 2 → 1 */
.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:34px}
@media(max-width:1080px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px}}
@media(max-width:600px){.stats-grid{grid-template-columns:1fr!important;gap:0!important}.stat-cell{padding:24px 0;border-left:none!important;border-top:1px solid rgba(255,255,255,.13)}.stat-cell:first-child{border-top:none}}

/* .why-grid: base = 3-col (handles 6-card most-common case cleanly: 3x2).
   Add modifier .g4 for 4-card grids, .g8 for 8-card grids. */
.why-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:26px}
.why-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.why-grid.g8{grid-template-columns:repeat(4,minmax(0,1fr))!important}  /* 8 = 4x2 */
@media(max-width:1080px){
  .why-grid,.why-grid.g4,.why-grid.g8{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px}
}
@media(max-width:600px){
  .why-grid,.why-grid.g4,.why-grid.g8{grid-template-columns:1fr!important;gap:16px}
}

/* .wwd-grid: 4 service tracks — 4 → 2 → 1 */
.wwd-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px}
@media(max-width:1080px){.wwd-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.wwd-grid{grid-template-columns:1fr!important;gap:18px}}

/* .mvv-grid: 2 cards (Mission/Vision) — 2 → 1 */
.mvv-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:36px}
@media(max-width:880px){.mvv-grid{grid-template-columns:1fr!important;gap:28px}}

/* .ps-grid: 4 people photos — 4 → 2 → 1 */
.ps-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px}
@media(max-width:1080px){.ps-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:480px){.ps-grid{grid-template-columns:1fr!important}}
/* Variable-count tile grids — auto-fit (cards stretch to fill, no orphan) */
.cap-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important}
.proj-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important}
.testi-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important}
.cs-gal-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
.cs-related-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important}
.testi-page-grid{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;gap:32px}
.hero-grid{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))!important;gap:48px}
.mepf-bullets{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;gap:8px 18px}

/* Known-count: 4 items — 4 → 2 → 1 */
.related-mepf-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px}
.cs-facts-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px}
@media(max-width:1080px){.related-mepf-grid,.cs-facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.related-mepf-grid,.cs-facts-grid{grid-template-columns:1fr!important;gap:14px}}

/* Known-count: 6 items — 3 cols (3x2) on desktop, 2 cols, 1 col */
.cap-grid.epc6,.creds-grid,.cl-grid,.proc-track,.proc-track-img{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px
}
@media(max-width:880px){
  .cap-grid.epc6,.creds-grid,.cl-grid,.proc-track,.proc-track-img{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px
  }
}
@media(max-width:560px){
  .cap-grid.epc6,.creds-grid,.cl-grid,.proc-track,.proc-track-img{
    grid-template-columns:1fr!important;gap:14px
  }
}

/* Known-count: 4 items — 4 → 2 → 1 */
.cap-grid.epc4{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px}
@media(max-width:1080px){.cap-grid.epc4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.cap-grid.epc4{grid-template-columns:1fr!important;gap:14px}}

/* Default .cap-grid (no modifier) — fluid auto-fit fallback */
.cap-grid:not(.epc6):not(.epc4){
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;gap:24px
}

/* Industries pills — auto-fit so 8/12/14 all reflow cleanly */
.inds-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:20px}

/* Asymmetric 2-up content blocks — 2 → 1 (scope-grid only; .epc6 handled above) */
.scope-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:36px}
@media(max-width:880px){.scope-grid{grid-template-columns:1fr!important;gap:28px}}

/* Asymmetric splits — stack at 880px */
.promise-grid,.cta-grid,.founder-grid,.schematic-grid,.cs-grid,.mepf-disc{gap:48px}
@media(max-width:880px){
  .promise-grid,.cta-grid,.founder-grid,.schematic-grid,
  .cs-grid,.mepf-disc,.hero-grid,.scope-grid,.testi-page-grid{
    grid-template-columns:1fr!important;gap:36px
  }
  .mepf-disc.flip{direction:ltr}
}

/* Footer keeps proportional layout but stacks predictably */
.ft-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:48px}
@media(max-width:1080px){
  .ft-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:36px}
  .ft-brand{grid-column:1 / -1}
}
@media(max-width:680px){
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 24px}
  .ft-brand{grid-column:1 / -1}
}
@media(max-width:420px){
  .ft-grid{grid-template-columns:1fr!important}
}

/* Industries pill grid — flex naturally responsive, just balance gap */
.ind-grid{gap:10px}
@media(max-width:600px){.ind-grid{gap:8px}}

/* On phones, reduce all card paddings + gaps once for consistency */
@media(max-width:600px){
  .db-grid,.why-grid,.wwd-grid,.lc-grid,.stats-grid,
  .ps-grid,.proj-grid,.related-mepf-grid,.inds-grid,
  .mvv-grid,.cap-grid,.cs-facts-grid,.cs-gal-grid{
    gap:14px!important
  }
}


/* ============================================================
   GRID OVERFLOW GUARD — ensure grid items never force their
   parent wider than viewport. Critical for grids containing
   images with intrinsic dimensions (lc-grid, ps-grid, etc).
   ============================================================ */
.lc-grid > *,.stats-grid > *,.wwd-grid > *,.why-grid > *,
.mvv-grid > *,.ps-grid > *,.cap-grid > *,.proj-grid > *,
.creds-grid > *,.cl-grid > *,.proc-track > *,.proc-track-img > *,
.related-mepf-grid > *,.inds-grid > *,.cs-facts-grid > *,
.cs-gal-grid > *,.cs-related-grid > *,.mepf-bullets > *,
.db-grid > *,.testi-grid > *,.testi-page-grid > *,
.scope-grid > *,.epc6 > *,.hero-grid > *,.epc4 > *{
  min-width:0;min-height:0
}
.lc-grid img,.ps-grid img,.proj-grid img,.cs-gal-grid img,
.proc-track-img img,.related-mepf-grid img{
  max-width:100%;height:auto;display:block
}

/* ============================================================
   BLOG POST EXTRAS — takeaways + FAQ blocks (Phase 1 AI posts)
   Generated by worker/weekly-blog-worker.js into every new AI
   article. Visible to readers; FAQs are also mirrored in the
   FAQPage JSON-LD on the same page for Google rich results.
   ============================================================ */
.post-takeaways{
  background:#f8f6f0;border:1px solid #e6dcc5;border-left:4px solid #cdb88a;
  padding:22px 26px 20px;border-radius:6px;margin:0 0 38px;font-family:var(--sans)
}
.post-takeaways h2{font-size:16px;margin:0 0 12px;color:#0c1518;letter-spacing:.02em;
  text-transform:uppercase;font-weight:700;font-family:var(--sans)}
.post-takeaways ul{margin:0;padding:0 0 0 20px;font-size:15.5px;color:#1f2a2c;line-height:1.65}
.post-takeaways li{margin:5px 0}

.post-faqs{margin:54px 0 22px;border-top:1px solid #e1e5e5;padding-top:36px}
.post-faqs > h2{font-size:24px;margin:0 0 18px;color:#0c1518;letter-spacing:-.005em;font-weight:700}
.post-faq-item{border-bottom:1px solid #e9ecec;padding:14px 0}
.post-faq-item summary{list-style:none;cursor:pointer;outline:none}
.post-faq-item summary::-webkit-details-marker{display:none}
.post-faq-item summary h3{
  display:flex;align-items:flex-start;gap:10px;
  font-size:17px;line-height:1.45;color:#13212a;margin:0;font-weight:600
}
.post-faq-item summary h3::before{
  content:"+";flex:0 0 auto;width:22px;color:#147b6e;font-size:21px;line-height:1;font-weight:300
}
.post-faq-item[open] summary h3::before{content:"−"}
.post-faq-item p{margin:10px 0 4px 32px;color:#34403c;font-size:15px;line-height:1.7}
@media (max-width:640px){
  .post-takeaways{padding:18px 18px 16px}
  .post-faqs{margin:40px 0 16px;padding-top:28px}
  .post-faq-item p{margin-left:20px}
}

/* ============================================================
   "RELATED INSIGHTS" BLOCK — auto-injected on every AI blog post
   3 most-related previous articles, scored by tag + keyword overlap.
   Built by worker/weekly-blog-worker.js → buildRelatedHtml().
   ============================================================ */
.post-related{
  margin:56px 0 22px;border-top:1px solid #e1e5e5;padding-top:38px
}
.post-related > h2{
  font-size:24px;margin:0 0 22px;color:#0c1518;letter-spacing:-.005em;font-weight:700
}
.post-related-grid{
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px
}
.post-related-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid #e9ecec;
  border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
.post-related-card:hover{
  transform:translateY(-3px);box-shadow:0 12px 28px -18px rgba(0,0,0,.18);
  border-color:#cdd3d3
}
.post-related-img{
  width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;
  background-color:#f4f6f6
}
.post-related-body{
  padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1
}
.post-related-tag{
  display:inline-block;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#8a5a0b;padding:3px 9px;
  border:1px solid rgba(180,120,30,.3);border-radius:99px;align-self:flex-start
}
.post-related-card h3{
  font-size:16px;line-height:1.4;color:#13212a;margin:2px 0 0;font-weight:600
}
.post-related-card p{
  font-size:13.5px;line-height:1.55;color:#46524e;margin:0;flex:1
}
.post-related-meta{
  font-family:var(--sans);font-size:11.5px;color:#86908b;text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;margin-top:6px
}
@media (max-width:900px){
  .post-related-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:560px){
  .post-related{margin:40px 0 16px;padding-top:28px}
  .post-related > h2{font-size:21px;margin-bottom:18px}
  .post-related-grid{grid-template-columns:1fr;gap:16px}
}