/*
Theme Name: Studio Packs — Mobile Stories
Theme URI: https://studiopacks.nl/
Description: Licht, speels Studio Packs child theme met product- en apppresentatie.
Author: Studio Packs
Template: studiopacks-premium
Version: 1.0.0
Text Domain: studiopacks-mobile-stories
*/
:root{--blue:#07539b;--ink:#111827;--muted:#667085;--cream:#fff8ee;--pink:#ffc7d9;--sky:#bde8ff;--lime:#d9f36a;--line:#dfe5e7;font-family:"DM Sans",Inter,system-ui,sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink)}a{color:inherit;text-decoration:none}.site-shell{overflow:hidden}.site-header{height:88px;padding:0 clamp(20px,5vw,78px);display:flex;align-items:center;gap:32px;position:absolute;z-index:20;width:100%;border-bottom:1px solid #1b25301f}.brand,.footer-brand{display:inline-flex;background:#fff;border-radius:16px;padding:5px 9px;line-height:0}.brand-logo{width:126px;height:67px;object-fit:contain}.nav-links{display:flex;gap:27px;margin-left:auto;font-size:11px;font-weight:700}.nav-links a{transition:.2s}.nav-links a:hover{color:var(--blue)}.nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:800;font-size:12px}.nav-cta{background:var(--blue);color:#fff;padding:15px 21px}.menu-toggle,.mobile-menu,.mobile-social-link{display:none}
.hero{min-height:100svh;padding:125px clamp(22px,6vw,94px) 55px;display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:center}.hero-copy{position:relative;z-index:2}.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:10px;font-weight:800;color:var(--blue)}h1,h2,h3{font-family:Manrope,"DM Sans",sans-serif;letter-spacing:-.055em}.hero h1{font-size:clamp(58px,7.4vw,116px);line-height:.86;margin:24px 0}.hero-copy>p{max-width:570px;color:var(--muted);font-size:16px;line-height:1.75}.hero-actions{display:flex;align-items:center;gap:15px;margin-top:30px}.hero-actions-mobile{display:none}.button{border:0;cursor:pointer;padding:17px 23px}.button.primary{background:var(--blue);color:#fff}.button.secondary{background:transparent;color:var(--ink);border:1px solid #9da8ae}.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:43px}.proof-grid span{border-top:1px solid #b8c2c7;padding-top:14px}.proof-grid b,.proof-grid em{display:block}.proof-grid b{font-size:12px}.proof-grid em{font-size:10px;color:var(--muted);font-style:normal;margin-top:3px}
.story-stage{height:min(680px,76vh);position:relative}.story-card{position:absolute;width:245px;height:360px;border-radius:30px;padding:25px;box-shadow:0 25px 55px #583b421e}.story-card small{text-transform:uppercase;letter-spacing:.15em;font-size:9px}.story-card b{font:800 30px/1 Manrope;display:block;margin-top:18px;letter-spacing:-.05em}.story-card--pink{background:var(--pink);left:1%;top:18%;transform:rotate(-12deg)}.story-card--blue{background:var(--sky);right:2%;top:7%;transform:rotate(9deg)}.phone-mockup{position:absolute;z-index:3;width:246px;height:510px;left:50%;top:17%;transform:translateX(-50%) rotate(-2deg);border:9px solid #101318;border-radius:44px;background:#111b2d;color:#fff;box-shadow:0 35px 75px #18364c36;padding:19px 15px;overflow:hidden}.phone-mockup:before{content:"";position:absolute;width:84px;height:22px;border-radius:0 0 14px 14px;background:#101318;top:0;left:50%;transform:translateX(-50%)}.phone-status{display:flex;justify-content:space-between;margin:11px 3px 24px;font-size:9px;font-weight:800}.app-heading small{font-size:10px;color:#9fb4c5}.app-heading strong{font:700 25px/1 Manrope;display:block;margin:7px 0 18px}.app-card{border-radius:18px;padding:15px;margin:10px 0;background:#e9f4ff;color:var(--ink)}.app-card--pink{background:var(--pink)}.app-card--lime{background:var(--lime)}.app-card b,.app-card span{display:block}.app-card b{font-size:13px}.app-card span{font-size:9px;margin-top:3px}.app-nav{position:absolute;left:14px;right:14px;bottom:14px;border-radius:16px;background:#070d18;height:48px;display:flex;align-items:center;justify-content:space-around;color:#fff;font-size:12px}
.section{padding:115px clamp(22px,6vw,94px)}.section-head{max-width:900px}.section-head h2,.service-band h2,.contact-copy h2{font-size:clamp(45px,6.4vw,91px);line-height:.94;margin:22px 0}.section-head>p,.contact-copy>p{max-width:700px;color:var(--muted);line-height:1.75}.intro-section{background:#fff}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:60px}.feature-card{min-height:270px;border-radius:28px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end}.feature-card:nth-child(1){background:var(--pink)}.feature-card:nth-child(2){background:var(--sky)}.feature-card:nth-child(3){background:var(--lime)}.feature-card:nth-child(4){background:#e8ddff}.feature-card h3{font-size:26px;line-height:1;margin:0 0 14px}.feature-card p,.service-list p,.package-card p,.add-on-grid p,.portfolio-item p{font-size:13px;line-height:1.65;color:#52606a}.service-band{background:var(--blue);color:#fff;display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw}.service-band .kicker{color:var(--lime)}.service-list{display:grid;gap:12px}.service-list article{border:1px solid #ffffff4d;border-radius:24px;padding:25px}.service-list b{font-size:20px}.service-list p{color:#d6e5ef;margin-bottom:0}
.packages{background:#f4f7f8}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:58px}.package-card{min-height:330px;border-radius:28px;background:#fff;padding:30px;display:flex;flex-direction:column}.package-card>span,.add-on-grid>article>span,.portfolio-item>span{text-transform:uppercase;letter-spacing:.14em;font-size:9px;font-weight:800;color:var(--blue)}.package-card h3{font-size:30px;line-height:1;margin:40px 0 10px}.package-card strong{font-size:24px;margin-top:auto}.package-card.featured{background:var(--blue);color:#fff;transform:translateY(-18px)}.package-card.featured span{color:var(--lime)}.package-card.featured p{color:#d7e6f0}.add-ons{background:#fff}.add-on-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:14px;margin-top:58px}.add-on-grid article{min-height:270px;border-radius:27px;padding:27px;background:#fff1f5;display:flex;flex-direction:column}.add-on-grid article:nth-child(2){background:#ecf7ff}.add-on-grid article:nth-child(3){background:#f0f7d1}.add-on-grid article:nth-child(4){background:#eee7ff}.add-on-grid b{font:700 25px/1.05 Manrope;margin-top:auto}.portfolio{background:var(--cream)}.portfolio-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:15px;margin-top:58px}.portfolio-item{min-height:330px;border-radius:29px;padding:30px;background:#ffe3c2;display:flex;flex-direction:column;justify-content:flex-end}.portfolio-item:first-child{background:var(--blue);color:#fff}.portfolio-item:first-child span{color:var(--lime)}.portfolio-item:first-child p{color:#d8e6ef}.portfolio-item:nth-child(2){background:var(--pink)}.portfolio-item:nth-child(3){background:var(--sky)}.portfolio-item h3{font-size:29px;line-height:1;margin:18px 0 8px}
.contact-section{background:#fff;display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw}.contact-points{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.contact-points span{background:#eef6fb;border-radius:999px;padding:10px 14px;font-size:10px;font-weight:700}.contact-form{background:#f2f6f7;border-radius:30px;padding:35px;display:grid;grid-template-columns:1fr 1fr;gap:19px}.contact-form label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #ced8dc;background:#fff;border-radius:14px;padding:14px;margin-top:7px;font:13px inherit;color:var(--ink)}.contact-form textarea,.contact-form .file-upload-label,.contact-form .form-message{grid-column:1/-1}.contact-form textarea{resize:vertical}.file-upload-label small,.file-error{display:block;margin-top:6px;color:var(--muted);text-transform:none;letter-spacing:0}.file-error{color:#b42318}.form-message{padding:13px;border-radius:12px;background:#e7f6e9}.form-message.error{background:#ffe4e4}.footer{padding:38px 6vw;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;font-size:11px}.footer-logo{width:120px;height:65px;object-fit:contain}
@media(max-width:900px){.nav-links{display:none}.menu-toggle{display:flex;margin-left:auto;width:42px;height:42px;border:0;background:#fff;border-radius:50%;flex-direction:column;align-items:center;justify-content:center;gap:4px}.menu-toggle span{width:17px;height:2px;background:var(--ink)}.mobile-menu{display:none;position:absolute;top:77px;left:18px;right:18px;background:#fff;border-radius:20px;padding:20px;box-shadow:0 20px 50px #18364c24}.mobile-menu.is-open{display:grid;gap:15px}.hero{grid-template-columns:1fr;padding-top:115px}.hero-copy{text-align:center}.hero-copy>p{margin-inline:auto}.hero-copy>.hero-actions{justify-content:center}.proof-grid{text-align:left}.story-stage{height:560px}.feature-grid{grid-template-columns:1fr 1fr}.service-band,.contact-section{grid-template-columns:1fr}.package-grid{grid-template-columns:1fr}.package-card.featured{transform:none}.add-on-grid,.portfolio-grid{grid-template-columns:1fr 1fr}.contact-form{grid-template-columns:1fr}.contact-form label{grid-column:1}.contact-form textarea,.contact-form .file-upload-label{grid-column:1}}
@media(max-width:600px){.site-header{height:76px;padding:0 18px}.brand-logo{width:102px;height:56px}.nav-cta{display:none}.hero{padding:110px 6vw 40px;min-height:auto}.hero h1{font-size:52px}.hero-copy>.hero-actions{display:none}.hero-actions-mobile{display:flex;justify-content:center;margin-top:18px}.proof-grid{grid-template-columns:1fr}.story-stage{height:460px}.story-card{width:180px;height:270px;padding:18px}.story-card b{font-size:22px}.phone-mockup{width:190px;height:400px;border-radius:36px;top:9%}.app-card{padding:11px;margin:7px 0}.feature-grid,.add-on-grid,.portfolio-grid{grid-template-columns:1fr}.feature-card{min-height:220px}.section{padding:82px 6vw}.section-head h2,.service-band h2,.contact-copy h2{font-size:45px}.contact-form{padding:22px}.footer{gap:20px;flex-direction:column;text-align:center}}