/* Arctic Autonomy: the ShipOS sections and the new nav.
 *
 * Added alongside site.css rather than inside it. site.css is the deployed
 * stylesheet and every rule in it is load bearing for a page that is live right
 * now; this file only adds, so reverting the whole change is deleting one link
 * tag per page.
 *
 * The section furniture is Palantir's ShipOS: a hatched rule across the top of
 * every block, a square bullet and a caps kicker on the left, a two digit index
 * on the right, and figures set very large over a hairline with a letter above
 * them. Everything is drawn on as it arrives.
 */

:root{
  --os-dark:#000;
  --os-light:#F4F4F2;
  --os-hair-d:rgba(255,255,255,.26);
  --os-hair-l:rgba(19,19,18,.22);
  --os-ease:cubic-bezier(.165,.84,.44,1);
}

/* ---------- nav: no bar ----------
   There is no bar. The mark and the three lines float on whatever is behind
   them and nothing else is up there, so the first screen is the film and not a
   strip of chrome sitting on top of one.

   mix-blend-mode:difference is what keeps both legible without a plate: over
   the dark hero it resolves white, over the cream bands below it resolves
   near-black, and it needs no scroll listener to decide which. The panel is
   the exception, and it turns the blend off, because a blended mark over a
   black panel would invert to nothing. */
.osnav{position:fixed;inset:0 0 auto 0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.2vw,28px) clamp(20px,4vw,72px);
  pointer-events:none;mix-blend-mode:difference}
.osnav > *{pointer-events:auto}
.osmenu-open .osnav{mix-blend-mode:normal}
.osnav__brand{display:inline-flex;align-items:center;gap:11px;color:#fff}
.osnav__brand .brandmark{height:26px;background-color:currentColor}
.osnav__brand b{font-weight:500;font-size:1.06rem;letter-spacing:-.02em;white-space:nowrap}

.osburger{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px;
  background:none;border:0;cursor:pointer;color:#fff}
.osburger i{position:relative;display:block;width:24px;height:1.5px;background:currentColor;
  transition:background .2s linear}
.osburger i::before,.osburger i::after{content:"";position:absolute;left:0;
  width:24px;height:1.5px;background:currentColor;transition:transform .45s var(--os-ease)}
.osburger i::before{top:-7px}
.osburger i::after{top:7px}
.osmenu-open .osburger i{background:transparent}
.osmenu-open .osburger i::before{transform:translateY(7px) rotate(45deg)}
.osmenu-open .osburger i::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- the panel ----------
   Nominal's rack: four columns divided by single rules, two of them pictures,
   one of them a column split into two cells. Solid black, no translucency. It
   covers the page from the top rather than hanging off a bar, because there is
   no bar for it to hang off. */
.osmenu{position:fixed;inset:0;z-index:190;
  background:#000;color:#fff;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding-top:clamp(58px,6.4vw,86px);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .62s var(--os-ease),visibility 0s linear .62s}
.osmenu-open .osmenu{clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path .62s var(--os-ease),visibility 0s linear 0s}
.osmenu-open{overflow:hidden}

.oscell{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,32px);
  border-right:1px solid rgba(255,255,255,.28);color:#fff;min-height:0;
  transition:background .4s var(--os-ease)}
.oscell:last-child{border-right:0}
a.oscell:hover{background:rgba(255,255,255,.06)}
.oscell h3{font-size:clamp(1.15rem,1.5vw,1.5rem);font-weight:450;letter-spacing:-.02em;line-height:1.15}
.oscell hr{border:0;border-top:1px solid rgba(255,255,255,.28);margin:14px 0}
.oscell .oslead{font-size:clamp(.98rem,1.1vw,1.08rem);line-height:1.34;color:#fff}
.oscell p{font-size:.9rem;line-height:1.5;max-width:34ch;color:rgba(255,255,255,.78)}
.osgo{margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 20px;border:1px solid #fff;color:#fff;
  font-size:.68rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;line-height:1;
  transition:background .32s var(--os-ease),color .32s var(--os-ease)}
a.oscell:hover .osgo,.osstack > a:hover .osgo{background:#fff;color:#000}
.oscell--img{padding:0;overflow:hidden;background:#0a0a0a}
.oscell--img img{width:100%;height:100%;object-fit:cover;display:block}

/* a column split into two cells, one over the other */
.osstack{display:grid;grid-template-rows:1fr 1fr;
  border-right:1px solid rgba(255,255,255,.28);min-height:0}
.osstack:last-child{border-right:0}
.osstack > *{min-height:0;border-bottom:1px solid rgba(255,255,255,.28);
  display:flex;flex-direction:column;padding:clamp(20px,2.2vw,32px);
  transition:background .4s var(--os-ease)}
.osstack > *:last-child{border-bottom:0}
.osstack > a:hover{background:rgba(255,255,255,.06)}
.osstack > .oscell--img{padding:0}

/* the cells rise as the panel comes down */
.osmenu .oscell,.osmenu .osstack > *{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--os-ease),transform .5s var(--os-ease),background .4s var(--os-ease)}
.osmenu-open .osmenu .oscell,.osmenu-open .osmenu .osstack > *{opacity:1;transform:none}


/* ---------- the ShipOS block ---------- */
/* Top padding clears the floating mark. There is no bar to push content down,
   so a block whose first line starts at 64px runs straight under the wordmark:
   the scale statement was painting through "Arctic Autonomy". The nav is about
   70px of content plus its padding, and this clears it at every width. */
.os{position:relative;padding:clamp(88px,8vw,124px) clamp(20px,4vw,72px) clamp(52px,7vw,110px)}
.os--dark{background:var(--os-dark);color:#fff}
.os--light{background:var(--os-light);color:var(--ink)}

/* the hatched rule: a band of fine diagonals, drawn left to right on entry */
.os__rule{height:9px;width:0;
  background-image:repeating-linear-gradient(115deg,currentColor 0 1px,transparent 1px 5px);
  opacity:.5;transition:width 1.5s cubic-bezier(.77,0,.175,1)}
.os.is-on .os__rule{width:100%}

.os__head{display:flex;align-items:center;justify-content:space-between;
  margin-top:18px;margin-bottom:clamp(22px,3vw,40px)}
.os__kicker{display:inline-flex;align-items:center;gap:11px;
  font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.os__kicker i{width:9px;height:9px;background:currentColor;flex:none}
.os__num{font-size:.78rem;font-weight:500;letter-spacing:.06em;
  font-variant-numeric:tabular-nums}

/* the statement that opens a block */
.os__statement{font-size:clamp(1.5rem,2.9vw,2.75rem);font-weight:450;line-height:1.16;
  letter-spacing:-.024em;max-width:38ch}
.os--light .os__statement{max-width:32ch}

/* the huge uppercase title, for a block that is a heading rather than a claim */
.os__title{font-size:clamp(2.6rem,6.4vw,6.4rem);font-weight:450;line-height:.94;
  letter-spacing:-.03em;text-transform:uppercase}

/* the quote: a rule over each column, the mark alone on the left */
.os__quote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.62fr);
  gap:clamp(24px,4vw,64px);margin-top:clamp(34px,5vw,72px)}
.os__quote > *{border-top:1px solid var(--os-hair-d);padding-top:clamp(18px,2vw,30px)}
.os--light .os__quote > *{border-top-color:var(--os-hair-l)}
.os__mark{font-size:clamp(2.4rem,4vw,3.6rem);line-height:.8;font-weight:600}
.os__quote p{font-size:clamp(1rem,1.22vw,1.16rem);line-height:1.55;max-width:62ch}
.os__attrib{margin-top:clamp(18px,2.4vw,32px);font-size:.78rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;display:flex;gap:10px;align-items:baseline}

/* ---------- the figures ---------- */
/* One lead figure across the measure, then the rest two up. Each sits under its
   own letter and hairline, which is what keeps five numbers from reading as a
   dashboard. */
.osfig{margin-top:clamp(30px,4vw,58px)}
.osfig__lead{margin-bottom:clamp(26px,3.4vw,48px)}
.osfig__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3.4vw,48px) clamp(30px,4.6vw,72px)}
.osfig__item{border-top:1px solid var(--os-hair-l);padding-top:12px}
.os--dark .osfig__item{border-top-color:var(--os-hair-d)}
.osfig__k{display:block;font-size:.7rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;opacity:.65;margin-bottom:clamp(10px,1.4vw,20px)}
.osfig__n{display:block;font-size:clamp(2.2rem,5.2vw,5rem);font-weight:400;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.osfig__lead .osfig__n{font-size:clamp(2.4rem,6.6vw,6.2rem)}
.osfig__t{display:block;margin-top:clamp(12px,1.4vw,20px);
  font-size:clamp(.94rem,1.05vw,1.05rem);line-height:1.4}
.osfig__s{display:block;margin-top:8px;font-size:.76rem;letter-spacing:.04em;
  text-transform:uppercase;opacity:.6}

/* ---------- the capability rack ---------- */
.oscap{margin-top:clamp(34px,4.6vw,64px);
  border-top:1px solid var(--os-hair-d);padding-top:clamp(16px,1.8vw,26px)}
.os--light .oscap{border-top-color:var(--os-hair-l)}
.oscap__head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:clamp(18px,2.2vw,30px)}
.oscap__head span{font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.oscap__track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px)}
.oscap__card{border:1px solid var(--os-hair-d);padding:clamp(16px,1.8vw,24px);
  min-height:clamp(120px,11vw,164px);display:flex;flex-direction:column;
  transition:background .4s var(--os-ease)}
.os--light .oscap__card{border-color:var(--os-hair-l)}
.oscap__card:hover{background:rgba(255,255,255,.06)}
.os--light .oscap__card:hover{background:rgba(19,19,18,.05)}
.oscap__n{font-size:.7rem;letter-spacing:.1em;opacity:.6;font-variant-numeric:tabular-nums}
.oscap__t{margin-top:auto;font-size:clamp(.95rem,1.08vw,1.08rem);line-height:1.3;font-weight:450}
/* the hatched foot on every card, from the reference */
.oscap__card::after{content:"";display:block;height:7px;margin-top:14px;
  background-image:repeating-linear-gradient(115deg,currentColor 0 1px,transparent 1px 5px);
  opacity:.4}


/* ---------- motion ----------
   Numbers scramble, rules draw, prose writes itself on. Every state that hides
   a piece is gated on [data-os] on the root, which os.js sets: if the script
   never runs nothing is ever hidden and the block renders as finished text. */
[data-os] .os__w{display:inline-block}
[data-os] .os__c{display:inline-block;opacity:0;
  transition:opacity .5s linear,transform .5s var(--os-ease);transform:translateY(.14em)}
[data-os] .is-on .os__c{opacity:1;transform:none}
[data-os] .osfig__item,[data-os] .oscap__card{opacity:0;transform:translateY(1.4rem);
  transition:opacity 1s var(--os-ease),transform 1s var(--os-ease)}
[data-os] .is-on .osfig__item,[data-os] .is-on .oscap__card{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  [data-os] .os__c{opacity:1!important;transform:none!important;transition:none}
  [data-os] .osfig__item,[data-os] .oscap__card{opacity:1;transform:none;transition:none}
  .os__rule{width:100%;transition:none}
  .osmenu{transition:none}
}

@media (max-width:900px){
  .os__quote{grid-template-columns:1fr;gap:18px}
  .osfig__grid{grid-template-columns:1fr}
  .oscap__track{grid-template-columns:1fr 1fr}
  .osmenu{grid-template-columns:1fr;height:auto;
    max-height:calc(100vh - 70px);grid-auto-rows:min-content;
    align-content:start;overflow-y:auto}
  .oscell{border-right:0;border-bottom:1px solid rgba(255,255,255,.34)}
  .oscell--img{height:22vh}
}
@media (max-width:560px){
  .oscap__track{grid-template-columns:1fr}
  .osnav__brand b{font-size:1rem}
  .osnav__brand .brandmark{height:26px}
}


/* ---------- a pre-existing defect in the deployed page ----------
   site.css line 705 sets .rv{opacity:0} and only site.js ever adds .in, so with
   JavaScript disabled, blocked, or simply failed, the page's own H1 ("Logistics
   and operations for maritime") and three more headings render at zero opacity.
   They are in the document and invisible on screen. That is true of
   arcticautonomy.com right now.

   The fix does not touch site.css or site.js. os.js stamps [data-os] on the root
   as soon as it runs, so the absence of that attribute is a reliable "no script
   ran here" signal, and in that state the reveal is skipped and the text simply
   shows. When the scripts do run, this rule does not apply and the original
   animation is untouched. */
html:not([data-os]) .rv{opacity:1;transform:none}


/* ---------- the film blocks ----------
   Mach's unit: a small number, one short name, three lines of prose beside it,
   then a rectangle of film at the full measure. Nothing is cropped to a house
   aspect except the films, which are all shot 16/9. */
.osfilm{background:#000;color:#fff;padding:clamp(88px,8vw,124px) clamp(20px,4vw,72px) clamp(48px,6.5vw,104px)}
.osfilm__n{display:block;font-size:.78rem;font-weight:500;line-height:1.3;
  font-variant-numeric:tabular-nums;margin-bottom:clamp(12px,1.6vw,22px)}
.osfilm__head{display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);
  gap:clamp(18px,2.2vw,36px);align-items:start;margin-bottom:clamp(30px,3.8vw,58px)}
.osfilm h2{font-size:clamp(2rem,4.4vw,4.4rem);font-weight:450;line-height:1;
  letter-spacing:-.028em;text-transform:uppercase;white-space:nowrap}
.osfilm__head p{font-size:clamp(.98rem,1.12vw,1.1rem);line-height:1.48;max-width:38ch;
  padding-top:.5em;color:rgba(255,255,255,.82)}
.osfilm__stack{display:flex;flex-direction:column;gap:clamp(22px,2.8vw,44px)}
.osfilm__f{position:relative;aspect-ratio:16/9;overflow:hidden;background:#050505}
.osfilm__f video,.osfilm__f img{width:100%;height:100%;object-fit:cover;display:block}
/* two films side by side where one would leave the block short */
.osfilm__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px)}
.osfilm__pair .osfilm__f{aspect-ratio:4/3}

@media (max-width:900px){
  .osfilm__head{grid-template-columns:1fr;gap:12px}
  .osfilm h2{white-space:normal}
  .osfilm__head p{padding-top:0}
  .osfilm__pair{grid-template-columns:1fr}
  .osfilm__pair .osfilm__f{aspect-ratio:16/9}
}


/* ============================================================ DEFENSE PAGE
   Nominal's structure on a pitch black ground. Every label is small caps at
   0.68rem, every body run is 0.92rem, and the headings are the only large type
   on the page: the reference gets its density from that gap, not from filling
   the space. */
.df{background:#000;color:#fff}
.df__wrap{padding-inline:clamp(20px,4vw,72px)}
.df__k{font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}

/* opening: copy left, one photograph filling the right half */
.dfhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);
  min-height:88vh;border-bottom:1px solid rgba(255,255,255,.2)}
.dfhero__copy{padding:calc(clamp(58px,6.4vw,86px) + clamp(28px,4vw,64px)) clamp(20px,3vw,56px) clamp(28px,4vw,64px);
  display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.2)}
.dfhero h1{font-size:clamp(2rem,3.5vw,3.4rem);font-weight:450;line-height:1.08;
  letter-spacing:-.028em;max-width:15ch}
.dfhero__rule{border:0;border-top:1px solid rgba(255,255,255,.2);margin:clamp(20px,2.6vw,34px) 0 clamp(12px,1.4vw,18px)}
.dfhero__lead{font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.4;margin-top:10px}
.dfhero__body{margin-top:auto;padding-top:clamp(26px,3.4vw,52px);
  font-size:.92rem;line-height:1.62;max-width:46ch;color:rgba(255,255,255,.82)}
.dfhero__img{overflow:hidden;background:#050505}
.dfhero__img img,.dfhero__img video{width:100%;height:100%;object-fit:cover;display:block}

/* the features band: a label column, a statement, and a control */
.dfband{padding-block:clamp(44px,5.6vw,92px);border-bottom:1px solid rgba(255,255,255,.2)}
.dfband__top{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2fr) minmax(0,.6fr);
  gap:clamp(20px,3vw,52px);align-items:start;
  border-top:1px solid rgba(255,255,255,.2);padding-top:clamp(16px,1.8vw,26px)}
.dfband h2{font-size:clamp(1.4rem,2.35vw,2.3rem);font-weight:450;line-height:1.16;
  letter-spacing:-.024em;max-width:30ch}
.dfband__top p{margin-top:clamp(14px,1.6vw,22px);font-size:.98rem;line-height:1.52;
  max-width:56ch;color:rgba(255,255,255,.8)}
.dfband__cta{justify-self:end}

/* the card row: a capture on a plate, then a title, a small caps label and prose */
.dfcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,40px);margin-top:clamp(30px,4vw,64px)}
.dfcard__shot{background:#fff;overflow:hidden;
  height:clamp(180px,17vw,260px);display:flex;align-items:flex-start;justify-content:center}
.dfcard__shot img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.dfcard h3{margin-top:clamp(16px,1.8vw,26px);font-size:clamp(1.02rem,1.32vw,1.3rem);
  font-weight:450;letter-spacing:-.018em;line-height:1.2}
.dfcard hr{border:0;border-top:1px solid rgba(255,255,255,.2);margin:clamp(12px,1.4vw,18px) 0}
.dfcard p{font-size:.9rem;line-height:1.56;color:rgba(255,255,255,.78)}
.dfcard .df__k{display:block;margin-bottom:10px}

/* two up, for the pair of surfaces */
.dftwo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,40px);
  padding-block:clamp(44px,5.6vw,92px);border-bottom:1px solid rgba(255,255,255,.2)}
.dftwo__item > .df__k{display:block;padding-bottom:clamp(12px,1.4vw,18px);
  border-bottom:1px solid rgba(255,255,255,.2);margin-bottom:clamp(16px,1.8vw,26px)}
.dftwo__shot{background:#0d0d0d;overflow:hidden;aspect-ratio:16/10}
.dftwo__shot img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.dftwo__item p{margin-top:clamp(14px,1.6vw,22px);font-size:.96rem;line-height:1.5}

/* the closing split: a drawing on the left, the ask on the right */
.dfend{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);min-height:60vh}
.dfend__art{position:relative;overflow:hidden;border-right:1px solid rgba(255,255,255,.2);
  background:#000}
.dfend__art img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.25) brightness(.9)}
.dfend__art .df__k{position:absolute;top:clamp(18px,2vw,28px);left:clamp(18px,2vw,28px);z-index:2}
.dfend__copy{padding:clamp(28px,4vw,64px) clamp(20px,3vw,56px)}
.dfend h2{font-size:clamp(1.5rem,2.4vw,2.4rem);font-weight:450;line-height:1.1;
  letter-spacing:-.024em;max-width:16ch}
.dfend p{margin-top:clamp(14px,1.6vw,22px);font-size:.98rem;line-height:1.5;max-width:34ch;
  color:rgba(255,255,255,.82)}
.dfend .osgo{margin-top:clamp(22px,2.6vw,36px)}

@media (max-width:1000px){
  .dfhero{grid-template-columns:1fr;min-height:0}
  .dfhero__copy{border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
  .dfhero__img{height:52vh}
  .dfband__top{grid-template-columns:1fr;gap:14px}
  .dfband__cta{justify-self:start}
  .dfcards{grid-template-columns:1fr}
  .dftwo{grid-template-columns:1fr}
  .dfend{grid-template-columns:1fr}
  .dfend__art{border-right:0;height:44vh}
}


/* ============================================================ PROVENANCE
   The marks arrive desaturated and come up to full colour as the block enters,
   which is the only place on the page colour is used as an event. Height is
   normalised per mark rather than width: these files have wildly different
   aspect ratios and matching their widths would make the square seal tower over
   the wordmarks. */
.osprov__row{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(26px,4vw,72px);margin-top:clamp(30px,4vw,58px)}
.osprov__row img{height:clamp(26px,2.6vw,40px);width:auto;
  filter:grayscale(1) brightness(1.9) contrast(.85);opacity:.55;
  transition:filter 1.1s var(--os-ease),opacity 1.1s var(--os-ease)}
/* the seal is square and reads small at a shared height, so it gets its own */
.osprov__row .osprov__seal{height:clamp(38px,3.6vw,56px)}
.osprov.is-on .osprov__row img{filter:none;opacity:1}
.osprov.is-on .osprov__row img:nth-child(1){transition-delay:80ms}
.osprov.is-on .osprov__row img:nth-child(2){transition-delay:200ms}
.osprov.is-on .osprov__row img:nth-child(3){transition-delay:320ms}
.osprov.is-on .osprov__row img:nth-child(4){transition-delay:440ms}
.osprov.is-on .osprov__row img:nth-child(5){transition-delay:560ms}
@media (prefers-reduced-motion:reduce){
  .osprov__row img{filter:none;opacity:1;transition:none}
}


/* ============================================================ FOOTER, BLACK
   site.css paints the footer on --paper. The page it now closes is black, and a
   cream slab under it read as the start of another site. Overridden here rather
   than in site.css, which is still the deployed stylesheet. */
.foot{background:#000;color:#fff;border-top:1px solid rgba(255,255,255,.2)}
.foot .brandline b,.foot__made{color:#fff}
.foot .brandmark{background-color:#fff}
.foot__legal,.foot__legal a,.foot__legal span{color:rgba(255,255,255,.72)}
.foot__legal a:hover{color:#fff}
.foot__flag{box-shadow:0 0 0 1px rgba(255,255,255,.28)}


/* ---------- clearance for the pages that kept site.css ----------
   The old bar was position:sticky, so it took 70px of flow on every page and
   everything below it started under that. Removing the bar removed the flow
   space with it, and these pages pulled their first heading straight up under
   the floating mark: "Privacy policy", "Terms of use", "Contact us" and the
   product page's opening line were all painting through the wordmark.

   Only the first block on each page needs it. The index does not appear here
   because its own sections already carry the clearance. */
.osnav ~ .centerhead:first-of-type,
.osnav ~ .formpage,
.osnav ~ .legal{padding-top:clamp(96px,9vw,140px)}


/* ============================================================ REVISIONS

   The lede that sits under a title block. The title carries the signal and this
   carries the argument, so it is small, tight and capped short. */
.os__lede{margin-top:clamp(22px,2.8vw,40px);font-size:clamp(1rem,1.18vw,1.16rem);
  line-height:1.5;max-width:52ch;color:rgba(255,255,255,.86)}
.os--light .os__lede{color:rgba(19,19,18,.8)}

/* More air between blocks. Each one is a separate idea with its own film, and
   at the old spacing they ran together into a single scroll. */
.os,.osfilm{padding-bottom:clamp(80px,10vw,160px)}
.osfilm__stack{gap:clamp(30px,4vw,68px)}
.osfilm + .osfilm,.os + .osfilm,.osfilm + .os{border-top:1px solid rgba(255,255,255,.12)}

/* Provenance as wordmarks. These are places people have worked, and the CIA
   seal, the NASA insignia and the DoD seal are each protected by their own
   statute: rendering a registered mark next to a claim about its owner is a
   different act from naming them, and it is the act that reads as endorsement.
   Set as type, they say exactly what is true and nothing more. */
.osprov__row{gap:clamp(22px,3.4vw,64px) clamp(30px,4.4vw,80px)}
.osprov__row span{font-size:clamp(1rem,1.5vw,1.5rem);font-weight:450;
  letter-spacing:-.014em;white-space:nowrap;color:rgba(255,255,255,.42);
  transition:color 1.1s var(--os-ease)}
.osprov.is-on .osprov__row span{color:#fff}
.osprov.is-on .osprov__row span:nth-child(1){transition-delay:80ms}
.osprov.is-on .osprov__row span:nth-child(2){transition-delay:200ms}
.osprov.is-on .osprov__row span:nth-child(3){transition-delay:320ms}
.osprov.is-on .osprov__row span:nth-child(4){transition-delay:440ms}
.osprov.is-on .osprov__row span:nth-child(5){transition-delay:560ms}
@media (prefers-reduced-motion:reduce){
  .osprov__row span{color:#fff;transition:none}
}

/* The panel leaves the bar behind rather than covering it. Opening it used to
   black out the whole screen including the mark, so the one thing that tells
   you whose site this is went away at exactly the moment you were navigating
   it. Now the bar stays, takes a ground of its own, and the panel starts under
   its bottom edge. */
:root{--osbar:clamp(60px,5.4vw,78px)}
/* inset first, then the offsets. Written the other way round, the shorthand
   came last and reset all four sides back to auto, and the panel collapsed to
   the height of its own content instead of filling the screen under the bar. */
.osmenu{inset:auto;top:var(--osbar);bottom:0;left:0;right:0;
  position:fixed;padding-top:0;
  border-top:1px solid rgba(255,255,255,.28)}
.osmenu-open .osnav{background:#000;height:var(--osbar);
  padding-block:0;align-items:center}

@media (max-width:900px){
  .osprov__row span{font-size:1rem}
}


/* ============================================================ TYPE SCALE
   One ladder for the whole page, so nothing competes:

     film name   .osfilm h2      2.0 -> 3.4rem   the only large type
     statement   .os__statement  1.3 -> 2.1rem   a claim, two lines at most
     lede        .os__lede       0.98 -> 1.06rem the argument under it
     kicker/num  .os__kicker     0.72rem         labels

   It was: statement at 2.75rem, lede at 1.16rem and a 6.4rem uppercase title
   in the same column, which is four sizes fighting inside one block. */
.os__statement{font-size:clamp(1.3rem,2.05vw,2.1rem);font-weight:450;line-height:1.24;
  letter-spacing:-.02em;max-width:44ch}
.os__lede{margin-top:clamp(16px,1.9vw,26px);font-size:clamp(.98rem,1.05vw,1.06rem);
  line-height:1.56;max-width:56ch;color:rgba(255,255,255,.74)}
.os__title{font-size:clamp(1.9rem,3.4vw,3.4rem);line-height:1.04}
.osfilm h2{font-size:clamp(2rem,3.4vw,3.4rem)}
.os__kicker,.os__num,.oscap__head span{font-size:.72rem}
.osfilm__head p{font-size:clamp(.96rem,1.04vw,1.04rem)}
.oscap__t{font-size:clamp(.94rem,1.02vw,1.02rem)}

/* the provenance row sits apart from the block above it, on its own black */
.osprov__row{margin-top:clamp(34px,4.4vw,66px);
  padding-top:clamp(26px,3vw,44px);border-top:1px solid rgba(255,255,255,.16)}
.osprov__row span{font-size:clamp(.95rem,1.15vw,1.18rem)}


/* ============================================================ ONE GROUND
   Every dark surface on this page is #000 now, so there is nothing to separate
   and no seam to hide. The rules that used to stitch the grey blocks to the
   black ones are removed: they were drawing attention to a join that no longer
   exists. The hatched rule at the head of a block stays, because that marks the
   start of a section rather than the edge between two colours. */
.os--dark,.osfilm,.foot{background:#000}
.os + .osfilm,.osfilm + .osfilm,.osfilm + .os,.os + .os{border-top:0}
.foot{border-top:0}
.osprov__row{border-top:0;padding-top:0;margin-top:clamp(30px,3.8vw,58px)}


/* ============================================================ REFERENCE PASS

   The new mark. It is a wide lockup, so it is sized on height and the wordmark
   sits beside it on the same optical baseline. */
.osmark{height:22px;width:auto;display:block;flex:none}
.osmark--foot{height:34px}
.foot__brand .brandline,.foot .brandline{align-items:center}

/* The slate ground for the capability band: the reference is not black there,
   it is a deep desaturated navy with a fine star field over it, and the cards
   read as cut out of that rather than drawn on nothing. The field is two
   radial-gradient layers rather than an image, so it costs no request and
   scales to any width. */
.os--slate{
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 62% 14%, rgba(255,255,255,.38), transparent 60%),
    radial-gradient(1px 1px at 82% 46%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,.32), transparent 60%),
    radial-gradient(1px 1px at 72% 82%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 8% 78%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(120% 90% at 50% 0%, #2b3a47 0%, #223039 45%, #1b2730 100%);
  color:#fff}
.os--slate .oscap__card{border-color:rgba(255,255,255,.3)}
.os--slate .oscap__card:hover{background:rgba(255,255,255,.07)}
.os--slate .oscap{border-top-color:rgba(255,255,255,.3)}

/* No grey type anywhere. The lede and the film body were set against white at
   74 and 82 percent, which on a black ground is grey however it is written. */
.os__lede,.osfilm__head p,.oscell p,.os__quote p{color:#fff}
.oscap__n{color:rgba(255,255,255,.72)}

/* The supplied marks. Round seals and a wide wordmark cannot share one height:
   matched, the seals tower over Nokia and Nokia runs half the row. Seals get a
   height, the wordmark gets a smaller one, and both are optically level. */
.osprov__row img{height:clamp(30px,3vw,46px);width:auto;flex:none;
  opacity:.42;filter:grayscale(1);
  transition:opacity 1.1s var(--os-ease),filter 1.1s var(--os-ease)}
.osprov__row img.osprov--seal{height:clamp(44px,4.4vw,68px)}
.osprov.is-on .osprov__row img{opacity:1;filter:none}
.osprov.is-on .osprov__row img:nth-child(1){transition-delay:80ms}
.osprov.is-on .osprov__row img:nth-child(2){transition-delay:200ms}
.osprov.is-on .osprov__row img:nth-child(3){transition-delay:320ms}
.osprov.is-on .osprov__row img:nth-child(4){transition-delay:440ms}
.osprov.is-on .osprov__row img:nth-child(5){transition-delay:560ms}
@media (prefers-reduced-motion:reduce){
  .osprov__row img{opacity:1;filter:none;transition:none}
}


/* ============================================================ STRIP IT BACK

   The hatched rule is gone from the markup, and every remaining rule with it.
   It repeated at the head of eight blocks on one page, which turned a device
   into wallpaper. The ground and the spacing separate the sections now. */
.os__rule{display:none}
.os__head{border:0}
.os__quote,.os__quote > *{border:0;padding-top:0}
.oscap{border-top:0;padding-top:0}
.osprov__row{border-top:0;padding-top:0}

/* The panel is a bar's worth of drop, not a screen. It filled the viewport,
   which made a two route menu feel like a page. */
.osmenu{bottom:auto;height:min(46vh,380px)}
.oscell,.osstack{border:0}
.oscell--img{background:#000}
/* every cell the same size, pictures included */
.osmenu{grid-template-columns:repeat(4,minmax(0,1fr))}
.osmenu .oscell{padding:clamp(18px,2vw,28px)}

@media (max-width:900px){
  .osmenu{height:auto;max-height:calc(100vh - var(--osbar));
    grid-template-columns:1fr;grid-auto-rows:min-content;
    align-content:start;overflow-y:auto}
  .oscell--img{height:22vh}
}

/* The padding I put on every panel cell also hit the picture cells, so the two
   photographs sat inset with black around them instead of filling. Pictures
   fill their cell edge to edge; only the text cells are padded. */
.osmenu .oscell--img{padding:0}
.osmenu .oscell--img img{width:100%;height:100%;object-fit:cover;display:block}
.oscell hr{display:none}


/* ============================================================ GREY + GRID

   The reference block under the film is not black, it is a lifted grey. Black
   on black on black gave the page no register at all: this is the one surface
   that steps up. */
.os--grey{background:#232323;color:#fff}

/* The mandate grid: three columns, each a customer, a figure and what it costs
   them. Nothing between them but space, which is what "rigid" means here: the
   columns line up on a shared baseline and every part starts at the same
   height in each. */
.osgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.6vw,64px);margin-top:clamp(34px,4.4vw,68px)}
.osgrid__col{display:flex;flex-direction:column}
.osgrid__k{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:clamp(14px,1.6vw,22px)}
.osgrid__n{font-size:clamp(2.1rem,3.6vw,3.6rem);font-weight:450;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  margin-bottom:clamp(14px,1.6vw,22px)}
.osgrid__col p{font-size:clamp(.92rem,1vw,1rem);line-height:1.55;color:#fff}

/* The marks sit on one optical line. Aligning a round seal and a wide wordmark
   on their boxes leaves the wordmark floating: the row centres them and each
   family gets the height that makes it read at the same weight as the others. */
.osprov__row{align-items:center}
.osprov__row img{display:block;object-fit:contain}

@media (max-width:900px){
  .osgrid{grid-template-columns:1fr;gap:clamp(30px,5vw,48px)}
}


/* Optical weight, not box height. A round seal carries its artwork inside a
   circle with its own margin, so at the same height as a wordmark it reads
   about half the weight: the seals were 63px and Nokia was 43px, and Nokia
   still ran the row. The seals go up, the wordmark comes down, and the five
   marks read level. */
.osprov__row{gap:clamp(24px,3.4vw,58px)}
.osprov__row img{height:clamp(26px,2.4vw,34px)}
.osprov__row img.osprov--seal{height:clamp(54px,5.6vw,84px)}

/* The provenance row centres on the measure. Left aligned it left a third of
   the band empty on the right and the five marks read as the start of a list
   that had been cut off. */
.osprov__row{justify-content:center}
.osprov .os__statement{text-align:center;max-width:none;margin-inline:auto}

/* The mandate is on the slate ground now, so its parts take the contrast that
   ground needs rather than the one black needed. */
.os--slate .osgrid__k,.os--slate .osgrid__n,.os--slate .osgrid__col p{color:#fff}


/* ============================================================ ROWS

   One subject per screen: picture on one side, two or three sentences on the
   other, alternating down the page. The pairs-under-one-heading arrangement it
   replaces read as a contact sheet, because no picture had a caption and no
   sentence had room. */
.osrow{background:#000;padding-block:clamp(70px,9vw,150px)}
.osrow__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(30px,5vw,96px);align-items:center;padding-inline:clamp(20px,4vw,72px)}
.osrow--flip .osrow__media{order:2}
.osrow__media{overflow:hidden;background:#050505}
.osrow__media img,.osrow__media video{width:100%;height:auto;display:block}
.osrow__media--film{aspect-ratio:16/9}
.osrow__media--film video{height:100%;object-fit:cover}
.osrow__k{display:block;font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-bottom:clamp(14px,1.6vw,22px)}
.osrow h2{font-size:clamp(2rem,3.6vw,3.6rem);font-weight:450;line-height:1;
  letter-spacing:-.03em;text-transform:uppercase;margin-bottom:clamp(16px,1.8vw,26px)}
.osrow p{font-size:clamp(.98rem,1.1vw,1.1rem);line-height:1.58;max-width:46ch;color:#fff}

/* The two accents. They are the only colour in the type on the whole site, and
   they arrive with the sentence rather than sitting there: the figure lights as
   the line writes past it. */
.osred,.osblue{font-style:normal;font-weight:500;
  color:#fff;transition:color .9s var(--os-ease) .35s}
.is-on .osred{color:#C8342B}
.is-on .osblue{color:#4C7FE0}
@media (prefers-reduced-motion:reduce){
  .osred,.osblue{transition:none}
}

/* The second grey, for the block that was blue. */
.os--grey2{background:#1C1C1C;color:#fff}
.os--grey2 .osgrid__k,.os--grey2 .osgrid__n,.os--grey2 .osgrid__col p{color:#fff}

/* The rules are back, at the head of a block only. */
.os__rule{display:block}

/* The provenance line is a label now, not a heading. */
.osprov__lead{font-size:clamp(.86rem,.95vw,.98rem);font-weight:450;
  letter-spacing:.02em;color:#fff;text-align:center;margin-inline:auto}

@media (max-width:900px){
  .osrow__in{grid-template-columns:1fr;gap:24px}
  .osrow--flip .osrow__media{order:0}
}


/* ============================================================ FOOTER
   Three columns and a base line, not a centred stack. The old one was the mark,
   a flag and four links down the middle of a very wide page, which gave a
   reader nothing to scan and left the routes to the rest of the site invisible. */
.osfoot{background:#000;color:#fff;
  padding:clamp(56px,7vw,110px) clamp(20px,4vw,72px) clamp(26px,3vw,44px)}
.osfoot__in{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,72px);text-align:left}
.osfoot__mark{display:inline-flex;align-items:center;gap:11px;color:#fff}
.osfoot__mark b{font-size:1.12rem;font-weight:500;letter-spacing:-.02em}
.osfoot__brand p{margin-top:clamp(16px,1.8vw,24px);font-size:.95rem;line-height:1.55;
  max-width:42ch;color:#fff}
.osfoot__flag{display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(18px,2vw,28px);font-size:.8rem;color:#fff}
.osfoot__flag svg{width:24px;height:13px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.osfoot__col h3{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:clamp(14px,1.6vw,20px)}
.osfoot__col a{display:block;padding:7px 0;font-size:.95rem;color:#fff;width:max-content;
  position:relative}
.osfoot__col a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;
  background:#fff;transition:right .45s var(--os-ease)}
.osfoot__col a:hover::after{right:0}
.osfoot__base{margin-top:clamp(40px,5vw,80px);display:flex;flex-wrap:wrap;gap:10px 24px;
  font-size:.82rem;color:#fff}
.osfoot__base .sp{margin-left:auto}
@media (max-width:900px){
  .osfoot__in{grid-template-columns:1fr;gap:34px}
  .osfoot__base .sp{margin-left:0;width:100%}
}


/* ============================================================ LAST PASS

   The landing photograph, full bleed behind the bar like the film it replaces. */
.hero--still{position:relative;overflow:hidden}
.hero__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* The band under it is a line and a label, nothing more. It carried a statement,
   a quote mark, a five sentence argument and two columns of rules, which is a
   section in its own right sitting between the hero and the first row. */
.os--tight{padding-block:clamp(46px,5vw,80px)}
.os--tight .os__statement{max-width:64ch}

/* The rows lost their headings, so the kicker carries the section and needs the
   weight to do it. */
.osrow__k{font-size:.78rem;letter-spacing:.16em}
.osrow p{font-size:clamp(1rem,1.2vw,1.22rem);line-height:1.5;max-width:40ch}

/* No hatched rule on the provenance band, and the marks go up. */
.osprov .os__rule{display:none}
.osprov__row{gap:clamp(30px,4.4vw,76px)}
.osprov__row img{height:clamp(34px,3.2vw,46px)}
.osprov__row img.osprov--seal{height:clamp(72px,7.6vw,116px)}


/* ============================================================ THE BAR

   Solid black, three slots: the wordmark set on two lines at the left, the mark
   centred, the lines at the right. It is a bar again rather than a floating
   pair of marks, so nothing below it has to leave room for a shape that moves. */
:root{--osbar:clamp(58px,5vw,72px)}
.osnav{position:fixed;inset:0 0 auto 0;z-index:200;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:var(--osbar);padding-inline:clamp(16px,2.4vw,34px);
  background:#000;pointer-events:auto;mix-blend-mode:normal}
.osnav__word{display:flex;flex-direction:column;justify-self:start;
  color:#fff;line-height:1.06;letter-spacing:.02em;
  font-size:clamp(.72rem,.92vw,.86rem);font-weight:500;text-transform:uppercase}
.osnav__mark{justify-self:center;display:block}
.osnav__mark img{height:clamp(20px,2.2vw,28px);width:auto;display:block}
.osburger{justify-self:end;margin-right:0}
/* the old floating brand is gone */
.osnav__brand{display:none}

/* Everything sits below a real bar now, so the clearance the floating mark
   needed comes off. */
.os,.osfilm,.osrow{padding-top:clamp(56px,6vw,96px)}
.osnav ~ .centerhead:first-of-type,
.osnav ~ .formpage,
.osnav ~ .legal{padding-top:calc(var(--osbar) + clamp(34px,4vw,64px))}

/* ============================================================ INSET HERO
   The film is a plate laid on the page, not the page's ground. It clears the
   bar and keeps a margin on the other three sides. */
.oshero{background:#000;padding:calc(var(--osbar) + clamp(12px,1.4vw,22px)) clamp(12px,1.4vw,22px) clamp(12px,1.4vw,22px)}
.oshero__frame{position:relative;width:100%;
  height:calc(100vh - var(--osbar) - clamp(24px,2.8vw,44px));
  height:calc(100svh - var(--osbar) - clamp(24px,2.8vw,44px));
  overflow:hidden;background:#050505}
.oshero__frame video{width:100%;height:100%;object-fit:cover;display:block}

.osmenu{top:var(--osbar)}

@media (max-width:640px){
  .osnav__word{font-size:.68rem}
  .oshero__frame{height:min(64vh,520px)}
}