*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--surface);color:var(--ink);font:400 16px/26px var(--font-sans)}
h1,h2,h3{margin:0}
h2{font:600 28px/36px var(--font-sans)}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);color:var(--ink);padding:var(--space-2) var(--space-4);z-index:20}
.skip:focus{left:8px;outline:3px solid var(--focus)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px}
.site-header{position:sticky;top:0;z-index:10}
.site-header nav{margin-left:auto}
.menu-btn{display:none;font:600 12px/16px var(--font-sans);letter-spacing:.2em;text-transform:uppercase;background:none;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--ink);min-height:44px;padding:0 var(--space-4);cursor:pointer}
.menu-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.stack{display:grid;gap:var(--space-4);align-content:start}
.row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.wrap{max-width:1080px;margin:0 auto}
.band{padding:var(--space-16) var(--space-8)}
.band--raised{background:var(--surface-raised)}
.band .wrap>h2{margin-bottom:var(--space-8)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-16);align-items:start}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6)}
.steps li{display:flex;gap:var(--space-4)}
.steps h3{font:600 20px/28px var(--font-sans)}
.steps p{margin:var(--space-1) 0 0;color:var(--ink-muted);max-width:60ch}
.step-n{flex:none;width:36px;height:36px;border-radius:var(--radius-full);background:var(--field);color:var(--on-field);display:grid;place-items:center;font:600 14px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.lead-dark{font:400 18px/28px var(--font-sans);margin:0;max-width:46ch}
.muted{color:var(--ink-muted);margin:var(--space-4) 0 0}
.quote-form{display:grid;gap:var(--space-6);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-6)}
select.gl-input{appearance:auto}
.form-status{margin:0;min-height:26px;font-weight:500}
.form-status.success{color:var(--success)}
.form-status.error{color:var(--danger)}
.gl-hero .row{margin-top:var(--space-4)}
.site-footer{background:var(--field);color:var(--on-field);padding:var(--space-8)}
.footer-row{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.footer-row .gl-mark{width:48px;height:48px}
.footer-row>div{flex:1 1 240px}
.footer-small{margin:var(--space-2) 0 0;font:400 14px/22px var(--font-sans);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.badge-dark{background:transparent;color:var(--on-field);border-color:var(--brand-steel)}
.badge-dark::before{background:var(--brand-ember-bright)}
@media (max-width:900px){.gl-header nav{gap:var(--space-4)}.two-col{gap:var(--space-8)}}
@media (max-width:760px){
  .grid-3,.two-col{grid-template-columns:1fr}
  .band{padding:var(--space-12) var(--space-4)}
  .menu-btn{display:inline-flex;align-items:center;margin-left:auto}
  .site-header{gap:var(--space-3);padding:var(--space-3) var(--space-4)}
  .site-header nav{display:none;order:5;width:100%;flex-direction:column;gap:var(--space-2);margin:0}
  .site-header nav.is-open{display:flex}
  .site-header .gl-lang{order:6}
  .site-header>.gl-btn{display:none}
  .gl-header__brand{font-size:16px;letter-spacing:.2em}
  .gl-mark{width:40px;height:40px}
  .gl-mark.gl-hero__mark{width:100%;height:auto}
  .gl-hero .gl-btn{flex:1 1 100%}
  .site-footer{padding:var(--space-8) var(--space-4)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.gl-hero{padding:0;align-items:stretch;gap:0}
.gl-hero .stack{padding:var(--space-16) var(--space-8)}
.hero-wrap{min-height:360px}
.hero-photo{display:block;width:100%;height:100%;min-height:360px;object-fit:cover}
.gl-card{padding:0;overflow:hidden;gap:0}
.gl-card__photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--border-subtle)}
.gl-card h3{padding:var(--space-6) var(--space-6) 0}
.gl-card p{padding:var(--space-3) var(--space-6) 0}
.gl-card .gl-link{padding:var(--space-3) var(--space-6) var(--space-6)}
@media (max-width:760px){
  .gl-hero{grid-template-columns:1fr}
  .gl-hero .stack{padding:var(--space-12) var(--space-4)}
  .hero-wrap{min-height:0}
  .hero-photo{min-height:0;aspect-ratio:3/2;height:auto}
}

/* Motion: 150-250 ms fades only (design system), no parallax. Content stays visible without JS or with reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(12px);transition:opacity .25s ease-out,transform .25s ease-out}
  .js .reveal.is-visible{opacity:1;transform:none}
  .js .grid-3 .reveal:nth-child(2){transition-delay:.06s}
  .js .grid-3 .reveal:nth-child(3){transition-delay:.12s}
  .js .steps .reveal:nth-child(2){transition-delay:.05s}
  .js .steps .reveal:nth-child(3){transition-delay:.1s}
  .js .steps .reveal:nth-child(4){transition-delay:.15s}
  .hero-photo{animation:hero-settle .6s ease-out both}
  @keyframes hero-settle{from{transform:scale(1.03)}to{transform:none}}
  .hero-wrap{overflow:hidden}
}

/* Header lockup: wordmark with the BARCELONA descriptor, as on the owners' contact card. */
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-desc{font:500 10px/12px var(--font-sans);letter-spacing:.32em;color:var(--copper);margin-right:-.32em}
@media (max-width:760px){.brand-desc{font-size:9px;line-height:11px}}

/* Hero outline button: the design system's light-grey hover would hide its white text on the black field. */
.gl-hero .gl-btn--secondary:hover{background:rgba(246,246,247,.14);color:var(--on-field)}