/* 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)}.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:.05}.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}
/* 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(2,minmax(0,1fr));gap:12px 18px;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(4,minmax(0,1fr));max-width:390px;gap:8px}.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}}

/* 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)}
@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-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}
.case-story .detail-label:before{content:'';display:inline-block;width:9px;height:9px;background:#ddef65;border-radius:50%;margin-right:10px;box-shadow:0 0 0 4px #153f3b08}
@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}}

/* 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-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}
@media(max-width:640px){
  .nm-consent-in{padding:16px 18px;gap:14px}
  .nm-consent-knoppen{width:100%}
  #nm-consent button{flex:1}}
@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)}