/* ==========================================================================
   AIM ALLOYS LLP — Stylesheet
   Palette sampled directly from the company logo:
     amber    #FFA200
     charcoal #1A1A1A
   Every brand colour lives in :root — change it there to re-skin the site.
   ========================================================================== */

:root {
  /* --- Brand palette (from logo) -------------------------------------- */
  --accent:        #FFA200;  /* logo amber — fills, bars, underlines      */
  --accent-dark:   #E08C00;  /* amber hover                               */
  --accent-ink:    #9A5D00;  /* amber legible as TEXT on light bg (5.3:1) */
  --graphite:      #1A1A1A;  /* logo charcoal — headings, header, footer  */
  --graphite-deep: #101010;  /* deepest charcoal — top bar, footer, hero  */
  --graphite-soft: #2B2B2B;  /* raised charcoal surfaces                  */

  /* --- Neutrals -------------------------------------------------------- */
  --ink:    #1F2124;  /* body copy                                        */
  --steel:  #6B7079;  /* secondary text (4.98:1 on white)                 */
  --line:   #E3E5E8;  /* hairline borders                                 */
  --mist:   #F5F6F7;  /* section background tint                          */
  --white:  #FFFFFF;
  --on-dark:      #C7CCD3;  /* body copy on charcoal (11.8:1)             */
  --on-dark-soft: #8F949B;  /* muted copy on charcoal (6.2:1)             */

  /* --- Type ------------------------------------------------------------ */
  --font-head: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Layout ---------------------------------------------------------- */
  --wrap: 1200px;
  --radius: 4px;
  --shadow-sm: 0 2px 10px rgba(26, 26, 26, .08);
  --shadow-md: 0 14px 34px rgba(26, 26, 26, .16);
  --t: .25s ease;

  /* WhatsApp glyph, inlined so it costs no extra request */
  --wa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.01-1.04 2.47s1.06 2.87 1.21 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.07-.13-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm0 18.02h-.01c-1.52 0-3.02-.41-4.32-1.18l-.31-.18-3.21.84.86-3.13-.2-.32a8.21 8.21 0 0 1-1.26-4.39c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.69 8.35-8.02 8.35z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------- */
/* Reset + base                                                           */
/* --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--white);
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--accent-ink); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--graphite); }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--graphite);
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); text-transform: uppercase; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); text-transform: uppercase; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1.15em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.section { padding: 84px 0; }
.section--tint { background: var(--mist); }
.section--dark { background: var(--graphite); color: var(--on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark a { color: var(--accent); }
.section--dark a:hover { color: var(--white); }
/* Buttons keep their own colours on dark backgrounds — without this the link
   rule above paints amber text onto the amber button and it disappears. */
.section--dark .btn { color: var(--graphite); }
.section--dark .btn:hover { color: var(--graphite); }
.section--dark .btn--ghost { color: var(--white); }
.section--dark .btn--ghost:hover { color: var(--graphite); }
.section--dark .btn--outline { color: var(--accent); }
.section--dark .btn--outline:hover { color: var(--graphite); }

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--graphite); padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 0; }

/* Section heading block */
.head { max-width: 780px; margin-bottom: 46px; }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .95rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: .5rem;
  font-weight: 600;
}
.section--dark .eyebrow, .hero .eyebrow, .page-banner .eyebrow { color: var(--accent); }
.head p { color: var(--steel); margin-bottom: 0; }
.section--dark .head p { color: var(--on-dark); }
.rule { width: 62px; height: 3px; background: var(--accent); margin: 18px 0 0; border: 0; }
.head--center .rule { margin-left: auto; margin-right: auto; }

/* Buttons — charcoal on amber, straight off the logo (8.6:1) */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 30px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--graphite);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--t);
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--graphite); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.65); }
.btn--ghost:hover { background: var(--white); border-color: var(--white); color: var(--graphite); }
.btn--outline { background: transparent; color: var(--accent-ink); border-color: var(--accent); }
.btn--outline:hover { background: var(--accent); color: var(--graphite); }

/* --------------------------------------------------------------------- */
/* Top bar                                                                */
/* --------------------------------------------------------------------- */
.topbar {
  background: var(--graphite-deep);
  color: var(--on-dark);
  font-size: .88rem;
  padding: 9px 0;
}
.topbar .wrap { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.topbar a { color: var(--on-dark); }
.topbar a:hover { color: var(--accent); }
.topbar .spacer { margin-left: auto; }
.topbar .tag { color: var(--accent); font-family: var(--font-head); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }

/* --------------------------------------------------------------------- */
/* Header / navigation                                                    */
/* --------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
/* The header spans wider than the body content. It has to carry a brand block,
   seven menu items and a CTA on one line; the 1200px body measure is right for
   reading paragraphs but too tight for that. Everything is verified against
   FALLBACK fonts, which are wider than Barlow Condensed, so the real thing has
   more room than these numbers suggest. */
.site-header .wrap { max-width: 1320px; }
.nav-bar { display: flex; align-items: center; gap: 14px; min-height: 78px; }
/* flex-shrink:0 matters. The brand text is nowrap, so if the flex layout is
   allowed to squeeze this box below its content width the text does not wrap
   or clip — it silently spills sideways across the first menu item. The header
   looks fine in a screenshot until you notice "HOME" sitting under the tagline.
   Refusing to shrink turns that invisible overlap into an honest overflow that
   the layout tests catch. */
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; flex-shrink: 0; }
.brand img { height: 52px; width: auto; }
/* Sizes here are set against the longest text the brand block carries:
   "AIM ALLOYS LLP" over the tagline "Perfect Powders for Perfect Weld". Both
   are nowrap, so the wider of the two sets the width of the whole block and
   squeezes the menu beside it. If you lengthen either line, re-check that the
   header still fits at 1101px — the narrowest width that still shows the full
   desktop menu. Wide letter-spacing on a 32-character tagline is expensive:
   it was .2em and cost ~68px on its own. */
.brand-text { font-family: var(--font-head); line-height: 1.05; }
.brand-text b { display: block; font-size: 1.2rem; color: var(--graphite); letter-spacing: .03em; white-space: nowrap; }
.brand-text span { display: block; font-size: .6rem; letter-spacing: .05em; color: var(--steel); text-transform: uppercase; white-space: nowrap; }

.menu { display: flex; align-items: center; list-style: none; gap: 0; }
.menu > li { position: relative; }
.menu > li > a {
  display: block;
  font-family: var(--font-head);
  font-size: 1.01rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 28px 8px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.menu > li > a:hover,
.menu > li.has-sub:hover > a { color: var(--accent-ink); }
.menu > li.current > a { color: var(--accent-ink); border-bottom-color: var(--accent); }
.menu .caret { display: inline-block; margin-left: 6px; font-size: .55rem; vertical-align: middle; }

.submenu {
  position: absolute; top: 100%; left: 0;
  min-width: 240px;
  list-style: none;
  background: var(--white);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-md);
  padding: 6px 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--t);
}
.menu > li:hover > .submenu,
.menu > li:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
  display: block;
  padding: 10px 20px;
  font-size: .95rem;
  color: var(--ink);
  border-left: 3px solid transparent;
}
.submenu a:hover { background: var(--mist); color: var(--accent-ink); border-left-color: var(--accent); }
.submenu > li.current > a { color: var(--accent-ink); border-left-color: var(--accent); background: var(--mist); }

/* Third level — flies out to the right of its parent */
.submenu > li { position: relative; }
.submenu > li.has-sub2 > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.caret--side { font-size: .7rem; color: var(--steel); }
.submenu--deep {
  position: absolute; top: -9px; left: 100%;
  min-width: 250px; max-height: 78vh; overflow-y: auto;
}
.submenu > li:hover > .submenu--deep,
.submenu > li:focus-within > .submenu--deep { opacity: 1; visibility: visible; transform: translateY(0); }
/* Flip to the left if the flyout would run off the right edge */
.menu > li:last-of-type .submenu--deep,
.menu > li:nth-last-of-type(2) .submenu--deep { left: auto; right: 100%; }

/* Submenu open/close button — hidden on desktop, where hover and keyboard
   focus already open and close the menus. It only appears below 1100px. */
.sub-toggle { display: none; }

/* Slimmer than a body button: the header has seven menu items and a brand
   block to accommodate, so the CTA gives back the width it does not need. */
.nav-cta { white-space: nowrap; padding: 13px 20px; font-size: .97rem; }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; margin-left: auto; }
.burger span { display: block; width: 26px; height: 2px; background: var(--graphite); margin: 5px 0; transition: var(--t); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------- */
/* Hero                                                                   */
/* --------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 620px;
  display: flex; align-items: center;
  background: var(--graphite-deep) center/cover no-repeat;
  color: var(--white);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16,16,16,.95) 6%, rgba(16,16,16,.82) 46%, rgba(16,16,16,.45) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 96px; }
.hero-inner { max-width: 730px; }
.hero h1 { color: var(--white); margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lead { font-size: 1.18rem; color: var(--on-dark); max-width: 610px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* --------------------------------------------------------------------- */
/* Homepage carousel                                                      */
/* --------------------------------------------------------------------- */
.hero-slider {
  position: relative;
  background: var(--graphite-deep);
  overflow: hidden;
}
.slider-viewport { overflow: hidden; }
.slider-track {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  will-change: transform;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.slider-track.is-dragging { transition: none; }

.slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 64vh, 660px);
  background: var(--graphite-deep);
}
.slide-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The image is decoration behind the text; the text carries the meaning. */
  opacity: .55;
}
.slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16,16,16,.95) 6%, rgba(16,16,16,.84) 46%, rgba(16,16,16,.5) 100%);
}
.slide-body { position: relative; z-index: 2; width: 100%; padding: 96px 0 128px; }
.slide-inner { max-width: 730px; }
.slide-inner h1, .slide-inner h2 {
  color: var(--white);
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  text-transform: uppercase;
  margin-bottom: .35em;
}
.slide-inner h1 em, .slide-inner h2 em { font-style: normal; color: var(--accent); }

/* Arrows */
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(16, 16, 16, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: var(--white); font-size: 1.15rem;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.slider-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--graphite); }
.slider-arrow--prev { left: 18px; }
.slider-arrow--next { right: 18px; }

/* Dots + pause button */
.slider-controls { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 4; }
.slider-controls .wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.slider-dots { display: flex; gap: 10px; }
.slider-dot {
  position: relative;
  width: 34px; height: 5px; padding: 0;
  border: 0; border-radius: 3px;
  background: rgba(255, 255, 255, .38);
  cursor: pointer;
  transition: background var(--t), width var(--t);
}
.slider-dot:hover { background: rgba(255, 255, 255, .7); }
.slider-dot[aria-current="true"] { background: var(--accent); width: 52px; }
/* A comfortable tap target without a fat visual dot */
.slider-dot::before {
  content: ""; position: absolute;
  top: -18px; right: -6px; bottom: -18px; left: -6px;
}

.slider-play {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(16, 16, 16, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: var(--white);
  padding: 8px 16px;
  font-family: var(--font-head); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; font-size: .8rem;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.slider-play:hover { background: var(--accent); border-color: var(--accent); color: var(--graphite); }
.slider-play-icon {
  width: 10px; height: 12px;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
/* Pressed = paused, so the icon becomes a play triangle */
.slider-play[aria-pressed="true"] .slider-play-icon {
  width: 0; height: 0;
  border-left: 10px solid currentColor; border-right: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

@media (max-width: 860px) {
  .slider-arrow { width: 44px; height: 44px; }
  .slider-arrow--prev { left: 8px; }
  .slider-arrow--next { right: 8px; }
  .slide-body { padding: 78px 0 118px; }
  .slide { min-height: clamp(430px, 74vh, 560px); }
}

@media (max-width: 620px) {
  .slider-arrow { display: none; }   /* swipe and dots are the mobile controls */
  .slide { min-height: auto; }
  .slide-body { padding: 62px 0 104px; }
  .slide-inner h1, .slide-inner h2 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .slider-controls { bottom: 20px; }
  .slider-controls .wrap { gap: 14px; }
  .slider-play { padding: 7px 13px; font-size: .74rem; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-lead { font-size: 1rem; }
  .slide-inner .eyebrow { font-size: .8rem; letter-spacing: .16em; }
}

/* No sliding, no autoplay, no motion when the visitor asks for none */
/* Very narrow phones: a single long heading word — "Sustainability",
   "Certificates" — cannot wrap, so at 320px it sets a minimum width the page
   cannot meet and pushes everything sideways. Scale the banner headings with
   the viewport instead of holding a fixed floor. */
@media (max-width: 620px) {
  h1 { font-size: clamp(1.7rem, 9vw, 2.6rem); }
  h2 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
}

/* Very narrow phones: the badge and "View photos" sit on one nowrap row that
   is a few pixels too wide at 320px. Let them wrap rather than push the page. */
@media (max-width: 430px) {
  .event-side { flex-wrap: wrap; gap: 10px 12px; white-space: normal; }
  .event-toggle { font-size: .8rem; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .slider-track { transition: none; }
}

/* Compact page banner */
.page-banner {
  position: relative;
  background: var(--graphite) center/cover no-repeat;
  color: var(--white);
  padding: 94px 0 80px;
  text-align: center;
}
.page-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,16,16,.84), rgba(16,16,16,.94));
}
.page-banner .wrap { position: relative; z-index: 2; }
.page-banner h1 { color: var(--white); margin-bottom: .2em; }
.crumbs { font-size: .9rem; color: var(--on-dark-soft); letter-spacing: .05em; margin: 0; }
.crumbs a { color: var(--on-dark); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--accent); }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before {
  content: "/"; margin: 0 11px; color: var(--on-dark-soft); opacity: .7;
}
.banner-sub { max-width: 640px; margin: 14px auto 0; }

/* --------------------------------------------------------------------- */
/* Stat strip                                                             */
/* --------------------------------------------------------------------- */
/* minmax(0, 1fr), not 1fr — a plain 1fr track will not shrink below the
   widest word inside it, so on a 320px phone the four stat cells refuse to
   narrow and push the page sideways. Same trap as the customer strip. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--accent); color: var(--graphite); }
.stat { padding: 34px 20px; text-align: center; border-right: 1px solid rgba(26,26,26,.18); min-width: 0; }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-family: var(--font-head); font-size: 2.7rem; line-height: 1; }
.stat span { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

/* BIS approval band. Sits directly under the statistics strip on the homepage,
   so it is charcoal rather than amber — two amber bands stacked would read as
   one confused block and the claim would lose the emphasis it is there for.

   flex-wrap plus min-width:0 on the text, and flex-shrink:0 on the mark and the
   button: the same three lines that stop the header brand overlapping the menu.
   Without them the badge and the button squeeze the sentence to one word wide
   and nothing warns you — it simply looks broken on a phone. */
.bis { background: var(--graphite); color: var(--white); }
.bis-inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 18px 24px; padding-top: 26px; padding-bottom: 26px;
}
.bis-mark {
  flex-shrink: 0;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .14em;
  color: var(--graphite); background: var(--accent);
  padding: 11px 16px; border-radius: var(--radius);
}
.bis-text { flex: 1 1 340px; min-width: 0; }
.bis-lead {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.42rem); line-height: 1.3;
  letter-spacing: .01em; margin: 0;
}
.bis-sub { margin: 6px 0 0; font-size: .92rem; color: #b9bcc2; }
.bis-lic { white-space: nowrap; }
.bis-inner .btn { flex-shrink: 0; }
@media (max-width: 620px) {
  .bis-inner { gap: 14px 18px; padding-top: 22px; padding-bottom: 22px; }
  .bis-lic { white-space: normal; }
}

/* --------------------------------------------------------------------- */
/* Grids + cards                                                          */
/* --------------------------------------------------------------------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Grid and flex children default to min-width:auto, which means they refuse to
   shrink below their content's intrinsic width. Once images carry explicit
   width attributes, that intrinsic width is the full image width and the
   column blows past the viewport on phones. Resetting to 0 lets them shrink. */
.grid > *, .split > * { min-width: 0; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.06); }
.card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: .4em; }
.card-body p { color: var(--steel); font-size: .96rem; }
.card-link {
  margin-top: auto; color: var(--accent-ink);
  font-family: var(--font-head);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .92rem;
}
.card-link::after { content: " \2192"; }

/* Product tile */
.tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  border-top: 3px solid var(--accent);
  transition: transform var(--t), box-shadow var(--t);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tile h4 { margin-bottom: .35em; }
.tile p { margin: 0; color: var(--steel); font-size: .92rem; }
.tile .spec { display: block; margin-top: 10px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; }

/* Clickable tile */
.tile--link { display: flex; flex-direction: column; color: inherit; }
.tile--link:hover { color: inherit; }
.tile--link h4 { transition: color var(--t); }
.tile--link:hover h4 { color: var(--accent-ink); }
.tile-more {
  margin-top: auto; padding-top: 14px;
  font-family: var(--font-head); font-weight: 700; font-size: .9rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink);
}
.tile-more::after { content: " \2192"; }
.tile--dark { background: var(--graphite-soft); border-color: #3a3a3a; }
.tile--dark h4 { color: var(--white); }
.tile--dark p { color: var(--on-dark); }
.tile--dark .tile-more { color: var(--accent); }
.tile--dark:hover h4 { color: var(--accent); }

/* Product page spec card */
.spec-card {
  background: var(--mist); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: var(--radius);
  padding: 30px 28px;
}
.spec-card h4 { margin-bottom: .7em; }
.spec-card .ticks li { margin-bottom: 8px; font-size: .96rem; }
.lede { font-size: 1.12rem; color: var(--steel); }

/* Specification table */
.spec-figure { margin: 0; }
.spec-figure figcaption {
  font-family: var(--font-head); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; font-size: .95rem;
  color: var(--graphite); margin-bottom: 14px;
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 3px solid var(--accent);
}
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 640px; }
/* The 640px floor exists so wide composition tables scroll rather than crush.
   The particle-size tables are narrow by nature and sit two-up in a split, so
   they opt out of it — forcing them to scroll would be gratuitous. */
.spec-table--narrow { min-width: 0; }

/* Sieve apertures. Thirteen mesh/micron pairs flowed into columns — as a tall
   two-column table they ran halfway down the page beside empty space. */
.sieve {
  margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  background: var(--white);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--radius); overflow: hidden;
}
.sieve-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 16px;
  box-shadow: inset -1px -1px 0 var(--line);   /* rules that stop at the edges */
}
.sieve-item dt {
  font-family: var(--font-head); font-weight: 700; letter-spacing: .04em;
  color: var(--graphite); font-size: .96rem; white-space: nowrap;
}
.sieve-item dd {
  margin: 0; color: var(--steel); font-size: .93rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* On a phone two columns squeeze "100 mesh / 150 um" onto two lines each.
   One column per row reads better than a wrapped pair. */
@media (max-width: 460px) {
  .sieve { grid-template-columns: 1fr; }
  .sieve-item { padding: 10px 16px; }
}
.psize-lede { color: var(--steel); max-width: 760px; }
.psize-ours {
  margin-top: 22px; padding: 16px 20px;
  background: var(--mist); border-left: 3px solid var(--accent);
  border-radius: var(--radius); font-size: .98rem;
}
.spec-table--compact { min-width: 420px; font-size: .9rem; }
/* Composition figures must never wrap — "0.030 max" split across two lines is
   unreadable — hence the global nowrap on cells. This table's last column is
   a sentence, not a figure, so it opts back in to wrapping. */
.spec-table--compact td:last-child {
  color: var(--steel); white-space: normal; min-width: 260px;
}
.spec-table--compact tbody th { white-space: normal; min-width: 180px; }
/* Same idea for a composition table whose final column is a sentence. */
.spec-table--wrap-last td:last-child { white-space: normal; min-width: 300px; color: var(--steel); }
/* A table that is prose end to end rather than figures — the quality-control
   test table and the certificate detail block beside it. The global nowrap
   exists to keep "0.030 max" on one line; applied to a sentence it produces a
   1900px row and shoves the whole document sideways, so these opt out of it.

   Both classes are named in each selector on purpose. ".spec-table--prose td"
   looks more specific than ".spec-table td" but is not — "--prose" is part of
   one class name, so both score (0,1,1) and the later rule (the nowrap one)
   would win the tie. Doubling the class breaks the tie honestly. */
.spec-table.spec-table--prose th,
.spec-table.spec-table--prose td { white-space: normal; }
.spec-table.spec-table--prose td { color: var(--steel); }
.spec-table.spec-table--prose tbody th { min-width: 130px; }
.spec-table thead th {
  background: var(--graphite); color: var(--white);
  font-family: var(--font-head); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; font-size: .88rem;
  padding: 13px 16px; text-align: left; white-space: nowrap;
}
/* Keep the grade column visible while the rest of the table scrolls */
.spec-table tbody th {
  text-align: left; font-weight: 700; color: var(--graphite);
  padding: 12px 16px; white-space: nowrap;
  background: var(--mist); border-right: 1px solid var(--line);
  position: sticky; left: 0; z-index: 1;
  box-shadow: 3px 0 0 var(--line);
}
.spec-table thead th:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--graphite);
  box-shadow: 3px 0 0 var(--graphite);
}
.spec-table td {
  padding: 12px 16px; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.spec-table tbody tr { border-top: 1px solid var(--line); }
.spec-table tbody tr:hover th { background: #ececee; }
.spec-table tbody tr:hover td { background: var(--mist); }
.table-hint {
  display: none;
  margin: 10px 0 0; font-size: .86rem; color: var(--steel);
}
.table-hint::after { content: " \2192"; }
@media (max-width: 760px) { .table-hint { display: block; } }
.spec-note { margin-top: 18px; color: var(--steel); font-size: .96rem; max-width: 760px; }
.spec-disclaimer {
  margin-top: 22px; max-width: 820px;
  font-size: .9rem; line-height: 1.65; color: var(--steel);
  border-left: 3px solid var(--accent); padding: 4px 0 4px 18px;
}
.spec-disclaimer strong { color: var(--graphite); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-block; padding: 7px 15px;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--graphite);
}
.chip:hover { background: var(--accent); border-color: var(--accent); color: var(--graphite); }

/* Compact list inside product category cards */
.mini-list { list-style: none; margin: 0 0 18px; font-size: .93rem; }
.mini-list li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.mini-list li:last-child { border-bottom: 0; }
.mini-list a { color: var(--ink); }
.mini-list a:hover { color: var(--accent-ink); }
.card-body h3 a { color: var(--graphite); }
.card-body h3 a:hover { color: var(--accent-ink); }

/* Linked bullet lists (industry "what we supply") */
.ticks--links a {
  color: var(--ink); font-weight: 500;
  border-bottom: 1px dotted var(--steel); padding-bottom: 1px;
}
.ticks--links a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* Two-column media + text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.split--rev .split-media { order: 2; }
/* Photographs were taken off the inner pages, which left several of these splits
   with a single text column and a column of nothing beside it. Rather than hunt
   down each one in the generator, a lone child spans the full width and is held
   to a readable measure. This also means removing a future image from a split
   cannot leave a hole behind — the layout closes up by itself. */
.split > *:only-child { grid-column: 1 / -1; max-width: 820px; }
/* A card with no .card-media needs its own top edge, or it reads as a floating
   block of text once the picture above it is gone. */
.card > .card-body:first-child { border-top: 3px solid var(--accent); }

/* Bullet list */
.ticks { list-style: none; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 11px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg);
}
.ticks--2 { columns: 2; column-gap: 40px; }

/* Timeline */
.timeline { position: relative; list-style: none; margin-top: 10px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 26px 42px; }
.timeline li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--accent);
}
.timeline b { font-family: var(--font-head); font-size: 1.35rem; color: var(--accent-ink); display: block; line-height: 1.2; }
.timeline span { color: var(--steel); }

/* Team */
.person { text-align: center; }
.person .avatar {
  width: 108px; height: 108px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--graphite); color: var(--white);
  display: grid; place-items: center;
  font-family: var(--font-head); font-size: 2.1rem; letter-spacing: .04em;
  border: 3px solid var(--accent);
}
.person h4 { margin-bottom: .1em; }
.person .role { color: var(--accent-ink); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.person p { color: var(--steel); font-size: .94rem; margin-top: 10px; }

/* Testimonials */
.quote { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; position: relative; }
.quote::before {
  content: "\201C"; font-family: Georgia, serif; font-size: 5rem; color: var(--accent);
  position: absolute; top: -6px; left: 20px; opacity: .35; line-height: 1;
}
.quote p { font-style: italic; color: var(--ink); position: relative; }
.quote cite { font-style: normal; font-weight: 700; color: var(--graphite); display: block; }
.quote cite small { display: block; font-weight: 400; color: var(--steel); }

/* Named customers */
/* minmax(0, 1fr) rather than 1fr: a plain 1fr track refuses to shrink below its
   min-content, so one long customer name — "Kalyani Carpenter Special Steels" —
   widens the whole grid and pushes the page sideways on a small phone. */
.clients {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
/* The generator picks the modifier from the number of customers, so the last
   row is never left with a single stranded card. */
.clients--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clients--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.clients--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.client { min-width: 0; }
.client b { overflow-wrap: anywhere; }
.client {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid var(--accent);
  padding: 20px 22px; min-height: 96px;
  display: flex; flex-direction: column; justify-content: center;
  transition: transform var(--t), box-shadow var(--t);
}
.client:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.client b {
  font-family: var(--font-head); font-size: 1.06rem; font-weight: 700;
  color: var(--graphite); line-height: 1.25;
}
.client span {
  margin-top: 6px; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel); font-weight: 600;
}

/* Events */
.event {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 26px; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; margin-bottom: 18px;
  border-left: 4px solid var(--accent);
}
.event .when { background: var(--graphite); color: var(--white); border-radius: var(--radius); text-align: center; padding: 14px 8px; }
.event .when b { display: block; font-family: var(--font-head); font-size: 1.7rem; line-height: 1.05; }
.event .when span { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); }
.event > * { min-width: 0; }
.event h3 { margin-bottom: .25em; overflow-wrap: anywhere; }
.event .meta { color: var(--steel); font-size: .94rem; margin: 0; }
.badge {
  display: inline-block; background: var(--accent); border: 1px solid var(--accent);
  color: var(--graphite); font-family: var(--font-head); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; font-size: .85rem;
  padding: 8px 16px; border-radius: var(--radius); white-space: nowrap;
}
.badge--past { background: var(--mist); border-color: var(--line); color: var(--steel); }

/* --------------------------------------------------------------------- */
/* Certificates, sustainability metrics, careers                          */
/* --------------------------------------------------------------------- */

/* An unmistakable marker for data that still has to be filled in */
.tbc {
  display: inline-block;
  font-family: var(--font-head); font-weight: 700;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink);
  background: rgba(255, 162, 0, .13);
  border: 1px dashed var(--accent);
  border-radius: 3px;
  padding: 2px 10px;
}

/* Certificates */
.certs { display: grid; gap: 24px; }
.cert {
  display: grid; grid-template-columns: 260px 1fr;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 3px solid var(--accent);
  overflow: hidden;
}
.cert-head {
  background: var(--graphite); color: var(--white);
  padding: 28px 26px;
  display: flex; flex-direction: column; justify-content: center;
}
.cert-head h3 { color: var(--white); margin-bottom: .25em; font-size: 1.5rem; }
.cert-name { margin: 0; color: var(--on-dark); font-size: .92rem; }
.cert-body { padding: 28px 30px; }
.cert-body > p:first-child { color: var(--steel); }
.cert-sub {
  margin: -.4em 0 1em; font-size: .84rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-ink); font-weight: 700;
}
.cert-meta {
  margin: 22px 0; padding: 20px 0 4px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 190px 1fr; gap: 10px 20px;
}
.cert-meta dt {
  font-family: var(--font-head); font-weight: 700; font-size: .86rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--graphite);
}
.cert-meta dd { margin: 0; color: var(--ink); font-size: .95rem; }
.cert-no {
  margin: 12px 0 0; font-family: var(--font-head); font-weight: 700;
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.cert-actions { margin: 4px 0 0; }
.btn-meta {
  display: inline-block; margin-left: 8px;
  font-size: .78rem; letter-spacing: .06em; opacity: .75; font-weight: 600;
}
.cert-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-bottom: 34px;
  background: var(--mist); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: 28px 30px;
}
.cert-summary-label {
  display: block; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-ink); font-weight: 700;
  margin-bottom: 6px;
}
.cert-summary strong {
  display: block; font-family: var(--font-head); font-size: 1.14rem;
  color: var(--graphite); line-height: 1.3; margin-bottom: 8px;
}
.cert-summary p { margin: 0; font-size: .9rem; color: var(--steel); line-height: 1.6; }

@media (max-width: 980px) {
  .cert-summary { grid-template-columns: 1fr; gap: 22px; }
}


/* Sustainability metrics */
/* auto-fit, so adding or removing a measure in SUSTAINABILITY_METRICS never
   leaves an empty column behind */
.metrics {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.metrics > * { min-width: 0; }
.metric {
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: var(--radius);
  padding: 26px 22px; text-align: center;
}
.metric b { display: block; font-size: 2rem; line-height: 1.1; margin-bottom: 12px; }
.metric span {
  display: block; font-family: var(--font-head); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; font-size: .92rem;
  color: var(--graphite);
}
.metric small { display: block; margin-top: 6px; color: var(--steel); font-size: .84rem; }

/* Careers */
.job {
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
  padding: 24px 28px; margin-bottom: 16px;
  transition: transform var(--t), box-shadow var(--t);
}
.job:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.job h3 { margin-bottom: .3em; }
.job p { margin: 0; color: var(--steel); font-size: .96rem; }

@media (max-width: 860px) {
  .cert { grid-template-columns: 1fr; }
  .cert-head { padding: 22px 24px; }
  .cert-meta { grid-template-columns: 1fr; gap: 4px 0; }
  .cert-meta dd { margin-bottom: 12px; }
  .job { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 620px) {
  .metrics { grid-template-columns: 1fr; }
  .cert-body { padding: 22px 20px; }
}

/* --------------------------------------------------------------------- */
/* Homepage strip for the next exhibition                                 */
/* Disappears by itself once no event is marked upcoming.                 */
/* --------------------------------------------------------------------- */
.event-strip {
  background: var(--graphite-soft);
  border-top: 3px solid var(--accent);
  color: var(--white);
  padding: 18px 0;
}
.event-strip .wrap {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.event-strip-tag {
  font-family: var(--font-head); font-weight: 700;
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--graphite); background: var(--accent);
  padding: 5px 13px; border-radius: 3px; white-space: nowrap;
}
.event-strip-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event-strip-main a {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.28rem; letter-spacing: .02em; color: var(--white);
  text-transform: uppercase; line-height: 1.2;
}
.event-strip-main a:hover { color: var(--accent); }
.event-strip-meta { font-size: .92rem; color: var(--on-dark); }
.event-strip-cta { margin-left: auto; white-space: nowrap; }

@media (max-width: 860px) {
  .event-strip { padding: 20px 0; }
  .event-strip .wrap { gap: 14px; }
  .event-strip-cta { margin-left: 0; width: 100%; text-align: center; }
  .event-strip-main a { font-size: 1.14rem; }
}

/* --------------------------------------------------------------------- */
/* Event entries with photo galleries                                     */
/* --------------------------------------------------------------------- */
details.event { display: block; padding: 0; margin-bottom: 18px; }
details.event[open] { box-shadow: var(--shadow-md); }

/* The next show gets the emphasis — it is the reason people open this page */
details.event--next {
  border-left-width: 5px;
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  margin-bottom: 30px;
}
details.event--next .event-summary { background: #fffaf1; }
details.event--next .event-summary:hover { background: #fff4e2; }
details.event--next .event-text h3 { color: var(--accent-ink); }
details.event--next .badge { background: var(--accent); border-color: var(--accent); color: var(--graphite); }

.event-summary {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  gap: 26px; align-items: center;
  padding: 24px 26px;
  cursor: pointer;
  list-style: none;
  transition: background var(--t);
}
.event-summary::-webkit-details-marker { display: none; }
.event-summary:hover { background: var(--mist); }
.event-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.event-summary .when { display: block; }
.event-text { display: block; }
.event-text h3 { margin-bottom: .3em; transition: color var(--t); }
.event-summary:hover .event-text h3 { color: var(--accent-ink); }
.event-text .meta { display: block; color: var(--steel); font-size: .94rem; }
.event-side { display: flex; align-items: center; gap: 16px; white-space: nowrap; }

.event-toggle {
  font-family: var(--font-head); font-weight: 700;
  font-size: .86rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink);
}
.event-toggle::after { content: " \25BC"; font-size: .6em; vertical-align: middle; margin-left: 5px; }
.event-toggle-close { display: none; }
details.event[open] .event-toggle-open { display: none; }
details.event[open] .event-toggle-close { display: inline; }
details.event[open] .event-toggle::after { content: " \25B2"; }

.event-panel { padding: 4px 26px 26px; border-top: 1px solid var(--line); }

/* Scrollable photo strip */
.gallery { position: relative; margin-top: 22px; }
.gallery-track {
  display: flex; gap: 14px;
  list-style: none; margin: 0; padding: 0 0 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--line);
}
.gallery-track:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.gallery-track::-webkit-scrollbar { height: 8px; }
.gallery-track::-webkit-scrollbar-track { background: var(--line); border-radius: 4px; }
.gallery-track::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
.gallery-track > li { flex: 0 0 clamp(230px, 40%, 360px); scroll-snap-align: start; }

.shot {
  display: block; width: 100%; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--mist); cursor: zoom-in; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.shot img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }

.gallery-arrow {
  position: absolute; top: calc(50% - 6px); transform: translateY(-50%);
  z-index: 3; width: 42px; height: 42px;
  display: grid; place-items: center;
  background: rgba(16, 16, 16, .72); color: var(--white);
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  cursor: pointer; transition: background var(--t), color var(--t), opacity var(--t);
}
.gallery-arrow:hover { background: var(--accent); color: var(--graphite); border-color: var(--accent); }
.gallery-arrow[disabled] { opacity: .25; cursor: default; }
.gallery-arrow--prev { left: -6px; }
.gallery-arrow--next { right: -6px; }
.gallery-note { margin: 12px 0 0; font-size: .88rem; color: var(--steel); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 24px;
  background: rgba(8, 8, 8, .985);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
  margin: 0; max-width: min(1200px, 92vw); max-height: 88vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lightbox-figure img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.lightbox-figure figcaption {
  color: #d8dce1; font-size: .92rem; text-align: center; max-width: 60ch;
}
.lightbox-close, .lightbox-nav {
  background: rgba(255, 255, 255, .1); color: var(--white);
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
  transition: background var(--t), color var(--t);
}
.lightbox-close:hover, .lightbox-nav:hover { background: var(--accent); color: var(--graphite); border-color: var(--accent); }
.lightbox-nav { width: 52px; height: 52px; font-size: 1.2rem; flex: 0 0 auto; }
.lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 46px; height: 46px; font-size: 1.7rem; line-height: 1;
}

@media (max-width: 860px) {
  .event-summary { grid-template-columns: 1fr; gap: 16px; padding: 20px 20px; }
  .event-summary .when { width: 122px; }
  .event-side { justify-content: space-between; }
  .event-panel { padding: 4px 20px 22px; }
  .gallery-arrow { display: none; }   /* swipe is the control on touch */
  .gallery-track > li { flex: 0 0 78%; }
  .lightbox { padding: 12px; gap: 4px; }
  .lightbox-nav { width: 42px; height: 42px; }
  .lightbox-figure img { max-height: 66vh; }
}

/* Honeypot — off-screen for people, present in the DOM for bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Cloudflare Turnstile challenge on the enquiry form */
.turnstile { margin: 4px 0 22px; }
.turnstile iframe { max-width: 100%; }

/* Result banner after the form is submitted */
.form-alert {
  border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 26px;
  font-size: .97rem; line-height: 1.6;
}
.form-alert--ok  { background: #f0f8f1; border: 1px solid #bfe0c4; border-left: 4px solid #2e7d38; }
.form-alert--bad { background: #fdf3f2; border: 1px solid #f0c7c2; border-left: 4px solid #b3261e; }
.form-alert strong { color: var(--graphite); }

/* WhatsApp button */
.btn--wa {
  background: #25D366; border-color: #25D366; color: #08331a;
  display: inline-flex; align-items: center; gap: 10px;
}
.btn--wa:hover { background: #1eb658; border-color: #1eb658; color: #08331a; }
.btn--sm { padding: 10px 18px; font-size: .9rem; }
.wa-icon {
  width: 19px; height: 19px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--wa-mask) center/contain no-repeat;
  mask: var(--wa-mask) center/contain no-repeat;
}
.wa-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

@media (max-width: 620px) {
  .wa-actions .btn { width: 100%; justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------- */
/* Cookie awareness banner and the consent-gated map                      */
/* --------------------------------------------------------------------- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--graphite-deep);
  border-top: 3px solid var(--accent);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
  color: var(--on-dark);
}
.consent[hidden] { display: none; }
.consent-inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 22px;
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.consent-copy { flex: 1 1 460px; min-width: 0; }
.consent-copy h2 {
  color: var(--white); font-size: 1.2rem; margin-bottom: .35em;
  letter-spacing: .06em;
}
.consent-copy p { margin: 0; font-size: .93rem; line-height: 1.65; }
.consent-copy strong { color: var(--white); }
.consent-copy a { color: var(--accent); text-decoration: underline; }
.consent-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.consent-actions .btn { padding: 12px 24px; font-size: .92rem; }

/* Decline must be no harder to reach than Allow */
.consent-actions .btn--ghost { border-color: rgba(255, 255, 255, .6); }

/* The map, held back until it is wanted */
.map-gate { min-height: 420px; display: flex; }
.map-placeholder {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 10px; padding: 34px 30px; text-align: center;
  background: var(--mist);
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.map-placeholder-title {
  font-family: var(--font-head); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--graphite); margin: 0;
}
.map-placeholder p { margin: 0; color: var(--steel); font-size: .95rem; max-width: 46ch;
  margin-left: auto; margin-right: auto; }
.map-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.map-gate iframe { flex: 1; }

/* A button that reads as a link, for "Cookie settings" in the footer */
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--on-dark); font: inherit; text-decoration: underline;
}
.linkish:hover { color: var(--accent); }

@media (max-width: 860px) {
  .consent-inner { padding: 18px; gap: 16px; }
  .consent-actions { margin-left: 0; width: 100%; }
  .consent-actions .btn { flex: 1; text-align: center; }
  .map-gate { min-height: 320px; }
}

/* Blog */
.post-meta { font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: .5em; }
a.card-media { display: block; }
.card-body h3 a { color: var(--graphite); }
.card-body h3 a:hover { color: var(--accent-ink); }

/* Pagination */
.pager { display: flex; align-items: center; gap: 18px; margin-top: 46px; flex-wrap: wrap; }
.pager-count { color: var(--steel); font-size: .92rem; }

/* Single article — styles the HTML that comes out of WordPress */
.article-wrap { max-width: 800px; margin: 0 auto; }
.article { font-size: 1.06rem; }
.article > *:first-child { margin-top: 0; }
.article h2 { font-size: 1.9rem; margin-top: 1.7em; }
.article h3 { font-size: 1.4rem; margin-top: 1.6em; }
.article h4 { margin-top: 1.5em; }
.article p { margin-bottom: 1.3em; }
.article img { border-radius: var(--radius); margin: 1.8em 0; box-shadow: var(--shadow-sm); }
.article figure { margin: 1.8em 0; }
.article figcaption { font-size: .89rem; color: var(--steel); margin-top: .7em; text-align: center; }
.article ul, .article ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.article li { margin-bottom: .55em; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 26px;
  border-left: 3px solid var(--accent); color: var(--steel); font-style: italic;
}
.article a { text-decoration: underline; }
.article table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: .96rem; }
.article th, .article td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; }
/* An unbreakable token in a cell — a cookie name, an ID, a long URL — sets the
   table's minimum width and pushes the whole page sideways on a phone. Let long
   words break rather than letting one cell decide the layout. Deliberately NOT
   done by switching the table to display:block with overflow, which would scroll
   nicely but stop some screen readers announcing it as a table at all. */
.article th, .article td, .article td code { overflow-wrap: anywhere; }
.article th { background: var(--mist); font-family: var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
.article code {
  background: var(--mist); border: 1px solid var(--line); border-radius: 3px;
  padding: 2px 6px; font-size: .92em;
}
.article pre { background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; overflow-x: auto; }
.article pre code { background: none; border: 0; padding: 0; }
.article-foot {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--line);
}

/* 404 */
.big404 {
  font-family: var(--font-head); font-size: clamp(5rem, 18vw, 10rem);
  line-height: .9; color: var(--accent); margin: 0 0 .1em;
}

/* Contact */
.info-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; height: 100%; border-top: 3px solid var(--accent);
}
.info-card h4 { margin-bottom: .5em; }
.info-card p { margin: 0; color: var(--steel); font-size: .97rem; }
.info-card .line { display: block; margin-bottom: 4px; }
.info-card .line small { color: var(--steel); font-size: .86rem; }

form .field { margin-bottom: 18px; }
form label {
  display: block; font-family: var(--font-head); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; font-size: .88rem;
  color: var(--graphite); margin-bottom: 7px;
}
form input, form select, form textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--white); transition: border-color var(--t), box-shadow var(--t);
}
form input:focus, form select:focus, form textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,162,0,.28); outline: none;
}
form textarea { min-height: 148px; resize: vertical; }
.req { color: var(--accent-ink); }
.form-note { font-size: .86rem; color: var(--steel); }

/* CV upload on the careers form. The browser draws the button itself and
   will not be fully styled, so the job here is to make the surrounding box
   match the other fields and keep the control from overflowing on a phone. */
form input[type="file"] {
  padding: 10px 12px; background: var(--mist); cursor: pointer;
  font-size: .94rem; max-width: 100%;
}
form input[type="file"]::file-selector-button {
  font-family: var(--font-head); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: .82rem;
  padding: 9px 16px; margin-right: 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: var(--graphite);
  transition: background var(--t), border-color var(--t);
}
form input[type="file"]::file-selector-button:hover {
  background: var(--accent); border-color: var(--accent);
}
.field-hint { font-size: .84rem; color: var(--steel); margin: 8px 0 0; line-height: 1.55; }
.field-error {
  font-size: .88rem; margin: 8px 0 0; line-height: 1.55;
  color: #8A1C1C; background: #FDECEC; border-left: 3px solid #C0392B;
  padding: 10px 14px; border-radius: var(--radius);
}
form input[aria-invalid="true"] { border-color: #C0392B; }
.map { border: 0; width: 100%; height: 420px; display: block; filter: grayscale(.25); }

/* CTA band */
.cta-band { background: linear-gradient(115deg, var(--graphite-deep), var(--graphite-soft)); color: var(--white); padding: 62px 0; }
.cta-band .wrap { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.cta-band h2 { color: var(--white); margin: 0 0 .2em; }
.cta-band p { color: var(--on-dark); margin: 0; }
.cta-band .btn { margin-left: auto; }

/* --------------------------------------------------------------------- */
/* Footer                                                                 */
/* --------------------------------------------------------------------- */
.site-footer { background: var(--graphite-deep); color: var(--on-dark); padding: 68px 0 0; font-size: .95rem; }
.site-footer h4 {
  color: var(--white); font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 1.1em; position: relative; padding-bottom: 12px;
}
.site-footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px; background: var(--accent); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 52px; }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--accent); }
.foot-list { list-style: none; }
.foot-list li { margin-bottom: 9px; }
/* width:auto is not optional here. The <img> carries width="520" height="489"
   attributes (they reserve space and stop the page jumping as it loads), and
   without width:auto that 520 wins while the height is pinned to 64px — which
   stretches the logo to roughly five times its proper width. Any rule that
   sets one dimension on this image must set the other to auto. */
.foot-brand img {
  height: 86px; width: auto; margin-bottom: 18px;
  background: var(--white); padding: 11px; border-radius: var(--radius);
}
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 20px 0; display: flex; gap: 16px; flex-wrap: wrap;
  font-size: .88rem; color: var(--on-dark-soft);
}
.foot-bottom .spacer { margin-left: auto; }

/* --------------------------------------------------------------------- */
/* Responsive                                                             */
/* --------------------------------------------------------------------- */

/* Between 1100px and 1250px the header has to carry the brand block, seven
   menu items and the CTA, and they no longer all fit. The CTA is the one to
   drop: it duplicates "Contact Us", which is still in the menu two inches
   away, so nothing becomes unreachable. Losing a menu item instead would. */
@media (max-width: 1240px) {
  .nav-cta { display: none; }
}

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .clients, .clients--3, .clients--4, .clients--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  .burger { display: block; }
  .nav-cta { display: none; }
  .nav-bar { min-height: 70px; flex-wrap: wrap; }
  .menu {
    display: none; flex-direction: column; align-items: stretch;
    width: 100%; padding: 8px 0 16px; border-top: 1px solid var(--line);
  }
  .menu.open { display: flex; }
  .menu > li > a { padding: 13px 4px; border-bottom: 1px solid var(--line); }
  .menu > li.current > a { border-bottom-color: var(--line); }
  .submenu, .submenu--deep {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-top: 0; padding: 0 0 8px 16px; display: none;
    min-width: 0; max-height: none; overflow: visible;
  }
  .submenu.open, .submenu--deep.open { display: block; }
  .submenu a { border-left: 2px solid var(--line); padding: 9px 16px; }
  .submenu--deep a { font-size: .9rem; padding: 8px 16px; color: var(--steel); }
  .submenu--deep a:hover { color: var(--accent-ink); }

  /* ---- The open/close button --------------------------------------------
     The link text navigates. This button, sitting to its right, is the only
     thing that opens and closes a submenu — so a submenu that has been
     opened can always be closed again without leaving the page.
     The row is laid out as a grid so the button never overlaps a long label.
     ---------------------------------------------------------------------- */
  .menu li.has-sub, .menu li.has-sub2 {
    display: grid; grid-template-columns: 1fr auto; align-items: stretch;
  }
  .menu li.has-sub > .submenu, .menu li.has-sub2 > .submenu--deep {
    grid-column: 1 / -1;
  }
  /* The in-link carets are decoration for the desktop menu; the button
     carries the meaning here, so drop them to avoid two arrows in a row. */
  .menu li.has-sub > a .caret, .menu li.has-sub2 > a .caret--side { display: none; }
  .submenu > li.has-sub2 > a { display: block; }

  .sub-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 46px; min-height: 44px;          /* a comfortable thumb target */
    background: none; border: 0; cursor: pointer; padding: 0;
    border-bottom: 1px solid var(--line);
    color: var(--steel); -webkit-tap-highlight-color: transparent;
  }
  .submenu .sub-toggle { border-bottom: 0; width: 42px; min-height: 40px; }
  .sub-toggle:hover, .sub-toggle:focus-visible { color: var(--accent-ink); }
  .sub-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  /* A chevron drawn in CSS: points down when closed, flips up when open. */
  .sub-toggle-icon {
    width: 9px; height: 9px; margin-top: -3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform var(--t);
  }
  .sub-toggle[aria-expanded="true"] .sub-toggle-icon {
    transform: rotate(-135deg); margin-top: 3px;
  }
  .sub-toggle[aria-expanded="true"] { color: var(--accent-ink); }

  /* The cookie banner is fixed to the bottom and would otherwise cover half
     an open menu on a phone. Step aside while the menu is open; it comes
     straight back when the menu closes. */
  body.nav-open .consent { display: none; }
  .split, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .split--rev .split-media { order: 0; }
  .ticks--2 { columns: 1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .hero { min-height: 500px; }
  .section { padding: 62px 0; }
  .cta-band .btn { margin-left: 0; }
}

@media (max-width: 620px) {
  .grid-4 { grid-template-columns: 1fr; }
  .clients, .clients--3, .clients--4, .clients--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .event { grid-template-columns: 1fr; }
  .event .when { width: 124px; }
  .topbar .wrap { gap: 12px; font-size: .8rem; }
  .topbar .wrap > span:last-child { display: none; }
  .brand-text b { font-size: 1.16rem; }
  .brand-text span { font-size: .55rem; letter-spacing: .04em; }
  .brand img { height: 40px; }
  .brand { gap: 9px; }
}

/* The tagline used to be hidden below 400px, back when it read "Ferro Alloys
   & Metal Powders" — a descriptor the logo already implies, so dropping it
   cost nothing. It is now the company slogan, which is worth keeping on a
   phone. It fits: the tagline is narrower than "AIM ALLOYS LLP" above it, so
   showing it does not widen the brand block at all. */
@media (max-width: 360px) {
  .brand-text b { font-size: 1.02rem; }
  .brand-text span { font-size: .49rem; letter-spacing: .03em; }
  .brand img { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .topbar, .site-footer, .cta-band, .burger { display: none; }
}