@font-face{font-family:'ABCNormal';src:url('/fonts/ABCNormal-Heavy.woff2') format('woff2'),url('/fonts/ABCNormal-Heavy.woff') format('woff');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'ABCNormal';src:url('/fonts/ABCNormal-Bold.woff2') format('woff2'),url('/fonts/ABCNormal-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'ABCNormal';src:url('/fonts/ABCNormal-Medium.woff2') format('woff2'),url('/fonts/ABCNormal-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'ABCNormal';src:url('/fonts/ABCNormal-Book.woff2') format('woff2'),url('/fonts/ABCNormal-Book.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'ABCNormal';src:url('/fonts/ABCNormal-Regular.woff2') format('woff2'),url('/fonts/ABCNormal-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'ABCNormal';src:url('/fonts/ABCNormal-HeavyOblique.woff2') format('woff2'),url('/fonts/ABCNormal-HeavyOblique.woff') format('woff');font-weight:800;font-style:italic;font-display:swap;}
@font-face{font-family:'ABCNormal';src:url('/fonts/ABCNormal-BoldOblique.woff2') format('woff2'),url('/fonts/ABCNormal-BoldOblique.woff') format('woff');font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:'ABCNormal';src:url('/fonts/ABCNormal-MediumOblique.woff2') format('woff2'),url('/fonts/ABCNormal-MediumOblique.woff') format('woff');font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:'ABCNormal';src:url('/fonts/ABCNormal-BookOblique.woff2') format('woff2'),url('/fonts/ABCNormal-BookOblique.woff') format('woff');font-weight:400;font-style:italic;font-display:swap;}

/* The page furniture — header, nav, footer, shared type and buttons
   ---------------------------------------------------------------------------
   All nine page stylesheets carried their own copy of this, so changing the
   header meant editing nine files and hoping none had drifted — several had.
   It lives here once now, taken from history.css, which is already the copy a
   staff-made page borrows.

   A page stylesheet still loads after this one, so a page that genuinely needs
   something different says so in its own file, at the bottom, under a heading
   that says why. The exhibitor page's paper background is the main one. */
:root{ color-scheme: light; --concrete:#F1EDE4; --concrete-deep:#E6E0D2; --ink:#13201B; --ink-soft:#39443D; --moss:#3F6657; --green:#2F7A4D; --green-deep:#1E5536; --green-pale:#8FCDA8; --line:#C9C2B0; --paper:#FAF8F2;
  /* The same two as "r,g,b", because rgba() cannot take a hex from a custom
     property — see the tinted numbers down the side of the venue and downloads
     lists, which were the doors green on every website until now. */
  --green-rgb:47,122,77; --green-pale-rgb:143,205,168; }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--concrete); color:var(--ink); margin:0; padding:0; font-family:'ABCNormal',sans-serif; font-size:16px; line-height:1.6; }
h1,h2,h3{ font-family:'ABCNormal',sans-serif; letter-spacing:-0.01em; color:var(--ink); }
a{ color:inherit; text-decoration:none; }

/* The raised suffix in "22nd edition"
   ---------------------------------------------------------------------------
   Raised by Event details › “The nd in 22nd”. Not scoped to one place: the
   office puts {edition} wherever it reads well — the banner line, a page title,
   the footer tagline, a section it made itself — and each of those would
   otherwise need remembering here.

   A browser's own <sup> does raise it, but it also makes the line box taller,
   so the one line holding the ordinal sits apart from the lines around it —
   plain to see in the footer paragraph. Lifting it with position instead leaves
   the line height alone, and 0.72em is a gentler shrink than the browser's own
   at the small sizes this type runs at. */
sup{
  font-size:0.72em;
  vertical-align:baseline;
  position:relative;
  top:-0.42em;
  line-height:0;
}

/* One tab per show year on the exhibitor list
   ---------------------------------------------------------------------------
   Only drawn when there is more than one year to choose between, so a website
   with a single list never shows a row of one. Real links, not buttons: the
   year is in the address, so a visitor can send somebody straight to 2025. */
.year-tabs{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; padding:22px 0 0; }
.year-tab{
  padding:7px 16px; font-size:13px; font-weight:500; letter-spacing:.02em;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
  transition:background .15s, color .15s, border-color .15s;
}
.year-tab:hover{ border-color:var(--green); color:var(--green-deep); }
.year-tab.is-on{
  background:var(--green); border-color:var(--green); color:var(--paper);
  font-weight:600; cursor:default;
}
.year-tab:focus-visible{ outline:2px solid var(--green-deep); outline-offset:2px; }
.wrap{ max-width:1920px; margin:0 auto; padding:0 48px; }
@media (max-width:768px){
  .wrap{ padding:0 22px; }
}
.eyebrow{ font-family:'ABCNormal',sans-serif; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--green-deep); display:flex; align-items:center; gap:10px; }
header{ position:sticky; top:0; z-index:50; background:rgba(241,237,228,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.header-wrap{ max-width:var(--head-w, 1440px); margin:0 auto; padding:0 var(--head-side, 48px); }
@media (max-width:768px){
  .header-wrap{ padding:0 22px; }
}
.nav-row{ display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:14px var(--head-gap, 40px);
  /* Top and bottom only. .header-wrap is the same element and owns the left and
     right padding; a padding shorthand here would quietly wipe it out. */
  padding-block:var(--head-pad, 12px); }
.logo-block{ display:flex; flex-direction:row; align-items:center; gap:16px; }
.logo{ font-family:'ABCNormal',sans-serif; font-weight:700; font-size:19px; display:flex; align-items:baseline; gap:8px; }
.logo span{ font-family:'ABCNormal',sans-serif; font-size:11px; font-weight:500; color:var(--green); border:1px solid var(--green); padding:2px 6px; letter-spacing:0.06em; }
.logo-mark{ height:62px; width:auto; display:block; object-fit:contain; }
.logo-meta{ display:flex; flex-direction:column; gap:2px; border-left:2px solid var(--green); padding-left:14px; }
.logo-meta .lm-date{ font-family:'ABCNormal',sans-serif; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; white-space:nowrap; }
.logo-meta .lm-venue{ font-family:'ABCNormal',sans-serif; font-size:11px; color:var(--green-deep); letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap; }
nav > ul{ list-style:none; display:flex; gap:20px; }
nav a{ font-size:14px; font-weight:500; color:var(--ink-soft); position:relative; padding-bottom:4px; }
nav a:hover{ color:var(--ink); }
nav a:hover::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--green); }
.nav-cta{ font-family:'ABCNormal',sans-serif; font-size:12px; letter-spacing:0.08em; background:var(--ink); color:var(--paper); padding:11px 18px; border:1px solid var(--ink); text-transform:uppercase; }
.nav-cta:hover{ background:var(--green); border-color:var(--green); }
.nav-cal{ font-family:'ABCNormal',sans-serif; font-size:12px; letter-spacing:0.08em; background:transparent; color:var(--ink); padding:11px 18px; border:1px solid var(--ink); text-transform:uppercase; }
.nav-cal:hover{ border-color:var(--green); color:var(--green-deep); }
.nav-actions{ display:flex; gap:var(--head-btn-gap, 10px); align-items:center; flex-wrap:wrap; margin-left:auto; }
@media (max-width:560px){
  .nav-cal,.nav-cta{ padding:9px 14px; font-size:11px; }
}
@media (max-width:980px){
  nav > ul{ display:none; }
}
.btn{ font-size:14px; font-weight:500; padding:14px 24px; border:1px solid var(--ink); display:inline-flex; align-items:center; gap:8px; }
.btn-fill{ background:var(--ink); color:var(--paper); }
.btn-fill:hover{ background:var(--green); border-color:var(--green); }
footer{ background:var(--ink); color:var(--paper); padding:64px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(250,248,242,0.16); }
@media (max-width:760px){
  .foot-grid{ grid-template-columns:1fr 1fr; row-gap:32px; }
}
.foot-grid h4{ font-family:'ABCNormal',sans-serif; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--green-pale); margin-bottom:16px; }
.foot-grid ul{ list-style:none; }
.foot-grid li{ margin-bottom:10px; font-size:14px; color:#C9C5BB; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; color:#9A968C; flex-wrap:wrap; gap:14px; }
.foot-bottom-right{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.foot-social{ display:flex; gap:8px; flex-wrap:wrap; }
.foot-social a{ font-size:12px; font-weight:500; color:#C9C5BB; border:1px solid rgba(250,248,242,0.22); padding:6px 13px; }
.hamburger{ display:none; flex-direction:column; justify-content:space-between; width:26px; height:18px; cursor:pointer; margin-left:auto; z-index:201; background:none; border:none; padding:0; }
.hamburger span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform 0.3s, opacity 0.3s; }
.hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
@media (max-width:980px){
  .hamburger{ display:flex; }
  .hamburger{ position:absolute;top:50%;right:16px;transform:translateY(-50%); display:flex!important;flex-direction:column;justify-content:space-between; width:28px;height:20px; background:none;border:none;padding:0;cursor:pointer;z-index:100; }
}
.mobile-nav{ display:none; position:fixed; inset:0; z-index:9999; background:var(--concrete); flex-direction:column; padding:0 32px 48px; overflow-y:auto; }
.mobile-nav.open{ display:flex !important; }
.mob-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 0 24px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.mob-logo{ height:44px; width:auto; display:block; }
.mob-identity{ display:flex; flex-direction:column; gap:2px; border-left:2px solid var(--green); padding-left:12px; }
.mob-identity .mob-date{ font-family:'ABCNormal',sans-serif; font-size:13px; font-weight:600; color:var(--ink); }
.mob-identity .mob-venue{ font-family:'ABCNormal',sans-serif; font-size:10px; color:var(--green-deep); letter-spacing:0.05em; text-transform:uppercase; }
.mob-close{ background:none; border:1px solid var(--ink); padding:8px 14px; font-size:20px; line-height:1; cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.mob-close:hover{ border-color:var(--green); color:var(--green); }
.mobile-nav > ul{ list-style:none; display:flex; flex-direction:column; gap:0; }
.mobile-nav a{ display:block; font-family:'ABCNormal',sans-serif; font-size:clamp(24px,5.5vw,38px); font-weight:700; color:var(--ink); padding:15px 0; border-bottom:1px solid var(--line); letter-spacing:-0.02em; transition:color 0.15s; }
.mobile-nav a:hover,.mobile-nav a.active{ color:var(--green); }
.mobile-nav .mob-cal{ margin-top:36px; font-family:'ABCNormal',sans-serif; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:16px 24px; text-align:center; display:block; border:1px solid var(--ink); }
@media (max-width:640px){
  .nav-actions{ display:none; }
  .logo-mark{ height:40px; }
  .logo-meta .lm-date{ font-size:12px; }
  .logo-meta .lm-venue{ font-size:9px; letter-spacing:0.03em; }
  .logo-meta{ padding-left:10px; border-left-width:2px; }
  .nav-row{ padding-block:var(--head-pad, 10px); }
  .wrap{ padding:0 16px !important; }
  .wrap{ overflow-x:hidden; }
  .header-wrap{ padding:0 16px !important; }
  .foot-grid{ grid-template-columns:1fr !important; row-gap:28px !important; }
  .foot-grid{ grid-template-columns:1fr !important; row-gap:28px !important; }
  .foot-bottom{ flex-direction:column !important; gap:12px !important; align-items:flex-start !important; }
}
@media (prefers-color-scheme: dark){
  :root{ color-scheme: light; --concrete: #F1EDE4; --concrete-deep: #E8E2D8; --ink: #13201B; --ink-soft: #4A5C54; --green: #2F7A4D; --green-deep: #1E5536; --green-pale: #8FCDA8; --line: #C9C2B0; --paper: #FAF8F2; --green-rgb:47,122,77; --green-pale-rgb:143,205,168; }
  header nav > ul{ display:flex!important;gap:20px;list-style:none; }
  .hamburger{ display:none!important; }
  .nav-actions{ display:flex!important; }
  nav.mobile-nav{ display:none!important; }
}
@media (max-width:980px){
  body{ margin:0;padding:0; }
  .nav-row{ padding-block:var(--head-pad, 12px); flex-wrap:nowrap; }
  .logo-mark{ height:44px!important; }
  .logo-block{ flex:1 1 auto;min-width:0; }
  header nav{ display:none!important; }
  .nav-actions{ display:none!important; }
  .hamburger span{ display:block;width:100%;height:2px;background:var(--ink);border-radius:1px; }
  .header-wrap{ position:relative;padding-right:48px!important; }
}
@media (min-width:981px){
  header nav{ display:block!important; }
  header nav > ul{ display:flex!important;gap:20px;list-style:none; }
  .nav-row{ padding-block:var(--head-pad, 12px); flex-wrap:wrap; gap:14px var(--head-gap, 40px); }
  .hamburger{ display:none!important; }
  .nav-actions{ display:flex!important; }
  nav.mobile-nav{ display:none!important; }
}
@media (max-width:640px){
  .foot-social{ flex-wrap:wrap; gap:8px; }
  footer{ overflow-x:hidden; }
}

/* The page furniture — header, footer, type, buttons, breakpoints
   ---------------------------------------------------------------------------
   These rules used to be copied into all nine page stylesheets, so changing the
   header meant editing nine files and hoping none had drifted. They live here
   once now. A page sheet loads after this one, so a page that genuinely needs
   something different still says so in its own file — the exhibitor page keeps
   its paper background that way. */
header{ position:sticky; top:0; z-index:50; background:rgba(241,237,228,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
nav a{ font-size:14px; font-weight:500; color:var(--ink-soft); position:relative; padding-bottom:4px; }
nav a:hover{ color:var(--ink); }
.nav-cal{ font-family:'ABCNormal',sans-serif; font-size:12px; letter-spacing:0.08em; background:transparent; color:var(--ink); padding:11px 18px; border:1px solid var(--ink); text-transform:uppercase; }
.nav-cal:hover{ border-color:var(--green); color:var(--green-deep); }
.foot-grid h4{ font-family:'ABCNormal',sans-serif; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--green-pale); margin-bottom:16px; }
.foot-grid ul{ list-style:none; }
.foot-grid li{ margin-bottom:10px; font-size:14px; color:#C9C5BB; }
.hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
.mobile-nav{ display:none; position:fixed; inset:0; z-index:9999; background:var(--concrete); flex-direction:column; padding:0 32px 48px; overflow-y:auto; }
.mobile-nav.open{ display:flex !important; }
.mob-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 0 24px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.mob-logo{ height:44px; width:auto; display:block; }
.mob-identity{ display:flex; flex-direction:column; gap:2px; border-left:2px solid var(--green); padding-left:12px; }
.mob-identity .mob-date{ font-family:'ABCNormal',sans-serif; font-size:13px; font-weight:600; color:var(--ink); }
.mob-identity .mob-venue{ font-family:'ABCNormal',sans-serif; font-size:10px; color:var(--green-deep); letter-spacing:0.05em; text-transform:uppercase; }
.mob-close:hover{ border-color:var(--green); color:var(--green); }
.mobile-nav > ul{ list-style:none; display:flex; flex-direction:column; gap:0; }
.mobile-nav a{ display:block; font-family:'ABCNormal',sans-serif; font-size:clamp(24px,5.5vw,38px); font-weight:700; color:var(--ink); padding:15px 0; border-bottom:1px solid var(--line); letter-spacing:-0.02em; transition:color 0.15s; }
.mobile-nav a:hover,.mobile-nav a.active{ color:var(--green); }
.mobile-nav .mob-cal{ margin-top:36px; font-family:'ABCNormal',sans-serif; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:16px 24px; text-align:center; display:block; border:1px solid var(--ink); }
@media (prefers-color-scheme: dark){
  html, body{ background-color: #FAF8F2 !important; color: var(--ink,#13201B) !important; }
}
@media (max-width:640px){
  .page-hero .ph-content{ padding-top:48px !important; }
}
@media (max-width:480px){
  .hero-bar-cell:nth-child(2){ border-top:1px solid rgba(250,248,242,0.18); border-right:none !important; }
}

/* The page furniture — header, footer, type, buttons, breakpoints
   ---------------------------------------------------------------------------
   These rules used to be copied into all nine page stylesheets, so changing the
   header meant editing nine files and hoping none had drifted. They live here
   once now. A page sheet loads after this one, so a page that genuinely needs
   something different still says so in its own file — the exhibitor page keeps
   its paper background that way. */
.logo-block{ display:flex; flex-direction:row; align-items:center; gap:16px; }
footer{ background:var(--ink); color:var(--paper); padding:64px 0 28px; }
@media (prefers-color-scheme: dark){
  header nav > ul{ display:flex!important;gap:20px;list-style:none; }
  nav.mobile-nav{ display:none!important; }
}
@media (max-width:980px){
  .logo-block{ flex:1 1 auto;min-width:0; }
  header nav{ display:none!important; }
}
@media (min-width:981px){
  header nav{ display:block!important; }
  header nav > ul{ display:flex!important;gap:20px;list-style:none; }
  nav.mobile-nav{ display:none!important; }
}
@media (max-width:640px){
  footer{ overflow-x:hidden; }
}
@media (max-width:480px){
  .hero-bar{ grid-template-columns:1fr !important; }
  .hero-bar-cell:last-child{ display:block !important; border-top:1px solid rgba(250,248,242,0.18); }
}


/* Banner video on the inner pages. Each page's own stylesheet already sizes
   .ph-bg and its image; the video takes the same box, and .ph-still is the
   banner image standing in for it on phones and under reduced motion. */
.ph-bg video.ph-video,
.ph-bg .ph-still{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* Hidden until something asks for it. It shares the video's box, so left visible
   it would simply cover the video. */
.ph-bg .ph-still{
  background-size:cover; background-repeat:no-repeat;
  display:none;
}
@media (max-width:640px){
  .ph-bg video.ph-video--wide-only{ display:none; }
  .ph-bg .ph-still--narrow-only{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .ph-bg video.ph-video{ display:none; }
  .ph-bg .ph-still{ display:block; }
}

/* The page's title on its own
   ---------------------------------------------------------------------------
   Shown in place of the banner when that is switched off. Deliberately plain —
   it is doing the banner's one indispensable job, saying what the page is, and
   should not look like a second banner. */
.page-title{
  padding:64px 0 40px;
  border-bottom:1px solid var(--line);
  background:var(--concrete);
}
.page-title h1{
  margin:0;
  font-size:clamp(30px,5vw,54px);
  line-height:1.04;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.page-title .eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--green-deep); margin-bottom:14px;
}
.page-title .lede{
  margin:18px 0 0; max-width:62ch;
  font-size:17px; line-height:1.6; color:var(--ink-soft);
}
@media (max-width:640px){
  .page-title{ padding:40px 0 28px; }
}

/* Floating side button
   ---------------------------------------------------------------------------
   A tab pinned to one edge of the window, turned on and worded under Website
   content › Header › Floating side button. --tab-bg is set inline from the
   colour chosen there, so this file never needs editing to change it. */
.side-tab{
  position:fixed;
  z-index:60;
  background:var(--tab-bg, var(--green));
  color:var(--paper);
  font-family:'ABCNormal',sans-serif;
  font-size:13px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  text-decoration:none;
  padding:20px 12px;
  /* Reads bottom-to-top, the way a spine does, so it is legible on either edge */
  writing-mode:vertical-rl;
  transform-origin:center;
  transition:padding 0.18s ease, filter 0.18s ease;
  box-shadow:0 2px 14px rgba(var(--ink-rgb,19,32,27),0.18);
}
.side-tab:hover,
.side-tab:focus-visible{ padding-inline:18px; filter:brightness(1.08); color:var(--paper); }
.side-tab:focus-visible{ outline:2px solid var(--paper); outline-offset:-5px; }

.side-tab--right{ right:0; border-radius:6px 0 0 6px; }
/* Rotated so the words still climb upward when the tab sits on the left */
.side-tab--left{ left:0; border-radius:0 6px 6px 0; transform:rotate(180deg); }

.side-tab--upper{ top:22%; }
.side-tab--middle{ top:50%; }
.side-tab--lower{ top:74%; }

/* The rotate on the left edge replaces the centring translate, so each position
   carries its own combined transform rather than one overwriting the other. */
.side-tab--right.side-tab--middle{ transform:translateY(-50%); }
.side-tab--left.side-tab--middle{ transform:translateY(-50%) rotate(180deg); }

@media (max-width:640px){
  .side-tab{ font-size:11px; padding:14px 9px; letter-spacing:0.08em; }
  .side-tab--wide-only{ display:none; }
}
/* Dropdowns in the header menu
   ---------------------------------------------------------------------------
   Set up under Website content › Header › Menu: an item that names another in
   "Sits under" appears in a list beneath it.

   The parent is a <button>, not a link, so the list can be opened by tapping or
   by keyboard as well as by hovering. Hover alone would put a dropdown out of
   reach of a phone entirely. */
nav .has-drop{ position:relative; }

nav .drop-toggle{
  font-family:inherit; font-size:14px; font-weight:500;
  color:var(--ink-soft); background:none; border:0; padding:0 0 4px;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  position:relative;
}
nav .drop-toggle:hover,
nav .drop-toggle.active,
nav .has-drop.open .drop-toggle{ color:var(--ink); }
nav .drop-toggle:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

nav .drop-caret{
  width:6px; height:6px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform 0.16s ease;
}
nav .has-drop.open .drop-caret{ transform:translateY(1px) rotate(-135deg); }

nav .drop{
  position:absolute; top:100%; left:-14px; z-index:60;
  min-width:14rem; margin:0; padding:6px 0;
  list-style:none;
  /* The flat menu lays its items in a row; a dropdown must not inherit that. */
  display:block; gap:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 10px 30px -12px rgba(var(--ink-rgb,19,32,27),0.3);
  /* Kept in the layout so the first item is not a jump; hidden until asked for */
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
nav .has-drop:hover .drop,
nav .has-drop.open .drop{ opacity:1; visibility:visible; transform:translateY(0); }

nav .drop li{ display:block; }
nav .drop a{
  display:block; padding:9px 18px;
  font-size:14px; font-weight:500; color:var(--ink-soft);
  white-space:nowrap;
}
nav .drop a:hover,
nav .drop a:focus-visible{ background:var(--concrete); color:var(--ink); }
nav .drop a.active{ color:var(--green-deep); }
nav .drop a:hover::after{ content:none; }   /* the flat menu's underline, not wanted here */

/* On a phone the menu is a stack, so a dropdown opens in place rather than
   floating over the page. */
.mobile-nav .has-drop{ position:static; }
.mobile-nav .drop-toggle{
  display:flex; width:100%; justify-content:space-between;
  font-family:'ABCNormal',sans-serif;
  font-size:clamp(24px,5.5vw,38px); font-weight:700; letter-spacing:-0.02em;
  color:var(--ink); padding:15px 0; border-bottom:1px solid var(--line);
}
.mobile-nav .drop-caret{ width:9px; height:9px; border-width:2px; }
.mobile-nav .drop{
  position:static; opacity:1; visibility:visible; transform:none;
  flex-direction:column;
  border:0; border-radius:0; box-shadow:none; background:transparent;
  min-width:0; padding:0;
  display:none;
}
.mobile-nav .has-drop.open .drop{ display:block; }
.mobile-nav .drop a{
  padding:12px 0 12px 22px;
  font-size:17px; border-bottom:1px solid var(--line);
  white-space:normal;
}
.mobile-nav .drop a:hover{ background:transparent; }

@media (prefers-reduced-motion: reduce){
  nav .drop, nav .drop-caret{ transition:none; }
}

/* Jumping to a section further down the page
   ---------------------------------------------------------------------------
   The header is sticky, so a plain #anchor lands the section underneath it.
   This keeps its heading clear of the bar. */
section[id]{ scroll-margin-top:110px; }
@media (max-width:980px){
  section[id]{ scroll-margin-top:80px; }
}

/* ── HEADER ROW — three tracks, as the live site draws it ──────────────────
   The row was a wrapping flex line with a fixed gap between its three blocks.
   At any width where logo + menu + button + two gaps came to more than the
   row, the button dropped to a second line and the header doubled in height —
   which is what it was doing at 1440.

   Three tracks cannot do that. The logo and the menu are sized to what they
   hold, the last track takes whatever is left, and each block says where it
   sits in its own track. The menu is centred in the space between the other
   two rather than pushed there by a gap, so the row simply gets tighter as
   the window narrows instead of breaking.

   Below 981px the menu and the buttons are hidden and the hamburger takes
   over, so the flex row above still applies there and is left alone. */
@media (min-width:981px){
  .nav-row{
    display:grid;
    grid-template-columns:auto auto 1fr;
    align-items:center;
    gap:14px;
    /* Reads 12px 48px, from Header spacing. Left as the two measurements
       rather than a shorthand so the screen still drives them, and because
       .header-wrap is this same element and owns the left and right. */
    padding-block:var(--head-pad, 12px);
    /* Nothing to wrap once this is a grid; it is here so a browser that never
       applies the grid still keeps the row on one line. */
    flex-wrap:nowrap;
  }
  .nav-row > .logo-block{ justify-self:start; }
  /* How far the menu sits from the logo is spent out of the row's spare width
     rather than taken as a fixed column gap on both sides. Set as a gap, 232
     would be charged twice and push the buttons off a 1440 screen; here the
     row uses as much of it as the window can afford and the whole figure once
     there is room for it. The buttons keep the right edge either way. */
  .nav-row > nav{
    justify-self:start;
    margin-left:min( calc(var(--head-gap, 14px) - 14px), max(0px, (100vw - 1100px) / 2) );
  }
  /* Auto margins beat justify-self, so the one the flex row needed has to go
     or the track would be ignored. */
  .nav-row > .nav-actions{ justify-self:end; margin-left:0; }
}

/* Between the desktop menu appearing and the row being wide enough to hold
   everything, the date and venue beside the logo step aside — the same width
   the live site uses. They are the one part of the row that is repeated
   further down the page, so they are what can go.

   Under 981px the menu and the buttons are gone and the hamburger has the
   row, so there is space for them again and they come back. */
@media (max-width:1300px){
  .logo-meta{ display:none; }
}
@media (max-width:980px){
  .logo-meta{ display:flex !important; padding-left:10px !important; }
}

/* ── THE MARK ON A MENU ITEM THAT OPENS ────────────────────────────────────
   Chosen under Website content › Header › Dropdown mark, and handed to the
   stylesheet as data-caret on the header and on the phone menu — the two are
   separate elements, so both carry it.

   The rules above draw a chevron out of two borders, which stays as the
   fallback for anything that arrives without the attribute. Each choice below
   only undoes what it does not want. */

/* The live site's mark: a character, not a drawing, so it needs no box. */
[data-caret="triangle"] .drop-caret{
  width:auto; height:auto; border:0; transform:none;
  font-size:9px; line-height:1;
}
[data-caret="triangle"] .drop-caret::after{ content:"\25BE"; }
/* Nothing to turn, so the open state must not turn it. */
[data-caret="triangle"] .has-drop.open .drop-caret{ transform:none; }
[data-caret="triangle"] .mobile-nav .drop-caret,
nav.mobile-nav[data-caret="triangle"] .drop-caret{ width:auto; height:auto; border-width:0; font-size:11px; }

[data-caret="none"] .drop-caret{ display:none; }

/* The narrow end of the desktop row. The menu appears at 981px but the widest
   of the three menus does not fit on one line until about 1050, so it wrapped
   and stood the row up in two. Closing the space between the items buys back
   more than enough — sixteen items on Glass Technology recover 120px — and it
   is only spent in the band where it is needed. */
@media (min-width:981px) and (max-width:1120px){
  header nav > ul{ gap:12px; }
}

/* Glass Technology sits its menu closer to the logo than the other two, and
   takes the whole figure rather than only what the row has spare. Asked for by
   name, so it is written by name — data-site is on the body for exactly this.
   The other two keep the shared rule above. */
@media (min-width:981px){
  body[data-site="glass"] .nav-row > nav{
    margin-left:calc(var(--head-gap, 14px) - 25px);
  }
}

/* A line break the office typed is a line break
   ---------------------------------------------------------------------------
   The closing band's heading is two lines on the live site — "Three days. One
   floor." and then "Every part of the envelope." — set with a <br>. Here the
   wording is a content field, so pressing Enter in it is how that break is
   asked for, and until now it collapsed to a space: the heading then broke
   wherever 560px happened to run out, which at 1440 was after "Every".

   pre-line keeps the breaks that were typed and still wraps a line that is too
   long for the column, so a heading written as one line is unaffected. */
.cta-inner h2{ white-space:pre-line; }

/* ...and the same for every other heading on the site
   ---------------------------------------------------------------------------
   The closing band was not a special case. Every heading here is typed into a
   content form, and the writer is the one who knows where the line should
   turn: the live glass site sets "Where India's glass processing industry" /
   "does business." with a <br>, and no column width can be trusted to put that
   break in the right place on its own.

   So the same treatment, applied once. Pressing Enter in any Heading or Title
   box is now how a break is asked for, and those boxes are textareas rather
   than single-line inputs so there is somewhere to press it.

   Nothing moves where no one has typed a break: pre-line collapses ordinary
   runs of space exactly as normal does, and only newlines survive. It costs
   nothing on a heading that stays one line.

   One thing this asks of the templates: a heading must be written on a single
   line, <h2>{{ content(...) }}</h2>, as all of them are today. Open the tag and
   close it further down and the markup's own newline becomes a break on the
   page. */
h1, h2, h3, h4{ white-space:pre-line; }