@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --paper:#f8f8f4;
  --white:#fffefa;
  --petrol:#17282b;
  --verm:#c5543f;
  --silver:#c9cecf;
  --ice:#dcecf1;
  --chart:#c8d95d;
  --violet:#6657b8;
  --ink:#263034;
  --muted:#667176;
  --line:rgba(23,40,43,.17);
  --max:1500px;
  --pad:clamp(1.05rem,4vw,4.8rem);
  --sec:clamp(5rem,9vw,9.2rem);
  --serif:"Newsreader",Georgia,serif;
  --sans:"Work Sans",Arial,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --mono:"IBM Plex Mono","Courier New",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);line-height:1.58;overflow-x:hidden}
img{display:block;width:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
ul{list-style:none;padding:0;margin:0}
address{font-style:normal}
a:focus-visible{outline:2px solid var(--chart);outline-offset:4px}
.shell{width:min(100%,var(--max));margin:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:1rem;top:-10rem;z-index:999;background:var(--white);padding:.7rem 1rem;border:1px solid var(--petrol)}
.skip:focus{top:1rem}
.code{font:500 .64rem var(--mono);text-transform:uppercase;letter-spacing:.11em}
.ref{display:flex;align-items:center;gap:.7rem;font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--verm);margin-bottom:1.8rem}
.ref:before{content:"";width:28px;height:2px;background:currentColor}

/* masthead */
.top{background:var(--petrol);color:var(--paper)}
.top .shell{min-height:32px;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.header{background:var(--paper);border-bottom:1px solid var(--petrol)}
.header-grid{min-height:92px;display:grid;grid-template-columns:.78fr 1.22fr}
.brand{display:flex;flex-direction:column;justify-content:center;padding-right:2rem;font:600 2rem/.8 var(--serif);text-transform:uppercase;letter-spacing:-.03em}
.brand small{font:500 .58rem var(--mono);letter-spacing:.14em;margin-top:.58rem}
.nav{display:grid;grid-template-columns:repeat(6,1fr);border-left:1px solid var(--line)}
.nav a{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);font:600 .76rem var(--cond);text-transform:uppercase;letter-spacing:.08em}
.nav a:after{content:"";position:absolute;left:24%;right:24%;bottom:12px;height:3px;background:var(--verm);transform:scaleX(0);transform-origin:left;transition:.2s}
.nav a:hover:after{transform:scaleX(1)}

/* hero */
.hero{padding:clamp(2rem,4vw,4rem) 0 var(--sec);background:var(--paper)}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;gap:1rem}
.hero-copy{grid-column:1/7;grid-row:1/4;min-height:720px;padding:clamp(2rem,5vw,5rem);background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.hero-copy:after{content:"";position:absolute;right:-70px;bottom:-70px;width:360px;height:360px;background:
linear-gradient(90deg,rgba(23,40,43,.1) 1px,transparent 1px),
linear-gradient(rgba(23,40,43,.1) 1px,transparent 1px);background-size:44px 44px}
.hero h1{font:600 clamp(4.7rem,9vw,9.4rem)/.8 var(--serif);letter-spacing:-.055em;max-width:7.5ch;position:relative;z-index:2}
.hero h1 span{display:block;color:var(--petrol)}
.hero-intro{display:grid;grid-template-columns:5rem 1fr;gap:1rem;max-width:35rem;position:relative;z-index:2}
.hero-intro p{font-size:clamp(1rem,1.2vw,1.15rem)}
.hero-cta{display:inline-flex;margin-top:1.5rem;font-weight:600;border-bottom:2px solid var(--verm);padding-bottom:.2rem}
.hero-cta:after{content:" →"}
.signal{grid-column:7/13;grid-row:1/3;min-height:480px;background:var(--ice);position:relative;overflow:hidden;border:1px solid var(--line)}
.signal:before{content:"";position:absolute;inset:0;background:
linear-gradient(90deg,rgba(23,40,43,.09) 1px,transparent 1px),
linear-gradient(rgba(23,40,43,.09) 1px,transparent 1px);background-size:54px 54px}
.route{position:absolute;height:2px;background:var(--petrol);transform-origin:left}
.r1{width:62%;left:9%;top:28%;transform:rotate(8deg)}
.r2{width:50%;left:35%;top:52%;transform:rotate(-12deg)}
.r3{width:44%;left:15%;top:74%;transform:rotate(-3deg)}
.node{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--chart);box-shadow:0 0 0 5px var(--ice),0 0 0 6px var(--petrol)}
.n1{left:18%;top:30%}.n2{left:53%;top:45%}.n3{left:78%;top:54%}.n4{left:42%;top:73%}
.plane{position:absolute;border:1px solid rgba(23,40,43,.22);background:rgba(255,255,255,.55);backdrop-filter:blur(2px)}
.p1{width:34%;height:27%;right:8%;top:10%;transform:rotate(2deg)}
.p2{width:29%;height:24%;left:12%;bottom:9%;transform:rotate(-3deg)}
.signal-label{position:absolute;left:1rem;bottom:1rem;background:var(--petrol);color:var(--paper);padding:.6rem .7rem}
.hero-image{grid-column:7/10;grid-row:3;min-height:225px;position:relative;overflow:hidden}
.hero-image img{height:100%;min-height:225px;filter:saturate(.55) contrast(1.02)}
.hero-image figcaption{position:absolute;left:0;bottom:0;background:var(--petrol);color:var(--paper);padding:.55rem .7rem}
.hero-meta{grid-column:10/13;grid-row:3;min-height:225px;background:var(--silver);padding:1.4rem;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.hero-meta:after{content:"046";position:absolute;right:.4rem;bottom:-1rem;font:700 8rem/.8 var(--cond);color:rgba(23,40,43,.1)}

/* intro */
.intro{padding:var(--sec) 0;background:var(--white)}
.intro-grid{display:grid;grid-template-columns:.34fr 1fr .76fr;gap:clamp(1.5rem,5vw,5.5rem)}
.big{font:700 clamp(6rem,12vw,12rem)/.65 var(--cond);color:rgba(23,40,43,.08)}
.intro h2,.systems h2,.motion h2,.professional h2,.insights h2,.visit h2{font-family:var(--serif);letter-spacing:-.045em}
.intro h2{font-size:clamp(3.4rem,6.8vw,7rem);line-height:.87;max-width:7.8ch}
.intro-copy{max-width:30rem}
.intro-copy p:first-child{font-size:1.14rem}
.intro-copy p+p{margin-top:1.15rem;color:var(--muted)}

/* system index */
.systems{padding:var(--sec) 0;background:var(--silver)}
.systems-head{display:grid;grid-template-columns:1fr .72fr;gap:3rem;align-items:end;margin-bottom:3.4rem}
.systems h2{font-size:clamp(3.7rem,7.2vw,7.5rem);line-height:.84}
.systems-head p{max-width:31rem;justify-self:end;color:#505b5f}
.system-list{border-top:2px solid var(--petrol)}
.system-row{display:grid;grid-template-columns:6rem .85fr 1.15fr;gap:1.5rem;align-items:center;min-height:128px;border-bottom:1px solid rgba(23,40,43,.22);position:relative}
.system-row:nth-child(2){width:92%}.system-row:nth-child(3){width:84%}.system-row:nth-child(4){width:96%}
.system-row:after{content:"";position:absolute;right:0;top:0;bottom:0;width:12px;background:var(--verm)}
.system-row:nth-child(2):after{background:var(--ice)}.system-row:nth-child(3):after{background:var(--chart)}.system-row:nth-child(4):after{background:var(--violet)}
.system-row h3{font:700 clamp(1.8rem,3vw,3rem)/.95 var(--cond);text-transform:uppercase}
.system-row p{max-width:39rem;color:#505b5f;font-size:.92rem}

/* motion */
.motion{padding:var(--sec) 0;background:var(--petrol);color:var(--paper)}
.motion-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:end;margin-bottom:4rem}
.motion h2{font-size:clamp(3.6rem,7.1vw,7.4rem);line-height:.84}
.motion-head p{justify-self:end;max-width:31rem;color:rgba(248,248,244,.7)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);position:relative;min-height:400px;border-block:1px solid rgba(248,248,244,.18)}
.flow:before{content:"";position:absolute;left:7%;right:7%;top:49%;height:2px;background:var(--ice)}
.step{position:relative;padding:1.1rem;display:flex;flex-direction:column;justify-content:space-between}
.step:nth-child(even){padding-top:13rem}
.step:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--chart);left:50%;top:49%;transform:translate(-50%,-50%);box-shadow:0 0 0 5px var(--petrol),0 0 0 6px var(--ice)}
.step b{font:700 4.2rem/.8 var(--cond);color:rgba(248,248,244,.18)}
.step h3{font:600 1.7rem var(--serif);margin:.6rem 0}
.step p{font-size:.86rem;color:rgba(248,248,244,.7);max-width:14rem}

/* professional */
.professional{padding:var(--sec) 0;background:var(--ice)}
.prof-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2rem,6vw,6rem)}
.professional h2{font-size:clamp(3.7rem,7.2vw,7.5rem);line-height:.84;max-width:7.4ch}
.prof-items{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.prof-item{min-height:220px;padding:1.5rem;border-top:2px solid var(--petrol);background:rgba(255,255,255,.45)}
.prof-item .code{color:var(--verm)}
.prof-item h3{font:700 1.8rem var(--cond);text-transform:uppercase;margin:.8rem 0}
.prof-item p{color:#4c5d63}

/* insights */
.insights{padding:var(--sec) 0;background:var(--white)}
.insights-head{display:grid;grid-template-columns:1fr .65fr;gap:3rem;align-items:end;margin-bottom:3rem}
.insights h2{font-size:clamp(3.6rem,7vw,7.2rem);line-height:.84}
.insights-head p{max-width:30rem;justify-self:end;color:var(--muted)}
.journal{display:grid;grid-template-columns:1.2fr .8fr;border-top:2px solid var(--petrol)}
.lead-note{padding:1.7rem 2rem 2rem 0;border-right:1px solid var(--line)}
.lead-note h3{font:600 clamp(2.2rem,4vw,4rem)/.95 var(--serif);max-width:12ch;margin:1rem 0}
.lead-note p,.small-note p{color:var(--muted)}
.note-stack{display:grid;grid-template-rows:1fr 1fr}
.small-note{padding:1.7rem 0 1.7rem 2rem;border-bottom:1px solid var(--line)}
.small-note h3{font:600 clamp(1.6rem,2.5vw,2.4rem)/1 var(--serif);max-width:13ch;margin:1rem 0}

/* visit */
.visit{background:var(--petrol);color:var(--paper)}
.visit-grid{display:grid;grid-template-columns:.74fr 1.26fr;min-height:610px}
.visit-info{padding:var(--sec) var(--pad);display:flex;flex-direction:column;justify-content:space-between}
.visit-info h2{font-size:clamp(4rem,8vw,8rem);line-height:.82}
.visit-info address{font:600 clamp(2rem,3.8vw,3.8rem)/1 var(--serif)}
.visit-art{position:relative;padding:var(--sec) var(--pad);background:
linear-gradient(rgba(248,248,244,.12) 1px,transparent 1px),
linear-gradient(90deg,rgba(248,248,244,.12) 1px,transparent 1px),
#213538;background-size:58px 58px;overflow:hidden}
.visit-art:before{content:"";position:absolute;left:8%;right:8%;top:57%;height:2px;background:var(--paper)}
.visit-art:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;background:var(--verm);left:63%;top:calc(57% - 50px);border:14px solid #213538;box-shadow:0 0 0 2px var(--paper)}
.visit-number{position:relative;z-index:2;font:700 clamp(7rem,15vw,15rem)/.68 var(--cond)}
.visit-word{position:relative;z-index:2;font:600 clamp(4rem,8vw,8rem)/.8 var(--serif)}
.visit-note{position:absolute;right:var(--pad);bottom:var(--pad);max-width:28rem;color:rgba(248,248,244,.72);font-size:.9rem}

/* footer */
.footer{background:var(--petrol);color:var(--paper);padding:3.5rem 0 2rem;border-top:1px solid rgba(248,248,244,.18)}
.footer-title{font:600 clamp(5rem,10vw,10rem)/.7 var(--serif);text-transform:uppercase;padding-bottom:2rem;border-bottom:1px solid rgba(248,248,244,.18)}
.footer-title small{display:block;font:500 .1em var(--mono);letter-spacing:.14em;margin-top:1rem;color:#bdd6de}
.footer-row{display:grid;grid-template-columns:1fr 1.5fr auto;gap:2rem;padding-top:1.5rem}
.footer-address,.footer-code{font-size:.78rem;color:rgba(248,248,244,.7)}
.footer-links{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;font-size:.78rem}
.footer-links a:hover{color:var(--chart)}

/* legal */
.legal-hero{padding:6rem 0 3rem;background:var(--paper);border-bottom:1px solid var(--petrol)}
.legal-hero h1{font:600 clamp(4rem,8vw,8rem)/.82 var(--serif);letter-spacing:-.05em}
.legal-hero p{max-width:44rem;margin-top:1.5rem;color:var(--muted)}
.legal-layout{display:grid;grid-template-columns:.3fr .7fr;gap:clamp(2.5rem,7vw,8rem);padding:5rem 0}
.legal-index{position:sticky;top:2rem;align-self:start;border-top:1px solid var(--petrol)}
.legal-index a{display:block;padding:1rem 0;border-bottom:1px solid var(--line)}
.legal-copy section{padding-bottom:4rem}
.legal-copy section+section{padding-top:4rem;border-top:2px solid var(--petrol)}
.legal-copy h2{font:600 clamp(2.8rem,5vw,5rem)/.9 var(--serif);margin-bottom:2rem}
.legal-copy h3{font:700 1.5rem var(--cond);text-transform:uppercase;margin:2rem 0 .7rem}
.legal-copy p+p{margin-top:1rem}

@media(max-width:980px){
  .nav{grid-template-columns:repeat(3,1fr)}
  .intro-grid{grid-template-columns:.3fr 1fr}.intro-copy{grid-column:2}
}
@media(max-width:760px){
  .top .shell span:last-child{display:none}
  .header-grid{grid-template-columns:1fr}.brand{min-height:76px}
  .nav{border-left:0;grid-template-columns:repeat(3,1fr)}.nav a{min-height:52px}
  .hero-grid{display:flex;flex-direction:column}.hero-copy{order:1;min-height:540px}.signal{order:2;min-height:420px}.hero-image{order:3;min-height:260px}.hero-meta{order:4}
  .intro-grid,.systems-head,.motion-head,.prof-grid,.insights-head,.visit-grid,.legal-layout{grid-template-columns:1fr}.big{font-size:5rem}.intro-copy{grid-column:auto}
  .systems-head p,.motion-head p,.insights-head p{margin-top:1rem;justify-self:start}
  .system-row,.system-row:nth-child(2),.system-row:nth-child(3),.system-row:nth-child(4){width:100%;grid-template-columns:5rem 1fr;padding:1rem 0}.system-row p{grid-column:2}
  .flow{display:block;min-height:0;border-left:2px solid var(--ice);border-top:0}.flow:before{display:none}.step,.step:nth-child(even){padding:1rem 1rem 2.4rem 2rem}.step:after{left:-1px;top:1.4rem;transform:translate(-50%,0)}.step p{max-width:30rem}
  .prof-items{grid-template-columns:1fr}
  .journal{grid-template-columns:1fr}.lead-note{border-right:0;border-bottom:1px solid var(--line);padding-right:0}.small-note{padding-left:0}
  .visit-info{min-height:430px}.visit-art{min-height:460px}
  .footer-row{grid-template-columns:1fr}.legal-index{position:static}
}
@media(max-width:500px){
  .nav{grid-template-columns:1fr 1fr}
}