/* Readability and layout polish layered over refined.css. Phone mockup text stays small on purpose. */
.announcement{font-size:12px}.brand small{font-size:10px;letter-spacing:.6px}
.hero-left .eyebrow,.hero-v2 .hero-notes span,.hero-price>span{font-size:12px}.graphic-label{font-size:11px}
.form-subtitle,.place-lookup>p,.form-note{font-size:12px}.form-note{color:#8f877f}.search-row button{font-size:12px;padding:8px 10px}.search-row input{font-size:14px}
.hero-bottom{font-size:13px}.showcase-toolbar,.showcase-toolbar button{font-size:12px}.industry-tabs button{font-size:13px}
.industry-copy dt{font-size:11px}.industry-copy dd{font-size:14px}.industry-copy>p{font-size:15px}
.gallery-photo span{font-size:11px}.creative-overlay small{font-size:10px}.creative-caption b{font-size:14px}.creative-caption button{font-size:12px}
.motion-source small,.delivery-path span,.action-icons span,.device-label{font-size:11px}.motion-controls button,.report-replay button{font-size:12px}.report-replay{font-size:11px}
.report-metrics span{font-size:12px}.report-tip{font-size:13px}.report-tip p{font-size:12px}.sample-note,.report-demo .sample-note{font-size:11px}
.price-card>small{font-size:11px}.muted{font-size:12px}.contact-options small{font-size:12px}.footer-bottom p{font-size:12px}
.plan-result .tag{font-size:11px}.compact-plan dt{font-size:11px}.compact-plan dd{font-size:13px}.compact-plan>p{font-size:13px}

/* Keep the left column beside the long result card instead of leaving an empty black area */
/* overflow:hidden on section blocks position:sticky; clip still hides overflow without creating a scroll container */
.hero.hero-v2{overflow:clip}
@media(min-width:761px){.hero:has(#form-step2:not([hidden])) .hero-left{position:sticky;top:110px}}

/* Main screen: black from the top bar down, at least one full viewport tall */
header{background:#070708;border-bottom-color:#ffffff14}
header .wordmark{color:#fff}header .brand small{color:#9a948f}
header nav a{color:#d8d3ce}header nav a:hover{color:var(--lime)}
header .menu{color:#fff}
@media(max-width:760px){header nav{background:#0d0d0f;box-shadow:0 12px 18px #0006}header nav a{border-bottom-color:#ffffff12}}
/* 122px = announcement bar + header, so the hero fills exactly the first screen */
.hero.hero-v2{min-height:calc(100vh - 122px);min-height:calc(100svh - 122px);display:flex;flex-direction:column;justify-content:center;padding-top:48px;background-color:#070708}
.hero.hero-v2>.hero-grid{flex:1;align-content:center}
.hero-v2 .hero-grid{align-items:center}
.hero-form{align-self:center}
.hero-v2 .hero-bottom{margin-top:28px}
.hero-graphic{margin-top:52px}
/* Wider main screen so the neighbourhood scene and its industry cards get more room */
@media(min-width:1001px){.hero.hero-v2>.hero-grid{width:min(1480px,calc(100% - 80px));grid-template-columns:minmax(0,1.55fr) minmax(380px,1fr);gap:56px}.hero-graphic{margin:40px 0 0}}
/* A dim city of many buildings fills the whole screen behind the main map */
.hero.hero-v2{position:relative}
.hero.hero-v2>.hero-grid,.hero.hero-v2>.hero-bottom{position:relative;z-index:1}
.hero-city{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask:linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%)}
.hero-city svg{position:absolute;left:50%;top:50%;width:max(100%,1700px);height:auto;min-height:100%;transform:translate(-50%,-46%);opacity:.95}
.hero-city:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#07070880 0%,#07070820 30%,#07070820 70%,#07070866 100%)}
/* Background windows flicker on three different rhythms so the city never pulses in sync */
.hero-city .win{animation:cityWin 6s ease-in-out infinite}
.hero-city .win.b{animation-duration:9s;animation-delay:-3s}
.hero-city .win.c{animation-duration:4.5s;animation-delay:-1.5s}
@keyframes cityWin{0%,100%{opacity:1}45%{opacity:.25}60%{opacity:.9}}
@media(prefers-reduced-motion:reduce){.hero-city .win{animation:none}}

/* Hero picture: soft edges melt into the black city behind it */
.hero-photo{display:block;width:100%;height:auto;border-radius:18px;-webkit-mask:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%);mask:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%)}
/* Each person in the picture is looking at a different industry ad: the ad pops out as a phone screen,
   joined to them by a dotted line (positions are % of the picture; lines/dots set in index.html) */
.hero-graphic .hg-card.c3{--x:12%;--y:22%}.hero-graphic .hg-card.c1{--x:10%;--y:62%}.hero-graphic .hg-card.c5{--x:36%;--y:84%}
.hero-graphic .hg-card.c4{--x:90%;--y:18%}.hero-graphic .hg-card.c2{--x:90%;--y:64%}
.hero-graphic .hg-card{width:92px;padding:9px 4px 5px;background:#0f0f12;border-radius:16px;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #ffffff26,0 16px 34px #000c,0 0 26px #f25c1a40;animation-name:hgPhone}
.hero-graphic .hg-card:before{content:'';position:absolute;top:3px;left:50%;width:22px;height:3px;border-radius:3px;background:#2c2c31;transform:translateX(-50%)}
.hero-graphic .hg-card:after{display:none}
.hero-graphic .hg-top{background:#fff;border-radius:9px 9px 0 0;padding:4px 4px 3px}
.hero-graphic .hg-card img{height:96px;border-radius:0}
.hero-graphic .hg-cta{margin-top:0;border-radius:0 0 9px 9px}
.hero-graphic .hg-heart{top:-8px;right:-8px}
@keyframes hgPhone{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
.hero-graphic>svg.hg-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hg-links path{fill:none;stroke:#ffa56c;stroke-width:2;stroke-dasharray:4 5;opacity:1;filter:drop-shadow(0 0 3px #f25c1a);animation:linkFlow 1.2s linear infinite}
@keyframes linkFlow{to{stroke-dashoffset:-14}}
.hg-dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#ffb27a;box-shadow:0 0 0 0 #f25c1a99;animation:dotPing 2s ease-out infinite;z-index:1}
@keyframes dotPing{0%{box-shadow:0 0 0 0 #f25c1a99}100%{box-shadow:0 0 0 14px #f25c1a00}}
.hero-graphic .hg-bubble{display:none}
@media(max-width:760px){.hero-graphic .hg-card{width:62px;padding:6px 3px 3px;border-radius:11px}.hero-graphic .hg-card img{height:58px}.hero-graphic .hg-top{padding:2px 3px}.hero-graphic .hg-top b{font-size:5px}.hero-graphic .hg-top small,.hero-graphic .hg-top i{display:none}.hero-graphic .hg-cta{font-size:5px;padding:2px 4px}.hg-links .l-c4,.hg-links .l-c5,.hg-dot.d-c4,.hg-dot.d-c5{display:none}}
@media(prefers-reduced-motion:reduce){.hg-links path,.hg-dot{animation:none}}

/* Hero map: photo ad cards rising from the neighbourhood */
.hero-graphic{isolation:isolate}
.hg-card{position:absolute;left:var(--x);top:var(--y);width:118px;transform:translate(-50%,-100%);background:#fff;border-radius:12px;padding:5px;box-shadow:0 14px 30px #000a,0 0 0 1px #ffffff20;animation:hgFloat 5s ease-in-out infinite;animation-delay:var(--d);z-index:2}
.hg-card:after{content:'';position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.hg-top{display:grid;grid-template-columns:auto 1fr;column-gap:4px;align-items:center;padding:1px 2px 4px;line-height:1.15}
.hg-top i{grid-row:span 2;width:14px;height:14px;border-radius:50%;background:#171719;color:#fff;font-style:normal;font-size:5px;font-weight:800;display:grid;place-items:center}
.hg-top b{font-size:7px;color:#171719}.hg-top small{font-size:6px;color:#8e8a86}
.hg-card img{display:block;width:100%;height:72px;object-fit:cover;border-radius:7px}
.hg-cta{display:flex;justify-content:space-between;margin-top:4px;background:var(--lime);color:#fff;font-size:7px;font-weight:800;padding:4px 6px;border-radius:5px}
.hg-heart{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;background:#ff3d5a;color:#fff;font-size:11px;display:grid;place-items:center;box-shadow:0 4px 10px #ff3d5a80;animation:hgPop 5s ease-in-out infinite;animation-delay:var(--d)}
.hg-bubble{position:absolute;right:0;bottom:24%;background:#fff;color:#171719;font-size:12px;font-weight:800;padding:8px 14px 8px 8px;border-radius:30px;display:flex;align-items:center;gap:7px;box-shadow:0 10px 24px #0008;animation:hgBubble 6s ease-in-out infinite;z-index:3}
.hg-bubble span{width:20px;height:20px;border-radius:50%;background:var(--lime);color:#fff;font-size:10px;display:grid;place-items:center}
@keyframes hgFloat{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,calc(-100% - 8px))}}
@keyframes hgPop{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.25)}80%{transform:scale(1)}}
@keyframes hgBubble{0%,8%{opacity:0;transform:translateY(8px)}18%,82%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-4px)}}
@media(max-width:760px){.hg-card{width:84px;padding:4px;border-radius:9px}.hg-card img{height:50px}.hg-top b{font-size:6px}.hg-cta{font-size:6px;padding:3px 5px}.hg-heart{width:17px;height:17px;font-size:9px;top:-7px;right:-7px}.hg-bubble{display:none}.hero-graphic .hg-card.c4,.hero-graphic .hg-card.c5{display:none}}
@media(prefers-reduced-motion:reduce){.hg-card,.hg-heart,.hg-bubble{animation:none}}

/* KakaoTalk consultation buttons in Kakao yellow with the speech-bubble mark */
.button[href*="pf.kakao.com"]{background:#fee500;color:#191919;gap:8px}.button[href*="pf.kakao.com"]:hover{background:#f5dc00}
.button[href*="pf.kakao.com"]:before{content:'';width:18px;height:17px;flex-shrink:0;background:#191919;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 17'%3E%3Cpath d='M9 0C4 0 0 3.1 0 7c0 2.5 1.7 4.7 4.2 6l-.9 3.3c-.1.3.3.5.5.3L7.7 14c.4 0 .9.1 1.3.1 5 0 9-3.1 9-7S14 0 9 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 17'%3E%3Cpath d='M9 0C4 0 0 3.1 0 7c0 2.5 1.7 4.7 4.2 6l-.9 3.3c-.1.3.3.5.5.3L7.7 14c.4 0 .9.1 1.3.1 5 0 9-3.1 9-7S14 0 9 0Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Industry tabs read as buttons */
.industry-tabs{gap:8px}
.industry-tabs button{background:#fff;border:1px solid #e2dcd5;color:#3d3a37;font-weight:600;padding:11px 18px;border-radius:30px;box-shadow:0 1px 2px #0000000d;transition:border-color .2s,color .2s,box-shadow .2s,transform .2s}
.industry-tabs button:hover{border-color:var(--lime);color:var(--lime);box-shadow:0 4px 12px #f25c1a1f;transform:translateY(-1px)}
.industry-tabs button[aria-selected=true]{background:#171719;border-color:#171719;color:#fff;box-shadow:0 6px 16px #00000026}
.industry-tabs button[aria-selected=true]:hover{color:#fff;transform:none}
/* While auto-rotating, the active tab fills with orange as a timer */
.industry-tabs.rotating button[aria-selected=true]{background:linear-gradient(90deg,#f25c1a 0 50%,#171719 50% 100%) 100% 0/200% 100% no-repeat;animation:tabTimer 2.5s linear forwards}
@keyframes tabTimer{from{background-position:100% 0}to{background-position:0 0}}
.industry-showcase.swap .industry-copy{animation:showcaseIn .45s ease both}
/* Ad creative turns over to the next industry: photo and copy slide in from the right */
.industry-showcase.swap .phone .industry-photo{animation:adPhotoIn .6s cubic-bezier(.2,.8,.2,1) both}
.industry-showcase.swap .phone .ad-art strong,.industry-showcase.swap .phone .ad-offer{animation:adCopyIn .6s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes adPhotoIn{from{transform:translateX(38%) scale(1.08);opacity:.2}to{transform:none;opacity:1}}
@keyframes adCopyIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
/* Facebook and Instagram phones swap front/back on each change */
.phone-stack .phone{transition:transform .6s cubic-bezier(.2,.8,.2,1),left .6s,right .6s,top .6s,z-index 0s .3s}
.phone-stack.fb-front .facebook-phone{z-index:3;transform:rotate(-5deg) translateY(10px)}
.phone-stack.fb-front .instagram-phone{z-index:1;transform:rotate(11deg) translateY(-6px)}
@keyframes showcaseIn{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Store autocomplete */
.place-lookup{position:relative}
.place-results{list-style:none;margin:6px 0 0;padding:4px 0;background:#fff;border:1px solid #ece7e1;border-radius:12px;box-shadow:0 14px 30px #0000001a;max-height:330px;overflow-y:auto;position:absolute;left:0;right:0;z-index:15}
.place-results[hidden]{display:none}
.place-results li{padding:11px 16px;cursor:pointer;border-bottom:1px solid #f3efea}.place-results li:last-child{border-bottom:0}
.place-results li b{display:block;font-size:14px;color:#171719;line-height:1.4}.place-results li span{display:block;font-size:12px;color:#8f877f;margin-top:2px}
.place-results li:hover,.place-results li[aria-selected=true]{background:#fff4ec}
.place-results .place-empty{font-size:13px;color:#8f877f;cursor:default}.place-results .place-empty:hover{background:none}
.search-row:has(+.place-results:not([hidden])){border-color:var(--lime)}
.search-row.loading>span{color:transparent;position:relative}.search-row.loading>span:after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid #f25c1a40;border-top-color:var(--lime);border-radius:50%;animation:placeSpin .6s linear infinite}
@keyframes placeSpin{to{transform:rotate(360deg)}}
.place-results .place-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:#faf8f5;cursor:default;font-size:12px;color:#8f877f}.place-results .place-more:hover{background:#faf8f5}
.place-more>span{margin-right:auto}.place-more button{font-size:12px;font-weight:700;padding:6px 10px;border-radius:20px;background:#fff;border:1px solid #e2dcd5;color:#3d3a37}.place-more button:hover{border-color:var(--lime);color:var(--lime)}

/* Calculator: assumption values are labelled as such */
.calc-mode{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#ffb48f;background:#f25c1a1f;border:1px solid #f25c1a55;border-radius:30px;padding:4px 10px;margin-bottom:10px}
.calc-mode i{width:6px;height:6px;border-radius:50%;background:#f25c1a}
.local-calculator legend{font-size:12px}.local-calculator legend small{font-size:11px}.calc-chips span{font-size:13px}
.calc-location{font-size:12px}.calc-basis{font-size:11px}.calc-message{font-size:13px}.calc-results span,.calc-conversion>div>span{font-size:11px}.calc-conversion>div>b{font-size:13px}
.calc-month-cost{font-size:12px}.calc-settings summary{font-size:12px}.calc-settings-body label{font-size:12px!important}.calc-settings-body p,.calc-footnote{font-size:11px}

/* Consultation request */
.lead-box{margin-top:20px;padding:20px;border:1px solid #f0e2d6;background:#fffaf6;border-radius:14px}
.lead-box h4{margin:0;font-size:16px;letter-spacing:-.5px}.lead-box>p{font-size:12px;margin-top:6px;line-height:1.7}
.lead-box label{font-size:12px;margin:14px 0 6px}.lead-box input[type=tel]{background:#fff}
.lead-consent{display:flex!important;gap:8px;align-items:flex-start;font-weight:500!important;line-height:1.6;cursor:pointer}
.lead-consent input{width:18px;height:18px;flex-shrink:0;margin:1px 0 0;accent-color:var(--lime);padding:0}
.lead-consent details{font-size:11px;color:#8a8079}.lead-consent summary{font-size:11px;font-weight:600;display:inline;color:#8a8079;text-decoration:underline}.lead-consent summary:after{display:none}
.lead-consent details p{font-size:11px;padding:6px 0 0;line-height:1.7}
.lead-status{font-size:12px;margin-top:10px;line-height:1.6;text-align:center}.lead-status.ok{color:#2f7a3c;font-weight:700}.lead-status.err{color:#c0392b}
.lead-offline{font-size:11px;color:#a0938a;text-align:center;margin-top:8px}
.consult-card .lead-box .button{margin-top:14px}
.lead-divider{display:flex;align-items:center;gap:10px;font-size:11px;color:#aaa29b;margin:18px 0 0}.lead-divider:before,.lead-divider:after{content:'';flex:1;border-top:1px solid #ece7e1}

@media(max-width:760px){
  .brand small{font-size:9px}.nav-cta{font-size:12px}.announcement{font-size:11px}
  .hero-left .eyebrow{font-size:11px}.hero-v2 .hero-notes span{font-size:11px}.graphic-label{font-size:10px}.hero-price>span{font-size:11px}
  .form-eyebrow{font-size:12px}.form-subtitle{font-size:13px}.place-lookup>p,.form-note{font-size:12px}
  /* 16px stops iOS Safari from zooming into fields on focus */
  input,select,.search-row input{font-size:16px}#manual-fields label{font-size:13px}
  .hero-bottom{font-size:12px}.hero-bottom i{font-size:8px}
  .industry-tabs button{font-size:12px;padding:9px 12px}.section-heading>p{font-size:14px}
  .showcase-toolbar{font-size:12px}.showcase-toolbar button{font-size:11px;padding:7px 11px}
  .industry-copy>p,.industry-copy dd{font-size:14px}
  .gallery-photo span{font-size:10px}.creative-overlay small{font-size:9px}.creative-caption b{font-size:13px}.creative-caption button{font-size:12px}
  .photo-cases .sample-note{font-size:11px}.motion-controls button,.report-replay button{font-size:12px}
  .delivery-path span,.action-icons span{font-size:11px}
  .form-note{font-size:11px}.hero-form .consult-card .button{font-size:14px}
  .comparison span,.comparison b,.comparison strong,.comparison .compare-foot span,.comparison .compare-foot strong{font-size:13px}
  .platforms small{font-size:11px}.journey p,.checklist li{font-size:13px}
  .calc-chips span{font-size:13px}.calc-settings-body label{font-size:12px!important}
  .eyebrow,.eyebrow.dark,.motion-step,.step{font-size:11px}.other-industry{font-size:12px}.touch span{font-size:11px}
}