/* USA Luxury Cleaning · custom CSS only · no front-end framework */

:root {
  --black:#050706;
  --black2:#0a0c0b;
  --paper:#f4efe5;
  --gold:#d6b16d;
  --gold2:#efcd8a;
  /* the metallic ramp used by the gold controls: one coherent family, not five yellows */
  --gold-lite:#f7e0ae;
  --gold-edge:#f0d19a;
  --gold-deep:#c99d50;
  --gold-hi:#f7e3ba;
  --muted:#a8aaa5;
  --line:rgba(214,177,109,.32);
  --white:#fff;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif;
  --max:1480px;
  /* three radii for the whole site: a panel, the media inside it, and a control */
  --radius-panel:18px;
  --radius-media:12px;
  --radius-control:9px;
}

* {
  box-sizing:border-box;
}

[hidden] {
  display:none!important;
}

/* Keyboard focus must always be visible, on every interactive surface. */
:focus-visible {
  outline:2px solid var(--gold2);
  outline-offset:3px;
}


html {
  scroll-behavior:smooth;
  background:var(--black);
}

body.menu-open {
  overflow:hidden;
}

/* With the menu open the page cannot scroll, so the header is pinned to keep the close
   button on screen no matter how far down the visitor had scrolled before opening it. */
body.menu-open .site-header {
  position:fixed;
}

body {
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img {
  max-width:100%;
  display:block;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
}

.skip-link {
  position:absolute;
  left:-999px;
  top:8px;
  z-index:1000;
  background:#fff;
  color:#000;
  padding:10px 14px;
}

.skip-link:focus {
  left:8px;
}

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

.section-shell {
  width:min(var(--max),calc(100% - 64px));
  margin-inline:auto;
}

.section-kicker {
  display:inline-flex;
  align-items:center;
  gap:18px;
  color:var(--gold2);
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.section-kicker:after {
  content:"";
  width:90px;
  height:1px;
  background:var(--gold);
}

.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  padding:20px 32px;
  transition:.25s;
}

.site-header.is-scrolled {
  background:rgba(5,7,6,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.header-inner {
  /* .mobile-menu is a positioned child of this header; without its own layer the brand
     and the close button paint underneath the open overlay and the menu becomes
     impossible to dismiss by tapping. */
  position:relative;
  z-index:61;
  width:min(1560px,100%);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.brand {
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.brand-mark {
  /* canonical ULC monogram, 642x716 master — height-led so the aspect ratio is exact */
  width:auto;
  height:58px;
  flex:0 0 auto;
}

.brand-copy {
  display:flex;
  flex-direction:column;
  min-width:0;
}

.brand-copy strong {
  font-family:var(--serif);
  color:var(--gold2);
  font-size:20px;
  letter-spacing:.15em;
  white-space:nowrap;
}

.brand-copy small {
  font-size:10px;
  letter-spacing:.38em;
  color:var(--gold);
  text-transform:uppercase;
  margin-top:5px;
  white-space:nowrap;
}

.desktop-nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:14px;
}

.desktop-nav>a {
  padding:12px 0;
  border-bottom:1px solid transparent;
  /* a navigation label is a single phrase; "Nuestro Equipo" split across two lines was
     the Spanish header defect. It never breaks now — the band below negotiates the space
     instead of the text. */
  white-space:nowrap;
}

.desktop-nav>a:hover {
  color:var(--gold2);
  border-color:var(--gold);
}

.gold-button, .outline-button {
  /* one shared size so a gold and an outline button never sit side by side at different
     heights or widths */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:34px;
  /* wide enough for the longest label in either language, so a gold and an outline
     button standing together are exactly the same size */
  min-width:150px;
  padding:0 15px;
  font-size:13px;
  white-space:nowrap;
  border-radius:var(--radius-control);
  font-family:var(--serif);
  font-weight:700;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease, background-color .22s ease;
}

.gold-button {
  /* dimensional rather than flat: a lit top edge, a darker base, a soft cast shadow and
     an inner highlight along the upper rim */
  background:linear-gradient(180deg,var(--gold-lite) 0%,#e8c882 40%,var(--gold-deep) 100%);
  color:#100d08;
  border:1px solid var(--gold-edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 6px rgba(120,84,26,.35),
    0 10px 22px rgba(0,0,0,.42),
    0 2px 4px rgba(0,0,0,.28);
}

.gold-button:active {
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(120,84,26,.45),
    0 4px 10px rgba(0,0,0,.36);
}

.gold-button:hover,
.gold-button:focus-visible {
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -2px 6px rgba(120,84,26,.32),
    0 16px 32px rgba(0,0,0,.5),
    0 3px 6px rgba(0,0,0,.3);
}

.outline-button {
  border:1px solid var(--gold);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.28));
  color:#f2efe8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 22px rgba(0,0,0,.38);
}

.outline-button:hover,
.outline-button:focus-visible {
  transform:translateY(-2px);
  border-color:var(--gold2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 14px 28px rgba(0,0,0,.46);
}

.outline-button:active {
  transform:translateY(1px);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
}

.outline-button:hover {
  background:rgba(214,177,109,.08);
}

.is-disabled {
  cursor:not-allowed;
}

.menu-button {
  display:none;
  width:48px;
  height:48px;
  background:transparent;
  border:0;
  padding:8px;
  cursor:pointer;
}

.menu-button span {
  display:block;
  height:1px;
  background:#fff;
  margin:8px 0;
}

.mobile-menu {
  position:fixed;
  inset:0;
  z-index:60;
  /* fully opaque: at .98 the hero headline ghosted through between the nav links */
  background:#050706;
  padding:110px 28px 40px;
  display:grid;
  align-content:start;
  gap:22px;
}

.mobile-menu a {
  font-family:var(--serif);
  font-size:34px;
}

/* The 34px menu-link rule must not swallow the language switcher. */

.mobile-menu .lang-switch {
  font-size:20px;
  gap:12px;
}

.mobile-menu .lang-switch a,
.mobile-menu .lang-switch span {
  font-family:var(--sans);
  font-size:20px;
  letter-spacing:.16em;
}

.hero {
  /* min-height was forcing 720px into a 718px viewport, so the box could never shrink to
     its content. Bounded by the viewport it now adapts instead of padding itself out. */
  height:min(572px,86vh);
  min-height:min(492px,78vh);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#060807;
}

.hero-photo {
  position:absolute;
  inset:0;
  filter:saturate(.78) contrast(1.05);
}

/* Rotated variant. The URL and focal point arrive as custom properties from the nonced
   style block, so only the one selected file is ever referenced. */

.hero-photo-rotated {
  background-image:var(--img-h01);
  background-position:var(--focal-h01,center right);
  background-size:cover;
  background-repeat:no-repeat;
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,5,4,.97) 0%,rgba(3,5,4,.93) 26%,rgba(3,5,4,.70) 50%,rgba(3,5,4,.12) 76%,rgba(3,5,4,.05) 100%),linear-gradient(180deg,rgba(3,5,4,.10) 0%,rgba(3,5,4,.10) 14%,rgba(3,5,4,.34) 30%,rgba(3,5,4,.34) 78%,rgba(3,5,4,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.3),transparent 45%);
}

.hero-content {
  position:relative;
  z-index:2;
  width:min(1560px,calc(100% - 64px));
  height:100%;
  margin:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  /* single offset that clears the header; the old padding + spacer pair pushed the copy
     down twice and opened dead space above and below it */
  /* the header measures ~98px; this guarantees the kicker always clears it, while the
     shorter hero box keeps the band below the copy tight */
  padding-top:124px;
}

.hero-brand-space {
  height:0;
}

.hero-kicker {
  color:var(--gold2);
  font-size:13px;
  font-weight:700;
  letter-spacing:.23em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:25px;
}

.hero-kicker:after {
  content:"";
  width:180px;
  height:1px;
  background:var(--gold);
}

.hero h1 {
  font-family:var(--serif);
  font-weight:400;
  /* One fluid curve across every width. Three separate clamps used to disagree at
     their boundaries: the headline was 85px at 899px and 58px at 919px, a 32% jump
     across one breakpoint. Fitted through 320px->50px and 1440px->100px. */
  font-size:clamp(50px,calc(35.7px + 4.464vw),112px);
  line-height:.91;
  letter-spacing:-.035em;
  margin:28px 0 20px;
  max-width:850px;
}

.hero h1 span, .hero h1 em {
  display:block;
}

.hero h1 em {
  font-style:normal;
  color:var(--gold2);
}

.hero-description {
  font-size:clamp(18px,1.65vw,26px);
  max-width:650px;
  margin:0 0 26px;
}

.hero-actions {
  /* a grid of two equal tracks, so the Spanish label ("Solicitar cotización") cannot make
     one button wider than the other the way a flex row did */
  display:grid;
  grid-template-columns:repeat(2,minmax(0,178px));
  gap:14px;
}

.hero-micro {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.32em;
  color:#d1d2cf;
  margin-top:28px;
}

.hero-side-copy {
  text-transform:uppercase;
  position:absolute;
  z-index:2;
  right:31%;
  top:19%;
  color:rgba(227,193,129,.72);
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.22em;
  line-height:2.7;
  text-align:center;
}

.hero-bottom-copy {
  text-transform:uppercase;
  position:absolute;
  right:40px;
  bottom:36px;
  z-index:2;
  text-align:right;
  font-size:10px;
  letter-spacing:.28em;
  line-height:2;
  color:#d7d8d5;
}

.service-strip {
  background:#050706;
  border-bottom:1px solid var(--line);
  padding:14px 32px;
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  max-width:1560px;
  margin:auto;
}

.service-link {
  /* rounded, individually framed cards: the hard-cornered strip divided by 1px rules read
     as a table rather than as part of this page's language */
  min-height:146px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:26px 18px 22px;
  position:relative;
  border:1px solid rgba(214,177,109,.22);
  border-radius:var(--radius-panel);
  /* raised panel: lit along the top edge, falling away to a darker base, sitting on a
     soft cast shadow */
  background:
    linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 22%,rgba(0,0,0,.28) 100%),
    #0a0c0a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -14px 24px rgba(0,0,0,.45),
    0 12px 26px rgba(0,0,0,.5),
    0 2px 5px rgba(0,0,0,.35);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
}

.service-link:hover,
.service-link:focus-visible {
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -14px 24px rgba(0,0,0,.4),
    0 22px 42px rgba(0,0,0,.58),
    0 3px 7px rgba(0,0,0,.4);
}


.service-link:hover {
  background:linear-gradient(180deg,rgba(214,177,109,.06),transparent);
}

.service-icon {
  /* the bare hairline glyph read as flat clip-art. It now sits on a recessed gold-tinted
     medallion, which is the same lit-edge language as the cards and the buttons. */
  width:62px;
  height:62px;
  margin:0 auto 15px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(120% 120% at 50% 12%,rgba(240,209,154,.16) 0%,rgba(214,177,109,.05) 48%,rgba(0,0,0,.34) 100%),
    #0d0f0d;
  border:1px solid rgba(214,177,109,.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -6px 12px rgba(0,0,0,.55),
    0 6px 14px rgba(0,0,0,.45);
  transition:border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.service-icon svg {
  width:30px;
  height:30px;
  fill:none;
  stroke:var(--gold2);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  /* a hair of lift so the glyph reads as sitting above the plate rather than printed on it */
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.65));
}

.service-link:hover .service-icon,
.service-link:focus-visible .service-icon {
  transform:translateY(-2px);
  border-color:var(--gold2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -6px 12px rgba(0,0,0,.5),
    0 10px 20px rgba(0,0,0,.5);
}

.service-link strong {
  font-family:var(--serif);
  font-size:24px;
  font-weight:400;
}

.service-link small {
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#d2d2cf;
  margin-top:10px;
  line-height:1.8;
}

.service-arrow {
  color:var(--gold);
  position:absolute;
  right:25px;
  bottom:17px;
  opacity:0;
  transform:translateX(-8px);
  transition:.2s;
}

.service-link:hover .service-arrow {
  opacity:1;
  transform:none;
}

.social-copy h2,
.service-content h2,
.related-section h2 {
  font-family:var(--serif);
  font-size:clamp(38px,4.6vw,72px);
  font-weight:400;
  line-height:1;
  margin:16px 0 0;
}

.ad-grid {
  /* Three placements, one row. They only stack on phones, where three across cannot
     hold a usable creative width. */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* Between 900 and 1200 the row is still three across by instruction, so every pixel of
   chrome is given back to the creative: 3 x 300px plus gaps already exceeds a 920px
   viewport, so this is the widest a placement can physically be at these sizes. */
@media (min-width:900px) and (max-width:1199px) {
  .ads-section .section-shell {
    padding-left:12px;
    padding-right:12px;
  }

  .ad-grid {
    gap:12px;
  }

  .ad-slot {
    padding:10px 8px 12px;
  }
}

.ad-slot {
  min-width:0;
}

.adsbygoogle {
  display:block;
  min-height:250px;
}

.social-section {
  padding:65px 0 72px;
  background:radial-gradient(circle at 65% 20%,rgba(118,84,47,.17),transparent 32%),#070908;
  border-bottom:1px solid var(--line);
}

.social-shell {
  width:min(var(--max),calc(100% - 64px));
  margin:auto;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:55px;
  align-items:center;
}

.social-copy h2 em {
  font-style:normal;
  color:var(--gold2);
}

.social-copy>p {
  max-width:520px;
  color:#d4d5d1;
  font-size:17px;
}

.footer-connect {
  margin-top:16px;
}

.social-connect {
  margin:38px 0 26px;
}

.social-connect-label {
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold2);
  margin:0 0 6px;
}

.social-connect-owner {
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:.04em;
  color:#c2c3bf;
  margin:0 0 22px;
}

/* One centred row of monochrome circles. The platforms are Barbara's own profiles, so
   they read as one restrained set in the page's own palette rather than four brand logos. */
.social-platforms {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
  max-width:560px;
  margin:0 auto;
}

.social-platform {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  min-width:0;
  text-decoration:none;
}

.social-logo {
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#141613;
  border:1px solid var(--line);
  transition:border-color .28s ease, background-color .28s ease, transform .28s ease;
}

.social-logo svg {
  width:24px;
  height:24px;
  fill:var(--gold);
  transition:fill .28s ease;
}

.social-platform-label {
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.08em;
  color:#c2c3bf;
  transition:color .28s ease;
}

.social-platform:hover .social-logo,
.social-platform:focus-visible .social-logo {
  border-color:var(--gold2);
  background:#1b1e19;
  transform:translateY(-2px);
}

.social-platform:hover .social-logo svg,
.social-platform:focus-visible .social-logo svg {
  fill:var(--gold2);
}

.social-platform:hover .social-platform-label,
.social-platform:focus-visible .social-platform-label {
  color:var(--gold2);
}

.social-status {
  font-size:11px!important;
  color:#8d8f8a!important;
}

.social-mosaic {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:170px 170px 190px;
  gap:10px;
}

.social-mosaic figure {
  margin:0;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  background:#111;
  transition:border-color .45s ease, box-shadow .45s ease;
}

/* Scroll reveal. The grid rows are fixed heights and the figure is never removed from
   flow, so the reveal moves opacity and transform only and cannot shift layout.
   `.js-reveal` is set by script: without JavaScript the default state below is the
   visible one, so the mosaic is never hidden by a feature that failed to load. */
.js-reveal .social-mosaic figure {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1),
             border-color .45s ease,
             box-shadow .45s ease;
  transition-delay:var(--reveal-delay,0ms);
}

.js-reveal .social-mosaic figure.is-revealed {
  opacity:1;
  transform:none;
}

.js-reveal .social-mosaic figure figcaption {
  opacity:0;
  transform:translateY(8px);
}

.js-reveal .social-mosaic figure.is-revealed figcaption {
  opacity:1;
  transform:none;
}

.social-mosaic img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.75) contrast(1.06);
  transition:.35s;
}

/* Both layers occupy the same box, so a crossfade cannot change the tile's size and the
   caption above them never moves. */
.mosaic-layer {
  position:absolute;
  inset:0;
  transition:opacity .72s ease, transform .72s ease;
}

/* Each tile's framing comes from the per-request rotation custom properties. Doing it
   here rather than in a style attribute keeps style-src free of 'unsafe-inline'. */
[data-mosaic-tile="S01"] .mosaic-layer { object-position:var(--focal-s01,center); }
[data-mosaic-tile="S02"] .mosaic-layer { object-position:var(--focal-s02,center); }
[data-mosaic-tile="S03"] .mosaic-layer { object-position:var(--focal-s03,center); }
[data-mosaic-tile="S04"] .mosaic-layer { object-position:var(--focal-s04,center); }
[data-mosaic-tile="S05"] .mosaic-layer { object-position:var(--focal-s05,center); }

.mosaic-layer.is-front {
  opacity:1;
  transform:scale(1);
  z-index:1;
}

.mosaic-layer.is-back {
  opacity:0;
  transform:scale(1.022);
  z-index:0;
  pointer-events:none;
}

.social-mosaic figure:hover img,
.social-mosaic figure:focus-within img {
  transform:scale(1.035);
}

.social-mosaic figure:hover,
.social-mosaic figure:focus-within {
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(214,177,109,.18), 0 14px 34px rgba(0,0,0,.45);
}

.social-mosaic figure:hover figcaption,
.social-mosaic figure:focus-within figcaption {
  color:var(--gold2);
}

.social-mosaic figcaption {
  position:absolute;
  inset:auto 16px 14px;
  transition:color .35s ease, opacity .55s ease .12s, transform .55s ease .12s;
  color:white;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-family:var(--serif);
  font-size:15px;
  text-shadow:0 1px 8px #000;
}

.social-outro {
  margin-top:30px;
}

.social-outro:before {
  content:"";
  display:block;
  width:56px;
  height:1px;
  background:var(--gold);
  margin-bottom:18px;
}

.social-outro span {
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#cfd0cc;
}

.mosaic-a {
  grid-row:1/3;
}

.mosaic-d {
  grid-row:3;
}

.mosaic-e {
  grid-row:3;
}

.site-footer {
  padding:26px 32px 12px;
  background:#050706;
}

.footer-grid {
  width:min(1560px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:1.15fr .55fr .9fr 1fr .85fr;
  gap:22px 26px;
  padding-bottom:14px;
  align-items:start;
}

.footer-grid>div:not(.footer-brand):not(.footer-cta) {
  border-left:1px solid var(--line);
  padding-left:22px;
}

.site-footer h2 {
  font-size:13px;
  margin:0 0 7px;
}

.site-footer a, .site-footer span {
  display:block;
  color:#b6b8b3;
  font-size:12px;
  line-height:1.5;
  margin:3px 0;
}

.site-footer .brand {
  display:flex;
  align-items:center;
  gap:16px;
  margin:0;
}

.site-footer .brand-mark {
  height:44px;
}

.site-footer .brand-copy {
  display:flex;
  flex-direction:column;
  margin:0;
  font-size:inherit;
}

.footer-cta .gold-button {
  /* the blanket `.site-footer a { display:block }` rule stretched this into a full-width
     slab and wrapped the arrow onto its own line */
  /* the blanket `.site-footer a { display:block }` rule stretched this into a full-width
     slab; it now carries exactly the same size as the hero pair */
  display:inline-flex!important;
  width:auto;
  color:#100d08;
  margin:0 0 9px;
}

.footer-area-column p:last-child {
  margin-bottom:0;
}

.footer-cta-heading {
  font-family:var(--sans);
  font-size:12px!important;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold2);
  margin:0 0 4px!important;
}

/* Footer social: the same monochrome glyphs as the social section, one row, no labels.
   Four platform names as text made this column as tall as the link lists beside it. */
.footer-social {
  display:flex;
  gap:10px;
  margin-top:2px;
}

.footer-social-link {
  width:34px;
  height:34px;
  margin:0!important;
  border-radius:50%;
  display:grid!important;
  place-items:center;
  background:#141613;
  border:1px solid var(--line);
  transition:border-color .28s ease, background-color .28s ease;
}

.footer-social-link svg {
  width:15px;
  height:15px;
  fill:#b6b8b3;
  transition:fill .28s ease;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  border-color:var(--gold2);
  background:#1b1e19;
}

.footer-social-link:hover svg,
.footer-social-link:focus-visible svg {
  fill:var(--gold2);
}

/* ---------------------------------------------------------------------------
   Team directory
   The grid is defined by a minimum card width rather than a fixed column count,
   so one profile and twenty profiles both lay out correctly without a redesign.
   --------------------------------------------------------------------------- */
/* The fourth, optional placement is a single full-width band rather than a three-up row. */
.ad-grid-single {
  grid-template-columns:1fr;
}

.ads-final {
  border-top:0;
}

/* Founder block: the brand mark stands as identity beside the copy. It is not a portrait
   frame, so it does not read as a picture that failed to arrive. */
.team-founder {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px;
  align-items:start;
}

.team-founder-mark {
  width:132px;
  height:132px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  background:
    linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(0,0,0,.28) 100%),
    #0a0c0a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 12px 26px rgba(0,0,0,.45);
}

.team-founder-mark img {
  width:76px;
  height:76px;
  opacity:.95;
}

.team-founder-role {
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold2);
  margin:0 0 14px;
}

@media (max-width:600px) {


  .team-founder {
    grid-template-columns:1fr;
    gap:22px;
  }

  .team-founder-mark {
    width:104px;
    height:104px;
  }
}

.team-grid {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(262px,320px));
  justify-content:start;
  gap:22px;
}

.team-card {
  display:flex;
  flex-direction:column;
  background:#0b0d0b;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  overflow:hidden;
  transition:transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.team-photo {
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#141613;
  display:grid;
  place-items:center;
}

.team-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.8) contrast(1.05);
  transition:transform .42s ease;
}

/* Stand-in for a profile with no approved portrait. It occupies the same box as a
   photograph, so dropping the real image in later changes nothing about the layout. */
.team-monogram {
  font-family:var(--serif);
  font-size:36px;
  letter-spacing:.06em;
  color:var(--gold);
  opacity:.55;
}

.team-card-body {
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.team-name {
  font-family:var(--serif);
  font-weight:400;
  font-size:19px;
  color:#f2efe8;
}

.team-role {
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold2);
}

.team-profile-link {
  margin-top:9px;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--gold2);
  text-decoration:none;
  transition:color .28s ease;
}

.team-profile-link:hover {
  color:var(--gold-hi);
}

.team-card:hover {
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(214,177,109,.16), 0 16px 38px rgba(0,0,0,.45);
}

.team-card:hover .team-photo img {
  transform:scale(1.03);
}

.inline-gold-link {
  color:var(--gold2);
  text-decoration:none;
  letter-spacing:.04em;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color .28s ease, border-color .28s ease;
}

.inline-gold-link:hover {
  color:var(--gold-hi);
  border-color:var(--gold);
}


/* ---------------------------------------------------------------------------
   Brand video: the ambient social film and the click-triggered header modal.
   Two independent systems; neither shares state with the other.
   --------------------------------------------------------------------------- */

.social-video {
  /* An editorial film card, not a band.
     Measured: this film never exceeds 22.8/255 mean luminance, so at near-full content
     width its 16:9 frame reads as a black slab. Constraining it to a card is what makes a
     deliberately dark film look intentional instead of broken. The asset's own darkness
     is recorded as a residual; this is the presentation fix. */
  position:relative;
  margin:0 auto 42px;
  /* Bounded by the viewport as well as by a fixed maximum: on a short or narrow screen a
     720px card would still fill the view, which is the condition that reads as a slab. */
  width:min(720px,52vw,100%);
  max-height:min(405px,42vh);
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  overflow:hidden;
  background:#0a0c0a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.45);
}

.social-video-el {
  display:block;
  width:100%;
  max-height:405px;
  /* the intrinsic ratio holds the band open before a single byte arrives, so attaching
     the source later cannot shift anything */
  aspect-ratio:16/9;
  height:auto;
  object-fit:cover;
  /* A display lift, not an edit to the asset: this film is dark throughout (measured mean
     luminance 22.8/255 at its brightest), so it is presented slightly brighter to stay
     readable in a dark card. The source file is untouched. */
  filter:saturate(.9) contrast(1.02) brightness(1.28);
}

/* Responsive sizing for the film card, declared in one place.
   Bounded by a fixed maximum AND by the viewport, so a deliberately dark film never grows
   into a slab on a short screen. Base -> tablet -> phone in source order, so the cascade
   does not depend on where other media blocks happen to sit in the file. */
@media (max-width:900px) {
  .social-video {
    width:min(560px,60vw,100%);
    max-height:min(315px,34vh);
  }

  .social-video-el {
    max-height:min(315px,34vh);
  }
}

@media (max-width:600px) {
  .social-video {
    width:min(420px,80vw,100%);
    max-height:min(236px,30vh);
  }

  .social-video-el {
    max-height:min(236px,30vh);
  }
}

/* --- header brand lockup as a video trigger --- */
.brand-video-trigger {
  cursor:pointer;
  transition:filter .28s ease;
}

.brand-video-trigger:hover .brand-mark,
.brand-video-trigger:focus-visible .brand-mark {
  /* a restrained gold lift only: no scale, no pulse, no icon over the mark */
  filter:brightness(1.06) drop-shadow(0 0 7px rgba(214,177,109,.42));
}

/* --- modal --- */
.brand-video-overlay {
  position:fixed;
  inset:0;
  /* explicitly above the sticky header (70) and the floating button (80) so the close
     control can never sit behind either */
  z-index:200;
  display:grid;
  place-items:center;
  padding:28px;
  background:rgba(3,5,4,.94);
  opacity:0;
  transition:opacity .28s ease;
}

@supports (backdrop-filter:blur(6px)) {
  .brand-video-overlay {
    backdrop-filter:blur(6px);
  }
}

.brand-video-overlay.is-open {
  opacity:1;
}

.brand-video-dialog {
  position:relative;
  width:min(1180px,100%);
  outline:none;
}

.brand-video-stage {
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-media);
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}

.brand-video-el {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  background:#000;
}

.brand-video-close {
  position:absolute;
  top:-46px;
  right:0;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  font-size:24px;
  line-height:1;
  color:var(--gold2);
  background:#141613;
  border:1px solid var(--line);
  border-radius:50%;
  cursor:pointer;
  transition:border-color .22s ease, background-color .22s ease;
}

.brand-video-close:hover,
.brand-video-close:focus-visible {
  border-color:var(--gold2);
  background:#1b1e19;
}

.brand-video-play {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  min-height:38px;
  padding:0 22px;
  font-family:var(--serif);
  font-size:14px;
  color:#100d08;
  background:linear-gradient(180deg,var(--gold-lite),var(--gold-deep));
  border:1px solid var(--gold-edge);
  border-radius:var(--radius-control);
  cursor:pointer;
}

.brand-video-error {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  color:#e5e2db;
  font-size:15px;
  letter-spacing:.04em;
}

/* Scroll lock that preserves the exact position: the offset is written by script. */
body.brand-video-open {
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}

@media (max-width:900px) {


    .brand-video-overlay {
    padding:18px;
  }

  .brand-video-close {
    top:-44px;
    width:36px;
    height:36px;
  }
}

@media (max-width:600px) {
  /* keep the close control inside the safe area rather than off the top of the dialog */
  .brand-video-dialog {
    width:100%;
  }

  .brand-video-close {
    top:-42px;
  }

  .brand-video-overlay {
    padding:14px;
    padding-top:max(14px,env(safe-area-inset-top));
    padding-bottom:max(14px,env(safe-area-inset-bottom));
  }
}


/* Footer service area. Density matches the link columns beside it: this is information,
   not a second call to action, so there is no panel, no gold rectangle and no link. */
.footer-area-heading {
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold2);
  margin:0 0 6px;
}

.footer-area-pin {
  display:inline-grid;
  place-items:center;
  width:15px;
  height:15px;
}

.footer-area-pin svg {
  width:15px;
  height:15px;
  fill:none;
  stroke:var(--gold);
  stroke-width:1.5;
  stroke-linejoin:round;
}

.footer-area-primary {
  font-family:var(--serif);
  font-size:15px;
  color:#f2efe8;
  margin:0 0 6px;
}

.footer-area-body {
  font-size:12px;
  line-height:1.55;
  color:#b6b8b3;
  margin:0 0 5px;
}

.footer-area-note {
  font-size:11px;
  line-height:1.5;
  color:#8d8f8a;
  margin:0;
}


/* The header is fixed, so an anchor target that lands at scroll position 0 sits behind
   it. Every element an in-page link can address reserves the header's height plus a
   little air, so arriving at a section shows its heading rather than its middle. */
[id] {
  scroll-margin-top:118px;
}

@media (max-width:900px) {
  [id] {
    scroll-margin-top:96px;
  }
}


.contact-note {
  color:#e5e2db!important;
}

.footer-bottom {
  width:min(1560px,100%);
  margin:auto;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:9px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#80827e;
}

/* Development credit: present but quiet. Plain text, so no pointer and no hover
   affordance that would suggest a link that does not exist. */
.footer-credit {
  font-size:12px;
  color:#80827e;
  cursor:default;
}

.footer-credit-studio {
  color:var(--gold);
  letter-spacing:.02em;
}

@media (max-width:600px) {
  .footer-credit {
    font-size:11px;
  }
}

.contact-toast {
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  background:#fff;
  color:#111;
  padding:12px 18px;
  z-index:99;
  border-radius:var(--radius-control);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}

.service-hero {
  /* min-height, not height: a long heading must grow the band rather than push the CTA
     out of it. */
  min-height:520px;
  position:relative;
  display:grid;
  align-items:end;
  border-bottom:1px solid var(--line);
}

/* Pages with no photographic hero (About, Our Team, Contact) were reserving the full
   photographic band and filling it with nothing. They get only the height their copy
   needs.

   The padding lives on the copy, not on the section: putting it in both places stacked
   112px on top of the copy's own 120px and reopened the dead band this class exists to
   close. */
.service-hero-compact {
  min-height:0;
}

.service-hero-compact .service-hero-copy {
  padding-top:126px;
  padding-bottom:54px;
}

.service-hero-bg {
  position:absolute;
  inset:0;
}

.service-hero-rotated {
  background-size:cover;
  background-repeat:no-repeat;
}

.service-hero-rotated[data-pool="sv01"] {
  background-image:var(--img-sv01);
  background-position:var(--focal-sv01,center);
}

.service-hero-rotated[data-pool="sv02"] {
  background-image:var(--img-sv02);
  background-position:var(--focal-sv02,center);
}

.service-hero-rotated[data-pool="sv03"] {
  background-image:var(--img-sv03);
  background-position:var(--focal-sv03,center);
}

.service-hero-rotated[data-pool="sv04"] {
  background-image:var(--img-sv04);
  background-position:var(--focal-sv04,center);
}

/* Mosaic tiles honour their own per-variant focal point. */

.mosaic-a img {
  object-position:var(--focal-s01,center);
}

.mosaic-b img {
  object-position:var(--focal-s02,center);
}

.mosaic-c img {
  object-position:var(--focal-s03,center);
}

.mosaic-d img {
  object-position:var(--focal-s04,center);
}

.mosaic-e img {
  object-position:var(--focal-s05,center);
}

.service-hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,7,6,.98),rgba(5,7,6,.65) 60%,rgba(5,7,6,.25));
}

.service-hero-copy {
  position:relative;
  z-index:2;
  padding-top:120px;
  padding-bottom:70px;
}

.service-hero h1 {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(40px,5.4vw,88px);
  line-height:1.02;
  margin:14px 0;
  max-width:16ch;
}

.service-hero p {
  font-size:20px;
  max-width:750px;
  color:#dedfdb;
}

.service-content {
  padding:80px 0;
}

.service-intro-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
}

.service-intro-grid h2 {
  margin-bottom:22px;
}

.service-intro-grid>div>p {
  font-size:18px;
  color:#c4c5c1;
}

.service-facts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
  border:1px solid rgba(214,177,109,.22);
  border-radius:var(--radius-panel);
  background:
    linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 22%,rgba(0,0,0,.28) 100%),
    #0a0c0a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -14px 24px rgba(0,0,0,.45),
    0 12px 26px rgba(0,0,0,.5),
    0 2px 5px rgba(0,0,0,.35);
}

.service-facts>div {
  padding:26px 28px;
  border-right:1px solid rgba(214,177,109,.18);
}

.service-facts>div:last-child {
  border-right:0;
}

.service-facts h3 {
  font-family:var(--serif);
  color:var(--gold2);
  font-weight:400;
}

.service-facts ul {
  padding-left:18px;
  color:#c7c8c4;
}

.related-section {
  padding:70px 0;
  border-top:1px solid var(--line);
}

.related-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:30px;
}

.related-grid a {
  padding:26px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  border:1px solid rgba(214,177,109,.22);
  border-radius:var(--radius-panel);
  background:
    linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 22%,rgba(0,0,0,.28) 100%),
    #0a0c0a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -14px 24px rgba(0,0,0,.45),
    0 12px 26px rgba(0,0,0,.5),
    0 2px 5px rgba(0,0,0,.35);
}

.related-grid a:hover,
.related-grid a:focus-visible {
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -14px 24px rgba(0,0,0,.4),
    0 22px 42px rgba(0,0,0,.58),
    0 3px 7px rgba(0,0,0,.4);
}

.related-grid strong {
  font-family:var(--serif);
  font-size:24px;
  font-weight:400;
}

.related-grid small {
  color:#aaa;
}

.related-grid span {
  color:var(--gold);
  align-self:flex-end;
}

.error-main {
  min-height:70vh;
  display:grid;
  place-items:center;
  padding:130px 32px 70px;
  text-align:center;
}

.error-main h1 {
  font-family:var(--serif);
  font-size:70px;
  font-weight:400;
  margin:14px;
}


/* ---------------------------------------------------------------------------
   Media placeholders
   Shown only if a rotation pool is not ready. Silent, brand consistent, and carrying
   no text — so the HTML text layer renders exactly once.
   --------------------------------------------------------------------------- */

.media-placeholder {
  width:100%;
  height:100%;
  min-height:150px;
  background:linear-gradient(140deg,#0b0d0c 0%,#141210 48%,#090a09 100%),radial-gradient(circle at 72% 28%,rgba(214,177,109,.13),transparent 58%);
  background-blend-mode:screen;
  border:1px solid rgba(214,177,109,.16);
}

.hero-photo-placeholder {
  background:linear-gradient(115deg,#050706 0%,#0c0e0c 42%,#17130d 72%,#0a0b0a 100%),radial-gradient(circle at 74% 34%,rgba(214,177,109,.17),transparent 56%);
  filter:none;
}

.service-hero-placeholder {
  background:linear-gradient(120deg,#050706 0%,#0d0f0d 46%,#161209 78%,#090a09 100%),radial-gradient(circle at 70% 30%,rgba(214,177,109,.15),transparent 58%);
}

/* ---------------------------------------------------------------------------
   Service pages
   --------------------------------------------------------------------------- */

.breadcrumb {
  margin-bottom:26px;
}

.breadcrumb ol {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#b9bab6;
}

.breadcrumb li {
  display:flex;
  align-items:center;
  gap:10px;
}

.breadcrumb a:hover {
  color:var(--gold2);
}

.breadcrumb-sep {
  color:var(--gold);
  opacity:.6;
}

.breadcrumb [aria-current="page"] {
  color:var(--gold2);
}

.service-hero-headline {
  font-family:var(--serif);
  font-size:clamp(24px,2.6vw,36px);
  color:var(--gold2);
  margin:0 0 16px;
  max-width:780px;
}

.service-hero-intro {
  font-size:19px;
  max-width:760px;
  color:#dedfdb;
  margin:0 0 30px;
}

.service-body {
  padding:10px 0 0;
}

.service-section {
  padding:58px 0;
  border-bottom:1px solid var(--line);
}

.service-section:last-child {
  border-bottom:0;
}

.service-section-head {
  margin-bottom:26px;
}

.service-section h2 {
  font-family:var(--serif);
  font-size:clamp(30px,3.4vw,48px);
  font-weight:400;
  line-height:1.05;
  margin:16px 0 0;
  max-width:900px;
}

.service-section-body {
  max-width:900px;
}

.service-section-body p {
  font-size:17px;
  line-height:1.75;
  color:#c9cac6;
  margin:0 0 18px;
}

.service-list {
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}

.service-list li {
  position:relative;
  padding-left:26px;
  font-size:16px;
  line-height:1.65;
  color:#d3d4d0;
}

.service-list li:before {
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:10px;
  height:1px;
  background:var(--gold);
}

.service-note {
  border-left:2px solid var(--gold);
  padding-left:18px;
  margin-top:26px!important;
  color:#aeb0ab!important;
  font-size:15px!important;
}

.service-inline-link {
  margin-top:26px!important;
}

.service-inline-link a {
  color:var(--gold2);
  border-bottom:1px solid var(--line);
  padding-bottom:4px;
  font-family:var(--serif);
  font-size:17px;
}

.service-inline-link a:hover {
  border-color:var(--gold);
}

.compare-grid {
  /* the same raised panel as every other card on the site */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  overflow:hidden;
  margin-top:28px;
  border:1px solid rgba(214,177,109,.22);
  border-radius:var(--radius-panel);
  background:
    linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 22%,rgba(0,0,0,.28) 100%),
    #0a0c0a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -14px 24px rgba(0,0,0,.45),
    0 12px 26px rgba(0,0,0,.5),
    0 2px 5px rgba(0,0,0,.35);
}

.compare-column {
  padding:28px 28px 26px;
  border-right:1px solid rgba(214,177,109,.18);
}

.compare-column:last-child {
  border-right:0;
}

.compare-column h3 {
  font-family:var(--serif);
  font-weight:400;
  font-size:20px;
  color:var(--gold2);
  margin:0 0 16px;
}

.compare-column ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:11px;
}

.compare-column li {
  position:relative;
  padding-left:20px;
  font-size:15px;
  line-height:1.6;
  color:#cbccc8;
}

.compare-column li:before {
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:7px;
  height:1px;
  background:var(--gold);
}

.service-steps {
  list-style:none;
  counter-reset:step;
  margin:28px 0 0;
  padding:0;
  display:grid;
  gap:18px;
}

.service-steps li {
  counter-increment:step;
  position:relative;
  padding-left:56px;
  min-height:38px;
}

.service-steps li:before {
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold2);
  font-family:var(--serif);
  font-size:16px;
}

.service-steps strong {
  display:block;
  font-family:var(--serif);
  font-size:19px;
  font-weight:400;
  margin-bottom:5px;
}

.service-steps span {
  display:block;
  color:#bdbeba;
  font-size:15px;
  line-height:1.65;
}

.faq-section {
  padding:66px 0;
  background:#070908;
  border-top:1px solid var(--line);
}

.faq-section h2 {
  font-family:var(--serif);
  font-size:clamp(30px,3.4vw,50px);
  font-weight:400;
  margin:16px 0 34px;
}

.faq-list {
  margin:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}

.faq-item {
  border-bottom:1px solid var(--line);
  padding:26px 0;
}

.faq-item dt {
  font-family:var(--serif);
  font-size:21px;
  color:var(--gold2);
  margin-bottom:12px;
}

.faq-item dd {
  margin:0;
  font-size:16px;
  line-height:1.75;
  color:#c5c6c2;
  max-width:920px;
}

.service-cta {
  padding:70px 0 80px;
  border-top:1px solid var(--line);
  text-align:center;
}

.service-cta h2 {
  font-family:var(--serif);
  font-size:clamp(32px,4vw,56px);
  font-weight:400;
  margin:16px 0 18px;
}

.service-cta p {
  color:#c6c7c3;
  font-size:17px;
  max-width:640px;
  margin:0 auto 28px;
}

.service-cta .section-kicker:after {
  display:none;
}


/* Footer owner attribution. A link only exists when the owner profile is enabled. */

.footer-owner {
  margin:16px 0 0;
  font-size:12px;
  color:#b6b8b3;
  line-height:1.6;
}

.footer-owner a,
.footer-owner span {
  display:inline!important;
  margin:0!important;
  color:var(--gold2);
  font-family:var(--serif);
  font-size:13px;
}

.footer-owner a:hover {
  border-bottom:1px solid var(--gold);
}

/* ---------------------------------------------------------------------------
   Google AdSense area
   Rendered only when real AdSense is authorised. Visually separated from navigation
   and service content, labelled plainly as Advertisements, and never styled to
   resemble USA Luxury Cleaning services.
   --------------------------------------------------------------------------- */

.ads-section {
  padding:34px 0;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  background:#040505;
}

/* Three balanced columns on desktop. This grid is the future ad geometry: the real
   AdSense units occupy exactly these containers, so activation changes what is inside
   the boxes and nothing about the layout around them. */


.ad-slot {
  min-width:0;
  background:#0a0b0a;
  border:1px solid rgba(214,177,109,.28);
  border-radius:var(--radius-panel);
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
}

.ad-disclosure {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-size:9px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#9a9c97;
  margin-bottom:12px;
}

.ad-preview-note {
  font-size:8px;
  letter-spacing:.18em;
  color:rgba(214,177,109,.62);
  border:1px solid rgba(214,177,109,.24);
  border-radius:var(--radius-control);
  padding:2px 6px;
  white-space:nowrap;
}

/* The reserved surface.
   280px covers both dominant responsive creative heights (250 and 336x280), so a live
   unit lands inside the box that preview already reserved rather than growing it. The
   preview frame and the live unit share the same reservation. */

.ad-frame,
ins.adsbygoogle {
  display:block;
  flex:1 1 auto;
  min-height:280px;
}

.ad-frame {
  border:1px dashed rgba(214,177,109,.16);
  border-radius:var(--radius-media);
  background:linear-gradient(140deg,rgba(255,255,255,.018),rgba(255,255,255,.004));
}

/* Unfilled units collapse; an all-unfilled region removes itself in site.js. */

ins.adsbygoogle[data-ad-status="unfilled"] {
  display:none!important;
}

/* ---------------------------------------------------------------------------
   Header scrim
   The navigation sits over a rotating photograph whose brightness changes daily. A
   measured contrast pass showed nav links failing WCAG over bright frames, so a minimal
   top-down scrim protects the header band without changing the approved composition.
   --------------------------------------------------------------------------- */

.header-scrim {
  position:absolute;
  inset:0 0 auto;
  height:190px;
  z-index:40;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(3,5,4,.92) 0%,rgba(3,5,4,.78) 42%,rgba(3,5,4,.38) 72%,rgba(3,5,4,0) 100%);
}

/* ---------------------------------------------------------------------------
   Language switcher
   --------------------------------------------------------------------------- */

.lang-switch {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:700;
}

.lang-current {
  color:var(--gold2);
}

.lang-sep {
  color:var(--line);
}

.lang-other {
  color:#cfd0cc;
  padding:4px 2px;
  border-bottom:1px solid transparent;
}

.lang-other:hover {
  color:var(--gold2);
  border-color:var(--gold);
}

.mobile-language {
  margin-top:6px;
}

.mobile-language .lang-switch {
  font-size:18px;
  gap:12px;
}

/* ---------------------------------------------------------------------------
   Floating WhatsApp
   Local SVG, fixed size so it cannot shift layout, clear of the footer and of the
   language switcher.
   --------------------------------------------------------------------------- */

.floating-whatsapp {
  position:fixed;
  opacity:1;
  visibility:visible;
  right:22px;
  bottom:22px;
  z-index:80;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1f2a24;
  border:1px solid var(--gold);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  color:var(--gold2);
  transition:opacity .25s ease, visibility .25s ease, transform .2s ease, background-color .2s ease;
}

/* Advertising must never be covered. Rather than narrowing the ad row to dodge a fixed
   corner button, the button steps aside for as long as it would overlap a placement. */
.floating-whatsapp.is-yielded {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.floating-whatsapp svg {
  fill:currentColor;
  display:block;
}

.floating-whatsapp:hover {
  background:#27332c;
  transform:translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Home promise block
   --------------------------------------------------------------------------- */

.promise-section {
  padding:58px 0;
  border-bottom:1px solid var(--line);
  background:#060807;
}

.promise-section h2 {
  font-family:var(--serif);
  font-size:clamp(28px,3.4vw,46px);
  font-weight:400;
  line-height:1.05;
  margin:16px 0 20px;
  max-width:760px;
}

.promise-body {
  max-width:820px;
  font-size:17px;
  line-height:1.75;
  color:#c9cac6;
  margin:0;
}

.promise-pillars {
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
}

.promise-pillars li {
  position:relative;
  padding-left:18px;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold2);
}

.promise-pillars li:before {
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:8px;
  height:1px;
  background:var(--gold);
}

/* ---------------------------------------------------------------------------
   Contact page
   --------------------------------------------------------------------------- */

.contact-list {
  margin:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
  max-width:760px;
}

.contact-item {
  border-bottom:1px solid var(--line);
  padding:22px 0;
  display:grid;
  grid-template-columns:150px 1fr;
  gap:18px;
  align-items:baseline;
}

.contact-item dt {
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold2);
}

.contact-item dd {
  margin:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.contact-item dd a,
.contact-item dd strong {
  font-family:var(--serif);
  font-size:23px;
  font-weight:400;
  color:#fff;
}

.contact-item dd a:hover {
  color:var(--gold2);
}

.contact-item dd span {
  font-size:14px;
  color:#a9aba6;
}

.footer-area {
  margin:8px 0 0;
  font-size:12px;
  color:#b6b8b3;
}

.footer-contact-line {
  display:block!important;
  color:#c9cac6!important;
  font-size:12px!important;
  line-height:1.5;
  margin:2px 0!important;
}

.footer-contact-line:hover {
  color:var(--gold2)!important;
}

/* ---------------------------------------------------------------------------
   Services hub (/services)
   Same black/gold language as the home service strip, laid out as cards.
   --------------------------------------------------------------------------- */

.hub-services {
  padding:58px 0;
  border-bottom:1px solid var(--line);
  border-top:1px solid var(--line);
  background:#060807;
}

.hub-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:26px;
}

.hub-card {
  /* the same raised-panel language as the home service cards: rounded, lit along the top
     edge, falling away to a darker base, sitting on a soft cast shadow */
  border:1px solid rgba(214,177,109,.22);
  border-radius:var(--radius-panel);
  padding:28px 28px 26px;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 22%,rgba(0,0,0,.28) 100%),
    #0a0c0a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -14px 24px rgba(0,0,0,.45),
    0 12px 26px rgba(0,0,0,.5),
    0 2px 5px rgba(0,0,0,.35);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.hub-card:hover {
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -14px 24px rgba(0,0,0,.4),
    0 22px 42px rgba(0,0,0,.58),
    0 3px 7px rgba(0,0,0,.4);
}

.hub-card .service-icon {
  /* the copy in this card is left-aligned, so a centred medallion read as a mistake */
  margin:0 0 18px;
  width:54px;
  height:54px;
}

.hub-card .service-icon svg {
  width:26px;
  height:26px;
}

.hub-card h3 {
  font-family:var(--serif);
  font-weight:400;
  font-size:25px;
  margin:0 0 9px;
}

.hub-intent {
  color:var(--gold2);
  font-size:11px;
  letter-spacing:.14em;
  line-height:1.7;
  text-transform:uppercase;
  margin:0 0 14px;
}

.hub-summary {
  color:#c4c5c1;
  font-size:15px;
  line-height:1.65;
  margin:0 0 20px;
}

.hub-link {
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--gold2);
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.06em;
  border:1px solid rgba(214,177,109,.28);
  border-radius:var(--radius-control);
  padding:0 15px;
  min-height:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.28));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  align-self:flex-start;
  transition:border-color .24s ease, color .24s ease, transform .24s ease, box-shadow .24s ease;
}

.hub-link:hover {
  transform:translateY(-2px);
  border-color:var(--gold2);
  color:var(--gold-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 20px rgba(0,0,0,.4);
}

/* Between the navigation breakpoint and roughly 1000px the Spanish labels are ~60px
   wider than the English ones and were forced to wrap. The band tightens the gaps and the
   brand lockup only — the type stays readable and the hero is untouched. */
@media (min-width:901px) and (max-width:999px) {
  .desktop-nav {
    gap:18px;
    font-size:13.5px;
  }

  .site-header .brand-mark {
    height:44px;
  }

  .brand-copy strong {
    font-size:17px;
    letter-spacing:.11em;
  }

  .brand-copy small {
    /* 10px is the legibility floor the adversarial sweep enforces; the narrower tracking
       buys back the width the extra half-pixel costs, so the line still does not wrap. */
    font-size:10px;
    letter-spacing:.2em;
  }
}

@media (max-width:1200px) {
  .desktop-nav {
    gap:20px;
  }
  .brand-copy strong {
    font-size:17px;
  }
  .hero-side-copy {
    right:26%;
  }
  .social-shell {
    grid-template-columns:1fr 1.3fr;
  }
  .footer-grid {
    grid-template-columns:1.05fr .5fr .85fr .95fr .8fr;
    gap:18px;
  }
  .service-intro-grid {
    grid-template-columns:1fr;
  }
  .service-facts {
    margin-top:15px;
  }
}

/* between 900 and 1100 the right-aligned hero footnote ran underneath the floating
   WhatsApp button; it reappears once there is room for both */
@media (max-width:1100px) {
  .footer-grid {
    grid-template-columns:1.3fr repeat(2,1fr);
    gap:14px 18px;
  }
  .site-footer .brand-mark {
    height:38px;
  }

  .hero-bottom-copy {
    display:none;
  }
}

@media (max-width:900px) {
  /* Narrow widths stack the grid into three rows, so every row's rhythm counts twice
     over. These trims are what bring the 768 band inside the compaction target. */
  .site-footer a, .site-footer span {
    margin:2px 0;
  }

  .site-footer h2 {
    margin:0 0 6px;
  }

  .site-footer .brand-mark {
    height:34px;
  }

  .footer-contact-line {
    margin:1px 0!important;
  }

  .team-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .social-logo {
    width:52px;
    height:52px;
  }

  .social-logo svg {
    width:22px;
    height:22px;
  }

  .site-header {
    padding:14px 18px;
  }
  .desktop-nav {
    display:none;
  }
  .menu-button {
    display:block;
  }
  .brand-mark {
    width:auto;
    height:48px;
  }
  .brand-copy strong {
    font-size:15px;
  }
  .brand-copy small {
    /* Was 7px. Nothing measured it: the sweep's viewports were 1440, 920 and 390, and at 390
       this line is display:none — so the whole 601-900 band went unchecked and a tagline
       three pixels under the floor sat there unnoticed. The navigation is collapsed to the
       hamburger at these widths, so the brand block has room for a legible line. */
    font-size:10px;
    letter-spacing:.2em;
  }
  .hero {
    height:auto;
    min-height:min(556px,86vh);
  }
  .hero-photo {
    background-position:62% center;
  }
  .hero-overlay {
    background:linear-gradient(90deg,rgba(3,5,4,.96),rgba(3,5,4,.86) 48%,rgba(3,5,4,.4)),linear-gradient(180deg,rgba(3,5,4,.08) 0%,rgba(3,5,4,.30) 28%,rgba(3,5,4,.30) 80%,rgba(3,5,4,.10) 100%),linear-gradient(0deg,rgba(0,0,0,.35),transparent);
  }
  .hero-content {
    width:calc(100% - 36px);
    padding-top:112px;
    padding-bottom:40px;
  }
  .hero-brand-space {
    height:0;
  }
  .hero h1 {
    max-width:690px;
  }
  .hero-description {
    max-width:560px;
  }
  .hero-side-copy, .hero-bottom-copy {
    display:none;
  }
  .service-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .service-link:nth-child(-n+2) {
    border-bottom:1px solid var(--line);
  }
  .section-shell, .social-shell {
    width:calc(100% - 36px);
  }
  .social-shell {
    grid-template-columns:1fr;
  }
  .social-copy {
    max-width:650px;
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
  }
  .footer-brand {
    grid-column:1/-1;
  }
  .footer-grid>div:nth-child(2) {
    border-left:0!important;
    padding-left:0!important;
  }
  .footer-bottom {
    flex-direction:column;
  }
  .service-facts {
    grid-template-columns:1fr;
  }
  .service-facts>div {
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .service-facts>div:last-child {
    border-bottom:0;
  }
  .related-grid {
    grid-template-columns:1fr;
  }

  /* service pages */
  .compare-grid {
    grid-template-columns:1fr;
  }
  .compare-column {
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .compare-column:last-child {
    border-bottom:0;
  }
  .service-hero-headline {
    font-size:26px;
  }

  /* services hub */
  .hub-grid {
    grid-template-columns:1fr;
  }

  /* r4 */
  .header-scrim {
    height:150px;
  }
  .contact-item {
    grid-template-columns:1fr;
    gap:8px;
  }

  /* advertising below 900px: one per row. Three across at this width leaves each
     placement far too narrow for any standard unit. */
  .ad-grid {
    grid-template-columns:1fr;
  }
  .ad-frame,
  ins.adsbygoogle {
    min-height:280px;
  }
}

@media (max-width:600px) {
  /* every pixel of width counts for the ad surface on a phone */
  .ad-slot {
    padding:10px 10px 12px;
  }

  .team-grid {
    grid-template-columns:1fr;
  }

  .section-shell, .social-shell {
    width:calc(100% - 28px);
  }
  .brand-copy strong {
    font-size:13px;
    letter-spacing:.11em;
  }
  .brand-copy small {
    display:none;
  }
  .hero {
    min-height:min(560px,90vh);
  }
  .hero-photo {
    background-position:67% center;
  }
  .hero-overlay {
    background:linear-gradient(90deg,rgba(3,5,4,.97),rgba(3,5,4,.85) 72%,rgba(3,5,4,.35)),linear-gradient(180deg,rgba(3,5,4,.06) 0%,rgba(3,5,4,.26) 26%,rgba(3,5,4,.26) 82%,rgba(3,5,4,.08) 100%),linear-gradient(0deg,rgba(0,0,0,.55),transparent);
  }
  .hero-content {
    width:calc(100% - 28px);
    padding-top:98px;
  }
  .hero-kicker {
    font-size:10px;
    letter-spacing:.18em;
  }
  .hero-kicker:after {
    width:65px;
  }
  .hero h1 {
    line-height:.92;
    margin-top:20px;
  }
  .hero-description {
    font-size:17px;
  }
  .hero-actions {
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .gold-button, .outline-button {
    width:100%;
  }
  .hero-micro {
    /* 8px was unreadable on a phone; 10px is the floor for any real copy */
    font-size:10px;
    letter-spacing:.21em;
    line-height:1.8;
  }
  .service-grid {
    grid-template-columns:1fr 1fr;
  }
  .service-link {
    min-height:170px;
    padding:20px 10px;
  }
  .service-link strong {
    font-size:18px;
  }
  .service-link small {
    font-size:10px;
    letter-spacing:.16em;
  }
  .social-copy h2 {
    font-size:42px;
  }
  .social-section {
    padding:50px 0;
  }
  /* 48px and a 2x2 grid: four circles in one row do not fit a narrow phone */
  .social-logo {
    width:48px;
    height:48px;
  }

  .social-logo svg {
    width:21px;
    height:21px;
  }

  .social-platforms {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px 12px;
    max-width:300px;
  }

  .social-connect-owner {
    font-size:13px;
  }
  .social-mosaic {
    grid-template-rows:160px 160px 165px;
  }
  .social-mosaic figcaption {
    font-size:11px;
  }
  .site-footer {
    padding:28px 18px 14px;
  }
  /* A single stacked column made the footer nearly 1000px tall on a phone. The link
     lists are short, so two columns hold them without crowding. */
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:18px 16px;
    padding-bottom:18px;
  }
  .footer-brand, .footer-cta {
    grid-column:1/-1;
  }
  .site-footer .brand-mark {
    height:38px;
  }
  .footer-grid>div {
    border-left:0!important;
    padding-left:0!important;
  }
  .footer-bottom {
    font-size:11px;
  }
  .service-hero {
    min-height:480px;
  }
  .service-hero-copy {
    padding-bottom:48px;
  }
  .service-hero h1 {
    font-size:40px;
    max-width:none;
  }
  .service-content {
    padding:55px 0;
  }

  /* service pages */
  .service-section {
    padding:42px 0;
  }
  .service-hero-intro {
    font-size:17px;
  }
  .service-hero-headline {
    font-size:22px;
  }
  .faq-section {
    padding:48px 0;
  }
  .faq-item dt {
    font-size:19px;
  }
  .service-steps li {
    padding-left:48px;
  }
  .service-cta {
    padding:52px 0 58px;
  }
  .breadcrumb ol {
    font-size:11px;
    gap:8px;
  }

  /* services hub */
  .hub-services {
    padding:44px 0;
  }
  .hub-card {
    padding:26px 22px 24px;
  }
  .hub-card h3 {
    font-size:24px;
  }

  /* r4 */
  .header-scrim {
    height:128px;
  }
  .floating-whatsapp {
    right:16px;
    bottom:16px;
    width:52px;
    height:52px;
  }
  .promise-section {
    padding:44px 0;
  }
  .contact-item dd a,
  .contact-item dd strong {
    font-size:20px;
  }

  /* advertising: one per row on mobile */
  .ad-grid {
    gap:16px;
  }
  .ad-slot:last-child {
    grid-column:auto;
  }
  .ad-frame,
  ins.adsbygoogle {
    min-height:280px;
  }
  .ads-section {
    padding:40px 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }

  /* The reveal must not leave content invisible when motion is suppressed: the
     transition is gone, so the hidden start state would otherwise be permanent. */
  .js-reveal .social-mosaic figure,
  .js-reveal .social-mosaic figure figcaption {
    opacity:1!important;
    transform:none!important;
  }

  .mosaic-layer {
    transition:none!important;
    transform:none!important;
  }

  .brand-video-overlay {
    transition:none!important;
  }

  .brand-video-trigger:hover .brand-mark,
  .brand-video-trigger:focus-visible .brand-mark {
    filter:none!important;
  }

  .hub-card:hover,
  .related-grid a:hover,
  .team-card:hover,
  .team-card:hover .team-photo img,
  .social-mosaic figure:hover img,
  .social-mosaic figure:focus-within img,
  .social-platform:hover .social-logo,
  .social-platform:focus-visible .social-logo {
    transform:none!important;
  }
}

/* Stop control for the social film.
   Revealed by script only once playback is genuinely running, so it never offers to pause
   something that is not moving. Positioned over the lower-left of the frame, clear of the
   mosaic, with a focus ring that survives the dark backdrop. */
.social-video-toggle {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  padding: 8px 16px;
  font: 600 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-lite);
  background: rgba(3, 5, 4, .72);
  border: 1px solid rgba(240, 209, 154, .42);
  border-radius: var(--radius-control);
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.social-video-toggle:hover { background: rgba(3, 5, 4, .88); border-color: var(--gold-edge); }
.social-video-toggle:focus-visible { outline: 2px solid var(--gold-lite); outline-offset: 3px; }
.social-video-toggle[hidden] { display: none; }
.social-video { position: relative; }