/* Futuretech Info Vision — redesign
   Direction: an engineering firm's letterhead. Off-white paper, graphite ink,
   one slate-blue used for panels and nothing else. Source Serif for what the
   firm says, Manrope for what the firm lists. Hierarchy comes from weight,
   size and 1px rules, not colour. No gradients, no shadows, no icons.       */

:root{
  --paper:#F6F7F5;
  --white:#FFFFFF;
  --ink:#1B1F24;
  --text:#2E343B;
  --muted:#6C737B;
  --line:#CDD2D6;
  --slate:#22384F;
  --slate-deep:#172839;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;
  --max:1200px;
  --g:clamp(20px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--text);background:var(--paper);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;color:var(--ink);letter-spacing:-.015em}
h1{font-size:clamp(40px,5.4vw,72px);line-height:1.02}
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.08}
h3{font-size:22px;line-height:1.25}
p.lead{font-size:19px;line-height:1.5;color:var(--text);max-width:52ch}
.small{font-size:13.5px;color:var(--muted)}

/* buttons: two, both rectangular */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;padding:14px 22px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--slate);border-color:var(--slate)}
.btn--light{border-color:var(--paper);color:var(--paper)}
.btn--light:hover{background:var(--paper);color:var(--ink)}

/* ---------- header ---------- */
.topline{border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.topline .wrap{display:flex;justify-content:space-between;gap:20px;height:38px;align-items:center}
.topline span+span::before{content:"";display:inline-block;width:1px;height:12px;background:var(--line);margin:0 14px -1px}
.topline a:hover{color:var(--ink)}
.hdr{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:32px}
.logo{display:flex;align-items:baseline;gap:8px;font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.logo small{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.hdr nav ul{display:flex;gap:30px;list-style:none;font-size:14.5px;font-weight:600}
.hdr nav a{padding:6px 0;border-bottom:1.5px solid transparent}
.hdr nav a:hover,.hdr nav a.is-on{border-color:var(--ink)}
@media (max-width:860px){.hdr nav{display:none}.topline{display:none}}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,8vw,120px) 0 clamp(48px,6vw,96px);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:end}
.hero h1{max-width:14ch}
.hero .lead{margin-top:26px}
.hero .cta{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
.facts{border-top:1.5px solid var(--ink);font-size:14.5px}
.facts div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-weight:600}
.facts dd{color:var(--ink)}
.facts dd a:hover{text-decoration:underline}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:40px}}

/* ---------- capabilities: definition table ---------- */
.sec{padding:clamp(56px,7vw,104px) 0}
.sec-intro{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;margin-bottom:44px;align-items:end}
.sec-intro p{max-width:56ch;font-size:17px}
@media (max-width:800px){.sec-intro{grid-template-columns:1fr;gap:16px}}
.caps{border-top:1.5px solid var(--ink)}
.caps a{display:grid;grid-template-columns:1fr 1.3fr auto;gap:32px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:background .15s}
.caps a:hover{background:var(--white);margin:0 calc(var(--g) * -1);padding-left:var(--g);padding-right:var(--g)}
.caps h3{font-size:24px}
.caps p{font-size:15.5px;color:var(--text);max-width:52ch}
.caps span{font-size:13px;font-weight:700;white-space:nowrap;color:var(--ink)}
@media (max-width:760px){.caps a{grid-template-columns:1fr;gap:8px}.caps span{display:none}}

/* also-provides strip */
.also{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2px}
.also div{background:var(--paper);padding:22px 24px;font-size:15px}
.also div b{display:block;font-weight:700;color:var(--ink);margin-bottom:4px}
@media (max-width:700px){.also{grid-template-columns:1fr}}

/* ---------- slate panel: how we work ---------- */
.panel{background:var(--slate);color:#DCE3EA}
.panel h2,.panel h3{color:#fff}
.panel .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;padding:clamp(56px,7vw,104px) var(--g)}
.panel p{max-width:48ch}
.steps{list-style:none;border-top:1px solid rgba(255,255,255,.25)}
.steps li{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.steps li i{font-family:var(--serif);font-style:normal;font-size:34px;line-height:1;color:#fff;opacity:.6}
.steps li h3{font-size:20px;margin-bottom:6px}
.steps li p{font-size:15px}
@media (max-width:800px){.panel .wrap{grid-template-columns:1fr;gap:32px}}

/* ---------- figures + about ---------- */
.about .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:64px}
.about .num{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1.5px solid var(--ink)}
.about .num div{padding:22px 0;border-bottom:1px solid var(--line)}
.about .num div:nth-child(odd){border-right:1px solid var(--line);padding-right:24px}
.about .num div:nth-child(even){padding-left:24px}
.about .num strong{font-family:var(--serif);font-weight:500;font-size:52px;line-height:1;color:var(--ink);display:block}
.about .num span{font-size:14px;color:var(--muted);display:block;margin-top:6px}
.about p{margin-top:18px}
@media (max-width:860px){.about .wrap{grid-template-columns:1fr;gap:36px}}

/* ---------- journal ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1.5px solid var(--ink)}
.posts a{padding:24px 28px 28px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);margin-right:28px}
.posts a:last-child{border-right:0;margin-right:0}
.posts .small{margin-bottom:12px}
.posts h3{font-size:21px}
.posts p{margin-top:10px;font-size:15px}
.posts a:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:760px){.posts{grid-template-columns:1fr}.posts a{border-right:0;margin-right:0;padding-right:0}}

/* ---------- contact block ---------- */
.contact{border-top:1px solid var(--line);background:var(--white)}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:clamp(56px,7vw,104px) var(--g)}
.contact .facts{margin-top:28px}
.form{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:700;color:var(--ink)}
.field input,.field textarea,.field select{font:inherit;font-size:15.5px;padding:13px 14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%;border-radius:0}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--ink);background:#fff}
.field textarea{min-height:140px;resize:vertical}
.field .err{display:none;font-size:12.5px;color:#8A1F1F;font-weight:600}
.field.is-bad .err{display:block}.field.is-bad input,.field.is-bad textarea{border-color:#8A1F1F}
.consent{font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.consent input{margin-top:3px;accent-color:var(--slate)}
.consent a{text-decoration:underline}
.hp{position:absolute;left:-9999px}
.sent{display:none;border:1.5px solid var(--ink);padding:26px}
.sent h3{margin-bottom:6px}
form.is-sent{display:none}form.is-sent+.sent{display:block}
@media (max-width:820px){.contact .wrap{grid-template-columns:1fr;gap:40px}.f2{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--slate-deep);color:#AEBAC6;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:48px var(--g) 40px}
footer .logo{color:#fff}footer .logo small{color:#8E9CAA}
footer p{margin-top:14px;max-width:34ch}
footer h4{color:#fff;font-size:12px;letter-spacing:.06em;margin-bottom:12px}
footer li{list-style:none;padding:4px 0}
footer a:hover{color:#fff;text-decoration:underline}
footer address{font-style:normal;line-height:1.7}
.legal{border-top:1px solid rgba(255,255,255,.15);padding:16px var(--g);font-size:12.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:var(--max);margin:0 auto}
@media (max-width:820px){footer .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .wrap{grid-template-columns:1fr}}

/* ---------- inner pages ---------- */
.page-head{padding:clamp(48px,6vw,88px) 0 40px;border-bottom:1px solid var(--line)}
.page-head .crumb{font-size:13px;color:var(--muted);margin-bottom:22px}
.page-head .crumb a:hover{color:var(--ink)}
.page-head h1{max-width:16ch}
.page-head .lead{margin-top:22px}

/* service detail blocks */
.svc{display:grid;grid-template-columns:260px 1fr;gap:48px;padding:48px 0;border-bottom:1px solid var(--line)}
.svc:last-child{border:0}
.svc h2{font-size:30px;position:sticky;top:96px}
.svc p{max-width:60ch;font-size:16.5px}
.svc ul{margin-top:20px;columns:2;column-gap:32px;list-style:none;font-size:15px}
.svc li{padding:8px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.svc .btn{margin-top:26px}
@media (max-width:760px){.svc{grid-template-columns:1fr;gap:16px}.svc h2{position:static}.svc ul{columns:1}}

/* about page */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:clamp(48px,6vw,88px) 0}
.two p+p{margin-top:16px}
.values{list-style:none;border-top:1.5px solid var(--ink)}
.values li{padding:18px 0;border-bottom:1px solid var(--line)}
.values b{display:block;color:var(--ink);font-family:var(--serif);font-size:20px;font-weight:500;margin-bottom:4px}
@media (max-width:800px){.two{grid-template-columns:1fr;gap:36px}}

/* contact page map */
.map{aspect-ratio:16/7;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;text-align:center;padding:24px;margin-top:40px}
.map .serif{font-size:22px}
.map a{text-decoration:underline}