/* ================================================================
   JTL PROPERTY SOLUTIONS — V3 STYLESHEET
   Shared by index.html and privacy.html.

   FONT CHOICE (kept from V2, reviewed for V3):
   Space Grotesk (display/headlines) + Inter (body/UI) are kept after
   re-reviewing against the navy/gold brand identity. Space Grotesk's
   squared-off, engineered letterforms read as modern/architectural
   rather than editorial (no serif), restaurant-ish, or tech-startup
   trendy (it's grounded, not rounded or novelty). Inter stays for
   body copy and UI because it's highly legible at small sizes in
   both English and Spanish. No decorative fonts are used anywhere.
   ================================================================ */

:root{
  /* ----------------------------------------------------------------
     BRAND COLOR SYSTEM
     --jtl-dark / --jtl-gold are approximated from the logo reference
     sheet provided (sampled directly from the artwork). Swap these
     two values once final production logo files confirm exact brand
     hex codes — everything else in the site inherits from them.

     Two gold shades exist on purpose for accessibility:
     --jtl-gold       → brighter refined gold, for use ON DARK
                         backgrounds only (hero, footer, dark panels).
                         Contrast vs. near-black ≈ 7.5:1.
     --jtl-gold-dark  → deeper bronze-gold, for use ON LIGHT
                         backgrounds (cream/white) where the brighter
                         gold would fail contrast. ≈ 4.6–5:1 vs.
                         cream/white — safe for small text per WCAG AA.
     Never set small body text in --jtl-gold on a light background.
     ---------------------------------------------------------------- */
  --jtl-dark:        #14161c;
  --jtl-dark-soft:   #1f232b;
  --jtl-gold:        #c6a06c;
  --jtl-gold-dark:   #8a6a3c;
  --jtl-gold-deep:   #6e5430;
  --jtl-white:       #ffffff;
  --jtl-cream:       #f8f6f1;
  --jtl-paper:       #efece3;
  --jtl-grey:        #5c5950;
  --jtl-grey-light:  #b7b2a6;
  --jtl-line:        #ddd7c9;

  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-width: 1200px;
  --gutter: 1.5rem;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--jtl-dark);
  background: var(--jtl-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--jtl-dark);
  margin:0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.wrap{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden{
  position:absolute; width:1px;height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--jtl-gold-dark);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.55em;
  padding: 0.95rem 1.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor:pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--jtl-gold-dark);
  color: var(--jtl-white);
}
.btn-primary:hover{ background: var(--jtl-gold-deep); }

.btn-outline-dark{
  background: transparent;
  color: var(--jtl-dark);
  border-color: var(--jtl-dark);
}
.btn-outline-dark:hover{ background: var(--jtl-dark); color: var(--jtl-white); }

.btn-outline-light{
  background: transparent;
  color: var(--jtl-white);
  border-color: rgba(255,255,255,0.5);
}
.btn-outline-light:hover{ background: var(--jtl-white); color: var(--jtl-dark); border-color: var(--jtl-white); }

.btn-whatsapp{
  background: transparent;
  color: var(--jtl-white);
  border-color: rgba(255,255,255,0.5);
}
.btn-whatsapp:hover{ background: rgba(255,255,255,0.12); }
.btn-whatsapp svg{ flex-shrink:0; }

/* ================================================================
   HEADER / NAV
   ================================================================ */
.site-header{
  position: sticky;
  top:0;
  z-index: 500;
  background: var(--jtl-cream);
  border-bottom: 1px solid var(--jtl-line);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: 0.75rem var(--gutter);
  max-width: var(--max-width);
  margin:0 auto;
}

/* Real logo image — natural aspect ratio preserved, never stretched */
.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.brand img{
  height: 40px;
  width: auto;
  display:block;
}

.nav-links{
  display:none;
  align-items:center;
  gap: 1.9rem;
}
.nav-links a{
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--jtl-dark);
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.nav-links a:hover{ color: var(--jtl-gold-dark); border-color: var(--jtl-gold-dark); }

.nav-right{
  display:none;
  align-items:center;
  gap: 1.3rem;
}

/* Language switch — understated but visually distinct */
.lang-switch{
  display:flex;
  align-items:center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--jtl-line);
  padding: 0.3rem;
}
.lang-switch button{
  background: none;
  border: none;
  padding: 0.25rem 0.55rem;
  color: var(--jtl-grey);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.lang-switch button[aria-pressed="true"]{
  background: var(--jtl-dark);
  color: var(--jtl-white);
}
.lang-switch button:hover:not([aria-pressed="true"]){ color: var(--jtl-dark); }
.lang-switch .divider{ color: var(--jtl-line); }

.nav-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none;
  border:none;
  padding:0.4rem;
  cursor:pointer;
}
.nav-toggle span{
  width:24px; height:2px; background: var(--jtl-dark); display:block;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none;
  flex-direction:column;
  border-top: 1px solid var(--jtl-line);
  background: var(--jtl-cream);
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--jtl-line);
  font-size: 1rem;
  font-weight:500;
}
.mobile-menu .nav-cta-mobile{ padding: 1.1rem var(--gutter); }
.mobile-lang-row{
  display:flex;
  justify-content:center;
  padding: 0.9rem var(--gutter);
  border-bottom: 1px solid var(--jtl-line);
}

@media (min-width: 900px){
  .nav-links{ display:flex; }
  .nav-right{ display:flex; }
  .nav-toggle{ display:none; }
  .mobile-menu{ display:none !important; }
  .brand img{ height: 46px; }
}

/* ================================================================
   HERO
   ================================================================ */
.hero{
  position:relative;
  background: var(--jtl-dark);
  color: var(--jtl-white);
  overflow:hidden;
}
.hero-media{
  position:relative;
  min-height: 82vh;
  display:flex;
  align-items:flex-end;
  background-size: cover;
  background-position: center;
  /* Dev note: background-image below points to a neutral placeholder.
     Replace with a real JTL finished-project or job-site photo at
     assets/hero/hero-placeholder.jpg (or update this rule to point
     to a new filename). The dark gradient overlay must stay so white
     text remains readable over any photo. */
  background-image:
    linear-gradient(180deg, rgba(20,22,28,0.45) 0%, rgba(20,22,28,0.82) 68%, rgba(20,22,28,0.95) 100%),
    linear-gradient(135deg,#252b39,#14161c);
}
.hero-content{
  position:relative;
  width:100%;
  padding: 3rem var(--gutter) 4.25rem;
  max-width: var(--max-width);
  margin:0 auto;
}
.hero-eyebrow{
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--jtl-gold);
  margin: 0 0 1rem;
}
.hero-content h1{
  color: var(--jtl-white);
  font-size: clamp(2.2rem, 7vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 17ch;
}
.hero-rule{
  width: 52px;
  height: 3px;
  background: var(--jtl-gold);
  margin: 1.6rem 0 0;
}
.hero-tagline{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.8vw, 1.4rem);
  letter-spacing: -0.005em;
  color: var(--jtl-gold);
  margin: 1.1rem 0 0;
}
.hero-desc{
  margin: 1.1rem 0 0;
  max-width: 48ch;
  color: rgba(255,255,255,0.86);
  font-size: 1.04rem;
  line-height: 1.65;
}
.hero-ctas{
  display:flex;
  flex-direction:column;
  gap: 0.85rem;
  margin-top: 2.25rem;
  max-width: 360px;
}
@media (min-width:560px){
  .hero-ctas{ flex-direction:row; max-width:none; }
}
.hero-services-line{
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  display:flex;
  flex-wrap:wrap;
  gap: 0 1.1rem;
}
.hero-services-line span{
  font-size: 0.86rem;
  color: rgba(255,255,255,0.72);
  padding: 0.25rem 0;
}
.hero-services-line span + span{ padding-left: 1.1rem; border-left: 1px solid rgba(255,255,255,0.25); }

/* ================================================================
   SECTION SCAFFOLDING
   ================================================================ */
section{ padding: 4.5rem 0; }
.section-light{ background: var(--jtl-cream); }
.section-paper{ background: var(--jtl-paper); }
.section-dark{ background: var(--jtl-dark); color: var(--jtl-white); }

.eyebrow-kicker{
  font-size: 0.85rem;
  color: var(--jtl-gold-dark);
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.section-dark .eyebrow-kicker{ color: var(--jtl-gold); }

.section-heading{
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  max-width: 18ch;
}
.section-sub{
  margin-top: 0.9rem;
  color: var(--jtl-grey);
  max-width: 62ch;
  font-size: 1.02rem;
}
.section-dark .section-sub{ color: var(--jtl-grey-light); }

/* ================================================================
   ABOUT
   ================================================================ */
.about-grid{
  display:grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items:start;
}
@media (min-width: 880px){
  .about-grid{ grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
}
.about-text p{ color: var(--jtl-grey); margin: 1.1rem 0 0; max-width: 58ch; }
.about-text p:first-of-type{ margin-top: 1.3rem; }
.about-media{
  min-height: 360px;
  background-size: cover;
  background-position: center;
}

/* ================================================================
   SERVICES
   ================================================================ */
.services-grid{
  margin-top: 2.5rem;
  display:grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--jtl-line);
  border-left: 1px solid var(--jtl-line);
}
@media (min-width: 680px){
  .services-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1020px){
  .services-grid{ grid-template-columns: repeat(3, 1fr); }
}
.service-item{
  padding: 2rem 1.9rem;
  border-right: 1px solid var(--jtl-line);
  border-bottom: 1px solid var(--jtl-line);
  transition: background-color .18s ease;
}
.service-item:hover{ background: var(--jtl-paper); }
.service-item .icon{
  width: 40px; height:40px;
  color: var(--jtl-gold-dark);
  margin-bottom: 1.1rem;
}
.service-item h3{
  font-size: 1.12rem;
  font-weight: 600;
}
.service-item p{
  margin: 0.6rem 0 0;
  color: var(--jtl-grey);
  font-size: 0.93rem;
}

/* ================================================================
   RESIDENTIAL / COMMERCIAL
   ================================================================ */
.res-com-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--jtl-line);
  margin-top: 2.5rem;
}
@media (min-width: 820px){
  .res-com-grid{ grid-template-columns: 1fr 1fr; }
}
.res-com-card{
  background: var(--jtl-cream);
  padding: 2.3rem;
}
.res-com-card .tag{
  font-size: 0.78rem;
  font-weight:700;
  letter-spacing:0.04em;
  color: var(--jtl-gold-dark);
}
.res-com-card h3{ font-size: 1.4rem; margin-top: 0.6rem; }
.res-com-card p{ color: var(--jtl-grey); margin-top: 0.9rem; }
.res-com-card .ph-strip{
  margin-top: 1.5rem;
  min-height: 190px;
  background-size: cover;
  background-position: center;
}

/* ================================================================
   GALLERY / PORTFOLIO
   ================================================================ */
.gallery-grid{
  margin-top: 2.5rem;
  display:grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
}
@media (min-width: 760px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}
.gallery-pair .pair-imgs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.gallery-pair .pair-media{
  position:relative;
  min-height: 190px;
  background-size: cover;
  background-position: center;
}
.ba-flag{
  position:absolute; top: 0.6rem; left: 0.6rem;
  font-size: 0.65rem; font-weight:700; letter-spacing:0.05em;
  background: var(--jtl-dark); color: var(--jtl-gold);
  padding: 0.25rem 0.55rem;
}
.pair-label{
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--jtl-grey);
}
.pair-label strong{ color: var(--jtl-dark); display:block; font-size: 0.98rem; margin-bottom: 0.15rem; }
/* Hide the caption line entirely until real project details exist —
   avoids showing fabricated or "e.g." placeholder text to visitors. */
.pair-label:empty{ display:none; }

/* ================================================================
   WHY JTL — compact
   ================================================================ */
.why-grid{
  margin-top: 2rem;
  display:grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
}
@media (min-width: 720px){
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px){
  .why-grid{ grid-template-columns: repeat(5, 1fr); }
}
.why-item{
  display:flex;
  gap: 0.9rem;
  align-items:flex-start;
  padding: 1.4rem 1.4rem 1.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
@media (min-width: 720px){
  .why-item{ border-right: 1px solid rgba(255,255,255,0.18); padding-left: 1.4rem; }
}
.why-item .mark{
  width: 7px; height:7px;
  background: var(--jtl-gold);
  margin-top: 0.5rem;
  flex-shrink:0;
}
.why-item h3{ color: var(--jtl-white); font-size: 1rem; }
.why-item p{ color: var(--jtl-grey-light); margin: 0.35rem 0 0; font-size: 0.88rem; }

/* ================================================================
   SERVICE AREA
   ================================================================ */
.area-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2.5rem;
  align-items:start;
}
@media (min-width: 880px){
  .area-layout{ grid-template-columns: 0.9fr 1.1fr; }
}
.area-copy p{ color: var(--jtl-grey); max-width: 54ch; }
.area-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 0.75rem;
}
.area-chip{
  border: 1px solid var(--jtl-dark);
  padding: 0.7rem 1.2rem;
  font-size: 0.92rem;
  font-weight:600;
  color: var(--jtl-dark);
}

/* ================================================================
   ESTIMATE FORM
   ================================================================ */
.form-shell{
  margin-top: 2.5rem;
  background: var(--jtl-cream);
  border: 1px solid var(--jtl-line);
  padding: 2rem;
}
@media (min-width: 640px){ .form-shell{ padding: 2.8rem; } }

.form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.3rem;
}
@media (min-width: 680px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
  .form-grid .full{ grid-column: 1 / -1; }
}
.field label{
  display:block;
  font-size: 0.86rem;
  font-weight:600;
  margin-bottom: 0.45rem;
  color: var(--jtl-dark);
}
.field .req{ color: var(--jtl-gold-dark); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea,
.field input[type="file"]{
  width:100%;
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--jtl-line);
  background: var(--jtl-white);
  color: var(--jtl-dark);
}
.field textarea{ min-height: 120px; resize: vertical; }
.field input[type="file"]{ padding: 0.6rem; font-size: 0.88rem; }

.contact-method-group legend{
  font-size: 0.86rem;
  font-weight:600;
  margin-bottom: 0.6rem;
  color: var(--jtl-dark);
  padding:0;
}
.contact-method-options{
  display:flex;
  flex-wrap:wrap;
  gap: 1.3rem;
}
.contact-method-options label{
  display:flex;
  align-items:center;
  gap: 0.5rem;
  font-size: 0.93rem;
  font-weight:500;
  cursor:pointer;
}
.contact-method-options input{ accent-color: var(--jtl-gold-dark); width:16px; height:16px; }

.form-shell fieldset{ border:none; padding:0; margin:0; }
.form-submit-row{
  margin-top: 0.6rem;
  display:flex;
  flex-direction: column;
  gap: 1rem;
}
.form-note{
  font-size: 0.82rem;
  color: var(--jtl-grey);
}
.form-status{
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--jtl-gold-dark);
  background: var(--jtl-paper);
  color: var(--jtl-dark);
  font-size: 0.88rem;
}
.form-status[hidden]{ display:none; }

/* ================================================================
   CONTACT
   ================================================================ */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (min-width: 760px){ .contact-grid{ grid-template-columns: repeat(3, 1fr); } }
.contact-card{
  border-top: 2px solid var(--jtl-gold-dark);
  padding-top: 1.1rem;
}
.contact-card .label{
  font-size: 0.78rem;
  font-weight:700;
  letter-spacing: 0.03em;
  color: var(--jtl-grey);
}
.contact-card .value{
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-top: 0.4rem;
}
.contact-card a.value:hover{ color: var(--jtl-gold-dark); }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer{
  background: var(--jtl-dark);
  color: var(--jtl-grey-light);
  padding: 3rem 0 1.6rem;
}
.footer-top{
  display:grid;
  gap: 2.2rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (min-width: 760px){
  .footer-top{ grid-template-columns: 1.3fr 1fr 1fr; }
}
.footer-brand img{ height: 34px; width:auto; }
.footer-top p{ margin-top: 1rem; font-size: 0.92rem; max-width: 36ch; }
.footer-col h4{
  color: var(--jtl-white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight:700;
  letter-spacing: 0.03em;
  margin-bottom: 0.9rem;
}
.footer-col ul li{ margin-bottom: 0.6rem; font-size: 0.92rem; }
.footer-col a:hover{ color: var(--jtl-gold); }
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap: 0.6rem 1.5rem;
  justify-content:space-between;
  padding-top: 1.4rem;
  font-size: 0.82rem;
}
.footer-bottom a:hover{ color: var(--jtl-gold); }

/* Sticky mobile call bar */
.mobile-call-bar{
  position: fixed;
  left:0; right:0; bottom:0;
  z-index: 600;
  display:flex;
  background: var(--jtl-dark);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.mobile-call-bar a{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding: 0.85rem 0.5rem;
  font-size: 0.85rem;
  font-weight:600;
  color: var(--jtl-white);
}
.mobile-call-bar a.whatsapp{ background: var(--jtl-gold-dark); }
.mobile-call-bar a.call{ border-right: 1px solid rgba(255,255,255,0.18); }
@media (min-width: 900px){ .mobile-call-bar{ display:none; } }
body{ padding-bottom: 56px; }
@media (min-width: 900px){ body{ padding-bottom:0; } }

/* ================================================================
   PRIVACY PAGE (privacy.html)
   ================================================================ */
.privacy-hero{
  background: var(--jtl-dark);
  color: var(--jtl-white);
  padding: 3.5rem 0 2.5rem;
}
.privacy-hero .eyebrow-kicker{ color: var(--jtl-gold); }
.privacy-hero h1{ color: var(--jtl-white); font-size: clamp(1.8rem, 5vw, 2.4rem); }
.privacy-body{ padding: 3rem 0 4.5rem; }
.privacy-body .wrap{ max-width: 760px; }
.privacy-body h2{
  font-size: 1.1rem;
  margin-top: 2.2rem;
}
.privacy-body h2:first-child{ margin-top: 0; }
.privacy-body p, .privacy-body li{
  color: var(--jtl-grey);
  margin-top: 0.7rem;
  max-width: 62ch;
}
.privacy-body ul{ list-style: disc; padding-left: 1.3rem; }
.privacy-body ul li{ margin-top: 0.4rem; }
.back-link{
  display:inline-block;
  margin-top: 2.5rem;
  font-size: 0.9rem;
  font-weight:600;
  color: var(--jtl-gold-dark);
  border-bottom: 1px solid var(--jtl-gold-dark);
}

/* Launch repairs */
[hidden] { display:none !important; }
.skip-link { position:fixed; top:-100px; left:1rem; z-index:1000; background:white; padding:1rem; }
.skip-link:focus { top:1rem; }
.brand img { height:auto; width:150px; max-width:45vw; }
.footer-brand img { height:auto; width:190px; max-width:100%; }
.contact-card, .footer-col, .field { min-width:0; }
.contact-card a, .footer-col a { overflow-wrap:anywhere; }
.about-grid { grid-template-columns:1fr; }
.mobile-menu { max-height:calc(100dvh - 130px); overflow-y:auto; }
.mobile-call-bar { padding-bottom:env(safe-area-inset-bottom, 0px); }
body { padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
@media (min-width:900px) and (max-width:1199px) {
 .nav-links, .nav-right { display:none; }
 .nav-toggle { display:block; }
 .mobile-menu.open { display:flex !important; }
}
@media (min-width:1200px) { body { padding-bottom:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.hero-media { background-image:linear-gradient(135deg,#252b39,#14161c); }

.project-photos {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2rem;}
.project-photos figure {margin:0;min-width:0;}
.project-photos img {display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;}
.project-photos figcaption {padding:.75rem 0;font-size:.92rem;}
.photo-es {display:none;}
html[lang="es"] .photo-es {display:inline;}
html[lang="es"] .photo-en {display:none;}
@media(max-width:759px){.project-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}}
@media(max-width:399px){.project-photos{grid-template-columns:1fr;}}