/* Platinum Touch — shared stylesheet. Most visual values live inline in the HTML; this file holds the
   tokens, fonts, base rules, keyframes, responsive switches and hover/focus states that inline styles can't express.
   Hover rules use !important because the base styles they override are inline. */

/* Fonts (self-hosted, latin subset). Only the weights the site actually renders. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/barlow-condensed-400.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/barlow-condensed-600.woff2) format('woff2')}

:root{--font-heading:"Barlow Condensed",system-ui,sans-serif;--font-body:"Barlow",system-ui,sans-serif}

/* Base */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#0a0b0c;color:#eceef0;font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:#94bce3}a:hover{color:#b5d9fd}
h1,h2,h3,p{margin:0}
img{max-width:100%}
/* Keep phone numbers on one line */
a[href^="tel:"]{white-space:nowrap}
::selection{background:#416180;color:#fff}
section[id]{scroll-margin-top:72px}
main:focus{outline:none}

/* Focus ring. !important because several buttons carry an inline `all:unset`, which would otherwise wipe the outline. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #749dc4!important;outline-offset:3px!important}

/* Skip link: hidden until it receives keyboard focus */
.pt-skip{position:fixed;top:12px;left:12px;z-index:200;padding:12px 18px;background:#55799c;color:#fff;font-family:var(--font-heading);font-weight:600;font-size:15px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:2px;transform:translateY(-200%)}
.pt-skip:focus{transform:none}
.pt-skip:hover{color:#fff}

/* Keyframes */
@keyframes ptHero{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes ptHeroSoft{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes ptUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ptFade{from{opacity:0}to{opacity:1}}

[hidden]{display:none!important}
/* Purely decorative outlined numerals: generated content, so they are not read or treated as body text */
.pt-numeral::before{content:attr(data-n)}

/* Header on narrow desktops (1000–1139px, e.g. iPad landscape): keep every label on one line and tighten the
   spacing so the full nav fits before the hamburger menu takes over below 1000px */
#pt-header-bar nav a,#pt-header-bar .pt-wide>a,#pt-header-bar>div>a:first-child span{white-space:nowrap}
@media (min-width:1000px) and (max-width:1139px){#pt-header-bar>div{gap:20px!important}#pt-header-bar nav{gap:20px!important}}

/* Responsive switches */
.pt-wide{display:contents}.pt-narrow{display:none}
@media (max-width:999px){.pt-wide{display:none}.pt-narrow{display:contents}}
.pt-feat{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(150px,40vw,260px)}
@media (min-width:900px){.pt-feat{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(200px,20vw,300px)}}
.pt-gal{columns:2}
@media (min-width:1100px){.pt-gal{columns:3}}
/* Wide items in auto-fit grids. `span 2` on a one-column grid adds an implicit track and pushes content off-screen,
   so below the two-column threshold the item spans the explicit grid instead. */
.pt-span2{grid-column:span 2}
@media (max-width:699px){.pt-span2{grid-column:1/-1}}
/* On phones, paired CTA buttons share the row evenly instead of stacking at two different widths */
@media (max-width:479px){.pt-btns>a{flex:1 1 100%}}
/* The "/" separators in the hero service list read as stray characters once the list wraps */
@media (max-width:599px){.pt-sep{display:none}}

/* Home service tiles: 1 column on phones, 2 on tablets, 4 on desktop (auto-fit would strand the 4th tile at ~1024px) */
.pt-tiles{display:grid;gap:3px;grid-template-columns:1fr}
.pt-tiles>a{height:clamp(380px,46vw,680px)}
@media (min-width:640px){.pt-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pt-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.pt-tiles>a{height:clamp(420px,40vw,620px)}}
/* Pressure washing section (services.html): the photo with the two clips directly beneath it, text centred alongside.
   Keeps the low-res clips at a size where they stay sharp; stacks photo, text, clips on smaller screens. */
.pt-pw{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "text" "clips";row-gap:clamp(40px,6vw,56px)}
.pt-pw-media{grid-area:media;width:100%}.pt-pw-text{grid-area:text}
.pt-pw-clips{grid-area:clips;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(6px,.8vw,12px)}
@media (min-width:900px){.pt-pw{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"media text" "clips text";column-gap:clamp(40px,6vw,104px);row-gap:clamp(8px,.8vw,12px)}.pt-pw-text{align-self:center}}


/* Booking spotlight (contact.html#book). Square's widget is a white iframe we can't restyle, so it sits
   in an accent-blue frame on a soft shadow and reads as a deliberate panel, not a stray white box. */
.pt-spot{position:relative;padding:clamp(12px,3.2vw,44px);background:#416180;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 40px 90px -40px rgba(0,0,0,.8)}
.pt-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 70% at 50% 0,rgba(181,217,253,.16),rgba(181,217,253,0) 70%)}
.pt-spot-card{position:relative;min-height:500px;background:#fff;border-radius:2px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.4),0 18px 36px -18px rgba(4,10,18,.45)}
/* Sits behind the widget until Square's white page paints over it */
.pt-spot-loading{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#8d949b}
#square-booking{position:relative}
#square-booking iframe{display:block;width:100%!important;max-width:100%;border:0}
/* Below ~280px of card width (phones narrower than ~343px) Square's script shows a "Book Appointment Now" link instead
   of the calendar. Drop the calendar-sized card and the loading line, and give the link the site's button style.
   !important because Square writes the link's styles inline. */
.pt-spot-card:has(#square-booking a){min-height:0;padding:28px 16px}
.pt-spot-card:has(#square-booking a) .pt-spot-loading{display:none}
#square-booking a{display:flex!important;align-items:center;justify-content:center;min-height:54px;height:auto!important;line-height:1.2!important;padding:0 20px!important;background:#55799c!important;color:#fff!important;font-family:var(--font-heading)!important;font-weight:600!important;font-size:15px!important;letter-spacing:.12em;text-transform:uppercase;border-radius:2px!important}
#square-booking a:hover{background:#416180!important}

/* Hover states */
.hv1:hover{color:#fff!important}
.hv2:hover{background:#416180!important;color:#fff!important}
.hv3:hover{border-color:#94bce3!important;background:rgba(116,157,196,.12)!important;color:#fff!important}
.hv4:hover{color:#b5d9fd!important}
.hv8:hover{border-color:#94bce3!important}
/* Image zoom only where a real pointer can hover, so taps on touch screens don't leave images stuck zoomed */
@media (hover:hover){
  .hv5:hover{transform:scale(1.05)!important}
  .hv6:hover{transform:scale(1.04)!important}
  .hv7:hover{transform:scale(1.035)!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hv5:hover,.hv6:hover,.hv7:hover{transform:none!important}
}