/* Shared safeguards for phones and tablets. Loaded after each page's own stylesheet. */
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,video,iframe,svg,canvas{max-width:100%}
input,select,textarea,button{font:inherit;max-width:100%}
textarea{resize:vertical}
table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (min-width:761px) and (max-width:1100px){
  .wrap{width:min(100% - 48px,1240px)}
  .nav{padding-left:16px;padding-right:10px}
  .nav-links{gap:15px;font-size:12px}
  .nav-cta{padding:11px 13px;font-size:12px;white-space:nowrap}
  .hero,.business-hero,.lead-hero,.sports-hero,.paint-hero,.about-hero-modern{padding-top:112px}
  .hero-surface{min-height:590px}
  .business-hero-grid,.lead-hero-grid,.about-hero-surface{min-height:560px}
  .sports-surface{min-height:570px}
  .service-grid{grid-auto-rows:180px}
  .material-grid{grid-template-columns:repeat(3,1fr)}
  .material:nth-child(n+4){min-height:250px}
  .sport-card-grid{grid-template-columns:repeat(2,1fr)}
  .trust-items,.audience-grid{grid-template-columns:repeat(2,1fr)}
  .paint-feature-grid,.texture-grid,.palette-grid{grid-template-columns:repeat(2,1fr)}
  .paint-feature{min-height:310px}
  .texture-grid article{min-height:290px}
  .inspiration-grid{grid-template-columns:1.2fr 1fr}
  .inspiration-card:last-child{grid-column:1/-1;min-height:290px}
  .principle-grid{grid-template-columns:repeat(2,1fr)}
  .journal-grid{grid-template-columns:repeat(2,1fr)}
  .discipline-list a{grid-template-columns:130px 1fr auto}
  .site-form-grid,.consult-grid,.system-grid,.planner-grid{gap:42px}
  .details-head,.football-spec-head,.colour-year-intro{gap:38px}
  .lead-section,.consult,.craft,.details,.sport-cards,.build-system,.project-sports,.faq,.site-form,.football-guide,.football-spec,.football-faq,.paint-features,.colour-year,.paint-textures,.paint-inspiration,.paint-estimator,.colour-finder,.paint-palettes,.about-principles,.about-note{padding-top:82px;padding-bottom:82px}
}
.more-sports--visual .more-sports-content>p{max-width:520px;margin:0;color:#d6e1da;font-size:17px}

@media (max-width:760px){
  .wrap{width:min(100% - 28px,1240px)}
  .nav{gap:8px}
  .nav-cta{white-space:nowrap}
  .section-top{align-items:flex-start}
  .section-top>p{max-width:none}
  .lead-cta{align-items:stretch}
  .lead-cta .button-link{flex:1}
  .hero-cards{width:100%}
  .mini{min-width:0}
  .form,.lead-form,.planner-box,.estimator-form,.finder-panel{padding:20px}
  .layer{gap:12px;padding:16px}
  .layer small{max-width:52%;text-align:right}
  .pitch-diagram{margin-left:0;margin-right:0}
  .spec-card strong{font-size:22px}
  .footer{padding-bottom:84px}
  .author-bio{align-items:flex-start;flex-wrap:wrap}
  .social-share{flex-wrap:wrap}
  .social-share a{flex:1 1 120px;justify-content:center}
  nav#nav{padding-left:14px;padding-right:14px}
  nav#nav .nav-center{gap:10px}
}

@media (max-width:420px){
  .nav{padding-left:12px}
  .nav-cta{padding:10px;font-size:0}
  .nav-cta span{font-size:15px}
  .hero-surface,.sports-surface{border-radius:20px}
  .numbers-grid,.trust-items,.audience-grid,.process,.spec-grid,.more-sports-grid,.paint-feature-grid,.texture-grid,.palette-grid,.principle-grid{grid-template-columns:1fr}
  .hero-cards{gap:7px}
  .mini{padding:11px}
  .mini strong{font-size:17px}
  .mobile-lead-bar{grid-template-columns:.9fr 1.3fr .9fr}
}

/* Sports service directory: imagery lives at the right edge, copy remains primary. */
.sport-directory a{position:relative;isolation:isolate;overflow:hidden;background:#fff;transition:color .25s,border-color .25s,transform .25s}
.sport-directory a>img{position:absolute;z-index:-2;inset:0 0 0 auto;width:62%;height:100%;max-width:none;object-fit:cover;object-position:center;opacity:.68;transition:transform .45s ease,opacity .25s ease}
.sport-directory a::after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 33%,rgba(255,255,255,.18) 100%);transition:background .25s}
.sport-directory a>span{display:flex;flex-direction:column;gap:5px;max-width:66%}
.sport-directory a:hover{transform:translateY(-3px);border-color:var(--ink);color:#fff}
.sport-directory a:hover>img{transform:scale(1.07);opacity:.92}
.sport-directory a:hover::after{background:linear-gradient(90deg,rgba(18,22,22,.92) 0%,rgba(18,22,22,.75) 42%,rgba(18,22,22,.1) 100%)}
.sport-directory a:hover small{color:#d6e1da}
@media(max-width:760px){.sport-directory a>img{width:58%}.sport-directory a>span{max-width:78%}}