/* Emerald's Glass · site styles. Plain CSS, no build step. */

/* ---------- Tokens ---------- */
:root{
  color-scheme:light;
  --canvas:#F3EEE3;
  --panel:#FBF8F1;
  --accent:#0F5A45;
  --accent-hover:#0B4636;
  --accent-muted:#C9A55C;
  --text-secondary:#4B5B54;
  --text-primary:#132B25;

  --gold:#C9A55C;
  --on-accent:#FBF8F1;
  --line-strong:#6F7F78;          /* interactive borders, measured above 3:1 on canvas and panel */
  --hair:rgba(19,43,37,.12);      /* decorative dividers only */
  --err:#A3321F;
  --shadow:0 40px 90px -50px rgba(19,43,37,.45);
  --nav-bg:rgba(251,248,241,.74);

  /* Hero legibility system (light: ivory scrims with ink text) */
  --hs:243,238,227;
  --hs-text:#132B25;
  --tshadow:0 1px 2px rgba(243,238,227,.92),0 3px 12px rgba(243,238,227,.74),0 10px 44px rgba(243,238,227,.8);
  --chip-bg:rgba(251,248,241,.62);
  --chip-line:rgba(19,43,37,.16);
  --vein-o:.26;
  --mote-o:.55;
  --stage-bg:radial-gradient(ellipse 80% 70% at 30% 40%,#F6F1E6,#E8DFCD 70%,#DCD0B8);
  --fs1:.55;--fs2:.5;             /* fog UI scrim strength */

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(20px,5vw,56px);
  --nav-h:68px;
  --fab-clear:calc(72px + env(safe-area-inset-bottom,0px)); /* room for the floating chat button */

  --kpi-ico:#1F7A6C;               /* aqua-green stroke for the KPI and Instagram icons */
  --kpi-tint:rgba(31,122,108,.1);

  --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-body:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0E1A17;--panel:#14241F;--accent:#D9B46A;--accent-hover:#E6C586;--accent-muted:#7FB39C;--text-secondary:#A9BAB2;--text-primary:#EEF2EE;
    --gold:#D9B46A;--on-accent:#0E1A17;--line-strong:#6C8479;--hair:rgba(238,242,238,.1);--err:#FF9C85;
    --shadow:0 40px 90px -50px rgba(0,0,0,.7);--nav-bg:rgba(14,26,23,.72);
    --hs:9,22,18;--hs-text:#F3EEE3;
    --tshadow:0 1px 2px rgba(5,12,10,.95),0 3px 12px rgba(5,12,10,.78),0 10px 44px rgba(5,12,10,.8);
    --chip-bg:rgba(9,22,18,.56);--chip-line:rgba(169,186,178,.24);
    --vein-o:.2;--mote-o:.45;
    --stage-bg:radial-gradient(ellipse 80% 70% at 30% 40%,#1B2B26,#0E1A17 70%,#0A1411);--fs1:.75;--fs2:.7;--kpi-ico:#86C9B8;--kpi-tint:rgba(134,201,184,.12);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --canvas:#0E1A17;--panel:#14241F;--accent:#D9B46A;--accent-hover:#E6C586;--accent-muted:#7FB39C;--text-secondary:#A9BAB2;--text-primary:#EEF2EE;
  --gold:#D9B46A;--on-accent:#0E1A17;--line-strong:#6C8479;--hair:rgba(238,242,238,.1);--err:#FF9C85;
  --shadow:0 40px 90px -50px rgba(0,0,0,.7);--nav-bg:rgba(14,26,23,.72);
  --hs:9,22,18;--hs-text:#F3EEE3;
  --tshadow:0 1px 2px rgba(5,12,10,.95),0 3px 12px rgba(5,12,10,.78),0 10px 44px rgba(5,12,10,.8);
  --chip-bg:rgba(9,22,18,.56);--chip-line:rgba(169,186,178,.24);
  --vein-o:.2;--mote-o:.45;
  --stage-bg:radial-gradient(ellipse 80% 70% at 30% 40%,#1B2B26,#0E1A17 70%,#0A1411);--fs1:.75;--fs2:.7;--kpi-ico:#86C9B8;--kpi-tint:rgba(134,201,184,.12);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  overflow-x:hidden;overflow-x:clip;margin:0;background:var(--canvas);color:var(--text-primary);
  font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .6s var(--ease),color .6s var(--ease);
  animation:pageIn .9s var(--ease) both;
}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mono{font-family:var(--f-mono);font-weight:400}
.wrap{width:min(1180px,100% - 2*var(--gutter));margin-inline:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
main:focus{outline:none}

.skip{position:fixed;left:16px;top:12px;z-index:100;padding:12px 18px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none;transform:translateY(-160%);transition:transform .4s var(--ease)}
.skip:focus{transform:none}

/* ---------- Fixed environment ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.veins{position:absolute;left:-20%;top:-20%;width:140%;height:140%;max-width:none;animation:veinDrift 90s var(--ease-io) -30s infinite alternate}
.veins path{fill:none;stroke:var(--gold);stroke-width:1.3;opacity:var(--vein-o);stroke-linecap:round}
.veins path.thin{stroke-width:.7;opacity:calc(var(--vein-o)*.8)}
@keyframes veinDrift{from{transform:translate3d(-3%,-2%,0) rotate(-1.2deg)}to{transform:translate3d(3%,2.5%,0) rotate(1.2deg)}}
.motes{position:absolute;inset:0}
.mote{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,var(--gold) 0,rgba(201,165,92,0) 70%);opacity:0;animation:mote var(--d) linear var(--dl) infinite}
@keyframes mote{
  0%{opacity:0;transform:translate3d(0,0,0)}
  15%{opacity:var(--mote-o)}
  85%{opacity:var(--mote-o)}
  100%{opacity:0;transform:translate3d(var(--dx),-34vh,0)}
}
main,.foot{position:relative;z-index:1}

/* ---------- Signature: la línea de la gota ---------- */
.dropline{position:fixed;z-index:40;left:clamp(8px,1.6vw,26px);top:0;height:100vh;width:40px;pointer-events:none;--t0:16vh;--tl:70vh}
.dl-rail{position:absolute;left:10px;top:var(--t0);height:var(--tl);width:1.5px;border-radius:2px;overflow:hidden;
  background:linear-gradient(180deg,rgba(15,90,69,0),var(--accent) 12%,var(--accent) 88%,rgba(15,90,69,0));opacity:.55}
.dl-glint{position:absolute;left:0;top:0;width:100%;height:22%;background:linear-gradient(180deg,rgba(201,165,92,0),var(--gold),rgba(201,165,92,0));animation:glintDown 7s var(--ease-io) -2s infinite}
@keyframes glintDown{from{transform:translateY(-110%)}to{transform:translateY(560%)}}
.dl-ticks{position:absolute;left:0;top:var(--t0);height:var(--tl);width:22px}
.dl-tick{position:absolute;left:8px;width:5.5px;height:5.5px;margin-top:-2.75px;border-radius:50%;border:1px solid var(--gold);background:var(--canvas);transition:background-color .5s var(--ease),transform .5s var(--ease)}
.dl-tick.hit{background:var(--gold);transform:scale(1.25)}
.dl-drop{position:absolute;left:3px;top:var(--t0);width:16px;height:22px;margin-top:-16px;will-change:transform}
.dl-drop svg{width:16px;height:22px;overflow:visible;filter:drop-shadow(0 2px 6px rgba(15,90,69,.35))}
.dl-drop svg path{fill:var(--accent);stroke:var(--gold);stroke-width:1}
.dl-drop svg path.hl{fill:none;stroke:rgba(251,248,241,.85);stroke-width:1.2;stroke-linecap:round}
.dl-num{position:absolute;left:24px;top:3px;font:400 11px/1 var(--f-mono);letter-spacing:.12em;color:var(--text-secondary);padding:4px 6px;border-radius:6px;background:var(--chip-bg);border:1px solid var(--chip-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (max-width:720px){
  .dropline{left:3px;width:14px}
  .dl-rail{left:6px;width:1px}
  .dl-tick{left:4.5px;width:4px;height:4px;margin-top:-2px}
  .dl-drop{left:1px;transform-origin:center}
  .dl-drop svg{width:11px;height:15px}
  .dl-num{display:none}
}
@media (max-height:560px){.dl-num,.dl-ticks{display:none}}
/* Below 1360px the chip would sit over the content edge: the drop and rail carry the signature alone */
@media (max-width:1359px){.dl-num{display:none}}
/* Phones: no drop line (client preference); tablets and desktops keep it */
@media (max-width:720px),(orientation:landscape) and (max-height:560px){.dropline{display:none}}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-primary)}
.gem{width:34px;height:27px;flex:none;overflow:visible}
.gem-body{fill:#0F5A45;stroke:#C9A55C;stroke-width:2.4;stroke-linejoin:round}
.gem-facets{fill:none;stroke:#C9A55C;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.wordmark{display:grid;line-height:1;gap:3px}
.wm-top{font:600 18px/1 var(--f-display);letter-spacing:.14em}
.wm-bot{font:700 8.5px/1 var(--f-body);letter-spacing:.42em;color:var(--text-secondary);padding-left:.1em}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);background:var(--nav-bg);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid var(--hair);transition:box-shadow .5s var(--ease),background-color .6s var(--ease)}
.nav.scrolled{box-shadow:0 14px 40px -30px rgba(19,43,37,.45)}
.nav-in{height:100%;width:min(1280px,100% - 2*var(--gutter));margin-inline:auto;display:flex;align-items:center;gap:24px}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{position:relative;text-decoration:none;font:500 14.5px/1 var(--f-body);color:var(--text-primary);padding:8px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-tools{display:flex;align-items:center;gap:10px;margin-left:8px}
.lang{display:flex;align-items:center;gap:2px;font:400 12px/1 var(--f-mono);color:var(--text-secondary)}
.lang button{border:0;background:none;padding:8px 6px;border-radius:8px;letter-spacing:.1em;color:var(--text-secondary);transition:color .3s var(--ease),background-color .3s var(--ease)}
.lang button[aria-pressed="true"]{color:var(--text-primary);background:var(--hair)}
.theme-btn,.menu-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--hair);background:none;transition:background-color .3s var(--ease),transform .5s var(--ease)}
.theme-btn:hover,.menu-btn:hover{background:var(--hair)}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:opacity .4s var(--ease),transform .6s var(--ease)}
.theme-btn .i-moon{position:absolute;opacity:0;transform:rotate(-40deg) scale(.7)}
.theme-btn{position:relative}
.is-dark .theme-btn .i-sun{opacity:0;transform:rotate(40deg) scale(.7)}
.is-dark .theme-btn .i-moon{opacity:1;transform:none}
.nav-cta{min-height:40px;padding:0 18px;font-size:14px}
.menu-btn{display:none;flex-direction:column;gap:5px}
.menu-btn span{display:block;width:16px;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.nav.open .menu-btn span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav.open .menu-btn span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:1279px){
  .menu-btn{display:inline-flex}
  .nav-links{position:absolute;left:0;right:0;top:var(--nav-h);flex-direction:column;gap:0;margin:0;padding:8px var(--gutter) 20px;background:var(--panel);border-bottom:1px solid var(--hair);box-shadow:var(--shadow);
    opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
  .nav.open .nav-links{opacity:1;transform:none;visibility:visible;transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s}
  .nav-links a{padding:14px 0;font-size:17px;border-bottom:1px solid var(--hair)}
  .nav-links a::after{display:none}
  .nav-tools{margin-left:auto}
}
@media (max-width:600px){.nav-tools .nav-cta{display:none}.nav-tools{gap:6px}.nav-in{gap:10px}}
@media (max-width:420px){
  .gem{width:28px;height:22px}
  .logo{gap:8px}
  .wm-top{font-size:15px;letter-spacing:.12em}
  .wm-bot{font-size:7.5px;letter-spacing:.38em}
  .lang button{padding:8px 4px}
  .nav-tools{gap:4px}
  .nav-in{gap:6px}
  .lang>span[aria-hidden]{display:none}
}
@media (max-width:340px){.wordmark{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:1.5px solid transparent;text-decoration:none;font:700 15px/1.2 var(--f-body);letter-spacing:.01em;text-align:center;text-shadow:none;
  transition:transform .5s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .5s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-accent{background:var(--accent);color:var(--on-accent);box-shadow:0 14px 30px -18px rgba(15,90,69,.8)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-ghost{border-color:var(--line-strong);color:var(--text-primary);background:rgba(251,248,241,.08)}
.btn-ghost:hover{border-color:var(--text-primary)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- Type ---------- */
.kicker{display:inline-flex;align-items:baseline;gap:10px;font:400 12px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.kicker>span:first-child{position:relative;padding-left:22px}
.kicker>span:first-child::before{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--gold)}
.h-hero{font:500 clamp(40px,4.4vw,74px)/1.04 var(--f-display);letter-spacing:-.01em;max-width:15ch}
.h-band{font:italic 500 clamp(40px,4.3vw,70px)/1.06 var(--f-display);max-width:13ch}
.h-sec{font:500 clamp(30px,8.4vw,44px)/1.08 var(--f-display);letter-spacing:-.005em;margin-top:14px;text-align:left;text-wrap:balance}
/* Section heads: always left-aligned, heading on ONE line from 768px. The head is a size container,
   so the heading's size is also capped by the width it actually has (cqi), and it never overflows:
   the longest heading is about 13.5em wide, so 7cqi always fits. */
.sec-head{text-align:left;container-type:inline-size;min-width:0}
@media (min-width:768px){
  .sec-head .h-sec{font-size:clamp(40px,min(4.1vw,7cqi),60px);white-space:nowrap;text-wrap:nowrap}
}
.sub{font:500 clamp(16px,1.25vw,19px)/1.5 var(--f-body);margin-top:18px;max-width:34ch}
.rule{width:120px;height:6px;margin-top:22px;overflow:visible}
.rule path{fill:none;stroke:var(--gold);stroke-width:1.5}

/* ---------- Draw + reveal system ---------- */
.draw{stroke-dasharray:1;stroke-dashoffset:0}
.js .sec .draw{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) calc(var(--i,0)*110ms + 250ms)}
.js .sec.in .draw{stroke-dashoffset:0}
.js .sec .r{opacity:0;transform:var(--from,translateY(26px));
  transition:opacity .9s var(--ease) calc(var(--i,0)*110ms),transform 1.1s var(--ease) calc(var(--i,0)*110ms)}
.js .sec.in .r{opacity:1;transform:none}
/* Retire the stagger once the entrance is done: the full combined transition, zero delay */
.js .sec.settled .r{transition:opacity .9s var(--ease),transform .5s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .5s var(--ease);transition-delay:0s!important}
.js .sec.settled .draw{transition-delay:0s!important}
/* .r on a button: the reveal's transform:none must not swallow the hover lift */
.js .sec.settled .btn.r:hover{transform:translateY(-2px)}
.js .sec.settled .btn.r:active{transform:translateY(0) scale(.98)}

.sec{position:relative;padding-block:clamp(96px,14vh,168px)}

/* ---------- HERO (autoplay loop, one viewport) ---------- */
/* Cycle: intro text over the first frame, the video with timed chapter captions, a crossfade back to
   the same intro. The stage shows the page itself (body --canvas plus the fixed vein layer), so the
   masked media melts into exactly what the next section sits on, in both themes. */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1100px;overflow:hidden}
/* The hero is footage, not text: a double click must not select or highlight anything */
.hero .stage,.hero .caps,.hero .media,.hero .poster,#heroVideo{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.hero .stage::selection,.hero .caps ::selection,.hero .caps::selection{background:transparent}
.stage{position:absolute;inset:0;overflow:hidden;background:transparent}

/* Edge blending: the footage has no rectangle. Each side fades to transparent over the canvas,
   the bottom longest so the hero dissolves into the next section. Masks intersect per side. */
.edge-melt,.fog-frame .fog-sharp,.fog-frame .fog-layer{
  --mt:0px;--mb:0px;--ms:0px;   /* hero: no melt, the footage reaches every edge */
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,#000 var(--ms),#000 calc(100% - var(--ms)),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--mt),#000 calc(100% - var(--mb)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent 0,#000 var(--ms),#000 calc(100% - var(--ms)),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--mt),#000 calc(100% - var(--mb)),transparent 100%);
  mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.media{position:absolute;inset:0;pointer-events:none;--pos:center}
/* The poster is the video's first frame: the video fades in over it and back out to it */
.poster{position:absolute;inset:0;background-position:var(--ppos,var(--pos));background-size:cover;background-repeat:no-repeat}
html:not(.js) .poster{background-image:url("hero-v2-poster.jpg")} /* follows HERO_VERSION in site.js (v2: hero-v2-poster.jpg, v1: hero-poster.jpg) */
#heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--vpos,var(--pos));opacity:0;transition:opacity .8s var(--ease)}
.hero.playing #heroVideo{opacity:1}
.hero.video-failed #heroVideo{display:none}

/* Layer 1: global base scrim, calm left lane dimmed toward the canvas, right half left alive */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(var(--hs),.34) 0%,rgba(var(--hs),.14) 26%,rgba(var(--hs),0) 48%),
    radial-gradient(ellipse 120% 90% at 62% 45%,rgba(10,30,24,0) 55%,rgba(10,30,24,.16) 100%)}

/* The text lane: captions stacked in one grid cell (no layout jump between chapters), CTAs below */
.hero-lane{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 32px) var(--gutter) 112px calc(var(--gutter) + 40px);color:var(--hs-text);text-shadow:var(--tshadow)}
/* Layer 2: lane scrim anchored behind the text */
.hero-lane::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 58% 74% at 21% 54%,rgba(var(--hs),.7) 0%,rgba(var(--hs),.46) 46%,rgba(var(--hs),0) 76%)}
.caps{display:grid;width:min(48vw,620px)}
.cap{grid-area:1/1;align-self:end;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s linear .6s}
.cap.on{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s}
.cap .kicker{color:var(--hs-text);margin-bottom:14px;text-wrap:balance} /* "Suroeste de Florida · Hogares y negocios" needs two even lines on a narrow phone */
/* Two equal buttons (as wide as the longer one), a clear step below the headline */
.hero-lane .cta-row{display:inline-grid;grid-template-columns:1fr 1fr;align-self:flex-start;margin-top:clamp(64px,11vh,120px)}
.hero-lane .cta-row .btn{justify-content:center;text-align:center}
.hero-lane .btn{text-shadow:none}
.hero-lane .btn-ghost{color:var(--hs-text);border-color:currentColor;background:rgba(var(--hs),.35)}

/* Split text */
.vis{display:block}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
.blur-stack{display:grid}
.blur-stack>span{grid-area:1/1}
.blur-stack .soft{filter:blur(10px)}

/* Caption entrances, triggered by video time. Each caption keeps its own personality; only
   transform and opacity move. Leaving: the caption fades as a whole, then its parts reset
   silently (0s transition after the fade) so the next entrance starts clean. */
.cap .w,.cap .sub,.cap .kicker,.cap .vis,.cap .sharp{transition:opacity 0s linear .6s,transform 0s linear .6s}

/* 01 intro: drift down by word (the falling drop) */
.c0 .w{opacity:0;transform:translateY(-.22em)}
.c0.on .w{opacity:1;transform:none;transition:opacity .8s var(--ease) calc(var(--th,0)*1.4s + .2s),transform 1s var(--ease) calc(var(--th,0)*1.4s + .2s)}
.c0 .kicker,.c0 .sub{opacity:0;transform:translateY(-10px)}
.c0.on .kicker{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.c0.on .sub{opacity:1;transform:none;transition:opacity .8s var(--ease) 1.05s,transform 1s var(--ease) 1.05s}

/* 02 blur to sharp (the focus racking through the glass): static blur, opacity crossfade only */
.c1 .soft{opacity:0}
.c1 .sharp{opacity:0}
.c1.on .soft{animation:softOut 1.6s var(--ease) both}
.c1.on .sharp{opacity:1;transition:opacity 1.1s var(--ease) .5s}
@keyframes softOut{0%{opacity:0}28%{opacity:.9}100%{opacity:0}}

/* 03 slow drift down by word (the camera descending the staircase). Travel stays inside the line gap */
.c2 .w{opacity:0;transform:translateY(-.2em)}
.c2.on .w{opacity:1;transform:none;transition:opacity .9s var(--ease) calc(var(--th,0)*2.2s + .1s),transform 1.3s var(--ease) calc(var(--th,0)*2.2s + .1s)}
.c2 .h-band{text-wrap:balance}

/* 04 approach from depth (the living room opening up) */
.c3 .vis{opacity:0;transform:scale(.9);transform-origin:left bottom}
.c3.on .vis{opacity:1;transform:none;transition:opacity 1s var(--ease) .1s,transform 1.8s var(--ease) .1s}

/* 05 word rise into a staged settle */
.c4 .w{opacity:0;transform:translateY(.24em)}
.c4.on .w{opacity:1;transform:none;transition:opacity .8s var(--ease) calc(var(--th,0)*1.4s + .1s),transform 1s var(--ease) calc(var(--th,0)*1.4s + .1s)}
.c4 .sub{opacity:0;transform:translateY(12px)}
.c4.on .sub{opacity:1;transform:none;transition:opacity .8s var(--ease) 1s,transform 1s var(--ease) 1s}

/* Layer 4: chips for small text over footage */
.chip{background:var(--chip-bg);border:1px solid var(--chip-line);border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:none}

/* The footage is the pause control. The lane lets clicks through to it, except on the text and the
   buttons, which keep their own behavior. A glyph flashes where the change happened; aria-pressed
   carries the state for assistive tech. */
.hero-hit{position:absolute;inset:0;z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.hero-hit:focus-visible{outline:2px solid var(--accent);outline-offset:-8px;border-radius:18px}
.hero-lane{pointer-events:none}
.hero-lane .caps,.hero-lane .cta-row,.hero-lane .avail{pointer-events:auto}
.hero-lane .caps{cursor:auto}
.hh-glyph{position:absolute;left:68%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--chip-bg);border:1px solid var(--chip-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--hs-text);opacity:0;transform:scale(.8);pointer-events:none}
.hh-glyph svg{width:28px;height:28px}
.hh-glyph .i-pause{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.hh-glyph .i-play{display:none;fill:currentColor;margin-left:3px}
.hero-hit[aria-pressed="true"] .i-pause{display:none}
.hero-hit[aria-pressed="true"] .i-play{display:block}
.hero.flash .hh-glyph{animation:hhFlash .9s var(--ease) both}
@keyframes hhFlash{0%{opacity:0;transform:scale(.8)}22%{opacity:1;transform:none}70%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.08)}}
/* The glyph shows the state now reached: pause icon when paused, play icon when playing */
.hero:not(.flash) .hh-glyph{animation:none}
/* Paused (a click on the footage, or reduced motion): the play button stays visible until it resumes */
.hero.is-paused .hh-glyph{opacity:1;transform:none;animation:none;transition:opacity .35s var(--ease)}
.hero.video-failed .hero-hit{display:none}

/* Availability line: a small live dot and a short sentence */
.avail{display:inline-flex;align-items:center;gap:10px;font:500 14.5px/1.3 var(--f-body);color:var(--text-secondary)}
.avail-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.avail-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:availPing 4.2s var(--ease-io) -1s infinite}
@keyframes availPing{0%{opacity:.7;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.6)}}
.hero-lane .avail{margin-top:20px;align-self:flex-start;padding:7px 14px 7px 12px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--hs-text);text-shadow:none;font-size:13.5px}
/* Phones and portrait tablets: text at the bottom over a vertical scrim, footage framed on the glass */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px){
  .media{--pos:64% 50%}
  /* Phones: barely any melt at the edges, so the footage stays crisp instead of looking clouded */
  .edge-melt{--mt:0px;--mb:0px;--ms:0px}
  /* Light veil only where the text sits: the footage stays visible down to the bottom edge */
  .scrim{background:
    linear-gradient(180deg,rgba(var(--hs),0) 58%,rgba(var(--hs),.16) 76%,rgba(var(--hs),.38) 92%,rgba(var(--hs),.48) 100%),
    linear-gradient(90deg,rgba(var(--hs),.1),rgba(var(--hs),0) 55%)}
  .hero-lane{justify-content:flex-end;padding:calc(var(--nav-h) + 24px) var(--gutter) calc(96px + env(safe-area-inset-bottom,0px))}
  .hero-lane::before{background:radial-gradient(ellipse 100% 52% at 30% 84%,rgba(var(--hs),.38) 0%,rgba(var(--hs),0) 70%)}
  .caps{width:100%;max-width:600px}
  .hero-lane .h-hero{font-size:clamp(32px,8.4vw,60px);max-width:17ch}
  .hero-lane .h-band{font-size:clamp(30px,7.8vw,54px);max-width:19ch}
  /* Phones: stacked, both as wide as the longer label, aligned to the left with the text */
  .hero-lane .cta-row{display:inline-grid;grid-template-columns:1fr;width:auto;max-width:100%;align-self:flex-start;margin-top:30px}
  .hh-glyph{left:50%;top:40%}
}
/* Portrait phones get portrait files already framed on the glass (hero[-v2|-v3]-poster-mobile.jpg, hero[-v2|-v3]-mobile.mp4):
   no side crop. The landscape Save-Data file keeps the 64% framing. Keep in sync with PORTRAIT_Q in site.js. */
@media (orientation:portrait) and (max-width:820px){
  .media{--ppos:50% 50%}
  .hero.v-portrait .media{--vpos:50% 50%}
  html:not(.js) .poster{background-image:url("hero-v2-poster-mobile.jpg")} /* v2: hero-v2-poster-mobile.jpg, v1: hero-poster-mobile.jpg */
}
/* Landscape phones: short viewport, keep everything on one screen */
@media (orientation:landscape) and (max-height:560px){
  .hero{min-height:340px}
  .hero-lane{justify-content:flex-end;padding-top:calc(var(--nav-h) + 12px);padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .caps{width:min(58vw,560px)}
  .cap .kicker,.cap .sub{display:none}
  .hero-lane .h-hero{font-size:clamp(24px,7.5vh,40px);max-width:20ch}
  .hero-lane .h-band{font-size:clamp(22px,7vh,36px);max-width:20ch}
  .hero-lane .cta-row{margin-top:14px;gap:10px}
  .hero-lane .avail{margin-top:10px;padding-block:5px}
  .hh-glyph{left:72%;top:46%}
}

/* ---------- KPI figures: editorial strip in the site's own voice (hidden until KPI_VALUES is filled) ----------
   No boxes or app icons: serif figures, mono indexes and gold hairlines, like the section headings. */
.kpis{position:relative;padding:clamp(40px,6vw,72px) 0 0}
.kpi-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--gold);border-bottom:1px solid var(--hair)}
@media (min-width:1000px){.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(22px,3vw,34px) clamp(14px,2.2vw,32px) clamp(24px,3vw,36px);
  opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.kpi-card:nth-child(2){transition-delay:.1s}.kpi-card:nth-child(3){transition-delay:.2s}.kpi-card:nth-child(4){transition-delay:.3s}
.kpis.in .kpi-card{opacity:1;transform:none}
/* Hairline separators: between columns, and between the two rows of the 2x2 grid */
.kpi-card+.kpi-card{border-left:1px solid var(--hair)}
@media (max-width:999px){
  .kpi-card:nth-child(3){border-left:0}
  .kpi-card:nth-child(n+3){border-top:1px solid var(--hair)}
  .kpi-card:nth-child(odd){padding-left:0}
}
@media (min-width:1000px){.kpi-card:first-child{padding-left:0}}
.kpi-ico{display:none}
.kpi-txt{display:flex;flex-direction:column;min-width:0}
.kpi-num{font:500 clamp(44px,5.4vw,76px)/.95 var(--f-display);letter-spacing:-.01em;color:var(--text-primary);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.kpi-num::after{content:"";display:block;width:34px;height:1px;margin:clamp(12px,1.6vw,18px) 0 clamp(10px,1.4vw,14px);background:var(--gold)}
.kpi-label{font:400 12px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);max-width:22ch}
@media (min-width:1000px){.kpi-label{font-size:12.5px}}

/* ---------- 01 Services (image cards) ---------- */
.services .sec-head{position:relative}
.services .rule{position:relative}
.glint-col{position:absolute;left:0;bottom:-2px;width:120px;height:10px;overflow:hidden;pointer-events:none}
.glint-col::before{content:"";position:absolute;top:3px;left:0;width:36px;height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(251,248,241,0),rgba(251,248,241,.95),rgba(251,248,241,0));transform:translateX(-40px);opacity:0}
.services.live .glint-col::before{animation:ruleGlint 6.5s var(--ease-io) -1.5s infinite}
@keyframes ruleGlint{0%{transform:translateX(-40px);opacity:0}20%{opacity:.9}55%{transform:translateX(130px);opacity:0}100%{transform:translateX(130px);opacity:0}}
.svc-grid{list-style:none;margin:clamp(40px,6vw,64px) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.2vw,28px)}
@media (min-width:640px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.svc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.svc-card{--from:translateY(34px);position:relative;display:flex;flex-direction:column;border-radius:22px;background:var(--panel);border:1px solid var(--hair);box-shadow:var(--shadow);overflow:hidden}
.svc-fig{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:radial-gradient(ellipse at 30% 30%,#EFE7D7,#D9CDB4)}
.svc-fig::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(19,43,37,0) 55%,rgba(19,43,37,.16))}
.svc-fig.noimg img{visibility:hidden}
.svc-body{position:relative;flex:1;padding:0 clamp(20px,2vw,26px) 26px}
.svc-ico{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-top:-28px;border-radius:50%;background:var(--panel);border:1px solid var(--hair);box-shadow:0 10px 24px -14px rgba(19,43,37,.45);transition:transform .5s var(--ease)}
.svc-ico-svg{width:30px;height:30px;overflow:visible}
.svc-ico-svg path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.svc-card:hover .svc-ico{transform:translateY(-3px)}}
.svc-card h3{margin-top:16px;font:600 clamp(22px,1.9vw,25px)/1.2 var(--f-display);letter-spacing:.005em}
@media (min-width:721px){.svc-card h3{min-height:2.4em}}
.svc-card p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--text-secondary);max-width:40ch}

/* ---------- 02 Spaces ---------- */
.sec-head.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.sec-head.center .h-sec{margin-inline:auto}
.tabs{--from:translateY(14px);position:relative;display:flex;width:max-content;max-width:100%;margin:40px 0 36px;padding:5px;border-radius:999px;background:var(--panel);border:1px solid var(--hair);box-shadow:var(--shadow)}
.tabs [role="tab"]{position:relative;z-index:1;border:0;background:none;padding:12px 22px;border-radius:999px;font:600 15px/1.2 var(--f-body);color:var(--text-secondary);transition:color .45s var(--ease)}
.tabs [role="tab"][aria-selected="true"]{color:var(--on-accent)}
.tab-ink{position:absolute;z-index:0;left:0;top:5px;bottom:5px;width:var(--iw,50%);border-radius:999px;background:var(--accent);transform:translateX(var(--ix,5px));transition:transform .6s var(--ease),width .6s var(--ease)}
.panel{--from:translateY(30px) scale(.98);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
.panel[hidden]{display:none}
/* Animate the children, never the .r panel itself: a filled animation there would override the reveal */
.panel.swap>.sp-fig,.panel.swap>.sp-list{animation:panelIn .8s var(--ease) both}
.panel.swap>.sp-list{animation-delay:.08s}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sp-fig{position:relative;margin:0;aspect-ratio:16/10;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  background:radial-gradient(ellipse at 30% 30%,#EFE7D7,#D9CDB4)}
.sp-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.spaces.live .sp-fig img{animation:kenburns 26s var(--ease-io) -8s infinite alternate}
@keyframes kenburns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.5%,-1%,0)}}
.sp-fig.noimg img{display:none}
.sp-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(19,43,37,0) 60%,rgba(19,43,37,.18));box-shadow:inset 0 0 0 1px rgba(251,248,241,.25);border-radius:inherit}
.sp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.sp-list li{padding:18px 0;border-top:1px solid var(--hair)}
.sp-list h3{font:600 21px/1.2 var(--f-display)}
.sp-list p{margin-top:4px;font-size:15px;color:var(--text-secondary)}

/* ---------- 03 Fog (interactive) ---------- */
.fog{padding-inline:var(--gutter)}
/* No card edge: the image layers melt into the canvas like the hero (no radius, no shadow) */
.fog-frame{--from:scale(.95);position:relative;max-width:1320px;margin-inline:auto;height:min(86vh,820px);min-height:520px;overflow:hidden;background:transparent}
.fog-frame .fog-sharp,.fog-frame .fog-layer{--mt:10%;--mb:18%;--ms:7%}
/* Both layers are the same pixel-aligned frame (clear glass / steamed glass with sharp droplets): no blur, no
   scale, identical fit and position, so the fade reads as the glass clearing in place. The corner sits at ~51%
   of the master; 54% keeps it and the niche in view on the portrait crop. */
.fog-sharp,.fog-wet{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% 50%}
.fog-layer{position:absolute;inset:0;pointer-events:none;will-change:opacity}
.fog-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:clamp(24px,5vw,64px);color:var(--hs-text);text-shadow:var(--tshadow)}
.fog-ui::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,rgba(var(--hs),var(--fs1)),rgba(var(--hs),0) 60%),linear-gradient(0deg,rgba(var(--hs),var(--fs2)),rgba(var(--hs),0) 50%)}
.fog-ui{isolation:isolate}
.fog-ui .kicker{padding:7px 12px;color:var(--hs-text);margin-bottom:auto} /* label at the top of the frame, heading and button at the bottom */
.fog-ui .h-sec{margin-top:16px;font-size:clamp(30px,4.1vw,60px)}
@media (min-width:768px){.fog-ui .h-sec{white-space:nowrap;font-size:clamp(40px,4.1vw,60px)}}
.hold{--p:0;position:relative;display:inline-flex;align-items:center;gap:16px;margin-top:26px;padding:8px 22px 8px 8px;border-radius:999px;border:1px solid var(--chip-line);background:var(--chip-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--hs-text);text-shadow:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:transform .5s var(--ease),opacity .6s var(--ease),border-color .4s var(--ease)}
.hold:hover{border-color:var(--gold)}
.hold.holding{transform:scale(.98)}
.hold-ring{width:56px;height:56px;flex:none;transform:rotate(-90deg)}
.hold-ring circle{fill:none;stroke-width:2.5}
.hr-bg{stroke:rgba(var(--hs),.9)}
.hr-fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p))}
.hold-drop{position:absolute;left:28px;top:50%;width:14px;height:19px;margin:-10px 0 0 -7px}
.hold-drop path{fill:var(--accent);stroke:var(--gold);stroke-width:1}
.fog.live .hold:not(.holding) .hold-drop{animation:dropPulse 4.2s var(--ease-io) -1.4s infinite}
@keyframes dropPulse{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}
.hold-label{font:600 15px/1.3 var(--f-body);text-align:left}
.fog-done:focus{outline:none}
.fog-done{min-height:3.2em;margin-top:22px;max-width:40ch;font:italic 500 clamp(22px,2.2vw,30px)/1.25 var(--f-display)}
.fd-text{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .35s,transform 1.1s var(--ease) .35s}
.fog.clear .fd-text{opacity:1;transform:none}
.fog.clear .hold{opacity:.0;transform:translateY(-6px);pointer-events:none}
.fog.clear .fog-ui::before{opacity:.8}

/* ---------- 04 Steps ---------- */
.step-track{position:relative;margin-top:56px;container-type:inline-size}
@media (max-width:1199px){.step-line,.step-runner{display:none}}
/* The line runs from the 01 pill to the start of the 05 pill: 4 columns + 4 gaps of 22px */
.step-line{position:absolute;left:calc(10% - 8.8px);right:auto;top:15px;width:calc(80% + 17.6px);height:8px;overflow:visible}
.step-line path{fill:none;stroke:var(--gold);stroke-width:1.5}
.step-runner{position:absolute;left:calc(10% - 13.8px);right:0;top:14px;height:10px;pointer-events:none}
.step-runner::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(201,165,92,.25);opacity:0}
.steps.live.settled .step-runner::before{animation:run 9s var(--ease-io) -2s infinite}
@keyframes run{0%{transform:translateX(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(calc(80cqw + 17.6px));opacity:0}}
.step-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:640px){.step-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}}
@media (min-width:1200px){.step-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}}
.step{--from:translateY(40px);position:relative;display:flex;flex-direction:column}
.step-n{align-self:center;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:38px;padding:0 10px;border-radius:999px;background:var(--canvas);border:1px solid var(--gold);font-size:13px;letter-spacing:.1em;color:var(--text-primary);position:relative}
.step-fig{position:relative;margin:18px 0 0;aspect-ratio:3/2;border-radius:18px 18px 0 0;overflow:hidden;background:radial-gradient(ellipse at 30% 30%,#EFE7D7,#D9CDB4)}
.step-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
@media (hover:hover){.step:hover .step-fig img{transform:scale(1.05)}}
.step-body{flex:1;padding:18px clamp(16px,1.6vw,22px) 22px;border-radius:0 0 18px 18px;background:var(--panel);border:1px solid var(--hair);border-top:0;box-shadow:var(--shadow)}
.step h3{font:600 clamp(21px,1.7vw,24px)/1.2 var(--f-display)}
/* Titles reserve their longest line count so every paragraph in a row starts at the same height */
@media (min-width:640px){.step h3{min-height:2.4em}}
@media (min-width:1200px){.step h3{min-height:3.6em}}
.step p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--text-secondary);max-width:36ch}

/* Phones only: no photos, compact cards with an icon on the left and the step number inside */
.step-ico{display:none}
@media (max-width:639px){
  .step-list{gap:12px}
  .step-fig{display:none}
  .step-n{position:absolute;z-index:1;right:16px;top:14px;min-width:0;height:auto;padding:0;border:0;background:none;font-size:11.5px;color:var(--gold)}
  .step-body{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 44px 16px 16px;border-radius:18px;border:1px solid var(--hair)}
  .step-ico{display:grid;place-items:center;grid-row:span 2;width:44px;height:44px;border-radius:14px;background:var(--kpi-tint);color:var(--kpi-ico)}
  .step-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .step h3{font-size:20px;line-height:1.2;min-height:0}
  .step p{margin-top:4px;font-size:14.5px;line-height:1.5}
}
/* Two columns: the fifth step (the close) spans the row, photo beside the text */
@media (min-width:640px) and (max-width:1199px){
  .step:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:0}
  .step:last-child .step-n{grid-column:1/-1;justify-self:center}
  .step:last-child .step-fig{border-radius:18px 0 0 18px;aspect-ratio:auto;min-height:220px}
  .step:last-child .step-body{border-radius:0 18px 18px 0;border-top:1px solid var(--hair);border-left:0;margin-top:18px;display:flex;flex-direction:column;justify-content:center}
}

/* ---------- 05 Portfolio (15 real job photos plus Instagram) ---------- */
/* Rows are sized from the column width in container units, so every tile is 3:4 whatever the
   breakpoint: portraits 1x1, the feature 2x2 (about 3:4 too), the two landscapes 2x1 (a small
   crop of their 4:3). The DOM order leaves no hole at 4, 3 or 2 columns (see index.html). */
.pf{container-type:inline-size;margin-top:clamp(40px,6vw,60px)}
.pf-grid{--n:2;--g:10px;--rh:calc((100cqi - (var(--n) - 1)*var(--g))/var(--n)*4/3);display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-auto-flow:row;gap:var(--g)}
@media (min-width:700px){.pf-grid{--n:3;--g:clamp(14px,1.6vw,20px)}}
@media (min-width:1200px){.pf-grid{--n:4;--g:20px}}
.pf-item{--from:translateY(26px) scale(.98);position:relative;height:var(--rh);min-width:0}
.pf-feature{grid-column:span 2;grid-row:span 2;height:calc(2*var(--rh) + var(--g))}
.pf-wide{grid-column:span 2}
.zoom-btn.pf-zoom{height:100%;aspect-ratio:auto;border-radius:16px;box-shadow:0 26px 50px -34px rgba(19,43,37,.55)}
.pf-zoom::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(251,248,241,.22);pointer-events:none}
.pf-zoom:focus-visible{outline-offset:3px}
.pf-zoom .zoom-ico{bottom:auto;top:10px;right:10px;transform:translateY(-6px)}
.pf-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;display:block;padding:44px 16px 14px;text-align:left;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,rgba(9,22,18,0),rgba(9,22,18,.55) 45%,rgba(9,22,18,.8));color:#F3EEE3;
  font:600 clamp(16px,1.35vw,19px)/1.25 var(--f-display);letter-spacing:.005em;text-shadow:0 1px 8px rgba(0,0,0,.35);
  opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.pf-feature .pf-cap{font-size:clamp(19px,1.8vw,24px);padding:60px 22px 18px}
@media (hover:hover){
  .pf-zoom:hover .pf-cap{opacity:1;transform:none}
}
.pf-zoom:focus-visible .pf-cap{opacity:1;transform:none}
/* Touch: the caption is always there */
@media (hover:none){.pf-cap{opacity:1;transform:none}.pf-zoom .zoom-ico{transform:none}}
@media (max-width:699px){
  .pf-cap{padding:34px 10px 9px;font-size:15px;border-radius:0 0 12px 12px}
  .pf-feature .pf-cap{padding:48px 16px 14px;font-size:19px}
  .pf-zoom{border-radius:12px}
  .pf-zoom .zoom-ico{width:34px;height:34px;top:8px;right:8px}
  .pf-zoom .zoom-ico svg{width:16px;height:16px}
  /* Phones: first 8 photos until "Ver todos (15)" (JS adds the class and shows the button) */
  .pf-grid.is-collapsed .pf-item:nth-child(n+9){display:none}
}
/* Touch phones: the captions already say "tap me"; eight magnifier badges only add noise */
@media (hover:none) and (max-width:699px){.pf-zoom .zoom-ico{display:none}}
.pf-more-row{grid-column:1/-1;display:flex;justify-content:center;padding-top:14px}
.pf-more{min-height:44px;padding:0 6px;border:0;background:none;color:var(--text-primary);font:700 15px/1.2 var(--f-body);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:5px;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.pf-more::after{content:"";width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-3px) rotate(45deg);transition:transform .4s var(--ease)}
.pf-more[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.pf-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
@media (min-width:700px){.pf-more-row{display:none!important}}
/* Instagram: a full-width row under the photos; at 3 columns it becomes the card that fills the last cell */
.pf-foot{--from:translateY(18px);grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:clamp(24px,4vw,40px);padding-top:26px;border-top:1px solid var(--hair)}
.pf-foot-ico{display:none}
@media (min-width:700px) and (max-width:1199px){
  .pf-foot{grid-column:auto;height:var(--rh);margin:0;padding:clamp(18px,2.4vw,28px);flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:16px;
    border:1px solid var(--hair);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
  .pf-foot-ico{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;background:var(--kpi-tint);color:var(--kpi-ico)}
  .pf-foot-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7}
  .pf-foot-ico svg .dot{fill:currentColor;stroke:none}
  .pf-foot .work-note{font:500 clamp(20px,2.4vw,24px)/1.25 var(--f-display);color:var(--text-primary);text-wrap:balance}
  .pf-foot .btn{padding-inline:14px;font-size:14px;width:100%;white-space:nowrap}
  .pf-foot .ig-btn svg{display:none} /* the card already shows the Instagram icon */
}
/* Zoom buttons: every service and work image opens the shared lightbox */
.zoom-btn{position:relative;display:block;width:100%;padding:0;border:0;margin:0;overflow:hidden;aspect-ratio:3/2;background:radial-gradient(ellipse at 30% 30%,#EFE7D7,#D9CDB4);cursor:zoom-in;color:inherit}
.zoom-btn img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.zoom-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.svc-zoom{height:100%}
/* The service icon overlaps the image's bottom edge, so the zoom badge sits top right there */
.zoom-ico{position:absolute;right:12px;bottom:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--chip-bg);border:1px solid var(--chip-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--hs-text);opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.svc-zoom .zoom-ico{bottom:auto;top:12px;transform:translateY(-6px)}
.zoom-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media (hover:hover){
  .zoom-btn:hover img{transform:scale(1.05)}
  .zoom-btn:hover .zoom-ico{opacity:1;transform:none}
}
.zoom-btn:focus-visible .zoom-ico{opacity:1;transform:none}
@media (hover:none){.zoom-ico{opacity:1;transform:none}.svc-zoom .zoom-ico{transform:none}}
.work-note{font-size:14.5px;color:var(--text-secondary);max-width:52ch}
.ig-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
.ig-btn svg .dot{fill:currentColor;stroke:none}

/* Lightbox (native modal dialog: Esc closes, the page behind is inert) */
.lightbox{--lb-r:1.5;width:min(1180px,100vw - 32px,(100svh - 210px)*var(--lb-r) + 120px);max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;color:var(--text-primary);overflow:visible}
.lightbox::backdrop{background:rgba(9,22,18,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lightbox[open]{animation:lbIn .45s var(--ease) both}
.lightbox[open]::backdrop{animation:lbFade .45s var(--ease) both}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
.lb-in{position:relative;padding:0 60px}
.lb-fig{margin:0;border-radius:18px;overflow:hidden;background:var(--panel);box-shadow:0 40px 90px -40px rgba(0,0,0,.7);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lb-fig.go-next{animation:lbNext .45s var(--ease) both}
.lb-fig.go-prev{animation:lbPrev .45s var(--ease) both}
@keyframes lbNext{from{opacity:.4;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes lbPrev{from{opacity:.4;transform:translateX(-24px)}to{opacity:1;transform:none}}
.lightbox.single .lb-prev,.lightbox.single .lb-next{display:none}
.lb-img{width:100%;height:auto;max-height:calc(100svh - 210px);object-fit:contain;background:#0E1A17}
.lb-cap{display:flex;gap:16px;align-items:baseline;padding:14px 20px 16px}
.lb-count{font-size:12px;letter-spacing:.12em;color:var(--text-secondary);flex:none}
.lb-title{font:600 clamp(19px,1.8vw,23px)/1.3 var(--f-display)}
.lb-btn{position:absolute;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(251,248,241,.35);background:rgba(9,22,18,.55);color:#F3EEE3;padding:0;transition:background-color .3s var(--ease),transform .5s var(--ease)}
.lb-btn:hover{background:rgba(9,22,18,.8)}
.lb-btn:focus-visible{outline:2px solid #D9B46A;outline-offset:3px}
.lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-prev{left:0;top:calc(50% - 50px)}
.lb-next{right:0;top:calc(50% - 50px)}
.lb-close{right:0;top:-58px}
@media (max-width:720px){
  .lightbox{width:min(100vw - 24px,(100svh - 220px)*var(--lb-r))}
  .lb-in{padding:0}
  .lb-img{max-height:calc(100svh - 220px)}
  .lb-prev,.lb-next{top:auto;bottom:-62px}
  .lb-prev{left:calc(50% - 56px)}
  .lb-next{right:calc(50% - 56px)}
  .lb-close{top:-58px}
}
@media (orientation:landscape) and (max-height:560px){
  /* Floor of 440px so a tall photo (real-03) keeps a readable one-line caption; object-fit adds dark side bands */
  .lightbox{width:min(100vw - 24px,max(440px,(100svh - 90px)*var(--lb-r) + 120px))}
  .lb-in{padding:0 60px}
  .lb-img{max-height:calc(100svh - 90px)}
  .lb-cap{padding:6px 12px;gap:10px}
  .lb-title{font-size:16px}
  .lb-prev,.lb-next{top:calc(50% - 24px);bottom:auto}
  .lb-prev{left:0}.lb-next{right:0}
  .lb-close{top:0;right:0}
  .lb-next{top:calc(50% + 32px)}
}
html.lb-open{overflow:hidden}
/* Touch devices (phones and tablets): the viewer is the whole viewport in either orientation. The photo is
   contained at its largest size, the controls float over it (safe areas respected), and the stage takes every
   gesture itself (touch-action:none) so site.js can run pinch/double-tap zoom, pan and swipe. */
@media (pointer:coarse){
  .lightbox{position:fixed;inset:0;width:100vw;height:100vh;height:100svh;height:100dvh;max-width:none;max-height:none;margin:0;overflow:hidden}
  .lb-in{position:absolute;inset:0;padding:0}
  .lb-fig{position:absolute;inset:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;touch-action:none}
  .lb-img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;background:transparent;transform-origin:50% 50%;will-change:transform;-webkit-user-drag:none}
  .lb-img.lb-anim{transition:transform .3s var(--ease)}
  .lb-cap{position:absolute;left:0;right:0;bottom:0;padding:34px calc(18px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));background:linear-gradient(0deg,rgba(9,22,18,.8),rgba(9,22,18,0));color:#F3EEE3;pointer-events:none;transition:opacity .3s var(--ease)}
  .lb-count{color:rgba(243,238,227,.72)}
  .lb-prev,.lb-next{top:50%;bottom:auto;margin-top:-24px;transition:opacity .3s var(--ease)}
  .lb-prev{left:calc(10px + env(safe-area-inset-left))}
  .lb-next{right:calc(10px + env(safe-area-inset-right))}
  .lb-close{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}
  /* Zoomed: the photo is what matters, caption and arrows step aside (close stays) */
  .lightbox.zoomed .lb-cap,.lightbox.zoomed .lb-prev,.lightbox.zoomed .lb-next{opacity:0;pointer-events:none}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:560px){
  .lb-cap{padding-top:22px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .lb-title{font-size:15px}
  .lb-btn{width:42px;height:42px}
  .lb-prev,.lb-next{margin-top:-21px}
}

/* ---------- 06 News (cards) ---------- */
.news-grid{list-style:none;margin:clamp(40px,6vw,60px) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,2.6vw,34px)}
@media (min-width:640px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.news-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Two columns: the launch article spans the row, frame beside the text */
@media (min-width:640px) and (max-width:1023px){
  .news-card:first-child{grid-column:1/-1}
  .news-card:first-child article{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .news-card:first-child .news-fig{aspect-ratio:auto;min-height:260px}
}
.news-card{--from:translateY(30px)}
.news-card article{position:relative;height:100%;display:flex;flex-direction:column;border-radius:22px;background:var(--panel);border:1px solid var(--hair);box-shadow:var(--shadow);overflow:hidden;transition:transform .6s var(--ease)}
.news-fig{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:radial-gradient(ellipse at 30% 30%,#EFE7D7,#D9CDB4)}
.news-fig>img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.news-cat{position:absolute;left:14px;top:14px;z-index:2;padding:6px 11px;border-radius:999px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--chip-bg);border:1px solid var(--chip-line);color:var(--hs-text);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.news-body{flex:1;display:flex;flex-direction:column;padding:22px clamp(20px,2vw,26px) 24px}
.news-meta{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.news-meta>*{white-space:nowrap}
.news-meta .read{display:inline-flex;align-items:center;gap:8px}
.news-meta .read::before{content:"";width:12px;height:1px;background:var(--gold)}
.news-title{margin-top:10px;font:600 clamp(22px,1.9vw,26px)/1.2 var(--f-display);text-wrap:balance}
@media (min-width:640px){.news-title{min-height:3.6em}}
.news-link{text-decoration:none;color:inherit}
/* The whole card is the title link's hit area */
.news-link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:22px}
.news-link:focus-visible{outline:none}
.news-link:focus-visible::after{outline:2px solid var(--accent);outline-offset:-3px}
.news-x{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--text-secondary)}
.news-more{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px;font:700 14.5px/1.2 var(--f-body);color:var(--accent)}
.news-more svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
@media (hover:hover){
  .news-card article:hover{transform:translateY(-4px)}
  .news-card article:hover .news-fig>img{transform:scale(1.05)}
  .news-card article:hover .news-more svg{transform:translateX(4px)}
  .news-card article:hover .device{transform:translate(-50%,-51.5%)}
}

/* Device frame (pure CSS): a laptop with a browser bar and an overlapping phone, both showing
   real screenshots of the site. Sized in container units so it scales as one object. */
.news-fig-device,.post-hero-device{background:radial-gradient(ellipse 90% 80% at 30% 20%,#FBF8F1,#E6DBC5 70%,#D9CBB0)}
.is-dark .news-fig-device,.is-dark .post-hero-device{background:radial-gradient(ellipse 90% 80% at 30% 20%,#223630,#14241F 70%,#0E1A17)}
.device{position:absolute;left:50%;top:57%;width:78%;aspect-ratio:100/64;transform:translate(-50%,-50%);container-type:inline-size;transition:transform .8s var(--ease)}
.dv-laptop{position:absolute;left:0;top:0;width:82cqi}
.dv-lid{padding:1.4cqi 1.4cqi 1.8cqi;border-radius:2.6cqi 2.6cqi .8cqi .8cqi;background:linear-gradient(180deg,#26302D,#171E1C);box-shadow:0 0 0 .25cqi #3A4541 inset,0 4cqi 7cqi -3cqi rgba(19,43,37,.55)}
.dv-bar{display:flex;align-items:center;gap:.9cqi;height:4.2cqi;padding:0 1.6cqi;border-radius:1.2cqi 1.2cqi 0 0;background:#EDE7DA}
.dv-bar i{width:1.1cqi;height:1.1cqi;border-radius:50%;background:#C9BFAE}
.dv-bar i:first-child{background:#D98C7A}
.dv-bar i:nth-child(2){background:#D9B46A}
.dv-bar i:nth-child(3){background:#7FB39C}
.dv-bar span{flex:1;height:2cqi;margin-left:2cqi;border-radius:1cqi;background:#FBF8F1;max-width:36cqi}
.dv-screen{aspect-ratio:16/10;overflow:hidden;background:#F3EEE3;border-radius:0 0 .4cqi .4cqi}
.dv-screen img,.dv-phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.dv-base{position:relative;width:96cqi;height:2.6cqi;margin-left:-7cqi;border-radius:.4cqi .4cqi 3cqi 3cqi;background:linear-gradient(180deg,#D7D2C8,#A9A399 70%,#8C877E);box-shadow:0 2.4cqi 4cqi -2cqi rgba(19,43,37,.5)}
.dv-base::before{content:"";position:absolute;left:50%;top:0;width:14cqi;height:1cqi;margin-left:-7cqi;border-radius:0 0 1cqi 1cqi;background:rgba(0,0,0,.14)}
.dv-phone{position:absolute;right:0;bottom:0;width:20cqi;padding:1cqi;border-radius:3.6cqi;background:linear-gradient(160deg,#2A3330,#121816);box-shadow:0 0 0 .25cqi #45504C inset,0 4cqi 8cqi -3cqi rgba(19,43,37,.6)}
.dv-phone::before{content:"";position:absolute;left:50%;top:2cqi;z-index:1;width:5cqi;height:1.3cqi;margin-left:-2.5cqi;border-radius:1cqi;background:#0B0F0E}
.dv-phone-screen{aspect-ratio:390/844;overflow:hidden;border-radius:2.7cqi;background:#F3EEE3}

/* ---------- 07 FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,48px) clamp(32px,6vw,96px);align-items:start}
.faq-grid>.sec-head,.contact-grid>.sec-head{grid-column:1/-1}
.faq .sec-head{--from:translateY(20px)}
.faq-gem{display:block;width:84px;height:68px;margin-top:10px;overflow:visible}
/* Beside the list: the gem and a short way out when the question is not there */
.faq-more{margin-top:26px;max-width:24ch;font:italic 500 clamp(21px,1.8vw,25px)/1.3 var(--f-display);color:var(--text-primary)}
.faq-more span{display:block}
.faq-more a{display:inline-block;margin-top:8px;font:700 15px/1.4 var(--f-body);font-style:normal;color:var(--accent);text-underline-offset:4px}
.faq-more a:hover{color:var(--text-primary)}
.faq-gem path{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-linejoin:round}
.faq.live.settled .faq-gem{animation:gemGlow 6s var(--ease-io) -2s infinite alternate}
@keyframes gemGlow{from{opacity:.55;transform:translateY(0)}to{opacity:1;transform:translateY(-4px)}}
.qa{--from:translateY(18px);border-top:1px solid var(--hair)}
.qa:last-child{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:24px 0;cursor:pointer;font:600 clamp(21px,1.8vw,25px)/1.25 var(--f-display)}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:none;width:14px;height:14px;transition:transform .5s var(--ease)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;top:6.25px;width:14px;height:1.5px;background:var(--accent)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i{transform:rotate(45deg)}
.qa summary:hover span{color:var(--accent)}
.qa summary span{transition:color .3s var(--ease)}
.qa .a{padding:0 0 24px;max-width:60ch;color:var(--text-secondary)}
.qa[open] .a{animation:faqIn .6s var(--ease) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- 08 Contact (v5): owner card and contact tiles, quote request form ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,48px) clamp(28px,5vw,72px);align-items:start}
.contact-side{display:grid;gap:16px;min-width:0}
/* Desktop: both columns share the row height and the map sits at the bottom, level with the form card */
@media (min-width:900px){
  .contact-grid{align-items:stretch}
  .contact-side{grid-template-rows:auto auto 1fr;align-content:stretch}
  .contact-side .map-card{align-self:end}
}
.owner-card{display:flex;align-items:center;gap:clamp(16px,2vw,24px);padding:clamp(18px,2.2vw,24px);border-radius:26px;background:var(--panel);border:1px solid var(--hair);box-shadow:var(--shadow)}
/* Photo slot: the monogram stays until Raudel sends a real photo (then an <img class="owner-img"> goes inside) */
.owner-photo{flex:none;position:relative;width:clamp(84px,9vw,120px);aspect-ratio:1;border-radius:22px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(ellipse 90% 80% at 30% 25%,#1B7A5E,#0F5A45 55%,#0A3F31);box-shadow:inset 0 0 0 1px rgba(201,165,92,.55)}
.owner-photo::after{content:"";position:absolute;inset:7px;border-radius:16px;border:1px solid rgba(201,165,92,.42);pointer-events:none}
.owner-mono{font:500 clamp(32px,3.4vw,44px)/1 var(--f-display);letter-spacing:.06em;padding-left:.06em;color:#E9D3A0}
.owner-img{width:100%;height:100%;object-fit:cover}
.owner-id{display:grid;gap:4px;min-width:0}
.owner-name{font:600 clamp(24px,2.3vw,30px)/1.1 var(--f-display);letter-spacing:-.005em}
.owner-role{font:400 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.owner-note{margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--text-secondary)}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tiles .tile-wide{grid-column:1/-1}
.tile{display:flex;align-items:center;gap:14px;height:100%;min-height:72px;padding:14px 16px;border-radius:20px;background:var(--panel);border:1px solid var(--hair);text-decoration:none;color:var(--text-primary);
  transition:transform .5s var(--ease),border-color .3s var(--ease),box-shadow .5s var(--ease),background-color .6s var(--ease)}
a.tile:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 18px 40px -28px rgba(19,43,37,.5)}
.tile-ico{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--kpi-tint);color:var(--kpi-ico)}
.tile-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile-ico svg .dot{fill:currentColor;stroke:none}
.tile-txt{display:grid;gap:2px;min-width:0}
.tile-k{font-size:13px;line-height:1.3;color:var(--text-secondary)}
.tile-v{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}

.form-card{--from:translateY(44px) scale(.98);position:relative;padding:clamp(22px,4vw,44px);border-radius:26px;background:var(--panel);border:1px solid var(--hair);box-shadow:var(--shadow)}
.lead{display:grid;gap:18px}
.lead[hidden]{display:none}
.lead-head{display:grid;gap:8px;margin-bottom:2px}
.lead-title{font:500 clamp(30px,2.8vw,38px)/1.1 var(--f-display);letter-spacing:-.005em}
.lead-lede{font-size:16px;line-height:1.55;color:var(--text-secondary)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.field{display:grid;gap:8px;min-width:0}
.field label,.field legend,.field-label{font:600 14px/1.3 var(--f-body);letter-spacing:.01em;color:var(--text-primary)}
.opt{font-weight:500;color:var(--text-secondary)}
.field input,.field select,.field textarea,.nl-row input{width:100%;min-height:50px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line-strong);background:var(--canvas);color:var(--text-primary);font:400 16px/1.4 var(--f-body);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder,.nl-row input::placeholder{color:var(--text-secondary);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus,.nl-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.field [aria-invalid="true"],.nl-row [aria-invalid="true"]{border-color:var(--err)}
.err{min-height:0;font-size:14px;font-weight:600;color:var(--err)}
.err:empty{display:none}
.seg{border:0;margin:0;padding:0;min-width:0}
.seg legend{padding:0;margin-bottom:8px}
.seg-row{display:flex;gap:10px;flex-wrap:wrap}
.seg-row label{position:relative;display:inline-flex}
.seg-row input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg-row span{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line-strong);font-weight:600;font-size:15px;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.seg-row input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.seg-row input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:44px}
.select::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid var(--text-primary);border-bottom:1.5px solid var(--text-primary);transform:rotate(45deg);pointer-events:none}
/* Photos: the whole drop zone is the file input (click, tap or drag and drop) */
.drop{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border-radius:16px;border:1.5px dashed var(--line-strong);background:var(--canvas);cursor:pointer;
  transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.drop:hover,.drop.is-over{border-color:var(--accent);background:var(--kpi-tint)}
.drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.drop.is-full{opacity:.6}
.drop-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:0}
.drop-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--kpi-tint);color:var(--kpi-ico)}
.drop-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drop-txt{display:grid;gap:2px;min-width:0;font-size:14px;line-height:1.4;color:var(--text-secondary)}
.drop-txt strong{font-size:15.5px;color:var(--text-primary)}
.thumbs{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px 12px}
.thumb{position:relative;display:grid;gap:6px;min-width:0}
.thumb img,.thumb-ph{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--canvas);border:1px solid var(--hair)}
.thumb-ph{display:grid;place-items:center;font:400 12px/1 var(--f-mono);letter-spacing:.1em;color:var(--text-secondary)}
.thumb-name{font-size:12.5px;line-height:1.3;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 44px hit area around a 30px visual button */
.thumb-rm{position:absolute;top:-8px;right:-8px;width:44px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center;color:var(--text-primary)}
.thumb-rm::before{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:var(--panel);border:1px solid var(--line-strong);box-shadow:0 6px 14px -8px rgba(0,0,0,.5);transition:border-color .3s var(--ease)}
.thumb-rm svg{position:relative;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.thumb-rm:hover::before{border-color:var(--err)}
.photos-count{font-size:13.5px;color:var(--text-secondary)}
.photos-count:empty{display:none}
/* Honeypot: off screen for people, still in the form for bots */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-alert{display:grid;gap:14px;padding:16px 18px;border-radius:16px;border:1.5px solid var(--err);background:var(--canvas)}
.fa-text{font-weight:600;line-height:1.5}
.fa-links{display:flex;flex-wrap:wrap;gap:10px}
.fa-links .btn{min-height:44px;padding:0 18px;font-size:14.5px}
.btn-send{position:relative;width:100%;min-height:56px;font-size:16px;margin-top:6px}
.btn-send::after{content:"";position:absolute;inset:-4px;border-radius:inherit;box-shadow:0 0 0 1px rgba(201,165,92,.6),0 0 28px 4px rgba(201,165,92,.35);opacity:0;pointer-events:none}
.contact.live .btn-send::after{animation:glow 4.8s var(--ease-io) -1.2s infinite}
@keyframes glow{0%,100%{opacity:0}50%{opacity:1}}
/* Busy state shared by the request, newsletter and admin buttons */
.send-spin{display:none;flex:none;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.is-busy .send-spin{display:inline-block}
.btn:disabled{cursor:progress;opacity:.86;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
.note{font-size:14px;color:var(--text-secondary)}
.note a{color:var(--text-primary);font-weight:600;text-underline-offset:3px;white-space:nowrap}
.sent{display:grid;justify-items:start;gap:16px;padding:12px 0}
.sent[hidden]{display:none}
.sent:focus{outline:none}
.sent-ico{width:70px;height:56px;overflow:visible}
.sent-ico path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease)}
.sent-ico path+path{transition-delay:.5s}
.sent.show .sent-ico path{stroke-dashoffset:0}
.sent-text{font:500 clamp(26px,2.6vw,36px)/1.2 var(--f-display);max-width:22ch;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) .3s,transform 1s var(--ease) .3s}
.sent.show .sent-text{opacity:1;transform:none}
.sent-sub{max-width:44ch;color:var(--text-secondary)}
.sent-again{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:600 16px/1.3 var(--f-body);color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.sent-again:hover{color:var(--text-primary)}

/* ---------- Newsletter (every page, above the site map) ---------- */
.nl{position:relative;z-index:1;padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--hair)}
.nl-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.nl-title{margin-top:12px;font:500 clamp(28px,3vw,40px)/1.12 var(--f-display);letter-spacing:-.005em;text-wrap:balance;max-width:22ch}
.nl-lede{margin-top:12px;max-width:46ch;color:var(--text-secondary)}
.nl-box{padding:clamp(20px,3vw,32px);border-radius:24px;background:var(--panel);border:1px solid var(--hair);box-shadow:var(--shadow)}
.nl-form{display:grid;gap:10px}
.nl-form[hidden]{display:none}
.nl-label{font:600 14px/1.3 var(--f-body)}
.nl-row{display:flex;gap:10px}
.nl-row input{flex:1 1 auto;min-width:0}
.nl-send{flex:none;min-height:50px}
.nl-consent{font-size:13.5px;line-height:1.5;color:var(--text-secondary)}
.nl-done{display:flex;align-items:center;gap:14px;font:500 clamp(22px,2vw,27px)/1.3 var(--f-display)}
.nl-done:focus{outline:none}
.nl-done-ico{flex:none;width:44px;height:44px;padding:11px;border-radius:14px;background:var(--kpi-tint);color:var(--kpi-ico);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Footer: site map and legal line ---------- */
.foot{padding:clamp(48px,6vw,72px) 0 calc(32px + var(--fab-clear));border-top:1px solid var(--hair);background:var(--panel)}
.map-title{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.map-grid{margin-top:28px;display:grid;grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr));gap:36px 28px}
.map-sign{margin-top:16px;max-width:22ch;font:italic 500 21px/1.3 var(--f-display);color:var(--text-primary)}
.map-brand .foot-avail{margin-top:12px;font-size:14px}
.map-h{font:400 12px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.map-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.map-list a,.map-place{display:inline-flex;align-items:center;min-height:32px;padding:3px 0;font-size:15px;line-height:1.35;text-decoration:none;color:var(--text-primary);overflow-wrap:anywhere;transition:color .3s var(--ease)}
.map-list a:hover{color:var(--accent)}
.map-place{color:var(--text-secondary)}
.foot-legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.foot-copy{font-size:12.5px;letter-spacing:.08em;color:var(--text-secondary)}
/* Credit line: the SIDEX mark keeps its own brand colours in both themes */
.powered{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--text-secondary);opacity:.85;transition:opacity .4s var(--ease)}
.powered:hover,.powered:focus-visible{opacity:1}
.pw-txt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.sidex-mark{width:16px;height:16px;flex:none}
.pw-name{font:600 12.5px/1 var(--f-body);letter-spacing:.14em;color:var(--text-primary)}
.foot-tag{font-size:14px;color:var(--text-secondary)}

/* ---------- Toast (newsletter confirmation links) ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + var(--fab-clear));z-index:70;display:flex;align-items:center;gap:6px;width:min(520px,calc(100% - 32px));padding:8px 8px 8px 20px;border-radius:18px;
  background:var(--text-primary);color:var(--canvas);box-shadow:var(--shadow);opacity:0;transform:translate(-50%,16px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast-t{flex:1;font-size:15px;font-weight:600;line-height:1.45}
.toast-x{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:inherit}
.toast-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.toast-x:focus-visible{outline-color:var(--canvas)}
.toast.upd{padding:8px 8px 8px 20px}
.upd-btn{flex:none;min-height:44px;padding-inline:18px}

/* ---------- Admin lock (header) and its password dialog ---------- */
.lock-btn{position:relative;flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--hair);color:var(--text-secondary);text-decoration:none;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.lock-btn:hover{background:var(--hair);color:var(--text-primary)}
.lock-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lock-btn .i-unlock{display:none}
.lock-btn.is-open{color:var(--accent);border-color:var(--accent)}
.lock-btn.is-open .i-lock{display:none}
.lock-btn.is-open .i-unlock{display:block}
.lock-dlg{width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--hair);border-radius:24px;background:var(--panel);color:var(--text-primary);box-shadow:var(--shadow)}
.lock-dlg::backdrop{background:rgba(9,22,18,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lock-form{display:grid;gap:14px;padding:clamp(22px,5vw,32px)}
.lock-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--kpi-tint);color:var(--kpi-ico)}
.lock-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lock-title{font:500 30px/1.1 var(--f-display)}
.lock-lede{font-size:15px;color:var(--text-secondary)}
.lock-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:4px}
.lock-actions .btn{min-height:44px;padding:0 20px}

/* ---------- Service area map (contact) ---------- */
/* Inline SVG silhouette of Florida: the southwest is filled in gold, the rest of the state keeps a
   soft tint, which is the drawing of the same sentence in the caption. The gold outline of the
   region is drawn once by the shared .draw reveal, so reduced motion turns it off on its own. */
.map-card{display:grid;gap:12px;padding:18px 18px 20px;border-radius:20px;background:var(--panel);border:1px solid var(--hair)}
.map-art{position:relative;border-radius:14px;background:var(--canvas);padding:10px 12px}
.fl-map{display:block;width:100%;height:auto;max-height:320px;margin-inline:auto;overflow:visible}
.fl-land{fill:var(--kpi-tint);stroke:var(--gold);stroke-width:1.4;stroke-linejoin:round;opacity:.85}
.fl-keys{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.fl-sw{fill:var(--gold);fill-opacity:.34;stroke:none}
.fl-sw-glow{fill:none;stroke:var(--gold);stroke-width:7;opacity:.3;filter:blur(5px)}
.fl-sw-line{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linejoin:round}
.fl-lead{fill:none;stroke:var(--gold);stroke-width:1.1;opacity:.75}
.fl-dot{fill:var(--text-primary);stroke:var(--panel);stroke-width:1.5}
.fl-lbl{fill:var(--text-primary);font:400 13px/1 var(--f-mono);letter-spacing:.04em}
.map-cap{font-size:15px;font-weight:700;line-height:1.35}
.map-cap2{font-size:14px;line-height:1.45;color:var(--text-secondary);margin-top:-6px}
.map-avail{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary)}
.map-btn{width:100%;min-height:48px}
.map-btn-ico{display:grid;place-items:center;width:20px;height:20px;color:var(--kpi-ico)}
.map-btn-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Google Maps dialog ---------- */
.gmap-dlg{width:min(980px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:1px solid var(--hair);border-radius:24px;background:var(--panel);color:var(--text-primary);box-shadow:var(--shadow);overflow:hidden}
.gmap-dlg::backdrop{background:rgba(9,22,18,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gmap-in{display:grid;grid-template-rows:auto auto auto;max-height:calc(100dvh - 24px)}
.gmap-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 16px 12px 22px}
.gmap-title{font:500 26px/1.15 var(--f-display)}
.gmap-close{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--hair);background:transparent;color:var(--text-primary);padding:0;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.gmap-close:hover{border-color:var(--line-strong);background:var(--kpi-tint)}
.gmap-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gmap-frame{position:relative;aspect-ratio:16/9;min-height:220px;background:var(--kpi-tint);border-block:1px solid var(--hair)}
.gmap-frame iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
/* Second action, clearly apart from the embedded map: Google Maps itself, in a new tab */
.gmap-foot{display:flex;justify-content:flex-end;padding:14px 22px 18px}
.gmap-ext{min-height:46px;padding:0 20px;font-size:14.5px}
.gmap-ext-ico{display:grid;place-items:center;width:18px;height:18px}
.gmap-ext-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){
  .gmap-dlg{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  .gmap-in{height:100dvh;max-height:100dvh;grid-template-rows:auto 1fr auto}
  .gmap-head{padding:calc(10px + env(safe-area-inset-top)) 12px 10px 18px}
  .gmap-title{font-size:22px}
  .gmap-frame{aspect-ratio:auto;height:100%;min-height:0}
  .gmap-foot{padding:12px 18px calc(14px + env(safe-area-inset-bottom))}
  .gmap-ext{width:100%}
}
html.gmap-open{overflow:hidden}

/* ---------- Responsive (contact, newsletter, site map) ---------- */
@media (max-width:1099px){
  .map-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .nl-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:699px){
  .map-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .map-brand{grid-column:1/-1}
}
@media (max-width:560px){
  .field-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .nl-row{flex-direction:column}
  .nl-send{width:100%}
  .owner-card{padding:16px;gap:14px}
  .owner-photo{width:76px;border-radius:18px}
  .owner-photo::after{inset:5px;border-radius:13px}
  .owner-mono{font-size:30px}
}
@media (max-width:420px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .map-grid{grid-template-columns:minmax(0,1fr)}
}
@media (pointer:coarse){
  .map-list a,.note a,.sent-again{min-height:44px}
  .lock-btn{width:44px;height:44px}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .faq-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .faq-side{display:none}
  .panel{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .sec{padding-block:88px}
  .sp-list{grid-template-columns:minmax(0,1fr)}
  .tabs{width:100%}
  .tabs [role="tab"]{flex:1 1 0;padding:12px 10px;font-size:14px}
  .fog{padding-inline:12px}
  .fog-frame{height:auto;min-height:88svh}
  .fog-ui{padding:22px}
  .hold{padding-right:16px}
  .pf-foot .btn{flex:1 1 100%}
}

/* ---------- News article pages ---------- */
/* Long bodies carry both languages; html[lang] shows one, with no flash of the other */
html[lang="en"] [data-lang-only="es"],html:not([lang="en"]) [data-lang-only="en"]{display:none!important}
.post{position:relative;z-index:1;padding:calc(var(--nav-h) + clamp(28px,5vw,56px)) 0 clamp(80px,10vw,128px)}
.post-wrap{width:min(1080px,100% - 2*var(--gutter));margin-inline:auto}
.post-col{max-width:68ch;margin-inline:auto;font-size:18px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;font:400 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.crumbs li{display:inline-flex;align-items:center;min-width:0;max-width:100%}
.crumbs li+li::before{content:"/";margin:0 10px;color:var(--gold)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none;color:var(--text-secondary);transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current] span{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36ch;display:block}
.post-head{margin-top:clamp(28px,4vw,44px)}
.post-head .kicker{color:var(--accent)}
.post-title{margin-top:16px;font:500 clamp(36px,5.4vw,64px)/1.06 var(--f-display);letter-spacing:-.01em;text-wrap:balance;max-width:22ch}
.post-meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.post-meta .dot{color:var(--gold)}
.post-lede{margin-top:22px;font:500 clamp(19px,1.7vw,22px)/1.55 var(--f-body);color:var(--text-secondary);max-width:60ch}
.post-hero{margin:clamp(32px,5vw,52px) 0 0}
.post-hero-box{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:radial-gradient(ellipse at 30% 30%,#EFE7D7,#D9CDB4)}
.post-hero-box>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.post-hero-device{aspect-ratio:16/9}
.post-hero-device .device{width:78%;top:53%}
.post-hero figcaption,.post-fig figcaption{padding:12px 4px 0;font-size:14px;line-height:1.5;color:var(--text-secondary)}
.prose{margin-top:clamp(36px,5vw,56px);color:var(--text-primary);line-height:1.75}
.prose>*+*{margin-top:1.1em}
.prose p{margin-bottom:0}
.prose>p:first-child::first-letter{float:left;font:500 4.1em/.82 var(--f-display);margin:.06em .1em 0 0;color:var(--accent)}
.prose h2{margin-top:1.9em;font:600 clamp(27px,2.6vw,34px)/1.15 var(--f-display);letter-spacing:-.005em;text-wrap:balance}
.prose h2+p,.prose h2+ul{margin-top:.6em}
.prose ul{margin-bottom:0;padding:0;list-style:none}
.prose ul li{position:relative;padding-left:26px}
.prose ul li+li{margin-top:.55em}
.prose ul li::before{content:"";position:absolute;left:2px;top:.8em;width:12px;height:1.5px;background:var(--gold)}
.prose strong{font-weight:700}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose .post-fig{margin-top:2em;margin-inline:0}
.post-fig{margin:0}
.post-fig img{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow)}
.prose blockquote{margin:1.8em 0 0;padding:4px 0 4px 22px;border-left:2px solid var(--gold);font:italic 500 clamp(22px,2vw,27px)/1.35 var(--f-display);color:var(--text-primary)}
.post-cta{margin-top:clamp(44px,6vw,64px);padding:clamp(26px,4vw,40px);border-radius:24px;background:var(--panel);border:1px solid var(--hair);box-shadow:var(--shadow);display:grid;gap:18px;justify-items:start}
.post-cta-t{font:500 clamp(25px,2.6vw,32px)/1.2 var(--f-display);max-width:26ch}
.post-cta .btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.post-nav{margin-top:clamp(40px,5vw,56px);padding-top:26px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 32px;align-items:flex-start}
.post-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;text-decoration:none;color:var(--text-primary);transition:color .3s var(--ease)}
.post-back svg,.post-next svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .5s var(--ease)}
.post-back:hover{color:var(--accent)}
.post-back:hover svg{transform:translateX(-4px)}
.post-next{display:grid;gap:6px;justify-items:end;text-align:right;text-decoration:none;color:var(--text-primary);max-width:34ch;min-height:44px}
.post-next .mono{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.pn-t{display:inline-flex;align-items:center;gap:10px;font:600 clamp(21px,1.9vw,25px)/1.25 var(--f-display);transition:color .3s var(--ease)}
.post-next:hover .pn-t{color:var(--accent)}
.post-next:hover svg{transform:translateX(4px)}
@media (max-width:640px){
  .post-col{font-size:17px}
  .post-nav{flex-direction:column}
  .post-next{justify-items:start;text-align:left}
  .post-hero-box{border-radius:18px}
  .post-hero-device{aspect-ratio:4/3}
  .post-hero-device .device{width:90%}
  .crumbs [aria-current] span{max-width:20ch}
}
@media (pointer:coarse){.crumbs a{min-height:44px;min-width:44px}}

/* ---------- Touch targets ---------- */
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .lang button{min-height:44px;min-width:44px}
  .logo{min-height:44px;min-width:44px}
  .theme-btn,.menu-btn{width:44px;height:44px}
  .nav-links a{min-height:44px;display:flex;align-items:center}
  .note a{min-height:44px;display:inline-flex;align-items:center}
  .tabs [role="tab"]{min-height:44px}
  .qa summary{min-height:44px}
  .hero-lane .avail{min-height:36px}
}

@media (max-width:600px){.nav-tools .nav-cta{display:none}}

/* ---------- Paused tab ---------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- Reduced motion (and the JS pin, same final states) ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .sec .r{opacity:1!important;transform:none!important}
  .js .sec .draw,.draw{stroke-dashoffset:0!important}
  .motes{display:none}
  .hero.flash .hh-glyph{opacity:1;transform:none}
  .news-card article:hover{transform:none}
  .device,.news-card article:hover .device{transform:translate(-50%,-50%)}
  .avail-dot::after{display:none}
  .fd-text{transition:none!important}
  .kpi-card{opacity:1!important;transform:none!important}
}
.js.pinned .sec .r{opacity:1!important;transform:none!important}
.js.pinned .sec .draw{stroke-dashoffset:0!important}
/* Landscape phones: the fog frame fits one short screen */
@media (orientation:landscape) and (max-height:560px){
  .fog-frame{min-height:0;height:92svh}
}
/* R4: very narrow screens, long English labels stay on one line */
@media (max-width:360px){
  .hero-lane .btn,.btn-send{padding-inline:14px;font-size:14px}
  .tabs [role="tab"]{flex:1 1 auto;padding-inline:6px;font-size:13.5px;white-space:nowrap}
}
@media (max-width:720px){
  /* Positional transform re-declared per breakpoint so the reduced-motion reset never moves it */
  .dl-drop{left:1px}
}


/* v5: the admin lock takes one more header slot. Narrow phones get a compact wordmark and tighter tools;
   below 380px only the gem stays (its link keeps the brand name as aria-label). */
.nav-in .logo,.nav-tools>*{flex-shrink:0}
@media (max-width:480px){
  .wm-top{font-size:13px;letter-spacing:.07em}
  .wm-bot{font-size:6.5px;letter-spacing:.3em}
  .logo{gap:6px}
  .nav-tools{gap:2px}
  .nav-in{gap:4px}
}
@media (max-width:379px){.wordmark{display:none}}
/* Touch screens between 1280 and 1439px: 44px tools plus the lock need a slightly tighter menu */
@media (pointer:coarse) and (min-width:1280px) and (max-width:1439px){.nav-links{gap:14px}.nav-in{gap:14px}.nav-tools{gap:6px;margin-left:4px}}