@charset "UTF-8";
/* ==========================================================================
   bizz.creative — liquid glass & liquid metal material layer      (v1.6.0)
   --------------------------------------------------------------------------
   Loaded last, after site.css → art-direction.css → liquid-luxury.css.

   What this file is for
     1.  A single material vocabulary — one set of glass and metal tokens that
         every surface on the site draws from, so a card on the pricing page
         and a panel on a property page are recognisably the same product.
     2.  A rebuilt inner-page masthead. Before v1.6.0 every page except the
         home page opened with a 340px band of empty navy; the heading, the
         lead and the first real content had no relationship to one another.
     3.  Composition, typography and RTL corrections found by the release
         audit at 360 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920.

   Rules the file keeps to
     -  Effects are earned, not sprayed. backdrop-filter is reserved for the
        header, the masthead, the filter panel, menus and the media viewer;
        ordinary cards use layered gradients, which cost nothing to composite.
     -  Every animated property is transform or opacity.
     -  Nothing here is required to read the page. Remove the file and the
        site is plainer but complete.
     -  Logical properties throughout, so Arabic mirrors without a second
        stylesheet.
   ========================================================================== */

/* ------------------------------------------------------- 1. Material tokens */

:root {
  /* Glass — layered translucency over the navy ground. The two gradients are
     a specular top edge and the body tint; blur is applied separately so a
     surface can take the tint without paying for a backdrop filter. */
  --glass-tint:        linear-gradient(158deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.022) 34%, rgba(255,255,255,0) 62%);
  --glass-tint-strong: linear-gradient(158deg, rgba(255,255,255,.115) 0%, rgba(255,255,255,.035) 38%, rgba(255,255,255,0) 68%);
  --glass-body:        rgba(15, 22, 40, .58);
  --glass-body-strong: rgba(12, 18, 34, .74);
  --glass-body-solid:  rgba(17, 25, 44, .92);

  --glass-edge:        rgba(226, 234, 252, .13);
  --glass-edge-strong: rgba(226, 234, 252, .22);
  --glass-highlight:   inset 0 1px 0 rgba(255, 255, 255, .10);
  --glass-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, .18);
  --glass-inner-glow:  inset 0 0 60px -30px rgba(150, 180, 240, .35);

  --glass-blur:        blur(20px) saturate(135%);
  --glass-blur-soft:   blur(12px) saturate(120%);

  --glass-lift-1: 0 1px 2px rgba(3, 6, 14, .5), 0 12px 28px -18px rgba(3, 6, 14, .8);
  --glass-lift-2: 0 2px 4px rgba(3, 6, 14, .5), 0 26px 60px -30px rgba(3, 6, 14, .9);
  --glass-lift-3: 0 4px 8px rgba(3, 6, 14, .45), 0 48px 110px -46px rgba(3, 6, 14, .95);

  /* Liquid metal — a brushed, slightly iridescent steel used only where a
     surface should read as a machined edge or a poured highlight. Deliberately
     desaturated: the accent hue enters at low opacity, never as a rainbow. */
  --metal-edge: linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 18%,
      rgba(190,208,238,.20) 34%,
      rgba(255,255,255,.62) 50%,
      rgba(160,180,214,.16) 68%,
      rgba(255,255,255,.42) 84%,
      rgba(255,255,255,0) 100%);
  --metal-pour: linear-gradient(135deg,
      #eef3fd 0%,
      #b9c7e0 18%,
      #7c8fb4 34%,
      #dde6f7 48%,
      #9aa9c6 62%,
      #6f80a4 78%,
      #cfd9ec 100%);
  --metal-sheen: linear-gradient(112deg, transparent 16%, rgba(255,255,255,.40) 48%, transparent 74%);

  /* Composition rhythm */
  --masthead-pad-block: clamp(1.65rem, 1.1rem + 2.2vw, 3.25rem);
  --masthead-pad-inline: clamp(1.35rem, .9rem + 2.4vw, 3.5rem);
  --masthead-radius: clamp(20px, 1rem + 1.6vw, 34px);
  --rail-gap: clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
}

/* Rounded-corner scale used by every glass surface, so radii stay related. */
:root {
  --r-glass-sm: 14px;
  --r-glass-md: clamp(16px, .75rem + .9vw, 22px);
  --r-glass-lg: clamp(20px, .9rem + 1.3vw, 28px);
  --r-glass-xl: var(--masthead-radius);
}

/* ------------------------------------------------- 2. Fluid type correction
   The v1.5.0 scale set a 44px floor on h1 and 48px on the display size, which
   overflowed long Azerbaijani, Russian and Georgian headings on a 360px
   screen, and ran to 95px on a 1920px screen where nothing balanced it. The
   replacement scale is anchored to the 360-1600px range and is tuned so a
   typical page title occupies two lines at every width. */
:root {
  --t-display: clamp(2.35rem, 1.15rem + 4.05vw, 4.9rem);
  --t-h1:      clamp(2rem, 1.1rem + 3vw, 3.85rem);
  --t-h2:      clamp(1.65rem, 1.1rem + 1.85vw, 2.85rem);
  --t-h3:      clamp(1.25rem, 1.05rem + .68vw, 1.62rem);
  --lh-display: 1.02;
}

/* Headings painted with background-clip:text lose anything that reaches above
   the em box — the umlaut on "Öz", the breve on "Ğ", Georgian ascenders —
   because the gradient box is the text box. A little extra leading and a
   padding/margin pair restores the space without moving the baseline. */
.section-head h2,
.cta-panel h2,
.package-builder__title,
.inner-hero h1 {
  line-height: 1.12;
  padding-block-start: .12em;
  margin-block-start: -.12em;
  padding-inline-end: .04em;
}

/* ------------------------------------------------------- Hero heading safety
   v1.5.0 gave .hero__title a hard `max-width` in `ch` and set `white-space:
   nowrap` on its first line, inside a `.split-line` that clips its overflow
   for the reveal animation. Any hero heading longer than about eleven
   characters — including the shipped Azerbaijani and Turkish copy on a large
   screen — therefore lost its last letters silently, and an editor had no way
   to see why. The line may now wrap; the reveal animation is unaffected
   because it animates the block, not the line count. */
.hero__title {
  max-width: min(100%, 17ch);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.hero__title > .split-line:first-child > span,
.hero__title > .split-line > span,
.hero__title em > span,
.hero__title em:where(.split-line) > span {
  white-space: normal;
}
/* `.split-line` clips its overflow so the line-reveal animation has something
   to slide behind, but the heading's 0.96 line-height is tighter than the
   font's own ascent and descent — so an Arabic descender, a Georgian
   ascender, a comma or the italic's overhang was being shaved by a few
   pixels. The mask is padded out to cover the full glyph box and the padding
   is cancelled by an equal negative margin, so the rhythm is unchanged and
   the reveal still starts from fully outside the box. */
.hero__title .split-line {
  padding-inline-end: .1em;
  padding-block: .14em;
  margin-block: -.14em;
}
.hero__title em { max-width: min(100%, 20ch); }

/* Long compound words in Azerbaijani, Turkish, Russian and Georgian must be
   allowed to break rather than push the layout sideways, but only as a last
   resort so ordinary headings still break at spaces. */
h1, h2, h3, h4,
.card__title, .work-card__title, .property-card__title, .plan__name,
.service-tile__title, .post-card__title, .value-card__title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Mixed Latin/Arabic runs: derive direction from the first strong character
   so a Latin brand name keeps its trailing comma or full stop in place inside
   right-to-left copy. */
[dir='rtl'] :is(h1, h2, h3, h4, .lead, .eyebrow, .badge, .chip,
                .card__title, .work-card__title, .property-card__title,
                .post-card__title, .service-tile__title, .stat-card__value,
                .hero-stats__value, .property-price, .plan__price),
/* unicode-bidi does not inherit, so the block-level pieces a heading is split
   into for the line-reveal animation need it in their own right. */
[dir='rtl'] :is(h1, h2, h3) :is(.split-line, .split-line > span, em, b, strong, span) {
  unicode-bidi: plaintext;
  text-align: start;
}

/* Directional iconography must mirror. Arrows, chevrons and the breadcrumb
   separator all point the other way in Arabic. */
[dir='rtl'] :is(.btn__icon, .link-arrow svg, .breadcrumbs svg,
                .mobile-nav__link svg, .pagination svg, .service-tile__link svg,
                .post-card__link svg, .detail-close ~ * .icon-arrow) {
  transform: scaleX(-1);
}

/* The decorative vertical studio captions read as broken text when the script
   is Arabic, because a rotated Arabic line loses its connected shaping. */
[dir='rtl'] :is(.hero-scene__caption, .hero__foot i) { display: none; }

/* The language menu lists every language in its own script. Rendering those
   names in the webfont would pull the 49KB Arabic and 16KB Georgian subsets
   onto every page in every language for the sake of two words, so the menu
   uses installed system faces instead. */
.lang__menu,
.lang__option-name,
.lang__option-code {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
}

/* ------------------------------------------------------ 3. Glass primitives */

/* A surface opts into the material by setting --surface-* and inheriting
   this block; the concrete selectors below do exactly that. */
.glass,
.card,
.work-card,
.post-card,
.property-card,
.service-tile,
.value-card,
.stat-card,
.plan,
.addon,
.quote,
.contact-item,
.form-card,
.accordion__item,
.team-card,
.property-detail__aside,
.property-video-link,
.estimate {
  position: relative;
  isolation: isolate;
  background-color: var(--glass-body);
  background-image: var(--glass-tint);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-highlight), var(--glass-lift-1);
}

/* One specular sweep across the top edge — the "poured" look. Kept to a
   pseudo-element so it never affects layout or hit-testing. */
.card::after,
.work-card::after,
.post-card::after,
.property-card::after,
.service-tile::after,
.plan::after,
.quote::after,
.form-card::after,
.team-card::after,
.property-detail__aside::after {
  content: '';
  position: absolute;
  inset-inline: 12%;
  inset-block-start: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: var(--metal-edge);
  opacity: .55;
  transition: opacity var(--d-base) var(--e-out);
}

.card:hover::after,
.work-card:hover::after,
.post-card:hover::after,
.property-card:hover::after,
.service-tile:hover::after,
.plan:hover::after,
.team-card:hover::after { opacity: 1; }

.card:hover,
.work-card:hover,
.post-card:hover,
.property-card:hover,
.service-tile:hover,
.value-card:hover,
.plan:hover,
.team-card:hover,
.contact-item:hover {
  background-image: var(--glass-tint-strong);
  border-color: var(--glass-edge-strong);
  box-shadow: var(--glass-highlight-strong), var(--glass-lift-2);
}

/* Featured surfaces get the metal edge at full strength plus a faint pour in
   the corner. Used sparingly: featured plan, featured property, hero frame. */
.plan--featured,
.property-card--featured,
.work-card--featured {
  border-color: color-mix(in srgb, var(--c-accent) 34%, var(--glass-edge-strong));
  box-shadow:
    var(--glass-highlight-strong),
    0 0 0 1px color-mix(in srgb, var(--c-accent) 12%, transparent),
    var(--glass-lift-2);
}
.plan--featured::after,
.property-card--featured::after {
  opacity: 1;
  inset-inline: 6%;
  height: 1.5px;
}

/* Blurred surfaces — the short list that earns a backdrop filter. */
.header,
.mobile-nav,
.lang__menu,
.property-filter,
.media-lightbox,
.breadcrumbs,
.page-masthead {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .mobile-nav, .lang__menu, .property-filter,
  .media-lightbox, .breadcrumbs, .page-masthead {
    background-color: var(--glass-body-solid);
  }
}

/* ------------------------------------------------------ 4. Header & menus */

/* The header is a very wide, very short box, so the 158deg body tint would
   cross it as a visible diagonal streak. It gets a vertical tint instead. */
.header {
  background-color: rgba(10, 16, 30, .55);
  background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 55%, transparent);
}
.header[data-stuck='true'] {
  background-color: rgba(8, 13, 26, .82);
  border-color: var(--glass-edge-strong);
  box-shadow: var(--glass-highlight), var(--glass-lift-2);
}
/* A hairline of metal along the header's lower edge once it lifts off. */
.header[data-stuck='true']::after {
  content: '';
  position: absolute;
  inset-inline: 8%;
  inset-block-end: -1px;
  height: 1px;
  background: var(--metal-edge);
  opacity: .5;
  pointer-events: none;
}

.lang__menu {
  background-color: var(--glass-body-strong);
  background-image: var(--glass-tint);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-highlight), var(--glass-lift-3);
}

.mobile-nav {
  background-color: rgba(8, 13, 26, .93);
  background-image:
    radial-gradient(70% 45% at 82% 0%, var(--c-accent-a12), transparent 70%),
    var(--glass-tint);
}

/* ------------------------------------------------ 5. The inner-page masthead
   Replaces the empty 340px band. The heading, the supporting line and the
   page's own metadata now sit inside one glass plate that reads as the same
   material as the home hero, and the plate's height is set by its content
   rather than by an arbitrary min-height. */

.inner-hero {
  padding-top: calc(var(--header-h) + clamp(1.25rem, .6rem + 2.4vw, 3rem));
  padding-bottom: clamp(2.5rem, 1.6rem + 3.4vw, 5rem);
}

/* The decorative orb and grid plane are pulled back and pushed below the
   header: they were competing with the heading for attention, and the orb
   used to shine through the translucent header bar as a bright blob. */
.inner-hero::before {
  top: clamp(3rem, 5vw, 6rem);
  inset-inline-end: clamp(-14rem, -8vw, -4rem);
  width: clamp(20rem, 34vw, 34rem);
  opacity: .17;
}
.inner-hero::after {
  top: clamp(2rem, 4vw, 4rem);
  inset-inline-end: 0;
  width: min(40vw, 540px);
  height: 340px;
  opacity: .1;
}
[dir='rtl'] .inner-hero::before { transform: rotate(13deg) scaleX(-1); }
[dir='rtl'] .inner-hero::after { transform: perspective(800px) rotateY(24deg) rotateX(12deg); }

/* Breadcrumbs move inside the plate, so they stop floating on their own. */
.inner-hero .breadcrumbs {
  margin-bottom: clamp(1rem, .7rem + 1vw, 1.6rem);
  padding: .4rem .75rem;
  background-color: rgba(255, 255, 255, .04);
  border-color: var(--glass-edge);
  font-size: var(--t-caption);
}

.inner-hero > .wrap > .section-head,
.inner-hero .properties-hero__head,
.inner-hero .article-head,
.inner-hero .property-detail__head,
.custom-page > .wrap > .page-masthead {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  /* Every row sizes to its content. v1.5.0 reserved a 7.5rem row and a 340px
     min-height, which is where the empty band came from. */
  grid-template-rows: auto;
  grid-auto-rows: auto;
  column-gap: var(--rail-gap);
  row-gap: clamp(.7rem, .5rem + .6vw, 1.1rem);
  align-items: end;
  align-content: start;
  min-height: 0;
  max-width: none;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  padding: var(--masthead-pad-block) var(--masthead-pad-inline);
  border: 1px solid var(--glass-edge);
  border-radius: var(--masthead-radius);
  background-color: var(--glass-body);
  background-image:
    radial-gradient(120% 150% at 88% 0%, var(--c-accent-a10), transparent 62%),
    var(--glass-tint-strong);
  box-shadow: var(--glass-highlight-strong), var(--glass-inner-glow), var(--glass-lift-2);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  overflow: clip;
  text-align: start;
}

/* Liquid-metal edge along the top of the plate, and a slow pour in the far
   corner. This is the one place per page where the metal is allowed to read
   as metal rather than as a hairline. */
.inner-hero > .wrap > .section-head::before,
.inner-hero .properties-hero__head::before,
.inner-hero .article-head::before,
.inner-hero .property-detail__head::before,
.custom-page > .wrap > .page-masthead::before {
  content: '';
  position: absolute;
  inset-inline: 8%;
  inset-block-start: 0;
  height: 1.5px;
  z-index: 1;
  pointer-events: none;
  background: var(--metal-edge);
  opacity: .8;
}

.inner-hero > .wrap > .section-head::after,
.inner-hero .properties-hero__head::after,
.inner-hero .article-head::after,
.inner-hero .property-detail__head::after,
.custom-page > .wrap > .page-masthead::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block-start: -35%;
  inset-inline-end: -12%;
  width: clamp(14rem, 26vw, 26rem);
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: var(--metal-pour);
  opacity: .1;
  filter: blur(14px);
  -webkit-mask-image: radial-gradient(circle, #000 0 44%, transparent 72%);
  mask-image: radial-gradient(circle, #000 0 44%, transparent 72%);
}

/* Grid placement — breadcrumb and eyebrow ride the top row across the full
   width, the heading takes the wide column and the lead the narrow one. */
.inner-hero > .wrap > .section-head > .breadcrumbs,
.inner-hero .properties-hero__head > .breadcrumbs,
.inner-hero .article-head > .breadcrumbs,
.inner-hero .property-detail__head > .breadcrumbs {
  grid-column: 1 / -1;
  grid-row: 1;
}

.inner-hero > .wrap > .section-head > .eyebrow,
.inner-hero .properties-hero__head > .eyebrow,
.inner-hero .article-head > .eyebrow,
.inner-hero .property-detail__head > .cluster {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  margin: 0 0 clamp(.35rem, .5vw, .75rem);
}

.inner-hero > .wrap > .section-head > h1,
.inner-hero .properties-hero__head > h1,
.inner-hero .article-head > h1,
.inner-hero .property-detail__head > h1 {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  /* A measure, not a hard character count: long single words in Georgian and
     Russian used to be forced onto their own line by a 15ch cap. */
  width: 100%;
  max-width: 20ch;
  margin: 0;
  font-size: var(--t-h1);
  font-weight: 640;
  line-height: 1.03;
  letter-spacing: -.038em;
  text-wrap: balance;
}

.inner-hero > .wrap > .section-head > .lead,
.inner-hero .properties-hero__head > .lead,
.inner-hero .article-head > .lead,
.inner-hero .property-detail__head > .lead {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  max-width: 42ch;
  margin: 0 0 .25rem;
  color: #c9d2e2;
  font-size: clamp(1rem, .95rem + .28vw, 1.18rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Anything else the page puts in its head (location line, meta rails, action
   clusters) spans the full width beneath. */
.inner-hero .property-detail__head > .property-detail__location,
.inner-hero .article-head > .article-meta,
.inner-hero > .wrap > .section-head > .masthead-rail {
  grid-column: 1 / -1;
  grid-row: 4;
  margin: clamp(.6rem, .8vw, 1rem) 0 0;
  padding-top: clamp(.8rem, 1vw, 1.2rem);
  border-top: 1px solid var(--glass-edge);
}

/* Below 1024px the two columns collapse; the lead follows the heading rather
   than sitting in a column that has become too narrow to read comfortably. */
@media (max-width: 1023px) {
  .inner-hero > .wrap > .section-head,
  .inner-hero .properties-hero__head,
  .inner-hero .article-head,
  .inner-hero .property-detail__head,
  .custom-page > .wrap > .page-masthead {
    grid-template-columns: minmax(0, 1fr);
  }
  .inner-hero > .wrap > .section-head > h1,
  .inner-hero .properties-hero__head > h1,
  .inner-hero .article-head > h1,
  .inner-hero .property-detail__head > h1 { max-width: 24ch; }
  .inner-hero > .wrap > .section-head > .lead,
  .inner-hero .properties-hero__head > .lead,
  .inner-hero .article-head > .lead,
  .inner-hero .property-detail__head > .lead {
    grid-column: 1;
    grid-row: 4;
    max-width: 62ch;
  }
  .inner-hero .property-detail__head > .property-detail__location,
  .inner-hero .article-head > .article-meta,
  .inner-hero > .wrap > .section-head > .masthead-rail { grid-row: 5; }
}

/* At the very largest sizes the plate stops growing with the viewport, so a
   1920px screen shows a composed object rather than a stretched band. */
@media (min-width: 1600px) {
  .inner-hero > .wrap > .section-head,
  .inner-hero .properties-hero__head,
  .inner-hero .article-head,
  .inner-hero .property-detail__head { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .inner-hero > .wrap > .section-head > .lead,
  .inner-hero .properties-hero__head > .lead { max-width: 38ch; }
}

/* 404 and CMS "custom" pages inherit the same plate. */
.not-found-page > .wrap > h1,
.custom-page > .wrap > h1 {
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -.038em;
  text-wrap: balance;
}

/* The narrow reading column stopped working when art-direction.css redeclared
   `.wrap` after `.wrap--narrow` at equal specificity, so FAQ, legal and article
   pages have been rendering at full width since v1.4. Restored here, with the
   masthead dropping to a single column inside it — two columns in a 780px
   container would leave neither wide enough to read. */
.wrap.wrap--narrow { width: min(100% - clamp(2rem, 5.2vw, 4rem), var(--wrap-narrow)); }

.wrap--narrow > .section-head,
.wrap--narrow > .article-head,
.wrap--narrow > .property-detail__head {
  grid-template-columns: minmax(0, 1fr);
}
.wrap--narrow > .section-head > h1,
.wrap--narrow > .article-head > h1 { max-width: 22ch; }
.wrap--narrow > .section-head > .lead,
.wrap--narrow > .article-head > .lead {
  grid-column: 1;
  grid-row: 4;
  max-width: 60ch;
}
.wrap--narrow > .article-head > .article-meta { grid-row: 5; }

/* ----------------------------------------------------- 5b. Long-form bodies
   rich_text() now emits h2/h3 rather than h3/h4 so the outline continues from
   the page title. Give the two levels a clear size relationship — previously
   only h3/h4 were styled, so a body heading and its subheading looked alike. */

.prose h2,
.article-body h2,
.legal-page__content h2 {
  max-width: 26ch;
  margin-top: 1.9em;
  margin-bottom: .5em;
  color: #f8faff;
  font-size: clamp(1.35rem, 1.15rem + .7vw, 1.85rem);
  font-weight: 640;
  line-height: 1.18;
  letter-spacing: -.02em;
}
.prose h3,
.article-body h3,
.legal-page__content h3 {
  max-width: 30ch;
  margin-top: 1.6em;
  margin-bottom: .4em;
  color: #e7ecf7;
  font-size: clamp(1.1rem, 1.02rem + .34vw, 1.32rem);
  font-weight: 620;
  line-height: 1.25;
  letter-spacing: -.012em;
}
/* A hairline of metal beneath a top-level body heading, so the two levels are
   distinguishable at a glance without adding weight or colour. */
.prose h2::after,
.article-body h2::after,
.legal-page__content h2::after {
  content: '';
  display: block;
  width: 3.25rem;
  height: 1px;
  margin-block-start: .55em;
  background: var(--metal-edge);
  opacity: .7;
}
.prose > :first-child,
.article-body > :first-child,
.legal-page__content > :first-child { margin-top: 0; }

/* Comfortable measure for long-form reading at very wide viewports. */
.article-body,
.legal-page__content,
.custom-page > .wrap > .prose,
.about-page > .wrap > .prose { max-width: 74ch; }

/* --------------------------------------------------- 6. Panels and filters */

.property-filter,
.pricing-builder > .form-card,
.form-card {
  background-color: var(--glass-body-strong);
  background-image:
    radial-gradient(100% 140% at 12% 0%, var(--c-accent-a07), transparent 58%),
    var(--glass-tint);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-glass-lg);
  box-shadow: var(--glass-highlight), var(--glass-lift-2);
}

/* Form controls read as recessed glass rather than flat boxes. */
.input,
.select,
.textarea {
  background-color: rgba(6, 11, 22, .5);
  background-image: linear-gradient(180deg, rgba(255,255,255,.045), transparent 46%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28);
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--glass-edge-strong); }
.input:focus,
.select:focus,
.textarea:focus,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .28),
    0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
  outline: 2px solid transparent;   /* keeps a visible ring in forced colours */
  outline-offset: 2px;
}

/* The select arrow must mirror in RTL, and native arrows must not double up. */
[dir='rtl'] .select { background-position: left .9rem center; }

/* --------------------------------------------------------- 7. Media viewer */

.media-lightbox {
  background-color: rgba(4, 7, 15, .8);
  background-image: radial-gradient(60% 60% at 50% 30%, rgba(120,150,215,.10), transparent 70%);
}
.media-lightbox::backdrop {
  background: rgba(4, 7, 15, .72);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
}
.media-lightbox__close {
  background-color: var(--glass-body-strong);
  background-image: var(--glass-tint-strong);
  border: 1px solid var(--glass-edge-strong);
  box-shadow: var(--glass-highlight), var(--glass-lift-2);
}
.media-lightbox__close:hover {
  background-color: rgba(28, 38, 62, .9);
  transform: scale(1.04);
}

/* Gallery paging controls added in v1.6.0. */
.media-lightbox__nav {
  position: absolute;
  inset-block-start: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
  border-radius: 50%;
  color: #fff;
  background-color: var(--glass-body-strong);
  background-image: var(--glass-tint-strong);
  border: 1px solid var(--glass-edge-strong);
  box-shadow: var(--glass-highlight), var(--glass-lift-2);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  transition: background-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.media-lightbox__nav:hover { background-color: rgba(28, 38, 62, .92); }
.media-lightbox__nav[hidden] { display: none; }
.media-lightbox__nav--prev { inset-inline-start: clamp(.5rem, 2vw, 1.75rem); }
.media-lightbox__nav--next { inset-inline-end: clamp(.5rem, 2vw, 1.75rem); }
[dir='rtl'] .media-lightbox__nav svg { transform: scaleX(-1); }

.media-lightbox__counter {
  position: absolute;
  inset-block-end: clamp(.75rem, 2vw, 1.5rem);
  inset-inline-start: 50%;
  z-index: 3;
  transform: translateX(-50%);
  padding: .35rem .85rem;
  border-radius: 999px;
  color: #dbe3f2;
  font-size: var(--t-caption);
  font-variant-numeric: tabular-nums;
  background-color: var(--glass-body-strong);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
}

@media (max-width: 640px) {
  /* On a phone the arrows would sit on top of the picture; swipe and the
     close button carry the interaction instead. */
  .media-lightbox__nav { width: 44px; height: 44px; }
  .media-lightbox__nav--prev { inset-inline-start: .35rem; }
  .media-lightbox__nav--next { inset-inline-end: .35rem; }
}

/* --------------------------------------------------------- 8. Touch targets
   WCAG 2.2 AA target size. The audit found footer links, pagination links and
   in-form radio inputs below 24x24 on phones; these floors fix the whole
   class of them without changing any layout. */

@media (pointer: coarse), (max-width: 767px) {
  .footer a,
  .footer__list a,
  .legal-links a,
  .pagination a,
  .pagination span,
  .breadcrumbs a,
  .post-card__meta a,
  .cta-panel__contacts a,
  .contact-item a,
  .checkbox a,
  .chip,
  .accordion__trigger {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
  }
  .footer__list li + li { margin-top: .15rem; }

  /* Card titles are the primary link on a card; a 21px-tall line is not a
     usable target, so the link gets vertical padding without moving the
     text (the negative margin cancels the added height). */
  .property-card__title a,
  .work-card__title a,
  .post-card__title a,
  .card__title a {
    display: inline-block;
    padding-block: .75rem;
    margin-block: -.75rem;
  }

  input[type='checkbox'],
  input[type='radio'] {
    /* WCAG 2.2 AA (2.5.8) asks for 24x24 on the control itself; the label
       wrapping it supplies the comfortable 44px target below. */
    min-width: 26px;
    min-height: 26px;
  }
  /* The visible control stays its designed size; the hit area is grown by the
     label wrapping it, which is what a finger actually targets. */
  label:has(> input[type='checkbox']),
  label:has(> input[type='radio']),
  .checkbox,
  .radio {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .6rem;
  }
}

/* Buttons must never clip their own label. v1.5.0 combined overflow:hidden
   (needed to clip the sheen sweep) with a label that could not wrap, so long
   Arabic, Russian and Georgian labels were truncated. The sheen stays clipped;
   the label is now allowed to wrap to a second line and the button grows. */
.btn {
  /* min-content, not 0: a button inside a flex row may wrap its label onto a
     second line but must never be squeezed narrower than its longest word,
     which is what truncated "Поделиться" and "გაზიარება" on a 360px screen. */
  min-width: min-content;
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
  padding-block: .7rem;
  line-height: 1.25;
}
/* Clusters of chips and buttons wrap rather than compress their children. */
.cluster,
.hero__actions,
.property-detail__actions,
.article-head .cluster {
  flex-wrap: wrap;
}
.btn__icon { flex: 0 0 auto; }
/* Keep the parked sheen inside the button box in every writing direction. */
.btn::before { inset: 0; border-radius: inherit; }

/* A share button next to a title used to be squeezed to zero on small
   phones; it now keeps its label or falls back to the icon alone. */
@media (max-width: 480px) {
  .btn--sm { padding-inline: 1rem; }
  .share__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* --------------------------------------------------------- 9. Motion layer */

/* Section-level entrance. Scroll reveals already exist in site.js; this adds
   the material response — surfaces settle into place rather than sliding. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ok [data-reveal] { will-change: opacity, transform; }
  .motion-ok [data-reveal].is-revealed { will-change: auto; }

  /* Depth on pointer devices only, and only where a card is large enough for
     the movement to read as depth rather than jitter. */
  @media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    .motion-ok [data-depth-card] {
      transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
      transform: perspective(1200px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg)) translateZ(0);
    }
  }

  /* Page transition: the outgoing page dims rather than jumping to white. */
  .is-leaving main { opacity: .35; transition: opacity 180ms var(--e-out); }
}

/* Everything above is off for reduced motion and for Save-Data. */
@media (prefers-reduced-motion: reduce) {
  .btn::before,
  .card::after,
  .work-card::after,
  .post-card::after,
  .property-card::after,
  .service-tile::after,
  .plan::after { transition: none; }
  .inner-hero > .wrap > .section-head::after,
  .inner-hero .properties-hero__head::after { animation: none; }
}
.save-data .inner-hero::before,
.save-data .inner-hero::after,
.save-data .inner-hero > .wrap > .section-head::after { display: none; }

/* --------------------------------------------------- 10. Footer & closing */

.footer {
  position: relative;
  background-color: rgba(7, 11, 22, .72);
  background-image:
    radial-gradient(80% 100% at 50% 0%, var(--c-accent-a07), transparent 62%),
    var(--glass-tint);
  border-top: 1px solid var(--glass-edge);
}
.footer::before {
  content: '';
  position: absolute;
  inset-inline: 15%;
  inset-block-start: -1px;
  height: 1px;
  background: var(--metal-edge);
  opacity: .45;
  pointer-events: none;
}

/* --------------------------------------------------------- 11. Forced colours
   Windows high-contrast mode strips backgrounds; make sure the glass edges
   survive as real borders so panels remain distinguishable. */
@media (forced-colors: active) {
  .glass, .card, .work-card, .post-card, .property-card, .service-tile,
  .plan, .quote, .form-card, .property-filter, .media-lightbox__close,
  .media-lightbox__nav,
  .inner-hero > .wrap > .section-head,
  .inner-hero .properties-hero__head,
  .inner-hero .article-head,
  .inner-hero .property-detail__head {
    border: 1px solid CanvasText;
    box-shadow: none;
    background: Canvas;
  }
  .btn::before,
  .card::after,
  .inner-hero > .wrap > .section-head::before { display: none; }
}