/* ============================================================
   MAGDALENA HALBERG — ARQUITECTA
   Sistema tipográfico y de color
   ============================================================ */
:root{
  --bone:        #F3F0EA;
  --bone-deep:   #EBE7DF;
  --ink:         #14130F;
  --ink-soft:    #55524A;
  --ink-mute:    #8A867C;
  --accent:      #E1541F;
  --rule:        rgba(20,19,15,.16);
  --rule-soft:   rgba(20,19,15,.09);
  --rule-dark:   rgba(243,240,234,.16);

  --pad:         clamp(20px, 5.2vw, 88px);
  --gap:         clamp(56px, 9vh, 128px);
  --gap-air:     clamp(36px, 6vh, 64px);
  --gap-dense:   clamp(46px, 7vh, 96px);

  --label:       500 clamp(9px,.72vw,10.5px)/1.2 "Manrope", system-ui, sans-serif;
  --track:       .22em;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:"Manrope", system-ui, -apple-system, sans-serif;
  font-weight:300;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}

::selection{background:var(--accent);color:var(--bone)}

:focus-visible{outline:1.5px solid var(--accent); outline-offset:4px}

/* --------------------------- utilidades --------------------------- */
.wrap{ padding-inline:var(--pad) }
.label{
  font:var(--label);
  letter-spacing:var(--track);
  text-transform:uppercase;
  color:var(--ink-mute);
}
.label--ink{ color:var(--ink-soft) }
.label--dash::before{
  content:""; display:inline-block; width:22px; height:1px;
  background:var(--accent); vertical-align:middle; margin-right:13px;
}
.hl{ font-style:normal; font-weight:inherit; color:var(--accent) }
.rule{ height:1px; background:var(--rule-soft); border:0; margin:0 }

/* placas editoriales — viven dentro de la columna de texto */
.plate{ margin:0 }
.plate img{ display:block; width:100%; object-fit:cover }

/* divisor de sección: pauta fina con arranque naranja */
.section, .contact{ position:relative; border-top:1px solid var(--rule-soft) }
.section::before, .contact::before{
  content:""; position:absolute; top:-1px; left:0; width:clamp(44px,5vw,74px); height:1px;
  background:var(--accent);
}

/* navegación activa */
.nav a.is-active{ color:var(--ink) }
.nav a.is-active::after{ transform:scaleX(1) }

/* --------------------------- header --------------------------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:clamp(16px,1.9vw,26px) var(--pad);
  transition:background .45s ease, box-shadow .45s ease, padding .45s ease;
}
.header.is-stuck{
  background:rgba(243,240,234,.92);
  -webkit-backdrop-filter:saturate(1.1) blur(9px);
  backdrop-filter:saturate(1.1) blur(9px);
  box-shadow:0 1px 0 var(--rule-soft);
  padding-block:clamp(12px,1.3vw,17px);
}
.brand{ display:flex; align-items:center; gap:13px }
.brand svg{ width:clamp(21px,1.7vw,25px); height:auto; color:var(--ink) }
.brand__mark{ width:clamp(21px,1.7vw,25px); height:auto; display:block; color:var(--ink) }
.brand span{
  font:var(--label); letter-spacing:var(--track); text-transform:uppercase; color:var(--ink);
}
.nav{ display:flex; align-items:center; gap:clamp(20px,2.3vw,38px) }
.nav a{
  font:var(--label); letter-spacing:var(--track); text-transform:uppercase; color:var(--ink-soft);
  position:relative; padding-block:4px; transition:color .3s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.7,.2,1);
}
.nav a:hover{ color:var(--ink) }
.nav a:hover::after{ transform:scaleX(1) }
.nav .btn-nav{
  border:1px solid var(--ink); color:var(--ink);
  padding:9px 19px; border-radius:999px; transition:background .35s ease,color .35s ease;
}
.nav .btn-nav::after{ display:none }
.nav .btn-nav:hover{ background:var(--accent); border-color:var(--accent); color:#FFF8F4 }
@media (max-width:820px){ .nav a:not(.btn-nav):not(.nav__key){ display:none } }

/* --------------------------- hero --------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:clamp(120px,16vh,180px) var(--pad) clamp(60px,11vh,128px);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2 }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 78%;
  transform:scale(1.028); will-change:transform;
}
/* velo de papel: aclara, no oscurece — el render permanece legible */
.hero__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(243,240,234,.94) 0%,
      rgba(243,240,234,.86) 22%,
      rgba(243,240,234,.52) 44%,
      rgba(243,240,234,.10) 66%,
      rgba(243,240,234,0)   82%),
    linear-gradient(to bottom,
      rgba(243,240,234,.72) 0%,
      rgba(243,240,234,.18) 16%,
      rgba(243,240,234,0)   34%,
      rgba(243,240,234,0)   72%,
      rgba(243,240,234,.60) 100%);
}

.hero__name{
  margin:0;
  font-weight:400;
  font-size:clamp(2.75rem, 9.9vw, 9.7rem);
  line-height:1.01;
  letter-spacing:-.034em;
  color:var(--ink);
}
.hero__name span{ display:block; will-change:transform }

.hero__role{
  display:flex; align-items:center; gap:20px;
  margin-top:clamp(30px,5vh,54px);
  transform:translateX(-130vw);
  animation:enter .62s forwards;
  animation-delay:.30s;
}
.hero__inner{ width:100% }
.hero__name .hl{ color:var(--accent); margin-left:.02em }
.hero__role em{
  display:block; width:clamp(52px,5.6vw,86px); height:3px; background:var(--accent);
  transform-origin:left; font-style:normal;
}
.hero__role strong{
  font-weight:300; font-size:clamp(.9rem,1.22vw,1.16rem);
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink);
}


@media (max-width:760px){
  .hero{ min-height:92svh }
  .hero__media img{ object-position:50% 72% }
  .hero__veil{
    background:
      linear-gradient(to bottom,
        rgba(243,240,234,.95) 0%,
        rgba(243,240,234,.90) 34%,
        rgba(243,240,234,.55) 54%,
        rgba(243,240,234,.10) 72%,
        rgba(243,240,234,.55) 100%);
  }
  }

/* --------------------------- perfil / intro --------------------------- */
.section{ padding-block:var(--gap) }
.section--air{ padding-block:var(--gap-air) }
#criterio .grid12{ row-gap:clamp(16px,2.4vh,28px) }
.section--dense{ padding-block:var(--gap-dense) }
.grid12{
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(18px,2.4vw,40px); row-gap:clamp(26px,4vh,52px);
}
.actions{ display:flex; flex-wrap:wrap; gap:12px }
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font:var(--label); letter-spacing:var(--track); text-transform:uppercase;
  padding:15px 26px; border-radius:999px; border:1px solid var(--ink);
  transition:background .38s ease, color .38s ease, border-color .38s ease;
}
.btn__arrow{ transition:transform .38s cubic-bezier(.2,.7,.2,1) }
.btn:hover .btn__arrow{ transform:translateX(5px) }
.btn--solid{ background:var(--accent); border-color:var(--accent); color:#FFF8F4 }
.btn--solid:hover{ background:transparent; color:var(--accent) }
.btn--line{ color:var(--ink); border-color:var(--rule) }
.btn--line:hover{ background:var(--accent); border-color:var(--accent); color:#FFF8F4 }

/* --------------------------- criterio --------------------------- */
.criterio__label{ grid-column:1 / 3; grid-row:1; margin-bottom:clamp(-14px,-1.4vh,-4px) }

.criterio__plate{ grid-column:1 / 4; grid-row:2; align-self:center }
.criterio__text{ grid-column:5 / 12; grid-row:2 }
.statement{
  margin:0;
  font-weight:200;
  font-size:clamp(1.85rem,4.6vw,3.5rem);
  line-height:1.13; letter-spacing:-.028em; color:var(--ink);
  max-width:17ch;
  text-wrap:balance;
}
.criterio__cols{ margin-top:clamp(20px,3vh,34px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,38px) }
.criterio__cols p{ margin:0; color:var(--ink-soft); max-width:36ch; line-height:1.82; text-wrap:pretty }

/* --------------------------- servicios --------------------------- */
.sec-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  padding-bottom:clamp(24px,3.4vh,40px);
}
.sec-title{
  margin:0; font-weight:300; letter-spacing:-.02em; text-wrap:balance;
  font-size:clamp(1.5rem,3.1vw,2.35rem); line-height:1.1;
}
.sec-title b{ font-weight:500 }

.svc-grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(18px,2.4vw,40px); row-gap:clamp(26px,4vh,40px); align-items:center }
.svc-plate{ grid-column:9 / 13; margin:0; align-self:center }
.svc-plate img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover }
.svc{ grid-column:1 / 8; border-top:1px solid var(--rule-soft) }
@media (max-width:1000px){ .svc-plate{ grid-column:1 / 13; max-width:250px; order:2 } .svc{ grid-column:1 / 13 } }
.svc__row:hover .svc__name{ color:var(--accent) }
.svc__name{ transition:color .35s ease }
.svc__row{
  display:grid; grid-template-columns:clamp(44px,5vw,84px) minmax(0,1fr) minmax(0,1.05fr);
  column-gap:clamp(18px,2.6vw,44px);
  align-items:baseline;
  padding:clamp(12px,1.6vh,17px) 0;
  border-bottom:1px solid var(--rule-soft);
  transition:padding-left .5s cubic-bezier(.2,.7,.2,1);
}
.svc__row:hover{ padding-left:clamp(6px,1vw,16px) }
.svc__num{ font:var(--label); letter-spacing:var(--track); color:var(--accent) }
.svc__name{
  margin:0; font-weight:300; letter-spacing:-.018em;
  font-size:clamp(1.18rem,2.2vw,1.72rem); line-height:1.16;
}
.svc__desc{ margin:0; color:var(--ink-soft); font-size:clamp(.9rem,1vw,1rem); max-width:38ch; line-height:1.74; text-wrap:pretty }

/* --------------------------- portfolio --------------------------- */
.pf{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(18px,2.4vw,40px); row-gap:clamp(26px,4vh,44px); align-items:start }
.pf__label{ grid-column:1 / 3 }
.pf__title{ grid-column:4 / 8 }
.pf__side{ grid-column:9 / 13; padding-top:clamp(6px,1vh,14px) }
.pf__side p{ margin:0 0 clamp(30px,4.4vh,44px); color:var(--ink-soft); max-width:30ch; line-height:1.8 }

/* --------------------------- sobre mí (oscuro) --------------------------- */
.about{
  background:var(--ink); color:var(--bone);
  padding:clamp(72px,11.5vh,158px) var(--pad);
}
.about .label{ color:rgba(243,240,234,.5) }
.about__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,3vw,64px); row-gap:clamp(34px,5vh,60px);
  align-items:center;
}
.about__figure{ grid-column:1 / 6 }
.about__figure img{ width:100%; height:auto }
.about__body{ grid-column:7 / 12 }
.about__title{
  margin:0 0 clamp(26px,3.8vh,40px);
  font-weight:300; letter-spacing:-.028em;
  font-size:clamp(1.65rem,3.5vw,2.75rem); line-height:1.14; text-wrap:balance;
}
.about__title b{ display:block; font-weight:300; color:var(--accent) }
.about__body p{ margin:0 0 1.25em; color:rgba(243,240,234,.74); max-width:38ch; line-height:1.82; text-wrap:pretty }
.principles{ list-style:none; margin:clamp(28px,4vh,44px) 0 0; padding:0; border-top:1px solid var(--rule-dark) }
.principles li{
  display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:baseline;
  padding:19px 0; border-bottom:1px solid var(--rule-dark);
}
.principles span{ font:var(--label); letter-spacing:var(--track); color:var(--accent) }
.principles p{ margin:0; color:var(--bone); font-size:clamp(.95rem,1.08vw,1.05rem); line-height:1.5; text-wrap:pretty }

/* --------------------------- contacto --------------------------- */
.contact{ padding-block:clamp(58px,8vh,104px) clamp(34px,4.2vh,52px) }
.contact__title{
  margin:clamp(14px,2vh,24px) 0 clamp(30px,4.2vh,50px);
  font-weight:200;
  font-size:clamp(3.2rem,12.4vw,9.8rem);
  line-height:.9; letter-spacing:-.045em;
}
.contact__title i{ font-style:normal; color:var(--accent) }
.contact__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,3vw,56px); row-gap:clamp(34px,4.6vh,50px);
  border-top:1px solid var(--rule); padding-top:clamp(26px,3.4vh,38px);
}
.form{ grid-column:1 / 7 }
.field{ position:relative; margin-bottom:clamp(17px,2.3vh,25px) }
.field label{
  display:block; font:var(--label); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:9px;
}
.field input,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:7px 0 11px; font-size:clamp(.98rem,1.1vw,1.06rem); font-weight:300;
  border-radius:0; transition:border-color .35s ease;
}
.field textarea{ resize:vertical; min-height:76px; line-height:1.55 }
.field input:focus,.field textarea:focus{ outline:0; border-bottom-color:var(--accent) }
.field input::placeholder,.field textarea::placeholder{ color:rgba(20,19,15,.24) }
.form__send{ cursor:pointer; background:var(--accent); color:#FFF8F4; border:1px solid var(--accent); margin-top:6px }
.form__send:hover{ background:transparent; color:var(--accent) }
.flex-container{display:flex; flex-direction: row; gap: 15px}
.form__note{ font-size:.82rem; color:var(--ink-mute) }

.direct{ grid-column:8 / 13 }
.direct__list{ border-top:1px solid var(--rule-soft) }
.direct__item{
  display:grid; grid-template-columns:clamp(78px,8vw,116px) 1fr auto;
  gap:16px; align-items:baseline;
  padding:clamp(14px,1.8vh,19px) 0; border-bottom:1px solid var(--rule-soft);
}
.direct__val{ font-size:clamp(.98rem,1.15vw,1.1rem); font-weight:300 }
a.direct__item{ transition:color .3s ease }
a.direct__item:hover .direct__val{ color:var(--accent) }
a.direct__item .btn__arrow{ transition:transform .38s cubic-bezier(.2,.7,.2,1); color:var(--ink-mute) }
a.direct__item:hover .btn__arrow{ transform:translate(4px,-4px) }

/* --------------------------- footer --------------------------- */
.footer{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding:clamp(20px,2.6vh,28px) var(--pad) clamp(28px,3.4vh,40px);
  border-top:1px solid var(--rule-soft);
}
.footer svg{ width:18px; height:auto; color:var(--ink-mute) }
.footer__l{ display:flex; align-items:center; gap:12px }

/* --------------------------- responsive --------------------------- */
@media (max-width:1000px){
  .criterio__label,.pf__label{ grid-column:1 / 13 }
  .criterio__plate{ grid-column:1 / 13; grid-row:auto; max-width:280px }
  .criterio__text{ grid-column:1 / 13; grid-row:auto }

  .pf__title,.pf__side{ grid-column:1 / 13 }
  .pf__side{ padding-top:0 }
  .about__figure{ grid-column:1 / 13; max-width:420px }
  .about__body{ grid-column:1 / 13 }
  .form,.direct{ grid-column:1 / 13 }
}
@media (max-width:700px){
  .criterio__cols{ grid-template-columns:1fr }
  .svc__row{ grid-template-columns:38px 1fr; row-gap:10px }
  .svc__desc{ grid-column:2 / 3 }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:12px }
  .direct__item{ grid-template-columns:1fr auto }
  .direct__item .label{ grid-column:1 / 3; margin-bottom:4px }
}

/* --------------------------- motion --------------------------- */
.rise{ opacity:0; transform:translateY(14px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1) }
.rise.in{ opacity:1; transform:none }

/* el nombre entra desde fuera de la pantalla, se pasa de largo y asienta */
.hero__name span i{
  display:block; font-style:normal;
  transform:translateX(-130vw);
  animation:enter .62s forwards;
  animation-delay:.22s;
}
.hero__name span:nth-child(2) i{ animation-delay:.26s }
@keyframes enter{
  0%   { transform:translateX(-130vw); animation-timing-function:cubic-bezier(.32,0,.24,1) }
  58%  { transform:translateX(2.6%);   animation-timing-function:cubic-bezier(.36,0,.3,1) }
  78%  { transform:translateX(-.85%);  animation-timing-function:cubic-bezier(.36,0,.3,1) }
  91%  { transform:translateX(.26%);   animation-timing-function:cubic-bezier(.36,0,.3,1) }
  100% { transform:translateX(0) }
}
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1!important; transform:none!important; transition:none!important }
  .hero__name span i,.hero__role{ transform:none!important; animation:none!important }
}

/* ============================================================
   PROYECTOS — secuencia editorial
   ============================================================ */
.subpage .header{ background:rgba(243,240,234,.92); box-shadow:0 1px 0 var(--rule-soft) }
.masthead{ padding:clamp(120px,15vh,168px) var(--pad) clamp(32px,4.6vh,58px) }
.masthead__grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(18px,2.4vw,40px); row-gap:clamp(22px,3.2vh,36px); align-items:end }
.masthead__label{ grid-column:1 / 3 }
.masthead__title{ grid-column:4 / 9 }
.masthead__intro{ grid-column:9 / 13 }
.masthead__intro p{ margin:0; color:var(--ink-soft); max-width:31ch; line-height:1.8; text-wrap:pretty }

.proj{ padding:clamp(24px,3.4vh,44px) var(--pad); position:relative; border-top:1px solid var(--rule-soft) }
.proj::before{ content:""; position:absolute; top:-1px; left:var(--pad); width:clamp(44px,5vw,74px); height:1px; background:var(--accent) }
.proj__grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(20px,3vw,54px); row-gap:clamp(24px,3.6vh,38px); align-items:center }
.proj__media{ grid-column:1 / 7; margin:0 }
.proj__body{ grid-column:8 / 13 }
.proj--flip .proj__media{ grid-column:7 / 13; order:2 }
.proj--flip .proj__body{ grid-column:1 / 6; order:1 }
.proj__num{ font:var(--label); letter-spacing:var(--track); color:var(--accent); display:block; margin-bottom:13px }
.proj__num .hl{ margin:0 5px }
.proj__title{ margin:0 0 clamp(14px,1.9vh,19px); font-weight:300; letter-spacing:-.026em; font-size:clamp(1.4rem,2.7vw,2.05rem); line-height:1.12; text-wrap:balance }
.proj__intro{ margin:0 0 clamp(20px,2.7vh,28px); color:var(--ink-soft); max-width:33ch; line-height:1.78; text-wrap:pretty }

.meta{ border-top:1px solid var(--rule-soft) }
.meta__row{ display:grid; grid-template-columns:clamp(92px,9.5vw,140px) 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--rule-soft) }
.meta__row p{ margin:0; font-size:clamp(.86rem,.95vw,.95rem); color:var(--ink); line-height:1.58 }
.meta__row p span{ display:block; color:var(--ink-soft) }

/* carrusel */
.car{ position:relative }
.car__win{ overflow:hidden }
.car__track{ display:flex; transition:transform .78s cubic-bezier(.22,.72,.16,1) }
.car__track img{ flex:0 0 100%; width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.car__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:clamp(38px,3.4vw,46px); height:clamp(38px,3.4vw,46px);
  display:grid; place-items:center; cursor:pointer;
  background:rgba(243,240,234,.86); border:1px solid var(--rule-soft); border-radius:50%;
  color:var(--ink); font-size:15px; line-height:1;
  opacity:0; transition:opacity .4s ease, background .35s ease, color .35s ease, border-color .35s ease;
}
.car:hover .car__btn, .car__btn:focus-visible{ opacity:1 }
.car__btn:hover{ background:var(--accent); border-color:var(--accent); color:#FFF8F4 }
.car__btn--prev{ left:clamp(10px,1.2vw,18px) }
.car__btn--next{ right:clamp(10px,1.2vw,18px) }
.car__btn[disabled]{ opacity:0!important; pointer-events:none }
@media (hover:none){ .car__btn{ opacity:1 } }

.pdf{ padding:clamp(56px,9vh,116px) var(--pad); border-top:1px solid var(--rule-soft); position:relative }
.pdf::before{ content:""; position:absolute; top:-1px; left:var(--pad); width:clamp(44px,5vw,74px); height:1px; background:var(--accent) }
.pdf__grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(20px,3vw,56px); row-gap:clamp(24px,3.4vh,38px); align-items:end }
.pdf__title{ grid-column:1 / 7 }
.pdf__side{ grid-column:8 / 13 }
.pdf__side p{ margin:0 0 clamp(24px,3.4vh,34px); color:var(--ink-soft); max-width:34ch; line-height:1.8 }

@media (max-width:1000px){
  .masthead__title,.masthead__intro,.masthead__label{ grid-column:1 / 13 }
  .proj__media,.proj__body,.proj--flip .proj__media,.proj--flip .proj__body{ grid-column:1 / 13; order:0 }
  .pdf__title,.pdf__side{ grid-column:1 / 13 }
}

.about .btn--solid{ background:var(--accent); border-color:var(--accent); color:#FFF8F4 }
.about .btn--solid:hover{ background:transparent; color:var(--accent) }
.about__cta{ margin-top:clamp(30px,4.4vh,46px) }

/* ============================================================
   Línea editorial permanente — borde derecho
   ============================================================ */
.edge{
  position:fixed; top:0; right:clamp(11px,1.5vw,26px);
  width:6px; height:100vh; height:100svh;
  z-index:45; pointer-events:none;
}
.edge__line{
  position:absolute; top:0; right:2px;
  width:1px; height:30vh; background:var(--accent);
  will-change:transform,height;
}
.edge__dot{
  position:absolute; top:0; right:0;
  width:5px; height:5px; margin-top:-2px; border-radius:50%;
  background:var(--accent); will-change:transform;
}
@media (max-width:620px){ .edge{ right:7px } }

.hero__media img{ will-change:transform; transform:scale(1.035) }
@media (prefers-reduced-motion: reduce){ .hero__media img{ transform:none } }