section{padding:80px 0;}
  .section-head{margin-bottom:40px; max-width:680px;}
  .section-head h2{font-size:clamp(26px,3vw,36px); margin-top:12px;}
  .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:72px; }
  @media (max-width:760px){ .stats-grid{grid-template-columns:repeat(2,1fr);} }
  .stat-cell{ border-right:1px solid var(--line); padding:32px 26px; }
  .stat-cell .figure{ font-family:'ABCNormal',sans-serif; font-size:42px; font-weight:700; color:var(--moss); line-height:1; }
  .stat-cell .label{ margin-top:8px; font-size:13px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; }
  .timeline{ position:relative; padding-left:32px; border-left:1px solid var(--line); }
  .tl-item{ position:relative; padding-bottom:44px; }
  .tl-item:last-child{padding-bottom:0;}
  .tl-item::before{
    content:""; position:absolute; left:-37px; top:4px; width:11px; height:11px;
    border-radius:50%; background:var(--green); border:2px solid var(--paper); box-shadow:0 0 0 1px var(--line);
  }
  .tl-item .year{font-family:'ABCNormal',sans-serif; font-size:13px; color:var(--green-deep); margin-bottom:8px;}
  .tl-item h3{font-size:20px; margin-bottom:8px;}
  .tl-item p{color:var(--ink-soft); font-size:15px; max-width:620px;}
  /* ── WHO'S BEHIND IT ─────────────────────────────────────────────────
     Four arrangements, chosen under History → About the organiser. The wording
     is one partial; only the container changes.

     BAND — full width under the story. Nothing to align, because nothing sits
     beside it. This is what the page has always done. */
  .org-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; }
  @media (max-width:860px){ .org-grid{grid-template-columns:1fr; gap:30px;} }
  .org-grid p{color:var(--ink-soft); margin-bottom:16px; font-size:15.5px; max-width:640px;}
  .org-bg{background:var(--ink); color:var(--paper);}
  .org-bg .eyebrow{color:var(--green-pale);}
  .org-bg h2{color:var(--paper);}
  .org-bg p{color:#D8D5C9;}
  .org-bg h2{margin-top:14px; font-size:clamp(26px,3vw,34px);}
  .org-bg .org-logo{height:180px; width:auto; margin-top:20px; opacity:0.9; object-fit:contain; object-position:left center; display:block;}
  .org-link{display:block; margin-top:12px; font-size:15px; text-decoration:underline; text-underline-offset:3px;}
  .org-bg .org-link{color:var(--green-pale);}

  /* ── The three that sit beside the story ─────────────────────────────── */
  .history-split{ display:grid; grid-template-columns:1.55fr 1fr; gap:56px; align-items:start; }
  /* Below this the column would be too narrow to read a paragraph in, so the
     block goes back under the story whichever arrangement is chosen. */
  @media (max-width:1024px){ .history-split{ grid-template-columns:1fr; gap:32px; } }
  .history-split .hs-left{ min-width:0; }
  /* The column. It is the grid item, so it is the thing the three arrangements
     move about; the card inside it is only ever painted. Keeping the two apart
     is what stops "where it sits" and "what it looks like" fighting. */
  .history-split .hs-right{ min-width:0; }

  .org-card{
    background:var(--green); color:var(--paper); padding:40px;
    display:flex; flex-direction:column;
  }
  .org-card .eyebrow{ color:var(--paper); opacity:0.85; }
  /* One size, not a clamp. The block sits in a column of its own rather than
     across the page, so its width barely moves with the window and the
     scaling had nothing to scale against — it just left the heading smaller
     than it was asked to be on everything under a very wide screen. */
  .org-card h2{ color:var(--paper); margin-top:14px; font-size:34px; }
  .org-card p{ color:var(--paper); margin-bottom:16px; font-size:15px; max-width:none; }
  .org-card .org-link{ color:var(--paper); }
  .org-card .org-logo{
    height:130px; width:auto; margin-top:24px; opacity:0.9;
    object-fit:contain; object-position:left center; display:block;
  }

  /* CARD — what the live site draws, to the pixel. It ends where its own words
     end, which is the arrangement that leaves the foot of the column empty when
     the story is long; that is the live site's behaviour and not a fault to be
     corrected here. The other arrangements exist for anyone who wants it
     answered. */
  .history-split--card .hs-right{ align-self:start; }
  /* The live site sets the mark at 140 with 8 above it. The shared rule above
     uses 130/24, which suits the arrangements that have more height to fill —
     so the live-site numbers are put back only on this one. */
  .history-split--card .org-card .org-logo{ height:140px; margin:8px 0 0; }
  /* Glass Technology's own site sets this one smaller and gives it more room
     under the heading. Asked for by name; the other two keep the numbers
     above. */
  body[data-site="glass"] .history-split--card .org-card .org-logo{
    height:104px; margin:26px 0 18px;
  }

  /* OUTLINED PANEL — the one that is not a green card at all.
     The three above announce the organiser; this one credits it. No fill, a
     hairline round it, the words in ink on the page's own paper, and the mark
     brought to the front and set large — so the block reads mark-first, as a
     colophon does, rather than heading-first like a promotion. It also stays in
     view as the story scrolls, which is what stops a short block leaving a hole
     at the foot of a long column. */
  .history-split--panel .hs-right{ position:sticky; top:96px; align-self:start; }
  .history-split--panel .org-card{
    background:transparent; color:var(--ink);
    border:1px solid var(--line);
    padding:32px;
  }
  /* Mark first — above the label, not merely above the words. The template now
     sets it under the heading, so this pulls it the rest of the way with order
     rather than asking for a second copy of the block. */
  .history-split--panel .org-card .org-logo{
    order:-1;
    height:104px; margin:0 0 24px; padding-bottom:24px;
    border-bottom:1px solid var(--line);
    /* The supplied mark is white, drawn for the dark card. Inverting it is what
       lets the same file sit on paper without a second upload. */
    filter:invert(1); opacity:0.82;
  }
  .history-split--panel .org-card .eyebrow{ color:var(--green-deep); opacity:1; }
  .history-split--panel .org-card h2{ color:var(--ink); margin-top:10px; }
  .history-split--panel .org-card p{ color:var(--ink-soft); }
  .history-split--panel .org-card .org-link{ color:var(--green-deep); }

  /* Sticky is pointless where the panel is nearly as tall as the window, and on
     a short screen it would cover the story rather than accompany it.
     Deliberately not guarded on prefers-reduced-motion: a sticky column is a
     layout, not an animation — it holds still against the viewport rather than
     moving in it, and switching it off would take the behaviour away from the
     readers most likely to want it. */
  @media (max-height:720px){
    .history-split--panel .hs-right{ position:static; }
  }
  /* Stacked, the panel is a row of its own, so there is nothing for it to stick
     alongside — it would have no travel anyway. Said outright rather than left
     to work out that way. */
  @media (max-width:1024px){
    .history-split--panel .hs-right{ position:static; }
  }
  .cta-band{ background:var(--green); color:var(--paper); padding:64px 0; }
  .cta-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
  .cta-inner h2{color:var(--paper); font-size:clamp(24px,3.2vw,34px); max-width:540px; line-height:1.1;}
  .cta-inner .btn{border-color:var(--paper); background:var(--ink); border-color:var(--ink);}
  .foot-grid a:hover{color:var(--paper);}
  .foot-social a:hover{ color:var(--paper); border-color:var(--green-pale); }
  /* HAMBURGER */
  /* MOBILE NAV OVERLAY */
  /* ═══ MOBILE COMPREHENSIVE ═══ */
  /* Hide actions buttons on very small screens, keep just hamburger */
  /* Logo area tightens on mobile */
  /* Tighter padding on small screens */
  /* Hero */
  @media (max-width:640px){
    .hero{ padding:24px 0 0; }
    .hero-grid{ grid-template-columns:1fr !important; }
    .hero-main{ padding:32px 16px !important; border-right:none !important; }
    .hero h1{ font-size:clamp(28px,8vw,42px) !important; margin:14px 0 18px !important; }
    .hero p.lede{ font-size:15px !important; max-width:100% !important; }
    .hero-actions{ gap:10px; margin-top:24px; }
    .hero-actions .btn{ font-size:13px; padding:12px 18px; }
    .hero-side{ padding:0 !important; }
    .hero-photo-grid{ height:220px !important; }
    .hero-info-strip{ grid-template-columns:1fr 1fr; }
    .hero-info-cell{ padding:14px 16px; }
    .hero-info-cell .val{ font-size:15px; }
  }
  /* Numbers strip */
  @media (max-width:640px){
    .numbers-grid{ grid-template-columns:repeat(2,1fr) !important; }
    .num-cell .figure{ font-size:34px !important; }
    .num-cell .label{ font-size:11px; }
    .num-cell{ padding:20px 14px !important; }
  }
  /* All section headings */
  @media (max-width:640px){
    section{ padding:40px 0 !important; } .hero{ padding:0 !important; } .page-hero{ padding:0 !important; }
    .section-head{ margin-bottom:28px !important; }
    h2{ font-size:clamp(22px,6vw,32px) !important; }
      }
  /* Why/org grids → single column */
  @media (max-width:640px){
    .why-grid,.about-grid,.org-grid,.contact-grid{ grid-template-columns:1fr !important; gap:20px !important; }
    .why-grid p,.org-grid p{ max-width:100% !important; }
  }
  /* Advantages grid → 2 col then 1 col */
  @media (max-width:480px){
    .adv-list{ grid-template-columns:1fr !important; }
    .adv-item{ min-height:130px; }
  }
  /* Products grid */
  @media (max-width:520px){
    .prod-grid{ grid-template-columns:1fr !important; }
    .prod-row{ min-height:200px; }
  }
  /* Exhibitor profile grid */
  @media (max-width:560px){
    .profile-grid{ grid-template-columns:repeat(2,1fr) !important; }
  }
  /* Exhibitor list grid */
  @media (max-width:560px){
    .exh-grid{ grid-template-columns:repeat(2,1fr) !important; }
  }
  /* Sponsor/partner rows */
  @media (max-width:640px){
    .sponsor-row,.mini-row{ grid-template-columns:repeat(2,1fr) !important; }
    .mini-cell{ height:56px !important; }
  }
  /* About / co-locate */
  @media (max-width:640px){
    .colocate-cards{ grid-template-columns:1fr !important; }
    .about-photo{ min-height:220px !important; }
  }
  /* Stand / fee tables */
  @media (max-width:640px){
    .stand-grid,.fee-grid{ grid-template-columns:1fr !important; }
  }
  /* Office cards on contact page */
  @media (max-width:640px){
    .offices-grid{ grid-template-columns:1fr !important; }
  }
  /* CTA band */
  @media (max-width:640px){
    .cta-band{ padding:40px 0 !important; }
    .cta-inner{ flex-direction:column !important; gap:20px !important; align-items:flex-start !important; }
    .cta-inner h2{ font-size:clamp(20px,6vw,28px) !important; }
    .cta-inner .btn-group{ flex-direction:column !important; gap:10px !important; }
  }
  /* Timeline on history */
  @media (max-width:640px){
    .timeline-grid{ grid-template-columns:1fr !important; }
  }
  /* Downloads grid */
  @media (max-width:640px){
    .dl-grid{ grid-template-columns:1fr !important; }
  }
  /* Footer */
  @media (max-width:640px){
    .social-links{ flex-wrap:wrap; }
  }
  /* Video embed */
  @media (max-width:640px){
    .video-wrap{ margin:0 -16px; }
  }
  /* Info cells on contact */
  @media (max-width:640px){
    .form-col,.info-col{ padding:24px 16px !important; }
    .form-row{ grid-template-columns:1fr !important; }
  }
  /* Venue transport cells */
  @media (max-width:640px){
    .transport-grid{ grid-template-columns:1fr !important; }
  }
  /* Exhibitor search / filter row */
  @media (max-width:640px){
    .filter-row{ flex-direction:column !important; gap:10px !important; }
    .letter-row{ gap:4px !important; flex-wrap:wrap; }
    .letter-btn{ font-size:11px !important; padding:6px 8px !important; }
  }
  /* Map */
  @media (max-width:640px){
    .map-wrap{ margin:24px -16px 0 !important; }
  }
  /* PAGE HERO — full-bleed cinematic */
  .page-hero{
    position:relative; min-height:52vh;
    display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden; padding:0;
  }
  @media (max-width:640px){ .page-hero{min-height:60vh;} }
  .ph-bg{
    position:absolute; inset:0; background:var(--ink);
  }
  .ph-bg img{
    width:100%; height:100%; object-fit:cover; display:block;
    object-position:center 40%;
    filter:grayscale(20%);
  }
  .ph-overlay{
    position:absolute; inset:0;
    background:linear-gradient(
      to bottom,
      rgba(var(--ink-rgb,19,32,27),0.25) 0%,
      rgba(var(--ink-rgb,19,32,27),0.65) 40%,
      rgba(var(--ink-rgb,19,32,27),0.92) 75%,
      rgba(var(--ink-rgb,19,32,27),0.98) 100%
    );
  }
  .ph-content{
    position:relative; z-index:1;
    padding:0 48px 40px; max-width:1920px; margin:0 auto; width:100%;
  }
  @media (max-width:640px){ .ph-content{padding:0 16px 32px;} }
  .ph-eyebrow{
    font-family:'ABCNormal',sans-serif; font-size:11px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--green-pale); display:flex; align-items:center;
    gap:10px; margin-bottom:16px;
    text-shadow:0 1px 6px rgba(0,0,0,0.5);
  }
  .page-hero h1{
    font-size:clamp(40px,6vw,80px); font-weight:700; line-height:0.95;
    color:var(--paper); margin:0 0 20px; letter-spacing:-0.02em;
    text-shadow:0 2px 14px rgba(0,0,0,0.35);
  }
  .page-hero .lede{
    font-size:clamp(14px,1.3vw,16.5px); color:rgba(250,248,242,0.68);
    max-width:580px; line-height:1.65; margin-bottom:28px;
  }
  .page-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
  .page-hero-actions .btn-fill{
    background:var(--paper); color:var(--ink); border-color:var(--paper);
  }
  .page-hero-actions .btn-fill:hover{ background:var(--green); border-color:var(--green); color:var(--paper); }
  .page-hero-actions .btn-line{
    border-color:rgba(250,248,242,0.4); color:var(--paper);
  }
  .page-hero-actions .btn-line:hover{ border-color:var(--paper); }
  /* ── FORCE LIGHT MODE — overrides iOS/Android dark mode ── */
  @media (prefers-color-scheme: dark) {
    html, body {
      background-color: #FAF8F2 !important;
      color: var(--ink,#13201B) !important;
    }
  }
  /* ── RESPONSIVE NAV ── */
  /* ── MOBILE CONTENT FIXES ── */
  @media (max-width:640px){
    /* Hero — give breathing room from sticky header */
    .hero-content{ padding-top:56px !important; }
    .page-hero .ph-content{ padding-top:48px !important; }
    /* Footer — single column on small phones */
    /* Prevent any section horizontal overflow */
    section{ overflow-x:hidden; }
  }
  @media (max-width:480px){
    /* Hero heading size reduction */
    .hero h1{ font-size:clamp(30px,10vw,48px) !important; }
    .hero-bar{ grid-template-columns:1fr !important; }
    .hero-bar-cell:nth-child(2){ border-top:1px solid rgba(250,248,242,0.18); border-right:none !important; }
    .hero-bar-cell:last-child{ display:block !important; border-top:1px solid rgba(250,248,242,0.18); }
  }
  /* Sponsor tier final sizes */
  .sponsor-tier.plat-tier .plat-logo-link img{ max-height:92px !important; max-width:280px !important; filter:none !important; opacity:1 !important; mix-blend-mode:multiply; }
  .sponsor-tier:nth-child(2) .logo-chip img{ max-height:80px !important; }
  .logo-chip img{ max-height:66px !important; }
/* This page keeps the tighter menu spacing it has always had. */
nav ul{ gap:30px; }