*,*::before,*::after{box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
html.menu-open{overflow:hidden}
/* iOS 26 Safari ignores theme-color and tints its bars from the document background (html blended
   with body): the glass toolbar turns grey over a dark body, and at the end of the page the area under
   it is filled with that colour. So the body is light over the light page, and dark while the
   transparent header sits on the hero or once the dark footer is on screen; main paints the light page. */
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,ul,ol{margin:0;padding:0}
p{text-wrap:pretty}
ul,ol{list-style:none}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:var(--wrap);margin-inline:auto}
h2,h3{font-weight:600;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
h2 em,h3 em{font-style:normal;color:var(--gold-ink)}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:4px;border-radius:4px}
/* Sections and main receive programmatic focus after in-page navigation; that is not a control. */
main{background:var(--paper)}
.js body:has(> .site-header:not([data-solid])),body:has(> .site-header[data-solid=false]),html[data-footer-in-view=true] body{background:var(--night)}
main:focus,main section[tabindex="-1"]:focus{outline:none}
/* On dark surfaces the gold-ink outline is too faint; switch to the bright brand gold. */
.hero :focus-visible,.site-header[data-solid=false] :focus-visible,.js .site-header:not([data-solid]) :focus-visible,.service-panel--night :focus-visible,#project-dialog :focus-visible,.mobile-bar :focus-visible{outline-color:var(--gold)}
::selection{background:var(--gold);color:var(--night)}
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--gold);color:var(--night);font-weight:600;text-decoration:none;transition:top .3s var(--ease)}
.skip-link:focus{top:16px}

/* Buttons: pill with an arrow chip; secondary is a quiet text link. */
.btn-chip{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:6px 6px 6px 22px;border-radius:999px;background:var(--gold);color:var(--night);font:600 15px/1.2 var(--font);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:background-color .5s var(--ease),transform .2s var(--ease)}
.btn-chip:hover{background:var(--gold-hot)}
.btn-chip:active{transform:scale(.98)}
.chip{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--night);color:var(--gold);overflow:hidden}
.chip svg{width:15px;height:15px;transition:transform .55s var(--ease)}
.chip svg+svg{position:absolute;transform:translate(-26px,26px)}
.btn-chip:hover .chip svg:first-child,.btn-chip:focus-visible .chip svg:first-child{transform:translate(26px,-26px)}
.btn-chip:hover .chip svg+svg,.btn-chip:focus-visible .chip svg+svg{transform:none}
.btn-text{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in oklch,currentColor 40%,transparent);text-underline-offset:.35em;transition:text-decoration-color .3s var(--ease)}
.btn-text:hover{text-decoration-color:currentColor}

/* Header: solid paper by default (works without JS); transparent over the dark hero. */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);background:var(--paper);border-bottom:1px solid var(--line);color:var(--ink);transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
/* With JS the page opens on the hero, so the transparent state paints before nav.mjs sets data-solid. */
.site-header[data-solid=false]:not([data-menu-open=true]),.js .site-header:not([data-solid]):not([data-menu-open=true]){background:transparent;border-color:transparent;color:var(--bone)}
.header-inner{height:100%;display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.brand{position:relative;flex:none;display:block}
.brand img{width:112px;height:auto;transition:opacity .4s var(--ease)}
.brand .logo-light{position:absolute;inset:0;opacity:0}
.site-header[data-solid=false]:not([data-menu-open=true]) .logo-light,.js .site-header:not([data-solid]):not([data-menu-open=true]) .logo-light{opacity:1}
.site-header[data-solid=false]:not([data-menu-open=true]) .logo-dark,.js .site-header:not([data-solid]):not([data-menu-open=true]) .logo-dark{opacity:0}
.site-nav{display:flex;gap:clamp(18px,2.2vw,32px);margin-left:auto;font-size:14px;font-weight:500}
.site-nav a{text-decoration:none;opacity:.78;transition:opacity .3s}
.site-nav a:hover{opacity:1}
.nav-phone-mobile{display:none}
.header-tools{display:flex;align-items:center;gap:16px}
.lang-switch{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;border:1px solid color-mix(in oklch,currentColor 25%,transparent);border-radius:999px;font:600 12px/1 var(--font);letter-spacing:.06em;text-decoration:none;transition:border-color .3s}
.lang-switch:hover{border-color:currentColor}
.lang-switch span{opacity:.75}
html[lang=en] .lang-en,html[lang=es] .lang-es{opacity:1}
.header-phone{font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.menu-toggle{display:none}
.mobile-bar{display:none}

@media (max-width:860px){
  .brand img{width:96px}
  .header-phone{display:none}
  .header-tools{margin-left:auto;gap:10px}
  .menu-toggle{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid color-mix(in oklch,currentColor 25%,transparent);border-radius:999px;background:transparent;color:inherit;font:600 13px/1 var(--font);cursor:pointer}
  .site-header:not([data-menu-ready=true]){position:absolute;height:auto}
  .site-header:not([data-menu-ready=true]) .header-inner{flex-wrap:wrap;padding-block:12px}
  .site-header:not([data-menu-ready=true]) .site-nav{order:3;width:100%;flex-wrap:wrap;gap:6px 16px;margin:0}
  [data-menu-ready=true] .site-nav{position:fixed;inset:var(--header-h) 0 0;flex-direction:column;gap:2px;margin:0;padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom));background:var(--paper);color:var(--ink);font:600 clamp(28px,8vw,40px)/1.15 var(--font);letter-spacing:-.025em;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s,bottom 0s linear .4s}
  /* Closed, the panel collapses off the bottom edge: iOS 26 Safari reads fixed layers there for its toolbar band. */
  [data-menu-ready=true]:not([data-menu-open=true]) .site-nav{bottom:calc(100% - var(--header-h))}
  [data-menu-open=true] .site-nav{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
  [data-menu-ready=true] .site-nav a{padding:8px 0;opacity:1}
  [data-menu-ready=true] .nav-phone-mobile{display:block;margin-top:auto;color:var(--gold-ink);font:600 20px var(--font);letter-spacing:0}
  /* iOS 26 Safari paints a solid band under its glass toolbar when a fixed layer at the bottom spans at
     least 90% of the viewport (WebKit LocalFrameView::fixedContainerEdges). The call bar stays narrower,
     just clear of the 4px sampling strip and without a downward shadow, so the page shows through. */
  .mobile-bar{display:grid;grid-template-columns:auto 1fr;gap:6px;position:fixed;left:0;right:0;width:calc(90vw - 12px);margin-inline:auto;bottom:max(8px,env(safe-area-inset-bottom));z-index:40;padding:6px;border:1px solid color-mix(in oklch,var(--bone) 14%,transparent);border-radius:999px;background:var(--night)}
  .mobile-bar{transition:transform .5s var(--ease),opacity .5s var(--ease),visibility 0s}
  .site-header[data-solid=false] ~ .mobile-bar,.js .site-header:not([data-solid]) ~ .mobile-bar{opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;transition:transform .5s var(--ease),opacity .5s var(--ease),visibility 0s linear .5s}
  .mobile-bar a{display:grid;place-items:center;min-height:46px;padding:0 clamp(10px,3vw,20px);border-radius:999px;color:var(--bone);font-weight:600;font-size:14px;text-decoration:none}
  .mobile-bar a:last-child{background:var(--gold);color:var(--night)}
  /* Phones narrower than any iOS 26 iPhone: wider bar so the Spanish labels fit. */
  @media (max-width:374px){.mobile-bar{width:auto;left:12px;right:12px}.mobile-bar a{padding:0 8px;font-size:13px}}
  /* Room for the fixed call bar, inside the dark footer so the page never ends on a light strip. */
  .site-footer{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}