/* UNICUS Atelier v7 — Safari/iPhone finishing
   Targets only mobile layout and user-reported icon artifacts.
   Original desktop art direction and site functionality are preserved. */

/* This is a branded vector ornament, not a platform-dependent emoji. */
.manifesto-icon{
  width:46px;
  height:46px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#978164;
  line-height:1;
}
.manifesto-icon svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

/* Prevent a white underlying root from flashing around Safari's browser chrome,
   especially during rubber-band scrolling / tab-bar collapse. */
html{background-color:#111815}
body{min-width:0}
:root{color-scheme:light}

@media(max-width:760px){
  /* Fixed/sticky mobile navigation was covering service-card titles as the
     user scrolled and exposed an uneven top edge in Safari. Place it in flow. */
  .header{
    position:relative;
    top:auto;
    width:100%;
    min-height:76px;
    background:#111815;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-top:0;
    isolation:isolate;
  }
  .header-inner{
    height:76px;
    min-height:76px;
    padding-left:max(var(--pad), env(safe-area-inset-left, 0px));
    padding-right:max(var(--pad), env(safe-area-inset-right, 0px));
  }
  .site-progress{display:none}
  .mobile-nav{z-index:41}
  /* Let the hero breathe below its eyebrow and keep its copy away from
     hard edges. Font and line-height are adjusted together for French. */
  .inner-hero{
    min-height:clamp(605px,74svh,690px);
    overflow:hidden;
    align-items:center;
    justify-content:center;
  }
  .inner-hero .inner-text{
    width:100%;
    max-width:640px;
    padding:114px var(--pad) 81px;
    margin:0 auto;
  }
  .inner-hero .inner-text .display{
    font-size:clamp(52px,11.4vw,72px);
    line-height:0.99;
    letter-spacing:-.028em;
    margin:32px 0 29px;
    overflow-wrap:normal;
    text-wrap:balance;
  }
  .inner-hero .inner-text>p{
    max-width:37ch;
    font-size:16px;
    line-height:1.65;
    letter-spacing:0;
    text-wrap:pretty;
  }
  .inner-hero .inner-text .eyebrow{
    font-size:11px;
    line-height:1.5;
    letter-spacing:.18em;
  }
  /* Avoid an enormous light gap immediately after each dark opening. */
  .points{padding:66px 0 70px}
  body[data-page="about"] .intro-block{padding:71px 0 76px}
  body[data-page="services"] .service-rows{padding:68px 0 78px}
  /* Long service-card headlines must never travel behind the navigation or
     spill out of their image frames. */
  .services-v3 .service-tile{height:435px;overflow:hidden}
  .services-v3 .tile-text h3{
    font-size:clamp(35px,8.1vw,47px);
    line-height:1.09;
    letter-spacing:-.025em;
    margin-top:13px;
    max-width:16ch;
    overflow-wrap:break-word;
    text-wrap:balance;
  }
  .services-v3 .tile-text{bottom:29px;left:24px;right:24px}
  .services-v3 .tile-text>span:first-child{font-size:10px}
  .services-v3 .right-action{margin-top:23px}
  .services-v3{padding-bottom:73px}
  /* The manifesto receives a quiet branded motif instead of a green
     emoji square; editorial text wraps within the mobile safe width. */
  .manifesto,.manifesto-v3{padding:68px 0 70px}
  .manifesto-icon{width:36px;height:36px}
  .manifesto-v3 blockquote,.manifesto blockquote{
    font-size:clamp(37px,9.25vw,55px);
    line-height:1.09;
    letter-spacing:-.028em;
    max-width:100%;
    margin:31px auto 28px;
    text-wrap:balance;
    overflow-wrap:normal;
  }
  .manifesto .container>span:last-child{line-height:1.5}
}
@media(max-width:480px){
  .inner-hero .inner-text{
    padding-top:120px;
    padding-bottom:85px;
  }
  .inner-hero .inner-text .display{
    font-size:clamp(52px,13.25vw,62px);
    line-height:.99;
    margin:30px 0 27px;
    letter-spacing:-.028em;
  }
  .inner-hero .inner-text>p{font-size:16px;line-height:1.67}
  .manifesto-v3 blockquote,.manifesto blockquote{
    font-size:clamp(36px,9.2vw,44px);
    line-height:1.1;
  }
  .services-v3 .service-tile{height:416px}
  .services-v3 .tile-text h3{font-size:clamp(34px,9.5vw,40px)}
}
/* In reduced-motion mode, keep the same positioning without transition or
   layout animation; the gold SVG is always fully visible. */
@media(prefers-reduced-motion:reduce){
  .manifesto-icon svg{animation:none!important;transition:none!important}
}


/* v9 · iOS Safari 26 top-chrome colour fix.
   Safari 26 can ignore theme-color and use the BODY fallback. Previously
   body stayed #eee9df even though the site header and html were dark, causing
   the white bar and its little mismatched corner in the user's iPhone.
   Make html/body fallback exactly match the actual header; preserve the
   warm paper background on the actual page content with main. */
@media(max-width:760px){
  html,
  body {
    background-color:#111815;
  }
  body > main {
    background-color:#eee9df;
  }
}


/* v10: actual light/dark hint for iOS native Safari controls.
   The original :root color-scheme:light forced light UI even though
   header, html and body were dark. Correct the mobile root, but keep
   every light editorial page section and its form widgets light. */
@media (max-width:760px) {
  :root { color-scheme: dark; }
  body > main,
  body > main :is(input, textarea, select, option) {
    color-scheme: light;
  }
}