/* =============================================================================
   CBR Wheels — homepage layer
   Loaded after main.css. Everything here is additive and namespaced .cbr-*, so
   removing this one file returns the site to the stock template.

   Look: a fitter's counter. Technical numbers set properly, machined edges,
   hi-vis red kept for the things that make the phone ring.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
/* The hero is a fixed-height stage. Copy used to be absolutely positioned over a
   short image, so on wide screens it spilled up across the logo and the nav. */
.cbr-hero{position:relative;min-height:clamp(560px,74vh,820px);display:grid;}
.cbr-hero .carousel-inner,.cbr-hero .carousel-item{height:100%;}
.cbr-hero .carousel-item img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 8s linear;}
.cbr-hero .carousel-item.active img{transform:scale(1);}
.cbr-hero-veil{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(10,11,13,.88) 0%,rgba(10,11,13,.55) 46%,rgba(10,11,13,.1) 78%),
             linear-gradient(0deg,rgba(10,11,13,.8) 0%,rgba(10,11,13,0) 48%);}
.cbr-hero-copy{position:absolute;z-index:3;left:0;right:0;bottom:0;pointer-events:none;
  padding-bottom:clamp(38px,6vh,74px);}
.cbr-hero-copy .container{pointer-events:auto;}
.cbr-hero-title{font-family:var(--cbr-display) !important;color:#fff;font-weight:700;
  font-size:clamp(34px,5.2vw,76px);line-height:.95;letter-spacing:-.01em;margin:0 0 14px;
  text-transform:uppercase;max-width:16ch;}
.cbr-hero-title em{font-style:normal;color:var(--cbr-red);}
.cbr-hero-sub{color:#D6DAE0;font-family:var(--cbr-body);font-size:clamp(15px,1.4vw,17.5px);
  max-width:46ch;margin:0 0 24px;}
.cbr-hero-actions{display:flex;flex-wrap:wrap;gap:12px;}
.cbr-hero .carousel-indicators{bottom:10px;}

/* Spec ribbon under the hero: what a fitter would ask before anything else */
.cbr-ribbon{background:var(--cbr-ink);border-top:1px solid rgba(255,255,255,.07);}
.cbr-ribbon-inner{max-width:1750px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:repeat(4,1fr);}
.cbr-ribbon-cell{padding:22px 18px;border-left:1px solid rgba(255,255,255,.07);}
.cbr-ribbon-cell:first-child{border-left:0;}
.cbr-ribbon-num{font-family:var(--cbr-display);font-size:34px;line-height:1;color:#fff;
  font-weight:700;font-variant-numeric:tabular-nums;}
.cbr-ribbon-num span{color:var(--cbr-red);}
.cbr-ribbon-lab{font-family:var(--cbr-body);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:#8A929C;margin-top:6px;}
@media (max-width:991px){
  .cbr-ribbon-inner{grid-template-columns:repeat(2,1fr);padding:0 16px;}
  .cbr-ribbon-cell:nth-child(3){border-left:0;}
  .cbr-ribbon-cell{border-top:1px solid rgba(255,255,255,.07);}
  .cbr-ribbon-cell:nth-child(-n+2){border-top:0;}
  .cbr-ribbon-num{font-size:27px;}
}
@media (max-width:575px){ .cbr-hero-copy{bottom:8%;} .cbr-hero-title{font-size:34px;} }

/* --- Category tiles ------------------------------------------------------ */
.cbr-feature-section .cbr-feature-card,
.cbr-feature-section [class*="col-"] > div{overflow:hidden;}
.cbr-feature-section img{transition:transform .8s var(--cbr-ease-out);}
.cbr-feature-section [class*="col-"]:hover img{transform:scale(1.07);}

/* --- Rail: scrolls sideways while pinned --------------------------------- */
.cbr-rail-section{background:var(--cbr-bay);padding:64px 0 74px;}

/* overflow-y must be hidden, not visible: with one axis auto the browser makes
   both scrollable, and the mouse wheel then gets trapped in the rail instead of
   scrolling the page. Padding gives the cards' hover lift room inside the clip. */
.cbr-rail-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:14px 0 30px;
  padding-left:max(24px,calc((100vw - 1680px)/2));scrollbar-width:none;}
.cbr-rail-viewport::-webkit-scrollbar{display:none;}
.cbr-rail-track .cbr-card{scroll-snap-align:start;}
.cbr-sec-tools{display:flex;align-items:center;gap:10px;}
.cbr-rail-nav{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--cbr-rule);
  background:#fff;color:var(--cbr-ink);cursor:pointer;border-radius:99px;
  transition:background-color .18s var(--cbr-ease),color .18s var(--cbr-ease),opacity .18s;}
.cbr-rail-nav:hover:not(:disabled){background:var(--cbr-ink);color:#fff;}
.cbr-rail-nav:disabled{opacity:.3;cursor:default;}
.cbr-rail-track{display:flex;gap:22px;width:max-content;padding-right:24px;align-items:stretch;}
.cbr-rail-track .cbr-card{width:320px;flex:0 0 320px;}
.cbr-rail-track .cbr-card-media{aspect-ratio:4/3.5;}
.cbr-rail-track .cbr-card-media img{padding:1.5%;}
.cbr-rail-end{flex:0 0 200px;border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--cbr-ink);color:#fff;text-decoration:none;padding:24px;
  font-family:var(--cbr-display);font-size:26px;font-weight:700;text-transform:uppercase;line-height:1;
  transition:background-color .2s var(--cbr-ease);}
.cbr-rail-end:hover{background:var(--cbr-red);color:#fff;}
.cbr-rail-end svg{align-self:flex-end;}
/* No sideways scroll on touch: the rail just swipes normally */
@media (max-width:991px){
  .cbr-rail-viewport{overflow-x:auto;padding-left:16px;scroll-snap-type:x mandatory;}
  .cbr-rail-track .cbr-card{scroll-snap-align:start;width:230px;flex-basis:230px;}
}

/* --- Editorial split ----------------------------------------------------- */
.cbr-editorial{padding:84px 0;}
.cbr-editorial-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:stretch;}
.cbr-editorial-list{display:grid;gap:18px;align-content:stretch;}
.cbr-card-tall{height:100%;}
.cbr-card-tall .cbr-card-media{aspect-ratio:4/3.1;}
.cbr-card-tall .cbr-card-media img{padding:2%;}
.cbr-card-tall .cbr-card-name{font-size:30px;}
.cbr-card-tall .cbr-card-body{padding:22px 26px 26px;}
.cbr-card-wide{flex-direction:row;align-items:stretch;}
.cbr-card-wide .cbr-card-media{width:150px;flex:0 0 150px;aspect-ratio:auto;}
.cbr-card-wide .cbr-card-body{border-top:0;border-left:1px solid var(--cbr-rule);padding:16px 18px;}
.cbr-card-wide .cbr-card-name{font-size:17px;}
@media (max-width:991px){
  .cbr-editorial-grid{grid-template-columns:1fr;}
  .cbr-editorial{padding:56px 0;}
}

/* --- Mosaic -------------------------------------------------------------- */
.cbr-mosaic-section{background:var(--cbr-bay);padding:84px 0;}
.cbr-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,auto);gap:18px;}
.cbr-mosaic .cbr-card:first-child{grid-column:span 2;grid-row:span 2;}
.cbr-mosaic .cbr-card:first-child .cbr-card-name{font-size:28px;}
@media (max-width:991px){
  .cbr-mosaic{grid-template-columns:repeat(2,1fr);}
  .cbr-mosaic .cbr-card:first-child{grid-column:span 2;grid-row:auto;}
  .cbr-mosaic-section{padding:56px 0;}
}

/* --- Process ------------------------------------------------------------- */
.cbr-process{background:var(--cbr-ink);color:#C3CAD3;padding:66px 0 60px;position:relative;overflow:hidden;}
.cbr-process .cbr-sec-title{color:#fff;}
.cbr-steps{list-style:none;padding:0;margin:0 0 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  position:relative;counter-reset:step;}
.cbr-step{padding:22px 30px 22px 0;border-left:1px solid rgba(255,255,255,.1);padding-left:30px;position:relative;}
.cbr-step:first-child{border-left:0;padding-left:0;}
.cbr-step-num{font-family:var(--cbr-display);font-size:46px;font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.28);display:block;margin-bottom:14px;}
.cbr-step.is-in .cbr-step-num{-webkit-text-stroke-color:var(--cbr-red);transition:-webkit-text-stroke-color .6s var(--cbr-ease);}
.cbr-step-title{font-family:var(--cbr-display) !important;font-size:23px;font-weight:600;color:#fff;
  text-transform:uppercase;margin:0 0 8px;}
.cbr-step p{font-family:var(--cbr-body);font-size:15px;line-height:1.62;margin:0;max-width:34ch;color:#C3CAD3;}
.cbr-process-cta{display:flex;flex-wrap:wrap;gap:12px;}
@media (max-width:991px){
  .cbr-steps{grid-template-columns:1fr;}
  .cbr-step{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:24px 0;}
  .cbr-step:first-child{border-top:0;padding-top:0;}
  .cbr-process{padding:56px 0;}
}


/* =============================================================================
   Find what fits. A real photograph and a working selector, not a render.
   ========================================================================== */
.cbr-fitment{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  background:var(--cbr-ink);}
.cbr-fitment-media{position:relative;overflow:hidden;min-height:520px;}
.cbr-fitment-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cbr-fitment-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,var(--cbr-ink) 99%),
             linear-gradient(0deg,rgba(17,19,22,.5),transparent 55%);}
.cbr-fitment-panel{padding:64px clamp(24px,5vw,80px);display:flex;flex-direction:column;
  justify-content:center;color:#C3CAD3;font-family:var(--cbr-body);}
.cbr-fitment-title{font-family:var(--cbr-display) !important;color:#fff;font-weight:700;
  text-transform:uppercase;font-size:clamp(30px,3.6vw,52px);line-height:1;margin:0 0 14px;}
.cbr-fitment-text{font-size:15.5px;line-height:1.62;max-width:44ch;margin:0 0 26px;color:#C9D0D8;}

.cbr-fitment-form{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px;}
.cbr-field{display:flex;flex-direction:column;gap:6px;}
.cbr-field label{font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#8F98A3;}
.cbr-field select{appearance:none;width:100%;border-radius:10px;background:#242A32 url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238F98A3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid #3A424C;color:#fff;font-family:var(--cbr-body);font-size:15px;
  padding:13px 34px 13px 14px;border-radius:2px;cursor:pointer;
  transition:border-color .18s var(--cbr-ease);}
.cbr-field select:hover:not(:disabled){border-color:#454D57;}
.cbr-field select:focus{outline:2px solid var(--cbr-red);outline-offset:1px;}
.cbr-field select:disabled{opacity:.45;cursor:not-allowed;}
.cbr-fitment-go{grid-column:1/-1;justify-content:center;margin-top:4px;}

.cbr-fitment-list{list-style:none;padding:0;margin:20px 0 14px;display:grid;gap:9px;}
.cbr-fitment-list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;}
.cbr-fitment-list li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:7px;
  border-left:2px solid var(--cbr-red);border-bottom:2px solid var(--cbr-red);transform:rotate(-45deg);}
.cbr-fitment-alt{font-size:14.5px;margin:0;color:#8F98A3;}
.cbr-fitment-alt a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid var(--cbr-red);}

@media (max-width:991px){
  .cbr-fitment{grid-template-columns:1fr;}
  .cbr-fitment-media{min-height:240px;}
  .cbr-fitment-media::after{background:linear-gradient(0deg,var(--cbr-ink) 2%,transparent 60%);}
  .cbr-fitment-panel{padding:34px 20px 44px;}
  .cbr-fitment-form{grid-template-columns:1fr;}
}

/* --- Instagram ------------------------------------------------------------
   The widget brings its own markup, so the frame does the theming and the
   stray template button inside it is brought into line. */
.cbr-social{padding:76px 0 84px;background:#fff;}
.cbr-social-frame{border:1px solid var(--cbr-rule);border-radius:16px;padding:18px;background:var(--cbr-bay);overflow:hidden;}
.cbr-social-frame .sk-ig-load-more-btn,
.cbr-social-frame button{font-family:var(--cbr-body) !important;font-weight:600 !important;
  background:var(--cbr-ink) !important;color:#fff !important;border:0 !important;
  border-radius:2px !important;padding:12px 26px !important;letter-spacing:.02em !important;}
.cbr-social-frame .sk-ig-load-more-btn:hover,
.cbr-social-frame button:hover{background:var(--cbr-red) !important;}
@media (max-width:991px){ .cbr-social{padding:52px 0 60px;} .cbr-social-frame{padding:10px;} }

/* --- Reviews -------------------------------------------------------------- */
.cbr-reviews{background:var(--cbr-ink);padding:76px 0 84px;position:relative;overflow:hidden;}
.cbr-reviews::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 82% 30%,rgba(222,21,24,.12),transparent 70%);}
.cbr-reviews .cbr-sec-title{color:#fff;}
.cbr-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:2;}
.cbr-review{margin:0;background:#191D23;border:1px solid #262C34;border-radius:16px;padding:26px 26px 22px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .3s var(--cbr-ease-out),border-color .3s var(--cbr-ease-out);}
.cbr-review:hover{transform:translateY(-5px);border-color:#39414B;}
.cbr-review-stars{color:var(--cbr-hivis);letter-spacing:3px;font-size:14px;}
.cbr-review blockquote{margin:0;color:#D5DAE1;font-family:var(--cbr-body);font-size:15.5px;
  line-height:1.62;}
.cbr-review figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:8px;
  border-top:1px solid #262C34;}
.cbr-review-badge{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:50%;
  background:var(--cbr-red);color:#fff;font-family:var(--cbr-display);font-weight:700;font-size:15px;
  letter-spacing:.02em;}
.cbr-review figcaption strong{display:block;color:#fff;font-family:var(--cbr-body);font-size:14.5px;font-weight:600;}
.cbr-review figcaption em{font-style:normal;color:#8F98A3;font-size:13px;}
@media (max-width:991px){ .cbr-review-grid{grid-template-columns:1fr;} .cbr-reviews{padding:54px 0 60px;} }

/* =============================================================================
   Homepage, second pass. Loaded last so it wins over the blocks above.
   --cbr-head is the sticky header's height, measured by cbr-scroll.js.
   ========================================================================== */
:root{--cbr-head:84px;}

/* --- Hero ----------------------------------------------------------------
   overflow:hidden is the fix for the half-covered gradient: the photo scales as
   you leave, and without a clip it spilled past the veil onto the band below. */
.cbr-hero{overflow:hidden;isolation:isolate;background:var(--cbr-ink);}
.cbr-hero-shade{position:absolute;inset:0;z-index:2;background:var(--cbr-ink);opacity:0;pointer-events:none;}
.cbr-hero-title .cbr-w{overflow:hidden;vertical-align:top;padding:.04em .02em .06em;margin:-.04em -.02em -.06em;}
.cbr-motion .cbr-hero-title .cbr-c{transform:translate3d(0,112%,0) rotate(5deg);transform-origin:0 100%;}
.cbr-motion .cbr-hero-title.is-set .cbr-c{transform:none;
  transition:transform 1s var(--cbr-ease-out) calc(var(--i) * 24ms + 80ms);}
.cbr-motion .cbr-hero-sub[data-cbr-reveal]{transition-delay:.55s;}
.cbr-motion .cbr-hero-actions[data-cbr-reveal]{transition-delay:.7s;}
.cbr-hero-cue{position:absolute;z-index:3;right:clamp(16px,3.4vw,52px);bottom:clamp(30px,5vh,64px);
  display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;pointer-events:none;
  font:600 10.5px/1 var(--cbr-body);letter-spacing:.26em;text-transform:uppercase;}
.cbr-hero-cue span{writing-mode:vertical-rl;opacity:.7;}
.cbr-hero-cue i{display:block;width:1px;height:58px;background:rgba(255,255,255,.22);position:relative;overflow:hidden;}
.cbr-hero-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:42%;background:var(--cbr-red);
  animation:cbrCue 1.9s var(--cbr-ease) infinite;}
@keyframes cbrCue{from{transform:translateY(-100%);}to{transform:translateY(250%);}}
@media (max-width:991px){.cbr-hero-cue{display:none;}}

/* Ribbon figures roll like an odometer */
.cbr-reel{display:inline-block;height:1em;overflow:hidden;vertical-align:top;}
.cbr-reel > span{display:block;will-change:transform;}
.cbr-reel > span > span{display:block;height:1em;line-height:1;}
.cbr-ribbon-num{font-variant-numeric:tabular-nums;}

/* --- Wheels rail: pinned, travels sideways -------------------------------- */
.cbr-rail-section{padding:clamp(34px,5vh,60px) 0 clamp(26px,4vh,48px);--rail-pad:16px;}
/* The rail bleeds off the right edge, but its heading and first card line up
   with the page container, the same edge as every other section. The template's
   container stops at 1200px, not Bootstrap's 1320. */
@media (min-width:992px){.cbr-rail-section{--rail-pad:calc((100vw - 960px) / 2 + 12px);}}
@media (min-width:1200px){.cbr-rail-section{--rail-pad:calc((100vw - 1140px) / 2 + 12px);}}
@media (min-width:1400px){.cbr-rail-section{--rail-pad:calc((100vw - 1200px) / 2 + 12px);}}
.cbr-rail-section > .container-fluid{padding-left:var(--rail-pad);padding-right:var(--rail-pad);}
.cbr-rail-section .cbr-rail-viewport{padding-left:var(--rail-pad);scroll-padding-left:var(--rail-pad);}
.cbr-rail-track .cbr-card{width:clamp(250px,21vw,330px);flex:0 0 clamp(250px,21vw,330px);}
.cbr-rail-track .cbr-card-media{aspect-ratio:1/0.86;}
.cbr-rail-meter{width:120px;height:2px;background:var(--cbr-rule);position:relative;overflow:hidden;border-radius:2px;}
.cbr-rail-meter i{position:absolute;inset:0;background:var(--cbr-red);transform:scaleX(0);transform-origin:left;}
.cbr-rail-count{font:600 13px var(--cbr-body);color:var(--cbr-ink-soft);font-variant-numeric:tabular-nums;min-width:52px;}
.cbr-rail-count b{color:var(--cbr-ink);}
@media (min-width:992px){
  .cbr-rail-pinned .cbr-rail-viewport{overflow:hidden;scroll-snap-type:none;}
}
@media (max-width:991px){.cbr-rail-meter,.cbr-rail-count{display:none;}}

/* --- The rolling wheel ----------------------------------------------------- */
.cbr-roll{background:var(--cbr-ink);color:#fff;position:relative;overflow:hidden;}
.cbr-roll-stage{position:relative;height:calc(100vh - var(--cbr-head));min-height:560px;max-height:980px;
  display:flex;flex-direction:column;justify-content:flex-start;}
.cbr-roll-inner{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;align-items:flex-start;
  padding-top:clamp(40px,9vh,110px);padding-bottom:calc(clamp(56px,11vh,120px) + 40px);}
.cbr-roll-copy{font-family:var(--cbr-display);font-weight:700;text-transform:uppercase;color:#fff;
  font-size:clamp(30px,3.9vw,64px);line-height:.98;letter-spacing:-.005em;margin:18px 0 0;max-width:min(24ch,56%);
  text-wrap:balance;}
.cbr-roll-copy .cbr-fw{display:inline;}
@media (max-width:991px){.cbr-roll-copy{max-width:none;}}
.cbr-motion .cbr-roll-copy .cbr-fw{opacity:.14;}
.cbr-roll-tag{margin-top:auto;display:flex;flex-direction:column;gap:4px;
  padding-left:16px;border-left:2px solid var(--cbr-red);color:#fff;text-decoration:none;font-family:var(--cbr-body);}
.cbr-roll-tag span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8F98A3;}
.cbr-roll-tag strong{font-family:var(--cbr-display);font-size:24px;text-transform:uppercase;font-weight:600;}
.cbr-roll-tag em{font-style:normal;font-size:13.5px;color:#B7BEC7;font-variant-numeric:tabular-nums;}
.cbr-roll-tag:hover strong{color:var(--cbr-red);}
/* The ground is a fitter's rule: ticks every centimetre, a longer one every five */
.cbr-roll-ground{position:absolute;left:0;right:0;bottom:clamp(56px,11vh,120px);height:26px;z-index:1;
  border-top:1px solid rgba(255,255,255,.28);}
.cbr-roll-ground i{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 38px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 1px,transparent 1px 190px);
  background-size:auto 9px,auto 18px;background-repeat:repeat-x;}
.cbr-roll-wheel{--size:min(52vh,40vw,520px);position:absolute;z-index:2;width:var(--size);height:var(--size);
  right:clamp(16px,7vw,120px);bottom:clamp(56px,11vh,120px);will-change:transform;}
.cbr-roll-wheel img{width:100%;height:100%;display:block;will-change:transform;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));}
.cbr-roll-wheel::after{content:"";position:absolute;left:12%;right:12%;bottom:-10px;height:18px;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(4px);}
@media (max-width:991px){
  .cbr-roll-stage{height:auto;min-height:0;}
  .cbr-roll-inner{padding-bottom:calc(min(62vw,340px) + 96px);}
  .cbr-roll-tag{margin-top:28px;}
  .cbr-roll-wheel{--size:min(62vw,340px);right:16px;bottom:58px;}
  .cbr-roll-ground{bottom:58px;}
}

/* --- Fitment photo opens from a slit --------------------------------------- */
.cbr-fitment-media img{will-change:transform;}

/* --- Tyres: three cards that stack as you scroll ---------------------------- */
.cbr-tyres-section{background:var(--cbr-ink);padding:clamp(56px,9vh,96px) 0 clamp(56px,9vh,96px);}
.cbr-tyres-section .cbr-sec-title{color:#fff;}
.cbr-tyres-section .cbr-eyebrow{color:#fff;opacity:.85;}
.cbr-tyres-section .cbr-sec-link{color:#fff;}
.cbr-stack{display:grid;gap:clamp(22px,4vh,40px);}
.cbr-stack-card{position:sticky;top:calc(var(--cbr-head) + 22px + var(--n) * 16px);
  display:grid;grid-template-columns:1.05fr 1fr;min-height:min(64vh,580px);
  background:#fff;border-radius:22px;overflow:hidden;text-decoration:none;color:var(--cbr-ink);
  transform-origin:50% 0;box-shadow:0 -14px 40px rgba(0,0,0,.28);will-change:transform;}
.cbr-stack-card:hover{color:var(--cbr-ink);}
.cbr-stack-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:4;}
.cbr-stack-text{padding:clamp(28px,4.2vw,64px);display:flex;flex-direction:column;justify-content:center;gap:12px;position:relative;}
.cbr-stack-idx{font:600 12px/1 var(--cbr-body);letter-spacing:.2em;color:var(--cbr-ink-soft);font-variant-numeric:tabular-nums;}
.cbr-stack-code{font-family:var(--cbr-display);font-weight:700;font-size:clamp(88px,11.5vw,176px);line-height:.82;
  letter-spacing:-.02em;color:var(--cbr-ink);margin:6px 0 4px;}
.cbr-stack-card h3{font-family:var(--cbr-display) !important;font-size:clamp(24px,2.2vw,32px);font-weight:600;
  text-transform:uppercase;margin:0;color:var(--cbr-ink);}
.cbr-stack-card p{font-family:var(--cbr-body);max-width:40ch;color:#4B525C;font-size:16px;line-height:1.6;margin:0;}
.cbr-stack-go{margin-top:10px;display:inline-flex;gap:9px;align-items:center;align-self:flex-start;
  font:600 13px/1 var(--cbr-body);letter-spacing:.1em;text-transform:uppercase;color:var(--cbr-red);}
.cbr-stack-go svg{transition:transform .3s var(--cbr-ease-out);}
.cbr-stack-card:hover .cbr-stack-go svg{transform:translateX(6px);}
.cbr-stack-shot{margin:0;position:relative;display:grid;place-items:center;padding:clamp(18px,3vw,40px);
  background:radial-gradient(60% 55% at 50% 55%,#F4F3F1,#fff 70%);}
.cbr-stack-shot img{width:100%;max-width:520px;height:auto;max-height:min(56vh,500px);object-fit:contain;
  transition:transform .8s var(--cbr-ease-out);}
.cbr-stack-card:hover .cbr-stack-shot img{transform:scale(1.04);}
.cbr-stack-shot figcaption{position:absolute;right:22px;bottom:18px;font:500 12px/1 var(--cbr-body);
  letter-spacing:.06em;color:var(--cbr-ink-soft);}
.cbr-tyre-cta{margin-top:clamp(28px,5vh,48px);display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px 24px;}
.cbr-tyre-cta span{font-family:var(--cbr-body);font-size:16px;color:#fff;}
@media (max-width:991px){
  .cbr-stack-card{grid-template-columns:1fr;min-height:0;top:calc(var(--cbr-head) + 12px + var(--n) * 10px);}
  .cbr-stack-shot{order:-1;padding:18px;}
  .cbr-stack-shot img{max-height:240px;}
  .cbr-stack-text{padding:22px 22px 26px;}
}

/* --- Process: heading holds still while a line draws down the steps -------- */
.cbr-process{padding:clamp(64px,10vh,110px) 0;overflow:visible;}
.cbr-process-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,110px);align-items:start;}
.cbr-process-side{position:sticky;top:calc(var(--cbr-head) + 48px);}
.cbr-process-side .cbr-sec-title{font-size:clamp(40px,5vw,78px);line-height:.92;}
.cbr-process-side .cbr-process-cta{margin-top:28px;}
.cbr-steps{grid-template-columns:1fr;margin:0;padding-left:44px;--p:0;}
.cbr-steps::before,.cbr-steps::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;}
.cbr-steps::before{background:rgba(255,255,255,.1);}
.cbr-steps::after{background:var(--cbr-red);transform:scaleY(var(--p));transform-origin:top;}
.cbr-step,.cbr-step:first-child{border-left:0;padding:clamp(34px,7vh,64px) 0;min-height:30vh;
  border-top:1px solid rgba(255,255,255,.08);}
.cbr-step:first-child{border-top:0;padding-top:0;}
.cbr-step-num{font-size:clamp(56px,6vw,92px);margin-bottom:18px;}
.cbr-step-title{font-size:clamp(24px,2.3vw,34px);}
.cbr-step p{font-size:16.5px;max-width:42ch;}
@media (max-width:991px){
  .cbr-process-grid{grid-template-columns:1fr;}
  .cbr-process-side{position:static;}
  .cbr-steps{padding-left:26px;}
  .cbr-step,.cbr-step:first-child{min-height:0;padding:26px 0;}
}


/* --- Find what fits: by vehicle or by tyre size ------------------------------ */
.cbr-search{background:var(--cbr-ink);padding:26px 0 34px;border-top:1px solid rgba(255,255,255,.06);}
.cbr-search-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:18px;}
.cbr-search-label{margin:0;font-family:var(--cbr-display) !important;font-weight:700;text-transform:uppercase;
  color:#fff;font-size:clamp(24px,2.4vw,32px);line-height:1;}
.cbr-search-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:#1B1F24;border:1px solid #262C34;}
.cbr-search-tab{border:0;background:transparent;color:#C8CDD4;padding:10px 20px;border-radius:99px;
  font:600 14px/1 var(--cbr-body) !important;cursor:pointer;transition:background-color .18s,color .18s;}
.cbr-search-tab:hover{color:#fff;}
.cbr-search-tab.is-on{background:#fff;color:var(--cbr-ink);}
.cbr-search-tab:focus-visible{outline:2px solid var(--cbr-red);outline-offset:2px;}
.cbr-veh{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;}
.cbr-veh .cbr-size-field{flex:1 1 200px;}
.cbr-veh .cbr-size-field select:disabled{opacity:.55;cursor:not-allowed;}
@media (max-width:575px){.cbr-veh .cbr-size-go{width:100%;}}
.cbr-fitment-lead{margin:2px 0 8px;max-width:560px;}


/* =============================================================================
   Final pass, 8 October 2026 (homepage)
   ========================================================================== */
/* Slide markers: thin bars above the dark veil (they sat under it as dull grey
   squares); the arrows went, swiping and the bars do the job. On phones the bars sit
   at the top of the photo, clear of the headline. */
.cbr-hero .carousel-control-prev,.cbr-hero .carousel-control-next{display:none;}
.cbr-hero .carousel-indicators{z-index:4;gap:8px;margin-bottom:0;}
.cbr-hero .carousel-indicators [data-bs-target]{width:30px;height:3px;border:0;margin:0;border-radius:2px;
  background:#fff;opacity:.35;transition:opacity .3s ease,background-color .3s ease;}
.cbr-hero .carousel-indicators .active{opacity:1;background:var(--cbr-red);}
@media (min-width:992px){ .cbr-hero .carousel-indicators{left:auto;right:clamp(24px,4vw,64px);bottom:clamp(38px,6vh,74px);justify-content:flex-end;margin:0;} }
@media (max-width:991px){ .cbr-hero .carousel-indicators{top:16px;bottom:auto;right:16px;left:auto;margin:0;justify-content:flex-end;} }

/* Spec strip on the page container, numbers one colour */
.cbr-ribbon-inner{max-width:none;padding:0;}
.cbr-ribbon-cell:first-child{padding-left:0;}
.cbr-ribbon-num,.cbr-ribbon-num span{color:var(--cbr-red);}
@media (max-width:991px){ .cbr-ribbon-inner{padding:0;} .cbr-ribbon-cell:nth-child(odd){padding-left:0;} }

/* Category tiles: on the page container, three across from tablet, and the same
   tight capitals as every other heading */
.aqf-banner-2-area .cbr-tiles{margin-bottom:clamp(36px,6vh,64px);}
.aqf-banner-2-area .roh-content h3{font-family:var(--cbr-display) !important;font-weight:700;letter-spacing:-.005em;text-transform:uppercase;font-size:clamp(28px,2.6vw,38px);}
.aqf-banner-2-area .roh-badge{background:rgba(17,19,22,.55);backdrop-filter:blur(4px);}
.aqf-banner-2-area .aq-btn-border{text-transform:none;letter-spacing:.01em;font-family:var(--cbr-body) !important;font-weight:600;}

/* Instagram: one frame, not a box in a box */
.cbr-social-frame{border:0;padding:0;background:none;border-radius:0;}
.cbr-social-frame .sk-ig-load-more-btn,.cbr-social-frame button{border-radius:99px !important;padding:14px 28px !important;}

/* Tyre photos: the white of the photo melts into the card; caption under the tyre on phones */
.cbr-stack-shot img{mix-blend-mode:multiply;}
@media (max-width:991px){ .cbr-stack-shot figcaption{position:static;margin-top:8px;text-align:right;} }

/* Two dark sections in a row read as one long empty band; a hairline and less air between */
.cbr-process + .cbr-reviews{border-top:1px solid rgba(255,255,255,.07);padding-top:clamp(48px,7vh,72px);}
.cbr-fitment + .cbr-roll{border-top:1px solid rgba(255,255,255,.07);}

/* Switching search tabs does not make the page jump */
@media (min-width:992px){ .cbr-search-panel{min-height:84px;} }

/* One 16px gutter on phones */
@media (max-width:991px){ .cbr-fitment-panel{padding:34px 16px 44px;} }
.aqf-banner-2-area .roh-item img{width:100%;aspect-ratio:616 / 560;object-fit:cover;display:block;}
.aqf-banner-2-area .roh-content h3{text-transform:uppercase !important;font-size:clamp(28px,2.6vw,38px) !important;}
@media (min-width:992px){ .cbr-hero .carousel-indicators{right:clamp(72px,7vw,120px);} }