/* Roxxie Creative — October 2026 editorial refresh */
:root { --muted:#5f6074; --teal-700:#126b7c; }
[hidden] { display:none!important; }
section[id] { scroll-margin-top:110px; }
.skip-link { position:fixed;top:-100px;left:1rem;z-index:100;background:#fff;padding:1rem; }
.skip-link:focus { top:1rem; }
.btn { font-size:.76rem;font-weight:600;min-height:48px;letter-spacing:.08em;justify-content:center; }
.btn-primary { background:#1a40a6;color:#fff; }
.btn:hover { color:#fff;box-shadow:none;filter:brightness(1.1); }
.btn-ghost:hover { color:var(--indigo); }
.btn-light { background:var(--mist);color:var(--indigo); }
.btn-light:hover { color:var(--indigo); }
.lead { font-size:1rem;font-weight:400; }
.reveal { opacity:1;transform:none;transition:none; }
.hero-gradient { animation:none;background:linear-gradient(115deg,#263e8e,#6a5fbd); }
.hero-photo { cursor:auto;min-height:580px; }
.hero-photo .hero-bg,.hero-photo .wrap h1 .glow-text,.hero-photo .wrap h1 .accent,.hero-photo .wrap .hero-divider,.hero-photo .wrap .lead,.hero-photo .wrap .hero-actions { animation:none;opacity:1;transform:none; }
.hero-photo .wrap h1 .glow-text { color:#fff;-webkit-text-stroke:0;text-shadow:none; }
.hero-photo::before { background:linear-gradient(90deg,rgba(16,18,52,.8),rgba(16,18,52,.38)); }
.hero-photo .lead { font-size:1.05rem;max-width:43ch; }
.hero-secondary { color:white;border:1px solid rgba(255,255,255,.65); }
.hero-photo > .wrap { padding-top:5rem;padding-bottom:5rem; }
.hero-photo h1 { font-size:clamp(3.2rem,7vw,6rem); }
.statement { padding:4rem 0; }
.statement-h { max-width:23ch;margin-left:auto;margin-right:auto; }
.feature-card p,.why-d,.svc-wrap .card p:not(.card-kicker) { font-size:.95rem;line-height:1.65; }
.feature-card .tag { color:#9adfe9; }
.feature-grid.below .feature-card .tag { color:#123b4c;background:#d6f0f1; }
.compact-hero { padding:3rem 0; }
.compact-hero .lead { max-width:65ch; }
.services-intro { padding:clamp(3rem,6vw,6rem) 0;background:radial-gradient(ellipse at 10% 0%,#eee8fa,transparent 55%),var(--mist); }
.services-intro-grid { display:grid;grid-template-columns:1.15fr 1fr;gap:4rem;align-items:center; }
.services-intro h1 { font-size:clamp(2.9rem,5vw,4.7rem);max-width:15ch;color:#21366c; }
.intro-copy { font-size:1.15rem;max-width:43ch;line-height:1.65; }
.services-intro-grid > div > p:not(.eyebrow) { color:var(--muted); }
.services-intro .btn { margin-top:1rem; }
.service-feature { margin:0;transform:none; }
.service-feature img { aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:100px 12px 12px 12px; }
.service-feature figcaption { display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;margin-top:1rem; }
.service-feature figcaption span { color:var(--muted); }
.service-feature a { font-weight:600; }
.service-jump { display:grid;grid-template-columns:repeat(3,1fr);padding-top:1.5rem;padding-bottom:1.5rem;gap:1.5rem; }
.service-jump a { font-size:.88rem;color:var(--ink);padding:.8rem 0;display:flex;align-items:center;gap:.8rem; }
.service-jump span { font-size:.75rem;color:var(--teal-700); }
.service-section { padding:clamp(3.5rem,7vw,6.5rem) 0;border-top:1px solid var(--line); }
.service-layout { display:grid;grid-template-columns:.9fr 1.25fr;gap:5rem; }
.service-heading h2 { font-size:clamp(2.8rem,5vw,4rem); }
.service-heading p:not(.eyebrow) { max-width:30ch;color:var(--muted); }
.text-link { display:inline-block;border-bottom:1px solid currentColor;padding-bottom:.25rem;font-size:.9rem;font-weight:500; }
.service-summary { font-size:1.13rem;line-height:1.7;margin-bottom:2rem; }
.offering { border-top:1px solid #d8d5dc;padding:1.4rem 0; }
.offering h3 { font-size:1.1rem; }
.offering p { color:var(--muted);font-size:1rem;margin-bottom:0; }
.scope-note { font-size:.9rem;line-height:1.7;color:var(--muted);margin:1.5rem 0; }
.marketing-section { background:#202e67;color:#fff;border:0; }
.marketing-section h2,.marketing-section h3 { color:#fff; }
.marketing-section .eyebrow,.marketing-section .text-link { color:#a8e1e7; }
.marketing-section .service-heading p:not(.eyebrow),.marketing-section .scope-note { color:#d2d7e6; }
.service-list { padding-left:1.2rem;margin-bottom:2.5rem; }
.service-list li { padding:.35rem 0; }
.focus-tags { display:flex;gap:.6rem;flex-wrap:wrap; }
.focus-tags span { border:1px solid #697398;border-radius:30px;padding:.5rem .85rem;font-size:.9rem; }
.section-top { display:flex;justify-content:space-between;align-items:center;gap:2rem;margin-bottom:2rem; }
.section-top > p { max-width:36ch;color:var(--muted); }
.project-services { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem; }
.project-services article { background:#efeafa;border-radius:16px;padding:2rem; }
.project-services article:last-child { background:#e6efee; }
.service-number { display:block;font-family:var(--display);font-size:2rem;margin-bottom:1.5rem;color:var(--teal-700); }
.project-services h3 { font-size:1.4rem; }
.project-services p { color:var(--muted); }
.process-section { padding:4rem 0;background:#f0ece3; }
.process-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem; }
.process-section h2 { margin-bottom:2.5rem; }
.process-grid span { color:var(--teal-700);font-size:.85rem;display:block;margin-bottom:1rem; }
.process-grid p { color:var(--muted);font-size:1rem; }
.faq-layout { display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem; }
.faq-item .faq-a { font-size:1rem; }
.project-hero { padding:2.5rem 0 1rem; }
.project-header-grid { align-items:center;gap:2rem; }
.project-cats { flex-direction:row;flex-wrap:wrap;margin:.8rem 0 0;gap:.4rem 1rem; }
.project-cats li { color:var(--teal-700); }
.project-header-right .lead { font-size:1.2rem; }
.project-hero + .section-tight { padding-top:1.5rem;padding-bottom:2rem; }
.gallery-main { order:-1; }
.gallery-main > img { max-height:700px;object-fit:contain;background:#ebe9e6; }
.gallery-thumb:focus-visible { outline:3px solid var(--indigo);outline-offset:2px;opacity:1; }
.case-details h2 { font-family:var(--body);font-size:1.2rem;font-weight:600; }
.logo-question { border:0;padding:0;margin:0 0 1.2rem;min-width:0; }
.logo-question legend { font-size:.92rem;font-weight:600;margin-bottom:.5rem; }
.optional { font-weight:400;color:var(--muted);font-size:.85rem; }
@media(max-width:760px) {
 .services-intro-grid,.service-layout,.faq-layout,.project-header-grid { grid-template-columns:1fr;gap:2rem; }
 .services-intro h1 { font-size:3.1rem; }
 .service-feature { transform:none; }
 .service-feature img { aspect-ratio:4/3;border-radius:60px 10px 10px 10px; }
 .service-jump { grid-template-columns:1fr;gap:0;padding-top:.8rem;padding-bottom:.8rem; }
 .service-jump a { border-bottom:1px solid var(--line); }
 .service-jump a:last-child { border:0; }
 .service-heading h2 br { display:none; }
 .service-heading h2 { font-size:2.8rem; }
 .section-top { display:block; }
 .project-services,.process-grid { grid-template-columns:1fr;gap:1.5rem; }
 .project-services article { padding:1.5rem; }
 .hero-photo { min-height:520px; }
 .hero-photo > .wrap { padding-top:3.5rem;padding-bottom:3.5rem; }
 .hero-photo h1 { font-size:clamp(2.8rem,12vw,4rem); }
 .hero-photo .lead { font-size:1rem; }
 .project-header-right .lead { margin:0; }
 .project-header-left h1 { font-size:2.6rem; }
 .project-hero { padding-top:1.5rem; }
 .project-cats li { font-size:.65rem; }
 .gallery-thumb { height:52px; }
 .process-grid > div + div { border-top:1px solid #d8d5dc;padding-top:1.5rem; }
 .hero-actions { gap:.6rem; }
 .hero-actions .btn { padding:.8rem 1rem; }
}

.nav-links a { color:var(--teal-700); }
.testimonial-card footer { color:var(--teal-700); }

/* Light portfolio transition and quiet project carousel */
.work-light { background:#f6f2eb; }
.work-light h2 { color:#20336b; }
.work-light .feature-card { background:#fff; }
.work-light .feature-card .feature-body { position:static;background:#fff;padding:1.4rem; }
.work-light .feature-card:hover .feature-body { background:#fff; }
.work-light .feature-card h3 { color:#20336b; }
.work-light .feature-card p { color:var(--muted); }
.work-light .feature-card .tag { color:var(--teal-700); }
.statement.statement-dark { background:#202e67;padding:clamp(4rem,7vw,6rem) 0; }
.statement.statement-dark .statement-h { color:#fff; }
.statement.statement-dark .statement-sub { color:#dbe0ef; }
.service-slides { position:relative;aspect-ratio:1/1;background:#e7e5e4;border-radius:100px 12px 12px 12px;overflow:hidden; }
.service-feature .service-slide { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;border-radius:0;opacity:0;transition:opacity .65s ease; }
.service-feature .service-slide.is-current { opacity:1; }
.carousel-controls { display:flex;align-items:center;gap:.7rem;margin-top:1rem; }
.carousel-controls button { min-height:44px;min-width:44px;border:1px solid #c6c5d1;border-radius:6px;background:transparent;color:#20336b;cursor:pointer;font:inherit; }
.carousel-controls .slide-pause { margin-left:auto;padding:0 .65rem;font-size:.75rem; }
.carousel-controls button:disabled { opacity:.55;cursor:default; }
.slide-count { font-size:.8rem; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@media(max-width:760px) { .service-slides { aspect-ratio:4/3;border-radius:60px 10px 10px 10px; } }
@media(prefers-reduced-motion:reduce) { .service-feature .service-slide { transition:none; } }

/* Luna portfolio device mockups — original artwork remains unchanged. */
.laptop-stage { padding:5% 7% 7%;background:linear-gradient(135deg,#eee8f7,#e1eeeb);border:0; }
.laptop-device { width:100%;filter:drop-shadow(0 18px 15px rgba(26,26,45,.18)); }
.laptop-screen { margin:0 5%;padding:2.2% 1.5% 1.5%;background:#262832;border:2px solid #737783;border-radius:14px 14px 3px 3px;position:relative; }
.laptop-screen::before { content:"";position:absolute;top:1.2%;left:50%;width:4px;height:4px;border-radius:50%;background:#999; }
.laptop-screen img,.feature-card .laptop-screen img { display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:0;max-height:none; }
.laptop-base { height:14px;background:linear-gradient(#dadde1,#9197a2);border-radius:2px 2px 50% 50%;position:relative; }
.laptop-base::before { content:"";position:absolute;left:40%;top:0;width:20%;height:5px;background:#a2a7b1;border-radius:0 0 10px 10px; }
.luna-card-mockup { aspect-ratio:4/3;display:flex;align-items:center;padding:7%;background:linear-gradient(135deg,#eee8f7,#e1eeeb);border-radius:16px; }
.feature-card:hover .laptop-screen img { transform:none; }
.feature-grid.below .feature-card .luna-card-mockup { order:1; }
.luna-social { background:#efeafa; }
.phone-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;max-width:760px;margin:3rem auto 0; }
.phone-project { margin:0;text-align:center; }
.phone-device { padding:12px 8px 14px;background:#232630;border:2px solid #858892;border-radius:38px;box-shadow:0 20px 35px #2d244426;max-width:310px;margin:auto; }
.phone-speaker { width:55px;height:6px;margin:0 auto 12px;border-radius:8px;background:#08090c; }
.phone-screen { background:#fff;border-radius:5px 5px 20px 20px;overflow:hidden;text-align:left;color:#23232b; }
.phone-screen img { width:100%;height:auto; }
.social-account { padding:12px 10px;font:600 11px var(--body);margin:0; }
.social-account span,.social-ui span { float:right; }
.social-ui { padding:8px 12px;font-size:23px;line-height:1; }
.phone-home { width:80px;height:4px;background:#ddd;border-radius:5px;margin:12px auto 0; }
.phone-project figcaption { margin-top:1.8rem; }
.phone-project h3 { font-size:1.05rem; }
@media(max-width:600px) { .phone-grid { grid-template-columns:1fr;gap:3rem; } .laptop-base { height:9px; } .laptop-screen { border-radius:8px 8px 2px 2px; } }