/* ============================================================
   HOUNSLOW IT · LOCAL SERVICE MAP
   Bright navigation-chart variant of the reusable Instrument Cyber
   layout. Live service signals sit behind a dynamic network whose
   routes form, break and reconnect as the nodes move.
   ============================================================ */
:root{
  --sans:"Manrope",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --type-meta:.9375rem;
  --type-body:1.25rem;
  --type-title:1.375rem;
  --type-heading:2rem;
  --copy-leading:1.65;
  --copy-ink:#314F5C;
  --meta-ink:#52707A;
  --panel-padding:1.5rem;
  color-scheme:light;
  font-size:clamp(1rem,calc(.5rem + .625vw),2rem);
}
body[data-v="bridge"]{
  --bg:#F5FAFB; --pn:#FFFFFF; --pn2:#EAF5F4; --ln:#D6E7E9; --ln2:#AFC9CD;
  --in:#0B2740; --i2:#355769; --i3:#4E6E78;
  --ac:#007F80; --ac-hi:#009B97; --ac-on:#F7FFFF; --ac-d:#AFE6E1;
  --hot:#00A7A7; --hot2:#007879; --xl:#A9DFDC;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--in); font-family:var(--sans); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .45s ease}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:800; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--ac); outline-offset:0.1875rem; border-radius:2px}
::selection{background:var(--ac-d); color:var(--in)}

/* ===================== AMBIENT SHELL ===================== */
.amb{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.amb[hidden]{display:none}
.amb svg.net{position:absolute; inset:0; width:100%; height:100%; opacity:.82}
.net .mesh-keyword{pointer-events:none}
.net .mesh-keyword line{stroke:#56C7DF; stroke-width:1; opacity:.72}
.net .mesh-keyword rect{fill:rgba(245,250,251,.78); stroke:#56C7DF; stroke-width:1}
.net .mesh-keyword text{fill:#0B6285; font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:1.2px}
.scan{position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(9,37,54,.045) 0 1px, transparent 1px 0.1875rem); opacity:.5}
.vig{position:absolute; inset:0}
body[data-v="bridge"] .vig{background:
  radial-gradient(100% 72% at 30% 34%, rgba(244,248,250,.96) 0%, rgba(244,248,250,.82) 38%, rgba(244,248,250,.28) 74%, transparent 100%),
  linear-gradient(180deg, rgba(244,248,250,.92), transparent 20%, transparent 68%, rgba(244,248,250,.86));}
/* ===================== A · TELEMETRY WALL ===================== */
.wall{position:absolute; inset:0; padding:6.125rem 0 0 1.75rem; font-family:var(--mono); color:var(--hot);
  mask-image:linear-gradient(to right,#000 0%,#000 46%,rgba(0,0,0,.5) 70%,transparent 86%);
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 46%,rgba(0,0,0,.5) 70%,transparent 86%);
  opacity:.9}
.wall-hd{display:flex; justify-content:space-between; gap:1.875rem; max-width:73.75rem;
  font-size:0.8125rem; letter-spacing:.14em; padding-bottom:0.5625rem; border-bottom:1px solid var(--ln2)}
.wall-hd b{font-weight:500}
.wall-cols{display:grid; grid-template-columns:1.55fr 1.35fr 1.25fr .85fr; gap:0; max-width:73.75rem;
  margin-top:0.875rem; border:1px solid var(--ln2); border-bottom:0; height:calc(100% - 8.25rem)}
.wcol{padding:0.5625rem 0.75rem; border-right:1px solid var(--ln2); overflow:hidden; font-size:0.625rem; line-height:1.52; letter-spacing:.02em; white-space:pre}
.wcol:last-child{border-right:0}
.wcol div{opacity:.74}
.wcol div.hi{opacity:1; color:var(--hot2)}
.wcol div.dim{opacity:.42}
.wcol div.mark{background:var(--hot2); color:#fff; opacity:1}

/* ===================== PAGE ===================== */
.wrap{position:relative; z-index:1; max-width:70rem; margin:0 auto; padding-inline:1.5rem; padding-block:0}
.bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1rem; border-bottom:1px solid var(--ln); flex-wrap:wrap}
.mark{display:flex; align-items:center; gap:0.6875rem; font-size:0.90625rem; font-weight:800; line-height:1.1; letter-spacing:.015em}
.mark img{display:block; width:4.4rem; height:3rem; flex:none; object-fit:contain; filter:drop-shadow(0 .25rem .75rem rgba(11,39,64,.12))}
.mark span{display:grid; gap:.25rem}
.mark small{font:500 .5625rem/1 var(--mono); color:var(--meta-ink); letter-spacing:.1em; text-transform:uppercase}
.nav{display:flex; gap:0.1875rem; flex-wrap:wrap}
.nav a{font-size:.875rem; font-weight:600; color:var(--i3); padding:0.375rem 0.6875rem; border-radius:0.1875rem; transition:color .13s ease, background .13s ease}
.nav a:hover{color:var(--in); background:var(--pn2)}
.nav a.on{color:var(--ac-on); background:var(--ac)}
.hero{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(19rem,.88fr); gap:clamp(1.25rem,3vw,3rem); align-items:center; min-height:34rem; padding-block:2.5rem}
.hero-copy{position:relative; z-index:2; min-width:0}
.eyebrow{font-family:var(--mono); font-size:var(--type-meta); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--meta-ink); margin-bottom:1.375rem; text-shadow:0 1px 1rem var(--bg),0 0 .5rem var(--bg)}
.eyebrow b{color:var(--hot); font-weight:500}
.hero h1{font-size:clamp(2.125rem,5.4vw,3.375rem); line-height:1.06; letter-spacing:-.034em; max-width:20ch; text-shadow:0 2px 1.625rem var(--bg),0 0 4rem var(--bg),0 0 1.125rem var(--bg)}
.hero p{font-size:var(--type-body); color:var(--copy-ink); line-height:1.66; margin-top:1.25rem; max-width:58ch; text-shadow:0 1px 1.125rem var(--bg),0 0 0.625rem var(--bg),0 0 0.25rem var(--bg)}
.cta{display:flex; gap:0.75rem; margin-top:1.75rem; flex-wrap:wrap}
.hero-mark{position:relative; width:100%; max-width:28rem; margin:0 auto; align-self:center}
.hero-mark::before{content:""; position:absolute; inset:7% 5% 13% 8%; z-index:-1; border:1px solid rgba(0,167,167,.24); border-radius:50%; background:radial-gradient(circle,rgba(65,214,203,.08),rgba(245,250,251,0) 68%); transform:rotate(-7deg)}
.hero-mark::after{content:""; position:absolute; top:6%; right:2%; width:.5rem; height:.5rem; border-radius:50%; background:var(--hot); box-shadow:0 0 0 .35rem rgba(0,167,167,.12),0 0 1.25rem rgba(0,167,167,.55)}
.hero-mark-field{position:relative; display:grid; place-items:center; aspect-ratio:1; border-radius:50%; background:rgba(245,250,251,.14); overflow:hidden}
.hero-mark img{position:relative; z-index:1; display:block; width:76%; max-width:none; height:auto; filter:drop-shadow(0 1rem 1.3rem rgba(11,39,64,.14))}
.hero-mark figcaption{position:relative; max-width:30ch; margin:-.5rem auto 0; padding-top:.75rem; border-top:1px solid var(--ln2); color:var(--i2); font:500 .6875rem/1.55 var(--mono); letter-spacing:.045em; text-align:center; text-transform:uppercase}
.hero-note{display:flex; align-items:center; gap:.625rem; font-family:var(--mono); font-size:.75rem !important; letter-spacing:.035em; color:var(--meta-ink) !important}
.hero-note span{width:.55rem; height:.55rem; border-radius:50%; background:var(--hot); box-shadow:0 0 0 .25rem rgba(0,167,167,.14)}
.btn{display:inline-flex; align-items:center; gap:0.5625rem; min-height:2.625rem; padding:0 1.125rem; font-family:var(--sans); font-size:.9375rem; font-weight:700; letter-spacing:.02em; border-radius:0.1875rem; cursor:pointer; border:1px solid var(--ac); background:var(--ac); color:var(--ac-on); transition:.13s ease}
.btn:hover{background:var(--ac-hi); border-color:var(--ac-hi)}
.btn.o{background:transparent; color:var(--in); border-color:var(--ln2)}
.btn.o:hover{border-color:var(--ac); color:var(--ac)}

.proof-strip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--ln2); border-radius:.25rem; background:rgba(255,255,255,.82)}
.proof-strip div{display:flex; flex-direction:column; gap:.15rem; min-width:0; padding:1.125rem 1.25rem; border-right:1px solid var(--ln2)}
.proof-strip div:last-child{border-right:0}
.proof-strip strong{font-family:var(--mono); font-size:1.5rem; line-height:1.2; color:var(--ac)}
.proof-strip span{font-size:.8125rem; line-height:1.45; color:var(--meta-ink)}

.lbl{display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem}
.lbl span{font-family:var(--mono); font-size:var(--type-meta); letter-spacing:.08em; text-transform:uppercase; color:var(--meta-ink); white-space:nowrap}
.lbl b{flex:1; height:1px; background:var(--ln2)}
.lbl em{font-style:normal; font-family:var(--mono); font-size:var(--type-meta); color:var(--meta-ink)}

.map{position:relative; border:1px solid var(--ln2); border-radius:0.3125rem; aspect-ratio:1072 / 448; overflow:hidden; background:
  linear-gradient(var(--ln) 1px, transparent 1px) 0 0/100% 3rem,
  linear-gradient(90deg, var(--ln) 1px, transparent 1px) 0 0/3rem 100%,
  linear-gradient(180deg, var(--pn2), var(--pn))}
.map > svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.map .rl,.map .tk,.map .bus,.map .stub{stroke:var(--ln2); stroke-width:.0625rem; fill:none; transition:stroke .15s ease}
.map .sq{fill:var(--i3); transition:fill .15s ease}
.map .so{fill:var(--pn); stroke:var(--i3); stroke-width:.075rem; transition:stroke .15s ease}
.map .xl{stroke:var(--xl); stroke-width:.0625rem; stroke-dasharray:2 4; fill:none}
.map .root-route{opacity:0}
.map [data-b].hot .root-route{opacity:1}
.map .rootsq{fill:var(--hot)}
.map-branches,.map-branch,.map-links{display:contents}
.map a,.map .root{position:absolute; z-index:3}
.map a{left:var(--x); top:var(--y); max-width:15.5%}
.map a{font-size:.875rem; font-weight:700; color:var(--in); padding-bottom:0.25rem; transition:color .13s ease}
.map a small{display:block; font-family:var(--mono); font-size:.75rem; font-weight:400; letter-spacing:.05em; color:var(--i3); margin-top:0.1875rem}
.map a.sec{font-size:.75rem; max-width:18%; font-weight:800; letter-spacing:.15em; text-transform:uppercase}
.map a:hover{color:var(--ac)}
.map .root{left:3.17164%; top:45.98214%; max-width:23%}
.map .root b{display:block; font-size:1.0625rem; font-weight:800; letter-spacing:-.018em}
.map .root span{display:block; font-family:var(--mono); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--hot); margin-top:0.3125rem}
.map[data-hot] [data-b]{opacity:.24}
.map[data-hot] [data-b].hot{opacity:1}
.map [data-b]{transition:opacity .22s ease}
.map [data-b].hot .rl,.map [data-b].hot .tk{stroke:var(--ac)}
.map [data-b].hot .sq{fill:var(--ac)}
.map [data-b].hot .so{stroke:var(--ac)}
.map a.hot{color:var(--ac)}
.map .xl.hot{stroke:var(--hot); opacity:1}

/* Shared foreground typography and reading surfaces. */
.card h3,.research-row h3{font-family:var(--sans); font-size:var(--type-title); font-weight:700; line-height:1.35}
.card p,.reading-panel p,.aside p,.research-row p{font-family:var(--serif); font-size:var(--type-body); line-height:var(--copy-leading); color:var(--copy-ink)}
.build{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.section-heading{display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.7fr); gap:2rem; align-items:end; margin-bottom:1.5rem}
.section-heading h2{font-size:var(--type-heading); line-height:1.2; letter-spacing:-.025em}
.section-heading p{font-family:var(--serif); font-size:1.125rem; line-height:1.65; color:var(--copy-ink)}
.card{background:var(--pn); border:1px solid var(--ln2); border-radius:.25rem; padding:var(--panel-padding); display:flex; flex-direction:column; gap:1rem; scroll-margin-top:2rem; transition:border-color .13s ease}
.card:hover{border-color:var(--ac-d)}
.card .tagline{font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--in); line-height:1.6}
.card-kicker,.outcome > span{font-family:var(--mono); font-size:.75rem; line-height:1.5; letter-spacing:.09em; text-transform:uppercase; color:var(--hot2)}
.service-list{display:grid; gap:.55rem; margin-top:auto; padding-top:.35rem; border-top:1px solid var(--ln)}
.service-list li{position:relative; padding-left:1rem; font-size:.875rem; color:var(--meta-ink)}
.service-list li::before{content:""; position:absolute; left:0; top:.72em; width:.375rem; height:1px; background:var(--hot)}
.card .project-links{margin-top:auto; padding-top:.5rem; display:flex; gap:.5rem 1rem; flex-wrap:wrap}
.text-link{color:var(--ac); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px}
.text-link:hover{color:var(--ac-hi)}
.project-links a{font-size:var(--type-meta); min-height:2.75rem; display:inline-flex; align-items:center}
.art{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1.5rem; align-items:start}
.reading-panel,.research-list{background:rgba(255,255,255,.86); border:1px solid var(--ln2); border-radius:.25rem}
.reading-panel,.aside{padding:var(--panel-padding)}
.reading-panel h2,.section-title{font-family:var(--sans); font-size:var(--type-heading); font-weight:700; line-height:1.25; letter-spacing:-.025em}
.reading-panel h3,.aside h3{font-size:var(--type-title); line-height:1.35; font-weight:700}
.reading-panel p,.aside p{margin-top:1rem}
.reading-panel h3{margin-top:1.75rem}
.aside{background:var(--pn); border:1px solid var(--ln2); border-radius:.25rem}
.aside ul{margin-top:1rem; display:grid; gap:.75rem; color:var(--copy-ink); font-size:1rem}
.section-title{margin-bottom:1.5rem}
.outcome-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--ln2); border-radius:.25rem; overflow:hidden; background:rgba(255,255,255,.84)}
.outcome{padding:var(--panel-padding); min-width:0; scroll-margin-top:2rem}
.outcome:nth-child(odd){border-right:1px solid var(--ln2)}
.outcome:nth-child(-n+2){border-bottom:1px solid var(--ln2)}
.outcome h3{font-size:var(--type-title); line-height:1.35; margin-top:.65rem}
.outcome p{font-family:var(--serif); font-size:var(--type-body); line-height:var(--copy-leading); color:var(--copy-ink); margin-top:.75rem}
.numbered-list{display:grid; gap:0 !important}
.numbered-list li{display:grid; grid-template-columns:2rem 1fr; gap:.75rem; align-items:start; padding:.75rem 0; border-bottom:1px solid var(--ln)}
.numbered-list li:last-child{border-bottom:0}
.numbered-list b{font:500 .75rem/1.6 var(--mono); color:var(--hot2)}
.numbered-list span{line-height:1.55}
.experience-grid{display:grid; gap:1rem}
.company-panel{background:rgba(255,255,255,.86); border:1px solid var(--ln2); border-radius:.25rem; padding:var(--panel-padding); scroll-margin-top:2rem}
.panel-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--ln)}
.panel-head span{font-size:var(--type-title); line-height:1.35; font-weight:700}
.panel-head em{font:400 .75rem/1.5 var(--mono); font-style:normal; letter-spacing:.04em; color:var(--meta-ink); text-align:right}
.company-cloud{display:flex; flex-wrap:wrap; gap:.625rem; padding-top:1rem}
.company-cloud span,.reference-list span{display:inline-flex; align-items:center; min-height:2.25rem; padding:.45rem .75rem; border:1px solid var(--ln2); border-radius:.1875rem; background:var(--pn); font-size:.875rem; font-weight:650; line-height:1.35}
.customer-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem}
.sector-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem}
.sector-grid span{display:flex; align-items:flex-end; min-height:6.25rem; padding:1rem; border:1px solid var(--ln2); border-radius:.25rem; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(234,245,244,.88)); font-weight:700; line-height:1.35}
.approach-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); border:1px solid var(--ln2); border-radius:.25rem; overflow:hidden; background:rgba(255,255,255,.9)}
.approach-copy{padding:clamp(1.5rem,4vw,3rem); background:var(--in); color:#fff}
.approach-copy h2{font-size:clamp(1.75rem,3.4vw,2.6rem); line-height:1.16; letter-spacing:-.03em; margin-top:.75rem}
.approach-copy p{font-family:var(--serif); font-size:1.125rem; line-height:1.65; color:#D6E7E9; margin:1rem 0 1.25rem}
.approach-copy .card-kicker{color:#41D6CB}.approach-copy .text-link{color:#8CEDE5}
.steps{display:grid}
.steps li{display:grid; grid-template-columns:3rem 1fr; gap:1rem; align-items:start; padding:1.25rem 1.5rem; border-bottom:1px solid var(--ln)}
.steps li:last-child{border-bottom:0}.steps b{font:500 .75rem/1.6 var(--mono); color:var(--hot2)}
.steps div{display:grid; gap:.25rem}.steps strong{font-size:1.05rem}.steps span{font-family:var(--serif); color:var(--copy-ink)}
.faq-layout{display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:2rem; align-items:start}
.faq-layout > div:first-child > p{font-family:var(--serif); font-size:1.125rem; line-height:1.65; color:var(--copy-ink)}
.faq-list{border-top:1px solid var(--ln2)}
.faq-list details{border-bottom:1px solid var(--ln2); padding:1rem 0}
.faq-list summary{cursor:pointer; font-weight:700; list-style:none; padding-right:2rem; position:relative}
.faq-list summary::after{content:"+"; position:absolute; right:.25rem; color:var(--hot2)}
.faq-list details[open] summary::after{content:"−"}
.faq-list p{font-family:var(--serif); font-size:1.075rem; line-height:1.65; color:var(--copy-ink); padding-top:.75rem}
.reference-layout{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:1.5rem; align-items:start}
.reference-list{display:flex; flex-wrap:wrap; gap:.625rem}
.additional-reference{font-family:var(--serif); font-size:1.125rem; line-height:1.65; color:var(--copy-ink); margin-top:1.25rem}
.quote-stack{display:grid; gap:.75rem}
.quote-stack blockquote{margin:0; padding:1.25rem 1.5rem; background:rgba(255,255,255,.88); border:1px solid var(--ln2); border-left:.1875rem solid var(--hot); border-radius:.25rem}
.quote-stack p{font-family:var(--serif); font-size:1.125rem; line-height:1.55; color:var(--copy-ink)}
.quote-stack cite{display:block; margin-top:.75rem; font:600 .75rem/1.5 var(--mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--meta-ink)}
.research-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:1rem 2rem; padding:var(--panel-padding); border-bottom:1px solid var(--ln2); scroll-margin-top:2rem}
.research-row:last-child{border-bottom:0}
.research-row .text-link{display:inline-flex; min-height:2.75rem; align-items:center; font-family:var(--sans); font-size:var(--type-meta); margin-top:.5rem}
.contact-panel{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:start; gap:2rem}
.contact-panel p{max-width:48ch}
.contact-card{padding:clamp(1.5rem,4vw,3rem); background:var(--in); color:#fff; border:0; border-radius:.25rem}
.contact-card h2{font-size:clamp(1.75rem,3.4vw,2.6rem); line-height:1.16; letter-spacing:-.03em; margin-top:.75rem}
.contact-card .contact-intro p{font-family:var(--serif); font-size:1.125rem; line-height:1.65; color:#D7E3E8; margin-top:1rem}
.contact-card .card-kicker{color:#7DD3FC}
.contact-direct{display:grid; gap:.25rem; margin-top:2rem; padding-top:1rem; border-top:1px solid rgba(175,201,205,.35)}
.contact-direct span{font:500 .68rem/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#8CEDE5}
.contact-direct a{font-weight:750; font-size:1.05rem}.contact-direct a:hover{text-decoration:underline}
.contact-direct small{max-width:42ch; color:#AFC9CD; line-height:1.5}
#contact-form{min-width:0; display:grid; gap:1rem; padding-left:1rem; border-left:1px solid rgba(175,201,205,.35)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.contact-form label{display:grid; gap:.4rem; min-width:0; font-size:.8125rem; font-weight:650; color:#D6E7E9}
.contact-form label span{display:flex; justify-content:space-between; gap:.5rem}.contact-form label em{font-style:normal; font-weight:400; color:#AFC9CD}
.contact-form :is(input,textarea,select){width:100%; min-width:0; min-height:2.75rem; padding:.72rem .78rem; border:1px solid #73919B; border-radius:.1875rem; background:#F9FCFC; color:var(--in); font:1rem/1.5 var(--sans)}
.contact-form textarea{resize:vertical}.contact-form :is(input,textarea,select):focus{border-color:#41D6CB; outline:2px solid rgba(65,214,203,.24)}
.form-foot{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center}
.form-foot .btn{background:#41D6CB; border-color:#41D6CB; color:var(--in)}.form-foot .btn:hover{background:#8CEDE5; border-color:#8CEDE5}
.form-foot p{font-size:.75rem; line-height:1.55; color:#AFC9CD}
.form-status{min-height:1.5em; font-size:.8rem; color:#8CEDE5}
.btn:disabled{opacity:.5; cursor:not-allowed}
.cv-summary{margin-top:1.5rem; border-top:1px solid var(--ln2)}
:target{scroll-margin-top:2rem}
.skip-link{position:absolute; top:.5rem; left:1rem; z-index:5; padding:.75rem 1rem; background:var(--ac); color:var(--ac-on); transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0)}
@media (max-width:53.75rem){.build,.outcome-grid{grid-template-columns:1fr}.outcome:nth-child(n){border-right:0;border-bottom:1px solid var(--ln2)}.outcome:last-child{border-bottom:0}}
@media (max-width:60rem){.hero{grid-template-columns:minmax(0,1.16fr) minmax(15rem,.84fr); gap:1rem; min-height:29rem}.hero-mark{max-width:21rem}.art,.reference-layout,.customer-layout,.approach-grid,.faq-layout,.section-heading{grid-template-columns:1fr}.contact-panel{grid-template-columns:1fr}.proof-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.proof-strip div:nth-child(2){border-right:0}.proof-strip div:nth-child(-n+2){border-bottom:1px solid var(--ln2)}#contact-form{padding-left:0; padding-top:1.5rem; border-left:0; border-top:1px solid rgba(175,201,205,.35)}}
@media (max-width:48rem){.form-grid{grid-template-columns:1fr}.research-row{grid-template-columns:1fr; gap:.75rem}.sector-grid{grid-template-columns:1fr}.form-foot{grid-template-columns:1fr}}

section.blk{padding-block:3.25rem 0}
.foot{margin-top:3.875rem; padding-block:1.375rem 2.875rem; border-top:1px solid var(--ln2); display:flex; justify-content:space-between; gap:1.25rem; flex-wrap:wrap; font-family:var(--mono); font-size:var(--type-meta); letter-spacing:.05em; text-transform:uppercase; color:var(--meta-ink)}
.foot a:hover{color:var(--ac)}

@media (max-width:56.25rem){ .wall-cols{grid-template-columns:1.5fr 1fr} .wcol:nth-child(n+3){display:none} }

/* The diagram becomes a branch list when the viewport cannot fit its labels. */
.nav a,.btn{min-height:2.75rem}
.nav a{display:inline-flex; align-items:center}
.reading-panel,.aside,.card,.research-row > div{min-width:0; overflow-wrap:break-word}
@media (max-width:60rem){
  .map{aspect-ratio:auto; padding:1.5rem; overflow:visible}
  .map .root{position:relative; left:auto; top:auto; display:table; max-width:100%; margin-bottom:2rem}
  .map-branches{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem}
  .map-branch{display:block; min-width:0; padding-left:1rem}
  .map-links{display:block; padding-left:1.25rem}
  .map a,.map a.sec{position:relative; left:auto; top:auto; display:table; max-width:100%; min-height:2.75rem; padding:.5rem 0; font-size:1rem}
  .map a.sec{font-size:.875rem; margin-bottom:.5rem}
  .map a small{font-size:.75rem}
}
@media (max-width:40rem){
  .net .mesh-keyword:nth-child(n+4){display:none}
  .wrap{padding-inline:1rem}
  .bar{gap:.75rem}
  .mark img{width:3.75rem; height:2.6rem}
  .nav{order:3; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:.125rem}
  .nav a{justify-content:center; padding-inline:.5rem; font-size:.8125rem}
  .hero{display:flex; flex-direction:column; align-items:stretch; min-height:0; padding-block:2.5rem 1.5rem}
  .hero h1{font-size:clamp(2rem,8.5vw,3rem)}
  .hero-mark{width:min(82vw,20rem); margin-top:1rem}
  .hero-mark figcaption{font-size:.625rem}
  .eyebrow{line-height:1.8}
  .map{padding:1.25rem}
  .map-branches{grid-template-columns:1fr; gap:1.25rem}
  .lbl{gap:.5rem}
  .lbl em{display:none}
  .proof-strip{grid-template-columns:1fr}
  .proof-strip div:nth-child(n){border-right:0;border-bottom:1px solid var(--ln2)}
  .proof-strip div:last-child{border-bottom:0}
  .panel-head{align-items:flex-start; flex-direction:column; gap:.25rem}
  .panel-head em{text-align:left}
  section.blk{padding-top:2.5rem}
  .foot{margin-top:2.5rem; padding-bottom:2rem}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  .amb{opacity:.55}
}