/* Six customer-facing families. Visual roles only: no content, order or gates.
 * Existing licensed fonts and customer colors remain the source of truth. */
html[data-site-design] {
  --ny-role-body:var(--ny-type-japanese);
  --ny-role-heading:var(--ny-type-display);
  --ny-role-label:var(--ny-type-english);
  --ny-role-number:var(--font-sans,system-ui);
  --ny-role-line:var(--line);
  --ny-role-space:clamp(24px,3vw,48px);
  --ny-role-photo:4/3;
  --ny-role-motion:200ms;
  --ny-type-body:16px;
  --ny-type-body-leading:1.85;
}
html[data-site-design] :is(.hero-copy,.section-description,.about-copy p,.page-lead,.page-copy p,.listing-description,.listing-card h3,.property-title,.listing-detail-header h1) {
  word-break:normal;line-break:strict;overflow-wrap:break-word;
}
html[data-site-design] :is(.section-description,.about-copy p,.page-lead,.page-copy p,.listing-description) {
  font-family:var(--ny-role-body);font-size:16px;line-height:var(--ny-type-body-leading);letter-spacing:.01em;
}
html[data-site-design] :is(.card-price strong,.card-loan strong,.listing-detail-price strong,.listing-places .place-distance) {
  font-family:var(--ny-role-number);font-variant-numeric:tabular-nums;letter-spacing:0;
}
html[data-site-design] :is(.card-price,.card-spec,.card-loan) {margin-block:0;line-height:1.65}
html[data-site-design] .card-price-pending strong {font-size:18px;font-weight:600}
html[data-site-design] .loan-footnote {white-space:normal;word-break:normal;line-break:strict;overflow-wrap:break-word;line-height:1.75}
html[data-site-design] .listing-card-photo {aspect-ratio:var(--ny-role-photo);overflow:hidden}
html[data-site-design] .listing-card-photo img {width:100%;height:100%;object-fit:cover;transition:transform 480ms ease}
html[data-site-design] :is(.listing-card-body,.property-copy) {min-width:0}
html[data-site-design] :is(.listing-card h3,.property-title) {line-height:1.55;text-wrap:pretty}
html[data-site-design] :is(.hero-quick-field select,.listing-filter select) {font-family:var(--ny-role-body);font-size:16px}
html[data-site-design] :is(.hero-quick-field,.listing-filter) {min-width:0}
html[data-site-design] :is(.hero-actions .button,.page-button,.housing-button,.hero-quick-submit) {transition-duration:var(--ny-role-motion);white-space:normal}
html[data-site-design] :is(.hero-actions .button,.page-button,.housing-button,.hero-quick-submit):focus-visible {outline:3px solid currentColor;outline-offset:4px}

/* 01: a clear, practical property index; numbers and generous controls. */
html[data-site-design="modern-portal"] {--ny-role-photo:4/3;--ny-type-card-gap:24px;--ny-type-card-leading:1.55}
html[data-site-design="modern-portal"] :is(.listing-card,#property .property-item) {box-shadow:0 4px 16px #102b430c;border:1px solid var(--line)}
html[data-site-design="modern-portal"] .listing-card-body {padding:24px;gap:12px}
html[data-site-design="modern-portal"] .card-price {padding-block:10px;border-block:1px solid var(--line)}
html[data-site-design="modern-portal"] .card-updated {font-size:12px;line-height:1.6}
html[data-site-design="modern-portal"] .subpage .listing-filters {box-shadow:none;border-top-width:3px}

/* 02: the company archive. White space, hairlines, restrained type. */
html[data-site-design="minimal-corporate"] {--ny-role-photo:8/5;--ny-type-hero-tracking:.02em;--ny-type-body-leading:1.85;--ny-type-section-en-tracking:.04em}
html[data-site-design="minimal-corporate"] .hero-quick-form {border:0;border-block:1px solid var(--line);padding:24px 0;background:transparent}
html[data-site-design="minimal-corporate"] .hero-quick-field {border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
html[data-site-design="minimal-corporate"] .hero-quick-submit {box-shadow:none;border-radius:0!important}
html[data-site-design="minimal-corporate"] .listing-card-body {padding:24px 0 32px;gap:12px}
html[data-site-design="minimal-corporate"] .card-price {margin-top:8px}
html[data-site-design="minimal-corporate"] .subpage .page-section-heading h2 {font-weight:500;letter-spacing:.02em}

/* 03: an editorial rhythm: warm paper, readable prose and photo essays. */
html[data-site-design="editorial-warm"] {--ny-role-photo:5/4;--ny-type-body-leading:1.9;--ny-type-hero-tracking:.01em;--ny-type-hero-leading:1.55}
html[data-site-design="editorial-warm"] .hero-copy {max-width:29em;letter-spacing:.01em}
html[data-site-design="editorial-warm"] .hero-quick-field {border-radius:0;border-color:var(--line);background:transparent}
html[data-site-design="editorial-warm"] .hero-quick-form {padding:24px;background:var(--pale);border-color:var(--line)}
html[data-site-design="editorial-warm"] .listing-card-body {padding:26px 8px 30px;gap:14px}
html[data-site-design="editorial-warm"] :is(.card-spec,.card-tags,.card-updated) {font-family:var(--font-sans,system-ui)}
html[data-site-design="editorial-warm"] .card-price {padding-top:12px;border-top:1px solid var(--line)}
html[data-site-design="editorial-warm"] .subpage .page-copy {max-width:44em}

/* 04: spaces first. Open photo cards and a quieter caption hierarchy. */
html[data-site-design="lifestyle-gallery"] {--ny-role-photo:3/4;--ny-type-body-leading:1.85;--ny-type-hero-tracking:0;--ny-type-card-gap:clamp(24px,4vw,56px)}
html[data-site-design="lifestyle-gallery"] .listing-card-body {padding:24px 0;gap:12px}
html[data-site-design="lifestyle-gallery"] .listing-card h3 {font-size:clamp(19px,1.65vw,24px);font-weight:500}
html[data-site-design="lifestyle-gallery"] .card-price {font-size:18px}
html[data-site-design="lifestyle-gallery"] .hero-quick-field {border-radius:0;border:0;border-bottom:1px solid var(--line)}
html[data-site-design="lifestyle-gallery"] .hero-quick-form {padding:28px;background:#fff}
html[data-site-design="lifestyle-gallery"] .subpage .page-section-heading {margin-bottom:32px}

/* 05: compare clearly. Aligned facts and an unclipped keyboard outline. */
html[data-site-design="performance-tech"] {--ny-role-photo:16/10;--ny-type-body-leading:1.8;--ny-type-card-gap:24px;--ny-type-hero-tracking:0}
html[data-site-design="performance-tech"] :is(.hero-actions .button,.page-button,.housing-button,.hero-quick-submit) {clip-path:none;border-radius:2px}
html[data-site-design="performance-tech"] .listing-card-body {padding:24px;gap:12px}
html[data-site-design="performance-tech"] .card-price {padding-block:12px;border-block:1px solid var(--line)}
html[data-site-design="performance-tech"] :is(.card-spec,.card-loan) {font-variant-numeric:tabular-nums}
html[data-site-design="performance-tech"] .hero-quick-field {border-radius:2px}
html[data-site-design="performance-tech"] .subpage .listing-detail-header h1 {letter-spacing:0;line-height:1.5}

/* 06: calm architectural hospitality; measured serif, framed details. */
html[data-site-design="trust-premium"] {--ny-role-photo:3/2;--ny-type-body-leading:1.9;--ny-type-hero-tracking:.015em;--ny-type-card-gap:clamp(28px,4vw,60px)}
html[data-site-design="trust-premium"] .hero-copy {max-width:31em;letter-spacing:.015em}
html[data-site-design="trust-premium"] .hero-quick-form {padding:28px;border:1px solid var(--line);background:var(--pale)}
html[data-site-design="trust-premium"] .hero-quick-field {border-radius:0;border-color:var(--line);background:transparent}
html[data-site-design="trust-premium"] .listing-card-body {padding:28px 0 32px;gap:14px}
html[data-site-design="trust-premium"] .card-price {border-top:1px solid var(--line);padding-top:16px}
html[data-site-design="trust-premium"] .subpage .page-copy {max-width:45em}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html[data-site-design] .listing-card-link:hover .listing-card-photo img {transform:scale(1.02)}
}
@media (max-width:760px) {
  html[data-site-design] {--ny-type-body:16px;--ny-role-space:24px}
  html[data-site-design] .hero-copy {font-size:16px!important;line-height:1.85!important}
  html[data-site-design] :is(.hero-quick-form,.subpage .listing-filters) {padding:20px}
  html[data-site-design="minimal-corporate"] .hero-quick-form {padding-inline:0}
  html[data-site-design="lifestyle-gallery"] {--ny-role-photo:4/3}
  html[data-site-design] .listing-card-body {padding-block:20px}
}
@media (prefers-reduced-motion:reduce) {
  html[data-site-design] :is(.listing-card-photo img,.hero-actions .button,.page-button,.housing-button,.hero-quick-submit) {transition:none;animation:none;transform:none}
}

/* Lifestyle: an open photographic spread, with an independent reading column.
 * Only presentation changes; approved copy, photo sources and preset order stay.
 */
html[data-site-design="lifestyle-gallery"] main#main .hero {background:var(--pale)}
html[data-site-design="lifestyle-gallery"] main#main .hero > .hero-copy-block {
  background:var(--pale)!important;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(32px,4vw,64px)!important;
}
html[data-site-design="lifestyle-gallery"] main#main .hero h1 {
  color:var(--brand-dark)!important;font-size:clamp(34px,3vw,46px);
  line-height:1.5;letter-spacing:.02em;text-shadow:none;
}
html[data-site-design="lifestyle-gallery"] main#main .hero .hero-copy {
  color:var(--ink)!important;text-shadow:none;max-width:29em;
}
html[data-site-design="lifestyle-gallery"] main#main .hero .nayuta-template-kicker {color:var(--brand)}
html[data-site-design="lifestyle-gallery"] main#main .hero .hero-actions .button-outline {
  color:var(--brand-dark);border-color:var(--brand-dark);background:transparent;
}
html[data-site-design="lifestyle-gallery"] main#main .hero .hero-copy-footer {margin-top:24px}
html[data-site-design="lifestyle-gallery"] main#main .hero > .hero-visual::after {background:none}
html[data-site-design="lifestyle-gallery"] main#main .hero .nayuta-template-mosaic {
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;
  padding:0;gap:12px;background:var(--pale);
}
html[data-site-design="lifestyle-gallery"] main#main .hero .nayuta-template-image:first-child {grid-column:auto}
html[data-site-design="lifestyle-gallery"] main#main #property {background:#fff}
html[data-site-design="lifestyle-gallery"] main#main :is(#property,#journal,#about) .section-heading h2 {
  font-size:clamp(38px,5vw,72px);letter-spacing:-.035em;
}
html[data-site-design="lifestyle-gallery"] main#main #property .property-grid {gap:clamp(20px,3vw,40px)}
html[data-site-design="lifestyle-gallery"] main#main #property .property-item .property-copy {
  padding:24px 0 16px;border-bottom:1px solid var(--line);
}
html[data-site-design="lifestyle-gallery"] main#main #property .property-item .property-copy h3 {
  font-size:clamp(18px,1.6vw,23px);line-height:1.65;
}
html[data-site-design="lifestyle-gallery"] main#main #journal .journal-layout {gap:clamp(28px,5vw,72px)}
html[data-site-design="lifestyle-gallery"] main#main #journal .journal-featured figure {aspect-ratio:3/2}
html[data-site-design="lifestyle-gallery"] .subpage .page-hero {padding-block:clamp(48px,7vw,96px)}
html[data-site-design="lifestyle-gallery"] .subpage .page-section-heading {padding-top:24px;border-top:1px solid var(--line)}
@media(min-width:761px) {
  html[data-site-design="lifestyle-gallery"] main#main .hero {grid-template-columns:minmax(0,42%) minmax(0,58%)}
  html[data-site-design="lifestyle-gallery"] main#main .hero > .hero-copy-block {grid-column:1;grid-row:1 / 3!important}
  html[data-site-design="lifestyle-gallery"] main#main .hero > .hero-visual {
    grid-column:2!important;grid-row:1!important;height:clamp(380px,35vw,540px);min-height:0;
  }
  html[data-site-design="lifestyle-gallery"] main#main .hero .nayuta-template-mosaic {
    grid-column:2;grid-row:2;height:clamp(160px,15vw,220px);margin-top:12px;
  }
  html[data-site-design="lifestyle-gallery"] main#main .hero .hero-search-panel {grid-row:3!important}
  html[data-site-design="lifestyle-gallery"] main#main .hero .hero-service-links {grid-row:4!important}
  html[data-site-design="lifestyle-gallery"] main#main .hero[data-gallery-empty] > .hero-visual {grid-row:1 / 3!important;height:100%;min-height:560px}
  html[data-site-design="lifestyle-gallery"] main#main #property .property-item:nth-child(n) figure {aspect-ratio:4/5}
  html[data-site-design="lifestyle-gallery"] main#main #property .property-item:first-child figure {aspect-ratio:3/4}
  html[data-site-design="lifestyle-gallery"] main#main #journal > .section-shell {padding-block:clamp(88px,10vw,150px)}
}
@media(max-width:760px) {
  html[data-site-design="lifestyle-gallery"] main#main .hero > .hero-copy-block {padding:36px 24px!important}
  html[data-site-design="lifestyle-gallery"] main#main .hero .nayuta-template-mosaic {height:150px;gap:8px}
  html[data-site-design="lifestyle-gallery"] main#main #property .property-item:nth-child(n) figure {aspect-ratio:4/3}
  html[data-site-design="lifestyle-gallery"] main#main #property .property-grid {gap:20px}
}

/* Mobile first visual: title and actions belong to the photograph. Long
 * supporting prose gets its own reading surface, without moving the headline.
 * This legacy treatment now belongs only to 01/02. The four other designs
 * own their content-driven mobile heroes in theme-sections.css.
 */
@media(max-width:760px) {
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] {grid-template-columns:minmax(0,1fr);background:var(--pale)}
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] > .hero-visual {
    grid-row:1!important;grid-column:1!important;height:100%!important;
    min-height:540px!important;align-self:stretch;
  }
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] > .hero-visual::after {
    background:linear-gradient(180deg,rgba(7,24,33,.8),rgba(7,24,33,.65) 52%,rgba(7,24,33,.88))!important;
  }
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] > .hero-copy-block {
    grid-row:1!important;grid-column:1!important;align-self:stretch!important;
    background:transparent!important;padding:40px 24px!important;
    display:flex;flex-direction:column;justify-content:center;text-align:left;
  }
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] h1 {
    color:#fff!important;font-size:clamp(28px,7.7vw,34px)!important;line-height:1.5!important;
    text-shadow:none;letter-spacing:.02em;
  }
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] .nayuta-template-kicker {color:#fff}
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] .hero-copy {color:#fff!important;text-shadow:none}
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] .hero-actions .button-outline {color:#fff!important;border-color:#fff!important;background:transparent!important}
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] .hero-actions {display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] .hero-actions .button {width:100%;min-height:52px}
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] > .hero-visual:not(:has(img)) {background:var(--brand-dark)}
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] .hero-search-panel {grid-row:4!important;margin:0 12px 12px!important}
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] .hero-service-links {grid-row:5!important}
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density] :is(.nayuta-template-mosaic,.nayuta-template-details) {grid-row:3!important}
  /* display:contents exposes these presentation wrappers to the existing grid;
   * content and link DOM order remain untouched and keyboard accessible. */
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density="extended"] :is(.hero-copy-block,.hero-copy-footer) {display:contents!important}
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density="extended"] .nayuta-template-kicker {
    grid-column:1;grid-row:1;align-self:start;margin:0;padding:32px 24px 0;z-index:3;
  }
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density="extended"] h1 {
    grid-column:1;grid-row:1;align-self:center;margin:80px 0 168px;padding:0 24px;max-width:none;z-index:3;
  }
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density="extended"] .hero-actions {
    grid-column:1;grid-row:1;align-self:end;margin:0;padding:0 24px max(28px,env(safe-area-inset-bottom));z-index:3;
  }
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density="extended"] .hero-copy {
    grid-column:1;grid-row:2;max-width:none;margin:0;padding:32px 24px;
    color:var(--ink)!important;background:var(--pale);font-size:16px!important;line-height:1.85!important;
  }
  html:is([data-site-design=modern-portal],[data-site-design=minimal-corporate]) main#main .hero[data-hero-density="extended"] .hero-copy p+p {margin-top:12px}
}

/* Closing contact surfaces must not inherit Original's hard-coded blue wash. */
html[data-site-design] {
  --ny-contact-surface:var(--brand-dark);--ny-contact-ink:#fff;
  --ny-contact-button:#fff;--ny-contact-button-ink:var(--brand-dark);
  --ny-footer-surface:var(--brand-dark);--ny-footer-ink:#fff;
}
html[data-site-design="modern-portal"] {
  --ny-contact-surface:var(--action);--ny-footer-surface:#fff;--ny-footer-ink:var(--ink);
}
html[data-site-design="minimal-corporate"] {
  --ny-contact-surface:#fff;--ny-contact-ink:var(--ink);
  --ny-contact-button:var(--action);--ny-contact-button-ink:#fff;
  --ny-footer-surface:var(--pale);--ny-footer-ink:var(--ink);
}
html[data-site-design="lifestyle-gallery"] {
  --ny-contact-surface:var(--pale);--ny-contact-ink:var(--ink);
  --ny-contact-button:var(--brand-dark);--ny-contact-button-ink:#fff;
  --ny-footer-surface:#fff;--ny-footer-ink:var(--ink);
}
html[data-site-design] main#main #contact {background:var(--ny-contact-surface);color:var(--ny-contact-ink)}
html[data-site-design] main#main #contact::before {background:none}
html[data-site-design] main#main #contact .contact-photo {opacity:.08}
html[data-site-design] main#main #contact :is(h2,.contact-phone,.contact-preview-note,.contact-phone-note,.contact-intro>p:last-child) {color:var(--ny-contact-ink)}
html[data-site-design] main#main #contact .contact-telephone {border-color:currentColor}
html[data-site-design] main#main #contact .contact-option {
  color:var(--ny-contact-button-ink);background:var(--ny-contact-button);border-color:var(--ny-contact-button);
}
html[data-site-design] main#main #contact .contact-option-secondary {color:var(--ny-contact-ink);background:transparent;border-color:currentColor}
html[data-site-design] main#main #contact .contact-option:hover {color:var(--ny-contact-button);background:var(--ny-contact-button-ink);border-color:var(--ny-contact-button-ink)}
html[data-site-design] main#main #contact :is(a,button):focus-visible {outline:3px solid var(--ny-contact-ink);outline-offset:4px}
html[data-site-design] .subpage :is(.page-cta,.contact-welcome) {color:var(--ny-contact-ink);background:var(--ny-contact-surface)}
html[data-site-design="minimal-corporate"] .subpage .page-cta::before {background:none}
html[data-site-design] .subpage :is(.page-cta,.contact-welcome) :is(.page-kicker,.contact-phone,.contact-hours) {color:var(--ny-contact-ink)}
html[data-site-design] .subpage .page-cta .page-button {color:var(--ny-contact-button-ink);background:var(--ny-contact-button);border-color:var(--ny-contact-button)}
html[data-site-design] .subpage .page-cta .page-button-outline {color:var(--ny-contact-ink);background:transparent;border-color:currentColor}
html[data-site-design] .subpage :is(.page-cta,.contact-welcome) a:focus-visible {outline:3px solid var(--ny-contact-ink);outline-offset:4px}
html[data-site-design] .contact-page .contact-form .page-button {color:#fff;background:var(--action);border-color:var(--action)}
html[data-site-design] .contact-page .contact-form .page-button-outline {color:var(--action);background:transparent;border-color:var(--action)}
html[data-site-design] .contact-page .contact-form :is(input,select,textarea,button):focus-visible {outline:3px solid var(--action);outline-offset:3px}
html[data-site-design] .site-footer {color:var(--ny-footer-ink);background:var(--ny-footer-surface)}
html[data-site-design] .site-footer :is(a,.footer-bottom) {color:var(--ny-footer-ink)}
html[data-site-design] .site-footer a:focus-visible {outline:3px solid currentColor;outline-offset:3px}
html[data-site-design="editorial-warm"] .site-footer .footer-brand,
html[data-site-design="performance-tech"] .site-footer .footer-brand,
html[data-site-design="trust-premium"] .site-footer .footer-brand {filter:grayscale(1) brightness(0) invert(1)}

/* Optional HOME search uses the same grid slot with a real list link. */
html[data-site-design] main#main .hero .hero-search-link {min-height:0!important;height:auto!important;padding:20px 24px!important;display:block!important}
html[data-site-design] main#main .hero .hero-listing-link {display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--brand-dark);font-size:18px;font-weight:700;text-decoration:none}
html[data-site-design] main#main .hero .hero-listing-link:focus-visible {outline:3px solid var(--action);outline-offset:5px}
html[data-site-design] main#main .hero .hero-search-link p {margin:8px 0 0;font-size:13px;color:var(--text,#24343c);text-align:left}
@media(max-width:760px){html[data-site-design] main#main .hero .hero-search-link {padding:16px 20px!important}}


/*
 * Header/hero geometry — fixed opaque themed mastheads are NOT the transparent
 * O-LAND Original masthead. Reserve their actual CSS height before HOME begins.
 *
 * Put spacing on <main>, not on the title: the photograph, readable copy,
 * and CTA remain one art-directed composition on desktop and mobile.
 * Original has no data-site-design, preserving the existing photo-overlay
 * header and its editorial balance exactly.
 *
 * --header-height is 74px on desktop and 70px at <=920px in the shared
 * masthead CSS. No duplicated magic pixel offsets or extra JS on scroll.
 */
html[data-site-design] body.site main#main {
  padding-block-start:var(--header-height,74px);
}