/* Noble Trading Manufacturing
   Every colour below was sampled from the supplied logo (Noble-Logo-22_6.jpg),
   not chosen. The mark is three roll formed sections interlocking, each drawn with
   a lit face and a shadow face. That is where the palette's structure comes from.

   Semantic rule, applied throughout:
     TEAL   the company and its product. Primary actions, links, active state.
     RUST   safety and compliance only. Audits, damage, load signage, warnings.
     STEEL  structure. Rules, labels, borders, captions.
   Rust never carries a general call to action. Teal never carries a warning. */

:root{
  /* sampled: rust profile */
  --rust-shadow:#842D11;
  --rust:#A53915;
  --rust-lit:#DE4D1D;
  /* sampled: teal profile */
  --teal-shadow:#019494;
  --teal-lit:#01DFDF;
  --teal-deep:#016F6F;      /* darkened from --teal-shadow to pass contrast on paper */
  /* sampled: steel profile */
  --steel-shadow:#848484;
  --steel:#999999;
  --steel-lit:#B9B9B9;
  /* sampled: wordmark */
  --ink:#1A1A1A;

  /* derived grounds */
  --paper:#FBFBFC;
  --sheet:#FFFFFF;
  --carbon:#12181B;
  --carbon-lo:#0B1013;
  --rule:#E2E5E8;
  --rule-strong:#C9CED3;
  --ink-mid:#555C61;
  /* --steel-shadow reads at 3.74:1 on white, under the 4.5:1 floor. Small mono
     labels on the paper ground use this darkened step instead; the sampled steel
     is kept for dark panels and for decorative rules, where it passes. */
  --label:#6E7378;

  --shell:1220px;
  --gut:24px;

  --f-display:"Saira","Arial Narrow",sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.06;letter-spacing:-.012em;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}

.data{font-family:var(--f-data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}

/* section label: a mono caption with a section-profile lozenge */
.eyebrow{
  font-family:var(--f-data);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-deep);font-weight:600;display:flex;align-items:center;gap:12px;margin:0 0 22px;
}
.eyebrow::before{content:"";width:8px;height:8px;border:1.5px solid var(--teal-deep);flex:none;transform:rotate(45deg)}
.eyebrow--safety{color:var(--rust)}
.eyebrow--safety::before{border-color:var(--rust)}
.sec--deep .eyebrow,.audit .eyebrow{color:var(--teal-lit)}
.sec--deep .eyebrow::before,.audit .eyebrow::before{border-color:var(--teal-lit)}
.audit .eyebrow--safety{color:var(--rust-lit)}
.audit .eyebrow--safety::before{border-color:var(--rust-lit)}

.rule{height:1px;background:var(--rule);border:0;margin:0}

/* =========================================================
   TOP BAR + NAV
   ========================================================= */
.topbar{background:var(--carbon);color:var(--steel-lit);border-bottom:1px solid #ffffff12}
.topbar .shell{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{color:var(--teal-lit)}
.topbar .certs{display:flex;gap:22px;flex-wrap:wrap}
.topbar .certs span{display:flex;align-items:center;gap:8px;color:var(--steel-lit)}
.topbar .certs span::before{content:"";width:5px;height:5px;border:1px solid var(--teal-shadow);transform:rotate(45deg);flex:none}

.nav{position:sticky;top:0;z-index:60;background:#fbfbfcf2;backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--rule)}
.nav .shell{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:20px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.brand__mark{width:40px;height:auto;flex:none}
.brand__word{width:132px;height:auto;color:var(--ink);flex:none}
.foot .brand__word{color:#fff;width:148px}

.nav__links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__links a{
  text-decoration:none;font-size:14.5px;font-weight:450;color:var(--ink-mid);
  padding:10px 13px;display:block;position:relative;transition:color .16s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav__links a[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--teal-shadow)}
.nav__cta{
  display:inline-flex;align-items:center;gap:9px;background:var(--teal-deep);color:#fff;
  text-decoration:none;padding:13px 20px;font-weight:600;font-size:14.5px;flex:none;
  transition:background .16s var(--ease);
}
.nav__cta:hover{background:var(--carbon)}

.burger{display:none;background:none;border:1px solid var(--rule-strong);width:44px;height:44px;padding:0;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* =========================================================
   HERO — the mark is the hero, annotated like a drawing
   ========================================================= */
.hero{background:var(--paper);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 72% 42%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 72% 42%,#000 0%,transparent 78%);
}
.hero .shell{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding:88px 24px 84px}
.hero h1{font-size:clamp(38px,4.9vw,62px);letter-spacing:-.024em;max-width:16ch;font-weight:700}
.hero h1 em{font-style:normal;color:var(--teal-deep)}
.hero__lede{font-size:clamp(16.5px,1.35vw,19px);color:var(--ink-mid);max-width:52ch;margin:26px 0 26px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.badge{
  display:inline-flex;align-items:center;gap:11px;border:1px solid var(--teal-deep);
  color:var(--teal-deep);background:#016f6f0a;padding:11px 15px;margin:0 0 32px;
  font-family:var(--f-data);font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
}
.badge::before{content:"";width:8px;height:8px;border:1.5px solid var(--teal-deep);transform:rotate(45deg);flex:none}

.figure{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:0 0 56px}
.figure__mark{width:min(100%,320px);height:auto;overflow:visible}
.figure__mark .sect{transform-origin:center}
.callouts{position:absolute;inset:0;pointer-events:none}
.callout{position:absolute;display:flex;align-items:center;gap:9px}
.callout__line{height:1px;background:var(--rule-strong);width:32px;flex:none}
.callout__dot{width:5px;height:5px;border:1px solid var(--steel-shadow);transform:rotate(45deg);flex:none}
.callout__t{font-family:var(--f-data);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid);white-space:nowrap}
.callout--a{top:6%;right:0}
.callout--c{bottom:22%;right:0}
.callout--b{bottom:0;left:0;flex-direction:row-reverse}

.legend{display:grid;grid-template-columns:repeat(4,auto);border-top:1px solid var(--rule)}
.legend__i{padding:20px 24px 0 0;margin-right:24px;border-right:1px solid var(--rule)}
.legend__i:last-child{border-right:0;margin-right:0}
.legend__k{font-family:var(--f-display);font-size:21px;font-weight:700;color:var(--ink);line-height:1}
.legend__v{font-family:var(--f-data);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--label);margin-top:9px}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 24px;font-weight:600;font-size:15px;
  text-decoration:none;border:0;cursor:pointer;font-family:var(--f-body);
  transition:background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
}
.btn--primary{background:var(--teal-deep);color:#fff}
.btn--primary:hover{background:var(--carbon)}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn--line:hover{box-shadow:inset 0 0 0 1px var(--ink);background:var(--ink);color:#fff}
.btn--onDark{background:#fff;color:var(--ink)}
.btn--onDark:hover{background:var(--teal-lit);color:var(--carbon)}
.btn--safety{background:var(--rust);color:#fff}
.btn--safety:hover{background:var(--rust-shadow)}
.btn:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px}

/* =========================================================
   SECTIONS
   ========================================================= */
.sec{padding:92px 0}
.sec--sheet{background:var(--sheet);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec--deep{background:var(--carbon);color:#fff}
.sec--deep h2,.sec--deep h3{color:#fff}
.sec--deep p{color:#AEB6BB}

.sec__head{max-width:66ch;margin-bottom:50px}
.sec__head h2{font-size:clamp(29px,3.2vw,42px);margin-bottom:18px}
.sec__head p{color:var(--ink-mid);font-size:17.5px}
.sec--deep .sec__head p{color:#9DA5AB}

.strip{background:var(--sheet);border-bottom:1px solid var(--rule)}
.strip .shell{display:grid;grid-template-columns:repeat(4,1fr)}
.strip__cell{padding:30px 26px 30px 0;border-right:1px solid var(--rule)}
.strip__cell:last-child{border-right:0}
.strip__k{font-family:var(--f-display);font-size:23px;font-weight:700}
.strip__v{font-family:var(--f-data);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--label);margin-top:8px}

/* =========================================================
   TITLE BLOCK CARDS
   Modelled on the title block of an engineering drawing: the subject above,
   the identifying fields ruled off beneath it.
   ========================================================= */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(324px,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.plate{
  background:var(--sheet);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;
  transition:background .18s var(--ease);
}
.plate::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal-shadow);
  transform:scaleY(0);transform-origin:top;transition:transform .28s var(--ease);
}
.plate:hover::after{transform:scaleY(1)}
.plate:focus-visible{outline:2px solid var(--teal-deep);outline-offset:-2px}

.plate__img{aspect-ratio:16/10;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--rule)}
.plate__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.plate:hover .plate__img img{transform:scale(1.03)}
.plate__body{padding:26px 24px 18px}
.plate__body h3{font-size:20px;margin-bottom:10px}
.plate__body p{font-size:14.8px;color:var(--ink-mid);line-height:1.62}

.spec{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr}
.spec li{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.spec li:nth-child(2n){border-right:0}
.spec li:nth-last-child(-n+2){border-bottom:0}
.spec .k{font-family:var(--f-data);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
.spec .v{font-family:var(--f-data);font-size:12.5px;font-weight:600;color:var(--ink)}
.plate__more{
  padding:16px 24px 20px;font-family:var(--f-data);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-deep);font-weight:600;display:flex;align-items:center;gap:8px;
}
.plate__more svg{transition:transform .18s var(--ease)}
.plate:hover .plate__more svg{transform:translateX(4px)}

/* =========================================================
   PROCESS — a real sequence, so it is numbered
   ========================================================= */
.flow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ffffff24}
.flow__step{padding:32px 28px 0 0;border-right:1px solid #ffffff14}
.flow__step:last-child{border-right:0}
.flow__step:not(:first-child){padding-left:28px}
.flow__n{font-family:var(--f-data);font-size:10.5px;letter-spacing:.16em;color:var(--teal-lit);font-weight:600;margin-bottom:15px}
.flow__step h3{font-size:19px;margin-bottom:11px}
.flow__step p{font-size:14.8px;line-height:1.62}

/* =========================================================
   SPLIT
   ========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule)}
.split__media .ph{aspect-ratio:4/3}
.split h2{font-size:clamp(27px,2.9vw,38px);margin-bottom:20px}
.split p{color:var(--ink-mid)}
.sec--deep .split p{color:#AEB6BB}

.ticks{list-style:none;margin:24px 0 30px;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:12px;font-size:16px;color:var(--ink-mid)}
.sec--deep .ticks li{color:#AEB6BB}
.ticks li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border:1px solid var(--teal-shadow);transform:rotate(45deg)}
.sec--deep .ticks li::before{border-color:var(--teal-lit)}

.brands{display:grid;grid-template-columns:1fr 1fr;border:1px solid #ffffff20;margin-top:10px}
.brandcard{padding:32px 28px;border-right:1px solid #ffffff20}
.brandcard:last-child{border-right:0}
.brandcard__n{font-family:var(--f-display);font-size:25px;font-weight:700;letter-spacing:.03em;color:#fff}
.brandcard__t{font-family:var(--f-data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-lit);margin:9px 0 15px}
.brandcard p{font-size:14.8px;margin:0}

/* =========================================================
   SAFETY BAND — the only place rust leads
   ========================================================= */
.audit{background:var(--carbon-lo);color:#fff;border-top:2px solid var(--rust)}
.audit .shell{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;padding-top:82px;padding-bottom:82px}
.audit h2{font-size:clamp(27px,3vw,40px);margin-bottom:18px;color:#fff}
.audit p{color:#AEB6BB}
.audit__panel{border:1px solid var(--rust);padding:34px 30px;background:#ffffff05}
.audit__panel h3{font-size:20px;color:#fff;margin-bottom:12px}
.audit__panel p{color:#B8BEC3;font-size:14.8px;margin-bottom:22px}
.audit__panel .btn{width:100%;justify-content:center}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--f-data);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--label);margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--rule-strong);background:var(--sheet);
  font-family:var(--f-body);font-size:16px;color:var(--ink);border-radius:0;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--teal-deep);box-shadow:0 0 0 3px #016f6f22}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__note{font-size:13px;color:var(--label);margin-top:14px}
.form__msg{margin-top:16px;padding:13px 15px;font-size:15px;display:none}
.form__msg--ok{background:#0E5C4A;color:#fff;display:block}
.form__msg--err{background:var(--rust-shadow);color:#fff;display:block}

.details{background:var(--carbon);color:#fff;padding:36px 32px}
.details h3{font-size:19px;margin-bottom:8px}
.details__lede{color:#9DA5AB;font-size:14.8px;margin-bottom:24px}
.dl{list-style:none;margin:0;padding:0}
.dl li{padding:16px 0;border-bottom:1px solid #ffffff17}
.dl li:last-child{border-bottom:0}
.dl .k{font-family:var(--f-data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-shadow);display:block;margin-bottom:6px}
.dl .v{font-size:16.5px;color:#fff;text-decoration:none;font-weight:450}
.dl a.v:hover{color:var(--teal-lit)}
.map{margin-top:22px;border:1px solid #ffffff17;aspect-ratio:16/9;width:100%}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.5) contrast(1.04)}

/* =========================================================
   FAQ
   ========================================================= */
.faq{max-width:860px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:22px 44px 22px 0;font-family:var(--f-display);font-weight:600;font-size:18.5px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:29px;width:9px;height:9px;
  border-right:1px solid var(--steel-shadow);border-bottom:1px solid var(--steel-shadow);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 40px 24px 0;color:var(--ink-mid);font-size:16px}
.faq summary:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px}

/* =========================================================
   PAGE HEADER — a drawing sheet header, no photograph
   ========================================================= */
.phead{background:var(--sheet);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.phead::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(100deg,transparent 45%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 45%,#000 100%);
}
.phead .shell{position:relative;z-index:2;padding:64px 24px 58px}
.phead h1{font-size:clamp(30px,4.1vw,52px);max-width:20ch;margin-bottom:18px}
.phead p{color:var(--ink-mid);max-width:60ch;font-size:17.5px;margin:0}

.crumbs{list-style:none;display:flex;gap:9px;padding:0;margin:0 0 22px;flex-wrap:wrap}
.crumbs li,.crumbs a{font-family:var(--f-data);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--label);text-decoration:none}
.crumbs a:hover{color:var(--teal-deep)}
.crumbs li[aria-current]{color:var(--ink)}
.crumbs li+li::before{content:"/";margin-right:9px;color:var(--rule-strong)}

.prose{max-width:72ch}
.prose h2{font-size:clamp(25px,2.5vw,32px);margin:50px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;margin:34px 0 12px}
.prose p{color:var(--ink-mid)}
.prose ul{padding-left:0;list-style:none;margin:20px 0}
.prose ul li{position:relative;padding-left:26px;margin-bottom:11px;color:var(--ink-mid)}
.prose ul li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border:1px solid var(--teal-shadow);transform:rotate(45deg)}

.two{display:grid;grid-template-columns:1fr 322px;gap:58px;align-items:start}
.aside{background:var(--sheet);border:1px solid var(--rule);padding:28px 26px;position:sticky;top:106px}
.aside h3{font-size:18px;margin-bottom:12px}
.aside p{font-size:14.8px;color:var(--ink-mid);margin-bottom:20px}
.aside .btn{width:100%;justify-content:center}
.aside .spec{border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin:14px 0 20px}
.aside .spec li{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 0}
.chip{font-family:var(--f-data);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;padding:6px 11px;border:1px solid var(--rule-strong);color:var(--ink-mid)}
.sec--deep .chip,.audit .chip{border-color:#ffffff2b;color:#C3C9CE}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{background:var(--carbon);color:#8F979D;padding:68px 0 0}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:50px}
.foot h4{font-family:var(--f-data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 18px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px}
.foot a{color:#8F979D;text-decoration:none;font-size:14.8px}
.foot a:hover{color:var(--teal-lit)}
.foot p{font-size:14.8px;line-height:1.7}
.foot__bar{border-top:1px solid #ffffff14;padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot__bar p{font-size:13px;margin:0}
.foot__brand{display:flex;align-items:center;gap:13px;margin-bottom:18px}

.callbar{display:none}

.wm{background:var(--carbon-lo);color:var(--steel-shadow);text-align:center;padding:10px 16px;
  font-family:var(--f-data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.wm a{color:var(--teal-lit);text-decoration:none}

/* =========================================================
   MOTION — the three sections seat together, then the drawing is annotated
   ========================================================= */
.rise{opacity:0;transform:translateY(16px)}
.rise.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

.js .figure__mark .sect--steel{animation:sIn .78s var(--ease) .05s both}
.js .figure__mark .sect--rust{animation:rIn .78s var(--ease) .19s both}
.js .figure__mark .sect--teal{animation:tIn .78s var(--ease) .33s both}
@keyframes sIn{from{opacity:0;transform:translate(0,-44px)}to{opacity:1;transform:none}}
@keyframes rIn{from{opacity:0;transform:translate(-44px,26px)}to{opacity:1;transform:none}}
@keyframes tIn{from{opacity:0;transform:translate(44px,26px)}to{opacity:1;transform:none}}
.js .callout{opacity:0;animation:coIn .5s var(--ease) both}
.js .callout--a{animation-delay:.95s}
.js .callout--b{animation-delay:1.07s}
.js .callout--c{animation-delay:1.19s}
@keyframes coIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .rise{opacity:1 !important;transform:none !important}
  .js .callout{opacity:1 !important}
  .js .figure__mark .sect{opacity:1 !important;transform:none !important}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .flow{grid-template-columns:1fr 1fr}
  .flow__step{border-right:0;border-bottom:1px solid #ffffff14;padding-left:0 !important;padding-right:24px;padding-bottom:26px}
  .strip .shell{grid-template-columns:1fr 1fr}
  .strip__cell:nth-child(2n){border-right:0}
  .two{grid-template-columns:1fr;gap:42px}
  .aside{position:static}
  .foot__grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:940px){
  .hero .shell{grid-template-columns:1fr;gap:48px;padding-top:64px;padding-bottom:64px}
  .figure{order:-1;justify-content:center;padding:0}
  .figure__mark{width:min(74%,300px)}
  .callout{display:none}
  .nav__links{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--sheet);
    flex-direction:column;align-items:stretch;padding:8px;gap:0;border-bottom:1px solid var(--rule);
    box-shadow:0 20px 40px -24px #0004;
  }
  .nav__links.open{display:flex}
  .nav__links a{padding:15px 12px;font-size:16px}
  .nav__links a[aria-current="page"]::after{left:0;right:auto;top:12px;bottom:12px;width:2px;height:auto}
  .burger{display:flex}
  .nav__cta{display:none}
  .split,.contact,.audit .shell{grid-template-columns:1fr;gap:36px}
  .split--rev .split__media{order:0}
  .brands{grid-template-columns:1fr}
  .brandcard{border-right:0;border-bottom:1px solid #ffffff20}
  .brandcard:last-child{border-bottom:0}
}
@media (max-width:720px){
  body{font-size:16px;padding-bottom:64px}
  .sec{padding:62px 0}
  .legend{grid-template-columns:1fr 1fr}
  .legend__i{border-right:0;padding-right:0;margin-right:0;padding-bottom:16px}
  .strip .shell{grid-template-columns:1fr}
  .strip__cell{border-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .strip__cell:last-child{border-bottom:0}
  .flow{grid-template-columns:1fr}
  .field--row{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .topbar .certs{display:none}
  .topbar .shell{justify-content:center}
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:80}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:19px 10px;text-decoration:none;font-weight:600;font-size:15px}
  .callbar .c-call{background:var(--teal-deep);color:#fff}
  .callbar .c-quote{background:var(--carbon);color:#fff}
}

/* image slots not yet supplied: drawing paper, never a broken box */
.ph{
  background:var(--paper);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:22px 22px;
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:1px solid var(--rule);
}
.ph span{font-family:var(--f-data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--label);text-align:center;padding:12px}
.plate__img .ph{border:0}

/* Touch targets for site chrome. Inline links inside prose are exempt under
   WCAG 2.5.8; navigation, breadcrumb, footer and top bar links are not. */
@media (max-width:940px){
  .brand{min-height:44px;align-items:center}
  .topbar .shell a{display:inline-block;padding:12.5px 6px}
  .crumbs li,.crumbs a{padding:12.5px 0;display:inline-block}
  .crumbs li+li::before{padding:12.5px 0}
  .foot a{display:inline-block;padding:8px 0}
  .foot li{margin-bottom:2px}
  .dl a.v{display:inline-block;padding:7px 0}
}