/* Toyota of Coconut Creek – "Why Service Here" Genie page (MOTCC-1026-54907)
   Scoped to .wsh so it cannot affect the rest of the site. */
.wsh{--wsh-red:#FF0000;--wsh-red2:#FF0202;--wsh-cyan:#00CEFF;--wsh-blue:#374FF5;--wsh-blue2:#3950F5;--wsh-navy:#1C2378;--wsh-navy2:#1E2679;--wsh-lime:#C1F000;--wsh-yellow:#FFCD00;--wsh-orange:#FF9500;--wsh-orange2:#FF9602;
  font-family:'ToyotaType-Book','Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.45;color:#000;background:#FFF;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip;margin-top:-26px}
.wsh *,.wsh *:before,.wsh *:after{box-sizing:border-box}
.wsh img{max-width:100%;height:auto;border:0}
.wsh p,.wsh li{-webkit-text-stroke:.35px currentColor}
.wsh .wsh-wrap{width:100%;max-width:1430px;margin:0 auto;padding:0 20px}
.wsh .wsh-section{padding:clamp(36px,4.5vw,70px) 0}
.wsh .wsh-section.wsh-pt0{padding-top:0}

/* Display type (Google Font "Bungee" – closest web match to the design's RACE1 Brannt) */
.wsh .wsh-display,.wsh h2.wsh-display,.wsh h3.wsh-display{font-family:'Bungee','ToyotaType-Semibold',Impact,sans-serif !important;font-weight:400 !important;text-transform:uppercase;line-height:1 !important;letter-spacing:0;-webkit-text-stroke:0}
.wsh .wsh-eyebrow{font-size:clamp(17px,1.7vw,27px);color:var(--wsh-navy);margin:0 0 6px}
.wsh .wsh-h2{font-size:clamp(30px,4.5vw,72px);color:var(--wsh-blue);margin:0 0 18px}
.wsh .wsh-lead{font-size:clamp(16px,1.56vw,25px);line-height:1.35;margin:0}

/* Buttons */
.wsh .wsh-btns{display:flex;flex-wrap:wrap;gap:12px clamp(16px,2.9vw,46px);justify-content:center}
.wsh .wsh-btn{display:inline-flex;align-items:center;justify-content:center;min-width:min(280px,100%);min-height:44px;padding:.5em 1.3em .7em;
  border:2px solid #FFF;border-radius:999px;font-family:'ToyotaType-Book','Helvetica Neue',Arial,sans-serif;font-weight:400;-webkit-text-stroke:.4px currentColor;
  font-size:clamp(15px,1.25vw,20px);line-height:1;text-align:center;text-decoration:none !important;white-space:nowrap;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.wsh .wsh-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.22)}
.wsh .wsh-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.wsh .wsh-btn:focus-visible{outline:3px solid var(--wsh-yellow);outline-offset:3px}
.wsh .wsh-btn-white{background:#FFF;color:var(--wsh-red) !important}
.wsh .wsh-btn-white:hover,.wsh .wsh-btn-white:focus-visible{background:var(--wsh-navy);border-color:var(--wsh-navy);color:#FFF !important}
.wsh .wsh-btn-ghost{background:transparent;color:#FFF !important}
.wsh .wsh-btn-ghost:hover,.wsh .wsh-btn-ghost:focus-visible{background:#FFF;color:var(--wsh-red) !important}
.wsh .wsh-btn-navy{background:var(--wsh-navy);border-color:var(--wsh-navy);color:#FFF !important}
.wsh .wsh-btn-navy:hover,.wsh .wsh-btn-navy:focus-visible{background:var(--wsh-blue);border-color:var(--wsh-blue)}

/* Inline text links */
.wsh .wsh-link{color:inherit !important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease}
.wsh .wsh-link:hover,.wsh .wsh-link:focus-visible{color:var(--wsh-link-hover,var(--wsh-yellow)) !important;text-decoration-thickness:2px}
.wsh .wsh-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* HERO */
.wsh .wsh-hero{background:var(--wsh-cyan)}
.wsh .wsh-hero-in{position:relative;display:flex;align-items:flex-end;background:var(--wsh-red);border-radius:clamp(36px,6vw,95px);overflow:hidden}
.wsh .wsh-hero-copy{flex:1 1 auto;align-self:center;text-align:center;padding:clamp(28px,3.6vw,58px) clamp(16px,1.5vw,24px) clamp(26px,3.4vw,54px) clamp(18px,3.6vw,58px)}
.wsh .wsh-hero h1{margin:0 0 clamp(12px,1.6vw,26px);padding:0;line-height:0}
.wsh .wsh-hero h1 img{width:100%;max-width:1150px;display:inline-block}
.wsh .wsh-hero p{color:#FFF;font-size:clamp(16px,1.62vw,26px);line-height:1.18;max-width:960px;margin:0 auto clamp(18px,2.2vw,36px)}
.wsh .wsh-hero-genie{flex:0 0 28%;max-width:450px;line-height:0}
.wsh .wsh-hero-genie img{display:block;width:100%}

/* TRUST STRIP */
.wsh .wsh-trust{padding:clamp(16px,1.8vw,28px) 0 0}
.wsh .wsh-trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;margin:0;padding:0;list-style:none}
.wsh .wsh-trust-row + .wsh-trust-row{margin-top:8px}
.wsh .wsh-trust-row li{display:inline-flex;align-items:center;gap:10px;padding:2px 18px;font-size:clamp(15px,1.5vw,24px);line-height:1.2}
.wsh .wsh-trust-row li + li{border-left:2px solid #000}
.wsh .wsh-trust-row img{width:clamp(22px,1.9vw,30px);flex:0 0 auto}

/* VALUE CARDS */
.wsh .wsh-center{text-align:center}
.wsh .wsh-intro .wsh-lead{max-width:1400px;margin:0 auto}
.wsh .wsh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:clamp(28px,2.6vw,40px)}
.wsh .wsh-card{background:var(--wsh-navy);--wsh-link-hover:var(--wsh-lime)}
.wsh .wsh-card-in{height:100%;background:var(--wsh-blue2);border-radius:clamp(34px,4vw,65px);padding:clamp(24px,2vw,32px) clamp(22px,1.9vw,30px) clamp(26px,2.2vw,36px)}
.wsh .wsh-card h3{font-size:clamp(24px,2.25vw,36px);color:var(--wsh-lime);margin:0 0 clamp(12px,1.1vw,18px)}
.wsh .wsh-card p{color:#FFF;font-size:clamp(15px,1.25vw,20px);line-height:1.18;margin:0}

/* $35.55 OIL CHANGE BANNER */
.wsh .wsh-oil{position:relative;margin-top:clamp(56px,6vw,96px);background:var(--wsh-red)}
.wsh .wsh-oil-in{position:relative;display:flex;align-items:center;min-height:clamp(280px,25.5vw,354px);background:var(--wsh-orange2);border-radius:clamp(36px,6.2vw,99px)}
.wsh .wsh-oil-splash{position:absolute;left:0;top:50%;transform:translateY(-56%);width:44%;max-width:640px;overflow:hidden;line-height:0;pointer-events:none;z-index:1}
.wsh .wsh-oil-splash img{display:block;width:107%;max-width:none;margin-left:-7%}
.wsh .wsh-oil-copy{position:relative;z-index:2;width:100%;text-align:center;padding:clamp(22px,2.6vw,42px) clamp(20px,3vw,48px) clamp(24px,2.6vw,42px) 29%}
.wsh .wsh-oil h2{margin:0 0 clamp(10px,1vw,16px);padding:0;line-height:0}
.wsh .wsh-oil h2 img{width:100%;max-width:880px;display:inline-block}
.wsh .wsh-oil p{color:#FFF;font-size:clamp(15px,1.25vw,20px);line-height:1.18;max-width:980px;margin:0 auto clamp(14px,1.4vw,22px)}

/* PRICE MATCH + LOANERS / FINANCING – two-up cards */
.wsh .wsh-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.wsh .wsh-promo{background:var(--wsh-orange)}
.wsh .wsh-promo-in{position:relative;height:100%;display:flex;flex-direction:column;background:var(--wsh-red2);border-radius:clamp(36px,6.4vw,103px);padding:clamp(30px,3.4vw,54px) clamp(24px,2.3vw,37px) clamp(28px,2.5vw,40px);overflow:hidden}
.wsh .wsh-promo h3{position:relative;z-index:2;font-size:clamp(24px,2.25vw,36px);color:var(--wsh-yellow);margin:0 0 clamp(12px,1.1vw,18px)}
.wsh .wsh-promo p{position:relative;z-index:2;color:#FFF;font-size:clamp(15px,1.25vw,20px);line-height:1.18;margin:0 0 clamp(18px,2.2vw,36px)}
.wsh .wsh-promo .wsh-btns{position:relative;z-index:2;justify-content:flex-start;margin-top:auto}
.wsh .wsh-promo-genie h3,.wsh .wsh-promo-genie p{max-width:68%}
.wsh .wsh-promo-genie-img{position:absolute;right:0;bottom:0;z-index:1;height:96%;max-height:400px;width:auto;max-width:34%;object-fit:contain;object-position:right bottom}

/* TIRES */
.wsh .wsh-tires-head .wsh-eyebrow{color:var(--wsh-blue)}
.wsh .wsh-tires-head .wsh-h2{color:var(--wsh-navy);max-width:64%}
.wsh .wsh-tires{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);align-items:start;gap:20px}
.wsh .wsh-tires .wsh-lead{max-width:740px;margin-bottom:clamp(14px,1.6vw,26px)}
.wsh .wsh-check{list-style:none;margin:0 0 clamp(18px,1.8vw,28px);padding:0 0 0 clamp(8px,2.2vw,35px)}
.wsh .wsh-check li{display:flex;gap:10px;font-style:italic;font-size:clamp(15px,1.37vw,22px);line-height:1.2;margin:0 0 clamp(6px,.85vw,13px)}
.wsh .wsh-check li:before{content:'\2713';font-style:normal;flex:0 0 auto}
.wsh .wsh-tires .wsh-btns{justify-content:flex-start;padding-left:clamp(0px,3.6vw,57px)}
.wsh .wsh-tires-img{margin-top:clamp(-150px,-9vw,-40px);margin-right:-3%;line-height:0;text-align:right}
.wsh .wsh-tires-img img{width:100%;max-width:740px}

/* HOURS */
.wsh .wsh-hours{background:var(--wsh-orange)}
.wsh .wsh-hours-in{background:var(--wsh-red2);border-radius:clamp(36px,6.2vw,99px);padding:clamp(28px,2.6vw,42px) clamp(20px,3vw,48px) clamp(30px,3.6vw,58px);text-align:center;color:#FFF;--wsh-link-hover:var(--wsh-yellow)}
.wsh .wsh-hours-in .wsh-eyebrow{color:var(--wsh-yellow)}
.wsh .wsh-hours-in .wsh-h2{color:var(--wsh-yellow);font-size:clamp(26px,3.95vw,63px);margin:0 0 8px}
.wsh .wsh-hours-in .wsh-hours-line{font-family:'Permanent Marker','ToyotaType-Semibold',sans-serif;font-size:clamp(18px,2.35vw,38px);line-height:1.3;max-width:none;margin:0 0 clamp(14px,1.4vw,22px);-webkit-text-stroke:0}
.wsh .wsh-hours-line span{white-space:nowrap}
.wsh .wsh-hours-line .wsh-bar{padding:0 .45em}
.wsh .wsh-hours-in h3{font-family:'ToyotaType-Semibold','Helvetica Neue',Arial,sans-serif !important;font-weight:400;font-size:clamp(19px,1.87vw,30px);line-height:1.2;color:var(--wsh-yellow);margin:0 0 clamp(10px,1.1vw,18px)}
.wsh .wsh-hours-in p{font-size:clamp(15px,1.25vw,20px);line-height:1.25;max-width:1300px;margin:0 auto 14px}
.wsh .wsh-hours-in p:last-child{margin-bottom:0}

/* FINANCING */
.wsh .wsh-fin-head{text-align:right}
.wsh .wsh-fin-head .wsh-h2{margin-bottom:clamp(10px,1.2vw,18px)}
.wsh .wsh-fin .wsh-lead{margin-bottom:clamp(24px,2.2vw,36px)}
.wsh .wsh-fin-card{background:var(--wsh-blue);--wsh-link-hover:var(--wsh-cyan)}
.wsh .wsh-fin-card-in{height:100%;background:var(--wsh-navy2);border-radius:clamp(30px,4.1vw,66px);padding:clamp(24px,2vw,32px) clamp(22px,2.9vw,46px) clamp(24px,2.2vw,36px)}
.wsh .wsh-fin-card h3{font-size:clamp(22px,2.25vw,36px);color:var(--wsh-cyan);margin:0 0 clamp(14px,2.5vw,40px)}
.wsh .wsh-fin-card p{color:#FFF;font-size:clamp(15px,1.25vw,20px);line-height:1.18;margin:0}

/* ---------- Tablet ---------- */
@media (max-width:991px){
  .wsh{margin-top:0}
  .wsh .wsh-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .wsh .wsh-duo{gap:20px}
  .wsh .wsh-hero-genie{flex-basis:32%}
  .wsh .wsh-tires-img{margin-top:-20px}
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .wsh .wsh-hero-in{flex-direction:column;align-items:center}
  .wsh .wsh-hero-copy{padding:26px 18px 6px}
  .wsh .wsh-hero-genie{flex:0 0 auto;align-self:flex-end;width:60%;max-width:260px;margin:0}
  .wsh .wsh-btns{gap:12px}
  .wsh .wsh-btn{width:100%;max-width:320px;min-width:0}
  .wsh .wsh-trust-row{flex-direction:column;align-items:center}
  .wsh .wsh-trust-row li{padding:2px 10px}
  .wsh .wsh-trust-row li + li{border-left:0}
  .wsh .wsh-grid,.wsh .wsh-duo{grid-template-columns:minmax(0,1fr)}
  .wsh .wsh-oil{margin-top:clamp(70px,22vw,110px)}
  .wsh .wsh-oil-in{flex-direction:column;min-height:0}
  .wsh .wsh-oil-splash{position:relative;top:auto;left:auto;transform:none;align-self:flex-start;width:92%;max-width:520px;margin-top:clamp(-110px,-20vw,-60px)}
  .wsh .wsh-oil-copy{padding:8px 18px 28px}
  .wsh .wsh-promo-genie h3,.wsh .wsh-promo-genie p{max-width:64%}
  .wsh .wsh-promo-genie-img{max-width:36%;height:auto;max-height:78%}
  .wsh .wsh-tires{grid-template-columns:minmax(0,1fr)}
  .wsh .wsh-tires-head .wsh-h2{max-width:none}
  .wsh .wsh-tires .wsh-btns{padding-left:0}
  .wsh .wsh-tires-img{margin:0 auto;max-width:520px;text-align:center}
  .wsh .wsh-fin-head{text-align:left}
  .wsh .wsh-hours-line span{display:block}
  .wsh .wsh-hours-line .wsh-bar{display:none}
}
/* ---------- Hero offset under the site's fixed header + "Ask" bar ----------
   The theme leaves a 26px gap on desktop (>=992), a 32px gap at 768-991, and on
   desktop browsers narrower than 768px it starts content ~121px too high (hidden
   under the fixed bars). Real phones/tablets (touch) are already correct. */
@media (min-width:768px) and (max-width:991px) and (hover:hover) and (pointer:fine){
  .wsh{margin-top:-32px}
}
@media (max-width:767px) and (hover:hover) and (pointer:fine){
  .wsh{margin-top:0;padding-top:121px}
}
@media (prefers-reduced-motion:reduce){
  .wsh .wsh-btn,.wsh .wsh-link{transition:none}
  .wsh .wsh-btn:hover{transform:none}
}