/* Alpha Peak Cleaning Services — one stylesheet.
   Commercial / B2B direction (30 sep 2026): charcoal + white + the logo green as a restrained accent. */
:root {
  --bg: #0e1116;             /* charcoal; never pure black */
  --panel: #151a21;
  --panel-2: #1c222b;
  --line: rgba(255, 255, 255, .09);
  --fg: #f2f4f7;
  --mute: #9aa3ae;
  --paper: #f3f4f6;          /* light sections */
  --paper-2: #e7eaee;
  --ink: #12161c;
  --ink-mute: #56606b;
  --ink-line: rgba(18, 22, 28, .12);
  --green: #2cd3a3;          /* measured from the logo */
  --blue: #0280ce;
  --sky: #92c9fc;
  --accent: var(--green);
  --warn: #ffd27a;
  --display: 'Lexend', system-ui, sans-serif;   /* the geometric "Alpha Peak" wordmark */
  --text: 'Inter', system-ui, sans-serif;
  --pad: clamp(16px, 5vw, 80px);
  --radius: 8px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.6 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 6px; background: var(--fg); color: var(--ink); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.light :focus-visible { outline-color: var(--blue); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; }
.eyebrow, .mono { font: 500 12px var(--text); letter-spacing: .28em; text-transform: uppercase; }
.eyebrow { color: var(--mute); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ''; flex: none; width: 22px; height: 2px; background: var(--accent); }
.light .eyebrow { color: var(--ink-mute); }
.light .eyebrow::before { background: var(--blue); }

/* Icons: line icons as masks, so they take the text colour */
.ic { flex: none; display: inline-block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic-phone { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z"/></svg>'); }
.ic-mail { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><rect x="3" y="5" width="18" height="14" rx="1.5"/><path d="m3.5 6 8.5 7 8.5-7"/></svg>'); }
.ic-wa { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 1.8a8.2 8.2 0 1 1-4.2 15.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 0 1 12 3.8zM8.6 7.3c-.2 0-.5 0-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3 2.4 1 2.9.8 3.4.7.5 0 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4l-.5-.3-1.9-.9c-.3-.1-.4-.1-.6.1l-.9 1.1c-.1.2-.3.2-.6.1-.3-.1-1.1-.4-2.1-1.3-.8-.7-1.3-1.5-1.5-1.8-.1-.3 0-.4.1-.5l.4-.5.3-.4v-.5l-.9-2.1c-.2-.5-.4-.5-.6-.5h-.5z"/></svg>'); }
.ic-ig { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r=".9" fill="black"/></svg>'); }
.ic-arrow { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15M13 6l6 6-6 6"/></svg>'); }
.ic-shield { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round"><path d="M12 2.8 4.5 5.6v6c0 4.6 3.1 8.2 7.5 9.6 4.4-1.4 7.5-5 7.5-9.6v-6z"/><path d="m8.6 12 2.4 2.4 4.4-4.6" stroke-linecap="round"/></svg>'); }
.ic-building { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round"><path d="M4 21V5.5L12 3v18M12 8.5l8 2.5v10M2.5 21h19"/><path d="M7 8h2M7 11.5h2M7 15h2M15 13.5h2M15 17h2" stroke-linecap="round"/></svg>'); }
.ic-calendar { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round"><rect x="3.5" y="5" width="17" height="15.5" rx="1.5"/><path d="M3.5 9.5h17M8 3v4M16 3v4M7.5 13.5h2M11 13.5h2M14.5 13.5h2M7.5 17h2M11 17h2"/></svg>'); }
.ic-pin { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5"><path d="M12 21.5s7-7.1 7-12.2a7 7 0 0 0-14 0c0 5.1 7 12.2 7 12.2z"/><circle cx="12" cy="9.3" r="2.6"/></svg>'); }
.ic-office { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linejoin="round"><rect x="5" y="2.5" width="14" height="18.5"/><path d="M2.5 21h19M10 21v-3.5h4V21M8 6h2M14 6h2M8 9.5h2M14 9.5h2M8 13h2M14 13h2" stroke-linecap="round"/></svg>'); }
.ic-condo { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linejoin="round"><path d="M3.5 21V9l5-2v14M8.5 21V4l7-1.5V21M15.5 8l5 2v11M2 21h20"/><path d="M11 6.5h2M11 10h2M11 13.5h2M11 17h2M5.5 12h1M5.5 15.5h1M17.5 13h1M17.5 16.5h1" stroke-linecap="round"/></svg>'); }
.ic-bag { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linejoin="round"><path d="M5 8h14l-1 13H6z"/><path d="M9 10V6.5a3 3 0 0 1 6 0V10" stroke-linecap="round"/></svg>'); }
.ic-medical { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linejoin="round"><path d="M9 3.5h6V9h5.5v6H15v5.5H9V15H3.5V9H9z"/></svg>'); }
.ic-factory { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linejoin="round"><path d="M3 21V11l5 3v-3l5 3v-3l5 3V4h3v17z"/><path d="M2 21h20M7 17.5h2M11.5 17.5h2" stroke-linecap="round"/></svg>'); }
.ic-school { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linejoin="round"><path d="M12 3 2.5 8 12 13l9.5-5z"/><path d="M6 10v5.5c0 1.5 2.7 3 6 3s6-1.5 6-3V10M21.5 8v6" stroke-linecap="round"/></svg>'); }
.ic-key { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linejoin="round"><path d="M3 11.5 12 4l9 7.5M5 10v11h14V10"/><circle cx="12" cy="13" r="2"/><path d="M12 15v3.5M12 17h1.5" stroke-linecap="round"/></svg>'); }
.ic-user { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5"><circle cx="12" cy="8" r="3.8"/><path d="M4.5 20.5c.8-3.8 3.8-6 7.5-6s6.7 2.2 7.5 6" stroke-linecap="round"/></svg>'); }
.ic-list { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="3.5" width="15" height="17.5" rx="1.5"/><path d="M9 3.5V2.5h6v1M8 9h8M8 12.5h8M8 16h5"/></svg>'); }
.ic-check { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12.2 2.8 2.8L16.2 9.5"/></svg>'); }
.ic-tools { --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3v10M4.5 13h5l-1 8h-3zM14 21v-6.5c0-1.8 1.4-3.2 3.2-3.2h.3c1.8 0 3.2 1.4 3.2 3.2V21M17.3 11.3V3"/></svg>'); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 26px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--ink); font: 500 15px var(--text); text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, border-color .2s, color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn .ic { width: 18px; height: 18px; }
.btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-light:hover { background: var(--paper-2); border-color: var(--paper-2); }
.btn-ghost { background: transparent; color: var(--fg); border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7); }
.btn-sm { min-height: 42px; padding: 10px 18px; font-size: 14px; }
.btn-icon { padding-inline: 16px; }

/* Header */
.top { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 28px; padding: 18px var(--pad); transition: background .3s, padding .3s; }
.top.scrolled { background: rgba(14,17,22,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding-block: 10px; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo .mark-logo { height: 58px; width: auto; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { font: 400 14px var(--text); text-decoration: none; color: #c9d0d8; transition: color .2s; }
.nav a:hover { color: #fff; }
.nav-extra { display: none; }
.top-tel { display: flex; align-items: center; gap: 8px; font: 500 14px var(--text); text-decoration: none; color: #fff; white-space: nowrap; }
.top-tel .ic { width: 16px; height: 16px; color: var(--accent); }
.top > .btn { background: #fff; border-color: #fff; }
.menu { display: none; margin-left: auto; background: none; border: 0; width: 44px; height: 44px; position: relative; cursor: pointer; color: var(--fg); }
.menu i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .3s, top .3s; }
.menu i:first-child { top: 18px; } .menu i:last-child { top: 25px; }
.menu[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.menu[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }

/* 01 Hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 130px var(--pad) 0; }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--panel); }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 70% 40%); opacity: 0; transform: scale(1.05); transition: opacity 1.6s ease, transform 9s linear; }
.hero-media img.on { opacity: 1; transform: scale(1); }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(14,17,22,.95), rgba(14,17,22,.86) 44%, rgba(14,17,22,.2) 70%), linear-gradient(to bottom, rgba(14,17,22,.55), transparent 22%, transparent 62%, rgba(14,17,22,.92)); }
.hero > *:not(.hero-media) { position: relative; z-index: 1; }
.hero-text { max-width: 980px; padding-bottom: clamp(40px, 8vh, 88px); }
.hero .eyebrow { color: #d7dde4; }
.hero h1 span { display: block; }
.hero h1 { font-size: clamp(42px, 6vw, 88px); font-weight: 600; margin: 0; letter-spacing: -.035em; line-height: 1.02; }
.hero .lead { font-size: clamp(17px, 1.4vw, 20px); color: #d7dde4; margin: 26px 0 34px; max-width: 54ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* 02 Trust strip */
.trust { list-style: none; margin: 0 calc(var(--pad) * -1); padding: 26px var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; border-top: 1px solid var(--line); background: rgba(14,17,22,.72); backdrop-filter: blur(10px); }
.trust li { display: flex; gap: 14px; align-items: flex-start; padding-right: 16px; }
.trust li + li { border-left: 1px solid var(--line); padding-left: 20px; }
.trust .ic { width: 30px; height: 30px; color: var(--accent); }
.trust b { display: block; font: 500 15px var(--text); }
.trust span { display: block; font-size: 13.5px; color: var(--mute); margin-top: 2px; }

/* Light sections */
.light { background: var(--paper); color: var(--ink); }
.light .head > p, .light .sub { color: var(--ink-mute); }

/* Industries band */
.industries { padding: 44px var(--pad) 48px; display: grid; grid-template-columns: minmax(240px, .8fr) 2.2fr; gap: 32px; align-items: center; }
.ind-head h2 { font-size: clamp(22px, 2vw, 28px); margin: 0; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.ind-head .eyebrow { margin-bottom: 12px; }
.ind-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ind-list a { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 6px; border-radius: 8px; text-align: center; text-decoration: none; font-size: 13.5px; color: var(--ink); line-height: 1.3; transition: background .2s; }
.ind-list a:hover { background: var(--paper-2); }
.ind-list .ic { width: 36px; height: 36px; color: #3b4652; }

/* Sections */
section.block { position: relative; padding: clamp(80px, 12vh, 140px) var(--pad); }
section.block:not(.light) + section.block:not(.light) { border-top: 1px solid var(--line); }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; flex-wrap: wrap; margin-bottom: clamp(36px, 6vh, 60px); }
.head > div { max-width: 760px; }
.head h2, .quote h2 { font-size: clamp(34px, 4.2vw, 60px); margin: 0; }
.std-grid h2, .areas h2, .faq-grid h2 { font-size: clamp(32px, 3.4vw, 50px); margin: 0; }
.head > p { max-width: 44ch; color: var(--mute); margin: 0; }

/* 03 Services */
.svc-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.svc-photo { position: sticky; top: 100px; margin: 0; }
.svc-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); filter: saturate(.8); }
.svc-photo figcaption { margin-top: 12px; font-size: 13px; color: var(--mute); }
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc-list li { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line); }
.svc-list .n { font: 500 13px var(--display); color: var(--accent); padding-top: 5px; letter-spacing: .06em; }
.svc-list h3 { font-size: clamp(20px, 1.7vw, 24px); margin: 0 0 6px; }
.svc-list p { margin: 0; color: var(--mute); max-width: 56ch; }
.svc-list li > a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font: 500 14px var(--text); color: var(--fg); text-decoration: none; white-space: nowrap; }
.svc-list li > a .ic { width: 16px; height: 16px; color: var(--accent); transition: transform .25s; }
.svc-list li > a:hover .ic { transform: translateX(4px); }
.also { margin: 28px 0 0; color: var(--mute); }
.also a { color: var(--fg); }

/* Property & facility managers */
.mgr { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mgr > div { background: var(--bg); padding: 30px 28px 34px; }
.mgr dt { display: flex; flex-direction: column; gap: 18px; font: 500 19px/1.25 var(--display); letter-spacing: -.01em; }
.mgr dt .ic { width: 28px; height: 28px; color: var(--accent); }
.mgr dd { margin: 10px 0 0; color: var(--mute); }

/* 06 Process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.steps li { position: relative; padding: 26px 22px 8px 0; }
.steps li::before { content: ''; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.steps .n { display: block; margin-top: 8px; font: 500 13px var(--display); color: var(--blue); letter-spacing: .06em; }
.steps h3 { margin: 10px 0 8px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.15; }
.steps p { margin: 0; color: var(--ink-mute); font-size: 15px; }

/* On the job */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(180px, 20vw, 300px); gap: 10px; }
.gallery figure { position: relative; margin: 0; border-radius: 6px; overflow: hidden; background: var(--panel); }
.gallery figure.tall { grid-column: span 2; grid-row: span 2; }
.gallery figure.alto { grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 12px; border-radius: 99px; background: rgba(14,17,22,.8); backdrop-filter: blur(6px); font-size: 13px; display: flex; align-items: baseline; gap: 10px; }
.gallery figcaption b { font: 500 11px var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }

/* 07 Standards */
.std-grid, .areas-grid, .faq-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.sub { color: var(--mute); margin: 20px 0 0; max-width: 44ch; }
.creds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.creds li { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.creds .ic { width: 26px; height: 26px; color: var(--accent); }
.creds b { display: block; font: 500 16px var(--text); }
.creds span { display: block; color: var(--mute); font-size: 14px; margin-top: 4px; }

/* 08 Areas */
.areas { background: var(--panel) url(../brand/pattern.svg) right -20px center / 80px auto; background-clip: padding-box; }
.areas::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--panel) 50%, rgba(21,26,33,.88) 75%, rgba(21,26,33,.7)); }
.areas > * { position: relative; }
.areas-grid { align-items: end; }
.areas p { color: #c9d0d8; margin: 0 0 24px; max-width: 52ch; font-size: 17px; }

/* 10 FAQ */
.faq { border-top: 1px solid var(--ink-line); }
.faq details { border-bottom: 1px solid var(--ink-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 64px; padding: 16px 0; font: 500 17px var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { margin: 0 0 22px; color: var(--ink-mute); max-width: 62ch; }
.faq-grid .sub a { color: var(--ink); }

/* 11 Quote */
.quote-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.card { position: relative; overflow: hidden; margin-top: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px 22px; max-width: 420px; }
.card::after { content: ''; position: absolute; right: -30px; top: -30px; width: 50%; height: 70%; background: url(../brand/pattern.svg) 0 0 / 58px auto; opacity: .3; -webkit-mask-image: linear-gradient(225deg, #000 30%, transparent 75%); mask-image: linear-gradient(225deg, #000 30%, transparent 75%); }
.card > * { position: relative; z-index: 1; }
.card .name { font: 500 22px/1 var(--display); margin: 0; }
.card .role { font: 500 12px var(--text); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); margin: 8px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.card a { display: flex; align-items: center; gap: 12px; padding: 4px 0; min-height: 42px; font-size: 16px; text-decoration: none; }
.card a .ic { color: var(--accent); }
.card a:hover { color: var(--accent); }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: clamp(20px, 3vw, 36px); }
.fields .full { grid-column: 1 / -1; }
.fields label > span { display: block; font: 500 13px var(--text); color: #c9d0d8; margin-bottom: 6px; }
.form-title { margin: 0 0 4px; font: 500 22px var(--display); letter-spacing: -.01em; }
.fields select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px !important; background: var(--bg) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%239aa3ae" stroke-width="1.5"/></svg>') right 14px center / 12px no-repeat !important; }
.fields input, .fields textarea, .fields select { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,.14); background: var(--bg); color-scheme: dark; }
.fields input:focus, .fields textarea:focus, .fields select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44,211,163,.2); }
.fields .bad input { border-color: var(--warn); }
.fields option { background: var(--panel); color: var(--fg); }
.note { margin: 0; font-size: 13px; color: var(--mute); }
.send { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.msg { margin: 0; padding: 12px 14px; border-radius: 6px; background: rgba(255,210,122,.1); color: var(--warn); font-size: 15px; }
.msg.ok { background: rgba(44,211,163,.1); color: var(--accent); }

/* 12 Footer */
.foot { border-top: 1px solid var(--line); padding: 64px var(--pad) 110px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; color: var(--mute); font-size: 15px; }
.foot .mono { color: var(--fg); margin: 0 0 14px; font-size: 11px; }
.foot a:not(.btn) { display: block; text-decoration: none; padding: 3px 0; }
.foot a:not(.btn):hover { color: var(--fg); }
.foot .area { display: block; margin-top: 10px; color: var(--fg); }
.foot-logo { width: 140px; height: auto; margin-bottom: 18px; }
.foot-brand p { max-width: 34ch; margin: 0 0 20px; }
.foot .copy { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; }
.foot .copy p { margin: 0; }
.foot .copy .legal-links { display: flex; gap: 20px; }
.foot .copy a { padding: 0; }

/* Persistent mobile CTA */
.sticky { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; gap: 8px; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s; }
.sticky .btn { flex: 1; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.sticky .btn-ghost { flex: 0 0 auto; background: rgba(14,17,22,.92); backdrop-filter: blur(8px); }
.sticky.away, .menu-open .sticky { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .top-tel { display: none; }
  .nav { gap: 22px; }
  .industries { grid-template-columns: 1fr; gap: 20px; }
  .ind-list { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
}
@media (max-width: 900px) {
  .nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; padding: var(--pad); gap: 20px; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .nav a { font: 500 34px var(--display); letter-spacing: -.02em; color: var(--fg); }
  .nav.open { opacity: 1; pointer-events: auto; }
  .nav-extra { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
  .nav .nav-extra a { font: 400 17px var(--text); letter-spacing: 0; }
  .nav .nav-extra .btn { background: #fff; border-color: #fff; color: var(--ink); font-weight: 500; align-self: flex-start; }
  .nav-line { display: flex; align-items: center; gap: 12px; color: var(--mute) !important; }
  .nav-line .ic { color: var(--accent); }
  .menu { display: block; }
  .top > .btn { display: none; }
  .logo .mark-logo { height: 48px; }
  /* Móvil: la imagen en una franja arriba y el texto debajo, sin taparla */
  .hero { min-height: 0; padding-top: min(74vw, 470px); }
  .hero-media { background: var(--bg); }
  .hero-media img { height: min(92vw, 560px); object-position: var(--pos-m, 60% 50%); -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
  .hero-media::after { background: linear-gradient(to bottom, rgba(14,17,22,.55), transparent 18%, transparent 40%, rgba(14,17,22,.75) min(70vw, 440px), var(--bg) min(92vw, 560px)); }
  .trust { grid-template-columns: 1fr 1fr; gap: 18px 16px; background: var(--bg); }
  .trust li + li { border-left: 0; padding-left: 0; }
  .trust li { padding-right: 0; }
  .ind-list { grid-template-columns: repeat(4, 1fr); }
  .svc-wrap, .quote-grid, .std-grid, .areas-grid, .faq-grid { grid-template-columns: 1fr; }
  .svc-photo { position: static; }
  .svc-photo img { aspect-ratio: 16 / 10; }
  .mgr { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 46vw; }
  .gallery figure.alto { grid-row: span 1; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .sticky { display: flex; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(38px, 11vw, 48px); }
  .hero-ctas .btn { flex: 1 1 100%; }
  .trust { grid-template-columns: 1fr; }
  .trust .ic { width: 26px; height: 26px; }
  .ind-list { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .ind-list a { flex-direction: row; justify-content: flex-start; text-align: left; padding: 12px; min-height: 56px; background: #fff; }
  .ind-list .ic { width: 26px; height: 26px; }
  .svc-list li { grid-template-columns: 32px 1fr; }
  .svc-list li > a { grid-column: 2; justify-self: start; padding: 0; }
  .mgr { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--ink); padding-left: 22px; row-gap: 22px; }
  .steps li { padding: 0; }
  .steps li::before { left: -30px; top: 2px; }
  .steps .n { margin-top: 0; }
  .fields { grid-template-columns: 1fr; }
  .fields > * { grid-column: 1 / -1; }
  .send .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media img { transform: none; transition: opacity 1.6s ease; }
  .btn:hover { transform: none; }
}

/* Legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 140px var(--pad) 80px; color: #c9d0d8; }
.legal h1 { font-size: clamp(36px, 5vw, 56px); color: var(--fg); margin: 12px 0 8px; }
.legal h2 { font-size: 22px; color: var(--fg); margin: 40px 0 10px; letter-spacing: -.01em; }
.legal a { color: var(--fg); }
.legal .updated, .crumbs { font-size: 14px; color: var(--mute); }
.crumbs a { color: var(--mute); }
.foot-min { padding: 0 var(--pad) 40px; display: block; border-top: 0; }
.foot-min .copy { display: flex; }

/* Tipografía como la versión anterior (30 sep 2026, pedido de Carlos): Lexend en todo,
   ligera en el texto y media en titulares, con los tamaños de antes; el titular, todo en blanco. */
:root { --text: var(--display); }
body { font: 300 16px/1.65 var(--display); }
h1, h2, h3 { font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.hero-text { max-width: none; }
.hero h1 { font-size: clamp(52px, 8vw, 132px); font-weight: 500; letter-spacing: -.02em; line-height: 1; color: #fff; }
.hero h1 span { color: #fff; }
.hero .lead { font-size: clamp(19px, 1.8vw, 24px); font-weight: 400; line-height: 1.4; max-width: 34ch; color: var(--fg); }
.head h2, .quote h2 { font-size: clamp(42px, 6vw, 92px); }
.quote h2 { font-size: clamp(42px, 5vw, 76px); }
.std-grid h2, .areas h2, .faq-grid h2 { font-size: clamp(42px, 5vw, 76px); }
.head > p { max-width: 42ch; }
.svc-list h3 { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 10px; }
.mgr dt { font: 500 clamp(22px, 1.9vw, 28px)/1.15 var(--display); letter-spacing: -.02em; }
.steps h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; }
.steps p, .svc-list p, .mgr dd { font-size: 15px; }
.btn { font: 500 14px var(--display); letter-spacing: .04em; }
.nav a { font: 400 14px var(--display); }
.eyebrow, .mono { font: 500 12px var(--display); letter-spacing: .26em; }
.fields label > span { font: 500 13px var(--display); }
.form-title { font: 500 22px var(--display); }
.faq summary { font: 400 17px var(--display); }
.trust b, .creds b { font: 500 15px var(--display); }
@media (max-width: 900px) { .nav a { font: 500 34px var(--display); letter-spacing: -.02em; } .nav .nav-extra a { font: 400 17px var(--display); } }
@media (max-width: 560px) { .hero h1 { font-size: clamp(40px, 11.4vw, 52px); } }

/* Sin viudas (js/sin-viudas.js): titulares equilibrados y párrafos sin palabra sola al final */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, dt, summary, figcaption, blockquote { text-wrap: pretty; }
@media (max-width: 1180px) { .gallery figcaption { flex-direction: column; align-items: flex-start; gap: 1px; border-radius: 8px; white-space: nowrap; padding: 6px 11px; } }
@media (max-width: 560px) { .gallery figcaption { font-size: 12px; left: 8px; bottom: 8px; } }
/* Las columnas de rejilla no se estiran por una palabra larga */
.std-grid > *, .areas-grid > *, .faq-grid > *, .quote-grid > *, .svc-wrap > *, .head > * { min-width: 0; }
@media (max-width: 560px) { .hero h1 { font-size: clamp(32px, 9vw, 52px); } .head h2, .quote h2 { font-size: clamp(34px, 9.4vw, 92px); } .std-grid h2, .areas h2, .faq-grid h2 { font-size: clamp(32px, 8.6vw, 76px); } }
.std-grid, .faq-grid { grid-template-columns: 1.2fr 1fr; }
.std-grid h2, .faq-grid h2 { font-size: clamp(34px, 3.6vw, 56px); }
@media (max-width: 900px) { .std-grid, .faq-grid { grid-template-columns: 1fr; } }
/* Pie: el correo largo no estira la columna en móviles estrechos */
.foot > * { min-width: 0; }
.foot a { overflow-wrap: anywhere; }
.industries > * { min-width: 0; }
@media (max-width: 360px) { .ind-list a { font-size: 12.5px; padding: 10px; gap: 8px; } .ind-list .ic { width: 22px; height: 22px; } }

/* === Como la referencia de Carlos (30 sep 2026) ===========================
   Cabecera con el logo oficial en horizontal y en blanco (símbolo y letras del
   vectorizado, sin redibujar), titular compacto y en negrita, tira de confianza
   sobre la foto con separadores y banda clara de sectores en una fila. */
.logo { gap: 14px; }
.logo-symbol { height: 44px; width: auto; }
.logo-words { display: flex; flex-direction: column; gap: 7px; }
.logo-wordmark { height: 21px; width: auto; }
.logo-sub { font: 500 9.5px var(--display); letter-spacing: .34em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.top-tel { display: none; }
.nav { gap: 34px; }
.nav a { font: 400 15px var(--display); color: #fff; }
.nav a:hover { color: #fff; opacity: .75; }
.top > .btn { border-radius: 10px; padding: 12px 22px; font-size: 14px; }

.hero .eyebrow { color: #fff; font: 500 12.5px var(--display); letter-spacing: .32em; margin-bottom: 22px; }
.hero .eyebrow::before { display: none; }
.hero h1 { font-size: clamp(44px, 5.6vw, 88px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
.hero .lead { font-size: clamp(17px, 1.3vw, 19.5px); font-weight: 400; line-height: 1.55; max-width: 46ch; margin: 26px 0 36px; }
.hero-ctas .btn { border-radius: 10px; min-height: 52px; padding: 14px 32px; font-size: 15px; letter-spacing: 0; }
.hero-ctas .btn-ghost { border-color: rgba(255,255,255,.85); }

.trust { background: rgba(12,15,20,.55); backdrop-filter: blur(6px); border-top: 1px solid rgba(255,255,255,.08); padding-block: 30px; }
.trust li + li { border-left: 1px solid rgba(255,255,255,.18); padding-left: 34px; }
.trust .ic { color: #fff; width: 34px; height: 34px; }
.trust b { color: #fff; font-weight: 500; }
.trust span { color: #c9d0d8; }

.industries { grid-template-columns: 1fr; gap: 26px; padding: 40px var(--pad) 46px; background: #f5f6f8; }
.ind-head .eyebrow { margin: 0; font: 500 11px var(--display); letter-spacing: .26em; color: #3b4652; }
.ind-head .eyebrow::before { display: none; }
.ind-list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; max-width: 1100px; }
.ind-list a { align-items: flex-start; text-align: left; padding: 8px 0; gap: 14px; font-size: 14px; color: #3b4652; }
.ind-list a:hover { background: none; color: var(--ink); }
.ind-list .ic { width: 34px; height: 34px; color: #5b6673; }

@media (max-width: 900px) {
  .logo-symbol { height: 36px; }
  .logo-wordmark { height: 17px; }
  .logo-sub { font-size: 8px; letter-spacing: .3em; }
  .nav a { font: 500 34px var(--display); }
  .trust li + li { border-left: 0; padding-left: 0; }
  .ind-list { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(38px, 10.6vw, 52px); }
  .ind-list { grid-template-columns: repeat(2, 1fr); }
  .ind-list a { flex-direction: row; align-items: center; background: #fff; padding: 12px; border-radius: 8px; }
  .ind-list .ic { width: 26px; height: 26px; }
}
.logo { min-height: 44px; }

.cities { list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cities li { padding: 7px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; font-size: 14px; color: #fff; }
/* El logotipo pegado a la izquierda de su caja, para que «CLEANING SERVICES» arranque en la misma línea que la A */
.logo-wordmark { object-fit: contain; object-position: left center; }
.logo-words { align-items: flex-start; }

/* «CLEANING SERVICES» exactamente del ancho de «Alpha Peak» (de la A a la K): SVG con textLength
   y las dos piezas con el ancho real del logotipo (1333:208) */
:root { --wm-h: 21px; }
.logo-wordmark { height: var(--wm-h); width: calc(var(--wm-h) * 1333 / 208); }
.logo-sub { display: block; width: calc(var(--wm-h) * 1333 / 208); height: auto; overflow: visible; }
.logo-words { gap: 6px; }
@media (max-width: 900px) { :root { --wm-h: 17px; } }

/* Logo grande al abrir la web (Carlos, 30 sep): arriba del todo el logo sale
   más grande; en cuanto se baja (.scrolled, a 30 px) vuelve al tamaño de siempre. */
.top { --sym-h: 44px; }
.top:not(.scrolled) { --sym-h: 76px; --wm-h: 36px; }
.logo-symbol { height: var(--sym-h); }
.logo-symbol, .logo-wordmark, .logo-sub { transition: height .35s ease, width .35s ease; }
@media (max-width: 900px) {
  .top { --sym-h: 36px; }
  .top:not(.scrolled) { --sym-h: 54px; --wm-h: 26px; }
}
@media (prefers-reduced-motion: reduce) { .logo-symbol, .logo-wordmark, .logo-sub { transition: none; } }

/* Sin el número (30 sep) la tarjeta de servicio ya no necesita la columna
   estrecha de delante: el texto ocupa todo el ancho y el enlace va debajo en móvil. */
.svc-list li { grid-template-columns: 1fr auto; }
@media (max-width: 900px) {
  .svc-list li { grid-template-columns: 1fr; gap: 10px; }
  .svc-list li > a { grid-column: 1; }
}

/* --- Móvil maquetado como pieza gráfica (Carlos, 30 sep) ---------------------
   Quejas: textos a 2-3 palabras por línea y «Quote» montado en los servicios.
   En móvil los textos toman todo el ancho de la columna, los titulares bajan un
   punto para que quepan más palabras por línea, las credenciales ponen el icono
   encima y el pie deja el contacto a lo ancho (el correo ya no se parte). */
@media (max-width: 560px) {
  main p, main li, main dd, .head > p, .sub, .areas p, .faq p, .svc-list p, .hero .lead { max-width: none; }
  .head h2, .quote h2 { font-size: clamp(30px, 8.2vw, 44px); line-height: 1.04; }
  .std-grid h2, .areas h2, .faq-grid h2 { font-size: clamp(29px, 7.8vw, 40px); line-height: 1.04; }
  .creds li { flex-direction: column; gap: 10px; padding: 18px; }
  .foot { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .foot > div:nth-of-type(4) { grid-column: 1 / -1; }
  .foot a:not(.btn) { overflow-wrap: normal; word-break: normal; }
  .foot .area { white-space: nowrap; }
}

/* --- Los tres tonos del logo como recurso (Carlos, 1 oct 2026) ------------------------
   «Usar el azul como recurso: franjas azules en algunas transiciones, y en algunas partes
   los 3 tonos juntos». Tramos con cortes limpios, sin degradado: como las caras del pico. */
:root { --tri: linear-gradient(90deg, var(--green) 0 33.34%, var(--blue) 33.34% 66.67%, var(--sky) 66.67% 100%); }

/* Rótulos de sección: la rayita pasa a los tres tonos */
.eyebrow::before, .light .eyebrow::before { width: 36px; height: 3px; background: var(--tri); }

/* Franja azul entre una parte oscura y una clara */
.ap-band { height: clamp(10px, 1.1vw, 16px); background: var(--blue); }

/* Franja azul con el pico del logo: la cresta apunta hacia arriba, sobre la sección clara */
.ap-peak { height: clamp(46px, 6vw, 84px); background: var(--blue); margin-top: calc(clamp(46px, 6vw, 84px) * -.55);
  clip-path: polygon(0 100%, 0 55%, 44% 55%, 50% 0, 56% 55%, 100% 55%, 100% 100%); position: relative; z-index: 1; }

/* Las tres franjas del logo apiladas, antes del presupuesto */
.ap-tri { display: grid; }
.ap-tri span { height: clamp(6px, .7vw, 10px); }
.ap-tri span:nth-child(1) { background: var(--green); }
.ap-tri span:nth-child(2) { background: var(--blue); }
.ap-tri span:nth-child(3) { background: var(--sky); }

/* Tira de confianza bajo la portada y pie: filete en tres tonos */
.trust { position: relative; border-top: 0; }
.trust::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tri); }
.foot { border-top: 0 !important; position: relative; }
.foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tri); }

/* Fondos ambientales (Higgsfield, 16 oct 2026). Son imágenes generadas, no obra real:
   solo de fondo y oscurecidas, nunca en «On the job» ni como foto de su equipo. */
.areas { background: var(--panel) url(../img/bg-office-2400.webp) center / cover no-repeat; }
.areas::before { background: linear-gradient(100deg, var(--panel) 30%, rgba(21,26,33,.82) 58%, rgba(21,26,33,.35)); }
.managers { position: relative; background: var(--bg) url(../img/bg-corridor-2400.webp) center / cover no-repeat; }
.managers::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,17,22,.55), rgba(14,17,22,.72) 45%, rgba(14,17,22,.9)); }
.managers > * { position: relative; }
.managers .mgr > div { background: rgba(14,17,22,.86); }
@media (max-width: 900px) {
  .areas { background-image: url(../img/bg-office-1200.webp); background-position: 70% center; }
  .areas::before { background: linear-gradient(to bottom, rgba(21,26,33,.55), rgba(21,26,33,.9) 45%, var(--panel) 80%); }
  .managers { background-image: url(../img/bg-corridor-1200.webp); }
}