/* ==========================================================================
   ARQUELORA V5.5 — ARCHITECTURAL EXPERIENCE LAYER
   Motion, depth, typography, interaction and mobile coherence.
   No framework / no runtime dependency.
   ========================================================================== */

:root{
  --arq-black:#0b0b0a;
  --arq-ink:#13120f;
  --arq-paper:#f6f1e8;
  --arq-paper-hi:#fffaf2;
  --arq-gold:#caa05a;
  --arq-gold-deep:#8e672f;
  --arq-line:rgba(20,18,14,.14);
  --arq-ease:cubic-bezier(.22,.76,.18,1);
  --arq-ease-hard:cubic-bezier(.76,0,.24,1);
  --arq-shadow:0 28px 90px rgba(10,8,5,.15);
  --arq-mx:0px;
  --arq-my:0px;
}

@view-transition{navigation:auto}
::view-transition-old(root){animation:arq-vt-old .34s var(--arq-ease-hard) both}
::view-transition-new(root){animation:arq-vt-new .55s var(--arq-ease) both}
@keyframes arq-vt-old{to{opacity:.25;filter:blur(7px);transform:scale(.992)}}
@keyframes arq-vt-new{from{opacity:0;filter:blur(7px);transform:scale(1.008)}}

/* Fine material texture — deliberately subtle. */
html{background:var(--arq-black)}
body{position:relative;overflow-x:clip}
body:after{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.028;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.50'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
::selection{background:var(--arq-gold);color:#111}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--arq-gold)!important;outline-offset:4px}

/* Universal scroll progress for pages that did not previously have one. */
.arq-global-progress{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:9995;pointer-events:none;background:transparent
}
.arq-global-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#876126,#e2bd78);box-shadow:0 0 18px rgba(214,170,96,.4)}

/* A more architectural header on legacy/internal pages. */
.site-header:not(.home-header):not(.v5-header){
  background:rgba(247,243,235,.88);
  -webkit-backdrop-filter:blur(22px) saturate(115%);
  backdrop-filter:blur(22px) saturate(115%);
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease
}
.site-header:not(.home-header):not(.v5-header).arq-scrolled{
  background:rgba(247,243,235,.96);box-shadow:0 12px 40px rgba(12,10,7,.07);border-color:rgba(20,18,14,.09)
}
.logo-mark{filter:drop-shadow(0 7px 16px rgba(147,99,35,.10))}
.logo-mark svg{transition:transform .55s var(--arq-ease)}
.logo:hover .logo-mark svg{transform:translateY(-2px) scale(1.025)}
.nav__links a{transition:color .22s ease,opacity .22s ease}

/* Buttons gain physical depth without becoming flashy. */
:where(.btn,.editorial-btn,.v5-round-link,.nav-contact,.v53-action){
  position:relative;isolation:isolate;overflow:hidden;
  translate:var(--arq-mx) var(--arq-my);
  transition:translate .22s var(--arq-ease),transform .26s var(--arq-ease),box-shadow .26s ease,color .25s ease,background .25s ease
}
:where(.btn,.editorial-btn,.v5-round-link,.nav-contact):before{
  content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.24) 44%,transparent 68%);
  transform:translateX(-125%);transition:transform .62s var(--arq-ease)
}
:where(.btn,.editorial-btn,.v5-round-link,.nav-contact):hover:before{transform:translateX(125%)}
:where(.btn,.editorial-btn,.v5-round-link,.nav-contact):hover{box-shadow:0 18px 46px rgba(14,11,7,.14)}

/* Stronger reveal language: line/clip rather than generic fade only. */
.arq-js .reveal{
  opacity:0;
  transform:translate3d(0,28px,0);
  filter:blur(4px);
  clip-path:inset(0 0 12% 0);
  transition:
    opacity .78s var(--arq-ease) var(--arq-delay,0ms),
    transform .9s var(--arq-ease) var(--arq-delay,0ms),
    filter .72s ease var(--arq-delay,0ms),
    clip-path .9s var(--arq-ease) var(--arq-delay,0ms)
}
.arq-js .reveal.is-visible{
  opacity:1;transform:none;filter:none;clip-path:inset(0)
}

/* Images behave like material planes. */
.arq-media-depth{
  --arq-parallax-y:0px;
  translate:0 var(--arq-parallax-y);
  will-change:translate;
}
:where(.photo-panel,.service-card,.gallery figure,.specialty-tile,.everyday-card,.v5-project-media,.v53-shot){
  isolation:isolate
}
:where(.photo-panel,.service-card,.gallery figure,.specialty-tile,.everyday-card,.v5-project-media,.v53-shot):after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .9s var(--arq-ease)
}
:where(.photo-panel,.service-card,.gallery figure,.specialty-tile,.everyday-card,.v5-project-media,.v53-shot):hover:after{
  transform:translateX(120%)
}

/* Home: more depth and deliberate type hierarchy. */
.home-v4 .home-hero:after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 72% 42%,rgba(206,167,102,.09),transparent 27%)
}
.home-v4 .home-hero__media{transform:scale(calc(1 + var(--arq-hero-p,0)*.025));transform-origin:center center}
.home-v4 .home-hero__copy{transform:translateY(calc(var(--arq-hero-p,0)*-18px))}
.home-v4 .hero-index,.v5-page .v5-index{font-variant-numeric:tabular-nums}
.home-v4 .editorial-intro{position:relative}
.home-v4 .editorial-intro:before{
  content:"";position:absolute;top:0;left:max(1rem,calc((100vw - min(1420px,calc(100% - 48px)))/2));width:88px;height:1px;background:var(--arq-gold)
}
.specialty-rail{scrollbar-width:none}
.specialty-rail::-webkit-scrollbar{display:none}
.specialty-tile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.specialty-tile__content b{display:inline-flex;align-items:center;gap:.5rem}
.specialty-tile__content b:after{content:"↗";transition:transform .28s var(--arq-ease)}
.specialty-tile:hover .specialty-tile__content b:after{transform:translate(4px,-4px)}
.method-card{position:relative;overflow:hidden}
.method-card:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--arq-gold);transition:width .6s var(--arq-ease)}
.method-card:hover:after{width:100%}

/* Legacy service pages receive a calmer editorial system. */
.service-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(82svh,780px);display:grid;align-items:end;
  background:#111!important
}
.service-hero:before{
  content:"";position:absolute;inset:-4%;z-index:-2;
  background-image:linear-gradient(90deg,rgba(7,7,7,.82),rgba(7,7,7,.36) 55%,rgba(7,7,7,.22)),var(--hero-image);
  background-position:center;background-size:cover;
  transform:scale(1.04);
}
.service-hero:after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(7,7,7,.68),transparent 54%)
}
.service-hero>.container{padding-top:clamp(7rem,15vh,10rem);padding-bottom:clamp(3.5rem,8vh,6rem)}
.service-hero h1{
  max-width:1000px;font-family:inherit!important;font-weight:520;
  font-size:clamp(3.4rem,7.4vw,7.6rem)!important;line-height:.86!important;letter-spacing:-.067em!important;text-wrap:balance
}
.service-hero p{max-width:720px;font-size:clamp(.98rem,1.35vw,1.16rem);color:rgba(255,255,255,.82)}
.service-hero .breadcrumbs{color:rgba(255,255,255,.6)}
.service-hero__chips{display:flex;flex-wrap:wrap;gap:.45rem}
.service-hero__chips span{
  border:1px solid rgba(255,255,255,.28);background:rgba(10,10,9,.30);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)
}
.section{position:relative}
.section__head h2,.section h2{
  text-wrap:balance;letter-spacing:-.045em
}
.feature-tile{
  position:relative;overflow:hidden;transition:transform .35s var(--arq-ease),background .35s ease,border-color .35s ease,box-shadow .35s ease
}
.feature-tile:before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--arq-gold);transition:height .45s var(--arq-ease)
}
.feature-tile:hover{transform:translateY(-5px);box-shadow:var(--arq-shadow);border-color:rgba(180,135,61,.32)}
.feature-tile:hover:before{height:100%}
.faq-item{transition:background .3s ease,transform .3s var(--arq-ease)}
.faq-item:hover{transform:translateX(4px);background:rgba(255,255,255,.58)}
.cta-band{box-shadow:0 24px 70px rgba(126,87,36,.17)}

/* Footer refinement. */
.footer{position:relative;overflow:hidden}
.footer:before{
  content:"ARQUELORA";position:absolute;right:-.02em;bottom:-.28em;
  font-size:clamp(7rem,18vw,20rem);line-height:1;font-weight:800;letter-spacing:-.08em;
  color:rgba(255,255,255,.018);pointer-events:none
}
.footer a{transition:color .2s ease,opacity .2s ease}
.footer a:hover{color:var(--arq-gold)}

/* Mobile navigation — one coherent system on EVERY page. */
@media(max-width:920px){
  body.menu-open{overflow:hidden!important;touch-action:none}
  .site-header{z-index:3000!important}
  .logo,.menu-toggle,.lang{position:relative;z-index:3003!important}
  .menu-toggle{
    display:inline-flex!important;align-items:center;justify-content:center;
    min-width:52px;min-height:52px;border-radius:999px!important;
    background:transparent!important;color:currentColor!important;
    border:1px solid rgba(20,18,14,.22)!important;font-size:0!important
  }
  .menu-toggle:before,.menu-toggle:after{
    content:"";position:absolute;width:19px;height:1.5px;background:currentColor;transition:transform .35s var(--arq-ease),top .35s var(--arq-ease)
  }
  .menu-toggle:before{top:21px}.menu-toggle:after{top:29px}
  body.menu-open .menu-toggle:before{top:25px;transform:rotate(45deg)}
  body.menu-open .menu-toggle:after{top:25px;transform:rotate(-45deg)}

  .nav__links{
    position:fixed!important;inset:0!important;top:0!important;left:0!important;right:0!important;
    width:100vw!important;height:100dvh!important;max-height:100dvh!important;
    margin:0!important;border:0!important;border-radius:0!important;
    padding:clamp(96px,14vh,122px) 24px calc(78px + env(safe-area-inset-bottom))!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;
    overflow-y:auto!important;overscroll-behavior:contain;
    background:
      radial-gradient(circle at 82% 14%,rgba(199,157,85,.13),transparent 24%),
      linear-gradient(180deg,rgba(248,245,239,.995),rgba(240,234,224,.995))!important;
    -webkit-backdrop-filter:blur(34px) saturate(112%)!important;backdrop-filter:blur(34px) saturate(112%)!important;
    box-shadow:none!important;color:#0c0c0a!important;z-index:3001!important;
    transform:translate3d(0,-102%,0)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transition:transform .48s var(--arq-ease-hard),opacity .22s ease,visibility 0s linear .48s!important
  }
  .nav__links.open{
    transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transition:transform .48s var(--arq-ease-hard),opacity .22s ease,visibility 0s!important
  }
  .nav__links a{
    --i:0;
    width:100%!important;min-height:auto!important;margin:0!important;padding:.72rem 0!important;
    border:0!important;border-bottom:1px solid rgba(15,14,11,.13)!important;
    color:#0c0c0a!important;font-size:clamp(1.85rem,8.3vw,3rem)!important;line-height:1!important;font-weight:520!important;
    letter-spacing:-.05em!important;text-transform:none!important;text-shadow:none!important;opacity:1!important;
    transform:translateY(-12px);transition:transform .38s var(--arq-ease),color .2s ease!important
  }
  .nav__links.open a{transform:none;transition-delay:calc(var(--i)*45ms + 90ms)!important}
  .nav__links a:nth-child(1){--i:1}.nav__links a:nth-child(2){--i:2}.nav__links a:nth-child(3){--i:3}
  .nav__links a:nth-child(4){--i:4}.nav__links a:nth-child(5){--i:5}.nav__links a:nth-child(6){--i:6}
  .nav__links a:before{
    content:"0" counter(arqnav);counter-increment:arqnav;
    display:inline-block;width:30px;margin-right:.55rem;font-size:.55rem;letter-spacing:.12em;color:#9a7540;vertical-align:middle
  }
  .nav__links{counter-reset:arqnav}
  .nav__links a:after{display:none!important}
  .nav__links .nav-contact{margin-top:1rem!important;color:#8b672f!important}
  body.menu-open .site-header{
    background:rgba(248,245,239,.995)!important;color:#0b0b0a!important;
    -webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;
    border-bottom-color:rgba(20,18,14,.08)!important
  }
  body.menu-open :where(.mobile-contact-dock,.sticky-mobile-cta,.floating-whatsapp){
    opacity:0!important;pointer-events:none!important;transform:translateY(120%)!important
  }

  /* Mobile headers stay compact, with more breathing room for content. */
  .nav{min-height:78px!important}
  .logo-mark,.logo-mark svg{width:36px!important;height:36px!important}
  .logo small{letter-spacing:.28em!important}
  .service-hero{min-height:78svh}
  .service-hero>.container{padding-top:7rem;padding-bottom:3.2rem}
  .service-hero h1{font-size:clamp(3.05rem,13.5vw,5rem)!important;line-height:.86!important}
  .service-hero p{font-size:.94rem;line-height:1.52}
}

@media(max-width:700px){
  body:after{opacity:.018}
  .home-v4 .home-hero h1,.v5-page .v5-hero h1{hyphens:none;overflow-wrap:normal}
  .home-v4 .home-hero__copy{transform:none}
  .home-v4 .home-hero__media{transform:none}
  .section__head{gap:1.2rem}
  .section__head h2,.section h2{letter-spacing:-.04em}
  .photo-panel{border-radius:16px}
  .feature-tile:hover,.faq-item:hover{transform:none}
  .footer:before{font-size:38vw;bottom:-.12em}
}

/* Coarse pointers: no hover choreography that can feel sticky. */
@media(pointer:coarse){
  :where(.btn,.editorial-btn,.v5-round-link,.nav-contact,.v53-action){translate:0 0!important}
  .arq-media-depth{translate:0 0!important}
}

/* Accessibility / battery / motion preference. */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .arq-js .reveal{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .arq-media-depth{translate:0 0!important}
}