.brand img {
  width: 190px;
  height: 64px;
  object-fit: contain;
}

.nav-toggle {
  position: relative;
  width: 44px;
  height: 44px;
}

.nav-toggle span {
  position: absolute;
  left: 10px;
  width: 24px;
  margin: 0;
  transition: transform .2s ease, top .2s ease;
}

.nav-toggle span:first-child {
  top: 16px;
}

.nav-toggle span:last-child {
  top: 26px;
}

.site-header.open .nav-toggle span:first-child {
  top: 21px;
  transform: rotate(45deg);
}

.site-header.open .nav-toggle span:last-child {
  top: 21px;
  transform: rotate(-45deg);
}

@media (max-width: 580px) {
  .brand img {
    width: 118px;
    height: 42px;
  }

  .dark-marquee {
    padding-block: 22px;
  }

  .dark-marquee p {
    white-space: normal;
    text-align: center;
    font-size: 21px;
    line-height: 1.25;
  }

  .site-header.open {
    align-items: start;
  }

  .site-header.open .main-nav {
    width: 100%;
    padding-top: 8px;
  }
}

.site-header.open,
.site-header.is-closing {
  --menu-head: clamp(82px, 8vw, 104px);
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  padding: clamp(24px, 4vw, 48px) clamp(22px, 5vw, 72px) 36px;
  background: rgba(255,250,243,.98);
  box-shadow: 0 24px 90px rgba(21,18,15,.16);
  overflow-y: auto;
  transform: translateX(0);
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: transform .48s cubic-bezier(.76,0,.24,1), opacity .34s ease, clip-path .48s cubic-bezier(.76,0,.24,1);
}

.site-header.is-opening {
  transform: translateY(0);
  opacity: 1;
  clip-path: inset(0 0 calc(100% - var(--menu-head)) 0);
}

.site-header.is-closing {
  transform: translateY(0);
  opacity: 1;
  clip-path: inset(0 0 calc(100% - var(--menu-head)) 0);
}

.site-header.open .main-nav,
.site-header.is-closing .main-nav {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
  align-content: center;
  justify-items: start;
  padding: clamp(34px, 5vw, 64px) 0 28px;
}

.site-header.open .main-nav a,
.site-header.is-closing .main-nav a {
  width: fit-content;
  font-size: clamp(32px, 4.8vw, 68px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  padding: 7px 0;
  opacity: 1;
  transform: translateY(0);
  transition: color .2s ease, transform .42s cubic-bezier(.22,1,.36,1), opacity .34s ease;
}

.site-header.open .main-nav a:nth-child(1) { transition-delay: .04s; }
.site-header.open .main-nav a:nth-child(2) { transition-delay: .08s; }
.site-header.open .main-nav a:nth-child(3) { transition-delay: .12s; }
.site-header.open .main-nav a:nth-child(4) { transition-delay: .16s; }
.site-header.open .main-nav a:nth-child(5) { transition-delay: .20s; }
.site-header.open .main-nav a:nth-child(6) { transition-delay: .24s; }

.site-header.is-opening .main-nav a,
.site-header.is-closing .main-nav a {
  opacity: 0;
  transform: translateY(18px);
}

.site-header.open .main-nav a::after,
.site-header.is-closing .main-nav a::after {
  bottom: 2px;
  height: 2px;
  transform: scaleX(.14);
}

.site-header.open .main-nav a:hover::after,
.site-header.open .main-nav a.active::after {
  transform: scaleX(.74);
}

.site-header.open .header-actions,
.site-header.is-closing .header-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .32s ease .26s, transform .38s cubic-bezier(.22,1,.36,1) .26s;
}

.site-header.is-opening .header-actions,
.site-header.is-closing .header-actions {
  opacity: 0;
  transform: translateY(14px);
}

@media (max-width: 760px) {
  .site-header.open .main-nav a,
  .site-header.is-closing .main-nav a {
    font-size: clamp(34px, 12vw, 58px);
  }
}

.main-nav a {
  position: relative;
  transition: color .2s ease, transform .2s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.main-nav a:hover {
  transform: translateY(-2px);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  transform: scaleX(1);
}

.dark-marquee {
  position: relative;
}

.dark-marquee p {
  display: inline-block;
  min-width: max-content;
  padding-left: 100%;
  animation: marqueeRun 22s linear infinite;
}

.motion-title {
  position: relative;
  overflow: hidden;
  padding-bottom: .36em;
}

.motion-title::after {
  content: attr(data-text) " — " attr(data-text) " — " attr(data-text);
  position: absolute;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  font-size: .21em;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .22;
  animation: titleRun 16s linear infinite;
  pointer-events: none;
}

.portfolio-grid {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 148px;
  align-items: stretch;
  gap: 0;
}

.portfolio-item button,
.portfolio-item img {
  height: 100%;
}

.portfolio-item img {
  aspect-ratio: auto;
}

.portfolio-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.portfolio-item:nth-child(2),
.portfolio-item:nth-child(5) {
  grid-column: span 2;
}

.portfolio-item:nth-child(3),
.portfolio-item:nth-child(4),
.portfolio-item:nth-child(6),
.portfolio-item:nth-child(7),
.portfolio-item:nth-child(8) {
  grid-column: span 1;
}

.portfolio-item:nth-child(6) {
  grid-row: span 2;
}

@keyframes marqueeRun {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes menuCloseUp {
  from {
    transform: translateY(0);
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  to {
    transform: translateY(0);
    opacity: 1;
    clip-path: inset(0 0 calc(100% - var(--menu-head)) 0);
  }
}

@keyframes titleRun {
  from { transform: translateX(0); }
  to { transform: translateX(-42%); }
}

.site-header {
  grid-template-columns: auto 1fr auto;
}

.site-header .main-nav,
.site-header .header-actions {
  display: none;
}

.site-header .nav-toggle {
  display: block;
  grid-column: 3;
}

.site-header.open {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  align-content: start;
  padding: clamp(22px, 3vw, 40px) clamp(22px, 5vw, 72px) 32px;
  background: rgba(255,250,243,.98);
  overflow-y: auto;
}

.site-header.open .brand {
  align-self: start;
}

.site-header.open .nav-toggle {
  align-self: start;
}

.site-header.open .main-nav {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
  align-content: center;
  padding: clamp(30px, 5vw, 58px) 0 clamp(20px, 3vw, 34px);
}

.site-header.open .main-nav a {
  width: fit-content;
  font-size: clamp(32px, 5.1vw, 74px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 0;
}

.site-header.open .main-nav a::after {
  bottom: 2px;
  transform: scaleX(.18);
}

.site-header.open .main-nav a:hover::after,
.site-header.open .main-nav a.active::after {
  transform: scaleX(.78);
}

.site-header.open .header-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-self: start;
}

.site-header.open .header-actions a {
  min-height: 40px;
  padding: 9px 15px;
  font-size: 14px;
}

.site-header.open.is-closing {
  animation: menuCloseUp .48s cubic-bezier(.76,0,.24,1) forwards;
}

.number-grid {
  border: 0;
  gap: 22px 36px;
}

.number-grid article {
  border: 0;
  border-bottom: 1px solid rgba(109,74,35,.22);
  background: transparent;
  padding: 0 0 22px;
}

@media (max-width: 900px) {

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 190px;
  }

  .portfolio-item:nth-child(n) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .portfolio-item:nth-child(1),
  .portfolio-item:nth-child(6) {
    grid-column: span 2;
  }
}

@media (max-width: 1180px), (max-height: 780px) {
  .site-header.open {
    padding-top: 22px;
  }

  .site-header.open .main-nav {
    padding: 24px 0 20px;
  }

  .site-header.open .main-nav a {
    font-size: clamp(28px, 4.5vw, 54px);
    padding: 5px 0;
  }
}

@media (max-width: 580px) {
  .site-header.open {
    padding: 28px 22px 32px;
  }

  .site-header.open .main-nav {
    padding: 38px 0 28px;
  }

  .site-header.open .main-nav a {
    font-size: clamp(34px, 10.8vw, 46px);
    line-height: 1.04;
    padding: 3px 0;
  }

  .site-header.open .header-actions {
    display: grid;
    width: min(100%, 320px);
    gap: 12px;
  }

  .site-header.open .header-actions a {
    width: 100%;
    min-height: 43px;
  }

  .dark-marquee p {
    white-space: nowrap;
    text-align: left;
    font-size: 23px;
    line-height: 1.2;
  }

  .motion-title::after {
    font-size: .24em;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 148px;
  }

  .portfolio-item:nth-child(1),
  .portfolio-item:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
  }

  .portfolio-item:nth-child(2),
  .portfolio-item:nth-child(5) {
    grid-column: span 2;
  }
}

.site-header {
  --header-x: clamp(18px, 4vw, 54px);
  --header-y: 14px;
  min-height: 77px;
  padding: var(--header-y) var(--header-x);
}

.site-header.open,
.site-header.is-closing {
  --menu-head: 77px;
  grid-template-rows: 48px auto auto;
  padding: var(--header-y) var(--header-x) 32px;
  transition: clip-path .56s cubic-bezier(.76,0,.24,1), box-shadow .28s ease, opacity .28s ease;
  will-change: clip-path;
}

.site-header.open .brand,
.site-header.is-closing .brand,
.site-header.open .nav-toggle,
.site-header.is-closing .nav-toggle {
  align-self: center;
  grid-row: 1;
}

.site-header.open .brand,
.site-header.is-closing .brand {
  grid-column: 1;
}

.site-header.open .nav-toggle,
.site-header.is-closing .nav-toggle {
  grid-column: 2;
}

.site-header.open .main-nav,
.site-header.is-closing .main-nav {
  padding-top: clamp(30px, 5vw, 58px);
}

@media (max-width: 580px) {
  .site-header {
    --header-x: 18px;
    --header-y: 14px;
    min-height: 71px;
  }

  .site-header.open,
  .site-header.is-closing {
    --menu-head: 71px;
    grid-template-rows: 42px auto auto;
    padding: var(--header-y) var(--header-x) 32px;
  }

  .site-header.open .main-nav,
  .site-header.is-closing .main-nav {
    padding-top: 38px;
  }
}

.footer {
  grid-template-columns: minmax(250px, .9fr) minmax(320px, 1fr);
  align-items: start;
  gap: clamp(36px, 8vw, 120px);
  padding-top: clamp(42px, 5vw, 62px);
  padding-bottom: clamp(42px, 5vw, 62px);
}

.footer > div:first-child {
  max-width: 440px;
}

.footer-logo {
  width: 132px;
  margin-bottom: 14px;
}

.footer p {
  margin: 0;
  color: var(--muted);
  max-width: 36rem;
}

.footer nav {
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 10px 32px;
  justify-self: end;
  width: min(100%, 460px);
}

.footer nav a {
  border-bottom: 1px solid rgba(109,74,35,.18);
  padding-bottom: 8px;
}

.footer nav a:hover {
  color: var(--accent);
}

@media (max-width: 900px) {
  .footer {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer nav {
    justify-self: start;
    width: min(100%, 520px);
  }
}

@media (max-width: 520px) {
  .footer nav {
    grid-template-columns: 1fr;
  }
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(96px, 8vw, 140px);
  grid-auto-flow: dense;
  gap: 16px;
}

.portfolio-item,
.portfolio-item:nth-child(n) {
  grid-column: auto;
  grid-row: span 2;
  min-width: 0;
}

.portfolio-item:nth-child(6n+1),
.portfolio-item:nth-child(6n+4) {
  grid-column: auto;
  grid-row: span 3;
}

.portfolio-item:nth-child(10n+5) {
  grid-column: auto;
  grid-row: span 4;
}

.portfolio-item button {
  height: 100%;
}

.portfolio-item img {
  height: 100%;
  aspect-ratio: auto;
}

@media (max-width: 1180px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 118px;
  }
}

@media (max-width: 520px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 132px;
  }

  .portfolio-item,
  .portfolio-item:nth-child(n) {
    grid-column: auto;
    grid-row: span 2;
  }
}

.service-package {
  background: #fff;
}

.service-package-grid,
.service-example-grid {
  display: grid;
  gap: 18px;
}

.service-package-grid {
  grid-template-columns: minmax(280px, .9fr) repeat(2, minmax(220px, 1fr));
  align-items: stretch;
}

.service-package-copy {
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 34px);
  background: var(--paper);
}

.service-package-copy h3 {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.08;
}

.service-package-copy ul {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding-left: 20px;
}

.service-package figure,
.service-example-grid figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #111;
  color: #fff;
}

.service-package figure img,
.service-example-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-package figure {
  min-height: 430px;
}

.service-package figcaption,
.service-example-grid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px;
  font-weight: 800;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
}

.service-example-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-example-grid figure {
  height: clamp(260px, 24vw, 340px);
  min-height: 0;
}

.step-grid.detailed article {
  display: grid;
  align-content: start;
  gap: 10px;
}

.step-grid.detailed h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.18;
}

.step-grid.detailed p {
  line-height: 1.55;
}

@media (max-width: 980px) {
  .service-package-grid,
  .service-example-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-package-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .service-package-grid,
  .service-example-grid {
    grid-template-columns: 1fr;
  }

  .service-package figure,
  .service-example-grid figure {
    height: 280px;
    min-height: 0;
  }
}

/* Moving copy line below the “Por qué elegirme” heading */
.section-marquee{max-width:none;overflow:hidden;margin:13px 0 0;color:var(--accent);white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.08em;line-height:1.3}.section-marquee span{display:inline-block;min-width:max-content;padding-left:100%;animation:sectionMarqueeRun 24s linear infinite}@keyframes sectionMarqueeRun{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* Keep the dedicated line below this heading as its only moving text. */
.section-head h2.no-motion-title::after{display:none}
/* Oversized opening question mark beside the small section label. */
.section-head .eyebrow.with-lead-question{display:flex;align-items:center;gap:8px}.section-head .eyebrow .lead-question{font-size:clamp(30px,4.8vw,58px);line-height:.72;letter-spacing:0}
/* Match the opening question mark to the main heading. */
.section-head .eyebrow .lead-question{color:var(--ink);font-family:inherit;font-weight:700;line-height:1.08}
/* Keep the divider between the two rows, not the terminal rule before the black marquee. */
@media (min-width:901px){.number-grid article:nth-child(n+4){border-bottom:0}}
/* Client logos: one continuous, horizontal marquee. */
.logo-section .logos.logo-marquee{display:block;overflow:hidden;padding:10px 0;background:transparent}.logo-section .logo-marquee-track{display:flex;width:max-content;gap:14px;animation:logoMarqueeRun 38s linear infinite}.logo-section .logo-marquee-track img{flex:0 0 170px;width:170px;height:78px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:14px}@keyframes logoMarqueeRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media(max-width:580px){.logo-section .logo-marquee-track img{flex-basis:132px;width:132px;height:66px;padding:10px}}
/* Testimonials belong to the Clients section. */
.logo-section .client-testimonials{padding-top:clamp(46px,6vw,78px)}.logo-section .client-testimonials h2{font-size:clamp(26px,3.5vw,42px);line-height:1.08;margin:0 0 28px}.logo-section .client-testimonials h3{font-size:15px;line-height:1.3;margin:0 0 16px;color:var(--ink)}.logo-section .client-testimonials blockquote{display:flex;flex-direction:column}.logo-section .client-testimonials cite{margin-top:auto;padding-top:18px}
/* Testimonials in Clients are editorial copy, not cards. */
.logo-section .client-testimonials .quote-grid blockquote{background:transparent;border:0;padding:0}
/* Breathing room between the client-opinions heading and the testimonials. */
.logo-section .client-testimonials h2{margin-bottom:48px}
/* Final contact panel, aligned with the PDF composition. */
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);align-items:center;gap:clamp(24px,5vw,80px);text-align:left;background:#000;overflow:hidden}.cta .cta-copy{max-width:760px}.cta h2{max-width:700px;margin:0 0 22px;font-size:clamp(36px,5.4vw,68px);font-weight:800}.cta p{max-width:590px;margin:0 0 28px;font-size:clamp(18px,2vw,26px);font-weight:700;line-height:1.35}.cta .button{width:auto;background:#f6ad2e;color:#17120f;border-color:#f6ad2e}.cta-mark{width:min(38vw,500px);justify-self:end;mix-blend-mode:normal}@media(max-width:900px){.cta{grid-template-columns:1fr;text-align:center}.cta .cta-copy{margin:auto}.cta h2,.cta p{margin-left:auto;margin-right:auto}.cta-mark{justify-self:center;width:min(72vw,440px)}}
/* Desktop refinement of the final CTA. */
@media(min-width:901px){.cta .cta-copy{justify-self:center;text-align:center}.cta h2{margin-left:auto;margin-right:auto;text-align:center;font-weight:600}.cta p{margin-left:auto;margin-right:auto;text-align:center}.cta-mark{width:min(47vw,620px)}}
/* Desktop: oversized camera mark sits behind the CTA copy, as in the mockup. */
@media(min-width:901px){.cta{display:block;position:relative;min-height:560px;padding-right:clamp(22px,7vw,90px)}.cta .cta-copy{position:relative;z-index:1;max-width:780px;margin:0 auto}.cta-mark{position:absolute;z-index:0;right:clamp(12px,5vw,90px);bottom:-75px;width:min(62vw,790px);max-width:none;pointer-events:none}}
/* Laptop widths: keep the overlapping CTA instead of switching to the compact stack. */
@media(min-width:601px){.cta{display:block;position:relative;min-height:560px;padding-right:clamp(22px,7vw,90px)}.cta .cta-copy{position:relative;z-index:1;width:min(82vw,780px);max-width:none;margin:0 auto;text-align:center}.cta h2{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;font-weight:600}.cta p{margin-left:auto;margin-right:auto;text-align:center}.cta-mark{position:absolute;z-index:0;right:clamp(-190px,-10vw,-55px);bottom:-115px;width:min(95vw,1080px);max-width:none;pointer-events:none}}
/* Give the CTA copy more span at laptop widths and keep the mark within frame. */
@media(min-width:601px){.cta .cta-copy{width:min(94vw,900px)}.cta h2{max-width:880px}.cta-mark{right:clamp(-40px,-2vw,0px)}}
/* Mobile CTA: use the transparent camera mark as a background accent, not a second row. */
@media(max-width:600px){.cta{display:block;position:relative;min-height:510px;padding:68px 22px;overflow:hidden;text-align:center}.cta .cta-copy{position:relative;z-index:1;width:auto;max-width:430px;margin:auto;text-align:center}.cta h2{font-size:clamp(34px,10vw,48px);text-align:center}.cta p{text-align:center}.cta-mark{position:absolute;z-index:0;width:132vw;max-width:none;right:-55vw;bottom:-145px;pointer-events:none}}
/* Closing editorial text, centered and scaled like the PDF. */
.seo-text{text-align:center}.seo-text h2{max-width:1100px;margin:0 auto 26px;font-size:clamp(30px,3.7vw,48px);line-height:1.14}.seo-text p{max-width:1280px;margin:0 auto 30px;font-size:clamp(21px,2.25vw,32px);font-weight:600;line-height:1.28}.seo-text p:last-child{margin-bottom:0}

/* Legal pages: clear, readable documents without changing the visual system. */
.legal-copy{max-width:960px;margin:0 auto;padding:clamp(58px,8vw,100px) clamp(22px,6vw,82px)}.legal-copy h2{margin:48px 0 14px;font-size:clamp(24px,3vw,36px);line-height:1.15}.legal-copy h2:first-child{margin-top:0}.legal-copy p,.legal-copy li{font-size:18px;line-height:1.6}.legal-copy a{color:var(--accent)}.legal-copy ul{padding-left:22px}.legal-copy .notice{padding:18px 20px;background:#fff3dc;border-left:4px solid var(--accent)}

/* Desktop full-screen menu: navigation left, camera mark and contact details right. */
.menu-desktop-aside{display:none}
@media (min-width:901px){
  .site-header.open,.site-header.is-closing{grid-template-columns:minmax(360px,1.05fr) minmax(400px,.95fr);grid-template-rows:48px minmax(0,1fr);column-gap:clamp(44px,8vw,150px);align-content:stretch}
  .site-header.open .main-nav,.site-header.is-closing .main-nav{grid-column:1;grid-row:2;align-self:center;justify-self:start;padding:0}
  .site-header.open .main-nav a,.site-header.is-closing .main-nav a{font-size:clamp(38px,5vw,74px);line-height:1.02}
  .site-header.open .header-actions,.site-header.is-closing .header-actions{display:none}
  .site-header.open .menu-desktop-aside,.site-header.is-closing .menu-desktop-aside{display:grid;grid-column:2;grid-row:2;grid-template-columns:minmax(190px,.95fr) minmax(260px,1.05fr);align-items:center;gap:clamp(22px,4vw,70px);min-width:0;align-self:center}
  .menu-desktop-mark{width:min(31vw,500px);max-width:none;opacity:.95;pointer-events:none}
  .menu-desktop-details{display:grid;gap:20px;align-content:center;min-width:0}
  .menu-desktop-details>a{display:flex;align-items:center;gap:14px;color:var(--ink);font-size:clamp(18px,2.25vw,34px);font-weight:500;text-decoration:none;letter-spacing:.01em;white-space:nowrap}
  .menu-desktop-details svg{width:31px;height:31px;flex:0 0 31px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .menu-desktop-socials{display:flex;gap:22px;align-items:center;margin-top:10px;font-size:34px;color:#22334b}.menu-desktop-socials span{line-height:1}.menu-desktop-socials .social-linkedin{font-family:Arial,sans-serif;font-size:31px;font-weight:700}
}

/* Fine positioning for the wide desktop overlay. */
@media (min-width:901px){
  .site-header.open .nav-toggle,.site-header.is-closing .nav-toggle{grid-column:1 / -1;grid-row:1;justify-self:end}
  .site-header.open .main-nav,.site-header.is-closing .main-nav{padding-left:clamp(34px,5vw,110px)}
  .site-header.open .menu-desktop-aside,.site-header.is-closing .menu-desktop-aside{transform:translateX(clamp(-100px,-5vw,-42px));grid-template-columns:minmax(250px,1.12fr) minmax(260px,.88fr)}
  .menu-desktop-mark{width:min(43vw,680px)}
}

/* Give the camera mark the visual weight of the supplied mockup. */
@media (min-width:901px){
  .menu-desktop-mark{width:min(54vw,840px);margin-left:clamp(-100px,-6vw,-44px)}
  .menu-desktop-details{transform:translateX(clamp(16px,2.4vw,52px))}
}

/* Further scale the mark and pull the contact column toward the centre. */
@media (min-width:901px){
  .menu-desktop-mark{width:min(64vw,980px);margin-left:clamp(-170px,-10vw,-75px)}
  .menu-desktop-details{transform:translateX(clamp(-70px,-4vw,-30px))}
}

/* Keep the desktop overlay inside shorter laptop viewports. */
@media (min-width:901px){
  .site-header.open,.site-header.is-closing{overflow:hidden}
  .menu-desktop-mark{max-height:72vh;object-fit:contain}
  .menu-desktop-details .menu-brand-icon{width:31px;height:31px;flex:0 0 31px;object-fit:contain}
  .menu-desktop-socials .menu-brand-icon{width:31px;height:31px;display:block;object-fit:contain}
}
@media (min-width:901px) and (max-height:800px){
  .site-header.open,.site-header.is-closing{grid-template-rows:42px minmax(0,1fr);padding-top:10px;padding-bottom:16px}
  .site-header.open .main-nav a,.site-header.is-closing .main-nav a{font-size:clamp(31px,4.2vw,56px);padding:2px 0}
  .site-header.open .menu-desktop-aside,.site-header.is-closing .menu-desktop-aside{align-self:center}
  .menu-desktop-mark{max-height:62vh}
}

/* Larger camera mark, shifted left so its scale does not add vertical overflow. */
@media (min-width:901px){
  .menu-desktop-mark{width:min(74vw,1120px);margin-left:clamp(-250px,-14vw,-115px)}
}
@media (min-width:901px) and (max-height:800px){
  .menu-desktop-mark{max-height:70vh}
}

/* Treat the camera as an oversized backdrop behind the contact details. */
@media (min-width:901px){
  .site-header.open .menu-desktop-aside,.site-header.is-closing .menu-desktop-aside{display:block;position:relative;min-height:clamp(330px,62vh,700px)}
  .menu-desktop-mark{position:absolute;z-index:0;width:min(105vw,1440px);max-width:none;max-height:none;height:auto;left:clamp(-360px,-25vw,-170px);top:50%;margin:0;transform:translateY(-50%);pointer-events:none}
  .menu-desktop-details{position:relative;z-index:1;min-height:inherit;align-content:center}
}

/* Keep the header mark anchored while the desktop overlay opens. */
@media (min-width:901px){
  .site-header.open .brand,.site-header.is-opening .brand,.site-header.is-closing .brand{grid-column:1;grid-row:1;align-self:center;transform:none;transition:none}
  .site-header.is-opening{clip-path:inset(0);transition:opacity .22s ease}
  .menu-desktop-details{transform:translateX(clamp(12px,2.2vw,44px))}
}

/* Fade the desktop overlay out; clipping was making the brand jump on close. */
@media (min-width:901px){
  .site-header.open.is-closing{animation:none;clip-path:inset(0);opacity:0;transition:opacity .24s ease}
  .menu-desktop-details{transform:translateX(clamp(30px,4.5vw,82px))}
}

/* Close by folding into the persistent header, rather than fading it away. */
@media (min-width:901px){
  .site-header.open.is-closing{opacity:1;clip-path:inset(0);animation:menuCloseUp .42s cubic-bezier(.76,0,.24,1) forwards;transition:none}
}

/* Industrial photography: pricing and introduction immediately beneath the hero. */
.industrial-service-intro{padding-top:clamp(62px,7vw,104px)}
.industrial-service-intro .section-head{max-width:1200px;margin-bottom:clamp(44px,6vw,76px)}
.industrial-service-intro .section-head h2{font-size:clamp(36px,4.6vw,62px)}
.industrial-service-intro .section-marquee{margin-top:5px}
.industrial-service-intro .section-head h3{max-width:860px;margin:clamp(38px,5vw,62px) 0 0;font-size:clamp(34px,4.3vw,64px);font-weight:400;line-height:1.04;letter-spacing:-.035em}
.industrial-service-intro .service-detail{align-items:start;gap:clamp(38px,6vw,90px)}
.industrial-service-intro .price-box{border:2px solid #f6ad2e;border-radius:36px;background:#fff;padding:clamp(26px,3.1vw,46px);box-shadow:none}
.industrial-service-intro .price-box .eyebrow{color:#6d4a23}
.industrial-service-intro .price-box h2{font-size:clamp(34px,4vw,58px);margin-bottom:22px}
.industrial-intro-copy h2{max-width:690px;margin:0 0 24px;font-size:clamp(25px,2.6vw,40px);font-weight:500;line-height:1.22}
.industrial-intro-copy p{max-width:760px;margin:0 0 20px}
@media(max-width:900px){.industrial-service-intro .section-head{margin-bottom:42px}.industrial-service-intro .section-head h3{margin-top:42px}.industrial-service-intro .price-box{border-radius:28px}.industrial-intro-copy h2{margin-top:42px}}

/* Bring the industrial coverage card directly after the introduction. */
.industrial-service-package{padding-top:0;padding-bottom:clamp(24px,3vw,40px);background:transparent}
.industrial-service-package .service-package-copy{background:#f6ad2e;border:2px solid #f6ad2e;border-radius:34px;padding:clamp(28px,3.3vw,48px)}
.industrial-service-package .service-package-copy h3{font-size:clamp(28px,3vw,44px);line-height:1.04}
.industrial-service-package .service-package-copy .button{background:#17120f;border-color:#17120f;color:#fff}
@media(max-width:900px){.industrial-service-package{padding-top:0}.industrial-service-package .service-package-copy{border-radius:28px}}

/* The production process follows the orange package as plain editorial steps. */
.industrial-process{padding-top:clamp(18px,2.4vw,34px)}
.industrial-process .step-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.industrial-process .step-grid article{background:transparent;border:0;padding:0}
.industrial-process .step-grid h3{font-size:clamp(19px,1.7vw,26px);line-height:1.16}
.industrial-retouch{padding-bottom:clamp(24px,3vw,40px)}
.industrial-service-examples{padding-top:clamp(18px,2.4vw,34px)}
@media(max-width:980px){.industrial-process .step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.industrial-process .step-grid{grid-template-columns:1fr}}

/* Service-page closing CTA: the simple centred version from the mockup. */
.industrial-final-cta.cta{display:block;position:relative;min-height:0;padding:clamp(76px,8vw,132px) clamp(22px,7vw,90px);text-align:center;overflow:hidden}
.industrial-final-cta .eyebrow{color:#d6b892}
.industrial-final-cta h2{max-width:1080px;margin:0 auto 36px;color:#fff;font-size:clamp(38px,5.3vw,76px);font-weight:700;line-height:1.06}
.industrial-final-cta .button{width:auto;min-height:52px;background:#f6ad2e;color:#17120f;border-color:#f6ad2e}

/* Keep the header brand fixed while the desktop menu changes grid state. */
@media(min-width:901px){
  .site-header .brand,.site-header.open .brand,.site-header.is-opening .brand,.site-header.is-closing .brand{grid-column:1;grid-row:1;align-self:center;justify-self:start;transform:translate3d(0,0,0);transition:none}
  .site-header .brand img,.site-header.open .brand img,.site-header.is-opening .brand img,.site-header.is-closing .brand img{transform:none;transition:none}
}

/* Each service card is one complete link, including its image. */
.service-card{position:relative;cursor:pointer}
.service-card a::after{content:"";position:absolute;inset:0;z-index:2}
.service-card:hover img{transform:scale(1.025)}
.service-card img{transition:transform .3s ease}

/* The overlay must fold back to the exact geometry of the persistent header.
   Keeping the brand in a 64px row avoids the small vertical jump on laptop
   viewports, while the matching 92px clipping height removes the final step. */
@keyframes menuCloseToHeader {
  from { clip-path:inset(0 0 0 0); }
  to { clip-path:inset(0 0 calc(100% - 92px) 0); }
}
@media (min-width:901px){
  .site-header.open,.site-header.is-closing{
    --menu-head:92px;
    grid-template-rows:64px minmax(0,1fr);
    padding-top:14px;
    padding-bottom:14px;
  }
  .site-header.open .brand,.site-header.is-opening .brand,.site-header.is-closing .brand{
    grid-row:1;
    height:64px;
    align-self:start;
  }
  .site-header.open .nav-toggle,.site-header.is-closing .nav-toggle{
    grid-row:1;
    align-self:center;
  }
  .site-header.open.is-closing{
    animation:menuCloseToHeader .48s cubic-bezier(.76,0,.24,1) forwards;
    opacity:1;
    transition:none;
  }
}