/* Core palette: claret #9A1A36 and blue #1A369A (text or decoration); green #369A1A is decoration only - green text uses #2d8116, or #266e13 on the green tint. Ratios and rules: .claude/rules/colour-type.md */
/* Base styles. Vertical rhythm comes from the --sp-section / --sp-sub / --sp-minor clamp() tokens on :root, carried by the *+h2 / *+h3 rules on pages without <section> wrappers. Links, palette and buttons: .claude/rules/colour-type.md and sotn-colour-button-rules.md. History: changelog.md. */

html {font:400 16px/24px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:linear-gradient(to bottom,#f8f9fa 0%,#fff 100%);color:#444;scrollbar-gutter:stable;scroll-behavior:smooth}
body {margin:0 auto 1em;max-width:1200px;line-height:1.6;box-sizing:border-box}
@media (min-width:961px){html{font-size:106.25%} .quick-links{font-size:16px}} /* desktop root 106.25% = 17px on a default 16px browser base: every rem size scales 6.25%; px-sized nav unaffected. A percentage, not 17px, so a reader who has raised their browser default font size keeps that increase. Quick links pinned to 16px so labels fit the fixed 140px box */
html,body{width:100%} /* overflow-x set to clip further down; hidden here would make html a scroll container and break position:sticky */
svg {overflow:hidden}

/* Links */
a {background:0 0;transition:color 0.2s ease}
a:active,a:hover {outline:0}

/* Focus States - WCAG AAA Compliance */
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:3px solid #1A369A;outline-offset:2px}
.uk-button:focus{outline:3px solid #1A369A;outline-offset:2px}
.uk-link,a {color:var(--sotn-claret);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:#d99;cursor:pointer}
.uk-link:visited,a:not([class]):visited {color:var(--sotn-claret-dk)} /* :not([class]) is load-bearing - a bare a:visited is specificity 0,1,1 and outranks every single-class component link (.sotn-pdf-btn, .sotn-gold-link, .subscribe-btn...), repainting them claret-dark once visited. Scoping to unclassed links keeps visited styling for body copy and leaves components to their own colours. */
.uk-link:hover,a:hover {color:var(--sotn-claret-dk);text-decoration:underline;text-decoration-color:var(--sotn-claret)}

/* Typography */
abbr[title] {border-bottom:1px dotted}
b,strong {font-weight:700}
em {color:#000}
fieldset,p,ul {margin:0 0 15px}
h1,h2,h3,h4 {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600;color:#444;text-transform:none;line-height:1.2}
ul {padding-left:30px}
hr {box-sizing:content-box;height:0;margin:15px 0;border:0;border-top:1px solid rgba(154,26,54,0.15)}
article,aside,footer,header,main,nav,section,summary {display:block}

/* Prose-derived lists: a long paragraph re-set as items.
   Base ul already supplies margin and padding-left; this adds per-item rhythm only. */
.spec-list {margin:15px 0}
.spec-list li {margin:10px 0;line-height:1.6}

/* Media */
audio,img,video {vertical-align:middle;max-width:100%;height:auto;box-sizing:border-box}
img {border:0}

/* UK Grid System */
.uk-grid {display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;margin-left:-25px}
.uk-grid:after,.uk-grid:before {content:"";display:block;overflow:hidden}
.uk-grid:after {clear:both}
.uk-grid > * {flex:none;margin:0;float:left;padding-left:25px}
.uk-grid > * > :last-child {margin-bottom:0}

@media (min-width:1200px) {.uk-grid {margin-left:-35px} .uk-grid > * {padding-left:35px} .uk-grid + .uk-grid{margin-top:35px}}

.uk-grid-medium {margin-left:-25px}
.uk-grid-medium > * {padding-left:25px}
.uk-grid-medium + .uk-grid-medium{margin-top:25px}

/* Child-width grid utilities (mobile-first; breakpoints match uk-width-small/medium/large convention: 480/768/960) */
[class*="uk-child-width"]>*{box-sizing:border-box} /* cells must absorb their own gutter padding, else 4x(25%+35px) overflows and wraps 3+1 */
.uk-child-width-1-1>*{width:100%}
.uk-child-width-1-2>*{width:50%}
.uk-child-width-1-3>*{width:33.333%}
.uk-child-width-1-4>*{width:25%}
@media (min-width:480px){.uk-child-width-1-2\@s>*{width:50%} .uk-child-width-1-3\@s>*{width:33.333%} .uk-child-width-1-4\@s>*{width:25%}}
@media (min-width:768px){.uk-child-width-1-1\@m>*{width:100%} .uk-child-width-1-2\@m>*{width:50%} .uk-child-width-1-3\@m>*{width:33.333%} .uk-child-width-1-4\@m>*{width:25%} .uk-child-width-1-5\@m>*{width:20%} .uk-child-width-1-6\@m>*{width:16.666%}}
@media (min-width:960px){.uk-child-width-1-1\@l>*{width:100%} .uk-child-width-1-2\@l>*{width:50%} .uk-child-width-1-3\@l>*{width:33.333%} .uk-child-width-1-4\@l>*{width:25%} .uk-child-width-1-5\@l>*{width:20%} .uk-child-width-1-6\@l>*{width:16.666%}}

/* Grid Widths */
[class*="uk-grid-width"] > * {box-sizing:border-box;width:100%}

@media (min-width:480px) {.uk-grid-width-small-1-1 > * {width:100%}}

@media (min-width:768px) {.uk-grid-width-medium-1-2 > * {width:50%}}

@media (min-width:960px) {.uk-grid-width-large-1-3 > * {width:33.333%}}

/* Width Classes */
[class*="uk-width"] {box-sizing:border-box;width:100%}
.uk-width-1-1 {width:100%}
.uk-width-1-2,.uk-width-5-10{width:50%}

@media (min-width:768px) {.uk-width-medium-1-1 {width:100%} .uk-width-medium-1-3{width:33.333%} .uk-width-medium-3-10 {width:30%} .uk-width-medium-7-10 {width:70%}}

@media (min-width:960px) {.uk-width-large-1-2{width:50%} .uk-width-large-2-10{width:20%} .uk-width-large-8-10{width:80%}}

/* Panel */
.uk-panel {display:block;position:relative;text-decoration:none}
.uk-panel:hover {text-decoration:none}
.uk-panel:after,.uk-panel:before {content:"";display:table}
.uk-panel:after {clear:both}

.uk-panel-box {background:#fff;color:#444;padding:0}

/* Base component */
.quick-links{border:2px solid #9a1a36;padding:0;width:140px;line-height:1.5;text-align:center;margin:0 auto 1.5rem;background:#fff}
.quick-links-list a {text-decoration: underline}

/* Header with brand colour */
.quick-links-header{background:#9a1a36;color:#fff;padding:8px 4px;font-weight:700;font-size:14px}

/* Navigation list */
.quick-links-list{list-style:none;padding:8px 4px;margin:0}
.quick-links-list li{margin:0;padding:4px 0;border-bottom:1px solid #f8f9fa}
.quick-links-list li:last-child{border-bottom:none}

/* Link states - Standard interaction */
.quick-links-list a{display:block;padding:4px 8px;color:var(--sotn-claret);transition:all .2s ease;border-radius:2px}
.quick-links-list a:hover{color:var(--sotn-claret-dk);background:#f8f9fa;text-decoration:underline}
.quick-links-list a:active{background:#e0e0e0}

/* Keyboard focus indicator - WCAG 2.4.7 compliance */
.quick-links-list a:focus{outline:3px solid #1a369a;outline-offset:2px;background:#e3f2fd;color:#1a369a;text-decoration:underline}

/* High contrast mode support - Low vision accessibility */
@media(prefers-contrast:high){.quick-links{border-width:3px} .quick-links-list a:focus{outline-width:4px}}

/* Reduced motion support - Motion sensitivity accessibility */
@media(prefers-reduced-motion:reduce){.quick-links-list a{transition:none}}

/* Security Badge - Green buttons */
.security-badge{display:inline-block;padding:6px 12px;background:#2d8116;color:#fff;border-radius:15px;font:bold 12px/1 "Helvetica Neue",Arial,sans-serif;text-decoration:none;transition:all .3s ease}
.security-badge:hover{background:#266e13;color:#fff;transform:translateY(-1px)}

/* Proprietary Databases promo panel (quick-links-hub.php) */

.db-panel{background:linear-gradient(135deg,#004d99 0,#004999 100%);color:#fff;padding:20px;margin:20px 0 0 0;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.2);border:2px solid #ffd700} /* light stop #004d99, not #0066cc: the lighter blue made the #ffd700 title/check text fail AA (3.97:1) near the top of the panel */
.db-panel-icon{font-size:2.5em;text-align:center;margin-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,.3)}
.db-panel-title{color:#ffd700;font-size:1.3rem;font-weight:700;margin:0 0 10px 0;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.db-panel-intro{font-size:0.9rem;line-height:1.5;margin:0 0 12px 0;color:#fff;text-align:center}
.db-panel-list{list-style:none;padding:0;margin:12px 0;font-size:0.9rem;line-height:1.8}
.db-panel-list li{padding-left:20px;position:relative;color:#fff}
.db-panel-check{position:absolute;left:0;color:#ffd700;font-weight:700;font-size:1.1rem}
.db-panel-cta{display:block;margin-top:15px;padding:12px 10px;background:#ffd700;color:#004999;text-decoration:none;border-radius:6px;font-weight:700;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .3s ease}
.db-panel-cta:hover,.db-panel-cta:focus-visible{background:#ffed4e;color:#004999;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
/* .db-panel is a <section>: section:last-of-type outranks .db-panel, restoring a 40px bottom margin */
.quick-links .db-panel{margin:20px 0 0}

/* Print optimisation */
@media print{.quick-links{border:1px solid #000;page-break-inside:avoid} .quick-links-header{background:#000;color:#fff}}

/* Mobile responsive enhancements */
@media(max-width:640px){.quick-links{width:160px;max-width:90%} .quick-links-list a{padding:6px 10px;font-size:15px;min-height:44px;display:flex;align-items:center;justify-content:center}}

/* Cover */

.uk-cover {overflow:hidden}
[data-uk-cover] {position:relative;left:50%;top:50%;transform:translate(-50%,-50%)}

/* Navigation */

li > a > div {font-size:12px;line-height:18px}

/* Table */
.uk-table td,.uk-table th {padding:8px}
.uk-table th {text-align:center}
.uk-table td {vertical-align:top}
.uk-table-striped tbody tr:nth-of-type(odd) {background:#f8f9fa}
.uk-table-hover tbody tr:hover {background:#f8f9fa}

/* Pagination */
.uk-pagination:after,.uk-pagination:before {content:"";display:table}
.uk-pagination:after {clear:both}
.uk-pagination > li {display:inline-block;font-size:1rem;vertical-align:top}
.uk-pagination > li:nth-child(n+2) {margin-left:5px}
.uk-pagination > li > a,.uk-pagination > li > span {display:inline-block;min-width:16px;padding:3px 5px;line-height:20px;text-decoration:none;box-sizing:content-box;text-align:center}
.uk-pagination > li > a {background:#e0e0e0;color:#444}
.uk-pagination > li > a:focus,.uk-pagination > li > a:hover {background-color:#f8f9fa;color:#444;outline:0}
.uk-pagination > li > a:active {background-color:#e0e0e0;color:#444}
.uk-pagination > .uk-active > span {background:#1A369A;color:#fff}

/* List */
.uk-list {padding:0;list-style:none}
.uk-list > li:after,.uk-list > li:before {content:"";display:table}
.uk-list > li:after {clear:both}
.uk-list > li > :last-child {margin-bottom:0}
.uk-list ul {margin:0;padding-left:20px;list-style:none}

.uk-list-striped > li {padding:5px}
.uk-list-striped > li:nth-of-type(odd) {background:#f8f9fa}

/* Active State */
.uk-active {background:#fff}

/* Button */
.uk-button{margin:0;overflow:visible;font:inherit;text-transform:none;display:inline-block;box-sizing:border-box;padding:0 12px;background:#9A1A36;vertical-align:middle;line-height:30px;min-height:30px;font-size:1rem;text-decoration:none;text-align:center;color:#fff;border:1px solid #9A1A36;border-radius:4px;transition:all 0.2s ease;font-weight:600}
.uk-button:not(:disabled){cursor:pointer}
.uk-button:focus,.uk-button:hover{background:#7a1429;border-color:#7a1429;color:#fff;outline:0;text-decoration:none;transform:translateY(-1px);box-shadow:0 2px 8px rgba(154,26,54,0.3)}
.uk-button.uk-active,.uk-button:active{background:#7a1429;color:#fff;transform:translateY(0);box-shadow:0 1px 4px rgba(154,26,54,0.2)}
.uk-button-primary {background-color:#1A369A;color:#fff}
.uk-button-primary:focus,.uk-button-primary:hover {background-color:#0d1f5c;color:#fff}
.uk-button-primary.uk-active,.uk-button-primary:active {background-color:#0d1f5c;color:#fff}
.uk-button:disabled {background-color:#f8f9fa;color:#666}
.uk-button-small {min-height:25px;padding:0 10px;line-height:25px;font-size:12px}

/* Form Inputs */
input[type="text"],input[type="email"],input[type="search"],input[type="tel"],input[type="url"],textarea,select{font-family:inherit;font-size:1rem;padding:10px 12px;border:1px solid #e0e0e0;border-radius:4px;transition:all 0.2s ease;background:#fff;color:#444;box-sizing:border-box}
input[type="text"]:focus,input[type="email"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="url"]:focus,textarea:focus,select:focus{border-color:#1A369A;outline:none;box-shadow:0 0 0 3px rgba(26,54,154,0.1)}
input[type="text"]:hover,input[type="email"]:hover,input[type="search"]:hover,input[type="tel"]:hover,input[type="url"]:hover,textarea:hover,select:hover{border-color:#999}

/* Badge */
.uk-badge {display:inline-block;padding:0 5px;font-size:0.75rem;font-weight:700;line-height:14px;text-align:center;vertical-align:middle;text-transform:none;color:#fff;background-color:#1A369A}

/* Animation */

@keyframes uk-fade {0% {opacity:0} 100% {opacity:1}}

/* Container */
.uk-container {box-sizing:border-box;max-width:1200px;padding:0 35px}
@media (max-width:768px){.uk-container{padding:0 15px}}
.uk-container:after,.uk-container:before {content:"";display:table}
.uk-container:after {clear:both}
.uk-container-center {margin-left:auto;margin-right:auto}

/* Margin */
.uk-margin {margin-bottom:15px}
* + .uk-margin {margin-top:15px}

/* Visibility */
@media (min-width:960px) {.uk-visible-small {display:none}}
@media (min-width:768px) and (max-width:960px) {.uk-visible-small {display:none}}
@media (max-width:768px) {.uk-hidden-small {display:none}}
@media (max-width:768px) {.mobile-hide {display:none}}
@media (max-width:768px) {.faq-section {padding:20px}}

/* Flex */

.uk-flex-center {justify-content:center}

/* Text */
.uk-text-center {text-align:center}

/* Slider */
[data-uk-slider] {direction:ltr}
html[dir="rtl"] .uk-slider > * {direction:rtl}
.uk-slider {position:relative;z-index:0;touch-action:pan-y}
.uk-slider:not(.uk-grid) {margin:0;padding:0;list-style:none}
.uk-slider > * {position:absolute;top:0;left:0}
.uk-slider-container {overflow:hidden}

.uk-slider img {pointer-events:none}

/* Custom Styles */

.my-link-panel {width:140px;line-height:1.75;border:#000 solid 1px;text-align:center;padding:.1em;margin:0 auto;background-color:#e0e0e0}
.my-link-panel .rl-s1{font-size:88%}
.my-link-panel .rl-s2{font-size:80%}
.my-link-panel .rl-s3{font-size:72%}

/* Headings */
h1{font-size:200%;line-height:1.2;font-weight:700;text-align:center;margin:30px 0 20px}
h2{font-size:155%;line-height:1.3;font-weight:700;text-align:left;margin:0 0 20px} /* margin declared: otherwise h2 inherits the UA sheet's 0.83em */
h3{font-size:130%;line-height:1.4;font-weight:700;text-align:left;color:#444;margin:35px 0 15px}
h4{font-size:112.5%;line-height:1.4;font-weight:700;text-align:left;color:#9A1A36;margin:28px 0 12px}
h5{font-size:105%;line-height:1.4;font-weight:700;text-align:left;margin:22px 0 10px}

/* Contextual Spacing */
*+h1 {margin-top:var(--sp-section)} /* inert: the page-header rhythm block at the end of this file governs h1 */
*+h2 {margin-top:var(--sp-section)}
*+h3 {margin-top:var(--sp-sub)}
*+h4 {margin-top:var(--sp-minor)}

/* Boxed content needs more air than prose: the eye measures the gap from the
   box edge, not the text inside it. Substring selectors catch the per-page
   .x-panel / .x-grid / .x-cards classes without editing any page. */
[class*="-grid"]+h2,[class*="-panel"]+h2,[class*="-cards"]+h2,[class*="-box"]+h2,figure+h2,table+h2 {margin-top:calc(var(--sp-section) + 14px)}

/* First Child - Reduce top margin when header is first in container */
section > h1:first-child,section > h2:first-child,section > h3:first-child,
article > h1:first-child,article > h2:first-child,article > h3:first-child,
div > h1:first-child,div > h2:first-child,div > h3:first-child {margin-top:0}
article > h2:first-child {margin-top: 0.85em} /* For Insights articles */

/* Tight Spacing - Reduce gap between header and following paragraph */
h1+p,h2+p,h3+p,h4+p,h5+p {margin-top:0}
hr.panel {line-height:1px;border:#e0e0e0 solid 1px;margin:2px 0}

/* Vertical Spacing  */
/* Space is added above sections as well as below, and nested sub-sections get a
   smaller step than top-level ones, so an H2 topic break reads bigger than an H3
   sub-break. Margins collapse, so no doubling. */
section{margin-bottom:var(--sp-minor)}
*+section{margin-top:var(--sp-section)}
section>*+section{margin-top:var(--sp-sub)} /* (0,0,2) outranks *+section (0,0,1) */

/* Utility Classes */

.border {border:#9A1A36 solid 1px}
.noborder {border:none}
.center {margin:0 auto;text-align:center}
.justify {text-align:justify}
.fr {float:right}
.fl {float:left}
.left,.sotn-text-left {text-align:left} /* the scoped .uk-table th.sotn-text-left override stays separate */
.white {color:#fff}
.gray {color:#666}
.black {color:#000}
.claret {color:#9A1A36}
.bold {font-weight:700}
.italic {font-style:italic}

/* Padding Classes */
.news {padding:0 2em}
.padt {padding:0 2em} /* live on prices/metallurgical-coal.html - do not remove */

.padb1em {padding:0 0 1em}
.padt1em {padding:1em 0 0}

.padtb1em {padding:1em 0}

/* Font Size Classes */
.sml,.sotn-text-90 {font-size:90%}
.vsml {font-size:85%}

/* Misc */

/* Width Classes */
.w20 {width:20%}
.w30 {width:30%}
.w50 {width:50%}
.w60 {width:60%}
.w75 {width:75%}
.w90 {width:90%}
.w92 {width:92%}
.w96 {width:96%}
.w100 {width:100%}
.w50,.w60,.w75,.w90,.w92,.w96 {margin:0 auto}

/* Table */
table {border:gray solid 1px}

/* Accessibility */
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Form Elements */
input[type=text] {border:1px solid #9A1A36;color:#9A1A36;background-color:white;padding:2px 5px}
input[type=text]:focus {outline:none;border-color:#9A1A36;box-shadow:0 0 2px #9A1A36}
input[type=submit] {background-color:#9A1A36;color:white;border:1px solid #9A1A36;padding:2px 8px;cursor:pointer}
input[type=submit]:hover {background-color:#7a1429;border-color:#7a1429}

/* Breadcrumbs */
.breadcrumb {padding: 0;margin-bottom: 10px;font-size: 14px}
.breadcrumb ol {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;align-items: center}
.breadcrumb li {display: inline} .breadcrumb a {color: var(--sotn-claret);text-decoration: underline;text-decoration-color:#d99;text-underline-offset:3px}
.breadcrumb a:hover {color: var(--sotn-claret-dk);text-decoration: underline;text-decoration-color:var(--sotn-claret)} .breadcrumb .separator {margin: 0 8px;color: #444}
.breadcrumb li:last-child span {color: #444}
@media (max-width: 768px) {.breadcrumb {font-size: 12px} .breadcrumb .separator {margin: 0 4px}}

/* Rounded Corners */
figure img,img.img,.fl img,.fr img{border-radius: 12px !important}

/* Media Queries */
@media screen and (max-width:960px) {.hide-medium {display:none}}

/* Media Queries */
@media screen and (min-width:960px) {.hide-large {display:none}}
@media screen and (max-width:768px) {.hide-small {display:none}}


/* SITE HEADER (.sotn-*). Fixed claret nav: brand, hub links, the Advisory/Resources/History mega panels, phone, email, search. Markup lives in main-menu.php. body{padding-top} must equal --sotn-nav-h. */
:root{--sp-section:clamp(40px,7vw,76px);--sp-sub:clamp(28px,4.5vw,46px);--sp-minor:clamp(20px,3vw,30px);--sotn-nav-h:52px;--sotn-ctl-h:30px;--t-meta:.8125rem;--t-small:.875rem;--t-secondary:.9375rem;--t-body:1.0625rem;--t-lede:1.125rem;--sotn-claret:#9a1a36;--sotn-claret-dk:#7a1429;--sotn-claret-pale:#f0c8d2;--sotn-cream:#fff3e0;--sotn-cream-line:#d3d1c7;--sotn-ink:#2c2c2a;--sotn-surface:#f3f4f6;--sotn-surface-line:#e0e0e0;--pillar-petrol:#2d5a5c;--pillar-petrol-dk:#1f4244;--pillar-stone:#8b5e2b;--pillar-stone-dk:#6e4a21} /* "Stone" means the Intelligence pillar colour (--pillar-stone, now bronze #8b5e2b; was #6b6459), not --sotn-cream. --sotn-surface is the one neutral panel colour (#f8f9fa is invisible against the html gradient). See sotn-colour-button-rules.md */

/* band 1 */
.sotn-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--sotn-claret);border-bottom:1px solid var(--sotn-claret-dk);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)} /* shadow lifts the fixed bar off the full-bleed claret hero and off content scrolling beneath */
.sotn-nav-in{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;height:var(--sotn-nav-h);max-width:1200px;margin:0 auto;padding:0 20px;position:relative}
/* Desktop: one row, never wrapping. The bar is height-locked, so a wrapped
   second line would overflow onto the page below. Instead the utilities
   shed progressively at the breakpoints below. */
@media screen and (min-width:961px){
  .sotn-brand{flex:0 0 auto}
  .sotn-nav-links{flex:0 1 auto;flex-wrap:nowrap;min-width:0;overflow:hidden}
  .sotn-nav-util{flex:0 0 auto}
}
/* 1. tighten spacing */
@media screen and (min-width:961px) and (max-width:1280px){
  .sotn-search input.sotn-search-input{width:120px}
}
@media screen and (min-width:961px) and (max-width:1200px){
  .sotn-nav-links{gap:12px}
  .sotn-nav-in{gap:12px}
  .sotn-search input.sotn-search-input{width:90px}
}
/* 2. phone drops to icon only, 3. search drops out: see the nav call-to-action
   block below (961-1380px and 961-1150px). */

/* brand - Impact wordmark carried over from the previous .hub-brand */
.sotn-brand{display:flex;align-items:center;gap:7px;color:#fff;text-decoration:none}
.sotn-brand:hover,.sotn-brand:focus{color:#fff;text-decoration:none}
.sotn-brand-logo{display:block;width:28px;height:28px;flex:none;border-radius:3px}
.sotn-brand-name{font-family:Impact,Haettenschweiler,'Arial Narrow',sans-serif;font-size:17px;letter-spacing:0.3px;color:#fff;white-space:nowrap;line-height:1}

/* hub links */
.sotn-nav-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.sotn-nav-links a,.sotn-nav-links a:visited{display:flex;align-items:center;gap:7px;color:#fff;text-decoration:none;font-size:17px}
.sotn-nav-links a:hover{color:#ffe0b2;text-decoration:underline}
.sotn-icon{display:none;width:20px;height:20px;fill:currentColor;flex:none}
.sotn-mobile-only{display:none}

/* utilities: phone, email, search */
.sotn-nav-util{margin-left:auto;display:flex;align-items:center;gap:14px}
.sotn-tel{display:flex;align-items:center;gap:5px;color:#fff;text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.sotn-tel:hover{color:#fff;text-decoration:underline}
/* Mail icon sits beside the phone link (icon-only on screen); the print stylesheet swaps it for the written address. */
.sotn-mail{display:flex;align-items:center;color:#fff}
@media print{.sotn-mail{display:inline} .sotn-mail svg{display:none}}
.sotn-mail:hover{color:#fff}
.sotn-search{display:flex;align-items:center;margin:0}
/* selectors carry the element name deliberately: the global input[type="text"]
   rule near the top of this file is 0,1,1 and would otherwise win on padding,
   font-size and border, making the bar taller than --sotn-nav-h */
.sotn-search input.sotn-search-input{width:120px;height:var(--sotn-ctl-h);box-sizing:border-box;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-right:0;border-radius:3px 0 0 3px;color:#fff;font-size:14px;line-height:normal;padding:0 8px;margin:0;transition:none}
.sotn-search input.sotn-search-input::placeholder{color:var(--sotn-claret-pale);opacity:1}
.sotn-search input.sotn-search-input:focus{background:#fff;color:var(--sotn-ink);border-color:#fff;outline:2px solid #fff;outline-offset:0;box-shadow:none}
.sotn-search button.sotn-search-btn{display:inline-flex;align-items:center;justify-content:center;height:var(--sotn-ctl-h);box-sizing:border-box;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:0 3px 3px 0;color:#fff;padding:0 9px;margin:0;cursor:pointer}
.sotn-search button.sotn-search-btn:hover{background:rgba(255,255,255,.3)}
.sotn-search-icon{width:15px;height:15px;fill:currentColor}

/* mobile toggle - checkbox and label, no JavaScript */
.sotn-nav-toggle{display:none;border:1px solid var(--sotn-claret-pale);color:#fff;border-radius:3px;padding:5px 8px;cursor:pointer;line-height:0}
.sotn-toggle-icon{width:20px;height:20px;fill:currentColor}
.sotn-toggle-close{display:none}
#sotn-menu-toggle:checked~.sotn-nav-links{display:flex}
#sotn-menu-toggle:checked~.sotn-nav-toggle .sotn-toggle-open{display:none}
#sotn-menu-toggle:checked~.sotn-nav-toggle .sotn-toggle-close{display:inline-block}
.sotn-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Skip link - first focusable element on the page. Off-screen until focused,
   then fixed so it clears the fixed nav band. WCAG 2.4.1 Bypass Blocks. */
/* Focus rings. The site-wide blue (#1A369A) is ~1.6:1 on claret, so the
   bar gets white instead. :focus-visible keeps rings off mouse clicks.
   The hamburger checkbox is off-screen, so its ring goes on the label. */
.sotn-nav a:focus-visible,.sotn-nav button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#sotn-menu-toggle:focus-visible~.sotn-nav-toggle{outline:2px solid #fff;outline-offset:2px}
.sotn-skip{position:absolute;left:-9999px;top:auto}
.sotn-skip:focus{position:fixed;left:20px;top:8px;z-index:1100;background:#fff;color:var(--sotn-claret);padding:9px 16px;border-radius:3px;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.3)}
#main{scroll-margin-top:60px}

/* Mobile: the drawer is an absolute overlay hanging off the bar, not a
   flex line inside it, so opening it cannot change the bar's height. */
@media screen and (max-width:960px){
  .sotn-nav-toggle{display:inline-block;order:3}
  .sotn-nav-links{display:none;position:absolute;top:100%;left:0;right:0;z-index:1001;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:0 20px 8px;background:var(--sotn-claret);border-top:1px solid var(--sotn-claret-dk);box-shadow:0 8px 16px rgba(0,0,0,.25);max-height:calc(100vh - var(--sotn-nav-h));overflow-y:auto}
  .sotn-nav-links a{padding:11px 0;border-top:1px solid rgba(255,255,255,.18);font-size:15px}
  .sotn-icon{display:block}
  .sotn-mobile-only{display:block}
  .sotn-nav-util{gap:12px}
  .sotn-tel .sotn-tel-text{display:none}
  .sotn-search input.sotn-search-input{width:90px}
}
/* Narrow phones: the search box yields, not the wordmark - brand
   recognition matters more than an inline search field on a phone. */
@media screen and (max-width:700px){
  .sotn-search input.sotn-search-input{width:70px}
}
@media screen and (max-width:480px){
  .sotn-search{display:none}                       /* bar search out ... */
  .sotn-drawer-search .sotn-search{display:flex}   /* ... drawer search in */
  .sotn-drawer-search{display:block}
}
/* full-width search row at the foot of the mobile drawer */
.sotn-drawer-search{display:none;padding:12px 0 4px;border-top:1px solid rgba(255,255,255,.18)}
.sotn-drawer-search .sotn-search{width:100%}
.sotn-drawer-search input.sotn-search-input{width:auto;flex:1 1 auto;min-width:0;height:36px}
.sotn-drawer-search button.sotn-search-btn{height:36px;padding:0 14px}
/* Caret on the Advisory, Resources and History bar links. The panels themselves
   are styled in the "Mega menu" block near the end of the file. */
.sotn-caret{display:block;width:10px;height:6px;flex:none;margin-left:-2px}
@media screen and (min-width:961px){
  .sotn-has-sub:hover>a .sotn-caret,.sotn-has-sub:focus-within>a .sotn-caret{transform:rotate(180deg)}
  .sotn-caret{transition:transform .15s}
}
@media (prefers-reduced-motion:reduce){.sotn-caret{transition:none}}
@media screen and (max-width:960px){.sotn-caret{display:none}}

/* Search icon */

/* Back to Top Button - Mobile Only */
.back-to-top{display:none;position:fixed;bottom:20px;right:20px;width:48px!important;height:48px!important;min-width:48px;min-height:48px;background:#9A1A36;color:#fff;text-align:center;line-height:48px;font-size:1.6rem;border-radius:50%;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.3);z-index:1000;transition:background .3s;box-sizing:content-box;padding:0;margin:0;border:0} .back-to-top:hover{background:#7a1429;color:#fff}
@media (max-width:768px){.back-to-top{display:block}}


/* Centralized widgets, shared by many pages. Pages that use these classes carry no local copy of these rules. */

/* Chronology Summary Box - floated timeline widget on history/company pages */
.chronology-summary-box {float:right;width:auto;min-width:320px;max-width:400px;margin:0 0 20px 30px;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(26,54,154,0.15);border:2px solid #1A369A;overflow:hidden}
.chronology-header {background:linear-gradient(135deg,#1A369A,#2a4db8);color:white;padding:12px 18px;text-align:center;border-bottom:3px solid #9A1A36}
.chronology-header h3 {margin:0;font-size:1rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.2)}
.chronology-content {padding:16px 20px;background:linear-gradient(145deg,#e3f2fd,#fff)}
.chronology-content ul {margin:0;padding:0;list-style:none}
.chronology-content li {padding:8px 0;border-bottom:1px solid rgba(26,54,154,0.1);font-size:14px;line-height:1.4;position:relative;padding-left:15px}
.chronology-content li:last-child {border-bottom:none}
.chronology-content li:before {content:"•";color:#9A1A36;font-weight:bold;font-size:16px;position:absolute;left:0;top:8px}
.chronology-content strong {color:#1A369A;font-weight:600}
.chronology-footnote {padding:12px 20px 16px;background:linear-gradient(145deg,#e3f2fd,#e3f2fd);border-top:1px solid rgba(26,54,154,0.2);font-size:12px;line-height:1.5;color:#1A369A;font-style:italic;text-align:center}
@media (max-width:900px){.chronology-summary-box{float:none;width:100%;margin:0 0 20px 0}}

/* "#trim" News Ticker Text Sizing - news topic/region/company pages */
#trim {font-size:15px;line-height:1.7}
#trim a {font-size:17px;font-weight:600;line-height:1.4}
#trim small,#trim .vsml {font-size:13px}

/* "#trimmed" Truncated Headline Links - Responsive Ellipsis (news search/topics pages) */
#trimmed {white-space:nowrap;overflow-x:hidden}
#trimmed a {display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%;vertical-align:middle}
@media screen and (min-width:481px) and (max-width:768px){#trimmed a{max-width:90%} #trimmed{font-size:14px}}
@media screen and (max-width:480px){#trimmed a{max-width:70%}}

/* Lightweight YouTube Embed Widget (labnol-style) - news/clips and kb pages */
.youtube-player {position:relative;padding-bottom:56%;height:0;overflow:hidden;max-width:100%;background:#000;margin:5px}
.youtube-player iframe {position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:transparent}
.youtube-player img {bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;position:absolute;right:0;top:0;border:none;height:auto;cursor:pointer;transition:.4s all}
.youtube-player img:hover {filter:brightness(75%)}
.youtube-player .play {height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;background:url("//i.imgur.com/TxzC70f.png") no-repeat;cursor:pointer}
.video {width:65%;margin-left:auto;margin-right:auto}
@media screen and (max-width:360px){.video{width:100%;margin:0;border:0;padding:0}}
@media screen and (max-width:767px){.video{width:90%;margin-left:auto;margin-right:auto} .youtube-player{padding-bottom:56.25%;margin:5px auto} .video .center{width:90%;margin-left:auto;margin-right:auto;line-height:1.5}}

/* Tablet Abbreviated-Text Toggle - shows shorter label at tablet widths (essentials pages) */
.tablet-abbr {display:none}
.tablet-full {display:inline}
@media screen and (min-width:641px) and (max-width:960px){.tablet-abbr{display:inline} .tablet-full{display:none}}

/* EclipseCrossword Widget - answer box, grid squares and states (puzzles/crossword pages) */
/* NOTE: state classes (cheated/error/normal _sel/_unsel) are applied at runtime by crossword.js */
.ecw-answerbox {color:black;background-color:#fff;border-color:#444;border-style:solid;border-width:1px;display:block;padding:1em}
.ecw-box {border-style:solid;border-width:1px;cursor:pointer;font-size:100%;font-weight:bold;height:1.4em;overflow:hidden;text-align:center;width:1.4em}
.ecw-boxcheated_sel {background-color:#e0e0e0;border-color:#444;color:#000}
.ecw-boxcheated_unsel {background-color:#fff;border-color:#444;color:#1a6bb0}
.ecw-boxerror_sel,.ecw-boxerror_unsel {background-color:#fff3e0;border-color:#444;color:#bf0000}
.ecw-boxnormal_sel {background-color:#aaa;border-color:#444;color:#000}
.ecw-boxnormal_unsel {background-color:#fff;border-color:#444;color:#000}
.ecw-button {width:5em}
.ecw-cluebox {font-size:0.8rem;border-style:solid;border-width:1px 0;border-color:#444;margin-top:1em;padding:.5em 0pt}
.ecw-crosswordarea {background-color:#e0e0e0;border-color:#444;border-style:solid;border-width:1px;padding:.5em;font-family:Verdana,Arial,sans-serif;font-size:small}
.ecw-copyright {margin-bottom:1em;font-size:x-small;font-family:Verdana,Arial,sans-serif}
.ecw-input {font-family:Verdana,Arial,sans-serif}
.ecw-wordlabel {text-transform:uppercase;margin:0}
.ecw-wordinfo {font-size:0.75rem;color:#666}
.ecw-worderror {color:#c00000;font-weight:bold;display:none;margin-top:1em}
#wordentry {width:7em}
@media screen and (max-width:700px){.ecw-box,.ecw-cluebox{font-size:80%} .ecw-answerbox{padding:.5em} .ecw-button{width:4em}}
@media screen and (max-width:560px){.ecw-box,.ecw-cluebox{font-size:70%} .ecw-answerbox{padding:.1em}}

/* Podcast Episode Page Widgets - hero, meta, audio player, transcript, nav (insights/podcasts) */
.podcast-hero {background:linear-gradient(135deg,#1A369A 0%,#9A1A36 100%);color:white;padding:40px 30px;border-radius:8px;margin:20px 0}
.podcast-hero h2 {color:white;margin-top:0;font-size:2rem}
.episode-meta {color:rgba(255,255,255,0.9);font-size:1.1rem;margin:15px 0;display:flex;gap:20px;flex-wrap:wrap}
.episode-meta span {display:inline-flex;align-items:center;gap:5px}
.audio-player {background:white;padding:20px;border-radius:8px;margin:20px 0;box-shadow:0 4px 6px rgba(0,0,0,0.1)}
.audio-player audio {width:100%;margin:10px 0}
.subscribe-buttons,.keyword-section {display:flex;gap:15px;flex-wrap:wrap;margin-top:20px}
.subscribe-btn {background:white;color:#1A369A;padding:10px 20px;border-radius:5px;text-decoration:none;font-weight:bold;display:inline-flex;align-items:center;gap:8px;transition:transform 0.2s;font-size:0.9rem}
.subscribe-btn svg {flex:none}
.subscribe-btn:hover {transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2);color:#1A369A;text-decoration:none}
.content-section {background:#f8f9fa;border-left:4px solid #9A1A36;padding:25px;margin:25px 0;border-radius:4px}
.content-section h3 {color:#9A1A36;margin-top:0}
.key-points {background:white;padding:20px;border-radius:5px;margin:20px 0;border:1px solid #e0e0e0}
.key-points h3 {color:#9A1A36;margin-top:0;border-bottom:2px solid #9A1A36;padding-bottom:10px}
.key-points ul {margin:15px 0;padding-left:20px}
.key-points li {margin:10px 0;line-height:1.6}
.transcript-section {background:#f8f9fa;padding:25px;border-radius:5px;margin:25px 0;border:1px solid #e0e0e0}
.transcript-section h3 {color:#444;margin-top:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.transcript-content {line-height:1.8;margin-top:15px}
.transcript-content h4 {color:#9A1A36;margin-top:25px;margin-bottom:10px;font-size:1.1rem}
.timestamp {color:#666;font-size:0.9rem;font-style:italic}
.resources-box {background:#fff3e0;border:2px solid #9A1A36;padding:20px;border-radius:8px;margin:25px 0}
.resources-box h3 {color:#9A1A36;margin-top:0}
.resources-box ul {margin:10px 0;padding-left:20px}
.navigation-buttons {display:flex;justify-content:space-between;margin:30px 0;flex-wrap:wrap;gap:10px}
.nav-btn {padding:12px 24px;border-radius:5px;text-decoration:none;font-weight:bold;transition:all 0.3s;display:inline-block}
.nav-btn.prev {background:#1A369A;color:white}
.nav-btn.prev:hover {background:#0f2565;color:white;text-decoration:none}
.nav-btn.next {background:#9A1A36;color:white}
.nav-btn.next:hover {background:#6d1226;color:white;text-decoration:none}
@media screen and (max-width:768px){.podcast-hero h2{font-size:1.6rem} .episode-meta{font-size:1rem;gap:10px} .subscribe-buttons{flex-direction:column} .subscribe-btn{width:100%} .navigation-buttons{flex-direction:column} .nav-btn{width:100%;text-align:center}}

/* Projects Table Header Styling - narrow-screen column collapse (capital-investment/projects pages) */
#projectsTable th {font-size:0.9rem;white-space:nowrap;padding:8px 4px}
#projectsTable th:hover {background:#e3f2fd;cursor:pointer}
@media (max-width:1200px) and (min-width:768px){#projectsTable .hide-on-narrow{display:none} #projectsTable{width:100%!important;max-width:100%;table-layout:fixed} #projectsTable td,#projectsTable th{word-wrap:break-word;overflow-wrap:break-word} .uk-width-large-8-10{overflow:hidden}}

/* Capex Tables - Responsive Hide Utility Classes (capital-investment/capex pages) */
@media screen and (max-width:560px){.hide2{display:none}}
@media screen and (max-width:400px){.hide3{display:none}}

/* Zoom-on-Hover Image Effect (prices pages) */
.zoom {transition:transform .2s;width:125px;height:200px;margin:20px auto} /* live on prices/price-spreads.php and prices/pricing-history.php - do not remove */
.zoom:hover {margin:40px auto;border:40px;transform:scale(2.0)}

/* Technical Article Sources List, Table of Contents Box, Technical Note Callout (resources/technical pages) */
.sources-list {font-size:85%;color:#444;border-top:1px solid #e0e0e0;margin-top:2em;padding-top:1em}
.sources-list li {margin-bottom:0.4em}
.toc {background:#f8f9fa;border:1px solid #e0e0e0;border-radius:4px;padding:14px 18px;margin-bottom:1.5em;font-size:0.9rem}
.toc ol {margin:0.4em 0 0 1.2em;padding:0}
.toc li {margin-bottom:0.3em}
.tech-note {background:#e3f2fd;border-left:3px solid #1A369A;padding:10px 14px;margin:1em 0;font-size:0.9rem}

/* Mergers & Acquisitions Page Utilities */
.show {display:none}
@media screen and (max-width:768px){.show{display:block}}
@media screen and (max-width:595px){.tiny{font-size:75%}}

/* Contextual Panels Component - coloured callout boxes used across the regional news,
   advisory, cost model, services and hub pages. The grid lives here too (see below), so
   pages need no local <style> block - only a width modifier class where the section is narrower. */
.section-header {font-weight:600;font-size:1.1rem;margin-bottom:1.5em;color:#1A369A;scroll-margin-top:110px} /* scroll-margin-top for decision-support.html's jump links */
.panel-box {padding:1em;margin-bottom:1em;border-radius:8px;border-left:5px solid}
/* Panel palette - brand claret / green / blue, with slate as a neutral fourth.
   Title colours are all >=4.5:1 on their own tint (WCAG AA for normal text). */
.panel-blue {background:#e3f2fd;border-left-color:#1A369A}
.panel-pink {background:#ffebee;border-left-color:#9A1A36} /* claret - class name kept so existing markup is untouched */
.panel-green {background:#f0f7e8;border-left-color:#2d8116} /* brand green darkened for text use */
.panel-orange {background:var(--sotn-surface);border-left-color:#455a64} /* slate - class name kept so existing markup is untouched; #f8f9fa would vanish against the page background */
.panel-title {margin-bottom:0.5em;font-size:1rem;font-weight:600}
.panel-blue .panel-title {color:#1A369A} /* 8.97:1 */
.panel-pink .panel-title {color:#9A1A36} /* 7.11:1 */
.panel-green .panel-title {color:#266e13} /* 5.8:1 on #f0f7e8 - #2d8116 is 4.498:1 here, just under AA; brand #369A1A only 3.24:1 */
.panel-orange .panel-title {color:#455a64} /* 6.58:1 */
.panel-text {font-size:0.9rem;margin-bottom:0}
.clickable-panel>div {transition:transform 0.2s ease}
.clickable-panel:hover>div {transform:translateY(-3px)}

/* Linked card (site-wide): a card with ONE destination is clickable anywhere.
   Stretched-link pattern: the card's title is its single link, and the link's
   ::after overlay covers the card, so no <a> wraps block content. Use only on
   cards with exactly one link. Markup: class="... sotn-linked-card" on the card,
   class="sotn-card-target" on the title link, and any "Read more" line as a
   non-link <span class="sotn-card-cue" aria-hidden="true">.
   A title link takes the title's own colour: 0,3,0 beats the site-wide a:hover
   (0,1,1) and the claret link colour, which otherwise repaint every title claret. */
.sotn-linked-card{position:relative;transition:transform .2s ease,box-shadow .2s ease}.sotn-linked-card .sotn-card-target::after{content:"";position:absolute;inset:0;border-radius:inherit}.sotn-linked-card :is(h2,h3,h4,h5,h6,.pillar-title,.panel-title) .sotn-card-target{color:inherit;text-decoration:none}.sotn-linked-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.12)}.sotn-linked-card:hover .sotn-card-target{text-decoration:underline}.sotn-card-cue{display:inline-block;margin-top:2px;font-size:.9rem;font-weight:600;color:var(--sotn-claret)}.sotn-linked-card:hover .sotn-card-cue{color:var(--sotn-claret-dk);text-decoration:underline}@media(prefers-reduced-motion:reduce){.sotn-linked-card{transition:none}.sotn-linked-card:hover{transform:none}}
/* Focus ring moves from the link to the whole card. Guarded so browsers without :has() keep the link's own outline instead of losing focus indication entirely. */
@supports selector(:has(*)){.sotn-linked-card .sotn-card-target:focus-visible{outline:none}.sotn-linked-card:has(.sotn-card-target:focus-visible){outline:3px solid var(--sotn-claret);outline-offset:3px}}

/* Cross-link panel grid - adapts to card count via :has() rather than one
   fixed width for every row:
     - fewer than 4 cards: a centred flex row with fixed card width, so an
       incomplete row centres instead of left-aligning with a trailing gap.
     - 4+ cards (:has(>:nth-child(4))): a CSS grid instead, spanning
       edge-to-edge (4 desktop, 2+2 tablet) rather than wrapping awkwardly.
   .xlink-grid is an alias for pages with their own .panel-grid (e.g. resource-hub). */
.panel-grid,.xlink-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;max-width:100%;margin:20px auto}
.panel-grid>*,.xlink-grid>*{flex:0 1 220px;min-width:0} /* fixed card width; stop long words forcing overflow */
.panel-grid .clickable-panel,.xlink-grid .clickable-panel{display:block;margin:0}
.panel-grid .panel-box,.xlink-grid .panel-box{height:100%;box-sizing:border-box;margin:0;width:auto;min-width:0;max-width:none} /* equal-height cards; box-sizing so the 1em padding is included in that 100%, not added on top; clears the fixed panel-vsmall/small/large widths */
.pg-narrow{max-width:750px} /* cost model pages */
.pg-medium{max-width:900px} /* advisory pages */

.panel-grid:has(>:nth-child(4)),.xlink-grid:has(>:nth-child(4)){display:grid;grid-template-columns:repeat(4,1fr)} /* full row of 4: edge-to-edge, no fixed card width to wrap */
@media(max-width:959px){.panel-grid:has(>:nth-child(4)),.xlink-grid:has(>:nth-child(4)){grid-template-columns:repeat(2,1fr)}} /* tablet 2+2, 4-card rows only */

@media(max-width:767px){
  .panel-grid,.xlink-grid{display:flex!important;flex-wrap:wrap;justify-content:center;gap:14px} /* !important: overrides the 4-card grid branch above too */
  .panel-grid>*,.xlink-grid>*{flex:0 1 100%!important}
  .panel-grid>:nth-child(n+3),.xlink-grid>:nth-child(n+3){display:none}
} /* mobile: first two only, stacked with a visible gap between them */

/* Screen/print visibility helpers */
.print-only{display:none} /* hidden on screen */
.screen-only{display:inline} /* visible on screen */

/* Print Styles */
@media print {*,:after,:before {background:0 0;color:#000;box-shadow:none;text-shadow:none} a,a:visited {text-decoration:underline} thead {display:table-header-group} img,tr {page-break-inside:avoid} img {max-width:100%} h2,h3,p {orphans:3;widows:3} h2,h3 {page-break-after:avoid} .sotn-nav{position:static} body{padding-top:0} .sotn-nav-toggle,.sotn-search{display:none !important} /* header: static, no chrome */ .print-only{display:inline !important} /* show email/phone in print */ .screen-only{display:none !important} /* hide screen-only labels */
  /* Nav on paper: keep only the contact details. The hub links are
     unclickable on print and wrapped into a jumble around the logo. */
  .sotn-nav-links{display:none !important}
  .sotn-nav-in{display:block;height:auto;padding:0;max-width:none}
  .sotn-nav{border-bottom:0}
  .sotn-brand-name{color:#000}
  /* The hero band loses its claret background to the rule above, which
     left white text on white paper. Restate the colours, and drop the
     CTAs - a button is nothing to act on once printed. */
  /* !important because these colours are set in the page's own <style>
     block, which loads after this file and wins on source order. */
  .claret-banner{background:0 0 !important;padding:0 !important}
  .claret-banner-in{padding:0 !important}
  .claret-banner .hero-eyebrow,.claret-banner h1,.claret-banner p,.claret-banner p strong{color:#000 !important}
  .claret-cta-group{display:none !important}
} @page {margin:.5cm}

@media (max-width:960px) {/* Tablet Heading Spacing - Moderate reduction */ h1 {margin:25px 0 18px} h2 {margin:35px 0 18px} h3 {margin:25px 0 12px} h4 {margin:22px 0 10px}}
/* h1-h4 margins only: the *+h2/h3/h4 and section spacing comes from the clamp() tokens.
   At (0,0,1) these only set the bottom margin anyway. */

/* Mobile component adjustments (640px) */
@media (max-width:640px) {/* Card Grid Layouts - Stack to single column */ .news-grid,.capacity-cards,.market-cards,.testimonials-layout{grid-template-columns:1fr;gap:20px} /* Expert Cards - Single column */ /* Hub Cards - Reduce padding */ .hub-card,.news-card,.ma-deal-card{padding:15px;margin-bottom:15px} /* Hero Section - Tighter padding */ /* Collapsible Panels - Reduce padding */ .toggle:checked+.toggle-label+.content {padding:15px} .toggle-label {padding:12px 15px} /* Stats Bars - Stack vertically */ .news-stats-bar, .metrics-grid {flex-direction:column;gap:15px} /* Filter Controls - Better mobile layout */ .filter-buttons {gap:8px} .filter-btn {padding:8px 15px;font-size:0.9rem}}

/* Mobile */
@media (max-width: 480px) {body {line-height:1.5} h1{font-size:124%;margin:10px 0 15px} h2{font-size:116%;margin:15px 0 15px} h3{font-size:112%;margin:25px 0 12px} h4{font-size:108%;margin:20px 0 10px} h5{font-size:105%;margin:18px 0 8px}}

/* Component spacing overrides (applied at all screen sizes) */

/* Card components control their own internal spacing */
.news-card h3,.ma-deal-card h3,.hub-card h3,.capacity-card h4,.expert-card h3{margin-top:0}

/* Collapsible panel content */
.content h2,.content h3 {margin-top:20px}

.content h2:first-child,.content h3:first-child {margin-top:0}

/* Filter sections have controlled spacing */
.news-stats-bar+* {margin-top:30px}

/* Timeline and metrics panels */
.timeline-container h3,.metrics-panel h3,.methodology-panel h3 {margin-top:0}

/* Case studies table header */
.case-studies-header h3 {margin:0}

/* Insight citations */
.citation-box {background-color: #f8f9fa;border-left: 4px solid #1A369A;padding: 1.5rem;margin: 2rem 0}
.citation-heading {font-size: 0.9rem;font-weight: bold;margin-bottom: 0.5rem;color: #444}
.citation {background-color: white;padding: 0.75rem;border: 1px solid #e0e0e0;font-family: Georgia, serif;line-height: 1.6;margin-bottom: 0}



/* Social media icons - touch targets min 48px per Google guidelines */
nav[aria-label="Social media links"] img.socmed{width:30px;height:30px;margin:0;padding:0}
nav[aria-label="Social media links"] a{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:9px}
/* Mobile: all 6 icons on one row; each link a 48px box (shrinks slightly below ~300px) */
@media (max-width:768px){nav[aria-label="Social media links"] .center{display:flex;justify-content:center}nav[aria-label="Social media links"] a{flex:0 1 48px;min-width:0;height:48px;padding:0}}

/* Footer - address block, verification links */
.footer-divider{border:0;border-top:1px solid #e0e0e0;margin:40px 0 30px 0}
.address-block{margin:20px 0 15px 0;padding-top:25px;border-top:2px solid #e0e0e0;line-height:1.6}
/* footer trust-badge icons: inline SVG, inherits pill text colour */
.badge-icon{display:inline-block;width:12px;height:12px;fill:currentColor;vertical-align:-2px;margin-right:5px}
.footer-badges .security-badge{margin:0 8px}
@media (max-width:768px){.footer-badges .security-badge{margin:4px 8px}} /* mobile: more space between wrapped pill rows */

/* Content icons — Lucide geometry, symbols in main-menu.php, so ico-* icons render
   correctly wherever the sprite loads. */
.sotn-ico{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.db-panel-icon .sotn-ico{width:40px;height:40px;margin:0 auto}

/* Pillar number badge - circle colour matches the home-page Venn. Shared by index.php
   and about.html. The number comes from data-num via ::before (index.php, keeps it
   out of heading text) or from the span's own text (about.html, no data-num, so
   ::before is empty). */
.pillar-num{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5em;height:1.5em;border-radius:50%;color:#fff;font-size:.8em;font-weight:700;margin-right:10px;vertical-align:.1em}
.pillar-num::before{content:attr(data-num)}
.pillar-num--claret{background:var(--sotn-claret)}.pillar-num--petrol{background:var(--pillar-petrol)}.pillar-num--stone{background:var(--pillar-stone)}

/* FAQ section callout. Pages with their own minimal .faq-section{margin:30px 0}
   keep that look - their page-level <style> block loads after this stylesheet
   and wins on equal specificity. */
.faq-section{margin:40px 0;padding:30px;background:#f8f9fa;border-left:4px solid #1A369A;border-radius:6px;scroll-margin-top:110px}
.faq-section h3{color:#1A369A;margin-top:0;font-size:1.3rem;margin-bottom:20px}

html, body {overflow-x: clip} body {padding-top: var(--sotn-nav-h)} /* must match band 1 height in main-menu.php */

/* Nav call-to-action (band 1): a persistent action button in the top bar. */

/* The bar is height-locked at --sotn-nav-h and must never wrap, so the
   button is sized to --sotn-ctl-h like the search field and drops out
   entirely below 961px, where the drawer CTA takes over. */
.sotn-cta{display:inline-flex;align-items:center;height:var(--sotn-ctl-h);box-sizing:border-box;background:#fff;color:var(--sotn-claret);padding:0 15px;border-radius:3px;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none}
.sotn-cta:hover,.sotn-cta:focus{background:var(--sotn-claret-pale);color:var(--sotn-claret-dk);text-decoration:none}

/* Room for the button: the phone label and search field yield at these breakpoints so it fits without squeezing the hub links. The number still dials from the icon and prints in full via .print-only. */
@media screen and (min-width:961px) and (max-width:1380px){
  .sotn-tel .sotn-tel-text{display:none}
}
@media screen and (min-width:961px) and (max-width:1150px){
  .sotn-search{display:none}
}

/* Below the desktop breakpoint the button is redundant — the drawer opens
   with the same action as its first item. */
@media screen and (max-width:960px){
  .sotn-cta{display:none}
}

/* Drawer CTA: white on claret, so it reads as the primary action in the
   list rather than a seventh hub link. */
@media screen and (max-width:960px){
  .sotn-drawer-cta a{background:#fff;color:var(--sotn-claret);font-weight:700;border-top:0;border-radius:3px;margin:8px 0 4px;padding:11px 12px}
  .sotn-drawer-cta a:hover{background:var(--sotn-claret-pale);color:var(--sotn-claret-dk);text-decoration:none}
  .sotn-drawer-cta a .sotn-icon{fill:var(--sotn-claret)}
}

/* Print: an action button is meaningless on paper. */
@media print{.sotn-cta{display:none !important}}

/* Page intro typography. Lede-led intro block, scoped to .platform-intro so it is
   opt-in per page. Direct-child selectors keep nested blocks (diagram captions) untouched. */
.platform-intro > p{max-width:62ch;font-size:1.1rem;line-height:1.65;margin:0 0 1rem}
.platform-intro > p:first-of-type{font-size:1.1rem;line-height:1.58;color:#444;margin-bottom:1.125rem}
.platform-intro > p strong{font-weight:600;color:inherit}
.platform-intro > p a{font-weight:400;text-decoration-color:rgba(154,26,54,.35);text-underline-offset:.15em} /* colour and underline come from the site-wide claret link rule */
.platform-intro > p a:hover{text-decoration-color:currentColor}
.platform-intro .last-updated{font-size:.8rem;color:#666;border-top:1px solid rgba(0,0,0,.12);padding-top:.75rem;margin:1.5rem 0 0}
.platform-intro > .platform-overview-diagram img{max-width:340px}
@media (max-width:960px){.platform-intro > p{font-size:1rem}.platform-intro > p:first-of-type{font-size:1.1rem}}
@media (max-width:480px){.platform-intro > p{font-size:1rem;line-height:1.6}.platform-intro > p:first-of-type{font-size:1.1rem}.platform-intro .last-updated{margin-top:1.25rem}.platform-intro > .platform-overview-diagram img{max-width:280px}}

/* Desktop: text column left, business-model diagram in the right gutter.
   Collapses to the stacked source order below 1024px. */
@media (min-width:1024px){
  .platform-intro{display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:48px;align-items:start}
  .platform-intro > *{grid-column:1;min-width:0}
  .platform-intro > h2{grid-column:1/-1}
  .platform-intro > .platform-overview-diagram{grid-column:2;grid-row:2/span 3;align-self:start;max-width:none;margin:8px 0 0;text-align:center}
  .platform-intro > .platform-overview-diagram img{width:100%;max-width:400px}
  .platform-intro > .platform-overview-diagram p{font-size:0.9rem;line-height:1.55;margin:14px auto 0;max-width:420px}
  .platform-intro > .last-updated{grid-column:1/-1;grid-row:5;max-width:none;margin-top:8px}
}

/* Consolidated merges: grouped-selector aliases for classes shared identically across pages. A page's own <style> copy of a rule still wins by source order until that copy is removed. */
.topic-grid,.company-grid,.region-grid,.news-grid,.metal-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));margin:35px 0}
.security-grid,.cost-component-grid,.method-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:25px 0}
.testimonial-category,.citation-category,.section-panel,.country-category{background:#f8f9fa;border-left:4px solid #1a369a;border-radius:6px;margin:25px 0;padding:25px}
.country-category{scroll-margin-top:110px} /* .jump-nav target on resources/countries/ pages */
.port-grid,.scrap-flow,.entity-grid{display:flex;flex-wrap:wrap;gap:10px;margin:.8em 0}
.kb-card,.econ-card,.tool-card,.sotn-analysis-box{background:#f8f9fa;border-left:4px solid #1a369a;border-radius:4px;margin:20px 0;padding:20px}
.priority-methodologies,.priority-events,.priority-reports{background:#fff3e0;border:2px solid #9a1a36;border-radius:8px;margin:20px 0;padding:20px}
.psc-container,.calc-container,.sgf-container{margin:0 auto;max-width:1100px;padding:20px 0}
.rights-grid,.rights-action-grid{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:20px 0}
.limitation-box,.warning-box{background:#fff3cd;border:2px solid #ffc107;border-radius:6px;margin:20px 0;padding:18px}
.kpi-table,.case-studies-table{background:linear-gradient(145deg,#e3f2fd,#fff);border-collapse:collapse;border-spacing:0;margin:0;width:100%}
.metric-row,.quality-row{border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;padding:12px 0}
.operator-grid,.shortcuts-grid{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:15px}
.decision-card,.country-card{background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.08);margin-bottom:20px;padding:25px}
.calculation-box,.diagnostic-box{background:#f3e5f5;border-left:4px solid #9a1a36;border-radius:4px;margin:20px 0;padding:15px 20px}
.ma-rationale-text,.apps-text{color:#444;font-size:0.9rem;line-height:1.5}
.triad-grid,.capacity-cards{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);margin:25px 0}
.improvement-panel,.security-measures{background:rgba(154,26,54,.05);border-left:4px solid #9a1a36;border-radius:6px;margin:20px 0;padding:20px}
.fr-grid,.owner-grid{display:flex;flex-wrap:wrap;gap:12px;margin:.8em 0}
.cert-grid,.result-row{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:20px 0}
.assumption-box,.step-box{background:#e3f2fd;border-left:4px solid #1a369a;border-radius:4px;margin:20px 0;padding:15px 20px}
.observation-box,.source-box{background:#fff3e0;border-left:4px solid #e65100;border-radius:4px;margin:20px 0;padding:15px 20px}
.dross-table,.centring-table{border-collapse:collapse;font-size:0.9rem;margin:1em 0;width:100%}
.tinted-panel,.sw-box{border-radius:5px;padding:14px 16px}
.two-col-grid,.adaptation-grid{display:grid;gap:20px;grid-template-columns:1fr 1fr;margin:20px 0}
/* .three-col-grid: services/ pages */
.three-col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px 0}
.standards-grid,.commitment-grid{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:15px 0}
@media(max-width:768px){
.expert-grid,.action-cards,.testimonials-layout,.deal-cards-grid,.testimonial-grid,.accessibility-grid,.rights-grid,.shortcuts-grid,.data-types-grid,.process-grid,.standards-grid{gap:15px;grid-template-columns:1fr}
.btn-primary,.hub-card-title{text-align:center;width:100%}
.timeline-item,.ma-control-bar{align-items:stretch;flex-direction:column}
.two-col-grid,.three-col-grid,.stats-grid,.benefits-grid,.sotn-service-stats-grid{grid-template-columns:1fr} /* .sotn-service-stats-grid needs this collapse: its base is a fixed 4-column grid,
   not auto-fit. */
}
/* 1100px is used only here, deliberately, for the news hub-card family (news/[topic]/home.php) below */
@media(max-width:1100px){
.topic-grid,.company-grid,.region-grid,.news-grid,.metal-grid{gap:24px;grid-template-columns:1fr}
}

/* resources/countries family: shared by the 12 country pages. */
.badge{border-radius:3px;display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:.02em;margin-left:4px;padding:2px 6px;vertical-align:middle}
.badge-active{background:#d4edda;color:#155724}
.badge-risk{background:#f8d7da;color:#721c24}
.badge-state{background:#cce5ff;color:#003d7a}
.badge-transition{background:#fff3cd;color:#856404}
.entity-card{background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.05);flex:1 1 220px;padding:12px 14px}
.facilities-table{border-collapse:collapse;font-size:83%;margin:.8em 0;width:100%}
.fr-card{background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.05);flex:1 1 195px;padding:12px 14px}
/* .gov-badge/.gov-quote/.gov-attribution: shared by the 12 country pages and testimonials.html. This blue version is an accepted exception by owner decision; index.php has its own light variant (sotn-colour-button-rules.md). */
.gov-attribution{font-size:0.9rem;opacity:.95}
.gov-badge{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;padding:20px;border-radius:8px;margin-bottom:25px}
.gov-content{align-items:center;display:flex;gap:20px}
.gov-logo{flex-shrink:0;width:50px}
.gov-quote{font-size:1.1rem;font-style:italic;margin-bottom:8px;line-height:1.4}
.issue-card{background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.06);padding:16px}
.issue-card-hdr{border-bottom:3px solid;font-size:0.9rem;font-weight:700;letter-spacing:.04em;margin-bottom:8px;padding-bottom:6px;text-transform:uppercase}
.issue-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:.8em 0}
.jump-nav{background:#e3f2fd;border:1px solid #dde3f0;border-radius:5px;display:flex;flex-wrap:wrap;font-size:0.8rem;gap:6px;margin:0 0 1.2em;padding:9px 12px}
.overseas-intro{color:#444;font-size:0.9rem;margin:0 0 .8em}
.overseas-ops{background:#e3f2fd;border:1px solid #b8c8ee;border-radius:6px;margin:1.2em 0 .4em;padding:14px 16px 10px}
.overseas-table{border-collapse:collapse;font-size:0.8rem;width:100%}
.owner-card{background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.06);flex:1 1 240px;overflow:hidden}
.owner-card-body{color:#444;font-size:0.8rem;line-height:1.45;padding:10px 13px}
.owner-card-hdr{align-items:center;border-bottom:2px solid #1a369a;display:flex;font-size:0.9rem;font-weight:700;gap:8px;justify-content:space-between;padding:9px 13px}
.panel-energy{background:#fff3e0;border:1px solid #e6c97a}
.panel-raw{background:#f0f7e8;border:1px solid #d4dba0}
.port-card{background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.06);flex:1 1 200px;overflow:hidden}
.port-card-body{color:#444;font-size:0.8rem;line-height:1.4;padding:9px 11px}
.port-card-hdr{align-items:center;background:#1e3c72;color:#fff;display:flex;font-size:0.9rem;font-weight:700;justify-content:space-between;padding:7px 11px}
.project-details{background:#f8f9fa;border-radius:4px;margin-top:15px;padding:15px}
.scrap-card{border-radius:5px;flex:1 1 180px;padding:12px 14px}
.scrap-collection{background:#f0f7e8;border:1px solid #b8d88a}
.scrap-consumption{background:#f5f0fd;border:1px solid #c8a8ee}
.scrap-export{background:#fff3e0;border:1px solid #e8b87a}
.scrap-import{background:#e3f2fd;border:1px solid #9ac8ee}
.see-also{color:#666;font-size:0.8rem;margin-top:.6em}
/* .stat-label/.stats-grid: shared by the 12 country pages, decision-support.html and testimonials.html. The users/ and services/ families use .sotn-role-* and .sotn-service-* instead; citations.html, steel-industry-expertise.html and news-hub.html use page-scoped names */
.stat-box .stat-label{color:#666;margin-top:5px} /* scoped to .stat-box: the /mysql/ dashboards use .stat-label on dark purple cards with white text, where a bare .stat-label would paint the labels #666 at ~1.6:1 */
.stats-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:30px 0}
.table-scroll{overflow-x:auto}
.table-scroll-hint{display:none}
.two-col{display:flex;flex-wrap:wrap;gap:16px;margin:.8em 0}
.two-col-item{flex:1 1 230px}
@media(max-width:768px){
.gov-content{flex-direction:column;text-align:center}
.scrap-flow,.two-col{flex-direction:column}
.table-scroll-hint{display:block;font-size:0.8rem;color:#666;margin-bottom:4px}
}

/* users/ family: 6 persona pages. .stat-label excluded deliberately - a genuine
   cross-family variant. */
.action-card{background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:25px;text-align:center;transition:all .3s ease;cursor:pointer;text-decoration:none;display:block}
.action-desc{color:#666;font-size:95%;margin-bottom:15px;line-height:1.6}
.action-icon{font-size:3.25rem;margin-bottom:15px;display:block}
.benefit-icon{font-size:2.625rem;margin-bottom:10px;display:block}
.benefit-item{text-align:center;padding:15px}
.benefit-text{font-size:95%;opacity:.95;line-height:1.5}
.benefit-title{font-weight:700;font-size:110%;margin-bottom:8px;color:#ffd700}
.resource-cta,.sotn-mt20{margin-top:20px}
.resource-inner{padding:0 25px 25px 62px} /* left indent matches .resource-title's icon+gap (~1.6rem icon + 12px gap) so expanded content aligns under the title text, not the icon */
.resource-title-icon{font-size:1.6rem}

/* users/ family: the per-role accent colour (.expand-icon/.resource-section/
   .resource-title base rules) and .resource-subsection are genuine per-page
   variance and stay page-local. */
.action-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:30px 0}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px}
.resource-header{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:20px 25px;user-select:none}
.resource-content{max-height:0;overflow:hidden;transition:max-height .4s ease}
.resource-summary{color:#666;font-size:95%;line-height:1.5;margin:5px 0 0 40px}
.sotn-role-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center} /* fixed 4-column: auto-fit/minmax wrapped to fewer columns than intended on the content-column width; mobile collapses to 2 columns below */
@media(max-width:768px){
.resource-header{padding:15px 20px}
.resource-summary{font-size:90%;margin-left:35px}
.resource-title{font-size:110%}
.sotn-role-stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media print{
.expand-icon{display:none}
.resource-content{max-height:none!important}
.resource-section{border:1px solid #e0e0e0;page-break-inside:avoid}
}
.stat-item,.sotn-td-pad10{padding:10px} /* the scoped .uk-table td.sotn-td-pad10 override stays separate */

/* news/[topic]/home.html family: 4 hub-listing pages (companies, metals, regions, topics). news-hub.html has its own different .image-card/.image-overlay design, correctly left page-local */
.hub-intro{background:var(--sotn-surface);padding:25px;border-radius:8px;margin:25px 0;border:1px solid #e0e0e0}
.card-description{color:#666;font-size:0.9rem;line-height:1.7;margin:0 0 18px 0}
.card-meta{display:flex;gap:15px;font-size:0.9rem;color:#666;margin-bottom:18px;flex-wrap:wrap}
.card-link{display:inline-block;padding:12px 24px;background:#f8f9fa;color:#444;text-decoration:none;border-radius:6px;font-weight:600;font-size:0.9rem;transition:all .2s ease}
.info-card{background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);border-radius:8px;padding:30px;margin:25px 0;border:2px solid #e0e0e0;box-shadow:none}
.image-card{grid-column:span 2;padding:0;overflow:hidden;min-height:320px}
.image-card img{width:100%;height:100%;object-fit:cover;display:block}
.image-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,0.85),transparent);padding:35px;color:white}
.image-overlay h3{color:white;font-size:1.6rem;margin:0 0 10px 0;font-weight:700}
.image-overlay p{margin:0;font-size:1rem;line-height:1.5}
@media(max-width:1100px){
.image-card{grid-column:span 1}
.image-overlay{padding:30px}
.image-overlay h3{font-size:1.6rem}
.image-overlay p{font-size:1rem}
}
@media(max-width:768px){
.image-card{min-height:300px}
.image-overlay{padding:20px}
.image-overlay h3{font-size:1.3rem}
.image-overlay p{font-size:0.9rem}
}

/* Collapsible widget, shared by the hub pages, steel-industry-expertise.html,
   about.html, news/latest-news.php and insights/podcasts/ep001.
   .toggle:checked+.toggle-label+.content's max-height stays page-local (real
   per-page tuning, not drift). */
.collapsible{border:1px solid #1A369A;border-radius:8px;margin-bottom:20px;overflow:hidden}
.toggle{display:none}
.toggle-label{display:block;background:#f8f9fa;padding:15px 20px;cursor:pointer;font-weight:bold;user-select:none;transition:background-color 0.3s ease;position:relative}
.toggle-label:hover{background:#e0e0e0}
.toggle-label::before{content:"▶";margin-right:10px;transition:transform 0.3s ease}
.toggle:checked+.toggle-label::before{transform:rotate(90deg)}
.content{max-height:0;overflow:hidden;background:white;transition:max-height 0.3s ease,padding 0.3s ease}

/* Shared utilities (5+ pages each, not part of a named family) */
/* .sotn-costmodel-citation/-box/-heading, .sotn-service-stat-label/-stats-grid */
.sotn-costmodel-citation{margin:0;line-height:1.6}
.sotn-costmodel-citation-box{border-left:4px solid #1A369A;background:#e3f2fd;padding:1em 1.2em;margin:1.5em 0;border-radius:4px;font-size:0.9rem}
.sotn-costmodel-citation-heading{font-weight:600;color:#1A369A;margin-bottom:0.5em}
.sotn-service-stat-label{color:#666;margin-top:5px;font-size:0.9rem}
.sotn-service-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:25px 0} /* fixed 4-column: auto-fit/minmax wrapped to fewer columns than intended on the content-column width */
/* Inline-style conversions */
.sotn-mt30{margin-top:30px} /* extends the existing .sotn-mt15/.sotn-mt20 pair */
.sotn-gold-cta-link{color:#ffd700;font-weight:600;text-decoration:underline} /* CTA link inside a dark-blue .intro-panel - 12 resources/countries pages + strengths-weaknesses.html + testimonials.html */
.sotn-country-subheading{color:#1A369A;margin:1em 0 .5em} /* resources/countries sub-section h4/h5 headings */
.sotn-flag-icon{vertical-align:middle;margin-right:6px} /* national flag <img> before the country H2 */
/* .sotn-tech-citation-box sits beside .citation-box as a second class, never merged into it: bare .citation-box has its own, different border-left declaration elsewhere, and a merge would change it site-wide. */
.sotn-tech-citation-box{background-color:#f8f9fa;padding:15px;border-radius:5px;border:1px solid #e0e0e0;margin:20px 0;font-size:0.9rem}
.calc-box{background:var(--sotn-surface);border-left:3px solid #9A1A36;padding:10px 14px;margin:1em 0;font-size:0.9rem}
.data-table{margin:20px 0;border-collapse:collapse;width:100%}
.deliverable-panel{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);padding:22px 25px;margin:25px 0;border-radius:6px;border-left:4px solid #369A1A}
.feature-box{background:#fff;border:1px solid #e0e0e0;border-radius:6px;padding:20px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.skip{display:none} /* spam-trap honeypot field, puzzles/quiz + news/search */
.sotn-hidden{display:none} /* initial-hidden state; JS overwrites it via inline style */
.sotn-img-pad{padding:1em} /* decorative content-image spacing */
.sotn-mb0{margin-bottom:0} /* unclassed containers only - never where a container's own compound p-rule would beat it */
.sotn-mb8{margin-bottom:8px}
.sotn-mt15{margin-top:15px}
/* Capital-investment "Summary Statistics" card grid + Analysis/Legend boxes (resources/capital-investment/projects-2010..2025.html) */
.sotn-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin:20px 0 30px 0}
.sotn-stat-card-blue{background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%);padding:20px;border-radius:8px;text-align:center;border-left:4px solid #1A369A}
.sotn-stat-card-green{background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%);padding:20px;border-radius:8px;text-align:center;border-left:4px solid #369A1A}
.sotn-stat-card-amber{background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%);padding:20px;border-radius:8px;text-align:center;border-left:4px solid #e65100}
.sotn-stat-number-blue{font-size:2rem;font-weight:bold;color:#1A369A}
.sotn-stat-number-green{font-size:2rem;font-weight:bold;color:#2d8116}
.sotn-stat-number-amber{font-size:1.3rem;font-weight:bold;color:#856404}
.sotn-legend-box{margin-bottom:20px;padding:15px;background:#f8f9fa;border-radius:6px}
.sotn-table-full{width:100%;max-width:100%;table-layout:auto} /* resources/capital-investment/capex-2016..2028.html */
.sotn-panel-bg-blue{background-color:#1A369A} /* capex-2019.html black-panel colour variant */
.sotn-panel-bg-green{background-color:#369A1A} /* capex-2020..2028.html black-panel colour variant */
.sotn-cursor-pointer{cursor:pointer} /* sortable table headers */
.uk-table th.sotn-text-left{text-align:left} /* scoped override: .uk-table th{text-align:center} is (0,1,1), a bare class alone would lose */
.uk-table td.sotn-td-pad10{padding:10px} /* scoped override: .uk-table td,.uk-table th{padding:8px} is (0,1,1), a bare class alone would lose */
.sotn-cell-border{border:1px solid #000;padding:8px} /* manually-bordered comparison tables */
.sotn-cell-border-bottom{padding:9px 12px;border-bottom:1px solid #e0e0e0} /* light-rule comparison table cells */
.sotn-cell-pad9-12{padding:9px 12px} /* borderless comparison/data table cells */
.sotn-glossary-term{font-weight:700;color:#444;padding:3px 0} /* methodology "Key Terms" glossary dt */
.sotn-glossary-def{margin:0;padding:3px 0;color:#444} /* methodology "Key Terms" glossary dd */
.sotn-btn-white-border{border:1px solid white} /* uk-button-secondary CTA white outline */
.sotn-btn-margin1em{margin:1em} /* spacing for multi-button CTA rows */
.sotn-pad-left1em{padding-left:1em} /* note-line indent */
.sotn-feed-step{margin:0 0 10px 0} /* RSS-subscribe popup instruction paragraphs */
.abbrev-list dt.sotn-abbrev-letter{grid-column:1/-1;font-weight:700;color:#9A1A36;border-bottom:2px solid #e0e0e0;padding:8px 0;margin:10px 0;font-size:1.1rem} /* resources/kb/steel-industry-abbreviations.html A-Z section headers - scoped above the page's own .abbrev-list dt rule (0,2,1 vs 0,1,1) so specificity, not source order, keeps it winning */
.glossary-table tr[id],.abbrev-list dt[id]{scroll-margin-top:70px} /* term-of-the-day deep links (incl/feat-resources.php) land clear of the 52px fixed nav */
.glossary-table tr:target td,.abbrev-list dt:target,.abbrev-list dt:target+dd{background:#fff3e0} /* brief highlight on the linked term */
.sotn-row-shade{background-color:#f8f9fa} /* plain table row/header shading and zebra-stripe rows */
.sotn-td-muted-top{color:#666;padding:7px 0;vertical-align:top} /* resources/technical related-topic table cells */
.sotn-author-row{display:flex;align-items:center;gap:12px} /* Article Author attribution block's photo+text flex row */
.sotn-author-box-row{display:flex;align-items:flex-start;gap:14px;background:#f8f9fa;padding:14px;border-radius:5px;border:1px solid #e0e0e0;margin:20px 0} /* resources/countries "Author Bio" wrapper - a boxed variant of .sotn-author-row, 13 pages (12 country pages + strengths-weaknesses.html) */
.sotn-table-90{font-size:0.9rem} /* essentials data-table compact font size */
.sotn-gold-link{color:#ffd700} /* gold link text on the dark-blue .intro-panel/.credentials-panel gradient - contrast verified against that specific background only, not a general-purpose link colour */
.sotn-pdf-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#1A369A;color:#fff;text-decoration:none;border-radius:4px;font-weight:600;transition:all .2s} /* insights article "Download PDF" button */
.sotn-pdf-btn:hover,.sotn-pdf-btn:focus-visible{background:#2a4db8;color:#fff} /* color: must be restated here at 0,2,0; without it the global a:hover (0,1,1) wins and repaints the label claret-dark on navy = 1.04:1, invisible. Hover feedback is the background, not the text. */
.sotn-credentials-link{display:inline-block;color:var(--sotn-claret);font-weight:600;font-size:0.9rem;text-decoration:none} /* insights article inline credentials/reference link */
/* Insights-article "Article Author" callout card: a larger (100x100 photo) design,
   distinct from the site-wide .sotn-author-row template (60x72 photo). */
.sotn-author-callout{background:linear-gradient(135deg,#f8f9fa 0%,#e0e0e0 100%);padding:25px;margin:40px 0;border-left:4px solid #1A369A;border-radius:8px}
.sotn-author-callout-row{display:flex;align-items:start;gap:20px;flex-wrap:wrap}
.sotn-author-callout-photo{width:100px;height:100px;flex-shrink:0;object-fit:cover;border-radius:6px}
.sotn-author-callout-text{flex:1;min-width:250px}
.sotn-author-callout-label{display:block;color:#1A369A;font-size:1.1rem;margin-bottom:10px}
.sotn-author-callout-bio{color:#666;line-height:1.7;font-size:0.9rem;margin:0 0 15px 0} /* last (or only) bio paragraph */
.sotn-author-callout-bio-mid{color:#666;line-height:1.7;font-size:0.9rem;margin:0 0 12px 0} /* earlier bio paragraph, tighter spacing before the next one */
.sotn-insight-callout{margin:20px 0;padding:15px;background:linear-gradient(135deg,#f8f9fa,#fff);border-left:4px solid #1A369A;border-radius:6px} /* insights article PDF-download callout wrapper */
.sotn-card-white{background:white;padding:15px;border-radius:4px;border:1px solid #e0e0e0} /* hub home-page option card */
.sotn-card-title{color:#9A1A36;margin-top:0} /* hub home-page option card heading */
.sotn-author-panel{background-color:#f8f9fa;padding:15px;border-radius:5px;border:1px solid #e0e0e0;margin:25px 0} /* Article Author attribution block outer panel */
.sotn-orcid-link{color:var(--sotn-claret);text-decoration:none} /* ORCID credential link */
.sotn-analysis-text{margin:0;line-height:1.7} /* capital-investment yearly analysis paragraph */
.sotn-clearfix{clear:both} /* layout clearfix divider */
.sotn-citation-author{margin-top:0.75em;font-size:0.9rem} /* insights article citation-box author line */
.sotn-td-pad8-right{padding:8px;text-align:right;border-bottom:1px solid #e0e0e0} /* tools/emissions-calculator.php numeric table cells */
.sotn-insight-footer{font-size:0.9rem;color:#666;margin-top:2em;padding-top:1em;border-top:1px solid #e0e0e0} /* insights article "Sources and Notes" footer */
.sotn-badge-green{margin-left:10px;padding:4px 10px;background:#e8f5e9;border-radius:4px;font-size:0.9rem} /* capital-investment project-category legend badge */
.sotn-badge-blue{margin-left:15px;padding:4px 10px;background:#e3f2fd;border-radius:4px;font-size:0.9rem} /* capital-investment project-category legend badge (first in row) */
.sotn-badge-amber{margin-left:10px;padding:4px 10px;background:#fff3e0;border-radius:4px;font-size:0.9rem} /* capital-investment project-category legend badge */
.sotn-btn-export{float:right;padding:8px 16px;background:#1A369A;color:white;border:none;border-radius:4px;cursor:pointer;font-weight:bold} /* capital-investment "Export to PDF" button */
.sotn-callout-heading{color:#1A369A} /* brand-blue text colour utility; colour-only, so safe on <a>/<strong>/<h3> alike */
.sotn-related-row{border-bottom:1px solid #e0e0e0} /* resources/technical "Related Technical Articles" table rows */
.sotn-related-title{padding:7px 10px 7px 12px;vertical-align:top} /* resources/technical "Related Technical Articles" table title cells */
.sotn-td-pad10-center{padding:10px;text-align:center}
.uk-table td.sotn-td-pad10-center{padding:10px;text-align:center} /* scoped override: .uk-table td,.uk-table th{padding:8px} is (0,1,1), a bare class alone would lose */
.sotn-th-pad12-left{padding:12px;text-align:left}
.uk-table th.sotn-th-pad12-left{padding:12px;text-align:left} /* scoped override: beats both .uk-table td,.uk-table th{padding:8px} and .uk-table th{text-align:center}, each (0,1,1) */
.sotn-feed-label{margin:0 0 6px 0;font-weight:600;color:#1A369A} /* RSS-subscribe-popup reader-name label */
/* RSS-subscribe-popup shell (the "?" help icon + its popover), shared by 12 pages. */
.sotn-rss-link-icon{vertical-align:middle;margin-left:10px;margin-bottom:10px;display:inline-block} /* the RSS-icon <a> before the help button, 10 of the 12 pages (insights-hub.html/sitemap.html have no separate feed-icon link) */
.sotn-rss-help-icon{display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;border-radius:50%;background:#1A369A;color:#fff;font-size:11px;font-weight:bold;cursor:pointer;vertical-align:middle;margin-left:6px;margin-bottom:5px}
.sotn-rss-help-wrap{position:relative;height:0;overflow:visible}
.sotn-rss-help-box{position:absolute;z-index:1000;width:270px;background:#fff;border:2px solid #1A369A;padding:12px 14px;font-size:0.8rem;line-height:1.5;left:0;top:0;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.sotn-rss-help-close{position:absolute;top:6px;right:8px;cursor:pointer;font-size:14px;color:#666;line-height:1}
.sotn-rss-help-title{display:block;margin-bottom:8px}
.sotn-rss-help-intro{margin:0 0 10px 0;color:#666;font-style:italic}
.sotn-rss-help-final{margin:0}
.sotn-icon16{width:16px;height:16px;vertical-align:middle} /* ORCID badge and similar 16px inline icons */
.sotn-author-label{font-size:0.9rem;color:#666;margin-bottom:3px} /* "Article Author" attribution block label */
.sotn-author-name{font-weight:bold;margin-bottom:5px} /* Article Author attribution block name line */
.sotn-author-bio{font-size:0.9rem;color:#666;line-height:1.3} /* Article Author attribution block credentials line */
.sotn-author-photo{width:60px;height:72px;border-radius:4px;border:1px solid #e0e0e0} /* Article Author attribution block headshot, fixed-size icon exception */
.step-number{background:#1A369A;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;flex-shrink:0;margin-top:2px}

/* services/ family. Kept page-scoped: .stat-label and .stats-grid (variants would
   leak), .methodology-panel/.process-step (different designs on about.html and
   contact.html). */
.intro-panel{background:linear-gradient(135deg,#1A369A,#2a4db8);color:#fff;padding:25px;margin:20px 0;border-radius:6px}
.stat-box{background:#fff;padding:20px;border-radius:6px;text-align:center;border:2px solid #1A369A}
.stat-number{font-size:2rem;font-weight:700;color:#1A369A}

/* Muted secondary/annotation text (#666). Not the same as .timestamp, which keeps
   its own italic. */
.sotn-muted{color:#666;font-size:0.9rem}

/* Panel/card sub-heading colour+margin reset; same values as .country-category h3. */
.sotn-panel-heading{color:#1A369A;margin-top:0}
.sotn-panel-heading-white{color:#fff;margin-top:0} /* same role as .sotn-panel-heading, on a dark/gradient panel instead of a light one */
.sotn-table-note{font-size:0.9rem;color:#666;margin-top:10px} /* data-table footnote paragraph, essentials/ and insights/ pages */

/* Podcast audio-player component, ep003-ep011 (ep001/ep002 use an older, different
   template). */
.sotn-podcast-eyebrow{font-size:0.9rem;opacity:0.9;margin-bottom:5px}
.sotn-podcast-tagline{font-size:1.3rem;margin:10px 0}
.sotn-podcast-controls-row{display:flex;align-items:center;gap:15px;margin:15px 0}
.sotn-podcast-play-btn{background:#9A1A36;color:#fff;border:none;padding:12px 24px;border-radius:5px;cursor:pointer;font-weight:bold;font-size:1rem}
.sotn-podcast-download-line{margin:15px 0 5px 0;color:#666;font-size:0.9rem}
.sotn-podcast-download-link{color:#9A1A36;text-decoration:none;font-weight:bold}
.sotn-podcast-download-link:hover,.sotn-podcast-download-link:focus-visible{color:#7a1429} /* hover restated: without it the global a:hover wins */
.sotn-podcast-subscribe-cta{background:linear-gradient(135deg,#1A369A 0%,#9A1A36 100%);color:#fff;padding:30px;border-radius:8px;text-align:center;margin:30px 0}

/* Scattered utilities, no shared page family */
.sotn-mt1em{margin-top:1em} /* crossword puzzles + 2 one-off pages */
.sotn-mt10{margin-top:10px}
.sotn-bg-black{background-color:black} /* "uk-container white" panel background override */
.sotn-btn-mt1em{margin:1em 0 0} /* uk-button CTA top-spacing */
.sotn-feed-domain{font-weight:400;color:#666} /* RSS-subscribe-popup domain sub-label, pairs with .sotn-feed-label */
.sotn-podcast-segment-heading{color:#9A1A36;margin-top:20px} /* transcript-highlights h4 chapter markers, ep003-ep005 only (ep006 onward uses a bare h4 + .timestamp) */
.sotn-link-blue-bold{color:var(--sotn-claret);font-weight:600} /* bold brand-blue cross-link text */
.sotn-table-wrap{overflow-x:auto;margin:30px 0} /* essentials/[page] data-table wrapper */
.sotn-cite-heading{font-weight:bold;margin-bottom:8px} /* "How to Cite This Article" citation-box heading */
.sotn-bg-claret{background-color:#9A1A36} /* brand-claret background utility */
.sotn-mt40{margin-top:40px} /* .intro-panel/.intro-section top spacing */
.sotn-th-pad12{padding:12px} /* essentials/[page] comparison-table header cells */
.sotn-line-height18{line-height:1.8} /* numbered/bulleted list rhythm, essentials/home.html + 6 users/[page] pages */
.sotn-tech-permission-note{font-size:0.9rem;color:#666;margin-top:0.5em} /* resources/technical/[page] "reproduced with permission" note, pairs with .sotn-cite-heading */
.sotn-related-articles-heading{font-weight:bold;margin-bottom:10px} /* resources/technical/[page] "Related Technical Articles" heading */

/* Chronology search/data-card widget (tools/chronology-explorer.html). House palette only;
   the purple pair (#673ab7/#764ba2) carries white text at 6.4:1 or better.
   .search-panel, .card-header, .data-card and .no-results stay page-local there:
   those names collide with unrelated, differently-styled components elsewhere. */
.search-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 25px;}
.search-field {display: flex; flex-direction: column;}
.search-field label {color: white; font-weight: bold; margin-bottom: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;}
.search-field select, .search-field input[type="text"] {padding: 12px; border: 2px solid rgba(255,255,255,0.3); border-radius: 8px; font-size: 14px; background: white; transition: all 0.3s ease;}
.search-field select:focus, .search-field input[type="text"]:focus {outline: none; border-color: white; box-shadow: 0 0 0 3px rgba(255,255,255,0.2);}
.search-buttons {display: flex; gap: 15px; justify-content: center; margin-top: 20px;}
.btn-search, .btn-clear, .btn-pdf {padding: 12px 35px; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px;}
.btn-search {background: white; color: #673ab7;}
.btn-search:hover {background: var(--sotn-surface); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.btn-clear {background: rgba(255,255,255,0.2); color: white; border: 2px solid white;}
.btn-clear:hover {background: rgba(255,255,255,0.3); transform: translateY(-2px);}
.btn-pdf {background: #2D8116; color: white; border: 2px solid white; padding: 8px 20px; font-size: 13px; position: relative; margin-left: auto;}
.btn-pdf:hover {background: #266e13; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.btn-pdf:disabled {background: #666; cursor: not-allowed; opacity: 0.6;}
.results-header {background: var(--sotn-surface); padding: 20px; border-radius: 10px; margin: 30px 0 20px 0; text-align: center; border: 2px solid #e0e0e0;}
.results-header h3 {color: #444; margin: 0; font-size: 22px;}
.results-count {color: #673ab7; font-weight: bold; font-size: 1.6rem;}
.data-cards {display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0;}
.card-company {font-size: 20px; font-weight: bold; color: #444; flex: 1;}
.card-year {background: linear-gradient(135deg, #673ab7 0%, #764ba2 100%); color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold; font-size: 14px;}
.card-headline {font-size: 1rem; color: #666; margin-bottom: 15px; line-height: 1.5; font-weight: 500;}
.card-notes {background: var(--sotn-surface); padding: 12px; border-radius: 8px; font-size: 13px; color: #666; line-height: 1.6; margin-top: 10px;}
.card-search-info {background: #fff3e0; padding: 10px 12px; border-radius: 6px; font-size: 12px; color: #856404; margin-top: 15px; border-left: 3px solid #ffd700; font-weight: 500; width: 85%; display: inline-block;}
.card-search-row {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px;}
.export-icon {width: 30px; height: 30px; cursor: pointer; background: #856404; border: 2px solid #856404; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.3s ease; color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); flex-shrink: 0;}
.export-icon:hover { transform: scale(1.1); box-shadow: 0 3px 8px rgba(0,0,0,0.3);}
.export-icon:active {transform: scale(0.95);}
.no-results-icon {font-size: 3.75rem; margin-bottom: 20px;}
.search-string {background: #fff3e0; border: 1px solid #ffd700; padding: 3px 8px; border-radius: 4px; font-weight: bold; color: #856404;}
.error-box {background: #ffebee; border: 2px solid var(--sotn-claret-pale); padding: 20px; border-radius: 10px; margin: 20px 0; color: var(--sotn-claret-dk);}
@media (max-width: 768px){.search-grid {grid-template-columns: 1fr;}.search-buttons {flex-direction: column;}.btn-search, .btn-clear, .btn-pdf {width: 100%;}}
.bookmark-hint {color: white; font-size: 13px; display: flex; align-items: center; gap: 8px; margin-top: 15px;}
.bookmark-hint .export-icon {width: 24px; height: 24px; font-size: 12px; pointer-events: none;}

/* Positioning-matrix widget (advisory/differentiation.html, advisory/independence.html).
   independence.html keeps its own .competitor-item/-name/-score rules page-local. */
.sotn-free-badge{display:inline-block;background:#2D8116;color:#fff;font-size:0.75rem;font-weight:bold;padding:3px 8px;border:2px solid #2D8116;border-radius:3px;vertical-align:middle;margin-left:8px;white-space:nowrap} /* "FREE ACCESS" H2 badge (news-hub.html, ma-hub.html, resources/cost-models/models.html) */
.sotn-callout-lede{margin:0;font-style:italic;font-size:14px} /* highlighted-callout-box intro paragraph (about.html, steel-industry-expertise.html); the surrounding box colour differs per page and stays inline */
.matrix-container{background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:30px;margin:40px 0}.matrix-wrapper{position:relative;width:100%;padding-bottom:85%;background:#fff}.matrix-chart{position:absolute;top:0;left:0;width:100%;height:100%;padding:60px}.matrix-chart svg{width:100%;height:100%}.axis-line{stroke:#1a1a1a;stroke-width:3}.axis-label{font-size:18px;font-weight:700;fill:#1a1a1a;text-transform:uppercase;letter-spacing:0.5px}.company-label{font-size:14px;font-weight:600;fill:#1a1a1a}.size-legend{display:flex;justify-content:center;align-items:center;gap:40px;margin:25px 0;padding:20px;background:#f8f9fa;border-radius:4px}.size-item{text-align:center;padding:10px}.size-circle{border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}.size-small{width:30px;height:30px;background:#9a1a36}.size-medium{width:50px;height:50px;background:#673ab7}.size-large{width:70px;height:70px;background:#2196f3}.definition-box{background:#f8f9fa;padding:25px;border-left:4px solid #9a1a36;margin:30px 0}.disclaimer-box{background:#fff3e0;padding:25px;border:2px solid #ffc107;border-radius:4px;margin:30px 0;font-size:14px;line-height:1.7}.conclusion-box{background:#e8f5e9;padding:25px;border-left:4px solid #369A1A;margin:30px 0}@media(max-width:768px){.size-legend{gap:20px;padding:15px}.size-item{padding:5px;font-size:12px}.size-small{width:20px;height:20px}.size-medium{width:35px;height:35px}.size-large{width:50px;height:50px}.matrix-chart{padding:40px}.company-label{font-size:0.75rem}.axis-label{font-size:13px}}

/* Page-header rhythm. H1 + breadcrumb form one block: generous gap above, tight
   gap between, largest gap below (left to *+h2 / *+h3). Overrides
   div>h1:first-child{margin-top:0} earlier in this file, so this block must stay
   after it. */
h1,*+h1,div>h1:first-child{margin-top:32px}
.breadcrumb{margin-top:0}
@media (max-width:960px){h1,*+h1,div>h1:first-child{margin-top:26px}}
@media (max-width:480px){h1,*+h1,div>h1:first-child{margin-top:20px}}

/* Type scale tokens (legacy), declared on :root. Off the rem ladder in .claude/rules/colour-type.md; still used by the footer columns and index.php's .sotn-indep table, so keep them but add no new references. */

/* Grouped footer columns. Pairs with footer.php. Column labels are
   <p class="footer-col-h">; text-align:inherit keeps them centred with the column at 480px. */

#footer-site-info{margin:0 auto;padding:0}
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-minor) 2rem;max-width:64em;margin:0 auto;padding:0 1rem;text-align:left}
#footer-site-info .footer-col-h{font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sotn-ink);text-align:inherit;margin:0 0 .7em 0;padding:0;border:0;line-height:1.3}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 .3em 0;line-height:1.5}
.footer-col a{font-size:var(--t-small);color:var(--sotn-claret);text-decoration:none;display:inline-block;padding:5px 0}
.footer-col a:hover{color:var(--sotn-claret-dk);text-decoration:underline}

/* Balanced reflow 4>2>1, never a 3+1 orphan row */
@media (max-width:960px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-minor) 1.5rem}}
@media (max-width:768px){.footer-col a{padding:9px 0}}
@media (max-width:480px){.footer-cols{grid-template-columns:1fr;text-align:center;gap:var(--sp-minor) 1rem;padding:0 .5rem}}

.footer-copyright{margin:20px 0 10px 0;font-size:var(--t-small);color:#666}

.footer-badges{margin:15px 0 20px 0}

/* ==========================================================
   Mega menu - News, Advisory, Insights, Resources, M&A and History panels.
   Selectors are prefixed with #sotn-nav so they outrank the bar-link rules.
   Breakpoints match the nav's drawer switch at 960px: >=1200 four columns |
   961-1199 three columns (featured card hidden) | <=960 drawer accordion.
   Sits above the dark-surface link block, which must stay last in the file.
   ========================================================== */

#sotn-nav{--mm-claret:var(--sotn-claret);--mm-ink:var(--sotn-ink);--mm-muted:#666;--mm-line:var(--sotn-surface-line);--mm-tint:var(--sotn-surface)} /* house palette only: aliases keep the panel rules short */

/* ---------- desktop panel (screens >= 961px) ---------- */
@media (min-width:961px){
  #sotn-nav .sotn-mega{
    display:grid;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:100%;z-index:50;
    /* close delay: panel lingers 300ms after the pointer leaves, so diagonal moves don't drop it */
    transition:opacity .12s ease .18s,visibility 0s linear .3s;
    grid-template-columns:300px repeat(2,minmax(0,1fr)) 300px;column-gap:32px;
    margin:0;padding:28px 32px 30px;list-style:none;
    background:#fff;color:var(--mm-ink);text-align:left;
    border-bottom:1px solid var(--mm-line);box-shadow:0 14px 28px rgba(0,0,0,.16)
  }
  /* invisible bridge so the panel doesn't close crossing the gap */
  #sotn-nav .sotn-mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  /* hover corridor: extends each parent link's hover area down to the panel,
     so the pointer never crosses a dead gap between link and panel */
  #sotn-nav .sotn-has-sub>a{position:relative}
  #sotn-nav .sotn-has-sub>a::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:40px}
  #sotn-nav .sotn-has-sub:hover>.sotn-mega,
  #sotn-nav .sotn-has-sub:focus-within>.sotn-mega{visibility:visible;opacity:1;z-index:51;transition-delay:0s}
  #sotn-nav .sotn-sub-toggle{display:none}
  #sotn-nav .sotn-mega a:focus-visible{outline:2px solid var(--sotn-claret);outline-offset:-2px}
}
/* hover opens the panel, so the accordion checkbox would only be an invisible tab stop */
@media (hover:hover) and (min-width:961px){#sotn-nav .sotn-sub-check{display:none}}
/* where the arrow is shown (touch and drawer), its checkbox is off-screen, so the ring goes on the arrow */
#sotn-nav .sotn-sub-check:focus-visible+.sotn-sub-toggle{outline:2px solid #fff;outline-offset:-6px}

/* ---------- reset bar-link styles inherited inside mega panels ----------
   :where() keeps this block at ID-only specificity, so the rules below still
   win while the .sotn-nav-links a bar rules do not. */
#sotn-nav :where(.sotn-mega){width:auto;min-width:0;max-width:none;max-height:none;overflow:visible;columns:auto;text-align:left;white-space:normal}
#sotn-nav :where(.sotn-mega) :where(li,a,span,p,ul){white-space:normal;text-align:left;text-transform:none;letter-spacing:normal;float:none;width:auto;min-width:0;height:auto;min-height:0;border:0;background:none;box-shadow:none;margin:0;padding:0}
#sotn-nav :where(.sotn-mega) :where(a){display:block;color:inherit;line-height:1.35;text-decoration:none}
#sotn-nav :where(.sotn-mega) :where(img){max-width:none}

/* ---------- panel contents ---------- */
#sotn-nav .sotn-mega li{list-style:none;margin:0}
#sotn-nav .sotn-mega-intro{display:flex;align-items:flex-start;flex-direction:column;gap:12px;padding-right:28px;border-right:1px solid var(--mm-line)}
#sotn-nav .sotn-mega-kicker,
#sotn-nav .sotn-grp-l{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--mm-muted)}
#sotn-nav .sotn-mega-intro p{margin:0;font-size:20px;line-height:1.35;font-family:Georgia,'Times New Roman',serif;color:var(--mm-ink)}
#sotn-nav .sotn-mega-cta{display:inline-block;color:var(--mm-claret);font-weight:600;font-size:14px}
#sotn-nav .sotn-mega-all{display:inline-block} /* keep display at this low specificity so .sotn-tab-only (later, same weight) can still hide it */
#sotn-nav .sotn-mega a.sotn-mega-all{color:var(--mm-claret);font-size:13px;font-weight:400} /* secondary link: claret, quieter than .sotn-sub-t and the hub CTA. Selector outranks .sotn-mega-grp a (color:inherit) for the "All ... ->" links */
#sotn-nav .sotn-mega a.sotn-mega-cta:hover,#sotn-nav .sotn-mega a.sotn-mega-cta:focus-visible,#sotn-nav .sotn-mega a.sotn-mega-all:hover,#sotn-nav .sotn-mega a.sotn-mega-all:focus-visible{color:var(--sotn-claret-dk);text-decoration:underline}
#sotn-nav .sotn-mega-intro .sotn-mega-cta{margin-top:auto} /* pin "Explore the ... Hub" link to the foot of the intro column */

#sotn-nav .sotn-grp-l{display:block;padding:0 12px 6px;margin-bottom:4px;border-bottom:1px solid var(--mm-line)}
#sotn-nav .sotn-mega-grp{min-width:0}
#sotn-nav .sotn-mega-grp ul{margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
#sotn-nav .sotn-mega-grp a{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;padding:9px 12px;border-radius:6px;color:inherit;text-decoration:none}
#sotn-nav .sotn-mega-grp a:hover,
#sotn-nav .sotn-mega-grp a:focus-visible{background:var(--mm-tint)}
#sotn-nav .sotn-sub-t{font-weight:600;font-size:15px;color:var(--mm-claret)}
#sotn-nav .sotn-step{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:var(--mm-claret);color:#fff;font-size:11px;font-weight:600;line-height:1;vertical-align:1px}
#sotn-nav .sotn-sub-d{font-size:13px;color:var(--mm-muted);font-weight:400}

/* featured card (markup from /incl/feat-*.php: news, advisory, insights, resources, ma, history) */
#sotn-nav .sotn-feat-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;overflow:hidden;gap:8px;height:100%;box-sizing:border-box;padding:18px 20px;border-radius:8px;background:var(--mm-tint);color:var(--mm-ink);text-decoration:none}
#sotn-nav .sotn-feat-img{display:block;width:calc(100% + 40px);max-width:none;margin:-18px -20px 4px;height:110px;object-fit:cover;border-radius:8px 8px 0 0}
#sotn-nav .sotn-feat-l{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--mm-claret)}
#sotn-nav .sotn-feat-date{font-size:13px;font-weight:600;color:#444}
#sotn-nav .sotn-feat-t{display:block;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.3;font-weight:600;color:var(--mm-ink);text-decoration:none}
#sotn-nav .sotn-feat-s{font-size:13px;color:var(--mm-muted)}
#sotn-nav .sotn-feat-c{display:block;margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--mm-claret);text-decoration:none}
#sotn-nav a.sotn-feat-card:hover .sotn-feat-c,
#sotn-nav .sotn-feat-card a:hover{text-decoration:underline}

#sotn-nav .sotn-ws-l{display:block;margin:12px 12px 4px;font-size:12px;color:var(--mm-muted)}
#sotn-nav .sotn-mega .sotn-ws{display:flex;flex-direction:column;gap:0}
#sotn-nav .sotn-mega .sotn-ws a{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:0;padding:5px 12px;border-radius:6px;font-size:14px;font-weight:600;color:var(--mm-claret)}
#sotn-nav .sotn-mega .sotn-ws a:hover,#sotn-nav .sotn-mega .sotn-ws a:focus-visible{background:var(--mm-tint)}
#sotn-nav .sotn-feat-list{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#444;padding-top:10px;border-top:1px solid var(--mm-line)}
#sotn-nav .sotn-feat-big{font-family:Georgia,'Times New Roman',serif;font-size:40px;line-height:1;font-weight:600;color:var(--mm-claret)}
#sotn-nav .sotn-feat-c2{display:block;font-size:13px;font-weight:400;color:var(--mm-claret)} /* secondary card link: claret, regular weight under the bold .sotn-feat-c. Mega-menu rule: every link claret, grey only for non-clickable text */
#sotn-nav .sotn-feat-c2:hover,#sotn-nav .sotn-feat-c2:focus-visible{color:var(--sotn-claret-dk);text-decoration:underline}
/* News card RSS subscribe (incl/feat-news.php): claret outline, as for standalone secondary actions */
#sotn-nav .sotn-feat-card a.sotn-feat-rss{display:inline-flex;flex-direction:row;align-items:center;align-self:flex-start;gap:7px;margin-top:auto;padding:7px 14px;border:1.5px solid var(--mm-claret);border-radius:4px;background:#fff;color:var(--mm-claret);font-size:13px;font-weight:600;line-height:1.2;text-decoration:none}
#sotn-nav .sotn-feat-rss svg{width:14px;height:14px;fill:currentColor;flex:none}
#sotn-nav .sotn-feat-card a.sotn-feat-rss:hover,#sotn-nav .sotn-feat-card a.sotn-feat-rss:focus-visible{background:var(--mm-claret);color:#fff;text-decoration:none}

#sotn-nav .sotn-mega-note{display:block;font-size:14px;line-height:1.45;color:#444}
#sotn-nav .sotn-mega-compact ul{gap:0}
#sotn-nav .sotn-mega .sotn-mega-compact a{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0 8px;padding:6px 12px}
#sotn-nav .sotn-mega-compact .sotn-sub-d{font-size:12px}
/* highlighted link inside a panel list (News: Latest Steel News) - tint, claret bar, "Updated daily" tag. Desktop panels only; the drawer keeps plain links */
@media (min-width:961px){
  #sotn-nav .sotn-mega-grp a.sotn-mega-hl{background:#ffebee;border-left:3px solid var(--mm-claret);border-radius:0;padding-left:10px}
  #sotn-nav .sotn-mega-grp a.sotn-mega-hl:hover,#sotn-nav .sotn-mega-grp a.sotn-mega-hl:focus-visible{background:var(--sotn-claret-pale)}
  #sotn-nav .sotn-mega-hl .sotn-sub-t{font-size:16px}
  #sotn-nav .sotn-mega-hl .sotn-sub-d{color:var(--sotn-claret-dk)}
  #sotn-nav .sotn-mega .sotn-mega-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;background:var(--mm-claret);color:#fff;font-size:12px;font-weight:600;line-height:1.4;vertical-align:2px}
}
@media (max-width:960px){#sotn-nav .sotn-mega-tag{display:none}}
#sotn-nav .sotn-mega .sotn-mega-compact a.sotn-grp-more{display:inline-block;padding:0;margin:10px 12px 0;font-size:13px}
#sotn-nav .sotn-tab-only{display:none}
#sotn-nav .sotn-feat-tl{display:block;width:100%;height:36px;fill:var(--mm-claret);color:var(--mm-claret)}
/* intro-column link lists (News companies, Advisory "About MCI"): a wrapping row. Must follow the .sotn-ws rules above, which they override at equal specificity.
   The intro column is hidden in the drawer, so News and Advisory repeat those links in a .sotn-ws-drawer list, shown at 960px and below only. */
#sotn-nav .sotn-mega-intro .sotn-ws-l{margin:6px 0 0}
#sotn-nav .sotn-mega-intro .sotn-ws{flex-direction:row;flex-wrap:wrap;gap:2px 16px;margin:-8px 0 0;padding:0;list-style:none}
#sotn-nav .sotn-mega-intro .sotn-ws a{padding:2px 0}
#sotn-nav .sotn-mega .sotn-ws-drawer{display:none}
@media (max-width:960px){#sotn-nav .sotn-mega span.sotn-ws-drawer{display:block}#sotn-nav .sotn-mega ul.sotn-ws-drawer{display:flex}}

/* ---------- tablet landscape / small laptops: three columns ---------- */
@media (min-width:961px) and (max-width:1199px){
  #sotn-nav .sotn-mega{grid-template-columns:240px repeat(2,minmax(0,1fr));column-gap:24px;padding:24px}
  #sotn-nav .sotn-mega-feat{display:none}
  #sotn-nav .sotn-mega .sotn-tab-only{display:inline-block}
  #sotn-nav .sotn-mega-intro p{font-size:17px}
}

/* ---------- touch screens >= 961px: tap the arrow, not hover ---------- */
@media (hover:none) and (min-width:961px){
  /* keep link + arrow on one line: the li is otherwise a block, so the 44px
     toggle wrapped under the link and pushed the text up out of the bar */
  #sotn-nav .sotn-has-sub{display:flex;align-items:center;flex-wrap:nowrap}
  /* the tap arrow replaces the link's own caret, so show only one */
  #sotn-nav .sotn-has-sub>a .sotn-caret{display:none}
  #sotn-nav .sotn-sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:44px;margin-left:-2px;cursor:pointer;color:inherit}
  #sotn-nav .sotn-sub-toggle svg{width:10px;height:6px;transition:transform .2s}
  #sotn-nav .sotn-sub-check:checked+.sotn-sub-toggle svg{transform:rotate(180deg)}
  #sotn-nav .sotn-has-sub:hover>.sotn-mega{visibility:hidden;opacity:0}
  #sotn-nav .sotn-sub-check:checked~.sotn-mega{visibility:visible;opacity:1;z-index:51;transition-delay:0s}
}

/* ---------- drawer (<= 960px): accordion ---------- */
@media (max-width:960px){
  #sotn-nav .sotn-has-sub{display:flex;flex-wrap:wrap;align-items:center}
  #sotn-nav .sotn-has-sub>a{flex:1}
  #sotn-nav .sotn-has-sub>a .sotn-caret{display:none}
  #sotn-nav .sotn-sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer;color:inherit}
  #sotn-nav .sotn-sub-toggle svg{width:12px;height:8px;transition:transform .2s}
  #sotn-nav .sotn-sub-check:checked+.sotn-sub-toggle svg{transform:rotate(180deg)}
  #sotn-nav .sotn-mega{display:none;flex-basis:100%;position:static;margin:0;padding:0 0 8px 16px;box-shadow:none;border:0;background:transparent}
  #sotn-nav .sotn-sub-check:checked~.sotn-mega{display:block}
  #sotn-nav .sotn-mega-intro,
  #sotn-nav .sotn-mega-feat,
  #sotn-nav .sotn-sub-d{display:none}
  #sotn-nav .sotn-grp-l{border:0;padding:10px 0 2px;color:inherit;opacity:.7}
  #sotn-nav .sotn-mega-grp a{padding:10px 0;min-height:24px}
  #sotn-nav .sotn-sub-t{color:inherit;font-weight:500}
  #sotn-nav .sotn-step{display:none}
  #sotn-nav .sotn-ws-l{margin:10px 0 2px;color:inherit;opacity:.7}
  #sotn-nav .sotn-mega .sotn-ws a{padding:10px 0;font-weight:500;color:inherit}
}

@media (prefers-reduced-motion:reduce){#sotn-nav .sotn-mega{transition:visibility 0s linear .3s}#sotn-nav .sotn-sub-toggle svg{transition:none}}

/* Links on dark surfaces. The global .uk-link,a rule above is claret,
   which is invisible on the claret and navy bands, so every dark surface restates it in
   white. Underline kept throughout (WCAG 1.4.1 - colour is never the only signal):
   translucent white at rest, solid white on hover. Must stay last: `.x a` and `a:hover`
   are both specificity 0,1,1, so source order is what makes the scoped rule win at rest.
   Grouped here rather than beside each component so the set stays greppable. */
.podcast-hero a,.sotn-podcast-subscribe-cta a,.intro-panel a,.gov-badge a,.port-card-hdr a,.chronology-header a,.sotn-panel-bg-blue a,.sotn-bg-claret a,.image-overlay a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.55)}
.podcast-hero a:visited,.sotn-podcast-subscribe-cta a:visited,.intro-panel a:visited,.gov-badge a:visited,.port-card-hdr a:visited,.chronology-header a:visited,.sotn-panel-bg-blue a:visited,.sotn-bg-claret a:visited,.image-overlay a:visited{color:#fff}
.podcast-hero a:hover,.sotn-podcast-subscribe-cta a:hover,.intro-panel a:hover,.gov-badge a:hover,.port-card-hdr a:hover,.chronology-header a:hover,.sotn-panel-bg-blue a:hover,.sotn-bg-claret a:hover,.image-overlay a:hover{color:var(--sotn-claret-pale);text-decoration-color:#fff}
/* Podcast subscribe buttons are white pills on the dark bands, so they opt back out of the white-link rules above. Each state is restated at 0,2,0+ because .podcast-hero a (0,1,1) and its :hover/:visited (0,2,1) outrank .subscribe-btn alone. */
.podcast-hero .subscribe-btn,.podcast-hero .subscribe-btn:visited,.sotn-podcast-subscribe-cta .subscribe-btn,.sotn-podcast-subscribe-cta .subscribe-btn:visited{color:#1A369A;text-decoration:none}
.podcast-hero .subscribe-btn:hover,.podcast-hero .subscribe-btn:focus-visible,.sotn-podcast-subscribe-cta .subscribe-btn:hover,.sotn-podcast-subscribe-cta .subscribe-btn:focus-visible{color:#1A369A;text-decoration:none;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.2)}
.podcast-hero .subscribe-btn:focus-visible,.sotn-podcast-subscribe-cta .subscribe-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}