/* tokens.css */
/* Shared type, spacing and component dimensions. Art-directed values retained. */
:root{
  --font-sans:General Sans,sans-serif;
  --size-10:10px;
  --size-100:100px;
  --size-1000:1000px;
  --size-102:102px;
  --size-105:105px;
  --size-1080:1080px;
  --size-11:11px;
  --size-112:112px;
  --size-113:113px;
  --size-1150:1150px;
  --size-12:12px;
  --size-120:120px;
  --size-1200:1200px;
  --size-122:122px;
  --size-125:125px;
  --size-13:13px;
  --size-133:133px;
  --size-135:135px;
  --size-14:14px;
  --size-145:145px;
  --size-147:147px;
  --size-15:15px;
  --size-155:155px;
  --size-16:16px;
  --size-160:160px;
  --size-164:164px;
  --size-17:17px;
  --size-170:170px;
  --size-174:174px;
  --size-18:18px;
  --size-19:19px;
  --size-192:192px;
  --size-2:2px;
  --size-20:20px;
  --size-21:21px;
  --size-210:210px;
  --size-22:22px;
  --size-23:23px;
  --size-230:230px;
  --size-235:235px;
  --size-24:24px;
  --size-240:240px;
  --size-25:25px;
  --size-26:26px;
  --size-260:260px;
  --size-265:265px;
  --size-270:270px;
  --size-28:28px;
  --size-280:280px;
  --size-3:3px;
  --size-30:30px;
  --size-310:310px;
  --size-32:32px;
  --size-320:320px;
  --size-322:322px;
  --size-325:325px;
  --size-33:33px;
  --size-330:330px;
  --size-34:34px;
  --size-340:340px;
  --size-35:35px;
  --size-350:350px;
  --size-355:355px;
  --size-36:36px;
  --size-360:360px;
  --size-38:38px;
  --size-390:390px;
  --size-4:4px;
  --size-40:40px;
  --size-400:400px;
  --size-410:410px;
  --size-42:42px;
  --size-425:425px;
  --size-44:44px;
  --size-445:445px;
  --size-45:45px;
  --size-450:450px;
  --size-46:46px;
  --size-460:460px;
  --size-470:470px;
  --size-48:48px;
  --size-49:49px;
  --size-5:5px;
  --size-50:50px;
  --size-500:500px;
  --size-51:51px;
  --size-52:52px;
  --size-520:520px;
  --size-530:530px;
  --size-54:54px;
  --size-55:55px;
  --size-550:550px;
  --size-56:56px;
  --size-560:560px;
  --size-58:58px;
  --size-60:60px;
  --size-600:600px;
  --size-620:620px;
  --size-65:65px;
  --size-66:66px;
  --size-67:67px;
  --size-68:68px;
  --size-70:70px;
  --size-710:710px;
  --size-72:72px;
  --size-730:730px;
  --size-750:750px;
  --size-76:76px;
  --size-77:77px;
  --size-78:78px;
  --size-79:79px;
  --size-8:8px;
  --size-800:800px;
  --size-85:85px;
  --size-86:86px;
  --size-90:90px;
  --size-91:91px;
  --size-94:94px;
  --size-98:98px;
  --size-99:99px;
  --space-10:10px;
  --space-100:100px;
  --space-105:105px;
  --space-11:11px;
  --space-12:12px;
  --space-13:13px;
  --space-130:130px;
  --space-14:14px;
  --space-15:15px;
  --space-1550:1550px;
  --space-16:16px;
  --space-17:17px;
  --space-18:18px;
  --space-19:19px;
  --space-2:2px;
  --space-20:20px;
  --space-21:21px;
  --space-22:22px;
  --space-23:23px;
  --space-24:24px;
  --space-25:25px;
  --space-26:26px;
  --space-27:27px;
  --space-28:28px;
  --space-29:29px;
  --space-3:3px;
  --space-30:30px;
  --space-31:31px;
  --space-32:32px;
  --space-33:33px;
  --space-34:34px;
  --space-35:35px;
  --space-36:36px;
  --space-37:37px;
  --space-38:38px;
  --space-4:4px;
  --space-40:40px;
  --space-42:42px;
  --space-44:44px;
  --space-45:45px;
  --space-48:48px;
  --space-5:5px;
  --space-50:50px;
  --space-52:52px;
  --space-55:55px;
  --space-58:58px;
  --space-6:6px;
  --space-60:60px;
  --space-65:65px;
  --space-68:68px;
  --space-7:7px;
  --space-70:70px;
  --space-8:8px;
  --space-9:9px;
  --time-1_15s:1.15s;
  --time-1s:1s;
  --time-44s:44s;
  --time-500ms:500ms;
  --time-650ms:650ms;
  --time-700ms:700ms;
  --time-800ms:800ms;
  --time-850ms:850ms;
  --type-10:10px;
  --type-100:100px;
  --type-105:105px;
  --type-11:11px;
  --type-110:110px;
  --type-12:12px;
  --type-122:122px;
  --type-125:125px;
  --type-13:13px;
  --type-138:138px;
  --type-14:14px;
  --type-15:15px;
  --type-16:16px;
  --type-162:162px;
  --type-17:17px;
  --type-173:173px;
  --type-18:18px;
  --type-19:19px;
  --type-20:20px;
  --type-21:21px;
  --type-22:22px;
  --type-23:23px;
  --type-24:24px;
  --type-25:25px;
  --type-26:26px;
  --type-27:27px;
  --type-28:28px;
  --type-29:29px;
  --type-30:30px;
  --type-31:31px;
  --type-32:32px;
  --type-33:33px;
  --type-34:34px;
  --type-36:36px;
  --type-37:37px;
  --type-38:38px;
  --type-39:39px;
  --type-40:40px;
  --type-42:42px;
  --type-43:43px;
  --type-44:44px;
  --type-45:45px;
  --type-46:46px;
  --type-48:48px;
  --type-49:49px;
  --type-52:52px;
  --type-53:53px;
  --type-55:55px;
  --type-59:59px;
  --type-60:60px;
  --type-61:61px;
  --type-62:62px;
  --type-63:63px;
  --type-64:64px;
  --type-65:65px;
  --type-69:69px;
  --type-72:72px;
  --type-8:8px;
  --type-81:81px;
  --type-87:87px;
  --type-9:9px;
  --type-96:96px;
  --type-98:98px;
}

/* base.css */
@font-face{font-family:General Sans;src:url('assets/fonts/GeneralSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap} /* ds-allow-hardcode: font-face declarations register the approved font name. */
@font-face{font-family:General Sans;src:url('assets/fonts/GeneralSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap} /* ds-allow-hardcode: font-face declarations register the approved font name. */
@font-face{font-family:General Sans;src:url('assets/fonts/GeneralSans-Semibold.woff2') format('woff2');font-weight:600;font-display:swap} /* ds-allow-hardcode: font-face declarations register the approved font name. */
:root{--petrol:#123f3c;--petrol-dark:#082e2b;--citrien:#dbee69;--chalk:#f3f1e9;--paper:#e8e6dc;--ink-soft:#46615b;--chalk-soft:#b9cdc3;--line:rgba(18,63,60,.22);--line-dark:rgba(243,241,233,.3);--error:#a42332;--gutter:clamp(24px,4.4vw,96px);--section:clamp(76px,8vw,144px);--ease:cubic-bezier(.22,.75,.2,1);--radius:8px;--duration:450ms;--motion-lift-sm:12px;--motion-lift-md:18px;--measure:1440px}
*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:var(--size-100)}body{margin:0;background:var(--chalk);color:var(--petrol);font-family:var(--font-sans);font-weight:400;-webkit-font-smoothing:antialiased}body.dialog-open{overflow:hidden}::selection{background:var(--citrien);color:var(--petrol)}img,canvas{display:block;max-width:100%}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{background:none;border:0;padding:0}p,h1,h2,h3,h4,figure,blockquote{margin:0}p{line-height:1.6}ul,ol{margin:0;padding:0}h1,h2,h3,h4{font-weight:500;letter-spacing:-.055em}h2{font-size:clamp(var(--type-40),4.25vw,var(--type-72));line-height:1.06}h3{font-size:clamp(var(--type-27),2.5vw,var(--type-42));line-height:1.15}svg{width:var(--size-24);height:var(--size-24);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:var(--size-2) solid currentColor;outline-offset:var(--size-5)}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}.skip{position:fixed;top:var(--size-12);left:var(--size-12);transform:translateY(-200%);padding:var(--space-16);background:var(--citrien);color:var(--petrol);z-index:100}.skip:focus{transform:none}.section-pad{padding:var(--section) var(--gutter)}.section-label{font-size:var(--type-13);letter-spacing:.015em;font-weight:500;line-height:1.5;margin-bottom:var(--space-28)}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-40);margin-bottom:var(--space-58)}.section-heading>p{font-size:var(--type-16);max-width:var(--size-340)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-30);border-radius:var(--size-99);padding:var(--space-8) var(--space-8) var(--space-8) var(--space-25);min-height:var(--size-58);font-size:var(--type-14);line-height:1.3;font-weight:500}.button-petrol{background:var(--petrol);color:var(--chalk)}.button-acid{background:var(--citrien);color:var(--petrol)}.arrow-disc{display:grid;place-items:center;width:var(--size-42);height:var(--size-42);background:var(--citrien);color:var(--petrol);border-radius:50%;overflow:hidden;flex-shrink:0}.button-acid .arrow-disc{background:var(--petrol);color:var(--citrien)}.arrow-disc svg{transition:transform var(--duration) var(--ease)}.button:hover .arrow-disc svg{transform:rotate(45deg)}.text-link{display:inline-flex;align-items:center;gap:var(--space-18);min-height:var(--size-44);font-size:var(--type-15);line-height:1.4;border-bottom:1px solid currentColor;max-width:100%}.text-link svg{transition:transform var(--duration) var(--ease)}.text-link:hover svg{transform:translateX(var(--size-5))}
/* Opening: one field, a kinetic oval and a clear proposition. */
.header{height:var(--size-94);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);background:var(--petrol);color:var(--chalk);position:relative;z-index:20;border-bottom:1px solid var(--line-dark)}.brand{display:block;width:var(--size-192)}.brand img{width:100%;height:auto}.desktop-nav{display:flex;gap:var(--space-30);align-items:center;font-size:var(--type-14)}.desktop-nav a{padding:var(--space-12) 0;position:relative}.desktop-nav a:after{content:'';position:absolute;left:0;right:0;bottom:var(--size-3);height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--duration) var(--ease)}.desktop-nav a:hover:after{transform:scaleX(1);transform-origin:left}.header-actions{display:flex;align-items:center;gap:var(--space-24)}.button-small{font-size:var(--type-12);min-height:var(--size-45);padding:var(--space-6) var(--space-6) var(--space-6) var(--space-20);gap:var(--space-20)}.button-small .arrow-disc{width:var(--size-33);height:var(--size-33)}.button-small svg{width:var(--size-19)}.menu-toggle{width:var(--size-44);height:var(--size-44);display:flex;flex-direction:column;gap:var(--space-7);align-items:center;justify-content:center}.menu-toggle span{height:var(--size-2);width:var(--size-26);background:currentColor}.hero{background:var(--petrol);color:var(--chalk);padding:var(--space-30) var(--gutter) 0;overflow:hidden;isolation:isolate}.hero-meta{display:flex;justify-content:space-between;align-items:center;font-size:var(--type-12)}.hero-meta>span{color:var(--chalk-soft)}.hero-composition{min-height:var(--size-600);display:grid;grid-template-columns:1.12fr 1fr;align-items:center;position:relative;gap:2%}.hero-copy{padding:var(--space-42) 0 var(--space-48);position:relative;z-index:3}.hero h1{font-size:clamp(var(--type-65),6.8vw,var(--type-122));line-height:.99;letter-spacing:-.066em;margin-bottom:var(--space-32)}.title-line{display:block;overflow:clip;padding-bottom:.085em;margin-bottom:-.085em}.title-line>span{display:block;animation:title-enter var(--time-1_15s) var(--ease) both}.title-line:nth-child(2)>span{animation-delay:.13s}.title-line:nth-child(3)>span{animation-delay:.23s}.hero-copy>p{max-width:var(--size-390);font-size:var(--type-17);line-height:1.6;margin-bottom:var(--space-29)}.hero-art{min-width:0;position:relative;align-self:center;margin:0 -5.5vw 0 -1.7vw;padding:var(--space-40) 0 var(--space-28);z-index:1}.signature-stage{position:relative;overflow:hidden;background:var(--petrol-dark);aspect-ratio:1.39;transform:rotate(-13deg);border-radius:50%;border:1px solid var(--citrien);will-change:transform;isolation:isolate}.signature-picture{height:100%;width:100%;position:relative;transform:rotate(13deg) scale(1.18)}.signature-picture img,.signature-picture canvas{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}.aperture-hit{position:absolute;inset:0;width:100%;height:100%;color:var(--petrol)}.play-orb{display:grid;place-items:center;background:var(--citrien);position:absolute;right:14%;bottom:9%;width:var(--size-66);height:var(--size-66);border-radius:50%;font-size:var(--type-34);transform:rotate(13deg);transition:transform var(--duration) var(--ease)}.aperture-hit:hover .play-orb{transform:rotate(58deg) scale(1.1)}.film-caption{display:flex;justify-content:space-between;align-items:center;width:85%;margin:var(--space-40) auto 0;gap:var(--space-15);font-size:var(--type-12);text-align:left;line-height:1.5}.film-caption>span:last-child{display:flex;align-items:center;gap:var(--space-12);color:var(--citrien)}.film-caption svg{width:var(--size-18)}.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);padding:var(--space-22) 0;border-top:1px solid var(--line-dark);font-size:var(--type-12)}.hero-bottom>a{display:flex;align-items:center;gap:var(--space-34);min-height:var(--size-34)}.hero-bottom>a>span{font-size:var(--type-20)}.hero-bottom>span{color:var(--chalk-soft)}#motion-control{display:flex;align-items:center;gap:var(--space-12);min-height:var(--size-40);font-size:var(--type-12);min-width:var(--size-90)}.hero-bottom button>span:first-child{font-size:var(--type-17)}.clients{padding:var(--space-38) 0 var(--space-52);border-bottom:1px solid var(--line);overflow:hidden}.clients-intro{display:flex;justify-content:space-between;gap:var(--space-24);padding:0 var(--gutter);align-items:center;font-size:var(--type-13)}.clients-intro p{font-weight:500}.clients-intro>span{font-size:var(--type-12);color:var(--ink-soft)}.logo-window{margin-top:var(--space-26);overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 5%,black 95%,transparent)}.logo-track{display:flex;width:max-content;animation:logo-flow var(--time-44s) linear infinite}.logo-group{display:flex;align-items:center}.client-logo{width:clamp(var(--size-145),13vw,var(--size-210));height:var(--size-78);display:grid;place-items:center;padding:var(--space-12) var(--space-24)}.client-logo img{width:100%;height:var(--size-60);object-fit:contain;filter:brightness(0) saturate(100%) opacity(.82)}.logo-bonbon img{height:var(--size-70)}.logo-hpmotors img{height:var(--size-68)}.logo-eighteen img{max-width:var(--size-135)}.logo-terrasolis img{transform:scale(1.18)}.logo-mayanwarrior img{transform:scale(1.06)}.logo-artistamplifier img{transform:scale(1.08)}.logo-viktor img{transform:scale(.88)}.clients:hover .logo-track{animation-play-state:paused}
/* Work: balanced lead project, two distinct follow-ups. */
.work{padding:var(--section) var(--gutter) 0}.project-featured{display:grid;grid-template-columns:1.12fr 1fr;gap:6%;align-items:center;padding-bottom:var(--space-68);border-bottom:1px solid var(--line);margin-bottom:var(--space-68)}.project-visual{position:relative;display:block;width:100%;overflow:hidden;border-radius:var(--radius);isolation:isolate;background:var(--paper);text-align:left}.project-visual>img{width:100%;height:100%;object-fit:cover;transform:scale(1.015);transition:transform var(--time-850ms) var(--ease);will-change:transform}.project-visual:hover>img{transform:scale(1.065)}.project-featured .project-visual{aspect-ratio:1.3;max-height:var(--size-445)}.visual-label{display:none}.project-open{position:absolute;bottom:var(--size-22);right:var(--size-22);display:grid;place-items:center;border-radius:50%;width:var(--size-54);height:var(--size-54);background:var(--citrien);color:var(--petrol);transition:transform var(--duration) var(--ease)}.project-visual:hover .project-open{transform:rotate(45deg)}.project-caption{font-size:var(--type-15)}.project-client{font-size:var(--type-13);font-weight:500;margin-bottom:var(--space-18)}.project-featured h3{font-size:clamp(var(--type-28),3vw,var(--type-49))}.project-detail>p{font-size:var(--type-16);max-width:var(--size-400);margin-top:var(--space-26)}.project-tags{display:flex;gap:var(--space-8) var(--space-16);flex-wrap:wrap;font-size:var(--type-11);color:var(--ink-soft);margin:var(--space-22) 0}.project-tags>span{padding:0 0 var(--space-4);border-bottom:1px solid var(--line)}.project-pair{display:grid;grid-template-columns:1.23fr 1fr;gap:6%}.project-pair .project-visual{aspect-ratio:1.22}.project-pair .project-caption{padding:var(--space-26) 0 0}.project-pair h3{font-size:clamp(var(--type-28),2.8vw,var(--type-44))}.project-product{padding-top:var(--space-100)}.project-product .project-visual{aspect-ratio:1.13}.project-product .project-visual img{object-position:63%}.own-label{font-size:var(--type-10);margin-left:var(--space-10);font-weight:400;color:var(--ink-soft)}.work-close{display:flex;justify-content:space-between;align-items:center;gap:var(--space-25);padding:var(--space-60) 0 var(--section);font-size:var(--type-18)}
/* Services: the selected service owns the adjacent visual. */
.expertise{background:var(--paper)}.expertise .section-heading{align-items:flex-end}.expertise-layout{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:start}.service{border-top:1px solid var(--line)}.service:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.service summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-25);padding:var(--space-27) 0;font-size:clamp(var(--type-27),2.6vw,var(--type-43));letter-spacing:-.04em;line-height:1.25}.service summary>span{display:flex;align-items:center;gap:var(--space-21)}.service summary small{font-size:var(--type-12);letter-spacing:0}.service summary svg{width:var(--size-20);height:var(--size-20);transition:transform var(--duration) var(--ease)}.service[open] summary svg{transform:rotate(45deg)}.service-content{padding:0 var(--space-32) var(--space-30) var(--space-36)}.service-content h3{font-size:var(--type-20);letter-spacing:-.025em;line-height:1.35;margin:var(--space-3) 0 var(--space-13)}.service-content p{font-size:var(--type-15);max-width:var(--size-450)}.service-content ul{list-style:none;margin:var(--space-18) 0 var(--space-17);font-size:var(--type-12);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8) var(--space-15)}.service-content .text-link{font-size:var(--type-13)}.service-stage{height:var(--size-550);position:relative;border-radius:var(--radius);overflow:hidden;isolation:isolate;background:var(--petrol)}.service-scene{height:100%;position:relative;overflow:hidden;animation:scene-in .65s var(--ease) both}.service-brand-image{width:100%;height:100%;object-fit:cover}.scene-tag{position:absolute;bottom:var(--size-22);left:var(--size-22);right:var(--size-22);background:var(--chalk);color:var(--petrol);border-radius:var(--size-99);padding:var(--space-13) var(--space-20);font-size:var(--type-12)}.scene-websites{background:var(--petrol);padding:var(--space-65) 0 var(--space-35) var(--space-40);display:flex;flex-direction:column;justify-content:center;gap:var(--space-35);color:var(--chalk)}.screen-frame{border-radius:var(--size-10) 0 0 var(--size-10);background:var(--chalk);padding:var(--space-8);transform:perspective(var(--size-1000)) rotateY(-11deg) rotateZ(-5deg);width:110%;box-shadow:0 var(--size-18) var(--size-35) rgba(0,0,0,.25)}.screen-chrome{height:var(--size-26);display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-6);color:var(--petrol);font-size:var(--type-9)}.screen-chrome i{background:var(--ink-soft);width:var(--size-4);height:var(--size-4);border-radius:50%}.screen-chrome span{margin-left:var(--space-20)}.screen-frame img{width:100%;aspect-ratio:1.62;object-fit:cover;object-position:top}.screen-note{font-size:var(--type-12);margin-left:var(--space-24)}.scene-marketing{display:grid;place-items:center;padding:var(--space-35);background:var(--citrien)}.marketing-sheet{padding:var(--space-30);background:var(--chalk);border:1px solid var(--petrol);border-radius:var(--radius);width:100%;transform:rotate(-5deg)}.sheet-label{font-size:var(--type-12)}.search-shape{display:flex;align-items:center;gap:var(--space-12);border:1px solid var(--petrol);border-radius:var(--size-50);padding:var(--space-13);margin:var(--space-30) -5px var(--space-25);font-size:var(--type-15)}.channel-stack{display:grid;gap:var(--space-13)}.channel-stack>span{padding:var(--space-15) 0;border-bottom:1px solid var(--line);font-size:var(--type-19);display:flex;justify-content:space-between;gap:var(--space-10)}.channel-stack b{font-weight:400}.sheet-foot{display:block;font-size:var(--type-11);margin-top:var(--space-25)}
/* Connection and the working relationship. */
.connection{background:var(--petrol);color:var(--chalk);overflow:hidden;position:relative}.connection-top{display:flex;justify-content:space-between;gap:var(--space-25)}.connection-top>span{font-size:var(--type-12);color:var(--chalk-soft)}.connection h2{font-size:clamp(var(--type-48),7.4vw,var(--type-125));letter-spacing:-.058em;line-height:1.04;margin:var(--space-20) 0 var(--space-50);position:relative;z-index:2}.connection h2>span{color:var(--citrien)}.connection-bottom{display:grid;grid-template-columns:1fr .68fr;gap:16%;align-items:center}.connection-bottom>p{font-size:var(--type-17);max-width:var(--size-410)}.connection-art{height:var(--size-145);position:relative;width:80%;max-width:var(--size-530)}.connection-ring{position:absolute;left:0;top:0;width:65%;height:100%;border:1px solid var(--citrien);border-radius:var(--size-100);transform:rotate(-8deg)}.connection-disc{position:absolute;right:0;top:0;width:40%;height:100%;border-radius:100%;background:var(--citrien);transform:translateX(-14%)}.connection-art>span{position:absolute;left:18%;top:43%;font-size:var(--type-13)}.connection-art>span:last-child{left:auto;right:11%;color:var(--petrol)}.approach{display:grid;grid-template-columns:1fr 1fr;gap:11%;align-items:start}.approach-intro{position:sticky;top:var(--size-50)}.approach h2{font-size:clamp(var(--type-38),3.7vw,var(--type-60))}.approach-intro>p:not(.section-label){font-size:var(--type-15);max-width:var(--size-340);margin-top:var(--space-25)}.process-object{width:var(--size-240);height:var(--size-210);position:relative;margin-top:var(--space-60)}.process-frame{position:absolute;width:var(--size-160);height:var(--size-160);border:1px solid var(--petrol);left:var(--size-20);top:var(--size-20);transform:rotate(-12deg);border-radius:var(--size-20);transition:transform var(--time-700ms) var(--ease),border-radius var(--time-700ms) var(--ease)}.process-ball{position:absolute;width:var(--size-145);height:var(--size-145);border-radius:50%;background:var(--citrien);left:var(--size-55);top:var(--size-40);transition:transform var(--time-700ms) var(--ease)}#process-count{position:absolute;left:var(--size-94);top:var(--size-91);font-size:var(--type-34);line-height:1}.process-object[data-step="2"] .process-frame{transform:rotate(36deg);border-radius:50%}.process-object[data-step="2"] .process-ball{transform:translate(var(--size-34),-20px) scale(.78)}.process-object[data-step="3"] .process-frame{transform:rotate(90deg);border-radius:var(--size-8)}.process-object[data-step="3"] .process-ball{transform:translate(-37px,var(--size-20)) scale(.72)}.process-steps{list-style:none}.process-steps>li{padding:var(--space-35) 0 var(--space-45);border-top:1px solid var(--line);position:relative}.process-steps>li:last-child{border-bottom:1px solid var(--line)}.process-steps>li:before{content:'';position:absolute;top:-1px;left:0;width:0;height:var(--size-2);background:var(--petrol);transition:width var(--time-800ms) var(--ease)}.process-steps>li.is-current:before{width:100%}.step-count{display:block;font-size:var(--type-12);margin-bottom:var(--space-27)}.process-steps h3{font-size:clamp(var(--type-29),3vw,var(--type-46));margin-bottom:var(--space-21)}.process-steps p{font-size:var(--type-16);max-width:var(--size-460)}.step-result{display:block;font-size:var(--type-12);margin-top:var(--space-26);color:var(--ink-soft)}
/* Proof with names, no unverified counters. */
.testimonials{background:var(--paper)}.quote-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-42)}.quote-top .section-label{margin:0}.quote-buttons{display:flex;gap:var(--space-10)}.quote-buttons button{width:var(--size-48);height:var(--size-48);border:1px solid var(--petrol);border-radius:50%;font-size:var(--type-23);transition:background var(--duration)}.quote-buttons button:hover{background:var(--citrien)}.quote-content{min-height:var(--size-322)}.quote-content figure{animation:quote-in .5s var(--ease) both}.quote-content blockquote{font-size:clamp(var(--type-29),3.85vw,var(--type-61));letter-spacing:-.045em;line-height:1.17;max-width:var(--size-1150)}.quote-content figcaption{display:flex;align-items:center;gap:var(--space-25);margin-top:var(--space-40);font-size:var(--type-13);line-height:1.6}.quote-content figcaption strong{font-weight:500}.quote-content img{object-fit:contain;max-width:var(--size-105);filter:brightness(0)}.quote-initials{display:grid;place-items:center;width:var(--size-58);height:var(--size-58);background:var(--petrol);color:var(--citrien);border-radius:50%;font-size:var(--type-18)}.quote-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-25);font-size:var(--type-11);margin-top:var(--space-27);padding-top:var(--space-23);border-top:1px solid var(--line)}.quote-bottom>a{display:flex;align-items:center;gap:var(--space-12)}.quote-bottom svg{width:var(--size-16);height:var(--size-16)}
.studio{display:grid;grid-template-columns:1fr .8fr;gap:12%;align-items:center}.studio-images{position:relative;padding-bottom:var(--space-130)}.studio-office img{width:100%;aspect-ratio:1.38;object-fit:cover;border-radius:var(--radius)}.studio-office figcaption{font-size:var(--type-11);margin-top:var(--space-12)}.studio-portrait{position:absolute;width:45%;right:-6%;bottom:0;border:var(--size-8) solid var(--chalk);border-radius:var(--radius)}.studio-portrait img{border-radius:var(--size-4);width:100%;aspect-ratio:.85;object-fit:cover;object-position:50% 20%}.studio-copy .lead{font-size:var(--type-22);line-height:1.4;letter-spacing:-.02em;margin:var(--space-25) 0}.studio-copy>p:not(.lead):not(.section-label){font-size:var(--type-15);margin-top:var(--space-19)}.name-detail{margin:var(--space-26) 0 var(--space-22);border-block:1px solid var(--line);font-size:var(--type-14)}.name-detail summary{display:flex;justify-content:space-between;padding:var(--space-18) 0;gap:var(--space-20);align-items:center}.name-detail p{font-size:var(--type-14);padding-bottom:var(--space-20)}.name-detail summary span{font-size:var(--type-24)}.name-detail[open] summary span{transform:rotate(45deg)}
.insights{padding-top:var(--space-50);border-bottom:1px solid var(--line)}.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-26)}.insight{display:block}.insight-cover{height:var(--size-280);border-radius:var(--radius);position:relative;overflow:hidden;isolation:isolate}.cover-brand{background:var(--petrol);color:var(--chalk);padding:var(--space-30)}.cover-word{position:absolute;font-size:var(--type-62);letter-spacing:-.07em;line-height:1;left:var(--size-30);top:var(--size-40);z-index:2}.cover-word.second{top:auto;bottom:var(--size-42);left:auto;right:var(--size-40);color:var(--citrien)}.cover-frame{position:absolute;border:1px solid var(--citrien);width:54%;height:52%;border-radius:50%;left:23%;top:26%;transform:rotate(-28deg);transition:transform var(--time-650ms) var(--ease)}.insight:hover .cover-frame{transform:rotate(40deg) scale(1.12)}.insight-arrow{position:absolute;right:var(--size-17);top:var(--size-17);width:var(--size-32);height:var(--size-32);border-radius:50%;display:grid;place-items:center;font-size:var(--type-21);border:1px solid currentColor;z-index:4;transition:transform var(--duration) var(--ease)}.insight:hover .insight-arrow{transform:rotate(45deg)}.cover-web{background:var(--paper);border:1px solid var(--line)}.mini-window{width:72%;height:85%;background:var(--chalk);border:1px solid var(--petrol);position:absolute;top:var(--size-38);left:11%;border-radius:var(--size-8);transform:rotate(-8deg);padding:var(--space-12) var(--space-20);transition:transform var(--time-650ms) var(--ease)}.mini-window>i{display:block;border-bottom:1px solid var(--line);height:var(--size-11);margin:0 -12px var(--space-16)}.mini-window>span{font-size:var(--type-39);letter-spacing:-.055em;line-height:1.08}.mini-window>div{width:var(--size-77);height:var(--size-77);border-radius:50%;background:var(--citrien);position:absolute;right:10%;bottom:-5px}.insight:hover .mini-window{transform:rotate(0) translateY(-8px)}.cover-ai{background:var(--citrien);color:var(--petrol)}.ai-letter{position:absolute;font-size:var(--type-162);letter-spacing:-.075em;line-height:1;left:var(--size-32);top:var(--size-48)}.ai-circle{position:absolute;width:var(--size-170);height:var(--size-170);border:1px solid var(--petrol);border-radius:50%;right:var(--size-25);top:var(--size-45);transition:transform var(--time-650ms) var(--ease)}.insight:hover .ai-circle{transform:translateX(-35px)}.article-meta{display:block;font-size:var(--type-11);color:var(--ink-soft);margin:var(--space-23) 0 var(--space-13)}.insight h3{font-size:var(--type-26);line-height:1.2;letter-spacing:-.035em;max-width:var(--size-320)}.insight p{font-size:var(--type-14);margin-top:var(--space-13);max-width:var(--size-325)}
.faq{display:grid;grid-template-columns:1fr 1.25fr;gap:8%}.questions details{border-bottom:1px solid var(--line)}.questions details:first-child{border-top:1px solid var(--line)}.questions summary{padding:var(--space-24) 0;display:flex;justify-content:space-between;gap:var(--space-30);font-size:var(--type-17);line-height:1.45;align-items:center}.questions summary span{font-size:var(--type-25);line-height:1}.questions details[open] summary span{transform:rotate(45deg)}.questions details p{font-size:var(--type-15);padding:0 var(--space-30) var(--space-26) 0}
/* A brief with an explicit, honest handoff to email. */
.contact{background:var(--petrol);color:var(--chalk);display:grid;grid-template-columns:1fr 1fr;gap:10%}.contact h2{font-size:clamp(var(--type-55),6.5vw,var(--type-105));letter-spacing:-.06em;line-height:1.04}.contact-intro>p:not(.section-label){font-size:var(--type-17);max-width:var(--size-360);margin:var(--space-30) 0}.contact-direct{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-13);margin-top:var(--space-38)}.contact-direct>a:first-child{font-size:clamp(var(--type-22),2.45vw,var(--type-36));letter-spacing:-.04em;display:flex;gap:var(--space-20);align-items:center}.contact-direct>a:last-child{font-size:var(--type-17)}.project-choices{padding:0;border:0;margin:0 0 var(--space-30)}.project-choices legend{font-size:var(--type-14);margin-bottom:var(--space-16)}.project-choices label{display:inline-block;margin:0 var(--space-5) var(--space-10) 0;position:relative}.project-choices input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.project-choices span{display:block;border:1px solid var(--chalk-soft);border-radius:var(--size-99);padding:var(--space-10) var(--space-16);font-size:var(--type-12)}.project-choices input:checked+span{background:var(--citrien);border-color:var(--citrien);color:var(--petrol)}.project-choices input:focus-visible+span{outline:var(--size-2) solid var(--chalk);outline-offset:var(--size-4)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-25) var(--space-24)}.field{display:flex;flex-direction:column}.field.wide{grid-column:1/-1}.field label{font-size:var(--type-12);margin-bottom:var(--space-6)}.field label>span{color:var(--chalk-soft);font-size:var(--type-11)}.field input,.field textarea,.field select{border:0;border-bottom:1px solid var(--chalk-soft);background:transparent;color:var(--chalk);padding:var(--space-10) 0 var(--space-12);outline-offset:var(--size-4);border-radius:0;min-width:0;width:100%;font-size:var(--type-16);line-height:1.5}.field input,.field select{min-height:var(--size-46)}.field textarea{resize:vertical}.field textarea::placeholder{color:var(--chalk-soft)}.field select option{background:var(--petrol);color:var(--chalk)}.field [aria-invalid=true]{border-color:var(--citrien)}.field-error{font-size:var(--type-12);color:var(--citrien);min-height:0}.field-error:not(:empty){padding-top:var(--space-7)}.form-note{font-size:var(--type-11);color:var(--chalk-soft);margin:var(--space-26) 0 var(--space-24);line-height:1.6}.form-note button{text-decoration:underline;font-size:inherit;display:inline;min-height:var(--size-24)}.form-status{font-size:var(--type-12);margin-top:var(--space-14);color:var(--citrien)}
.footer{background:var(--petrol-dark);color:var(--chalk);padding:var(--space-60) var(--gutter) var(--space-28)}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr .8fr 1.1fr;gap:var(--space-40)}.footer-about>p{font-size:var(--type-20);line-height:1.4;letter-spacing:-.025em}.footer-about>span{display:block;font-size:var(--type-12);line-height:1.6;margin-top:var(--space-30);color:var(--chalk-soft)}.footer h2{font-size:var(--type-12);letter-spacing:0;margin-bottom:var(--space-19);line-height:1.4;color:var(--chalk-soft)}.footer nav,.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12)}.footer nav a,.footer-contact a,.footer address{font-size:var(--type-12);line-height:1.5}.footer address{font-style:normal;margin-top:var(--space-8)}.footer-directions{display:flex;align-items:center;gap:var(--space-10)}.footer-directions svg{width:var(--size-16);height:var(--size-16)}.footer-social{display:flex;gap:var(--space-18);margin-top:var(--space-9)}.footer a:hover{text-decoration:underline;text-underline-offset:var(--size-5)}.footer-logo{display:block;margin:var(--space-70) 0 var(--space-38)}.footer-logo img{width:100%;height:auto}.footer-bottom{font-size:var(--type-10);color:var(--chalk-soft);display:flex;justify-content:space-between;gap:var(--space-20);padding-top:var(--space-23);border-top:1px solid var(--line-dark);align-items:center}.footer-bottom>div{display:flex;gap:var(--space-23);flex-wrap:wrap}.footer-bottom button{font-size:inherit;min-height:var(--size-32)}.legal-entity{display:block;margin-top:var(--space-6)}
/* Complete overlays: menu, project views, film and project brief. */
dialog{background:var(--chalk);color:var(--petrol);border:0;padding:0;border-radius:var(--radius);max-width:calc(100vw - var(--size-48));max-height:calc(100dvh - var(--size-48));width:var(--size-1080);margin:auto;box-shadow:0 var(--size-20) var(--size-100) rgba(0,0,0,.25)}dialog::backdrop{background:rgba(8,46,43,.78);backdrop-filter:blur(var(--size-12))}dialog[open]{animation:dialog-in .35s var(--ease)}.dialog-bar{padding:var(--space-20) var(--space-28);display:flex;justify-content:space-between;align-items:center;gap:var(--space-30);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;background:inherit}.dialog-bar>span{font-size:var(--type-12)}.dialog-bar h2{font-size:var(--type-20);letter-spacing:-.03em}.close-button{display:flex;align-items:center;gap:var(--space-16);font-size:var(--type-12);min-height:var(--size-40)}.close-button>span{font-size:var(--type-30);line-height:1}.menu-panel{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;background:var(--citrien);color:var(--petrol);padding:var(--space-26) var(--gutter) var(--space-36);overflow:auto}.menu-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:var(--space-18);font-size:var(--type-13)}.menu-panel nav{display:grid;width:67%;margin-top:var(--space-24);position:relative;z-index:2}.menu-panel nav>a{display:flex;justify-content:space-between;align-items:center;font-size:clamp(var(--type-28),4.7vw,var(--type-72));letter-spacing:-.05em;line-height:1.1;padding:var(--space-12) 0;border-bottom:1px solid var(--line);transition:padding var(--duration) var(--ease)}.menu-panel nav>a:hover{padding-left:var(--space-20)}.menu-panel nav svg{width:var(--size-30);height:var(--size-30)}.menu-identity{position:absolute;width:var(--size-230);height:var(--size-230);right:7vw;top:31%;background:var(--petrol);border-radius:50%;transform:rotate(-14deg);display:grid;place-items:center}.menu-identity img{width:65%;height:auto}.menu-circle{display:none}.menu-bottom{display:flex;justify-content:space-between;gap:var(--space-30);margin-top:var(--space-36);font-size:var(--type-13)}.case-cover{width:100%;max-height:var(--size-500);object-fit:cover}.case-body{padding:var(--space-40)}.case-body>p:first-child{font-size:var(--type-13);margin-bottom:var(--space-16)}.case-body h2{font-size:var(--type-45);max-width:var(--size-750)}.case-summary{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--space-55);margin:var(--space-30) 0 var(--space-38)}.case-summary p{font-size:var(--type-16)}.case-summary ul{padding-left:var(--space-18);font-size:var(--type-13);line-height:1.9}.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-25)}.case-gallery img{width:100%;aspect-ratio:1.35;object-fit:cover;border-radius:var(--size-4)}.case-gallery figcaption{font-size:var(--type-11);line-height:1.5;margin-top:var(--space-12)}.case-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-25);margin-top:var(--space-40)}.case-note{font-size:var(--type-10);color:var(--ink-soft);margin-top:var(--space-26);max-width:var(--size-800)}.message-dialog,.privacy-dialog{width:var(--size-730);padding:0 var(--space-32) var(--space-30)}.message-dialog .dialog-bar,.privacy-dialog .dialog-bar{padding-inline:0}.message-dialog>p,.privacy-dialog>p{font-size:var(--type-14);margin:var(--space-22) 0}.message-dialog pre{font:var(--size-14)/1.7 General Sans,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--paper);padding:var(--space-25);max-height:44vh;overflow:auto}.message-actions{display:flex;gap:var(--space-25);align-items:center;margin-top:var(--space-22)}.copy-status{font-size:var(--type-12)}.film-dialog-v3{background:var(--petrol-dark);color:var(--chalk);width:var(--size-1200)}.film-dialog-v3 .dialog-bar{border-color:var(--line-dark)}.film-screen{position:relative;aspect-ratio:16/9;background:var(--petrol)}#film-picture{width:100%;height:100%;object-fit:contain}.film-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.film-overlay button{pointer-events:auto;background:var(--citrien);color:var(--petrol);border-radius:var(--size-50);padding:var(--space-16) var(--space-25);font-size:var(--type-14)}.film-screen[data-state=playing] .film-overlay{display:none}.film-progress{height:var(--size-3);background:var(--line-dark);margin:0 var(--space-28)}.film-progress span{display:block;background:var(--citrien);height:100%;width:0}.film-controls-v3{display:flex;align-items:center;gap:var(--space-22);padding:var(--space-15) var(--space-28);font-size:var(--type-12);flex-wrap:wrap}.film-controls-v3 button,.film-controls-v3 a{min-height:var(--size-40);display:flex;align-items:center;gap:var(--space-8)}.film-controls-v3 button:disabled{opacity:.4;cursor:default}.film-controls-v3>a{margin-left:auto}.film-status{padding:0 var(--space-28);font-size:var(--type-12)}.film-transcript{padding:var(--space-15) var(--space-28) var(--space-25);font-size:var(--type-12)}.film-transcript summary{min-height:var(--size-32)}.film-transcript p{margin:var(--space-12) 0;color:var(--chalk-soft)}
/* Motion stays subordinate to content and can be paused everywhere. */
@keyframes title-enter{from{transform:translateY(115%)}to{transform:translateY(0)}}@keyframes logo-flow{to{transform:translateX(-50%)}}@keyframes scene-in{from{clip-path:inset(0 100% 0 0);transform:scale(1.06)}to{clip-path:inset(0);transform:scale(1)}}@keyframes quote-in{from{opacity:0;transform:translateY(var(--motion-lift-sm))}to{opacity:1;transform:none}}@keyframes dialog-in{from{opacity:0;transform:translateY(var(--motion-lift-md)) scale(.985)}to{opacity:1;transform:none}}
.reveal{transition:transform var(--time-800ms) var(--ease),opacity var(--time-800ms) var(--ease)}.reveal.is-waiting{transform:translateY(var(--size-24));opacity:0}.logo-track.is-offscreen{animation-play-state:paused}
@media(min-width:1700px){.hero-composition{min-height:var(--size-710)}.hero-art{margin-right:0}.hero{padding-inline:max(var(--gutter),calc((100vw - var(--space-1550))/2))}.section-pad,.work{padding-inline:max(var(--gutter),calc((100vw - var(--space-1550))/2))}.service-stage{height:var(--size-620)}.insight-cover{height:var(--size-350)}.connection-art{width:85%}}
@media(max-width:1100px){.desktop-nav{gap:var(--space-20)}.header .button{display:none}.hero h1{font-size:7.7vw}.hero-composition{min-height:var(--size-560)}.hero-copy>p{max-width:var(--size-330);font-size:var(--type-16)}.hero-art{margin-left:-30px;margin-right:-5vw}.hero-meta{font-size:var(--type-11)}.hero-meta>span{max-width:var(--size-160);text-align:right}.hero-bottom>span{font-size:var(--type-11)}.section-heading{gap:var(--space-35)}.section-heading>p{max-width:var(--size-260);font-size:var(--type-14)}.project-featured{gap:6%;grid-template-columns:1fr 1fr}.project-featured .project-visual{aspect-ratio:1.08}.project-featured h3{font-size:var(--type-31)}.project-detail>p{font-size:var(--type-14)}.service-stage{height:var(--size-520)}.service-content{padding-left:0;padding-right:0}.service-content ul{grid-template-columns:1fr;font-size:var(--type-12)}.service-content p{font-size:var(--type-14)}.service summary>span{gap:var(--space-14)}.service summary{font-size:var(--type-29)}.expertise-layout{gap:6%}.connection-bottom{gap:7%;grid-template-columns:1fr 1fr}.connection-bottom>p{font-size:var(--type-15)}.connection-art{width:90%;height:var(--size-120)}.approach{gap:9%}.process-steps p{font-size:var(--type-15)}.studio{gap:11%;grid-template-columns:1fr 1fr}.studio-copy .lead{font-size:var(--type-20)}.studio-portrait{width:54%;right:-5%}.insight-cover{height:var(--size-235)}.insight h3{font-size:var(--type-24)}.cover-word{font-size:var(--type-52)}.ai-letter{font-size:var(--type-138);left:var(--size-23)}.ai-circle{width:var(--size-135);height:var(--size-135);right:var(--size-20);top:var(--size-52)}.mini-window>span{font-size:var(--type-32)}.mini-window{padding-left:var(--space-14)}.footer-grid{gap:var(--space-28)}.contact{gap:7%}.contact-direct>a:first-child{font-size:var(--type-25)}.contact h2{font-size:var(--type-63)}}
@media(max-width:760px){:root{--gutter:24px;--section:76px}html{scroll-padding-top:var(--size-24)}.header{height:var(--size-79)}.brand{width:var(--size-164)}.desktop-nav{display:none}.header-actions{gap:0}.hero{padding-top:var(--space-22)}.hero-meta{font-size:var(--type-11)}.hero-meta>span{display:none}.hero-composition{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:0}.hero-copy{padding:var(--space-32) 0 0}.hero h1{font-size:clamp(var(--type-60),10.8vw,var(--type-81));line-height:1.02;margin-bottom:var(--space-24)}.hero-copy>p{max-width:var(--size-360);font-size:var(--type-16);margin-bottom:var(--space-23)}.hero .button{min-height:var(--size-54);font-size:var(--type-13)}.hero .button .arrow-disc{width:var(--size-38);height:var(--size-38)}.hero-art{margin:0 -9px;padding:var(--space-45) 0 var(--space-20)}.signature-stage{aspect-ratio:1.75;transform:rotate(-8deg);width:96%;margin:0 auto}.signature-picture{transform:rotate(8deg) scale(1.15)}.play-orb{width:var(--size-49);height:var(--size-49);font-size:var(--type-26);right:12%;bottom:8%;transform:rotate(8deg)}.film-caption{margin-top:var(--space-26);width:94%;font-size:var(--type-11)}.hero-bottom{padding:var(--space-14) 0;gap:var(--space-20);font-size:var(--type-11)}.hero-bottom>span{display:none}.hero-bottom>a{gap:var(--space-23)}.clients{padding:var(--space-28) 0 var(--space-32)}.clients-intro{align-items:start;gap:var(--space-15)}.clients-intro p{font-size:var(--type-12)}.clients-intro>span{font-size:var(--type-10);max-width:var(--size-155);text-align:right}.logo-window{margin-top:var(--space-15)}.client-logo{width:var(--size-147);height:var(--size-65);padding:var(--space-8) var(--space-22)}.client-logo img{height:var(--size-51)}.logo-bonbon img{height:var(--size-56)}.section-heading{display:block;margin-bottom:var(--space-35)}.section-label{font-size:var(--type-12);margin-bottom:var(--space-22)}.section-heading>p{margin-top:var(--space-21);max-width:var(--size-360);font-size:var(--type-15)}h2{font-size:clamp(var(--type-38),8.5vw,var(--type-55))}.project-featured{display:block;padding-bottom:var(--space-44);margin-bottom:var(--space-44)}.project-featured .project-visual{max-height:none;aspect-ratio:1.4}.project-featured .project-caption{padding-top:var(--space-24)}.project-featured h3{font-size:var(--type-30)}.project-detail>p{margin-top:var(--space-18);font-size:var(--type-15);max-width:var(--size-400)}.project-client{font-size:var(--type-12);margin-bottom:var(--space-13)}.project-tags{margin:var(--space-17) 0;font-size:var(--type-10)}.project-open{width:var(--size-45);height:var(--size-45);bottom:var(--size-17);right:var(--size-17)}.project-open svg{width:var(--size-22)}.project-pair{display:block}.project-pair h3{font-size:var(--type-30)}.project-pair .project-visual{aspect-ratio:1.34}.project-product{padding-top:var(--space-45)}.project-product .project-visual{aspect-ratio:1.4}.project-pair .project-caption{padding-top:var(--space-24)}.work-close{display:block;padding:var(--space-44) 0 var(--space-70);font-size:var(--type-16)}.work-close .button{margin-top:var(--space-22);font-size:var(--type-13)}.expertise-layout{display:flex;flex-direction:column;gap:var(--space-30)}.service-list{width:100%}.service summary{font-size:var(--type-30);padding:var(--space-24) 0}.service summary small{font-size:var(--type-11)}.service-content{padding-bottom:var(--space-27)}.service-content p{font-size:var(--type-15)}.service-content ul{grid-template-columns:1fr 1fr;font-size:var(--type-11)}.service-stage{height:var(--size-390);width:100%;order:0}.scene-tag{font-size:var(--type-11);padding:var(--space-12) var(--space-16);left:var(--size-17);right:var(--size-17);bottom:var(--size-17)}.scene-marketing{padding:var(--space-32) var(--space-40)}.marketing-sheet{padding:var(--space-20)}.sheet-label,.sheet-foot{font-size:var(--type-10)}.search-shape{margin:var(--space-20) -4px var(--space-13);padding:var(--space-9);font-size:var(--type-13)}.channel-stack{gap:var(--space-6)}.channel-stack>span{font-size:var(--type-17);padding:var(--space-10) 0}.scene-websites{padding:var(--space-42) 0 var(--space-25) var(--space-27);gap:var(--space-27)}.screen-frame{width:108%}.connection-top>span{display:none}.connection h2{font-size:clamp(var(--type-42),9.3vw,var(--type-69));margin:var(--space-14) 0 var(--space-30)}.connection-bottom{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-32)}.connection-art{width:86%;height:var(--size-105);margin:var(--space-8) 0}.connection-bottom>p{font-size:var(--type-16);max-width:var(--size-450)}.connection-art>span{font-size:var(--type-11)}.approach{display:block}.approach-intro{position:static}.approach h2{font-size:var(--type-38)}.approach-intro>p:not(.section-label){font-size:var(--type-15);margin-top:var(--space-22)}.process-object{display:none}.process-steps{margin-top:var(--space-35)}.process-steps>li{padding:var(--space-25) 0 var(--space-30)}.step-count{font-size:var(--type-11);margin-bottom:var(--space-22)}.process-steps h3{font-size:var(--type-30);margin-bottom:var(--space-18)}.process-steps p{font-size:var(--type-15)}.step-result{font-size:var(--type-11);margin-top:var(--space-20)}.quote-top{margin-bottom:var(--space-28)}.quote-buttons{gap:var(--space-8)}.quote-buttons button{width:var(--size-40);height:var(--size-40);font-size:var(--type-19)}.quote-content{min-height:var(--size-340)}.quote-content blockquote{font-size:var(--type-32);line-height:1.18}.quote-content figcaption{margin-top:var(--space-29);font-size:var(--type-12);gap:var(--space-18)}.quote-bottom{font-size:var(--type-10);align-items:flex-end;gap:var(--space-25)}.quote-bottom>a{max-width:var(--size-235);line-height:1.5}.quote-bottom>span{white-space:nowrap}.studio{display:flex;flex-direction:column;gap:var(--space-45);align-items:stretch}.studio-images{padding-bottom:var(--space-105);margin-right:var(--space-12)}.studio-portrait{width:43%;right:-12px}.studio-copy .lead{font-size:var(--type-21)}.studio-copy>p:not(.lead):not(.section-label){font-size:var(--type-15)}.insights{padding-top:0}.insight-grid{grid-template-columns:1fr;gap:var(--space-36)}.insight-cover{height:var(--size-265)}.insight h3{font-size:var(--type-28);max-width:var(--size-390)}.insight p{font-size:var(--type-14);max-width:var(--size-390)}.article-meta{margin-top:var(--space-18)}.cover-word{font-size:var(--type-69)}.cover-frame{width:45%;height:57%}.mini-window{width:68%;height:90%;top:var(--size-30);left:16%}.mini-window>span{font-size:var(--type-46)}.ai-letter{font-size:var(--type-173);top:var(--size-40);left:17%}.ai-circle{width:var(--size-170);height:var(--size-170);right:16%;top:var(--size-44)}.faq{display:block}.questions{margin-top:var(--space-32)}.questions summary{font-size:var(--type-16);gap:var(--space-22);padding:var(--space-22) 0}.questions details p{font-size:var(--type-14);padding-right:0}.contact{display:block}.contact h2{font-size:var(--type-60)}.contact-intro>p:not(.section-label){font-size:var(--type-16);margin:var(--space-23) 0}.contact-direct{margin:var(--space-25) 0 var(--space-40);gap:var(--space-12)}.contact-direct>a:first-child{font-size:var(--type-27)}.contact-direct>a:last-child{font-size:var(--type-16)}.project-choices legend{font-size:var(--type-13)}.form-grid{gap:var(--space-22) var(--space-16)}.field label{font-size:var(--type-12)}.field label>span{font-size:var(--type-10)}.field input,.field textarea,.field select{font-size:var(--type-16)}.project-choices span{padding:var(--space-9) var(--space-14);font-size:var(--type-11)}.form-note{font-size:var(--type-11)}.footer{padding:var(--space-45) var(--gutter) var(--space-23)}.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-32) var(--space-20)}.footer-about{grid-column:1/-1;display:flex;justify-content:space-between;gap:var(--space-25);align-items:flex-end}.footer-about>p{font-size:var(--type-19)}.footer-about>span{font-size:var(--type-10);margin:0}.footer-contact{grid-column:1/-1}.footer-logo{margin:var(--space-45) 0 var(--space-28)}.footer-bottom{display:block;font-size:var(--type-9)}.footer-bottom>div{margin-top:var(--space-16);gap:var(--space-20)}.legal-entity{display:inline-block;margin-left:var(--space-6)}.footer nav,.footer-contact{gap:var(--space-11)}.footer h2{margin-bottom:var(--space-9);font-size:var(--type-11)}.footer nav a,.footer-contact a,.footer address{font-size:var(--type-12)}.menu-panel{padding:var(--space-20) var(--gutter)}.menu-top{font-size:var(--type-12)}.menu-panel nav{width:100%;margin-top:var(--space-24)}.menu-panel nav>a{font-size:var(--type-37);padding:var(--space-18) 0}.menu-identity{display:none}.menu-bottom{flex-direction:column;font-size:var(--type-12);gap:var(--space-14);margin-top:var(--space-29)}dialog{max-width:calc(100vw - var(--size-18));max-height:calc(100dvh - var(--size-20))}.dialog-bar{padding:var(--space-12) var(--space-18);gap:var(--space-15)}.dialog-bar h2{font-size:var(--type-16)}.dialog-bar>span{font-size:var(--type-10)}.close-button{font-size:var(--type-11);gap:var(--space-11);min-height:var(--size-35)}.case-cover{max-height:var(--size-320);aspect-ratio:1.35}.case-body{padding:var(--space-25) var(--space-20)}.case-body h2{font-size:var(--type-33)}.case-summary{display:block;margin:var(--space-25) 0}.case-summary p{font-size:var(--type-14)}.case-summary ul{font-size:var(--type-12);margin-top:var(--space-19)}.case-gallery{grid-template-columns:1fr;gap:var(--space-25)}.case-bottom{flex-direction:column;gap:var(--space-20);align-items:flex-start;margin-top:var(--space-30)}.case-note{font-size:var(--type-10)}.message-dialog,.privacy-dialog{padding:0 var(--space-20) var(--space-25)}.message-dialog>p,.privacy-dialog>p{font-size:var(--type-13)}.message-dialog pre{font-size:var(--type-12);padding:var(--space-17);max-height:40vh}.message-actions{align-items:flex-start;flex-direction:column;gap:var(--space-15)}.message-actions .button{font-size:var(--type-12)}.film-controls-v3{padding:var(--space-10) var(--space-18);gap:var(--space-13);font-size:var(--type-11)}.film-controls-v3>a{margin-left:0}.film-progress{margin-inline:var(--space-18)}.film-transcript{padding:var(--space-15) var(--space-18) var(--space-20);font-size:var(--type-11)}.film-status{padding-inline:var(--space-18)}.film-overlay button{font-size:var(--type-12);padding:var(--space-12) var(--space-20)}}
@media(max-width:370px){:root{--gutter:20px}.hero h1{font-size:var(--type-55)}.hero-copy>p{font-size:var(--type-15)}.hero .button{font-size:var(--type-12)}.film-caption{font-size:var(--type-10);gap:var(--space-10)}.service summary{font-size:var(--type-27)}.service-content ul{grid-template-columns:1fr}.scene-marketing{padding-inline:var(--space-24)}.quote-content blockquote{font-size:var(--type-29)}.contact h2{font-size:var(--type-53)}.form-grid{grid-template-columns:1fr}.field.wide{grid-column:auto}.menu-panel nav>a{font-size:var(--type-32)}.footer-about>p{font-size:var(--type-17)}.connection h2{font-size:var(--type-39)}.project-featured h3{font-size:var(--type-27)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.title-line>span,.reveal.is-waiting{transform:none!important;opacity:1!important}.signature-stage{will-change:auto}.logo-track{animation:none!important}.logo-window{overflow-x:auto;mask-image:none}.logo-group[aria-hidden=true]{display:none}}

/* Optical logo sizes and persistent access to the navigation. */
.header{position:sticky;top:0}.hero-meta{padding-top:0}.logo-mndeluxe img{transform:scale(1.75)}.logo-dermaart img{transform:scale(1.25)}.logo-melliere img{transform:scale(.84)}.signature-picture img,.signature-picture canvas{object-fit:contain}
@media(max-width:760px){html{scroll-padding-top:var(--size-100)}.header{height:var(--size-79)}.logo-mndeluxe img{transform:scale(1.7)}}

img{height:auto}
@media(max-width:760px){.hero-art{width:calc(100% + var(--size-18));align-self:stretch}}
@media(min-width:761px){.approach-intro{top:var(--size-125)}}

/* style.css */


/* V5. Cinematic opening, project-led imagery and an editorial studio identity. */
:root{--hero-title:clamp(56px,7vw,116px);--quote-size:clamp(21px,1.8vw,30px);--score-size:clamp(86px,10vw,160px);--tower-title:clamp(42px,8vw,126px);--ink-on-photo:#fff;--photo-shade:rgba(0,20,18,.7);--review-tint:#e4e8db;--campaign-back:#201713;--progress:0}
.header{height:var(--size-86);border-bottom-color:var(--line-dark)}
.header:after{content:'';height:var(--size-2);position:absolute;bottom:-1px;left:0;width:100%;background:var(--citrien);transform:scaleX(var(--progress));transform-origin:left;pointer-events:none}
.hero-v5{padding:var(--space-28) var(--gutter) 0;overflow:clip}
.hero-v5 .hero-meta{font-size:var(--type-12);letter-spacing:.04em}
.hero-intro{display:grid;grid-template-columns:1.7fr 1fr;gap:6%;align-items:end;padding:var(--space-38) 0 var(--space-45)}
.hero-v5 h1{font-size:var(--hero-title);line-height:.99;letter-spacing:-.06em;margin:0}
.hero-description{padding:0 0 var(--space-6);max-width:var(--size-340)}
.hero-description>p{font-size:clamp(var(--type-17),1.45vw,var(--type-23));line-height:1.55;margin-bottom:var(--space-22)}
.hero-description .text-link{font-size:var(--type-13);border-color:var(--chalk-soft)}
.hero-cinema{margin:0 calc(var(--gutter)*-1);position:relative}
.hero-v5 .signature-stage{aspect-ratio:16/9;width:100%;max-height:none;transform:none;border-radius:0;border:0;background:var(--petrol);will-change:auto}
.hero-v5 .signature-picture{width:100%;height:100%;transform:none}
.hero-v5 .signature-picture img,.hero-v5 .signature-picture canvas{width:100%;height:100%;object-fit:contain}
.cinema-hit{position:absolute;inset:0;width:100%;height:100%;z-index:2;cursor:pointer}
.cinema-play{position:absolute;right:var(--gutter);bottom:var(--size-33);display:flex;align-items:center;gap:var(--space-16);padding:var(--space-16) var(--space-22);background:var(--chalk);color:var(--petrol);text-align:left;transition:background var(--duration),transform var(--duration) var(--ease)}
.cinema-play>svg{width:var(--size-20);height:var(--size-28);fill:currentColor;stroke:none}
.cinema-play>span{font-size:var(--type-14);line-height:1.4;font-weight:500}
.cinema-play small{display:block;font-size:var(--type-10);line-height:1.5;font-weight:400;color:var(--ink-soft);margin-top:var(--space-3)}
.cinema-hit:hover .cinema-play{background:var(--citrien);transform:translateY(-5px)}
.cinema-caption{position:absolute;left:var(--gutter);bottom:var(--size-48);font-size:var(--type-12);color:var(--chalk);padding:var(--space-8) var(--space-12);background:var(--petrol)}
.hero-v5 .hero-bottom{padding:var(--space-15) 0;border-top:0}
.hero-v5 .hero-bottom>span{color:var(--chalk)}
.clients{padding-top:var(--space-32);padding-bottom:var(--space-38)}
.section-heading{margin-bottom:var(--space-50)}
.expertise .section-heading>p{max-width:var(--size-360)}
.expertise .service-stage{height:auto;aspect-ratio:1.05;background:var(--paper);border-radius:0}
.expertise .service-scene{display:block;padding:0;background:none;height:100%}
.expertise .service-scene>img{width:100%;height:calc(100% - var(--size-49));object-fit:cover}
.expertise .scene-websites>img{object-position:50%;}
.expertise .service-scene figcaption{height:var(--size-49);display:flex;align-items:center;justify-content:space-between;gap:var(--space-14);font-size:var(--type-11);padding:0 var(--space-2);color:var(--petrol)}
.expertise figcaption strong{font-weight:500}
.expertise figcaption>span{color:var(--ink-soft)}
.campaign-duo{height:calc(100% - var(--size-49));display:grid;grid-template-columns:1fr 1fr;gap:var(--space-17);padding:var(--space-20) var(--space-24);background:var(--campaign-back);overflow:hidden}
.campaign-duo img{width:100%;height:auto;align-self:center;box-shadow:0 var(--size-16) var(--size-28) var(--photo-shade)}
.campaign-duo img:first-child{transform:translateY(-8%)}
.campaign-duo img:last-child{transform:translateY(8%)}
.scene-marketing:not([hidden]) .campaign-duo img:first-child{animation:campaign-rise var(--time-1s) var(--ease) both}
.scene-marketing:not([hidden]) .campaign-duo img:last-child{animation:campaign-fall var(--time-1s) var(--ease) both}
@keyframes campaign-rise{from{transform:translateY(30%);opacity:0}to{transform:translateY(-8%);opacity:1}}
@keyframes campaign-fall{from{transform:translateY(-30%);opacity:0}to{transform:translateY(8%);opacity:1}}
.approach{display:grid;grid-template-columns:.9fr 1.4fr;gap:12%;align-items:start;padding-block:var(--section)}
.approach-intro{position:sticky;top:var(--size-122)}
.approach h2{font-size:clamp(var(--type-36),3.8vw,var(--type-60))}
.approach-intro>p:not(.section-label){font-size:var(--type-15);max-width:var(--size-360);margin-top:var(--space-24)}
.approach-intro .text-link{margin-top:var(--space-24);font-size:var(--type-13)}
.process-index{display:flex;align-items:baseline;gap:var(--space-18);margin-top:var(--space-50)}
.process-index>span:first-child{font-size:var(--type-100);font-weight:400;letter-spacing:-.08em;line-height:.9}
.process-index>span:last-child{font-size:var(--type-14);color:var(--ink-soft)}
.process-steps>li{display:grid;grid-template-columns:var(--size-32) 1fr;gap:var(--space-25);padding:var(--space-34) 0 var(--space-36);border-top:1px solid var(--line);border-bottom:0;position:relative;transition:opacity var(--time-500ms) var(--ease)}
.process-steps>li:before{content:'';position:absolute;top:-1px;height:var(--size-2);background:var(--petrol);left:0;width:100%;transform:scaleX(0);transform-origin:left;transition:transform var(--time-700ms) var(--ease)}
.process-steps>li.is-current:before{transform:scaleX(1)}
.process-steps>li:last-child{border-bottom:1px solid var(--line)}
.process-steps h3{font-size:clamp(var(--type-24),2.3vw,var(--type-37));letter-spacing:-.04em;margin-bottom:var(--space-16)}
.process-steps .step-count{font-size:var(--type-12);margin:var(--space-6) 0 0}
.process-steps p{font-size:var(--type-15);line-height:1.65;max-width:var(--size-560)}
.step-result{display:block;font-size:var(--type-11);color:var(--ink-soft);margin-top:var(--space-22)}
.reviews-v5{background:var(--review-tint)}
.reviews-v5 .section-heading{margin-bottom:var(--space-48)}
.reviews-v5 .text-link{font-size:var(--type-13);white-space:nowrap}
.review-grid{display:grid;grid-template-columns:.72fr 1fr 1fr;gap:var(--space-24);align-items:stretch}
.review-score{padding:var(--space-25) var(--space-20) var(--space-20) 0;display:flex;flex-direction:column;align-items:flex-start}
.google-label{font-size:var(--type-14);font-weight:500}
.review-score>strong{font-size:var(--score-size);font-weight:500;letter-spacing:-.08em;line-height:1.2;margin-top:var(--space-15)}
.review-score>strong>span{font-size:var(--type-20);letter-spacing:-.04em;margin-left:var(--space-9);font-weight:400}
.review-stars{font-size:var(--type-22);letter-spacing:var(--size-4);margin:0 0 var(--space-14)}
.review-score>p{font-size:var(--type-14)}
.review-date{font-size:var(--type-9);line-height:1.5;max-width:var(--size-145);color:var(--ink-soft);margin-top:auto;padding-top:var(--space-40)}
.review-card{padding:var(--space-30);display:flex;flex-direction:column;background:var(--petrol);color:var(--chalk);min-height:var(--size-425)}
.review-brand{display:flex;align-items:center;justify-content:space-between;gap:var(--space-20);height:var(--size-76);margin-bottom:var(--space-30)}
.review-brand img{width:var(--size-105);height:var(--size-76);object-fit:contain;filter:brightness(0) invert(1)}
.review-brand>span{font-size:var(--type-10);color:var(--chalk-soft)}
.review-card blockquote{font-size:var(--quote-size);letter-spacing:-.035em;line-height:1.3}
.review-card figcaption{margin-top:auto;padding-top:var(--space-36);display:flex;flex-direction:column;font-size:var(--type-11);line-height:1.6}
.review-card figcaption strong{font-weight:500}
.review-card figcaption>span{color:var(--chalk-soft)}
.review-tav{background:var(--chalk);color:var(--petrol)}
.review-tav .review-brand img{width:var(--size-170);filter:none}
.review-tav .review-brand>span,.review-tav figcaption>span{color:var(--ink-soft)}
.review-tav blockquote{font-size:clamp(var(--type-28),2.8vw,var(--type-44));line-height:1.13;letter-spacing:-.045em}
.studio-v5{display:block;padding:0;background:var(--chalk)}
.studio-introduction{display:grid;grid-template-columns:1.15fr 1fr;gap:10%;align-items:start;padding-bottom:var(--space-58)}
.studio-about .lead{font-size:clamp(var(--type-20),1.7vw,var(--type-26));line-height:1.5;letter-spacing:-.025em}
.studio-about>p{font-size:var(--type-15);margin-top:var(--space-22)}
.studio-about>p:first-child{margin-top:0}
.studio-about .studio-chapter{font-size:var(--type-12);color:var(--ink-soft);margin-top:var(--space-25);max-width:var(--size-340)}
.tower-portrait{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:2.05}
.tower-portrait:after{content:'';position:absolute;inset:35% 0 0;z-index:1;pointer-events:none;background:linear-gradient(transparent,var(--photo-shade))}
.tower-portrait>img{width:100%;height:114%;object-fit:cover;object-position:50% 55%;transform:translateY(-6%);will-change:transform}
.tower-portrait figcaption{position:absolute;z-index:2;bottom:var(--size-34);left:var(--gutter);right:var(--gutter);color:var(--ink-on-photo);display:flex;flex-direction:column;align-items:flex-start}
.tower-portrait figcaption>span{font-size:var(--type-12);margin-bottom:var(--space-9)}
.tower-portrait figcaption>strong{font-size:var(--tower-title);line-height:1;letter-spacing:-.06em;font-weight:500}
.tower-portrait figcaption>small{font-size:var(--type-11);align-self:flex-end}
.studio-bottom{display:grid;grid-template-columns:1.5fr 1fr;gap:12%;padding-top:var(--space-44);padding-bottom:var(--section);align-items:start}
.director{display:grid;grid-template-columns:var(--size-112) 1fr;gap:var(--space-28);align-items:start}
.director>img{width:var(--size-112);height:var(--size-145);object-fit:cover}
.director h3{font-size:var(--type-29);letter-spacing:-.04em;margin:0 0 var(--space-8)}
.director div>span{font-size:var(--type-11);line-height:1.5;font-weight:500}
.director p{font-size:var(--type-13);margin:var(--space-16) 0 var(--space-14);max-width:var(--size-390)}
.director .text-link{font-size:var(--type-12)}
.studio-bottom .name-detail{margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.studio-bottom .name-detail summary{padding:var(--space-22) 0;font-size:var(--type-15)}
.studio-bottom .name-detail p{font-size:var(--type-14);padding:0 0 var(--space-22);line-height:1.65}
.insights{padding-top:0}
.insight-grid{gap:var(--space-26)}
.insight-photo{position:relative;overflow:hidden;aspect-ratio:1.42;background:var(--paper)}
.insight-photo>img{width:100%;height:100%;object-fit:cover;transition:transform var(--time-700ms) var(--ease)}
.insight:hover .insight-photo>img{transform:scale(1.045)}
.insight-photo .insight-arrow{position:absolute;right:var(--size-16);bottom:var(--size-16);top:auto;background:var(--chalk);color:var(--petrol);border:none;width:var(--size-36);height:var(--size-36);font-size:var(--type-23)}
.insight h3{font-size:clamp(var(--type-23),2.1vw,var(--type-34));line-height:1.18;letter-spacing:-.04em;margin-bottom:var(--space-12)}
.article-meta{font-size:var(--type-10);margin:var(--space-23) 0 var(--space-13)}
.insight p{font-size:var(--type-13)}
.contact h2{font-size:clamp(var(--type-59),6.2vw,var(--type-98));line-height:.99}
.contact .section-label{margin-bottom:var(--space-30)}
.contact-intro>p:not(.section-label){max-width:var(--size-355);font-size:var(--type-17)}
.footer-about>p{max-width:var(--size-270)}
@media(min-width:1600px){.hero-v5 .signature-stage{max-height:none}.review-card{min-height:var(--size-470)}}
@media(max-width:1000px){.hero-intro{grid-template-columns:1.45fr 1fr;gap:5%}.hero-description>p{font-size:var(--type-16)}.hero-v5 h1{font-size:7.4vw}.review-grid{grid-template-columns:.65fr 1fr 1fr;gap:var(--space-15)}.review-card{padding:var(--space-24);min-height:var(--size-400)}.review-brand{flex-direction:column;align-items:flex-start;height:var(--size-100);gap:var(--space-12)}.review-brand img{height:var(--size-67)}.review-tav .review-brand img{width:var(--size-160)}.review-card blockquote{font-size:var(--type-22)}.review-tav blockquote{font-size:var(--type-32)}.review-score>strong{font-size:var(--type-100)}.review-score>strong>span{font-size:var(--type-15)}.approach{gap:7%}.studio-introduction{gap:7%;grid-template-columns:1.15fr 1fr}.studio-introduction h2{font-size:var(--type-44)}.studio-bottom{gap:6%;grid-template-columns:1.5fr 1fr}.director{grid-template-columns:var(--size-85) 1fr;gap:var(--space-22)}.director>img{width:var(--size-85);height:var(--size-113)}.director h3{font-size:var(--type-25)}}
@media(max-width:760px){
.header{height:var(--size-79)}.hero-v5{padding-top:var(--space-23)}.hero-v5 .hero-meta{font-size:var(--type-10);letter-spacing:0}.hero-intro{display:block;padding:var(--space-31) 0 var(--space-30)}.hero-v5 h1{font-size:clamp(var(--type-49),11.7vw,var(--type-87));line-height:1.03;letter-spacing:-.06em}.hero-description{max-width:var(--size-330);margin-top:var(--space-24);padding:0}.hero-description>p{font-size:var(--type-16);line-height:1.55;margin-bottom:var(--space-13)}.hero-description .text-link{font-size:var(--type-12);min-height:var(--size-36)}.hero-v5 .signature-stage{aspect-ratio:1.55;max-height:none}.hero-v5 .signature-picture img,.hero-v5 .signature-picture canvas{object-fit:contain}.cinema-caption{display:none}.cinema-play{right:var(--size-18);bottom:var(--size-16);gap:var(--space-10);padding:var(--space-11) var(--space-14)}.cinema-play>span{font-size:var(--type-11)}.cinema-play small{font-size:var(--type-8);margin-top:var(--space-2)}.cinema-play>svg{width:var(--size-14);height:var(--size-21)}.hero-v5 .hero-bottom{padding:var(--space-12) 0;gap:var(--space-8);font-size:var(--type-9)}.hero-v5 .hero-bottom>a{display:none}.hero-v5 .hero-bottom>span{display:block;font-size:var(--type-9)}.hero-v5 #motion-control{font-size:var(--type-10);min-width:0;gap:var(--space-8)}.clients-intro>span{font-size:var(--type-10);max-width:var(--size-133)}.work .section-heading h2{font-size:var(--type-39);max-width:var(--size-310)}.expertise-layout{display:flex;flex-direction:column;gap:var(--space-28)}.expertise .service-stage{width:100%;height:auto;aspect-ratio:1.06}.expertise .service-scene>img{height:calc(100% - var(--size-45))}.expertise .service-scene figcaption{height:var(--size-45);font-size:var(--type-10)}.campaign-duo{height:calc(100% - var(--size-45));gap:var(--space-12);padding:var(--space-14) var(--space-18)}.service-content{padding-left:0;padding-right:0}.service summary{font-size:var(--type-28)}.service summary>span{gap:var(--space-17)}.approach{display:block}.approach-intro{position:static}.approach h2{font-size:var(--type-40)}.approach-intro>p:not(.section-label){font-size:var(--type-15)}.process-index{display:none}.process-steps{margin-top:var(--space-38)}.process-steps>li{grid-template-columns:var(--size-23) 1fr;gap:var(--space-14);padding:var(--space-25) 0 var(--space-29)}.process-steps h3{font-size:var(--type-27);letter-spacing:-.045em}.process-steps p{font-size:var(--type-14)}.step-result{font-size:var(--type-10);margin-top:var(--space-20)}.reviews-v5 .section-heading .text-link{margin-top:var(--space-26);font-size:var(--type-12)}.review-grid{grid-template-columns:1fr;gap:var(--space-18)}.review-score{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 0 var(--space-19);gap:0 var(--space-16)}.google-label{grid-column:2;grid-row:1;font-size:var(--type-13)}.review-score>strong{grid-column:1;grid-row:1/4;font-size:var(--type-110);margin:0;line-height:1;white-space:nowrap}.review-score>strong>span{font-size:var(--type-17);margin-left:var(--space-6)}.review-stars{grid-column:2;font-size:var(--type-17);margin:0;letter-spacing:var(--size-2)}.review-score>p{grid-column:2;font-size:var(--type-12)}.review-date{grid-column:1/-1;margin:var(--space-12) 0 0;padding:0;max-width:none;font-size:var(--type-8)}.review-card{padding:var(--space-26);min-height:var(--size-340)}.review-brand{flex-direction:row;align-items:center;height:var(--size-72);margin-bottom:var(--space-25)}.review-brand img{height:var(--size-72);width:var(--size-98)}.review-brand>span{font-size:var(--type-10)}.review-tav .review-brand img{width:var(--size-174)}.review-card blockquote{font-size:var(--type-25)}.review-tav blockquote{font-size:var(--type-37);max-width:var(--size-330)}.review-card figcaption{padding-top:var(--space-27);font-size:var(--type-11)}.studio-introduction{display:block;padding-bottom:var(--space-35)}.studio-introduction h2{font-size:var(--type-39)}.studio-about{margin-top:var(--space-28)}.studio-about .lead{font-size:var(--type-21)}.studio-about>p{font-size:var(--type-15);margin-top:var(--space-19)}.studio-about .studio-chapter{font-size:var(--type-11)}.tower-portrait{aspect-ratio:.93}.tower-portrait>img{height:110%;object-position:58%;transform:translateY(-5%)}.tower-portrait figcaption{bottom:var(--size-26);gap:var(--space-3)}.tower-portrait figcaption>strong{font-size:clamp(var(--type-40),10vw,var(--type-65));white-space:nowrap}.tower-portrait figcaption>span{font-size:var(--type-10);margin-bottom:var(--space-5)}.tower-portrait figcaption>small{font-size:var(--type-9);align-self:flex-start;margin-top:var(--space-12)}.studio-bottom{display:block;padding-top:var(--space-30)}.director{grid-template-columns:var(--size-77) 1fr;gap:var(--space-20)}.director>img{width:var(--size-77);height:var(--size-102)}.director h3{font-size:var(--type-25);line-height:1.1}.director div>span{font-size:var(--type-10)}.director p{font-size:var(--type-13);line-height:1.55}.studio-bottom .name-detail{margin-top:var(--space-33)}.studio-bottom .name-detail summary{font-size:var(--type-14)}.insight-grid{gap:var(--space-37)}.insight-photo{aspect-ratio:1.5}.insight h3{font-size:var(--type-28)}.article-meta{margin-top:var(--space-19)}.contact h2{font-size:var(--type-64)}.contact-intro>p:not(.section-label){font-size:var(--type-16)}.footer-about{display:block}
}
@media(max-width:370px){.hero-v5 h1{font-size:var(--type-45)}.hero-description>p{font-size:var(--type-15)}.cinema-play{right:var(--size-15);bottom:var(--size-13)}.service summary{font-size:var(--type-26)}.review-score>strong{font-size:var(--type-96)}.review-card{padding:var(--space-22)}.review-card blockquote{font-size:var(--type-23)}.review-tav blockquote{font-size:var(--type-32)}.director{grid-template-columns:var(--size-66) 1fr;gap:var(--space-16)}.director>img{width:var(--size-66);height:var(--size-91)}.director h3{font-size:var(--type-23)}.process-steps h3{font-size:var(--type-25)}}
@media(prefers-reduced-motion:reduce){.tower-portrait>img{transform:none;will-change:auto}.campaign-duo img:first-child{transform:translateY(-8%)}.campaign-duo img:last-child{transform:translateY(8%)}.cinema-hit:hover .cinema-play{transform:none}}


/* The new process counter belongs to the normal reading flow. */
.process-index #process-count{position:static;inset:auto;transform:none;font-size:var(--type-100);letter-spacing:-.08em;line-height:.9}

/* refinements.css */
/* V6: explicit offer, stable process and original citation evidence. */
:root{--hero-services:clamp(58px,6.9vw,110px);--proof-white:#fafafa;--proof-ink:#172d2b;--proof-blue:#eaf2fc;--proof-radius:12px}
.hero-intro{grid-template-columns:1.7fr 1fr;align-items:center;padding-top:var(--space-30);padding-bottom:var(--space-38)}
.hero-v5 h1{font-size:var(--hero-services);line-height:.99;letter-spacing:-.055em}
.hero-description{max-width:var(--size-360)}
.hero-description>p{font-size:clamp(var(--type-17),1.6vw,var(--type-23))}
.method .section-heading{align-items:flex-end;margin-bottom:var(--space-50)}
.method .section-heading>p{max-width:var(--size-450);font-size:var(--type-16)}
.method h2{font-size:clamp(var(--type-38),4.3vw,var(--type-60));line-height:1.04}
.method-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-36);padding:0;list-style:none}
.method-steps>li{padding-top:var(--space-22);border-top:1px solid var(--petrol);display:flex;flex-direction:column;align-items:flex-start}
.method-number{font-size:var(--type-13);color:var(--ink-soft);margin-bottom:var(--space-36)}
.method-steps h3{font-size:clamp(var(--type-23),2.15vw,var(--type-34));line-height:1.18;letter-spacing:-.04em;margin-bottom:var(--space-20)}
.method-steps p{font-size:var(--type-15);line-height:1.65;margin-bottom:var(--space-25);max-width:36ch}
.method-delivery{font-size:var(--type-11);color:var(--ink-soft);margin-top:auto}
.expertise .scene-marketing{height:auto}
.expertise .service-stage:has(.scene-marketing:not([hidden])){aspect-ratio:auto}
.geo-proof{background:var(--petrol);color:var(--chalk);padding:clamp(22px,2.3vw,38px);border-radius:var(--proof-radius);overflow:hidden}
.geo-heading{display:flex;flex-direction:column;gap:var(--space-13);margin-bottom:var(--space-24)}
.geo-heading>span{font-size:var(--type-11);color:var(--chalk-soft)}
.geo-heading>strong{font-size:clamp(var(--type-25),2.8vw,var(--type-44));font-weight:500;letter-spacing:-.045em;line-height:1.06}
.geo-choices{display:flex;gap:var(--space-6);margin-bottom:var(--space-20)}
.geo-choices button{padding:var(--space-10) var(--space-17);font-size:var(--type-12);color:var(--chalk);border:1px solid var(--line-dark);border-radius:999px;transition:background var(--duration),color var(--duration);min-height:44px}
.geo-choices button[aria-pressed=true]{background:var(--citrien);border-color:var(--citrien);color:var(--petrol)}
.geo-answer{background:var(--proof-white);color:var(--proof-ink);border-radius:var(--proof-radius);overflow:hidden;box-shadow:0 18px 30px #001b1855}
.geo-query{padding:var(--space-20) var(--space-24) var(--space-15);border-bottom:1px solid #172d2b1f}
.geo-query>span{display:block;font-size:var(--type-10);color:var(--ink-soft);margin-bottom:var(--space-8)}
.geo-query>p{display:inline-block;background:var(--proof-blue);border-radius:var(--size-16);font-size:var(--type-14);line-height:1.4;padding:var(--space-10) var(--space-14)}
.geo-crop{position:relative;width:100%;aspect-ratio:2.6;overflow:hidden;background:var(--proof-white)}
.geo-crop img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;transform:translateY(-56.3%)}
[data-proof-active=paesano] .geo-crop img{transform:translateY(-67%)}
[data-proof-active=shato] .geo-crop img{transform:translateY(-21.5%)}
.geo-open{width:100%;border-top:1px solid #172d2b1f;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:var(--space-16) var(--space-24);font-size:var(--type-12);min-height:48px;color:var(--proof-ink);transition:background var(--duration)}
.geo-open:hover{background:var(--citrien)}
.geo-open svg{width:var(--size-20);height:var(--size-20)}
.geo-note{font-size:var(--type-10);color:var(--chalk-soft);margin-top:var(--space-20)}
.proof-dialog{width:min(850px,94vw);padding:0;background:var(--proof-white);color:var(--proof-ink)}
.proof-dialog .dialog-bar{position:sticky;top:0;background:var(--proof-white);z-index:2;border-bottom:1px solid var(--line)}
.proof-dialog .dialog-bar h2{font-size:var(--type-20);letter-spacing:-.025em}
.proof-context{font-size:var(--type-12);padding:var(--space-18) var(--space-28);border-bottom:1px solid var(--line)}
.proof-dialog>img{display:block;width:100%;height:auto}
@media(max-width:1000px){.method-steps{gap:var(--space-22)}.method-steps h3{font-size:var(--type-24)}.geo-choices button{padding-inline:var(--space-12)}.geo-query{padding-inline:var(--space-16)}}
@media(max-width:760px){.hero-intro{grid-template-columns:1fr;gap:var(--space-25);padding-top:var(--space-28);padding-bottom:var(--space-28)}.hero-v5 h1{font-size:clamp(58px,14.8vw,100px);line-height:.99}.hero-description{max-width:var(--size-450)}.hero-description>p{font-size:var(--type-16);margin-bottom:var(--space-16)}.hero-meta>p{max-width:190px}.hero-meta>span{white-space:nowrap}.method .section-heading{display:block;margin-bottom:var(--space-35)}.method .section-heading>p{font-size:var(--type-15);margin-top:var(--space-25)}.method-steps{display:block}.method-steps>li{padding:var(--space-23) 0 var(--space-30);display:grid;grid-template-columns:var(--size-28) 1fr;gap:0 var(--space-18)}.method-number{grid-row:1/4;margin:var(--space-6) 0 0}.method-steps h3{font-size:var(--type-27);margin-bottom:var(--space-15)}.method-steps p{font-size:var(--type-15);margin-bottom:var(--space-18)}.method-delivery{grid-column:2}.geo-heading>strong{font-size:var(--type-30)}.geo-proof{padding:var(--space-22)}.geo-query>p{font-size:var(--type-12)}.geo-open{font-size:var(--type-11);padding-inline:var(--space-16)}.geo-choices button{font-size:var(--type-11);padding-inline:var(--space-14)}.geo-crop{aspect-ratio:2.1}.proof-dialog .dialog-bar h2{font-size:var(--type-16)}.proof-context{padding:var(--space-14) var(--space-18);font-size:var(--type-11)}}
/* Explicitly fill the service column, overriding the old centered scene layout. */
#expertise .scene-marketing{display:block}
#expertise .geo-proof{width:100%;max-width:none}
/* Focus the preview on the first recommendation; the complete capture opens on request. */
.geo-crop{aspect-ratio:3.1}

/* v7.css */
/* Noble Matter v7. The period connects the offer, the work and the interaction. */
:root{--reveal-ease:cubic-bezier(.2,.8,.2,1);--hero-word-size:clamp(64px,7.3vw,132px);--hero-canvas:clamp(460px,43vw,760px);--visual-radius:6px}
[hidden]{display:none!important}
.brand-dot{display:inline-block;color:transparent!important;font-size:inherit;line-height:inherit;position:relative;width:.24em}
.brand-dot:after{content:'';position:absolute;width:.135em;height:.135em;bottom:.135em;left:.025em;border-radius:50%;background:var(--citrien)}
#work-title .brand-dot:after,#expertise-title .brand-dot:after{background:var(--petrol)}
/* Larger studio designation, three direct service names, real work in the first viewport. */
.hero-v7{padding:30px var(--gutter) 0;background:var(--petrol);color:var(--chalk);overflow:clip}
.hero-v7 .hero-meta{font-size:14px;letter-spacing:0;padding:0;align-items:center}
.hero-v7 .hero-meta>p{font-size:clamp(18px,1.65vw,27px);font-weight:500;max-width:none}
.hero-v7 .hero-meta>span{font-size:12px;color:var(--chalk-soft)}
.hero-composition{display:grid;grid-template-columns:1.02fr 1fr;gap:3.5%;align-items:center;padding:40px 0 42px}
.hero-v7 h1{font-size:var(--hero-word-size);font-weight:500;line-height:.98;letter-spacing:-.06em;margin:0 0 28px;position:relative;z-index:2}
.hero-word{display:block;font:inherit;line-height:inherit;letter-spacing:inherit;color:var(--chalk);padding:0;white-space:nowrap;text-align:left;position:relative;transition:color .25s}
.hero-word .brand-dot:after{transition:transform .45s var(--reveal-ease),box-shadow .45s}
.hero-word[aria-pressed=true] .brand-dot:after{transform:scale(1.15);box-shadow:0 0 0 .045em #dbee6922}
.hero-word:hover,.hero-word:focus-visible{color:var(--citrien)}
.hero-word:hover .brand-dot:after{transform:scale(.7)}
.hero-word:focus-visible{outline:2px solid var(--chalk);outline-offset:6px;border-radius:4px}
.hero-summary{font-size:clamp(16px,1.4vw,22px);line-height:1.5;max-width:34ch;margin:0 0 26px}
.hero-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-links>.text-link{font-size:12px;border-color:var(--chalk-soft);white-space:nowrap}
.hero-links>.button{font-size:13px;padding-left:20px;gap:20px}
.hero-showcase{height:var(--hero-canvas);position:relative;isolation:isolate;margin-left:5%;margin-right:0}
.showcase-scene{position:absolute;inset:0;margin:0;z-index:2}
.showcase-main{position:absolute;inset:0 0 15% 6%;overflow:hidden;border-radius:var(--visual-radius);background:var(--paper)}
.showcase-main>img{width:100%;height:100%;object-fit:cover;transform:scale(1.01)}
[data-scene=webdesign] .showcase-main img{object-position:47%;}
.showcase-detail{position:absolute;width:59%;height:37%;left:-9%;bottom:4%;border-radius:var(--visual-radius);overflow:hidden;box-shadow:0 20px 50px #001e1c44;transform:rotate(-5deg);background:var(--chalk);border:5px solid var(--chalk)}
.showcase-detail img{width:100%;height:100%;object-fit:cover}
.showcase-scene figcaption{position:absolute;right:0;bottom:0;width:43%;padding:0 0 8px 12px;font-size:10px;line-height:1.6}
.showcase-scene figcaption strong{display:block;font-weight:500;color:var(--chalk);font-size:12px;margin-bottom:4px}
.showcase-scene figcaption>span{color:var(--chalk-soft)}
.showcase-orbit{position:absolute;bottom:10%;right:-4%;width:36%;aspect-ratio:1;border-radius:50%;background:var(--citrien);z-index:1}
.showcase-scene.is-entering .showcase-main{animation:work-aperture .85s var(--reveal-ease) both}
.showcase-scene.is-entering .showcase-main>img{animation:work-settle 1.1s var(--reveal-ease) both}
.showcase-scene.is-entering .showcase-detail{animation:detail-settle 1.1s var(--reveal-ease) both}
.showcase-scene.is-entering figcaption{animation:caption-in .75s .12s both}
@keyframes work-aperture{from{clip-path:circle(0 at 100% 100%)}to{clip-path:circle(145% at 100% 100%)}}
@keyframes work-settle{from{transform:scale(1.14)}to{transform:scale(1.01)}}
@keyframes detail-settle{from{opacity:0;transform:translate(15%,20%) rotate(8deg) scale(.8)}to{opacity:1;transform:rotate(-5deg)}}
@keyframes caption-in{from{opacity:0}to{opacity:1}}
.showcase-campaign{display:flex;align-items:center;justify-content:center;gap:5%;background:#241a16;padding:4%}
.showcase-campaign>img{width:52%;height:auto;max-height:91%;object-fit:contain;box-shadow:0 16px 30px #0007}
.showcase-campaign>img:first-child{transform:translateY(-8%) rotate(-8deg)}
.showcase-campaign>img:last-child{transform:translateY(10%) rotate(7deg)}
.showcase-search{height:38%;display:flex;flex-direction:column;transform:rotate(-5deg);padding:10px;border:0}
.showcase-search>span{font-size:11px;font-weight:500;color:var(--petrol);padding:3px 4px 10px}
.showcase-search>div{flex:1;overflow:hidden;position:relative;background:#fff}
.showcase-search>div>img{position:absolute;width:100%;height:auto;top:0;transform:translateY(-56.3%)}
.showcase-search>a{display:block;font-size:10px;color:var(--petrol);padding:7px 4px 0;text-decoration:underline}
.hero-footnote{border-top:1px solid var(--line-dark);padding:18px 0 22px;display:flex;justify-content:space-between;gap:20px;color:var(--chalk-soft);font-size:11px}
.hero-footnote>a{display:flex;align-items:center;gap:18px;color:var(--chalk)}
.hero-footnote>a>span{width:28px;height:28px;border-radius:50%;background:var(--citrien);color:var(--petrol);display:grid;place-items:center;font-size:16px}
/* Independent film, after the selected work. */
.brand-film{background:var(--petrol-dark);color:var(--chalk);padding:50px var(--gutter) 0}
.film-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:26px}
.film-heading h2{font-size:clamp(28px,3.2vw,56px);letter-spacing:-.045em;line-height:1.1}
.film-heading>.section-label{color:var(--chalk-soft)}
.film-heading>p{font-size:14px;line-height:1.5;color:var(--chalk-soft)}
.brand-film .hero-cinema{margin:0;}
.brand-film .signature-stage{width:100%;aspect-ratio:16/9;transform:none;border:0;border-radius:0;max-height:none;will-change:auto}
.brand-film .signature-picture{transform:none;width:100%;height:100%}
.brand-film .signature-picture img,.brand-film .signature-picture canvas{object-fit:contain}
.brand-film .cinema-caption{display:none}
.brand-film .cinema-play{right:22px;bottom:22px;border-radius:999px}
.brand-film .hero-bottom{padding:18px 0;border-top:0;display:flex;justify-content:space-between;align-items:center}
.brand-film #motion-control{color:var(--chalk);font-size:12px;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line-dark);border-radius:999px;min-height:44px}
.brand-film #motion-control:hover{color:var(--petrol);background:var(--citrien)}
/* Services are visible by default and animated only on entering; never controlled by the film. */
.expertise .service-scene{opacity:1}
/* A small piece of craft in every step. */
.method{overflow:clip}
.method-steps{gap:30px}
.method-steps>li{padding-top:0;border:0;min-width:0}
.method-art{width:100%;height:240px;position:relative;overflow:hidden;perspective:850px;margin-bottom:25px;border-radius:var(--visual-radius);background:#e5e6dc;isolation:isolate}
.method-art .art-dot{position:absolute;width:29px;height:29px;border-radius:50%;background:var(--citrien);z-index:5;box-shadow:0 6px 16px #123f3c20}
.brief-sheet{position:absolute;left:16%;top:13%;width:68%;background:var(--chalk);padding:18px;transform:rotate(-4deg);box-shadow:0 12px 28px #123f3c18;border-radius:3px}
.brief-sheet>span{font-size:9px;color:var(--ink-soft)}
.brief-sheet>strong{display:block;line-height:1.06;font-size:24px;font-weight:500;letter-spacing:-.04em;margin:10px 0}
.brief-row{display:flex;align-items:center;gap:8px;font-size:10px;margin-top:6px;line-height:1.4}
.brief-row i{display:grid;place-items:center;width:16px;height:16px;background:var(--citrien);border-radius:50%;font-style:normal;font-size:11px}
.art-plan .art-dot{right:15%;bottom:13%}
.art-design{background:var(--citrien)}
.design-layer{position:absolute;border-radius:4px;padding:20px;box-shadow:0 12px 24px #123f3c30}
.design-back{background:var(--chalk);color:var(--petrol);width:60%;height:76%;right:9%;top:6%;transform:rotate(8deg)}
.design-back>span{font-size:9px}
.design-back>strong{display:block;font-size:54px;letter-spacing:-.04em;font-weight:500;line-height:1.2}
.mini-palette{display:flex;gap:5px;margin-top:10px}
.mini-palette i{width:25px;height:25px;background:var(--petrol);border-radius:50%}
.mini-palette i:nth-child(2){background:var(--citrien)}.mini-palette i:nth-child(3){background:#d3ccba}
.design-front{background:var(--petrol);color:var(--chalk);width:72%;left:6%;bottom:13%;height:45%;transform:rotate(-7deg);display:flex;flex-direction:column;justify-content:center;gap:15px}
.design-front img{width:100%;height:auto}
.design-front>span{font-size:9px}
.art-design .art-dot{right:6%;bottom:18%;background:var(--petrol)}
.art-launch{background:var(--petrol)}
.launch-window{position:absolute;inset:13% 8%;background:var(--chalk);border-radius:5px;overflow:hidden;box-shadow:0 18px 25px #001e1c66;transform:rotateY(-7deg) rotateX(6deg)}
.window-chrome{height:22px;display:flex;align-items:center;gap:4px;padding:0 8px;color:var(--petrol);font-size:7px}
.window-chrome i{width:4px;height:4px;border-radius:50%;background:#b1bcb5}
.window-chrome span{margin:auto}
.launch-window>img{width:100%;height:calc(100% - 56px);object-fit:cover;object-position:center}
.launch-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;font-size:8px;line-height:1.2;height:34px}
.launch-bar b{width:22px;height:22px;border-radius:50%;background:var(--citrien);display:grid;place-items:center;font-size:14px;font-weight:400}
.art-launch .art-dot{width:20px;height:20px;right:11%;bottom:16%;opacity:0}
.method-number{margin-bottom:18px;color:var(--petrol);display:flex;align-items:center;gap:10px;width:100%;font-size:12px}
.method-number:after{content:'';height:1px;background:var(--line);flex:1}
.method-steps h3{font-size:clamp(23px,2.2vw,34px)}
.method-steps p{max-width:36ch}
.method-replay-row{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding-top:22px;margin-top:36px;font-size:12px}
.method-replay-row p{font-size:13px;color:var(--ink-soft)}
.method-replay-row .text-link{font-size:12px;gap:20px}
.method-replay-row .text-link span{font-size:20px}
/* Brief resolves, identity fans open, interface launches. All content remains visible. */
.method-art.is-playing .brief-sheet{animation:brief-open 2.9s var(--reveal-ease) both}
.method-art.is-playing .brief-row{animation:check-in .6s var(--reveal-ease) both}
.method-art.is-playing .brief-row:nth-of-type(1){animation-delay:.65s}.method-art.is-playing .brief-row:nth-of-type(2){animation-delay:.95s}.method-art.is-playing .brief-row:nth-of-type(3){animation-delay:1.25s}
.method-art.is-playing.art-plan .art-dot{animation:plan-dot 2.9s var(--reveal-ease) both}
.method-art.is-playing .design-back{animation:design-back 2.9s var(--reveal-ease) both}
.method-art.is-playing .design-front{animation:design-front 2.9s var(--reveal-ease) both}
.method-art.is-playing.art-design .art-dot{animation:design-dot 2.9s var(--reveal-ease) both}
.method-art.is-playing .launch-window{animation:launch-window 2.9s var(--reveal-ease) both}
.method-art.is-playing.art-launch .art-dot{animation:launch-dot 2.9s var(--reveal-ease) both}
.method-art.is-playing .launch-bar b{animation:launch-click 2.9s var(--reveal-ease) both}
@keyframes brief-open{0%{transform:translateY(115%) rotate(16deg) rotateX(45deg)}30%,65%{transform:rotate(-4deg)}85%,100%{transform:rotate(-4deg)}}
@keyframes check-in{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:none}}
@keyframes plan-dot{0%{transform:translate(-150px,-150px) scale(.3)}30%{transform:translate(-70px,-50px) scale(1.2)}55%{transform:translate(-10px,-10px)}72%{transform:scale(.7)}90%,100%{transform:none}}
@keyframes design-back{0%{transform:translate(-60px,100px) rotate(-12deg) scale(.8)}35%{transform:rotate(12deg)}65%,100%{transform:rotate(8deg)}}
@keyframes design-front{0%{transform:translate(70px,-50px) rotate(18deg) scale(.8);opacity:0}40%{transform:rotate(-10deg);opacity:1}72%,100%{transform:rotate(-7deg)}}
@keyframes design-dot{0%{transform:translate(-180px,-100px) scale(.2)}40%{transform:translate(-40px,-80px)}70%{transform:scale(1.3)}100%{transform:none}}
@keyframes launch-window{0%{transform:translateY(90px) rotateX(45deg) rotateY(-30deg) scale(.65);opacity:0}45%{transform:rotateY(8deg) rotateX(0) scale(1.02);opacity:1}75%,100%{transform:rotateY(-7deg) rotateX(6deg)}}
@keyframes launch-dot{0%,20%{opacity:0;transform:translate(-160px,-120px) scale(.5)}32%{opacity:1}70%{opacity:1;transform:translate(0,0) scale(1)}83%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(.1)}}
@keyframes launch-click{0%,70%{box-shadow:0 0 0 0 #dbee6900}84%{box-shadow:0 0 0 13px #dbee6977}100%{box-shadow:0 0 0 22px #dbee6900}}
/* A branded, tactile hover. The actual customer quote never disappears. */
.review-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--visual-radius);transition:color .35s,transform .55s var(--reveal-ease);outline-offset:5px}
.review-bloom{position:absolute;z-index:-1;width:60px;height:60px;right:-16px;bottom:-16px;border-radius:50%;background:var(--citrien);transform:scale(1);transition:transform .75s var(--reveal-ease);pointer-events:none}
.review-read{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:22px;min-height:36px;border-top:1px solid currentColor;padding-top:12px}
.review-read>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--citrien);color:var(--petrol);font-size:18px;transition:background .4s,color .4s,transform .4s}
.review-card:hover,.review-card:focus-within,.review-card.is-active{color:var(--petrol);transform:translateY(-4px)}
.review-card:hover .review-bloom,.review-card:focus-within .review-bloom,.review-card.is-active .review-bloom{transform:scale(25)}
.review-card:hover .review-read>span,.review-card:focus-within .review-read>span,.review-card.is-active .review-read>span{background:var(--petrol);color:var(--citrien);transform:rotate(-45deg)}
.review-card:hover .review-brand>span,.review-card:focus-within .review-brand>span,.review-card.is-active .review-brand>span,.review-card:hover figcaption>span,.review-card:focus-within figcaption>span,.review-card.is-active figcaption>span{color:var(--petrol)}
.review-hp:hover .review-brand img,.review-hp:focus-within .review-brand img,.review-hp.is-active .review-brand img{filter:brightness(0);mix-blend-mode:multiply}
.review-tav:hover .review-brand img,.review-tav:focus-within .review-brand img,.review-tav.is-active .review-brand img{mix-blend-mode:multiply}
/* Colour feedback in addition to the signature arrow. */
.button{transition:background .3s,color .3s,border-color .3s}
.button .arrow-disc{transition:background .3s,color .3s,transform .3s}
.button-acid:hover,.button-acid:focus-visible{background:var(--chalk);color:var(--petrol)}
.button-acid:hover .arrow-disc,.button-acid:focus-visible .arrow-disc{background:var(--citrien);color:var(--petrol)}
.button-petrol:hover,.button-petrol:focus-visible{background:var(--citrien);color:var(--petrol)}
.button-petrol:hover .arrow-disc,.button-petrol:focus-visible .arrow-disc{background:var(--petrol);color:var(--citrien)}
.text-link{transition:color .25s,border-color .25s}
.hero .text-link:hover,.contact .text-link:hover,.footer a:hover{color:var(--citrien);border-color:var(--citrien)}
.menu-toggle:hover{background:var(--citrien);border-radius:50%}.menu-toggle:hover span{background:var(--petrol)}
.footer-bottom>div{align-items:center}
.footer-legal-links{display:inline-flex;align-items:center;gap:20px}
.footer-legal-links>a,.footer-legal-links>button{display:inline-flex;align-items:center;line-height:1.4;font:inherit;min-height:44px;margin:0;padding:0;color:inherit}
.footer-legal-links>a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* Dialog visibility is independent of all decorative motion. */
dialog[open]{opacity:1}dialog::backdrop{background:#001b18ad}
@media(min-width:1700px){.hero-composition{gap:5%}.hero-message{padding-bottom:35px}.method-art{height:300px}.brief-sheet{padding:24px}.brief-sheet>strong{font-size:32px}.brief-row{font-size:13px}.design-back>strong{font-size:70px}.design-front>span{font-size:12px}}
@media(max-width:1050px){:root{--hero-word-size:7.6vw;--hero-canvas:440px}.hero-composition{gap:2%}.hero-links{gap:12px}.hero-summary{font-size:16px;max-width:30ch}.showcase-detail{left:-4%;width:64%}.showcase-scene figcaption{font-size:9px;width:38%}.showcase-scene figcaption strong{font-size:10px}.method-art{height:210px}.brief-sheet{padding:14px;left:9%;width:80%}.brief-sheet>strong{font-size:22px}.design-layer{padding:14px}.method-steps{gap:18px}.review-card{padding:22px}}
@media(max-width:760px){
.hero-v7{padding-top:22px}.hero-v7 .hero-meta>p{font-size:18px;max-width:220px}.hero-v7 .hero-meta>span{font-size:10px;max-width:70px;text-align:right;white-space:normal}
.hero-composition{display:flex;flex-direction:column;align-items:stretch;gap:32px;padding:32px 0 28px}
.hero-v7 h1{font-size:clamp(56px,13.6vw,98px);margin-bottom:23px;line-height:1}
.hero-summary{font-size:16px;max-width:36ch;margin-bottom:24px}
.hero-links{gap:14px}.hero-links>.button{font-size:12px;gap:12px;padding-left:17px}.hero-links>.text-link{font-size:11px}
.hero-showcase{height:clamp(320px,90vw,520px);margin:0 0 0 14px}
.showcase-main{inset:0 0 14% 5%}.showcase-detail{left:-5%;width:59%;height:35%;bottom:3%;border-width:4px}
.showcase-scene figcaption{width:41%;font-size:9px;padding-bottom:1px}.showcase-scene figcaption strong{font-size:10px;margin-bottom:2px}
.showcase-orbit{right:-3%;bottom:10%}.showcase-search{padding:7px;border:0;height:38%}.showcase-search>span{font-size:8px;padding-bottom:5px}.showcase-search>a{font-size:8px;padding-top:5px}
.hero-footnote{font-size:10px;padding-block:15px;align-items:center}.hero-footnote>span{max-width:210px}.hero-footnote>a{font-size:10px;gap:10px}
.brand-film{padding-top:35px}.film-heading{display:block;margin-bottom:20px}.film-heading h2{font-size:31px}.film-heading>p{font-size:12px;margin-top:18px}.brand-film .hero-cinema{margin-inline:calc(-1 * var(--gutter))}.brand-film .cinema-play{right:14px;bottom:12px;padding:9px 13px}.brand-film .cinema-play>span{font-size:10px}.brand-film .hero-bottom>span{font-size:10px}.brand-film #motion-control{font-size:10px;gap:8px;padding:9px 11px}
.method-steps{display:grid;grid-template-columns:1fr;gap:30px}.method-steps>li{display:flex;padding:0}.method-art{height:260px;max-width:100%;margin-bottom:23px}.method-number{margin:0 0 15px}.method-steps h3{font-size:29px}.method-steps p{max-width:45ch}.method-delivery{font-size:11px;margin-top:0}.method-replay-row{display:block;margin-top:28px}.method-replay-row>.text-link{margin-top:12px}
.brief-sheet{left:20%;width:61%;padding:22px}.brief-sheet>strong{font-size:28px}.brief-row{font-size:11px}.design-back{width:55%;right:15%}.design-back>strong{font-size:62px}.design-front{width:63%;left:10%;padding:22px}.launch-window{inset:12% 12%}
.review-card{padding:26px}.review-read{font-size:12px}.review-card:hover,.review-card:focus-within,.review-card.is-active{transform:none}
.footer-bottom>div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.footer-legal-links{gap:22px;font-size:11px}.footer-bottom>div>a{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
.showcase-scene *,.method-art *{animation:none!important;transition:none!important}
.hero-word .brand-dot:after,.review-card,.review-bloom,.review-read>span{transition:none!important}
.review-card:hover,.review-card:focus-within{transform:none}
#method-replay{display:none}.method-replay-row{justify-content:flex-start}
}
/* Keep interactive service controls stationary during a content change. */
.expertise .service-scene{animation:none;transform:none;clip-path:none}
.expertise .service-scene:not([hidden])>img{animation:service-image-in .4s var(--reveal-ease) both}
@keyframes service-image-in{from{opacity:.6}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.expertise .service-scene>img{animation:none!important}}

/* v8.css */
/* V8: broader portfolio, source-backed AI visibility and coherent contact icons. */
[data-scene=branding] .showcase-main>img{object-position:48% 54%}
[data-scene=webdesign] .showcase-main>img{object-position:50%;object-fit:cover}
/* Two genuine excerpts, with access to each complete original. */
.showcase-proof{background:var(--citrien);padding:clamp(20px,2.5vw,42px);display:flex;flex-direction:column;justify-content:flex-start;gap:22px;overflow:hidden}
.hero-proof-heading{color:var(--petrol);display:flex;flex-direction:column;gap:10px}
.hero-proof-heading>span{font-size:11px;font-weight:500}
.hero-proof-heading>strong{font-size:clamp(28px,3.35vw,55px);font-weight:500;line-height:1.02;letter-spacing:-.055em}
.hero-proof-heading>strong>br{display:none}
.hero-answer{background:#fff;color:var(--petrol);border-radius:8px;overflow:hidden;box-shadow:0 14px 30px #123f3c1a}
.answer-query{padding:15px 18px 12px;background:#fafafa}
.answer-query>span{font-size:9px;color:var(--ink-soft);display:block;margin-bottom:8px}
.answer-query>p{font-size:13px;display:inline-block;background:#eaf2fc;border-radius:22px;padding:9px 13px;line-height:1.3}
.answer-capture{position:relative;overflow:hidden;aspect-ratio:6.25;background:#fff}
.answer-capture>img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;transform:translateY(-67%)}
.answer-shato>img{transform:translateY(-21.5%)}
.answer-open{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:44px;padding:11px 18px;font-size:11px;line-height:1.3;color:var(--petrol);border-top:1px solid #123f3c18;transition:background .25s}
.answer-open svg{width:20px;height:20px;flex:0 0 20px;stroke-width:1.6}
.answer-open:hover,.answer-open:focus-visible{background:var(--petrol);color:var(--chalk)}
.hero-answer-detail{background:#fff;border:0;padding:0;height:auto;bottom:5%;width:64%;left:-7%;border-radius:8px;box-shadow:0 14px 35px #001b1844}
.answer-client{padding:14px 17px 11px;display:flex;flex-direction:column;gap:5px;color:var(--petrol);background:#fafafa}
.answer-client>strong{font-size:15px;font-weight:500;letter-spacing:-.025em}
.answer-client>span{font-size:10px;color:var(--ink-soft)}
.hero-answer-detail .answer-capture{aspect-ratio:3.45}
.hero-answer-detail .answer-open{font-size:10px;min-height:38px;padding:9px 16px}
.hero-answer-detail .answer-open svg{width:16px;height:16px;flex-basis:16px}
[data-scene=marketing] figcaption{width:36%;font-size:10px}
/* The arrow is a centred vector, with no glyph rotation or corner overlap. */
.review-card .review-bloom{right:22px;bottom:29px;width:38px;height:38px;transform:scale(0)}
.review-card:hover .review-bloom,.review-card:focus-within .review-bloom,.review-card.is-active .review-bloom{transform:scale(55)}
.review-card .review-read{align-items:center;min-height:54px;margin-top:22px;padding-top:14px}
.review-card .review-read>.review-arrow{width:36px;height:36px;min-width:36px;flex:0 0 36px;border-radius:50%;display:grid;place-items:center;transform:none;font-size:inherit}
.review-arrow svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s}
.review-card:hover .review-read>.review-arrow,.review-card:focus-within .review-read>.review-arrow,.review-card.is-active .review-read>.review-arrow{transform:none;background:var(--petrol);color:var(--citrien)}
.review-card .review-read:hover .review-arrow svg,.review-card .review-read:focus-visible .review-arrow svg{transform:translate(1px,-1px)}
/* Four channels, the same visible labels and icon language in both locations. */
.channel-links{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.channel-link{display:inline-flex;gap:9px;align-items:center;min-height:44px;font-size:12px!important;line-height:1.3!important;text-decoration:none}
.channel-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;transition:color .25s,background .25s,border-color .25s}
.channel-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.icon-fill{fill:currentColor;stroke:none}
.menu-panel .menu-bottom{align-items:center;gap:25px;margin-top:26px;border-top:0}
.menu-panel nav{margin-top:20px}
.menu-panel nav>a{font-size:clamp(28px,4.25vw,68px);padding-block:9px}
.menu-address{font-size:11px;line-height:1.6;text-align:right;color:var(--ink-soft)}
.menu-channels .channel-link:hover .channel-icon,.menu-channels .channel-link:focus-visible .channel-icon{background:var(--petrol);color:var(--citrien);border-color:var(--petrol)}
.footer-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;margin-top:16px;width:100%}
.footer-channels .channel-link{font-size:11px!important;gap:8px}
.footer-channels .channel-icon{width:36px;height:36px;flex-basis:36px;border-color:var(--line-dark)}
.footer-channels .channel-icon svg{width:18px;height:18px}
.footer-channels .channel-link:hover,.footer-channels .channel-link:focus-visible{color:var(--chalk)}
.footer-channels .channel-link:hover .channel-icon,.footer-channels .channel-link:focus-visible .channel-icon{background:var(--citrien);color:var(--petrol);border-color:var(--citrien)}
/* Use the actual browser capture in the process animation, not a laptop inside a browser. */
.launch-window>img{object-position:50% 0}
@media(min-width:1600px){.showcase-proof{gap:28px}.hero-answer .answer-query{padding:22px 23px 16px}.hero-answer .answer-query>p{font-size:16px}.hero-answer .answer-open{font-size:13px}.hero-answer-detail .answer-client>strong{font-size:18px}.hero-answer-detail .answer-client>span{font-size:12px}}
@media(max-width:1000px){.showcase-proof{padding:22px;gap:18px}.hero-proof-heading>strong{font-size:32px}.hero-proof-heading>strong>br{display:block}.answer-query{padding:12px}.answer-query>p{font-size:11px;padding:7px 10px}.hero-answer-detail{bottom:6%}.answer-client{padding:12px}.hero-answer-detail .answer-capture{aspect-ratio:3.1}.footer-channels{grid-template-columns:1fr;gap:8px}.menu-channels{gap:12px}.menu-channels .channel-link{font-size:11px!important;gap:7px}}
@media(max-width:760px){
.hero-showcase{height:clamp(430px,110vw,620px)}
.showcase-proof{padding:20px;gap:15px;inset:0 0 22% 5%}.hero-proof-heading{gap:6px}.hero-proof-heading>span{font-size:9px}.hero-proof-heading>strong{font-size:31px;line-height:1.04}.hero-proof-heading>strong>br{display:none}
.hero-answer .answer-query{padding:10px 12px}.hero-answer .answer-query>span{display:none}.hero-answer .answer-query>p{font-size:10px;padding:6px 9px}.hero-answer .answer-capture{aspect-ratio:6.25}.hero-answer .answer-open{font-size:10px;padding:8px 12px;min-height:36px}.hero-answer .answer-open svg{width:16px;height:16px;flex-basis:16px}
.hero-answer-detail{width:66%;left:-5%;bottom:0;border-radius:6px}.answer-client{padding:10px 12px 8px;gap:3px}.answer-client>strong{font-size:13px}.answer-client>span{font-size:8px}.hero-answer-detail .answer-capture{aspect-ratio:4}.hero-answer-detail .answer-open{min-height:34px;padding:7px 12px;font-size:9px}
[data-scene=marketing] figcaption{width:34%;font-size:9px;padding:0 0 2px 9px}[data-scene=marketing] figcaption strong{font-size:10px}
.menu-panel nav>a{font-size:32px;padding-block:10px}.menu-panel .menu-bottom{align-items:stretch;gap:18px;margin-top:24px}.menu-channels{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}.menu-channels .channel-link{font-size:12px!important}.menu-address{text-align:left;font-size:11px}
.footer-channels{grid-template-columns:repeat(5,minmax(0,1fr));max-width:440px;gap:6px}.footer-channels .channel-link{flex-direction:column;align-items:flex-start;gap:7px;font-size:10px!important;min-height:63px}.footer-channels .channel-icon{width:40px;height:40px;flex-basis:40px}
.review-card .review-read{min-height:56px}.review-card .review-read>.review-arrow{width:38px;height:38px;min-width:38px;flex-basis:38px}
}
@media(prefers-reduced-motion:reduce){.review-arrow svg,.channel-icon{transition:none}}

@media(min-width:761px) and (max-width:1050px){.hero-showcase{height:530px}.hero-answer-detail{bottom:0}.showcase-proof{inset:0 0 15% 6%}}

/* v9.css */
/* V9: a practical two-column menu and client-specific photographic mockups. */
.menu-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);column-gap:clamp(50px,7vw,130px);align-items:center;padding:24px 0 20px;min-height:calc(100dvh - 170px)}
.menu-panel .menu-layout nav{width:100%;margin:0}
.menu-contact{border-left:1px solid var(--line);padding-left:clamp(28px,3.5vw,70px);display:flex;flex-direction:column;gap:38px;min-width:0}
.menu-section-label{font-size:12px;font-weight:500;line-height:1.4;margin-bottom:16px;color:var(--ink-soft)}
.menu-contact-direct{display:flex;flex-direction:column;align-items:flex-start}
.menu-contact-direct .menu-section-label{margin-bottom:12px}
.menu-direct-link{display:flex;align-items:center;gap:14px;font-size:clamp(18px,1.85vw,30px);line-height:1.35;min-height:50px;letter-spacing:-.035em}
.menu-direct-link svg{width:22px;height:22px;flex:0 0 22px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.menu-direct-link>span{position:relative;overflow-wrap:anywhere}
.menu-direct-link>span:after{position:absolute;content:'';left:0;bottom:-4px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.menu-direct-link:hover>span:after,.menu-direct-link:focus-visible>span:after{transform:scaleX(1)}
.menu-location address{font-style:normal;display:flex;flex-direction:column;gap:8px;line-height:1.65;font-size:15px}
.menu-location address strong{font-size:22px;font-weight:500;letter-spacing:-.035em;line-height:1.2}
.menu-location>a{display:inline-flex;align-items:center;gap:20px;min-height:44px;font-size:12px;margin-top:10px;border-bottom:1px solid var(--line)}
.menu-location>a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}
.menu-contact .menu-channels{gap:20px}
.menu-contact .channel-link{font-size:12px!important}
/* Keep the full device composition readable inside the website service panel. */
.scene-websites>img{object-position:50% 50%!important}
/* A photographic launch instead of a website screenshot squeezed into another browser. */
.art-launch{background:#cfc3ad;isolation:isolate}
.launch-mockup{position:absolute;inset:0;overflow:hidden}
.launch-mockup>img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.launch-caption{position:absolute;bottom:14px;left:16px;font-size:11px;line-height:1.35;padding:8px 12px;border-radius:4px;background:var(--chalk);color:var(--petrol);box-shadow:0 3px 15px #30271014;display:flex;gap:12px;align-items:center}
.launch-caption>span{font-size:9px;color:var(--ink-soft);padding-left:12px;border-left:1px solid var(--line)}
.launch-signal{position:absolute;right:15px;bottom:14px;width:33px;height:33px;display:grid;place-items:center;background:var(--citrien);color:var(--petrol);border-radius:50%}
.launch-signal svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none}
.method-art.is-playing .launch-mockup{animation:launch-reveal-v9 2.9s var(--reveal-ease) both}
.method-art.is-playing .launch-caption{animation:launch-label-v9 2.9s var(--reveal-ease) both}
.method-art.is-playing .launch-signal{animation:launch-point-v9 2.9s var(--reveal-ease) both}
@keyframes launch-reveal-v9{0%{clip-path:inset(100% 0 0 0);transform:scale(1.12)}48%{clip-path:inset(0);transform:scale(1.05)}100%{clip-path:inset(0);transform:scale(1)}}
@keyframes launch-label-v9{0%,50%{opacity:0;transform:translateY(18px)}80%,100%{opacity:1;transform:none}}
@keyframes launch-point-v9{0%,35%{opacity:0;transform:translate(-200px,-120px) scale(.2)}60%{opacity:1;transform:translate(-30px,-30px) scale(1.25)}78%{opacity:1;transform:scale(.82)}100%{opacity:1;transform:none}}
@media(min-width:1700px){.menu-layout{grid-template-columns:1.45fr 1fr}.menu-contact{gap:50px}.menu-section-label{font-size:14px}.menu-location address{font-size:18px}.menu-location address strong{font-size:28px}.menu-contact .channel-link{font-size:14px!important}}
@media(max-width:1000px){.menu-layout{column-gap:36px;grid-template-columns:minmax(0,1.3fr) minmax(275px,1fr)}.menu-contact{padding-left:27px;gap:30px}.menu-direct-link{font-size:18px;gap:10px}.menu-location address{font-size:14px}}
@media(max-width:760px){.menu-layout{display:block;min-height:0;padding:22px 0 16px}.menu-contact{border-left:0;border-top:1px solid var(--line);padding:28px 0 0;margin-top:30px;gap:28px}.menu-panel .menu-layout nav>a{font-size:31px;padding:10px 0}.menu-contact .menu-channels{display:flex;gap:22px}.menu-contact-direct .menu-section-label{margin-bottom:8px}.menu-section-label{margin-bottom:12px}.menu-direct-link{font-size:21px;min-height:46px;gap:12px}.menu-location address strong{font-size:22px}.menu-location address{font-size:14px}.menu-social-block{padding-bottom:12px}.menu-top{position:sticky;top:-20px;background:var(--citrien);z-index:5}.launch-caption{font-size:10px;bottom:12px;left:12px}.launch-signal{bottom:12px;right:12px}}
@media(prefers-reduced-motion:reduce){.menu-direct-link>span:after{transition:none}.method-art.is-playing .launch-mockup,.method-art.is-playing .launch-caption,.method-art.is-playing .launch-signal{animation:none!important;transform:none;opacity:1;clip-path:none}}

/* Final corrections: clean marketing silhouette; preserve complete device mockups. */
#hero-showcase[data-active="marketing"] .showcase-orbit{display:none}
#case-dialog[data-case="kollaborate"] .case-cover{height:auto;max-height:none;aspect-ratio:16/9;object-fit:contain;display:block}
#case-dialog .case-gallery .case-image-entire{aspect-ratio:1672/941;height:auto;object-fit:contain}

.hero-word .brand-dot:after,.hero-word[aria-pressed=true] .brand-dot:after,.hero-word:hover .brand-dot:after{transform:none;box-shadow:none}

/* pages.css */
/* Shared service and case page patterns. Approved Noble Matter identity. */
.detail-page{--detail-max:1440px}.detail-hero,.detail-section{padding:clamp(64px,7vw,116px) var(--gutter)}.detail-hero{padding-top:30px}.detail-label{font-size:14px;font-weight:500;line-height:1.4;margin-bottom:26px}.breadcrumbs{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;line-height:1.5;margin-bottom:56px}.breadcrumbs a{min-height:32px;display:inline-flex;align-items:center;border-bottom:1px solid transparent}.breadcrumbs a:hover{border-bottom-color:currentColor}.breadcrumbs>span:not([aria-current]){opacity:.45}.detail-lead{font-size:clamp(17px,1.65vw,23px);line-height:1.55;max-width:40ch}.service-hero{background:var(--petrol);color:var(--chalk)}.service-opening{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;max-width:var(--detail-max);margin:auto}.service-opening h1{font-size:clamp(48px,5.6vw,88px);line-height:1.02;letter-spacing:-.06em;margin-bottom:28px}.service-opening .button{margin-top:32px}.digital-showcase{min-width:0}.digital-images{position:relative}.digital-frame{margin:0;animation:project-arrive .6s var(--ease) both}.digital-frame>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#e4dece;border-radius:6px}.digital-frame figcaption{display:flex;justify-content:space-between;gap:14px;font-size:12px;margin-top:18px;line-height:1.4}.digital-frame figcaption strong{font-weight:500}.digital-frame figcaption span{color:var(--chalk-soft)}.digital-select{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}.digital-select button{min-height:44px;border:1px solid var(--line-dark);padding:10px 15px;font-size:12px;border-radius:40px;transition:background .2s,color .2s}.digital-select button[aria-pressed=true],.digital-select button:hover{background:var(--citrien);color:var(--petrol);border-color:var(--citrien)}.detail-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;padding:13px var(--gutter);border-bottom:1px solid var(--line);background:var(--chalk)}.detail-nav a{min-height:44px;display:flex;align-items:center;font-size:14px;border-bottom:2px solid transparent}.detail-nav a:hover{border-bottom-color:var(--petrol)}.detail-heading{max-width:var(--detail-max);margin:0 auto 54px;display:grid;grid-template-columns:1.5fr 1fr;gap:18px 10%;align-items:end}.detail-heading .detail-label{grid-column:1/-1;margin:0}.detail-heading h2{font-size:clamp(35px,4.25vw,64px)}.detail-heading>p:last-child{font-size:17px;max-width:43ch}.scope-grid{max-width:var(--detail-max);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:5%}.scope-grid article{border-top:1px solid var(--line);padding-top:26px}.scope-grid h3{font-size:clamp(24px,2.3vw,34px);margin-bottom:22px}.scope-grid p{font-size:16px;line-height:1.65}.scope-grid ul{list-style:none;margin-top:24px;font-size:14px}.scope-grid li{padding:10px 0;border-bottom:1px solid var(--line)}.build-types{margin:70px auto 0;padding-top:38px;border-top:1px solid var(--line);max-width:var(--detail-max);display:grid;grid-template-columns:1fr 1fr;gap:10%}.build-types h3{font-size:clamp(28px,3vw,42px)}.build-types p{font-size:17px}.process-section{background:var(--paper)}.delivery-steps{max-width:var(--detail-max);margin:auto;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:5%;counter-reset:none}.delivery-steps li{border-top:1px solid var(--line);padding-top:24px}.step-number{display:inline-grid;place-items:center;width:52px;height:52px;background:var(--citrien);border-radius:50%;font-size:16px;margin-bottom:26px;transition:transform .35s var(--ease),background .35s,color .35s}.delivery-steps li:hover .step-number{transform:translateX(8px);background:var(--petrol);color:var(--citrien)}.delivery-steps h3{font-size:clamp(25px,2.4vw,34px);margin-bottom:18px}.delivery-steps p{font-size:16px}.delivery-steps small{display:block;margin-top:24px;font-size:13px;line-height:1.6;color:var(--ink-soft)}.case-feature-link{display:block;position:relative;max-width:1150px;margin:auto}.case-feature-link>img{width:100%;height:auto;border-radius:6px}.case-feature-label{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px}.case-feature-label strong{font-size:22px;font-weight:500}.case-feature-label small{display:block;font-size:13px;margin-top:7px}.case-feature-link:hover .button{background:var(--petrol);color:var(--chalk)}.case-feature-link:hover .arrow-disc{background:var(--citrien);color:var(--petrol)}.service-search{background:var(--petrol);color:var(--chalk);display:grid;grid-template-columns:1fr 1fr;gap:10%}.service-search .text-link{margin-top:18px}.reading-copy{font-size:18px;line-height:1.65;max-width:56ch}.reading-copy>p+p{margin-top:22px}.reading-copy>h3{margin-bottom:28px}.reading-copy>.text-link{margin-top:26px}.detail-faq{display:grid;grid-template-columns:1fr 1.4fr;gap:10%}.detail-questions details{border-top:1px solid var(--line)}.detail-questions details:last-child{border-bottom:1px solid var(--line)}.detail-questions summary{display:flex;list-style:none;align-items:center;justify-content:space-between;gap:20px;font-size:19px;font-weight:500;padding:24px 0;cursor:pointer;line-height:1.4}.detail-questions summary::-webkit-details-marker,.metric-context summary::-webkit-details-marker{display:none}.detail-questions summary>span{font-size:27px;font-weight:400;transition:transform .2s}.detail-questions details[open] summary>span{transform:rotate(45deg)}.detail-questions details>p{font-size:16px;max-width:58ch;padding:0 30px 28px 0}.service-page-link{margin-left:24px}.detail-page .contact{margin-top:0}
/* Case composition gives the client's work its own material and colour. */
.bonbon-page{--bonbon:#481b24}.case-opening{background:var(--bonbon);color:var(--chalk);padding-bottom:0}.case-opening-title{display:grid;grid-template-columns:1.4fr 1fr;gap:8%;align-items:end}.case-opening-title h1{font-size:clamp(56px,7.5vw,120px);line-height:1;max-width:9ch}.case-opening-title>p{font-size:clamp(20px,2.5vw,34px);line-height:1.35;margin-bottom:6px}.case-scopes{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 42px}.case-scopes span{border:1px solid #f3f1e950;padding:8px 14px;border-radius:30px;font-size:12px}.case-opening-image{max-width:var(--detail-max);margin:auto}.case-opening-image img{width:100%;height:auto;max-height:660px;object-fit:cover;object-position:center;border-radius:6px 6px 0 0}.case-story{display:grid;grid-template-columns:1fr 1fr;gap:10%}.identity-story{background:var(--paper);padding-bottom:var(--section)}.identity-signature{background:var(--bonbon);color:#f8f1e3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;padding:clamp(65px,10vw,140px) var(--gutter)}.identity-signature img{width:min(70%,680px);height:auto}.identity-signature>p{font-size:clamp(14px,1.7vw,23px)}.identity-explanation{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-bottom:50px}.case-image-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 var(--gutter)}.case-image-pair img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:5px}.case-image-pair figcaption{font-size:12px;line-height:1.5;margin-top:13px;color:var(--ink-soft)}.case-web-full>img{width:100%;height:auto;border-radius:6px}.case-mobile-row{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center;margin-top:70px}.mobile-composition{background:var(--bonbon);border-radius:6px;padding:42px 22px;color:var(--chalk);text-align:center}.phone-shell{max-width:270px;margin:auto;padding:9px;background:#211c1a;border-radius:38px;border:1px solid #71655a;box-shadow:0 18px 38px #0003}.phone-shell img{width:100%;height:auto;border-radius:29px}.mobile-composition figcaption{font-size:11px;line-height:1.5;margin-top:25px}.results-section{background:var(--petrol);color:var(--chalk)}.case-results{display:grid;grid-template-columns:1.15fr 1fr;gap:6%;align-items:start}.search-results{border-top:1px solid var(--line-dark);padding-top:24px}.search-results>p{display:flex;justify-content:space-between;gap:18px;font-size:14px}.search-results>p>span{color:var(--chalk-soft)}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:32px 0}.result-stats>div{display:flex;flex-direction:column-reverse;gap:10px}.result-stats dt{font-size:13px;color:var(--chalk-soft)}.result-stats dd{margin:0;font-size:clamp(42px,5vw,76px);letter-spacing:-.055em;line-height:1}.gsc-chart svg{width:100%;height:auto;stroke-width:1;overflow:visible}.gsc-chart figcaption{font-size:11px;margin-top:12px;color:var(--chalk-soft)}.metric-context{margin-top:25px;border-top:1px solid var(--line-dark)}.metric-context summary{display:flex;justify-content:space-between;list-style:none;font-size:13px;min-height:48px;align-items:center;cursor:pointer}.metric-context p{font-size:13px;color:var(--chalk-soft);padding-bottom:20px}.ai-result{background:var(--citrien);color:var(--petrol);border-radius:6px;padding:30px}.ai-result h3{font-size:clamp(26px,2.5vw,36px);margin-bottom:24px}.ai-result .detail-label{margin-bottom:18px;font-size:12px}.proof-preview{display:block;width:100%;background:white;color:var(--petrol);border-radius:7px;overflow:hidden;text-align:left}.proof-preview>img{width:100%;height:230px;object-fit:cover;object-position:top;transition:transform .5s var(--ease)}.proof-preview>span{position:relative;background:white;padding:16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:16px;min-height:54px}.proof-preview:hover>img{transform:scale(1.035)}.evidence-note{font-size:12px!important;line-height:1.6!important;margin-top:20px}.case-closing{display:grid;grid-template-columns:1fr 1fr;gap:26px 10%;align-items:start}.case-closing>h2{grid-row:span 2}.case-closing>p:not(.evidence-note){font-size:18px;max-width:48ch}.case-closing>.button{justify-self:start}.case-closing>.evidence-note{max-width:75ch;margin-top:24px;grid-column:1/-1;color:var(--ink-soft)}.case-closing>.text-link{justify-self:start;grid-column:1/-1}.detail-page~#case-proof-dialog>img{width:100%;height:auto}.page-content-enter{animation:page-content-enter .7s var(--ease) both}
@keyframes project-arrive{from{opacity:.4;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes page-content-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(min-width:1700px){.service-opening,.detail-heading,.scope-grid,.build-types,.delivery-steps{max-width:1440px}.detail-section{padding-left:max(var(--gutter),calc((100vw - 1440px)/2));padding-right:max(var(--gutter),calc((100vw - 1440px)/2))}}
@media(max-width:1050px){.service-opening{gap:4%}.service-opening h1{font-size:clamp(44px,5.6vw,66px)}.digital-frame figcaption{display:block}.digital-frame figcaption span{display:block;margin-top:5px}.digital-select{gap:5px}.digital-select button{padding:9px 12px;font-size:11px}.detail-heading{gap:18px 6%}.scope-grid,.delivery-steps{gap:24px}.scope-grid h3,.delivery-steps h3{font-size:26px}.case-results{gap:26px}.ai-result{padding:22px}.result-stats dd{font-size:50px}.case-mobile-row{gap:6%}}
@media(max-width:760px){.detail-hero{padding-top:20px}.breadcrumbs{margin-bottom:35px;font-size:11px;gap:10px}.service-opening{grid-template-columns:1fr;gap:44px}.service-opening h1{font-size:clamp(43px,9.5vw,64px);max-width:13ch;margin-bottom:25px}.detail-label{font-size:12px;margin-bottom:22px}.detail-lead{font-size:17px}.service-opening .button{margin-top:25px}.digital-frame figcaption{display:flex;font-size:11px}.digital-frame figcaption span{margin:0}.digital-select{margin-top:18px;gap:8px}.digital-select button{font-size:12px;padding:10px 15px}.detail-nav{gap:0 20px;justify-content:flex-start;padding-top:10px;padding-bottom:10px}.detail-nav a{font-size:12px}.detail-section{padding-top:68px;padding-bottom:68px}.detail-heading{display:block;margin-bottom:34px}.detail-heading h2{font-size:38px;margin:18px 0 23px}.detail-heading>p:last-child{font-size:16px}.scope-grid,.delivery-steps{grid-template-columns:1fr;gap:36px}.scope-grid h3,.delivery-steps h3{font-size:29px}.scope-grid ul{margin-top:18px}.build-types,.service-search,.detail-faq,.case-story,.identity-explanation,.case-mobile-row,.case-results,.case-closing{grid-template-columns:1fr;gap:30px}.build-types{margin-top:42px}.delivery-steps li{display:grid;grid-template-columns:42px 1fr;gap:20px}.step-number{width:42px;height:42px;font-size:13px}.delivery-steps small{margin-top:18px}.case-feature-label{align-items:flex-start;flex-direction:column;gap:20px}.case-feature-label .button{font-size:13px}.detail-questions summary{font-size:17px;padding:20px 0}.detail-questions details>p{font-size:15px;padding-right:5px}.reading-copy{font-size:16px}.service-page-link{margin-left:0;display:flex;max-width:max-content;margin-top:10px}.case-opening-title{display:block}.case-opening-title h1{font-size:clamp(54px,12vw,80px);max-width:8ch}.case-opening-title>p{font-size:21px;margin-top:26px}.case-scopes{gap:7px;margin:25px 0 32px}.case-scopes span{font-size:10px;padding:7px 10px}.case-opening-image img{aspect-ratio:3/2;max-height:none}.case-image-pair{grid-template-columns:1fr;gap:28px}.identity-story{padding-bottom:54px}.identity-signature{gap:20px}.identity-signature img{width:90%}.case-mobile-row{margin-top:40px}.mobile-composition{padding:32px 18px}.phone-shell{max-width:235px}.case-results{gap:35px}.result-stats dd{font-size:56px}.search-results>p{font-size:12px}.case-closing>h2{grid-row:auto}.case-closing>p:not(.evidence-note){font-size:16px}.case-closing>.evidence-note{margin-top:10px}.proof-preview>img{height:215px}}
@media(prefers-reduced-motion:reduce){.digital-frame,.page-content-enter{animation:none}.step-number,.proof-preview>img{transition:none}.delivery-steps li:hover .step-number,.proof-preview:hover>img{transform:none}}

/* Dienstopeningen op kleine telefoons: dezelfde compacte stijl tot 430 px.
   Alle tekst blijft zichtbaar; consent en de overige paginastijlen blijven ongewijzigd. */
@media (max-width:430px){
  :is(.service-branding,.service-webshops,.service-geo,.service-marketing,.service-rebranding,.service-seo,.service-graphic-design,.service-content-creation) .detail-hero{padding-top:12px}
  :is(.service-branding,.service-webshops,.service-geo,.service-marketing,.service-rebranding,.service-seo,.service-graphic-design,.service-content-creation) .breadcrumbs{margin-bottom:16px}
  :is(.service-branding,.service-webshops,.service-geo,.service-marketing,.service-rebranding,.service-seo,.service-graphic-design,.service-content-creation) .service-opening .detail-label{margin-bottom:12px}
  :is(.service-branding,.service-webshops,.service-geo,.service-marketing,.service-rebranding,.service-seo,.service-graphic-design,.service-content-creation) .service-opening h1{font-size:38px;line-height:1.05;max-width:none;margin-bottom:14px}
  :is(.service-branding,.service-webshops,.service-geo,.service-marketing,.service-rebranding,.service-seo,.service-graphic-design,.service-content-creation) .service-opening .detail-lead{font-size:16px;line-height:1.45}
  :is(.service-branding,.service-webshops,.service-geo,.service-marketing,.service-rebranding,.service-seo,.service-graphic-design,.service-content-creation) .service-opening .button{margin-top:16px}
}

/* Horeca: houd op korte desktops de hele eerste actie boven de cookiemelding.
   Geldt voor controle A en minimale B; inhoud, typografie en toestemming blijven gelijk. */
@media (min-width:761px) and (max-height:900px){
  .horeca-page .detail-hero{padding-top:16px}
  .horeca-page .breadcrumbs{margin-bottom:16px}
  .horeca-page .service-opening{align-items:start}
  .horeca-page .service-opening .detail-label{margin-bottom:12px}
  .horeca-page .service-opening h1{margin-bottom:16px}
  .horeca-page .service-opening .button{margin-top:16px}
}

/* point-motion.css */
/* Shared Noble Matter point language. No change to the approved homepage hero periods. */
.website-stories{max-width:var(--detail-max);margin:auto;display:grid;gap:clamp(54px,7vw,104px)}
.website-story{display:grid;grid-template-columns:1.55fr 1fr;align-items:center;gap:7%}
.website-story-reverse{grid-template-columns:1fr 1.55fr}
.website-story-reverse figure{grid-column:2;grid-row:1}
.website-story-reverse .website-story-copy{grid-column:1;grid-row:1}
.website-story figure{min-width:0}
.website-story img{width:100%;height:auto;border-radius:6px}
.website-story figcaption{display:flex;justify-content:space-between;gap:20px;font-size:12px;line-height:1.5;margin-top:16px}
.website-story figcaption strong{font-weight:500}
.website-story figcaption span{color:var(--ink-soft)}
.website-story h3{font-size:clamp(28px,2.8vw,42px);margin-bottom:22px}
.website-story p{font-size:16px}
.website-story ul{list-style:none;margin-top:24px;font-size:13px}
.website-story li{padding:10px 0;border-bottom:1px solid var(--line)}
.story-point{display:block;width:32px;height:32px;border-radius:50%;background:var(--citrien);margin-bottom:24px;transition:transform .6s var(--ease),background .3s}
.website-story:hover .story-point{transform:translateX(32px) scale(.7);background:var(--petrol)}
.website-foundation{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:36px;margin:64px auto 0;max-width:var(--detail-max);background:var(--paper);border-radius:6px}
.website-foundation h3{font-size:clamp(28px,3vw,42px)}
.website-foundation p{font-size:16px}
.website-foundation ul{display:flex;flex-wrap:wrap;gap:12px 24px;list-style:none;font-size:12px;margin-top:24px}
.website-foundation li:before{content:'';display:inline-block;width:7px;height:7px;background:var(--petrol);border-radius:50%;margin-right:8px}
.build-types .text-link{margin-top:20px}

/* A circle crosses the section rule once, then settles as a full stop. */
.matter-rule{height:24px;position:relative;margin:0 0 34px;max-width:var(--detail-max,1440px);color:var(--citrien)}
.matter-rule:before{content:'';position:absolute;left:0;right:0;top:11px;height:1px;background:currentColor;opacity:.38}
.matter-rule>span{position:absolute;right:0;top:0;width:24px;height:24px;border-radius:50%;background:currentColor}
.matter-rule.is-arriving>span{animation:matter-travel 1.25s cubic-bezier(.2,.7,.2,1) both}
.matter-rule.is-arriving:before{animation:matter-line 1.05s cubic-bezier(.2,.7,.2,1) both;transform-origin:left}
.method .matter-rule,.process-section .matter-rule{color:var(--petrol)}
.method .matter-rule>span,.process-section .matter-rule>span{background:var(--citrien);box-shadow:inset 0 0 0 1px #123f3c30}
@keyframes matter-travel{0%{right:calc(100% - 24px);transform:scale(.55,1.15)}50%{transform:scale(1.7,.7)}82%{right:0;transform:scale(.85,1.1)}100%{right:0;transform:scale(1)}}
@keyframes matter-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Same tactile circle feedback on home, service and case buttons. */
.button,.button .arrow-disc{transition:background .28s,color .28s,box-shadow .28s}
.button .arrow-disc{position:relative}
.button .arrow-disc:after{content:'';position:absolute;inset:2px;border:1px solid currentColor;border-radius:50%;opacity:0;transform:scale(.45);pointer-events:none}
.button:is(:hover,:focus-visible) .arrow-disc:after{animation:matter-press .55s ease-out both}
.button:is(:hover,:focus-visible){box-shadow:0 0 0 1px #123f3c1f}
.button:is(:hover,:focus-visible) .arrow-disc svg{transform:rotate(0deg) translate(1px,-1px)}
.text-link svg{border-radius:50%;transition:background .25s,color .25s,transform .3s var(--ease),box-shadow .25s}
.text-link:is(:hover,:focus-visible) svg{background:var(--citrien);color:var(--petrol);box-shadow:0 0 0 7px var(--citrien);transform:rotate(-8deg)}
.detail-nav a{gap:8px}
.detail-nav a:before{content:'';height:7px;width:7px;flex:none;background:var(--petrol);border-radius:50%;transform:scale(0);transition:transform .25s var(--ease)}
.detail-nav a:is(:hover,:focus-visible):before,.detail-nav a[aria-current=location]:before{transform:scale(1)}
.detail-nav a[aria-current=location]{border-bottom-color:var(--petrol)}
.digital-select button{display:inline-flex;align-items:center;gap:7px}
.digital-select button:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .25s}
.digital-select button[aria-pressed=true]:before{transform:scale(1)}
.detail-questions summary>span{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;transition:background .25s,transform .25s}
.detail-questions summary:is(:hover,:focus-visible)>span,.detail-questions details[open] summary>span{background:var(--citrien)}
.proof-preview>span{transition:background .25s}
.proof-preview:is(:hover,:focus-visible)>span{background:var(--petrol);color:var(--chalk)}
.proof-preview:is(:hover,:focus-visible)>span svg{color:var(--citrien)}
@keyframes matter-press{0%{opacity:.8;transform:scale(.45)}100%{opacity:0;transform:scale(1.4)}}
@media(max-width:1050px){.website-story,.website-story-reverse{gap:5%;grid-template-columns:1fr 1fr}.website-story figcaption{display:block}.website-story figcaption span{display:block;margin-top:3px}.website-story h3{font-size:30px}.website-foundation{gap:6%;padding:28px}.digital-select{gap:6px}.digital-select button{padding:9px 10px}}
@media(max-width:760px){.website-story,.website-story-reverse{grid-template-columns:1fr;gap:25px}.website-story-reverse figure,.website-story-reverse .website-story-copy{grid-column:auto;grid-row:auto}.website-story h3{font-size:32px}.website-story figcaption{display:flex;font-size:11px}.website-story figcaption span{margin:0}.website-story .story-point{width:24px;height:24px;margin-bottom:18px}.website-foundation{grid-template-columns:1fr;gap:22px;margin-top:42px;padding:25px}.website-foundation h3{font-size:30px}.build-types{gap:24px}.matter-rule{margin-bottom:26px}.detail-nav{column-gap:15px}.detail-nav a{gap:6px}.digital-select button{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.matter-rule.is-arriving>span,.matter-rule.is-arriving:before,.button:is(:hover,:focus-visible) .arrow-disc:after{animation:none}.story-point,.button,.button .arrow-disc,.text-link svg,.detail-nav a:before,.digital-select button:before,.detail-questions summary>span,.proof-preview>span{transition:none}.website-story:hover .story-point,.text-link:is(:hover,:focus-visible) svg,.button:is(:hover,:focus-visible) .arrow-disc svg{transform:none}}

/* Service-specific visual rhythm, shared approved identity. */
.service-art{min-width:0;margin:0}.service-art img{width:100%;height:auto;max-height:530px;object-fit:contain;border-radius:6px}.service-art figcaption,.showcase-story figcaption{font-size:12px;margin-top:16px;line-height:1.5}.showcase-story{display:grid;grid-template-columns:1.25fr 1fr;gap:7%;align-items:center;background:var(--paper)}.showcase-story figure{min-width:0;margin:0}.showcase-story img{width:100%;height:auto;border-radius:6px}.showcase-story h2{font-size:clamp(30px,3.4vw,50px);margin-bottom:28px}.showcase-story .text-link{display:flex;width:fit-content;margin-top:25px}.seo-proof{padding:28px;background:var(--petrol);color:var(--chalk);border-radius:6px;margin-top:28px}.seo-proof>strong{font-size:64px;line-height:1}.seo-proof p{font-size:14px;margin:12px 0}.seo-proof svg{width:100%;height:auto}.seo-proof .text-link svg{width:24px}.service-geo .service-art{padding:20px;background:var(--citrien);color:var(--petrol);border-radius:8px}.service-geo .service-art img{max-height:470px;background:white}.service-apps .service-art img{max-height:570px}.case-page-new .case-opening-image img{max-height:none;object-fit:contain}.case-page-new .case-image-pair img{aspect-ratio:auto;object-fit:contain}.service-art:hover img{filter:brightness(1.03)}
@media(max-width:760px){.showcase-story{grid-template-columns:1fr;gap:34px}.service-art{margin-top:20px}.scope-grid{grid-template-columns:1fr;gap:35px}.service-art img{max-height:430px}.seo-proof>strong{font-size:50px}}

@media(max-width:760px){.case-page-new .case-opening-title h1{font-size:clamp(40px,10vw,56px);max-width:100%;overflow-wrap:break-word}.case-page-new .case-opening-title>*{min-width:0}}

/* Expanded case galleries, September 2026 */
.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px;align-items:start}.project-gallery figure{margin:0;min-width:0}.project-gallery a{display:block;overflow:hidden;border-radius:5px;background:#e9e7df}.project-gallery img{display:block;width:100%;height:auto;transition:filter .3s}.project-gallery a:hover img{filter:brightness(1.04)}.project-gallery figcaption,.case-opening-image figcaption{font-size:14px;line-height:1.5;margin-top:12px;opacity:.75}.project-gallery figure:last-child:nth-child(odd){grid-column:1/-1}.project-gallery img[src*="signature"]{width:400px;max-width:90%;margin:80px auto}.case-opening-image figure{margin:0}.work-collection{display:grid;grid-template-columns:1fr 1fr;gap:64px 30px}.collection-card{display:block;text-decoration:none}.collection-card>div{position:relative;overflow:hidden;border-radius:5px}.collection-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s}.collection-card:hover img{transform:scale(1.025)}.collection-card>div>span{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;border-radius:50%;width:56px;height:56px;background:#dbee69;color:#123f3c;font-size:32px;transition:background .25s,color .25s}.collection-card:hover>div>span{background:#123f3c;color:#dbee69}.collection-card h2{font-size:32px;margin:20px 0 8px}.collection-card p{margin:0}.work-collection+.contact{margin-top:30px}@media(max-width:760px){.project-gallery,.work-collection{grid-template-columns:1fr;gap:30px}.project-gallery figure:last-child:nth-child(odd){grid-column:auto}.collection-card h2{font-size:26px}.project-gallery img[src*="signature"]{margin:40px auto}}@media(prefers-reduced-motion:reduce){.collection-card img{transition:none}}

.app-download{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:#e9e5f1}.app-download h2{font-size:clamp(32px,4vw,60px);line-height:1.05;margin:20px 0}.app-download p{max-width:44ch}.store-badges{display:flex;flex-wrap:wrap;align-items:center;gap:20px}.store-badges>a:not(.text-link){display:block;transition:transform .25s}.store-badges img{height:60px;width:auto;display:block}.store-badges>a:hover{transform:translateY(-3px)}.store-badges>.text-link{flex-basis:100%;margin-top:6px}.case-context .reading-copy .text-link{display:flex;margin-top:20px}@media(max-width:760px){.app-download{grid-template-columns:1fr;gap:24px}.store-badges{gap:14px}.store-badges img{height:46px}}@media(prefers-reduced-motion:reduce){.store-badges>a{transition:none}}

.case-page-new .service-search .reading-copy .text-link{display:flex;width:fit-content;margin-top:24px}.app-download{scroll-margin-top:120px}
/* Studio and contact, approved identity 9.9 */
.studio-opening,.contact-opening{background:var(--petrol);color:var(--chalk);padding-top:75px;padding-bottom:65px}.studio-opening h1,.contact-opening h1{font-size:clamp(48px,7.8vw,112px);line-height:1.02;letter-spacing:-.055em;margin:32px 0 45px;max-width:1200px}.studio-opening-bottom,.contact-opening-bottom{display:flex;justify-content:space-between;align-items:end;gap:40px}.studio-opening-bottom p,.contact-opening-bottom p{max-width:650px;font-size:clamp(18px,1.65vw,24px);line-height:1.55}.studio-opening-bottom .text-link{flex:none}.studio-location{margin:0;position:relative;overflow:hidden}.studio-location img{display:block;width:100%;height:clamp(360px,48vw,700px);object-fit:cover}.studio-location figcaption{position:absolute;bottom:0;left:0;right:0;padding:35px 5%;background:linear-gradient(transparent,#123f3ccc);color:white;font-size:clamp(32px,5vw,64px);letter-spacing:-.04em}.studio-location figcaption span{display:block;font-size:15px;letter-spacing:0;margin-top:10px}.studio-belief,.studio-name,.studio-visit{display:grid;grid-template-columns:1fr 1fr;gap:8%}.studio-page h2,.contact-page h2{font-size:clamp(34px,4.4vw,64px);line-height:1.08;letter-spacing:-.045em}.studio-page .reading-copy .text-link{display:flex;width:fit-content;margin-top:24px}.studio-duo{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:0 5% 70px}.studio-duo figure{margin:0}.studio-duo img{display:block;width:100%;height:auto;border-radius:5px}.studio-duo figcaption{font-size:13px;margin-top:14px}.studio-person{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:12%;background:var(--paper)}.studio-person-photo{position:relative;max-width:410px}.studio-person-photo img{display:block;width:100%;height:auto;border-radius:5px}.studio-person-dot{position:absolute;width:65px;height:65px;border-radius:50%;background:var(--citrien);right:-24px;bottom:24px;transition:transform .6s}.studio-person:hover .studio-person-dot{transform:translateY(-18px) scale(.85)}.studio-name{background:var(--petrol);color:var(--chalk)}.studio-name .studio-chapter{opacity:.7;font-size:15px;margin-top:35px}.contact-opening-bottom>div{display:grid;gap:12px;font-size:clamp(17px,2vw,26px)}.contact-opening-bottom a{width:fit-content;border-bottom:1px solid #ffffff55}.contact-page .contact{background:var(--paper);color:var(--petrol)}
/* De regel hierboven draait de contactsectie van donkergroen naar crème, maar zet
   alleen de geërfde kleur. Elk kind dat zíjn eigen kleur zet bleef op het donkere
   palet staan, en dat is op crème onleesbaar. Gemeten op 16-9-2026:
   foutmeldingen 1.02:1, keuzevelden 1.11:1, hulptekst 1.33:1. De eis is 4.5:1.
   Hieronder dezelfde elementen in het lichte palet. --error stond al in de tokens
   maar werd in geen enkele stylesheet gebruikt. */
.contact-page .contact .field input,
.contact-page .contact .field textarea,
.contact-page .contact .field select{color:var(--petrol);border-bottom-color:var(--line)}
.contact-page .contact .field input::placeholder,
.contact-page .contact .field textarea::placeholder{color:var(--ink-soft);opacity:1}
.contact-page .contact .field label>span{color:var(--ink-soft)}
.contact-page .contact .field select option{background:var(--chalk);color:var(--petrol)}
.contact-page .contact .project-choices span{border-color:var(--line)}
.contact-page .contact .project-choices input:focus-visible+span{outline-color:var(--petrol)}
.contact-page .contact .form-note{color:var(--ink-soft)}
.contact-page .contact .field-error,
.contact-page .contact .form-status{color:var(--error)}
.contact-page .contact .field [aria-invalid=true]{border-bottom-color:var(--error)}
/* Velden als kaders, net als op de toolpagina's. De onderstreepte variant is
   ontworpen voor de donkergroene sectie; op crème leest een kader rustiger en je
   ziet meteen hoe groot het invulvak is. Maten overgenomen uit tools.css zodat
   beide formulieren op de site identiek aanvoelen. */
.contact-page .contact .field input,
.contact-page .contact .field textarea,
.contact-page .contact .field select{
  padding:1rem;border:1px solid #9bad9f;border-radius:5px;background:#fffef8;
  color:var(--petrol);min-height:48px}
.contact-page .contact .field textarea{min-height:140px}
.contact-page .contact .field :is(input,select,textarea):focus{
  outline:none;border-color:var(--petrol);box-shadow:0 0 0 1px var(--petrol)}
.contact-page .contact .field [aria-invalid=true]{
  border-color:var(--error);border-bottom-color:var(--error)}
.contact-page .contact .field [aria-invalid=true]:focus{
  border-color:var(--error);box-shadow:0 0 0 1px var(--error)}.contact-page .contact h2{font-size:clamp(36px,4vw,56px)}.contact-visit{display:grid;grid-template-columns:1.1fr 1fr;gap:7%;align-items:center}.contact-visit figure{margin:0}.contact-visit img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:5px}.contact-visit address{font-style:normal;font-size:20px;line-height:1.6;margin:25px 0}.contact-next{background:var(--paper)}.contact-next .scope-grid{margin-top:45px}.contact-page .contact-direct{display:none}.studio-page .brand-dot,.contact-page .brand-dot{color:var(--citrien)}
.studio-person-rechts{grid-template-columns:1.2fr .8fr;padding-top:0}.studio-person-rechts .studio-person-photo{order:2;justify-self:end}.studio-person-rechts .studio-person-dot{right:auto;left:-24px}
@media(max-width:760px){.studio-opening,.contact-opening{padding-top:42px}.studio-opening h1,.contact-opening h1{font-size:clamp(42px,10.4vw,70px);margin:25px 0 32px}.studio-opening-bottom,.contact-opening-bottom{display:grid;gap:24px}.studio-belief,.studio-name,.studio-visit,.studio-person,.contact-visit{grid-template-columns:1fr;gap:32px}.studio-duo{grid-template-columns:1fr;padding-bottom:40px;gap:30px}.studio-person-photo{width:72%;max-width:300px}.studio-person-rechts .studio-person-photo{order:0;justify-self:start}.studio-person-dot{width:48px;height:48px}.studio-location img{height:360px}.contact-visit img{aspect-ratio:4/3}.studio-opening-bottom p,.contact-opening-bottom p{font-size:18px}.contact-next .scope-grid{gap:25px}}
@media(prefers-reduced-motion:reduce){.studio-person-dot{transition:none}.studio-person:hover .studio-person-dot{transform:none}}

/* Keep the project CTA visible on tablets. */
@media(min-width:600px) and (max-width:1100px){.header .desktop-nav{display:none}.header .header-actions>.button{display:inline-flex;font-size:13px;min-height:44px}.header .header-actions{gap:18px}}

/* Honeypot uit beeld, niet display:none: sommige robots slaan een verborgen
   veld bewust over, maar vullen een veld dat buiten het scherm staat wel in. */
.veld-weg{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* editorial.css */
/* Editorial pages extend the approved identity, with reading and choice as their purpose. */
.editorial-opening,.article-opening{padding-top:clamp(48px,7vw,110px);padding-bottom:clamp(48px,6vw,90px)}
.editorial-opening h1,.article-opening h1{font-size:clamp(42px,6.8vw,100px);line-height:1.02;letter-spacing:-.055em;max-width:1100px;margin:22px 0 32px;font-weight:500;text-wrap:balance}
.editorial-opening>p:last-of-type,.article-summary{max-width:720px;font-size:clamp(18px,1.8vw,25px);line-height:1.5}
.editorial-categories{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.editorial-categories a{display:inline-flex;align-items:center;min-height:46px;padding:10px 18px;border:1px solid #123f3c45;border-radius:30px;transition:background .25s,color .25s}
.editorial-categories a:hover,.editorial-categories a:focus-visible{background:var(--petrol);color:var(--chalk)}
.editorial-feature{padding-top:0;padding-bottom:70px}.editorial-feature .editorial-card{display:grid;grid-template-columns:1.45fr 1fr;gap:0 6%;align-items:start}.editorial-feature .editorial-card>div{grid-row:1/4}.editorial-feature .editorial-card>p{margin-top:15px}.editorial-feature .editorial-card h2{font-size:clamp(30px,3.8vw,55px);line-height:1.08;letter-spacing:-.045em}
.editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 30px;padding-bottom:64px}
.editorial-card{display:block;min-width:0}.editorial-card>div{position:relative;overflow:hidden;background:var(--paper);border-radius:5px}.editorial-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .6s var(--ease)}.editorial-card>p{font-size:14px;margin:20px 0 12px}.editorial-card h2{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.035em;line-height:1.18;font-weight:500}.editorial-arrow{position:absolute;bottom:18px;right:18px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--citrien);font-size:28px;transition:background .25s,color .25s,transform .3s}.editorial-card:is(:hover,:focus-visible) img{transform:scale(1.035)}.editorial-card:is(:hover,:focus-visible) .editorial-arrow{background:var(--petrol);color:var(--citrien);transform:rotate(45deg)}
.editorial-section-title{font-size:clamp(30px,3vw,44px);margin-bottom:30px;font-weight:500;letter-spacing:-.04em}
.article-byline{font-size:14px;margin-top:28px;opacity:.75}.article-layout{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,760px);gap:8%;padding-top:0;padding-bottom:70px;max-width:1450px;margin:auto}.article-toc nav{position:sticky;top:125px;border-top:1px solid #123f3c40;padding-top:22px}.article-toc p{font-size:14px;margin-bottom:18px}.article-toc a{display:block;padding:10px 0;font-size:15px;line-height:1.4;max-width:280px}.article-toc a:hover,.article-toc a:focus-visible{text-decoration:underline;text-underline-offset:5px}.article-body{min-width:0;font-size:18px;line-height:1.75}.article-body section{scroll-margin-top:130px;margin-bottom:48px}.article-body h2{font-size:clamp(27px,3vw,40px);letter-spacing:-.035em;font-weight:500;line-height:1.18;margin-bottom:22px}.article-body p{margin:0 0 20px}.article-body ul,.article-body ol{padding-left:24px;margin:20px 0 28px}.article-body li{padding-left:5px;margin-bottom:12px}.article-body strong{font-weight:600}.article-inset{margin:40px 0 52px}.article-inset img{width:100%;height:auto;border-radius:5px}.article-inset figcaption{font-size:13px;line-height:1.6;margin-top:14px}.article-inset .text-link{display:inline-flex;margin:0 0 0 8px;white-space:normal}.article-source{font-size:14px}.article-source a{text-decoration:underline}.article-action{background:var(--citrien);padding:clamp(24px,4vw,46px);border-radius:5px;margin-top:45px}.article-action .text-link{font-size:16px}.article-related{background:var(--paper);padding-top:65px}.article-related .editorial-grid{grid-template-columns:1fr 1fr;max-width:1000px}.article-related>.detail-label{margin-bottom:25px}
.expertise-group{display:grid;grid-template-columns:1fr 1fr;gap:7%;padding-top:65px;padding-bottom:65px;border-top:1px solid #123f3c30;align-items:start}.expertise-group:nth-of-type(3){background:var(--paper)}.expertise-group-copy h2{font-size:clamp(36px,4.2vw,60px);letter-spacing:-.045em;line-height:1.1;font-weight:500}.expertise-group-copy>p{font-size:19px;line-height:1.6;margin:24px 0 30px;max-width:540px}.expertise-group figure{position:sticky;top:125px}.expertise-group figure img{width:100%;height:auto;aspect-ratio:1.1;object-fit:cover;border-radius:5px}.expertise-group figcaption{font-size:12px;margin-top:13px}.expertise-links>a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid #123f3c35}.expertise-links h3{font-size:25px;letter-spacing:-.03em;font-weight:500}.expertise-links p{font-size:15px;line-height:1.5;margin-top:5px}.expertise-links svg{width:28px;height:28px;flex-shrink:0;transition:transform .3s,background .3s;border-radius:50%}.expertise-links a:hover svg{background:var(--citrien);transform:rotate(-30deg)}.expertise-choice{display:grid;grid-template-columns:1fr 1fr;gap:7%;background:var(--petrol);color:var(--chalk)}.expertise-choice h2{font-size:clamp(34px,4vw,58px);line-height:1.1;letter-spacing:-.04em}
@media(max-width:1000px){.editorial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-layout{gap:5%;grid-template-columns:200px minmax(0,1fr)}.expertise-group{gap:5%}}
@media(max-width:700px){.editorial-feature .editorial-card{display:block}.editorial-feature .editorial-card h2{font-size:34px}.editorial-grid{grid-template-columns:1fr;gap:36px}.article-layout{display:block}.article-toc{margin-bottom:40px}.article-toc nav{position:static}.article-toc a{max-width:none;padding:12px 0}.article-body{font-size:17px}.article-related .editorial-grid{grid-template-columns:1fr}.expertise-group,.expertise-choice{grid-template-columns:1fr;gap:30px}.expertise-group figure{position:static}.expertise-group figure img{aspect-ratio:4/3}.editorial-opening h1,.article-opening h1{font-size:clamp(40px,10vw,60px)}.article-opening .breadcrumbs{font-size:12px}.editorial-categories{gap:8px}.editorial-categories a{font-size:13px}.article-inset .text-link{margin-left:0}.article-body section{scroll-margin-top:105px}}
@media(prefers-reduced-motion:reduce){.editorial-card img,.editorial-arrow,.expertise-links svg{transition:none}.editorial-card:hover img,.editorial-card:hover .editorial-arrow{transform:none}}
.legal-reading{max-width:950px;margin:auto;padding-bottom:80px;font-size:18px;line-height:1.7}.legal-reading h2,.legal-reading h3{font-size:30px;line-height:1.2;margin:36px 0 18px;letter-spacing:-.03em}.legal-reading p{margin-bottom:20px}.legal-reading a{text-decoration:underline;text-underline-offset:3px}
/* Featured article is one whole clickable composition. */
a.editorial-feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:6%;align-items:center;padding-top:0;padding-bottom:70px}a.editorial-feature>div:first-child{overflow:hidden;border-radius:5px}a.editorial-feature img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .6s var(--ease)}a.editorial-feature h2{font-size:clamp(30px,3.8vw,55px);line-height:1.08;letter-spacing:-.045em;margin:20px 0;font-weight:500}a.editorial-feature p{font-size:17px;line-height:1.55}a.editorial-feature .detail-label{font-size:13px}a.editorial-feature .text-link{margin-top:28px}a.editorial-feature:hover img{transform:scale(1.035)}
@media(max-width:700px){a.editorial-feature{grid-template-columns:1fr;gap:26px;padding-bottom:45px}a.editorial-feature h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){a.editorial-feature img{transition:none}a.editorial-feature:hover img{transform:none}}

.case-expanded .case-opening-image img{aspect-ratio:3/2;max-height:none;object-fit:contain}.case-expanded .project-gallery img{height:auto;object-fit:contain}.case-expanded .project-gallery{align-items:start}.case-expanded .case-opening-title h1{max-width:13ch}

/* Authentic AI evidence, 9.14: original pixels inside an interactive browser presentation. */
.ai-evidence{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,6vw,100px);align-items:center}.ai-evidence-copy h2{font-size:clamp(32px,4vw,60px);line-height:1.08;letter-spacing:-.045em}.ai-evidence-copy>p:not(.detail-label){font-size:19px;line-height:1.65;margin:26px 0}.evidence-stage{background:#dbee69;padding:clamp(18px,3vw,44px);border-radius:18px;overflow:hidden}.evidence-browser{background:#fff;border:1px solid #123f3c26;border-radius:13px;overflow:hidden;box-shadow:0 22px 40px #123f3c24;transition:transform .35s,box-shadow .35s}.evidence-stage:hover .evidence-browser{transform:translateY(-5px);box-shadow:0 28px 45px #123f3c30}.evidence-chrome{display:flex;justify-content:space-between;gap:8px;padding:15px 18px;background:#f1f2ee;font-size:12px}.evidence-query{margin:20px!important;padding:14px 18px;border-radius:20px 20px 4px 20px;background:#edf3f8;font-size:16px!important;line-height:1.4!important}.evidence-capture{display:block;height:290px;overflow:hidden;margin:0 18px}.evidence-capture img{width:100%;height:auto!important;max-height:none!important;display:block;transform:translateY(-30%)}.evidence-full summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding:18px 20px;border-top:1px solid #123f3c22;font-size:14px}.evidence-full summary:hover{background:#123f3c;color:#fff}.evidence-full img{display:block;width:100%;height:auto!important;max-height:none!important}.evidence-footnote{font-size:12px!important;line-height:1.5!important;margin:18px 0 0!important}.evidence-full[open] summary span{transform:rotate(45deg)}@media(max-width:750px){.ai-evidence{grid-template-columns:1fr}.evidence-capture{height:230px}.evidence-query{font-size:14px!important}.ai-evidence-copy>p:not(.detail-label){font-size:17px}}@media(prefers-reduced-motion:reduce){.evidence-browser{transition:none}.evidence-stage:hover .evidence-browser{transform:none}}

#bonbon-resultaten .case-results{grid-template-columns:1fr}

.case-opening{background:var(--bonbon,var(--petrol))}
/* Case collection 9.15 */
.case-opening{background:var(--bonbon,var(--petrol))}.case-asset{margin:0;min-width:0}.case-asset-view{background:#e7e7dd;border-radius:8px;overflow:auto;max-height:650px}.case-asset img{display:block;width:100%;height:auto;object-fit:contain}.case-asset figcaption{font-size:13px;line-height:1.5;padding-top:12px;opacity:.75}.project-gallery .case-asset-view{height:480px;display:flex;align-items:flex-start;justify-content:center}.project-gallery .case-asset img{min-height:0;max-height:none}.case-opening-image .case-asset-view{max-height:none}.case-scopes{display:flex;flex-wrap:wrap;gap:12px}.case-scopes span{border:1px solid currentColor;border-radius:30px;padding:8px 16px}.case-story{display:grid;grid-template-columns:1fr 1fr;gap:7vw}.case-story h2{font-size:clamp(28px,3.5vw,52px)}.case-story p{line-height:1.7}.case-asset-view img{transition:transform .6s}.case-asset-view:hover img{transform:scale(1.015)}@media(max-width:700px){.case-story{grid-template-columns:1fr;gap:20px}.project-gallery .case-asset-view{height:auto;max-height:480px}}

/* Case layout correction 9.16 */
.project-gallery .case-asset-view{height:auto;max-height:none;overflow:hidden;display:block;background:transparent}.project-gallery .case-asset img{width:100%;height:auto;display:block}.project-gallery{align-items:start}.case-asset-view:hover img{transform:none}
.project-gallery > .case-asset:only-child{grid-column:1/-1}
/* 9.17: readable case studies and a browsable portfolio. */
.work-page .detail-hero{display:grid;grid-template-columns:1fr 1fr;gap:20px 7%;padding-top:44px;padding-bottom:40px}
.work-page .detail-hero .detail-label{grid-column:1/-1;margin:0}
.work-page .detail-hero h1{font-size:clamp(34px,3.8vw,58px);line-height:1.12;letter-spacing:-.045em;margin:0}
.work-page .detail-hero .detail-lead{font-size:19px;line-height:1.6;margin:0;align-self:start}
.work-filter-bar{padding:0 var(--gutter) 30px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.work-filter-bar[hidden],.collection-card[hidden]{display:none!important}
.work-filters{display:flex;flex-wrap:wrap;gap:8px}
.work-filters button{font:inherit;font-size:14px;color:var(--petrol);background:transparent;border:1px solid #153f3b44;border-radius:30px;padding:12px 18px;cursor:pointer;transition:background .2s,color .2s}
.work-filters button:hover{background:#ddef65}.work-filters button[aria-pressed=true]{background:var(--petrol);color:#f3f1e7}.work-filters button[aria-pressed=true]:before{content:'';display:inline-block;width:7px;height:7px;background:#ddef65;border-radius:50%;margin-right:8px}
.work-count{font-size:13px;white-space:nowrap}
.work-page .work-collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px;padding-top:0}
.work-page .collection-card h2{font-size:24px;line-height:1.2;margin:17px 0 7px}.work-page .collection-card p{font-size:14px;line-height:1.5}
.work-page .collection-card>div{aspect-ratio:3/2;overflow:hidden}.work-page .collection-card img{width:100%;height:100%;object-fit:cover}
.case-page-new .case-opening{padding-top:28px;padding-bottom:48px}.case-page-new .breadcrumbs{margin-bottom:32px}
.case-page-new .case-opening-title{display:grid;grid-template-columns:1.15fr 1fr;align-items:start;gap:7%;max-width:1200px;margin:0 auto}
.case-page-new .case-opening-title h1{font-size:clamp(36px,4vw,64px);line-height:1.08;letter-spacing:-.045em;max-width:21ch;margin:0;overflow-wrap:normal}
.case-page-new .case-opening-title .detail-label{margin-bottom:18px;font-size:15px}
.case-page-new .case-opening-title>p{font-size:clamp(17px,1.45vw,21px);line-height:1.6;margin:40px 0 0;max-width:46ch}
.case-page-new .case-scopes{max-width:1200px;margin:28px auto;gap:8px}.case-page-new .case-scopes span{font-size:13px}
.case-page-new .case-opening-image{max-width:1100px;margin:28px auto 0}.case-page-new .case-opening-image img{width:100%;height:auto;aspect-ratio:auto;max-height:560px;object-fit:contain}
.case-page-new .detail-section{max-width:1280px;margin-inline:auto;padding-top:44px;padding-bottom:44px}
.case-page-new .case-story{align-items:start;gap:7%}.case-page-new .case-story h2,.case-page-new .detail-heading h2{font-size:clamp(28px,2.6vw,40px);line-height:1.15;letter-spacing:-.035em}
.case-page-new .reading-copy,.case-page-new .reading-copy p{font-size:18px;line-height:1.7}
.case-page-new .project-gallery{gap:24px}.case-page-new .project-gallery>.case-asset:only-child{width:min(100%,880px);justify-self:center}
.case-page-new figcaption{font-size:13px;line-height:1.5;margin-top:12px}
.case-website-link{display:inline-flex!important;align-items:center;gap:20px;background:#ddef65!important;color:#153f3b!important;padding:14px 22px;border-radius:32px;border:0!important;font-size:15px!important;margin:0 0 20px;transition:background .2s,color .2s,transform .2s}.case-website-link:hover{background:#fff!important;transform:translateY(-2px)}
.case-motion-track{height:24px;max-width:1200px;margin:16px auto 24px;position:relative;border-bottom:1px solid #ddef6540}.case-motion-track:before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#ddef65;left:0;bottom:-8px;transform:translateX(calc(var(--case-travel,0)*160px));transition:transform .12s linear}

@media(min-width:901px){.case-page-new .case-story .reading-copy p:first-child{margin-top:0}}
@media(max-width:1100px){.work-page .work-collection{grid-template-columns:repeat(2,minmax(0,1fr))}.case-page-new .case-opening-title h1{font-size:46px}}
@media(max-width:700px){.work-page .detail-hero{grid-template-columns:1fr;gap:20px}.work-page .detail-hero .detail-lead{font-size:17px}.work-filter-bar{display:block}.work-count{margin-bottom:0}.work-filters button{padding:11px 14px}.work-page .work-collection{grid-template-columns:1fr;gap:30px}.case-page-new .case-opening-title{grid-template-columns:1fr;gap:20px}.case-page-new .case-opening-title h1{font-size:38px;max-width:22ch}.case-page-new .case-opening-title>p{margin:0;font-size:17px}.case-page-new .case-story{grid-template-columns:1fr;gap:20px}.case-page-new .reading-copy p{font-size:17px}.case-page-new .detail-section{padding-top:28px;padding-bottom:28px}.case-page-new .case-opening-image img{max-height:none}}
@media(prefers-reduced-motion:reduce){.case-motion-track:before{transform:none;transition:none}.case-website-link{transition:none}}
.detail-page .detail-heading{align-items:start}.detail-page .detail-heading h2,.case-page-new .showcase-story h2,.case-page-new .identity-explanation h2{font-size:clamp(28px,3vw,44px);line-height:1.15;letter-spacing:-.035em}.detail-page .detail-heading .detail-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.6}
.case-opening>.case-website-link{margin-left:max(0px,calc((100% - 1200px)/2))}
/* Project captions are direct routes to the work. */
.project-caption{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 24px;pointer-events:auto!important}
.project-caption-link{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;border-bottom:1px solid transparent;font-size:14px;line-height:1.45;transition:color .2s,border-color .2s;pointer-events:auto!important}
.project-caption-link:hover{border-bottom-color:currentColor}.project-caption-link:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.showcase-scene .project-caption,.service-scene .project-caption{z-index:3}
.showcase-scene .project-caption{gap:0}.showcase-scene .project-caption-link{font-size:12px;min-height:32px}
/* Searchable reference library. */
.term-search{display:block;width:min(100%,560px);margin-top:12px;padding:16px 18px;background:#fff;border:1px solid #8a9c94;border-radius:8px;font:inherit;color:inherit}
.term-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.term-group{margin-bottom:64px}.term-group>h2{font-size:clamp(28px,4vw,44px);margin-bottom:24px}.term-card{border-top:1px solid #bdc6bb;padding:24px 0;scroll-margin-top:120px}.term-card h3{font-size:24px;margin-bottom:12px}.term-card p{font-size:17px;line-height:1.65;max-width:60ch}.term-card summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:500}.term-card details[open] summary{margin-bottom:8px}.term-card a{min-height:44px;display:inline-flex;align-items:center}.term-card[hidden],.term-group[hidden]{display:none!important}#term-status{font-size:15px;min-height:24px;margin-top:10px}.glossary label{display:block}
@media(max-width:680px){.term-grid{grid-template-columns:1fr;gap:0}.term-group{margin-bottom:36px}}
/* Keep long editorial titles readable within the opening. */
.article-opening h1,.editorial-opening h1{font-size:clamp(36px,4.5vw,64px);line-height:1.12;letter-spacing:-.04em;max-width:20ch}.article-opening .article-summary{font-size:clamp(18px,1.65vw,23px);line-height:1.6;max-width:62ch}.article-opening{padding-top:64px;padding-bottom:56px}
@media(max-width:680px){.article-opening{padding-top:36px;padding-bottom:36px}.article-opening h1{font-size:36px}.article-opening .article-summary{font-size:18px}}

/* Keep compact case heroes on their own background, without letterbox panels. */
.case-page-new .case-opening-image .case-asset-view{background:transparent}

/* 9.25: case context and clear sector filtering */
.case-scopes span{background:var(--citrien);color:var(--petrol);border:0;padding:11px 19px;font-size:13px;border-radius:999px}.case-scopes .case-sector{background:var(--chalk);color:var(--petrol)}
.case-visit{padding-top:12px!important}.work-sector-filter{padding:0 var(--gutter) 24px;display:flex;gap:16px;align-items:center}.work-sector-filter select{font:inherit;border:1px solid var(--petrol);border-radius:999px;background:transparent;color:var(--petrol);padding:12px 20px;max-width:100%}.work-empty{padding:20px var(--gutter)}
.studio-person .reading-copy h2{margin-bottom:32px}.director h3{margin-bottom:24px}
.hero-word[data-showcase="webdesign"]{color:var(--citrien)!important}.hero-word[data-showcase="webdesign"] .brand-dot{color:var(--chalk)!important}
.hero-word[data-showcase="webdesign"]:hover,.hero-word[data-showcase="webdesign"]:focus-visible{color:var(--chalk)!important}.hero-word[data-showcase="webdesign"]:hover .brand-dot,.hero-word[data-showcase="webdesign"]:focus-visible .brand-dot{color:var(--citrien)!important}
/* Tool onboarding and personal plans */
.tool-page [hidden]{display:none!important}.tool-panel{scroll-margin-top:130px}.wizard-step{min-height:280px;border:0;padding:16px 0;margin:0}.wizard-step legend{font-size:clamp(22px,2.2vw,32px);line-height:1.3;margin-bottom:24px}.wizard-step label{display:block}.wizard-step .tool-check{display:flex}.wizard-progress{margin:0 0 8px;font-size:15px}.tool-panel progress{width:100%;height:5px;accent-color:var(--petrol);margin:0 0 25px}.wizard-nav{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:28px}.wizard-nav button:disabled{opacity:.35;cursor:default}.tool-result{scroll-margin-top:130px}.tool-result h2{font-size:clamp(28px,3vw,42px);line-height:1.15}.tool-result h3{font-size:22px;margin-top:28px}.tool-result .plan-email{margin-top:30px;padding-top:26px;border-top:1px solid #ffffff40}.plan-email label{display:block;margin-bottom:12px;font-size:19px}.plan-email input{display:block;width:100%;padding:16px;border:1px solid #abc0b2;background:#fff;color:#123e3b;border-radius:6px;font:inherit}.plan-email a{color:inherit;text-decoration:underline}.plan-status{font-size:15px;line-height:1.5}.plan-email .button{margin:10px 0;white-space:normal}.full-plan details{padding:18px 0;border-bottom:1px solid #ffffff40}.full-plan summary{font-weight:500;cursor:pointer}.full-plan ul{font-size:17px}.plan-actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px}.plan-demo{font-size:15px;margin-top:16px}.tool-result .tool-small{line-height:1.55}.tool-result li+li{margin-top:10px}@media(max-width:600px){.wizard-nav{gap:10px}.wizard-nav .button{padding:15px 18px;font-size:15px}.wizard-step{min-height:260px}.tool-options{gap:10px}}
.hero-word[data-showcase="webdesign"] .brand-dot{color:transparent!important}.hero-word[data-showcase="webdesign"] .brand-dot::after{background:var(--chalk)!important}.hero-word[data-showcase="webdesign"]:hover .brand-dot,.hero-word[data-showcase="webdesign"]:focus-visible .brand-dot{color:transparent!important}.hero-word[data-showcase="webdesign"]:hover .brand-dot::after,.hero-word[data-showcase="webdesign"]:focus-visible .brand-dot::after{background:var(--citrien)!important}

/* tools.css */
.tool-page{padding-bottom:7rem}.tool-opening,.tool-workspace,.tool-grid,.tool-explainer{width:min(1280px,90%);margin-inline:auto}.tool-opening{padding:clamp(3rem,7vw,7rem) 0 3rem}.tool-opening h1{font-size:clamp(2.5rem,5.5vw,5.4rem);line-height:1.07;max-width:950px;margin:1.5rem 0;letter-spacing:-.045em}.tool-opening>p{font-size:clamp(1.05rem,1.6vw,1.4rem);max-width:700px;line-height:1.6}.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.tool-card{padding:clamp(1.5rem,4vw,3rem);background:#e5e7dc;border-radius:10px;text-decoration:none;display:flex;flex-direction:column;transition:background .25s,transform .25s}.tool-card:hover{background:#dbee69;transform:translateY(-4px)}.tool-number{width:44px;height:44px;border-radius:50%;background:#123f3c;color:#dbee69;display:grid;place-items:center}.tool-card h2{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.15;margin:1.6rem 0 1rem}.tool-card p{line-height:1.65;max-width:460px}.tool-go{margin-top:auto;padding-top:2rem;display:flex;justify-content:space-between}.tool-workspace{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:start}.tool-panel{padding:clamp(1.5rem,3vw,3rem);border:1px solid #b9c5bc;border-radius:12px}.tool-panel h2,.tool-result h2,.tool-explainer h2{font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.15;margin-bottom:1.8rem}.tool-panel>label{display:block;margin:1.5rem 0 .6rem}.tool-panel select,.tool-panel>input,.tool-panel textarea{width:100%;padding:1rem;border:1px solid #9bad9f;border-radius:5px;background:#fffef8;color:#123f3c;font:inherit;min-height:48px}.tool-panel fieldset{border:0;padding:0;margin:1.8rem 0}.tool-panel legend{margin-bottom:.8rem}.tool-check{display:flex;gap:.8rem;align-items:center;padding:.5rem 0;min-height:44px}.tool-check input{width:20px;height:20px;accent-color:#123f3c}.tool-panel .button{margin-top:1.7rem;min-height:52px}.tool-result{position:sticky;top:130px;background:#123f3c;color:#f3f1e9;padding:clamp(1.5rem,4vw,3rem);border-radius:12px;overflow:hidden}.tool-result p{line-height:1.7;margin:1rem 0}.tool-result .detail-label{color:#dbee69}.tool-small{font-size:.9rem;line-height:1.6;opacity:.85}.tool-orbit{display:block;width:48px;height:48px;background:#dbee69;border-radius:50%;margin-bottom:2rem;animation:tool-float 5s ease-in-out infinite}.tool-result .button{margin-top:1.5rem}.tool-result h3{font-size:1.1rem;margin-top:1.3rem}.tool-result ul{padding-left:1.2rem;line-height:1.7}.tool-result dl{margin:1.5rem 0}.tool-result dt{font-size:.9rem;opacity:.8}.tool-result dd{font-size:2rem;margin:0 0 1rem}.tool-result a.text-link{color:#dbee69}.tool-explainer{padding-top:5rem}.tool-explainer .tool-grid{width:100%;grid-template-columns:repeat(3,1fr)}.tool-explainer p{line-height:1.65}.tool-explainer h3{font-size:1.3rem;margin-bottom:1rem}.brand-question{padding-bottom:1.8rem!important;border-bottom:1px solid #c4cec4!important}.brand-question legend{font-size:1.15rem;line-height:1.5}.brand-question legend>span{display:inline-block;font-size:.8rem;margin-right:.5rem}.tool-options{display:flex;flex-wrap:wrap;gap:.5rem}.tool-options label{position:relative}.tool-options input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.tool-options span{display:block;padding:.7rem .8rem;border:1px solid #9bad9f;border-radius:30px}.tool-options input:checked+span{background:#123f3c;color:#dbee69}.tool-options input:focus-visible+span{outline:3px solid #668136;outline-offset:3px}.tool-result:focus{outline:3px solid #dbee69;outline-offset:4px}@keyframes tool-float{50%{transform:translateX(45px) scale(.85)}}@media(max-width:760px){.tool-workspace,.tool-grid,.tool-explainer .tool-grid{grid-template-columns:1fr}.tool-result{position:relative;top:auto}.tool-page{padding-bottom:3rem}.tool-opening{padding-top:2.5rem}.tool-panel .button{width:100%;justify-content:center}.tool-options span{font-size:.9rem}.tool-opening h1{overflow-wrap:break-word}}@media(prefers-reduced-motion:reduce){.tool-orbit{animation:none}.tool-card{transition:none}}

.tool-result button.text-link{display:block;color:#dbee69;background:none;border:0;border-bottom:1px solid currentColor;padding:.7rem 0;font:inherit;cursor:pointer;margin-top:1rem}.tool-result dd{font-size:clamp(1.25rem,2.5vw,2rem)}
@media print{
 body:has(.tool-page) header,body:has(.tool-page) footer,body:has(.tool-page) dialog,.tool-panel,.tool-explainer,.tool-result .button,.tool-result button,.tool-result .text-link,.tool-orbit{display:none!important}
 .tool-page,.tool-workspace{display:block;width:100%;padding:0;margin:0}
 .tool-result{position:static;background:white!important;color:black!important;overflow:visible;padding:1rem;border:0;break-inside:auto}
 .tool-result .detail-label{color:black}.tool-result:focus{outline:0}.tool-result li{break-inside:avoid}
 .tool-page:has([data-print-target]) .tool-opening,.tool-result:not([data-print-target]){display:none!important}
}

.tool-result details{margin-block:1.5rem}.tool-result summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding-block:.5rem}.tool-result h4{font-size:1rem;margin-top:1rem}.tool-result details>p{margin-top:.5rem}
@media print{.tool-result details{display:block}.tool-result details>*{display:block!important}.tool-result details::details-content{content-visibility:visible;display:block}.tool-result summary{display:none!important}}

/* 9.27: shared spacing and field treatment across every tool step. */
.tool-panel{padding:clamp(24px,3.5vw,48px)}
.tool-panel .wizard-step{min-height:0;padding:0;margin:32px 0 0}
.tool-panel .wizard-step:focus{outline:none}
.tool-panel .wizard-step>legend{padding:0;margin-bottom:32px}
.tool-panel .wizard-step>label:not(.tool-check){display:block;margin:28px 0 12px;line-height:1.5}
.tool-panel .wizard-step>legend+label{margin-top:0}
.tool-panel :is(input:not([type="radio"]):not([type="checkbox"]),select,textarea){display:block;box-sizing:border-box;width:100%;min-height:56px;padding:16px 18px;border:1px solid #9bad9f;border-radius:8px;background:#fffef8;color:#123f3c;font:inherit;line-height:1.5;transition:border-color .18s,box-shadow .18s}
.tool-panel :is(input:not([type="radio"]):not([type="checkbox"]),select,textarea):focus,.plan-email input:focus{outline:none;border-color:#123f3c;box-shadow:0 0 0 1px #123f3c}
.tool-panel .wizard-step>p{line-height:1.65;margin:0 0 24px}
.tool-panel .wizard-step h2{margin-bottom:28px}
.tool-panel .wizard-step fieldset{margin:28px 0}
.tool-panel .tool-check{padding:12px 0;gap:14px;line-height:1.5}
.tool-panel .tool-options{gap:12px;margin-top:12px}
.tool-panel .tool-options label{margin:0}
.tool-panel .tool-options span{padding:12px 18px}
.tool-panel .wizard-nav{margin-top:48px;padding-top:28px;border-top:1px solid #c4cec4;gap:24px}
.tool-panel .wizard-nav .button{margin-top:0}
.tool-panel progress{display:block;margin-bottom:0}
.tool-result:focus{outline:none}
.tool-result .plan-email{margin-top:36px;padding-top:32px}
.tool-result .plan-email .button{margin:24px 0 16px}
.tool-result .plan-actions{gap:24px 32px}
.tool-result li+li{margin-top:16px}
@media(max-width:760px){.tool-workspace{gap:32px}.tool-panel .wizard-nav{margin-top:36px;padding-top:24px}.tool-panel .wizard-nav .button{width:auto}.tool-panel .wizard-step>legend{margin-bottom:28px}.tool-panel .wizard-step>label:not(.tool-check){margin-top:24px}.tool-panel .wizard-step>legend+label{margin-top:0}}

/* 3-11-2026 lead magnets: websitescan en AI-test rechtstreeks op de site, gesprek voor de e-mail,
   horeca-checklist aanvinkbaar, tools-blok op home en dienstpagina's. */
.tool-live-wrap{width:min(1280px,90%);margin:0 auto 4rem}
.tool-live{background:#123f3c;color:#f3f1e9;border-radius:12px;padding:clamp(24px,4vw,56px);min-height:220px}
.tool-live :is(h2,h3){color:#f3f1e9;overflow-wrap:break-word;hyphens:none}
.tool-live .detail-label{color:#dbee69}
.tool-live p{line-height:1.65;margin:.6rem 0}
.tool-live .tool-small{opacity:.82}
.tool-live a:not(.button){color:#dbee69}
.lt-form label,.lt-mailform>label{display:block;margin:0 0 10px;font-weight:500}
.lt-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin-bottom:8px}
.lt-velden label{display:flex;flex-direction:column;gap:10px;font-weight:500}
.lt-velden label .tool-small{display:inline;font-weight:400}
.tool-live input{box-sizing:border-box;width:100%;min-height:56px;padding:14px 18px;border:1px solid #46615b;border-radius:8px;background:#f3f1e9;color:#123f3c;font:inherit;line-height:1.4}
.tool-live input:focus{outline:3px solid #dbee69;outline-offset:2px}
.lt-rij{display:flex;gap:12px;align-items:stretch}
.lt-rij input{flex:1;min-width:0}
.lt-rij .button,.lt-form>.button{flex:none;white-space:nowrap;min-height:56px}
.lt-form>.button{margin-top:20px}
.lt-melding{min-height:1.4em;color:#dbee69;font-weight:500}
.lt-melding:empty{min-height:0;margin:0}
.lt-lok{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lt-bezig{display:flex;align-items:center;gap:14px;margin-top:22px;font-weight:500}
.lt-draai{width:22px;height:22px;border-radius:50%;border:3px solid rgba(219,238,105,.3);border-top-color:#dbee69;animation:lt-draai 1s linear infinite;flex:none}
@keyframes lt-draai{to{transform:rotate(360deg)}}
.lt-datum{margin:0}
.lt-domein{font-size:clamp(1.6rem,4vw,2.8rem);line-height:1.1;margin:.4rem 0 1.6rem;word-break:break-word}
.lt-domein:focus{outline:none}
.lt-score{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 40px;padding:28px;border-radius:10px;background:#082e2b}
.lt-groot{font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.15;font-weight:500;margin:.3rem 0 .6rem!important}
.lt-tellers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-self:center}
.lt-tellers div{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:.92rem}
.lt-tellers b{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1;font-weight:500}
.lt-tellers i,.lt-punt:before{display:block;width:12px;height:12px;border-radius:50%}
.st-groen{background:#8fd18b}.st-oranje{background:#f2b45a}.st-rood{background:#f07a6a}
.lt-sectie{font-size:1.25rem;margin:2.4rem 0 1rem}.lt-sectie span{opacity:.7;font-weight:400}
.lt-punten{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.lt-punt{position:relative;padding:20px 20px 20px 44px;border-radius:10px;background:rgba(243,241,233,.06);border:1px solid rgba(243,241,233,.12)}
.lt-punt:before{content:"";position:absolute;left:18px;top:26px}
.lt-punt.st-rood:before{background:#f07a6a}.lt-punt.st-oranje:before{background:#f2b45a}
.lt-punt.st-rood,.lt-punt.st-oranje{background:rgba(243,241,233,.06)}
.lt-stand{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;opacity:.8;margin:0 0 4px!important}
.lt-punt strong{display:block;font-size:1.08rem;line-height:1.4}
.lt-slot{font-size:.92rem;color:#dbee69;margin-bottom:0!important}
.lt-goed{columns:2;column-gap:32px;padding-left:1.2rem;line-height:1.7}
.lt-gesprek,.lt-mail,.lt-vraag,.lt-rapport{margin-top:2rem;padding:28px;border-radius:10px}
.lt-gesprek{background:#dbee69;color:#123f3c}
.tool-live .lt-gesprek :is(h3,p,a:not(.button)){color:#123f3c}
.lt-gesprek .button{margin-top:12px;background:#123f3c;color:#f3f1e9}
.lt-gesprek h3,.lt-mail h3,.lt-rapport h3{font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.25;margin:0 0 .4rem}
.lt-mail,.lt-vraag,.lt-rapport{border:1px solid rgba(243,241,233,.18)}
.lt-mailform{margin-top:16px}
.lt-ok{font-weight:500;color:#dbee69}
.lt-vraag strong{display:block;font-size:1.15rem;line-height:1.45;margin:.4rem 0}
.lt-stand-ai{display:inline-block;padding:6px 14px;border-radius:30px;font-weight:500;margin:.6rem 0!important}
.lt-stand-ai.ja{background:#dbee69;color:#123f3c}.lt-stand-ai.nee{background:#f07a6a;color:#082e2b}
.lt-chips{list-style:none;padding:0;margin:.4rem 0 1rem;display:flex;flex-wrap:wrap;gap:8px}
.lt-chips li{padding:6px 12px;border-radius:30px;background:rgba(243,241,233,.1);font-size:.92rem;overflow-wrap:anywhere}
.lt-bollen{display:flex;gap:8px;margin:.4rem 0}
.lt-bollen i{width:18px;height:18px;border-radius:50%;border:2px solid #dbee69}
.lt-bollen i.ja{background:#dbee69}
.lt-rapport ul{padding-left:1.2rem;line-height:1.7;margin:.6rem 0}
.lt-deel{margin-top:2rem!important}
.tool-live .text-link{display:inline-block;color:#dbee69;background:none;border:0;border-bottom:1px solid currentColor;padding:.4rem 0;font:inherit;cursor:pointer;min-height:44px}
.lt-deel-ok{display:block;font-size:.9rem;opacity:.85}
.lt-opnieuw{margin-top:.6rem}
.plan-gesprek{margin-top:28px;padding:22px;border-radius:10px;background:#dbee69;color:#123f3c}
.plan-gesprek p{margin:0 0 12px!important;font-weight:500}
.tool-result .plan-gesprek .button{margin:0;background:#123f3c;color:#f3f1e9}
.plan-of{margin-top:28px!important}
.tool-result .plan-of+.plan-email{margin-top:0;padding-top:0}
/* horeca-checklist */
.checklist-input{width:30px;height:30px;margin:4px 0 0;accent-color:#123f3c;cursor:pointer}
.checklist label{cursor:pointer}
.horeca-score{width:min(1280px,90%);margin:0 auto 1.5rem;display:flex;gap:24px 40px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:28px;border-radius:12px;background:#123f3c;color:#f3f1e9;position:sticky;bottom:12px;z-index:5}
.horeca-score .detail-label{color:#dbee69;margin:0}
.horeca-getal{font-size:clamp(1.3rem,3vw,1.9rem);margin:.2rem 0!important}
.horeca-score .tool-small{margin:0;max-width:520px}
.horeca-result{position:static;width:min(1280px,90%);margin:0 auto 4rem;box-sizing:border-box}
/* tools-blok op home en dienstpagina's */
.tools-blok .tools-blok-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:2rem}
.tools-blok .tool-card{padding:28px}
.tools-blok .tool-card h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2;margin:1.2rem 0 .6rem}
.tools-blok .tool-go{padding-top:1.4rem}
@media(max-width:900px){.tools-blok .tools-blok-grid{grid-template-columns:1fr}}
@media(max-width:760px){
 .tool-live-wrap{width:auto;margin:0 16px 3rem}
 .lt-velden,.lt-score{grid-template-columns:1fr}
 .lt-rij{flex-direction:column}
 .lt-rij .button,.lt-form>.button{width:100%;justify-content:center;white-space:normal}
 .lt-score,.lt-gesprek,.lt-mail,.lt-vraag,.lt-rapport{padding:20px}
 .lt-goed{columns:1}
 .lt-gesprek .button,.plan-gesprek .button{width:100%;justify-content:center;white-space:normal}
 .horeca-score{width:auto;margin:0 16px 1.5rem;padding:18px;bottom:8px}
 .horeca-score .button{width:100%;justify-content:center}
 .horeca-score .tool-small{display:none}
 .horeca-result{width:auto;margin:0 16px 3rem}
}
@media(prefers-reduced-motion:reduce){.lt-draai{animation:none}}
@media print{.horeca-score,.horeca-result,.tool-live-wrap{display:none!important}.checklist-input{appearance:none;border:1.5px solid #000;border-radius:6px}}

/* afwerking.css */
/* afwerking.css
   Correcties na de livegang van 17-9-2026, gemeld door Thierry op mobiel.
   Laadt als laatste, dus deze regels winnen. Elk blok noemt wat het repareert. */

/* ── 1. De inline pijl was het teken U+2197, de noordoostpijl. General Sans heeft dat teken niet,
      dus iOS viel terug op Apple Color Emoji en toonde een blauw emoji-pijltje,
      terwijl desktop een tekstfont pakte. Nu overal dezelfde SVG als in het menu. ── */
.inline-arrow{
  width:.78em;height:.78em;
  margin-left:.42em;
  vertical-align:-.08em;
  stroke-width:2;
  flex:none}
.project-caption-link .inline-arrow{margin-left:.36em}

/* ── 2. De citrien punt stond als inline-block achter de kop. Een inline-block mag
      afbreken, dus op mobiel viel de punt op een eigen regel onder "Geselecteerd werk".
      Als gewone inline hoort hij bij de tekstregel en breekt hij niet meer af. ── */
h1 .brand-dot,h2 .brand-dot,h3 .brand-dot{display:inline;width:auto}
h1 .brand-dot:after,h2 .brand-dot:after,h3 .brand-dot:after{left:.055em}

@media(max-width:760px){
  /* ── 3. De bijschriften in de hero stonden rechtsonder óver de foto, 9px groot.
        "Branding voor de reissector" was daardoor onleesbaar. Nu onder het beeld,
        volle breedte, op een leesbare maat. ── */
  .showcase-main{inset:0 0 27% 5%}
  .showcase-detail{bottom:16%}
  .showcase-scene figcaption{
    left:0;right:0;bottom:0;width:auto;
    padding:12px 0 0;
    font-size:14px;line-height:1.45}
  .showcase-scene .project-caption{
    flex-direction:column;align-items:flex-start;gap:4px}
  .showcase-scene .project-caption-link{
    font-size:14px;min-height:30px;line-height:1.4;color:var(--chalk)}
  .showcase-scene figcaption strong{font-size:14px}

  /* ── 5. De Paesano-opname is 1536x1024, dus 3:2, maar de hero-container is op mobiel
        vrijwel vierkant (315x317). Met object-fit:cover sneed dat een derde van de
        breedte weg en viel de bovenkant van het scherm eruit. Met contain staat de
        hele tablet in beeld. De achtergrond wordt doorzichtig zodat er geen papieren
        balken ontstaan maar de petrol van de hero doorloopt. ── */
  [data-scene=webdesign] .showcase-main{background:transparent}
  [data-scene=webdesign] .showcase-main>img{
    object-fit:contain!important;object-position:50% 20%}

}

/* ── 4. Aanraakschermen: iOS zet :focus-visible ook bij een tik, niet alleen bij
    toetsenbord. Daardoor sprong er een wit kader om een contactveld en een zwart
    kader om Sluiten in het menu. Op een aanraakscherm vervangen we het kader door
    een merkkleurige markering, zodat er wél een aanwijzing blijft. ── */
@media(hover:none) and (pointer:coarse){
:focus-visible{outline:none!important}
.contact .field :is(input,textarea,select):focus,
.contact .field :is(input,textarea,select):focus-visible{
  outline:none!important;box-shadow:none!important;
  border-bottom-color:var(--citrien)}
.contact-page .contact .field :is(input,textarea,select):focus{
  outline:none!important;box-shadow:none!important;border-color:var(--citrien)}
.close-button:focus-visible,.menu-close:focus-visible,
.project-caption-link:focus-visible,.hero-word:focus-visible{
  outline:none!important;box-shadow:none!important}
}

/* ── 6. Cookiemelding. Cloudflare Web Analytics is cookieloos en draait altijd;
      Microsoft Clarity plaatst cookies en start pas na een uitdrukkelijk ja.
      Weigeren moet even zichtbaar en even makkelijk zijn als aanvaarden, anders
      is het geen geldige toestemming. ── */
#nm-consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;
  background:var(--petrol-dark,#082E2B);color:var(--chalk);
  border:1px solid rgba(243,241,233,.16);border-radius:10px;
  box-shadow:0 18px 50px rgba(0,30,28,.45);
  opacity:0;transform:translateY(12px);
  transition:opacity .28s ease,transform .28s ease}
#nm-consent.is-zichtbaar{opacity:1;transform:none}
.nm-consent-in{
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  padding:18px 22px;max-width:1100px;margin:0 auto}
.nm-consent-tekst{margin:0;flex:1 1 320px;font-size:14px;line-height:1.55;color:var(--chalk)}
.nm-consent-tekst a{color:var(--citrien);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.nm-consent-knoppen{display:flex;gap:10px;flex:0 0 auto}
#nm-consent button{
  font:inherit;font-size:14px;cursor:pointer;
  padding:11px 20px;border-radius:999px;min-height:44px;
  border:1px solid var(--chalk);background:transparent;color:var(--chalk);
  transition:background .2s,color .2s}
#nm-consent .nm-consent-ja{background:var(--citrien);border-color:var(--citrien);color:var(--petrol);font-weight:500}
#nm-consent button:hover{background:var(--chalk);color:var(--petrol)}
#nm-consent .nm-consent-ja:hover{background:var(--chalk);border-color:var(--chalk)}
#nm-consent button:focus-visible{outline:2px solid var(--citrien);outline-offset:3px}
.nm-consent-kort{display:none}
/* 10-10-2026: op telefoon hoogstens ongeveer 15% van het scherm. Korte tekst, drie
   gelijke knoppen op één rij. Weigeren blijft even groot en even zichtbaar. */
@media(max-width:640px){
  #nm-consent{left:8px;right:8px;bottom:8px}
  .nm-consent-in{padding:10px 12px;gap:8px}
  .nm-consent-lang{display:none}
  .nm-consent-kort{display:inline}
  .nm-consent-tekst{flex-basis:100%;font-size:13px;line-height:1.4}
  .nm-consent-knoppen{width:100%;gap:6px;flex-wrap:nowrap!important}
  #nm-consent button{flex:1 1 0;min-width:0;padding:8px 6px!important;font-size:13px!important;min-height:44px!important;white-space:normal!important;line-height:1!important}
  #nm-consent .nm-consent-keuzes:not([hidden]) ~ .nm-consent-knoppen{flex-wrap:wrap!important}}
@media(prefers-reduced-motion:reduce){
  #nm-consent{transition:none}}

/* ── 7. Datumregel onderaan de juridische pagina's ── */
.legal-date{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-soft)}

/* ── 10-10-2026. Contactblok: link naar de intake en de antwoordbelofte. ── */
.contact-intro>p.contact-intake{font-size:var(--type-15);margin:0 0 var(--space-25);max-width:var(--size-400)}
.contact-intake .text-link{display:inline-flex;gap:8px;align-items:center;margin-top:6px;color:var(--citrien)}
.contact-intake .text-link svg{width:16px;height:16px}
.contact-page .contact-intake .text-link{color:var(--petrol)}
.turnstile-plek:empty{display:none}
.turnstile-plek{margin:0 0 var(--space-16)}
#project-form .form-note{margin:var(--space-16) 0 0}
#project-form.is-verzonden .form-status{font-size:var(--type-16);color:inherit}
.contact-opening-cta{margin:40px 0 0}
.footer-intake{display:inline-flex!important;gap:8px;align-items:center;color:var(--citrien)!important;margin-bottom:6px}
.footer-intake svg{width:15px;height:15px}

/* ── 10-10-2026. Prijzen, FAQ, social media en horeca (verkoop deel B). ── */
.prijs-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:28px!important}
.prijs-grid article{display:flex;flex-direction:column}
.prijs-grid article>.text-link{margin-top:auto;padding-top:22px;display:inline-flex;gap:8px;align-items:center;width:fit-content}
.prijs-grid .prijs-naam,.prijs-naam{font-size:15px;font-weight:500;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.prijs-grid p.prijs,.prijs{font-size:clamp(30px,3vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.1;margin:0 0 16px}
.prijs-grid .prijs small,.prijs small{font-size:15px;font-weight:400;letter-spacing:0;color:var(--ink-soft)}
.te-bevestigen{background:#c0392b;color:#fff;font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 8px;border-radius:99px}
.prijs-meer{max-width:1440px;margin:36px auto 0;display:flex;flex-wrap:wrap;gap:14px 32px}
.prijs-meer .text-link{display:inline-flex;gap:8px;align-items:center}
.prijs-meer .text-link svg,.prijs-grid .text-link svg{width:16px;height:16px}
.prijs-tabel{width:100%;max-width:1440px;margin:0 auto;border-collapse:collapse;font-size:16px}
.prijs-tabel th{text-align:left;font-size:13px;font-weight:500;padding:0 0 12px;border-bottom:1px solid var(--line)}
.prijs-tabel td{padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prijs-tabel td:last-child,.prijs-tabel th:last-child{text-align:right;white-space:nowrap;padding-left:24px;font-weight:500}
.prijzen-page .contact-opening-bottom>div,.faq-pagina .contact-opening-bottom>div{font-size:16px}
.horeca-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:44px 30px;max-width:1440px;margin:0 auto}
.horeca-case{display:block;color:inherit;text-decoration:none;min-width:0}
.horeca-case>div{overflow:hidden;border-radius:5px;background:var(--paper)}
.horeca-case img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .6s ease}
.horeca-case:hover img{transform:scale(1.03)}
.horeca-case>p{font-size:13px;margin:18px 0 8px;color:var(--ink-soft)}
.horeca-case h3{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em;margin:0 0 12px}
.horeca-cijfer{display:block;font-size:17px;line-height:1.5}
.horeca-case small{display:block;font-size:13px;line-height:1.5;margin-top:10px;color:var(--ink-soft)}
@media(max-width:640px){.prijs-tabel{font-size:14px}.prijs-tabel td:last-child{white-space:normal}}

/* Case: Google-review van de klant (krim-maxim, 12-10-2026) */
.case-review{max-width:880px;margin-inline:auto;text-align:center}
.case-review blockquote{margin:18px 0 0}
.case-review blockquote p{font-size:clamp(20px,2.2vw,28px);line-height:1.45;font-weight:500;letter-spacing:-.01em}
.case-review-who{margin-top:22px;display:flex;gap:12px;justify-content:center;align-items:center;font-size:15px}
.case-review-who span{color:#123F3C;letter-spacing:2px}

/* Vaste aanvraagknop op telefoon (12-10-2026): verschijnt na de eerste schermhoogte, verdwijnt bij contact en footer */
.mobiele-cta{display:none}
@media(max-width:760px){
.mobiele-cta{display:inline-flex;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:45;justify-content:space-between;box-shadow:0 14px 34px -12px rgba(8,46,43,.55);transform:translateY(140%);opacity:0;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s;pointer-events:none}
.mobiele-cta.zichtbaar{transform:none;opacity:1;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.mobiele-cta{transition:none}}

/* 13-10-2026: belknop in de kop, zichtbaar zolang het desktopmenu verborgen is */
.header-bel{display:none}
@media(max-width:1100px){.header-bel{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(243,241,233,.32);border-radius:50%;color:var(--chalk);margin-right:10px;transition:background .25s,color .25s,border-color .25s}.header-bel svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.header-bel:hover,.header-bel:focus-visible{background:var(--citrien);border-color:var(--citrien);color:var(--petrol)}}
@media(min-width:600px) and (max-width:1100px){.header .header-actions .header-bel{margin-right:0}}

/* 13-10-2026: rustige prijsregel onder de knoppen in de hero */
.hero-prijs{margin:20px 0 0;max-width:46ch;font-size:14px;line-height:1.55;color:var(--chalk-soft)}
.hero-prijs a{color:var(--chalk);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.hero-prijs a:hover,.hero-prijs a:focus-visible{color:var(--citrien)}
@media(max-width:760px){.hero-prijs{font-size:13px;margin-top:16px}}

/* 13-10-2026: bedankblok na het contactformulier */
.bedankt{outline:none}
.bedankt[hidden]{display:none}
.bedankt-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin:0 0 10px}
.bedankt h3{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.035em;font-weight:500;margin:0 0 26px}
.bedankt-stappen{list-style:none;counter-reset:stap;margin:0 0 28px;padding:0;display:grid;gap:0}
.bedankt-stappen li{counter-increment:stap;display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding:14px 0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.bedankt-stappen li:before{content:counter(stap);grid-row:1/3;width:26px;height:26px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:12px}
.bedankt-stappen strong{font-weight:500;font-size:17px}
.bedankt-stappen span{font-size:15px;line-height:1.5;opacity:.8}
.bedankt-acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.bedankt-bel{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:16px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.bedankt-bel svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bedankt-noot{font-size:13px;opacity:.72;margin:10px 0 28px}
.bedankt-vragen details{border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.bedankt-vragen details:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.bedankt-vragen summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:16px;font-weight:500;list-style:none}
.bedankt-vragen summary::-webkit-details-marker{display:none}
.bedankt-vragen summary:after{content:'+';margin-left:auto;font-weight:400;font-size:20px}
.bedankt-vragen details[open] summary:after{content:'−'}
.bedankt-vragen p{font-size:15px;line-height:1.55;margin:0 0 16px;opacity:.86}
.bedankt-vragen a,.bedankt-review a{text-decoration:underline;text-underline-offset:3px}
.bedankt-review{margin:30px 0 0;padding:22px 0 0}
.bedankt-sterren{letter-spacing:2px;font-size:15px}
.bedankt-review blockquote{margin:10px 0 12px}
.bedankt-review blockquote p{font-size:clamp(18px,1.6vw,22px);line-height:1.45;letter-spacing:-.015em}
.bedankt-review figcaption{font-size:13px;opacity:.8}
#project-form.is-verzonden{display:none}

/* 13-10-2026: links in lopende tekst herkenbaar maken (WCAG 1.4.1) */
.detail-page p a:not([class]),.detail-page li a:not([class]),.detail-page td a:not([class]){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.detail-page p a:not([class]):hover,.detail-page li a:not([class]):hover{text-decoration-thickness:2px}

/* 13-10-2026: horeca-checklist, ook afdrukbaar */
.checklist-opening{max-width:900px}
.checklist-acties{margin-top:28px}
.checklist{list-style:none;margin:0;padding:0;counter-reset:punt;max-width:900px}
.checklist[start="4"]{counter-reset:punt 3}
.checklist>li{counter-increment:punt;display:grid;grid-template-columns:44px 1fr;gap:18px;padding:28px 0;border-top:1px solid var(--line,rgba(18,63,60,.16))}
.checklist>li:last-child{border-bottom:1px solid var(--line,rgba(18,63,60,.16))}
.checklist-vak{width:30px;height:30px;border:1.5px solid currentColor;border-radius:6px;display:grid;place-items:center;font-size:13px;margin-top:4px}
.checklist-vak:before{content:counter(punt)}
.checklist h3{font-size:clamp(22px,2.2vw,30px);line-height:1.2;letter-spacing:-.03em;font-weight:500;margin:0 0 12px}
.checklist p{font-size:16px;line-height:1.6;margin:0 0 12px;max-width:62ch}
.checklist-test{background:var(--chalk);border-left:3px solid var(--petrol);padding:14px 16px;border-radius:0 8px 8px 0}
.checklist-test strong{font-weight:500;display:block;margin-bottom:4px}
.checklist-noot{margin-top:24px;font-size:15px;max-width:62ch}
.checklist-verder p{max-width:62ch;margin:14px 0 22px}
@media(max-width:760px){.checklist>li{grid-template-columns:34px 1fr;gap:12px;padding:22px 0}.checklist-vak{width:26px;height:26px}}
@media print{
.checklist-page .header,.checklist-page .menu-panel,.checklist-page .footer,.checklist-page footer,.mobiele-cta,.checklist-acties,.checklist-page .breadcrumbs,.checklist-verder,.privacy-dialog,.message-dialog,.skip,#menu{display:none!important}
.checklist-page,.checklist-page .detail-hero,.checklist-page .detail-section{background:#fff!important;color:#123f3c!important;padding:0!important;margin:0 0 12px!important}
.checklist-page .detail-hero h1{font-size:28px!important;line-height:1.15!important}
.checklist>li{break-inside:avoid;padding:14px 0}
.checklist h3{font-size:18px}
.checklist p{font-size:12px}
.checklist-test{background:#f3f1e9!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* 13-10-2026: resultaatcijfer en reviewbron op cases */
.case-cijfer{max-width:880px;margin-inline:auto;text-align:center}
.case-cijfer-getal{font-size:clamp(64px,9vw,128px);line-height:1;letter-spacing:-.06em;font-weight:500;margin:14px 0 10px}
.case-cijfer-zin{font-size:clamp(18px,1.8vw,22px);line-height:1.45;max-width:40ch;margin:0 auto}
.case-cijfer-bron{font-size:13px;opacity:.75;margin:14px auto 0;max-width:60ch}
.case-review-bron{margin-top:10px;font-size:13px}
.case-review-bron a{text-decoration:underline;text-underline-offset:3px}

/* 13-10-2026: reviewkaarten die gereedschap/haal-reviews.py maakt */
.review-merknaam{font-size:clamp(18px,1.6vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.15;max-width:12ch}
.review-licht blockquote{font-size:var(--quote-size);line-height:1.3;letter-spacing:-.035em}
/* 13-10-2026: zelf een gesprek inplannen. Agenda in het bedankblok (petrol grond) en de link naar /afspraak. */
.contact-opening-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.contact-afspraak{display:inline-flex;gap:8px;align-items:center;min-height:44px;font-size:16px}
.contact-afspraak svg{width:16px;height:16px}
.bedankt-agenda{margin:0 0 22px;padding:22px 0 4px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.bedankt-agenda[hidden]{display:none}
.bedankt-agenda h4{font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-.03em;font-weight:500;margin:0 0 8px}
.bedankt-agenda-uitleg{font-size:15px;line-height:1.5;opacity:.82;margin:0 0 16px}
.bedankt-agenda-laden,.bedankt-agenda-fout{font-size:15px;line-height:1.5;margin:0}
.bedankt-agenda-fout a,.bedankt-geboekt a{text-decoration:underline;text-underline-offset:3px}
.bedankt-soort{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px}
.bedankt-soort button,.bedankt-dagen button,.bedankt-uren button{font:inherit;color:inherit;background:transparent;border:1px solid var(--chalk-soft);border-radius:99px;min-height:44px;padding:8px 14px;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.bedankt-soort button:hover,.bedankt-dagen button:hover,.bedankt-uren button:hover{border-color:var(--chalk)}
.bedankt-soort button.aan,.bedankt-dagen button.aan,.bedankt-uren button.aan{background:var(--citrien);border-color:var(--citrien);color:var(--petrol)}
.bedankt-soort button:focus-visible,.bedankt-dagen button:focus-visible,.bedankt-uren button:focus-visible{outline:2px solid var(--chalk);outline-offset:3px}
.bedankt-dagen{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:thin}
.bedankt-dagen button{flex:none;white-space:nowrap}
.bedankt-uren{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin:10px 0 0}
.bedankt-uren button{border-radius:6px;padding:8px 4px}
.bedankt-telefoon{margin:16px 0 0}
.bedankt-agenda-melding{font-size:13px;color:var(--citrien);margin:10px 0 0;min-height:0}
.bedankt-agenda-melding:empty{display:none}
.bedankt-boek{margin-top:16px}
.bedankt-boek:disabled{opacity:.55;cursor:not-allowed}
.bedankt-geboekt{border:1px solid var(--citrien);border-radius:8px;padding:16px 18px}
.bedankt-geboekt strong{display:block;font-weight:500;font-size:18px;line-height:1.35}
.bedankt-geboekt p{font-size:15px;line-height:1.5;margin:6px 0 10px;overflow-wrap:anywhere}
.bedankt-ics{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
@media(max-width:760px){.bedankt-soort button{font-size:13px;padding:8px 10px}.bedankt-boek{width:100%;justify-content:space-between}}

/* ── Drie routes (13-10-2026): Plan een gesprek · Stuur een bericht · Bel of mail ── */
.contact-routes{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;max-width:520px}
.contact-route{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 16px;padding:16px 18px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:10px;color:inherit;text-decoration:none;transition:border-color .25s}
.contact-route strong{grid-column:1;font-weight:500;font-size:20px;letter-spacing:-.025em;line-height:1.2}
.contact-route>span:not(.arrow-disc){grid-column:1;font-size:14.5px;line-height:1.45;color:inherit;opacity:.82}
.contact-route .arrow-disc{grid-column:2;grid-row:1/3;width:38px;height:38px}
.contact-route .arrow-disc svg{width:14px;height:14px}
a.contact-route:hover,a.contact-route:focus-visible{border-color:currentColor}
.contact-route-hoofd{background:var(--citrien);border-color:var(--citrien);color:var(--petrol)}
.contact-route-hoofd>span:not(.arrow-disc){opacity:1}
.contact-route-hoofd .arrow-disc{background:var(--petrol);color:var(--citrien)}
a.contact-route-hoofd:hover,a.contact-route-hoofd:focus-visible{border-color:var(--petrol)}
.contact-route-direct{grid-template-columns:1fr}
.contact-route-direct>span{display:flex;flex-wrap:wrap;gap:4px 18px;opacity:1!important}
.contact-route-direct a{color:inherit;font-size:16px;line-height:1.5;min-height:32px;display:inline-flex;align-items:center;border-bottom:1px solid color-mix(in srgb,currentColor 45%,transparent)}
.contact-intro>p.contact-voorstel{font-size:15px;margin:18px 0 0;max-width:520px}
.contact-page .contact-intro .contact-routes,.contact-page .contact-intro .contact-voorstel{display:none}

/* Contactpagina: de drie routes boven de vouw */
.contact-keuze{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.keuze{height:100%;display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px;border:1px solid var(--line-dark);border-radius:12px;color:var(--chalk);text-decoration:none;position:relative;transition:border-color .25s,background-color .25s}
.keuze strong{font-weight:500;font-size:clamp(22px,2vw,30px);letter-spacing:-.035em;line-height:1.1;padding-right:52px}
.keuze>span:not(.arrow-disc){font-size:15px;line-height:1.5;color:var(--chalk-soft);padding-right:52px}
.keuze .arrow-disc{position:absolute;top:18px;right:18px;width:40px;height:40px}
.keuze .arrow-disc svg{width:15px;height:15px}
a.keuze:hover,a.keuze:focus-visible{border-color:var(--chalk)}
.keuze-hoofd{background:var(--citrien);border-color:var(--citrien);color:var(--petrol)}
.keuze-hoofd>span:not(.arrow-disc){color:var(--petrol)}
.keuze-hoofd .arrow-disc{background:var(--petrol);color:var(--citrien)}
a.keuze-hoofd:hover,a.keuze-hoofd:focus-visible{border-color:var(--chalk)}
.keuze .keuze-links{display:flex;flex-direction:column;gap:2px}
.keuze .keuze-links a{color:var(--chalk);font-size:17px;line-height:1.45;width:fit-content;border-bottom:1px solid #ffffff55;min-height:30px;display:inline-flex;align-items:center}
.contact-page .contact-opening h1{margin-bottom:36px}
.contact-opening-bottom .contact-voorstel{font-size:16px;margin:0}
.contact-opening-bottom .contact-voorstel .text-link{color:var(--chalk)}
@media(max-width:900px){.contact-keuze{grid-template-columns:1fr;gap:10px;margin-bottom:36px}.keuze{padding:16px 18px;gap:4px}.keuze strong{font-size:21px}.keuze>span:not(.arrow-disc){font-size:14px}.keuze .arrow-disc{top:50%;transform:translateY(-50%);width:36px;height:36px;right:16px}.keuze-direct .keuze-links{flex-direction:row;flex-wrap:wrap;gap:2px 16px}.keuze-direct>span:last-child{display:none}}
@media(max-width:760px){.contact-page .contact-opening{padding-top:28px;padding-bottom:44px}.contact-page .contact-opening h1{font-size:clamp(38px,10vw,56px);margin:16px 0 22px}.contact-route{padding:14px 16px}.contact-route strong{font-size:18px}.contact-routes{margin-top:22px}}
@media(min-width:1101px) and (max-width:1320px){.header .desktop-nav{gap:18px}}
/* Menu: gesprek en bericht bovenaan het contactblok */
.menu-afspraak span{border-bottom:1px solid currentColor}
/* Reviews (13-10-2026): de drie nieuwste eerst, sterren en datum waar geen logo is */
.review-brand .review-kaartsterren{font-size:22px;letter-spacing:.14em;color:var(--citrien);line-height:1;transition:color .35s}
.review-card:hover .review-kaartsterren,.review-card:focus-within .review-kaartsterren,.review-card.is-active .review-kaartsterren{color:var(--petrol)}
.review-nieuw blockquote{font-size:clamp(20px,1.7vw,26px);line-height:1.32}
.review-nieuw .review-brand{height:auto;min-height:44px}

/* 14-10-2026: bedankblok in drie blokken (wat er nu gebeurt, drie vragen, klantverhaal). Wat we in de reel aanraden, doen we zelf. */
.bedankt-blok{padding:26px 0 0;margin:0 0 30px;border-top:1px solid color-mix(in srgb,currentColor 30%,transparent)}
.bedankt-blok:last-child{margin-bottom:0}
.bedankt-blok>h4{font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-.03em;font-weight:500;margin:0 0 14px}
.bedankt-blok .bedankt-stappen{margin-bottom:22px}
.bedankt-blok .bedankt-stappen li:first-child{border-top:0;padding-top:4px}
.bedankt-acties{gap:12px 24px}
.bedankt-moment{max-width:100%;white-space:normal;text-align:left}
.bedankt-noot{margin:12px 0 0}
.bedankt-vraag{padding:14px 0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.bedankt-vraag:first-of-type{border-top:0;padding-top:0}
.bedankt-vraag h5{font-size:17px;line-height:1.3;font-weight:500;letter-spacing:-.01em;margin:0 0 6px}
.bedankt-vragen .bedankt-vraag p{margin:0}
.bedankt-verhaal-intro{font-size:15px;line-height:1.55;opacity:.86;margin:0 0 4px;max-width:56ch}
.bedankt-verhaal .bedankt-review{margin:16px 0 14px;padding:0}
.bedankt-case{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.bedankt-case svg{width:14px;height:14px}
.bedankt-agenda:not([hidden])~.bedankt-acties .bedankt-moment{display:none}
.bedankt-voorbeeld{font-size:13px;opacity:.72;margin:0 0 18px}
@media(max-width:760px){.bedankt-moment{width:100%;justify-content:space-between}.bedankt-blok{padding-top:22px;margin-bottom:26px}}
/* 14-10-2026: klantverhaal volgt de aangevinkte dienst (website, merk, vindbaarheid, social) */
.bedankt-case-var[hidden]{display:none}
.bedankt-case-var>h4{font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-.03em;font-weight:500;margin:0 0 10px}
.bedankt-bron{font-size:13px;opacity:.72;margin:6px 0 0}
.article-body .detail-faq{display:block}.article-body .detail-faq h2{margin-bottom:10px}.article-body .prijs-tabel{margin:8px 0 28px}.article-body .prijs-tabel small{display:block;font-size:14px;line-height:1.5;opacity:.75;margin-top:4px}
.wlm-sectoren{align-items:center}

/* 20-10-2026: linkrij 'Uit ons werk' / 'Meer werk' / 'Websites per sector' (interne links, build.py VERWANT_WERK) */
.verwant-werk .detail-label{margin:0 0 1rem}
.verwant-links{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:baseline}
.verwant-links .text-link{max-width:100%;overflow-wrap:normal;word-break:normal;hyphens:manual}
.service-content li.sector-links{grid-column:1/-1}
.service-content li.sector-links a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* 26-10-2026 (audit C/F): contactformulier op telefoon. Naam en e-mail onder elkaar tot 760 px
   (op 390 was elk veld 163 px en viel een e-mailadres af), dienstknoppen minstens 44 px hoog. */
@media(max-width:760px){.form-grid{grid-template-columns:1fr}}
.project-choices span{display:flex;align-items:center;min-height:44px}

/* talen.css */
/* talen.css (13-10-2026)
   Taalwissel NL | EN in de kop. Klein en rustig: de knop "Bespreek je project" blijft de
   blikvanger. De huidige taal staat in krijt met een onderlijn, de andere gedimd met een
   citrien onderlijn bij hover. Op telefoon staat hij tussen het logo en de menuknop. */
.lang-switch{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;letter-spacing:.04em;line-height:1}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:44px;padding:0 2px;color:var(--chalk-soft,rgba(243,241,233,.66));position:relative;transition:color .2s ease}
.lang-switch a:after{content:'';position:absolute;left:4px;right:4px;bottom:12px;height:1px;background:var(--citrien);transform:scaleX(0);transition:transform .2s ease}
.lang-switch a:hover{color:var(--chalk)}
.lang-switch a:hover:after{transform:scaleX(1)}
.lang-switch a[aria-current]{color:var(--chalk)}
.lang-switch a[aria-current]:after{transform:scaleX(1);background:currentColor;opacity:.55}
.lang-switch>span{opacity:.45}
@media(max-width:760px){.header-actions{gap:10px}.lang-switch{font-size:12px;gap:4px;margin-left:10px}.header .header-bel{margin-right:0}}
/* Telefoon: naast logo, belknop en menuknop is er geen plaats voor NL | EN zonder het logo
   te verkleinen. Dan staat enkel de andere taal er, als één knop van 44px hoog. */
@media(max-width:430px){.lang-switch a[aria-current],.lang-switch>span{display:none}.lang-switch a{min-width:36px;border:1px solid rgba(243,241,233,.32);border-radius:999px;min-height:36px;padding:0 8px}.lang-switch a:after{display:none}}

/* Engelse kern: een korte melding bij links die naar een Nederlandstalige pagina gaan. */
.nl-only{font-size:.78em;opacity:.7;margin-left:.35em;white-space:nowrap}

/* Samengestelde Engelse woorden (French-Belgian, one-pager) breken niet op het streepje.
   De bouw zet ze op de Engelse pagina's in deze span. */
.nw{white-space:nowrap}

/* Sectorfilter op het werkoverzicht: op 320 breed stak de keuzelijst 22 à 29px buiten
   het scherm (gemeten 13-10-2026, NL en EN). De lijst mag krimpen in de flexrij. */
.work-sector-filter select{min-width:0;flex:1 1 auto}

/* Engelse kern: een Nederlandse review blijft letterlijk staan, met onze vertaling eronder. */
.review-vertaling{font-size:13px;line-height:1.5;opacity:.72;margin:10px 0 0;max-width:46ch}