/* ============================================================
   TOUGH WELD : design system
   Palette "Weld Amber": charcoal steel + molten-weld amber.
   Signal red appears only in photography, never in UI.
   ============================================================ */

@font-face{
  font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/archivo-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/archivo-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fonts/archivo-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fonts/archivo-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#141719;
  --bg-deep:#0E1113;
  --panel:#1D2125;
  --panel-2:#22262B;
  --ink:#F4F3F0;
  --muted:#A6A199;
  --faint:#918D85;
  --line:#2E3338;
  --amber:#FF7A1A;
  --amber-hot:#FF8C3B;
  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --wrap:1120px;
}

*{box-sizing:border-box}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:#141719;padding:10px 18px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:.78rem}
.skip:focus{left:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px;
}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,5.5vw,3.4rem);line-height:1.08;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.2;text-transform:uppercase;letter-spacing:.015em}
h3{font-size:1.08rem;line-height:1.35}
p{margin:0 0 1em}
.lead{font-size:1.08rem;max-width:42em;color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.eyebrow{
  font-family:var(--display);font-weight:500;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--amber);
  display:block;margin-bottom:14px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-weight:800;
  font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
  padding:14px 26px;border-radius:3px;text-decoration:none;cursor:pointer;
  border:2px solid var(--amber);transition:background .15s,color .15s,border-color .15s;
}
.btn-solid{background:var(--amber);color:#141719}
.btn-solid:hover{background:var(--amber-hot);border-color:var(--amber-hot)}
.btn-ghost{background:transparent;color:var(--amber)}
.btn-ghost:hover{background:rgba(255,122,26,.12)}
.btn-sm{padding:10px 18px;font-size:.74rem}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(14,17,19,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex;align-items:center;gap:28px;
  padding-top:14px;padding-bottom:14px;
}
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
  margin-right:auto;
}
.brand svg{flex:none}
.head-cta{margin-left:2px}
.brand .logo-img{height:25px;width:auto}
.site-foot .brand .logo-img{height:20px}
.nav{display:flex;gap:4px;align-items:center}
.nav a{
  font-family:var(--display);font-weight:500;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:3px;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--amber)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:3px;
  color:var(--ink);padding:8px 12px;font-size:1.1rem;line-height:1;cursor:pointer;
}
@media (max-width:1120px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-deep);border-bottom:1px solid var(--line);
    padding:10px 24px 20px;
  }
  .nav.open{display:flex}
  .nav a:not(.head-cta){padding:14px 8px;border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .site-head .wrap{gap:12px}
  .brand .logo-img{height:17px}
  .head-cta{padding:9px 12px;font-size:.7rem;letter-spacing:.05em}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg-deep)}
.hero .bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;
}
.hero .scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,17,19,.55) 0%,rgba(14,17,19,.25) 45%,rgba(14,17,19,.92) 100%);
}
.hero .wrap{position:relative;padding-top:110px;padding-bottom:64px}
.hero h1{max-width:13em}
.hero .lead{margin-top:22px;color:#C9C5BD}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero.short .wrap{padding-top:84px;padding-bottom:48px}

/* spec strip : the data signature */
.specstrip{
  position:relative;border-top:1px solid var(--line);
  background:rgba(14,17,19,.85);
}
.specstrip .wrap{
  display:flex;flex-wrap:wrap;column-gap:36px;row-gap:4px;
  padding-top:14px;padding-bottom:16px;
  font-family:var(--mono);font-size:.78rem;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.specstrip b{color:var(--amber);font-weight:600}

/* ---------- sections ---------- */
section{padding:72px 0 8px}
.shead{margin-bottom:34px;max-width:44em}
.shead h2{border-left:4px solid var(--amber);padding-left:18px}
.shead p{margin-top:14px;color:var(--muted)}

/* ---------- grids & cards ---------- */
.grid-3{display:grid;grid-template-columns:1fr;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;
}
.card .pad{padding:24px 26px}
.card h3{text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.card p{color:var(--muted);font-size:.95rem}
.card .thumb{aspect-ratio:16/10;object-fit:cover;width:100%;border-bottom:2px solid var(--amber)}
.card .more{
  font-family:var(--display);font-weight:800;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.1em;text-decoration:none;
}
.card .more::after{content:" →"}

/* product spec chip line under card titles */
.chipline{
  font-family:var(--mono);font-size:.74rem;color:var(--amber);
  margin-bottom:12px;letter-spacing:.02em;
}

/* pillar cards */
.pillar{border-top:3px solid var(--amber)}

/* industries */
.ind-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.ind{
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:18px 18px 16px;
}
.ind .n{font-family:var(--mono);font-size:.7rem;color:var(--faint);display:block;margin-bottom:8px}
.ind h3{font-size:.92rem;text-transform:uppercase;letter-spacing:.04em}
.ind p{font-size:.8rem;color:var(--faint);margin:6px 0 0}

/* ---------- tables ---------- */
.tablebox{overflow-x:auto;border:1px solid var(--line);border-radius:4px;margin:24px 0}
table{border-collapse:collapse;width:100%;font-size:.9rem}
caption{
  caption-side:top;text-align:left;padding:14px 18px 12px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:.8rem;background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
th{
  font-family:var(--display);font-weight:800;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.07em;text-align:left;
  color:var(--muted);background:var(--panel-2);
  padding:12px 18px;border-bottom:2px solid var(--amber);white-space:nowrap;
}
td{
  padding:12px 18px;border-bottom:1px solid var(--line);
  background:var(--panel);vertical-align:top;color:var(--ink);
}
td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
.tnote{font-size:.8rem;color:var(--faint);margin-top:-12px}

/* ---------- figure band (photo + text) ---------- */
.band{display:grid;grid-template-columns:1fr;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:32px;align-items:center}
.band img{border-radius:4px;border:1px solid var(--line)}

/* ---------- FAQ ---------- */
.faq details{
  border:1px solid var(--line);border-radius:4px;background:var(--panel);
  margin-bottom:10px;
}
.faq summary{
  cursor:pointer;padding:16px 20px;font-family:var(--display);font-weight:800;
  font-size:.95rem;list-style:none;position:relative;padding-right:48px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  color:var(--amber);font-size:1.3rem;font-weight:500;
}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 20px 18px;color:var(--muted);font-size:.95rem}
.faq .a p{margin-bottom:.6em}

/* ---------- contact band ---------- */
.contact-band{
  margin-top:72px;background:var(--bg-deep);
  border-top:3px solid var(--amber);
}
.contact-band section{padding:64px 0 72px}
.contact-grid{display:grid;grid-template-columns:1fr;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:40px}
.contact-list{list-style:none;margin:20px 0 0;padding:0}
.contact-list li{
  display:flex;gap:14px;margin-bottom:14px;align-items:baseline;
  font-size:.98rem;
}
.contact-list .k{
  font-family:var(--display);font-weight:500;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--faint);
  min-width:74px;
}
.contact-list a{text-decoration:none}
.contact-list a:hover{text-decoration:underline}

/* ---------- forms ---------- */
form{display:grid;gap:14px}
.frow{display:grid;grid-template-columns:1fr;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px}
label{
  font-family:var(--display);font-weight:500;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  display:grid;gap:7px;
}
input,textarea,select{
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  color:var(--ink);font-family:var(--body);font-size:.95rem;
  padding:12px 14px;width:100%;
  text-transform:none;letter-spacing:normal;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:110px;resize:vertical}
.form-note{font-size:.8rem;color:var(--faint);margin:0}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--bg-deep);margin-top:0}
.site-foot .wrap{padding-top:44px;padding-bottom:40px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.site-foot .foot-h{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--faint);margin-bottom:14px;font-weight:500;
}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:9px}
.site-foot a{color:var(--muted);text-decoration:none;font-size:.92rem}
.site-foot a:hover{color:var(--ink)}
.foot-tag{color:var(--muted);font-size:.92rem;margin-top:14px;max-width:26em}
.foot-base{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  border-top:1px solid var(--line);margin-top:36px;padding-top:20px;
  font-size:.78rem;color:var(--faint);
}

/* ---------- page hero for subpages ---------- */
.crumb{
  font-family:var(--mono);font-size:.74rem;color:var(--faint);
  margin-bottom:18px;display:block;
}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--amber)}

/* anchor offset under sticky header */
[id]{scroll-margin-top:90px}
.grade{padding-top:56px}
.grade + .grade{border-top:1px solid var(--line)}

/* utility */
.tight{margin-bottom:6px}
.dim{color:var(--muted)}
.center{text-align:center}


/* ---------- option B additions: modes, grade blocks, industry cards ---------- */
.modes{display:grid;grid-template-columns:1fr;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
.mode{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:4px;padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.mode h3{font-size:.98rem;text-transform:none;letter-spacing:0;line-height:1.35}
.mode p{color:var(--muted);font-size:.92rem;margin:0}
.mode .pick{margin-top:auto;font-family:var(--mono);font-size:.8rem;color:var(--amber);letter-spacing:.04em}
.gradeblock{display:grid;grid-template-columns:1fr;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:32px;align-items:start;padding:40px 0;border-top:1px solid var(--line)}
.gradeblock img{border:1px solid var(--line);border-radius:4px}
.gradeblock h3{font-size:1.3rem;text-transform:uppercase;letter-spacing:.02em}
.gradeblock .kicker{font-family:var(--mono);font-size:.74rem;color:var(--amber);letter-spacing:.06em;display:block;margin-bottom:8px}
.gradeblock p{color:var(--muted);font-size:.95rem}
.gradeblock .appl{border-left:3px solid var(--amber);padding-left:14px;color:var(--ink);font-size:.92rem}
.ticklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:10px 24px}
.ticklist li{display:flex;gap:10px;color:var(--muted);font-size:.94rem;align-items:baseline}
.ticklist li::before{content:"";flex:none;width:7px;height:7px;background:var(--amber);position:relative;top:-1px}
.numsteps{display:grid;grid-template-columns:1fr;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}
.numstep{border-top:1px solid var(--line);padding-top:18px}
.numstep b{font-family:var(--mono);color:var(--amber);font-size:.85rem;display:block;margin-bottom:10px}
.numstep p{color:var(--muted);font-size:.94rem;margin:0}
.indcard .pad p{font-size:.88rem;line-height:1.55}
.catrow{display:grid;grid-template-columns:1fr;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:32px;align-items:center;margin-top:28px}
.catrow img{border:1px solid var(--line);border-radius:4px}
.subhead{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;margin:22px 0 10px}


/* ==== cross-device hardening =========================================
   Driven by measurements on 22 viewports, 320 px to 3440 px.
   ===================================================================== */

/* responsive <picture> must not become a box of its own, so the <img>
   stays the direct grid/flex item it was before. The <source> children
   have to be hidden explicitly: display:contents exposes them to the
   parent layout, and as grid items they claimed two of the three tracks
   in .gradeblock, pushing the photo into the last column and the copy
   onto a second row.                                                    */
picture{display:contents}
picture>source{display:none}
@supports not (display:contents){picture{display:block}}

/* header: the quote button used to wrap onto a second line on every
   phone and to push the page 31 px wider than the screen at 320 px     */
.head-cta{white-space:nowrap}
.nav a{white-space:nowrap}

/* landscape phones: 390 px of height cannot carry a 110 px hero pad     */
@media (orientation:landscape) and (max-height:520px){
  .hero .wrap{padding-top:52px;padding-bottom:32px}
  .hero.short .wrap{padding-top:44px;padding-bottom:28px}
  .hero h1{font-size:clamp(1.5rem,4.2vw,2.2rem)}
  .hero .lead{margin-top:14px;font-size:1rem}
  .hero .cta-row{margin-top:20px}
  section{padding:48px 0 8px}
  .nav{max-height:calc(100vh - 64px);overflow-y:auto}
}

/* tables: a 2-column table no longer scrolls, a 9-column one still does */
.tscroll{position:relative}
.tscroll .tablebox{margin:24px 0}
.tscroll.is-scrollable .tablebox{scrollbar-width:thin}
.tscroll.is-scrollable::after{
  content:"";position:absolute;top:1px;right:1px;bottom:1px;width:44px;
  pointer-events:none;border-radius:0 4px 4px 0;
  background:linear-gradient(to right,rgba(20,23,25,0),rgba(20,23,25,.92));
  opacity:1;transition:opacity .18s;
}
.tscroll.is-scrollable.at-end::after{opacity:0}
.tscroll-hint{
  font-family:var(--display);font-weight:500;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--faint);
  margin:-14px 0 22px;display:none;
}
.tscroll.is-scrollable .tscroll-hint{display:block}
.tscroll-hint::before{content:"\2194\00a0\00a0"; color:var(--amber)}
.tablebox:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
td{overflow-wrap:anywhere}

/* legibility: nothing below 12 px, and no iOS zoom-on-focus            */
input,textarea,select{font-size:16px}
@media (max-width:900px){
  th,label,.site-foot .foot-h{font-size:.75rem}
  .contact-list .k{font-size:.72rem}
  .specstrip .wrap{font-size:.8rem}
}

/* touch: give the small text links a real finger target                */
@media (pointer:coarse),(max-width:900px){
  .card .more,.mode .pick,.crumb a{display:inline-block;padding:9px 0}
  .site-foot li{margin-bottom:2px}
  .site-foot li a{display:inline-block;padding:8px 0}
  .contact-list li{margin-bottom:8px}
  .contact-list a{display:inline-block;padding:6px 0}
  .faq summary{padding-top:18px;padding-bottom:18px}
}

/* small phones: 320 px has 272 px of usable width, so buy some back    */
@media (max-width:400px){
  .wrap{padding:0 16px}
  .brand .logo-img{height:15px}
  .site-head .wrap{gap:10px}
  .head-cta{padding:9px 11px}
  h1{font-size:clamp(1.75rem,7.4vw,2.4rem)}
}

/* high-contrast / forced-colors: the amber bars carry meaning          */
@media (forced-colors:active){
  .btn,.card,.tablebox,.faq details,.mode,input,textarea,select{border:1px solid ButtonBorder}
  .shead h2{border-left-color:Highlight}
  .card .thumb,.pillar,.mode{border-top-color:Highlight}
  .ticklist li::before{background:Highlight}
  .tscroll.is-scrollable::after{display:none}
}


/* ==== hardening pass 2 ===============================================
   Contrast, high-contrast mode, text zoom and old-Safari fallbacks.
   ===================================================================== */

/* form borders were 1.41:1 against the panel, below the 3:1 that WCAG
   1.4.11 asks of a control boundary                                     */
input,textarea,select{border-color:#5A6169}
input:hover,textarea:hover,select:hover{border-color:#7A828A}

/* absolute overlays: inset came to Safari only in 14.1                  */
.hero .bg,.hero .scrim{top:0;right:0;bottom:0;left:0}

/* long tokens must not force the page wider at 200% browser text size   */
.contact-list a,.contact-list li,.foot-base,.lead,td,li{overflow-wrap:break-word}

/* Windows High Contrast: the scrim is dropped but the photo is not,
   which leaves white-on-photo text unreadable                           */
@media (forced-colors:active){
  .hero .bg{display:none}
  .hero .scrim{background:Canvas}
}

/* translucency is a preference, not a given                             */
@media (prefers-reduced-transparency:reduce){
  .site-head,header{background:#0E1113;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ==== hardening pass 3 ==============================================
   Last defects found by re-measuring the fixed pages.
   ==================================================================== */

/* a single long word in a headline must never be clipped               */
h1,h2,h3{overflow-wrap:break-word}

/* the touch rules missed .more links outside a .card, and the logo     */
@media (pointer:coarse),(max-width:900px){
  .more{display:inline-block;padding:9px 0}
  .brand{padding:6px 0}
}

/* landscape phones: pull the primary CTA above the fold                */
@media (orientation:landscape) and (max-height:430px){
  .hero .wrap{padding-top:36px;padding-bottom:24px}
  .hero.short .wrap{padding-top:30px;padding-bottom:20px}
  .hero h1{font-size:clamp(1.4rem,3.6vw,1.9rem)}
  .hero .lead{margin-top:10px;font-size:.95rem;max-width:46em}
  .hero .cta-row{margin-top:14px}
  .specstrip .wrap{padding-top:8px;padding-bottom:10px}
}


/* ==== hardening pass 4 ==============================================
   Findings that survived adversarial verification.
   ==================================================================== */

/* a browser without sticky should still lay the header out normally    */
.site-head{position:relative;position:sticky}

/* which fields are mandatory has to be visible before submitting, not
   only in the browser's validation bubble afterwards                    */
label .req{color:var(--amber);font-weight:800}
.form-legend{font-size:.8rem;color:var(--faint);margin:0 0 4px}
input:user-invalid,textarea:user-invalid,select:user-invalid{border-color:#E5484D}

/* a flex item will not shrink past its longest word unless it is told it
   may: at 200% browser text size the email address pushed the page 8 px
   wider than the screen                                                 */
.contact-list li > *,.foot-base > *{min-width:0}
.contact-list a,.foot-base a{overflow-wrap:anywhere}
@media (max-width:900px){.contact-list .k{min-width:64px}}

/* landscape phone: the quote button was still sitting a median 18 px below
   the fold, so tighten what sits above it rather than the button itself */
@media (orientation:landscape) and (max-height:430px){
  .hero .eyebrow{margin-bottom:8px;font-size:.7rem}
  .hero .lead{line-height:1.45;margin-top:8px}
  .hero.short .wrap{padding-top:24px;padding-bottom:16px}
  .hero .wrap{padding-top:28px;padding-bottom:20px}
  .crumb{margin-bottom:8px}
}


/* ==== sister-site fidelity: "Find your plate" picker and footer contact ====
   Their widget is a picker: numbered failure modes on the left, the grade it
   recommends on the right. Ours had flattened it into five static cards.
   ========================================================================= */
.picker{
  display:grid;grid-template-columns:1fr;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:32px;align-items:start;
}
.picklist{display:grid;gap:8px}
.pickbtn{
  display:flex;width:100%;gap:14px;align-items:flex-start;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:16px 18px;color:var(--ink);font:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s,background .15s;
}
.pickbtn:hover{border-color:rgba(255,122,26,.55)}
.pickbtn[aria-selected="true"]{border-color:var(--amber);background:var(--panel-2)}
.pickbtn .num{
  flex:none;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.72rem;color:var(--muted);
  margin-top:2px;
}
.pickbtn[aria-selected="true"] .num{background:var(--amber);border-color:var(--amber);color:#141719}
.pickbtn .t{
  display:block;font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;font-size:1rem;line-height:1.3;
}
.pickbtn .d{display:block;margin-top:6px;font-size:.92rem;color:var(--muted);line-height:1.45}
.pickpanel{
  background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
.pickpanel + .pickpanel{margin-top:16px}
.pickpanel img{width:100%;height:230px;object-fit:cover;border-bottom:2px solid var(--amber)}
.pickpanel .pad{padding:24px 26px}
.pickpanel h3{font-size:1.55rem;text-transform:uppercase;letter-spacing:.01em;margin-bottom:12px}
.pickpanel h3 .sub{
  display:block;margin-top:5px;font-family:var(--body);font-size:.95rem;
  font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);
}
.pickpanel p{color:var(--muted);font-size:.95rem}
.pickpanel .more{
  color:var(--amber);text-decoration:none;
  font-family:var(--display);font-weight:800;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.1em;display:inline-block;margin-top:6px;
}
.pickpanel .more::after{content:" \2192"}
.pickpanel .more:hover{color:var(--amber-hot)}
@media (max-width:560px){
  .pickpanel img{height:180px}
  .pickbtn{padding:14px 15px}
}

/* footer contact column */
.foot-social{
  display:inline-grid;place-items:center;width:40px;height:40px;margin-top:16px;
  border:1px solid var(--line);border-radius:3px;color:var(--muted);
  transition:border-color .15s,color .15s;
}
.foot-social:hover{border-color:var(--amber);color:var(--amber)}

/* the footer carries five columns now that Contact is its own, so the track
   floor has to leave room for all five inside the 1120 px wrap */
.foot-grid{grid-template-columns:1fr;grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr))}
@media (min-width:1000px){.foot-grid{grid-template-columns:1.5fr repeat(4,1fr)}}


/* ==== hardening pass 5 ==============================================
   Touch targets in the header, and the table hint where it can be seen.
   ==================================================================== */

/* the hamburger was 41x36 and the compact quote button 71x40: both under
   the 44 px that a finger actually needs, and the hamburger is the only
   way into the navigation on a phone                                    */
.nav-toggle{min-width:44px;min-height:44px;padding:10px 13px}
/* gap, not a space: inline-flex makes the label span and the trailing
   text node two flex items, and the white space between items is
   dropped, which rendered the button as REQUEST AQUOTE            */
.head-cta{min-height:44px;display:inline-flex;align-items:center;gap:.34em}

/* the scroll hint used to sit under the table, which on a tall spec table
   is a screen or more past the point where the reader needs it          */
.tscroll-hint{margin:0 0 10px}
.tscroll .tablebox{margin-top:0}


/* ==== hardening pass 6 ==============================================
   Wide tables on a phone: let headers wrap, keep the row label in view,
   and keep the swipe inside the table.
   ==================================================================== */

/* nowrap headers were forcing the spec tables 30 to 40 percent wider than
   their content needs; on a phone that is scrolling the reader did not ask
   for                                                                    */
@media (max-width:760px){
  th{white-space:normal}
  th,td{padding:11px 12px}
}

/* scrolled to the right of a nine column chemistry table, the reader was
   left with numbers and no idea which row they belong to                 */
.tablebox th:first-child,.tablebox td:first-child{
  position:sticky;left:0;z-index:1;
}
.tablebox th:first-child{background:var(--panel-2)}
.tablebox td:first-child{background:var(--panel)}
.tablebox.is-scrolled th:first-child,.tablebox.is-scrolled td:first-child{
  box-shadow:8px 0 10px -8px rgba(0,0,0,.65);
}

/* a horizontal swipe on the table used to chain to the page and could
   trigger the browser back gesture                                       */
.tablebox{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}

/* naslov: deo u boji akcenta, kao na sestrinskom sajtu */
.hl{color:var(--amber)}

/* Blokovi grejdova se smenjuju levo desno, kao kod njih: TW100 levo,
   TW200 desno, TW300 levo, TW600 desno, TW-F levo. Samo iznad sirine na
   kojoj blok stvarno ima dve kolone; kad se slozi u jednu, fotografija
   ostaje prva. Selektor je .gradeblock img a ne > img: picture je i dalje
   roditelj slike u DOM-u, display:contents menja samo raspored. */
@media (min-width:720px){
  .gradeblock.flip img{order:2}
  .gradeblock.flip>div{order:1}
}

/* Dugme je deo navigacije, kao kod njih: na sirokom ekranu stoji na kraju
   reda, a kad se navigacija skupi u meni, silazi na dno menija preko cele
   sirine. Time u redu zaglavlja na mobilnom ostaju samo logo i hamburger,
   pa "Get in Touch" vise ne izbacuje zaglavlje iz sirine na 320px. */
/* Dugme je sada link unutar .nav, pa ga .nav a (siva boja) i
   .nav a[aria-current="page"] (narandzasta) po specificnosti pregaze i
   tekst se gubi na narandzastoj podlozi. Vracamo boju dugmeta. */
.nav .head-cta,
.nav .head-cta:hover,
.nav .head-cta[aria-current="page"]{color:#141719}
/* .nav a postavlja font-weight:500, letter-spacing:.09em i font-size:.8rem i
   po specificnosti gazi .btn, pa je dugme u zaglavlju izgledalo tanje i
   razvucenije od istog dugmeta u hero sekciji. Vracamo tipografiju dugmeta;
   unutrasnji razmak je nesto manji od hero dugmeta da zaglavlje ostane
   niskog profila. */
.nav .head-cta{
  margin-left:12px;
  font-weight:800;font-size:.82rem;letter-spacing:.08em;
  padding:12px 24px;
}
@media (max-width:1120px){
  .nav .head-cta{
    margin:16px 0 0;justify-content:center;text-align:center;
    font-weight:800;font-size:.82rem;letter-spacing:.08em;padding:15px 16px;
  }
}

/* ---------- futer na telefonu ---------- */
/* Bio je razliven zato sto je odnos razmaka bio obrnut: izmedju dva linka
   unutar iste grupe 42px, a izmedju dve grupe 32px. Grupe se zato nisu
   citale kao grupe nego kao jedan dugacak spisak. Uz to su naslovi grupa
   (PRODUCTS, APPLICATIONS, COMPANY, CONTACT) bili u najslabijoj boji na
   stranici, iako su jedini orijentir u tom spisku.

   Ispod 700px zato: jedna kolona bez razmaka, tanka linija i vazduh izmedju
   grupa umesto razmaka, naslovi u punoj boji teksta i podebljani, a linkovi
   veci i gusce slozeni (kod sestrinskog sajta su 17px na koraku od 35px,
   kod nas su bili 14.7px na koraku od 42px). */
@media (max-width:700px){
  .foot-grid{grid-template-columns:1fr;gap:0}
  .foot-grid > * + *{
    border-top:1px solid var(--line);
    margin-top:26px;padding-top:26px;
  }
  .site-foot .foot-h{
    color:var(--ink);font-weight:700;letter-spacing:.12em;margin-bottom:4px;
  }
  .site-foot li{margin-bottom:0}
  .site-foot li a{
    display:block;padding:8px 0;font-size:1rem;line-height:1.4;
  }
  .foot-tag{margin-top:12px}
  /* jedina dodirna meta koja nije tekstualni red, pa ide na punih 44px */
  .foot-social{width:44px;height:44px;margin-top:18px}
  .foot-base{
    flex-direction:column;align-items:flex-start;gap:6px;
    margin-top:30px;padding-top:18px;
  }
  /* mono font je ovde odudarao od ostatka futera */
  .foot-base .mono{font-family:inherit;letter-spacing:0}
}

/* ---------- baner na uspravnom telefonu ---------- */
/* Hero je na telefonu nosio isti gornji razmak kao na desktopu, 110px na
   pocetnoj i 84px na podstranicama. Sa zaglavljem od 73px iznad, prvi red
   teksta padao je tek na 183px od vrha stranice, sto je na ekranu od 844px
   petina visine pre nego sto se ista procita. Dve postojece izmene za hero
   vaze samo za POLOZEN telefon (orientation:landscape), pa uspravni nije
   bio pokriven. Zato je i ovo pravilo vezano za orientation:portrait, da se
   ta dva ne sudaraju. */
@media (orientation:portrait) and (max-width:760px){
  .hero .wrap{padding-top:64px;padding-bottom:48px}
  .hero.short .wrap{padding-top:52px;padding-bottom:36px}
}