/*
Theme Name: Faddybike
Theme URI: https://faddybike.com/
Author: Faddybike (TSSK Co., Ltd.)
Description: Custom motorsport-industrial theme for faddybike.com. Motorcycle parts and accessories from Thailand and Japan. No page builder, no framework, self-hosted fonts.
Version: 2.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: faddybike
Tags: custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* ==========================================================================
   1. Fonts — self-hosted, latin + thai subsets only
   ========================================================================== */
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Thai";src:url("assets/fonts/noto-sans-thai-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}

/* ==========================================================================
   2. Design tokens
   --------------------------------------------------------------------------
   Measured contrast for each pairing actually used:
     warm-white on carbon ......... 17.4:1
     steel on carbon ............... 8.4:1
     text-dark on warm-white ...... 15.9:1
     white on racing-red ........... 5.7:1   (AA normal text — buttons)
     racing-red on carbon .......... 3.5:1   (large display type and rules only)
   Racing red is therefore never used for small body copy; --red-on-dark and
   --red-on-light are the text-safe variants.
   ========================================================================== */
:root{
  --color-carbon:#0B0C0E;
  --color-graphite:#17191D;
  --color-surface-dark:#202329;
  --color-racing-red:#C81E2C;
  --color-racing-red-dark:#A5151F;
  --color-warm-white:#F4F2EE;
  --color-pure-white:#FFFFFF;
  --color-steel:#A5A8AE;
  --color-text-dark:#181A1F;
  --color-border-dark:#2A2D32;
  --color-border-light:#DDD9D2;

  /* red variants that clear 4.5:1 for small text on each ground */
  --red-on-dark:#E56A63;
  --red-on-light:#AF1B26;
  --muted-on-light:#5C6068;
  --danger-on-light:#96110E;
  --danger-on-dark:#FF9184;

  --font-display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --font-body:"Inter","Noto Sans Thai","Segoe UI",system-ui,-apple-system,sans-serif;

  --wrap:1320px;
  --measure:68ch;
  --gutter:clamp(1.15rem,4vw,2.5rem);

  --s1:.25rem;  --s2:.5rem;   --s3:.75rem;  --s4:1rem;
  --s5:1.5rem;  --s6:2rem;    --s7:3rem;    --s8:4rem;
  --s9:clamp(3.5rem,7vw,6rem);
  --s10:clamp(4.5rem,9vw,7.5rem);

  --r-sm:2px; --r-md:4px; --r-lg:8px;

  --header-h:78px;

  --ease:cubic-bezier(.2,.6,.3,1);
  --dur:220ms;
}

/* ==========================================================================
   3. Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
body{
  margin:0;
  background:var(--color-carbon);
  color:var(--color-warm-white);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
a{color:var(--red-on-dark);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--red-on-dark);outline-offset:2px;border-radius:2px}
::selection{background:var(--color-racing-red);color:#fff}

h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:.005em;
  text-wrap:balance;
  margin:0 0 var(--s4);
  text-transform:uppercase;
}
h1{font-size:clamp(2.4rem,5.2vw,4.05rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:.012em}
h4{font-size:1.05rem;letter-spacing:.045em;font-weight:600}
p{margin:0 0 var(--s5);max-width:var(--measure)}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--color-border-dark);margin:var(--s7) 0}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--s10)}
.section--tight{padding-block:var(--s9)}
.stack>*+*{margin-top:var(--s5)}

/* Grounds. The page alternates dark and light bands for rhythm. */
.band-carbon{background:var(--color-carbon);color:var(--color-warm-white)}
.band-graphite{background:var(--color-graphite);color:var(--color-warm-white)}
.band-light{background:var(--color-warm-white);color:var(--color-text-dark)}
.band-white{background:var(--color-pure-white);color:var(--color-text-dark)}
:is(.band-light,.band-white) :where(a){color:var(--red-on-light)}
:is(.band-light,.band-white) a.btn{color:#fff}
:is(.band-light,.band-white) a.btn--outline{color:var(--color-text-dark)}
.band-light :is(h1,h2,h3,h4),.band-white :is(h1,h2,h3,h4){color:var(--color-text-dark)}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--color-racing-red);color:#fff;
  padding:.85rem 1.25rem;font-family:var(--font-display);font-size:1.05rem;text-transform:uppercase;
  letter-spacing:.05em;text-decoration:none;border-radius:0 0 var(--r-md) 0}
.skip-link:focus{left:0;top:0}

.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-on-dark);margin:0 0 var(--s4);display:block}
.band-light .eyebrow,.band-white .eyebrow{color:var(--red-on-light)}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;color:var(--color-steel);max-width:62ch}
.band-light .lead,.band-white .lead{color:var(--muted-on-light)}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);
  margin-bottom:var(--s7);flex-wrap:wrap}
.sec-head__text{max-width:62ch}
/* Section head with no trailing link: the guide link lives inside the
   composition below instead, where it had room. */
.sec-head--stack{display:block}
.sec-head--stack .sec-head__text{max-width:64ch}
.sec-head h2{margin:0 0 var(--s3)}
.sec-head p{margin:0}
.sec-head__link{white-space:nowrap;font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;text-decoration:none;padding-block:5px;
  display:inline-flex;align-items:center;gap:.4rem;min-height:26px}
.arw{transition:transform var(--dur) var(--ease);display:inline-block}
.sec-head__link:hover .arw{transform:translateX(4px)}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:1.06rem;line-height:1;padding:1rem 1.7rem;min-height:48px;
  background:var(--color-racing-red);color:#fff;border:2px solid var(--color-racing-red);
  border-radius:var(--r-md);text-decoration:none;cursor:pointer;text-align:center;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{background:var(--color-racing-red-dark);border-color:var(--color-racing-red-dark);color:#fff;text-decoration:none}
.btn:hover .arw{transform:translateX(4px)}
.btn--outline{background:transparent;color:var(--color-warm-white);border-color:#4A4E55}
.btn--outline:hover{background:var(--color-surface-dark);border-color:var(--color-steel);color:var(--color-pure-white)}
.band-light .btn--outline,.band-white .btn--outline{color:var(--color-text-dark);border-color:#B9B4AB}
.band-light .btn--outline:hover,.band-white .btn--outline:hover{background:#E7E3DB;border-color:var(--color-text-dark);color:var(--color-text-dark)}
.btn--sm{font-size:1.02rem;padding:.72rem 1.2rem;min-height:48px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s6)}

/* ==========================================================================
   6. Utility bar
   ========================================================================== */
.utility{background:#000;border-bottom:1px solid var(--color-border-dark);font-size:.82rem;color:var(--color-steel)}
.utility__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  min-height:38px;flex-wrap:nowrap}
.utility__group{display:flex;align-items:center;gap:var(--s5);min-width:0}
.utility a{color:var(--color-steel);text-decoration:none;white-space:nowrap}
.utility a:hover{color:var(--color-pure-white);text-decoration:underline}
.utility__item{display:inline-flex;align-items:center;gap:.42rem;white-space:nowrap;
  padding-block:5px;min-height:24px}
.utility__item svg{width:14px;height:14px;flex:none;fill:currentColor;opacity:.85}
@media (max-width:860px){ .utility__hide-sm{display:none} }
@media (max-width:520px){ .utility__row{gap:var(--s4)} .utility{font-size:.78rem} }

/* ==========================================================================
   7. Header
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:900;background:var(--color-carbon);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.site-header[data-scrolled="true"]{border-bottom-color:var(--color-border-dark);
  box-shadow:0 6px 22px -12px rgba(0,0,0,.9)}
.header__row{display:flex;align-items:center;gap:var(--s5);min-height:var(--header-h)}

.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;padding-block:.35rem}
.brand img,.brand svg{height:42px;width:auto;display:block}
.brand__fallback{font-family:var(--font-display);font-weight:700;font-size:1.6rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--color-pure-white)}
.brand__fallback em{color:var(--color-racing-red);font-style:normal}

.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.nav li{position:relative}
.nav a{display:block;padding:.62rem .6rem;font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;font-size:1.14rem;color:var(--color-warm-white);
  text-decoration:none;white-space:nowrap;position:relative}
.nav a::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.3rem;height:2px;
  background:var(--color-racing-red);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after,
.nav .current-menu-item>a::after,.nav .current_page_item>a::after,
.nav .current-menu-ancestor>a::after,.nav .current_page_ancestor>a::after{transform:scaleX(1)}
.nav ul ul{position:absolute;top:100%;left:0;flex-direction:column;min-width:252px;gap:0;
  background:var(--color-graphite);border:1px solid var(--color-border-dark);border-radius:var(--r-md);
  padding:.3rem;box-shadow:0 20px 44px -18px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.nav li:hover>ul,.nav li:focus-within>ul{opacity:1;visibility:visible;transform:none}
.nav>ul>li:last-child ul{left:auto;right:0}
.nav ul ul a{font-size:.95rem;padding:.6rem .7rem;white-space:normal;text-transform:none;
  font-family:var(--font-body);font-weight:500;letter-spacing:0}
.nav ul ul a::after{display:none}
.nav ul ul a:hover{background:var(--color-surface-dark);border-radius:var(--r-sm)}

.header__actions{display:flex;align-items:center;gap:var(--s3);flex:none}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  background:transparent;border:1px solid var(--color-border-dark);border-radius:var(--r-md);
  color:var(--color-warm-white);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.icon-btn:hover{border-color:var(--color-steel);background:var(--color-graphite)}
.icon-btn svg{width:21px;height:21px;fill:currentColor}

.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--color-border-dark);border-radius:var(--r-md);
  color:var(--color-warm-white);cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:currentColor;transition:transform var(--dur) var(--ease),top var(--dur) var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.header-search{border-top:1px solid var(--color-border-dark);background:var(--color-graphite);
  padding-block:var(--s4)}
.header-search[hidden]{display:none}
.header-search form{display:flex;gap:var(--s3);max-width:640px;margin-inline:auto}
.header-search input{flex:1}

/* The full-size menu needs about 1290px of document width. Below that it
   steps down before it can overflow, and below 1180px it becomes the panel. */
@media (max-width:1300px){
  .nav a{font-size:1.04rem;padding:.6rem .46rem}
  .nav a::after{left:.46rem;right:.46rem}
  .brand img,.brand svg{height:38px}
  /* Buys back the sub-pixel that pushed .header__actions 0.7px past the edge
     at exactly 1181px, just above the panel breakpoint. */
  .header__row{gap:var(--s4)}
}
@media (max-width:1180px){
  .burger{display:flex}
  .header__cta{display:none}
  .nav{position:fixed;inset:var(--header-h) 0 0 0;margin:0;background:var(--color-carbon);
    border-top:1px solid var(--color-border-dark);overflow-y:auto;
    padding:var(--s5) var(--gutter) var(--s10);
    clip-path:inset(0 0 0 100%);opacity:0;visibility:hidden;
    transition:clip-path var(--dur) var(--ease),opacity 180ms var(--ease),visibility 0s linear var(--dur)}
  .nav[data-open="true"]{clip-path:inset(0 0 0 0);opacity:1;visibility:visible;
    transition:clip-path var(--dur) var(--ease),opacity 180ms var(--ease),visibility 0s}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a{padding:1rem .25rem;font-size:1.25rem;border-bottom:1px solid var(--color-border-dark)}
  .nav a::after{display:none}
  .nav .current-menu-item>a,.nav .current_page_item>a{color:var(--red-on-dark)}
  .nav ul ul{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    background:var(--color-graphite);padding:0 0 0 var(--s4);border-radius:0}
  .nav ul ul a{font-size:1.02rem;padding:.8rem .25rem}
  .nav__mobile-cta{margin-top:var(--s6)}
  .nav__mobile-cta .btn{width:100%}
  body[data-menu-open="true"]{overflow:hidden}
}
@media (min-width:1101px){ .nav__mobile-cta{display:none} }

/* Very narrow phones: the wordmark, search and menu buttons together exceed
   320px at the default logo height, so scale the mark and tighten the row. */
@media (max-width:400px){
  .header__row{gap:var(--s3)}
  .brand img,.brand svg{height:26px}
  .brand__fallback{font-size:1.3rem}
  .header__actions{gap:var(--s2)}
  .icon-btn{width:40px;height:40px}
  .burger{width:42px;height:42px}
}

/* ==========================================================================
   8. Hero
   ========================================================================== */
.hero{position:relative;background:var(--color-carbon);overflow:hidden;
  border-bottom:1px solid var(--color-border-dark)}
.hero__media{position:absolute;inset:0;z-index:1}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,var(--color-carbon) 2%,rgba(11,12,14,.95) 36%,rgba(11,12,14,.74) 62%,rgba(11,12,14,.52) 100%)}
.hero__inner{position:relative;z-index:3;padding-block:clamp(3.25rem,7.5vw,6.5rem)}
.hero__col{max-width:44rem}
.hero h1{margin-bottom:var(--s5)}
.hero h1 .hl{color:var(--color-racing-red);display:block}
.hero__sub{font-size:clamp(1.05rem,1.55vw,1.2rem);color:var(--color-warm-white);max-width:54ch;
  margin-bottom:0;line-height:1.6}
/* Spans the full content column: the old 58rem cap was arbitrary, left the
   strip hanging 312px short of the right edge, and squeezed two of the four
   labels onto a second line. */
.hero__trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:1px;
  margin-top:var(--s8);background:var(--color-border-dark);border:1px solid var(--color-border-dark);
  border-radius:var(--r-md);overflow:hidden}
.hero__trust div{background:rgba(11,12,14,.92);padding:.85rem 1rem;display:flex;align-items:center;
  gap:.55rem;font-size:.86rem;font-weight:500;color:var(--color-warm-white);line-height:1.35}
.hero__trust svg{width:17px;height:17px;flex:none;fill:var(--color-steel)}
/* Four across only where the cells are wide enough for a single line; two
   across below that, rather than squeezing labels onto three lines. */
@media (max-width:1100px){
  .hero__trust{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .hero__trust{grid-template-columns:1fr;margin-top:var(--s6)}
  /* Tighten the hero on the smallest phones so the primary action still
     lands above the fold on a 320x720 screen. */
  .hero__inner{padding-block:var(--s6) var(--s7)}
  .hero h1{margin-bottom:var(--s4)}
  .hero .btn-row{margin-top:var(--s4)}
  .hero__sub{font-size:1rem}
}
@media (max-width:860px){
  .hero__media img{object-position:center 46%}
  .hero__scrim{background:linear-gradient(180deg,rgba(11,12,14,.8) 0%,rgba(11,12,14,.92) 52%,var(--color-carbon) 100%)}
  .hero__inner{padding-block:var(--s8) var(--s9)}
}

/* ==========================================================================
   9. Model finder
   ========================================================================== */
.finder{background:var(--color-warm-white);color:var(--color-text-dark);
  border-bottom:1px solid var(--color-border-light)}
.finder__inner{padding-block:var(--s8)}
.finder__head{margin-bottom:var(--s5);max-width:64ch}
.finder__head h2{margin:0 0 var(--s2);font-size:clamp(1.5rem,2.6vw,2.1rem)}
.finder__head p{margin:0;color:var(--muted-on-light);font-size:.98rem}
.finder__form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:var(--s4);align-items:end}
.finder__field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.finder__field label{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-on-light)}
.finder__alt{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s5);
  font-size:.93rem;color:var(--muted-on-light)}
.finder__alt a{color:var(--red-on-light);padding-block:4px;display:inline-block;min-height:24px}
.finder__note{margin:var(--s4) 0 0;font-size:.88rem;color:var(--muted-on-light);max-width:80ch}
@media (max-width:900px){
  .finder__form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finder__form .finder__submit{grid-column:1 / -1}
  .finder__submit .btn{width:100%}
}
@media (max-width:560px){ .finder__form{grid-template-columns:1fr} }

/* ==========================================================================
   10. Form controls
   ========================================================================== */
input[type=text],input[type=email],input[type=search],input[type=tel],input[type=url],
input[type=number],input[type=file],textarea,select{
  width:100%;min-height:50px;padding:.75rem .9rem;font:inherit;font-size:1rem;
  background:var(--color-pure-white);color:var(--color-text-dark);
  border:1px solid #B9B4AB;border-radius:var(--r-md);
}
select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23181A1F' stroke-width='2' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:12px;padding-right:2.4rem}
input[type=file]{padding:.55rem .7rem;line-height:1.5}
textarea{min-height:140px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:#77726A}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--color-racing-red);outline-offset:1px;border-color:var(--color-racing-red)}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{
  border-color:var(--danger-on-light);border-width:2px}

/* background-color, never the `background` shorthand: the shorthand resets
   background-repeat/position/size and tiles the select chevron across the field. */
.band-carbon :is(input,textarea,select),.band-graphite :is(input,textarea,select),
.enquiry__form :is(input,textarea,select),.header-search input{
  background-color:var(--color-surface-dark);color:var(--color-warm-white);border-color:#3B3F46}
.band-carbon :is(input,textarea)::placeholder,.band-graphite :is(input,textarea)::placeholder,
.enquiry__form :is(input,textarea)::placeholder{color:#8A8E96}
.band-carbon select,.band-graphite select,.enquiry__form select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23F4F2EE' stroke-width='2' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:11px 7px}
/* The open dropdown is painted by the browser, not by the box above. Without a
   dark colour-scheme the options inherit our light text onto the browser's
   default pale popup and become unreadable. */
.band-carbon select,.band-graphite select,.enquiry__form select{color-scheme:dark}
.band-carbon select option,.band-graphite select option,.enquiry__form select option{
  background-color:#1C1F24;color:var(--color-warm-white)}
.band-carbon select option:checked,.band-graphite select option:checked,
.enquiry__form select option:checked{background-color:#2A2E35;color:var(--color-pure-white)}

.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:var(--s5)}
.field label{font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.field .opt{font-weight:400;text-transform:none;letter-spacing:0;opacity:.72}
.field .req{color:var(--color-racing-red)}
.band-light .field .req,.band-white .field .req{color:var(--red-on-light)}
.hint{font-size:.86rem;opacity:.82;font-weight:400;letter-spacing:0;text-transform:none}
.field-error{font-size:.88rem;color:var(--danger-on-light);font-weight:600}
.enquiry__form .field-error,.band-carbon .field-error,.band-graphite .field-error{color:var(--danger-on-dark)}
.checkline{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:var(--s5)}
.checkline input[type=checkbox]{width:22px;height:22px;min-height:0;flex:none;margin-top:3px;
  accent-color:var(--color-racing-red)}
.checkline label{font-size:.94rem;font-weight:400;text-transform:none;letter-spacing:0}

.notice{border-radius:var(--r-md);padding:var(--s4) var(--s5);margin-bottom:var(--s5);font-size:.98rem}
.notice p{margin:0;max-width:none}
.notice--ok{background:#E4F0E6;border:1px solid #7FAE8C;color:#1E4429}
.notice--err{background:#FBE4E1;border:1px solid #D98B82;color:#7E1310}
.enquiry__form .notice--ok{background:#16281B;border-color:#3E6B49;color:#B6E3C1}
.enquiry__form .notice--err{background:#2A1311;border-color:#7E332C;color:#FFB9B1}

/* ==========================================================================
   11. Cards & grids
   ========================================================================== */
.grid{display:grid;gap:var(--s5)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1200px){ .grid--4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .grid--4,.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .grid--4,.grid--3,.grid--2{grid-template-columns:1fr} }

/* --- models: three leading images, then a typographic index --------------
   No card, no border, no filled panel. The photographs sit directly on the
   ground and carry the weight; the model name is the link, so there is no
   repeated call to action under every image. */
.models-lead{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s7) clamp(1.5rem,3vw,2.75rem)}
@media (max-width:1000px){ .models-lead{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .models-lead{grid-template-columns:1fr;gap:var(--s8)} }

.model-tile{position:relative;display:flex;flex-direction:column;min-width:0}
.model-tile__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);
  background:#000;margin-bottom:var(--s5);
  box-shadow:0 26px 54px -32px rgba(0,0,0,.95)}
.model-tile__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 420ms var(--ease)}
.model-tile:hover .model-tile__media img{transform:scale(1.035)}

.model-tile__name{margin:0 0 .55rem;font-size:1.32rem;letter-spacing:.02em}
.model-tile__name a{color:var(--color-pure-white);text-decoration:none;
  display:inline-flex;align-items:baseline;gap:.5rem;padding-block:3px;min-height:26px}
.model-tile__name a::after{content:"";position:absolute;inset:0}
.model-tile__name .arw{color:var(--red-on-dark)}
.model-tile:hover .model-tile__name .arw{transform:translateX(5px)}
.model-tile p{margin:0;font-size:.95rem;color:var(--color-steel);line-height:1.55;max-width:38ch}

.model-tile__hubs{margin:.55rem 0 0;font-size:.92rem;line-height:1.5;
  color:var(--color-steel);position:relative;z-index:1}
.model-tile__hubs a{color:var(--color-warm-white);text-decoration:none;
  border-bottom:1px solid #3E434B;padding-bottom:1px}
.model-tile__hubs a:hover{color:var(--color-pure-white);
  border-bottom-color:var(--red-on-dark)}

/* --- index: hairline rows, so a model without a photograph reads as a line
   of type rather than an empty frame ------------------------------------- */
.model-index{margin-top:var(--s9)}
.model-index__title{font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-steel);
  margin:0 0 var(--s4)}
.model-index__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-border-dark)}
.model-index__list li{border-bottom:1px solid var(--color-border-dark)}
.model-index__list a{display:grid;grid-template-columns:minmax(150px,var(--idx-col,210px)) 1fr auto;
  gap:var(--s5);align-items:baseline;padding:1.15rem .25rem;text-decoration:none;
  color:var(--color-warm-white);transition:background-color 180ms var(--ease),padding 180ms var(--ease)}
.model-index__list a:hover{background-color:rgba(255,255,255,.028);
  padding-inline:.9rem .25rem}
.model-index__name{font-family:var(--font-display);font-weight:600;font-size:1.16rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--color-pure-white)}
.model-index__desc{font-size:.95rem;color:var(--color-steel);line-height:1.5}
.model-index__arw{color:var(--red-on-dark);justify-self:end}
.model-index__list a:hover .model-index__arw{transform:translateX(5px)}
@media (max-width:700px){
  .model-index__list a{grid-template-columns:1fr auto;gap:.3rem var(--s4);
    align-items:start;padding-block:1rem}
  .model-index__desc{grid-column:1 / 2}
  .model-index__arw{grid-row:1 / 2;grid-column:2 / 3}
}

/* ==========================================================================
   12. Supply — three sourcing routes, ranked
   --------------------------------------------------------------------------
   No cards and no borders. The lead route runs full width with its image beside
   the text; the other two share the row beneath at 1.35fr / 1fr. Each panel is
   sized to what its source photograph can carry without upscaling, which is why
   the export panel — the smallest surviving archive image — is the narrowest.
   ========================================================================== */
.supply{display:grid;grid-template-columns:1.35fr 1fr;
  gap:var(--s9) clamp(1.75rem,3.5vw,3.25rem)}

.supply__panel{display:flex;flex-direction:column;min-width:0;position:relative}
.supply__panel--lead{grid-column:1 / -1;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.75rem,4vw,3.75rem);align-items:center}

.supply__media{overflow:hidden;border-radius:var(--r-sm);background:#0B0C0E;
  aspect-ratio:4/3;box-shadow:0 26px 54px -34px rgba(24,26,31,.5)}
.supply__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 420ms var(--ease)}
.supply__panel:hover .supply__media img{transform:scale(1.03)}
.supply__panel--lead .supply__media{aspect-ratio:16/11}
/* The two panels in the second row are different widths by design, so an equal
   aspect ratio would give them different heights and start their text at
   different points. A shared height keeps the bodies on one line. */
.supply__panel--mid .supply__media,
.supply__panel--last .supply__media{aspect-ratio:auto;height:clamp(260px,30vw,440px)}

.supply__body{display:flex;flex-direction:column;min-width:0}
.supply__panel:not(.supply__panel--lead) .supply__body{padding-top:var(--s5)}

.supply__num{font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;color:var(--red-on-light);margin:0 0 var(--s3);
  font-variant-numeric:tabular-nums}
.supply__body h3{margin:0 0 var(--s3);font-size:clamp(1.22rem,1.9vw,1.55rem)}
.supply__panel--lead .supply__body h3{font-size:clamp(1.5rem,2.6vw,2.05rem)}
.supply__copy{margin:0 0 var(--s5);font-size:.98rem;color:var(--muted-on-light);
  line-height:1.6;max-width:48ch}
.supply__panel--lead .supply__copy{font-size:1.05rem;max-width:42ch}

.supply__link{margin-top:auto;align-self:flex-start;font-family:var(--font-display);
  font-weight:600;text-transform:uppercase;font-size:1rem;letter-spacing:.05em;
  text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;
  padding-block:4px;min-height:26px}
.supply__link::after{content:"";position:absolute;inset:0}
.supply__panel:hover .supply__link .arw{transform:translateX(5px)}

@media (max-width:900px){
  .supply{grid-template-columns:1fr;gap:var(--s9)}
  .supply__panel--lead{grid-template-columns:1fr;gap:var(--s5)}
  .supply__panel--lead .supply__media{aspect-ratio:4/3}
  .supply__panel--mid .supply__media,
  .supply__panel--last .supply__media{aspect-ratio:4/3;height:auto}
  .supply__panel--lead .supply__body{padding-top:var(--s5)}
}

/* Category strip: a single run of type with hairline dividers, rather than
   nine identical pills that wrap and strand one on its own line. */
.cat-strip{margin-top:var(--s10);padding-top:var(--s6);
  border-top:1px solid var(--color-border-light)}
.cat-strip__title{font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-on-light);
  margin:0 0 var(--s4)}
.cat-strip__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:.35rem 1.9rem}
.cat-strip__list li{position:relative}
.cat-strip__list li + li::before{content:"";position:absolute;left:-.95rem;
  top:.62em;bottom:.62em;width:1px;background:var(--color-border-light)}
.cat-strip__list a{display:inline-block;padding-block:6px;min-height:26px;
  font-size:1rem;color:var(--color-text-dark);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color 180ms var(--ease),color 180ms var(--ease)}
.cat-strip__list a:hover{color:var(--red-on-light);border-bottom-color:var(--red-on-light)}
@media (max-width:600px){
  .cat-strip__list{gap:0;display:grid;grid-template-columns:1fr}
  .cat-strip__list li + li::before{display:none}
  .cat-strip__list li{border-top:1px solid var(--color-border-light)}
  .cat-strip__list a{display:block;padding-block:.75rem;min-height:44px}
}

/* ==========================================================================
   13. Brand strip
   ========================================================================== */
/* Nine brands: only 9 and 3 columns divide evenly, so those are the only two
   counts used. auto-fit produced 5+4 and 2+2+2+2+1, which read as ragged. */
.brands{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:1px;
  background:var(--color-border-light);border:1px solid var(--color-border-light);
  border-radius:var(--r-md);overflow:hidden}
@media (max-width:1199px){ .brands{grid-template-columns:repeat(3,minmax(0,1fr))} }
.brands{list-style:none;margin:0;padding:0}
.brands__cell{background:var(--color-pure-white);display:flex;align-items:center;justify-content:center;
  padding:var(--s5) var(--s4);min-height:106px}
/* The recovered marks vary widely in proportion — a 216x27 wordmark next to a
   146x55 badge — so cap both dimensions and let object-fit settle each one to a
   similar optical size. */
.brands__cell img{max-height:34px;max-width:100%;width:auto;height:auto;object-fit:contain}
.brands__cell span{font-family:var(--font-display);font-size:clamp(1rem,2.2vw,1.2rem);
  text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-dark);text-align:center;
  line-height:1.15;font-weight:600}
@media (max-width:1199px){ .brands__cell{min-height:118px} }

/* ==========================================================================
   14. Ordering — sequence, photograph, brief
   --------------------------------------------------------------------------
   Four equal columns made the steps read as four unrelated facts and left the
   column bottoms ragged, because the copy lengths differ. A vertical sequence
   with hairline rows says what the content is — an ordered process — and the
   rows self-align whatever the copy length. The numerals sit in a fixed column
   so every heading starts on the same axis.

   The numerals are neutral, not red: racing red is reserved for actions on this
   page, and the old .step::before set 16.8px bold red on carbon at 3.2:1, below
   the 4.5:1 that size requires.
   ========================================================================== */
.order{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(2rem,4.5vw,4.25rem);align-items:center}

.order__seq{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--color-border-dark)}
.order__step{display:grid;grid-template-columns:var(--order-num,3.5rem) minmax(0,1fr);
  gap:0 clamp(1rem,2vw,1.75rem);align-items:start;
  padding:clamp(1.4rem,2.4vw,1.9rem) 0;
  border-bottom:1px solid var(--color-border-dark)}
.order__num{font-family:var(--font-display);font-weight:600;line-height:.9;
  font-size:clamp(1.7rem,2.6vw,2.2rem);color:#7B818B;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.order__body{min-width:0}
.order__body h3{margin:0 0 .45rem;font-size:clamp(1.12rem,1.7vw,1.28rem);
  color:var(--color-pure-white);letter-spacing:.02em}
.order__body p{margin:0;font-size:.97rem;line-height:1.62;
  color:var(--color-steel);max-width:54ch}

/* The one photograph in the archive that shows the last step happening. It is
   sized to what a 420px source can carry without visible upscaling, so it is
   shorter than the sequence beside it and is centred against it rather than
   top-aligned with a hole underneath. */
.order__figure{margin:0}
.order__figure-media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);
  background:#000;box-shadow:0 30px 62px -34px rgba(0,0,0,.95)}
.order__figure-media img{width:100%;height:100%;object-fit:cover;display:block}
.order__figure figcaption{margin-top:var(--s4);font-size:.85rem;line-height:1.5;
  color:#8A8F98;max-width:44ch}

/* Brief: an index of rows, not a bulleted list. Conditional items carry the
   qualifier as a right-aligned label so the labels themselves stay a clean
   left-hand column. */
.order__brief{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(2rem,3.5vw,2.75rem);
  border-top:1px solid var(--color-border-dark);
  display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);
  gap:clamp(2rem,4.5vw,4.25rem);align-items:start}
.order__brief-intro h3{margin:0 0 var(--s3);font-size:clamp(1.3rem,2.2vw,1.7rem)}
.order__brief-intro p{margin:0 0 var(--s6);color:var(--color-steel);
  font-size:1rem;line-height:1.62;max-width:34ch}
.order__brief-intro .btn-row{margin:0}

.order__list{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(4,auto);grid-auto-flow:column;
  column-gap:clamp(1.5rem,3vw,2.75rem);
  border-top:1px solid var(--color-border-dark)}
.order__list li{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);padding:.9rem 0;border-bottom:1px solid var(--color-border-dark);
  max-width:none}
.order__label{font-size:1rem;color:var(--color-warm-white);line-height:1.4}
.order__when{flex:none;font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#8A8F98;white-space:nowrap;
  transform:translateY(-1px)}

@media (max-width:980px){
  .order{grid-template-columns:1fr;gap:var(--s8)}
  .order__figure{max-width:460px}
  .order__brief{grid-template-columns:1fr;gap:var(--s7)}
  .order__brief-intro p{max-width:52ch}
}
@media (max-width:600px){
  .order__step{grid-template-columns:1fr;gap:.35rem}
  .order__num{font-size:1.25rem}
  .order__list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}

/* ==========================================================================
   15. Shipping / export — two routes, specified
   --------------------------------------------------------------------------
   The invented SVG world map, the disc-bulleted method list, the country pills
   and the two duplicate bordered cards are all gone. What is left is a
   photograph at the size its 420px source can carry, the dealer countries as a
   plain hairline index, and each shipping route set as term/value rows with the
   call to action that belongs to it.
   ========================================================================== */
.ship{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4.25rem);align-items:start}

.ship__figure{margin:0 0 clamp(2rem,3.5vw,2.75rem)}
.ship__figure-media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);
  background:#E4E0D8;box-shadow:0 26px 54px -34px rgba(24,26,31,.5)}
.ship__figure-media img{width:100%;height:100%;object-fit:cover;display:block}
.ship__figure figcaption{margin-top:var(--s4);font-size:.85rem;line-height:1.5;
  color:var(--muted-on-light);max-width:44ch}

.ship__countries-title,.ship__spec-title{font-family:var(--font-body);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-on-light);margin:0 0 var(--s4)}
.ship__countries-list{list-style:none;margin:0;padding:0;max-width:none;
  border-top:1px solid var(--color-border-light)}
.ship__countries-list li{padding:.7rem 0;border-bottom:1px solid var(--color-border-light);
  font-size:.98rem;color:var(--color-text-dark);max-width:none}

/* Routes: each one is a heading, a line of copy, its terms, and its own action.
   A hairline divides them; neither sits in a box. */
.ship__routes{display:flex;flex-direction:column}
.ship__route + .ship__route{margin-top:clamp(2.25rem,4vw,3.25rem);
  padding-top:clamp(2.25rem,4vw,3.25rem);border-top:1px solid var(--color-border-light)}
.ship__route h3{margin:0 0 var(--s3);font-size:clamp(1.28rem,2.1vw,1.62rem)}
.ship__lede{margin:0 0 var(--s6);font-size:1.02rem;line-height:1.6;
  color:var(--muted-on-light);max-width:56ch}

.ship__spec{margin:0;border-top:1px solid var(--color-border-light)}
.ship__spec > div{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s5);padding:.85rem 0;border-bottom:1px solid var(--color-border-light)}
.ship__spec dt{font-size:1rem;color:var(--color-text-dark);line-height:1.4}
.ship__spec dd{margin:0;flex:none;text-align:right;font-size:.94rem;
  color:var(--muted-on-light);font-variant-numeric:tabular-nums;line-height:1.4}

.ship__note{margin:var(--s5) 0 0;font-size:.92rem;line-height:1.6;
  color:var(--muted-on-light);max-width:60ch}
.ship__route .btn-row{margin-top:var(--s6)}

@media (max-width:980px){
  .ship{grid-template-columns:1fr;gap:var(--s8)}
  .ship__figure{max-width:460px}
  .ship__countries-list{display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,auto);
    grid-auto-flow:column;column-gap:clamp(1rem,2.5vw,2rem)}
}
@media (max-width:520px){
  .ship__spec > div{flex-direction:column;gap:.15rem;align-items:flex-start}
  .ship__spec dd{text-align:left}
  .ship__countries-list{display:block}
}

/* ==========================================================================
   16. Trust / credibility — evidence, captioned
   --------------------------------------------------------------------------
   The 2x2 grid of uncaptioned tiles is gone. The shopfront leads, square-cropped
   so the image column finishes level with the facts beside it rather than
   floating short, and the remaining three run as a captioned strip below.
   Every photograph now says what it is.
   ========================================================================== */
.trust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(2rem,4.5vw,4.25rem);align-items:start}
.trust__text{min-width:0}

.trust__lead{margin:0}
.trust__lead-media{aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-sm);
  background:#000;box-shadow:0 30px 62px -34px rgba(0,0,0,.95)}
.trust__lead-media img{width:100%;height:100%;object-fit:cover;
  object-position:50% 45%;display:block}
.trust__lead figcaption,.trust__strip figcaption{margin-top:var(--s4);
  font-size:.88rem;line-height:1.5;color:var(--color-steel)}

.trust__facts{margin:var(--s6) 0 0;display:grid;gap:0;
  border-top:1px solid var(--color-border-dark)}
.trust__facts > div{display:grid;grid-template-columns:minmax(128px,auto) 1fr;
  gap:var(--s5);padding:.9rem 0;border-bottom:1px solid var(--color-border-dark)}
.trust__facts dt{font-size:.74rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--color-steel);padding-top:.18em}
.trust__facts dd{margin:0;font-size:.99rem;color:var(--color-warm-white);
  line-height:1.5}

.trust__text .btn-row{margin-top:var(--s7);align-items:center;gap:var(--s6)}
.trust__link{font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;font-size:1.02rem;letter-spacing:.05em;
  text-decoration:none;color:var(--color-warm-white);
  display:inline-flex;align-items:center;gap:.5rem;min-height:32px}
.trust__link .arw{color:var(--red-on-dark);transition:transform 200ms var(--ease)}
.trust__link:hover{color:var(--color-pure-white)}
.trust__link:hover .arw{transform:translateX(5px)}

/* Strip: three supporting photographs, each captioned with what it shows. */
.trust__strip{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2rem,3.5vw,2.75rem);
  border-top:1px solid var(--color-border-dark);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2rem)}
.trust__strip figure{margin:0;min-width:0}
.trust__strip-media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);
  background:#000}
.trust__strip-media img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:900px){
  .trust{grid-template-columns:1fr;gap:var(--s8)}
  .trust__lead{max-width:520px}
}
@media (max-width:700px){
  .trust__strip{grid-template-columns:1fr;gap:var(--s7);max-width:520px}
}
@media (max-width:480px){ .trust__facts > div{grid-template-columns:1fr;gap:.2rem} }

/* ==========================================================================
   17. Guides
   ========================================================================== */
.guide-card{display:flex;flex-direction:column;background:var(--color-pure-white);
  border:1px solid var(--color-border-light);border-radius:var(--r-md);overflow:hidden;position:relative;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.guide-card:hover{border-color:#B9B4AB;transform:translateY(-2px)}
.guide-card__media{aspect-ratio:16/10;background:#DDD9D2;overflow:hidden}
.guide-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 320ms var(--ease)}
.guide-card:hover .guide-card__media img{transform:scale(1.04)}
.guide-card__body{padding:var(--s5);display:flex;flex-direction:column;gap:.5rem;flex:1}
.guide-card__cat{font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--red-on-light)}
.guide-card__body h3{margin:0;font-size:1.16rem}
.guide-card__body p{margin:0;font-size:.93rem;color:var(--muted-on-light);max-width:none}
.guide-card__link{margin-top:auto;padding-top:var(--s3);font-weight:600;font-size:.94rem;
  text-decoration:none;display:inline-flex;gap:.4rem;align-items:center;min-height:26px}
.guide-card__link::after{content:"";position:absolute;inset:0}

/* ==========================================================================
   18. FAQ
   ========================================================================== */
.faq{max-width:56rem}
.faq__item{border-bottom:1px solid var(--color-border-light)}
.faq__item:first-child{border-top:1px solid var(--color-border-light)}
.faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  background:none;border:0;padding:1.2rem 0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-size:clamp(1.12rem,1.7vw,1.3rem);font-weight:600;
  text-transform:uppercase;letter-spacing:.015em;color:var(--color-text-dark);min-height:56px}
.faq__q:hover{color:var(--red-on-light)}
.faq__icon{flex:none;width:22px;height:22px;margin-top:.25rem;position:relative}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--color-racing-red);
  border-radius:1px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.faq__icon::before{top:10px;left:0;width:22px;height:2px}
.faq__icon::after{left:10px;top:0;width:2px;height:22px}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:rotate(90deg);opacity:0}
.faq__a[hidden]{display:none}
.faq__a-inner{padding:0 0 1.4rem}
.faq__a-inner p{margin:0 0 var(--s4);font-size:1rem;color:var(--muted-on-light);max-width:66ch}
.faq__a-inner p:last-child{margin-bottom:0}

/* ==========================================================================
   19. Enquiry — editorial spread
   --------------------------------------------------------------------------
   No card and no boxed fields. The form sits directly on the ground, divided
   from the narrative column by a single hairline, and every control is an
   underline rather than a filled box. The parts flat-lay anchors the left
   column: its rows of components echo the rhythm of the fields opposite.
   ========================================================================== */
.enquiry{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,4.5vw,5rem);align-items:start}
@media (max-width:960px){ .enquiry{grid-template-columns:1fr;gap:var(--s9)} }

.enquiry__aside h2{margin-bottom:var(--s5)}
.enquiry__aside .lead{margin-bottom:0}

.contact-list{margin:var(--s7) 0 0;border-top:1px solid var(--color-border-dark)}
.contact-list>div{display:grid;grid-template-columns:minmax(84px,auto) 1fr;gap:var(--s5);
  padding:.95rem 0;border-bottom:1px solid var(--color-border-dark)}
.contact-list dt{margin:0;font-size:.68rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--color-steel);padding-top:.2rem}
.contact-list dd{margin:0;font-size:.98rem;color:var(--color-warm-white);line-height:1.55}
.contact-list a{color:var(--color-warm-white);text-decoration:none;
  border-bottom:1px solid #3E434B;padding-bottom:1px;display:inline-block;min-height:24px}
.contact-list a:hover{color:var(--color-pure-white);border-bottom-color:var(--color-racing-red)}
@media (max-width:480px){ .contact-list>div{grid-template-columns:1fr;gap:.2rem} }

.enquiry__figure{margin:var(--s7) 0 0}
.enquiry__figure img{width:100%;height:auto;border-radius:2px;
  box-shadow:0 30px 64px -34px rgba(0,0,0,.95)}
.enquiry__figure figcaption{margin-top:var(--s4);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--color-steel)}

.workfrom{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--color-border-dark)}
.workfrom__title{font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--color-steel);margin:0 0 var(--s4)}
.workfrom__list{list-style:none;margin:0;padding:0}
.workfrom__list li{position:relative;padding:.6rem 0 .6rem 1.5rem;font-size:.95rem;
  color:var(--color-steel);line-height:1.55;max-width:46ch}
.workfrom__list li + li{border-top:1px solid #23262B}
.workfrom__list li::before{content:"";position:absolute;left:0;top:1.18rem;width:7px;height:7px;
  background:var(--color-racing-red);border-radius:1px}
.workfrom__list strong{color:var(--color-warm-white);font-weight:600}

/* --- the form ------------------------------------------------------------ */
.enquiry__form{min-width:0}
@media (min-width:961px){
  .enquiry__form{border-left:1px solid var(--color-border-dark);
    padding-left:clamp(2.5rem,4.5vw,4.5rem)}
}
.enquiry__intro{font-size:.9rem;color:var(--color-steel);margin:0 0 var(--s7);max-width:52ch}

.step-set{border:0;padding:0;margin:0 0 var(--s8);min-width:0}
.step-set:last-of-type{margin-bottom:var(--s6)}
.step-set legend{display:flex;align-items:center;gap:var(--s4);width:100%;padding:0;
  margin-bottom:var(--s5)}
.step-num{font-size:.72rem;font-weight:600;letter-spacing:.16em;color:var(--red-on-dark);
  font-variant-numeric:tabular-nums}
.step-name{font-family:var(--font-display);font-size:1.18rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.055em;color:var(--color-pure-white);white-space:nowrap}
.step-set legend::after{content:"";flex:1;height:1px;background:var(--color-border-dark)}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s6) clamp(1.5rem,3vw,2.75rem);align-items:start}
@media (max-width:700px){ .form-grid{grid-template-columns:1fr;gap:var(--s6)} }
.col-span{grid-column:1 / -1}

.enquiry__form .field{gap:.5rem;margin-bottom:0}
.enquiry__form .field label{font-family:var(--font-body);font-size:.7rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--color-steel)}
.enquiry__form .field .opt{font-size:.9em;letter-spacing:.1em;opacity:1;color:#8A8F98}
.enquiry__form .field .req{color:var(--color-racing-red)}
.enquiry__form .hint{font-size:.82rem;color:#8A8F98;opacity:1;letter-spacing:0;
  text-transform:none;font-weight:400;margin-top:.15rem;line-height:1.45}

/* Underline controls: no boxes, no heavy borders. */
.enquiry__form :is(input[type=text],input[type=email],input[type=tel],input[type=url],
  input[type=number],textarea,select){
  background-color:transparent;border:0;border-bottom:1px solid #343941;border-radius:0;
  padding:.5rem 0 .65rem;min-height:46px;font-size:1.04rem;color:var(--color-warm-white);
  transition:border-color 180ms var(--ease)}
.enquiry__form select{padding-right:1.9rem;background-position:right .15rem center}
.enquiry__form textarea{min-height:108px;padding-top:.7rem;line-height:1.6}
.enquiry__form :is(input,textarea,select):hover{border-bottom-color:#4E545E}
.enquiry__form :is(input,textarea,select):focus-visible{
  outline:2px solid var(--color-racing-red);outline-offset:4px;
  border-bottom-color:var(--color-racing-red)}
.enquiry__form :is(input,textarea,select)[aria-invalid="true"]{
  border-bottom-color:var(--danger-on-dark);border-bottom-width:2px}
.enquiry__form ::placeholder{color:#8A8F98}

.enquiry__form input[type=file]{background-color:transparent;border:0;
  border-bottom:1px solid #343941;border-radius:0;padding:.55rem 0;min-height:52px;
  font-size:.92rem;color:var(--color-steel)}
.enquiry__form input[type=file]::file-selector-button{
  font:inherit;font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--color-warm-white);background:transparent;border:1px solid #4E545E;border-radius:2px;
  padding:.62rem 1.05rem;margin-right:1rem;cursor:pointer;
  transition:border-color 180ms var(--ease),background-color 180ms var(--ease)}
.enquiry__form input[type=file]::file-selector-button:hover{
  border-color:var(--color-racing-red);background-color:rgba(229,36,33,.09)}
.enquiry__form .filehint{font-size:.8rem;color:#8A8F98;margin-top:.55rem}

.enquiry__consent{display:flex;gap:.85rem;align-items:flex-start;
  padding-top:var(--s6);border-top:1px solid var(--color-border-dark);margin-bottom:var(--s6)}
.enquiry__consent input[type=checkbox]{width:21px;height:21px;min-height:0;flex:none;
  margin-top:2px;accent-color:var(--color-racing-red);background-color:transparent}
.enquiry__consent label{font-size:.93rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--color-steel);line-height:1.55}
.enquiry__consent label a{color:var(--color-warm-white)}

.enquiry__submit{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.enquiry__submit .btn{padding-inline:2.1rem}
.enquiry__submit .note{font-size:.84rem;color:#8A8F98;max-width:34ch}
@media (max-width:520px){
  .enquiry__submit{align-items:stretch}
  .enquiry__submit .btn{width:100%}
}

/* ==========================================================================
   20. Footer
   ========================================================================== */
.site-footer{background:#000;border-top:2px solid var(--color-racing-red);
  padding-block:clamp(2.75rem,5vw,4rem) var(--s6);color:var(--color-steel)}

/* Brand bar: identity and the one action worth repeating here, on one line,
   with a hairline closing it. Replaces a logo stranded above a short note in a
   column that then ran out of content. */
.footer__bar{display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:var(--s5) var(--s7);
  padding-bottom:clamp(1.75rem,3vw,2.5rem)}
.footer__id img{height:40px;width:auto;display:block;margin-bottom:var(--s4)}
.footer__id p{margin:0;font-size:1.02rem;line-height:1.62;color:var(--color-steel);
  max-width:56ch}
.footer__cta{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:1.16rem;letter-spacing:.05em;text-decoration:none;
  color:var(--color-warm-white);display:inline-flex;align-items:center;gap:.5rem;
  min-height:36px;white-space:nowrap}
.footer__cta .arw{color:var(--red-on-dark);transition:transform 200ms var(--ease)}
.footer__cta:hover{color:var(--color-pure-white)}
.footer__cta:hover .arw{transform:translateX(5px)}

/* Columns are anchored by a hairline at the top, so unequal link counts read as
   a natural hang rather than a floating, misaligned grid. */
.footer__grid{display:grid;grid-template-columns:1.05fr .9fr .95fr 1.2fr;
  gap:clamp(1.75rem,3.5vw,3rem)}
.footer__col{border-top:1px solid var(--color-border-dark);
  padding-top:clamp(1.25rem,2vw,1.6rem);min-width:0}
.site-footer h2{font-size:.78rem;letter-spacing:.16em;color:var(--color-steel);
  margin:0 0 var(--s4);font-family:var(--font-body);font-weight:600;
  text-transform:uppercase}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.15rem}
.site-footer a{color:var(--color-warm-white);text-decoration:none;font-size:1.04rem;
  display:inline-block;padding-block:6px;min-height:30px;
  border-bottom:1px solid transparent;
  transition:color 180ms var(--ease),border-color 180ms var(--ease)}
.site-footer a:hover{color:var(--color-pure-white);
  border-bottom-color:var(--color-steel)}

.site-footer a.footer__social{display:inline-flex;align-items:center;gap:.5rem}
.footer__social svg{width:18px;height:18px;fill:currentColor;flex:none}

.footer__addr{font-style:normal;font-size:1.04rem;line-height:1.72;
  color:var(--color-steel);margin:0 0 var(--s5)}
.footer__addr strong{display:block;color:var(--color-warm-white);font-weight:600;
  margin-bottom:.15rem}

/* Opening hours as a schedule, not a run-on line. */
.footer__hours{margin:0;padding-top:var(--s4);
  border-top:1px solid var(--color-border-dark)}
.footer__hours > div{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);padding:.3rem 0}
.footer__hours dt{font-size:.97rem;color:var(--color-steel)}
.footer__hours dd{margin:0;font-size:.97rem;color:var(--color-warm-white);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--s4) var(--s6);border-top:1px solid var(--color-border-dark);
  margin-top:clamp(2.25rem,4vw,3.25rem);padding-top:var(--s5);
  font-size:.94rem;color:#8A8F98}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)}
.footer__bottom a{font-size:.94rem;color:#8A8F98;min-height:26px}
.footer__bottom a:hover{color:var(--color-warm-white)}

@media (max-width:1000px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--s7) clamp(1.5rem,3vw,2.5rem)}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr;gap:var(--s6)}
  .footer__bar{display:block}
  .footer__cta{margin-top:var(--s5)}
}

.mobile-bar{display:none}
@media (max-width:720px){
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;left:0;right:0;bottom:0;
    z-index:800;background:var(--color-border-dark);border-top:1px solid var(--color-border-dark)}
  .mobile-bar a{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:56px;
    font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
    font-size:1rem;text-decoration:none;background:var(--color-graphite);color:var(--color-warm-white)}
  .mobile-bar a.is-primary{background:var(--color-racing-red);color:#fff}
  .mobile-bar svg{width:17px;height:17px;fill:currentColor}
  body{padding-bottom:57px}
  body[data-menu-open="true"] .mobile-bar{display:none}
}

/* ==========================================================================
   21. Interior pages
   ========================================================================== */
.page-head{background:var(--color-graphite);border-bottom:1px solid var(--color-border-dark);
  padding-block:var(--s8)}
.page-head h1{margin-bottom:var(--s3)}
.crumbs{font-size:.85rem;color:var(--color-steel);margin-bottom:var(--s4)}
.crumbs a{color:var(--color-steel);text-decoration:none}
.crumbs a:hover{color:var(--red-on-dark);text-decoration:underline}
.crumbs .sep{opacity:.5;margin:0 .45rem}

.entry{padding-block:var(--s9);background:var(--color-warm-white);color:var(--color-text-dark)}
.entry__inner{max-width:46rem;margin-inline:auto}
.entry :is(h2,h3,h4){color:var(--color-text-dark);margin-top:var(--s7)}
.entry :is(h2,h3,h4):first-child{margin-top:0}
.entry p{color:var(--color-text-dark);max-width:var(--measure)}
.entry a{color:var(--red-on-light)}
.entry ul,.entry ol{padding-left:1.35rem;margin:0 0 var(--s5);max-width:var(--measure)}
.entry li{margin-bottom:.4rem}
.entry img{border-radius:var(--r-md);margin-block:var(--s5)}
.entry figure{margin:var(--s6) 0}
.entry figcaption{font-size:.88rem;color:var(--muted-on-light);margin-top:.5rem}
.entry table{border-collapse:collapse;width:100%;font-size:.95rem}
.entry :is(th,td){text-align:left;padding:.65rem .85rem;border-bottom:1px solid var(--color-border-light)}
.entry th{background:#E9E5DE;font-weight:600}
.entry .wp-block-table{overflow-x:auto}

.histnote{background:#FBF0DE;border:1px solid #E0C489;border-left:4px solid #B07C12;
  border-radius:var(--r-md);padding:var(--s4) var(--s5);margin-bottom:var(--s6);font-size:.96rem;color:#4A3A16}
.histnote p{margin:0;max-width:none;color:inherit}
.histnote a{color:#8A2B0F}

.pager{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:var(--s7);align-items:center}
.pager ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:46px;
  min-height:46px;padding:0 .7rem;border:1px solid var(--color-border-light);border-radius:var(--r-md);
  color:var(--color-text-dark);text-decoration:none;font-weight:600;background:var(--color-pure-white)}
.pager .page-numbers:hover{border-color:#B9B4AB}
.pager .page-numbers.current{background:var(--color-racing-red);border-color:var(--color-racing-red);color:#fff}

.searchform{display:flex;gap:var(--s3)}
.searchform input{flex:1}

.meta{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-steel)}
:lang(th),.th{font-family:"Noto Sans Thai","Inter",sans-serif;line-height:1.9}

/* --- "Read next" row at the foot of a single post -----------------------
   Sits outside .entry__inner and inside a full .wrap: four cards in a 46rem
   column would be 170px each. Cards with no featured image render a flat panel
   of the same ratio so the row stays even. */
.readnext{background:var(--color-warm-white);color:var(--color-text-dark);
  padding-block:0 clamp(3rem,6vw,5rem);margin-top:calc(var(--s9) * -1);
  padding-top:var(--s9)}
.readnext__title{font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-on-light);
  margin:0 0 var(--s5);padding-top:var(--s5);
  border-top:1px solid var(--color-border-light)}
.readnext__grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2rem)}
.readnext__card{min-width:0}
.readnext__card a{display:flex;flex-direction:column;text-decoration:none;
  color:var(--color-text-dark)}
.readnext__media{display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-sm);background:#E4E0D8;margin-bottom:var(--s4)}
.readnext__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 420ms var(--ease)}
.readnext__card a:hover .readnext__media img{transform:scale(1.04)}
.readnext__media--none{background:linear-gradient(160deg,#E4E0D8,#D6D1C7)}
.readnext__kicker{display:block;font-family:var(--font-body);font-size:.68rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-on-light);margin-bottom:.35rem}
.readnext__name{display:block;font-family:var(--font-display);font-weight:600;
  font-size:1.14rem;line-height:1.25;letter-spacing:.02em;
  text-wrap:balance}
.readnext__card a:hover .readnext__name{color:var(--red-on-light)}
@media (max-width:900px){
  .readnext__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .readnext__grid{grid-template-columns:1fr;gap:var(--s6)}
  .readnext__media{aspect-ratio:16/9}
}

/* --- comparison tables in post content ---------------------------------
   Nothing published before the content programme contained a table, so these
   rules cannot affect existing pages. The wrapper is added by
   faddybike_wrap_content_tables() so a wide table scrolls in its own box
   rather than pushing the page sideways. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:var(--s6) 0;border-top:1px solid var(--color-border-light)}
.table-scroll:focus-visible{outline:2px solid var(--red-on-light);outline-offset:3px}
.entry table{width:100%;min-width:34rem;border-collapse:collapse;
  font-size:.97rem;line-height:1.5}
.entry table caption{caption-side:top;text-align:left;font-family:var(--font-body);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-on-light);padding:var(--s4) 0 var(--s3)}
.entry table th,.entry table td{padding:.8rem .9rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--color-border-light)}
.entry table thead th{font-family:var(--font-display);font-weight:600;
  font-size:1.02rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--color-text-dark);border-bottom-width:2px}
.entry table tbody th{font-weight:600;color:var(--color-text-dark)}
.entry table td{color:var(--muted-on-light)}
.entry table tbody tr:last-child th,.entry table tbody tr:last-child td{border-bottom:0}
@media (max-width:600px){
  .entry table{font-size:.93rem}
  .entry table th,.entry table td{padding:.65rem .6rem}
}

/* ==========================================================================
   22. Parts index page
   --------------------------------------------------------------------------
   /parts/ previously rendered through the generic page template: one 68ch
   column of body text stranded in the middle of the viewport, a bulleted list
   for the supply groups and no call to action anywhere. These blocks give it a
   composition and, more importantly, a function.
   ========================================================================== */
.parts-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(2rem,4.5vw,4.25rem);align-items:center}
.parts-intro__text{min-width:0}
.parts-intro__copy p{font-size:1.05rem;line-height:1.7;color:var(--muted-on-light);
  max-width:56ch;margin:0}
.parts-intro__copy p + p{margin-top:var(--s5)}
.parts-intro__figure{margin:0}
.parts-intro__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);
  background:#E4E0D8;box-shadow:0 26px 54px -34px rgba(24,26,31,.5)}
.parts-intro__media img{width:100%;height:100%;object-fit:cover;display:block}
.parts-intro__figure figcaption{margin-top:var(--s4);font-size:.85rem;
  line-height:1.5;color:var(--muted-on-light);max-width:44ch}

/* Supply groups: a description of what we stock, so a term/value list rather
   than navigation. The bulleted version put the qualifier behind an em dash on
   the same line, which wrapped raggedly at every width. */
.groups{margin:clamp(2.5rem,5vw,4rem) 0 0;
  border-top:1px solid var(--color-border-light);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.75rem,3.5vw,3.25rem)}
.groups > div{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 0;
  border-bottom:1px solid var(--color-border-light)}
.groups dt{font-family:var(--font-display);font-weight:600;font-size:1.14rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-dark)}
.groups dd{margin:0;font-size:.97rem;line-height:1.5;color:var(--muted-on-light)}

/* Category index: hairline rows that open the quote form with the category
   already chosen — the page's first actual route into the catalogue. */
/* The written category guides on /parts/. A plain multi-column list, not
   cards: there are two dozen of them and they are a directory, not a feature. */
.guideindex{list-style:none;margin:var(--s6) 0 0;padding:0;
  columns:3;column-gap:clamp(1.5rem,3vw,3rem)}
.guideindex li{break-inside:avoid;margin:0 0 .55rem}
.guideindex a{font-family:var(--font-body);font-size:1rem;line-height:1.45;
  color:var(--color-text-dark);text-decoration:none;
  border-bottom:1px solid var(--color-border-light);padding-bottom:.1rem}
.guideindex a:hover{color:var(--red-on-light);border-bottom-color:currentColor}
@media (max-width:900px){.guideindex{columns:2}}
@media (max-width:560px){.guideindex{columns:1}}

.catindex{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(4,auto);grid-auto-flow:column;
  column-gap:clamp(1.75rem,3.5vw,3.25rem);
  border-top:1px solid var(--color-border-light)}
.catindex li{border-bottom:1px solid var(--color-border-light);max-width:none}
.catindex a{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s5);padding:1.1rem .25rem;text-decoration:none;
  color:var(--color-text-dark);
  transition:background-color 180ms var(--ease),padding 180ms var(--ease)}
.catindex a:hover{background-color:rgba(24,26,31,.035);padding-inline:.9rem .25rem}
.catindex__name{font-family:var(--font-display);font-weight:600;font-size:1.14rem;
  text-transform:uppercase;letter-spacing:.03em}
.catindex__arw{color:var(--red-on-light);transition:transform 200ms var(--ease)}
.catindex a:hover .catindex__arw{transform:translateX(5px)}

/* Quotation block: the instruction, something to click, and the catalogue note
   set apart as a note rather than buried mid-paragraph. */
.parts-quote{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2rem,4.5vw,4.25rem);align-items:start}
.parts-quote__main h2{margin:0 0 var(--s4);max-width:22ch}
.parts-quote__main .lead{margin:0 0 var(--s7);max-width:54ch}
.parts-quote__mail{margin:var(--s6) 0 0;font-size:.97rem;color:var(--color-steel)}
.parts-quote__mail a{color:var(--color-warm-white)}
.parts-quote__note{align-self:center;padding-top:var(--s5);
  border-top:1px solid var(--color-border-dark)}
.parts-quote__note h3{margin:0 0 var(--s3);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-steel);
  font-family:var(--font-body)}
.parts-quote__note p{margin:0;font-size:.95rem;line-height:1.65;
  color:var(--color-steel);max-width:46ch}

@media (max-width:980px){
  .parts-intro{grid-template-columns:1fr;gap:var(--s7)}
  .parts-intro__figure{max-width:460px}
  .parts-quote{grid-template-columns:1fr;gap:var(--s7)}
}
@media (max-width:620px){
  .groups{grid-template-columns:1fr}
  .catindex{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}

/* ==========================================================================
   23. Shop by model
   --------------------------------------------------------------------------
   Tiles carry the marque as a label above the model name, which is what the
   removed "By manufacturer" block was for — it repeated every model already
   shown above it, and rendered as raw underlined links because .cat-chip had
   been dropped from this stylesheet.
   ========================================================================== */
.model-tile__make{margin:0 0 .3rem;font-family:var(--font-body);font-size:.68rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-steel)}

/* Models without a photograph: hairline rows carrying the same information the
   tiles do, so the two treatments read as one catalogue. */
.modelrows{list-style:none;margin:0;padding:0;max-width:none;
  border-top:1px solid var(--color-border-light)}
.modelrows li{border-bottom:1px solid var(--color-border-light);max-width:none}
.modelrows a{display:grid;
  grid-template-columns:minmax(88px,.5fr) minmax(140px,1fr) minmax(0,2.1fr) auto;
  gap:var(--s5);align-items:baseline;padding:1.15rem .25rem;text-decoration:none;
  color:var(--color-text-dark);
  transition:background-color 180ms var(--ease),padding 180ms var(--ease)}
.modelrows a:hover{background-color:rgba(24,26,31,.035);padding-inline:.9rem .25rem}
.modelrows__make{font-family:var(--font-body);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-on-light)}
.modelrows__name{font-family:var(--font-display);font-weight:600;font-size:1.16rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-dark)}
.modelrows__desc{font-size:.96rem;line-height:1.5;color:var(--muted-on-light)}
.modelrows__hubs{margin:0 0 .9rem;padding-left:.25rem;font-size:.92rem;
  line-height:1.5;color:var(--muted-on-light)}
.modelrows__hubs a{color:var(--color-text-dark);text-decoration:none;
  border-bottom:1px solid var(--color-border-light);padding-bottom:1px}
.modelrows__hubs a:hover{border-bottom-color:var(--red-on-light)}

.modelrows__arw{color:var(--red-on-light);justify-self:end;
  transition:transform 200ms var(--ease)}
.modelrows a:hover .modelrows__arw{transform:translateX(5px)}
@media (max-width:820px){
  .modelrows a{grid-template-columns:1fr auto;gap:.25rem var(--s4);align-items:start}
  .modelrows__make{grid-column:1 / -1}
  .modelrows__desc{grid-column:1 / 2}
  .modelrows__arw{grid-row:2 / 3;grid-column:2 / 3}
}

/* Closing block: the marques, taken from faddybike_makes() so Suzuki — supplied
   but with no model card — is named rather than silently dropped. */
.anymodel{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(2rem,4.5vw,4.25rem);align-items:center}
.anymodel__text h2{margin:0 0 var(--s4);max-width:26ch}
.anymodel__text .lead{margin:0 0 var(--s7);max-width:52ch}
.anymodel__makes{margin:0;padding-top:var(--s5);
  border-top:1px solid var(--color-border-dark)}
.anymodel__makes dt{font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-steel);
  margin-bottom:var(--s3)}
.anymodel__makes dd{margin:0;padding:.55rem 0;font-family:var(--font-display);
  font-weight:600;font-size:1.14rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--color-pure-white);border-bottom:1px solid var(--color-border-dark)}
.anymodel__makes dd:last-child{border-bottom:0}
@media (max-width:900px){
  .anymodel{grid-template-columns:1fr;gap:var(--s7)}
  .anymodel__makes{max-width:420px}
}

/* Restored: the 404 page still uses .cat-chip, and without this rule its
   suggested links render as bare underlined text. */
.cats{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--s5) 0 0}
.cat-chip{display:inline-flex;align-items:center;min-height:38px;
  padding:.45rem .95rem;border:1px solid var(--color-border-dark);
  border-radius:var(--r-lg);font-size:.94rem;text-decoration:none;
  color:var(--color-warm-white);
  transition:border-color 180ms var(--ease),color 180ms var(--ease)}
.cat-chip:hover{border-color:var(--color-steel);color:var(--color-pure-white)}
:is(.band-light,.band-white) .cat-chip{border-color:var(--color-border-light);
  color:var(--color-text-dark)}
:is(.band-light,.band-white) .cat-chip:hover{border-color:var(--color-text-dark)}

/* ==========================================================================
   24. Parts from Japan
   --------------------------------------------------------------------------
   The brand directory is the point of this page: 31 names that were previously
   a single run-on comma-separated paragraph. Four columns of eight hairline
   rows, each opening a quote request with the brand filled in.
   ========================================================================== */
.japan-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(2rem,4.5vw,4.25rem);align-items:center}
.japan-intro__text{min-width:0}
.japan-intro__figure{margin:0}
.japan-intro__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);
  background:#E4E0D8;box-shadow:0 26px 54px -34px rgba(24,26,31,.5)}
.japan-intro__media img{width:100%;height:100%;object-fit:cover;display:block}
.japan-intro__figure figcaption{margin-top:var(--s4);font-size:.85rem;
  line-height:1.5;color:var(--muted-on-light);max-width:44ch}

.japan-offer{margin:var(--s6) 0 0;border-top:1px solid var(--color-border-light)}
.japan-offer > div{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 0;
  border-bottom:1px solid var(--color-border-light)}
.japan-offer dt{font-family:var(--font-display);font-weight:600;font-size:1.18rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-dark)}
.japan-offer dd{margin:0;font-size:.98rem;line-height:1.6;
  color:var(--muted-on-light);max-width:56ch}

/* Lead times, reusing the specification rows from the shipping section rather
   than inventing a second visual language for the same kind of content. */
.japan-times{margin-top:clamp(2.5rem,5vw,4rem);max-width:760px}
.japan-times__title{font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-on-light);
  margin:0 0 var(--s4)}
.japan-times__note{margin:var(--s5) 0 0;font-size:.92rem;line-height:1.6;
  color:var(--muted-on-light);max-width:60ch}

/* Brand directory. 31 does not divide evenly by four, so the last column runs
   one row short — a list ending, not a hole in a grid. */
.branddir{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(8,auto);grid-auto-flow:column;
  column-gap:clamp(1.25rem,2.5vw,2.25rem);
  border-top:1px solid var(--color-border-light)}
.branddir li{border-bottom:1px solid var(--color-border-light);max-width:none}
.branddir a{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);padding:.85rem .2rem;text-decoration:none;
  color:var(--color-text-dark);
  transition:background-color 180ms var(--ease),padding 180ms var(--ease)}
.branddir a:hover{background-color:rgba(24,26,31,.035);padding-inline:.7rem .2rem}
.branddir__name{font-size:1.02rem;line-height:1.35}
.branddir__arw{color:var(--red-on-light);flex:none;
  transition:transform 200ms var(--ease)}
.branddir a:hover .branddir__arw{transform:translateX(4px)}

/* Thai: the same information, given its own band and an English label so an
   English reader knows what they are looking at rather than meeting an
   unexplained block of Thai at the foot of the page. */
.japan-th{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.japan-th__label h2{margin:0 0 .4rem;font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.25}
.japan-th__label p{margin:0;font-family:var(--font-body);font-size:.72rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-steel)}
.japan-th__body{padding-top:var(--s4);
  border-top:1px solid var(--color-border-dark)}
.japan-th__body p{margin:0;font-size:1rem;line-height:1.85;
  color:var(--color-warm-white);max-width:70ch}
.japan-th__body p + p{margin-top:var(--s5);padding-top:var(--s5);
  border-top:1px solid var(--color-border-dark)}

@media (max-width:1100px){
  .branddir{grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(11,auto)}
}
@media (max-width:980px){
  .japan-intro{grid-template-columns:1fr;gap:var(--s7)}
  .japan-intro__figure{max-width:460px}
  .japan-th{grid-template-columns:1fr;gap:var(--s5)}
}
@media (max-width:700px){
  .branddir{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(16,auto)}
}
@media (max-width:460px){
  .branddir{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}

/* ==========================================================================
   25. Motorcycle export
   --------------------------------------------------------------------------
   Both photographs are 420px wide after being cropped above their watermarks,
   so the image columns are sized to that and never upscale. The crops are wide
   (roughly 16:9 and 19:10), which suits the subjects — a row of machines and a
   container mouth are both horizontal — so the media box takes its height from
   the image rather than forcing a ratio on it.
   ========================================================================== */
.export-intro,.export-load{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  gap:clamp(2rem,4.5vw,4.25rem);align-items:center}
.export-load{grid-template-columns:minmax(0,.58fr) minmax(0,1fr)}
.export-intro__text,.export-load__text{min-width:0}

.export-fig{margin:0;max-width:460px;justify-self:stretch}
.export-fig__media{overflow:hidden;border-radius:var(--r-sm);background:#E4E0D8;
  box-shadow:0 24px 50px -32px rgba(24,26,31,.5)}
.export-fig__media img{width:100%;height:auto;display:block}
.export-fig figcaption{margin-top:var(--s4);font-size:.85rem;line-height:1.5;
  color:var(--muted-on-light);max-width:42ch}

.export-intro__copy{margin:0 0 var(--s6);font-size:1.05rem;line-height:1.7;
  color:var(--muted-on-light);max-width:54ch}
.export-intro__copy strong{color:var(--color-text-dark);font-weight:600}
.export-terms{margin-top:0}

/* Routes the export hub to its four detail pages. The hub is deliberately
   short, so the links sit in prose rather than as another block. */
.export-load__more{margin:var(--s6) 0 0;font-size:.95rem;line-height:1.65;
  color:var(--muted-on-light)}
.export-load__more a{color:inherit;text-decoration:underline;
  text-underline-offset:.18em}
.export-load__more a:hover{color:var(--red-on-light)}
.export-load__list{margin:var(--s6) 0 0;
  border-top:1px solid var(--color-border-light)}
.export-load__list > div{display:flex;flex-direction:column;gap:.35rem;
  padding:1.15rem 0;border-bottom:1px solid var(--color-border-light)}
.export-load__list dt{font-family:var(--font-display);font-weight:600;
  font-size:1.18rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--color-text-dark)}
.export-load__list dd{margin:0;font-size:.98rem;line-height:1.62;
  color:var(--muted-on-light);max-width:58ch}

/* The quotation brief was the last sentence of the last paragraph. It is the
   most consequential thing on the page, so it is set as three named terms. */
.export-brief{margin:var(--s6) 0 var(--s7);
  border-top:1px solid var(--color-border-dark)}
.export-brief > div{display:grid;grid-template-columns:minmax(150px,.4fr) 1fr;
  gap:var(--s5);align-items:baseline;padding:.95rem 0;
  border-bottom:1px solid var(--color-border-dark)}
.export-brief dt{font-family:var(--font-display);font-weight:600;font-size:1.14rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--color-pure-white)}
.export-brief dd{margin:0;font-size:.98rem;line-height:1.5;
  color:var(--color-steel)}

@media (max-width:980px){
  .export-intro,.export-load{grid-template-columns:1fr;gap:var(--s7)}
  .export-fig{justify-self:start;max-width:460px}
  .export-load .export-fig{order:2}
}
@media (max-width:520px){
  .export-brief > div{grid-template-columns:1fr;gap:.2rem}
}

/* ==========================================================================
   26. Order policy
   --------------------------------------------------------------------------
   A ten-part policy document read as 3,200px of unbroken body text with the
   section numbers typed into the headings. It now has a sticky index beside it
   and the numerals are markup, not content, so the numbering can never drift
   from the order of the sections.
   ========================================================================== */
.policy{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4.5rem);align-items:start}

.policy__index{position:sticky;top:calc(var(--header-h) + 1.75rem)}
.policy__index-title{font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-on-light);
  margin:0 0 var(--s4);padding-bottom:var(--s3);
  border-bottom:1px solid var(--color-border-light)}
.policy__index ol{list-style:none;margin:0;padding:0;counter-reset:none}
.policy__index a{display:grid;grid-template-columns:2.1rem 1fr;gap:.35rem;
  align-items:baseline;padding:.42rem 0;min-height:26px;text-decoration:none;
  font-size:.95rem;line-height:1.35;color:var(--muted-on-light);
  transition:color 160ms var(--ease)}
.policy__index a:hover{color:var(--color-text-dark)}
.policy__index-num{font-family:var(--font-display);font-weight:600;
  font-variant-numeric:tabular-nums;color:#696F79}

.policy__body{min-width:0;border-top:1px solid var(--color-border-light)}
.policy__sec{display:grid;grid-template-columns:var(--pol-num,3.6rem) minmax(0,1fr);
  gap:0 clamp(1rem,2vw,1.75rem);align-items:start;
  padding:clamp(1.75rem,3vw,2.5rem) 0;
  border-bottom:1px solid var(--color-border-light);
  scroll-margin-top:calc(var(--header-h) + 1.5rem)}
.policy__num{margin:0;font-family:var(--font-display);font-weight:600;
  line-height:.9;font-size:clamp(1.6rem,2.4vw,2.1rem);color:#8C929B;
  font-variant-numeric:tabular-nums}
.policy__sec h3{margin:0 0 var(--s4);font-size:clamp(1.2rem,1.9vw,1.42rem);
  letter-spacing:.02em}
.policy__sec p{margin:0;font-size:1rem;line-height:1.72;
  color:var(--muted-on-light);max-width:66ch}
.policy__sec p + p{margin-top:var(--s5)}
.policy__sec strong{color:var(--color-text-dark);font-weight:600}

.policy__aside{margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--color-border-light);font-size:.94rem}

/* Brand run: names as a single typographic run with hairline dividers, rather
   than 29 of them buried mid-paragraph behind an em dash. */
.policy__brands{list-style:none;margin:var(--s5) 0 0;padding:0;max-width:none;
  display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.policy__brands li{position:relative;font-size:.96rem;color:var(--color-text-dark);
  padding-block:2px}
.policy__brands li + li::before{content:"";position:absolute;left:-.78rem;
  top:.5em;bottom:.5em;width:1px;background:var(--color-border-light)}

.policy__terms{margin:var(--s5) 0 0;border-top:1px solid var(--color-border-light)}
.policy__terms > div{display:grid;grid-template-columns:minmax(150px,.42fr) 1fr;
  gap:var(--s5);align-items:baseline;padding:.8rem 0;
  border-bottom:1px solid var(--color-border-light)}
.policy__terms dt{font-family:var(--font-display);font-weight:600;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-dark)}
.policy__terms dd{margin:0;font-size:.97rem;color:var(--muted-on-light)}

@media (max-width:980px){
  .policy{grid-template-columns:1fr;gap:var(--s7)}
  .policy__index{position:static}
  .policy__index ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--s6)}
}
@media (max-width:600px){
  .policy__sec{grid-template-columns:1fr;gap:.4rem}
  .policy__num{font-size:1.2rem}
  .policy__index ol{grid-template-columns:1fr}
  .policy__terms > div{grid-template-columns:1fr;gap:.2rem}
}

/* ==========================================================================
   27. Dealers directory
   --------------------------------------------------------------------------
   Nine countries holding between one and five dealers each — far too uneven for
   a grid, which would leave six single-name blocks stretched beside Germany's
   five. CSS multicol balances the columns by content instead, so the blocks
   flow and nothing is stretched or stranded. Hairlines therefore run inside
   each country block rather than across the columns, which is correct here:
   the rows belong to their country, not to a shared table.
   ========================================================================== */
.dealers{columns:3;column-gap:clamp(1.75rem,3.5vw,3.25rem)}
@media (max-width:900px){ .dealers{columns:2} }
@media (max-width:560px){ .dealers{columns:1} }

.dealers__group{break-inside:avoid;margin:0 0 clamp(1.75rem,3vw,2.5rem)}
.dealers__group h3{margin:0 0 var(--s3);padding-bottom:var(--s3);
  font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-on-light);
  border-bottom:1px solid var(--color-border-light)}
.dealers__group ul{list-style:none;margin:0;padding:0;max-width:none}
.dealers__group li{border-bottom:1px solid var(--color-border-light);max-width:none}

.dealers a,.dealers__row{display:flex;align-items:baseline;
  justify-content:space-between;gap:var(--s4);padding:.72rem .15rem}
.dealers a{text-decoration:none;color:var(--color-text-dark);
  transition:background-color 180ms var(--ease),padding 180ms var(--ease)}
.dealers a:hover{background-color:rgba(24,26,31,.035);padding-inline:.6rem .15rem}
.dealers__name{font-size:1rem;line-height:1.35}
.dealers__name--plain{color:var(--muted-on-light)}
.dealers__arw{color:var(--red-on-light);flex:none;
  transition:transform 200ms var(--ease)}
.dealers a:hover .dealers__arw{transform:translateX(4px)}

/* Why a name carries no link. Kept quiet, but not hidden: it is the honest
   half of restoring a thirteen-year-old directory. */
.dealers__status{flex:none;font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#6E747E;text-align:right;max-width:13rem;
  line-height:1.35;white-space:nowrap}

/* The provenance note, set as a note rather than buried in body copy. */
.dealers-note{margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--color-border-light)}
.dealers-note h3{margin:0 0 var(--s3);font-family:var(--font-body);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-on-light)}
.dealers-note p{margin:0;font-size:.95rem;line-height:1.65;
  color:var(--muted-on-light);max-width:58ch}
.dealers-note p + p{margin-top:var(--s4)}
.dealers-note strong{color:var(--color-text-dark);font-weight:600}
.dealers-note__cta{margin-top:var(--s5)!important}

/* ==========================================================================
   28. About — offices
   --------------------------------------------------------------------------
   Two offices that are not equivalent: one is current and holds contact
   details, the other is a 2013 record with nothing publishable in it. They are
   set as a pair rather than as matching cards, and the historical one is
   visibly quieter, so the difference reads before the text is.
   ========================================================================== */
.offices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:start}
.offices__card{min-width:0;padding-top:var(--s5);
  border-top:2px solid var(--color-steel)}
.offices__card--past{border-top-color:var(--color-border-dark)}
.offices__card h3{margin:0 0 var(--s4);font-size:clamp(1.28rem,2.1vw,1.6rem)}

.offices address{font-style:normal;margin:0 0 var(--s5);font-size:1rem;
  line-height:1.7;color:var(--color-steel)}
.offices address strong{display:block;color:var(--color-pure-white);
  font-weight:600;margin-bottom:.15rem}

.offices__contact{margin:0;border-top:1px solid var(--color-border-dark)}
.offices__contact > div{display:flex;align-items:baseline;
  justify-content:space-between;gap:var(--s4);padding:.7rem 0;
  border-bottom:1px solid var(--color-border-dark)}
.offices__contact dt{font-size:.9rem;color:var(--color-steel)}
.offices__contact dd{margin:0;font-size:.95rem;color:var(--color-warm-white);
  font-variant-numeric:tabular-nums;text-align:right}
.offices__contact dd a{color:var(--color-warm-white)}

.offices__tag{margin:0 0 var(--s4);font-family:var(--font-body);font-size:.68rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-steel)}
.offices__card--past p{margin:0;font-size:.97rem;line-height:1.7;
  color:var(--color-steel);max-width:52ch}
.offices__card--past p + p{margin-top:var(--s5)}
.offices__card--past strong{color:var(--color-warm-white);font-weight:600}

@media (max-width:820px){
  .offices{grid-template-columns:1fr;gap:var(--s7)}
}

/* ==========================================================================
   29. Contact page aside
   --------------------------------------------------------------------------
   The aside used to end level with the second field of a form that runs on for
   another thousand pixels. It now stretches to the form's height and the Thai
   block is pushed to the foot of the column, so the two columns close together
   instead of one trailing off.
   ========================================================================== */
.enquiry--contact{align-items:stretch}
.enquiry--contact .enquiry__aside{display:flex;flex-direction:column;min-width:0}
.enquiry--contact .enquiry__figure{margin-top:0;margin-bottom:var(--s6)}
/* The source is 420px wide. Below the breakpoint the column is wider than that,
   so the figure is capped rather than stretched — a 420px archive photograph
   blown up on a 3x phone screen is visibly soft, and Lighthouse flags it. */
@media (max-width:960px){
  .enquiry--contact .enquiry__figure{max-width:320px}
}
.enquiry--contact .contact-list{margin-top:0}

.contact-hours{margin-top:var(--s7)}
.contact-hours h3{font-family:var(--font-body);font-size:.68rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--color-steel);
  margin:0 0 var(--s4)}
.contact-hours dl{margin:0;border-top:1px solid var(--color-border-dark)}
.contact-hours dl > div{display:flex;align-items:baseline;
  justify-content:space-between;gap:var(--s4);padding:.62rem 0;
  border-bottom:1px solid var(--color-border-dark)}
.contact-hours dt{font-size:.92rem;color:var(--color-steel)}
.contact-hours dd{margin:0;font-size:.92rem;color:var(--color-warm-white);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* The Thai trading name and street address, anchored to the foot of the column.
   The "please call ahead" line that used to follow them was never in the
   archive and has been removed. */
.contact-th{margin:var(--s7) 0 0;padding-top:var(--s5);
  border-top:1px solid var(--color-border-dark);
  font-size:.95rem;line-height:1.8;color:var(--color-steel)}
@media (min-width:961px){ .contact-th{margin-top:auto} }

/* ==========================================================================
   30. Motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}