.hero{grid-template-columns:minmax(0,1fr)}
.hero-copy{min-width:0;max-width:100%}
.hero-logo{height:auto;object-fit:contain}
.hero-logo-mobile{display:none}
#hydro-canvas{filter:none;background:linear-gradient(120deg,rgba(0,7,19,.48),rgba(0,9,25,.22)),var(--water-fallback,url('/media/casa-2-lotes-pedregal-de-san-angel/01_p11_3226x1815_xref222.jpg')) center/cover}
.atmosphere{opacity:.12;background:linear-gradient(180deg,rgba(0,3,10,.1),rgba(0,3,10,.38))}
.atmosphere:after{display:none}
.hero:before{background:linear-gradient(90deg,rgba(0,4,14,.42),rgba(0,4,14,.08) 65%),linear-gradient(0deg,rgba(0,4,14,.78),transparent 34%)}
.hero-aura{display:none}
.hero-copy{position:relative;text-shadow:0 2px 18px rgba(0,0,0,.75)}
.hero-logo{filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.3))!important}
.manifest,.projects,.services,.studio,.contact,.footer{background:rgba(1,6,16,.88)}
.site-header.is-scrolled{background:rgba(0,3,11,.9)}
.nav-brand img,.hero-logo,.liquid-sculpture img,.technology-orb img,.studio-mark img,.footer-logo{filter:brightness(0) invert(1) contrast(2)!important;opacity:1!important}
.liquid-sculpture{display:none}
.technology{background:linear-gradient(130deg,rgba(2,12,28,.92),rgba(0,4,13,.88))}
.glass-stat{background:linear-gradient(145deg,rgba(7,28,53,.66),rgba(0,5,16,.7))}
@media(max-width:820px){
  .site-header{width:100%;max-width:100vw}
  .menu-toggle{display:grid;flex:0 0 64px;margin-left:auto}
  .hero-copy,.hero-lower{width:100%;max-width:100%;min-width:0}
  .hero-logo{width:100%;max-width:100%}
  .hero-logo-desktop{display:none}
  .hero-logo-mobile{display:block}
  .contact-heading h2{font-size:clamp(50px,14vw,76px);overflow-wrap:anywhere}
}

.skip-link,.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{z-index:100;width:auto;height:auto;clip:auto;top:18px;left:18px;padding:14px 18px;background:#061a38;color:#fff;border:1px solid #82cfff}
.project-filters{display:flex;flex-wrap:wrap;gap:10px;margin:-34px 0 46px;padding-left:calc(.5fr + 5vw)}
.project-filters button{padding:11px 14px;border:1px solid var(--line);color:#a9c5d8;background:transparent;cursor:pointer;font:400 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:.25s ease}
.project-filters button:hover,.project-filters button.is-active{border-color:#7bd2ff;color:#fff;background:rgba(28,103,168,.28)}
.project-card[hidden]{display:none}
.technology{border-color:rgba(161,216,255,.26);background:linear-gradient(130deg,rgba(8,44,91,.9),rgba(2,11,29,.72));box-shadow:0 40px 110px rgba(0,9,31,.32)}
.technology:before{border-color:rgba(103,199,255,.28);box-shadow:0 0 130px rgba(26,129,213,.22),inset 0 0 100px rgba(36,143,224,.11)}
.sea-kicker{margin:25px 0 -24px!important;color:#87d7ff!important;font:400 clamp(13px,1.4vw,20px)/1 var(--mono)!important;letter-spacing:.12em!important}
.technology-copy>p{color:#c5dceb}
.immersive-link{width:min(100%,500px);padding:23px 24px;border-color:rgba(135,215,255,.55);background:linear-gradient(110deg,rgba(31,116,190,.40),rgba(6,29,66,.32));transition:border-color .3s ease,background .3s ease,transform .3s ease}
.immersive-link i{color:#b4e8ff;font-size:24px}.immersive-link small{line-height:1.4;color:#b3d7ea}.immersive-link:hover{border-color:#fff;background:rgba(44,139,211,.35);transform:translateY(-2px)}
.footer-meta a,.studio-facts a{color:#a9dfff}
@media(max-width:820px){.project-filters{padding-left:0;margin:-32px 0 40px}.project-filters button{padding:10px 11px}.sea-kicker{margin:16px 0 -24px!important}.technology{background:linear-gradient(130deg,rgba(4,26,59,.96),rgba(0,5,16,.94))}}

/* SÉPTIMA wine palette — anchored to RGB 181, 59, 80. */
:root{--night:#120306;--deep:#24070d;--navy:#3c0c17;--electric:#d96a7d;--white:#fff8fa;--muted:#d5aeb7;--line:rgba(238,164,178,.22)}
html,body{background:#120306}.site-header.is-scrolled{background:rgba(20,3,7,.92);border-color:rgba(231,156,172,.17)}
#hydro-canvas{background:linear-gradient(120deg,rgba(25,2,8,.63),rgba(68,10,24,.34)),var(--water-fallback,url('/media/restaurante-cantones-zao/02_p08_2992x1815_xref190.jpg')) center/cover}
.atmosphere{background:radial-gradient(ellipse at 52% -12%,rgba(181,59,80,.18),transparent 43%),linear-gradient(180deg,rgba(20,2,7,.07),rgba(16,2,6,.46));opacity:.25}
.hero:before{background:linear-gradient(90deg,rgba(20,3,7,.62),rgba(38,5,13,.15) 65%),linear-gradient(0deg,rgba(14,2,6,.86),transparent 36%)}
.eyebrow span,.site-menu a:not(.nav-contact):after{background:#df7185;box-shadow:0 0 10px rgba(226,109,132,.65)}
.nav-contact,.primary-cta{border-color:rgba(245,184,197,.42);background:linear-gradient(120deg,rgba(181,59,80,.34),rgba(61,8,21,.28))}
.primary-cta i,.nav-contact span,.text-link i{color:#f38da1}.primary-cta:hover,.primary-cta:focus-visible{border-color:#ffe3e9;background:rgba(181,59,80,.36)}
.brand-mark{display:block;width:31px;height:31px;background:linear-gradient(135deg,#fff 0%,#ffe1e7 25%,#e96d83 62%,#b53b50 100%);-webkit-mask:url('/brand/logo-3.png') center/contain no-repeat;mask:url('/brand/logo-3.png') center/contain no-repeat}
.hero-logo{--metal-light-x:50%;--metal-light-y:45%;--metal-sheen:20deg;display:block;position:relative;isolation:isolate;background:radial-gradient(ellipse 14% 150% at var(--metal-light-x) var(--metal-light-y),rgba(255,255,255,.98) 0 3%,rgba(255,238,242,.83) 12%,rgba(255,184,198,.32) 25%,transparent 48%),radial-gradient(ellipse 42% 115% at var(--metal-light-x) var(--metal-light-y),rgba(255,168,188,.38),transparent 64%),linear-gradient(var(--metal-sheen),#fff 0%,#fffafb 13%,#f8c4cf 28%,#c94c67 47%,#7e182d 64%,#e37187 79%,#fff4f6 100%);filter:drop-shadow(0 3px 18px rgba(0,0,0,.42))!important;background-repeat:no-repeat;background-size:100% 100%;background-blend-mode:screen,screen,normal;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;will-change:background}
.hero-logo-desktop{display:block;aspect-ratio:5040/2835;-webkit-mask-image:url('/brand/logo-1.png');mask-image:url('/brand/logo-1.png')}.hero-logo-mobile{display:none;aspect-ratio:5040/1355;-webkit-mask-image:url('/brand/logo-2.png');mask-image:url('/brand/logo-2.png')}
.footer-logo{display:block;aspect-ratio:5040/1355;background:linear-gradient(100deg,#fff 0%,#ffdbe2 35%,#d96178 72%,#b53b50 100%);filter:none!important;-webkit-mask:url('/brand/logo-2.png') center/contain no-repeat;mask:url('/brand/logo-2.png') center/contain no-repeat}
.footer-meta a,.studio-facts a{color:#f29aae}.section-heading h2 em,.technology h2 em,.contact h2 em{color:#e7788c}.section-label span,.service-row>span,.technology-list span,.project-meta span{color:#df7185}
.manifest,.projects,.services,.studio,.contact,.footer{background:rgba(20,3,7,.92)}.glass-stat{border-color:rgba(231,155,172,.26);background:linear-gradient(145deg,rgba(104,19,39,.55),rgba(30,3,10,.72))}
.project-shade{background:radial-gradient(circle 340px at var(--mx) var(--my),rgba(201,71,97,.16),transparent 70%),linear-gradient(0deg,rgba(22,3,8,.96),rgba(22,3,8,.08) 70%)}.project-card{background:#2a0710;border-color:rgba(231,155,172,.18)}
.project-filters button:hover,.project-filters button.is-active{border-color:#ef9eae;background:rgba(181,59,80,.36)}
.technology{border-color:rgba(237,157,176,.31);background:linear-gradient(130deg,rgba(95,15,35,.92),rgba(27,3,10,.86));box-shadow:0 40px 110px rgba(31,1,9,.44)}.technology:before{border-color:rgba(239,155,175,.35);box-shadow:0 0 130px rgba(181,59,80,.24),inset 0 0 100px rgba(206,81,107,.14)}.sea-kicker{color:#f08ca0!important}.immersive-link{border-color:rgba(249,177,192,.55);background:linear-gradient(110deg,rgba(181,59,80,.48),rgba(59,5,18,.42))}.immersive-link i{color:#ffd9e1}.immersive-link small{color:#f2b8c5}.immersive-link:hover{background:rgba(181,59,80,.5)}
.featured-overlay,.project-hero-shade{background:linear-gradient(90deg,rgba(24,3,8,.80),rgba(32,4,12,.10) 65%),linear-gradient(0deg,rgba(18,2,7,.92),transparent 65%)}
.hero-lower>p,.supporting,.technology-copy>p,.studio-copy>p,.contact-direct p,.section-heading>p{color:#d7b7bf}
/* Tighter editorial rhythm. */
.hero-lower>p{line-height:1.45}.superline{line-height:.93}.supporting{line-height:1.5;margin-top:34px}.featured-content>div p{line-height:1.45}.section-heading>p{line-height:1.48}.technology-copy>p{line-height:1.55}.service-row p{line-height:1.42}.studio-copy>p{line-height:1.55}.contact-direct p{line-height:1.5}.project-description>p{line-height:1.0}.project-meta p{line-height:1.42}.contact-form{gap:26px 28px}
@media(max-width:820px){.brand-mark{width:28px;height:28px}.hero-logo{filter:none!important}.hero-logo-desktop{display:none}.hero-logo-mobile{display:block}.hero-lower>p{line-height:1.48}.supporting{line-height:1.5}.technology{background:linear-gradient(130deg,rgba(70,9,25,.97),rgba(17,2,7,.96))}
  /* A long portfolio must never depend on intersection animation to be visible on touch devices. */
  .projects .reveal{opacity:1;transform:none;transition:none}
}

/* Original thin SÉPTIMA lockup, including its own lettering. */
.nav-brand .brand-wordmark{display:block;width:202px;height:54px;background:linear-gradient(110deg,#fff8fa,#ffdce5 58%,#d57488);-webkit-mask:url('/brand/logo-2.png') center/contain no-repeat;mask:url('/brand/logo-2.png') center/contain no-repeat}
.hero-logo{--metal-light-x:50%;--metal-light-y:42%;--metal-angle:75deg;background:radial-gradient(ellipse 12% 150% at var(--metal-light-x) var(--metal-light-y),rgba(255,255,255,.98) 0 3%,rgba(255,246,248,.82) 12%,rgba(255,180,197,.30) 26%,transparent 50%),linear-gradient(var(--metal-angle),#fff 0%,#fff8fa 12%,#f4a4b5 29%,#b53b50 51%,#742033 67%,#d95d76 83%,#fff5f7 100%);background-blend-mode:screen,normal;filter:drop-shadow(0 2px 10px rgba(0,0,0,.42))!important;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;will-change:background}
.hero-logo-desktop{aspect-ratio:5040/1355!important;-webkit-mask-image:url('/brand/logo-2.png');mask-image:url('/brand/logo-2.png')}
.hero-logo-mobile{-webkit-mask-image:url('/brand/logo-2.png');mask-image:url('/brand/logo-2.png')}
.focus-credit{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}.focus-credit img{width:min(100%,190px);height:auto;object-fit:contain}
.technology#sea{overflow:hidden;border-color:rgba(211,169,76,.38);background:radial-gradient(ellipse at 88% 10%,rgba(182,139,47,.16),transparent 30%),radial-gradient(ellipse at 14% 90%,rgba(37,49,14,.30),transparent 43%),linear-gradient(135deg,#050704 0%,#0b1106 48%,#030502 100%);box-shadow:inset 0 1px rgba(255,232,166,.12),0 42px 115px rgba(0,0,0,.64)}
.technology#sea:before{width:76%;right:-25%;top:-38%;border-color:rgba(224,187,94,.48);box-shadow:0 0 130px rgba(202,163,67,.28),inset 0 0 100px rgba(238,202,111,.11)}
.technology#sea .section-label,.technology#sea .technology-copy>p{color:#e7dfbf}.technology#sea .section-label span,.technology#sea .sea-kicker,.technology#sea .technology-list span{color:#e9bc5c}.technology#sea h2 em{color:#efc86d}.technology#sea .technology-list{border-color:rgba(226,190,100,.34)}.technology#sea .technology-list li{border-color:rgba(226,190,100,.24)}
.sea-orb{position:absolute;z-index:0;right:-13%;bottom:-30%;width:min(53vw,680px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 42% 34%,rgba(255,239,191,.14),rgba(180,137,39,.10) 39%,rgba(10,14,4,.02) 70%);filter:drop-shadow(0 0 52px rgba(236,195,90,.16));pointer-events:none}.sea-orb img{width:100%;height:100%;object-fit:contain;opacity:.97;filter:contrast(1.15) saturate(1.2) drop-shadow(0 15px 26px rgba(0,0,0,.32))}
.technology#sea .immersive-link{border-color:rgba(240,204,112,.68);background:linear-gradient(110deg,rgba(186,147,50,.47),rgba(15,20,7,.65))}.technology#sea .immersive-link:hover{border-color:#fff1c5;background:rgba(197,158,61,.56)}.technology#sea .immersive-link i{color:#ffdf88}.technology#sea .immersive-link small{color:#ead49b}
@media(max-width:820px){
  .nav-brand .brand-wordmark{display:block;width:174px;height:47px}
  .hero{align-items:start;padding-top:calc(104px + env(safe-area-inset-top));padding-bottom:84px}
  .hero-logo-mobile{margin-top:22px}
  .hero-lower{margin-top:24px;gap:24px}
  /* Keep the water scene locked to the cover. Content sections then scroll as
     one stable layer, avoiding lateral parallax against opaque cards. */
  .home-page #hydro-canvas{position:absolute;height:100svh;min-height:680px;inset:0 0 auto;width:100%;transform:translateZ(0)}
  .home-page .atmosphere{position:absolute;height:100svh;min-height:680px;inset:0 0 auto}
  .home-page .projects,.home-page .manifest,.home-page .services,.home-page .studio,.home-page .contact{position:relative;isolation:isolate}
  #proyectos .project-card:not([hidden]){display:block!important;opacity:1!important;transform:none!important;visibility:visible!important}
  .hero-logo{background-size:100% 100%;filter:drop-shadow(0 2px 8px rgba(0,0,0,.38))!important}
  .technology#sea{padding:62px 24px 265px}.sea-orb{right:-38%;bottom:-14%;width:430px}
}

/* Service arrows now open their related scope instead of suggesting dead links. */
.service-row{min-height:0;display:block}.service-row summary{display:grid;grid-template-columns:80px 1.2fr 1fr 30px;gap:3vw;align-items:center;min-height:118px;list-style:none;cursor:pointer}.service-row summary::-webkit-details-marker{display:none}.service-row summary>span{font:300 9px/1 var(--mono);color:#df7185}.service-row summary h3{margin:0;font-size:clamp(21px,2.2vw,34px);font-weight:400;letter-spacing:-.035em}.service-row summary p{margin:0;max-width:470px;color:#cfaeb6;font-size:13px;line-height:1.42}.service-row summary i{font-style:normal;color:#f38da1;font-size:18px;transition:transform .3s ease}.service-row[open] summary i{transform:rotate(45deg);color:#fff}.service-detail{display:grid;grid-template-columns:80px minmax(0,1.2fr) minmax(0,1fr) 30px;gap:3vw;padding:0 0 30px}.service-detail p{grid-column:2/4;max-width:670px;margin:0;color:#e2c9cf;font-size:15px;line-height:1.55}.service-detail a{grid-column:2;display:inline-flex;align-items:center;gap:20px;margin-top:10px;width:max-content;padding-bottom:8px;border-bottom:1px solid rgba(244,183,198,.55);font:400 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}.service-detail a i{font-style:normal;color:#f38da1;font-size:15px}.service-row[open]{background:linear-gradient(90deg,rgba(181,59,80,.16),transparent 72%)}
@media(max-width:820px){.service-row summary{grid-template-columns:36px 1fr 24px;gap:14px;padding-block:24px;min-height:0}.service-row summary p{grid-column:2;font-size:12px}.service-row summary i{grid-column:3;grid-row:1}.service-detail{grid-template-columns:36px 1fr 24px;gap:14px;padding:0 0 25px}.service-detail p,.service-detail a{grid-column:2}.service-detail p{font-size:14px}}

/* Preview images must be available immediately on mobile; some mobile WebViews
   defer lazy images inside the long portfolio grid indefinitely. */
@media(max-width:820px){
  #proyectos .project-card{display:block!important;min-height:54svh!important;aspect-ratio:4/5!important;background:#21060d!important}
  #proyectos .project-media,#proyectos .project-media img{display:block!important;opacity:1!important;visibility:visible!important}
  #proyectos .project-media img{width:100%!important;height:100%!important;object-fit:cover!important}
  .featured-content h2{max-width:100%;font-size:clamp(56px,16.5vw,66px)!important;line-height:.8!important;letter-spacing:-.075em!important;overflow-wrap:anywhere}
}

/* SÉPTIMA's sculptural mark anchors the hero with the same rounded-glass
   language as the immersive interface, translated to the wine palette. */
.liquid-sculpture{border-color:rgba(247,186,201,.30)!important;background:radial-gradient(circle at 34% 28%,rgba(255,245,248,.30),transparent 11%),linear-gradient(145deg,rgba(181,59,80,.36),rgba(28,2,9,.54))!important;box-shadow:inset 22px 18px 55px rgba(255,182,200,.16),inset -32px -28px 58px rgba(21,0,5,.66),0 50px 120px rgba(24,0,7,.58),8px 1px 0 rgba(244,53,115,.20),-7px 0 0 rgba(255,205,218,.12)!important}
.liquid-sculpture img{width:60%!important;height:60%!important;object-fit:contain;mix-blend-mode:normal;filter:contrast(1.1) saturate(1.18)!important;opacity:.96!important}.liquid-sculpture>span{color:#ffe2e9!important}.liquid-glow{background:#f06b88!important;opacity:.18!important}.liquid-edge{box-shadow:inset 2px 2px 2px rgba(211,87,116,.34),inset -2px -2px 3px rgba(20,0,6,.72)!important}
.hero-copy{z-index:1}.liquid-sculpture{display:grid!important;z-index:0!important;pointer-events:none}
@media(max-width:820px){.liquid-sculpture{display:grid;z-index:0;top:35%;right:-42vw;width:68vw;opacity:.28}.liquid-sculpture>span{display:none}.liquid-sculpture img{width:76%!important}}
@media(max-width:820px){.liquid-sculpture{display:none!important}}