/* =============================================================
   Jouan Real Estate - theme styles.
   Built on tokens.css. Colours and spacing come from the token
   custom properties; no hardcoded hex or type sizes.
   ============================================================= */

/* ---------- Accessibility helpers ---------- */
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:var(--sp-2);left:var(--sp-2);z-index:200;
  background:var(--c-dark);color:var(--c-light);
  padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-pill);
  transform:translateY(-150%);transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0);}
html.panel-open{overflow:hidden;}

/* ---------- Page transition ----------
   A light overlay that masks the page on load and on navigation. Hidden by
   default (no flash for no-JS / reduced motion); a class shown before first
   paint (set in header.php) holds it opaque while theme.js drives it:
     • html.jouan-loading  — cold load (direct visit / refresh / external link):
       run the ring loader 0–100%, then wipe the cover off to reveal the page.
     • html.jouan-arriving — landed from an internal navigation (the exit loader
       already ran on the previous page): mask the load, then wipe off, no ring.
     • .page-fade.is-leaving — exit: fade the cover in + run the loader, then go.
*/
.page-fade{
  position:fixed;inset:0;z-index:300;background:var(--c-surface-light);
  opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease);
}
.page-fade.is-leaving,
html.jouan-loading .page-fade,
html.jouan-arriving .page-fade{ opacity:1;pointer-events:auto; }
@media (prefers-reduced-motion:reduce){ .page-fade{ display:none; } }

/* Loader inside the overlay: dark monogram + clockwise progress ring (starting
   at six o'clock) + a 0–100% counter. Shown while leaving (exit) and during the
   cold-load intro; the internal-arrival mask shows the cover only, no loader. */
.page-loader{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--sp-4);
  opacity:0; transform:translateY(8px);
  transition:opacity .55s var(--ease) .12s, transform .55s var(--ease) .12s;
}
.page-fade.is-leaving .page-loader,
html.jouan-loading .page-fade .page-loader{ opacity:1; transform:none; }
/* During the cold-load reveal, fade the loader out before the cover wipes off
   (higher specificity so it beats the html.jouan-loading "shown" rule above). */
html.jouan-loading .page-fade.is-complete .page-loader{ opacity:0; transform:translateY(-6px); }
/* Ring complete: fade the loader out before the cover wipes off to reveal the page. */
.page-fade.is-complete .page-loader{
  opacity:0; transform:translateY(-6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.page-loader__ring{ position:relative; display:inline-flex; width:92px; height:92px; }
.page-loader__ring svg{ width:100%; height:100%; }
.page-loader__track{ stroke:var(--c-border-on-light); }
.page-loader__bar{
  stroke:var(--c-dark); stroke-linecap:round;
  transform:rotate(90deg); transform-origin:50% 50%; /* start at six o'clock, fill clockwise */
}
.page-loader__icon{
  position:absolute; inset:0; margin:auto; width:32px; height:auto;
  filter:brightness(0) invert(0.153); /* white SVG → brand dark */
  /* Optical, not geometric: margin:auto centres the box correctly, but the mark's
     viewBox is 530x549 (taller than wide) and its weight sits high, so against a
     circular ring it reads above centre. Nudge it down to sit true. */
  transform:translateY(2px);
}
.page-loader__pct{
  font-size:var(--fs-pxs); letter-spacing:.12em; color:var(--c-text-on-light-muted);
  font-variant-numeric:tabular-nums;
}

/* Site-wide: no scroll-chaining / bounce, and clip any horizontal overflow
   (e.g. the full-bleed carousel's 100vw breakout vs. the scrollbar width).
   clip (not hidden) so it never creates a scroll container or breaks sticky;
   fixed elements like the header and popouts are unaffected. */
html,body{overscroll-behavior:none;}
/* clip on html too, so a fixed overlay that measures 100vw (vs clientWidth) can't
   add a phantom horizontal scroll on mobile. clip keeps vertical scroll + sticky. */
html,body{overflow-x:clip;}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:130;
  color:var(--c-text-on-dark);
}
/* Background fades in on scroll (set via --header-bg), transparent at the top. */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--c-darker);
  opacity:var(--header-bg, 0);
  transition:opacity .15s linear;
  pointer-events:none;
}

/* Clear the WordPress admin toolbar when logged in. */
.admin-bar .site-header,
.admin-bar .site-panel{top:32px;}
@media screen and (max-width:782px){
  .admin-bar .site-header,
  .admin-bar .site-panel{top:46px;}
}
.site-header__bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-block:var(--sp-4);
}
.site-header__logo{justify-self:start;display:inline-flex;align-items:center;}
.site-header__logo img{
  height:38px;width:auto;
}
.site-nav{justify-self:center;}
.site-nav__list{display:flex;gap:var(--sp-10);list-style:none;margin:0;padding:0;}
.site-nav__list a{text-decoration:none;color:inherit;font-size:var(--fs-pr);opacity:.9;}
.site-nav__list a:hover{opacity:1;}

/* Per-letter roll on nav links (reuses the .char primitives + stagger from tokens.css) */
.site-nav__list a:hover .char__inner,
.site-nav__list a:focus-visible .char__inner{transform:translateY(-50%);}
@media (prefers-reduced-motion:reduce){
  .site-nav__list a:hover .char__inner,
  .site-nav__list a:focus-visible .char__inner{transform:none;}
}

/* Logo + nav fade away while the panel is open */
/* Centre nav fades away while the panel is open (the logo + toggle stay). */
.site-header__logo,.site-nav{transition:opacity .3s var(--ease);}
.site-header.is-open .site-nav{opacity:0;pointer-events:none;}

/* Header background also fades out while the panel is open */
.site-header.is-open::before{opacity:0;}

/* On close, fade the logo, centre nav + toggle out so the drawer's top edge
   never sweeps past them on its way up (z-index can't transition — fade instead).
   They fade back once the drawer has slid away (see theme.js). */
.menu-toggle{transition:opacity .3s var(--ease);}
.site-header.is-closing .site-header__logo,
.site-header.is-closing .site-nav,
.site-header.is-closing .menu-toggle{opacity:0;pointer-events:none;}

/* ---------- Inverted header ----------
   Add `header-invert` to <body> on light-topped pages: solid light header from
   load, with a dark logo, nav, label and hamburger. The logo SVG is white, so
   brightness(0) invert(.153) re-tints it to the brand dark (#272727). */
.header-invert .site-header{color:var(--c-text-on-light);}
.header-invert .site-header::before{background:var(--c-surface-light);opacity:1;border-bottom:1px solid var(--c-border-on-light);}
.header-invert .site-header__logo img{filter:brightness(0) invert(0.153);}

/* While the menu drawer is open the header sits over the dark panel — restore
   the light treatment (white logo + contents, no light bar) even when inverted. */
.header-invert .site-header.is-open{color:var(--c-text-on-dark);}
.header-invert .site-header.is-open::before{opacity:0;}
.header-invert .site-header.is-open .site-header__logo img{filter:brightness(0) invert(1);}

/* Menu toggle: 2-line hamburger + label, morphs to an X when open */
.menu-toggle{
  justify-self:end;
  display:inline-flex;align-items:center;gap:var(--sp-3);
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;
}
.menu-toggle:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px;}
/* Reserve enough width for the wider "Close" label so swapping it doesn't shift the toggle. */
.menu-toggle__label{color:inherit;min-width:4.75em;text-align:left;white-space:nowrap;}
.menu-toggle__icon{position:relative;display:block;width:26px;height:14px;flex:0 0 auto;}
.menu-toggle__icon span{
  position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;
  transform-origin:center;
  transition:transform .45s cubic-bezier(.6,.05,.2,1);
}
.menu-toggle__icon span:nth-child(1){top:3px;}
.menu-toggle__icon span:nth-child(2){top:9px;transition-delay:.05s;}
/* Hover (closed): the two lines ease together slightly. */
.menu-toggle:hover .menu-toggle__icon span:nth-child(1){transform:translateY(1px);}
.menu-toggle:hover .menu-toggle__icon span:nth-child(2){transform:translateY(-1px);}
/* Open → a clean centred X (symmetric translate + rotate). */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1){transform:translateY(3px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2){transform:translateY(-3px) rotate(-45deg);}

/* ---------- Full-screen menu drawer (slides down from the top) ---------- */
.site-panel-backdrop{
  position:fixed;inset:0;z-index:110;
  background:color-mix(in srgb, var(--c-dark) 55%, transparent);
  opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.site-panel{
  position:fixed;top:0;left:0;right:0;z-index:120;height:65vh;
  background:var(--c-darker);
  color:var(--c-text-on-dark);
  transform:translateY(-100%);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
  /* Clip horizontal overflow from the nav slide-in (x:24) so the fixed drawer
     never widens the page on mobile; vertical still scrolls. */
  will-change:transform;overflow-x:hidden;overflow-y:auto;
}
/* No-JS / no-GSAP fallback: class-driven open state. */
.site-panel-backdrop.is-open{opacity:1;visibility:visible;}
.site-panel.is-open{transform:translateY(0);}

.site-panel__inner{
  min-height:100%;display:grid;grid-template-columns:3fr 1fr;
  gap:clamp(var(--sp-5),4vw,var(--sp-9));align-content:center;align-items:stretch;
  padding-top:clamp(4.5rem,9vh,7rem);padding-bottom:var(--gutter);
}

/* Feature tiles: greyscale, colour on hover / when the linked nav item is hovered.
   The tiles fill the full height of their column. */
.site-panel__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);height:100%;}
.mtile{position:relative;display:block;height:100%;text-decoration:none;color:var(--c-text-on-dark);}
.mtile__media{position:relative;display:block;height:100%;overflow:hidden;background:var(--c-surface-dark-2);}
.mtile__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.55), transparent 45%);}
.mtile__img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .8s var(--ease), filter .8s var(--ease);}
.mtile:hover .mtile__img,
.mtile:focus-visible .mtile__img,
.mtile.is-active .mtile__img{transform:scale(1.05);filter:grayscale(0);}
.mtile__label{position:absolute;left:var(--sp-5);bottom:var(--sp-5);z-index:1;margin:0;}

/* Nav list: left-aligned links, per-letter roll + accent underline that draws
   across the full width of the column. */
.site-panel__nav{align-self:center;}
.mnav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:clamp(var(--sp-1),1.4vh,var(--sp-4));text-align:left;}
.mnav__list a{
  display:block;position:relative;text-decoration:none;
  color:var(--c-text-on-dark-muted);font-size:clamp(1.25rem,0.6rem + 2.2vh,2.5rem);line-height:1.16;
  padding-bottom:clamp(var(--sp-2),1.1vh,var(--sp-4));transition:color .3s var(--ease);
}
.mnav__list a:hover,.mnav__list a:focus-visible{color:var(--c-text-on-dark);}
.mnav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--c-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.mnav__list a:hover::after,.mnav__list a:focus-visible::after{transform:scaleX(1);}
.mnav__list a:hover .char__inner,
.mnav__list a:focus-visible .char__inner{transform:translateY(-50%);}

@media (prefers-reduced-motion:reduce){
  .site-panel,.site-panel-backdrop,.menu-toggle__icon span{transition-duration:.01ms;}
  .mtile__img{transition:none;}
  .mnav__list a:hover .char__inner,
  .mnav__list a:focus-visible .char__inner{transform:none;}
}

@media (max-width:900px){
  /* Header: logo left, hamburger right (flex avoids the empty centre column). */
  .site-nav{display:none;}
  .site-header__bar{display:flex;align-items:center;justify-content:space-between;}

  /* Drawer: menu only — drop the image tiles on mobile. */
  .site-panel{height:auto;max-height:100dvh;}
  .site-panel__tiles{display:none;}
  .site-panel__inner{
    grid-template-columns:1fr;gap:var(--sp-7);align-content:start;align-items:start;
    padding-top:calc(var(--sp-8) + 3rem);
  }
  .site-panel__nav{align-self:auto;}
  .mnav__list a{font-size:var(--fs-r);}
}

/* Short windows: 65vh leaves too little room, so expand the drawer to full
   height. The fluid (vh-based) nav + paddings keep the content from overflowing;
   overflow-y:auto is the final safety net. */
@media (max-height:720px){
  .site-panel{height:100dvh;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}

/* Full-bleed background photo */
.hero__bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* Monogram watermark - large and faint, aligned to the top, down the left */
.hero__icon{
  position:absolute;z-index:3;
  left:var(--gutter);
  top:0;
  height:60vh;width:auto;
  opacity:.14;
  pointer-events:none;user-select:none;
}

/* Legibility gradient sweeping in from the left */
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;
 background: linear-gradient(90deg, color-mix(in srgb, #000000d6 72%, #000000) 0%, color-mix(in srgb, #000000 30%, transparent) 38%, transparent 65%);
  pointer-events:none;
}

/* Animated grain (WebGL); blended for filmic grit */
.hero__grain{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;
  pointer-events:none;
  mix-blend-mode:overlay;
  opacity:.18;
}

.hero__inner{
  position:relative;z-index:4;
  width:100%;
  padding-block:var(--sp-9);
  display:flex;flex-direction:column;gap:var(--sp-5);
}

.hero__eyebrow{margin:0;}
.hero__title{margin:0;max-width:22ch;}

/* Headline lines + per-word masks for the GSAP reveal (theme.js splits the
   words in). Word masks carry a little vertical room so descenders aren't
   clipped at rest; the line itself stays visible so the rising/rotating words
   aren't double-clipped. */
.hero__line{display:block;overflow:visible;}
.hero__line-inner{display:block;}
.hero__word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em;}
.hero__word-inner{display:inline-block;will-change:transform;}

/* ---------- Search + services bar (full width, below the hero) ---------- */
.searchbar{position:relative;}
.searchbar__inner{display:grid;grid-template-columns:3fr 1fr 1fr;align-items:stretch;}

/* Left: light search panel (~60%) */
.searchbar__search{
  padding:var(--sp-7) var(--sp-7);
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.searchbar__eyebrow{margin:0;color:var(--c-text-on-light-muted);}
.searchbar__row{display:flex;align-items:flex-end;gap:var(--sp-6);}
/* Auto-flow rather than a fixed column count: the fields share whatever space is
   left up to the button, so the row stays filled if a field is added or removed
   (it was hardcoded to 3 and left a dead column when we dropped to 2). */
.searchbar__fields{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--sp-6);flex:1;min-width:0;}
.searchbar__fields .field + .field{border-left:1px solid var(--c-border-on-light);padding-left:var(--sp-6);}

.field{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;}
.field__label{font-size:var(--fs-pxs);color:var(--c-text-on-light-muted);}
.field__control{position:relative;display:flex;align-items:center;}
.field__select{
  appearance:none;-webkit-appearance:none;
  width:100%;border:0;background:transparent;color:inherit;border-radius:0;
  font-family:var(--font);font-size:var(--fs-pr);line-height:1.2;
  padding:0 1.75rem 0 0;cursor:pointer;
}
.field__select:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;}
.field__chev{position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:none;}

.searchbar__go{
  align-self:flex-end;flex:0 0 auto;
  background:color-mix(in srgb, var(--c-dark) 10%, var(--c-light));
  color:var(--c-text-on-light);
}
.searchbar__go:hover,.searchbar__go:focus-visible{background:var(--c-dark);color:var(--c-light);}

/* Right: two equal dark service buttons (~20% each) */
.service{
  display:flex;flex-direction:column;justify-content:center;gap:var(--sp-3);
  padding:var(--sp-6) var(--sp-7);text-decoration:none;
  transition:background .4s var(--ease);
}
.service + .service{border-left:1px solid var(--c-border-on-dark);}
.service:hover,.service:focus-visible{background:var(--c-surface-dark-2);}
.service__eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);margin:0;}
.service__arrow{display:inline-block;transition:transform .35s var(--ease);}
.service:hover .service__arrow,.service:focus-visible .service__arrow{transform:translateX(6px);}
.service__title{margin:0;}

/* Letter roll structure (shared with the nav) */
.roll{display:inline;}
.roll__word{display:inline-flex;white-space:nowrap;}
.service:hover .char__inner,.service:focus-visible .char__inner{transform:translateY(-50%);}

@media (prefers-reduced-motion:reduce){
  .service,.service__arrow{transition:none;}
  .service:hover .char__inner,.service:focus-visible .char__inner{transform:none;}
}

@media (max-width:980px){
  .searchbar__inner{grid-template-columns:1fr 1fr;}
  .searchbar__search{grid-column:1 / -1;}
  .searchbar__search { padding: var(--sp-7) var(--sp-6); }
  .service { padding: var(--sp-7) var(--sp-6); }
}
@media (max-width:620px){
  .searchbar__inner{grid-template-columns:1fr;}
  .searchbar__search{grid-column:auto;}
  .searchbar__row{flex-direction:column;align-items:stretch;gap:var(--sp-5);}
  .searchbar__fields{grid-auto-flow:row;grid-auto-columns:auto;}
  .searchbar__fields .field + .field{border-left:0;padding-left:0;border-top:1px solid var(--c-border-on-light);padding-top:var(--sp-4);}
  .searchbar__go{align-self:flex-start;}
  .service + .service{border-left:0;border-top:1px solid var(--c-border-on-dark);}
  .searchbar__search { padding: var(--sp-6) var(--sp-5); }
  .service { padding: var(--sp-6) var(--sp-5); }
}

/* ---------- Latest properties carousel ---------- */
.latest{
  /* Tiled fabric texture with a #191919 colour-burn overlay (per design). */
  background-color: #191919d6;
  background-image:url("/wp-content/uploads/fabric-bg.png");
  background-repeat:repeat;
  background-blend-mode:color-burn;
  color:var(--c-text-on-dark);
}
.latest .mh-l,.latest .mh-r,.latest .mh-s{color:var(--c-text-on-dark-muted);}
.latest .text-muted{color:var(--c-text-on-dark-muted);}

.latest__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);
  margin-bottom:var(--sp-7);flex-wrap:wrap;
}
.latest__title{margin:0;}
.latest__controls{display:flex;align-items:center;gap:var(--sp-5);}
.latest__empty{margin:0;color:var(--c-text-on-dark-muted);}

/* btn links should never be underlined */
.btn{text-decoration:none;}

.carousel-nav{display:flex;gap:var(--sp-2);}
.carousel-arrow{
  width:3rem;height:3rem;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:inherit;border:1px solid var(--c-border-on-dark);
  cursor:pointer;transition:background .3s var(--ease), color .3s var(--ease);
}
.carousel-arrow:hover{background:var(--c-light);color:var(--c-dark);}
.carousel-arrow:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;}
.carousel-arrow[disabled]{opacity:.35;cursor:default;}

/* Free-scrolling / swipe track (no scroll-snap).
   Full-bleed: the track breaks out of the container to both viewport edges,
   so cards run edge to edge (the heading above stays in the container). */
.pcarousel{
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.pcarousel::-webkit-scrollbar{display:none;}
.pcarousel.is-dragging{cursor:grabbing;}
/* Don't let the browser ghost-drag card images or select text while swiping. */
.pcarousel{user-select:none;-webkit-user-select:none;}
.pcarousel img{-webkit-user-drag:none;user-select:none;pointer-events:none;}
.pcarousel__track{
  display:flex;gap:var(--sp-3);list-style:none;margin:0;padding:0;width:max-content;
}

/* Card width = four full cards across the full-bleed track (full viewport
   width), leaving the 5th peeking past the right edge. Subtract the 4
   inter-card gaps + a (small) peek. The gap term matches the track's gap. */
.pcard{
  flex:0 0 auto;
  width:calc((100vw - (4 * var(--sp-3)) - 2rem) / 4);
}
@media (max-width:1200px){ /* 3 full cards + peek */
  .pcard{ width:calc((100vw - (3 * var(--sp-3)) - 2rem) / 3); }
}
@media (max-width:1000px){ /* 2 full cards + peek */
  .pcard{ width:calc((100vw - (2 * var(--sp-3)) - 2rem) / 2); }
}
@media (max-width:640px){ /* 1 full card + peek */
  .pcard{ width:calc(100vw - 4.5rem); }

  /* Move the "View all" button + arrows below the carousel. display:contents
     promotes the title + controls into the container so they can be reordered. */
  .latest .container{ display:flex; flex-direction:column; }
  .latest__head{ display:contents; }
  .latest__title{ order:1; margin-bottom:var(--sp-6); }
  .pcarousel{ order:2; }
  .latest__empty{ order:2; }
  .latest__controls{ order:3; margin-top:var(--sp-6); justify-content:space-between; }
}
.pcard__link{display:block;text-decoration:none;color:inherit;}
.pcard__media{
  position:relative;aspect-ratio:10 / 12;overflow:hidden;
  border-radius:2px;background:var(--c-surface-dark-2);
}
/* Home carousel cards run shorter (square) than the archive's 10/12 tiles — at
   four across they'd otherwise read too tall and narrow. Scoped to the carousel
   so the archive grid is untouched. */
.pcarousel .pcard__media{ aspect-ratio:13 / 16; }
.pcard__img{width:100%;height:100%;object-fit:cover;}
.pcard__pill{
  position:absolute;top:var(--sp-5);left:var(--sp-5);z-index:2;
  /* Asymmetric padding trims the optical top-heaviness of the uppercase label. */
  font-size:10px;font-weight:600;text-align:center;
  padding:4.5px 6px 4px 8px;border-radius:2px;
  background:color-mix(in srgb, var(--c-dark) 88%, transparent);
  color:var(--c-light) !important;backdrop-filter:blur(4px);
}
/* Content overlaid on the image, anchored to the baseline */
.pcard__overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-5);
  color:var(--c-light);
  height: 50%;
  justify-content: flex-end;
  background:linear-gradient(to top,
    color-mix(in srgb, #000 94%, transparent) 0%,
    color-mix(in srgb, #000  60%, transparent) 38%,
    color-mix(in srgb, #000  18%, transparent) 72%,
    transparent 100%);
}
.pcard__title{margin:0;font-size:var(--fs-xs);text-wrap:pretty;} /* overrides the .h-s utility on the element */
.pcard__row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);
}
.pcard__meta{margin:0;opacity:.85;}            /* property data, smaller */
.pcard__price{margin:0;white-space:nowrap;text-transform:uppercase;}

/* Soft hover: gentle image zoom + a subtle overlay deepen */
.pcard__img{transition:transform .6s var(--ease);}
.pcard__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:color-mix(in srgb, var(--c-dark) 18%, transparent);
  opacity:0;transition:opacity .5s var(--ease);
}
.pcard__link:hover .pcard__img,
.pcard__link:focus-visible .pcard__img{transform:scale(1.05);}
.pcard__link:hover .pcard__media::after,
.pcard__link:focus-visible .pcard__media::after{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .pcard__img{transition:none;}
  .pcard__link:hover .pcard__img,
  .pcard__link:focus-visible .pcard__img{transform:none;}
  .pcard__media::after{transition:none;}
}

/* ---------- Who we are ---------- */
.whoweare{padding-block:var(--sp-10);}
.whoweare__grid{
  display:grid;grid-template-columns:repeat(12, 1fr);
  column-gap:var(--sp-7);align-items:start;
}
.whoweare__left{grid-column:1 / 5;display:flex;flex-direction:column;gap:var(--sp-7);}
.whoweare__overview{grid-column:6 / 8;margin:0;color:var(--c-text-on-light-muted);}
.whoweare__main{grid-column:8 / 13;display:flex;flex-direction:column;gap:var(--sp-6);}

.whoweare__heading{margin:0;}
.whoweare__lead{margin:0;}
.whoweare__copy{
  display:flex;flex-direction:column;gap:var(--sp-5);max-width:48ch;
  color:var(--c-text-on-light-muted);font-size:var(--fs-pr);
}
.whoweare__copy p{margin:0;}
.whoweare__cta{margin:var(--sp-3) 0 0;}

.whoweare__figure{margin:0;}
.whoweare__figure--right{margin-top:var(--sp-7);}
.whoweare__media{position:relative;overflow:hidden;background:color-mix(in srgb, var(--c-dark) 10%, var(--c-light));}
.whoweare__figure--left .whoweare__media{aspect-ratio:5 / 6;}
.whoweare__figure--right .whoweare__media{aspect-ratio:6 / 5;}
/* Image sits taller than its frame so it can drift on scroll (parallax) */
.whoweare__img{position:absolute;inset:0;top:-10%;width:100%;height:120%;object-fit:cover;}
.whoweare__caption{display:block;margin-top:var(--sp-3);color:var(--c-text-on-light-muted);}

@media (max-width:1024px){
  .whoweare__grid{grid-template-columns:1fr;row-gap:var(--sp-7);}
  .whoweare__left,.whoweare__overview,.whoweare__main{grid-column:1;}
  .whoweare__figure--right{margin-top:0;}
}

@media (max-width:640px){
  /* Drop the section labels; lead with the intro paragraph, then both images
     at the bottom matched in size. display:contents promotes the nested figures
     so every item shares one column and can be reordered. */
  .whoweare__heading,
  .whoweare__overview{display:none;}
  .whoweare__left,.whoweare__main{display:contents;}
  .whoweare__grid{row-gap:var(--sp-5);}
  .whoweare__lead{order:1;}
  .whoweare__copy{order:2;}
  .whoweare__cta{order:3;margin-top:0;}
  .whoweare__figure--left{order:4;}
  .whoweare__figure--right{order:5;margin-top:0;}
  .whoweare__figure--left .whoweare__media,
  .whoweare__figure--right .whoweare__media{aspect-ratio:4 / 3;}
}

/* ---------- Where we work (location carousel) ---------- */
.wherework{padding-block:var(--sp-8); overflow: hidden;}
.wherework__inner{
  display:flex;align-items:center;gap:var(--sp-8);
  padding-left:var(--gutter); /* heading aligns to container; scroller bleeds right */
}
.wherework__heading{margin:0;flex:0 0 auto;}

/* Continuous marquee: auto-scrolls, no interaction, fades at both edges */
.wherework__marquee{
  flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.wherework__track{
  display:flex;list-style:none;margin:0;padding-block:var(--sp-2);
  width:max-content;
  animation:wherework-marquee 38s linear infinite;
}
@keyframes wherework-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
/* ---------- Publication logos ("Collectively Featured In") ----------
   Plain logos, no pill. The wordmarks range from ~1.9:1 (GQ, OK!) to ~12:1 (The
   Business Desk), so each is capped on BOTH axes — as the accreditation strip
   does — to keep their visual weight comparable rather than letting the widest
   dominate. */
.pubs__item{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  margin-right:clamp(2rem,4vw,3.5rem);
}
/* Every logo scales on ONE responsive curve; the per-logo tuning below is a
   multiplier on it (--pub-h for height, --pub-w for the width cap). Giving each
   logo its own clamp() instead lets them drift apart at intermediate widths,
   because the slopes differ. */
.pubs__logo{
  --pub-h:1;
  --pub-w:1;
  height:auto;width:auto;
  max-height:calc(clamp(18px,2vw,24px) * var(--pub-h));
  max-width:calc(clamp(104px,11vw,150px) * var(--pub-w));
  object-fit:contain;
  filter:grayscale(1);opacity:.55;
}
/* Optical balance — equal height is not equal presence. Forbes and Men's Health
   are heavy wordmarks that read large; GQ and OK! are compact and read small.
   Tuned by eye, not by formula.
   NB The Business Desk is ~12:1, so its height is governed by the width cap, not
   the height cap — it will always sit shorter than the rest. Matching their
   height would make it ~280px wide, which dominates the row instead. */
.pubs__logo--forbes,
.pubs__logo--mens-health{--pub-h:.8;}
.pubs__logo--gq,
.pubs__logo--ok-magazine{--pub-h:1.12;}
.pubs__logo--the-independent,
.pubs__logo--entrepreneur{--pub-h:.92;}
/* --pub-w keeps the width cap off its back at narrow widths, so height stays the
   binding constraint and it scales with the rest. */
.pubs__logo--yahoo-finance{--pub-h:.88;--pub-w:1.15;}
.pubs__logo--the-business-desk{--pub-w:1.28;}
/* The supplied SVGs carry no fill attribute, so they render black — invert them
   on the dark footer or they would be invisible. */
.surface-dark .pubs__logo{filter:brightness(0) invert(1);opacity:.7;}

.pubs--static{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);}
.pubs__heading{margin:0;color:var(--c-text-on-dark-muted);}
.pubs__row{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--sp-4) clamp(1.5rem,3.5vw,3rem);
}
.pubs--static .pubs__item{margin-right:0;}
.site-footer__pubs{
  padding-block:var(--sp-6);
  border-top:1px solid color-mix(in srgb, var(--c-text-on-dark) 12%, transparent);
}

.chip{
  flex:0 0 auto;width:14rem;margin-right:var(--sp-4); /* equal width; trailing margin keeps the loop seamless */
  display:inline-flex;align-items:center;
  padding:var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-1);
  border:1px solid var(--c-border-on-light);border-radius:var(--radius-pill);
  background: transparent;;
}
/* Linked chip (e.g. Landlords "Where we work" → property archive). */
.chip__link{
  display:flex;align-items:center;flex:1 1 auto;min-width:0;
  text-decoration:none;color:inherit;
}
.chip__link:hover .chip__label,
.chip__link:focus-visible .chip__label{color:var(--c-accent);}
.chip__avatar{
  width:3rem;height:3rem;border-radius:var(--radius-pill);overflow:hidden;flex:0 0 auto;
}
.chip__img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5);}
.chip__avatar .jph::after{display:none;} /* no label text inside the small avatar */
.chip__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; width: 100%; line-height: 1;
    text-align: center; margin-right: var(--sp-3)}

@media (max-width:780px){
  .wherework__inner{flex-direction:column;align-items:flex-start;gap:var(--sp-5);}
  .lp-contact .cols2 { gap: var(--sp-8);}
  .wherework__marquee { 
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1%, #000 20%, transparent 100%);
  }
  .hero {
    min-height: 80vh;
  }
  .cta__inner { padding-block: 0; }
}
@media (prefers-reduced-motion:reduce){
  .wherework__track{animation:none;}
}

/* ---------- Renting / Letting (two simple columns) ---------- */
.duo__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-9);}
.duo__col{display:flex;flex-direction:column;position:relative;}
.duo__media{margin:0 0 var(--sp-6);overflow:hidden;aspect-ratio:3 / 2;}
.duo__img{
  width:100%;height:100%;object-fit:cover;filter:grayscale(1);
  transition:transform .8s var(--ease),filter .8s var(--ease);
}
.duo__col:hover .duo__img{transform:scale(1.04);filter:grayscale(0.1);}
.duo__eyebrow{margin:0 0 var(--sp-3);}
.duo__title{margin:0 0 var(--sp-4);}
.duo__body{margin:0 0 var(--sp-6);max-width:48ch;}
.duo__cta{margin:0;}

/* Whole tile clickable: the CTA link stretches to cover the column. */
.duo__col .btn[data-card-link]::after{content:"";position:absolute;inset:0;z-index:1;}
/* ...and the button plays its hover state when any part of the tile is hovered. */
.duo__col:hover .btn--ghost{background:var(--c-dark);color:var(--c-light);}
.duo__col:hover .char__inner{transform:translateY(-50%);}
.duo__col:hover .btn__arrow{transform:translateX(5px);}
/* When the follow-cursor is active, hide the native pointer over the tile
   (including the stretched link / button that sits inside it). */
.has-cursor,.has-cursor *{cursor:none;}

/* Follow-cursor (positioned by JS; circle scales in on tile hover). */
.follow-cursor{position:fixed;top:0;left:0;z-index:120;pointer-events:none;}
.follow-cursor__inner{
  display:flex;align-items:center;justify-content:center;
  width:104px;height:104px;border-radius:50%;
  background:var(--c-dark);color:var(--c-light);
  font-size:var(--fs-pxs);letter-spacing:.12em;text-transform:uppercase;
  transform:scale(0);opacity:0;
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.follow-cursor.is-active .follow-cursor__inner{transform:scale(1);opacity:1;}
/* Light variant for dark-background contexts. */
.follow-cursor--light .follow-cursor__inner{background:var(--c-light);color:var(--c-dark);}

/* Swipe chevrons either side of the circle (opt-in via .follow-cursor--swipe).
   Absolutely placed so they never shift the circle off the pointer. */
.follow-cursor__chevron{
  position:absolute;top:50%;display:none;color:var(--c-light);
  transform:translateY(-50%) scale(0);opacity:0;
  transition:transform .35s var(--ease),opacity .35s var(--ease);
  filter:drop-shadow(0 1px 2px color-mix(in srgb, var(--c-dark) 55%, transparent));
}
.follow-cursor__chevron svg{display:block;}
.follow-cursor__chevron--left{right:100%;margin-right:var(--sp-2);}
.follow-cursor__chevron--right{left:100%;margin-left:var(--sp-2);}
.follow-cursor--swipe .follow-cursor__chevron{display:block;}
.follow-cursor--swipe.is-active .follow-cursor__chevron{transform:translateY(-50%) scale(1);opacity:1;}

@media (prefers-reduced-motion:reduce){
  .duo__img{transition:none;}
  .duo__col:hover .duo__img{transform:none;}
  .duo__col:hover .char__inner{transform:none;}
  .duo__col:hover .btn__arrow{transform:none;}
}
@media (max-width:780px){
  .duo__grid{grid-template-columns:1fr;}
}

/* ---------- From the journal (latest posts) ---------- */
.journal__grid{
  display:grid;grid-template-columns:1fr 2fr;gap:var(--sp-9);align-items:start;
}
.journal__intro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);}
.journal__eyebrow{margin:0;}
.journal__title{margin:0;max-width:16ch;}
.journal__cta{margin:var(--sp-3) 0 0;}

.journal__posts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);}
.journal__empty{margin:0;color:var(--c-text-on-light-muted);}

.journal__card{position:relative;display:flex;flex-direction:column;}
.journal__media{margin:0 0 var(--sp-4);overflow:hidden;aspect-ratio:16 / 11;border-radius:4px;}
.journal__img{
  width:100%;height:100%;object-fit:cover;filter:grayscale(1);
  transition:transform .6s var(--ease),filter .6s var(--ease);
}
.journal__card:hover .journal__img{transform:scale(1.03);filter:grayscale(0.5);}
.journal__post-title{margin:0 0 var(--sp-3); text-wrap: pretty;}
.journal__meta{margin:0;display:flex;align-items:center;gap:var(--sp-2);color:var(--c-text-on-light-muted);}
.journal__sep{opacity:.6;}
.journal__more{color:var(--c-text-on-light);text-decoration:none;}

/* Whole card clickable: the Read More link stretches to cover it. */
.journal__card .journal__more[data-card-link]::after{content:"";position:absolute;inset:0;z-index:1;}
/* Read More rolls when any part of the card is hovered (button-split letters). */
.journal__card:hover .journal__more .char__inner{transform:translateY(-50%);}

@media (prefers-reduced-motion:reduce){
  .journal__img{transition:none;}
  .journal__card:hover .journal__img{transform:none;}
  .journal__card:hover .journal__more .char__inner{transform:none;}
}
@media (max-width:1000px){
  .journal__grid{grid-template-columns:1fr;gap:var(--sp-7);}
}
@media (max-width:560px){
  .journal__posts{grid-template-columns:1fr;}
}

/* ---------- Closing statement (shorter cinematic band) ---------- */
.cta{
  position:relative;min-height:78vh;display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;
}
.cta__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.cta::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--c-dark) 70%, transparent) 0%,
    color-mix(in srgb, var(--c-dark) 25%, transparent) 45%,
    transparent 80%);
}
.cta__grain{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;
  pointer-events:none;mix-blend-mode:overlay;opacity:.22;
}
.cta__inner{
  position:relative;z-index:4;width:100%;padding-block:var(--sp-9);
  display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:var(--sp-8);
}
.cta__title{margin:0;max-width:12ch;}
.cta__aside{display:flex;flex-direction:column;gap:var(--sp-5);max-width:40ch;}
.cta__lead{margin:0;}
.cta__cta{margin:0;}
@media (max-width:780px){
  .cta{min-height:520px;}
  .cta__inner{grid-template-columns:1fr;gap:var(--sp-4); padding-bottom: 0px;}
  .journal__cta { display: none;}
}

/* ---------- Closing conversation band (static bg, text fade-in) ---------- */
.convo{
  position:relative;min-height:70vh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
}
.convo__bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center right;
}
/* Monogram, blended into the photo (overlay) — sits above the bg, below text. */
.convo__icon{
  position:absolute;z-index:1;
  right:var(--gutter);top:50%;transform:translateY(-50%);
  height:78%;width:auto;max-width:46%;
  mix-blend-mode:overlay;opacity:.2;
  pointer-events:none;user-select:none;
}
/* Slight black gradient sweeping in from the left for legibility. */
.convo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--c-dark) 70%, transparent) 0%,
    color-mix(in srgb, var(--c-dark) 28%, transparent) 35%,
    transparent 62%);
}
.convo__inner{
  position:relative;z-index:3;width:100%;padding-block:var(--sp-10);
  display:flex;flex-direction:column;gap:var(--sp-5);
}
.convo__title{margin:0;max-width:14ch;}
.convo__lead{margin:0;max-width:46ch;opacity:.82; text-wrap: balance;}
.convo__cta{margin:var(--sp-2) 0 0;}
@media (max-width:780px){
  .convo{min-height:520px; align-items: flex-start; }
  .convo::after{
    background:linear-gradient(to top,
      color-mix(in srgb, var(--c-dark) 80%, transparent) 0%,
      color-mix(in srgb, var(--c-dark) 38%, transparent) 60%,
      transparent 100%);
  }
  .convo__inner { padding-top: var(--sp-7) !important; }
  .convo__bg { object-position: top center; }

}

/* Temporary scroll-test rows (remove later) */
.test-row{min-height:100vh;display:flex;align-items:center;}

@media (max-width:700px){
  .hero__icon{height:48vh;opacity:.12;}
  .hero__br{display:none;}
  .hero__inner{padding-block:var(--sp-8);}
}

@media (prefers-reduced-motion:reduce){
  .hero__grain{opacity:.26;}
}

/* ---------- Site footer ---------- */
.site-footer{padding-top:var(--sp-9);}
.site-footer__inner{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1.5fr;
  gap:var(--sp-7);align-items:start;
  padding-bottom:var(--sp-9);
}
.site-footer__logo{display:inline-flex;}
.site-footer__logo img{height:42px;width:auto;filter:brightness(0) invert(1);}

.footer-col__title{margin:0 0 var(--sp-5);}
.footer-col__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3);}
.footer-col__list a{
  color:var(--c-text-on-dark);text-decoration:none;opacity:.82;
  transition:opacity .25s var(--ease);
}
.footer-col__list a:hover{opacity:1;}

.site-footer__contact{
  padding:var(--sp-6);
  background:color-mix(in srgb, var(--c-light) 4%, transparent);
}
.site-footer__contact-title{margin:0 0 var(--sp-5);}
.site-footer__contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4);}
.site-footer__contact-item{display:flex;align-items:center;gap:var(--sp-3);}
.site-footer__contact-item--address{align-items:flex-start;}
.site-footer__contact-icon{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--c-border-on-dark);color:var(--c-text-on-dark);
}
.site-footer__contact a{color:var(--c-text-on-dark);text-decoration:none;opacity:.9;transition:opacity .25s var(--ease);}
.site-footer__contact a:hover{opacity:1;}

.site-footer__bar{border-top:1px solid var(--c-border-on-dark);}
.site-footer__bar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding-block:var(--sp-5);
}
.site-footer__copy,.site-footer__legal{margin:0;font-size:var(--fs-pxs);color:var(--c-text-on-dark-muted);}
.site-footer__legal{display:flex;gap:var(--sp-2);}
.site-footer__legal a{color:inherit;text-decoration:none;transition:color .25s var(--ease);}
.site-footer__legal a:hover{color:var(--c-text-on-dark);}

@media (max-width:1000px){
  .site-footer__inner{grid-template-columns:1fr 1fr 1fr;}
  .site-footer__brand{grid-column:1 / -1;}
  .site-footer__contact{grid-column:1 / -1;}
}
@media (max-width:620px){
  .site-footer__inner{grid-template-columns:1fr 1fr;}
  .site-footer__bar-inner{flex-direction:column;align-items:flex-start;gap:var(--sp-2);}
}