:root{--navy:#0f2537;--navy2:#092033;--orange:#ff6a00;--ink:#112b3f;--muted:#667783;--line:#e4e9ed;--soft:#f5f7f8;--white:#fff;--ease:cubic-bezier(.2,.8,.2,1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}.wrap{width:min(1180px,calc(100% - 64px));margin:auto}.site-header{height:82px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}.nav{display:flex;align-items:center;justify-content:space-between}.brand img{width:230px;display:block}.nav nav{display:flex;gap:34px;align-items:center}.nav a{text-decoration:none;color:var(--ink);font-size:14px;font-weight:750;transition:color .2s ease}.nav nav>a:not(.btn):hover{color:var(--orange)}.btn{display:inline-flex!important;align-items:center;justify-content:center;background:var(--orange);color:#071b29!important;padding:16px 23px;border:1px solid var(--orange);border-radius:3px;font-weight:800;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s ease,color .25s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,106,0,.18)}.btn.small{padding:12px 18px}.btn.secondary{background:transparent;color:#fff!important}.btn.secondary:hover{background:var(--orange);color:#071b29!important}.menu{display:none;width:42px;height:42px;border:0;background:transparent;padding:8px}.menu span{display:block;height:2px;background:var(--navy);margin:6px 0;transition:.25s}.hero{position:relative;overflow:hidden;background:linear-gradient(105deg,#0d2639 0%,#0a2234 57%,#102f48 100%);color:white;min-height:500px;display:flex;align-items:center}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,25,39,.2),transparent 58%);pointer-events:none}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,720px) 1fr;padding-top:82px;padding-bottom:88px}.hero-art{position:absolute;z-index:1;right:-7%;top:-35%;width:58%;height:165%;transform:rotate(45deg);opacity:.95;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:64px 64px}.hero-art:before,.hero-art:after{content:"";position:absolute;inset:auto;background:rgba(120,159,186,.18);border:1px solid rgba(255,255,255,.07)}.hero-art:before{width:180px;height:520px;left:25%;top:6%}.hero-art:after{width:230px;height:650px;left:58%;top:3%}.hero-art i{position:absolute;display:block;background:var(--orange)}.hero-art i:nth-child(1){width:12px;height:370px;left:49%;top:16%}.hero-art i:nth-child(2){width:7px;height:180px;left:76%;top:46%;opacity:.75}.hero-art i:nth-child(3){width:6px;height:6px;box-shadow:22px 0 var(--orange),44px 0 var(--orange),66px 0 var(--orange),88px 0 var(--orange),0 22px var(--orange),22px 22px var(--orange),44px 22px var(--orange),66px 22px var(--orange),88px 22px var(--orange),0 44px var(--orange),22px 44px var(--orange),44px 44px var(--orange),66px 44px var(--orange),88px 44px var(--orange);left:74%;top:21%;transform:rotate(-45deg);opacity:.85}.hero-art i:nth-child(4){display:none}.eyebrow,.kicker{font-size:11px;letter-spacing:.27em;font-weight:900}.eyebrow{color:#fff;margin:0}.eyebrow span,.orange{color:var(--orange)}h1{font-size:66px;line-height:1.02;letter-spacing:-.045em;margin:28px 0 25px;max-width:760px}h1 em{font-style:normal;color:#e5ebef}.lead{font-size:18px;line-height:1.6;color:#c7d2da;max-width:650px;margin:0}.actions{display:flex;gap:16px;margin-top:34px}.intro,.about,.quote{padding:92px 0}.kicker{color:#53636f;margin:0 0 20px}.split{display:grid;grid-template-columns:1.05fr .95fr;gap:100px;align-items:start}.split h2,.dark h2,.quote h2{font-size:46px;line-height:1.08;letter-spacing:-.035em;margin:0}.split>p,.about-grid>div:last-child{font-size:16px;line-height:1.72;color:var(--muted);margin:4px 0 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.grid article{display:grid;grid-template-columns:58px 1fr;gap:18px;align-items:center;padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:150px;transition:transform .3s var(--ease),background .3s ease,box-shadow .3s ease}.grid article:hover{background:#fbfcfc;transform:translateY(-4px);box-shadow:0 14px 35px rgba(15,37,55,.06);z-index:2}.icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#eef1f2);color:var(--orange);font-size:27px;font-weight:900;box-shadow:0 7px 16px rgba(15,37,55,.08)}.grid h3{font-size:17px;margin:0 0 7px}.grid p{font-size:13px;line-height:1.52;color:var(--muted);margin:0}.dark{position:relative;overflow:hidden;background:linear-gradient(110deg,var(--navy2),#0c2c43);color:white;padding:92px 0}.dark .wrap{position:relative;z-index:2}.geo{position:absolute;right:-12%;top:-60%;width:55%;height:220%;transform:rotate(45deg);background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:52px 52px}.geo:after{content:"";position:absolute;width:7px;height:650px;background:var(--orange);left:50%;top:12%;opacity:.9}.dark h2{font-size:50px;max-width:650px}.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:58px}.pillars>div{padding:0 44px;border-left:1px solid rgba(255,255,255,.32)}.pillars>div:first-child{padding-left:0;border-left:0}.pillar-icon{color:var(--orange);font-size:28px;font-weight:900;margin-bottom:12px}.pillars b{color:var(--orange);font-size:11px}.pillars h3{font-size:19px;margin:10px 0 8px}.pillars p{color:#c4cfd6;line-height:1.58;font-size:13.5px;margin:0}.about-grid p{margin-top:0}.about{padding:82px 0}.quote{background:linear-gradient(110deg,#f5f7f8,#eef2f4);padding:74px 0}.quote-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:90px;align-items:center}.quote h2{margin-bottom:16px}.quote p{color:var(--muted);line-height:1.65;max-width:600px}.quote .btn{margin-top:10px}.contact{border-left:1px solid #cfd8de;padding-left:52px}.contact p{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;margin:0 0 23px;color:var(--ink)}.contact p:last-child{margin-bottom:0}.contact-icon{color:var(--orange);font-size:22px;font-weight:900;text-align:center}.contact small{display:block;font-size:9px;letter-spacing:.2em;font-weight:900;color:#84929b;margin-bottom:5px}.contact a{color:var(--ink);text-decoration:none}.contact a:hover{color:var(--orange)}footer{background:#081d2c;color:#aebbc4;padding:35px 0}footer .wrap{display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:38px}footer img{width:190px}footer p{font-size:11px;letter-spacing:.17em;text-transform:uppercase;margin:0}footer small{font-size:10.5px}.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.visible{opacity:1;transform:none}.grid .reveal:nth-child(2),.pillars .reveal:nth-child(2){transition-delay:.08s}.grid .reveal:nth-child(3),.pillars .reveal:nth-child(3){transition-delay:.16s}.grid .reveal:nth-child(4){transition-delay:.05s}.grid .reveal:nth-child(5){transition-delay:.10s}.grid .reveal:nth-child(6){transition-delay:.15s}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn,.grid article{transition:none}}@media(max-width:900px){.wrap{width:min(100% - 40px,1180px)}.site-header{height:72px}.brand img{width:188px}.menu{display:block}.nav nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;padding:24px 20px 28px;flex-direction:column;align-items:stretch;gap:8px;border-bottom:1px solid var(--line);box-shadow:0 15px 30px rgba(15,37,55,.08)}.nav nav.open{display:flex}.nav nav>a{padding:12px 8px}.nav nav .btn{margin-top:8px}.menu.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}.menu.active span:nth-child(2){opacity:0}.menu.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.hero{min-height:auto}.hero-grid{grid-template-columns:1fr;padding-top:76px;padding-bottom:82px}.hero-art{right:-42%;width:95%;opacity:.55}.hero-art:before,.hero-art:after{opacity:.45}h1{font-size:clamp(43px,10vw,58px)}.lead{font-size:16px;max-width:560px}.split,.quote-grid{grid-template-columns:1fr;gap:30px}.split h2,.dark h2,.quote h2{font-size:38px}.grid{grid-template-columns:repeat(2,1fr)}.pillars{grid-template-columns:1fr;gap:32px}.pillars>div,.pillars>div:first-child{border-left:0;border-top:1px solid rgba(255,255,255,.25);padding:26px 0 0}.pillars>div:first-child{border-top:0;padding-top:0}.intro,.dark{padding:76px 0}.about{padding:70px 0}.quote{padding:65px 0}.contact{border-left:0;border-top:1px solid #cfd8de;padding:30px 0 0}footer .wrap{grid-template-columns:190px 1fr;gap:18px}footer small{grid-column:1/-1}}@media(max-width:620px){.wrap{width:calc(100% - 32px)}.hero-grid{padding-top:62px;padding-bottom:68px}.eyebrow{font-size:9px;letter-spacing:.22em}h1{font-size:43px;margin:22px 0 20px}.lead{font-size:15.5px}.actions{flex-direction:column;align-items:stretch;max-width:330px}.actions .btn{width:100%}.intro,.dark{padding:64px 0}.about,.quote{padding:58px 0}.split h2,.dark h2,.quote h2{font-size:34px}.grid{grid-template-columns:1fr;margin-top:40px}.grid article{min-height:132px;padding:22px 18px;grid-template-columns:50px 1fr}.icon{width:48px;height:48px;font-size:24px}.quote-grid{gap:38px}footer{padding:30px 0}footer .wrap{grid-template-columns:1fr;gap:15px}footer img{width:180px}footer p{line-height:1.6}.hero-art{right:-70%;width:135%}.geo{right:-60%;width:110%}}

/* Consistent icon system matching approved mockup */
.icon svg{width:31px;height:31px;display:block;fill:currentColor}.pillar-icon svg{width:34px;height:34px;display:block}.contact-icon svg{width:23px;height:23px;display:block;fill:currentColor;margin:auto}

/* Final visual alignment with approved BRAMTEC mockup */
.hero-dots{position:absolute;z-index:2;right:6.2%;top:16%;width:126px;height:126px;opacity:.9;pointer-events:none;background-image:radial-gradient(circle,var(--orange) 2.2px,transparent 2.6px);background-size:22px 22px}
/* Keep the Why-BRAMTEC grid subtle and confine the orange accent to the upper-right artwork. */
.dark .geo{right:-10%;top:-75%;width:51%;height:215%;opacity:.7;background-size:52px 52px}
.dark .geo:after{display:none}
.why-accent{position:absolute;z-index:1;right:3.5%;top:-118px;width:8px;height:330px;background:linear-gradient(180deg,#ff6a00 0%,#ff6a00 70%,rgba(255,106,0,.18) 100%);transform:rotate(-45deg);transform-origin:center;pointer-events:none}
.contact-icon{width:32px;height:32px;display:grid;place-items:center;color:var(--orange);font-size:0}
.contact-icon svg{width:25px;height:25px;display:block;fill:currentColor;margin:auto}
.contact p{grid-template-columns:34px 1fr;gap:18px}
@media(max-width:900px){.hero-dots{right:4%;top:13%;opacity:.55}.why-accent{right:-4%;top:-90px;height:270px;opacity:.65}}
@media(max-width:620px){.hero-dots{width:88px;height:88px;background-size:18px 18px;right:-12px;top:13%;opacity:.42}.why-accent{right:-18%;top:-60px;height:220px;opacity:.45}}


/* === FINAL DESIGN-MATCH OVERRIDES: approved BRAMTEC mockup === */
/* Hero artwork: one orange diagonal + one dot matrix only. */
.hero-art{
  right:0; top:0; width:58%; height:100%; transform:none; opacity:1;
  background-image:
    linear-gradient(45deg, transparent 49.65%, rgba(151,181,201,.13) 49.8%, rgba(151,181,201,.13) 50.2%, transparent 50.35%),
    linear-gradient(-45deg, transparent 49.65%, rgba(151,181,201,.10) 49.8%, rgba(151,181,201,.10) 50.2%, transparent 50.35%);
  background-size:86px 86px;
  overflow:hidden;
}
.hero-art:before{
  content:""; position:absolute; width:235px; height:430px; left:40%; top:-82px;
  background:rgba(91,139,171,.22); border:1px solid rgba(187,211,226,.08);
  transform:rotate(45deg);
}
.hero-art:after{
  content:""; position:absolute; width:245px; height:470px; left:72%; top:205px;
  background:rgba(91,139,171,.18); border:1px solid rgba(187,211,226,.07);
  transform:rotate(45deg);
}
.hero-art i:nth-child(1){
  display:block; position:absolute; width:10px; height:360px; left:57%; top:38px;
  background:var(--orange); transform:rotate(45deg); transform-origin:center;
}
.hero-art i:nth-child(n+2){display:none!important}
.hero-dots{
  right:5.8%; top:17.5%; width:142px; height:142px; opacity:.92;
  background-image:radial-gradient(circle,var(--orange) 2.5px,transparent 2.9px);
  background-size:25px 25px;
}

/* Why BRAMTEC: same grid + blue geometric panes + one orange accent close to item 03. */
.dark{isolation:isolate}
.geo{
  right:0; top:0; width:57%; height:100%; transform:none; opacity:1;
  background-image:
    linear-gradient(45deg, transparent 49.65%, rgba(151,181,201,.10) 49.8%, rgba(151,181,201,.10) 50.2%, transparent 50.35%),
    linear-gradient(-45deg, transparent 49.65%, rgba(151,181,201,.08) 49.8%, rgba(151,181,201,.08) 50.2%, transparent 50.35%);
  background-size:72px 72px;
}
.geo:before{
  content:""; position:absolute; width:205px; height:390px; right:3%; top:-165px;
  background:rgba(91,139,171,.21); border:1px solid rgba(187,211,226,.06);
  transform:rotate(45deg);
}
.geo:after{
  content:""; position:absolute; width:8px; height:315px; right:14%; left:auto; top:-112px;
  background:var(--orange); opacity:.95; transform:rotate(-45deg); transform-origin:center;
}
.why-accent{
  right:-1%; top:-40px; width:205px; height:370px; background:rgba(91,139,171,.13);
  transform:rotate(45deg); opacity:1; border:1px solid rgba(187,211,226,.05);
}

/* Keep separators exactly between the three benefit columns. */
.pillars>div{border-left:1px solid rgba(199,216,226,.46)}
.pillars>div:first-child{border-left:0}

@media(max-width:900px){
 .hero-art{right:-20%;width:85%;opacity:.7}
 .hero-dots{right:3%;top:14%;opacity:.55}
 .geo{right:-18%;width:80%;opacity:.7}
 .why-accent{right:-18%;opacity:.55}
}
@media(max-width:620px){
 .hero-art{right:-58%;width:140%;opacity:.42}
 .hero-art:before,.hero-art:after{opacity:.55}
 .hero-art i:nth-child(1){left:48%;height:260px}
 .hero-dots{right:-18px;top:15%;width:90px;height:90px;background-size:18px 18px;opacity:.4}
 .geo{right:-65%;width:145%;opacity:.35}
 .why-accent{display:none}
}

/* === PIXEL-TUNED GEOMETRIC ARTWORK — matched to approved mockup === */
/* HERO: several slim translucent diagonal strips, one orange slash, one airy dot matrix. */
.hero-art{
  right:0;top:0;width:61%;height:100%;transform:none;opacity:1;overflow:hidden;
  background-image:
    linear-gradient(45deg,transparent 49.72%,rgba(148,181,202,.10) 49.84%,rgba(148,181,202,.10) 50.16%,transparent 50.28%),
    linear-gradient(-45deg,transparent 49.72%,rgba(148,181,202,.08) 49.84%,rgba(148,181,202,.08) 50.16%,transparent 50.28%);
  background-size:82px 82px;
}
/* Use the pseudo-elements as narrow layered strips instead of broad slabs. */
.hero-art:before{
  content:"";position:absolute;left:43%;top:-145px;width:82px;height:610px;
  background:rgba(113,157,187,.18);border:1px solid rgba(196,217,230,.06);
  transform:rotate(45deg);box-shadow:
    108px 0 0 rgba(113,157,187,.11),
    216px 0 0 rgba(113,157,187,.16),
    324px 0 0 rgba(113,157,187,.09);
}
.hero-art:after{
  content:"";position:absolute;left:57%;top:-90px;width:1px;height:720px;
  background:rgba(191,211,224,.24);transform:rotate(45deg);
  box-shadow:74px 0 0 rgba(191,211,224,.16),148px 0 0 rgba(191,211,224,.13),222px 0 0 rgba(191,211,224,.10);
}
.hero-art i:nth-child(1){display:block;position:absolute;left:54%;top:64px;width:8px;height:330px;background:var(--orange);transform:rotate(45deg);transform-origin:center;z-index:3}
.hero-dots{right:5.7%;top:18%;width:170px;height:170px;opacity:.92;background-image:radial-gradient(circle,var(--orange) 2.35px,transparent 2.75px);background-size:29px 29px}

/* WHY BRAMTEC: multiple slim panes concentrated at upper-right, with accent close to item 03. */
.geo{right:0;top:0;width:56%;height:100%;transform:none;opacity:1;overflow:hidden;background-image:
  linear-gradient(45deg,transparent 49.72%,rgba(148,181,202,.09) 49.84%,rgba(148,181,202,.09) 50.16%,transparent 50.28%),
  linear-gradient(-45deg,transparent 49.72%,rgba(148,181,202,.07) 49.84%,rgba(148,181,202,.07) 50.16%,transparent 50.28%);background-size:70px 70px}
.geo:before{content:"";position:absolute;right:4%;top:-235px;width:76px;height:590px;background:rgba(113,157,187,.17);border:1px solid rgba(196,217,230,.05);transform:rotate(45deg);box-shadow:-104px 0 0 rgba(113,157,187,.10),104px 0 0 rgba(113,157,187,.13),208px 0 0 rgba(113,157,187,.08)}
.geo:after{content:"";position:absolute;right:13.5%;left:auto;top:-112px;width:7px;height:315px;background:var(--orange);opacity:.96;transform:rotate(-45deg);transform-origin:center;z-index:3}
.why-accent{position:absolute;right:2%;top:-150px;width:1px;height:610px;background:rgba(191,211,224,.18);transform:rotate(45deg);opacity:1;border:0;box-shadow:-72px 0 0 rgba(191,211,224,.12),72px 0 0 rgba(191,211,224,.14),144px 0 0 rgba(191,211,224,.09);pointer-events:none}

@media(max-width:900px){
 .hero-art{right:-16%;width:84%;opacity:.72}.hero-art:before{left:42%}.hero-dots{right:3%;top:16%;width:140px;height:140px;background-size:26px 26px;opacity:.65}
 .geo{right:-12%;width:76%;opacity:.72}.geo:after{right:18%}.why-accent{right:-5%;opacity:.65}
}
@media(max-width:620px){
 .hero-art{right:-55%;width:138%;opacity:.42}.hero-art:before{width:64px;box-shadow:86px 0 0 rgba(113,157,187,.11),172px 0 0 rgba(113,157,187,.14)}.hero-art i:nth-child(1){left:50%;height:245px}.hero-dots{right:-12px;top:15%;width:102px;height:102px;background-size:22px 22px;opacity:.42}
 .geo{right:-58%;width:140%;opacity:.38}.geo:before{width:62px;box-shadow:-84px 0 0 rgba(113,157,187,.10),84px 0 0 rgba(113,157,187,.12)}.geo:after{right:26%;height:230px}.why-accent{display:none}
}

/* === FINAL SIMPLIFICATION: GRID-ONLY DARK SECTIONS ===
   Keep the existing subtle grid pattern; remove all orange lines, dots and translucent strips. */
.hero-art::before,
.hero-art::after,
.hero-art i,
.hero-dots,
.geo::before,
.geo::after,
.why-accent {
  display:none !important;
  content:none !important;
}

/* Preserve only the grid artwork on the hero. */
.hero-art{
  right:0;
  top:0;
  width:61%;
  height:100%;
  transform:none;
  opacity:1;
  overflow:hidden;
  background-image:
    linear-gradient(45deg,transparent 49.72%,rgba(148,181,202,.10) 49.84%,rgba(148,181,202,.10) 50.16%,transparent 50.28%),
    linear-gradient(-45deg,transparent 49.72%,rgba(148,181,202,.08) 49.84%,rgba(148,181,202,.08) 50.16%,transparent 50.28%);
  background-size:82px 82px;
}

/* Preserve only the grid artwork on Why BRAMTEC. */
.geo{
  right:0;
  top:0;
  width:56%;
  height:100%;
  transform:none;
  opacity:1;
  overflow:hidden;
  background-image:
    linear-gradient(45deg,transparent 49.72%,rgba(148,181,202,.09) 49.84%,rgba(148,181,202,.09) 50.16%,transparent 50.28%),
    linear-gradient(-45deg,transparent 49.72%,rgba(148,181,202,.07) 49.84%,rgba(148,181,202,.07) 50.16%,transparent 50.28%);
  background-size:70px 70px;
}

@media(max-width:900px){
  .hero-art{right:-16%;width:84%;opacity:.58}
  .geo{right:-12%;width:76%;opacity:.58}
}
@media(max-width:620px){
  .hero-art{right:-55%;width:138%;opacity:.30}
  .geo{right:-58%;width:140%;opacity:.28}
}

/* === MOBILE FIX: WHY BRAMTEC PILLAR SEPARATORS === */
@media (max-width: 900px) {
  .pillars > div,
  .pillars > div:first-child {
    border-left: 0 !important;
  }

  .pillars > div {
    border-top: 1px solid rgba(255,255,255,.25);
    padding: 26px 0 0;
  }

  .pillars > div:first-child {
    border-top: 0;
    padding-top: 0;
  }
}