/* MYM / Final refinement. Photo visibility, precise typography, clean CTA hierarchy. */

/* The category line is genuinely one line, including on a 320px phone.
   No pill background or width-padding that could force its contents onto two lines. */
.hero-studio .hero-studio-kicker {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
  width: fit-content;
  gap: 12px;
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  white-space: nowrap;
  font: 800 clamp(8px, .75vw, 11px)/1.35 var(--sans);
  letter-spacing: clamp(.01em, .055vw, .13em);
  text-transform: uppercase;
}
.hero-studio .hero-studio-kicker::before {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  flex: 0 0 30px;
  background: currentColor;
  opacity: .85;
}
.hero-studio .hero-studio-kicker-text {
  white-space: nowrap;
  display: block;
  min-width: 0;
}
.hero-studio .hero-studio-kicker::after {display:none}

/* The homepage image is shown at its full natural 2047:1366 proportions.
   Earlier portrait frames cut away almost half the photograph. */
.hero-studio .hero-studio-layout {
  min-height: 0;
  padding-block: clamp(64px, 7vw, 96px);
  align-items: center;
  gap: clamp(34px, 5vw, 80px);
}
.hero-studio .hero-studio-frame {
  min-height: 0;
  height: auto;
  aspect-ratio: 2047 / 1366;
  overflow: hidden;
  border-radius: 8px 96px 8px 8px;
  background: #213f42;
}
.hero-studio .hero-studio-frame::before {
  inset: 13px;
  border-radius: 2px 82px 2px 2px;
  opacity: .8;
}
.hero-studio .hero-studio-frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 2047 / 1366;
  object-fit: contain;
  object-position: center;
}
.hero-studio .hero-studio-shade {
  background: linear-gradient(180deg, transparent 50%, rgba(11, 27, 32, .16));
}
.hero-studio .hero-studio-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding-top: 15px;
  border-top: 1px solid;
}
.hero-studio .hero-studio-meta span {
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent !important;
  font: 700 10px/1.5 var(--sans);
  letter-spacing: .12em;
}
.hero-studio .hero-studio-actions .btn {white-space: nowrap}
.hero-studio .hero-studio-actions .btn:focus-visible,
.about-page-hero .btn:focus-visible,
.about-values-grid a:focus-visible,
.about-method-grid a:focus-visible {outline:3px solid #c99e60;outline-offset:4px}
html[data-theme="light"] .hero-studio .hero-studio-meta {border-color: rgba(25, 77, 74, .18)}
html[data-theme="dark"] .hero-studio .hero-studio-meta {border-color: rgba(229, 198, 152, .22)}
html[data-theme="light"] .hero-studio .hero-studio-kicker {color:#70522c}
html[data-theme="dark"] .hero-studio .hero-studio-kicker {color:#e4c18f}

/* About intro: the full photograph, not a thin crop. Caption is intentionally gone. */
.about-page-hero .about-page-hero-grid {
  min-height: 0;
  padding-block: clamp(62px,7vw,92px);
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(34px,5vw,80px);
}
.about-page-hero .about-page-hero-media {margin:0;min-width:0}
.about-page-hero .about-page-hero-frame {
  height: auto;
  min-height: 0;
  width: 100%;
  aspect-ratio: 2047 / 1366;
  overflow:hidden;
  border-radius: 8px 88px 8px 8px;
  background: #1b3840;
}
.about-page-hero .about-page-hero-frame::before {
  border-radius: 2px 76px 2px 2px;
  inset: 13px;
  opacity: .7;
}
.about-page-hero .about-page-hero-frame img {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  aspect-ratio: 2047 / 1366;
  object-fit:contain;
  object-position:center;
}
.about-page-hero .about-page-hero-overlay {display:none}
.about-page-hero .about-page-hero-actions .btn {max-width:100%;white-space:nowrap}
.about-page-hero .about-page-hero-copy .eyebrow {line-height:1.5}

/* An editorial, slightly calmer final About section. Keep the content readable. */
.about-story-section {padding-block:clamp(56px,6.4vw,86px)}
.about-values-section, .about-method-section {padding-block:clamp(62px,7vw,94px)}
.about-values-grid .numbered-card,
.about-method-grid .numbered-card {transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .about-values-grid .numbered-card:hover,
  .about-method-grid .numbered-card:hover {transform:translateY(-4px);box-shadow:0 19px 44px rgba(6,24,32,.10)}
}

/* One prominent closing CTA per About page: footer only.
   Other pages retain their CTA, but the bands stay restrained in both themes. */
.cta-band {padding-block:clamp(48px,5.6vw,72px) !important}
.cta-band .cta-inner {gap:clamp(26px,4vw,55px)}
.cta-band h2 {font-size:clamp(31px,3.6vw,49px) !important;max-width:710px}
.cta-band p {font-size:clamp(14px,1.1vw,16px) !important;max-width:570px}
.signature-footer .footer-statement-inner {padding-block:clamp(38px,4.5vw,64px) !important}
.signature-footer .footer-statement h2 {font-size:clamp(32px,4vw,56px) !important}
.signature-footer .footer-discuss {min-width:min(244px,100%) !important}

/* Unify footer rhythm on pages already ending in a CTA band, rather than
   showing two back-to-back promotional sections. Other routes retain it. */
body[data-page="home"] .signature-footer .footer-statement,
body[data-page="services"] .signature-footer .footer-statement,
body[data-page="representation"] .signature-footer .footer-statement,
body[data-page="events"] .signature-footer .footer-statement,
body[data-page="morocco"] .signature-footer .footer-statement,
body[data-page="projects"] .signature-footer .footer-statement {display:none}

[dir="rtl"] .hero-studio .hero-studio-kicker {letter-spacing:0}
[dir="rtl"] .hero-studio .hero-studio-kicker-text {letter-spacing:0}
[dir="rtl"] .hero-studio .hero-studio-frame,
[dir="rtl"] .about-page-hero .about-page-hero-frame {border-radius:88px 8px 8px 8px}
[dir="rtl"] .hero-studio .hero-studio-frame::before,
[dir="rtl"] .about-page-hero .about-page-hero-frame::before {border-radius:76px 2px 2px 2px}

@media (max-width:1100px){
 .about-page-hero .about-page-hero-grid {grid-template-columns:1fr;gap:32px}
 .about-page-hero .about-page-hero-media {width:min(100%,760px);margin-inline:auto}
 .hero-studio .hero-studio-layout {min-height:0}
}
@media (max-width:720px){
 .hero-studio .hero-studio-layout {gap:30px;padding-block:52px 58px}
 .hero-studio .hero-studio-kicker {gap:8px;font-size:clamp(7.7px,2vw,10px);letter-spacing:.025em}
 .hero-studio .hero-studio-kicker::before {width:16px;flex-basis:16px}
 .hero-studio .hero-studio-frame {border-radius:8px 55px 8px 8px}
 .hero-studio .hero-studio-frame::before {border-radius:2px 44px 2px 2px;inset:10px}
 .about-page-hero .about-page-hero-grid {gap:30px;padding-block:50px 58px}
 .about-page-hero .about-page-hero-frame {border-radius:8px 56px 8px 8px}
 .about-page-hero .about-page-hero-frame::before {border-radius:2px 44px 2px 2px;inset:10px}
 .about-page-hero .about-page-hero-copy h1 {font-size:clamp(42px,9vw,62px)}
 .cta-band .cta-inner {gap:22px}
}
@media (max-width:420px){
 .hero-studio .hero-studio-kicker {font-size:7.5px;letter-spacing:0}
 .hero-studio .hero-studio-kicker::before {width:12px;flex-basis:12px}
 .hero-studio .hero-studio-actions .btn,
 .about-page-hero .about-page-hero-actions .btn {width:100%;justify-content:space-between;min-width:0}
 .hero-studio .hero-studio-meta span {font-size:9px}
}
@media (prefers-reduced-motion:reduce){
 .about-values-grid .numbered-card,
 .about-method-grid .numbered-card,
 .hero-studio .hero-studio-frame img {transition:none!important}
}

/* Don't squeeze two long French/Arabic CTAs side by side on phones. */
@media(max-width:720px){
  .hero-studio .hero-studio-actions,
  .about-page-hero .about-page-hero-actions {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:11px;
  }
  .hero-studio .hero-studio-actions .btn,
  .about-page-hero .about-page-hero-actions .btn {
    width:100%;
    min-width:0;
    max-width:100%;
    flex:none;
    justify-content:space-between;
    padding-inline:22px;
    font-size:10.5px;
    white-space:normal;
    text-align:start;
  }
}