:root{--navy:#071f35;--navy2:#0c2b46;--orange:#ed7a24;--paper:#f3f1eb;--white:#fbfaf7;--ink:#071f35;--muted:#5c6871;--line:rgba(7,31,53,.16);--line2:rgba(255,255,255,.16);--pad:clamp(22px,4.4vw,76px);--r:14px;--ease:cubic-bezier(.2,.75,.18,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.skip{position:fixed;left:12px;top:-60px;z-index:999;background:#fff;padding:10px 14px;border-radius:8px}.skip:focus{top:12px}.header{position:fixed;z-index:100;inset:0 0 auto;height:78px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;background:rgba(251,250,247,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(7,31,53,.07);transition:.35s var(--ease)}.header.compact{height:66px}.brand{display:block;width:176px;height:56px;overflow:hidden}.brand img{width:176px;height:88px;object-fit:cover;object-position:50% 42%;display:block;mix-blend-mode:multiply}.nav{display:flex;gap:28px;align-items:center;font-size:14px}.nav>a:not(.nav-cta){opacity:.7}.nav>a:hover{opacity:1}.nav-cta{border:1px solid var(--navy);padding:11px 15px;border-radius:9px;display:flex;gap:10px;align-items:center;transition:.25s}.nav-cta:hover{background:var(--navy);color:#fff}.nav-cta span,.text-cta span,.contact button span{display:inline-block;transition:transform .25s}.nav-cta:hover span,.text-cta:hover span,.contact button:hover span{transform:translateX(4px)}.menu,.mobile-nav{display:none}
.hero{min-height:100svh;padding:126px var(--pad) 52px;background:var(--white);display:grid;grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);gap:7vw;align-items:center;position:relative}.kicker,.sys{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}.hero h1{font-size:clamp(58px,6.2vw,96px);line-height:.92;letter-spacing:-.065em;font-weight:620;margin:18px 0 26px}.hero p{font-size:clamp(17px,1.35vw,21px);line-height:1.6;max-width:640px;color:#4e5e68}.text-cta{display:inline-flex;margin-top:16px;gap:12px;font-weight:650;border-bottom:1px solid rgba(7,31,53,.28);padding-bottom:4px}.hero-visual{height:min(69vh,720px);position:relative}.photo{position:absolute;inset:0;border-radius:var(--r);overflow:hidden}.photo:before,.photo:after{content:"";position:absolute;inset:0}.photo:before{filter:saturate(.48) contrast(.95)}.photo-hero:before{background:linear-gradient(125deg,rgba(7,31,53,.95),rgba(7,31,53,.3)),radial-gradient(circle at 72% 27%,rgba(237,122,36,.46),transparent 14%),linear-gradient(155deg,#596a76 0 26%,#c4c7c5 26% 44%,#747e82 44% 63%,#d8d5ce 63%)}.photo-hero:after{background:linear-gradient(180deg,transparent 62%,rgba(7,31,53,.28))}.hero-net,.os-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hero-net path,.os-art path{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.25;vector-effect:non-scaling-stroke}.hero-net circle,.os-art circle{fill:var(--paper);stroke:rgba(7,31,53,.35);stroke-width:1.2}.orange{fill:var(--orange)!important;stroke:var(--orange)!important}.hero-index{position:absolute;right:18px;bottom:18px;color:white;font-size:11px;letter-spacing:.15em}.scroll-cue{position:absolute;left:var(--pad);bottom:22px;font-size:10px;letter-spacing:.16em;color:#7a8388}.scroll-cue span{color:var(--orange)}
.experience-wrap{height:360vh;background:var(--paper)}.experience-sticky{height:100svh;position:sticky;top:0;overflow:hidden}.track{height:100%;display:flex;width:max-content;will-change:transform}.scene{width:100vw;height:100%;padding:110px var(--pad) 42px;display:grid;grid-template-columns:minmax(350px,.86fr) minmax(540px,1.14fr);gap:6vw;align-items:center;position:relative;flex:0 0 100vw}.scene-copy h2{font-size:clamp(58px,6.2vw,98px);line-height:.92;letter-spacing:-.06em;font-weight:610;margin:13px 0 24px}.lead{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:#52616b;max-width:650px}.service-list{margin-top:30px;border-top:1px solid var(--line);max-width:650px}.service-list span{display:block;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}.scene-copy small{display:block;margin-top:16px;color:#6a757d;max-width:620px;line-height:1.45}.scene-visual{height:min(68vh,700px);position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 32px 85px rgba(7,31,53,.11)}.photo-marketing:before{background:linear-gradient(126deg,rgba(7,31,53,.77),rgba(7,31,53,.04) 58%),radial-gradient(circle at 68% 35%,rgba(237,122,36,.32),transparent 12%),linear-gradient(145deg,#e3e0d8 0 18%,#9da5a6 18% 43%,#c6c4bd 43% 64%,#60717c 64%)}.photo-book:before{background:linear-gradient(145deg,rgba(7,31,53,.16),transparent 55%),linear-gradient(165deg,#efece5 0 28%,#b8bbb7 28% 49%,#dfddd5 49% 68%,#8f9899 68%)}.photo-book:after{background:repeating-linear-gradient(90deg,transparent 0 14.15%,rgba(7,31,53,.05) 14.15% 14.3%),repeating-linear-gradient(0deg,transparent 0 18%,rgba(7,31,53,.05) 18% 18.15%)}.photo-logistics:before{background:linear-gradient(140deg,rgba(7,31,53,.87),rgba(7,31,53,.08) 55%),radial-gradient(circle at 72% 60%,rgba(237,122,36,.38),transparent 9%),linear-gradient(58deg,#656f74 0 34%,#e2dfd7 34% 47%,#9da3a3 47% 64%,#4e5f69 64%)}.word{position:absolute;font-size:10px;letter-spacing:.17em;color:rgba(255,255,255,.67);font-weight:650}.grid .word{color:rgba(7,31,53,.38)}.w1{left:5%;top:10%}.w2{right:8%;top:17%}.w3{right:8%;bottom:13%}.w4{left:7%;bottom:10%}.progress-line{position:absolute;z-index:5;left:var(--pad);right:var(--pad);bottom:18px;height:1px;background:rgba(7,31,53,.1)}.progress-line i{display:block;width:0;height:1px;background:var(--navy)}.progress-line b{position:absolute;top:-4px;left:0;width:9px;height:9px;background:var(--orange);border-radius:50%;transform:translateX(-50%)}.morph{width:70vw;flex:0 0 70vw;display:grid;place-items:center}.morph svg{width:86%;height:70%}.morph path{fill:none;stroke:rgba(7,31,53,.29);stroke-width:1.3;vector-effect:non-scaling-stroke}.morph circle{fill:var(--paper);stroke:var(--line);stroke-width:1.2}.finale{display:grid;place-items:center;background:var(--navy);color:white}.merge{width:min(900px,75vw);text-align:center}.merge h2{font-size:clamp(68px,8vw,130px);margin:16px 0 4px;letter-spacing:-.07em}.merge svg{width:100%;max-height:42vh}.merge path{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1.2}.merge circle{stroke:none}
.overview{padding:130px var(--pad);background:var(--white)}.section-head{max-width:1050px;margin-bottom:75px}.section-head h2{font-size:clamp(48px,5.3vw,82px);letter-spacing:-.055em;line-height:.98;margin:14px 0}.overview-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.8fr);gap:9vw;align-items:center;padding:80px 0;border-top:1px solid var(--line)}.overview-row.reverse .overview-copy{order:2}.overview-row.reverse .overview-art{order:1}.overview-copy h3{font-size:clamp(36px,4vw,60px);letter-spacing:-.05em;margin:0 0 20px}.overview-copy p{font-size:18px;line-height:1.72;color:#51616b;max-width:760px}.credential{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink)!important}.credential span{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#7a858b;margin-bottom:7px}.legal-note{font-size:14px!important;border-left:2px solid var(--orange);padding-left:14px}.overview-art{aspect-ratio:4/3;border:1px solid rgba(7,31,53,.07);border-radius:var(--r);background-color:var(--paper);position:relative;overflow:hidden}.overview-art:before,.overview-art:after{content:"";position:absolute}.network-mini:before{left:10%;top:58%;width:78%;height:1px;background:var(--line);transform:rotate(-13deg);box-shadow:80px -110px 0 var(--line),160px 60px 0 var(--line)}.network-mini:after{width:10px;height:10px;background:var(--orange);border-radius:50%;left:47%;top:41%;box-shadow:190px -85px 0 -1px var(--paper),190px -85px 0 0 var(--navy)}.grid-mini{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:25% 25%}.grid-mini:after{width:10px;height:10px;border-radius:50%;background:var(--orange);left:50%;top:50%;transform:translate(-50%,-50%)}.route-mini:before{left:12%;top:67%;width:35%;height:1px;background:var(--line);box-shadow:170px -90px 0 var(--line),340px -180px 0 var(--line)}.route-mini:after{left:46%;top:46%;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.about{background:var(--navy);color:white;padding:130px var(--pad) 58px;position:relative;overflow:hidden}.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:9vw;position:relative;z-index:2}.sys.light{color:rgba(255,255,255,.5)}.about h2{font-size:clamp(60px,7vw,112px);line-height:.9;letter-spacing:-.07em;margin:14px 0}.about-copy{display:grid;grid-template-columns:1fr;gap:0}.about-copy p{margin:0;padding:18px 0;border-top:1px solid var(--line2);font-size:18px;line-height:1.65;color:rgba(255,255,255,.75)}.location{margin-top:90px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.45)}.about-orbit{position:absolute;width:720px;height:720px;border:1px solid rgba(255,255,255,.06);border-radius:50%;right:-220px;top:-230px}.about-orbit:after{content:"";position:absolute;width:10px;height:10px;background:var(--orange);border-radius:50%;left:50%;bottom:-5px}
.faq{padding:130px var(--pad);background:var(--paper);display:grid;grid-template-columns:.65fr 1.35fr;gap:9vw}.faq h2{font-size:clamp(52px,5.6vw,86px);letter-spacing:-.055em;margin:14px 0}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;position:relative;padding:24px 52px 24px 42px;font-size:clamp(18px,1.55vw,23px)}summary::-webkit-details-marker{display:none}summary span{position:absolute;left:0;top:28px;font-size:10px;letter-spacing:.12em;color:#899197}summary:after{content:"+";position:absolute;right:0;top:20px;font-size:28px;font-weight:300;color:var(--orange)}details[open] summary:after{content:"−"}details p{margin:0;padding:0 52px 26px 42px;max-width:850px;color:#596871;line-height:1.65}
.contact{padding:130px var(--pad);background:var(--navy);color:#fff;display:grid;grid-template-columns:1fr .82fr;gap:10vw}.contact h2{font-size:clamp(58px,6.7vw,104px);letter-spacing:-.065em;line-height:.92;margin:15px 0 28px}.contact-copy p{max-width:650px;font-size:18px;line-height:1.65;color:rgba(255,255,255,.72)}.email{display:inline-flex;gap:8px;margin-top:22px;border-bottom:1px solid rgba(255,255,255,.38);padding-bottom:4px}.contact form{display:grid;gap:22px}.contact form>label:not(.consent){display:grid;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.5)}input,textarea{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.27);background:transparent;color:white;padding:13px 0;outline:none}textarea{min-height:135px;resize:vertical}input:focus,textarea:focus{border-color:var(--orange)}.consent{display:flex;gap:10px;color:rgba(255,255,255,.6);font-size:13px;line-height:1.5}.consent input{width:auto;margin-top:3px}.consent a{text-decoration:underline}.contact button{justify-self:start;background:var(--white);color:var(--navy);border:0;border-radius:9px;padding:13px 17px;display:flex;gap:10px;cursor:pointer}.form-status{min-height:22px;color:rgba(255,255,255,.74);font-size:13px}footer{background:var(--navy);color:rgba(255,255,255,.5);padding:28px var(--pad);border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:24px;font-size:12px}footer div:last-child{display:flex;gap:18px;flex-wrap:wrap}footer button{background:none;border:0;color:inherit;padding:0;cursor:pointer}
.reveal{opacity:0;transform:translateY(18px);animation:reveal .8s .12s var(--ease) forwards}.hero-visual.reveal{animation-delay:.25s}@keyframes reveal{to{opacity:1;transform:none}}
@media(max-width:900px){.header{height:68px}.brand{width:155px;height:52px}.brand img{width:155px;height:78px}.nav{display:none}.menu{display:grid;width:42px;height:42px;border:0;background:transparent;place-content:center;gap:6px}.menu span{width:24px;height:1px;background:var(--navy);display:block}.mobile-nav{position:fixed;z-index:95;top:68px;left:0;right:0;background:var(--white);padding:20px var(--pad) 28px;border-bottom:1px solid var(--line);display:grid;gap:0;transform:translateY(-130%);transition:.32s var(--ease)}.mobile-nav.open{transform:none}.mobile-nav a{padding:15px 0;border-bottom:1px solid var(--line)}.hero{grid-template-columns:1fr;padding-top:106px;gap:50px}.hero h1{font-size:clamp(52px,14vw,78px)}.hero-visual{height:52vh;min-height:410px}.scroll-cue{display:none}.experience-wrap{height:auto}.experience-sticky{height:auto;position:relative;overflow:visible}.track{display:block;width:auto}.progress-line,.morph{display:none}.scene{width:auto;height:auto;min-height:100svh;grid-template-columns:1fr;gap:40px;padding:100px var(--pad)}.scene-visual{height:54vh;min-height:390px}.finale{min-height:72svh}.merge{width:100%}.overview{padding-top:100px}.overview-row,.overview-row.reverse{grid-template-columns:1fr;gap:38px}.overview-row.reverse .overview-copy,.overview-row.reverse .overview-art{order:initial}.overview-art{max-width:720px;width:100%}.about-grid,.faq,.contact{grid-template-columns:1fr}.about-copy{margin-top:36px}.faq{gap:45px}.contact{gap:55px}footer{flex-direction:column}.section-head{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.experience-wrap{height:auto}.experience-sticky{height:auto;position:relative}.track{display:block!important;transform:none!important}.scene{width:auto!important;min-height:auto;height:auto}.morph,.progress-line{display:none}}

/* V5 refinement: full-content horizontal story — no standalone transition panels */
.experience-meta{position:absolute;z-index:8;top:96px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;pointer-events:none;font-size:10px;letter-spacing:.16em;font-weight:750;color:rgba(7,31,53,.44)}
.scene{--focus:0;transition:background-color .5s var(--ease)}
.scene-copy,.scene-visual{transition:transform .55s var(--ease),opacity .55s var(--ease)}
.scene-copy{transform:translate3d(calc((1 - var(--focus))*-16px),0,0);opacity:calc(.62 + var(--focus)*.38)}
.scene-visual{transform:translate3d(calc((1 - var(--focus))*22px),0,0) scale(calc(.975 + var(--focus)*.025));opacity:calc(.72 + var(--focus)*.28)}
.scene.is-active .scene-visual{box-shadow:0 38px 100px rgba(7,31,53,.14)}
.scene-reverse{grid-template-columns:minmax(540px,1.14fr) minmax(350px,.86fr)}
.scene-reverse .scene-copy{order:2;padding-left:2vw}.scene-reverse .scene-visual{order:1}
.scene-reverse .scene-copy{transform:translate3d(calc((1 - var(--focus))*16px),0,0)}
.scene-reverse .scene-visual{transform:translate3d(calc((1 - var(--focus))*-22px),0,0) scale(calc(.975 + var(--focus)*.025))}
.scene-visual:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.16);border-radius:inherit;pointer-events:none}
.grid .scene-visual:after{border-color:rgba(7,31,53,.08)}
.scene-copy .sys{display:inline-flex;align-items:center;gap:10px}.scene-copy .sys:after{content:"";width:34px;height:1px;background:var(--orange);transform-origin:left;transform:scaleX(calc(.35 + var(--focus)*.65));transition:transform .45s var(--ease)}
.os-art{transform:translate3d(calc((1 - var(--focus))*10px),calc((1 - var(--focus))*8px),0);transition:transform .6s var(--ease)}
.os-art .orange{filter:drop-shadow(0 0 12px rgba(237,122,36,.35))}
.word{opacity:calc(.25 + var(--focus)*.75);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.scene.is-active .w1{transform:translateX(4px)}.scene.is-active .w2{transform:translateY(-4px)}.scene.is-active .w3{transform:translateX(-4px)}.scene.is-active .w4{transform:translateY(4px)}
.turn-down{height:120px;background:var(--paper);position:relative;overflow:hidden}.turn-down span{position:absolute;left:var(--pad);right:calc(50% - 1px);top:0;height:1px;background:rgba(7,31,53,.22)}.turn-down span:after{content:"";position:absolute;right:0;top:0;width:1px;height:78px;background:rgba(7,31,53,.22)}.turn-down b{position:absolute;left:calc(50% - 5px);top:73px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 8px rgba(237,122,36,.08)}
.hero-visual{filter:drop-shadow(0 28px 60px rgba(7,31,53,.10))}
.hero-copy:before{content:"DN.OS / 01—03";display:block;margin-bottom:34px;font-size:10px;letter-spacing:.16em;font-weight:750;color:rgba(7,31,53,.42)}
.service-list span{position:relative;padding-left:0;transition:padding-left .25s var(--ease),color .25s var(--ease)}.scene.is-active .service-list span:hover{padding-left:16px;color:var(--navy)}.service-list span:before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--orange);transition:width .25s var(--ease)}.scene.is-active .service-list span:hover:before{width:9px}
@media(min-width:901px){.experience-wrap{height:320vh}.scene{padding-top:128px}.progress-line{bottom:24px}.scene-copy{max-width:680px}.scene-reverse .scene-copy{justify-self:end}.scene-reverse .scene-visual{justify-self:stretch}}
@media(max-width:900px){.experience-meta{display:none}.scene-reverse{grid-template-columns:1fr}.scene-reverse .scene-copy,.scene-reverse .scene-visual{order:initial;padding-left:0}.scene-copy,.scene-visual,.scene-reverse .scene-copy,.scene-reverse .scene-visual{transform:none!important;opacity:1!important}.turn-down{height:80px}.turn-down span{right:50%}.turn-down span:after{height:50px}.turn-down b{top:45px}}

/* V6: long service headings must stay inside their text column */
.scene-copy{min-width:0;max-width:100%;overflow-wrap:normal}
.scene-copy h2{max-width:100%;text-wrap:balance}
.scene-bookkeeping .scene-copy h2,
.scene[data-service="bookkeeping"] .scene-copy h2{font-size:clamp(44px,4.75vw,76px);letter-spacing:-.055em}
@media (min-width:901px) and (max-width:1180px){
  .scene-reverse .scene-copy h2{font-size:clamp(40px,4.25vw,58px)}
}
@media(max-width:900px){
  .scene-copy h2{font-size:clamp(42px,10.8vw,66px);line-height:.95;overflow-wrap:anywhere}
}

/* V7 — final image direction */
.photo:before{background-size:cover!important;background-repeat:no-repeat!important;filter:none!important;transform:scale(1.002)}
.photo-hero:before{background-image:url('hero.webp')!important;background-position:center center!important}
.photo-marketing:before{background-image:url('marketing.webp')!important;background-position:center center!important}
.photo-book:before{background-image:url('bookkeeping.webp')!important;background-position:center center!important}
.photo-logistics:before{background-image:url('logistics.webp')!important;background-position:center center!important}
.photo-hero:after{background:linear-gradient(90deg,rgba(7,31,53,.08),transparent 34%)!important}
.photo-marketing:after,.photo-book:after,.photo-logistics:after{background:linear-gradient(180deg,rgba(7,31,53,.02),rgba(7,31,53,.08))!important}
/* The photography already contains the DN.OS line language. Avoid duplicate overlays. */
.hero-net,.scene-visual .os-art,.scene-visual .word{display:none!important}
/* Keep the long bookkeeping title inside its content column at every desktop width. */
.scene-bookkeeping .scene-copy{min-width:0}
.scene-bookkeeping .scene-copy h2{font-size:clamp(40px,4.35vw,72px);letter-spacing:-.052em;overflow-wrap:normal;word-break:normal;max-width:100%}
@media (max-width:1100px){.scene-bookkeeping .scene-copy h2{font-size:clamp(36px,5.2vw,58px)}}
@media (max-width:767px){.scene-bookkeeping .scene-copy h2{font-size:clamp(36px,10vw,52px);line-height:.96}}

/* V8 — premium finishing */
:root{--shadow:0 24px 80px rgba(7,31,53,.11);--shadow-soft:0 14px 44px rgba(7,31,53,.08)}
body{letter-spacing:-.008em}
.header{height:82px;padding-left:max(var(--pad),28px);padding-right:max(var(--pad),28px);box-shadow:none}
.header.compact{height:68px;background:rgba(251,250,247,.94)}
.brand{width:190px;height:52px;display:flex;align-items:center;overflow:visible}
.brand img{width:190px;height:auto;max-height:48px;object-fit:contain;object-position:left center;mix-blend-mode:normal}
.nav{gap:30px;font-size:13px;font-weight:560}
.nav>a:not(.nav-cta){position:relative;padding:8px 0}
.nav>a:not(.nav-cta):after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:1px;background:var(--orange);transition:right .28s var(--ease)}
.nav>a:not(.nav-cta):hover:after{right:0}
.nav-cta{border-radius:999px;padding:11px 17px 11px 18px;background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 7px 18px rgba(7,31,53,.12)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(7,31,53,.17)}

.hero{padding-top:138px;padding-bottom:64px;grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);gap:6.4vw}
.hero-copy{max-width:760px}
.hero-copy:before{margin-bottom:26px}
.kicker{color:rgba(7,31,53,.62)}
.hero h1{font-size:clamp(60px,6vw,92px);max-width:850px}
.hero p{max-width:600px;margin-bottom:10px}
.text-cta{position:relative;border-bottom:0;padding:12px 0 10px;margin-top:18px}
.text-cta:after{content:"";position:absolute;left:0;bottom:5px;width:58px;height:1px;background:var(--orange);transition:width .28s var(--ease)}
.text-cta:hover:after{width:100%}
.hero-visual{height:min(72vh,760px);min-height:560px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.photo{border-radius:18px}
.photo-hero:before{background-position:56% 50%!important}
.hero-visual:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.13);border-radius:18px;pointer-events:none}
.hero-index{font-size:10px;bottom:20px;right:22px;background:rgba(7,31,53,.62);backdrop-filter:blur(9px);padding:8px 10px;border-radius:999px}
.scroll-cue{bottom:28px;display:flex;align-items:center;gap:10px}.scroll-cue:before{content:"";width:28px;height:1px;background:rgba(7,31,53,.26)}

.experience-wrap{background:linear-gradient(180deg,var(--paper),#f8f6f1 42%,var(--paper))}
.experience-meta{top:104px;color:rgba(7,31,53,.42)}
.scene{padding-left:var(--pad);padding-right:var(--pad);gap:5.2vw}
.scene-copy{padding-bottom:28px}
.scene-copy h2{margin-top:16px;margin-bottom:22px}
.lead{font-size:clamp(17px,1.22vw,20px);max-width:620px}
.service-list{margin-top:27px}
.service-list span{padding:12px 0;font-size:14.5px;color:#253846}
.scene-visual{height:min(70vh,720px);border-radius:18px;box-shadow:var(--shadow-soft);background:#d9d7d0}
.scene.is-active .scene-visual{box-shadow:0 40px 105px rgba(7,31,53,.15)}
.scene-visual .photo{transition:transform .9s var(--ease)}
.scene.is-active .scene-visual .photo{transform:scale(1.018)}
.photo-marketing:before{background-position:52% center!important}
.photo-book:before{background-position:52% center!important}
.photo-logistics:before{background-position:51% center!important}
.progress-line{height:2px;background:rgba(7,31,53,.07)}
.progress-line i{height:2px}.progress-line b{width:10px;height:10px;top:-4px;box-shadow:0 0 0 7px rgba(237,122,36,.10)}
.scene-copy .sys{color:rgba(7,31,53,.48)}
.scene-bookkeeping .scene-copy h2{font-size:clamp(40px,4vw,68px);line-height:.94}

.turn-down{height:150px;background:linear-gradient(180deg,var(--paper),var(--white))}
.turn-down span{top:8px}.turn-down span:after{height:92px}.turn-down b{top:95px}

.overview{padding-top:110px;padding-bottom:130px}
.section-head{display:grid;grid-template-columns:.34fr 1fr;gap:6vw;align-items:end;max-width:none;margin-bottom:38px}
.section-head .sys{padding-bottom:12px;color:rgba(7,31,53,.48)}
.section-head h2{margin:0;max-width:920px}
.overview-row{gap:7vw;padding:92px 0;grid-template-columns:minmax(0,.95fr) minmax(420px,.85fr)}
.overview-copy h3{margin-bottom:22px}
.overview-copy p{font-size:17px;line-height:1.74}
.overview-art{border:0;box-shadow:var(--shadow-soft);background-size:cover;background-position:center;min-height:380px}
.overview-art:before{inset:0!important;width:auto!important;height:auto!important;transform:none!important;box-shadow:none!important;background:linear-gradient(180deg,rgba(7,31,53,.03),rgba(7,31,53,.14))!important}
.overview-art:after{content:"";position:absolute;left:28px;bottom:28px;width:11px;height:11px;border-radius:50%;background:var(--orange)!important;box-shadow:0 0 0 8px rgba(237,122,36,.12)!important;top:auto!important;right:auto!important;transform:none!important}
.network-mini{background-image:url('marketing.webp')}
.grid-mini{background-image:url('bookkeeping.webp');background-size:cover!important}
.route-mini{background-image:url('logistics.webp')}
.reverse .overview-art:after{left:auto!important;right:28px!important}
.credential{padding-top:20px;margin-top:32px}.legal-note{margin-top:26px!important}

.about{padding-top:140px;padding-bottom:70px}
.about-grid{grid-template-columns:.9fr 1.1fr;gap:8vw}
.about-copy p{font-size:17px;padding:20px 0;color:rgba(255,255,255,.72)}
.location{margin-top:95px}
.about:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}

.faq{padding-top:125px;padding-bottom:125px;grid-template-columns:.55fr 1.45fr;gap:8vw}
.faq-intro{position:sticky;top:120px;align-self:start}
.faq h2{margin-bottom:0}
summary{padding-top:26px;padding-bottom:26px;padding-right:68px;transition:color .2s var(--ease)}
summary:after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:28px;font-weight:300;color:rgba(7,31,53,.62);transition:transform .28s var(--ease),color .2s}
details[open] summary:after{transform:translateY(-50%) rotate(45deg);color:var(--orange)}
details[open] summary{color:var(--navy)}
details p{padding-right:54px}

.contact{position:relative;overflow:hidden;padding-top:135px;padding-bottom:135px}
.contact:before{content:"";position:absolute;width:600px;height:600px;border:1px solid rgba(255,255,255,.06);border-radius:50%;right:-210px;bottom:-330px}
.contact-copy,.contact form{position:relative;z-index:2}
.contact h2{font-size:clamp(56px,6.1vw,96px)}
.email{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.28)}
.email span{color:var(--orange)}
.contact form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:clamp(24px,3vw,42px);backdrop-filter:blur(8px)}
.contact label{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.contact input,.contact textarea{font-size:17px;letter-spacing:0;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.18);border-radius:0;padding:12px 0 14px;outline:0;transition:border-color .2s,box-shadow .2s}
.contact input:focus,.contact textarea:focus{border-color:var(--orange);box-shadow:0 1px 0 var(--orange)}
.contact textarea{min-height:140px;resize:vertical}
.contact .consent{letter-spacing:0;text-transform:none;font-size:13px;line-height:1.5;color:rgba(255,255,255,.6)}
.contact .consent input{accent-color:var(--orange)}
.contact button{border-radius:999px;padding:14px 20px;background:var(--orange);border:1px solid var(--orange);color:#071f35;font-weight:720;transition:transform .22s var(--ease),filter .22s var(--ease)}
.contact button:hover{transform:translateY(-1px);filter:brightness(1.04)}
.form-status{min-height:24px}
footer{padding-top:28px;padding-bottom:28px}
footer a,footer button{transition:opacity .2s}.footer a:hover,footer button:hover{opacity:1}

.reveal-on-scroll{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-on-scroll.in-view{opacity:1;transform:none}

@media (max-width:1180px){
 .hero{grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr);gap:4.5vw}.hero-visual{min-height:500px}
 .scene{gap:4vw}.scene-reverse{grid-template-columns:minmax(480px,1.05fr) minmax(330px,.95fr)}
 .scene-bookkeeping .scene-copy h2{font-size:clamp(38px,4.2vw,54px)}
}
@media (max-width:900px){
 .header{height:70px}.brand{width:162px;height:44px}.brand img{width:162px;max-height:42px}
 .hero{padding-top:104px;grid-template-columns:1fr;gap:44px}.hero-visual{height:58vh;min-height:430px}.photo-hero:before{background-position:58% center!important}
 .scene{padding-top:92px;padding-bottom:76px;min-height:auto}.scene-visual{height:55vh;min-height:400px}
 .section-head{grid-template-columns:1fr;gap:12px}.overview-row{padding:70px 0}.overview-art{min-height:360px}
 .faq-intro{position:relative;top:auto}.contact form{padding:28px}
}
@media (max-width:560px){
 :root{--pad:20px}.header{padding:0 18px}.brand{width:150px}.brand img{width:150px}
 .hero{padding-top:96px}.hero h1{font-size:clamp(48px,15.5vw,66px)}.hero-visual{min-height:360px;height:48vh;border-radius:14px}.photo{border-radius:14px}
 .scene{padding-top:78px;padding-bottom:62px}.scene-copy h2{font-size:clamp(44px,13vw,62px)}.scene-bookkeeping .scene-copy h2{font-size:clamp(34px,9.7vw,46px);letter-spacing:-.045em}
 .scene-visual{height:46vh;min-height:330px;border-radius:14px}.photo-marketing:before{background-position:55% center!important}.photo-book:before{background-position:58% center!important}.photo-logistics:before{background-position:55% center!important}
 .overview{padding-top:80px;padding-bottom:90px}.overview-row{padding:56px 0}.overview-art{min-height:280px;aspect-ratio:1.2/1}
 .about,.faq,.contact{padding-top:90px;padding-bottom:90px}.contact h2{font-size:clamp(48px,14vw,66px)}
 summary{padding-left:34px;padding-right:48px;font-size:18px}summary span{left:0}.faq-list details p{padding-right:0}
}
@media(prefers-reduced-motion:reduce){.reveal-on-scroll{opacity:1!important;transform:none!important}}

/* V9 — service depth lives inside the horizontal experience; no duplicate overview section */
.scene-copy{align-self:center}
.scene-detail{max-width:650px;margin:0 0 18px;font-size:15.5px;line-height:1.62;color:#52616b}
.scene-note{margin:20px 0 0;padding-top:15px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:#596872}
.scene-note b{display:block;margin-bottom:4px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#7a858b}
.scene-note.legal{border-left:2px solid var(--orange);border-top:0;padding:2px 0 2px 13px}
.scene .service-list{margin-top:18px}
.scene .service-list span{padding:9px 0}
@media(min-width:901px){.experience-wrap{height:340vh}.scene-copy h2{margin-bottom:16px}.scene-copy .lead{margin-bottom:14px}}
@media(max-width:1200px) and (min-width:901px){.scene-detail{font-size:14px;line-height:1.52}.scene .service-list span{padding:7px 0;font-size:13.5px}.scene-note{margin-top:14px}.scene-bookkeeping .scene-copy h2{font-size:clamp(36px,3.7vw,52px)}}
@media(max-width:900px){.scene-detail{font-size:16px;line-height:1.65}.scene-note{margin-top:18px}}

.about-logo{display:block;width:min(520px,90%);height:auto;margin-top:22px;object-fit:contain;object-position:left center}
@media(max-width:767px){.about-logo{width:min(360px,100%);margin-top:16px}}


/* V10 — production readiness */
:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.consent-panel{position:fixed;inset:0;z-index:500;display:none;align-items:flex-end;justify-content:center;background:rgba(4,17,29,.46);padding:20px}
.consent-panel.open{display:flex}
.consent-card{width:min(720px,100%);background:var(--white);border:1px solid rgba(7,31,53,.1);border-radius:18px;padding:26px;box-shadow:0 30px 90px rgba(7,31,53,.24)}
.consent-card h2{margin:0 0 10px;font-size:28px;letter-spacing:-.035em}.consent-card p{margin:0 0 20px;color:#52616b;line-height:1.6}
.consent-option{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:15px 0;border-top:1px solid var(--line)}
.consent-option span{font-size:14px;color:#52616b}.consent-option input{width:20px;height:20px;accent-color:var(--orange)}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.consent-actions button{border:1px solid var(--navy);border-radius:999px;background:transparent;padding:11px 16px;cursor:pointer}.consent-actions .primary{background:var(--navy);color:#fff}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status.success{color:#c9f1d5}.form-status.error{color:#ffd0c7}.contact button[disabled]{opacity:.55;cursor:wait}
@media(max-width:560px){.consent-panel{padding:10px}.consent-card{padding:20px}.consent-actions{display:grid}.consent-actions button{width:100%}}


/* V14: mobile FAQ — stacked, readable accordion cards */
.faq-subtitle{margin:18px 0 0;max-width:620px;color:#64717a;font-size:17px;line-height:1.6}
@media(max-width:900px){
  .faq{display:block;padding:92px var(--pad) 100px}
  .faq-intro{margin-bottom:38px}
  .faq h2{font-size:clamp(48px,13vw,68px);line-height:.96;letter-spacing:-.055em;margin:12px 0 0;max-width:100%}
  .faq-subtitle{font-size:16px;line-height:1.55;margin-top:18px;max-width:34rem}
  .faq-list{border-top:0;display:grid;gap:12px}
  .faq-list details{border:1px solid rgba(7,31,53,.13);border-radius:16px;background:rgba(251,250,247,.55);overflow:hidden}
  .faq-list summary{min-height:92px;padding:24px 54px 24px 72px;font-size:clamp(18px,5.2vw,22px);line-height:1.25;display:flex;align-items:center}
  .faq-list summary span{left:22px;top:50%;transform:translateY(-50%);font-size:11px;letter-spacing:.15em;color:#8a959c}
  .faq-list summary:after{content:"⌄";right:22px;top:50%;transform:translateY(-54%);font-size:25px;line-height:1;color:var(--navy);transition:transform .22s var(--ease)}
  .faq-list details[open] summary:after{content:"⌄";transform:translateY(-40%) rotate(180deg)}
  .faq-list details p{padding:0 22px 24px 72px;font-size:16px;line-height:1.6;color:#596871;max-width:none}
}
@media(max-width:430px){
  .faq{padding-left:22px;padding-right:22px}
  .faq h2{font-size:clamp(46px,12.8vw,58px)}
  .faq-list summary{padding-left:64px;padding-right:48px}
  .faq-list summary span{left:18px}
  .faq-list summary:after{right:17px}
  .faq-list details p{padding-left:64px;padding-right:18px}
}

/* V15 — definitive mobile stacking for content sections */
@media (max-width:900px){
  .about{padding:92px var(--pad) 72px}
  .about-grid{display:block!important;grid-template-columns:none!important;gap:0!important}
  .about-brand{width:100%;min-width:0;margin:0 0 34px}
  .about-logo{width:min(340px,100%);max-width:100%;margin-top:16px}
  .about-copy{display:block!important;width:100%;min-width:0;margin-top:0}
  .about-copy p{width:100%;font-size:17px;line-height:1.62;padding:21px 0;overflow-wrap:break-word}
  .location{margin-top:46px;line-height:1.6}

  .faq{display:block!important;grid-template-columns:none!important;gap:0!important;width:100%;min-width:0;padding:92px var(--pad) 100px}
  .faq-intro{position:static!important;top:auto!important;width:100%;min-width:0;margin:0 0 38px}
  .faq h2{max-width:100%;font-size:clamp(48px,13vw,68px);line-height:.96}
  .faq-subtitle{max-width:34rem}
  .faq-list{width:100%;min-width:0;border-top:0;display:grid;grid-template-columns:1fr;gap:12px}
  .faq-list details{width:100%;min-width:0}
  .faq-list summary{width:100%;min-width:0;white-space:normal;overflow-wrap:break-word}

  .contact{display:block!important;grid-template-columns:none!important;gap:0!important;width:100%;min-width:0;padding:100px var(--pad)}
  .contact-copy{width:100%;min-width:0;margin-bottom:46px}
  .contact form{width:100%;min-width:0}
}
@media (max-width:560px){
  .about{padding-top:82px;padding-bottom:62px}
  .about-brand{margin-bottom:28px}
  .about-logo{width:min(300px,100%)}
  .about-copy p{font-size:16.5px;padding:19px 0}
  .location{margin-top:38px}
  .faq{padding-top:82px;padding-bottom:88px}
  .faq-intro{margin-bottom:32px}
  .contact{padding-top:88px;padding-bottom:88px}
  .contact-copy{margin-bottom:38px}
}