/* =====================================================================================================================
   PENDLE PERFORMANCE 2026 - CONTACT page (page-contact.php). Scoped: every rule starts with a contact-only class
   (.ct-*, .cx-page-contact). Shared tokens + components untouched; the frame (--anchor, --edge, --line) is the home's,
   so the eyebrow line, edges and bottom line measure identical to the home page.
   ===================================================================================================================== */

/* small phones (360x740): the same tightening the home page uses (home.css), so headings match across pages */
@media (max-width:374px), (max-height:760px) and (max-width:699px){
  .cx-page-contact{--h2:36px;--h2-lh:36px;--lede:15px;--lede-lh:21px;--row-gap:12px;--gap-h:9px}
  .cx-page-contact .cx-h1{font-size:46px;line-height:44px}
  .cx-page-contact .cx-reg{padding:12px 12px 6px}
  .cx-page-contact .cx-reg__label{margin-bottom:8px}
  .cx-page-contact .cx-plate{height:48px}
  .cx-page-contact .cx-reg__go{min-height:46px}
  .cx-page-contact .cx-door__price{font-size:13.5px}
  .cx-page-contact .cx-door:not(.cx-door--hq) h3{display:none}
  .cx-page-contact .cx-book-sec .cx-body--doors{gap:10px}
  .cx-page-contact .cx-contact__note{font-size:12.5px}
}
.ct-hours-sec .cx-h2 em,.ct-find .cx-h2 em,.ct-hist .cx-h2 em{display:block}
.ct-find .cx-h2,.ct-hours-sec .cx-h2,.ct-hist .cx-h2{max-width:none}

/* ---------- 1 SPEAK TO MARTIN ---------- */
.ct-hero .cx-lede{max-width:31em}
.ct-portrait{--ar:1.6}
@container (max-height:109px){.ct-portrait{display:none}}
.ct-portrait img{object-position:50% 24%;transform:scale(1.1);transform-origin:20% 30%}   /* the photo has a dark strip down its right edge */
.ct-call{display:flex;align-items:center;gap:16px;width:100%;max-width:560px;padding:14px 18px 14px 16px}
.ct-call__face{display:none;flex:0 0 auto;width:64px;height:64px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 2px rgba(var(--cyan-rgb),.8),0 0 24px -4px rgba(var(--cyan-rgb),.6)}
.ct-call__face img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.ct-call__txt{min-width:0}
.ct-call__txt p{margin:0}
.ct-call__k{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px;font:700 12px/16px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--kick)}
.ct-call__where{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.ct-call__k svg{width:15px;height:15px;color:var(--cyan)}
.ct-call__k .cx-open{flex:0 0 auto}
.ct-call__no{display:flex;align-items:center;margin-top:2px!important}
@media (max-width:699px){.ct-call__town{display:none}}
.ct-call__no a{font:400 38px/1 var(--f-display);letter-spacing:.04em;color:#fff;text-decoration:none;text-shadow:0 0 26px rgba(var(--cyan-rgb),.4)}
.ct-call__best{margin-top:6px!important;font:700 14px/1.3 var(--f-ui);color:var(--kick)}
.ct-foot--call{gap:12px 16px}
@media (max-width:699px){.ct-call__book{display:none}}
@media (min-width:1200px){
  .ct-call{padding:20px 26px 20px 22px;gap:20px}
  .ct-call__no a{font-size:52px}
  .ct-call__best{font-size:15px}
}
@media (min-width:1800px) and (min-height:1000px){.ct-call{max-width:640px}.ct-call__no a{font-size:60px}}
/* computer: Martin is the picture; his number and the two keys sit on the bottom line under the words */
@media (min-width:1100px) and (min-aspect-ratio:1/1){.ct-hero .cx-martin__bg{object-position:78% 30%}}
@media (max-width:374px){.ct-call{padding:12px 14px;gap:12px}.ct-call__no a{font-size:32px}.ct-call__best{font-size:13px}}

/* ---------- 2 OPENING HOURS ---------- */
.ct-body--photo{container-type:size;display:flex;align-items:center;justify-content:center}
.ct-photo{--ar:1.951;position:relative;margin:0;width:min(100cqw,calc(100cqh * var(--ar)));aspect-ratio:var(--ar);border-radius:16px;overflow:hidden;
  background:#0b0f14;border-top:3px solid var(--cyan);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 26px 60px -22px rgba(0,0,0,.95),0 0 60px -20px rgba(var(--cyan-rgb),.5)}
.ct-photo picture,.ct-photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.ct-photo img{object-fit:cover;object-position:60% 50%;filter:saturate(.9) brightness(.94)}
@container (max-height:109px){.ct-photo{display:none}}
.ct-hours{width:100%;max-width:560px;padding:14px 18px 12px}
.ct-hours__top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:26px;box-sizing:content-box;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.ct-hours__k{margin:0;font:700 12px/16px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--kick)}
.ct-hours__list{margin:0}
.ct-hours__list>div{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-bottom:1px solid rgba(255,255,255,.07)}
.ct-hours__list dt{font:700 15px/1.2 var(--f-ui);color:#e8eef5}
.ct-hours__list dd{margin:0;font:400 26px/1 var(--f-display);letter-spacing:.04em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-hours__list .is-shut dd{color:var(--muted)}
.ct-hours__short{display:none}
.ct-hours__list .is-today{margin:0 -18px;padding:0 18px;background:linear-gradient(90deg,rgba(var(--cyan-rgb),.16),rgba(var(--cyan-rgb),.03));box-shadow:inset 3px 0 0 var(--cyan)}
.ct-hours__list .is-today dt::after{content:"Today";display:inline-block;margin-left:10px;padding:4px 8px;border-radius:999px;vertical-align:1px;
  font:700 11px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--on-cyan);background:var(--cyan)}
.ct-hours__best{display:flex;align-items:center;gap:8px;margin:10px 0 0;font:700 14px/1.3 var(--f-ui);color:var(--kick)}
.ct-hours__best svg{width:16px;height:16px;color:var(--cyan)}
@media (min-width:1200px){
  .ct-hours{padding:18px 26px 16px}
  .ct-hours__list>div{min-height:54px}
  .ct-hours__list dt{font-size:17px}
  .ct-hours__list dd{font-size:32px}
  .ct-hours__list .is-today{margin:0 -26px;padding:0 26px}
  .ct-hours__best{font-size:15px;margin-top:14px}
}
@media (min-width:1200px) and (max-height:940px){.ct-hours__list>div{min-height:46px}.ct-hours__list dd{font-size:29px}.ct-hours{padding-top:14px;padding-bottom:12px}.ct-hours__best{margin-top:10px}}
@media (min-width:1200px) and (max-height:880px){.ct-hours__list>div{min-height:42px}.ct-hours__list dd{font-size:27px}.ct-hours__top{padding-bottom:8px}}
@media (min-width:1800px) and (min-height:1000px){.ct-hours{max-width:640px}.ct-hours__list>div{min-height:52px}.ct-hours__list dd{font-size:34px}}
@media (min-width:1100px) and (max-height:830px){.ct-hours__list>div{min-height:44px}.ct-hours__list dd{font-size:26px}}
@media (max-width:374px), (max-height:760px) and (max-width:699px){
  .ct-hours{padding:10px 14px 8px}.ct-hours__top{padding-bottom:6px}
  .ct-hours__list>div{min-height:38px}.ct-hours__list dd{font-size:23px}
  .ct-hours__long{display:none}.ct-hours__short{display:inline}
  .ct-hours__list .is-today{margin:0 -14px;padding:0 14px}
  .ct-hours__best{margin-top:6px;font-size:13px}
}

/* ---------- 3 WHERE TO FIND US ---------- */
.ct-body--map{container-type:size;display:flex;align-items:center;justify-content:center}
.ct-map{position:relative;margin:0;width:100cqw;height:100cqh;border-radius:16px;overflow:hidden;background:#11161d;border-top:3px solid var(--cyan);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 26px 60px -22px rgba(0,0,0,.95),0 0 60px -20px rgba(var(--cyan-rgb),.5)}
.ct-map__go{position:absolute;inset:0;display:block}
.ct-map__go picture,.ct-map__go img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.ct-map__go img{object-fit:cover;object-position:50% 50%}
.ct-map__go:focus-visible{outline-offset:-4px}
/* the pin: its point on the exact centre of the map (the map image is centred on Pendle HQ) */
.ct-pin{position:absolute;left:50%;top:50%;width:0;height:0}
.ct-pin svg{position:absolute;max-width:none;left:-22px;top:-42px;width:44px;height:44px;color:var(--cyan);fill:#0d1218;stroke-width:1.8;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(var(--cyan-rgb),.7))}
.ct-pin__ring{position:absolute;left:-14px;top:-7px;width:28px;height:14px;border-radius:50%;box-shadow:0 0 0 2px rgba(var(--cyan-rgb),.6);opacity:0}
.is-on .ct-pin__ring{animation:ct-ping 2.6s ease-out infinite}
@keyframes ct-ping{0%{transform:scale(.6);opacity:.95}100%{transform:scale(2.6);opacity:0}}
.ct-pin__tag{position:absolute;left:28px;top:-40px;padding:6px 10px;border-radius:999px;white-space:nowrap;background:var(--cyan);color:var(--on-cyan);
  font:700 12px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.ct-map__osm{position:absolute;left:8px;top:8px;z-index:2;padding:3px 7px;border-radius:6px;background:rgba(8,12,18,.78);font:400 12px/1.3 var(--f-text);color:#b9c7d6}
.ct-map__osm a{color:#d8ecff}
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .ct-map{width:min(100cqw,calc(100cqh * 1.4));height:min(100cqh,calc(100cqw / 1.4));border-radius:18px}
  .ct-pin__tag{font-size:13px;padding:7px 12px}
}
.ct-foot--dir{gap:12px}
.ct-apple[hidden]{display:none}
/* the address card: the sign at the gate + the address, on the bottom line */
.ct-addr{display:flex;align-items:center;gap:16px;flex:1 1 100%;max-width:560px;padding:12px 18px 12px 12px}
.ct-addr__sign{flex:0 0 auto;width:44px;height:auto;border-radius:6px;box-shadow:0 0 0 1px rgba(127,217,255,.35),0 8px 18px rgba(0,0,0,.6)}
.ct-addr__txt{display:flex;flex-direction:column;gap:3px;font-style:normal;min-width:0}
.ct-addr__k{font:700 12px/16px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--kick)}
.ct-addr__l{font:400 26px/1 var(--f-display);letter-spacing:.04em;color:#fff}
.ct-addr__l b{font-weight:400;color:var(--ice)}
@media (min-width:1200px){.ct-addr{padding:16px 24px 16px 16px;gap:20px}.ct-addr__sign{width:60px}.ct-addr__l{font-size:34px}}
@media (min-width:1100px) and (max-height:830px){.ct-addr__sign{width:44px}.ct-addr__l{font-size:26px}}
/* "How far am I?" and its answer sit ON the map (bottom right), so pressing it never moves or shrinks anything */
.ct-far-box{position:absolute;z-index:3;right:10px;bottom:12px;left:10px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.ct-far-box>*{pointer-events:auto}
.ct-far{padding-inline:16px}
.ct-far[hidden]{display:none}
.ct-far__msg{max-width:min(100%,24em);margin:0;padding:9px 13px;border-radius:12px;background:rgba(8,12,18,.9);
  box-shadow:inset 0 0 0 1px rgba(127,217,255,.3),0 8px 20px rgba(0,0,0,.5);font:400 14px/1.4 var(--f-text);color:var(--body)}
.ct-far__msg:empty{display:none}
.ct-far__msg b{color:#fff}
@media (max-width:699px){
  .ct-foot--dir>.cx-key{flex:1 1 0;padding-inline:12px;font-size:15px;gap:8px}
  .ct-addr{padding:10px 14px 10px 10px;gap:12px}.ct-addr__sign{width:34px}.ct-addr__l{font-size:23px}
}
@media (max-width:374px), (max-height:760px) and (max-width:699px){.ct-addr__l{font-size:21px}.ct-addr__sign{width:30px}}
@media (max-width:374px){.ct-foot--dir>.cx-key{font-size:14px;padding-inline:8px}.ct-foot--dir>.cx-key svg{width:18px;height:18px}}

/* ---------- 4 VEHICLE TUNE HISTORY ---------- */
.ct-pages{display:block;cursor:pointer}
.ct-pages .cx-pages{display:block}
.ct-pages img{object-fit:cover}
.ct-pages .cx-pages__b{height:74%;top:13%}
@media (hover:hover) and (pointer:fine){
  .ct-pages img{transition:transform .5s cubic-bezier(.3,.1,.3,1)}
  .ct-pages:hover .cx-pages__a{transform:rotate(-5deg) translate3d(-2%,-1%,0)}
  .ct-pages:hover .cx-pages__b{transform:rotate(7deg) translate3d(2%,0,0)}
}
.ct-hist__form .cx-reg__label{text-transform:none;letter-spacing:.02em;font-size:14px;line-height:1.35;color:#d6e6f5}
@container (max-height:119px){.ct-pages{display:none}}
@media (min-width:1100px) and (min-aspect-ratio:1/1){.ct-hist .cx-body--media{perspective:none}.ct-hist__form .cx-reg__label{font-size:15px}}

/* ---------- 5 BOOK: the live page's own lines (only where there is room for them) ---------- */
.ct-book__lede{display:none}
@media (min-width:700px) and (min-height:831px){.ct-book__lede{display:block}}

/* ---------- SHORT SCREENS (QA 9 Oct): an iPhone with Safari's bars on screen is 390x664 (SE 320x568), a 768-px laptop
   with the browser's bars 1280x649 / 1366x657. Same frame, same anchor; what is said twice on the page steps back first.
   Last in the file so these win. ---------- */
@media (max-width:699px) and (max-height:620px){
  .ct-hours-sec .cx-lede,.ct-find .cx-lede{display:none}           /* hours: the card says it all, best time included */
  .ct-call__best{display:none}                                        /* the best time to call is on the next screen */
  .ct-hist .cx-lede{font-size:14px;line-height:20px}
}
@media (min-width:1100px) and (max-height:700px){
  .cx-page-contact{--h1:58px;--h1-lh:56px;--h2:44px;--h2-lh:44px;--lede:15px;--lede-lh:22px}
  .ct-call{padding:12px 20px 12px 18px}
  .ct-call__no a{font-size:42px}
  .ct-call__best{margin-top:2px!important;font-size:14px}
  .ct-hours{padding:10px 22px 8px}
  .ct-hours__top{padding-bottom:6px}
  .ct-hours__list>div{min-height:33px}
  .ct-hours__list dd{font-size:23px}
  .ct-hours__list .is-today{margin:0 -22px;padding:0 22px}
  .ct-hours__best{margin-top:6px;font-size:14px}
  .ct-addr__l{font-size:24px}
}

/* ---------- ONE PICTURE FRAME (QA 9 Oct, "nothing lined up"): every picture on this page - Martin's portrait, the
   workshop, the map, the certificate + brochure - fills the SAME box: the whole picture space of its screen. On a phone
   that is the full text width (28 / 24 px gutters, the cards' own edges); on a computer the right-hand column from the
   eyebrow line to the bottom line, its right edge on the 120 px gutter. No tilt, so every frame stays square to the
   cards and keys beside it. Last in the file so these win. ---------- */
.ct-portrait,.ct-photo,.ct-map,.ct-stage{width:100cqw;height:100cqh;aspect-ratio:auto;transform:none}
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .ct-photo,.ct-map,.ct-stage{width:100cqw;height:100cqh;border-radius:18px;transform:none}
}
/* the certificate + brochure stand on a lit dark stage inside the same frame */
.ct-body--stage{perspective:none}
.ct-stage{position:relative;display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;padding:6% 7%;container-type:size;
  border-radius:16px;overflow:hidden;border-top:3px solid var(--cyan);text-decoration:none;
  background:radial-gradient(70% 60% at 50% 45%,rgba(var(--cyan-rgb),.20),rgba(var(--cyan-rgb),0) 70%),linear-gradient(180deg,#0f151d 0%,#080b10 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 26px 60px -22px rgba(0,0,0,.95),0 0 60px -20px rgba(var(--cyan-rgb),.5)}
.ct-stage .cx-pages{height:min(92cqh,calc(96cqw / var(--ar) / 1.32))}
/* the workshop: graded into the page's night palette (the daytime snapshot no longer reads as a photo stuck on) */
.ct-photo img{object-position:92% 55%;filter:brightness(.62) saturate(.7) contrast(1.08)}
.ct-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,16,.55) 0%,rgba(5,9,16,.05) 38%,rgba(5,9,16,.10) 62%,rgba(5,7,10,.78) 100%),
             linear-gradient(90deg,rgba(var(--cyan-rgb),.10),rgba(0,40,80,.18))}
.ct-photo .cx-shot__cap{z-index:1}
/* computer: Martin's picture starts under the top bar (the icons and menu key no longer sit on his head) */
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .ct-hero .cx-martin__bg{top:var(--top);height:calc(100% - var(--top));
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px);mask-image:linear-gradient(180deg,transparent 0,#000 40px)}
}
/* big computer: every left-hand card the same width, screen to screen (was 640 / 560 / 600) */
@media (min-width:1800px) and (min-height:1000px){
  .ct-call,.ct-hours,.ct-addr,.cx-page-contact .ct-hist__form{max-width:640px}
}
/* phone Book screen: the live page's line comes back wherever the screen has the room for it */
@media (max-width:699px) and (min-height:830px){.ct-book__lede{display:block}}
/* ...and to make that room on 830-879 px phones the agent door drops its heading, as it already does on small phones
   (its kicker "N agents and growing" and the "Find your nearest agent" key carry it) */
@media (max-width:699px) and (min-height:830px) and (max-height:879px){.cx-page-contact .cx-door:not(.cx-door--hq) h3{display:none}}
/* ---------- QA 9 Oct night: tune-history picture on real iPhones (Safari's bars on screen). The stage's display:flex!important
   above beat the old "too short -> hide" rule, so an empty stage showed as a strip (375x548: 41 px) and the fan shrank to
   69x74 at 390x664. On a short box the stage's top/bottom padding follows the box height (not its width), so the fan stays a
   real picture (>= 96 px); below 119 px there is no room for one and the stage steps out. ---------- */
@container (max-height:200px){.ct-stage{padding-block:6cqh}}
@container (max-height:119px){.ct-stage.ct-pages{display:none!important}}