/* Shared typography: seven text roles and one scale for highlighted numbers. */
:root{
 --type-hero:72px;--type-section:58px;--type-subheading:24px;
 --type-intro:18px;--type-body:16px;--type-ui:14px;--type-small:12px;
 --type-number:38px;
}
body{font-family:Inter,Arial,sans-serif;font-size:var(--type-body)}
.copy h1{font-size:var(--type-hero);line-height:1.02}
.services-copy h2,.effects-copy h2,.pricing-copy h2,.upload-copy h2,.faq-copy h2,.process-copy h2{
 font-size:var(--type-section);font-weight:400;line-height:1.06;letter-spacing:-.05em;
}
.service-row h3,.faq-item summary,.pricing-plan h3,.pricing-benefits h3,
.conversion-steps h3,.process-steps h3,.upload-benefits h3,.upload-panel>h3,
.footer-contact h3,.legal-dialog h2,.pricing-help h3{
 font-size:var(--type-subheading);line-height:1.3;
}
.lead,.services-intro,.effects-copy>p:not(.section-eyebrow),.upload-copy .upload-intro,
.faq-copy>p:last-child,.pricing-copy>p:last-child,.process-copy>p:not(.section-eyebrow){
 font-size:var(--type-intro);line-height:1.55;
}
.service-row p,.faq-answer p,.pricing-plan li,.pricing-description,.pricing-benefits p,
.conversion-steps p,.process-steps>li>p,.upload-benefits p,
.upload-panel>p:not(.upload-status),.footer-brand p,.legal-dialog-content p,
.pricing-help p,.contact-step input{
 font-size:var(--type-body);line-height:1.6;
}
.all-services,.header nav a,.button,.header-cta,.contact-step .button,.footer .button,
.pricing-help .button,.watch,.photo-label,.effects-tag,.pricing-photo-label,
.footer .footer-column,.footer-email,.contact-step label,.upload-preview button,
.effects-controls,.service-number,.faq-number{
 font-size:var(--type-ui);
}
.eyebrow,.section-eyebrow,.effects-copy .section-eyebrow,.effects-toolbar p,
.footer-column h3,.footer-bottom,.footer-legal,.pricing-note,.upload-status,
.upload-preview figcaption,.contact-step .contact-hint,.contact-step h4,
.legal-eyebrow,.legal-date,.process-upload-card strong,.process-upload-card>span:last-child,
.process-screen-before,.process-screen-after{
 font-size:var(--type-small);line-height:1.5;
}
.pricing-price{font-size:var(--type-body)}
.pricing-price strong,.pricing-benefits>div>span,.conversion-steps li>span,.process-step-number{
 font-size:var(--type-number);line-height:1;
}
@media(max-width:800px){:root{--type-hero:64px;--type-section:48px}}
@media(max-width:480px){:root{--type-hero:48px;--type-section:38px;--type-subheading:20px}}

.upload-dropzone strong{font-size:var(--type-subheading);font-weight:500;line-height:1.3}
.dropzone-instruction{font-size:var(--type-intro)}
.dropzone-formats,.quote-details input,.quote-details select,.quote-details textarea{font-size:var(--type-body)}
.quote-privacy{font-size:var(--type-ui)}
#message-count{font-size:var(--type-small)}

.header nav a{font-size:16px}
@media(max-width:800px){
 .menu-toggle.mobile-floating-toggle{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:101;display:grid;width:48px;height:48px;background:#0d1113;border:1px solid #ffffff70;box-shadow:0 4px 20px #0005}
 .mobile-floating-toggle[hidden]{display:none}
 #navigation.mobile-floating-nav{display:none;position:fixed;z-index:100;top:calc(max(16px,env(safe-area-inset-top)) + 60px);left:16px;right:16px;max-height:calc(100dvh - 100px);overflow-y:auto;background:#0d1113;padding:12px;border:1px solid #ffffff30;box-shadow:0 8px 28px #0007}
 #navigation.mobile-floating-nav.is-open{display:flex;flex-direction:column}
 #navigation.mobile-floating-nav a{font-size:18px;display:flex;align-items:center;min-height:52px;padding:12px 16px}
 .mobile-floating-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
 .mobile-floating-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
}

/* Compact phone hero; content can grow on short screens. */
@media(max-width:800px){
 .hero{height:auto;min-height:80svh;display:flex;flex-direction:column}
 .hero .header{padding-top:20px;min-height:64px;flex-shrink:0}
 .hero-content{height:auto;flex:1;align-items:flex-start;padding-top:32px;padding-bottom:148px}
 .hero .copy{width:100%;max-width:530px}
 .hero .eyebrow{margin-bottom:16px;letter-spacing:.12em;line-height:1.5}
 .hero .copy h1{font-size:48px;margin-bottom:18px;line-height:1.04}
 .hero .lead{max-width:360px;font-size:16px;line-height:1.5;margin-bottom:24px}
 .hero .desktop-break{display:none}
 .hero .actions{flex-direction:row;align-items:stretch;gap:10px;flex-wrap:wrap}
 .hero .actions .button,.hero .watch{min-height:48px;font-size:12px}
 .hero .actions .button{padding:12px 14px;gap:8px}
 .hero .watch{gap:0}.hero .play{width:36px;height:46px;flex-shrink:0}
 .hero .watch-text{padding:0 10px;display:flex;align-items:center}
 .hero .photo{object-position:66% 38%}
 .hero .photo-shade{background:linear-gradient(180deg,#0006 0%,#000a 18%,#0009 58%,#0002 82%,#0003 100%)}
 .hero .handle{top:auto;bottom:54px;transform:translate(-50%,0);width:48px;height:48px}
 .hero .photo-label{bottom:20px;padding:6px 12px}
}
@media(max-width:380px){
 .hero .copy h1{font-size:40px}
 .hero .actions{flex-direction:column;align-items:stretch;max-width:280px}
 .hero .watch{justify-content:center}.hero .play{border-right:0}
 .hero-content{padding-top:24px;padding-bottom:140px}
}
@media(max-width:800px) and (max-height:600px){
 .hero-content{padding-top:20px;padding-bottom:132px}
}

/* Keep the face clear and place the offer at the bottom of the phone hero. */
@media(max-width:800px){
 .hero-content{align-items:flex-end;padding-top:140px;padding-bottom:96px}
 .hero .photo{object-position:66% 22%}
 .hero .photo-shade{background:linear-gradient(180deg,#0003 0%,transparent 24%,#0003 42%,#000b 65%,#000c 90%,#0006 100%)}
 .hero .handle{bottom:20px}
}
@media(max-width:380px){.hero-content{padding-top:120px;padding-bottom:96px}}
@media(max-width:800px) and (max-height:600px){.hero-content{padding-top:100px;padding-bottom:96px}}

/* Smaller phone copy block, leaving more of the photograph visible. */
@media(max-width:480px){
 .hero .copy h1{font-size:36px;line-height:1.04;margin-bottom:12px}
 .hero .eyebrow{font-size:10px;letter-spacing:.08em;margin-bottom:10px}
 .hero .lead{font-size:14px;line-height:1.45;margin-bottom:16px;max-width:350px}
 .hero .actions{flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:8px;max-width:none}
 .hero .actions .button,.hero .watch{flex:1;min-width:0;min-height:48px;font-size:11px}
 .hero .actions .button{padding:10px 8px;gap:6px}
 .hero .watch{justify-content:center}.hero .play{width:26px;height:46px;border:0}
 .hero .play svg{width:16px}.hero .watch-text{padding:0 6px 0 0}
 .hero .actions .ui-icon{width:18px;height:18px}
}
@media(max-width:350px){.hero .copy h1{font-size:32px}.hero .actions .button,.hero .watch{font-size:10px}}

@media(max-width:480px){
 .hero .actions{gap:8px}
 .hero .actions .button,.hero .watch{flex:0 1 auto;min-height:44px;font-size:10px}
 .hero .actions .button{padding:8px 12px;gap:6px}
 .hero .play{width:24px;height:42px}
 .hero .watch-text{padding:0 10px 0 0}
 .hero .actions .ui-icon{width:16px;height:16px}
}

/* Further two-pixel reduction requested for phone hero typography. */
@media(max-width:480px){
 .hero .copy h1{font-size:34px}
 .hero .eyebrow{font-size:8px}
 .hero .lead{font-size:12px}
 .hero .actions .button,.hero .watch{font-size:8px}
}
@media(max-width:350px){.hero .copy h1{font-size:30px}}

@media(max-width:800px){
 .hero-content{padding-bottom:76px}
 .hero .photo-label{display:none}
}
@media(max-width:800px){.hero .handle{bottom:12px}}

@media(max-width:800px){
 .hero .handle{width:36px;height:36px}
 .hero .handle svg{width:21px;height:18px}
}

.hero-side-arrow{display:none}
@media(max-width:800px){
 .hero .handle{display:none}
 .hero-content{padding-bottom:20px}
 .hero-side-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;display:grid;place-items:center;width:44px;height:48px;padding:8px;border:0;border-radius:50%;background:#0d111345;color:#ffffffcc;cursor:pointer}
 .hero-side-left{left:8px}.hero-side-right{right:8px}
 .hero-side-arrow svg{width:24px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .hero-side-arrow:hover,.hero-side-arrow:focus-visible{color:#fff}
 .hero-side-arrow:focus-visible{outline:1px solid var(--accent);outline-offset:-3px}
 .hero .photo-shade{background:linear-gradient(180deg,#0003 0%,transparent 24%,#0002 45%,#000a 72%,#000d 100%)}
}

@media(max-width:800px){
 .hero .divider .hero-side-arrow{pointer-events:auto;background:transparent;border-radius:0;width:36px;height:48px;padding:6px;top:50%;color:#ffffffb3}
 .hero .divider .hero-side-left{left:auto;right:5px}
 .hero .divider .hero-side-right{left:5px;right:auto}
 .hero .divider .hero-side-arrow svg{width:20px;height:24px;stroke-width:1.8;filter:drop-shadow(0 1px 3px #0009)}
}

@media(max-width:800px){
 .hero-content{padding-bottom:40px}
 .hero .divider .hero-side-arrow svg{stroke-width:2.6}
}

@media(max-width:800px){
 .hero .divider .hero-side-arrow svg{width:24px;height:28.8px}
}

/* Phone-only lower fade for readable hero copy. */
@media(max-width:800px){
 .hero .photo-shade{background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 18%,rgba(0,0,0,.18) 34%,transparent 48%)}
}

@media(max-width:800px){
 .hero .photo-shade{background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 24%,rgba(0,0,0,.48) 45%,transparent 65%)}
}