/* Gilroy, the only text font besides Martian Mono (Google Fonts, in the page head) */
@font-face{font-family:'Gilroy';src:url(/build/fonts/Gilroy-Regular.b41d04f7.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url(/build/fonts/Gilroy-RegularItalic.3a8faea5.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Gilroy';src:url(/build/fonts/Gilroy-SemiBold.d2e3b24a.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url(/build/fonts/Gilroy-SemiBoldItalic.d957f425.woff2) format('woff2');font-weight:600;font-style:italic;font-display:swap}

/* ArcelorMittal anniversary logo (templates/_logo.html.twig). Set --logo-height to size it. */
.logo-wrapper{position:relative;display:block;flex-shrink:0;height:var(--logo-height,104px);aspect-ratio:1349.5/477.5}
.logo-wrapper .logo{display:block;width:100%;height:100%}
.logo-wrapper .logo__logo{fill:#ff3700}
.logo-wrapper .logo__text{fill:#353535}
/* two invisible click areas over the svg */
.logo-wrapper a{position:absolute;top:0;bottom:0;width:50%;z-index:10}
.logo-wrapper .logo-website{left:0}
.logo-wrapper .logo-anniversary{right:0}
/* regular logo (outside the anniversary campaign): other proportions, one link */
/* 0.475 = wordmark share of the anniversary box (65.8/477.5) / of this box (141.4/487),
   so "ArcelorMittal" keeps the same pixel height when the campaign ends */
.logo-wrapper--default{aspect-ratio:1183/487;height:calc(var(--logo-height,104px) * .475)}
.logo-wrapper--default .logo-website{width:100%}

/* Simulator styles, ported as-is from granite-comfort-simulator.html. */
:root{
  --hot-orange:#FF3700; --dark-steel:#414141; --white:#FFFFFF;
  --orange-10:#FFEFEA; --steel-10:#ECECEC; --keyline:#C6C6C6;
  --radius:10px;
  --xxl:120px; --xl:60px; --l:40px; --m:30px; --s:20px; --xs:10px;
  --font-body:'Gilroy',system-ui,sans-serif;
  --font-mono:'Martian Mono',ui-monospace,monospace;
  --max:1340px;
  --blue:#0072CE;
  --grad:linear-gradient(90deg,#AF3876,#E5524D 45%,#F93641 70%,#FF8F47);
}
*{box-sizing:border-box;margin:0;padding:0}
/* m² in Gilroy text (it has no ² glyph); line-height 0 keeps the line from growing */
sup{font-size:0.6em;line-height:0}
/* form controls don't inherit the font by default */
button,input,select,textarea{font-family:inherit}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--dark-steel);background:var(--white);line-height:1.4;letter-spacing:-0.01em}

.label{font-family:var(--font-mono);font-weight:300;text-transform:uppercase;letter-spacing:0.14em;font-size:11px;color:var(--dark-steel)}
.eyebrow{font-family:var(--font-mono);font-weight:300;text-transform:uppercase;letter-spacing:0.14em;font-size:12px;color:var(--hot-orange)}
h1,h2,h3{font-weight:400;letter-spacing:-0.02em;line-height:1.15}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--keyline);position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,0.9);backdrop-filter:blur(10px)}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.bar{max-width:var(--max);margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap;align-items:center}
nav a{text-decoration:none;color:var(--dark-steel)}
nav a.doc{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--keyline);
  border-radius:20px;padding:8px 14px}
nav a.doc:hover{border-color:var(--hot-orange);color:var(--hot-orange)}
.langs{display:flex;gap:3px;flex-wrap:wrap}
.langs a{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;font-weight:300;
  border:1px solid var(--keyline);background:var(--white);color:var(--dark-steel);
  border-radius:var(--radius);padding:6px 8px;cursor:pointer;text-transform:uppercase}
.langs a.on{background:var(--dark-steel);color:var(--white);border-color:var(--dark-steel)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--m)}
.tabs a{text-decoration:none;font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;font-weight:300;padding:11px 18px;border-radius:30px;
  border:1px solid var(--keyline);color:var(--dark-steel);background:var(--white)}
.tabs a.on{background:var(--dark-steel);color:var(--white);border-color:var(--dark-steel)}

/* imagery — brand photography does the heavy lifting */
.shot{border-radius:var(--radius);overflow:hidden;background:var(--steel-10);position:relative}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;color:transparent}
a.shot:hover img{transform:scale(1.04)}

.hero{padding:var(--xl) 0 var(--m);display:grid;gap:var(--l);align-items:center}
.hero .heroshot{aspect-ratio:800/640;background:var(--white);margin:0 auto;width:100%;max-width:310px}
@media(min-width:900px){.hero{grid-template-columns:1.6fr 1fr}.hero .heroshot{margin-right:0}}
.hero .heroshot img{object-fit:contain}
.hero .eyebrow{margin-bottom:var(--s);display:block}
.hero h1{font-size:clamp(28px,4vw,48px);margin-bottom:var(--s);max-width:24ch}
.hero p{font-size:clamp(16px,2vw,20px);max-width:62ch;color:#5a5a5a}

/* ---------- layout ---------- */
.tool{display:grid;grid-template-columns:1fr;gap:var(--m);padding-bottom:var(--xxl)}
@media(min-width:1024px){
  .tool{grid-template-columns:minmax(340px,4fr) 8fr;gap:var(--l);align-items:start}
  .controls{position:sticky;top:92px}
}

/* ---------- controls ---------- */
.controls{background:var(--orange-10);border-radius:var(--radius);padding:var(--m)}
.field{margin-bottom:var(--m)}
.field:last-child{margin-bottom:0}
.field>.label{display:block;margin-bottom:12px}
.hint{font-size:12px;color:#777;margin-top:8px;line-height:1.35}
.sublabel{font-family:var(--font-mono);font-weight:300;text-transform:uppercase;
  letter-spacing:0.14em;font-size:10px;color:#888;display:block;margin-bottom:8px}
hr.divider{height:1px;background:#EBD6CE;margin:var(--m) 0;border:0}

.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{border:1px solid #E3CFC8;background:var(--white);color:var(--dark-steel);
  border-radius:var(--radius);padding:9px 13px;cursor:pointer;font-family:var(--font-body);font-size:14px;transition:.12s}
.seg button:hover{border-color:var(--dark-steel)}
.seg button.on{background:var(--dark-steel);color:var(--white);border-color:var(--dark-steel)}
.seg.thin button{padding:8px 11px;font-size:13px}

/* Dropdown in Controls.jsx: a select whose open list follows the page's style */
.dropdown{position:relative}
.dropdown>button{width:100%;border:1px solid #E3CFC8;background:var(--white);color:var(--dark-steel);
  border-radius:var(--radius);padding:11px 36px 11px 12px;font-family:var(--font-body);font-size:14px;cursor:pointer;
  text-align:left;position:relative}
.dropdown>button::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;margin-top:-6px;
  border:solid var(--dark-steel);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:.12s}
.dropdown>button[aria-expanded=true]{border-color:var(--hot-orange)}
.dropdown>button[aria-expanded=true]::after{transform:rotate(-135deg);margin-top:-2px}
.dropdown-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-height:320px;overflow:auto;
  background:var(--white);border:1px solid #E3CFC8;border-radius:var(--radius);padding:6px;
  box-shadow:0 12px 28px rgba(65,65,65,0.14)}
.dropdown-group{font-family:var(--font-mono);font-weight:300;text-transform:uppercase;letter-spacing:0.14em;
  font-size:10px;color:#777;padding:8px 10px 6px}
.dropdown-list [role=group]+[role=group]{border-top:1px solid var(--steel-10);margin-top:6px;padding-top:6px}
.dropdown-list [role=option]{padding:9px 10px;border-radius:6px;font-size:14px;cursor:pointer;outline:none}
.dropdown-list [role=option]:hover,.dropdown-list [role=option]:focus{background:var(--orange-10)}
.dropdown-list [role=option][aria-selected=true]{color:var(--hot-orange)}

.swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:40px;height:40px;border-radius:var(--radius);cursor:pointer;border:2px solid transparent;
  outline:1px solid var(--keyline);outline-offset:-1px;position:relative;transition:.12s}
.swatch.on{border-color:var(--hot-orange);outline-color:var(--hot-orange)}
.swatch.on::after{content:"";position:absolute;inset:0;border-radius:7px;box-shadow:0 0 0 2px var(--white) inset}
.swatch.pending{opacity:.4;cursor:not-allowed}

.rangewrap{display:flex;align-items:center;gap:14px}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:#E3CFC8;
  border-radius:4px;flex:1;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--hot-orange);cursor:pointer;border:3px solid var(--white);box-shadow:0 0 0 1px var(--keyline)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--hot-orange);
  cursor:pointer;border:3px solid var(--white)}
.rangeval{font-family:var(--font-mono);font-weight:400;font-size:15px;min-width:88px;text-align:right}

.stepper{display:flex;align-items:center;border:1px solid #E3CFC8;border-radius:var(--radius);
  overflow:hidden;width:fit-content;background:var(--white)}
.stepper button{width:44px;height:44px;border:0;background:var(--white);font-size:20px;cursor:pointer;color:var(--dark-steel)}
.stepper button:hover{background:var(--orange-10)}
.stepper .val{width:78px;text-align:center;font-family:var(--font-mono);font-size:15px}
.stepper .val input{width:3.2ch;border:0;padding:0;background:none;text-align:right;font:inherit;color:inherit;-moz-appearance:textfield}
.stepper .val input::-webkit-inner-spin-button,.stepper .val input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.fluxnum{display:flex;align-items:center;gap:10px;margin-top:12px}
.fluxnum input{width:110px;border:1px solid #E3CFC8;border-radius:var(--radius);
  padding:10px 12px;font-family:var(--font-mono);font-size:14px;color:var(--dark-steel)}
.fluxnum .unit{font-family:var(--font-mono);font-size:12px;color:#777}

/* ---------- results ---------- */
.results{display:flex;flex-direction:column;gap:var(--m);min-width:0}
.tool>*{min-width:0}

/* headline stat row — Automotive pattern: mono eyebrow + big orange stat */
.headline{background:var(--white);border:1px solid var(--keyline);border-radius:var(--radius);padding:var(--m)}
.headline .eyebrow{display:block;margin-bottom:8px}
.leadstat{display:flex;align-items:center;gap:var(--m);flex-wrap:wrap;margin:var(--s) 0 var(--m);
  padding-bottom:var(--m);border-bottom:1px solid var(--keyline)}
.leadstat .lv{font-size:clamp(56px,9vw,92px);line-height:1;letter-spacing:-0.03em;color:var(--blue)}
.leadstat .lv small{font-size:0.34em;letter-spacing:0;color:var(--blue);opacity:.65}
.leadstat .ll{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:0.14em;
  text-transform:uppercase;font-weight:300;color:var(--dark-steel)}
.leadstat .ls{display:block;font-size:13.5px;color:#777;margin-top:8px;max-width:34ch}
.statrow{display:grid;grid-template-columns:1fr;gap:var(--m)}
@media(min-width:620px){.statrow{grid-template-columns:repeat(2,1fr)}}
.stat .sv{font-size:clamp(30px,4vw,40px);line-height:1.2;color:var(--blue);
  letter-spacing:-0.01em;font-weight:400}
.stat .sv small{font-size:0.4em;color:var(--blue);opacity:.6;letter-spacing:0}
.stat .sl{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:#777;font-weight:300;display:block;margin-top:8px}

/* live cross-section */
.diagram-card{border:1px solid var(--keyline);border-radius:var(--radius);padding:var(--m);background:var(--white)}
.dlegend{display:flex;gap:var(--m);flex-wrap:wrap;margin-top:var(--s);
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:#777}
.dlegend span{display:inline-flex;align-items:center;gap:9px}
.dlegend i{display:inline-block;width:22px;height:0;border-top-style:solid;border-radius:2px}
.dlegend i.ray{border-top-width:3px;border-top-color:#FFA33F}
.dlegend i.heat{border-top-width:5px;border-top-color:#D8452F}
.xsvg{width:100%;height:auto;display:block;margin-top:var(--s)}
.xsvg text{font-family:var(--font-mono)}
.dlabel{font-size:11px;letter-spacing:0.12em;fill:var(--dark-steel)}
.droom{font-size:10px;letter-spacing:0.14em;fill:#9a9a9a}
.dtemp{font-family:var(--font-body);font-size:24px;fill:var(--dark-steel)}
.dsub{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;fill:#C77A2E}
.dcap{font-family:var(--font-mono);font-size:9px;letter-spacing:0.14em;fill:#9a9a9a}

/* compare engine — typography only, no bars */
.compare{border:1px solid #EDEDED;border-radius:var(--radius);background:var(--white);overflow:hidden}
.compare table{width:100%;border-collapse:collapse;table-layout:fixed}
.compare th,.compare td{padding:20px 24px;text-align:left;vertical-align:middle}
.compare tbody th,.compare tbody td{border-top:1px solid #EFEFEF}
.colhead{vertical-align:bottom}
.colhead .sys{font-size:20px;letter-spacing:-0.01em;display:block;margin-bottom:6px;
  font-weight:400;color:#8a8a8a}
.colhead .cfg{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;
  text-transform:uppercase;color:#b0b0b0;font-weight:300;display:block}
.badge{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;font-weight:300;display:inline-block;margin-bottom:12px}
.badge.base{background:var(--steel-10);color:#9a9a9a}
.badge.rec{background:#E4F4EA;color:#1C7A45}

.prop{width:30%}
.prop .pn{font-size:14px;color:var(--dark-steel);display:block;font-weight:600;hyphens:auto}
.prop .pu{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  color:#b5b5b5;font-weight:300;display:block;margin-top:5px}

.num{font-family:var(--font-body);font-size:26px;letter-spacing:-0.01em;color:#a5a5a5;display:block}
.delta{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  font-weight:400;display:block;margin-top:7px;color:var(--blue)}

/* the recommendation: a raised white column with a gradient cap */
.scol{background:#F7F7F7}
.gcol{background:var(--white);box-shadow:inset 1px 0 0 #ECECEC, inset -1px 0 0 #ECECEC}
.compare thead .gcol{background:var(--white) var(--grad) top/100% 4px no-repeat;
  box-shadow:inset 1px 0 0 #ECECEC, inset -1px 0 0 #ECECEC}
.compare tbody .gcol{border-top-color:#F2F2F2}
.compare tbody tr:last-child .gcol{box-shadow:inset 1px 0 0 #ECECEC, inset -1px 0 0 #ECECEC, inset 0 -1px 0 #ECECEC}
.gcol .sys{color:var(--dark-steel)}
.gcol .cfg{color:#999}
.gcol .num{color:var(--dark-steel);font-weight:600}

.rowmain .prop .pn{font-weight:600}
.rowmain .num{font-size:34px}
.rowmain .gcol .num{font-size:44px}
.rowmain .scol{background:#EFEFEF}

.cta{margin-top:var(--xs);border-radius:var(--radius);background:var(--steel-10);
  color:var(--dark-steel);padding:var(--l) var(--m);
  display:grid;gap:var(--m);align-items:center}
@media(min-width:820px){.cta{grid-template-columns:1.15fr 1fr}}
.cta .ctashot{aspect-ratio:16/9}
.cta .credit{display:block;font-family:var(--font-mono);font-size:8px;letter-spacing:0.1em;
  text-transform:uppercase;color:#a5a5a5;font-weight:300;margin-top:8px;text-align:right}
.cta h3{font-size:clamp(22px,3vw,30px);max-width:24ch;margin-bottom:var(--s);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* buttons — Automotive style: mono uppercase, orange outline pill */
.btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:300;
  padding:14px 22px;border-radius:30px;border:1px solid var(--hot-orange);
  color:var(--hot-orange);background:transparent;text-decoration:none;transition:.15s}
.btn:hover{background:var(--hot-orange);color:var(--white)}
.btn .arw{transition:transform .15s}
.btn:hover .arw{transform:translateX(4px)}

@media(max-width:760px){
  .compare th,.compare td{padding:13px 11px}
  .prop{width:36%}
  .prop .pn{font-size:12.5px;line-height:1.3}
  .prop .pu{font-size:8px}
  .colhead .sys{font-size:15px}
  .colhead .cfg{font-size:8px;word-break:break-word}
  .badge{font-size:8px;padding:4px 8px;margin-bottom:8px}
  .num{font-size:19px}
  .rowmain .num{font-size:22px}
  .rowmain .gcol .num{font-size:28px}
  .delta{font-size:8px;letter-spacing:0.08em;margin-top:5px}
}

/* news strip */
.news{padding-bottom:var(--xxl)}
.newshead{display:flex;align-items:baseline;gap:16px;margin-bottom:var(--m);
  padding-bottom:14px;border-bottom:1px solid var(--keyline);flex-wrap:wrap}
.newshead h2{font-size:clamp(22px,3vw,28px);background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:fit-content}
.newshead a{margin-left:auto;text-decoration:none;color:var(--hot-orange);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:300}
.newsgrid{display:grid;gap:var(--m);grid-template-columns:1fr}
@media(min-width:760px){.newsgrid{grid-template-columns:repeat(3,1fr)}}
.ncard{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:14px}
.ncard .shot{aspect-ratio:16/9}
.ncard h3{font-size:19px}
.ncard p{font-size:13.5px;color:#5a5a5a;line-height:1.45}
.ncard .more{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--hot-orange);font-weight:300;margin-top:auto}

footer{background:var(--dark-steel);color:rgba(255,255,255,0.7);padding:var(--l) 0;margin-top:var(--l)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--m);flex-wrap:wrap;align-items:center}
footer .label{color:rgba(255,255,255,0.55)}
footer a{color:inherit}

@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* header logo: templates/_logo.html.twig instead of the design's JPG */
header .logo-wrapper{--logo-height:50px}
@media(max-width:620px){header .logo-wrapper{--logo-height:42px}}

/* round the cross-section's sky like the card around it */
.xsvg{border-radius:var(--radius);overflow:hidden}