/* DOLO — a restrained motion language, with independent product layers. */
:root { --ease-cinema:cubic-bezier(.19,1,.22,1); --paper:#fafcfb; }
h1,h2 { font-weight:500; letter-spacing:-.045em; line-height:1.14; }
h3 { font-weight:500; }
h1 em,h2 em { font-weight:500; }
.hero h1 { font-size:clamp(42px,4.1vw,65px); font-weight:500; line-height:1.12; letter-spacing:-.043em; }
.hero .lead { color:#52605f; max-width:480px; line-height:1.8; }
.hero .eyebrow { letter-spacing:.065em; }
.hero { gap:clamp(34px,5vw,86px); padding-top:48px; }
.hero-copy { padding-top:38px; }
.hero h1 .type-line:nth-child(3) { margin-top:28px; }
.hero-art { height:650px; min-height:0; background:#e1e5e5; box-shadow:0 24px 65px -35px #09383a40; }
.hero-art:after { box-shadow:inset 0 0 0 1px #ffffff60; pointer-events:none; }
.hero-art figcaption { z-index:7; padding:14px 16px; background:#fcfffde8; backdrop-filter:blur(8px); border:1px solid #ffffff88; }
.header:after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:var(--teal); transform:scaleX(var(--page-progress,0)); transform-origin:left; pointer-events:none; }
.header .logo:hover { transform:translateY(-2px) rotate(-2deg); }
.eyebrow { line-height:1.7; }
.section-top { align-items:center; }
.meta { letter-spacing:.055em; }
.position { padding-top:120px; }
.position-copy { max-width:570px; }
.statement { font-size:clamp(19px,1.7vw,26px)!important; font-weight:500; letter-spacing:-.025em; }
.statement .highlight { color:var(--teal); }
.type-line { padding-bottom:.09em; margin-bottom:-.09em; }
.motion-enabled .type-ready .type-inner { transform:translate3d(0,112%,0) rotate(.7deg); transition:transform 1s var(--ease-cinema),opacity .75s; transition-delay:calc(var(--line-index,0)*100ms); }
.motion-enabled .type-ready .teal-line .type-inner { transition-delay:calc(var(--line-index,0)*100ms + 90ms); }
.motion-enabled .type-ready.in-view .type-inner { transform:none; }
.intro-active .hero .type-inner { animation:atelier-type .88s var(--ease-cinema) calc(.18s + var(--line-index)*.095s) both; }
.intro-active .hero .teal-line .type-inner { animation-delay:calc(.24s + var(--line-index)*.095s); }
.intro-active .hero h1 em { animation:none; }
.intro-active .hero-art { animation:atelier-visual 1.3s var(--ease-cinema) .2s both; }
@keyframes atelier-type { from { transform:translate3d(0,115%,0) rotate(.65deg); opacity:.35; } to { transform:none; opacity:1; } }
@keyframes atelier-visual { from { opacity:0; transform:translate3d(0,34px,0) rotateY(-5deg) rotateZ(1deg) scale(.96); clip-path:inset(7% 0 7% 0); } to { opacity:1; transform:none; clip-path:inset(0); } }

/* The original artwork remains the accessible loading/error fallback. */
.product-scene { overflow:hidden; isolation:isolate; perspective:1400px; }
.product-scene .product-fallback { position:absolute; inset:0; transition:opacity .4s; }
.product-stage { position:absolute; inset:0; overflow:hidden; opacity:0; transform:translate3d(0,var(--drift,0px),0) scale(1.045); transition:opacity .55s; pointer-events:none; }
.layers-loaded .product-stage { opacity:1; }
.layers-loaded .product-fallback { opacity:0; }
.product-scene .product-stage img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:52% 68%; transform:none; filter:none; }
.phone-plane,.wave-plane { position:absolute; inset:0; transform-origin:52% 65%; }
.phone-plane { z-index:3; transition:translate .7s var(--ease-cinema),rotate .9s var(--ease-cinema); translate:var(--look-x,0px) var(--look-y,0px); rotate:var(--look-r,0deg); animation:phone-suspension 8s ease-in-out infinite; animation-play-state:paused; }
.product-scene .phone-plane img { transform:translate(2%,-6.5%) scale(.88); }
.wave-plane { z-index:1; clip-path:polygon(0 65%,32% 38%,100% 5%,100% 54%,40% 70%,0 91%); transform-origin:60% 52%; animation:ribbon-current 9s ease-in-out infinite; animation-play-state:paused; }
.stage-light { position:absolute; z-index:2; inset:0; background:linear-gradient(115deg,transparent 27%,#d7ffff28 45%,transparent 63%); mix-blend-mode:screen; opacity:.2; animation:chrome-breath 7s ease-in-out infinite; animation-play-state:paused; }
.scene-active .phone-plane,.scene-active .wave-plane,.scene-active .stage-light { animation-play-state:running; }
@keyframes phone-suspension { 0%,100% { transform:translate3d(0,2px,0) rotate(-.35deg); } 50% { transform:translate3d(0,-7px,0) rotate(.45deg); } }
@keyframes ribbon-current { 0%,100% { transform:translate3d(-2px,2px,0) scale(1.012) skewY(-.3deg); opacity:.55; } 50% { transform:translate3d(4px,-5px,0) scale(1.026) skewY(.5deg); opacity:.95; } }
@keyframes chrome-breath { 0%,100% { opacity:.18; transform:translateX(-6%); } 50% { opacity:.6; transform:translateX(7%); } }

/* Editorial services: rules, sequence and typographic rhythm. */
.services { background:#f3f6f4; }
.service-grid { column-gap:35px; row-gap:25px; }
.service { min-height:455px; padding:35px 18px 34px 0; }
.service:before { right:0; background:#b8c9c4; }
.service:after { inset:0 -12px; background:linear-gradient(110deg,#dfece780,transparent 80%); }
.service .number { font-weight:400; color:#6f9895; font-size:43px; }
.service h3 { font-weight:500; font-size:clamp(23px,2.05vw,31px); line-height:1.24; letter-spacing:-.035em; }
.service p { color:#57615e; }
.tags { margin-top:22px; }
.tags li { font-size:12px; color:#657470; border-color:#d2dfd9; }
.service-link { font-size:11px; }
.motion-enabled .service-ready h3 { opacity:1; transform:none; }
.motion-enabled .service-ready h3 .type-inner { transform:translateY(110%); opacity:1; transition:transform .85s var(--ease-cinema); transition-delay:calc(130ms + var(--line-index)*75ms); }
.motion-enabled .service-ready.in-view h3 .type-inner { transform:none; }
.motion-enabled .service-ready:before { transition-delay:70ms; }
.motion-enabled .service-ready>p { transition-delay:230ms; }
.motion-enabled .service-ready .tags li { transition-delay:calc(310ms + var(--tag-index)*40ms); }
.motion-enabled .service-ready .service-link { transition-delay:380ms; }
.service:hover h3 { transform:translateX(4px); }
.service:hover:before { background:var(--teal); }

.social .split { align-items:start; }
.social-image { height:700px; box-shadow:0 24px 54px -35px #104a4a44; }
.social .split>div { padding-top:54px; padding-bottom:95px; }
.social .lead { color:#52605d; }
.social .micro-grid { margin-top:32px; margin-bottom:34px; }
.micro-grid span { font-size:12px; letter-spacing:.035em; padding-block:18px; }
.motion-enabled .micro-grid .motion-copy { transition-delay:calc(var(--feature-index)*65ms); }
@media(min-width:1100px) { .social-image { position:sticky; top:125px; } .social .split { min-height:795px; } }
.motion-enabled .image-reveal { transition:clip-path 1.35s var(--ease-cinema); }
.motion-enabled .image-reveal.reveal-left { clip-path:inset(0 100% 0 0); }
.motion-enabled .image-reveal.reveal-left.in-view { clip-path:inset(0); }

/* Search behaves like a quiet architectural network. */
.search { background:#092c2e; }
.search:before { background:radial-gradient(ellipse at 85% 45%,#21636655,transparent 65%); opacity:calc(.4 + var(--section-progress,0)*.6); }
.search:after { right:8%; opacity:.5; }
.search-type { padding-top:20px; }
.search-type>p:not(.search-note) { font-weight:500; letter-spacing:-.035em; position:relative; transition:color .7s,translate .9s var(--ease-cinema); }
.search-type>p.is-current:not(.search-note) { color:#a4edef; translate:8px 0; }
.search-keyword-ready:after { box-shadow:0 0 20px #95f7f32b; }
.search-path { padding-top:28px; min-height:156px; gap:20px; }
.search-path:before,.search-path:after { top:28px; }
.search-path>span { padding:30px 14px 24px 0; font-size:12px; letter-spacing:.02em; border-bottom:1px solid #41656670; }
.search-path>span:before { top:24px; width:7px; height:7px; }
.search-path>span.is-current { color:#b2f3f2; border-color:#7ad2d699; }
.search-path.in-view:after { background:linear-gradient(90deg,#569395,#c5ffff,#569395); box-shadow:0 0 14px #8ce5e745; }
.search .split { min-height:675px; }
.search .search-note { color:#b4cac7; line-height:1.8; }
.search-type small { color:#84a5a3; font-size:12px; line-height:1.7; }

.web-art { box-shadow:0 25px 55px -32px #11404238; border:1px solid #d1dfda; }
.browser-edge { position:absolute; z-index:4; top:0; left:0; right:0; height:26px; display:flex; align-items:center; gap:5px; padding-inline:12px; border-bottom:1px solid #ffffff7a; background:#ffffff5c; backdrop-filter:blur(8px); }
.browser-edge i { width:4px; height:4px; border:1px solid #7b9997; border-radius:50%; }
.web-art img { transition:filter .9s,rotate 1s var(--ease-cinema); rotate:var(--look-r,0deg); }
.web-timer { top:43px; background:#fafffbe8; box-shadow:0 9px 28px #284e4e0d; }
.timer-value { font-weight:400; letter-spacing:-.075em; }
.web-art:after { content:''; position:absolute; z-index:2; left:0; right:0; top:0; height:1px; background:#abf9f0; box-shadow:0 0 10px #90e7e099; transform:translateY(calc(var(--web-progress,0)*480px)); opacity:calc(.8 - var(--web-progress,0)*.6); pointer-events:none; }
.web-features p { font-size:12px; letter-spacing:.025em; padding-block:27px; }
.web-features span { font-weight:400; }
.web .button { margin-top:30px; }

.why { background:#eef3f0; }
.principles p { font-weight:500; line-height:1.5; font-size:clamp(20px,1.65vw,27px); letter-spacing:-.035em; }
.principles p:before { height:1px; background:#9eb7b0; }
.principles p em { font-weight:400; }
.layers li { background:linear-gradient(125deg,#eff7f3,#fbfdfb); border-top:1px solid #ffffff; border-bottom:1px solid #c9ddd440; border-left-color:#68aaa7; box-shadow:0 18px 35px -24px #25545255; transition:transform 1s var(--ease-cinema),opacity .75s,border-color .5s; }
.layers li:hover { border-left-color:#087f85; }
.strategy-detail { box-shadow:0 20px 45px -30px #1746474a; }
.portfolio { background:#f5f7f5; }
.portfolio-grid { grid-template-columns:1.08fr .92fr; gap:70px 65px; }
.project:nth-child(2n) { margin-top:140px; }
.project-image-mask { box-shadow:0 20px 45px -35px #0b343343; }
.project img { transition:transform 1.25s var(--ease-cinema),filter .9s; }
.project:hover img { transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.055); }
.project-image-mask:after { background:linear-gradient(0deg,#092e2e7a,transparent 38%); }
.project>span { padding-block:23px; }
.project b { font-weight:500; letter-spacing:-.025em; }
.project small { font-size:11px; letter-spacing:.04em; }
.motion-enabled .project-ready:nth-child(2n) .project-image-mask { clip-path:inset(0 0 0 100%); }
.motion-enabled .project-ready.in-view:nth-child(2n) .project-image-mask { clip-path:inset(0); }
.process-list li { transition:background .7s; }
.process-list li.is-current { background:linear-gradient(90deg,#edf6f0,transparent 65%); }
.process-list li.is-current>span { color:#0b858b; }
.process-list h3 { font-weight:500; letter-spacing:-.04em; }
.industry-list span { font-size:12px; letter-spacing:.025em; }
.about { position:relative; }
.about:before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,#3f8e88,transparent); }
.articles>a { position:relative; transition:background .5s,transform .6s var(--ease-cinema); }
.articles>a:hover { background:#edf5f0; transform:translateY(-4px); }
.articles h3 { font-weight:500; }
.final-cta { background:#0e292a; }
.final-cta:before { content:''; position:absolute; pointer-events:none; inset:0; background:radial-gradient(ellipse at 100% 100%,#27646655,transparent 75%); transform:translateY(calc(var(--scene-progress,0)*-20px)); }
.final-cta>.wrap { position:relative; }
.final-cta h2 { font-weight:500; letter-spacing:-.04em; line-height:1.16; }
.contact form { border-top:1px solid #bdcfc8; padding-top:32px; }
.contact input:not([type=checkbox]),.contact select,.contact textarea { transition:border-color .35s,background .35s; }
.contact input:focus,.contact select:focus,.contact textarea:focus { border-color:var(--teal); background:#f4faf6; }
.contact label { font-size:14px; }
.contact .consent span,.form-note { font-size:12px; }
.button { min-height:46px; font-weight:500; letter-spacing:.045em; }
.button:before { transition:transform .6s var(--ease-cinema); }
.button:hover { box-shadow:0 11px 25px -12px #17464766; }
.text-link:after { transform-origin:right; }
.text-link:hover:after { transform:scaleX(.65); transform-origin:left; }
@media(min-width:1600px) { .hero h1{font-size:71px}.hero-art{height:740px}.hero .lead{font-size:18px}.social-image{height:790px}.social .split{min-height:900px} }
@media(max-width:1150px) { .hero { gap:30px; }.hero h1{font-size:4.3vw}.hero-art{height:590px}.service-grid{column-gap:25px}.service{padding-right:8px}.service h3{font-size:25px}.portfolio-grid{gap:50px 40px}.social .split>div{padding-top:24px;padding-bottom:25px}.social-image{height:650px}.search-path>span{font-size:11px} }
@media(max-width:900px) { .hero h1{font-size:4.5vw}.hero-art{height:570px}.hero-copy{padding-top:20px}.hero .eyebrow{letter-spacing:.03em}.header nav a{font-size:24px;padding:13px 0}.social-image{height:565px}.social .split>div{padding:0}.service-grid{column-gap:0}.service{min-height:460px}.search .split{min-height:640px}.search-path>span{font-size:10px}.web-features p{font-size:11px}.portfolio-grid{gap:45px 32px}.project:nth-child(2n){margin-top:95px}.web-art:after{transform:translateY(calc(var(--web-progress,0)*360px))} }
@media(max-width:640px) {
  h1,h2 { font-weight:500; line-height:1.18; }
  .hero { padding-top:35px; gap:34px; }
  .hero-copy { padding-top:0; }
  .hero h1 { font-size:clamp(30px,8.8vw,40px); line-height:1.16; letter-spacing:-.045em; }
  .hero h1 .type-line:nth-child(3) { margin-top:24px; }
  .hero .lead { max-width:none; font-size:16px; line-height:1.8; margin-top:28px; }
  .hero .eyebrow { font-size:9px; letter-spacing:.025em; margin-bottom:24px; }
  .hero-art { height:475px; }
  .hero-art figcaption { font-size:8px; padding:12px; backdrop-filter:none; }
  .hero .button { padding:18px 20px; }
  .hero .actions { gap:22px; }
  .product-stage { transform:translate3d(0,var(--drift,0px),0) scale(1.025); }
  .product-scene .product-stage img { object-position:52% 69%; }
  .product-scene .phone-plane img { transform:translate(2%,-6%) scale(.88); }
  .phone-plane { animation-name:phone-suspension-mobile; animation-duration:9s; translate:none; rotate:none; }
  .wave-plane { animation-duration:11s; }
  .stage-light { display:none; }
  @keyframes phone-suspension-mobile { 0%,100%{transform:translateY(1px) rotate(-.15deg)}50%{transform:translateY(-3px) rotate(.2deg)} }
  .section { padding-block:74px; }
  h2,.position h2,.social h2,.search h2,.web h2,.why h2,.strategy h2,.industries h2,.about h2,.insights h2,.contact h2,.portfolio h2 { font-size:clamp(29px,8.55vw,39px); line-height:1.2; letter-spacing:-.043em; }
  .section-top>.meta { display:none; }
  .position-copy p { line-height:1.8; }
  .statement { font-size:18px!important; line-height:1.6; }
  .service { min-height:0; padding-block:31px!important; }
  .service .number { font-size:30px; }
  .service h3 { font-size:24px; line-height:1.28; }
  .service p { font-size:16px; }
  .tags li { font-size:12px; }
  .service-link { font-size:11px; }
  .social-image { height:490px; }
  .social .split { gap:39px; }
  .social .split>div { padding:0; }
  .micro-grid span { font-size:11px; padding-block:17px; }
  .social .button { font-size:11px; }
  .search .split { min-height:0; gap:36px; }
  .search-type { padding:0; }
  .search-type>p:not(.search-note) { font-size:clamp(28px,8.2vw,37px); }
  .search-type>p.is-current:not(.search-note) { translate:3px 0; }
  .search-path { min-height:0; padding:0; gap:25px 20px; }
  .search-path>span { font-size:11px; padding:26px 0 15px; }
  .search-path>span:before { top:9px; }
  .search-path>span:after { top:12px; }
  .web-timer { top:40px; backdrop-filter:none; }
  .web-art { border:0; }
  .browser-edge { backdrop-filter:none; height:24px; }
  .web-art:after { display:none; }
  .web-features p { font-size:10px; padding-block:23px; gap:12px; }
  .web .button { margin-top:28px; font-size:11px; }
  .principles p { font-size:17px; line-height:1.55; }
  .principles em { font-size:14px; }
  .layers li { font-size:24px; line-height:1.28; }
  .portfolio-grid { grid-template-columns:1fr; gap:40px; }
  .project:nth-child(n) { margin-top:0; }
  .project small { font-size:10px; }
  .project>span { padding-block:18px; }
  .motion-enabled .project-ready:nth-child(2n) .project-image-mask { clip-path:inset(12% 0 12% 0); }
  .motion-enabled .project-ready.in-view:nth-child(2n) .project-image-mask { clip-path:inset(0); }
  .process-list h3 { font-size:23px; }
  .industry-list span { font-size:11px; }
  .articles h3 { font-size:23px; line-height:1.45; }
  .final-cta h2 { font-size:clamp(28px,7.9vw,36px); line-height:1.22; }
  .contact form { padding-top:25px; }
  .contact label { font-size:14px; }
  .contact .consent span,.contact .form-note { font-size:12px; }
  .mobile-cta { font-size:10px; padding:12px 17px; min-height:40px; right:20px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); border-radius:2px; box-shadow:0 8px 22px -10px #17464755; }
  .motion-enabled .type-ready .type-inner { transition-duration:.75s; transition-delay:calc(var(--line-index,0)*65ms); }
  .motion-enabled .type-ready .teal-line .type-inner { transition-delay:calc(var(--line-index,0)*65ms + 45ms); }
  .motion-enabled .image-reveal { transition-duration:.95s; }
  .intro-active .hero-art { animation-duration:1.1s; animation-name:visual-intro-mobile; }
  .motion-enabled .service-ready .tags li { transition-delay:calc(240ms + var(--tag-index)*28ms); }
}
@media(max-width:370px) { .hero h1{font-size:8.6vw}.hero .actions{gap:18px}.hero .button{padding-inline:18px}.hero .text-link{font-size:10px}.hero-art{height:445px}h2,.position h2,.social h2,.search h2,.web h2,.why h2,.strategy h2,.industries h2,.about h2,.insights h2,.contact h2,.portfolio h2{font-size:8.5vw}.service h3{font-size:23px}.final-cta h2{font-size:7.7vw} }
.motion-paused .phone-plane,.motion-paused .wave-plane,.motion-paused .stage-light { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) {
  .product-stage { display:none; }
  .layers-loaded .product-fallback { opacity:1; }
  .phone-plane,.wave-plane,.stage-light { animation:none; }
  .social-image { position:relative; top:auto; }
  .social .split { min-height:0; }
  .motion-enabled .service-ready h3 .type-inner { transform:none!important; }
  .motion-enabled .type-ready .type-inner,.intro-active .hero .type-inner { transform:none!important;opacity:1!important;animation:none!important;transition:none!important; }
  .search-type>p.is-current:not(.search-note) { translate:none; }
  .web-art:after { display:none; }
  .project:hover img,.articles>a:hover { transform:none; }
  .final-cta:before { transform:none; }
  .header .logo:hover { transform:none; }
}
/* Show the complete product while the wide studio backdrop retains its scale. */
.product-scene .phone-plane img { object-fit:contain; object-position:50% 50%; transform:translate(2%,-1.5%) scale(.96); }
.search-path.in-view:after { background-size:200% 100%; animation:network-current 8s linear infinite; animation-play-state:paused; }
.search.scene-active .search-path.in-view:after { animation-play-state:running; }
@keyframes network-current { from{background-position:200% 50%}to{background-position:0% 50%} }
@media(max-width:640px) { .product-scene .phone-plane img{object-fit:cover;object-position:52% 69%;transform:translate(2%,-6%) scale(.88)} }
@media(prefers-reduced-motion:reduce) { .search-path.in-view:after{animation:none} }
/* Give inline emphasis enough breathing room in both languages and at narrow widths. */
h1,h2 { word-spacing:.035em; }
.hero h1 { word-spacing:.025em; }
.final-cta:before { width:100%; height:100%; z-index:0; }
.final-cta>.wrap { z-index:1; }
.wave-plane { mix-blend-mode:lighten; mask-image:linear-gradient(130deg,transparent 17%,#000 43%,#000 72%,transparent 94%); }
@media(min-width:901px) {
  .search-path>span:nth-child(even) { margin-top:22px; }
  .search-path>span:nth-child(even):after { content:''; position:absolute; width:1px; height:22px; left:3px; top:3px; background:#639fa177; transform-origin:top; }
}
.motion-paused .search-path:after { animation-play-state:paused!important; }
