/* Revision: scoped responsive layout and portfolio presentation. */
html{touch-action:manipulation;overflow-x:clip}body{max-width:100%;overflow-x:clip}*,*::before,*::after{box-sizing:border-box}a,button,input,textarea,select,summary{touch-action:manipulation}
.hero .actions .text-link{align-self:flex-start;text-align:left}
.mobile-hero-slogan,.mobile-lever-caption{display:none}
.portfolio-browser{overflow:hidden;background:#151319;border:1px solid #ffffff20;border-radius:16px;box-shadow:0 22px 70px #0003;transition:transform .35s,border-color .35s}
.portfolio-browser:hover{transform:translateY(-5px);border-color:#bd9ade80}
.portfolio-preview{position:relative;width:100%;aspect-ratio:1.47;overflow:hidden;background:#f4f0e8;isolation:isolate}
.portfolio-preview iframe{position:absolute;inset:0;border:0;width:1100px;height:820px;max-width:none;transform:scale(var(--preview-scale,.45));transform-origin:top left;pointer-events:none;background:#f4f0e8}
.project.wide .portfolio-preview{aspect-ratio:1.9;background:#0c0c0d}
.project.wide .portfolio-preview iframe{width:1440px;height:900px;background:#0c0c0d}
.preview-open{position:absolute;inset:0;z-index:2}
.preview-open:focus-visible{outline:3px solid #d9b7ff;outline-offset:-5px}
.project-info .text-button{white-space:nowrap}
.intro-transition{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1;pointer-events:none}
.intro-canvas{z-index:0}.intro-caption,.intro-brand{z-index:3}
@media(max-width:800px){
 html{scrollbar-gutter:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 body,main,section,.hero-copy,.contact-copy,.form,.field-shell,.grid,.contact-grid>*{min-width:0}
 .container{width:calc(100% - 40px);max-width:100%}
 .hero.new-hero,.hero .hero-inner{min-height:0}
 .hero .hero-inner{display:flex;flex-direction:column;padding-bottom:28px}
 .hero .hero-copy{width:100%;padding-top:42px;text-align:center;position:relative;z-index:3}
 .hero .hero-copy>.eyebrow{display:flex;justify-content:flex-start;text-align:left;font-size:8px;gap:8px;letter-spacing:.11em}
 .hero .hero-copy h1{font-size:clamp(42px,10.5vw,72px);line-height:1.05;text-align:center}
 .hero .hero-copy>p{margin-inline:auto;max-width:360px}
 .hero .hero-copy .actions{display:flex;width:100%;align-items:center;justify-content:center;margin-inline:auto;gap:16px}
 .hero .actions .text-link{align-self:center;text-align:center;font-size:12px;min-height:36px;display:flex;align-items:center}
 .hero .mobile-hero-slogan{display:block!important;font-size:9px;letter-spacing:.15em;margin:25px auto 0;max-width:100%;color:#c2aed4;line-height:1.5}
 .hero .hero-note{display:none}
 .hero .hero-art{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:calc(100% + 40px)!important;margin:0 -20px;height:310px;min-height:0;transform:none;opacity:1}
 .hero-art .label-one{display:none!important}
 .hero-art .label-two{bottom:12px;left:50%;font-size:8px;transform:translateX(-50%)}
 .hero .hero-bottom{position:relative;inset:auto;margin-top:12px;gap:15px;width:100%}
 .hero-art .eye-float{width:100%;height:100%}
 .hero-art .eye-float video{width:100%;height:100%;object-fit:contain}
 .hero-art .eye-float img{width:100%;height:100%;object-fit:contain}
 /* Cards above the lever; only mobile changes reading/layout order. */
 .benefit-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .benefit-grid>div:first-child{display:contents}
 .benefit-grid>div:first-child>.eyebrow{order:0;text-align:left}
 .benefit-grid h2{order:1;font-size:clamp(34px,8.7vw,50px);text-align:left}
 .benefit-grid .benefits{order:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;margin-top:25px;min-width:0}
 .benefit-grid .benefits article,.benefit-grid .benefits article:first-child{margin:0;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;min-width:0}
 .benefits h3{font-size:16px;line-height:1.3;overflow-wrap:break-word}.benefits p{font-size:12px;line-height:1.65}
 .benefit-grid .lever-art{order:3;width:min(310px,90%);max-width:100%;align-self:center;margin:55px 0 0}
 .benefit-grid .lever-art>text{display:none}
 .benefit-grid .mobile-lever-caption{display:block;order:4;text-align:center;color:#e2caff;font-size:17px;margin:0 auto 22px;max-width:270px;line-height:1.5}
 .benefit-grid .lead{order:5;margin:0 auto 24px;text-align:center;max-width:380px}
 .benefit-grid>div:first-child>.button{order:6;align-self:center}
 /* Right-hand vertical progress, linked to existing selected step state. */
 #methode{display:grid;grid-template-columns:minmax(0,1fr) 7px;column-gap:19px}
 #methode>.section-heading{grid-column:1/-1}
 #methode .process{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr;gap:16px;min-width:0}
 #methode .process article.card{min-height:170px;padding:24px 20px}
 #methode .method-progress{grid-column:2;grid-row:2;align-self:stretch;margin:0;padding:0;position:relative}
 #methode .method-progress-caption{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
 #methode .method-progress-track{height:100%;width:7px;min-height:100px;position:relative}
 #methode .method-progress-track>span{transform-origin:top center;background:linear-gradient(180deg,#7e83ef,#ba90f5,#e3d3ff)}
 #methode [aria-valuenow="1"]>span{transform:scaleY(.25)!important}
 #methode [aria-valuenow="2"]>span{transform:scaleY(.5)!important}
 #methode [aria-valuenow="3"]>span{transform:scaleY(.75)!important}
 #methode [aria-valuenow="4"]>span{transform:scaleY(1)!important}
 /* Reserve a visible lane on the left for the FAQ light connections. */
 #faq{display:flex;flex-direction:column;gap:28px}
 #faq .faq-intro{display:contents}
 #faq .faq-intro>.eyebrow{order:0;text-align:left;margin-bottom:0}
 #faq .faq-intro>h2{order:1;margin:0;text-align:left}
 #faq .faq-list{order:2;width:calc(100% - 52px);max-width:100%;min-width:0;align-self:flex-end;margin:0 0 0 auto;position:relative;z-index:2}
 #faq .faq-list summary{padding:18px 35px 18px 15px;font-size:13px;line-height:1.5;text-align:left;overflow-wrap:break-word}
 #faq .faq-list details>p{padding:0 15px 20px;font-size:12px;text-align:left;line-height:1.7}
 #faq .faq-invitation{order:3;margin:5px 0 0!important;align-self:center;justify-content:center}
 #faq .faq-connections{display:block!important;pointer-events:none;z-index:0}
 /* iOS focus zoom prevention uses readable input text, never a zoom lock. */
 #devis,#contact{text-align:center}
 #devis .contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:35px}
 #devis .contact-copy,#contact>div{text-align:center;margin-inline:auto;width:100%;min-width:0}
 #devis .eyebrow,#contact .eyebrow{display:block;text-align:left}
 #devis .contact-copy h2{font-size:clamp(37px,9.5vw,60px);line-height:1.15;letter-spacing:-.045em}
 #devis .contact-copy h2 .lavender{display:block;margin-top:.07em}
 #devis .lead,#contact p{margin-inline:auto}
 #devis .contact-detail{justify-content:center;text-align:center}
 #devis .mini-ribbon{display:block;margin-inline:auto;max-width:90%}
 #devis .form,#contact .form{width:100%;max-width:600px;min-width:0;margin-inline:auto;text-align:left}
 #devis .form-row,#contact .form-row{grid-template-columns:minmax(0,1fr);gap:18px}
 .form label,.form .field-shell{min-width:0;max-width:100%}
 .form input:not([type=checkbox]),.form select,.form textarea{font-size:16px!important;width:100%;min-width:0;max-width:100%;line-height:1.45}
 .form .checkbox{align-items:flex-start}.form .checkbox input{flex-shrink:0}
 .form .button{max-width:100%;white-space:normal}
 #contact{grid-template-columns:minmax(0,1fr)}
 .portfolio-preview{aspect-ratio:1.38}.project.wide .portfolio-preview{aspect-ratio:1.38}
 .project-info{gap:16px;align-items:flex-start}.project-info h3{font-size:22px}.project-info .text-button{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.portfolio-browser{transition:none}.portfolio-browser:hover{transform:none}}

/* Text-only alignment: icons and their placement remain intact. */
#services .services .card h3,#services .services .card p{text-align:center;margin-inline:auto}
#services .services .card .tags{justify-content:center;text-align:center}
@media(max-width:800px){
 html,body{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
 .mobile-lever-caption{background:linear-gradient(100deg,#b6a1cf 0%,#b6a1cf 35%,#fff 47%,#f1dfff 50%,#b6a1cf 65%,#b6a1cf 100%);background-size:260% 100%;background-position:100% 50%;background-clip:text;-webkit-background-clip:text;color:transparent!important;animation:lever-text-shine 3s ease-in-out infinite alternate}
}
@keyframes lever-text-shine{from{background-position:100% 50%}to{background-position:0% 50%}}
@media(prefers-reduced-motion:reduce){.mobile-lever-caption{animation:none;background:none;color:#e2caff!important}}