/* LVW Concept Gallery — visual format unification
   Purpose: make every shell read like a real website immediately while preserving each concept's identity. */

.visual-format .hero{grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:clamp(42px,6vw,82px);align-items:center}
.visual-format .hero>div:first-child{min-width:0}
.visual-format .hero-preview,
.visual-format .hero-visual,
.visual-format .property-photo{min-width:0;position:relative}
.visual-format .hero-preview{min-height:520px;border:1px solid var(--line);overflow:hidden;padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,var(--panel),rgba(255,255,255,.58))}
.visual-format .hero-preview:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 56%,rgba(255,255,255,.34) 56% 57%,transparent 57%);pointer-events:none}
.visual-format .preview-kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:.72}
.visual-format .preview-title{font-family:Georgia,serif;font-size:clamp(36px,4vw,58px);line-height:1.02;letter-spacing:-2px;max-width:460px;position:relative;z-index:1}
.visual-format .preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative;z-index:1}
.visual-format .preview-cell{border-top:1px solid currentColor;padding:15px 0 0;min-height:82px}
.visual-format .preview-cell span{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;opacity:.65}
.visual-format .preview-cell strong{display:block;margin-top:6px;font-size:14px;line-height:1.35;font-weight:600}
.visual-format .preview-card{padding:20px;border:1px solid currentColor;background:rgba(255,255,255,.36);position:relative;z-index:1}
.visual-format .preview-card small{display:block;text-transform:uppercase;letter-spacing:1.3px;opacity:.6;margin-bottom:8px}
.visual-format .preview-card b{font-family:Georgia,serif;font-size:26px;font-weight:400}
.visual-format .process-strip{margin:0 0 70px;padding:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.visual-format .process-strip>div{padding-right:24px;border-right:1px solid var(--line)}
.visual-format .process-strip>div:last-child{border-right:0}
.visual-format .process-strip span{display:block;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.visual-format .process-strip p{font-family:Georgia,serif;font-size:21px;line-height:1.35}
.visual-format .hero-visual,
.visual-format .property-photo{overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.visual-format .hero-visual img,
.visual-format .property-photo img{display:block;width:100%;height:100%;object-fit:cover}
.visual-format .hero-visual{height:570px;border-radius:110px 110px 0 0}
.visual-format .hero-visual img{height:100%}
.visual-format .hero-visual .photo-note,
.visual-format .property-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:rgba(12,24,26,.76);color:#fff;font-size:10px;letter-spacing:.3px}

/* 01 — consulting: cooler platinum + deep teal, editorial restraint */
.consulting.visual-format{--paper:#f4f6f6;--ink:#143739;--accent:#0f6668;--panel:#e2ebeb;--line:#c4d2d1;--muted:#607576;--button-ink:#fff}
.consulting.visual-format .brand{font-family:Georgia,serif;font-weight:400;font-size:28px}
.consulting.visual-format h1{font-size:clamp(62px,7.1vw,100px);letter-spacing:-4px;max-width:760px}
.consulting.visual-format .consulting-preview{background:linear-gradient(160deg,#dbe7e7 0%,#f7f9f8 52%,#c6d8d8 100%)}
.consulting.visual-format .direction-map{display:grid;gap:10px;position:relative;z-index:1}
.consulting.visual-format .direction-row{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:18px;padding:12px 0;border-bottom:1px solid rgba(20,55,57,.22)}
.consulting.visual-format .direction-row span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;opacity:.58}
.consulting.visual-format .direction-row strong{font-family:Georgia,serif;font-weight:400;font-size:25px}

/* 04 — workshops */
.workshop.visual-format .workshop-preview{background:linear-gradient(145deg,#ece8dd,#faf7ef)}
.workshop.visual-format .sticky-board{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:1}
.workshop.visual-format .sticky{min-height:118px;padding:18px;border:1px solid rgba(34,44,38,.18);background:rgba(255,255,255,.55);transform:rotate(-1deg)}
.workshop.visual-format .sticky:nth-child(2){transform:rotate(1.5deg)}
.workshop.visual-format .sticky:nth-child(3){grid-column:1/-1;transform:rotate(.4deg)}
.workshop.visual-format .sticky small{display:block;text-transform:uppercase;letter-spacing:1.5px;opacity:.55;margin-bottom:8px}
.workshop.visual-format .sticky strong{font-family:Georgia,serif;font-size:22px;font-weight:400}

/* 05 — HVAC */
.hvac.visual-format .hvac-preview{background:linear-gradient(155deg,#dceaf3 0%,#f8fbfd 60%,#c8dce9 100%);color:#153e5b}
.hvac.visual-format .climate-ring{width:220px;height:220px;border:1px solid rgba(21,62,91,.35);border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;margin:auto}
.hvac.visual-format .climate-ring:before,.hvac.visual-format .climate-ring:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(21,62,91,.18)}
.hvac.visual-format .climate-ring:before{inset:22px}.hvac.visual-format .climate-ring:after{inset:47px}
.hvac.visual-format .climate-ring strong{font-size:58px;line-height:1}.hvac.visual-format .climate-ring small{display:block;font-size:10px;letter-spacing:1.4px;text-align:center;text-transform:uppercase}

/* 06 — supply */
.supply.visual-format .supply-preview{background:linear-gradient(135deg,#e8e1d6,#f7f4ef)}
.supply.visual-format .material-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end;position:relative;z-index:1}
.supply.visual-format .material{border:1px solid currentColor;background:rgba(255,255,255,.34);padding:14px;min-height:140px;display:flex;align-items:flex-end}
.supply.visual-format .material:nth-child(2){min-height:190px}.supply.visual-format .material:nth-child(3){min-height:110px}
.supply.visual-format .material span{font-size:10px;letter-spacing:1.3px;text-transform:uppercase}

/* 07 — legal */
.legal.visual-format .legal-preview{background:linear-gradient(155deg,#ede9df,#faf9f5);padding-bottom:36px}
.legal.visual-format .document-stack{position:relative;min-height:290px;z-index:1}
.legal.visual-format .doc-sheet{position:absolute;width:82%;height:230px;left:9%;top:28px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.08);padding:26px}
.legal.visual-format .doc-sheet:nth-child(1){transform:rotate(-5deg);top:18px}.legal.visual-format .doc-sheet:nth-child(2){transform:rotate(4deg);top:40px}.legal.visual-format .doc-sheet:nth-child(3){transform:none;top:28px}
.legal.visual-format .doc-line{height:1px;background:currentColor;opacity:.22;margin:13px 0}.legal.visual-format .doc-line.short{width:55%}

/* 08 — closing */
.closing.visual-format .closing-preview{background:linear-gradient(145deg,#e7eceb,#fafbfa)}
.closing.visual-format .closing-lane{display:grid;gap:10px;position:relative;z-index:1}
.closing.visual-format .closing-step{display:grid;grid-template-columns:58px 1fr auto;gap:15px;align-items:center;padding:14px;border:1px solid var(--line);background:rgba(255,255,255,.52)}
.closing.visual-format .closing-step span{font-size:10px;letter-spacing:1.2px}.closing.visual-format .closing-step strong{font-family:Georgia,serif;font-size:21px;font-weight:400}.closing.visual-format .closing-step em{font-style:normal;font-size:11px;opacity:.55}

/* 09 — property */
.property.visual-format .property-photo{height:570px;border-radius:100px 100px 0 0;margin:0}

/* 10 — community */
.community.visual-format .community-preview{background:linear-gradient(155deg,#f0e7d8,#fbf6ec)}
.community.visual-format .people-cluster{height:250px;position:relative;z-index:1}
.community.visual-format .person-dot{position:absolute;border-radius:50%;border:1px solid rgba(70,60,46,.25);background:rgba(255,255,255,.55)}
.community.visual-format .person-dot:nth-child(1){width:145px;height:145px;left:3%;top:64px}.community.visual-format .person-dot:nth-child(2){width:118px;height:118px;left:34%;top:12px}.community.visual-format .person-dot:nth-child(3){width:160px;height:160px;right:4%;top:67px}.community.visual-format .person-dot:nth-child(4){width:76px;height:76px;left:43%;bottom:0}

@media(max-width:850px){
 .visual-format .hero{grid-template-columns:1fr}
 .visual-format .hero-preview,.visual-format .hero-visual,.visual-format .property-photo{min-height:430px;height:430px}
 .visual-format .process-strip{grid-template-columns:1fr;gap:0}
 .visual-format .process-strip>div{border-right:0;border-bottom:1px solid var(--line);padding:18px 0}
 .visual-format .process-strip>div:last-child{border-bottom:0}
}
/* Shared concept-gallery framing: every demo keeps its own brand, but the collection controls are consistent. */
.concept-demo-bar{min-height:58px;padding:10px max(22px,5vw);align-items:center}
.concept-demo-bar .concept-demo-label{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap}
.concept-demo-bar .concept-demo-label strong{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#fff}
.concept-demo-bar .concept-demo-label span{font-size:11px;color:rgba(255,255,255,.72)}
.concept-demo-bar nav{display:flex;gap:13px;align-items:center}
.concept-demo-bar nav a{color:#fff;text-decoration:none;font-size:11px;border-bottom:1px solid rgba(255,255,255,.28);padding:2px 0}
.concept-demo-bar nav a:hover,.concept-demo-bar nav a:focus-visible{border-color:#fff;outline:none}
@media(max-width:700px){.concept-demo-bar{align-items:flex-start;flex-direction:column;padding:12px 20px;gap:9px}.concept-demo-bar .concept-demo-label{gap:5px;flex-direction:column}.concept-demo-bar nav{width:100%;justify-content:space-between;gap:9px}.concept-demo-bar nav a{font-size:10px}}

/* 2026-10 cohesion pass — a shared premium presentation rhythm across every concept. */
.visual-format :where(.hero-preview,.hero-visual,.property-photo,.home-portrait){
  min-height:540px;
  height:540px;
  border:1px solid var(--line);
  border-radius:clamp(22px,3vw,34px)!important;
  overflow:hidden;
  position:relative;
  box-shadow:0 24px 60px rgba(18,35,36,.10);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.visual-format :where(.hero-preview,.hero-visual,.property-photo,.home-portrait):hover,
.visual-format :where(.hero-preview,.hero-visual,.property-photo,.home-portrait):focus-within{
  transform:translateY(-5px);
  box-shadow:0 34px 78px rgba(18,35,36,.16);
}
.visual-format :where(.hero-visual,.property-photo,.home-portrait) img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.75,.2,1),filter .35s ease;
}
.visual-format :where(.hero-visual,.property-photo,.home-portrait):hover img{transform:scale(1.025)}
.visual-format .hero-preview{isolation:isolate}
.visual-format .hero-preview>*{position:relative;z-index:1}
.visual-format .hero-preview:after{
  content:"";position:absolute;inset:auto -18% -28% 28%;height:48%;
  background:radial-gradient(circle at center,rgba(255,255,255,.55),transparent 68%);
  pointer-events:none;opacity:.75;transition:transform .6s ease;
}
.visual-format .hero-preview:hover:after{transform:translate3d(-5%,-8%,0) scale(1.08)}
.visual-format .process-strip{margin-top:8px}
.visual-format .service{
  padding:24px 22px 26px;
  border:1px solid transparent;
  border-top:2px solid var(--accent);
  transition:transform .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.visual-format .service:hover{
  transform:translateY(-4px);
  background:color-mix(in srgb,var(--panel) 68%,transparent);
  border-color:var(--line);
  box-shadow:0 18px 44px rgba(16,31,32,.08);
}
.visual-format .tool{padding:clamp(24px,3vw,38px);border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 35%,transparent)}
.visual-format .result{box-shadow:0 16px 38px rgba(16,31,32,.07)}
.visual-format details{transition:padding .2s ease,background .2s ease}
.visual-format details:hover,.visual-format details[open]{padding-left:14px;padding-right:14px;background:color-mix(in srgb,var(--panel) 48%,transparent)}
.visual-format summary{list-style-position:outside}
.visual-format .availability{border:1px solid var(--line);box-shadow:0 20px 50px rgba(16,31,32,.07)}
.visual-format .button,.visual-format button{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.visual-format .button:hover,.visual-format button:hover{transform:translateY(-2px)}
@media(max-width:850px){
  .visual-format :where(.hero-preview,.hero-visual,.property-photo,.home-portrait){min-height:430px;height:430px}
  .visual-format .tool{padding:22px}
}
@media(prefers-reduced-motion:reduce){
  .visual-format *, .visual-format *:before, .visual-format *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}