@font-face { font-family:'Impacted'; src:url(../assets/fonts/9ebff8be2e9e08c5.woff2) format('woff2'); }
@font-face { font-family:'Londrina Sketch'; src:url(../assets/fonts/039ea13ffb1bb56f.woff2) format('woff2'); }
@font-face { font-family:'Patrick Hand'; src:url(../assets/fonts/496937dafcb18bf2.woff2) format('woff2'); }
@font-face { font-family:'BlacksOut'; src:url(../assets/fonts/32faa1590fe60174.woff2) format('woff2'); }

* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:hidden; }
body { font-family:'Patrick Hand', cursive; overflow-x:hidden; }
h1,h2,h3 { font-family:'Impacted', sans-serif; }

/* ---------- NAV ---------- */
.kdmn-nav {
  background:#000; height:80px; display:flex; align-items:center; justify-content:space-between;
  padding:0 60px; position:fixed; top:0; left:0; width:100%; z-index:400;
  transition:transform .35s ease;
}
.kdmn-nav.nav-hidden { transform:translateY(-100%); }
.nav-links { display:flex; align-items:center; gap:40px; }
.mobile-menu-toggle {
  display:none; background:none; border:none; padding:0; cursor:pointer; line-height:0;
  position:relative; z-index:9997;
}
.mobile-menu-toggle img { height:40px; width:auto; display:block; }
.mobile-nav-panel {
  display:none; position:fixed; top:0; bottom:0; width:70vw; z-index:9996;
  background:rgba(0,0,0,0.60); overflow:visible;
}
.mobile-nav-panel.is-open { display:block; }
.mobile-nav-panel.panel-right { right:0; }
.mobile-nav-panel.panel-left { left:0; }
.mobile-nav-content {
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; box-sizing:border-box;
  padding:0 clamp(16px,6vw,32px) clamp(16px,5vh,32px);
}
.mobile-nav-edge {
  position:absolute; top:0; height:100%; width:0; z-index:1; pointer-events:none;
  overflow:visible;
}
.mobile-nav-panel.panel-right .mobile-nav-edge { left:0; }
.mobile-nav-panel.panel-left .mobile-nav-edge { right:0; }
.mobile-nav-shadow {
  position:absolute; top:50%; left:0; width:100vh; height:auto;
  display:block; transform-origin:center center;
}
.mobile-nav-panel.panel-right .mobile-nav-shadow { transform:translate(-50%,-50%) rotate(90deg); }
.mobile-nav-panel.panel-left .mobile-nav-shadow { transform:translate(-50%,-50%) rotate(-90deg); }
.mobile-nav-links { display:flex; flex-direction:column-reverse; }
.mobile-nav-panel .mobile-nav-links a {
  font-family:'Impacted', sans-serif; text-decoration:none;
  font-size:clamp(30px,8.5vw,38px); padding:clamp(7px,2.2vh,12px) 4px;
  text-shadow:1px 2px 4px rgba(0,0,0,0.7);
}
.mobile-nav-panel .mobile-nav-links a:nth-child(1) { color:#e9c46a; }
.mobile-nav-panel .mobile-nav-links a:nth-child(2) { color:#e76f51; }
.mobile-nav-panel .mobile-nav-links a:nth-child(3) { color:#2a9d8f; }
.mobile-nav-panel .mobile-nav-links a:nth-child(4) { color:#73ba9b; }
.mobile-nav-social { display:flex; gap:16px; padding-bottom:clamp(14px,4vh,28px); flex-wrap:wrap; }
.mobile-nav-panel .mobile-nav-social a {
  font-family:'Impacted', sans-serif; text-decoration:none; font-size:13px; color:#fff; padding:6px 4px;
}
.kdmn-nav a {
  font-family:'Impacted', sans-serif; color:#fff; text-decoration:none; font-size:26px;
  letter-spacing:1px; text-transform:uppercase; transition:color .2s ease;
}
.nav-links a:nth-child(1):hover { color:#e9c46a; }
.nav-links a:nth-child(2):hover { color:#e76f51; }
.nav-links a:nth-child(3):hover { color:#2a9d8f; }
.nav-links a:nth-child(4):hover { color:#73ba9b; }
.nav-logo-btn {
  background:none; border:none; padding:0; cursor:pointer; display:block; line-height:0;
  align-self:flex-start; margin-left:261px;
}
.nav-logo-btn img {
  height:168px; width:auto; display:block; transition:transform .3s ease;
}
.nav-logo-btn:hover img { transform:scale(1.2) rotate(-10deg); }
/* spacer so fixed nav doesn't overlap the hero underneath it */
.nav-spacer { height:80px; }

/* ---------- HERO ---------- */
.kdmn-hero { position:relative; min-height:700px; background:url(../assets/images/f265cf2f4cfc61b2.webp) center 30% / cover no-repeat; overflow:hidden; }
.kdmn-hero-eyebrow { position:absolute; top:60px; left:60px; font-family:'Impacted', sans-serif; color:#A78431; font-size:22px; letter-spacing:1px; }
.kdmn-card-wrap { position:absolute; top:110px; left:40px; width:420px; }
.kdmn-card-rotate { position:relative; width:100%; }
.kdmn-card-img { width:100%; display:block; opacity:1; }
.kdmn-card-text {
  position:absolute; width:67.12%; left:50.89%; top:45.77%; height:43.9%;
  transform:translate(-50%,-50%) rotate(6.83deg);
  color:#fff; text-align:left; display:flex; flex-direction:column; justify-content:center;
}
.kdmn-card-text h1 { font-family:'BlacksOut'; font-size:23px; line-height:1.08; text-shadow:2px 2px 0 rgba(0,0,0,0.7); margin:0; text-transform:uppercase; }
.hero-btn-wrap {
  position:absolute; width:53.62%; left:46.94%; top:73%; height:7.79%;
  transform:translate(-50%,-50%) rotate(0.6deg);
  display:flex; align-items:center; justify-content:center;
}
.hero-btn {
  width:100%; height:auto; aspect-ratio:500/195; display:block; cursor:pointer;
  transition:transform .3s ease, filter .3s ease;
  animation:iconPulse 10s ease-in-out infinite;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.45));
}
.hero-btn:hover, .hero-btn.is-hovering {
  transform:scale(1.18); filter:drop-shadow(0 8px 12px rgba(0,0,0,0.55));
}

/* social dock, follows scroll */
.social-dock {
  position:fixed; right:-92px; top:36%; z-index:500; display:flex; flex-direction:column; align-items:flex-end;
}
.dock-item {
  width:130px; margin-top:-14px; cursor:pointer;
  transform:rotate(-20.5deg);
  transition:transform .28s ease;
}
.dock-item:first-child { margin-top:0; }
.dock-item img { width:100%; display:block; filter:drop-shadow(3px 5px 7px rgba(0,0,0,0.45)); }
.dock-item:hover { transform:rotate(-20.5deg) translateX(-58px); z-index:510; position:relative; }

/* ---------- TORN TRANSITION (real graphic assets: 72SHDW / 73SHDW) ---------- */
/* Universal rule: these tear graphics must always render above every other element on the page */
.tear-strip, .tear-strip-2, .tear-strip-3, .tear-strip-4, .tear-strip-5 { z-index:300; }
.tear-strip {
  position:absolute; top:0; left:0; width:100%; transform:translateY(-50%);
  pointer-events:none; display:block;
}
/* second tear (72SHDW), between section 2 (pain) and section 3 (services) */
.tear-strip-2 {
  position:absolute; top:0; left:0; width:100%; transform:translateY(-50%);
  pointer-events:none; display:block;
}
/* third tear (73SHDW), between section 3 (services) and section 4 (banner strip) */
.tear-strip-3 {
  position:absolute; top:0; left:0; width:100%; transform:translateY(-50%);
  pointer-events:none; display:block;
}
/* fourth tear (72SHDW), between section 4 (banner strip) and section 5 (should you work with us) */
.tear-strip-4 {
  position:absolute; bottom:0; left:0; width:100%; transform:translateY(50%);
  pointer-events:none; display:block;
}
/* fifth tear (73SHDW), between section 5 (should you work with us) and section 6 (contact/map) */
.tear-strip-5 {
  position:absolute; bottom:0; left:0; width:100%; transform:translateY(50%);
  pointer-events:none; display:block;
}

/* ---------- PAIN POINTS ---------- */
.pain { background:#000; padding:34px 60px 0; position:relative; }
.pain-heading {
  color:#fff; font-family:'BlacksOut'; font-size:42px; line-height:1.25; margin-bottom:8px;
  transform:rotate(0deg);
  /* Full-bleed breakout: escape .pain's 60px content padding/1280px max-width
     so the conveyor viewport can physically reach the browser edges, while
     .pain itself (and every other Section 2 element) keeps its normal
     constrained width. Standard technique, safe because html/body already
     have overflow-x:hidden (line 7-8). */
  width:100vw; position:relative; left:50%; margin-left:-50vw;
}
.pain-heading-viewport { overflow:hidden; width:100%; }
.pain-heading-track { display:flex; width:max-content; }
.pain-heading-text { white-space:nowrap; }
.pain-heading .hl { color:#FFD21F; }
.pain-heading-char { display:inline-block; transform:scale(1); transition:transform .12s ease-out; transform-origin:center bottom; }

/* Desktop: marquee only runs while hovering the heading; stationary otherwise.
   The animation-name/duration/keyframe are no longer fixed here - they are
   generated at runtime by the conveyor script in script.js (which measures
   the rendered sentence width and duplicates it enough times to guarantee
   edge-to-edge coverage at the current viewport width), and applied to
   .pain-heading-track via inline style. Only play-state (paused-until-hover)
   stays declared in CSS so the runtime script never has to touch it. */
@media (hover:hover) and (pointer:fine) {
  .pain-heading-track { animation-play-state:paused; }
  .pain-heading:hover .pain-heading-track { animation-play-state:running; }
}
.pain-body { position:relative; height:955px; }

/* left: graphic 36 notepad, true aspect ratio, rotated 9deg clockwise to counter the artwork's own -9deg tilt so grid lines run level */
.pain-note-wrap {
  position:absolute; top:49px; left:63px; width:692px; height:857px;
  transform:rotate(9deg); transform-origin:center center; z-index:10;
}
.pain-note-wrap img { width:100%; height:100%; display:block; filter:drop-shadow(14px 10px 18px rgba(0,0,0,0.6)); }
/* text sits in its own unrotated layer, same box as the paper, so it stays level */
.pain-note-text-layer { position:absolute; top:49px; left:63px; width:692px; height:857px; z-index:11; }
.pain-note-text { position:absolute; left:19%; width:68%; }
.pain-note-h3 { top:6%; }
.pain-note-h3 h3 { font-family:'Londrina Sketch'; font-size:34px; color:#fff; font-weight:normal; }
.pain-note-list { top:17.5%; }
.pain-note-list ul { list-style:none; }
.pain-note-list li {
  font-family:'Patrick Hand'; font-size:20px; line-height:1.45; margin-bottom:4px; position:relative; padding-left:18px; color:#2b2620;
}
.pain-note-list li:before { content:"▪"; position:absolute; left:0; }
.pain-note-cta { top:59%; }
.pain-note-cta p { font-family:'Patrick Hand'; color:#fff; font-size:19px; line-height:1.5; }

/* right: banner photo pile */
.pain-photo-stack { position:absolute; top:0; left:780px; height:100%; width:560px; }
.stack-img {
  position:absolute; filter:grayscale(100%) drop-shadow(10px 14px 16px rgba(0,0,0,0.65));
  transition:transform .3s ease, filter .3s ease, z-index 0s;
  cursor:pointer;
}
.stack-b10 { width:558px; top:115px; left:321px; transform:rotate(23.03deg); z-index:2; }
.stack-b01 { width:744px; top:432px; left:-190px; transform:rotate(-19.55deg); z-index:1; }
.stack-b04 { width:558px; top:250px; left:40px; transform:rotate(0deg); z-index:5; }
.stack-b10:hover { transform:rotate(23.03deg) scale(1.12); filter:grayscale(100%) drop-shadow(14px 20px 22px rgba(0,0,0,0.75)); z-index:30; }
.stack-b01:hover { transform:rotate(-19.55deg) scale(1.12); filter:grayscale(100%) drop-shadow(14px 20px 22px rgba(0,0,0,0.75)); z-index:30; }
.stack-b04:hover { transform:rotate(0deg) scale(1.12); filter:grayscale(100%) drop-shadow(14px 20px 22px rgba(0,0,0,0.75)); z-index:30; }
.stack-pin { position:absolute; width:92px; z-index:6; filter:drop-shadow(2px 3px 3px rgba(0,0,0,0.5)); }
.pin-on-b10 { top:255px; left:470px; transform:rotate(18deg); }
.pin24-on-b10 { top:90px; left:490px; transform:rotate(-12deg); }
.pin-on-b01 { top:560px; left:340px; transform:rotate(-10deg); }
.stack-tape { position:absolute; width:190px; top:378px; left:115px; transform:rotate(0deg); z-index:8; }

/* ---------- SERVICES ---------- */
.services { background:#2A9D8F; display:flex; position:relative; }
.services-side { position:relative; flex-shrink:0; align-self:stretch; width:230px; overflow:hidden; }
.services-side img.side-bg { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Mobile-only alternate crop of the exact same desktop asset, pre-rotated
   90deg clockwise (same pixels, generated from 606a05e9c361ec04.webp) so
   the mobile header can show the graphic's full torn-paper silhouette
   intact instead of an object-fit:cover crop of the tall desktop version.
   Hidden on desktop; swapped in inside the mobile breakpoint below. */
.services-side img.side-bg-mobile { display:none; }
.side-text-wrap {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:80%; height:80%; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.side-text-wrap span {
  font-family:'BlacksOut'; color:#000; writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:88px; line-height:0.9; white-space:nowrap; letter-spacing:1px;
}
.services-cols { flex:1; display:flex; padding:70px 40px; gap:0; flex-wrap:wrap; }
.service-col { flex:1; min-width:230px; color:#fff; }
.col-divider { flex-shrink:0; height:340px; display:flex; align-items:center; gap:4px; margin:0 14px; }
.col-divider img { height:100%; width:auto; display:block; }
.service-col a.icon-link { display:inline-block; }
.service-col a.icon-link.icon-center { display:block; width:fit-content; margin:0 auto; }
.service-col img.icon {
  height:230px; width:auto; margin-bottom:20px; filter:drop-shadow(0 6px 8px rgba(0,0,0,0.35));
  cursor:pointer; transition:transform .3s ease, filter .3s ease;
  animation:iconPulse 10s ease-in-out infinite;
}
.service-col img.icon:hover, .service-col img.icon.is-hovering {
  transform:scale(1.18); filter:drop-shadow(0 14px 18px rgba(0,0,0,0.5));
}
@keyframes iconPulse {
  0%, 100% { transform:scale(1); }
  5% { transform:scale(1.14); }
  10% { transform:scale(1); }
}
.service-col h3 { font-family:'BlacksOut'; font-size:42px; margin-bottom:12px; white-space:nowrap; }
.service-col h3 .hl { color:#E63946; }
.service-col h3 br.mobile-only-break { display:none; }
.service-col p { font-size:15px; line-height:1.5; margin-bottom:22px; }

/* ---------- BANNER STRIP ---------- */
.banner-strip { background:#fff; padding:0; position:relative; }
.banner-strip:hover { cursor:ew-resize; }
.banner-viewport { overflow:hidden; width:100%; }
.banner-track { display:flex; gap:6px; width:max-content; will-change:transform; }
.banner-img { height:260px; width:auto; display:block; filter:grayscale(100%); user-select:none; -webkit-user-drag:none; }

/* ---------- SHOULD YOU WORK WITH US ---------- */
.workwithus { background:#E63946; position:relative; height:700px; }
.wwu-left-img {
  position:absolute; left:-2px; bottom:0; height:90%; width:auto; display:block;
  filter:grayscale(100%) drop-shadow(26px 0 12px rgba(0,0,0,0.6));
}
.wwu-left-textwrap {
  position:absolute; left:443px; bottom:0; height:90%; width:50%;
  display:flex; align-items:center; justify-content:flex-start;
}
.wwu-left-inner { text-align:left; }
.wwu-left-inner h2 {
  font-family:'BlacksOut'; color:#000; font-size:48px; line-height:1.05; text-transform:uppercase; margin-bottom:22px;
}
.gallary-btn {
  display:inline-block; font-family:'Impacted'; background:#2A9D8F; color:#fff; border:none;
  padding:12px 30px; font-size:40px; text-transform:uppercase; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 0 0 rgba(255,255,255,0);
}
.gallary-btn:hover { transform:translate(-6px,-6px); box-shadow:9px 9px 0 0 rgba(255,255,255,1); }
.wwu-right-img {
  position:absolute; right:0; bottom:0; height:90%; width:auto; display:block; transform:translateX(50%);
  filter:grayscale(100%) drop-shadow(-26px 0 12px rgba(0,0,0,0.6));
}
.wwu-right-copy { position:absolute; top:70px; right:230px; width:460px; color:#000; text-align:left; }
.wwu-right-copy h2 { font-family:'BlacksOut'; font-size:48px; line-height:1.05; text-transform:uppercase; margin-bottom:14px; }
.wwu-right-copy .sub { font-family:'Londrina Sketch'; color:#fff; font-size:26px; margin-bottom:16px; }
.wwu-right-copy .para { font-size:16px; font-weight:bold; line-height:1.6; }

/* ---------- CONTACT / MAP ---------- */
/* ---------- CONTACT / GET STARTED (section 6) ---------- */
.contact { background:#EFBE45; position:relative; min-height:950px; overflow:hidden; padding-top:60px; }
.contact-top { text-align:center; }
.email-btn {
  display:inline-block; font-family:'Impacted'; background:#000; color:#fff; border:none;
  padding:12px 30px; font-size:40px; text-transform:uppercase; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 0 0 rgba(255,255,255,0);
}
.email-btn:hover { transform:translate(-6px,-6px); box-shadow:9px 9px 0 0 rgba(255,255,255,1); }
.contact-top h1 {
  font-family:'BlacksOut'; color:#fff; font-size:38px; white-space:nowrap; margin-top:20px; text-transform:uppercase;
}
.contact-policy {
  max-width:640px; margin:60px auto 0; text-align:center; color:#fff;
  font-family:'Patrick Hand'; font-size:16px; line-height:1.6;
}
.contact-policy a { color:#fff; text-decoration:underline; }
.contact-policy .policy-links { margin-top:10px; display:flex; gap:24px; justify-content:center; font-family:'Impacted'; font-size:14px; letter-spacing:0.5px; }

/* map card: bottom is fixed (always sits behind/beyond graphic 64), only the TOP grows on hover.
   Hovering the card itself is stable (bottom never moves toward/away from the cursor) and the
   hitbox never extends into the policy section above since the rest-state box is short. */
.contact-mapcard {
  position:absolute; left:0; bottom:-40px; width:100%; height:150px; overflow:hidden;
  transition:height .45s ease; box-shadow:0 -16px 26px rgba(0,0,0,0.45); z-index:2;
}
.contact-mapcard:hover, .contact-mapcard.is-expanded { height:45.8vw; }
.map-img { position:absolute; bottom:0; left:0; width:100%; height:auto; display:block; transition:opacity .3s ease; }
.map-img.hover-img { opacity:0; }
.contact-mapcard:hover .map-img.default-img, .contact-mapcard.is-expanded .map-img.default-img { opacity:0; }
.contact-mapcard:hover .map-img.hover-img, .contact-mapcard.is-expanded .map-img.hover-img { opacity:1; }

.checker-strip { position:absolute; left:0; bottom:0; width:100%; display:block; z-index:3; box-shadow:0 -12px 20px rgba(0,0,0,0.4); pointer-events:none; }
.kdmn-logo-peek { position:absolute; left:50%; bottom:0; width:150px; transform:translate(-50%,50%); z-index:4; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.4)); pointer-events:none; }
/* Wrapper for the two Section 6 footer graphics. display:contents means it
   generates no box of its own and has zero effect on layout/positioning -
   the two children above keep resolving their containing block straight
   through to .contact exactly as before, so desktop is provably unchanged.
   The mobile override below turns this into a real, independently
   positioned box so the two graphics are explicitly and structurally
   decoupled from .contact-mapcard, rather than merely "not touching it in
   practice" as before. */
.contact-footer-graphics { display:contents; }

/* ---------- V3: LIVE GEOGRAPHIC PRICING MAP ----------
   Replaces the V2 Map_Web.png / Under_Con_Map_Web.png placeholders.
   Occupies the exact same footprint the two <img class="map-img"> elements
   used to (absolute, inset to the .contact-mapcard bounds). The card's
   existing grow-on-hover behaviour (height 150px -> 45.8vw) is unchanged;
   see js/script.js for the invalidateSize() call on transition end. */
.kdmn-map-live { position:absolute; inset:0; width:100%; height:100%; background:#e8e4da; }
.kdmn-map-live .leaflet-control-attribution {
  font-size:9px; background:rgba(255,255,255,0.75); line-height:1.3;
}
.kdmn-map-live .leaflet-control-zoom a {
  font-family:'Impacted', sans-serif;
}

.kdmn-map-tooltip {
  position:absolute; top:14px; left:14px; z-index:1000;
  background:#000; color:#fff; font-family:'Tahoma','Segoe UI',Arial,sans-serif;
  padding:10px 14px; max-width:230px; pointer-events:none;
  opacity:0; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease;
  box-shadow:3px 3px 0 0 rgba(0,0,0,0.35);
}
.kdmn-map-tooltip.is-visible { opacity:1; transform:translateY(0); }
.kdmn-map-tooltip .kdmn-map-tooltip-title {
  font-family:'BlacksOut'; font-size:15px; text-transform:uppercase; margin:0 0 4px; letter-spacing:0.3px;
}
.kdmn-map-tooltip .kdmn-map-tooltip-body { font-size:12px; line-height:1.4; margin:0; color:#e6e6e6; }
.kdmn-map-tooltip.zone-centre .kdmn-map-tooltip-title { color:#fff; }
.kdmn-map-tooltip.zone-green .kdmn-map-tooltip-title { color:#2A9D8F; }
.kdmn-map-tooltip.zone-yellow .kdmn-map-tooltip-title { color:#EFBE45; }
.kdmn-map-tooltip.zone-consultation .kdmn-map-tooltip-title { color:#2A9D8F; }

.kdmn-map-centre-marker {
  width:14px; height:14px; border-radius:50%; background:#E63946;
  border:2px solid #fff; box-shadow:0 0 0 2px rgba(230,57,70,0.5), 0 2px 4px rgba(0,0,0,0.4);
}

@media (max-width:700px) {
  .social-dock { display:none; }
  .kdmn-nav { justify-content:space-between; padding:10px 16px; height:auto; }
  .nav-spacer { height:60px; }
  .nav-links { display:none; }
  .mobile-menu-toggle { display:block; }
  .nav-links a { font-size:14px; }
  .nav-logo-btn img { height:36px; }
  .mobile-menu-toggle { margin-left:auto; }
  .kdmn-nav.menu-panel-left .nav-logo-btn {
    position:absolute; left:auto; right:90px; top:50%; transform:translateY(-50%);
  }
  .kdmn-hero {
    min-height:520px;
    background-image:url(../assets/images/MBLHROPRT.webp);
    background-position:center top;
  }
  .kdmn-card-wrap { width:260px; top:70px; left:20px; }
  .kdmn-card-text h1 { font-size:18px; }
  .hero-btn { height:70px; }
  .social-dock img { width:80px; }
  .col-divider img { display:none; }
  /* Section 3: button 1 (Content Creation / 28HVR) is the only icon-link
     without the icon-center class in the markup, so on mobile's stacked
     full-width columns it sits flush-left instead of centered like buttons
     2 and 3. Mirror icon-center's own centering here, scoped to mobile
     only, rather than adding the class in the HTML (which would also
     affect its desktop position). */
  .service-col a.icon-link:not(.icon-center) {
    display:block; width:fit-content;
    /* margin:auto centering collapses to 0/negative (flush-left) once the
       icon renders wider than its mobile column - confirmed for button 1
       at most mobile widths, and separately for button 3 at 320px (its
       icon-center sibling rule hits the exact same overflow case there).
       This transform-based centering stays symmetric around the column's
       own center regardless of whether the icon is wider than the column,
       so it can't collapse to flush-left the way margin:auto does. Scoped
       with :not(.icon-center) so this rule and the matching one just below
       for icon-center don't double-apply to the same element. */
    position:relative; left:50%; transform:translateX(-50%); margin:0;
  }
  /* Buttons 2/3 (icon-center) hit the identical margin:auto-overflow bug as
     button 1 above, just only at the narrowest widths (e.g. button 3 at
     320px) where that particular icon's rendered width happens to exceed
     its column. Same fix, mobile-only so desktop's existing icon-center
     centering (which never hits this case) is untouched. */
  .service-col a.icon-link.icon-center {
    position:relative; left:50%; transform:translateX(-50%); margin:0;
  }
  /* "Social Media Management" is wide enough at 42px that white-space:nowrap
     lets it run past its mobile column and get silently clipped by the
     site's global overflow-x:hidden (no scrollbar, just cut off - matches
     the reported symptom). Allow wrapping and reveal the explicit break
     point above so it becomes exactly "Social Media" / "Management"
     rather than an arbitrary browser-chosen break. Scoped to
     :has(br.mobile-only-break) - NOT a blanket .service-col h3 rule - so
     only this heading is allowed to wrap; a blanket rule also wrapped
     "Content Creation" unintentionally at 320-390px during testing. */
  .service-col h3 br.mobile-only-break { display:block; }
  .service-col h3:has(br.mobile-only-break) { white-space:normal; }
  .pain { padding:24px 20px 0; }
  /* Edge-to-edge heading: .pain has 20px left/right padding at this tier
     (see rule above). The base .pain-heading rule already breaks out to
     100vw full-bleed via left:50%/margin-left:-50vw, so mobile just needs
     its font-size override here - no separate negative-margin trick needed
     at this tier anymore. */
  .pain-heading { font-size:24px; }
  /* Runtime conveyor script (script.js) sets animation-name/duration inline
     and rebuilds duplicate count for this viewport width; here we only force
     it to always run (no hover requirement) regardless of play-state set by
     the desktop hover rule above, matching the "auto-run on mobile" spec. */
  .pain-heading-track { animation-play-state:running !important; }
  .pain-body {
    display:grid; grid-template-rows:auto auto; grid-template-columns:1fr; justify-items:center;
    position:relative; height:auto; gap:40px;
  }
  .pain-note-wrap, .pain-note-text-layer {
    position:relative; grid-row:1; grid-column:1;
    top:auto; left:auto; width:100%; max-width:300px; height:auto; aspect-ratio:692/857;
  }
  .pain-note-h3 h3 { font-size:20px; }
  .pain-note-list li { font-size:13px; line-height:1.35; margin-bottom:2px; }
  .pain-note-cta p { font-size:12px; line-height:1.4; }
  /* Mobile: only IMG 01 remains, full-bleed at the very bottom of .pain.
     Same negative-margin bleed technique used for the heading above (this
     tier's .pain padding is 20px, so -20px/+40px cancels it exactly). IMG 10
     and IMG 04 are hidden per spec. Their attached decorative pins
     (pin-on-b10 / pin24-on-b10) are hidden alongside them - leaving those
     stickers floating with nothing under them would be a visible bug
     directly caused by hiding IMG 10, not a scope expansion. pin-on-b01 and
     stack-tape were tuned to the old small clipped stack box; their
     coordinates don't translate to the new full-width static IMG 01, so
     they're hidden too rather than guessed at - flagged in the handover
     report if repositioned versions are wanted instead. */
  .pain-photo-stack {
    position:relative; grid-row:2; grid-column:1;
    top:auto; left:auto; width:calc(100% + 40px); height:auto;
    margin:0 -20px; overflow:visible;
  }
  .pain-photo-stack .stack-b10,
  .pain-photo-stack .stack-b04,
  .pain-photo-stack .pin-on-b10,
  .pain-photo-stack .pin24-on-b10,
  .pain-photo-stack .pin-on-b01,
  .pain-photo-stack .stack-tape { display:none; }
  .pain-photo-stack .stack-b01 {
    position:static; display:block; width:100%; height:auto; margin:0;
    transform:rotate(0deg);
  }
  .services { flex-direction:column; }
  /* Mobile header: same desktop torn-paper asset, but swapped for its
     pre-rotated (90deg clockwise) copy so the full artwork silhouette
     shows intact as a horizontal banner instead of a tall-image cover-crop
     sliver. Container uses the rotated image's own aspect ratio
     (1424:500) so it sits full-width at the very top of Section 3 with no
     gap above/below and no distortion - height is derived, not fixed. */
  .services-side {
    width:100%; height:auto; aspect-ratio:1424/500; overflow:hidden;
  }
  .services-side img.side-bg { display:none; }
  .services-side img.side-bg-mobile {
    display:block; position:static; width:100%; height:100%; object-fit:contain;
  }
  .side-text-wrap { width:90%; height:70%; }
  .side-text-wrap span { writing-mode:horizontal-tb; transform:none; font-size:44px; }
  .workwithus { height:auto; padding:40px 0; }
  .wwu-left-img, .wwu-right-img { display:none; }
  .wwu-left-textwrap {
    position:static; height:auto; width:100%; margin-bottom:20px;
    /* Mobile has zero horizontal .workwithus padding, so this heading sits
       flush against the viewport's left edge and its leftmost letters get
       clipped. Nudge just this mobile instance right by 2px for clearance -
       desktop's absolute left:443px position (see base rule) is untouched. */
    padding-left:2px;
  }
  .wwu-right-copy { position:static; width:100%; padding:0 24px; }
  .contact-top h1 { font-size:22px; white-space:normal; padding:0 20px; }
  .contact-mapcard { height:300px; }
  .contact-mapcard.is-expanded { height:480px; }
  /* KDMN logo-peek keeps the same fixed 150px width as desktop, which is
     disproportionately large against a 320-430px viewport (~35-47% of the
     screen). Scale it down for mobile only - position/anchor (left:50%,
     bottom:0, translate centering) is untouched, only width changes. */
  .kdmn-logo-peek { width:90px; }
  /* Give the footer-graphics wrapper a real, independently-positioned box
     on mobile: its own bottom:0/left:0/width:100% anchor to .contact,
     completely separate from .contact-mapcard's box (which still expands/
     collapses via its own height transition, unrelated to this). The two
     children switch their own containing block from .contact to this
     wrapper - same bottom-left corner, so the same pixel result, but now
     structurally explicit rather than incidental.
     .is-pinned (toggled by script.js, mobile-only, purely scroll-position
     driven - see the IIFE below in js/script.js) switches the wrapper to
     position:fixed against the actual browser viewport, so its position
     genuinely cannot be influenced by .contact-mapcard's height, the
     Leaflet map's internal transforms, or any other Section 6 geometry -
     while still only ever being active while Section 6 itself is on
     screen, never floating over Sections 1-5 (pinning switches off the
     moment .contact's own top or bottom edge crosses the viewport edge). */
  .contact-footer-graphics {
    display:block; position:absolute; left:0; bottom:0; width:100%; height:0; z-index:3;
  }
  .contact-footer-graphics.is-pinned {
    position:fixed; bottom:0; left:0; width:100%;
  }
  .contact-footer-graphics .checker-strip,
  .contact-footer-graphics .kdmn-logo-peek {
    position:absolute;
  }
}

/* ---------- TABLET TIER (701px-768px) ----------
   Previously nothing covered this range, so it fell through to full desktop
   layout and overflowed. This is NOT the phone layout scaled up - it keeps
   more of the desktop composition (e.g. note+photos still don't need to drop
   to a single narrow column the way phones do) while scaling the specific
   fixed-px elements that don't fit in 768px down to a size that does. */
@media (min-width:701px) and (max-width:768px) {
  .social-dock { display:none; }
  .kdmn-nav { padding:10px 20px; }
  .nav-links { gap:16px; flex-wrap:wrap; justify-content:center; }
  .pain-body {
    display:grid; grid-template-rows:auto auto; grid-template-columns:1fr; justify-items:center;
    position:relative; height:auto; gap:50px;
  }
  .pain-note-wrap, .pain-note-text-layer {
    position:relative; grid-row:1; grid-column:1;
    top:auto; left:auto; width:100%; max-width:440px; height:auto; aspect-ratio:692/857;
  }
  .pain-note-h3 h3 { font-size:28px; }
  .pain-note-list li { font-size:16px; }
  .pain-note-cta p { font-size:15px; }
  .pain-photo-stack {
    position:relative; grid-row:2; grid-column:1;
    top:auto; left:auto; width:420px; height:563px; margin:0 auto; overflow:hidden;
  }
  .pain-photo-stack .stack-b10 { width:419px; top:86px; left:241px; }
  .pain-photo-stack .stack-b01 { width:558px; top:324px; left:-143px; }
  .pain-photo-stack .stack-b04 { width:419px; top:188px; left:30px; }
  .pain-photo-stack .stack-pin { width:69px; }
  .pain-photo-stack .pin-on-b10 { top:191px; left:353px; }
  .pain-photo-stack .pin24-on-b10 { top:68px; left:368px; }
  .pain-photo-stack .pin-on-b01 { top:420px; left:255px; }
  .pain-photo-stack .stack-tape { width:143px; top:284px; left:86px; }
}

/* ---------- XP-STYLE LEGAL MODAL ---------- */
.xp-modal-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5);
  z-index:9998; align-items:center; justify-content:center; padding:20px;
}
.xp-modal-backdrop.is-open { display:flex; }
.xp-window {
  width:560px; max-width:100%; max-height:80vh; display:flex; flex-direction:column;
  background:#ECE9D8; border:2px solid #0A246A; border-radius:0;
  box-shadow:2px 2px 10px rgba(0,0,0,0.5), inset 1px 1px 0 #fff;
  font-family:'Tahoma','Segoe UI',Arial,sans-serif; z-index:9999;
}
.xp-titlebar {
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg,#F26B7A 0%,#EF233C 45%,#C41C33 100%);
  border-radius:0; padding:4px 4px 4px 8px; height:28px;
  border-bottom:1px solid #7A1522;
}
.xp-titlebar-text {
  color:#fff; font-size:13px; font-weight:bold; letter-spacing:0.2px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.4); user-select:none;
}
.xp-titlebar-controls { display:flex; gap:3px; }
.xp-btn {
  width:21px; height:20px; border-radius:3px; display:flex; align-items:center; justify-content:center;
  font-family:Marlett,Tahoma,sans-serif; font-size:12px; font-weight:bold; line-height:1;
  border:1px solid rgba(0,0,0,0.35); box-shadow:inset 1px 1px 0 rgba(255,255,255,0.6);
  color:#5a5a5a; background:linear-gradient(180deg,#e8e8e8 0%,#c6c6c6 50%,#b0b0b0 100%);
  cursor:default; opacity:0.55;
}
.xp-btn-close {
  cursor:pointer; opacity:1; color:#fff;
  background:linear-gradient(180deg,#F26B7A 0%,#EF233C 55%,#C41C33 100%);
  border:1px solid #7A1522; box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}
.xp-btn-close:hover { background:linear-gradient(180deg,#FF8B96 0%,#FF3B54 55%,#D42840 100%); }
.xp-btn-close:active { background:linear-gradient(180deg,#C41C33 0%,#A5162A 100%); }
.xp-window-body {
  background:#ECE9D8; padding:8px; flex:1; display:flex; overflow:hidden;
}
.xp-content {
  background:#fff; border:1px solid #7F9DB9; flex:1; padding:16px;
  overflow-y:auto; font-size:13px; line-height:1.6; color:#222; white-space:pre-wrap;
}
.xp-content::-webkit-scrollbar { width:17px; }
.xp-content::-webkit-scrollbar-track { background:#ECE9D8; border-left:1px solid #999; }
.xp-content::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#F4F2ED 0%,#D8D5CC 50%,#C6C3B9 100%);
  border:1px solid #999;
}
.xp-content::-webkit-scrollbar-button {
  background:linear-gradient(180deg,#F4F2ED 0%,#D8D5CC 100%); border:1px solid #999; height:16px;
}
@media (max-width:600px) {
  .xp-window { width:100%; max-height:85vh; }
  .xp-titlebar-text { font-size:12px; }
}

/* ---------- CONTACT FORM MODAL (same XP window family, teal accent) ---------- */
.xp-window.contact-modal .xp-titlebar {
  background:linear-gradient(180deg,#5FC3B5 0%,#2A9D8F 45%,#1E7268 100%);
  border-bottom:1px solid #14504A;
}
.xp-window.contact-modal .xp-btn-close {
  background:linear-gradient(180deg,#5FC3B5 0%,#2A9D8F 55%,#1E7268 100%);
  border:1px solid #14504A;
}
.xp-window.contact-modal .xp-btn-close:hover {
  background:linear-gradient(180deg,#7FDCCE 0%,#34BCAB 55%,#22887A 100%);
}
.xp-window.contact-modal .xp-btn-close:active {
  background:linear-gradient(180deg,#1E7268 0%,#155850 100%);
}
.contact-form { white-space:normal; }
.contact-form h2 {
  font-family:'BlacksOut'; color:#1E7268; font-size:22px; margin:0 0 14px; text-transform:uppercase;
}
.contact-form label {
  display:block; font-family:'Tahoma','Segoe UI',Arial,sans-serif; font-size:12px; font-weight:bold;
  color:#333; margin:7px 0 3px;
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  width:100%; box-sizing:border-box; font-family:'Tahoma','Segoe UI',Arial,sans-serif; font-size:13px;
  padding:8px; border:1px solid #7F9DB9; border-radius:0; background:#fff; color:#222;
}
.contact-form textarea { min-height:100px; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus {
  outline:2px solid #2A9D8F; outline-offset:-1px;
}
.contact-form .field-error { color:#C41C33; font-size:11px; margin-top:0; min-height:0; }
.contact-form .field-error:not(:empty) { margin-top:3px; min-height:14px; }
.contact-form .contact-honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form textarea::placeholder { color:#264653; opacity:1; }
.contact-form textarea::-webkit-input-placeholder { color:#264653; opacity:1; }
.contact-form textarea::-moz-placeholder { color:#264653; opacity:1; }
.contact-form textarea:-ms-input-placeholder { color:#264653; opacity:1; }
.contact-submit-btn {
  display:inline-block; font-family:'Impacted'; background:#2A9D8F; color:#fff; border:none;
  padding:10px 26px; font-size:22px; text-transform:uppercase; text-decoration:none; cursor:pointer;
  margin-top:16px; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 0 0 rgba(0,0,0,0);
}
.contact-submit-btn:hover { transform:translate(-4px,-4px); box-shadow:6px 6px 0 0 rgba(30,114,104,0.4); }
.contact-submit-btn:disabled { opacity:0.6; cursor:default; transform:none; box-shadow:none; }
.contact-form-status {
  margin-top:14px; font-family:'Tahoma','Segoe UI',Arial,sans-serif; font-size:13px; padding:10px;
  display:none;
}
.contact-form-status.is-success { display:block; background:#E4F5F1; color:#1E7268; border:1px solid #2A9D8F; }
.contact-form-status.is-error { display:block; background:#FBE6E9; color:#8A1526; border:1px solid #C41C33; }

/* ---------- COOKIE CONSENT BAR ----------
   No consent mechanism existed in the prior design; this is a minimal,
   functionally-necessary addition so GA4 can respect visitor choice.
   Reuses existing site colors/fonts rather than introducing new ones. */
.kdmn-consent-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:9990;
  background:#000; color:#fff; padding:16px 24px;
  display:none; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:'Tahoma','Segoe UI',Arial,sans-serif; font-size:13px; line-height:1.5;
}
.kdmn-consent-bar.is-visible { display:flex; }
.kdmn-consent-text { flex:1; min-width:240px; }
.kdmn-consent-text a { color:#EFBE45; text-decoration:underline; }
.kdmn-consent-actions { display:flex; gap:10px; flex-shrink:0; }
.kdmn-consent-btn {
  font-family:'Impacted'; text-transform:uppercase; border:none; cursor:pointer;
  padding:8px 18px; font-size:14px;
}
.kdmn-consent-accept { background:#2A9D8F; color:#fff; }
.kdmn-consent-decline { background:transparent; color:#fff; border:1px solid #fff; }
@media (max-width:600px) {
  .kdmn-consent-bar { padding:14px 16px; }
}