/* Phoenix HUD. Three parts: tokens, sitewide chrome, homepage-only trial.
   Colour photos stay colour. Do not add a grey, sepia, or tint filter.
   Big H1s use Space Grotesk with a Book Now bleed. H2s, body, and prices stay flat.
   Buttons, light lines, brackets, and focus may glow. */

@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/fonts/space-grotesk-700.woff2") format("woff2");
}

:root{
  /* palette: black + Phoenix orange ONLY */
  --ph-ink-0:#050506;   /* page ground */
  --ph-ink-1:#0b0b0d;   /* solid panel fallback */
  --ph-ink-2:#0e0e11;   /* glass panel base */
  --ph-text:#f4f1ec;    /* headings/body on dark  (18:1) */
  --ph-text-2:#bdb7af;  /* secondary / inclusions (≥7.4:1 worst) */
  --ph-text-3:#9a938b;  /* mono labels / placeholders (≥4.85:1 worst) */
  --ph-orange:#c35305;      /* brand: glow source, NOT a text background with small white text unless ≥4.6:1 is ok */
  --ph-orange-deep:#9b3d00; /* button fill → white text 6.1–6.3:1 */
  --ph-orange-hot:#ff7a1a;  /* light lines, brackets, bullets */
  --ph-orange-glow:#ff9a3c; /* borders/highlights */
  --ph-orange-type:#ff8800; /* detail £ figures, system 600. Not H1s. */
  --ph-orange-type-h1:#ff7a1a; /* solid H1 fallback where background-clip is missing */
  /* One light halo behind the glyphs. Not the 9025de8 double drop-shadow. */
  --ph-h1-bleed:linear-gradient(180deg,#ff9a3c 0%,#ff7a1a 28%,#c35305 62%,#9b3d00 100%);
  --ph-h1-glow:0 0 8px rgba(255,122,26,.30);
  --ph-f-h1:"Space Grotesk",sans-serif;
  --ph-focus:#ffb27a;       /* focus ring (≥8.3:1) */
  --ph-hair:rgba(255,255,255,.10);
  --ph-grid:rgba(255,255,255,.025);

  /* glass */
  --ph-blur-btn:14px; --ph-blur-panel:12px; --ph-blur-hdr:12px;
  --ph-glass-panel:rgba(14,14,17,.84);
  --ph-glass-hdr:rgba(5,5,6,.78);
  --ph-glass-ghost:rgba(255,255,255,.05);
  --ph-btn-fill:rgba(155,61,0,.90);
  --ph-btn-fill-hover:rgba(168,67,0,.92);
  --ph-btn-fill-active:rgba(134,52,0,.95);
  --ph-btn-border:rgba(255,154,60,.75);
  --ph-ghost-border:rgba(255,154,60,.45);

  /* glow (restrained) */
  --ph-glow-btn:0 0 18px rgba(255,122,26,.28);
  --ph-glow-btn-hover:0 0 18px rgba(255,122,26,.45);
  --ph-glow-ghost-hover:0 0 16px rgba(255,122,26,.18);
  --ph-hl-inset:inset 0 1px 0 rgba(255,255,255,.22);
  --ph-line:linear-gradient(90deg,transparent,rgba(255,122,26,.85) 50%,transparent);
  --ph-line-glow:0 0 8px rgba(255,122,26,.45);
  --ph-hdr-edge:inset 0 -1px 0 rgba(255,122,26,.85),0 8px 8px -8px rgba(255,122,26,.45);
  --ph-bracket:2px solid #ff7a1a; --ph-bracket-size:16px;
  --ph-bracket-glow:drop-shadow(0 0 4px rgba(255,122,26,.6));

  /* type (Becks PASS) */
  --ph-f-display:ClashDisplay-Bold,sans-serif;     /* H2 only, 700. H1s use --ph-f-h1 */
  --ph-f-brand:ClashDisplay-Medium,sans-serif;     /* wordmark, 500 */
  --ph-f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* 400 body, 600 buttons */
  --ph-f-mono:ui-monospace,"SFMono-Regular",Consolas,Menlo,monospace; /* HUD labels 11px .14em upper */

  /* shape + motion */
  --ph-radius-btn:3px; --ph-radius-panel:2px;
  --ph-ease:cubic-bezier(.2,.7,.2,1); --ph-t:180ms;
  --ph-sheen:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 46%);
}

/* ---------- sitewide ground ---------- */
html{
  background:#050506;
}
html body,
html body[class]{
  background-color:#050506;
  color:var(--ph-text-2);
  font-family:var(--ph-f-body);
  font-weight:400;
}
html body main[class*="bg-"]{
  background:
    radial-gradient(50% 40% at 80% 18%,rgba(195,83,5,.08),transparent 70%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/40px 40px,
    #050506;
}
html body main section[class~="bg-black"],
html body main section[class*="bg-[#1b1b1b]"]{
  background-color:transparent;
}
html body main > section + section{
  box-shadow:inset 0 1px 0 rgba(255,122,26,.55);
}
/* Off-palette brown/orange wash behind package prices. Ground stays #050506. */
html body [class*="from-[#8B4513]"]{
  display:none;
}

/* ---------- type hierarchy (colour and family only; sizes stay) ---------- */
html body main h1[class],
html body .ph-h1{
  display:block;
  width:fit-content;
  max-width:100%;
  box-sizing:border-box;
  padding:10px 14px 12px;
  font-family:var(--ph-f-h1);
  font-weight:700;
  font-variation-settings:normal;
  letter-spacing:-.03em;
  color:#ff7a1a;
  text-shadow:var(--ph-h1-glow);
  filter:none;
}
html body main [class*="text-center"] > h1[class],
html body main h1[class*="text-center"]{
  margin-left:auto;
  margin-right:auto;
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  html body main h1[class],
  html body .ph-h1{
    background-image:
      var(--ph-h1-bleed),
      linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
      linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
      linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
      linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a);
    background-repeat:no-repeat;
    background-size:
      100% 100%,
      18px 2px,2px 16px,18px 2px,2px 16px,18px 2px,2px 16px,18px 2px,2px 16px;
    background-position:
      0 0,
      left 2px top 2px,left 2px top 2px,right 2px top 2px,right 2px top 2px,
      left 2px bottom 2px,left 2px bottom 2px,right 2px bottom 2px,right 2px bottom 2px;
    -webkit-background-clip:text,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;
    background-clip:text,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}
html body h1[class]::before{
  background-image:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  text-shadow:none;
  filter:none;
}
html body h2[class]{
  font-family:var(--ph-f-display);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ph-text);
  text-shadow:none;
  filter:none;
}
html body h3[class],
html body h4[class]{
  font-family:var(--ph-f-body);
  font-weight:600;
  color:var(--ph-text);
  text-shadow:none;
  filter:none;
}
html body h3[class*="text-5xl"]{
  font-size:1.35rem;
  line-height:1.3;
}
html body h3[class*="after\:"]::after{
  content:none;
}
html body :is(p,li,label,dd)[class]{
  font-family:var(--ph-f-body);
  font-weight:400;
}
html body section span[class*="rounded-full"][class*="bg-orange-500"]{
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--ph-text-3);
  background:transparent;
  border-radius:0;
  border-left:2px solid var(--ph-orange-hot);
  padding:2px 0 2px 8px;
}

/* ---------- header ---------- */
html body header.bg-black,
html body header[class*="bg-black"]{
  background-color:#050506;
  background-color:var(--ph-glass-hdr);
  -webkit-backdrop-filter:blur(var(--ph-blur-hdr));
  backdrop-filter:blur(var(--ph-blur-hdr));
  border-bottom-color:transparent;
  box-shadow:var(--ph-hdr-edge);
}
html body header a[href="/"] > span[class]{
  font-family:var(--ph-f-brand);
  font-weight:500;
  font-size:15px;
  letter-spacing:.02em;
  line-height:1;
}
html body header a[class*="font-medium"]:not([class~="bg-orange-500"]):not([class~="bg-primary"]){
  font-family:var(--ph-f-body);
  font-weight:400;
  color:var(--ph-text-2);
  text-decoration:none;
}
html body header a[class*="font-medium"]:not([class~="bg-orange-500"]):not([class~="bg-primary"]):hover,
html body header a.ph-on:not([class~="bg-orange-500"]){
  color:var(--ph-text);
}
html body header a.ph-on:not([class~="bg-orange-500"]),
html body header a[aria-current="page"]:not([class~="bg-orange-500"]){
  box-shadow:inset 0 -2px 0 rgba(255,122,26,.6);
}
html body header button[class*="bg-black"]{
  background-color:transparent;
  background-image:none;
  color:var(--ph-text-2);
  font-family:var(--ph-f-body);
  font-weight:400;
  border-radius:2px;
  box-shadow:none;
  height:auto;
}
html body header button[class*="bg-black"]:hover,
html body header button[class*="bg-black"]:focus,
html body header button[class*="bg-black"][data-state="open"]{
  background-color:transparent;
  color:var(--ph-text);
}
html body header button[class*="bg-black"][data-state="open"]{
  box-shadow:inset 0 -2px 0 rgba(255,122,26,.6);
}

/* mobile sheet */
html body [role="dialog"][class*="bg-black"]{
  z-index:70;
  background-color:rgba(14,14,17,.92);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:40px 40px,40px 40px;
  -webkit-backdrop-filter:blur(var(--ph-blur-panel));
  backdrop-filter:blur(var(--ph-blur-panel));
  border-left-color:transparent;
  box-shadow:inset 1px 0 0 rgba(255,122,26,.55);
  color:var(--ph-text);
}
html body [role="dialog"] a:not([class~="bg-orange-500"]):not([class~="bg-primary"]){
  font-family:var(--ph-f-body);
  font-weight:400;
  color:var(--ph-text-2);
  min-height:48px;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(255,122,26,.28);
  text-decoration:none;
}
html body [role="dialog"] a:not([class~="bg-orange-500"]):not([class~="bg-primary"]):hover,
html body [role="dialog"] a.ph-on{
  color:var(--ph-text);
}
html body [role="dialog"] h3[class]{
  font-family:var(--ph-f-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--ph-orange-type);
  border-left:0;
  padding-left:0;
}

/* ---------- footer ---------- */
html body footer[class]{
  position:relative;
  background-color:#050506;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:40px 40px,40px 40px;
  color:var(--ph-text-2);
}
html body footer[class]::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:var(--ph-line);
  box-shadow:var(--ph-line-glow);
  pointer-events:none;
}
html body footer a[href="/"] > span[class]{
  font-family:var(--ph-f-brand);
  font-weight:500;
  color:var(--ph-orange-type);
}
html body footer h3[class]{
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ph-text-3);
  border-left:2px solid var(--ph-orange-hot);
  padding-left:8px;
}
html body footer :is(a,li,p)[class]{
  font-family:var(--ph-f-body);
  color:var(--ph-text-2);
}
html body footer a[class]:hover{
  color:var(--ph-text);
}
html body footer a[href*="facebook.com"],
html body footer a[href*="instagram.com"]{
  border-radius:999px;
}
html body footer a[href*="facebook.com"]:hover,
html body footer a[href*="instagram.com"]:hover{
  color:var(--ph-orange-glow);
  box-shadow:0 0 0 1px rgba(255,154,60,.85);
  background:transparent;
}
html body footer div:has(> [data-phoenix-cookie-settings]){
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
html body footer div:has(> [data-phoenix-cookie-settings]) > :is(h3,ul,a,button,div){
  margin-top:0;
  margin-bottom:0;
}
html body footer div:has(> [data-phoenix-cookie-settings]) > a[href="/privacy/"]{
  display:inline-block;
  padding:2px 0;
  line-height:1.4;
  position:static;
}
html body footer div:has(> [data-phoenix-cookie-settings]) > [data-phoenix-cookie-settings]{
  margin:0;
  position:static;
}
html body footer div:has(> [data-phoenix-cookie-settings]) > div[class*="flex"]{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin:0;
}

/* ---------- buttons ---------- */
html body :is(a,button)[class~="bg-orange-500"],
html body :is(a,button)[class~="bg-primary"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ph-f-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  color:#fff;
  height:auto;
  padding:15px 26px;
  border-radius:var(--ph-radius-btn);
  border:1px solid var(--ph-btn-border);
  background-color:var(--ph-btn-fill);
  background-image:var(--ph-sheen);
  box-shadow:var(--ph-glow-btn);
  text-decoration:none;
  cursor:pointer;
  -webkit-backdrop-filter:blur(var(--ph-blur-btn));
  backdrop-filter:blur(var(--ph-blur-btn));
  transition:background-color var(--ph-t) var(--ph-ease),border-color var(--ph-t) var(--ph-ease),box-shadow var(--ph-t) var(--ph-ease);
}
html body header :is(a,button)[class~="bg-orange-500"]{
  font-size:14px;
  padding:11px 18px;
}
html body :is(a,button)[class~="bg-orange-500"]:hover,
html body :is(a,button)[class~="bg-primary"]:hover{
  color:#fff;
  border-color:rgba(255,170,90,.95);
  background-color:var(--ph-btn-fill-hover);
  background-image:var(--ph-sheen);
  box-shadow:var(--ph-glow-btn-hover);
}
html body :is(a,button)[class~="bg-orange-500"]:active,
html body :is(a,button)[class~="bg-primary"]:active,
html body .ph-btn-primary:active{
  transform:translateY(1px);
  background-color:var(--ph-btn-fill-active);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
}
html body :is(a,button)[class*="border-orange"]:not([class*="rounded-3xl"]):not([class*="rounded-lg"]):not([class*="bg-white/5"]),
html body :is(a,button)[class*="border-white"]:not([class*="rounded-3xl"]):not([class*="rounded-lg"]):not([class*="bg-white/5"]),
html body :is(a,button)[class*="border-primary"]:not([class*="rounded-3xl"]):not([class*="bg-white/5"]),
html body :is(a,button)[class~="bg-white"]:not([class*="rounded-3xl"]),
html body [data-phoenix-cookie-settings]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ph-f-body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  color:var(--ph-text);
  height:auto;
  padding:11px 18px;
  border-radius:var(--ph-radius-btn);
  border:1px solid var(--ph-ghost-border);
  background-color:var(--ph-glass-ghost);
  background-image:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  text-decoration:none;
  cursor:pointer;
  -webkit-backdrop-filter:blur(var(--ph-blur-btn));
  backdrop-filter:blur(var(--ph-blur-btn));
}
html body :is(a,button)[class*="border-orange"]:not([class*="rounded-3xl"]):not([class*="bg-white/5"]):hover,
html body :is(a,button)[class*="border-white"]:not([class*="rounded-3xl"]):not([class*="bg-white/5"]):hover,
html body :is(a,button)[class*="border-primary"]:not([class*="rounded-3xl"]):hover,
html body :is(a,button)[class~="bg-white"]:hover,
html body .ph-btn-ghost:hover,
html body [data-phoenix-cookie-settings]:hover{
  color:var(--ph-text);
  border-color:rgba(255,154,60,.85);
  background-color:rgba(255,122,26,.10);
  box-shadow:var(--ph-glow-ghost-hover);
}
html body .ph-btn:active,
html body :is(a,button)[class*="border-white"]:not([class*="rounded-3xl"]):active,
html body [data-phoenix-cookie-settings]:active{
  transform:translateY(1px);
}
html body a.ph-btn-sm{
  font-size:14px;
  padding:11px 18px;
}
html body a.ph-btn.ph-btn-ghost:not(.ph-btn-sm){
  font-size:15px;
  padding:15px 26px;
}

/* ---------- card chassis ---------- */
html body :is(a,div)[class*="rounded-3xl"][class*="bg-white/5"],
html body div[class*="rounded-lg"][class*="bg-white/5"][class*="border-gray-800"],
html body div[class*="rounded-3xl"][class*="ring-gray-200"],
html body div[class*="bg-[#1b1b1b]/60"][class*="border-gray-800"][class*="rounded-"],
html body div[class*="bg-black/80"][class*="border"],
html body div[class*="bg-zinc-900/40"],
html body a[class*="rounded-3xl"][class*="border-orange"]{
  position:relative;
  background-color:var(--ph-glass-panel);
  -webkit-backdrop-filter:blur(var(--ph-blur-panel));
  backdrop-filter:blur(var(--ph-blur-panel));
  border:1px solid var(--ph-hair);
  border-radius:var(--ph-radius-panel);
  box-shadow:none;
  color:var(--ph-text-2);
}
html body :is(a,div)[class*="rounded-3xl"][class*="bg-white/5"]::before,
html body div[class*="rounded-lg"][class*="bg-white/5"][class*="border-gray-800"]::before,
html body div[class*="rounded-3xl"][class*="ring-gray-200"]::before,
html body div[class*="bg-[#1b1b1b]/60"][class*="border-gray-800"][class*="rounded-"]::before,
html body div[class*="bg-black/80"][class*="border"]::before,
html body div[class*="bg-zinc-900/40"]::before,
html body a[class*="rounded-3xl"][class*="border-orange"]::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:1px;
  background:var(--ph-line);
  box-shadow:var(--ph-line-glow);
  pointer-events:none;
}
html body :is(a,div)[class*="rounded-3xl"][class*="bg-white/5"]:hover,
html body div[class*="rounded-lg"][class*="bg-white/5"][class*="border-gray-800"]:hover,
html body a[class*="rounded-3xl"][class*="border-orange"]:hover{
  border-color:rgba(255,154,60,.35);
  transform:none;
  box-shadow:none;
}
html body :is(a,div)[class*="bg-white/5"]:hover img[class*="scale-"]{
  transform:none;
}
html body div[class*="ring-gray-200"] > div[class*="bg-gradient"]{
  display:none;
}
html body div[class*="ring-gray-200"] :is(h2,h3,h4)[class]{
  color:var(--ph-text);
}
html body div[class*="ring-gray-200"] :is(p,li)[class*="text-gray"]{
  color:var(--ph-text-2);
}
html body div[class*="ring-gray-200"] span[class*="text-4xl"],
html body [class*="FF8800"],
html body .ph-price{
  font-family:var(--ph-f-body);
  font-weight:600;
  color:var(--ph-orange-type);
  text-shadow:none;
  filter:none;
}
html body div[class*="ring-gray-200"] li > div:first-child{
  font-size:0;
  width:7px;
  height:7px;
  margin-top:7px;
  border:1px solid var(--ph-orange-hot);
  background:transparent;
  color:transparent;
  transform:rotate(45deg);
}

/* ---------- forms: field chrome only ---------- */
html body form label[class]{
  font-family:var(--ph-f-body);
  font-weight:500;
  color:var(--ph-text);
}
html body form :is(input,textarea,select)[class]:not([type="hidden"]){
  font-family:var(--ph-f-body);
  font-weight:400;
  color:var(--ph-text);
  background-color:rgba(14,14,17,.7);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--ph-radius-panel);
  box-shadow:none;
}
html body form :is(input,textarea,select)[class]::placeholder{
  color:var(--ph-text-3);
  opacity:1;
}
html body form :is(input,textarea,select)[class]:focus,
html body form :is(input,textarea,select)[class]:focus-visible{
  border-color:rgba(255,154,60,.85);
  box-shadow:0 0 0 3px rgba(255,122,26,.18);
}
html body form input[class]:-webkit-autofill{
  -webkit-text-fill-color:var(--ph-text);
  caret-color:var(--ph-text);
  box-shadow:0 0 0 1000px #0e0e11 inset;
}
html body form button[type="button"][class*="border-gray-800"]{
  font-family:var(--ph-f-body);
  font-weight:600;
  color:var(--ph-text);
  background-color:var(--ph-glass-ghost);
  background-image:none;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--ph-radius-btn);
  box-shadow:none;
}
html body form button[type="button"][aria-pressed="true"]{
  color:#fff;
  background-color:var(--ph-btn-fill);
  background-image:var(--ph-sheen);
  border-color:var(--ph-btn-border);
}

/* ---------- consent: edge only. Copy, IDs, and logic stay in the JS. ---------- */
html #phoenix-consent{
  background:rgba(5,5,6,.9);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:0;
  box-shadow:inset 0 1px 0 rgba(255,122,26,.85);
  color:var(--ph-text);
  font-family:var(--ph-f-body);
}
html #phoenix-consent p{
  font-family:var(--ph-f-body);
  font-weight:400;
  color:var(--ph-text);
}
html #phoenix-consent a{
  color:var(--ph-orange-type);
}
html #phoenix-consent-accept,
html #phoenix-consent-reject{
  font-family:var(--ph-f-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  line-height:1;
  border-radius:var(--ph-radius-btn);
  min-height:44px;
  flex:1 1 0;
  -webkit-backdrop-filter:blur(var(--ph-blur-btn));
  backdrop-filter:blur(var(--ph-blur-btn));
}
html #phoenix-consent-accept{
  color:#fff;
  border:1px solid var(--ph-btn-border);
  background-color:var(--ph-btn-fill);
  background-image:var(--ph-sheen);
  box-shadow:var(--ph-glow-btn);
}
html #phoenix-consent-accept:hover{
  border-color:rgba(255,170,90,.95);
  background-color:var(--ph-btn-fill-hover);
  box-shadow:var(--ph-glow-btn-hover);
}
html #phoenix-consent-reject{
  color:var(--ph-text);
  border:1px solid var(--ph-ghost-border);
  background-color:var(--ph-glass-ghost);
  background-image:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
html #phoenix-consent-reject:hover{
  color:var(--ph-text);
  border-color:rgba(255,154,60,.85);
  background-color:rgba(255,122,26,.10);
  box-shadow:var(--ph-glow-ghost-hover);
}

/* focus ring: the one !important, so it beats Tailwind outline-none */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body textarea:focus-visible,
html body select:focus-visible,
html #phoenix-consent a:focus-visible,
html #phoenix-consent button:focus-visible{
  outline:2px solid var(--ph-focus) !important;
  outline-offset:3px !important;
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body header[class*="bg-black"]{background-color:#050506}
  html body .ph-btn-primary,
  html body :is(a,button)[class~="bg-orange-500"],
  html body :is(a,button)[class~="bg-primary"],
  html #phoenix-consent-accept{background-color:#9b3d00;background-image:none}
  html body .ph-btn-ghost,
  html body [data-phoenix-cookie-settings],
  html #phoenix-consent-reject{background-color:#141416}
  html body .ph-frame,
  html body .ph-card,
  html body [role="dialog"][class*="bg-black"],
  html body :is(a,div)[class*="bg-white/5"],
  html body div[class*="ring-gray-200"]{background-color:#0e0e11}
  html #phoenix-consent{background-color:#050506}
  html body form :is(input,textarea,select)[class]:not([type="hidden"]){background-color:#0e0e11}
}

@media (prefers-reduced-motion:reduce){
  .ph-scan{animation:none !important}
  .ph-btn,.ph-card{transition:none !important}
  .ph-btn:active,
  html body :is(a,button)[class~="bg-orange-500"]:active,
  html body .ph-btn-primary:active{transform:none}
  html body [class*="transition"],
  html body [class*="animate"]{
    animation:none !important;
    transition:none !important;
  }
  html body img[class*="scale-"]{transform:none !important}
}

@media (max-width:720px){
  html body header a[href="/"] > span[class]{font-size:15px}
  html #phoenix-consent-accept,
  html #phoenix-consent-reject{min-height:44px}
}

/* ---------- polish: service-card hover + Services menu contrast ---------- */
html body div[class*="rounded-lg"][class*="bg-white/5"][class*="border-gray-800"],
html body a[class*="rounded-3xl"][class*="bg-white/5"][class*="border-white"]{
  border-radius:14px;
  transition:transform var(--ph-t) var(--ph-ease),box-shadow var(--ph-t) var(--ph-ease),border-color var(--ph-t) var(--ph-ease);
}
html body div[class*="rounded-lg"][class*="bg-white/5"][class*="border-gray-800"]:hover,
html body a[class*="rounded-3xl"][class*="bg-white/5"][class*="border-white"]:hover{
  z-index:1;
  border-color:rgba(255,154,60,.75);
  transform:scale(1.03);
  box-shadow:0 0 0 1px rgba(255,154,60,.45),0 10px 28px rgba(255,122,26,.28);
}
html body div[class*="lg:grid-cols-"][class*="bg-black"] h3[class]{
  font-family:var(--ph-f-body);
  font-size:.875rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--ph-orange-type);
}
html body div[class*="lg:grid-cols-"][class*="bg-black"] a[class*="text-gray-300"]{
  font-family:var(--ph-f-body);
  font-weight:400;
  color:var(--ph-text-2);
}
html body div[class*="lg:grid-cols-"][class*="bg-black"] a[class*="text-gray-300"]:hover{
  color:var(--ph-text);
  background-color:transparent;
}
html body div[class~="bg-orange-500"] :is(h4,p)[class]{
  font-family:var(--ph-f-body);
  color:#fff;
  text-shadow:none;
  filter:none;
}
html body div[class~="bg-orange-500"] h4[class]{font-weight:600}
html body div[class~="bg-orange-500"] p[class]{font-weight:400;color:rgba(255,255,255,.92)}
html body div[class~="bg-orange-500"] a[class~="bg-black"]{
  color:#fff;
  font-weight:600;
  background-color:#050506;
}
@media (prefers-reduced-motion:reduce){
  html body div[class*="rounded-lg"][class*="bg-white/5"][class*="border-gray-800"]:hover,
  html body a[class*="rounded-3xl"][class*="bg-white/5"][class*="border-white"]:hover{
    transform:none;
    transition:none;
  }
}

/* ---------- Option B: editorial service-detail hero (photo heroes only) ---------- */
html body main div[class*="min-h-[90vh]"] div[class*="bg-cover"]{
  filter:none;
}
html body main div[class*="min-h-[90vh]"] div[class*="bg-black/60"],
html body main div[class*="min-h-[90vh]"] div[class*="bg-gradient-to-t"]{
  background-color:transparent;
  border:0;
  box-shadow:none;
  background-image:linear-gradient(90deg,rgba(5,5,6,.92) 0%,rgba(5,5,6,.78) 18%,rgba(5,5,6,.42) 40%,rgba(5,5,6,.08) 52%,transparent 58%);
}
html body main div[class*="min-h-[90vh]"] > div[class*="max-w-7xl"]{
  width:100%;
  margin-left:0;
  margin-right:auto;
  justify-content:flex-start;
}
html body main div[class*="min-h-[90vh]"] div[class*="max-w-2xl"]{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  text-align:left;
  max-width:32rem;
}
html body main div[class*="min-h-[90vh]"] div[class*="max-w-2xl"]::before{
  content:"SERVICE";
  display:block;
  margin:0 0 14px;
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--ph-text-3);
}
html body main div[class*="min-h-[90vh]"] div[class*="max-w-2xl"] > p[class]{
  font-family:var(--ph-f-body);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.5;
  color:#fff;
  text-shadow:none;
  filter:none;
  max-width:32rem;
}
html body main div[class*="min-h-[90vh]"]:has([style*="Basic_interior"]) div[class*="max-w-2xl"]::before,
html body main div[class*="min-h-[90vh]"]:has([style*="premiumhero"]) div[class*="max-w-2xl"]::before{
  content:"SERVICE · INTERIOR";
}
html body main div[class*="min-h-[90vh]"]:has([style*="basicexteriorhero"]) div[class*="max-w-2xl"]::before,
html body main div[class*="min-h-[90vh]"]:has([style*="wash-and-protect.webp"]) div[class*="max-w-2xl"]::before,
html body main div[class*="min-h-[90vh]"]:has([style*="new-car-enhancement"]) div[class*="max-w-2xl"]::before,
html body main div[class*="min-h-[90vh]"]:has([style*="phoenix-revive.webp"]) div[class*="max-w-2xl"]::before,
html body main div[class*="min-h-[90vh]"]:has([style*="phoenix-rebirth-hero"]) div[class*="max-w-2xl"]::before{
  content:"SERVICE · EXTERIOR";
}
html body main div[class*="min-h-[90vh]"]:has([style*="miyabicoatinghero"]) div[class*="max-w-2xl"]::before,
html body main div[class*="min-h-[90vh]"]:has([style*="enreicoatinghero"]) div[class*="max-w-2xl"]::before{
  content:"SERVICE · CERAMIC";
}
html body main div[class*="min-h-[90vh]"]:has([style*="engine-bay-detailing-hero"]) div[class*="max-w-2xl"]::before{
  content:"SERVICE · ENGINE BAY";
}
html body main div[class*="min-h-[90vh]"]:has([style*="headlight-restoration-hero"]) div[class*="max-w-2xl"]::before{
  content:"SERVICE · HEADLIGHT";
}
html body main div[class*="min-h-[90vh]"]:has([style*="soft-top-cleaning-hero"]) div[class*="max-w-2xl"]::before{
  content:"SERVICE · SOFT TOP";
}
html body main div[class*="min-h-[90vh]"]:has([style*="wash-and-protect.webp"]):has(h1[class*="mt-4"]) div[class*="max-w-2xl"]::before{
  content:"SERVICE · MAINTENANCE";
}
@media (max-width:800px){
  html body main div[class*="min-h-[90vh]"] div[class*="bg-black/60"],
  html body main div[class*="min-h-[90vh]"] div[class*="bg-gradient-to-t"]{
    background-image:linear-gradient(90deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.86) 48%,rgba(5,5,6,.55) 74%,transparent 100%);
  }
  html body main div[class*="min-h-[90vh]"] div[class*="max-w-2xl"]{
    max-width:none;
  }
}
@media (prefers-reduced-motion:reduce){
  html body main div[class*="min-h-[90vh]"] div[class*="max-w-2xl"]{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

/* ---------- homepage trial components (look unchanged) ---------- */
.ph-hero{position:relative;min-height:78vh;padding:36px 0 28px;overflow:hidden}
.ph-grid{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/40px 40px}
.ph-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.ph-trace path{fill:none;stroke:rgba(255,122,26,.55);stroke-width:1}
.ph-trace circle{fill:#050506;stroke:#ff7a1a;stroke-width:1}
.ph-hero-wrap{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:0 64px;display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.ph-h1{margin:0 0 22px;color:#ff7a1a;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(36px,4.2vw,68px);line-height:.98;letter-spacing:-.03em}
.ph-sub{margin:0 0 26px;max-width:38rem;color:#e5e7eb;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:400;font-size:clamp(15px,1.05vw,18px);line-height:1.5}
.ph-em{font-weight:600;color:#ff8800}
.ph-ctas{display:flex;flex-wrap:wrap;gap:14px}
.ph-reviews{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.ph-score{color:#f4f1ec;font-size:18px;font-weight:700}
.ph-star{width:20px;height:20px;color:#ff8800;fill:#ff8800}
.ph-google{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.92);color:#111;font-size:14px;font-weight:600;cursor:pointer}
.ph-google span{color:#111;font-size:12px;font-weight:600}
.ph-line{height:1px;margin-top:28px;background:linear-gradient(90deg,transparent,rgba(255,122,26,.85) 50%,transparent);box-shadow:0 0 8px rgba(255,122,26,.45)}

.ph-btn{display:inline-flex;align-items:center;justify-content:center;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1;padding:15px 26px;border-radius:3px;text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background-color 180ms cubic-bezier(.2,.7,.2,1),border-color 180ms cubic-bezier(.2,.7,.2,1),box-shadow 180ms cubic-bezier(.2,.7,.2,1)}
.ph-btn-sm{font-size:14px;padding:11px 18px}
.ph-btn-primary{color:#fff;border:1px solid rgba(255,154,60,.75);background-color:rgba(155,61,0,.90);background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 46%);box-shadow:0 0 18px rgba(255,122,26,.28)}
.ph-btn-primary:hover{color:#fff;border-color:rgba(255,170,90,.95);background-color:rgba(168,67,0,.92);background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 46%);box-shadow:0 0 18px rgba(255,122,26,.45)}
.ph-btn-ghost{color:#f4f1ec;border:1px solid rgba(255,154,60,.45);background-color:rgba(255,255,255,.05);background-image:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ph-btn-ghost:hover{color:#f4f1ec;border-color:rgba(255,154,60,.85);background-color:rgba(255,122,26,.10);box-shadow:0 0 16px rgba(255,122,26,.18)}

.ph-frame{position:relative;height:360px;border:1px solid rgba(255,255,255,.10);border-radius:2px;background:rgba(14,14,17,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px}
.ph-frame-media{position:relative;width:100%;height:100%;overflow:hidden}
.ph-frame-media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.ph-video{width:100%;height:100%;object-fit:cover}
.ph-scan{position:absolute;left:0;right:0;top:34%;height:1px;z-index:3;background:linear-gradient(90deg,transparent,rgba(255,154,60,.9),transparent);box-shadow:0 0 8px rgba(255,122,26,.8);animation:ph-scan 5s cubic-bezier(.2,.7,.2,1) infinite alternate}
@keyframes ph-scan{to{top:78%}}
.ph-ret{position:absolute;z-index:3;left:58%;top:54%;width:96px;height:96px;margin:-48px 0 0 -48px;border:1px solid rgba(255,154,60,.75);border-radius:50%;pointer-events:none}
.ph-ret::before,.ph-ret::after{content:"";position:absolute;background:rgba(255,154,60,.75)}
.ph-ret::before{left:50%;top:-14px;bottom:-14px;width:1px}
.ph-ret::after{top:50%;left:-14px;right:-14px;height:1px}
.ph-ret i{position:absolute;inset:30px;border:1px solid rgba(255,154,60,.5);border-radius:50%}
.ph-br{position:absolute;width:16px;height:16px;border:0 solid #ff7a1a;z-index:5;filter:drop-shadow(0 0 4px rgba(255,122,26,.6));pointer-events:none}
.ph-tl{left:-1px;top:-1px;border-top-width:2px;border-left-width:2px}
.ph-tr{right:-1px;top:-1px;border-top-width:2px;border-right-width:2px}
.ph-bl{left:-1px;bottom:-1px;border-bottom-width:2px;border-left-width:2px}
.ph-brr{right:-1px;bottom:-1px;border-bottom-width:2px;border-right-width:2px}
.ph-lab{position:absolute;z-index:4;font-family:ui-monospace,"SFMono-Regular",Consolas,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#f4f1ec;background:rgba(5,5,6,.78);padding:6px 9px;border-left:2px solid #ff7a1a}
.ph-l1{left:18px;top:18px}
.ph-l2{right:18px;bottom:18px}
.ph-l3{right:18px;top:18px;border-left:0;border-right:2px solid #ff7a1a;color:#bdb7af}

.ph-packages{position:relative;z-index:1;padding:8px 64px 56px;background:transparent}
.ph-cards{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ph-card{position:relative;display:flex;flex-direction:column;background:rgba(14,14,17,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.10);border-radius:2px;overflow:visible;min-height:100%}
.ph-card::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,122,26,.85),transparent);box-shadow:0 0 8px rgba(255,122,26,.45)}
.ph-card-ph{height:auto;aspect-ratio:4/3;margin:10px 10px 0;overflow:hidden}
html body .ph-card .ph-photo{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center;display:block}
.ph-card-bd{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.ph-k{margin:0 0 8px;font-family:ui-monospace,"SFMono-Regular",Consolas,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9a938b}
.ph-h2{margin:0 0 6px;color:#f4f1ec;font-family:ClashDisplay-Bold,sans-serif;font-weight:700;font-size:26px}
.ph-price{margin:0 0 12px;color:#ff8800;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:1.15rem;font-weight:600}
.ph-incs{margin:0 0 18px;padding:0;list-style:none;flex:1}
.ph-incs li{position:relative;margin:0 0 7px;padding-left:16px;color:#bdb7af;font-size:14px;line-height:1.4}
.ph-incs li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border:1px solid #ff7a1a;transform:rotate(45deg)}
.ph-card .ph-btn{align-self:flex-start;margin-top:auto}

html body .ph-sub{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:400;
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.5;
  color:#e5e7eb;
}
html body .ph-k,
html body .ph-lab{
  font-family:ui-monospace,"SFMono-Regular",Consolas,Menlo,monospace;
  font-weight:400;
  font-size:11px;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  color:#9a938b;
}
html body .ph-lab{color:#f4f1ec}
html body .ph-l3{color:#bdb7af}
html body p.ph-price{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:600;
  font-size:1.15rem;
  line-height:1.2;
  color:#ff8800;
}
html body .ph-score{
  font-weight:700;
  font-size:18px;
  line-height:1;
  color:#f4f1ec;
}
html body .ph-h1{
  font-family:var(--ph-f-h1);
  font-size:clamp(36px,4.2vw,68px);
  line-height:.98;
  letter-spacing:-.03em;
}
html body .ph-h2{
  font-size:26px;
  color:#f4f1ec;
}
html body .ph-google,
html body .ph-google span{
  font-family:var(--ph-f-body);
  color:#111;
}

@media (max-width:720px){
  .ph-hero{min-height:0;padding:20px 0 8px}
  .ph-hero-wrap,.ph-packages{padding-left:20px;padding-right:20px}
  .ph-hero-wrap{grid-template-columns:1fr;gap:22px}
  .ph-frame{height:250px}
  .ph-trace{display:none}
  html body .ph-lab{font-size:10px;letter-spacing:.08em}
  .ph-l1{left:12px;top:12px;max-width:calc(100% - 24px)}
  .ph-l2{right:12px;bottom:12px}
  .ph-l3{left:12px;right:auto;top:42px;border-right:0;border-left:2px solid #ff7a1a;max-width:none}
  .ph-ret{width:70px;height:70px;margin:-35px 0 0 -35px}
  .ph-ret i{inset:22px}
  .ph-cards{grid-template-columns:1fr;gap:16px}
  .ph-h1,html body .ph-h1{font-size:36px}
}

/* ---------- Phase 2: services index + detail bodies. Heroes stay Option B. ---------- */
html body main:has(div[class*="bg-white/5"][class*="border-gray-800"]) section:first-of-type h1::before{
  content:"SERVICES · SUSSEX & THE SOUTH COAST";
  display:block;
  margin:0 0 12px;
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--ph-text-3);
}
html body main:has(div[class*="bg-white/5"][class*="border-gray-800"]) section:first-of-type div[class*="text-center"]::after{
  content:"";
  display:block;
  height:1px;
  margin:28px auto 0;
  background:var(--ph-line);
  box-shadow:var(--ph-line-glow);
}
html body main:has(div[class*="bg-white/5"][class*="border-gray-800"]) section:nth-of-type(2) > div > div h2::before{
  display:block;
  margin:0 0 10px;
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--ph-text-3);
}
html body main:has(div[class*="bg-white/5"][class*="border-gray-800"]) section:nth-of-type(2) > div > div:nth-child(1) h2::before{content:"01 EXTERIOR"}
html body main:has(div[class*="bg-white/5"][class*="border-gray-800"]) section:nth-of-type(2) > div > div:nth-child(2) h2::before{content:"02 INTERIOR"}
html body main:has(div[class*="bg-white/5"][class*="border-gray-800"]) section:nth-of-type(2) > div > div:nth-child(3) h2::before{content:"03 CERAMIC"}
html body main:has(div[class*="bg-white/5"][class*="border-gray-800"]) section:nth-of-type(2) > div > div:nth-child(4) h2::before{content:"04 SPECIALIST"}
html body main:has(div[class*="bg-white/5"][class*="border-gray-800"]) div[class*="border-gray-800"] p[class*="text-orange"]{
  color:var(--ph-orange-type);
  font-weight:600;
  font-family:var(--ph-f-body);
  text-shadow:none;
  filter:none;
}
html body main:has(div[class*="bg-white/5"][class*="border-gray-800"]) section:last-of-type div[class*="max-w-2xl"],
html body main:has(div[class*="min-h-[90vh]"]) section:last-of-type div[class*="max-w-2xl"]{
  position:relative;
  background-color:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  padding:42px 28px;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  background-image:
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a);
  background-repeat:no-repeat;
  background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px;
  background-position:left 10px top 10px,left 10px top 10px,right 10px top 10px,right 10px top 10px,left 10px bottom 10px,left 10px bottom 10px,right 10px bottom 10px,right 10px bottom 10px;
}

html body main div[class*="min-h-[90vh]"] div[class*="bg-black/70"]{
  background-color:rgba(5,5,6,.82);
}
html body main:has(div[class*="min-h-[90vh]"]) div[class*="grid"]:has(dt){counter-reset:step}
html body main:has(div[class*="min-h-[90vh]"]) div:has(> dt){
  counter-increment:step;
  position:relative;
  padding-left:22px;
}
html body main:has(div[class*="min-h-[90vh]"]) div:has(> dt)::before{
  content:"";
  position:absolute;
  left:4px;
  top:1.7rem;
  bottom:-3rem;
  width:1px;
  background:linear-gradient(rgba(255,122,26,.8),rgba(255,122,26,.15));
  box-shadow:0 0 8px rgba(255,122,26,.35);
  pointer-events:none;
}
html body main:has(div[class*="min-h-[90vh]"]) dt::before{
  content:"STEP " counter(step,decimal-leading-zero);
  display:block;
  margin:0 0 8px;
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--ph-text-3);
}
html body main:has(div[class*="min-h-[90vh]"]) dt > div[class*="rounded-lg"]{
  width:8px;
  height:8px;
  min-width:8px;
  padding:0;
  border-radius:1px;
  background:transparent;
  border:1px solid var(--ph-orange-hot);
  transform:rotate(45deg);
  box-shadow:none;
}
html body main:has(div[class*="min-h-[90vh]"]) dt > div[class*="rounded-lg"] svg{display:none}
html body main:has(div[class*="min-h-[90vh]"]) ul{
  margin:0;
  padding:0;
  list-style:none;
}
html body main:has(div[class*="min-h-[90vh]"]) div[class*="ring-gray-200"] ul[role="list"],
html body main:has(div[class*="min-h-[90vh]"]) div[class*="ring-gray-800"] ul[role="list"],
html body main:has(div[class*="min-h-[90vh]"]) div[class*="bg-[#1b1b1b]/60"] ul[role="list"]{
  margin-top:20px;
}
html body main:has(div[class*="min-h-[90vh]"]) ul li{
  position:relative;
  padding-left:18px;
  color:var(--ph-text-2);
}
html body main:has(div[class*="min-h-[90vh]"]) ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:7px;
  height:7px;
  border:1px solid var(--ph-orange-hot);
  background:transparent;
  transform:rotate(45deg);
}
html body main:has(div[class*="min-h-[90vh]"]) div[class*="ring-gray-200"] li::before{content:none}
html body main:has(div[class*="min-h-[90vh]"]) ul li svg{display:none}
html body main:has(div[class*="min-h-[90vh]"]) div[class*="bg-orange-500/10"]{
  background-color:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,122,26,.55);
}
html body main:has(div[class*="min-h-[90vh]"]) div[class*="rounded-3xl"][class*="ring-gray-800"]{
  position:relative;
  background-color:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  box-shadow:none;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
html body main:has(div[class*="min-h-[90vh]"]) div[class*="rounded-3xl"][class*="ring-gray-800"]::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:1px;
  background:var(--ph-line);
  box-shadow:var(--ph-line-glow);
  pointer-events:none;
}
html body main:has(div[class*="min-h-[90vh]"]) div[class*="ring-gray-800"] a[class~="bg-orange-500"],
html body main:has(div[class*="min-h-[90vh]"]) div[class*="ring-gray-800"] a[class~="bg-primary"]{
  color:var(--ph-text);
  font-family:var(--ph-f-body);
  font-weight:600;
  font-size:14px;
  border:1px solid var(--ph-ghost-border);
  border-radius:3px;
  background-color:var(--ph-glass-ghost);
  background-image:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
html body main:has(div[class*="min-h-[90vh]"]) div[class*="ring-gray-800"] a[class~="bg-orange-500"]:hover,
html body main:has(div[class*="min-h-[90vh]"]) div[class*="ring-gray-800"] a[class~="bg-primary"]:hover,
html body main:has(div[class*="min-h-[90vh]"]) div[class*="ring-gray-800"] a[class~="bg-primary"]:active{
  color:var(--ph-text);
  border-color:rgba(255,154,60,.85);
  background-color:rgba(255,122,26,.10);
  background-image:none;
  box-shadow:var(--ph-glow-ghost-hover);
}
html body main:has(div[class*="min-h-[90vh]"]) div[class*="bg-[#1b1b1b]/60"] span[class*="text-5xl"],
html body main:has(div[class*="min-h-[90vh]"]) div[class*="bg-[#1b1b1b]/60"] span[class*="text-4xl"],
html body div[class*="ring-gray-200"] span[class*="text-4xl"],
html body div[class*="ring-gray-200"] p[class*="text-2xl"][class*="font-bold"]{
  color:var(--ph-orange-type);
  font-family:var(--ph-f-body);
  font-weight:600;
  font-size:36px;
  line-height:1.1;
  text-shadow:none;
  filter:none;
}
@media (prefers-reduced-motion:reduce){
  html body main:has(div[class*="min-h-[90vh]"]) [style*="translateY"],
  html body main:has(div[class*="bg-white/5"][class*="border-gray-800"]) [style*="translateY"]{
    opacity:1 !important;
    transform:none !important;
  }
}

/* Pricing / package bands: black ground. The orange fill lives on an absolute child. */
html body main div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]){
  background:#050506;
}
html body main div[class*="overflow-hidden"] > div[class*="bg-gradient-to-br"][class*="inset-0"]{
  display:none;
}
html body main div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"])::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:var(--ph-line);
  box-shadow:var(--ph-line-glow);
  z-index:2;
  pointer-events:none;
}
html body main div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) div[class*="text-center"] > h2{
  display:inline-block;
  margin:0 0 14px;
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--ph-text-3);
  border-left:2px solid var(--ph-orange-hot);
  padding-left:8px;
}
html body main div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) div[class*="text-center"] > p[class*="text-4xl"]{
  font-family:var(--ph-f-display);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ph-text);
  text-shadow:none;
  filter:none;
}
html body main:has([style*="Basic_interior"]) div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) h2::after{content:" · BASIC INTERIOR"}
html body main:has([style*="premiumhero"]) div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) h2::after{content:" · PREMIUM INTERIOR"}
html body main:has([style*="basicexteriorhero"]) div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) h2::after{content:" · BASIC EXTERIOR"}
html body main:has([style*="wash-and-protect.webp"]) div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) h2::after{content:" · WASH & PROTECT"}
html body main:has([style*="wash-and-protect.webp"]):has(h1[class*="mt-4"]) div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) h2::after{content:" · MAINTENANCE"}
html body main:has([style*="new-car-enhancement"]) div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) h2::after{content:" · SINGLE STAGE"}
html body main:has([style*="phoenix-revive.webp"]) div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) h2::after{content:" · PHOENIX REVIVE"}
html body main:has([style*="phoenix-rebirth-hero"]) div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) h2::after{content:" · PHOENIX REBIRTH"}
html body main:has([style*="engine-bay-detailing-hero"]) div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) h2::after{content:" · ENGINE BAY"}
html body main:has([style*="headlight-restoration-hero"]) div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) h2::after{content:" · HEADLIGHT"}
html body main:has([style*="soft-top-cleaning-hero"]) div[class*="overflow-hidden"]:has(> div[class*="bg-gradient-to-br"]) h2::after{content:" · SOFT TOP"}

/* ---------- Phase 3: about, booking, contact, gallery, service areas ---------- */
html body main:has(img[src="/about-us.webp"]) div[class*="aspect-video"]{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  overflow:hidden;
}
html body main:has(img[src="/about-us.webp"]) div[class*="aspect-video"]::before{
  content:"";
  position:absolute;
  inset:8px;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a);
  background-repeat:no-repeat;
  background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
}
html body main:has(img[src="/about-us.webp"]) div[class*="aspect-video"]::after{
  content:"FOUNDER · OLLIE";
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:3;
  font-family:var(--ph-f-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:#f4f1ec;
  background:rgba(5,5,6,.78);
  border-left:2px solid #ff7a1a;
  padding:6px 9px;
}
html body main:has(img[src="/about-us.webp"]) div[class*="lg:grid-cols-3"] > div[class*="bg-black"]{
  position:relative;
  background:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  box-shadow:none;
}
html body main:has(img[src="/about-us.webp"]) div[class*="lg:grid-cols-3"] > div[class*="bg-black"]::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:1px;
  background:var(--ph-line);
}
html body main:has(img[src="/about-us.webp"]) div[class*="lg:grid-cols-3"] > div h3::before{
  display:block;
  margin:0 0 6px;
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--ph-text-3);
}
html body main:has(img[src="/about-us.webp"]) div[class*="lg:grid-cols-3"] > div:nth-child(1) h3::before{content:"01"}
html body main:has(img[src="/about-us.webp"]) div[class*="lg:grid-cols-3"] > div:nth-child(2) h3::before{content:"02"}
html body main:has(img[src="/about-us.webp"]) div[class*="lg:grid-cols-3"] > div:nth-child(3) h3::before{content:"03"}
html body main:has(img[src="/about-us.webp"]) div[class*="lg:grid-cols-3"] > div:nth-child(4) h3::before{content:"04"}
html body main:has(img[src="/about-us.webp"]) div[class*="lg:grid-cols-3"] > div:nth-child(5) h3::before{content:"05"}
html body main:has(img[src="/about-us.webp"]) div[class*="lg:grid-cols-3"] > div:nth-child(6) h3::before{content:"06"}
html body main:has(img[src="/about-us.webp"]) div:has(> iframe){
  position:relative;
  padding:10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  background:
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a);
  background-repeat:no-repeat;
  background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px;
  background-position:left 0 top 0,left 0 top 0,right 0 top 0,right 0 top 0,left 0 bottom 0,left 0 bottom 0,right 0 bottom 0,right 0 bottom 0,transparent;
}
html body main:has(img[src="/about-us.webp"]) div:has(> iframe)::before{
  content:"SERVICE AREA · SUSSEX & THE SOUTH COAST";
  display:block;
  margin:0 0 8px;
  font-family:var(--ph-f-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--ph-text-3);
}
html body main:has(img[src="/about-us.webp"]) iframe{
  display:block;
  width:100%;
  border:0;
  border-radius:2px;
  filter:none;
}
html body main:has(img[src="/about-us.webp"]) div[class*="bg-gray-900"][class*="shadow-xl"]:has(.leaflet-container){
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
}
html body main:has(img[src="/about-us.webp"]) div[class*="bg-gray-900"][class*="shadow-xl"]:has(.leaflet-container)::before{
  content:"SERVICE AREA · SUSSEX & THE SOUTH COAST";
  position:absolute;
  right:14px;
  top:14px;
  z-index:800;
  font-family:var(--ph-f-mono);
  font-size:11px;
  letter-spacing:.14em;
  line-height:1.2;
  color:#f4f1ec;
  background:rgba(5,5,6,.78);
  border-left:2px solid #ff7a1a;
  padding:6px 9px;
  pointer-events:none;
}
html body main:has(img[src="/about-us.webp"]) div[class*="bg-gray-900"][class*="shadow-xl"]:has(.leaflet-container)::after{
  content:"";
  position:absolute;
  inset:6px;
  z-index:800;
  pointer-events:none;
  background:
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a);
  background-repeat:no-repeat;
  background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
}
html body main:has(img[src="/about-us.webp"]) div[class*="bg-gradient-to-r"]{
  position:relative;
  background:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  background-image:
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a);
  background-repeat:no-repeat;
  background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px;
  background-position:left 10px top 10px,left 10px top 10px,right 10px top 10px,right 10px top 10px,left 10px bottom 10px,left 10px bottom 10px,right 10px bottom 10px,right 10px bottom 10px;
}

html body main div[class*="max-w-2xl"]:has(form){
  max-width:72rem;
}
html body main div[class*="max-w-2xl"]:has(form) > div[class*="rounded-b-3xl"][class*="pointer-events-none"]{
  display:none;
}
@media (min-width:900px){
  html body main div[class*="max-w-2xl"]:has(form){
    display:grid;
    grid-template-columns:minmax(0,1fr) 240px;
    gap:22px;
    align-items:start;
  }
  html body main div[class*="max-w-2xl"]:has(form)::after{
    content:"OLLIE · 07904 938227\A info@phoenixdetailing.co.uk\A SUSSEX & THE SOUTH COAST";
    white-space:pre-line;
    font-family:var(--ph-f-mono);
    font-size:11px;
    letter-spacing:.14em;
    line-height:1.8;
    color:var(--ph-text-2);
    background:rgba(14,14,17,.84);
    border:1px solid rgba(255,255,255,.10);
    border-left:2px solid #ff7a1a;
    border-radius:2px;
    padding:18px 14px;
  }
}
html body main div[class*="rounded-3xl"][class*="bg-black"]:has(form),
html body main div[class*="bg-[#1b1b1b]/60"]:has(form){
  position:relative;
  background-color:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  background-image:
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a);
  background-repeat:no-repeat;
  background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px;
  background-position:left 8px top 8px,left 8px top 8px,right 8px top 8px,right 8px top 8px,left 8px bottom 8px,left 8px bottom 8px,right 8px bottom 8px,right 8px bottom 8px;
}
html body main div[class*="max-w-3xl"] a[class*="border-orange"]{
  background:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  border-left:2px solid #ff7a1a;
}
html body main div[class*="max-w-3xl"] a[class*="border-orange"] p[class*="text-sm"]{
  font-family:var(--ph-f-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ph-text-3);
}
@media (max-width:720px){
  html body main form button[class~="bg-orange-500"],
  html body main form button[type="submit"]{width:100%}
}

html body main:has(img[alt^="Gallery image"]) div[class*="aspect-square"][class*="group"]{
  border:1px solid rgba(255,255,255,.12);
  border-radius:2px;
}
html body main:has(img[alt^="Gallery image"]) div[class*="aspect-square"]:hover img[class*="scale-"],
html body main:has(img[alt^="Gallery image"]) div[class*="aspect-square"]:focus-within img[class*="scale-"]{
  transform:scale(1.03);
  filter:brightness(1.08);
}
html body main:has(img[alt^="Gallery image"]) div[class*="aspect-square"]:hover div[class*="bg-black/0"],
html body main:has(img[alt^="Gallery image"]) div[class*="aspect-square"] div[class*="bg-primary"]{
  background:transparent;
  opacity:0;
}
html body main:has(img[alt^="Gallery image"]) div[class*="aspect-square"]::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a);
  background-repeat:no-repeat;
  background-size:14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px;
  background-position:left 6px top 6px,left 6px top 6px,right 6px top 6px,right 6px top 6px,left 6px bottom 6px,left 6px bottom 6px,right 6px bottom 6px,right 6px bottom 6px;
}
html body main:has(img[alt^="Gallery image"]) div[class*="aspect-square"]:hover::after,
html body main:has(img[alt^="Gallery image"]) div[class*="aspect-square"]:focus-within::after{opacity:1}
html body main:has(img[alt^="Gallery image"]) div[class*="aspect-square"]:has(video)::before{
  content:"FILM 01";
  position:absolute;
  left:10px;
  top:10px;
  z-index:4;
  font-family:var(--ph-f-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:#f4f1ec;
  background:rgba(5,5,6,.78);
  border-left:2px solid #ff7a1a;
  padding:6px 8px;
}
html body main:has(img[alt^="Gallery image"]) div[class*="aspect-square"]:has(video) ~ div[class*="aspect-square"]:has(video)::before{content:"FILM 02"}

html body main:has(a[href="/service-areas/west-sussex/"]) section[class*="max-w-4xl"][class*="border-orange"]{
  background:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
}
html body main:has(a[href="/service-areas/west-sussex/"]) section[class*="max-w-4xl"][class*="border-orange"] ul{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0;
  list-style:none;
}
html body main:has(a[href="/service-areas/west-sussex/"]) section[class*="max-w-4xl"][class*="border-orange"] ul a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  background:rgba(14,14,17,.84);
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ph-text-2);
  text-decoration:none;
}
html body main:has(a[href="/service-areas/west-sussex/"]) section[class*="max-w-4xl"][class*="border-orange"] ul a::before{content:"TOWN · "}
html body main:has(a[href="/service-areas/west-sussex/"]) section[class*="max-w-4xl"][class*="border-orange"] ul a:hover{
  color:var(--ph-text);
  border-color:rgba(255,154,60,.75);
  box-shadow:inset 0 1px 0 rgba(255,122,26,.65);
}
html body main:has(aside) section[class*="max-w-4xl"][class*="border-orange"]{
  background:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
}
html body main:has(aside) img[class*="border-orange"]:not([src*="cardetailing"]):not([src*="herolanding"]){
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  filter:none;
}
html body main:has(aside) div[class*="rounded-3xl"][class*="border-orange"]{
  position:relative;
  background:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
}
html body main:has(aside) div[class*="rounded-3xl"][class*="border-orange"]::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:1px;
  background:var(--ph-line);
}
html body main:has(aside) section[class*="max-w-4xl"][class*="border-orange"]::before{
  display:block;
  margin:0 0 12px;
  font-family:var(--ph-f-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--ph-text-3);
}
html body main:has(img[alt*="Arundel"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · ARUNDEL"}
html body main:has(img[alt*="Billingshurst"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · BILLINGSHURST"}
html body main:has(img[alt*="Bognor"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · BOGNOR REGIS"}
html body main:has(img[alt*="Brighton &"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · BRIGHTON"}
html body main:has(img[alt*="Chichester city"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · CHICHESTER"}
html body main:has(img[alt*="Crawley"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · CRAWLEY"}
html body main:has(img[alt*="East Grinstead"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · EAST GRINSTEAD"}
html body main:has(img[alt*="Hassocks"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · HASSOCKS"}
html body main:has(img[alt*="Haywards"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · HAYWARDS HEATH"}
html body main:has(img[alt="Hove seafront view"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · HOVE"}
html body main:has(img[alt*="Littlehampton"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · LITTLEHAMPTON"}
html body main:has(img[alt*="Petworth"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · PETWORTH"}
html body main:has(img[alt*="Shoreham"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · SHOREHAM-BY-SEA"}
html body main:has(img[alt*="Storrington"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · STORRINGTON"}
html body main:has(img[alt*="Uckfield"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · UCKFIELD"}
html body main:has(img[alt*="Worthing"]) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · WORTHING"}
html body main:has(a[href="/service-areas/arundel/"]):not(:has(a[href="/service-areas/west-sussex/"])) section[class*="max-w-4xl"]::before{content:"SERVICE AREA · WEST SUSSEX"}
html body main:not(:has(aside)) section[class*="max-w-4xl"][class*="border-orange"]{
  background:#050506;
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
}

/* ---------- Phase 4: thank you, 404, privacy. No new copy. ---------- */
html body main:has(h1[class*="drop-shadow"]) h1[class*="drop-shadow"]{
  filter:none;
}
html body main:has(h1[class*="drop-shadow"]) div[class*="z-10"]{
  position:relative;
  width:min(40rem, calc(100% - 32px));
  margin-inline:auto;
  padding:28px 28px 26px;
  background-color:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  background-image:
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a),
    linear-gradient(#ff7a1a,#ff7a1a),linear-gradient(#ff7a1a,#ff7a1a);
  background-repeat:no-repeat;
  background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px;
  background-position:left 10px top 10px,left 10px top 10px,right 10px top 10px,right 10px top 10px,left 10px bottom 10px,left 10px bottom 10px,right 10px bottom 10px,right 10px bottom 10px;
}
html body main:has(h1[class*="drop-shadow"]) div[class*="z-10"]::before{
  content:"PHOENIX DETAILING";
  display:block;
  margin:0 0 14px;
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--ph-text-3);
}
html body main:has(h1[class*="drop-shadow"]) a[href="/"][class~="bg-orange-500"],
html body main:has(h1[class*="drop-shadow"]) a[href="/"][class~="bg-orange-500"]:hover,
html body main:has(h1[class*="drop-shadow"]) a[href="/"][class~="bg-orange-500"]:active{
  color:#f4f1ec;
  border:1px solid rgba(255,154,60,.45);
  background-color:rgba(255,255,255,.05);
  background-image:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  border-radius:3px;
  font-family:var(--ph-f-body);
  font-weight:600;
  transform:none;
}
html body main:has(h1[class*="drop-shadow"]) a[href="/"][class~="bg-orange-500"]:hover{
  border-color:rgba(255,154,60,.85);
  background-color:rgba(255,122,26,.10);
  box-shadow:0 0 16px rgba(255,122,26,.18);
}

html body main:has(h1.next-error-h1) > div{
  height:auto !important;
  min-height:0;
  width:min(28rem, calc(100% - 32px));
  margin:48px auto;
  padding:36px 28px 32px;
  background:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  box-shadow:none;
}
html body main h1.next-error-h1{
  display:block !important;
  margin:0 0 10px !important;
  padding:0 !important;
  border:0 !important;
  font-family:"Space Grotesk",sans-serif !important;
  font-weight:700 !important;
  font-size:clamp(64px, 12vw, 96px) !important;
  line-height:.95 !important;
  letter-spacing:-.03em !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:var(--ph-h1-glow) !important;
  filter:none !important;
  vertical-align:baseline !important;
}
html body main h1.next-error-h1::before{
  content:"PAGE NOT FOUND";
  display:block;
  margin:0 0 14px;
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  color:#9a938b;
}
html body main:has(h1.next-error-h1) div[style*="inline-block"]{
  display:block !important;
}
html body main:has(h1.next-error-h1) h2{
  display:block;
  font-family:var(--ph-f-body) !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  margin:0 0 22px !important;
  color:#bdb7af !important;
  text-shadow:none !important;
  filter:none !important;
}
html body .ph-404-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

html body main:has(a[href="https://www.googletagmanager.com/gtag/js?id=G-6DZ55BW36R"]) div[class*="max-w-3xl"]{
  max-width:72ch;
  font-family:var(--ph-f-body);
  background:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.10);
  border-radius:2px;
  padding:36px 28px 40px;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:none;
}
html body main:has(a[href="https://www.googletagmanager.com/gtag/js?id=G-6DZ55BW36R"]) h2[class]{
  margin:28px 0 12px;
  font-family:var(--ph-f-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.35;
  text-transform:uppercase;
  color:var(--ph-text-3);
  border-left:2px solid var(--ph-orange-hot);
  padding-left:8px;
  text-shadow:none;
  filter:none;
}
html body main:has(a[href="https://www.googletagmanager.com/gtag/js?id=G-6DZ55BW36R"]) :is(p,li)[class]{
  color:var(--ph-text-2);
}
html body main:has(a[href="https://www.googletagmanager.com/gtag/js?id=G-6DZ55BW36R"]) p[class*="text-white"]{
  color:var(--ph-text);
}
html body main:has(a[href="https://www.googletagmanager.com/gtag/js?id=G-6DZ55BW36R"]) :is(strong,span)[class*="text-white"]{
  color:var(--ph-text);
}
html body main:has(a[href="https://www.googletagmanager.com/gtag/js?id=G-6DZ55BW36R"]) a[class*="text-orange"]{
  color:var(--ph-orange-type);
}