:root{--pink:#d11e63;--ink:#080808;--panel:#111;--white:#f7f7f7;--muted:#aaa;--line:#2b2b2b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--white);font-family:Arial,Helvetica,sans-serif;line-height:1.45}
.site-header{height:92px;display:flex;align-items:center;justify-content:space-between;padding:12px clamp(18px,4vw,64px);position:sticky;top:0;z-index:50;background:rgba(8,8,8,.94);border-bottom:1px solid #222;backdrop-filter:blur(12px)}
.brand img{width:min(390px,62vw);height:68px;object-fit:contain;object-position:left center}
nav{display:flex;gap:28px}nav a,.text-link{color:#fff;text-decoration:none;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.08em}nav a:hover,.text-link:hover{color:var(--pink)}
.menu{display:none;background:none;border:0;width:44px}.menu span{display:block;height:3px;background:#fff;margin:7px 0}
.hero{min-height:760px;position:relative;display:grid;align-items:end;overflow:hidden;border-bottom:1px solid #222}
.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.46) 52%,rgba(0,0,0,.18)),url('assets/hero-cookie.jpg') center/cover no-repeat;filter:saturate(.9) contrast(1.08)}
.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#080808 0%,transparent 35%)}
.hero-copy{position:relative;z-index:2;padding:0 clamp(20px,7vw,110px) 90px;max-width:1000px}
.eyebrow{text-transform:uppercase;letter-spacing:.25em;font-size:12px;font-weight:900;color:#ccc;margin:0 0 16px}.eyebrow:before{content:"";display:inline-block;width:42px;height:5px;background:var(--pink);margin-right:14px;vertical-align:middle}
h1,h2{font-size:clamp(52px,8vw,112px);line-height:.88;text-transform:uppercase;letter-spacing:-.055em;margin:0;font-weight:1000}h2{font-size:clamp(42px,6vw,78px)}h1 em,h2 em{font-style:normal;color:var(--pink)}
.lead{font-size:clamp(14px,2vw,21px);text-transform:uppercase;letter-spacing:.22em;font-weight:700}.hero-actions,.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-block;padding:17px 25px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;text-decoration:none;border:1px solid #555;color:#fff;background:#111;cursor:pointer}.btn.primary{background:var(--pink);border-color:var(--pink)}.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.trust{display:grid;grid-template-columns:repeat(4,1fr);max-width:1280px;margin:auto;border-left:1px solid var(--line)}.trust div{padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.trust b{display:block;text-transform:uppercase}.trust span{display:block;color:var(--muted);font-size:13px;margin-top:5px}
.section,.quote,.contact{max-width:1280px;margin:auto;padding:100px clamp(20px,6vw,80px)}.intro{max-width:720px;color:#c7c7c7;font-size:19px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}.cards article{background:var(--panel);border:1px solid var(--line);padding:34px}.cards article span{color:var(--pink);font-weight:900}.cards h3{text-transform:uppercase;font-size:22px}.cards p,.repairs p,.contact p{color:#bbb}
.repairs{max-width:1280px;margin:auto;padding:85px clamp(20px,6vw,80px);display:grid;grid-template-columns:1.3fr .7fr;align-items:center;background:linear-gradient(120deg,#111,#080808);border:1px solid var(--line)}.repairs p{max-width:640px}.wrench{font-size:200px;color:var(--pink);text-align:center;transform:rotate(-20deg)}
.quote{background:#f3f3f3;color:#090909;max-width:none;padding-left:max(clamp(20px,6vw,80px),calc((100vw - 1280px)/2 + 80px));padding-right:max(clamp(20px,6vw,80px),calc((100vw - 1280px)/2 + 80px))}.quote .eyebrow{color:#444}.quote form{max-width:820px;margin-top:45px}.quote label{display:block;text-transform:uppercase;font-weight:900;font-size:12px;letter-spacing:.1em;margin-bottom:18px}.quote input,.quote textarea{display:block;width:100%;margin-top:7px;padding:16px;border:1px solid #bbb;background:white;font:inherit}.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-note{font-size:12px;color:#555}
footer{padding:55px 20px;text-align:center;border-top:1px solid #222;color:#888}footer img{width:min(430px,80vw);height:auto;max-height:150px;object-fit:contain}.small{font-size:11px}
@media(max-width:760px){
.site-header{height:78px;padding:8px 16px}.brand img{width:min(390px,62vw);height:68px;object-fit:contain;object-position:left center}.menu{display:block}nav{display:none;position:absolute;left:0;right:0;top:77px;background:#0b0b0b;padding:22px;flex-direction:column;border-bottom:1px solid #333}nav.open{display:flex}
.hero{min-height:680px}.hero-photo{background-position:58% center}.hero-copy{padding:0 20px 55px}.hero-copy h1{font-size:clamp(38px,12vw,52px);max-width:100%;overflow-wrap:normal}.lead{font-size:12px;line-height:1.8}.hero-actions .btn{flex:1;text-align:center}
.trust{grid-template-columns:1fr 1fr}.trust div{padding:22px 18px}.trust span{font-size:11px}
.section,.quote,.contact{padding:72px 20px}.cards{grid-template-columns:1fr}.repairs{margin:0;border-left:0;border-right:0;padding:70px 20px;grid-template-columns:1fr}.wrench{display:none}.two{grid-template-columns:1fr}.contact-actions .btn{flex:1;text-align:center;padding:14px 8px;font-size:12px}
}

@media(max-width:420px){
  .hero{min-height:640px}
  .hero-copy{padding-left:16px;padding-right:16px}
  .hero-copy h1{font-size:clamp(35px,11.5vw,46px);letter-spacing:-.06em}
  .hero-photo{background-position:62% center}
}

/* V1.2 — exact standalone client-supplied logo */
.brand img{object-fit:contain!important;object-position:left center!important}
footer img{object-fit:contain!important;object-position:center!important}

/* V1.5 — exact client-supplied SVG, displayed literally */
.brand img{width:min(390px,62vw)!important;height:68px!important;object-fit:contain!important;object-position:left center!important}
footer img{width:min(430px,80vw)!important;height:auto!important;max-height:150px!important;object-fit:contain!important;object-position:center!important}
@media(max-width:760px){.brand img{width:min(245px,72vw)!important;height:58px!important}}

/* V1.6 — exact client-supplied service SVGs */
.service-icon{display:block;width:88px;height:64px;object-fit:contain;object-position:left center;margin:0 0 20px}
@media(max-width:760px){.service-icon{width:80px;height:58px;margin-bottom:16px}}

/* V1.7 — Cooks panel graphic + live contact links */
.repair-graphic{display:flex;align-items:center;justify-content:center;min-width:0}
.repair-graphic img{display:block;width:min(100%,620px);height:auto;object-fit:contain}
@media(max-width:760px){
  .repair-graphic{margin-top:30px}
  .repair-graphic img{width:min(100%,520px)}
}

/* V1.8 — 15% larger service icons, still responsive */
.services .card img,
.service-card img,
.services-grid .card img {
  width: 115% !important;
  max-width: 115% !important;
  height: auto !important;
  transform: translateX(-6.5217%);
  object-fit: contain !important;
}

/* V1.10 — corrected service icon sizing + actual service-card interaction */
.service-icon{
  width:101px !important; /* 88px + 15% */
  height:74px !important;
  transform:none !important;
  max-width:none !important;
}
.service-box{
  background:var(--panel) !important;
  color:#fff;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,
             transform .18s ease,box-shadow .18s ease;
}
.service-box h3,
.service-box p{
  transition:color .18s ease;
}
.service-box:hover,
.service-box:focus-visible{
  border-color:var(--pink);
  outline:none;
}
.service-box:hover h3,
.service-box:hover p,
.service-box:focus-visible h3,
.service-box:focus-visible p{
  color:var(--pink);
}
.service-box.is-selected,
.service-box.is-selected:hover,
.service-box.is-selected:focus-visible{
  background:var(--pink) !important;
  border-color:var(--pink);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.service-box.is-selected h3,
.service-box.is-selected p,
.service-box.is-selected:hover h3,
.service-box.is-selected:hover p{
  color:#fff;
}
.service-box.is-selected .service-icon{
  filter:brightness(0) invert(1);
}
@media (hover:hover) and (pointer:fine){
  .service-box:hover{transform:translateY(-3px)}
}
@media(max-width:760px){
  .service-icon{
    width:92px !important; /* 80px + 15% */
    height:67px !important;
  }
  .service-box:hover{transform:none}
}

/* V1.11 — restrained service-card hover */
.service-box,
.service-box:hover,
.service-box:focus,
.service-box:focus-visible,
.service-box.is-selected,
.service-box.is-selected:hover {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: default !important;
  outline: none !important;
}
.service-box h3,
.service-box p,
.service-box:hover p,
.service-box:focus p,
.service-box:focus-visible p {
  color: #fff !important;
}
.service-box h3 {
  transition: color .18s ease;
}
@media (hover:hover) and (pointer:fine) {
  .service-box:hover h3 {
    color: var(--pink) !important;
  }
}
.service-box .service-icon,
.service-box:hover .service-icon,
.service-box:focus .service-icon,
.service-box.is-selected .service-icon {
  filter: none !important;
}

/* V1.12 — soften the bottom light section */
.contact {
  background: #d9d9d9 !important; /* approx. 15% black tint */
  color: #111 !important;
}
.contact h2,
.contact h3,
.contact p,
.contact label {
  color: #111 !important;
}
.contact .eyebrow,
.contact .section-kicker,
.contact small {
  color: #333 !important;
}

/* V1.13 — correction: restore contact area; tint GET A QUOTE instead */
.contact {
  background: #ffffff !important;
  color: #111 !important;
}
.contact h2,
.contact h3,
.contact p,
.contact label {
  color: #111 !important;
}

.quote {
  background: #d9d9d9 !important;
}
.quote h2,
.quote h3,
.quote p,
.quote label {
  color: #111 !important;
}

/* V1.14 — restore bottom contact section to black */
.contact {
  background: #000 !important;
  color: #fff !important;
}
.contact h2,
.contact h3,
.contact p,
.contact label,
.contact small {
  color: #fff !important;
}

/* V1.15 — requested single change only */
.contact .eyebrow,
.contact .section-kicker {
  color: #fff !important;
}

/* V1.17 — MBA Creative footer credit link only */
footer a,
footer a:visited,
footer a:hover,
footer a:active {
  color: #fff !important;
  text-decoration: underline !important;
}


/* V1.18 — guide pricing + richer quote request + mainland UK coverage */
.quote-intro{max-width:900px}
.quote-lead{max-width:820px;font-size:18px;line-height:1.6;margin:24px 0 0;color:#222!important}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:44px 0 22px}
.price-card{background:#111;color:#fff;padding:30px;min-width:0;border-top:5px solid var(--pink)}
.price-card.featured{border-top-color:var(--pink)}
.price-card .price-label{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:900;color:#bbb;margin-bottom:20px}
.price-card strong{display:block;font-size:clamp(42px,5vw,66px);line-height:.9;letter-spacing:-.05em;color:#fff}
.price-card b{display:block;color:var(--pink);font-size:13px;letter-spacing:.14em;margin-top:9px}
.price-card p{color:#bbb!important;font-size:14px;line-height:1.55;margin:18px 0 0}
.pricing-note{max-width:1100px;background:#cfcfcf;border-left:5px solid var(--pink);padding:20px 24px;margin-bottom:42px}
.pricing-note b{display:block;text-transform:uppercase;font-size:14px;letter-spacing:.06em}
.pricing-note p{margin:6px 0 0!important;max-width:950px;line-height:1.55;color:#222!important}
.quote select{display:block;width:100%;margin-top:7px;padding:16px;border:1px solid #bbb;background:white;font:inherit;border-radius:0;color:#111}
.quote input:focus,.quote textarea:focus,.quote select:focus{outline:2px solid var(--pink);outline-offset:1px;border-color:var(--pink)}
@media(max-width:760px){
  .pricing-grid{grid-template-columns:1fr;margin-top:34px}
  .price-card{padding:25px}
  .price-card strong{font-size:52px}
  .quote-lead{font-size:16px}
  .pricing-note{padding:18px;margin-bottom:34px}
}


/* V1.22 — Cookie real photography */
.hero-photo{background-position:center 54%;}
.photo-detail{max-width:1280px;margin:0 auto;padding:0 clamp(20px,6vw,80px) 100px;display:grid;grid-template-columns:.82fr 1.18fr;gap:34px;align-items:center}
.photo-detail-image{min-height:430px;background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.04)),url('assets/strap-detail.jpg') center 66%/cover no-repeat;border-top:5px solid var(--pink)}
.photo-detail-copy{padding:34px 0}.photo-detail-copy h2{font-size:clamp(38px,5vw,68px)}.photo-detail-copy p{color:#bbb;max-width:560px;font-size:18px}
@media(max-width:760px){.hero-photo{background-position:61% center}.photo-detail{grid-template-columns:1fr;padding:0 20px 72px;gap:18px}.photo-detail-image{min-height:360px;background-position:center 70%}.photo-detail-copy{padding:10px 0 0}}

/* V1.24 — corrected hero focal point for Cookie's cropped truck image */
.hero-photo{background-position:58% 12%;}
@media(max-width:760px){.hero-photo{background-position:61% 12%;}}
@media(max-width:900px) and (orientation:landscape){.hero-photo{background-position:58% 8%;}}

/* V1.25 — PHONE PORTRAIT ONLY: enlarge and centre hero truck. Desktop/tablet/landscape unchanged. */
@media (max-width:600px) and (orientation:portrait){
  .hero-photo{
    background-size:175% auto;
    background-position:50% 0%;
  }
}

/* V1.26 — PHONE PORTRAIT ONLY: tighter pickup-focused hero crop. All other screen sizes unchanged. */
@media (max-width:600px) and (orientation:portrait){
  .hero-photo{
    background-size:210% auto;
    background-position:72% 0%;
  }
}

/* V1.27 — service cards: pink left-edge accent only */
.service-box,
.service-box:hover,
.service-box:focus,
.service-box:focus-visible,
.service-box.is-selected,
.service-box.is-selected:hover {
  border-left: 4px solid var(--pink) !important;
}