/* Spacious service chapters and a reference-led, immersive opening. */
.hero-shell{min-height:min(920px,calc(100svh - 20px));display:flex;flex-direction:column}
.hero-shell .header{flex-shrink:0}
.hero-shell .hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 0 48px}
.hero-shell h1{font-size:clamp(48px,5.7vw,78px)}
.hero-gallery{display:flex;align-items:flex-start;justify-content:center;gap:22px;width:100%;max-width:760px;margin:52px auto 18px;pointer-events:none;position:relative;isolation:isolate}
.hero-gallery::before{content:"";position:absolute;z-index:-1;left:7%;right:7%;bottom:-28px;height:48%;border:1px solid #ffffff32;border-bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,#ffffff0b,#ffffff00 72%)}
.hero-piece{width:28%;aspect-ratio:9/16;flex-shrink:0;filter:drop-shadow(0 18px 24px #003b6b25);overflow:hidden;border-radius:16px}
.hero-piece-web{position:relative;z-index:2;transform:translateY(-18px)}
.hero-piece-report{transform:rotate(-7deg) translateY(24px)}
.hero-piece-slide{transform:rotate(7deg) translateY(24px)}
.hero-gallery .sample-browser,.hero-gallery .sample-report,.hero-gallery .sample-slide{border:3px solid #fff;border-radius:16px;height:100%;box-sizing:border-box}
.hero-gallery .sample-browser{display:flex;flex-direction:column}
.hero-gallery .sample-site{padding:18px;min-height:0;flex:1}
.hero-gallery .sample-site strong{font-size:31px}
.hero-gallery .sample-report{padding:17px}
.hero-gallery .sample-report>strong{font-size:22px}
.hero-gallery .sample-report>p,.hero-gallery .sample-report>small,.hero-gallery .slide-pages,.hero-gallery .sample-slide>span{display:none}
.hero-gallery .sample-chart{height:120px;margin-top:20px}
.hero-gallery .sample-slide{padding:20px;min-height:0}
.hero-gallery .sample-slide strong{font-size:30px}
.hero-gallery .slide-star{font-size:72px;margin-top:28px}
.hero-gallery .sample-orb{width:100px;height:100px;right:-20px;bottom:0}
.hero-gallery-note{font-size:11px;letter-spacing:.3px;color:#fff;margin:18px 0 0}
.services.section{padding-bottom:20px}
.service-jump{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;margin:38px 0 70px}
.service-jump a{font-size:13px;text-decoration:none;border-bottom:1px solid #ccd3c8;padding:8px 0;color:#586452}
.service-jump a:hover{color:#0876b8;border-color:#0876b8}
.service-story{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(32px,5vw,76px);align-items:center;text-align:left;padding:64px 0;border-top:1px solid #e4e8e0;scroll-margin-top:32px}
.service-copy{min-width:0}
.service-copy .eyebrow{font-size:10px;letter-spacing:1.3px;margin-bottom:24px;color:#5c6757}
.service-copy h3{font-size:clamp(32px,3.5vw,47px);font-weight:400;letter-spacing:-1.9px;line-height:1.12;margin:0 0 24px}
.service-copy h3 em{font-family:Playfair,Georgia,serif;color:#747d70;font-weight:400}
.service-copy>p:not(.eyebrow){font-size:15px;line-height:1.75;color:#586452;max-width:440px}
.service-tags{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:24px 0;gap:8px}
.service-tags li{font-size:11px;background:#f2f3f0;border-radius:20px;padding:8px 12px}
.service-copy .story-price{font-size:13px!important;margin:28px 0 14px}
.service-copy .button{font-size:13px;letter-spacing:0;min-height:48px;margin-top:8px;gap:22px}
.service-copy .button>span{flex:0 0 28px}
.service-copy .website-package{max-width:440px;margin-bottom:12px}
.service-copy .website-package summary{border-bottom:1px solid #e4e8e0;padding-bottom:12px}
.service-visual{border-radius:24px;min-height:430px;padding:44px 34px 22px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative}
.service-visual>div{width:100%;max-width:440px;margin:auto}
.visual-web{background:#0876b8 url('/sky.svg') center/cover}
.visual-report{background:#f0f2ed}
.visual-presentation{background:#c6ff55}
.visual-system{background:#191d18}
.visual-caption{font-size:10px;line-height:1.5;text-align:center;letter-spacing:.2px;margin:25px 0 0;color:#586452}
.visual-web .visual-caption,.visual-system .visual-caption{color:#fff}
.sample-browser{background:#fff;border-radius:14px;overflow:hidden;color:#20382e;box-shadow:0 20px 40px #002e451c;transform:rotate(-3deg)}
.sample-toolbar{display:flex;align-items:center;gap:5px;padding:13px 16px;border-bottom:1px solid #e3e8e0;font-size:8px;letter-spacing:.4px}
.sample-toolbar>span:not(:last-child){width:5px;height:5px;background:#b9c5c4;border-radius:50%}
.sample-toolbar>b{font-weight:500;margin-left:auto}
.sample-site{background:#e6f5ff;min-height:300px;padding:34px;position:relative;overflow:hidden}
.sample-site small,.sample-slide small,.sample-flow>small{font-size:8px;letter-spacing:1.2px;display:block}
.sample-site strong{display:block;font-size:48px;letter-spacing:-2px;line-height:1.05;font-weight:400;margin:24px 0;position:relative;z-index:1}
.sample-site em{font-family:Playfair,Georgia,serif;font-weight:400}
.sample-pill{display:inline-block;background:#20382e;color:white;border-radius:24px;padding:10px 12px;font-size:8px;position:relative;z-index:1}
.sample-orb{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 28% 25%,white,#b3e2fc 50%,#469cc5);bottom:-30px;right:-15px}
.sample-report{background:white;border-radius:12px;padding:28px;box-shadow:0 18px 35px #20382e12;transform:rotate(3deg);color:#20382e}
.sample-report .sample-toolbar{padding:0 0 16px;justify-content:space-between;margin-bottom:22px}
.sample-report .sample-toolbar>b{margin:0}
.sample-report>strong{font-size:30px;font-weight:500;letter-spacing:-1px}
.sample-report>p{font-size:10px;color:#647062;margin:10px 0 0}
.sample-chart{display:flex;align-items:flex-end;gap:12px;height:140px;border-bottom:1px solid #dfe5db;margin:26px 0 20px}
.sample-chart i{flex:1;background:#0876b8;border-radius:5px 5px 0 0;height:40%}
.sample-chart i:nth-child(2){height:65%}.sample-chart i:nth-child(3){height:52%}.sample-chart i:nth-child(4){height:85%;background:#c6ff55}.sample-chart i:nth-child(5){height:70%}.sample-chart i:nth-child(6){height:95%}
.sample-lines{display:grid;gap:7px;margin:16px 0}
.sample-lines i{height:4px;background:#e6eae3;width:100%}.sample-lines i:last-child{width:65%}
.sample-report>small{font-size:8px;color:#647062}
.sample-slide{background:#191d18;color:#fff;min-height:270px;border-radius:12px;padding:30px;position:relative;transform:rotate(-3deg);box-shadow:0 16px 32px #25321122}
.sample-slide strong{display:block;font-size:43px;font-weight:400;letter-spacing:-1.8px;line-height:1.08;margin-top:28px}
.sample-slide em{color:#c6ff55;font-family:Playfair,Georgia,serif;font-weight:400}
.slide-star{color:#c6ff55;font-size:90px;text-align:right;line-height:1;margin-top:-18px}
.sample-slide>span{font-size:9px}
.slide-pages{display:flex;gap:10px;margin:20px 10px 0}.slide-pages i{background:#ffffffb5;height:38px;border-radius:5px;flex:1}.slide-pages i:nth-child(2){background:#191d18}.slide-pages i:nth-child(3){background:#0876b8}
.sample-flow{padding:8px;color:#fff}
.sample-flow>small{text-align:center;color:#c6ff55;margin-bottom:30px}
.flow-node{background:#2a3228;border:1px solid #505c4b;border-radius:12px;padding:18px;display:flex;align-items:center;gap:14px;font-size:14px}
.flow-node>span{font-size:10px;color:#c6ff55}
.flow-node>b{margin-left:auto;color:#c6ff55;font-size:20px;font-weight:400}
.flow-connector{height:24px;width:1px;background:#c6ff55;margin:auto}
.sample-flow>p{text-align:center;font-size:11px;color:#c0c9ba;margin:24px 0 0}
@media(min-width:801px){.service-story:nth-child(even) .service-copy{grid-column:2;grid-row:1}.service-story:nth-child(even) .service-visual{grid-column:1;grid-row:1}}
@media(max-width:800px){
 .service-story{grid-template-columns:1fr;gap:32px;padding:42px 0}
 .service-copy>p:not(.eyebrow){max-width:540px}
 .service-visual{min-height:360px;padding:32px 26px 20px}
 .service-copy h3{font-size:38px}
 .service-jump{margin-bottom:42px;gap:8px 22px}
}
@media(max-width:700px){
 .hero-shell{min-height:calc(100svh - 12px)}
 .hero-shell .hero{width:calc(100% - 32px);padding:30px 0 42px}
 .hero-shell h1{font-size:clamp(38px,9.4vw,62px);letter-spacing:-2.2px;margin-bottom:22px}
 .hero-gallery{width:116%;gap:10px;margin:52px -8% 16px;flex-shrink:0}
 .hero-gallery::before{left:2%;right:2%;bottom:-20px;height:42%}
 .hero-piece{width:29%;border-radius:12px}.hero-piece-web{transform:translateY(-14px)}
 .hero-piece-report{transform:rotate(-6deg) translateY(18px)}
 .hero-piece-slide{transform:rotate(6deg) translateY(18px)}
 .hero-gallery .sample-browser,.hero-gallery .sample-report,.hero-gallery .sample-slide{border-radius:12px}
 .hero-gallery .sample-site{min-height:0;padding:12px}
 .hero-gallery .sample-site strong{font-size:24px;letter-spacing:-1.3px;margin:17px 0}
 .hero-gallery .sample-site small{font-size:5px}
 .hero-gallery .sample-toolbar{padding:9px;font-size:5px}
 .hero-gallery .sample-pill{font-size:5px;padding:7px}
 .hero-gallery .sample-report{padding:12px}
 .hero-gallery .sample-report>strong{font-size:16px;letter-spacing:-.7px}
 .hero-gallery .sample-chart{gap:5px;height:90px}
 .hero-gallery .sample-slide{min-height:0;padding:14px}
 .hero-gallery .sample-slide strong{font-size:22px;letter-spacing:-1px}
 .hero-gallery .sample-slide small{font-size:5px}
 .hero-gallery .slide-star{font-size:46px;margin-top:12px}
 .hero-gallery-note{font-size:10px}
 .services #services-title{font-size:clamp(26px,6.7vw,36px);letter-spacing:-1.4px}
 .service-copy h3{font-size:34px}
 .service-visual{border-radius:18px}
}
@media(prefers-reduced-motion:no-preference){.hero-gallery{animation:entrance .9s .25s both}}