/* Corner Studio public site, 2026 redesign.
   Loaded after agency.css on public pages only; the Studio dashboard and client
   workspace keep their existing styles. The brand device is the corner bracket
   from the logo, used as crop marks around real work. */

:root{
  --paper:#f3f4f6;--soft:#e9ebf0;--panel:#ffffff;--ink:#10142a;--muted:#4e5568;--line:#d5d9e2;
  --accent:#2747f5;--accent-strong:#1a32c4;--lime:#2747f5;--signal:#ffc83d;
  --night:#0d1124;--night-2:#171c35;--night-line:#2a3150;--night-ink:#eef0f6;--night-muted:#a9afc4;
  --heading:'Archivo','Helvetica Neue',Arial,sans-serif;--font:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:6px;--ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light
}
html{scroll-padding-top:90px}
body.agency-page{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--font);font-stretch:100%;-webkit-font-smoothing:antialiased}
body.agency-page p{color:var(--muted)}
body.agency-page h1,body.agency-page h2,body.agency-page h3{font-family:var(--heading);color:var(--ink);font-stretch:112%;letter-spacing:-.025em}
body.agency-page h1{font-weight:800;line-height:.98;font-size:clamp(2.6rem,6.4vw,5.4rem)}
body.agency-page h2{font-weight:750;line-height:1.02;font-size:clamp(2rem,4.2vw,3.4rem)}
body.agency-page h3{font-weight:700;font-stretch:106%;letter-spacing:-.015em}
body.agency-page h1 span,body.agency-page h2 span{color:inherit}
::selection{background:var(--signal);color:var(--ink)}
.skip-link{background:var(--ink);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* Labels: small, sentence case, with a corner tick instead of a rule. */
.eyebrow{font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink);gap:10px;margin-bottom:18px}
.eyebrow>span{width:10px;height:10px;background:none;border-top:3px solid var(--accent);border-left:3px solid var(--accent)}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(243,244,246,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 100vmax rgba(243,244,246,.9);clip-path:inset(0 -100vmax);border-bottom:1px solid var(--line);padding-top:16px;padding-bottom:16px}
.brand{font-stretch:118%;font-size:23px;letter-spacing:-.04em}
.brand b{color:var(--accent)}
.brand-mark{border-color:var(--ink)}
.desktop-nav{font-size:15px;font-weight:500;color:var(--muted);gap:30px}
.desktop-nav a{position:relative;padding:6px 0}
.desktop-nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.desktop-nav a:hover::after,.desktop-nav a[aria-current=page]::after{transform:scaleX(1)}

/* Buttons and links */
.button{border-radius:var(--radius);background:var(--accent);border-color:var(--accent);color:#fff;font-size:15px;font-weight:650;min-height:52px;padding:14px 24px;transition:transform .25s var(--ease-out),background .2s,border-color .2s,color .2s}
.button:hover{background:var(--accent-strong);border-color:var(--accent-strong);transform:translateY(-2px)}
.button svg{transition:transform .25s var(--ease-out)}
.button:hover svg{transform:translateX(3px)}
.button-outline,.button-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.button-outline:hover,.button-secondary:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.header-cta{min-height:44px;padding:10px 18px;font-size:14px}
.text-link{font-size:15px;color:var(--accent);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.text-link:hover{color:var(--accent-strong)}
.contact-email{color:var(--accent)}

/* Sections */
.section{padding-top:112px;padding-bottom:112px}
.section-intro{grid-template-columns:1fr .7fr;gap:64px;margin-bottom:48px}
.section-intro>p,.cs-head>p{font-size:17px;max-width:46ch}
.cs-head{display:grid;grid-template-columns:1fr .75fr;gap:64px;align-items:end;margin-bottom:48px}
.cs-head h2{margin:0}
.cs-head p{margin:0}
.section-end{margin-top:44px}

/* Hero */
.cs-hero{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:28px 64px;align-items:start;padding-top:64px;padding-bottom:88px}
.cs-hero-title{grid-column:1/-1;font-size:clamp(2.8rem,6.3vw,5.8rem);font-stretch:118%;letter-spacing:-.035em;margin-bottom:12px;text-wrap:balance}
.cs-hero-copy{padding-top:44px}
.cs-line{display:block}
.cs-lede{font-size:clamp(17px,1.5vw,19px);line-height:1.6;max-width:44ch;margin-bottom:32px}
.cs-hero .hero-actions{gap:12px}
.cs-hero-note{font-size:14px;margin:22px 0 0}

/* The framed work: four brand corners lock onto the live site. */
.cs-frame{position:relative;margin:0;padding:34px 46px 70px 34px}
.cs-shot{display:block;position:relative;border-radius:4px;overflow:hidden;background:#f4f1e8;box-shadow:0 30px 70px -30px rgba(16,20,42,.45),0 0 0 1px rgba(16,20,42,.08);translate:0 var(--shot-y,0px)}
.cs-shot img{display:block;width:100%;height:auto;aspect-ratio:1280/900;object-fit:cover;object-position:top}
.cs-phone{position:absolute;right:6px;bottom:44px;width:27%;height:auto;aspect-ratio:390/1100;object-fit:cover;object-position:top;border-radius:14px;border:5px solid var(--ink);background:#f4f1e8;box-shadow:0 24px 40px -18px rgba(16,20,42,.55);translate:0 var(--phone-y,0px)}
.cs-corner{position:absolute;z-index:3;width:44px;height:44px;border:0 solid var(--signal);pointer-events:none}
.cs-tl{top:calc(14px - var(--spread,0px));left:calc(14px - var(--spread,0px));border-top-width:7px;border-left-width:7px}
.cs-tr{top:calc(14px - var(--spread,0px));right:calc(26px - var(--spread,0px));border-top-width:7px;border-right-width:7px}
.cs-bl{bottom:calc(50px - var(--spread,0px));left:calc(14px - var(--spread,0px));border-bottom-width:7px;border-left-width:7px}
.cs-br{bottom:calc(50px - var(--spread,0px));right:calc(26px - var(--spread,0px));border-bottom-width:7px;border-right-width:7px}
.cs-frame figcaption{position:absolute;left:34px;right:46px;bottom:0;font-size:14px;line-height:1.5;color:var(--muted)}
.cs-frame figcaption b{color:var(--ink)}
.cs-frame figcaption a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;margin-left:4px;white-space:nowrap}

/* Entrance: runs once on load, only when motion is allowed. Pure CSS so nothing flashes. */
@media (prefers-reduced-motion:no-preference){
.cs-line:nth-child(2){--i:1}
.cs-home .cs-line{opacity:0;transform:translateY(.45em);animation:cs-up .9s var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 90ms + 60ms)}
.cs-home .cs-lede,.cs-home .cs-hero .hero-actions,.cs-home .cs-hero-note{opacity:0;animation:cs-fade .8s var(--ease-out) forwards;animation-delay:.42s}
.cs-home .cs-hero .hero-actions{animation-delay:.52s}.cs-home .cs-hero-note{animation-delay:.62s}
.cs-home .cs-shot{opacity:0;animation:cs-shot 1s var(--ease-out) .25s forwards}
.cs-home .cs-phone{opacity:0;animation:cs-phone 1s var(--ease-out) .55s forwards}
.cs-home .cs-corner{opacity:0;animation:cs-lock .85s var(--ease-out) forwards}
.cs-home .cs-tl{--from:-60px -60px;animation-delay:.75s}
.cs-home .cs-tr{--from:60px -60px;animation-delay:.82s}
.cs-home .cs-bl{--from:-60px 60px;animation-delay:.89s}
.cs-home .cs-br{--from:60px 60px;animation-delay:.96s}
.cs-home .cs-frame figcaption{opacity:0;animation:cs-fade .7s var(--ease-out) 1.25s forwards}
}
@keyframes cs-up{to{opacity:1;transform:none}}
@keyframes cs-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cs-shot{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cs-phone{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes cs-lock{from{opacity:0;translate:var(--from)}60%{opacity:1}to{opacity:1;translate:0 0}}

/* Industries: a band of big type that slides as you scroll. */
.cs-marquee{background:var(--ink);color:var(--night-ink);overflow:hidden;padding:26px 0;border-block:1px solid var(--ink)}
.cs-marquee-track{display:flex;width:max-content;transform:translate3d(var(--marquee-x,0px),0,0);will-change:transform}
body.agency-page .cs-marquee p{display:flex;margin:0;color:inherit}
.cs-marquee span{font-family:var(--heading);font-stretch:125%;font-weight:800;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1;letter-spacing:-.03em;padding-right:.75em;display:inline-flex;align-items:center;gap:.75em;white-space:nowrap}
.cs-marquee span::after{content:'';width:.42em;height:.42em;border-top:.12em solid var(--signal);border-left:.12em solid var(--signal)}

/* How it works: a line fills as you scroll and each step lights up when reached. */
.process .section-intro{margin-bottom:56px}
.cs-steps{position:relative}
.cs-steps-track{position:absolute;left:0;right:0;top:27px;height:2px;background:var(--line)}
.cs-steps-track i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--steps,1))}
.process-grid{gap:48px}
.process-grid li{border-top:0;padding-top:0;position:relative}
.process-number{width:56px;height:56px;border-radius:0;border:0;background:var(--paper);color:var(--ink);font-family:var(--heading);font-stretch:125%;font-weight:800;font-size:22px;margin-bottom:26px;position:relative;justify-content:flex-start;padding-left:16px}
.process-number::before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-top:4px solid var(--line);border-left:4px solid var(--line);transition:border-color .4s}
.process-grid h3{font-size:clamp(1.3rem,2vw,1.6rem);margin-bottom:12px}
.process-grid p{font-size:16px;line-height:1.65;max-width:34ch}
.cs-scroll .process-grid li{opacity:.45;transition:opacity .5s var(--ease-out)}
.cs-scroll .process-grid li.is-reached{opacity:1}
.process-grid .process-number::before{border-color:var(--accent)}
.cs-scroll .process-grid li:not(.is-reached) .process-number::before{border-color:var(--line)}

/* Work */
.cs-work,.work-section{background:var(--night);color:var(--night-ink);border:0}
body.agency-page .cs-work h2,body.agency-page .cs-work h3{color:var(--night-ink)}
body.agency-page .cs-work p{color:var(--night-muted)}
.cs-work .button-outline{color:var(--night-ink);border-color:var(--night-ink)}
.cs-work .button-outline:hover{background:var(--night-ink);color:var(--night)}
.work-grid{gap:28px}
.cs-home .work-grid{grid-template-columns:1fr 1fr}
.cs-home .work-grid>.work-card:first-child{grid-column:1/-1}
.cs-home .work-grid>.work-card:first-child .live-site-shot>img{aspect-ratio:21/9}
.work-card{transition:none}
.work-card:hover{transform:none}
.project-stage,.project-0,.project-1,.project-2,.project-live{position:relative;background:var(--soft);border:0;border-radius:4px;min-height:0;padding:0;overflow:hidden;display:block}
.cs-work .project-stage{background:var(--night-2)}
.mini-site{border-radius:0;box-shadow:none;background:var(--panel);max-width:none;translate:0 var(--card-y,0px);scale:1.03;transition:scale .6s var(--ease-out)}
.work-card:hover .mini-site{scale:1.01}
.mini-top{display:none}
.mini-site:has(>img) .project-copy{display:none}
.mini-site>img,.live-site-shot>img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.live-site-shot{height:auto}
.project-copy{padding:28px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--panel)}
.project-copy>span{font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted)}
body.agency-page .project-copy h3{font-size:28px;color:var(--ink)}
body.agency-page .project-copy p{font-size:14px;color:var(--muted)}
.project-1 .project-copy,.project-2 .project-copy{color:var(--ink)}
.project-1 .mini-site,.project-2 .mini-site,.project-live .mini-site{background:var(--panel)}
.project-badge{left:14px;right:auto;top:14px;bottom:auto;font-size:11px;font-weight:700;letter-spacing:.06em;background:var(--signal);color:var(--ink);padding:6px 10px;border-radius:3px}
.project-live .project-badge{background:var(--accent);color:#fff}
.work-info{padding-top:18px}
.work-info h3{font-size:22px;margin-bottom:2px}
.work-info p{font-size:14px}
.work-info>svg{color:var(--accent);transition:transform .25s var(--ease-out)}
.cs-work .work-info>svg{color:var(--signal)}
.work-card:hover .work-info>svg{transform:translateX(4px)}
.work-card:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* Services: a plain list, not a wall of cards. */
.service-grid{grid-template-columns:repeat(2,1fr);gap:0 56px;border-top:2px solid var(--ink)}
.service.panel{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:28px 0;display:grid;grid-template-columns:48px 1fr;column-gap:18px}
.service:hover{background:transparent;border-color:var(--ink)}
.service-icon{grid-row:span 3;width:48px;height:48px;border-radius:0;background:transparent;border:0;border-top:3px solid var(--accent);border-left:3px solid var(--accent);color:var(--accent);margin:0}
.service h3{font-size:21px;margin-bottom:8px}
.service p{font-size:16px;line-height:1.6;min-height:0;margin-bottom:12px}
.service .text-link{font-size:14px}

/* Panels, pricing, notices */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.discussed-pricing{position:relative;padding:48px;border:0;background:var(--panel);box-shadow:0 0 0 1px var(--line)}
.discussed-pricing h2{font-size:clamp(2rem,3.6vw,3rem)}
.discussed-pricing-quote{border-left:1px solid var(--line)}
.discussed-pricing-label{color:var(--muted);font-weight:600}
.discussed-pricing-quote strong{font-family:var(--heading);font-stretch:118%;font-weight:800;font-size:clamp(2.2rem,4vw,3.2rem);color:var(--ink)}
.discussed-pricing-quote small{font-size:13px}
.discussed-pricing::before,.discussed-pricing::after{content:'';position:absolute;width:28px;height:28px;pointer-events:none}
.discussed-pricing::before{top:-8px;left:-8px;border-top:5px solid var(--signal);border-left:5px solid var(--signal)}
.discussed-pricing::after{bottom:-8px;right:-8px;border-bottom:5px solid var(--signal);border-right:5px solid var(--signal)}
.pricing-note{font-size:14px;max-width:72ch;margin:28px auto 0}
.pricing-explainer{padding:48px}
.pricing-explainer h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.three-columns h3{font-size:19px}
.three-columns p,.maintenance-grid p{font-size:15px}
.maintenance-grid strong{color:var(--ink)}
.notice{background:#eef1ff;border:1px solid #c9d2ff;color:var(--ink);font-size:14px;border-radius:var(--radius)}
.notice.error,[role=alert]{color:#b42318}
.danger{color:#b42318}
.check-list li{font-size:15px}
.check-list svg{color:var(--accent)}
.tag-list span,.status-badge{background:var(--soft);color:var(--ink);border-color:var(--line);font-size:13px}
.review-stars{color:var(--accent)}

/* Reviews and FAQ */
.testimonial-empty{border-color:var(--line)}
.quote-mark{color:var(--accent)}
.testimonial-grid blockquote{font-size:18px;color:var(--ink)}
.faq-section{grid-template-columns:.75fr 1.25fr;gap:80px}
.faq-section h2{margin-bottom:18px}
.faq-list{border-top:2px solid var(--ink)}
summary{font-size:18px;font-weight:600;padding:24px 0;color:var(--ink)}
summary>span{color:var(--accent);font-size:26px;transition:transform .3s var(--ease-out)}
details>p{font-size:16px;line-height:1.7}
.faq-page summary{font-size:19px}
.faq-page details>p{font-size:16px}

/* Final CTA */
.final-cta{position:relative;background:var(--accent);color:#fff;border-radius:var(--radius);padding:72px;margin-top:40px;margin-bottom:112px;overflow:hidden;width:calc(min(1280px,100%) - 128px)}
body.agency-page .final-cta h2{color:#fff;font-size:clamp(2.2rem,5vw,4.2rem);font-stretch:118%}
body.agency-page .final-cta p:not(.eyebrow){color:#dfe5ff;font-size:17px}
.final-cta .button{background:#fff;border-color:#fff;color:var(--accent)}
.final-cta .button:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.final-cta .button-outline{background:transparent;color:#fff;border-color:#fff}
.final-cta .button-outline:hover{background:#fff;color:var(--accent);border-color:#fff}
.cta-actions small{color:#dfe5ff;font-size:13px}
.final-cta::after{content:'';position:absolute;right:28px;top:28px;width:56px;height:56px;border-top:8px solid var(--signal);border-right:8px solid var(--signal)}
.consultation-band{background:var(--ink);border:0}
body.agency-page .consultation-band h2{color:#fff}

/* Footer */
.site-footer{border-top:2px solid var(--ink);padding-top:64px}
.footer-top p,.footer-top>div>a:not(.brand){font-size:15px}
.footer-top h3{font-size:15px;font-stretch:100%;letter-spacing:0}
.footer-top>div>a:hover{color:var(--accent)}
.footer-meta{font-size:13px}

/* Inner pages */
.page-hero{background:none;padding-top:80px;padding-bottom:48px}
.page-hero h1{font-size:clamp(2.6rem,6vw,5rem);font-stretch:118%}
.page-hero>p:not(.eyebrow){font-size:18px;max-width:52ch}
.portfolio-filters{margin:36px 0 32px}
.filter-button{border-color:var(--line);color:var(--ink);background:var(--panel);font-size:14px;border-radius:999px}
.filter-button:hover{border-color:var(--ink)}
.filter-button.selected{background:var(--ink);border-color:var(--ink);color:#fff}
.portfolio-section .work-grid{row-gap:56px}
body.agency-page .about-statement{background:var(--ink);color:#fff;border:0;border-radius:var(--radius);font-family:var(--heading);font-stretch:118%;font-weight:750;line-height:1.08}
.about-statement b{color:var(--signal);font-weight:750}
.about-layout p,.service-detail p,.contact-layout p,.case-description p,.legal-content p{font-size:17px}
.about-layout h2,.service-detail h2{font-size:clamp(1.8rem,3vw,2.5rem)}
.case-preview{background:var(--night);border:0;border-radius:var(--radius)}
.case-site{background:#f4f1e8}
.case-site:has(>img){padding:0}
.case-site:has(>img)>:not(img){display:none}
.case-site:has(>img) img{width:100%;margin:0;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top}
.case-preview:not(.case-preview-live){padding:40px}
.case-preview:not(.case-preview-live) .case-browser{max-width:none}
.case-preview:not(.case-preview-live) .case-phone{display:none}
.case-phone{border-color:var(--ink)}
.case-description h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.case-description h3{font-size:20px}
.project-live-action p{font-size:14px}
.contact-layout h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.legal-content h2{font-size:26px}

/* Forms */
.form-aside h2{font-size:clamp(1.8rem,3vw,2.5rem)}
.form-aside p,.form-aside ol{font-size:16px}
.form-panel{padding:36px;box-shadow:0 30px 60px -40px rgba(16,20,42,.35)}
.form-progress{font-size:14px}
.form-progress i{background:var(--accent)}
legend{font-family:var(--heading);font-stretch:112%;font-size:26px;font-weight:750;color:var(--ink)}
label,.field,.field-label{font-size:15px;color:var(--ink)}
input,select,textarea{background:#fff;color:var(--ink);border:1px solid #b9bfcc;border-radius:var(--radius);font-size:16px;min-height:50px}
input:hover,select:hover,textarea:hover{border-color:var(--ink)}
input::placeholder,textarea::placeholder{color:#7a8194}
.feature-options label{background:#fff;border-color:#b9bfcc;font-size:14px}
.feature-options label:has(input:checked){border-color:var(--accent);background:#eef1ff}
.consent,.check-field{font-size:14px}
.form-note{font-size:14px}
.receipt-code{border-color:var(--accent);color:var(--accent)}
.review-row p{color:var(--ink)}

/* Website helper */
.assistant-toggle{background:var(--ink);border-color:var(--ink);color:#fff;font:600 15px var(--font);box-shadow:0 14px 30px -12px rgba(16,20,42,.5)}
.assistant-toggle:hover{background:var(--accent);border-color:var(--accent)}
.assistant-panel{background:#fff;border-color:var(--line);box-shadow:0 30px 70px -20px rgba(16,20,42,.45)}
.assistant-message{background:var(--soft);border-color:var(--line);color:var(--ink)}
.assistant-message.visitor,.assistant-message.user{background:#e3e8ff;border-color:#c9d2ff}
.assistant-header button,.assistant-form button{background:var(--accent);color:#fff;border-color:var(--accent)}
.assistant-header button{background:var(--soft);color:var(--ink);border-color:var(--line)}
.assistant-actions a,.assistant-choices button,.assistant-actions button{background:#fff;color:var(--ink);border-color:var(--line)}

/* Responsive */
@media (max-width:1050px){
  .cs-hero{gap:32px}
  .cs-frame{padding:28px 36px 66px 28px}
  .service-grid{gap:0 36px}
  .final-cta{padding:56px;width:calc(100% - 80px)}
}
@media (max-width:800px){
  body.agency-page{font-size:16px}
  .site-header{padding-top:12px;padding-bottom:12px;gap:10px}
  .header-cta{order:2;margin-left:auto}
  .menu-toggle{order:3;margin-left:0}
  .desktop-nav{font-size:17px}
  .desktop-nav a::after{display:none}
  .section{padding-top:80px;padding-bottom:80px}
  .cs-head,.section-intro{grid-template-columns:1fr;gap:16px;margin-bottom:36px}
  .cs-hero{grid-template-columns:1fr;min-height:0;padding-top:40px;padding-bottom:64px;gap:20px}
  .cs-hero-copy{padding-top:0}
  .cs-frame{margin-top:24px}
  .cs-hero-title{font-size:clamp(2.6rem,10.5vw,4.2rem)}
  .cs-frame{padding:22px 30px 64px 22px;max-width:620px}
  .cs-corner{width:32px;height:32px}
  .cs-tl,.cs-bl{left:calc(8px - var(--spread,0px))}.cs-tr,.cs-br{right:calc(18px - var(--spread,0px))}
  .cs-tl,.cs-tr{top:calc(8px - var(--spread,0px))}.cs-bl,.cs-br{bottom:calc(52px - var(--spread,0px))}
  .cs-tl,.cs-tr,.cs-bl,.cs-br{border-width:0}
  .cs-tl{border-top-width:5px;border-left-width:5px}.cs-tr{border-top-width:5px;border-right-width:5px}.cs-bl{border-bottom-width:5px;border-left-width:5px}.cs-br{border-bottom-width:5px;border-right-width:5px}
  .cs-frame figcaption{left:22px;right:30px}
  .cs-steps-track{left:27px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .cs-steps-track i{width:100%;height:100%;transform-origin:top;transform:scaleY(var(--steps,1))}
  .process-grid{grid-template-columns:1fr;gap:40px}
  .process-grid li{display:grid;grid-template-columns:56px 1fr;gap:0 20px}
  .process-number{grid-row:span 2;margin:0}
  .process-grid h3{margin:12px 0 8px}
  .cs-home .work-grid{grid-template-columns:1fr}
  .cs-home .work-grid>.work-card:first-child .live-site-shot>img{aspect-ratio:16/10}
  .service-grid{grid-template-columns:1fr}
  .faq-section{grid-template-columns:1fr;gap:28px}
  .discussed-pricing{padding:30px}
  .final-cta{padding:44px 28px;margin-bottom:80px;width:calc(100% - 56px)}
  .final-cta::after{width:36px;height:36px;right:18px;top:18px;border-width:6px}
  .pricing-explainer{padding:30px}
  .form-panel{padding:24px}
}
@media (max-width:420px){
  .cs-hero-title{font-size:2.55rem;letter-spacing:-.03em}
  .cs-lede{font-size:16px}
  .cs-hero .hero-actions .button{width:100%}
  .cs-frame{padding:18px 24px 70px 18px}
  .cs-phone{width:30%;border-width:4px;border-radius:11px}
  .header-cta{font-size:12px;padding:9px 12px}
  .cs-marquee{padding:18px 0}
  .final-cta h2{font-size:2.1rem}
}
@media (prefers-reduced-motion:reduce){
  .cs-scroll .process-grid li{opacity:1}
  .mini-site{translate:none;scale:1}
}
@media print{.cs-marquee,.cs-corner{display:none}.final-cta{background:none;color:#111}}
@media (max-width:420px){.cs-hero .hero-actions .button{font-size:15px;padding:14px 20px}}