/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Geist-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Geist-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Geist-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Geist-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Geist-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Geist-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/Geist-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/Geist-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/GeistMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/GeistMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/GeistMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/GeistMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   ISP Control Solar - Landing Hoteles
   Redesign: editorial hospitality + energy efficiency.
   Theme: light only (the logo wordmark is black on transparent).
   Accent: brand yellow, used as fill only. One radius system:
   buttons = pill, containers = 22px, inner elements = 12px.
   ========================================================================== */

:root{
  --bg: #f4f4f5;
  --surface: #ffffff;
  --ink: #0f0f10;
  --ink-2: #3a3a40;
  --muted: #62626a;
  --line: #e2e2e6;
  --accent: #ffd400;
  --accent-deep: #e6bf00;
  --on-photo: #ffffff;

  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --container: 1240px;
  --r-lg: 22px;
  --r-md: 12px;
  --shadow-sm: 0 1px 2px rgba(15,15,16,.05), 0 4px 14px rgba(15,15,16,.05);
  --shadow-md: 0 18px 50px -12px rgba(15,15,16,.22);

  --ease: cubic-bezier(.16,1,.3,1);

  /* z-index scale */
  --z-header: 40;
  --z-float: 50;
  --z-sticky: 55;
  --z-grain: 60;
  --z-cookie: 70;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 88px; }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.08; text-wrap: balance; }
p{ margin:0 0 1em; text-wrap: pretty; }
:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* Film grain: fixed, non-interactive, never on scrolling containers */
body::after{
  content:""; position: fixed; inset:0; z-index: var(--z-grain); pointer-events:none; opacity:.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 24px; }
section{ padding: clamp(80px, 11vw, 168px) 0; }
.ph{ width:1.25em; height:1.25em; fill: currentColor; flex:none; display:inline-block; }
.media-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }

h1{ font-size: clamp(2.3rem, 5.2vw, 4.9rem); letter-spacing:-.045em; line-height:1.02; }
h2{ font-size: clamp(2rem, 4vw, 3.4rem); }
h3{ font-size: 1.15rem; letter-spacing:-.02em; }
.lede{ font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-2); max-width: 60ch; }
.mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom: 20px;
  font-family: var(--font-mono); font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.eyebrow::before{ content:""; width:26px; height:2px; background: var(--accent); }

.section-head{ max-width: 780px; margin-bottom: clamp(40px, 6vw, 80px); }
.section-head h2 + .lede{ margin-top: 22px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-sans); font-weight:600; font-size:.96rem; letter-spacing:-.01em;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent; cursor:pointer;
  white-space: nowrap; transition: transform .35s var(--ease), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .35s var(--ease);
}
.btn .ph{ width:1.2rem; height:1.2rem; }
.btn:active{ transform: scale(.97) translateY(1px); }
.btn-primary{ background: var(--accent); color: var(--ink); box-shadow: 0 8px 24px -8px rgba(230,191,0,.55); }
.btn-primary:hover{ background: var(--ink); color: var(--accent); transform: translateY(-2px); }
.btn-dark{ background: var(--ink); color: #fff; }
.btn-dark:hover{ background: var(--accent); color: var(--ink); transform: translateY(-2px); }
.btn-glass{ color: var(--on-photo); border-color: rgba(255,255,255,.45); background: rgba(15,15,16,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-glass:hover{ background:#fff; color: var(--ink); border-color:#fff; transform: translateY(-2px); }
.btn-block{ width:100%; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.text-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; border-bottom:1.5px solid var(--accent); padding-bottom:2px; transition: gap .3s var(--ease); }
.text-link:hover{ gap:14px; }

/* Header: floating single-line bar */
.site-header{ position: fixed; top: 14px; left:0; right:0; z-index: var(--z-header); pointer-events:none; }
.site-header .bar{
  pointer-events:auto; max-width: calc(var(--container) - 24px); margin: 0 auto; height: 64px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 0 12px 0 22px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.9); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 40px -12px rgba(15,15,16,.25);
  transition: box-shadow .35s var(--ease);
}
.brand{ display:flex; align-items:center; flex:none; }
.brand-logo{ height: 32px; width:auto; }
.main-nav{ display:flex; align-items:center; gap: 4px; }
.main-nav a{ font-size:.9rem; font-weight:500; color: var(--ink-2); padding: 8px 12px; border-radius: 999px; transition: background .25s ease, color .25s ease; white-space:nowrap; }
.main-nav a:hover{ background: var(--bg); color: var(--ink); }
.main-nav a.is-active{ background: var(--ink); color:#fff; }
.header-actions{ display:flex; align-items:center; gap:10px; }
.lang-switch{ display:flex; align-items:center; font-family: var(--font-mono); font-size:.74rem; font-weight:500; background: var(--bg); border-radius:999px; padding:3px; }
.lang-switch a{ padding: 5px 10px; border-radius:999px; color: var(--muted); }
.lang-switch a[aria-current="true"]{ background: var(--ink); color:#fff; }
.header-actions .btn{ padding: 11px 20px; font-size:.88rem; }
.nav-toggle{ display:none; width:44px; height:44px; border-radius:50%; border:none; background: var(--bg); cursor:pointer; align-items:center; justify-content:center; color: var(--ink); }
.nav-toggle .ph{ width:1.4rem; height:1.4rem; }

@media (max-width: 1140px){
  .nav-toggle{ display:inline-flex; }
  .header-actions .btn{ display:none; }
  .main-nav{
    position:absolute; top: 76px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; padding: 12px;
    background: rgba(255,255,255,.96); backdrop-filter: blur(16px); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
    opacity:0; transform: translateY(-8px); pointer-events:none; transition: opacity .25s ease, transform .35s var(--ease);
  }
  .main-nav a{ padding: 14px 16px; font-size:1rem; }
  .main-nav.open{ opacity:1; transform:none; pointer-events:auto; }
  .site-header .bar{ position:relative; margin: 0 12px; }
}

/* Hero: media block with headline anchored to the photo */
.hero{ padding: 12px 12px 0; }
.hero-card{
  position:relative; isolation:isolate; overflow:hidden; border-radius: 32px; color: var(--on-photo);
  min-height: calc(100dvh - 24px); max-height: 980px;
  display:flex; align-items:flex-end; background: #1b2327;
}
.hero-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(255,212,0,.34), transparent 60%),
    linear-gradient(180deg, rgba(10,10,11,.38) 0%, rgba(10,10,11,.10) 30%, rgba(10,10,11,.78) 100%);
}
/* Progressive blur: the photo stays sharp at the top and softens behind the text */
.hero-card::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 72%);
  mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 72%);
}
.hero-inner{ width:100%; max-width: var(--container); margin: 0 auto; padding: 120px 24px clamp(36px, 5vw, 64px); }
.hero .eyebrow{ color: #fff; }
.hero h1{ max-width: 17ch; color:#fff; font-size: clamp(2.3rem, 4.8vw, 4.4rem); }
.hero h1 em{ font-style: italic; font-weight: 500; color: var(--accent); padding-bottom:.08em; }
.hero .lede{ color: rgba(255,255,255,.88); margin: 24px 0 32px; max-width: 44ch; }
@media (min-width: 900px){ .hero h1{ max-width: 24ch; } }

/* Key figures strip, directly under the hero */
.figures{ padding: clamp(48px, 6vw, 80px) 0 0; }
.figures-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.figure{ padding-top: 18px; border-top: 2px solid var(--ink); }
.figure b{ display:block; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight:600; letter-spacing:-.04em; line-height:1; margin-bottom: 8px; }
.figure span{ color: var(--muted); font-size:.92rem; }
@media (max-width: 800px){ .figures-grid{ grid-template-columns: 1fr 1fr; } }

/* Problem: bento with mixed surfaces */
.problem-bento{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.cell{ border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height: 250px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.cell:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cell .ph{ width:2rem; height:2rem; margin-bottom:auto; box-sizing:content-box; padding-bottom: 28px; position:relative; }
.cell-media{ position:absolute; inset:0; }
.cell-media img{ width:100%; height:100%; object-fit:cover; }
.cell h3{ margin-bottom: 10px; }
.cell p{ margin:0; color: var(--muted); font-size:.95rem; max-width: 42ch; }
.cell.c1{ grid-column: span 7; min-height: 380px; color:#fff; background: #20282c; }
.cell.c1::before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(10,10,11,.15), rgba(10,10,11,.82)); }
.cell.c1 > :not(.cell-media){ position:relative; z-index:2; }
.cell.c1 p{ color: rgba(255,255,255,.82); }
.cell.c2{ grid-column: span 5; background: var(--accent); }
.cell.c2 p{ color: var(--ink-2); }
.cell.c3, .cell.c4, .cell.c6{ grid-column: span 4; }
.cell.c5{ grid-column: span 4; background: var(--ink); color:#fff; }
.cell.c5 p{ color: rgba(255,255,255,.7); }
.cell.c5 .ph{ color: var(--accent); }
.cell.c4{ grid-column: span 4; }
.cell.c3{ grid-column: span 4; }
@media (max-width: 900px){ .cell.c1, .cell.c2, .cell.c3, .cell.c4, .cell.c5, .cell.c6{ grid-column: span 12; min-height: 0; } .cell.c1{ min-height: 320px; } }

/* Solution: sticky text + comparison */
.solution-grid{ display:grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items:start; }
.solution-copy{ position: sticky; top: 110px; }
.solution-copy h2{ margin-bottom: 24px; }
.how-list{ margin-top: 36px; display:grid; gap: 22px; }
.how-item{ display:grid; grid-template-columns: 44px 1fr; gap: 16px; align-items:start; }
.how-item .ico{ width:44px; height:44px; border-radius: var(--r-md); background: var(--ink); color: var(--accent); display:flex; align-items:center; justify-content:center; }
.how-item h4{ font-size:1rem; letter-spacing:-.01em; margin-bottom:4px; }
.how-item p{ margin:0; color: var(--muted); font-size:.92rem; }
.compare-note{ margin-top: 28px; font-size:.82rem; color: var(--muted); max-width: 52ch; }
.compare-wrap{ border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md); overflow:hidden; }
table.compare{ width:100%; border-collapse: collapse; table-layout: fixed; }
table.compare th, table.compare td{ padding: 18px 16px; text-align:left; font-size:.9rem; line-height:1.4; vertical-align:top; overflow-wrap:anywhere; }
table.compare thead th:first-child, table.compare tbody th{ width: 28%; }
table.compare tbody tr + tr > *{ border-top: 1px solid var(--line); }
table.compare thead th{ font-size:.84rem; font-weight:600; letter-spacing:-.01em; overflow-wrap: normal; hyphens: auto; color: var(--muted); padding-top: 24px; padding-bottom:16px; }
table.compare thead th.hl{ color: var(--ink); }
table.compare tbody th{ font-weight:600; }
table.compare th.hl, table.compare td.hl{ background: rgba(255,212,0,.16); }
table.compare td.yes{ font-weight:600; }
table.compare td.no{ color: var(--muted); }
@media (max-width: 960px){ .solution-grid{ grid-template-columns: 1fr; } .solution-copy{ position:static; } }
/* Narrow screens: each row becomes a stacked block, so the table never needs a horizontal scroll */
@media (max-width: 680px){
  table.compare, table.compare tbody, table.compare tr, table.compare th, table.compare td{ display:block; width:auto; }
  table.compare thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  table.compare tbody tr{ padding: 18px 20px; }
  table.compare tbody tr + tr{ border-top: 1px solid var(--line); }
  table.compare tbody tr + tr > *{ border-top: 0; }
  table.compare tbody th{ width:auto; padding: 0 0 10px; font-size:1rem; }
  table.compare td{ display:flex; justify-content:space-between; gap:16px; padding: 8px 0; border-radius: 6px; }
  table.compare td::before{ content: attr(data-label); color: var(--muted); font-size:.8rem; flex:none; max-width: 45%; }
  table.compare td.hl{ padding-left:10px; padding-right:10px; margin: 0 -10px; }
  table.compare td{ text-align:right; }
}

/* Benefits: one featured figure + the rest in open layout */
.benefits-grid{ display:grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items:stretch; }
.benefit-hero{ border-radius: var(--r-lg); background: var(--ink); color:#fff; padding: clamp(28px, 4vw, 52px); display:flex; flex-direction:column; justify-content:space-between; min-height: 480px; position:relative; overflow:hidden; }
.benefit-hero::before{ content:""; position:absolute; width: 140%; aspect-ratio:1; right:-70%; top:-70%; background: radial-gradient(closest-side, rgba(255,212,0,.55), transparent 70%); }
.benefit-hero .big{ position:relative; font-size: clamp(5.5rem, 13vw, 10.5rem); font-weight:600; letter-spacing:-.07em; line-height:.85; font-variant-numeric: tabular-nums; }
.benefit-hero .big sup{ font-size:.34em; letter-spacing:0; vertical-align: top; position:relative; top:.15em; color: var(--accent); margin-left:6px; }
.benefit-hero h3{ position:relative; font-size:1.5rem; margin-bottom:10px; }
.benefit-hero p{ position:relative; color: rgba(255,255,255,.72); margin:0; max-width: 36ch; }
.benefit-rest{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; align-content:start; }
.benefit{ padding: 26px 0 30px; border-top: 1.5px solid var(--ink); }
.benefit .num{ font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight:600; letter-spacing:-.05em; line-height:1; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.benefit .num sup{ font-size:.45em; letter-spacing:0; margin-left:2px; vertical-align: top; position:relative; top:.2em; }
.benefit .num mark{ background: linear-gradient(transparent 62%, var(--accent) 62%); color: inherit; padding: 0 2px; }
.benefit h3{ font-size:1rem; margin-bottom:8px; }
.benefit p{ color: var(--muted); font-size:.9rem; margin:0; }
.benefit-source{ margin: 40px 0 0; font-size:.8rem; color: var(--muted); max-width: 90ch; }
@media (max-width: 960px){ .benefits-grid{ grid-template-columns: 1fr; } .benefit-hero{ min-height: 380px; } }
@media (max-width: 560px){ .benefit-rest{ grid-template-columns: 1fr; } }

/* Applications: expanding image strips */
.zones{ display:flex; gap: 10px; height: clamp(440px, 62vh, 600px); }
.zone{
  position:relative; flex: 1 1 0; min-width:0; overflow:hidden; border-radius: var(--r-lg); color:#fff; cursor:pointer;
  background: #1d2428; transition: flex-grow .7s var(--ease);
  display:flex; flex-direction:column; justify-content:flex-end; padding: 26px; outline-offset: -3px;
}
.zone img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.zone::before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(10,10,11,.25) 0%, rgba(10,10,11,.88) 100%); transition: background .5s ease; }
.zone > h3, .zone > p, .zone > .ph{ position:relative; z-index:2; }
.zone .ph{ position:absolute; top:24px; left:26px; width:1.7rem; height:1.7rem; color: var(--accent); }
.zone h3{ font-size:1.05rem; margin-bottom:8px; white-space:nowrap; }
.zone p{ margin:0; font-size:.9rem; color: rgba(255,255,255,.82); max-width: 34ch; opacity:0; transform: translateY(10px); transition: opacity .4s ease, transform .5s var(--ease); height:0; overflow:hidden; }
.zone.is-open{ flex-grow: 4.2; }
.zone.is-open p{ opacity:1; transform:none; height:auto; transition-delay:.15s; }
.zone.is-open::before{ background: linear-gradient(180deg, rgba(10,10,11,.1) 0%, rgba(10,10,11,.82) 100%); }
@media (max-width: 800px){
  .zones{ flex-direction:column; height:auto; }
  .zone{ flex: none; min-height: 112px; transition: min-height .6s var(--ease); }
  .zone.is-open{ min-height: 260px; }
  .zone h3{ white-space:normal; }
}

/* Cases: asymmetric image cards */
.case-grid{ display:grid; grid-template-columns: 7fr 5fr; gap: 20px; align-items:start; }
.case-card{ background: var(--surface); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.case-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case-photo{ background: #20282c; overflow:hidden; }
.case-photo img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.case-card:hover .case-photo img{ transform: scale(1.04); }
.case-photo.r16x10{ aspect-ratio: 16/10; }
.case-photo.r4x3{ aspect-ratio: 4/3; }
.case-card:nth-child(2){ margin-top: clamp(0px, 8vw, 120px); }
.case-body{ padding: clamp(24px, 3vw, 36px); }
.case-meta{ font-family: var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-bottom: 14px; }
.case-body h3{ font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 14px; }
.case-body > p{ color: var(--ink-2); font-size:.95rem; }
.case-body ul{ margin-top: 20px; display:grid; gap: 10px; }
.case-body li{ display:flex; gap:10px; font-size:.9rem; color: var(--ink-2); }
.case-body li .ph{ color: var(--ink); background: var(--accent); border-radius:50%; width:20px; height:20px; padding:4px; flex:none; margin-top:2px; }

/* Project gallery: natural-height masonry, filterable */
.gallery-head{ margin-top: clamp(64px, 8vw, 112px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-bottom: 28px; }
.gallery-head h3{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font: inherit; font-size:.88rem; font-weight:500; padding: 9px 16px; border-radius:999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); cursor:pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .3s var(--ease); }
.chip:hover{ border-color: var(--ink); }
.chip:active{ transform: scale(.97); }
.chip[aria-pressed="true"]{ background: var(--ink); color:#fff; border-color: var(--ink); }
.gallery{ columns: 3; column-gap: 16px; }
.g-item{ break-inside: avoid; margin: 0 0 16px; }
.g-item[hidden]{ display:none; }
.g-media{ border-radius: var(--r-lg); overflow:hidden; background:#20282c; }
.g-media img{ width:100%; height:auto; transition: transform 1.2s var(--ease); }
.g-item:hover .g-media img{ transform: scale(1.04); }
.g-item figcaption{ padding: 12px 4px 0; display:flex; flex-direction:column; }
.g-item strong{ font-weight:600; letter-spacing:-.01em; }
.g-item figcaption span{ font-size:.84rem; color: var(--muted); }
@media (max-width: 1000px){ .gallery{ columns: 2; } }
@media (max-width: 560px){ .gallery{ columns: 1; } }
@media (max-width: 900px){ .case-grid{ grid-template-columns: 1fr; } .case-card:nth-child(2){ margin-top:0; } }

/* Process: horizontal rail that draws on view */
.process-track{ position:relative; display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 44px; }
.process-track::before, .process-track::after{ content:""; position:absolute; top: 0; left:0; height:2px; }
.process-track::before{ right:0; background: var(--line); }
.process-track::after{ width:100%; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease); }
.process-track.in-view::after{ transform: scaleX(1); }
.process-step .ico{ width:52px; height:52px; border-radius: var(--r-md); background: var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom: 22px; }
.process-step .ico .ph{ font-size:1.5rem; }
.process-step h3{ margin-bottom: 10px; font-size:1.1rem; }
.process-step p{ color: var(--muted); font-size:.92rem; margin:0; }
@media (max-width: 900px){ .process-track{ grid-template-columns: 1fr 1fr; row-gap: 48px; } }
@media (max-width: 560px){ .process-track{ grid-template-columns: 1fr; } }

/* Why us */
.whyus-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 96px); align-items:start; }
.whyus h2{ margin-bottom: 40px; }
.whyus-list{ display:grid; gap: 28px; }
.whyus-list li{ display:grid; grid-template-columns: 44px 1fr; gap: 16px; }
.whyus-list .ico{ width:44px; height:44px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); display:flex; align-items:center; justify-content:center; }
.whyus-list strong{ display:block; font-size:1.02rem; letter-spacing:-.015em; margin-bottom:2px; }
.whyus-list span{ color: var(--muted); font-size:.92rem; }
.whyus-panel{ background: var(--ink); color:#fff; border-radius: var(--r-lg); padding: clamp(28px, 3.5vw, 44px); position: sticky; top: 110px; }
.whyus-panel h3{ font-size:1.25rem; margin-bottom: 28px; }
.brands{ display:grid; gap: 0; margin-bottom: 28px; }
.brands > *{ display:flex; align-items:center; height: 64px; font-size:1.3rem; font-weight:700; letter-spacing:-.03em; color:#fff; }
.brands > * + *{ border-top: 1px solid rgba(255,255,255,.14); }
.brands img{ height: 26px; width:auto; }
.whyus-panel p{ color: rgba(255,255,255,.7); font-size:.92rem; }
@media (max-width: 900px){ .whyus-grid{ grid-template-columns: 1fr; } .whyus-panel{ position:static; } }

/* FAQ */
.faq-grid{ display:grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 96px); align-items:start; }
.faq-intro{ position: sticky; top: 110px; }
.faq-list{ display:grid; gap: 0; }
.faq-item{ border-top: 1.5px solid var(--ink); }
.faq-item:last-child{ border-bottom: 1.5px solid var(--ink); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap: 24px; padding: 26px 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight:600; letter-spacing:-.02em; line-height:1.25; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .ph{ flex:none; width:36px; height:36px; border-radius:50%; background: var(--surface); box-shadow: var(--shadow-sm); display:flex; align-items:center; justify-content:center; transition: transform .45s var(--ease), background .25s ease; }
.faq-item summary:hover .ph{ background: var(--accent); }
.faq-item[open] summary .ph{ transform: rotate(45deg); background: var(--accent); }
.faq-a{ padding: 0 60px 28px 0; color: var(--ink-2); max-width: 68ch; }
.faq-a p{ margin:0; }
@media (max-width: 900px){ .faq-grid{ grid-template-columns: 1fr; } .faq-intro{ position:static; } .faq-a{ padding-right:0; } }

/* Final CTA: full-bleed photo block */
.final-cta{ padding: 12px 12px 12px; }
.final-card{
  position:relative; isolation:isolate; overflow:hidden; border-radius: 32px; color:#fff; background:#1b2327;
  padding: clamp(56px, 8vw, 120px) 24px;
}
.final-card::before{ content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(60% 80% at 10% 100%, rgba(255,212,0,.28), transparent 65%), linear-gradient(180deg, rgba(10,10,11,.6), rgba(10,10,11,.88)); }
.final-inner{ max-width: var(--container); margin:0 auto; display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items:center; }
.final-card h2{ font-size: clamp(2.2rem, 4.8vw, 4rem); letter-spacing:-.045em; max-width: 14ch; }
.final-card .lede{ color: rgba(255,255,255,.88); margin: 24px 0 28px; }
.points{ display:grid; gap:12px; margin-bottom: 36px; }
.points li{ display:flex; gap:12px; align-items:center; font-weight:500; }
.points .ph{ color: var(--ink); background: var(--accent); border-radius:50%; width:22px; height:22px; padding:4px; }
.contact-list{ display:grid; gap: 0; border-top: 1px solid rgba(255,255,255,.22); }
.contact-list li{ display:grid; grid-template-columns: 24px 110px 1fr; gap:12px; align-items:center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.22); font-size:.95rem; }
.contact-list .ph{ color: var(--accent); width:1.3rem; height:1.3rem; }
.contact-list span{ color: rgba(255,255,255,.7); }
.contact-list a{ font-weight:600; overflow-wrap:anywhere; border-bottom:1.5px solid transparent; justify-self:start; transition: border-color .25s ease; }
.contact-list a:hover{ border-color: var(--accent); }
@media (max-width: 960px){ .final-inner{ grid-template-columns: 1fr; } }
@media (max-width: 480px){ .contact-list li{ grid-template-columns: 24px 1fr; } .contact-list li a{ grid-column: 2; } }

/* Lead form */
.form-card{ background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.form-card h3{ font-size: 1.4rem; margin-bottom: 22px; }
.field{ margin-bottom: 16px; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label{ display:block; font-size:.86rem; font-weight:600; margin-bottom: 7px; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field textarea{
  width:100%; font: inherit; font-size:1rem; color: var(--ink); background:#fff; padding: 14px 16px;
  border: 1.5px solid #c9c9cf; border-radius: var(--r-md); transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder{ color:#6b6b73; }
.field input:hover, .field textarea:hover{ border-color: var(--ink-2); }
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,212,0,.55); }
.field input[aria-invalid="true"]{ border-color: #b42318; }
.err{ margin: 6px 0 0; font-size:.84rem; color:#b42318; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:.86rem; color: var(--ink-2); font-weight:400; cursor:pointer; }
.check input{ appearance:none; flex:none; width:22px; height:22px; margin-top:1px; border:1.5px solid #c9c9cf; border-radius:6px; background:#fff; cursor:pointer; display:grid; place-content:center; transition: background .2s ease, border-color .2s ease; }
.check input::before{ content:""; width:11px; height:6px; border-left:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink); transform: rotate(-45deg) scale(0); margin-top:-2px; transition: transform .2s var(--ease); }
.check input:checked{ background: var(--accent); border-color: var(--accent); }
.check input:checked::before{ transform: rotate(-45deg) scale(1); }
.check input:focus-visible{ outline: 3px solid var(--ink); outline-offset: 2px; }
.check a{ text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }
.form-card .btn-primary{ margin-top: 6px; }
.form-card .btn:disabled{ opacity:.7; cursor:progress; }
.form-error{ margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-md); background:#fdecea; color:#8a1c12; font-size:.9rem; }
.form-ok{ text-align:center; padding: 24px 0; }
.form-ok .ph{ width:3rem; height:3rem; color: var(--ink); background: var(--accent); border-radius:50%; padding:10px; margin: 0 auto 18px; }
.form-ok p{ color: var(--ink-2); max-width: 38ch; margin: 0 auto; }
.form-card[hidden], form[hidden], .form-ok[hidden]{ display:none; }
@media (max-width: 520px){ .field-row{ grid-template-columns: 1fr; gap:0; } }

/* Footer */
.site-footer{ padding: 72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-brand img{ height: 34px; width:auto; margin-bottom: 18px; }
.site-footer address{ font-style: normal; color: var(--ink-2); font-size:.95rem; }
.site-footer p{ color: var(--muted); font-size:.92rem; max-width: 36ch; }
.site-footer h4{ font-family: var(--font-mono); font-size:.74rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); margin-bottom: 18px; }
.site-footer ul{ display:grid; gap: 10px; font-size:.95rem; }
.site-footer a:hover{ text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.footer-bottom{ margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.8rem; color: var(--muted); }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } }

/* Floating contact */
.whatsapp-float{
  position: fixed; right: 22px; bottom: 22px; z-index: var(--z-float);
  width:58px; height:58px; border-radius:50%; background: var(--ink); color: var(--accent);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md);
  transition: transform .4s var(--ease), background .25s ease, color .25s ease;
}
.whatsapp-float .ph{ width:1.7rem; height:1.7rem; }
.whatsapp-float:hover{ background: var(--accent); color: var(--ink); transform: scale(1.08); }
.sticky-cta{ position: fixed; left:0; right:0; bottom:0; z-index: var(--z-sticky); display:none; gap:10px; padding:10px 14px; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border-top:1px solid var(--line); }
.sticky-cta .btn{ padding: 13px 18px; }
.sticky-cta .btn-primary{ flex: 2; }
.sticky-cta .btn-dark{ flex: 1; }
@media (max-width: 720px){ .sticky-cta{ display:flex; } .whatsapp-float{ display:none; } body{ padding-bottom: 76px; } }

.skip-link{ position:absolute; left:-999px; top:auto; background: var(--ink); color:#fff; padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--r-md) 0; }
.skip-link:focus{ left:0; top:0; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Motion: staggered reveal, only when the user has no reduced-motion preference */
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].in-view{ opacity:1; transform:none; }
  .js .hero-card .eyebrow, .js .hero-card h1, .js .hero-card .lede, .js .hero-card .cta-row{ opacity:0; transform: translateY(24px); animation: rise 1s var(--ease) forwards; }
  .js .hero-card .eyebrow{ animation-delay:.1s; }
  .js .hero-card h1{ animation-delay:.22s; }
  .js .hero-card .lede{ animation-delay:.36s; }
  .js .hero-card .cta-row{ animation-delay:.5s; }
  .hero-card .media-bg{ transform: scale(1.06); animation: settle 2.4s var(--ease) forwards; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
  @keyframes settle{ to{ transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .process-track::after{ transform: scaleX(1); }
}

/* Text-style buttons (footer, cookie banner) */
.linklike{ font: inherit; font-size:inherit; background:none; border:0; padding:0; color: inherit; cursor:pointer; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness:2px; text-underline-offset:4px; }
.linklike:hover{ text-decoration-color: var(--ink); }
.legal-links{ display:flex; flex-wrap:wrap; gap: 6px 20px; }
.btn-outline-dark{ background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-outline-dark:hover{ background: var(--ink); color:#fff; transform: translateY(-2px); }

/* Cookie banner */
.cookie{
  position: fixed; left: 16px; bottom: 16px; z-index: var(--z-cookie); width: min(440px, calc(100% - 32px));
  background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: 24px;
  box-shadow: inset 0 1px 0 #fff, 0 30px 80px -20px rgba(15,15,16,.45), 0 0 0 1px var(--line);
}
.cookie[hidden]{ display:none; }
.ck-title{ font-weight:600; font-size:1.1rem; letter-spacing:-.02em; margin:0 0 8px; }
.ck-text{ font-size:.9rem; color: var(--ink-2); margin:0 0 18px; }
.ck-text a{ text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }
.ck-panel{ display:grid; gap:12px; margin: 0 0 18px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ck-panel[hidden]{ display:none; }
.switch{ display:grid; grid-template-columns: auto 1fr; gap:12px; align-items:start; font-size:.86rem; color: var(--ink-2); cursor:pointer; }
.switch strong{ display:block; color: var(--ink); font-weight:600; }
.switch input{ appearance:none; width:40px; height:24px; border-radius:999px; background:#c9c9cf; position:relative; cursor:pointer; transition: background .25s ease; margin-top:1px; }
.switch input::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .3s var(--ease); }
.switch input:checked{ background: var(--ink); }
.switch input:checked::after{ transform: translateX(16px); background: var(--accent); }
.switch input:disabled{ opacity:.6; cursor:not-allowed; }
.switch input:focus-visible{ outline: 3px solid var(--ink); outline-offset: 2px; }
.ck-actions{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.ck-actions .btn{ padding: 13px 16px; }
.ck-more{ margin-top: 14px; font-size:.86rem; display:flex; gap:20px; }
@media (prefers-reduced-motion: no-preference){ .cookie:not([hidden]){ animation: rise .7s var(--ease) both; } }
@media (max-width: 720px){ .cookie{ left: 12px; right: 12px; bottom: 12px; width:auto; } }

/* Legal pages */
.legal-page .site-header .bar{ justify-content: space-between; }
.legal{ padding: 140px 0 80px; }
.container.narrow{ max-width: 820px; }
.legal h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 12px; }
.legal-meta{ color: var(--muted); font-size:.9rem; }
.legal .lede{ margin: 20px 0 40px; }
.legal section{ padding: 0; margin: 0 0 36px; }
.legal h2{ font-size: 1.35rem; letter-spacing:-.02em; margin-bottom: 12px; }
.legal p, .legal li{ color: var(--ink-2); max-width: 70ch; }
.legal ul{ display:grid; gap:8px; list-style: none; }
.legal a{ text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }
.todo{ background: var(--accent); color: var(--ink); padding: 1px 6px; border-radius: 4px; font-weight:600; }
.legal-table{ width:100%; border-collapse: collapse; font-size:.9rem; background: var(--surface); border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-sm); }
.legal-table th, .legal-table td{ text-align:left; padding: 14px 16px; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table thead th{ font-size:.8rem; color: var(--muted); }
@media (max-width: 700px){
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td{ display:block; }
  .legal-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .legal-table tr{ padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .legal-table td{ border:0; padding: 4px 0; }
  .legal-table td::before{ content: attr(data-label) ": "; color: var(--muted); font-size:.8rem; }
}