.brand-logo {
  display: block;
  width: 154px;
  height: 62px;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: contrast(1.15) brightness(1.12);
}
.nav { gap:clamp(.7rem,1.5vw,2rem); }

.service-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 58%;
  height: 68%;
  object-fit: cover;
  object-position: center;
  border-radius: 0 0 0 1.5rem;
  opacity: .92;
  mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}

.service-card > div:last-child {
  position: relative;
  z-index: 2;
  max-width: 72%;
}

.card-featured { background: linear-gradient(145deg, #17171d, #101014); }
.card-featured p { color: var(--muted); }
.portfolio { background: #08080b; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 270px;
  gap: 1rem;
}

.work {
  position: relative;
  margin: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #17171d;
  border: 1px solid var(--line);
}

.work-tall { grid-row: span 2; }
.work img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.work:hover img { transform: scale(1.035); }
.work::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.88)); }
.work figcaption { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 1.15rem; display: flex; flex-direction: column; }
.work figcaption b { font: 700 1.15rem Space Grotesk; }
.work figcaption span { font-size: .82rem; color: #d0d0d5; }
footer .brand-logo { width: 135px; height: 52px; }

@media (max-width: 950px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .brand-logo { width: 132px; height: 54px; }
  .service-card > div:last-child { max-width: 82%; }
}

@media (max-width: 560px) {
  .portfolio-grid { grid-template-columns: 1fr; grid-auto-rows: 330px; }
  .work-tall { grid-row: span 1; }
  .service-photo { width: 64%; height: 64%; }
}

/* Sublizone urban cherub edition */
body {
  background:
    radial-gradient(circle at 10% 18%, rgba(255, 20, 147, .08), transparent 24rem),
    #050507;
}

.site-header {
  position: fixed;
  background: linear-gradient(180deg, rgba(5, 5, 7, .92), rgba(5, 5, 7, .58));
  backdrop-filter: blur(14px);
}

.hero { min-height: 820px; isolation: isolate; }
.hero-image { filter: contrast(1.08) saturate(1.08); transform: scale(1.015); }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(3, 3, 5, .98) 0%, rgba(3, 3, 5, .91) 34%, rgba(3, 3, 5, .40) 67%, rgba(3, 3, 5, .18) 100%),
    linear-gradient(0deg, #050507 0%, transparent 36%);
}
.hero-content { z-index: 4; }
.hero h1 { text-transform: uppercase; text-shadow: 0 5px 0 rgba(0,0,0,.34); }
.hero h1 span {
  display: inline-block;
  font-style: italic;
  transform: rotate(-2deg);
  text-shadow: 4px 4px 0 #fff, 8px 8px 0 rgba(255,20,147,.25);
  -webkit-text-stroke: 1px #fff;
}

.paint-streak {
  position: absolute;
  z-index: 3;
  width: min(40vw, 540px);
  height: 1.2rem;
  left: clamp(1rem, 6vw, 7rem);
  top: 46%;
  background: var(--pink);
  transform: rotate(-4deg) skewX(-16deg);
  filter: drop-shadow(0 0 18px rgba(255,20,147,.65));
  opacity: .72;
}
.paint-streak::before,.paint-streak::after {
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--pink);
}
.paint-streak::before { width:10px;height:10px;right:-24px;top:-14px;box-shadow:26px 16px 0 -2px var(--pink), 48px -8px 0 -3px var(--pink); }
.paint-streak::after { width:7px;height:7px;left:-22px;top:17px;box-shadow:-16px -14px 0 -1px var(--pink); }

.graffiti-marquee {
  overflow:hidden;
  border-block:2px solid var(--pink);
  background:var(--pink);
  color:#050507;
  padding:.72rem 0;
  font:800 clamp(.9rem,1.6vw,1.25rem)/1 Space Grotesk,sans-serif;
  letter-spacing:.12em;
  transform:rotate(-.7deg) scale(1.02);
  position:relative;
  z-index:6;
}
.graffiti-marquee div { display:flex;gap:1.6rem;width:max-content;animation:marquee 23s linear infinite; }
.graffiti-marquee i { font-style:normal;color:#fff; }
@keyframes marquee { to { transform:translateX(-50%); } }

.services,.portfolio { position:relative;overflow:hidden; }
.services::before,.portfolio::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    radial-gradient(circle at 14% 24%, rgba(255,20,147,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 64%, rgba(255,255,255,.65) 0 1px, transparent 2px);
  background-size:67px 71px,53px 59px;
}
.section-heading,.service-grid,.portfolio-grid { position:relative;z-index:2; }
.section-heading h2 { text-transform:uppercase; }

.cherub {
  --mx:0px;
  --my:0px;
  --tilt:0deg;
  position:absolute;
  z-index:5;
  display:block;
  height:auto;
  user-select:none;
  cursor:pointer;
  filter:drop-shadow(0 18px 25px rgba(0,0,0,.6)) drop-shadow(0 0 15px rgba(255,20,147,.24));
  transform:translate3d(var(--mx),var(--my),0) rotate(var(--tilt));
  transition:filter .25s ease,scale .25s ease;
  animation:cherub-float 4.8s ease-in-out infinite;
}
.cherub:hover,.cherub:focus-visible { scale:1.05;filter:drop-shadow(0 22px 30px #000) drop-shadow(0 0 26px rgba(255,20,147,.72));outline:none; }
.cherub.is-active { animation:cherub-pop .6s ease; }
.cherub-hero { width:clamp(250px,31vw,520px);right:-3vw;bottom:-4%; }
.cherub-portfolio { width:clamp(180px,20vw,320px);right:1.5vw;top:1.5rem;transform-origin:center bottom; }
@keyframes cherub-float { 0%,100%{translate:0 0}50%{translate:0 -12px} }
@keyframes cherub-pop { 50%{scale:1.1;rotate:-3deg} }

.new-work { border-color:rgba(255,20,147,.6);box-shadow:0 0 0 1px rgba(255,20,147,.12),0 18px 50px rgba(0,0,0,.32); }
.new-work::before {
  content:"NUEVO";
  position:absolute;
  z-index:3;
  top:1rem;
  left:1rem;
  padding:.45rem .65rem;
  background:var(--pink);
  color:#fff;
  font:800 .68rem/1 Space Grotesk;
  letter-spacing:.12em;
  transform:rotate(-4deg);
}
.work:hover { border-color:rgba(255,20,147,.72); }
.work:hover figcaption b { color:var(--pink-2); }

.urban-break { position:relative;min-height:clamp(360px,55vw,700px);overflow:hidden;display:grid;place-items:center; }
.urban-break>img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.urban-break-shade { position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,7,.9),rgba(5,5,7,.1) 55%,rgba(5,5,7,.82)); }
.urban-break p { position:relative;z-index:2;margin:0;padding:2rem;text-align:center;font:800 clamp(2.5rem,7vw,7.5rem)/.9 Space Grotesk;text-transform:uppercase;letter-spacing:-.06em;text-shadow:0 8px 0 #050507; }
.urban-break p span { display:block;color:var(--pink);font-style:italic;transform:rotate(-2deg); }

@media (max-width: 1100px) {
  .cherub-portfolio { opacity:.38;right:-4rem;top:3rem; }
}

@media (max-width: 800px) {
  .hero-image { object-position:60% center; }
  .hero-shade { background:linear-gradient(0deg,rgba(5,5,7,.98) 0%,rgba(5,5,7,.7) 64%,rgba(5,5,7,.35)); }
  .hero-content { padding-bottom:5rem; }
  .hero h1 span { text-shadow:2px 2px 0 #fff,5px 5px 0 rgba(255,20,147,.28); }
  .cherub-hero { width:230px;right:-68px;bottom:26%;opacity:.72; }
  .cherub-portfolio { width:180px;right:-4.5rem;top:5.5rem;opacity:.3; }
  .paint-streak { top:54%;width:62vw; }
}

@media (max-width: 560px) {
  .hero { min-height:790px; }
  .hero-image { object-position:56% center; }
  .hero-copy { max-width:88%; }
  .cherub-hero { width:190px;right:-66px;bottom:31%; }
  .urban-break { min-height:420px; }
  .urban-break>img { object-position:51% center; }
}

@media (prefers-reduced-motion: reduce) {
  .graffiti-marquee div,.cherub { animation:none!important; }
  .cherub { transform:none!important; }
}

/* Interactive price list */
.pricing {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 4% 15%,rgba(255,20,147,.24),transparent 20rem),
    radial-gradient(circle at 96% 90%,rgba(255,20,147,.16),transparent 24rem),
    linear-gradient(155deg,#08080b,#101016 48%,#08080b);
}
.pricing::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.26;
  background-image:repeating-linear-gradient(108deg,transparent 0 42px,rgba(255,255,255,.045) 43px 44px);
}
.pricing-heading { position:relative;z-index:3; }
.pricing-heading h2 { max-width:850px; }

.price-switch {
  position:relative;
  z-index:4;
  display:flex;
  width:max-content;
  margin:0 auto 2.2rem;
  padding:.35rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(5,5,7,.72);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 45px rgba(0,0,0,.34);
}
.price-toggle {
  min-height:46px;
  padding:.7rem 1.3rem;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#c8c8d0;
  cursor:pointer;
  font-weight:800;
  transition:background .25s,color .25s,transform .25s;
}
.price-toggle:hover { color:#fff; }
.price-toggle.active { background:var(--pink);color:#fff;box-shadow:0 8px 22px rgba(255,20,147,.35); }

.price-grid {
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.price-card {
  min-height:300px;
  padding:clamp(1.4rem,2.5vw,2rem);
  border:1px solid rgba(255,255,255,.16);
  border-radius:1.4rem;
  background:linear-gradient(145deg,rgba(28,28,35,.96),rgba(12,12,16,.96));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 22px 45px rgba(0,0,0,.2);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.price-card:hover { transform:translateY(-7px) rotate(-.35deg);border-color:rgba(255,20,147,.72);box-shadow:0 28px 55px rgba(0,0,0,.36),0 0 24px rgba(255,20,147,.12); }
.price-card:nth-child(even):hover { transform:translateY(-7px) rotate(.35deg); }
.price-card h3 { margin:.65rem 0 1.5rem;font:700 clamp(1.45rem,2.2vw,2rem)/1.05 Space Grotesk;letter-spacing:-.035em; }
.price-kicker { color:var(--pink-2);font:800 .72rem/1.3 Space Grotesk;letter-spacing:.13em;text-transform:uppercase; }
.price-option { display:none;opacity:0;transform:translateY(8px); }
.price-option.active { display:flex;flex-direction:column;opacity:1;transform:none;animation:price-in .35s ease; }
.price-option strong,.single-price strong,.split-prices strong,.brand-price-value { color:#fff;font:800 clamp(3.2rem,5vw,5.4rem)/.88 Space Grotesk;letter-spacing:-.08em; }
.price-option span,.single-price span,.split-prices span { color:var(--muted);font-size:.9rem;margin-top:.55rem; }
.featured-price { background:linear-gradient(145deg,#ff1493,#b60068);border-color:#ff78be; }
.featured-price .price-kicker,.featured-price .price-option span { color:rgba(255,255,255,.8); }
.single-price { display:flex;flex-direction:column; }
.quote-price .single-price strong { font-size:clamp(2.3rem,4vw,4.2rem);color:var(--pink);letter-spacing:-.06em; }
.split-prices { display:grid;grid-template-columns:1fr 1fr;gap:.7rem; }
.split-prices p { margin:0;display:flex;flex-direction:column;padding:1rem;border:1px solid rgba(255,255,255,.12);border-radius:1rem;background:rgba(255,255,255,.035); }
.split-prices strong { font-size:clamp(2rem,3.5vw,3.35rem); }
.brand-price { grid-column:span 2;min-height:330px;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;background:linear-gradient(120deg,#191920,#29101f);border-color:rgba(255,20,147,.55); }
.brand-price-value { display:block;color:var(--pink);margin-top:1.2rem; }
.brand-price ul { margin:0;padding:0;list-style:none;display:grid;gap:.7rem; }
.brand-price li { position:relative;padding:.72rem .8rem .72rem 2.25rem;border-bottom:1px solid rgba(255,255,255,.13);font-weight:700; }
.brand-price li::before { content:"✦";position:absolute;left:.65rem;color:var(--pink); }
.pricing-cta { position:relative;z-index:3;margin-top:1.2rem;padding:1.4rem 1.6rem;border:1px solid rgba(255,255,255,.14);border-radius:1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(255,255,255,.04); }
.pricing-cta p { margin:0;font:700 clamp(1.2rem,2vw,1.7rem) Space Grotesk; }

.price-cherub { pointer-events:auto; }
.price-cherub-left { width:clamp(180px,23vw,340px);left:-6rem;top:5.3rem;opacity:.38; }
.price-cherub-right { width:clamp(165px,19vw,290px);right:-4rem;bottom:1.5rem;opacity:.34; }
@keyframes price-in { from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none} }

@media (max-width: 980px) {
  .price-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-price { grid-column:span 2; }
  .price-cherub-left { left:-7rem;opacity:.25; }
}

@media (max-width: 620px) {
  .price-switch { width:100%; }
  .price-toggle { flex:1;padding-inline:.7rem; }
  .price-grid { grid-template-columns:1fr; }
  .brand-price { grid-column:auto;grid-template-columns:1fr; }
  .price-card { min-height:280px; }
  .price-cherub-left { width:185px;left:-5rem;top:9rem;opacity:.2; }
  .price-cherub-right { display:none; }
  .pricing-cta { flex-direction:column;align-items:stretch;text-align:center; }
  .split-prices strong { font-size:2.6rem; }
}

/* Payment, delivery map and amplified interaction */
.brand-logo {
  width:210px;
  height:74px;
  object-fit:contain;
  mix-blend-mode:normal;
  filter:drop-shadow(0 0 13px rgba(255,255,255,.12));
}
footer .brand-logo { width:175px;height:68px; }

.payment-notice {
  position:relative;
  z-index:4;
  overflow:hidden;
  margin-top:1.2rem;
  padding:clamp(1.4rem,3vw,2.2rem);
  border:2px solid var(--pink);
  border-radius:1.4rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(1.2rem,3vw,3rem);
  align-items:center;
  background:linear-gradient(115deg,rgba(255,20,147,.18),rgba(9,9,13,.96) 38%,rgba(255,20,147,.12));
  box-shadow:0 24px 60px rgba(0,0,0,.4),inset 0 0 35px rgba(255,20,147,.06);
}
.payment-notice::before {
  content:"";
  position:absolute;
  width:210px;
  height:18px;
  right:18%;
  top:1.2rem;
  background:var(--pink);
  transform:rotate(-5deg) skewX(-20deg);
  opacity:.35;
}
.payment-number { min-width:128px;text-align:center;display:flex;flex-direction:column; }
.payment-number strong { color:var(--pink);font:800 clamp(3.5rem,6vw,6.2rem)/.8 Space Grotesk;letter-spacing:-.09em;text-shadow:4px 4px 0 rgba(255,255,255,.12); }
.payment-number span { margin-top:.65rem;color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
.payment-final strong { color:#fff;-webkit-text-stroke:2px var(--pink); }
.payment-copy { position:relative;z-index:1; }
.payment-copy .eyebrow { margin-bottom:.7rem; }
.payment-copy h3 { margin:0 0 .8rem;font:700 clamp(1.65rem,3vw,2.55rem)/1 Space Grotesk;letter-spacing:-.04em; }
.payment-copy p:last-child { max-width:700px;margin:0;color:#cfcfd6; }

.delivery-zone {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 12%,rgba(255,20,147,.19),transparent 24rem),
    linear-gradient(145deg,#09090d,#111117);
}
.delivery-zone::before {
  content:"BAY AREA";
  position:absolute;
  z-index:-1;
  right:-1vw;
  top:1rem;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.055);
  font:800 clamp(5rem,14vw,14rem)/1 Space Grotesk;
  letter-spacing:-.08em;
  transform:rotate(-4deg);
}
.delivery-heading { position:relative;z-index:3; }
.delivery-layout { position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:1rem; }
.bay-map {
  min-height:540px;
  border:1px solid rgba(255,20,147,.55);
  border-radius:1.4rem;
  overflow:hidden;
  background:#17171d;
  box-shadow:0 30px 70px rgba(0,0,0,.42);
}
.bay-map .leaflet-tile-pane { filter:grayscale(1) invert(.92) hue-rotate(180deg) brightness(.72) contrast(1.2); }
.bay-map .leaflet-control-zoom a { background:#101014;color:#fff;border-color:#333; }
.bay-map .leaflet-control-attribution { background:rgba(8,8,11,.78);color:#aaa; }
.bay-map .leaflet-control-attribution a { color:var(--pink-2); }
.city-marker {
  width:22px;
  height:22px;
  border:4px solid #fff;
  border-radius:50% 50% 50% 0;
  background:var(--pink);
  transform:rotate(-45deg);
  box-shadow:0 0 0 5px rgba(255,20,147,.28),0 0 24px var(--pink);
}
.city-marker::after { content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;left:4px;top:4px; }
.bay-map .leaflet-popup-content-wrapper,.bay-map .leaflet-popup-tip { background:#0b0b0f;color:#fff; }
.bay-map .leaflet-popup-content { margin:12px 16px;font:700 .9rem Manrope; }
.free-popup { color:var(--pink-2);display:block;margin-top:.2rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em; }
.map-fallback { min-height:540px;margin:0;padding:2rem;display:grid;place-items:center;text-align:center;color:#d6d6dc;font-size:1.05rem;line-height:2; }
.map-fallback b { color:var(--pink);text-transform:uppercase;letter-spacing:.1em; }

.city-panel { padding:clamp(1.5rem,3vw,2.5rem);border:1px solid rgba(255,255,255,.15);border-radius:1.4rem;background:linear-gradient(150deg,#18181f,#0d0d11);display:flex;flex-direction:column;justify-content:center; }
.city-panel-label { margin:0 0 1rem;color:var(--pink);font:800 clamp(2rem,3vw,3.4rem)/.95 Space Grotesk;text-transform:uppercase;letter-spacing:-.055em; }
.city-list { display:grid;grid-template-columns:1fr 1fr;gap:.55rem; }
.city-list button { min-height:46px;padding:.65rem;border:1px solid rgba(255,255,255,.15);border-radius:.8rem;background:rgba(255,255,255,.04);color:#fff;font:700 .9rem Manrope;cursor:pointer;transition:background .2s,border-color .2s,transform .2s; }
.city-list button:hover,.city-list button.active { background:var(--pink);border-color:var(--pink);transform:rotate(-1.5deg) scale(1.03); }
.delivery-note { color:var(--muted);font-size:.88rem;margin:1.2rem 0; }
.map-cherub { width:clamp(170px,20vw,310px);right:-4.5rem;top:1.2rem;opacity:.42; }
.delivery-map-image {
  position:relative;
  z-index:3;
  display:block;
  width:min(1500px,100%);
  height:auto;
  margin:0 auto;
  border:1px solid rgba(255,20,147,.62);
  border-radius:clamp(1rem,3vw,2.6rem);
  box-shadow:0 35px 90px rgba(0,0,0,.55),0 0 36px rgba(255,20,147,.12);
}
.delivery-map-link { display:block;position:relative;z-index:3;border-radius:clamp(1rem,3vw,2.6rem); }
.delivery-map-link:focus-visible { outline:3px solid #fff;outline-offset:6px; }

.paint-splat {
  position:fixed;
  z-index:999;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--pink);
  pointer-events:none;
  box-shadow:18px -12px 0 -3px var(--pink),-17px 9px 0 -4px var(--pink),8px 20px 0 -4px var(--pink),-5px -22px 0 -5px var(--pink);
  animation:splat-away .72s ease-out forwards;
}
@keyframes splat-away { 0%{opacity:0;scale:.3}30%{opacity:1;scale:1.25}100%{opacity:0;scale:.9;filter:blur(1px)} }

@media (max-width: 900px) {
  .brand-logo { width:180px;height:68px; }
  .payment-notice { grid-template-columns:1fr 1fr; }
  .payment-copy { grid-column:1/-1;grid-row:1; }
  .payment-number { grid-row:2; }
  .delivery-layout { grid-template-columns:1fr; }
  .bay-map { min-height:470px; }
  .map-cherub { right:-5rem;opacity:.25; }
}

@media (max-width: 560px) {
  .brand-logo { width:165px;height:62px; }
  footer .brand-logo { width:150px;height:58px; }
  .payment-notice { grid-template-columns:1fr 1fr;gap:1.2rem .5rem; }
  .payment-number { min-width:0; }
  .payment-number strong { font-size:3.7rem; }
  .payment-number span { font-size:.65rem; }
  .bay-map { min-height:410px; }
  .city-list { grid-template-columns:1fr; }
  .map-cherub { width:170px;right:-5rem;top:6rem; }
}