/* Dedicated project artwork and accessible local calendar. */
.project-plate{margin:0;min-width:0;background:#eef3f7;border:1px solid #dce3e9;border-radius:24px;overflow:hidden;align-self:center}
.project-image-link{display:block}.project-image{display:block;width:100%;height:auto;object-fit:contain}
.project-plate figcaption{padding:18px 22px;background:#fafcfd;border-top:1px solid #dce3e9;color:#384656}
.project-plate figcaption p{margin:0;font-size:.85rem;line-height:1.6}
.project-brand-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.project-brand-row:empty{display:none}
.project-brand-row .brand-logo{width:90px;height:44px;padding:8px;background:white;border:1px solid #e1e6ec;border-radius:8px}
.brand-logo img{max-width:100%;height:100%;object-fit:contain}.brand-meta img,.brand-instagram img,.brand-chrome img,.brand-sheets img{max-width:30px}
.project-problem{font-weight:600}.project-details{border-top:1px solid #dce3e9;padding-top:16px;margin-top:18px}.project-details summary{cursor:pointer;min-height:44px;font-size:.9rem;font-weight:650}.project-details p{font-size:.9rem;line-height:1.7}
.extra-project .project-plate{margin:18px 0 24px}.extra-project h3{font-size:1.5rem}.extra-project>p{font-size:.97rem;line-height:1.7}.quote-grid blockquote{font-size:1rem;line-height:1.75}.quote-grid{align-items:start}
.platform-strip{display:block;padding-top:22px;padding-bottom:32px;min-width:0}.marquee-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.marquee-heading p{margin:0;color:#c2cbd8;font-size:.9rem}.marquee-window{overflow:hidden;border-radius:14px;background:#f7f9fc}.marquee-track{display:flex;width:max-content;animation:brands-loop 65s linear infinite}.marquee-group{display:flex;align-items:center;gap:32px;padding:22px 16px;flex-shrink:0}.marquee-group .brand-logo{display:flex;align-items:center;justify-content:center;width:110px;height:44px;padding:5px;border:0;background:transparent;flex-shrink:0}.marquee-group .brand-logo img{width:100px}@keyframes brands-loop{to{transform:translateX(-50%)}}
.booking-section.contact{display:block;text-align:left;padding-top:80px;padding-bottom:80px}.booking-heading{max-width:680px;margin-bottom:34px}.booking-heading>p{color:#c7d0de;line-height:1.7}.booking-heading .demo-notice{font-size:.85rem;color:#c7d0de;margin-top:20px}.booking-widget{display:grid;grid-template-columns:1fr 1fr;max-width:1040px;margin:auto;background:#f8fafc;color:#152238;border-radius:24px;overflow:hidden;border:1px solid #dbe3ed;text-align:left}.booking-calendar{padding:32px;border-right:1px solid #dce3eb;min-width:0}.calendar-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.calendar-head h3{font-size:1.2rem;margin:0;text-transform:capitalize;color:#152238}.calendar-nav{display:flex;gap:4px}.calendar-nav button{width:44px;height:44px;border:1px solid #cad4df;background:white;border-radius:10px;color:#20314c;font-size:1.5rem;cursor:pointer}.calendar-nav button:disabled{opacity:.35;cursor:default}.calendar-zone{font-size:.8rem;color:#57667a;margin:8px 0 26px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.calendar-weekday{font-size:.72rem;color:#56657a;text-align:center;padding-bottom:8px}.calendar-day{width:100%;min-height:44px;border:1px solid #c9d5e3;border-radius:10px;background:#e9eff9;color:#253f68;cursor:pointer;font:inherit;font-size:.9rem}.calendar-day:disabled{background:transparent;border-color:transparent;color:#778493;cursor:default}.calendar-day[aria-pressed=true],.slot-grid button[aria-pressed=true]{background:#203d68;color:white;border-color:#203d68}.booking-slots h4{font-size:.9rem;margin:24px 0 12px}.slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.slot-grid button{min-height:44px;border:1px solid #b7c6d8;background:white;border-radius:9px;color:#203b60;font:inherit;cursor:pointer}.booking-form{padding:32px;min-width:0;display:flex;flex-direction:column;gap:17px}.booking-summary{font-size:.85rem;line-height:1.6;margin:0;color:#3d526d;min-height:44px}.form-field{display:flex;flex-direction:column;gap:7px}.form-field label{font-size:.83rem;font-weight:600;color:#23354e}.form-field label span{font-weight:400;color:#5d6c7e}.form-field input,.form-field select,.form-field textarea{font:inherit;font-size:16px;color:#17293f;background:white;border:1px solid #b6c3d1;border-radius:9px;padding:12px;min-height:46px;width:100%;min-width:0;box-sizing:border-box}.form-field textarea{resize:vertical}.booking-form .button{width:100%;margin:3px 0 0;background:#213e69;color:white;white-space:normal;min-height:48px}.booking-message{padding:14px;background:#e2ebf6;color:#223d61;border:1px solid #afc4df;border-radius:10px;font-size:.9rem;line-height:1.6;margin:0}.booking-widget :focus-visible{outline:3px solid #6b98df;outline-offset:3px}
@media(max-width:760px){.booking-widget{grid-template-columns:1fr}.booking-calendar{border-right:0;border-bottom:1px solid #dce3eb}.booking-form,.booking-calendar{padding:24px}.booking-section.contact{padding-top:60px;padding-bottom:60px}.project-plate figcaption{padding:15px}.marquee-heading{align-items:start}.marquee-heading p{max-width:170px}.project-brand-row{gap:6px}.project-brand-row .brand-logo{width:76px}.extra-project .project-plate{margin-top:16px}}
@media(max-width:380px){.booking-form,.booking-calendar{padding:15px}.calendar-grid{gap:3px}.calendar-day{border-radius:7px}.calendar-head h3{font-size:1rem}.calendar-nav button{width:40px}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;width:100%}.marquee-group{flex-wrap:wrap;justify-content:center;width:100%;gap:16px;box-sizing:border-box}.marquee-group[aria-hidden=true]{display:none}}

.mockup-hero-mobile{aspect-ratio:1659/948}.mockup-hero-mobile img{width:100%;left:0;top:0}
/* Keep large text usable without clipping labels or headings. */
.booking-heading h2,.project h3,.extra-project h3{overflow-wrap:anywhere}.scene-selector button{overflow-wrap:anywhere;white-space:normal;min-width:0}.booking-section .calendar-day:disabled{background:transparent;border-color:transparent;color:#7b8795}

/* Complete approved hero, never zoomed or clipped. */
.mockup-hero-desktop,.mockup-hero-mobile{aspect-ratio:auto;overflow:visible}
.mockup-hero-desktop img,.mockup-hero-mobile img{position:static;width:100%;max-width:100%;height:auto;inset:auto;object-fit:contain;border-radius:10px}
.board-brands{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:16px 20px;background:#fff;border-bottom:1px solid #dce5ed;min-height:65px}.board-brands>img{width:82px;height:30px;object-fit:contain}.board-brands>img[alt=Meta],.board-brands>img[alt=Instagram],.board-brands>img[alt=Chrome],.board-brands>img[alt="Google Sheets"]{width:32px}.board-brands>span{font-size:12px;color:#526378}.board-brands .board-note{margin-left:auto;color:#687c91;font-size:10px}.board-canvas{position:relative}.board-interface{position:absolute;bottom:12px;left:5%;width:90%;background:#ffffffed;border:1px solid #c8d5df;border-radius:10px;color:#243649;box-shadow:0 7px 18px #27445910;overflow:hidden}.board-interface-head{display:flex;align-items:center;gap:9px;padding:9px 12px;background:#f8fbfd;border-bottom:1px solid #d8e3eb}.board-interface-head strong{font-size:11px;line-height:1.3}.board-interface-head small{font-size:9px;color:#69798c;margin-left:auto}.window-dots{font-size:6px;letter-spacing:2px;color:#9fadb9}.board-table{padding:3px 12px 6px}.board-table-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;font-size:10px;line-height:1.4;padding:5px 0;border-bottom:1px solid #e6edf3}.board-table-row:last-child{border:0}.board-table-labels{font-weight:650;color:#64778c;font-size:9px}.board-table-row span:last-child{color:#315f5b}.board-stages{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}.board-stages li{display:flex;align-items:center;gap:6px;font-size:10px;line-height:1.5;color:#35495f}.board-stages li:not(:last-child)::after{content:'→';color:#7b8d9e;margin-inline:3px}.board-stages li>span{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:#dfe8f0;color:#425b73;font-size:9px;flex-shrink:0}.scene-board figcaption{padding:13px 16px}.extra-project .board-interface{position:static;margin:-10px auto 14px;width:90%}.extra-project .board-canvas .project-image{padding-bottom:0}.booking-heading{margin-inline:auto;text-align:center}.booking-widget{width:100%;margin-inline:auto}.booking-section.contact>.booking-widget{margin-inline:auto}
@media(max-width:760px){.board-brands{padding:13px;gap:11px}.board-brands>img{width:70px;height:27px}.board-brands .board-note{width:100%;margin-left:0}.board-interface,.extra-project .board-interface{position:relative;bottom:auto;left:auto;width:calc(100% - 24px);margin:-10px auto 14px}.board-interface-head{flex-wrap:wrap;padding:10px}.board-interface-head strong{font-size:12px}.board-interface-head small{font-size:9px}.board-table{padding:4px 10px 7px}.board-table-row{font-size:10px;gap:6px;overflow-wrap:anywhere}.board-stages{display:grid;grid-template-columns:1fr;gap:9px}.board-stages li{font-size:12px}.board-stages li:not(:last-child)::after{content:''}.board-stages li>span{width:21px;height:21px;font-size:10px}.booking-heading{text-align:center}}
.mockup-hero-desktop{display:block}.mockup-hero-desktop,.mockup-hero-mobile{width:100%;background:transparent}
@media(max-width:700px){.mockup-hero-desktop{display:none}.mockup-hero-mobile{display:block}}

/* Dedicated hero illustration: artwork only, with genuine HTML brand overlays. */
.hero-process-art{position:relative;background:#111b2c;border-radius:14px;overflow:visible;isolation:isolate}.hero-art-link{display:block;width:100%}.hero-art-link>img{display:block;position:static;width:100%;height:auto;max-width:100%;object-fit:contain;border-radius:14px}.hero-row-annotation{position:absolute;left:4%;right:4%;display:grid;grid-template-columns:32% 36% 32%;align-items:start;text-align:center;color:#dce5ee;pointer-events:none;font-size:11px;line-height:1.4;gap:0}.hero-row-annotation strong{font-weight:550;display:block}.hero-row-orders{top:3%}.hero-row-support{top:34%}.hero-row-offers{top:65%}.hero-brand-pills{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:6px;flex-wrap:wrap}.hero-process-art .hero-brand-pills img{position:static;width:55px;height:23px;object-fit:contain;padding:4px;background:white;border-radius:4px;max-width:100%;inset:auto}.hero-brand-pills>span{font-size:9px;background:#eef3f7;color:#243b50;padding:4px 7px;border-radius:4px}.hero-process-art.mockup-hero-mobile .hero-row-orders{top:10%}.hero-process-art.mockup-hero-mobile .hero-row-support{top:39%}.hero-process-art.mockup-hero-mobile .hero-row-offers{top:66%}
@media(max-width:700px){.hero-row-annotation{font-size:10px;left:3%;right:3%;grid-template-columns:33% 34% 33%}.hero-process-art .hero-brand-pills img{width:43px;height:21px;padding:3px}.hero-brand-pills{gap:3px;margin-top:5px}.hero-brand-pills>span{padding:3px 5px;font-size:8px}.hero-row-annotation strong{font-size:10px}}

.booking-points{max-width:680px;margin:22px auto 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;list-style:none;text-align:left;color:#c7d0de}.booking-points li{position:relative;padding-left:20px;line-height:1.5}.booking-points li::before{content:'✓';position:absolute;left:0;color:#9dbbd2}@media(max-width:760px){.booking-points{grid-template-columns:1fr;gap:8px}}

/* Original portfolio tool marks, followed by e-commerce integrations. */
.marquee-tool.marquee-tool-sheets{gap:6px}
.marquee-tool.marquee-tool-sheets>img{width:30px;height:34px;max-width:30px}
.marquee-tool-wordpress{position:relative;width:150px;height:44px;overflow:hidden}
.marquee-tool.marquee-tool-wordpress>img{position:absolute;left:50%;top:50%;width:170px;height:58px;max-width:none;transform:translate(-50%,-50%)}
.marquee-tool-code{position:relative;width:100px;height:52px;overflow:hidden}
.marquee-tool.marquee-tool-code>img{position:absolute;left:50%;top:50%;width:128px;max-width:none;height:98px;transform:translate(-50%,-50%);mix-blend-mode:multiply}
.booking-form .booking-privacy{font-size:12px;line-height:1.6;color:#617282;margin:14px 0 0}
.booking-privacy a{text-decoration:underline;text-underline-offset:3px;color:#193d53}
.marquee-tool-inpost{position:relative;width:120px;height:44px;overflow:hidden;min-height:44px}
.marquee-tool.marquee-tool-inpost>img{position:absolute;width:155px;max-width:none;height:93px;left:50%;top:50%;transform:translate(-50%,-50%)}
.marquee-track{animation-duration:120s}.marquee-group{gap:42px;padding-inline:21px}.marquee-tool{display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:44px}.marquee-tool>img{display:block;width:auto;max-width:115px;height:34px;object-fit:contain}.marquee-tool>img[alt="Meta"],.marquee-tool>img[alt="Instagram"]{width:34px}.marquee-tool>span{font-size:15px;line-height:1.3;font-weight:600;white-space:nowrap;color:#172438}.marquee-tool--wordmark>span{font-weight:650;letter-spacing:-.025em}
@media(max-width:700px){.marquee-group{gap:30px;padding-inline:15px}.marquee-tool{gap:8px}.marquee-tool>img{height:30px;max-width:100px}.marquee-tool>span{font-size:13px}}
/* Live booking: bot trap, loading, error and confirmation states. */
.booking-form .booking-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.calendar-grid[aria-busy=true]{opacity:.55}
.booking-message[data-state=error]{background:#fdecea;color:#7a2318;border-color:#f2b8b0}
.booking-done{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:100%;padding:28px 0 12px;text-align:center}
.booking-done>p{max-width:46ch}
.booking-done h3{margin:0;font-size:1.5rem;letter-spacing:-.03em;color:#152238}
html[data-theme] .portfolio-panel .contact .booking-widget .booking-done p{margin:0;font-size:1rem;line-height:1.65;color:#3d526d}
.booking-done:focus{outline:none}
.booking-widget.is-booked{grid-template-columns:1fr}.booking-widget.is-booked .booking-calendar{display:none}
html[data-theme] .portfolio-panel .contact .booking-widget .booking-summary{color:#3d526d}
/* Booking motion: instant press feedback, transitions on state, calm settles (no overshoot). */
.booking-widget{--spring:linear(0, 0.057 4.2%, 0.179 8.3%, 0.319 12.5%, 0.453 16.7%, 0.571 20.8%, 0.669 25%, 0.748 29.2%, 0.811 33.3%, 0.859 37.5%, 0.895 41.7%, 0.923 45.8%, 0.944 50%, 0.959 54.2%, 0.97 58.3%, 0.979 62.5%, 0.985 66.7%, 0.992 75%, 0.996 83.3%, 0.999 95.8%, 1)}
.calendar-day,.slot-grid button,.calendar-nav button,.booking-form .button{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform 440ms var(--spring)}
.calendar-day:not(:disabled):active,.slot-grid button:active,.calendar-nav button:not(:disabled):active,.booking-form .button:not(:disabled):active{transform:scale(.95);transition-duration:.2s,.2s,.2s,.2s,90ms}
.booking-form .button:not(:disabled):active{transform:scale(.98)}
@media(hover:hover){.calendar-day:not(:disabled):not([aria-pressed=true]):hover,.slot-grid button:not([aria-pressed=true]):hover{border-color:#7f98bb;background:#dde7f6}}
.calendar-grid{transition:opacity .25s ease}
.booking-calendar{transition:opacity .35s ease}
.booking-form .button:disabled{opacity:.7;cursor:progress}
.booking-done-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#e3f4ec;color:#1f8a5b}
.booking-done-mark svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:booking-check 520ms var(--spring) 180ms forwards}
@keyframes booking-check{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
 .calendar-day,.slot-grid button,.calendar-nav button,.booking-form .button{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
 .calendar-day:active,.slot-grid button:active,.calendar-nav button:active,.booking-form .button:active{transform:none}
 .booking-done-mark svg{animation:none;stroke-dashoffset:0}
}

/* Buttons grow slightly on hover and press in on click; same critically damped spring as the booking widget. */
:root{--btn-spring:linear(0, 0.057 4.2%, 0.179 8.3%, 0.319 12.5%, 0.453 16.7%, 0.571 20.8%, 0.669 25%, 0.748 29.2%, 0.811 33.3%, 0.859 37.5%, 0.895 41.7%, 0.923 45.8%, 0.944 50%, 0.959 54.2%, 0.97 58.3%, 0.979 62.5%, 0.985 66.7%, 0.992 75%, 0.996 83.3%, 0.999 95.8%, 1)}
html :is(.button,.portfolio-card-cta,.portfolio-cta-button,.portfolio-ads-cta,.savings-cta){transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .25s ease,transform 440ms var(--btn-spring)}
@media(hover:hover){
 html :is(.button,.portfolio-card-cta,.portfolio-cta-button,.portfolio-ads-cta,.savings-cta):not(:disabled):hover{transform:scale(1.05)}
 html .booking-form .button:not(:disabled):hover{transform:scale(1.02)}
}
html :is(.button,.portfolio-card-cta,.portfolio-cta-button,.portfolio-ads-cta,.savings-cta):not(:disabled):active{transform:scale(.97);transition-duration:.18s,.18s,.18s,.25s,90ms}
html .booking-form .button:not(:disabled):active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){html :is(.button,.portfolio-card-cta,.portfolio-cta-button,.portfolio-ads-cta,.savings-cta):not(:disabled):is(:hover,:active){transform:none}}

/* Scroll reveal (enhancements.js): hidden until it enters the viewport. */
.reveal:not(.is-in){opacity:0}

/* Booking confirmation ticket. */
.booking-ticket{--stub:92px;display:grid;grid-template-columns:1fr var(--stub);width:min(100%,460px);margin:10px 0 6px;border-radius:16px;text-align:left;
 color:var(--chosen-on,#fff);background:radial-gradient(120% 140% at 0 0,#ffffff33,transparent 55%),var(--chosen-accent,#2f6bff);
 box-shadow:0 22px 40px -22px color-mix(in srgb,var(--chosen-accent,#2f6bff) 70%,transparent);transform:rotate(-2deg);
 -webkit-mask:radial-gradient(circle 11px at calc(100% - var(--stub)) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - var(--stub)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
 mask:radial-gradient(circle 11px at calc(100% - var(--stub)) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - var(--stub)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.booking-ticket-main{display:flex;flex-direction:column;gap:4px;min-width:0;padding:22px 24px}
.booking-ticket-label{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.booking-ticket-day{font-size:1.35rem;line-height:1.2;letter-spacing:-.02em;margin-top:6px}
.booking-ticket-time{font-size:2.2rem;font-weight:650;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.booking-ticket-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:2px dashed color-mix(in srgb,currentColor 35%,transparent)}
.booking-ticket-stub b{font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.booking-ticket-stub small{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.booking-widget{color-scheme:light}
.booking-form :is(input,textarea,select):-webkit-autofill{-webkit-text-fill-color:#17293f;-webkit-box-shadow:0 0 0 100px #eef3fb inset;caret-color:#17293f}
.booking-ticket-time,.booking-ticket-label{white-space:nowrap}
@media(max-width:420px){.booking-ticket{--stub:64px}.booking-ticket-main{padding:18px 16px}.booking-ticket-label{font-size:.62rem;letter-spacing:.04em}.booking-ticket-time{font-size:clamp(1.35rem,7vw,1.8rem)}.booking-ticket-day{font-size:1.05rem}.booking-ticket-stub b{font-size:1.6rem}}