/* Requested refinements only: typography, controls, team and responsive motion. */
:root{
  --font-heading:Poppins,Arial,sans-serif;
  --font-body:Alpino,Arial,sans-serif;
  --motion-ease:cubic-bezier(.22,1,.36,1);
}
body,p,input,textarea,label,figcaption,dt,dd{font-family:var(--font-body)}
h1,h2,h3,button,.text-link,.service-detail-link,.glass-nav>a,.hero-project>a,
.contact-brief>summary,.popup-step strong,.back-top{font-family:var(--font-heading);font-weight:700}
.eyebrow,.micro-label,.project-number,.project-foot,.service-number,.popup-counter,
.slide-count,.team-role,.popup-step .micro-label,.search-option{font-family:var(--font-body);font-weight:400}
button,input,textarea{max-width:100%}
button,.text-link,.service-detail-link,.back-top{touch-action:manipulation}

/* A quiet, pearl-like reflection runs across every control. */
.mds-action{position:relative;isolation:isolate;transition:transform .4s var(--motion-ease),box-shadow .4s var(--motion-ease),background-color .4s,color .4s;overflow:hidden}
.mds-action:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transform:translateX(-105%);background:linear-gradient(108deg,transparent 10%,rgba(194,204,220,.13) 29%,rgba(225,216,217,.22) 42%,rgba(255,255,255,.39) 49%,rgba(216,225,221,.2) 56%,rgba(206,210,225,.14) 68%,transparent 88%);transition:transform .85s var(--motion-ease),opacity .45s ease}
@media(hover:hover) and (pointer:fine){
  .mds-action:hover:before{opacity:1;transform:translateX(0)}
  .mds-action:hover{transform:translateY(-2px)}
  .glass-nav .mds-action:hover,.indicator.mds-action:hover{transform:none}
  .reference-projects .art{transition:transform .6s var(--motion-ease),box-shadow .6s var(--motion-ease)}
}
.mds-action:focus-visible:before{opacity:1;transform:translateX(0)}
.mds-action:active{transform:translateY(0) scale(.98);transition-duration:.15s}
.mds-action:disabled{transform:none;cursor:default}
.mds-action:disabled:before{opacity:0}
.mds-action:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.solid-button{border-radius:999px;padding:.95rem 1.7rem;min-height:52px;gap:.75rem;background:linear-gradient(120deg,#ffffff28,#ffffff09 60%,#ffffff1a),rgba(255,255,255,.055);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid #ffffff47;color:#fff;box-shadow:inset 1px 1px 1px #ffffff73,inset -1px -1px 1px #ffffff17,0 8px 20px #0002;line-height:1.6}
.solid-button:hover{background-color:rgba(255,255,255,.12)}
.text-link,.solid-button,.service-detail-link{white-space:normal;text-align:center;justify-content:center}
.form-actions{flex-wrap:wrap}
.form-actions>p{font-family:var(--font-body)}
.back-top{white-space:normal;min-width:0}
.back-top>span{flex-shrink:0}
.popup-step strong{font-size:1rem;line-height:1.45;overflow-wrap:anywhere}
.popup-step .micro-label{line-height:1.5}
.indicator.mds-action:before{inset:18px 0;border-radius:3px}

/* Preserve the existing project sizes and the lead / pairs rhythm. */
.reference-projects .project.lead{grid-column:1/-1}
.reference-projects .project-photo{object-position:center;max-width:100%}
.reference-projects .project-copy h3{overflow-wrap:break-word}
.reference-projects .project-foot>span{min-width:0;overflow-wrap:anywhere}
.reference-projects .project:focus-within .art{box-shadow:0 12px 32px #0002}
.method-symbol{display:block;width:110px;height:auto;aspect-ratio:119/117;object-fit:contain}

/* The team opens from the manifesto, inside the established popup surface. */
.team-trigger{margin-top:2rem}
.team-content>h2{font-size:clamp(2.15rem,5vw,4.8rem);line-height:1.15;margin:1rem 0 1.5rem;max-width:960px}
#team-popup-intro{max-width:640px;color:#b8b8b8;font-size:1.125rem;line-height:1.75}
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 4rem;margin-top:3rem}
.team-member{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(100px,12vw,155px);gap:1.2rem 1rem;align-items:center;border-top:1px solid #ffffff30;padding:2rem 0}
.team-member-heading{min-width:0}
.team-member h3{font-size:clamp(1.25rem,2.2vw,1.8rem);letter-spacing:-.025em;line-height:1.3;margin:.65rem 0 .5rem}
.team-member .micro-label{font-size:.75rem;letter-spacing:.1em;color:#919191}
.team-role{font-size:1rem;line-height:1.5;color:#b8b8b8}
.team-astronaut{display:block;width:100%;height:160px;object-fit:contain;mix-blend-mode:screen;transition:transform .8s var(--motion-ease)}
.team-bio{grid-column:1/-1;font-size:1rem;line-height:1.8;color:#b8b8b8;max-width:460px}
@media(hover:hover) and (pointer:fine){.team-member:hover .team-astronaut{transform:translateY(-5px) rotate(2deg)}}
.footer-socials{display:flex;gap:.6rem;align-items:center;margin-top:1.35rem;flex-wrap:wrap}
.social-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff2b;border-radius:50%;color:#d8d8d8;flex:0 0 38px}
.social-icon svg{width:18px;height:18px}

/* Keep native semantics while JavaScript supplies interruptible transitions. */
details>summary{transition:color .35s ease,background-color .35s ease}
details[data-disclosure-state="opening"]>summary .plus:after,
details[data-disclosure-state="open"]>summary .plus:after{transform:rotate(90deg);opacity:0}
details[data-disclosure-state="closing"]>summary .plus:after{transform:none;opacity:1}
.search-panel.is-closing,.glass-nav.is-closing{pointer-events:none}
.mds-project-popup.is-closing{animation:mds-popup-out .23s var(--motion-ease) both;pointer-events:none}
.mds-project-popup.is-closing::backdrop{animation:mds-backdrop-out .23s ease both}
@keyframes mds-popup-out{to{opacity:0;transform:translateY(10px) scale(.99)}}
@keyframes mds-backdrop-out{to{background:transparent;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}}

/* Intrinsic sizing avoids overflow without changing the page composition. */
main,section,article,figure,.project-copy,.popup-introduction,.popup-facts>div,
.footer-top>*,.team-member>*,.expertise-detail,.brief-content{min-width:0}
img,video{max-width:100%}
.popup-facts dd,.popup-story p,.popup-tagline,.team-bio{overflow-wrap:break-word}
.popup-scroll{scrollbar-gutter:stable;scroll-padding-bottom:2rem}
.search-option{transition:background-color .25s ease,color .25s ease}
.popup-toolbar{padding-top:max(.9rem,env(safe-area-inset-top));padding-left:max(var(--popup-gutter),env(safe-area-inset-left));padding-right:max(var(--popup-gutter),env(safe-area-inset-right))}
.popup-counter{min-width:0;overflow-wrap:anywhere}
.team-content{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
@media(max-width:1000px){.team-grid{column-gap:2rem}.team-member{grid-template-columns:minmax(0,1fr) 105px}.team-astronaut{height:135px}}
@media(min-width:901px) and (max-width:1150px){.glass-nav a{padding-left:.55rem;padding-right:.55rem}}
@media(max-width:760px){
  .team-grid{grid-template-columns:1fr;gap:0;margin-top:2.2rem}
  .team-member{grid-template-columns:minmax(0,1fr) 120px;padding:1.7rem 0;gap:1rem}
  .team-astronaut{height:140px}
  .team-bio{max-width:none}
  .popup-close{font-size:.8125rem}
  .popup-project-nav{flex-wrap:wrap}
  .popup-step strong{font-size:.9375rem}
}
@media(max-width:620px){
  .search-field input,#brief-form input,#brief-form textarea{font-size:1rem}
  .method-symbol{width:74px;margin-top:2.5rem}
  .reference-projects .art{height:clamp(220px,70vw,305px)}
  .reference-projects .lead .art{height:clamp(240px,78vw,320px)}
  .team-trigger{max-width:100%}
  .form-actions>.solid-button{max-width:100%}
  .studio-photo-caption{gap:.5rem}
  .studio-photo-caption .micro-label{letter-spacing:.025em;font-size:.75rem}
}
@media(max-width:374px){
  .hero-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem;width:100%;max-width:100%}
  .slide-indicators{min-width:0;gap:.3rem}
  .slide-indicators .indicator{min-width:6px;width:100%}
  .hero h1{font-size:clamp(2rem,11.8vw,2.75rem)}
  .contact h2{font-size:clamp(2.05rem,11vw,2.6rem)}
  .studio h2{font-size:clamp(1.95rem,9vw,2.3rem)}
  .manifesto h2{font-size:clamp(1.65rem,8.2vw,2rem)}
  .reference-projects .work-title h2{font-size:clamp(2rem,9vw,2.65rem)}
  .reference-projects .project-copy h3{font-size:1.4rem}
  .popup-introduction h2{font-size:clamp(1.85rem,10vw,2.3rem);overflow-wrap:break-word}
  .team-content>h2{font-size:clamp(1.8rem,9.5vw,2.1rem)}
  .team-member{grid-template-columns:minmax(0,1fr) 88px;gap:.8rem}
  .team-astronaut{height:110px}
  .team-member h3{font-size:1.2rem}
  .popup-toolbar{flex-wrap:wrap;column-gap:.5rem;row-gap:.4rem}
  .popup-toolbar>.popup-counter{flex:1;min-width:65px;font-size:.75rem}
  .popup-close{padding:.45rem .7rem}
  .studio-photo-caption,.studio-film .studio-photo-caption{padding:.7rem .85rem;min-height:72px}
  .studio-photo-caption>div{flex:1}
  .studio-photo-caption .video-toggle{width:38px;height:38px;flex-basis:38px}
  .footer-top{gap:2rem 1rem}
  .footer-logo{max-width:100px}
  .social-icon{width:32px;height:32px;flex-basis:32px}
  .footer-socials{gap:.35rem}
}
@media(prefers-reduced-motion:reduce){
  .mds-action,.mds-action:before,.team-astronaut{transition:none!important;transform:none!important}
  .mds-project-popup.is-closing,.mds-project-popup.is-closing::backdrop{animation:none!important}
}
.motion-paused .mds-action,.motion-paused .mds-action:before,.motion-paused .team-astronaut{transition:none!important;transform:none!important}

/* Final narrow-screen safeguards: keep the header inside the viewport and let
   the illustrations support the team content instead of taking it over. */
html,body{max-width:100%;overflow-x:hidden}
.site-header{width:100%;max-width:100%;box-sizing:border-box;overflow:visible}
.brand{flex:0 1 auto;min-width:0;max-width:100%}
.brand img{display:block;width:100%;height:auto;max-width:100%}
.menu-toggle.mds-action{position:fixed}

/* The search capsule is anchored to both gutters on touch layouts. Using
   left/right instead of a 100vw calculation avoids scrollbar-width overflow. */
@media(max-width:900px){
  .site-header{padding-left:var(--gutter);padding-right:var(--gutter);gap:.75rem}
  .brand{width:76px}
  .header-search{left:var(--gutter);right:var(--gutter);width:auto;max-width:none}
}
@media(max-width:700px){
  .site-header{padding-top:1rem;align-items:flex-start}
  .brand{width:78px}
  .header-search{top:74px;left:var(--gutter);right:var(--gutter)}
  .search-field{min-height:42px;padding-left:.75rem;padding-right:.55rem}
}
@media(max-width:480px){
  :root{--gutter:1rem}
  .site-header{padding-left:var(--gutter);padding-right:var(--gutter)}
  .brand{width:72px}
  .header-search{top:72px}
  .search-field{min-height:40px}
  .search-submit{min-width:28px;height:28px}
}
@media(max-width:374px){
  :root{--gutter:.85rem}
  .brand{width:64px}
  .header-search{top:70px}
}

/* Reduce astronaut/star artwork while retaining the same editorial card rhythm. */
.team-member{grid-template-columns:minmax(0,1fr) minmax(64px,96px)}
.team-astronaut{width:86px;height:100px;justify-self:end}
@media(max-width:1000px){
  .team-member{grid-template-columns:minmax(0,1fr) 86px}
  .team-astronaut{width:76px;height:88px}
}
@media(max-width:760px){
  .team-member{grid-template-columns:minmax(0,1fr) 74px;padding:1.5rem 0;gap:.85rem}
  .team-astronaut{width:64px;height:74px}
}
@media(max-width:480px){
  .team-member{grid-template-columns:minmax(0,1fr) 66px}
  .team-astronaut{width:57px;height:66px}
}
@media(max-width:374px){
  .team-member{grid-template-columns:minmax(0,1fr) 56px;gap:.7rem}
  .team-astronaut{width:48px;height:56px}
}

/* The approach star is a quiet signature, never a dominant graphic. */
.method-symbol{width:72px;height:72px;margin-top:2.5rem;opacity:.7}
@media(max-width:760px){.method-symbol{width:58px;height:58px;margin-top:2rem}}
@media(max-width:480px){.method-symbol{width:48px;height:48px;margin-top:1.5rem}}
@media(max-width:374px){.method-symbol{width:40px;height:40px}}

/* Readable Alpino copy, with the existing Poppins heading hierarchy intact. */
.studio-copy>p:not(.eyebrow),.section-heading>p,.expertise-detail p,
.method-intro>p:not(.eyebrow),.method-steps p,.manifesto-copy,
.contact-bottom>p,.brief-content>p,.team-bio,#team-popup-intro,
.popup-introduction>p:last-child,.popup-story>p,.popup-deliverable-list p{
  font-size:1.125rem;line-height:1.75;font-weight:500;letter-spacing:normal;
}
.studio-copy>p:not(.eyebrow),.manifesto-copy{color:#454545}
.expertise .section-heading>p,.expertise-detail p,.method-intro>p:not(.eyebrow),
.method-steps p,.contact-bottom>p,.brief-content>p,.team-bio,#team-popup-intro,
.popup-introduction>p:last-child,.popup-story>p,.popup-deliverable-list p{color:#d0d0d0}
.reference-projects .project-copy p,.reference-projects .work-title>p{font-size:1.0625rem;line-height:1.65;font-weight:500;color:#4c4c4c}
.hero-intro{font-size:clamp(1.125rem,1.4vw,1.375rem);line-height:1.65;font-weight:500;color:#fff}
.hero-project>p{font-size:1rem;line-height:1.6;font-weight:500;color:#f5f5f5}
.hero-content,.hero-project{text-shadow:0 2px 18px #0004}
.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.64),rgba(0,0,0,.34) 72%),linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.08) 45%,rgba(0,0,0,.64))}

/* Programmatic focus announces the dialog title without drawing a blue box. */
#team-popup-title:focus{outline:none;box-shadow:none}

/* Portrait tablets share the mobile menu. The toggle stays in the viewport. */
@media(max-width:900px),(max-width:1100px) and (orientation:portrait){
  .site-header{padding:1.25rem var(--gutter);align-items:center}
  .brand{width:76px}
  .menu-toggle{display:flex;top:max(1.25rem,env(safe-area-inset-top));right:max(var(--gutter),env(safe-area-inset-right))}
  .glass-nav{position:fixed;left:auto;right:max(var(--gutter),env(safe-area-inset-right));top:calc(max(1.25rem,env(safe-area-inset-top)) + 58px);transform:none;min-width:0;width:min(280px,calc(100% - 2 * var(--gutter)));max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;flex-direction:column;border-radius:24px;gap:.3rem;padding:.7rem;background:linear-gradient(125deg,#ffffff12,#ffffff03),rgba(18,18,18,.9)}
  .menu-ready .glass-nav{display:none}
  .menu-ready .glass-nav.open{display:flex}
  .glass-nav a{width:100%;justify-content:space-between;padding:.95rem 1.2rem;border-radius:15px}
  .header-search{position:absolute;top:82px;left:var(--gutter);right:var(--gutter);width:auto;max-width:none}
  .search-panel{left:0;right:0;width:100%}
  .mobile-nav-open .header-search{visibility:hidden;pointer-events:none}
  .hero{display:flex;flex-direction:column;min-height:max(760px,100svh);height:auto;max-height:none;padding:clamp(180px,23svh,250px) var(--gutter) max(1.5rem,env(safe-area-inset-bottom))}
  .hero-content{position:relative;inset:auto;transform:none;width:100%;max-width:740px;padding:0;flex:1 0 auto}
  .hero-project{position:relative;inset:auto;width:100%;max-width:480px;margin:clamp(2.5rem,5svh,4rem) 0 0;padding:0}
  .hero-project>a,.hero-project>p{max-width:none}
  .hero-bottom{position:relative;inset:auto;width:100%;margin-top:2rem;padding:1.1rem 0 0;display:block}
  .hero-controls{justify-content:space-between;gap:.75rem}
  .scroll-note{display:none}
  .hero h1{font-size:clamp(2.6rem,9.5vw,5.8rem);line-height:1.12}
  .hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.52) 22%,rgba(0,0,0,.66) 70%,rgba(0,0,0,.76)),linear-gradient(90deg,#0003,transparent)}
  .slide img,.slide:nth-child(3) img,.slide:nth-child(4) img{object-position:center}
}
@media(max-width:700px){
  .site-header{padding-top:1.25rem}
  .hero-content>.eyebrow{font-size:.8125rem;letter-spacing:.08em;line-height:1.6}
  .hero-intro{font-size:1.125rem}
  .hero-project>.micro-label{font-size:.8125rem;line-height:1.6}
  .hero-project>p{font-size:1rem}
}
@media(max-width:374px){
  .hero{padding-top:170px}
  .brand{width:64px}
  .hero h1{font-size:clamp(2rem,10.5vw,2.45rem)}
  .hero-intro{font-size:1.0625rem}
  .hero-intro br{display:none}
}


/* ===== HEADER MOBILE — ALIGNEMENT LOGO / MENU ===== */

@media (max-width: 700px){

  .site-header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:auto;
    padding:1.25rem var(--gutter);
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
  }

  .brand{
    width:76px;
    height:auto;
    margin:0;
    flex:0 0 auto;
    display:block;
  }

  .brand img{
    display:block;
    width:100%;
    height:auto;
  }

.menu-toggle.mds-action{
  position:fixed !important;
  top:1.25rem !important;
  right:var(--gutter) !important;

  margin:0 !important;

  display:flex !important;
  align-items:center;
  justify-content:center;

  z-index:9999;
}


/* Réserve la place du menu dans le flex du header */
.site-header::after{
  content:"";
  display:block;

  width:48px;
  height:48px;

  flex:0 0 48px;
}

  .header-search{
    position:absolute;
    top:74px;
    left:var(--gutter);
    right:var(--gutter);
    width:auto;
  }
}

/* ===== HEADER TABLETTE — MENU FIXE ===== */

@media (min-width:701px) and (max-width:1100px){

  .site-header{
    align-items:center;
    justify-content:space-between;
  }

  /* Réserve la place du menu dans le header */
  .site-header::after{
    content:"";
    display:block;
    width:48px;
    height:48px;
    flex:0 0 48px;
  }

  /* Menu fixe */
  .menu-toggle.mds-action{
    position:fixed !important;
    top:1.25rem !important;
    right:var(--gutter) !important;

    margin:0 !important;

    display:flex !important;
    align-items:center;
    justify-content:center;

    z-index:9999;
  }
}

/* ===== CROIX POPUP = MÊME CROIX QUE LE MENU ===== */

.popup-close > span[aria-hidden="true"]{
  position:relative;
  display:block;

  width:19px;
  height:12px;

  font-size:0;
  line-height:0;
}


/* Les deux lignes de la croix */

.popup-close > span[aria-hidden="true"]::before,
.popup-close > span[aria-hidden="true"]::after{
  content:"";

  position:absolute;

  left:0;
  top:5.5px;

  width:19px;
  height:1px;

  background:currentColor;

  transform-origin:center;

  transition:transform .3s ease;
}


/* Croix */

.popup-close > span[aria-hidden="true"]::before{
  transform:rotate(45deg);
}

.popup-close > span[aria-hidden="true"]::after{
  transform:rotate(-45deg);
}