/* =====================================================================
   LARSA SPACE — For Information Technology and Internet Services
   -----------------------------------------------------------------
   Design concept: "the company profile as an engineering document".
   Hairlines and registers instead of shadowed cards. Flat colour, no
   gradients. Square geometry. One motion moment (a single scroll
   reveal per section). Custom subject-drawn marks, no stock icon set.

   Palette sources (all traced to something real):
     navy   #0E2233  — the dark panel on the printed profile cover
     cyan   #00CCFF  — sampled from the Larsa Space logotype
     deep   #00627A  — the dark cyan already inside the logotype
     paper  #F1EEE7  — Baghdad limestone / the printed page
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --navy:#0e2233;
  --navy-deep:#0a1927;
  --navy-soft:#16324a;
  --navy-rule:#24405a;

  --paper:#f1eee7;
  --paper-2:#e6e1d7;
  --white:#ffffff;

  --ink:#16202b;
  --ink-2:#4d5c6b;
  --rule:#d4cec1;

  --cyan:#00ccff;
  --cyan-ink:#00627a;
  --steel:#8798a6;

  --font-display:"Archivo","Arial Narrow",Helvetica,Arial,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --wrap:1180px;
  --gut:26px;
  --r:2px;
  --t:.16s linear;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.68;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;line-height:1.12;letter-spacing:-.015em}
p{margin:0}
strong{font-weight:600}
::selection{background:var(--cyan);color:var(--navy)}
:focus-visible{outline:2px solid var(--cyan-ink);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cyan);color:var(--navy);padding:12px 20px;font-weight:600}
.skip-link:focus{left:0}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding:clamp(58px,7vw,104px) 0}
.section--tight{padding:clamp(42px,5vw,68px) 0}
.section--white{background:var(--white)}
.section--dark{background:var(--navy);color:#c6d3dd}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.rule-top{border-top:1px solid var(--rule)}

/* section label: a document heading, set in the technical face */
.label{
  display:block;font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-ink);
  padding-bottom:10px;margin-bottom:22px;border-bottom:1px solid var(--rule);
}
.section--dark .label{color:var(--cyan);border-bottom-color:var(--navy-rule)}

.sec-head{max-width:640px;margin-bottom:clamp(34px,4vw,52px)}
.sec-head h2{font-size:clamp(28px,3.4vw,42px)}
.sec-head p{margin-top:16px;font-size:18px;color:var(--ink-2)}
.section--dark .sec-head p{color:#94a8b8}
.sec-head--wide{max-width:none;display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px}
.sec-head--wide > div{max-width:640px}

.lead{font-size:clamp(18px,1.9vw,20.5px);line-height:1.6;color:var(--ink-2)}
.section--dark .lead{color:#a5b8c7}
.prose p + p{margin-top:16px}
.prose{color:var(--ink-2)}

/* ---------- 4. Controls ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:var(--r);border:1px solid var(--navy);
  background:var(--navy);color:#fff;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.005em;
  white-space:nowrap;transition:background var(--t),border-color var(--t),color var(--t);
}
.btn:hover{background:var(--navy-soft);border-color:var(--navy-soft)}
.btn--cyan{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.btn--cyan:hover{background:#3ad8ff;border-color:#3ad8ff}
.btn--line{background:transparent;color:var(--navy);border-color:var(--rule)}
.btn--line:hover{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn--onDark{background:transparent;color:#fff;border-color:var(--navy-rule)}
.btn--onDark:hover{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.btn--sm{padding:9px 18px;font-size:14px}
.btn--block{width:100%}

.tlink{
  display:inline-block;font-family:var(--font-mono);font-size:13.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-ink);
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.tlink:hover{color:var(--navy)}
.section--dark .tlink{color:var(--cyan)}
.section--dark .tlink:hover{color:#fff}

/* ---------- 5. Masthead ---------- */
.topbar{background:var(--navy-deep);color:#8ea3b3;font-size:13px;font-family:var(--font-mono)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px;flex-wrap:wrap}
.topbar__list{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.topbar__list li{display:flex;gap:8px;align-items:baseline}
.topbar .k{color:#5f7789;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.topbar a:hover{color:var(--cyan)}

.site-header{position:sticky;top:0;z-index:90;background:var(--navy);border-bottom:1px solid var(--navy-rule)}
/* the single intentionally elevated element on the page */
.site-header.is-stuck{box-shadow:0 6px 22px rgba(6,18,30,.32)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:72px}
.brand{display:flex;align-items:center;flex:none}
.brand img{width:184px}

.nav__links{display:flex;align-items:center;gap:0}
.nav__links a{
  position:relative;padding:26px 15px;font-size:15px;font-weight:500;color:#b6c7d4;
  transition:color var(--t);
}
.nav__links a:hover{color:#fff}
.nav__links a.is-active{color:#fff}
.nav__links a.is-active::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:2px;background:var(--cyan)}
.nav__actions{display:flex;align-items:center;gap:12px;flex:none}

.burger{
  display:none;width:42px;height:42px;border:1px solid var(--navy-rule);
  background:transparent;border-radius:var(--r);cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:18px;height:1.5px;background:#fff;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:#fff}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{top:0;transform:rotate(45deg)}
.burger.is-open span::after{top:0;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0 0 0 auto;width:min(330px,86vw);z-index:100;
  background:var(--navy-deep);border-left:1px solid var(--navy-rule);
  transform:translateX(100%);transition:transform .3s ease;
  display:flex;flex-direction:column;padding:22px 24px 30px;overflow-y:auto;
}
.drawer.is-open{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.drawer__head img{width:148px}
.drawer__close{width:38px;height:38px;border:1px solid var(--navy-rule);background:none;border-radius:var(--r);color:#fff;font-size:18px;cursor:pointer}
.drawer nav a{
  display:block;padding:14px 0;color:#b6c7d4;font-family:var(--font-display);font-size:17px;font-weight:600;
  border-bottom:1px solid var(--navy-rule);transition:color var(--t);
}
.drawer nav a:hover,.drawer nav a.is-active{color:var(--cyan)}
.drawer__foot{margin-top:auto;padding-top:24px;color:#8ea3b3;font-size:14px;font-family:var(--font-mono)}
.drawer__foot a{display:block;margin-bottom:7px}
.drawer__foot a:hover{color:var(--cyan)}
.scrim{position:fixed;inset:0;background:rgba(6,18,30,.62);z-index:99;opacity:0;visibility:hidden;transition:opacity .3s}
.scrim.is-open{opacity:1;visibility:visible}

/* ---------- 6. Hero ---------- */
.hero{background:var(--navy);color:#c6d3dd;padding:clamp(52px,6vw,86px) 0 0}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,4.6vw,60px);align-items:center}
.hero__kicker{
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:20px;
  padding-bottom:12px;border-bottom:1px solid var(--navy-rule);display:block;
}
.hero h1{color:#fff;font-size:clamp(34px,4.9vw,58px);line-height:1.04;letter-spacing:-.025em;font-weight:800}
.hero__sub{margin-top:20px;font-size:clamp(17px,1.7vw,19px);line-height:1.62;color:#a5b8c7;max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 42%}
.hero__figure figcaption{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#7b93a6;padding-top:10px;border-top:1px solid var(--navy-rule);margin-top:10px;
}

/* specification strip below the hero */
.specs{border-top:1px solid var(--navy-rule);margin-top:clamp(38px,4vw,58px)}
.specs__row{display:grid;grid-template-columns:repeat(4,1fr)}
.specs__cell{padding:24px 26px 26px;border-right:1px solid var(--navy-rule)}
.specs__cell:first-child{padding-left:0}
.specs__cell:last-child{border-right:0}
.specs__k{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6f889b;margin-bottom:9px}
.specs__v{display:block;font-family:var(--font-display);font-size:clamp(20px,2.2vw,27px);font-weight:700;color:#fff;line-height:1.1}
.specs__n{display:block;font-size:13.5px;color:#8ea3b3;margin-top:6px}

/* ---------- 7. Vendor row (static, no marquee) ---------- */
.vendors{background:var(--white);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.vendors__in{padding:26px 0 30px}
.vendors__label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:20px}
.vendors__row{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 22px;align-items:center}
.vendors__row img{height:42px;width:100%;object-fit:contain;object-position:center;opacity:.92}
.vendors__row img.emblem{height:60px}

/* ---------- 8. Statement block ---------- */
.statement{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr);gap:clamp(32px,5vw,70px);align-items:start}
.statement h2{font-size:clamp(27px,3.2vw,40px);max-width:20ch}
.statement__body{margin-top:22px;font-size:17.5px;color:var(--ink-2)}
.statement__body p + p{margin-top:15px}

/* a document-style key/value register */
.register{border-top:1px solid var(--rule)}
.register__row{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
.register__k{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan-ink);padding-top:4px;min-width:104px}
.register__v{font-size:16px;color:var(--ink)}
.register__v small{display:block;color:var(--ink-2);font-size:14.5px;margin-top:3px}
.section--dark .register{border-top-color:var(--navy-rule)}
.section--dark .register__row{border-bottom-color:var(--navy-rule)}
.section--dark .register__k{color:var(--cyan)}
.section--dark .register__v{color:#e2eaf1}
.section--dark .register__v small{color:#94a8b8}

/* ---------- 9. Capability register (services index) ---------- */
.capreg{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,58px);border-top:1px solid var(--rule)}
.capitem{
  display:grid;grid-template-columns:34px 28px 1fr auto;gap:14px;align-items:center;
  padding:15px 2px;border-bottom:1px solid var(--rule);transition:background var(--t);
}
.capitem:hover{background:var(--white)}
.capitem__n{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--cyan-ink)}
.capitem__mark{width:26px;height:26px;color:var(--navy)}
.capitem h3{font-size:16.5px;font-weight:600;letter-spacing:-.005em}
.capitem__meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}

/* two featured capabilities, given real space and a photograph */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,54px);align-items:center;padding:clamp(34px,4vw,52px) 0;border-bottom:1px solid var(--rule)}
.feature:first-of-type{border-top:1px solid var(--rule)}
.feature--flip .feature__media{order:2}
.feature__n{display:block;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:14px}
.feature__mark{width:38px;height:38px;color:var(--navy);margin-bottom:16px}
.feature__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feature__media figcaption{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding-top:9px;border-top:1px solid var(--rule);margin-top:9px;
}
.feature h3{font-size:clamp(22px,2.5vw,30px);margin-bottom:14px}
.feature p{color:var(--ink-2)}

/* ---------- 10. Plain fact lists (no checkmarks) ---------- */
.facts{margin-top:24px;border-top:1px solid var(--rule)}
.facts li{padding:13px 0;border-bottom:1px solid var(--rule);font-size:16px;display:grid;grid-template-columns:auto 1fr;gap:14px}
.facts li::before{content:"";width:9px;height:9px;background:var(--cyan-ink);margin-top:9px}
.section--dark .facts{border-top-color:var(--navy-rule)}
.section--dark .facts li{border-bottom-color:var(--navy-rule);color:#c6d3dd}
.section--dark .facts li::before{background:var(--cyan)}

/* ---------- 11. Schematic figure ---------- */
.schema{width:100%;height:auto;background:var(--navy-deep);border:1px solid var(--navy-rule)}
.schema .stroke{fill:none;stroke:#4d7f9c;stroke-width:1.1}
.schema .stroke-dash{fill:none;stroke:#3c6580;stroke-width:1.1;stroke-dasharray:4 6}
.schema .beam{fill:#00ccff;opacity:.09}
.schema .sat{fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:butt;stroke-linejoin:miter}
.schema .node{fill:var(--cyan)}
.schema .lbl{fill:#fff;font-family:var(--font-display);font-size:14px;font-weight:600;text-anchor:middle}
.schema .sub{fill:#7b93a6;font-family:var(--font-mono);font-size:11px;text-anchor:middle;letter-spacing:.08em}
.schema .tag{fill:#4d7f9c;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-anchor:middle}
figure{margin:0}
.figcap{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#7b93a6;padding-top:10px;border-top:1px solid var(--navy-rule);margin-top:10px;
}

/* ---------- 12. Project records ---------- */
.filters{display:flex;flex-wrap:wrap;gap:0;margin-bottom:30px;border:1px solid var(--rule);width:max-content;max-width:100%;background:var(--white)}
.filters button{
  padding:11px 20px;border:0;border-right:1px solid var(--rule);background:transparent;
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);cursor:pointer;transition:background var(--t),color var(--t);
}
.filters button:last-child{border-right:0}
.filters button:hover{color:var(--navy)}
.filters button.is-active{background:var(--navy);color:#fff}

.records{border-top:1px solid var(--rule)}
.record{
  display:grid;grid-template-columns:224px 1fr 168px;gap:28px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--rule);transition:background var(--t);
}
.record:hover{background:var(--white)}
.record__media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.record__id{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:8px}
.record h3{font-size:20px;line-height:1.28;margin-bottom:9px}
.record p{font-size:15.5px;color:var(--ink-2);max-width:60ch}
.record__side{text-align:right;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.record__side b{display:block;font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--navy);letter-spacing:0;margin-bottom:6px}
.record__side span{display:block;margin-top:4px}
.is-hidden{display:none !important}
.count{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}

/* ---------- 13. Service detail sections ---------- */
.srv{padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid var(--rule)}
.srv__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:start}
.srv--flip .srv__media{order:2}
.srv__media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.srv__n{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--cyan-ink);display:block;margin-bottom:12px}
.srv h2{font-size:clamp(24px,2.8vw,33px);margin-bottom:14px}
.srv p{color:var(--ink-2);font-size:16.5px}
.srv__mark{width:38px;height:38px;color:var(--navy);margin-bottom:16px}
.taglist{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;min-width:0}
.taglist span{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;padding:8px 13px;
  border:1px solid var(--rule);color:var(--ink-2);background:var(--white);
}

/* ---------- 14. Page hero ---------- */
.phero{background:var(--navy);color:#c6d3dd;padding:clamp(46px,6vw,80px) 0 clamp(46px,6vw,74px)}
.phero h1{color:#fff;font-size:clamp(31px,4.2vw,50px);letter-spacing:-.025em;max-width:17ch;font-weight:800}
.phero p{margin-top:18px;font-size:clamp(16.5px,1.7vw,18.5px);color:#a5b8c7;max-width:58ch;line-height:1.62}
.crumbs{display:flex;gap:10px;align-items:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6f889b;margin-bottom:22px}
.crumbs a:hover{color:var(--cyan)}

/* ---------- 15. Partner sheets ---------- */
.plogos{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.plogo{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;
  background:var(--white);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:30px 22px;min-height:150px;transition:background var(--t);
}
.plogo:hover{background:var(--paper-2)}
.plogo img{max-height:62px;max-width:100%;width:auto;object-fit:contain}
.plogo span{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-align:center}

/* ---------- 16. Call to action band ---------- */
.cta{background:var(--navy);color:#a5b8c7}
.cta__in{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;padding:clamp(38px,5vw,60px) 0}
.cta h2{color:#fff;font-size:clamp(25px,3vw,36px);max-width:20ch}
.cta p{margin-top:13px;max-width:50ch;font-size:16.5px}
.cta__actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 17. Contact ---------- */
.contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,64px);align-items:start}
.form{background:var(--white);border:1px solid var(--rule);padding:clamp(24px,3vw,38px)}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.field label .req{color:#b23b30}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);font-size:16px;transition:border-color var(--t),background var(--t);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan-ink);background:var(--white)}
.field textarea{resize:vertical;min-height:130px}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#b23b30;background:#fbf3f2}
.field__err{display:none;color:#96322a;font-size:13px;margin-top:6px;font-family:var(--font-mono)}
.field.has-error .field__err{display:block}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form__note{font-size:13.5px;color:var(--ink-2);margin-top:14px;line-height:1.55}
.form__note a{border-bottom:1px solid var(--rule)}
.form__status{display:none;margin-top:18px;padding:14px 16px;font-size:15px;line-height:1.55;border:1px solid}
.form__status.ok{display:block;background:#eef6f0;color:#1c5c3c;border-color:#c3ddcd}
.form__status.err{display:block;background:#fbf2f1;color:#96322a;border-color:#e6c8c4}
.map{border:1px solid var(--rule);line-height:0;background:var(--paper-2)}
.map iframe{width:100%;height:340px;border:0}

/* ---------- 18. Footer ---------- */
.site-footer{background:var(--navy-deep);color:#8ea3b3;padding-top:clamp(48px,5vw,72px);border-top:1px solid var(--navy-rule)}
.site-footer h4{color:#fff;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-weight:600}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:38px}
.footer__brand img{width:206px;margin-bottom:18px}
.footer__brand p{font-size:15px;line-height:1.66;max-width:38ch}
.footer__list li{margin-bottom:10px}
.footer__list a{font-size:15px}
.footer__list a:hover{color:var(--cyan)}
.footer__def li{margin-bottom:15px;font-size:15px;line-height:1.5}
.footer__def .k{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5f7789;margin-bottom:3px}
.footer__def a:hover{color:var(--cyan)}
.footer__bottom{
  margin-top:clamp(36px,4vw,54px);padding:20px 0;border-top:1px solid var(--navy-rule);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;
}
.footer__legal{display:flex;gap:20px;flex-wrap:wrap}
.footer__bottom a:hover{color:var(--cyan)}

/* ---------- 19. Back to top ---------- */
.totop{
  position:fixed;right:20px;bottom:20px;z-index:80;width:44px;height:44px;
  background:var(--navy);color:#fff;border:1px solid var(--navy-rule);border-radius:var(--r);
  cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;
  transition:opacity .2s,visibility .2s,background var(--t);
}
.totop.is-on{opacity:1;visibility:visible}
.totop:hover{background:var(--navy-soft)}
.totop svg{width:17px;height:17px}

/* ---------- 20. The one motion moment ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease-out,transform .55s ease-out}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 21. Legal pages ---------- */
.doc{max-width:760px}
.doc h2{font-size:clamp(21px,2.3vw,27px);margin:38px 0 12px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{color:var(--ink-2);font-size:16.5px}
.doc p + p{margin-top:14px}
.doc ul{margin-top:12px;border-top:1px solid var(--rule)}
.doc ul li{padding:11px 0;border-bottom:1px solid var(--rule)}
.doc .updated{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:30px}
.doc a{color:var(--cyan-ink);border-bottom:1px solid var(--rule)}

/* ---------- 22. Responsive ---------- */
@media (max-width:1060px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__actions .btn{display:none}
  .hero__grid,.statement{grid-template-columns:1fr;gap:36px}
  .specs__row{grid-template-columns:repeat(2,1fr)}
  .specs__cell{border-bottom:1px solid var(--navy-rule);padding-left:26px}
  .specs__cell:first-child{padding-left:26px}
  .specs__cell:nth-child(2n){border-right:0}
  .vendors__row{grid-template-columns:repeat(4,1fr);gap:24px 18px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:34px}
  .plogos{grid-template-columns:repeat(4,1fr)}
  .record{grid-template-columns:190px 1fr}
  .record__side{grid-column:2;text-align:left;display:flex;gap:18px;align-items:baseline}
  .record__side b{margin-bottom:0}
}
@media (max-width:860px){
  .feature,.srv__grid,.contact__grid{grid-template-columns:1fr}
  .feature--flip .feature__media,.srv--flip .srv__media{order:0}
  .capitem{grid-template-columns:52px 1fr}
  .capitem__meta{grid-column:2;text-align:left;padding-top:12px}
  .sec-head--wide{grid-template-columns:1fr;align-items:start}
  .cta__in{grid-template-columns:1fr;gap:26px}
  .form__row{grid-template-columns:1fr;gap:0}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .topbar__list--main{display:none}
  .topbar__in{justify-content:center}
  .brand img{width:156px}
  .nav{min-height:64px}
  .vendors__row{grid-template-columns:repeat(3,1fr)}
  .plogos{grid-template-columns:repeat(2,1fr)}
  .record{grid-template-columns:1fr;gap:16px}
  .record__side{grid-column:1}
  .record__media img{aspect-ratio:16/9}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;text-align:center}
  .filters{width:100%}
  .filters button{flex:1 1 auto}
}
@media (max-width:460px){
  .specs__row{grid-template-columns:1fr}
  .specs__cell{border-right:0}
  .vendors__row{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 23. Preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .topbar,.site-header,.drawer,.scrim,.totop,.cta,.vendors{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding:16px 0}
  .hero,.phero,.section--dark{background:#fff !important;color:#000 !important}
  .hero h1,.phero h1,.section--dark h2,.section--dark h3{color:#000 !important}
  .reveal{opacity:1;transform:none}
}

/* capability index collapses to one column on narrow screens */
@media (max-width:860px){
  .capreg{grid-template-columns:1fr}
}
@media (max-width:520px){
  .capitem{grid-template-columns:30px 24px 1fr;gap:11px}
  .capitem__meta{grid-column:3;font-size:10.5px;padding-top:2px}
}

/* a partner we carry by name until their logo file is supplied */
.vendors__name,.plogo--text b{
  font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;
  color:var(--ink);text-align:center;
}
.vendors__name{align-self:center;opacity:.9}
.plogo--text{gap:10px}
.plogo--text b{font-size:19px;line-height:1.22}
.vendors__more{
  margin-top:22px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;
}

/* client mark on a project record, shown where we hold the client's logo */
.record__client{height:30px;width:auto;max-width:190px;object-fit:contain;object-position:left center;margin-bottom:12px}
@media (max-width:640px){ .record__client{height:26px} }
.record__client--sq{height:46px;max-width:120px}
@media (max-width:640px){ .record__client--sq{height:40px} }

/* project register: the client's logo stands in for a photograph, so a
   record never borrows imagery from unrelated work */
.record__media--logo{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/2;padding:26px 22px;
  background:var(--white);border:1px solid var(--rule);
}
.record__media--logo img{
  width:auto;height:auto;max-width:100%;max-height:100%;
  aspect-ratio:auto;object-fit:contain;
}
@media (max-width:640px){
  .record__media--logo{aspect-ratio:5/2;padding:22px}
}