/* EOPL gallery — extends the approved black, white and gold identity. */
:root { --gold:#c89a46; --gold-light:#eed394; --paper:#f5f4f1; }
html { scroll-padding-top:140px; }
body { overflow-wrap:break-word; }
img { max-width:100%; }
figure { margin:0; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--gold-light); outline-offset:5px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:12px 18px; background:white; color:black; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.topbar { letter-spacing:.06em; }
.topbar .wrap { flex-wrap:wrap; justify-content:space-between; padding-block:7px; gap:5px 20px; }
nav { gap:20px; }
.navlinks { gap:20px; }
.navlinks a { font-size:.875rem; letter-spacing:.02em; }
.brand-crop img { object-fit:contain; }
.header-motif { line-height:1.04; font-size:1.9rem; padding-block:10px; }
.hero { padding:0; }
.hero-inner { min-height:0; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:52px; padding:64px 0 72px; }
.hero-inner:after { content:none; }
.hero-copy { max-width:none; }
.hero h1 { font-size:clamp(3.9rem,6.9vw,6.6rem); line-height:1; }
.hero .lead { font-size:1.05rem; line-height:1.75; margin-bottom:28px; }
.eyebrow { font-size:.875rem; letter-spacing:.13em; }
.btn { font-size:.875rem; letter-spacing:.04em; }
.hero-visual { align-self:stretch; display:flex; flex-direction:column; min-width:0; }
.hero-visual img { width:100%; height:520px; object-fit:cover; object-position:center; }
.hero-visual figcaption { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; border:1px solid #51412c; background:#1b1915; color:#d0c8bb; font-size:.8rem; }
.hero-visual figcaption strong { color:var(--gold-light); font-size:.875rem; font-weight:500; }
.hero-gallery-link { display:inline-block; margin-top:22px; color:var(--gold-light); text-underline-offset:5px; font-size:.9rem; }
.trust-item p { font-size:1rem; }
.inspiration { background:#11100e; color:white; padding:86px 0 94px; }
.inspiration .section-head { align-items:start; margin-bottom:40px; }
.inspiration .section-head h2 { font-size:clamp(3rem,5.5vw,5.1rem); max-width:720px; }
.inspiration .section-head p { color:#bcb7ae; }
.gallery-notice { display:block; border-left:2px solid var(--gold); padding:4px 0 4px 18px; font-size:.9rem; line-height:1.6; }
.gallery-notice strong { display:block; color:var(--gold-light); margin-bottom:5px; }
.story-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.story { min-width:0; }
.story-heading { display:flex; align-items:start; gap:15px; margin-bottom:20px; }
.story-number { color:var(--gold-light); font-family:"Bebas Neue",Impact,sans-serif; font-size:2.4rem; line-height:1; }
.story-heading h3 { margin:0 0 6px; font-size:1.3rem; }
.story-heading p { color:#bab4a9; margin:0; font-size:.875rem; }
.transformation { position:relative; border:0; padding:0; margin:0; min-width:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.stage-radio { position:absolute; width:1px; height:1px; opacity:0; }
.stage-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #51412c; border-bottom:0; }
.stage-choices label { display:flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:12px 6px; cursor:pointer; font-size:.9rem; font-weight:600; color:#c5bfb4; background:#1c1a16; }
.stage-choices label + label { border-left:1px solid #51412c; }
.stage-choices label small { font-size:.75rem; font-weight:400; opacity:.75; }
.stage-choices label:hover { color:white; background:#2a251d; }
.before:checked ~ .stage-choices label:nth-child(1),
.during:checked ~ .stage-choices label:nth-child(2),
.after:checked ~ .stage-choices label:nth-child(3) { background:var(--gold); color:#100f0c; }
.before:focus-visible ~ .stage-choices label:nth-child(1),
.during:focus-visible ~ .stage-choices label:nth-child(2),
.after:focus-visible ~ .stage-choices label:nth-child(3) { outline:3px solid white; outline-offset:-4px; }
.stage-photo { width:100%; aspect-ratio:1; overflow:hidden; background:#24221e; }
.stage-photo img { display:block; width:300%; max-width:none; height:100%; object-fit:fill; transition:transform .45s ease; }
.before:checked ~ .stage-photo img { transform:translateX(0); }
.during:checked ~ .stage-photo img { transform:translateX(-33.333333%); }
.after:checked ~ .stage-photo img { transform:translateX(-66.666667%); }
.stage-description { padding:20px 0 0; min-height:115px; }
.stage-description p { display:none; margin:0; color:#bbb6ad; font-size:.95rem; }
.stage-description strong { display:block; color:#f1e6cf; margin-bottom:5px; font-weight:600; }
.before:checked ~ .stage-description .before-copy,
.during:checked ~ .stage-description .during-copy,
.after:checked ~ .stage-description .after-copy { display:block; }
.gallery-bottom { display:flex; gap:24px; justify-content:space-between; align-items:center; margin-top:40px; padding-top:30px; border-top:1px solid #3a3329; }
.gallery-bottom p { color:#c5bfb4; margin:0; max-width:610px; }
.gallery-bottom a { flex-shrink:0; }
.service .num { font-size:.875rem; }
.step span { font-size:.875rem; }
.contact-link small { font-size:.8rem; }
.contact-link strong { font-size:1rem; }
.contact-link { padding-left:30px; }
footer { font-size:.875rem; }
@media(min-width:801px) and (max-width:1100px) {
  .header-motif { font-size:1.4rem; padding-left:16px; }
  .header-brand { gap:12px; }
  .brand-crop { width:140px; }
  .navlinks { gap:12px; }
  .navlinks .btn { padding-inline:12px; }
  .hero-inner { gap:30px; }
  .hero-visual img { height:500px; }
}
@media(max-width:1050px) {
  .navlinks { display:none; }
  .mobile-nav { display:block; }
}
@media(max-width:800px) {
  html { scroll-padding-top:115px; }
  .header-brand { gap:12px; }
  .header-motif { font-size:1.4rem; padding-left:14px; line-height:1.05; }
  .hero-inner { grid-template-columns:1fr; padding:42px 0 48px; gap:35px; }
  .hero h1 { font-size:clamp(3.3rem,11vw,5rem); max-width:650px; }
  .hero .lead { max-width:650px; }
  .hero-visual img { height:auto; aspect-ratio:3/2; }
  .hero-visual figcaption { padding:14px 16px; }
  .inspiration { padding:60px 0; }
  .story-grid { grid-template-columns:1fr; gap:45px; }
  .inspiration .section-head h2 { font-size:3.5rem; }
  .inspiration .section-head p { max-width:none; }
  .stage-description { min-height:0; }
  .gallery-bottom { flex-direction:column; align-items:start; }
  .gallery-bottom .btn { width:100%; }
  .contact-link { padding-left:0; }
  .mobile-links a { font-size:.9rem; }
}
@media(max-width:480px) {
  .topbar { font-size:.75rem; letter-spacing:0; }
  .topbar .wrap { gap:3px 8px; }
  nav { gap:5px; }
  .brand-crop { width:122px; }
  .header-brand { gap:6px; }
  .header-motif { font-size:1.15rem; padding-left:10px; }
  .mobile-nav summary { width:40px; }
  .hero .eyebrow { font-size:.8rem; letter-spacing:.06em; }
  .hero-visual figcaption { flex-wrap:wrap; gap:4px; }
  .stage-choices label { font-size:.875rem; }
  .stage-choices label small { display:none; }
}
@media(max-width:359px) {
  .brand-crop { width:105px; }
  .header-motif { font-size:1rem; }
  .hero h1 { font-size:3rem; }
}