/* Blue Route Pool Service — homepage-only sections. Concept · made-up company. */

/* ---------- hero ---------- */
.hero{position:relative;height:820px;overflow:hidden;background:var(--navy)}
.hero-media{position:absolute;inset:0}
.hero-pic{position:absolute;inset:0;will-change:transform}
.hero-pic img{width:100%;height:100%;object-fit:cover}
.hero-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-route-m{display:none}
.hero-route .road{fill:none;stroke:var(--navy);stroke-opacity:.35;stroke-width:22}
.hero-route .lane{fill:none;stroke:var(--yel);stroke-width:10;stroke-linecap:round}
.hero-route .pin{fill:var(--white);stroke:var(--navy);stroke-width:8;transform-box:fill-box;transform-origin:center}
.hero-route .pin-end{fill:var(--yel);stroke-width:6}
.js:not(.reduce) .hero-route .lane{stroke-dasharray:1 1;stroke-dashoffset:1}
.js:not(.reduce) .hero-route .pin{transform:scale(.45)}
.hero-route .pin.pop{animation:pinPop .6s var(--ease) forwards}
@keyframes pinPop{0%{transform:scale(.45)}55%{transform:scale(1.22)}100%{transform:scale(1)}}
.hero-sign{position:absolute;left:40px;bottom:40px;width:min(820px,calc(100% - 80px));padding:44px 48px 40px}
.hero .h1{font-size:clamp(96px,9.17vw,132px)}
.h1 .ln{display:block;white-space:nowrap}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.chip{background:var(--blue-d);padding:2px 7px;border-radius:3px;white-space:nowrap}
.stop-chip{display:inline-flex;align-items:center;gap:8px;background:var(--yel);color:var(--navy);font-weight:800;padding:6px 12px;border-radius:8px;font-size:14px;white-space:nowrap}
.stop-chip i{width:8px;height:8px;border-radius:50%;background:var(--navy);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.hero .h1{margin-top:22px}
.lead{margin-top:24px;font-size:19px;line-height:1.5;color:var(--on-blue);max-width:540px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* ---------- week strip ---------- */
.week{padding-top:110px}
.week-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:30px}
.week-line{font-size:20px;font-weight:700;max-width:460px}
.week-board{position:relative}
.week-grid{position:relative;display:grid;grid-template-columns:repeat(6,auto);justify-content:space-between;column-gap:8px;--fs:clamp(40px,calc((min(100vw,1320px) - 2 * var(--pad) - 60px) / 11.4),150px)}
.day{position:relative;display:block;font-weight:900;font-size:var(--fs);line-height:.8;letter-spacing:-.045em;transition:transform .4s var(--ease)}
.day-o{display:block;color:transparent;-webkit-text-stroke:2px var(--line)}
.day-f{position:absolute;left:0;top:0;color:var(--navy);opacity:0;transition:opacity .45s var(--ease)}
.day.is-you .day-f,.day.lit .day-f{opacity:1}
.day.lit .day-f{transition-duration:.12s}
.week-rule{grid-column:1 / -1;height:8px;background:var(--navy);margin:18px 0 14px}
.dash{font-size:12px;color:var(--gray);transition:opacity .25s}
.marker{grid-row:3;grid-column:2;font-size:13px;font-weight:700;color:var(--blue-d);white-space:nowrap}
.js .marker{grid-row:auto;grid-column:auto;position:absolute;left:0;bottom:0;transform:translate3d(var(--x,0),0,0);transition:transform .5s var(--ease)}
.week-grid .dash:nth-of-type(2){opacity:0}
.week-grid[data-at] .dash{opacity:1}
.week-grid[data-at="0"] .dash:nth-of-type(1),.week-grid[data-at="1"] .dash:nth-of-type(2),.week-grid[data-at="2"] .dash:nth-of-type(3),
.week-grid[data-at="3"] .dash:nth-of-type(4),.week-grid[data-at="4"] .dash:nth-of-type(5),.week-grid[data-at="5"] .dash:nth-of-type(6){opacity:0}
.week.pre .day.is-you .day-f{opacity:0}
.week.pre .marker{opacity:0}
.week.run .marker{opacity:1;transition:transform .14s linear,opacity .2s}
.week.settle .marker{transition:transform .9s var(--ease)}
.week.settle .day.is-you{animation:dayPop .7s var(--ease)}
@keyframes dayPop{0%{transform:none}40%{transform:translateY(-6px)}100%{transform:none}}
/* ---------- route + stops ---------- */
.route{position:relative;margin-top:120px}
.route-track{position:absolute;left:calc(var(--pad) + 79px);top:0;bottom:0;width:8px;background:var(--track);border-radius:4px;overflow:hidden}
.route-fill{position:absolute;inset:0;background:var(--yel);transform-origin:top;will-change:transform}
.stopsec{display:grid;grid-template-columns:168px 1fr;position:relative}
.stopsec + .stopsec{padding-top:140px}
.stop{position:sticky;top:130px}
.ring{position:relative;z-index:1;width:56px;height:56px;margin-left:55px;border-radius:50%;background:var(--white);border:8px solid var(--navy);display:grid;place-items:center;font:800 15px var(--mono)}
.ring::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--yel);transform:scale(0);transition:transform .5s var(--ease)}
.ring span{position:relative}
.stop.on .ring::before{transform:scale(1)}
.stop.on .ring{animation:ringPop .6s var(--ease)}
@keyframes ringPop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
.ringlbl{margin:14px 0 0 30px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--gray);width:120px;text-align:center;transition:color .3s}
.stop.on .ringlbl{color:var(--navy)}
.h2-visit{max-width:900px}
.body-visit{margin:22px 0 46px;max-width:560px}

.tl{display:grid;grid-template-columns:repeat(6,1fr)}
.tl li{position:relative;padding:30px 18px 0 0}
.tl li::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--navy);transform-origin:left}
.tl li::after{content:"";position:absolute;top:-10px;left:0;width:28px;height:28px;border-radius:50%;background:var(--yel);border:5px solid var(--navy)}
.tl-n{font-size:13px;font-weight:700;color:var(--blue-d)}
.tl h3{margin:6px 0;font-size:21px;font-weight:800}
.tl li > p:last-child{color:var(--gray);line-height:1.5}
.tl.pre li::before{transform:scaleX(0)}
.tl.pre li::after{transform:scale(0)}
.tl.pre li > *{opacity:0;transform:translateY(12px)}
.tl li::before{transition:transform .32s linear calc(var(--i) * .2s)}
.tl li::after{transition:transform .5s var(--ease) calc(var(--i) * .2s + .05s)}
.tl li > *{transition:opacity .6s var(--ease) calc(var(--i) * .2s + .12s),transform .7s var(--ease) calc(var(--i) * .2s + .12s)}
.tl.go li::before{transform:scaleX(1)}
.tl.go li::after{transform:scale(1)}
.tl.go li > *{opacity:1;transform:none}

.shots{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;margin-top:56px;align-items:end}
.shot{position:relative;overflow:hidden;border-radius:20px;background:var(--sky)}
.shot img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover}
.shot-a{height:420px}.shot-b{height:300px}.shot-c{height:360px}
/* note */
.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.note-grid .body{margin-top:22px;max-width:480px}
.note-photo{margin-top:40px;max-width:480px}
.note-photo-in{position:relative;height:230px;overflow:hidden;border-radius:16px}
.note-photo-in img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:30% 40%}
.note-photo figcaption{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
/* service */
.h2-svc{margin-bottom:40px}
.svc{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.svc-main{padding:44px;min-height:330px;display:flex;flex-direction:column;justify-content:space-between}
.svc-main h3{margin:0 0 12px;font-size:54px;font-weight:900;letter-spacing:-.03em;line-height:.95}
.svc-main p{font-size:18px;color:var(--on-blue);max-width:440px}
.price{margin-top:22px !important;display:flex;align-items:baseline;gap:10px;color:var(--white) !important;font-size:44px !important;font-weight:900;letter-spacing:-.03em;line-height:1}
.price .mono{font-size:13px;letter-spacing:.12em;font-weight:700;color:var(--yel)}
.price .per{font-size:18px;font-weight:700;letter-spacing:0;color:var(--on-blue)}
.svc-side{display:grid;gap:16px}
.svc-card-in{display:flex;gap:18px;align-items:flex-start;background:var(--white);border-radius:20px;padding:28px 30px;height:100%;box-shadow:0 0 0 1px rgba(15,39,71,.04);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.svc-card-in:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(15,39,71,.45),0 0 0 1px rgba(15,39,71,.06)}
.svc-n{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tint);font-size:13px;font-weight:700;transition:transform .45s var(--ease),background-color .3s}
.svc-card-in:hover .svc-n{background:var(--yel);transform:rotate(-12deg)}
.svc-card h3{margin:0 0 6px;font-size:24px;font-weight:800;line-height:1.15}
.svc-card p{color:var(--gray)}
/* ---------- who comes ---------- */
.who{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;padding-top:130px}
.who-media{position:relative}
.who-pic{position:relative;height:560px;overflow:hidden;border-radius:24px}
.who-pic img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.who-sign{position:absolute;right:24px;bottom:24px;padding:22px 28px;transition:transform .5s var(--ease)}
.who-media:hover .who-sign{transform:translateY(-6px) rotate(-1.5deg)}
.who-name{margin-top:6px;font-size:30px;font-weight:900;line-height:1}
.who-text .h2{margin-top:18px}
.who-text .body{margin-top:22px}
.who-details{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-top:36px}
.who-d-pic{height:170px;overflow:hidden;border-radius:14px}
.who-d-pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.who-d:hover img{transform:scale(1.05)}
.who-d-wide .who-d-pic img{object-position:60% 50%}
.who-d figcaption{margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-top:130px}
.reviews .h2{margin-top:18px}
.reviews .body{margin-top:22px}
.rev-pad{display:grid;place-items:center;min-height:380px;border:2px dashed var(--line);border-radius:28px;padding:40px 0 0;overflow:hidden}
.post{display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.diamond{width:220px;height:220px;transform:rotate(45deg);background:var(--yel);border-radius:22px;display:grid;place-items:center;box-shadow:inset 0 0 0 8px var(--yel),inset 0 0 0 12px var(--navy),0 30px 40px -30px rgba(15,39,71,.6)}
.diamond-txt{transform:rotate(-45deg);text-align:center;font-weight:900;font-size:26px;line-height:1;letter-spacing:-.01em}
.diamond-txt .mono{display:block;margin-top:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;line-height:1.3;max-width:130px}
.pole{width:12px;height:110px;margin-top:-40px;background:linear-gradient(90deg,#8E979F,#C5CACF 45%,#7A838B);border-radius:2px;position:relative;z-index:-1}

@media (max-width:900px){
  .hero{height:auto;padding:0 0 8px;background:var(--stucco);overflow:visible}
  .hero-media{position:relative;height:420px;overflow:hidden;background:var(--navy)}
  .hero-route-d{display:none}
  .hero-route-m{display:block}
  .hero-route .road{stroke-width:14}
  .hero-route .lane{stroke-width:7}
  .hero-route .pin{stroke-width:5}
  .hero-route .pin-end{stroke-width:4}
  .hero-sign{position:relative;left:auto;bottom:auto;width:auto;margin:-104px 12px 0;padding:30px 24px 26px}
  .hero-top{flex-wrap:wrap}
  .hero-top .k{font-size:11.5px}
  .stop-chip{display:none}
  .h1,.hero .h1{font-size:clamp(44px,14.6vw,64px)}
  .hero .h1{margin-top:16px}
  .lead{font-size:17px;margin-top:18px}
  .btns{margin-top:22px}
  .btns .btn{flex:1 1 auto;justify-content:center}
  .week{padding-top:72px}
  .week-head{margin-bottom:20px}
  .week-line{font-size:18px}
  .week-grid{grid-template-columns:1fr;border-left:8px solid var(--navy);padding-left:18px;--fs:60px}
  .day{height:62px;display:flex;align-items:center;line-height:1}
  .day-f{top:50%;transform:translateY(-50%);line-height:1}
  .week-rule,.dash{display:none}
  .marker{grid-row:2;grid-column:1;justify-self:end}
  .js .marker{grid-row:auto;grid-column:auto;left:auto;right:0;top:0;bottom:auto;height:62px;display:flex;align-items:center;width:46%;transform:translate3d(0,var(--y,0),0)}
  .js .marker::before{content:"";flex:1;height:2px;margin-right:10px;background:repeating-linear-gradient(90deg,var(--blue-d) 0 6px,transparent 6px 10px)}
  .route{margin-top:80px}
  .route-track{left:calc(var(--pad) + 18px)}
  .stopsec{grid-template-columns:44px 1fr;column-gap:14px}
  .stopsec + .stopsec{padding-top:96px}
  .stop{top:88px}
  .ring{width:44px;height:44px;margin-left:0;border-width:6px;font-size:12px}
  .ringlbl{display:none}
  .body-visit{margin:18px 0 36px}
  .tl{grid-template-columns:1fr 1fr;row-gap:30px}
  .tl li{padding:26px 12px 0 0}
  .tl h3{font-size:19px}
  .tl li > p:last-child{font-size:15px}
  .shots{grid-template-columns:1fr 1fr;gap:10px;margin-top:40px}
  .shot-w:first-child{grid-column:1 / -1}
  .shot-a{height:220px}
  .shot-b,.shot-c{height:170px}
  .shot{border-radius:14px}
  .note-grid{grid-template-columns:1fr;gap:40px}
  .note-photo{margin-top:28px}
  .note-photo-in{height:190px}
  .svc{grid-template-columns:1fr}
  .svc-main{padding:32px 26px;min-height:0;gap:40px}
  .svc-main h3{font-size:38px}
  .price{font-size:36px !important}
  .svc-card-in{padding:22px 20px}
  .svc-card h3{font-size:21px}
  .h2-svc{margin-bottom:28px}
  .who,.reviews{grid-template-columns:1fr;gap:32px;padding-top:96px}
  .who-pic{height:340px;border-radius:18px}
  .who-sign{right:14px;bottom:14px;padding:16px 20px}
  .who-name{font-size:24px}
  .who-text{order:-1}
  .who-d-pic{height:130px}
  .who-d figcaption{font-size:10.5px}
  .rev-pad{min-height:330px}
  .diamond{width:180px;height:180px}
  .diamond-txt{font-size:22px}
}