/* Trimetra 5.2: one type family, intact geometry, proportionate pattern cells. */
body{font-synthesis:none;font-optical-sizing:auto;font-size:16px;line-height:1.5}
input,select,textarea{font:inherit}h1{font-weight:700}h2,h3{font-weight:600;letter-spacing:-.045em}p{ text-wrap:pretty }
.hero-copy h1{font-weight:700;letter-spacing:-.045em;font-size:clamp(42px,4.45vw,100px);line-height:1.07;overflow-wrap:normal}
.hero-copy .headline-line{display:block}.hero-copy .headline-line:last-child{color:var(--muted)}
.corporate-hero.wrap{grid-template-columns:1.3fr 1fr;background:white;min-height:min(860px,calc(100svh - var(--header)))}
.hero-copy{padding-top:80px;padding-bottom:120px}.hero-copy .lead{max-width:650px;font-size:clamp(16px,1.2vw,20px);line-height:1.65}
.hero-baseline{width:calc(56.5% - var(--gutter)*2)}
.signature-art{background:var(--navy);min-height:650px;isolation:isolate}
.signature-grid{inset:-90px;background-image:url('/assets/trimetra-pattern-quiet.svg');background-size:678px 538px;mask-image:linear-gradient(145deg,#000,transparent 90%);animation:none;transform:translate3d(var(--pattern-x,0px),var(--pattern-y,0px),0)}
.signature-mark{width:60%;max-width:520px;height:auto;object-fit:contain;filter:none;animation:brand-mark-reveal 1.6s .2s var(--ease) both;transform:translate(-50%,-50%)}
.signature-echo,.studio-orbit{display:none}.signature-art:after{inset:0;width:auto;background:radial-gradient(ellipse at var(--light-x,55%) var(--light-y,45%),#ffffff15,transparent 60%);animation:none;left:0}
.signature-art:before{content:'';position:absolute;inset:28px;border:1px solid #ffffff20;pointer-events:none}
.signature-rule{top:28px;left:28px;width:80px;height:2px;background:white;animation:brand-rule 1.4s .5s var(--ease) both;transform-origin:left}
.signature-caption{left:38px;right:38px;bottom:38px;opacity:.8;max-width:65%;line-height:1.8}.signature-coordinate{right:38px;bottom:38px;max-width:30%;text-align:right;line-height:1.8}
/* No part of the registered symbol is rotated, stretched or separated. */
.signature-piece{animation:none!important;transform:none!important;translate:none!important;rotate:none!important;opacity:1!important}
@keyframes brand-mark-reveal{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes brand-rule{from{scale:0 1}to{scale:1 1}}
/* A scroll-bound editorial scene. The words stay legible before emphasis. */
.brand-manifesto{background:var(--navy);color:white;position:relative;min-height:165svh;isolation:isolate}
.manifesto-pin{min-height:calc(100svh - var(--header));position:sticky;top:var(--header);padding-block:clamp(45px,6vw,100px);display:flex;flex-direction:column;justify-content:center;gap:clamp(35px,4vw,70px)}
.manifesto-label{display:flex;justify-content:space-between;align-items:center;gap:30px}.manifesto-label .eyebrow{margin:0;color:#bcc9e2}.manifesto-label img{width:70px;height:auto;margin:16px}
.reading-statement{font-size:clamp(40px,5.6vw,112px);font-weight:600;line-height:1.12;letter-spacing:-.05em;max-width:1500px;text-wrap:balance}
.reading-word{color:#a4b3d0;background:linear-gradient(90deg,#fff 0 var(--ink-fill,100%),#a4b3d0 var(--ink-fill,100%) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.manifesto-end{display:flex;align-items:end;justify-content:space-between;gap:60px}.manifesto-end>p{max-width:530px;font-size:clamp(16px,1.2vw,20px);color:#c3cee3;line-height:1.65}.manifesto-meter{width:25%;max-width:360px;min-width:120px;height:36px;border-top:1px solid #ffffff35;position:relative}.manifesto-meter span{position:absolute;left:0;right:0;top:-1px;height:2px;background:white;transform-origin:left;scale:var(--read-p,1) 1}.manifesto-meter b{display:block;font-size:9px;letter-spacing:.2em;font-weight:500;margin-top:17px;color:#a4b3d0}
/* The brand pattern has its own field, away from reading surfaces. */
.brand-ribbon{grid-column:1/-1;position:relative;height:clamp(180px,22vw,360px);background:var(--navy);isolation:isolate;overflow:hidden;clip-path:inset(0 calc((1 - var(--field-p,1))*8%));transition:clip-path .08s linear}
.ribbon-pattern{position:absolute;inset:-110px;background:url('/assets/trimetra-pattern-quiet.svg') repeat;background-size:678px 538px;transform:translate3d(var(--pattern-x,0px),var(--pattern-y,0px),0)}
.ribbon-modules{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(25px,4vw,75px)}
.ribbon-module{height:65%;width:auto;max-width:20%;object-fit:contain;opacity:.92;translate:0 calc((1 - var(--field-p,1))*var(--ribbon-travel,55px));transition:translate .08s linear}
.ribbon-module-2{--ribbon-travel:-75px}.ribbon-module-3{--ribbon-travel:90px}
.ribbon-rule{position:absolute;left:30px;bottom:25px;right:30px;height:1px;background:#ffffff30}.ribbon-rule:after{content:'';display:block;width:100%;height:2px;background:white;scale:var(--field-p,1) 1;transform-origin:left}
.section-page #catalog>.section-heading{gap:40px;margin-bottom:40px}.section-page #catalog>.section-heading>p{background:none;padding:0;font-size:17px;line-height:1.65}.section-page #catalog>.section-heading h1{font-size:clamp(44px,5.1vw,100px);line-height:1.08}.catalog-paths{display:none}
/* Drawn rules and numbered steps make the way we work visible. */
.approach-section{padding-block:clamp(70px,7vw,130px)}.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(25px,5vw,100px)}.approach-step{position:relative;padding-top:25px}.approach-step:before,.approach-step:after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}.approach-step:after{height:2px;background:var(--navy);transform-origin:left;scale:var(--step-p,1) 1}.step-number{display:block;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;margin-bottom:40px;color:var(--muted)}.approach-step h3{font-size:clamp(26px,2.2vw,42px);line-height:1.2;margin-bottom:20px}.approach-step p{font-size:16px;line-height:1.7;color:var(--muted);max-width:430px}
.product-promise{font-size:clamp(25px,2.35vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1.22;margin-top:28px;max-width:720px;color:var(--brand-deep)}
.product-detail .lead{font-size:clamp(16px,1.25vw,22px);line-height:1.7;margin-top:22px}.product-features li,.project-content>p,.project-summary,.product-story p,.tracing-story article:not(:first-child) p:last-child{font-size:16px;line-height:1.7}
.product-detail h1{font-size:clamp(46px,5.5vw,105px)}.project-heading h3{font-weight:600}.product-features li{position:relative}.product-features li:after{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--brand);transform-origin:left;scale:var(--step-p,1) 1}
/* Stage reveals and border light; the clickable surface itself remains steady. */
.section-page .project-visual{clip-path:inset(calc((1 - var(--field-p,1))*8%) 0);transition:clip-path .1s linear}
.project-visual .brand-display{position:relative}.project-visual .brand-display:after{content:'';position:absolute;inset:0;pointer-events:none;border:1px solid #ffffff70;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease)}
.project-card.stage-visible .brand-display:after{clip-path:inset(0)}.project-card.stage-visible .visual-index{animation:brand-label-in .7s var(--ease) both}
@keyframes brand-label-in{from{opacity:0;translate:-16px 0}to{opacity:1;translate:0 0}}
/* A typographic entrance uses a shallow mask rather than prolonged blur. */
.text-generate .motion-word{filter:none;opacity:.65;transform:translate3d(0,22px,0);clip-path:inset(0 0 100%);transition:opacity .65s var(--ease),transform .65s var(--ease),clip-path .65s var(--ease);transition-delay:var(--word-delay)}
.text-generate.fx-visible .motion-word{clip-path:inset(-8% -2%);filter:none;opacity:1}
.about .muted,.team-info>p:not(.role),.staff-about h2,.staff-focus p{line-height:1.7}.about .muted,.team-info>p:not(.role){font-size:16px}.about-lead{line-height:1.3;font-weight:500}
.section-page .about:after{background-image:url('/assets/trimetra-pattern-quiet.svg');background-size:678px 538px;height:clamp(120px,12vw,210px);opacity:1;background-position:var(--pattern-x,0px) var(--pattern-y,0px)}
.about-signature{mask-image:none!important}.about-signature .background-paths{display:none}.about-signature img{opacity:1!important;filter:none}.section-page .about-signature img{width:140px;top:25px}
.paths-art{height:175px;background:url('/assets/trimetra-pattern-quiet.svg') repeat;background-size:339px 269px;mask-image:none;overflow:hidden;margin-top:38px;clip-path:inset(0 calc((1 - var(--field-p,1))*8%))}.paths-art .background-paths{display:none}
.staff-contact:before,.staff-contact:after{display:none}.staff-contact{background-image:none}.staff-contact .wrap:after{content:'';display:block;height:90px;margin-top:40px;background:url('/assets/trimetra-pattern-quiet.svg') repeat;background-size:339px 269px;mask-image:linear-gradient(90deg,#000,transparent)}
.site-footer{position:relative;overflow:clip}.site-footer:before{content:'';position:absolute;right:-60px;top:0;width:40%;height:100%;background:url('/assets/trimetra-pattern-quiet.svg') repeat;background-size:678px 538px;opacity:.45;mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none}.footer-signature,.footer-bottom{position:relative}.footer-signature>span{font-weight:700;letter-spacing:-.065em}.footer-bottom{padding-bottom:8px}
/* Hover and focus share one deliberate, reversible action. */
.button.primary{position:relative;isolation:isolate;overflow:hidden}.button.primary:before{content:'';position:absolute;inset:0;background:#ffffff14;transform:translateX(-105%);transition:transform .5s var(--ease);z-index:-1}.button.primary:is(:hover,:focus-visible):before{transform:none}.button.primary>span,.card-link>span,.section-route a>span{transition:transform .4s var(--ease)}.button.primary:is(:hover,:focus-visible)>span,.card-link:is(:hover,:focus-visible)>span,.section-route a:is(:hover,:focus-visible)>span{transform:translate(4px,-4px)}
@media(min-width:1800px){.hero-copy{padding-left:max(var(--gutter),5vw)}.reading-statement{max-width:1800px}}
@media(max-width:1100px){.hero-copy{padding-block:65px 110px}.hero-copy h1{font-size:clamp(40px,4.6vw,54px)}.manifesto-end{gap:35px}.signature-caption{max-width:100%;right:30px;left:30px}.signature-coordinate{display:none}}
@media(max-width:800px){.corporate-hero.wrap{display:block}.hero-copy{padding:50px var(--gutter)}.hero-copy h1{font-size:clamp(38px,6.8vw,62px);max-width:700px;letter-spacing:-.04em}.hero-copy .lead{font-size:16px}.signature-art{min-height:0;height:360px}.signature-mark{width:48%;max-width:280px}.signature-grid{background-size:508.5px 403.5px}.hero-baseline{width:100%}.brand-manifesto{min-height:140svh}.manifesto-pin{min-height:calc(100svh - var(--header));gap:30px;padding-block:40px}.reading-statement{font-size:clamp(34px,6.2vw,58px);line-height:1.18;letter-spacing:-.04em}.manifesto-label img{width:50px}.manifesto-end{display:block}.manifesto-end>p{font-size:16px}.manifesto-meter{width:100%;max-width:none;margin-top:30px}.approach-grid{grid-template-columns:1fr;gap:35px}.approach-step{display:grid;grid-template-columns:50px 1fr;gap:10px 15px}.step-number{grid-row:1/3;margin:4px 0}.approach-step h3{font-size:28px;margin:0}.approach-step p{grid-column:2;max-width:640px}.section-page #catalog>.section-heading{gap:25px}.section-page #catalog>.section-heading h1{font-size:clamp(38px,6.6vw,60px)}.brand-ribbon{height:190px}.ribbon-pattern{background-size:339px 269px}.ribbon-module{height:60%}.product-promise{font-size:28px}.product-detail h1{font-size:clamp(40px,7vw,64px)}.product-detail .lead,.tracing-story article:not(:first-child) p:last-child,.about .muted,.project-content>p{font-size:16px}.paths-art{height:120px}.site-footer:before{width:60%;opacity:.25}.staff-contact .wrap:after{height:70px}}
@media(max-width:420px){.hero-copy h1{font-size:36px}.hero-copy .eyebrow{font-size:9px}.signature-art{height:290px}.signature-mark{width:52%;max-width:220px}.signature-art:before{inset:20px}.signature-caption{bottom:28px;font-size:8px}.signature-rule{top:20px;left:20px}.reading-statement{font-size:34px}.manifesto-label .eyebrow{max-width:220px;font-size:10px}.manifesto-label img{margin:10px;width:42px}.brand-ribbon{height:160px}.product-promise{font-size:26px}.product-detail h1{font-size:42px}.section-page #catalog>.section-heading h1{font-size:38px}.about h1,.about h2,.contact h1,.contact h2{font-size:39px;line-height:1.1}}
@media(max-height:650px){.brand-manifesto{min-height:0}.manifesto-pin{position:relative;top:0;min-height:0;padding-block:60px}}
.motion-paused .brand-manifesto{min-height:0}.motion-paused .manifesto-pin{position:relative;top:0}.motion-paused .reading-word{background:none;-webkit-text-fill-color:currentColor;color:white}.motion-paused .brand-ribbon,.motion-paused .section-page .project-visual,.motion-paused .paths-art{clip-path:none}.motion-paused .ribbon-module{translate:none}.motion-paused .signature-mark{clip-path:none;opacity:1;animation:none}.motion-paused .manifesto-meter span,.motion-paused .approach-step:after,.motion-paused .product-features li:after{scale:1 1}.motion-paused .motion-word{clip-path:none!important}
@media(prefers-reduced-motion:reduce){.brand-manifesto{min-height:0}.manifesto-pin{position:relative;top:0}.reading-word{background:none;-webkit-text-fill-color:currentColor;color:white}.signature-mark{animation:none;clip-path:none;opacity:1}.brand-ribbon,.section-page .project-visual,.paths-art,.motion-word{clip-path:none!important}.ribbon-module{translate:none}.manifesto-meter span,.approach-step:after,.product-features li:after{scale:1 1}}
/* Ambient movement stays inside the decorative field and stops when not visible. */
.signature-art.stage-visible .signature-grid{animation:brand-pattern-breathe 18s ease-in-out infinite alternate}
@keyframes brand-pattern-breathe{from{background-position:0 0}to{background-position:35px -24px}}
.motion-paused .signature-grid,.motion-background-paused .signature-grid{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.signature-grid{animation:none!important}}
/* People: a portrait mask opens, while names and roles stay in normal flow. */
.motion-ready .team article .portrait{clip-path:inset(8% 0 0);transition:clip-path 1s var(--ease),transform .5s var(--ease)}
.motion-ready .team article.stage-visible .portrait{clip-path:inset(0)}
.team article.stage-visible .team-index{animation:brand-label-in .6s var(--ease) both}
.studio-word{opacity:1;color:color-mix(in srgb,var(--navy) calc(var(--word-p,1)*100%),var(--muted));transition:color .12s linear}
.motion-paused .team article .portrait{clip-path:none}.motion-paused .studio-word{color:var(--navy)}
@media(prefers-reduced-motion:reduce){.team article .portrait{clip-path:none!important}.studio-word{color:var(--navy)}}