/* V17 content presentation. Inspired by control panels and editorial layouts, without copying the reference branding. */
:root{--v17-ink:#061a3a;--v17-blue:#1266e8;--v17-gold:#ffb21c;--v17-cyan:#50c9ff;--v17-line:#d9e4f1}

/* Service spotlight: one complete service with every option visible beside it. */
.spotlight-shell-v17{display:grid;grid-template-columns:minmax(0,1fr) 330px;min-height:430px;border:1px solid #d9e4f1;border-radius:26px;background:#fff;box-shadow:0 24px 70px rgba(6,35,82,.14);overflow:hidden}
#services .service-spotlight-v17{position:relative!important;display:block!important;width:100%!important;height:430px!important;min-height:430px!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#061a3a!important}
#services .service-spotlight-v17>.service-card{position:absolute!important;inset:0!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;width:100%!important;height:100%!important;min-height:0!important;padding:42px!important;border:0!important;border-radius:0!important;background:#061a3a!important;box-shadow:none!important;opacity:0!important;visibility:hidden!important;transform:translateX(36px) scale(.985)!important;transition:opacity .48s ease,transform .48s ease,visibility .48s!important;overflow:hidden!important}
#services .service-spotlight-v17>.service-card.is-spotlight-active{opacity:1!important;visibility:visible!important;transform:none!important;z-index:2!important}
#services .service-spotlight-v17>.service-card:before{content:""!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;border:0!important;background-position:center!important;background-size:cover!important;filter:saturate(.94) contrast(1.03)!important;transform:scale(1.025)!important}
#services .service-spotlight-v17>.service-card:after{content:""!important;position:absolute!important;inset:0!important;height:auto!important;background:linear-gradient(90deg,rgba(3,17,39,.97) 0%,rgba(4,25,57,.88) 42%,rgba(4,25,57,.18) 100%),linear-gradient(0deg,rgba(3,17,39,.86),transparent 55%)!important}
#services .service-spotlight-v17>.service-card:nth-child(1):before{background-image:url('/technician-tyre-fitting-768.webp')!important}
#services .service-spotlight-v17>.service-card:nth-child(2):before{background-image:url('/mobile-tyre-fitting-768.webp')!important}
#services .service-spotlight-v17>.service-card:nth-child(3):before{background-image:url('/defender-tyre-change-768.webp')!important}
#services .service-spotlight-v17>.service-card:nth-child(4):before{background-image:url('/roadside-mobile-van-768.webp')!important}
#services .service-spotlight-v17>.service-card:nth-child(5):before{background-image:url('/puncture-inspection-768.webp')!important}
#services .service-spotlight-v17>.service-card:nth-child(6):before{background-image:url('/mobile-workshop-768.webp')!important}
#services .service-spotlight-v17 .service-card-topline,#services .service-spotlight-v17 h3,#services .service-spotlight-v17 p,#services .service-spotlight-v17 a{position:relative!important;z-index:3!important;max-width:590px!important}
#services .service-spotlight-v17 .service-card-topline{justify-content:flex-start!important;gap:13px!important;margin:0 0 14px!important}
#services .service-spotlight-v17 .service-icon{width:48px!important;height:48px!important;border:1px solid rgba(255,255,255,.3)!important;background:rgba(255,255,255,.13)!important;color:#fff!important;box-shadow:none!important;backdrop-filter:blur(8px)}
#services .service-spotlight-v17 .service-card-topline small{order:-1;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#ffb21c;color:#061a3a!important;font-size:.8rem!important}
#services .service-spotlight-v17 h3{margin:0 0 11px!important;color:#fff!important;font-size:clamp(1.8rem,3vw,2.65rem)!important;line-height:1.05!important;letter-spacing:-.045em!important}
#services .service-spotlight-v17 p{margin:0!important;color:#d9e7fb!important;font-size:.93rem!important;line-height:1.65!important}
#services .service-spotlight-v17 a{width:max-content!important;margin-top:22px!important;padding:12px 15px!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:11px!important;background:rgba(255,255,255,.1)!important;color:#fff!important;font-size:.76rem!important;backdrop-filter:blur(8px)}

.spotlight-nav-v17{display:flex;flex-direction:column;min-width:0;background:linear-gradient(155deg,#fff,#eef4fc)}
.spotlight-tab-list-v17{display:grid;grid-template-rows:repeat(6,1fr);flex:1;min-height:0}
.spotlight-tab-v17{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:11px;width:100%;padding:10px 17px;border:0;border-bottom:1px solid #dde6f1;background:transparent;color:#3a4b66;text-align:left;cursor:pointer;transition:background .25s,color .25s,padding .25s}
.spotlight-tab-v17 span:first-child{color:#8b9ab0;font-size:.67rem;font-weight:900;letter-spacing:.08em}
.spotlight-tab-v17 span:last-child{font-size:.79rem;font-weight:800;line-height:1.25}
.spotlight-tab-v17:hover{background:#e9f2ff;color:#0b4ba6}
.spotlight-tab-v17.is-active{padding-left:22px;background:linear-gradient(90deg,#ffb21c,#ffd067);color:#061a3a}
.spotlight-tab-v17.is-active span:first-child{color:#5b3b00}
.spotlight-controls-v17,.rail-controls-v17,.magazine-controls-v17{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:11px 14px;background:#061a3a}
.spotlight-controls-v17 button,.rail-controls-v17 button,.magazine-controls-v17 button{display:grid;place-items:center;width:35px;height:35px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-weight:900}
.spotlight-progress-v17,.rail-progress-v17,.magazine-progress-v17{display:flex;flex:1;gap:5px}
.spotlight-progress-v17 i,.rail-progress-v17 i,.magazine-progress-v17 i{display:block;height:3px;flex:1;border-radius:10px;background:rgba(255,255,255,.2);transition:background .25s,transform .25s}
.spotlight-progress-v17 i.is-active,.rail-progress-v17 i.is-active,.magazine-progress-v17 i.is-active{background:#ffb21c;transform:scaleY(1.6)}

/* Detailed pages: an expanding service rail where all four choices remain visible. */
#service-pages .expanding-rail-v17{display:flex!important;align-items:stretch!important;gap:10px!important;width:100%!important;height:330px!important;margin:0!important;padding:0!important;overflow:hidden!important}
#service-pages .expanding-rail-v17>.service-card{position:relative!important;flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:330px!important;height:330px!important;padding:24px 18px!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:20px!important;cursor:pointer!important;transition:flex .5s cubic-bezier(.2,.8,.2,1),filter .35s,transform .35s!important;overflow:hidden!important}
#service-pages .expanding-rail-v17>.service-card.is-expanded{flex:3.25 1 0!important;padding:31px!important;filter:saturate(1.12)!important}
#service-pages .expanding-rail-v17>.service-card:not(.is-expanded){filter:saturate(.75) brightness(.78)!important}
#service-pages .expanding-rail-v17>.service-card:not(.is-expanded):hover{filter:saturate(1) brightness(.94)!important;transform:translateY(-3px)!important}
#service-pages .expanding-rail-v17 .service-card-topline{position:relative;z-index:2}
#service-pages .expanding-rail-v17 .service-icon{transition:width .35s,height .35s,background .35s!important}
#service-pages .expanding-rail-v17>.service-card:not(.is-expanded) .service-icon{width:40px!important;height:40px!important;font-size:.72rem!important}
#service-pages .expanding-rail-v17 h3{position:relative;z-index:2;min-width:190px;transition:opacity .25s,transform .35s!important}
#service-pages .expanding-rail-v17 p,#service-pages .expanding-rail-v17 a{position:relative;z-index:2;transition:opacity .22s,transform .35s!important}
#service-pages .expanding-rail-v17>.service-card:not(.is-expanded) h3{position:absolute;left:50%;bottom:25px;margin:0!important;font-size:.88rem!important;white-space:nowrap;transform:translateX(-50%) rotate(-90deg);transform-origin:center;opacity:.72}
#service-pages .expanding-rail-v17>.service-card:not(.is-expanded) p,#service-pages .expanding-rail-v17>.service-card:not(.is-expanded) a{opacity:0!important;pointer-events:none!important;transform:translateY(15px)!important}
#service-pages .rail-controls-v17{width:min(440px,100%);margin:14px 0 0 auto;border-radius:13px;background:#0a2f67}

/* Guides: a magazine feature with three compact live previews. */
#guides .guide-magazine-v17{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:repeat(3,98px)!important;gap:11px!important;width:100%!important;height:316px!important;margin:0!important;padding:0!important;overflow:visible!important}
#guides .guide-magazine-v17>.guide-teaser{position:relative!important;display:flex!important;flex-direction:column!important;justify-content:center!important;width:auto!important;min-height:0!important;margin:0!important;padding:18px 21px!important;border:1px solid #dbe5f1!important;border-radius:17px!important;background:#fff!important;box-shadow:0 10px 28px rgba(6,35,82,.06)!important;overflow:hidden!important;transition:transform .4s,box-shadow .4s,background .4s!important}
#guides .guide-magazine-v17>.guide-teaser.is-magazine-active{grid-column:1/8!important;grid-row:1/4!important;justify-content:flex-end!important;padding:33px!important;border:0!important;background:#061a3a!important;box-shadow:0 22px 60px rgba(6,35,82,.2)!important;color:#fff!important}
#guides .guide-magazine-v17>.guide-teaser[data-slot="1"]{grid-column:8/13!important;grid-row:1!important}
#guides .guide-magazine-v17>.guide-teaser[data-slot="2"]{grid-column:8/13!important;grid-row:2!important}
#guides .guide-magazine-v17>.guide-teaser[data-slot="3"]{grid-column:8/13!important;grid-row:3!important}
#guides .guide-magazine-v17>.guide-teaser.is-magazine-active:before{content:"";position:absolute;inset:0;background-position:center;background-size:cover;opacity:.52;transform:scale(1.025)}
#guides .guide-magazine-v17>.guide-teaser.is-magazine-active:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,17,39,.98),rgba(3,17,39,.13) 78%)}
#guides .guide-magazine-v17>.guide-teaser:nth-child(1):before{background-image:url('/roadside-mobile-van-768.webp')}
#guides .guide-magazine-v17>.guide-teaser:nth-child(2):before{background-image:url('/puncture-inspection-768.webp')}
#guides .guide-magazine-v17>.guide-teaser:nth-child(3):before{background-image:url('/puncture-repair-service-1024.webp')}
#guides .guide-magazine-v17>.guide-teaser:nth-child(4):before{background-image:url('/mobile-tyre-fitting-768.webp')}
#guides .guide-magazine-v17 span,#guides .guide-magazine-v17 h3,#guides .guide-magazine-v17 a{position:relative;z-index:2}
#guides .guide-magazine-v17>.guide-teaser.is-magazine-active span{color:#ffbf3d!important}
#guides .guide-magazine-v17>.guide-teaser.is-magazine-active h3{max-width:520px;margin:10px 0 20px!important;color:#fff!important;font-size:2rem!important;line-height:1.08!important;letter-spacing:-.04em!important}
#guides .guide-magazine-v17>.guide-teaser.is-magazine-active a{width:max-content;padding:10px 13px;border:1px solid rgba(255,255,255,.28);border-radius:10px;color:#fff!important;background:rgba(255,255,255,.1)}
#guides .guide-magazine-v17>.guide-teaser:not(.is-magazine-active){cursor:pointer}
#guides .guide-magazine-v17>.guide-teaser:not(.is-magazine-active):hover{transform:translateX(-5px);box-shadow:0 15px 36px rgba(6,35,82,.12)!important}
#guides .guide-magazine-v17>.guide-teaser:not(.is-magazine-active) h3{margin:6px 0!important;font-size:.94rem!important}
#guides .guide-magazine-v17>.guide-teaser:not(.is-magazine-active) a{font-size:.7rem!important}
#guides .magazine-controls-v17{width:min(420px,100%);margin:13px 0 0 auto;border-radius:13px;background:#0a2f67}

/* Reviews occupy the complete desktop width instead of leaving an empty column. */
#reviews .reviews-layout{row-gap:0!important}
@media(min-width:901px){
  #reviews .reviews-copy{grid-column:1/-1!important;display:grid!important;grid-template-columns:minmax(360px,.72fr) minmax(560px,1.28fr)!important;grid-template-rows:auto!important;column-gap:clamp(46px,6vw,86px)!important;align-items:start!important;width:100%!important}
  #reviews .reviews-copy>.eyebrow,#reviews .reviews-copy>h2,#reviews .reviews-copy>p,#reviews .reviews-copy>.rating-panel,#reviews .reviews-copy>.reviews-actions{grid-column:1!important}
  #reviews .reviews-copy>.google-review-carousel{grid-column:2!important;grid-row:1/7!important;width:100%!important;max-width:none!important;margin:0!important}
  #reviews .google-review-slide{padding:27px 30px!important}
  #reviews .gallery-heading-v16{margin-top:30px!important}
}

@media(max-width:900px){
  .spotlight-shell-v17{grid-template-columns:1fr;min-height:0}
  #services .service-spotlight-v17{height:390px!important;min-height:390px!important}
  .spotlight-nav-v17{display:block}
  .spotlight-tab-list-v17{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .spotlight-tab-list-v17::-webkit-scrollbar{display:none}
  .spotlight-tab-v17{flex:0 0 42%;min-height:62px;border-right:1px solid #dde6f1;border-bottom:1px solid #dde6f1;scroll-snap-align:start}
  #service-pages .expanding-rail-v17>.service-card.is-expanded{flex:5.5 1 0!important}
}

@media(max-width:700px){
  #services .service-spotlight-v17{height:374px!important;min-height:374px!important}
  #services .service-spotlight-v17>.service-card{padding:22px!important}
  #services .service-spotlight-v17>.service-card:after{background:linear-gradient(0deg,rgba(3,17,39,.98) 0%,rgba(3,17,39,.72) 55%,rgba(3,17,39,.12) 100%)!important}
  #services .service-spotlight-v17 h3{font-size:1.72rem!important}
  #services .service-spotlight-v17 p{font-size:.79rem!important;line-height:1.55!important}
  #services .service-spotlight-v17 a{margin-top:15px!important}
  .spotlight-tab-v17{flex-basis:54%;padding:9px 12px}

  #service-pages .expanding-rail-v17{height:310px!important;gap:6px!important}
  #service-pages .expanding-rail-v17>.service-card{height:310px!important;min-height:310px!important;padding:15px 8px!important;border-radius:15px!important}
  #service-pages .expanding-rail-v17>.service-card.is-expanded{padding:23px 18px!important;flex:7.4 1 0!important}
  #service-pages .expanding-rail-v17>.service-card:not(.is-expanded){flex:.75 1 0!important}
  #service-pages .expanding-rail-v17>.service-card:not(.is-expanded) .service-icon{width:28px!important;height:28px!important;font-size:.58rem!important}
  #service-pages .expanding-rail-v17>.service-card:not(.is-expanded) h3{display:none!important}
  #service-pages .expanding-rail-v17>.service-card.is-expanded h3{font-size:1.25rem!important}
  #service-pages .expanding-rail-v17>.service-card.is-expanded p{font-size:.75rem!important}
  #service-pages .rail-controls-v17{margin-top:10px}

  #guides .guide-magazine-v17{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:245px 92px!important;height:348px!important;gap:8px!important}
  #guides .guide-magazine-v17>.guide-teaser.is-magazine-active{grid-column:1/4!important;grid-row:1!important;padding:23px!important}
  #guides .guide-magazine-v17>.guide-teaser[data-slot="1"]{grid-column:1!important;grid-row:2!important}
  #guides .guide-magazine-v17>.guide-teaser[data-slot="2"]{grid-column:2!important;grid-row:2!important}
  #guides .guide-magazine-v17>.guide-teaser[data-slot="3"]{grid-column:3!important;grid-row:2!important}
  #guides .guide-magazine-v17>.guide-teaser.is-magazine-active h3{max-width:90%;font-size:1.55rem!important;margin-bottom:13px!important}
  #guides .guide-magazine-v17>.guide-teaser:not(.is-magazine-active){align-items:center;padding:8px!important;text-align:center}
  #guides .guide-magazine-v17>.guide-teaser:not(.is-magazine-active) span{font-size:.56rem!important}
  #guides .guide-magazine-v17>.guide-teaser:not(.is-magazine-active) h3{font-size:.7rem!important;line-height:1.2!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  #guides .guide-magazine-v17>.guide-teaser:not(.is-magazine-active) a{display:none!important}
  #guides .magazine-controls-v17{margin-top:10px}

  #reviews .reviews-copy{display:block!important}
  #reviews .google-review-carousel{max-width:none!important}
}

@media(prefers-reduced-motion:reduce){
  #services .service-spotlight-v17>.service-card,#service-pages .expanding-rail-v17>.service-card,#guides .guide-magazine-v17>.guide-teaser{transition:none!important}
}
