/* Section scenes (section-scenes.js): everyday problems before/after,
   service spotlight cards and the contact closing network. */

/* Everyday problems, solved: each row pairs a problem (left, "Today") with its solution (right).
   Descriptions stay in the page for screen readers but are hidden visually, so the section stays short.
   Each row animates as it scrolls into view (JS adds .is-armed, then .is-in and .is-solved per row): the problem
   slides in, the green line draws, the solution rises in with its tick, then the problem is struck through and
   steps back. Plays once per row, then stays static. */
.fix-section{padding:clamp(64px,8vw,104px) 0;background:#fff;border-top:1px solid var(--rule)} /* white, so it reads as a new chapter after the off-white hero */
.fix-stage{position:relative;padding:64px 16px 16px;border:1px solid var(--rule);border-radius:20px;background:#e6ecf8;overflow:clip}
.fix-label{position:absolute;top:18px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fix-label-before{left:18px;background:#17191c;color:#f6f8fb}
.fix-label-after{right:18px;background:#226246;color:#fff}
.fix-grid{--gap:56px;list-style:none;display:grid;gap:12px;margin:0;padding:0}
.fix-tile{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
.fix-tile>div{display:grid;align-content:center;gap:6px;padding:16px 20px;border-radius:14px}
.fix-tile small{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fix-tile small::before{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:10px;letter-spacing:0}
.fix-tile h3{justify-self:start;margin:0;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.25;letter-spacing:-.02em}
.fix-tile p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fix-before{position:relative;border:1px dashed #c3cad5;background:#f1f3f6;color:#3d434d;box-shadow:0 10px 24px -20px rgba(30,40,60,.35)}
.fix-before small{color:#b42318}
.fix-before small::before{content:"✕";background:#b42318;color:#fff}
.fix-after{border:1px solid #c6dfcf;background:#fff;box-shadow:0 14px 30px -24px rgba(34,98,70,.5)}
.fix-after small{color:#226246}
.fix-after small::before{content:"✓";background:#226246;color:#fff}
/* Connector: a short green line from problem to solution, with an arrow head. */
.fix-tile::before{content:"";position:absolute;top:50%;left:calc(50% - var(--gap) / 2 + 8px);width:calc(var(--gap) - 22px);height:2px;margin-top:-1px;background:linear-gradient(90deg,rgba(34,98,70,.35),#226246);transform-origin:left}
.fix-tile::after{content:"";position:absolute;top:50%;left:calc(50% + var(--gap) / 2 - 15px);width:8px;height:8px;margin-top:-4px;border-top:2px solid #226246;border-right:2px solid #226246;transform:rotate(45deg)}
@media(max-width:900px){.fix-more{display:none}.fix-grid{--gap:40px}.fix-tile>div{padding:14px 16px}}
@media(max-width:400px){.fix-label{top:16px;padding:5px 9px;font-size:10px;letter-spacing:.04em}.fix-label-before{left:10px}.fix-label-after{right:10px}}
@media(max-width:700px){
.fix-stage{padding:56px 10px 10px}
.fix-grid{--gap:26px;gap:10px}
.fix-tile>div{padding:12px 10px;gap:5px;align-content:start}
.fix-tile small{font-size:9.5px;gap:5px;letter-spacing:.04em}
.fix-tile small::before{width:15px;height:15px;font-size:8px}
.fix-tile h3{font-size:14.5px;line-height:1.3}
.fix-tile::before{left:calc(50% - var(--gap) / 2 + 4px);width:calc(var(--gap) - 12px)}
.fix-tile::after{left:calc(50% + var(--gap) / 2 - 10px);width:6px;height:6px;margin-top:-3px}
}
@media(prefers-reduced-motion:no-preference){
.fix-stage.is-armed .fix-tile .fix-before{opacity:0;transform:translateX(-24px)}
.fix-stage.is-armed .fix-tile .fix-after{opacity:0;transform:translateY(24px) scale(.98)}
.fix-stage.is-armed .fix-tile::before{transform:scaleX(0)}
.fix-stage.is-armed .fix-tile::after{opacity:0}
.fix-stage.is-armed .fix-tile.is-in .fix-before{opacity:1;transform:none;transition:opacity .55s ease-out,transform .75s cubic-bezier(.16,1,.3,1)}
.fix-stage.is-armed .fix-tile.is-in::before{transform:none;transition:transform .5s cubic-bezier(.65,0,.35,1) .3s}
.fix-stage.is-armed .fix-tile.is-in::after{opacity:1;transition:opacity .25s ease .7s}
.fix-stage.is-armed .fix-tile.is-in .fix-after{opacity:1;transform:none;transition:opacity .5s ease-out .65s,transform .7s cubic-bezier(.16,1,.3,1) .65s}
.fix-stage.is-armed .fix-tile.is-in .fix-after small::before{animation:fix-check .45s cubic-bezier(.34,1.56,.64,1) 1.1s both}
.fix-stage.is-armed .fix-tile.is-solved .fix-before{opacity:.62;transition:opacity .6s ease .3s}
@keyframes fix-check{from{transform:scale(0)}}
}
/* AI demo: plain-English version of each recorded question. */
.question-plain{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:#455066}

/* Service cards: a light follows the cursor and the card tilts toward it. */
.service-offers{gap:16px}
.service-offers>.service-offer{position:relative;isolation:isolate;overflow:hidden;padding:22px;border:1px solid var(--rule);border-radius:16px;background:var(--surface)}
@media(max-width:700px){.service-offers>.service-offer{padding:22px 18px}}
.help-section .service-offers>.service-offer:first-child{border-top:1px solid var(--rule)}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
.service-offer{transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease}
.service-offer::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(60,103,190,.17),transparent 65%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.service-offer:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px);border-color:rgba(37,74,149,.45);box-shadow:0 22px 40px -28px rgba(20,33,60,.5)}
.service-offer:hover::before{opacity:1}
.service-offer:hover .offer-icon svg{animation:service-ink 1s ease-out}
}

/* Contact: a slow warm aurora behind the heading, leaning toward the cursor, with a dot grid lit under it. */
.contact-section{position:relative;isolation:isolate;overflow:clip}
.contact-glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.contact-glow i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;translate:calc(var(--gx,0)*60px) calc(var(--gy,0)*40px);transition:translate 1.2s cubic-bezier(.16,1,.3,1)}
.contact-glow i:nth-child(1){top:-35vmax;right:-20vmax;background:radial-gradient(circle,rgba(147,178,241,.34),rgba(147,178,241,0) 62%)}
.contact-glow i:nth-child(2){bottom:-45vmax;left:-25vmax;background:radial-gradient(circle,rgba(78,205,231,.28),rgba(78,205,231,0) 60%);translate:calc(var(--gx,0)*-50px) calc(var(--gy,0)*-30px)}
.contact-glow i:nth-child(3){top:-10vmax;left:25%;width:50vmax;height:50vmax;background:radial-gradient(circle,rgba(191,211,250,.16),rgba(191,211,250,0) 60%)}
.contact-glow::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(147,178,241,.5) 1.1px,transparent 1.6px);background-size:24px 24px;opacity:.6;-webkit-mask-image:radial-gradient(260px circle at var(--mx,70%) var(--my,30%),#000,transparent);mask-image:radial-gradient(260px circle at var(--mx,70%) var(--my,30%),#000,transparent)}
@media(prefers-reduced-motion:no-preference){
.contact-glow i:nth-child(1){animation:aurora-a 18s ease-in-out infinite alternate}
.contact-glow i:nth-child(2){animation:aurora-b 22s ease-in-out infinite alternate}
.contact-glow i:nth-child(3){animation:aurora-c 15s ease-in-out infinite alternate}
@keyframes aurora-a{to{transform:translate(-18vmax,12vmax) scale(1.15)}}
@keyframes aurora-b{to{transform:translate(20vmax,-10vmax) scale(.9)}}
@keyframes aurora-c{to{transform:translate(-12vmax,8vmax) scale(1.25)}}
}
.contact-primary{position:relative}
.contact-primary::before{content:"";position:absolute;inset:-22px -30px;z-index:-1;border-radius:999px;background:radial-gradient(closest-side,rgba(147,178,241,.32),transparent);opacity:var(--near,0);transition:opacity .2s ease;pointer-events:none}

/* Client cards: each shows its key result; on hover the badge fills. */
.client-badge{grid-column:1;justify-self:start;display:inline-flex;align-items:baseline;gap:6px;margin-top:14px;padding:6px 13px;border-radius:999px;background:#d4ddf0;color:#234079;font-size:14px;font-weight:600;transition:background-color .3s ease,color .3s ease}
.client-badge strong{color:var(--link);font-size:17px;font-weight:800;letter-spacing:-.02em;transition:color .3s ease}
@media(prefers-reduced-motion:no-preference){
.project-row .client-badge{opacity:0;transform:translateY(8px);transition:opacity .5s ease-out .3s,transform .6s cubic-bezier(.16,1,.3,1) .3s,background-color .3s ease,color .3s ease}
.project-row.client-visited .client-badge{opacity:1;transform:none}
}
@media(hover:hover) and (pointer:fine){
.project-row:hover .client-badge{background:#3567cc;color:#eef3fe}
.project-row:hover .client-badge strong{color:#fff}
}

/* Headings rise line by line from behind a mask (lines split in section-scenes.js). */
.line-mask{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.line{display:block}
@media(prefers-reduced-motion:no-preference){
h2.motion-pending:has(.line-mask){opacity:1;transform:none}
h2.motion-visited:has(.line-mask){animation:none}
.motion-pending .line{transform:translateY(110%)}
.motion-visited .line{transition:transform .9s cubic-bezier(.16,1,.3,1) calc(var(--line,0)*.12s)}
}

/* Promise underline (drawn by rough-notation) needs a positioned parent. */
.business-promise strong{position:relative}

/* WhatsApp mark beside "Let's talk on WhatsApp". */
.wa-icon{display:inline-grid;place-items:center;flex:none;width:1.25em;height:1.25em;border-radius:50%;background:#25d366;color:#fff}
.wa-icon svg{width:62%;height:62%;stroke:currentColor;stroke-width:1.9;transform:none}
.contact-primary .wa-icon{margin-right:-12px}
.contact-primary:hover .wa-icon svg,.contact-primary:focus-visible .wa-icon svg{transform:none}

/* ---- Visual polish ---- */

/* Scroll progress: a thin terracotta line at the very top, driven by the page scroll. */
.scroll-progress{display:none}
@supports (animation-timeline:scroll()){
.scroll-progress{display:block;position:fixed;top:0;left:0;right:0;z-index:30;height:3px;background:linear-gradient(90deg,#477ae0,#4ecde7);transform-origin:0 50%;transform:scaleX(0);animation:scroll-progress linear both;animation-timeline:scroll(root);pointer-events:none}
@keyframes scroll-progress{to{transform:scaleX(1)}}
}

/* Dark bands open up: they arrive as an inset rounded card and widen to full bleed. */
@supports (animation-timeline:view()){
@media(prefers-reduced-motion:no-preference){
.nexus-section,.contact-section{animation:band-open linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
@keyframes band-open{from{clip-path:inset(0 var(--band-inset,6%) round 44px)}to{clip-path:inset(0 0 round 0)}}
@media(max-width:700px){.nexus-section,.contact-section{--band-inset:4%}}
}
}

/* AI demo: a light runs around the chat card's border while it plays. */
@property --ring{syntax:"<angle>";inherits:false;initial-value:0deg}
.ai-walkthrough.conversation{position:relative}
.ai-walkthrough.conversation::before{content:"";position:absolute;inset:0;z-index:3;padding:3px;border-radius:inherit;background:conic-gradient(from var(--ring),transparent 0 55%,#477ae0 76%,#5180de 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .6s ease;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
.ai-walkthrough.conversation[data-chat-state="playing"]::before{opacity:1;animation:ring-spin 3.2s linear infinite}
@keyframes ring-spin{to{--ring:360deg}}
}

/* Magnetic calls to action pull gently toward the cursor (desktop). */
.is-magnetic{transition:translate .35s cubic-bezier(.16,1,.3,1)}

/* Theme lift: white cards on a light canvas; strong color only in a few places (hero glow, gradient accents, promise band). */
body{background:radial-gradient(900px 640px at 88% 0,rgba(147,179,242,.3),transparent 62%) no-repeat,radial-gradient(700px 520px at 100% 420px,rgba(175,236,248,.2),transparent 62%) no-repeat,var(--bg)}
@media(max-width:700px){.site-header{background:rgba(246,248,251,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 100vmax rgba(246,248,251,.84)}}
.work-section .work-heading-accent{background:linear-gradient(90deg,#3567cc,#2fb0ca);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-intro h2::after{background:linear-gradient(90deg,#3567cc,#4ecde7)}
.business-promise{background:linear-gradient(110deg,#2c56ab,#477ae0 45%,#2fb0ca);color:#fff}
.business-promise p>span{color:rgba(255,255,255,.85)}
.fix-stage{background:#eef3fb;border-color:#dce4f5}
.help-section{background:var(--bg)}
.service-offers>.service-offer{background:#fff;box-shadow:0 14px 32px -24px rgba(38,72,140,.4)}
.work-section .project-list{display:grid;gap:14px}
.work-section .project-row,.work-section .project-row:last-child{border:1px solid #e2e8f3;border-radius:20px;box-shadow:0 1px 2px rgba(20,30,49,.04),0 14px 34px -24px rgba(38,72,140,.35);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .3s ease}
.work-section .project-row.is-active{border-color:#bacff8}
@media(hover:hover){.work-section .project-row:hover{transform:translateY(-3px);border-color:#bacff8;box-shadow:0 1px 2px rgba(20,30,49,.04),0 26px 50px -26px rgba(53,103,204,.5)}}
.project-row::before{top:0;left:28px;width:88px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#477ae0,#4ecde7)}
.client-badge{flex-wrap:wrap;row-gap:1px;border-radius:14px;background:#ebf1fc;color:#2c56ab}
.client-badge strong{font-size:15px} /* role labels, e.g. "Acting CTO:" */
/* Mouse only: on phones a tap leaves :hover stuck, and the badge must stay the light, readable version. */
@media(hover:hover) and (pointer:fine){.project-row:hover .client-badge{background:#2c56ab;color:#fff}}
/* AI demo: a plain chat. The recording link is a small line under it; tapping the chat pauses or replays it. */
.walkthrough-actions{justify-content:center}
.recording-link{gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.recording-link svg{width:12px;height:12px}
.conversation:is([data-chat-state="playing"],[data-chat-state="paused"],[data-chat-state="complete"]) .conversation-window{cursor:pointer}
/* Phones and tablets: the four services sit right under "How I can help"; the AI demo follows as an example. */
@media(max-width:1050px){.ai-service>.service-offers{order:-1}}

/* About: proof numbers that count up, and a journey whose line fills as you scroll (section-scenes.js part 8). */
/* Open stats, no boxes: a short gradient bar, a big number, its label. */
.about-stats{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.about-stats li{position:relative;container-type:inline-size;padding-top:16px}
.about-stats li::before{content:"";position:absolute;top:0;left:0;width:40px;height:3px;border-radius:3px;background:linear-gradient(90deg,#477ae0,#4ecde7)}
.about-stats b{display:block;font-size:clamp(24px,8vw,36px);font-size:min(44px,22cqi);font-weight:800;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,#3567cc,#2fb0ca);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-stats span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--muted)}
.about-stats.is-live li{opacity:0;transform:translateY(14px)}
.about-stats.is-in li{opacity:1;transform:none;transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.about-stats.is-in li:nth-child(2){transition-delay:.08s}.about-stats.is-in li:nth-child(3){transition-delay:.16s}.about-stats.is-in li:nth-child(4){transition-delay:.24s}
.about-journey{position:relative;list-style:none;margin:36px 0 0;padding:0 0 0 34px;display:grid;gap:24px}
.about-journey::before,.about-journey::after{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:2px;border-radius:2px}
.about-journey::before{background:var(--rule)}
.about-journey::after{background:linear-gradient(#477ae0,#4ecde7);transform-origin:top;transform:scaleY(var(--fill,1))}
.about-journey li{position:relative}
.about-journey li::before{content:"";position:absolute;z-index:1;left:-34px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #d0d9ec;transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease}
.about-journey li.is-on::before{background:#477ae0;border-color:#477ae0;box-shadow:0 0 0 6px rgba(71,122,224,.16)}
.about-journey .is-now.is-on::before{background:#2fb0ca;border-color:#2fb0ca;box-shadow:0 0 0 6px rgba(47,176,202,.18)}
.about-journey time{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--link)}
.about-section .about-journey p{margin:4px 0 0;max-width:none;font-size:16px;line-height:1.55;color:var(--text)}
.about-section .about-journey .is-now p{font-weight:600}
.about-journey.is-live li{opacity:.35;transform:translateX(10px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.about-journey.is-live li.is-on{opacity:1;transform:none}
.about-section .about-where{margin:28px 0 0;font-size:15px}
@media(min-width:1051px){.about-section{align-items:start}.about-section>div:first-child{position:sticky;top:110px}}
/* Desktop: the chat card stretches to the bottom of the service cards beside it; its message area takes the extra height. */
@media(min-width:1051px){
.ai-service>.conversation{align-self:stretch;display:flex;flex-direction:column}
.ai-service>.conversation .conversation-window{flex:1 1 0;height:auto;min-height:400px}
}
/* Desktop: client cards sit two to a row and an odd last card fills its row. While a story is open the list
   goes back to one card per row, so opening a card never leaves a gap beside it. */
@media(min-width:1051px){
.work-section .project-list:not(:has(.project-more[open])){grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.work-section .project-list:not(:has(.project-more[open])) .project-row:last-child:nth-child(odd){grid-column:1/-1}
.work-section .project-list:not(:has(.project-more[open])) .project-row:not(:last-child:nth-child(odd)) .project-summary{grid-template-columns:minmax(0,1fr)}
.work-section .project-list:not(:has(.project-more[open])) .project-row:not(:last-child:nth-child(odd)) .project-summary .project-meta{grid-column:1;grid-row:auto;text-align:left;margin-top:12px}
}
/* Client story popup (section-scenes.js moves the story's <details> in here). Desktop: a centred card over a
   dimmed page. Phones: a sheet that rises from the bottom. It sits inside .work-section so story styles still apply. */
dialog.story-modal{inset:0;margin:auto;width:min(calc(100% - 48px),1040px);height:fit-content;max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:20px;background:#fff;color:var(--text);box-shadow:0 30px 80px -20px rgba(15,23,42,.45);display:flex;flex-direction:column;overflow:hidden}
dialog.story-modal:not([open]){display:none}
dialog.story-modal::backdrop{background:rgba(15,23,42,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.story-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 28px 18px;border-bottom:1px solid var(--rule)}
.story-modal-head h3{margin:0;font-size:26px;line-height:1.2;letter-spacing:-.02em}
.story-modal-meta{margin:6px 0 0;font-size:13px;color:var(--muted)}
.story-modal-close{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;background:#fff;font-size:14px;color:var(--text)}
.story-modal-close svg{width:16px;height:16px}
.story-modal-close:hover{background:#f1f4fa}
.story-modal-body{overflow-y:auto;overscroll-behavior:contain;padding:8px 28px 28px}
.story-modal .project-more{margin:0}
.story-modal .project-more>summary{display:none}
.story-modal .project-more-body{padding-top:16px}
.story-modal .impact-caption{color:var(--muted)!important}
@media(prefers-reduced-motion:no-preference){
dialog.story-modal[open]{animation:story-in .35s cubic-bezier(.16,1,.3,1)}
dialog.story-modal[open]::backdrop{animation:story-fade .3s ease}
@keyframes story-in{from{opacity:0;transform:translateY(24px) scale(.98)}}
@keyframes story-fade{from{opacity:0}}
}
@media(max-width:700px){
dialog.story-modal{inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:92dvh;border-radius:20px 20px 0 0}
.story-modal-head{padding:18px 18px 14px}
.story-modal-head h3{font-size:22px}
.story-modal-close{padding:8px 12px;font-size:13px}
.story-modal-body{padding:4px 18px max(24px,env(safe-area-inset-bottom))}
@media(prefers-reduced-motion:no-preference){@keyframes story-in{from{transform:translateY(100%)}}}
}
/* "15+ more businesses" tile: closes the client grid with a next step instead of an empty half-row. */
.client-more{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:26px 28px;border:1px dashed #b9c8e6;border-radius:20px;background:linear-gradient(135deg,#f3f7ff,#eefaf9)}
.client-more p{margin:0}
.client-more-count{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.client-more-count b{font-size:40px;font-weight:800;letter-spacing:-.03em;margin-right:6px;background:linear-gradient(90deg,#3567cc,#2fb0ca);-webkit-background-clip:text;background-clip:text;color:transparent}
.client-more-text{font-size:16px;line-height:1.6;color:var(--muted);max-width:40ch}
.client-more-link{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;margin-top:4px;font-size:17px;font-weight:600;color:var(--text);text-decoration:underline;text-decoration-color:var(--link);text-underline-offset:6px}
.client-more-link .wa-icon{margin-right:0}
.client-more-link>svg{width:18px;height:18px;color:var(--link)}
@media(max-width:700px){.client-more{padding:22px 18px}.client-more-count b{font-size:34px}}
/* Popup footer: move to the previous or next client without closing. */
.story-modal-foot{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--rule)}
.story-modal-foot button{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:10px;min-height:52px;padding:6px 12px;border:0;border-radius:12px;background:none;text-align:left;color:var(--text)}
.story-modal-foot button:hover{background:#f1f4fa}
.story-modal-foot small{grid-column:2;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.story-modal-foot span{grid-column:2;font-size:15px;font-weight:600}
.story-modal-foot svg{grid-row:1/3;width:20px;height:20px;color:var(--link)}
.story-next{margin-left:auto;grid-template-columns:auto auto!important;text-align:right!important}
.story-next small,.story-next span{grid-column:1!important}
.story-next svg{grid-column:2}
.client-more{align-self:stretch}
@media(max-width:700px){.story-modal-foot{padding:10px 12px max(10px,env(safe-area-inset-bottom))}.story-modal-foot span{font-size:14px}}
/* Client logo in the popup header, in the same light tile as on the cards. */
.story-modal-head{align-items:center}
.story-modal-logo{display:flex;align-items:center;justify-content:center;flex:none;width:96px;height:56px;border:1px solid #c1cadb;border-radius:10px;background:#f9fbfe}
.story-modal-logo img{display:block;width:80%;height:72%;object-fit:contain}
.story-modal-name{flex:1;min-width:0}
@media(max-width:700px){.story-modal-head{gap:12px}.story-modal-logo{width:64px;height:42px;border-radius:8px}}
@media(max-width:700px){.story-modal-close{width:44px;padding:0;justify-content:center}.story-modal-close span{display:none}.story-modal-close svg{width:18px;height:18px}}
/* Product recording popup: same look and motion as the client story popup; the video keeps a dark frame. */
#recording-modal{inset:0;margin:auto;transform:none;width:min(calc(100% - 48px),760px);height:fit-content;max-height:calc(100dvh - 48px);border:0;border-radius:20px;background:#fff;color:var(--text);box-shadow:0 30px 80px -20px rgba(15,23,42,.45);overflow:auto}
#recording-modal::backdrop{background:rgba(15,23,42,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#recording-modal .recording-header{padding:18px 24px;border-bottom:1px solid var(--rule)}
#recording-modal h2{font-size:20px;line-height:1.3}
#recording-modal .recording-close{padding:8px 14px;border:1px solid var(--rule);border-radius:999px;background:#fff;font-size:14px;color:var(--text)}
#recording-modal .recording-close:hover{background:#f1f4fa}
#recording-modal .recording-body{padding:16px;background:#fff}
#recording-modal .recording-body video{border-radius:12px;max-height:calc(100dvh - 180px)}
@media(prefers-reduced-motion:no-preference){
#recording-modal[open]{animation:story-in .35s cubic-bezier(.16,1,.3,1)}
#recording-modal[open]::backdrop{animation:story-fade .3s ease}
}
@media(max-width:700px){
#recording-modal{inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:92dvh;border-radius:20px 20px 0 0}
#recording-modal .recording-header{padding:14px 16px}
#recording-modal h2{font-size:17px}
#recording-modal .recording-close{width:44px;padding:0;justify-content:center}
#recording-modal .recording-close span{display:none}
#recording-modal .recording-body{padding:10px 12px max(14px,env(safe-area-inset-bottom))}
#recording-modal .recording-body video{max-height:calc(92dvh - 100px)}
}