/* =============================================================================
   Jamari Homes: page layouts from the owner's brief of 28 September 2026 (built 8 October 2026).
   Home, Interiors, Collections, Projects, Journal, Search, Account sign-in, the Bag and the Concierge.
   Loads after system.css. Tokens from tokens.css; no raw colour where a semantic token exists.
   ========================================================================== */

/* ---------------------------------------------------------------- Shared pieces */
/* A small uppercase "go" line at the foot of a card, in the deep gold that passes AA on ivory. */
.pa-go{display:inline-block;margin-top:14px;font:500 .8125rem/1.3 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-accent)}
.card-jh:hover .pa-go{text-decoration:underline;text-decoration-color:var(--rule-gold);text-underline-offset:5px}
.pa-num{display:block;font:500 .8125rem/1 var(--jh-font-body);letter-spacing:.1em;color:var(--text-accent);font-variant-numeric:tabular-nums}
.on-dark .pa-num{color:var(--jh-gold-300)}
.pa-stack-btns{gap:12px}
.pa-stack-btns .btn-jh{flex:0 1 auto}
@media (max-width:600px){.pa-stack-btns .btn-jh{width:100%}}
.home-head .btn-jh{flex:none}
.pa-world-cta{margin-top:22px}

/* ---------------------------------------------------------------- Home: the three categories */
.pa-cats{margin-top:clamp(40px,5vw,64px)}
.pa-cats .card-jh h3{display:block;font-size:var(--fs-h3);margin-top:2px}
.pa-cats .card-jh .cap{margin-top:8px}

/* ---------------------------------------------------------------- Home: For Business & Hospitality (black band) */
.pa-biz-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(40px,7vw,120px);align-items:center}
.pa-biz h2{margin:14px 0 0;max-width:20ch}
.pa-biz .lead{margin:18px 0 0;max-width:56ch}
.pa-biz .btn-jh{margin-top:30px}
.pa-biz-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(230,200,105,.45)}
.pa-biz-list li{display:flex;align-items:baseline;gap:22px;padding:20px 0;border-bottom:1px solid rgba(230,200,105,.45);font-family:var(--jh-font-display);font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);line-height:1.2;color:var(--jh-ivory)}
@media (max-width:900px){.pa-biz-in{grid-template-columns:1fr}.pa-biz-list li{padding:16px 0}}

/* ---------------------------------------------------------------- Home: Selected Projects */
.pa-proj .media{aspect-ratio:3/2}
.pa-proj h3{display:block;font-size:var(--fs-h3)}
.pa-proj .pa-go{margin-top:10px}

/* ---------------------------------------------------------------- Home: Heritage and Gifting rows */
.pa-heritage .world-media{background:var(--surface-raised)}
.pa-heritage .world-media img.ph{object-fit:contain;padding:clamp(18px,3vw,36px)}
.pa-gift-list{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--border)}
.pa-gift-list a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text);font-family:var(--jh-font-display);font-size:1.2rem}
.pa-gift-list a span{color:var(--text-accent);font-family:var(--jh-font-body);font-size:1rem;transition:transform var(--dur-2) var(--jh-ease)}
.pa-gift-list a:hover span{transform:translateX(4px)}
.pa-gift-list a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pa-services .home-services-list{margin-top:8px}

/* ---------------------------------------------------------------- Photographic page hero (Interiors, Projects)
   A real <img> (the page's LCP element, loaded eagerly) under a black-to-charcoal scrim, text at the foot. */
.pa-hero{position:relative;min-height:62svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--jh-black)}
.pa-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.pa-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,11,.92) 0%,rgba(11,11,11,.6) 42%,rgba(11,11,11,.18) 100%)}
.pa-hero-in{position:relative;z-index:2;padding-top:clamp(120px,18vw,220px);padding-bottom:clamp(44px,5vw,72px)}
.pa-hero h1{color:var(--jh-ivory);font-size:var(--fs-display);font-weight:600;margin:14px 0 0;max-width:16ch}
.pa-hero .lead{margin:18px 0 0;max-width:56ch;color:var(--text-inverse-muted)}
.pa-hero .hero-actions{margin-top:28px}
@media (max-width:600px){.pa-hero{min-height:74svh}.pa-hero .hero-actions .btn-jh{width:100%}}

/* ---------------------------------------------------------------- Interiors: the five stages (dark band) */
.pa-motto{margin:0;font-family:var(--jh-font-display);font-style:italic;font-size:1.2rem;color:var(--jh-gold-300)}
.pa-stage-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 28px}
.pa-stage-list li{border-top:1px solid rgba(230,200,105,.5);padding-top:22px}
.pa-stage-icon{display:block;width:30px;height:30px;fill:none;stroke:var(--jh-gold-300);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.pa-stage-list h3{font-size:1.3rem;margin:8px 0 8px;color:var(--jh-ivory)}
.pa-stage-list p{margin:0;color:var(--text-inverse-muted);font-size:var(--fs-small);line-height:1.6}
@media (max-width:1100px){.pa-stage-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}}
@media (max-width:700px){.pa-stage-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}}
@media (max-width:460px){.pa-stage-list{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- Interiors: what we design (image cards) */
.pa-design{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.pa-design-card{display:flex;flex-direction:column;background:var(--surface-raised);border:1px solid var(--border)}
.pa-design-media{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surface-sunken)}
.pa-design-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--jh-ease)}
.pa-design-card:hover .pa-design-media img{transform:scale(1.04)}
.pa-design-body{padding:24px 26px 26px}
.pa-design-body h3{font-size:1.45rem;margin:0 0 8px}
.pa-design-body p{margin:0;color:var(--text-muted);font-size:var(--fs-small);line-height:1.6}
.pa-design-body .pa-go{margin-top:16px}
.pa-design-body .pa-go:hover{text-decoration:underline;text-decoration-color:var(--rule-gold);text-underline-offset:5px}
@media (max-width:760px){.pa-design{grid-template-columns:1fr;gap:24px}.pa-design-body{padding:20px}}

/* A full-width photograph between sections. */
.pa-band-photo{margin:0;position:relative;aspect-ratio:21/9;max-height:620px;overflow:hidden;background:var(--jh-charcoal)}
.pa-band-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
@media (max-width:700px){.pa-band-photo{aspect-ratio:4/3}}

/* ---------------------------------------------------------------- Interiors: curated by space, consultation band */
.pa-spaces .card-jh h3{display:block;font-size:1.35rem}
.pa-consult .container{text-align:center}
.pa-consult h2{margin:14px 0 0}
.pa-consult .hero-actions{justify-content:center}

/* ---------------------------------------------------------------- Collections: five numbered rows */
.pa-page-hero h1{max-width:18ch}
.pa-collections .pa-coll + .pa-coll{margin-top:clamp(64px,8vw,112px)}
.pa-coll{position:relative}
.pa-anchor{position:absolute;top:0}
.pa-coll .world-copy h2{margin-top:14px}
.pa-coll .gold-rule{margin:18px 0 20px}
.pa-coll-art{background:var(--surface-raised)}
.pa-coll-art img.ph{object-fit:contain;padding:clamp(18px,3vw,36px)}

/* ---------------------------------------------------------------- Projects: gallery, chips, closing band, project page */
.pa-chips{margin:0 0 clamp(28px,4vw,44px)}
.pa-proj-grid{row-gap:clamp(36px,5vw,56px)}
.pa-space-band .lead{margin:18px auto 0;max-width:52ch}
.pa-space-band .hero-actions{margin-top:30px}
.pa-hero-project{min-height:56svh}
.pa-hero-project .crumbs{margin:0 0 12px;color:var(--text-inverse-muted)}
.pa-hero-project .crumbs a{color:var(--jh-gold-300)}
.pa-hero-project h1{max-width:20ch}
.pa-hero-project picture{display:contents}
.pa-case-h{display:flex;margin:0}
.pa-case .case-block .measure + .measure{margin-top:14px}
.pa-case-wide{margin:clamp(32px,5vw,56px) auto}
.pa-case-wide .pa-case-h{margin-bottom:18px}
.pa-before-after{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pa-before-after figure{margin:0}
.pa-before-after .media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surface-sunken)}
.pa-before-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pa-before-after figcaption{margin-top:8px;font:500 .8125rem/1.3 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-accent)}
@media (max-width:640px){.pa-before-after{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- Journal: featured story, roomier grid, The Jamari Edit */
.pa-journal .pa-chips{margin-bottom:clamp(36px,5vw,56px)}
.pa-featured{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,5vw,64px);align-items:center;margin-bottom:clamp(56px,7vw,96px);padding-bottom:clamp(48px,6vw,80px);border-bottom:1px solid var(--border)}
.pa-featured-media{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surface-sunken)}
.pa-featured-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--jh-ease)}
.pa-featured:hover .pa-featured-media img{transform:scale(1.03)}
.pa-featured-meta{margin:14px 0 0;font-size:var(--fs-meta);letter-spacing:.02em;color:var(--text-muted)}
.pa-featured-body h2{margin:8px 0 0;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.7rem)}
.pa-featured-body h2 a{color:inherit;text-decoration:none}
.pa-featured-body h2 a:hover{text-decoration:underline;text-decoration-color:var(--rule-gold);text-decoration-thickness:1px;text-underline-offset:6px}
.pa-featured-body .lead{margin:16px 0 0;max-width:46ch}
.pa-featured-body .btn-jh{margin-top:26px}
@media (max-width:900px){.pa-featured{grid-template-columns:1fr}}
.pa-journal-grid{row-gap:clamp(44px,6vw,72px)}
.pa-post h3{display:block;font-size:1.4rem}
.pa-post .cap{margin-top:8px}
.pa-post > .eyebrow{font-size:.72rem}
.pa-edit-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px clamp(32px,6vw,96px);align-items:center}
.pa-edit-h{display:flex;margin:0 0 12px;font-size:var(--fs-eyebrow)}
.pa-edit-line{margin:0;font-family:var(--jh-font-display);font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem);line-height:1.3;max-width:28ch}
.pa-edit-form{display:flex;gap:10px;align-items:stretch}
.pa-edit-form input[type=email]{flex:1;min-width:0;min-height:52px}
.pa-edit-form .btn-jh{flex:none;min-height:52px}
.ft-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:900px){.pa-edit-in{grid-template-columns:1fr}}
@media (max-width:480px){.pa-edit-form{flex-direction:column}}
.pa-hero-post{min-height:52svh}
.pa-hero-post h1{max-width:22ch}

/* ---------------------------------------------------------------- Search: grouped results on warm ivory, gold accents */
.pa-search-hero h1{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.7rem)}
.pa-search .search-form{max-width:var(--container-narrow);margin:0 0 40px}
.pa-sr-group{display:flex;align-items:center;gap:16px;margin:48px 0 10px;font:600 var(--fs-eyebrow)/1.2 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent)}
.pa-sr-group::after{content:"";flex:1;height:1px;background:var(--rule-gold);opacity:.5}
.pa-search .sr-group:first-of-type{margin-top:0}
.pa-search .sr-item{padding:14px 0;border-bottom:1px solid var(--border)}
.pa-search .sr-thumb{background:var(--surface-raised);border:1px solid var(--border)}
.pa-search .sr-meta{margin-top:4px}
.pa-search .sr-item:hover .sr-title{text-decoration-color:var(--rule-gold)}

/* ---------------------------------------------------------------- Account sign-in: compact, intentional */
.section.pa-auth{padding-block:clamp(40px,5vw,64px) clamp(56px,6vw,80px)}
.pa-auth-in{max-width:460px}
.pa-auth-head h1{margin:10px 0 8px;font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem)}
.pa-auth-head .lead{margin:0 0 22px;font-size:1.02rem}
.pa-auth-card{gap:0;padding:26px 26px 24px;background:var(--surface-raised);border-color:var(--border)}
.pa-auth-card label{display:block;margin:0 0 6px;font:600 .75rem/1.2 var(--jh-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.pa-auth-card input{margin:0 0 16px}
.pa-auth-card .btn-jh{width:100%;margin-top:4px;background:var(--jh-black);border-color:var(--jh-black);color:var(--text-inverse)}
.pa-auth-card .btn-jh:hover{background:var(--jh-charcoal);border-color:var(--jh-gold-500)}
.pa-auth-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin:16px 0 0;font-size:var(--fs-small);color:var(--text-muted)}
.pa-auth-guest{margin:18px 0 0;font-size:var(--fs-small);color:var(--text-muted);line-height:1.55}
.pa-auth-help{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule-gold);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.pa-auth-help p{margin:0;font-family:var(--jh-font-display);font-size:1.15rem}
@media (max-width:480px){.pa-auth-card{padding:20px}.pa-auth-help .btn-jh{width:100%}}

/* ---------------------------------------------------------------- The Bag: deliberate empty state, curated lines */
.section.pa-bag{padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(56px,6vw,88px)}
.pa-bag h1{margin:10px 0 22px;font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem)}
.pa-bag-empty{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,6vw,96px);align-items:center;margin-top:8px}
.pa-bag-empty-copy h1{margin:10px 0 12px}
.pa-bag-empty-copy .lead{max-width:44ch}
.pa-bag-empty-copy .hero-actions{margin-top:26px}
.pa-bag-help{margin:22px 0 0;font-size:var(--fs-small);color:var(--text-muted)}
.pa-bag-help .link-jh{color:var(--text)}
.pa-bag-visual{display:block;position:relative;aspect-ratio:5/4;max-width:420px;justify-self:end;width:100%;overflow:hidden;background:var(--surface-raised);border:1px solid var(--border)}
.pa-bag-visual::after{content:"";position:absolute;inset:12px;border:1px solid rgba(201,162,39,.35);pointer-events:none}
.pa-bag-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pa-bag-visual.is-art img{object-fit:contain;padding:22px}
@media (max-width:900px){.pa-bag-empty{grid-template-columns:1fr}.pa-bag-visual{justify-self:start;max-width:360px}}
.pa-bag-lines{border-top:1px solid var(--border)}
.pa-bag-line{display:grid;grid-template-columns:140px minmax(0,1fr) auto auto;grid-template-areas:"thumb info qty total" "thumb info qty remove";gap:6px 24px;align-items:start;padding:24px 0;border-bottom:1px solid var(--border)}
.pa-bag-line.unavailable{opacity:.6}
.pa-bag-thumb{grid-area:thumb;display:block;aspect-ratio:5/4;background:var(--surface-raised);border:1px solid var(--border);overflow:hidden}
.pa-bag-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pa-bag-info{grid-area:info;min-width:0}
.pa-bag-info .cart-name{font-size:1.25rem}
.pa-bag-meta{margin:8px 0 0;display:grid;gap:4px}
.pa-bag-meta div{display:flex;gap:12px;align-items:baseline;font-size:var(--fs-small)}
.pa-bag-meta dt{flex:0 0 96px;font:600 .72rem/1.6 var(--jh-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.pa-bag-meta dd{margin:0;color:var(--text)}
.pa-bag-enquire{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.pa-bag-enquire-note{font-size:var(--fs-meta);color:var(--text-muted);max-width:40ch}
.pa-bag-qty{grid-area:qty;display:flex;flex-direction:column;gap:6px;min-width:120px}
.pa-bag-qty-label{font:600 .72rem/1.6 var(--jh-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.pa-bag-qty .cart-qform input[type=number]{width:72px;min-height:44px}
.pa-bag-total{grid-area:total;font-weight:600;white-space:nowrap;padding-top:26px;text-align:right}
.pa-bag-remove{grid-area:remove;text-align:right}
.pa-bag-remove button.link-jh{font-size:var(--fs-small);color:var(--text-muted);width:auto;height:auto;padding:6px 0}
.pa-bag-summary h2{font-size:1.3rem}
.pa-bag-summary .cart-total{border-top:0;margin-top:0;padding-top:0 !important}
.pa-bag-browse{margin-top:10px}
@media (max-width:760px){
  .pa-bag-line{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"thumb info" "qty qty" "total remove";gap:12px 16px}
  .pa-bag-qty{flex-direction:row;align-items:center;gap:14px}
  .pa-bag-total{padding-top:0;text-align:left}
  .pa-bag-meta dt{flex-basis:84px}
}

/* ---------------------------------------------------------------- Concierge: hero lines, service cards, form, showroom, map */
.pa-con-lines{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:4px;font-size:var(--fs-small);color:var(--text)}
.pa-con-lines a{color:inherit;text-decoration:none}
.pa-con-lines a:hover{text-decoration:underline;text-decoration-color:var(--rule-gold);text-underline-offset:4px}
.pa-con-hero .pa-con-lines{font-size:1rem}
.section.pa-concierge{padding-top:clamp(48px,5vw,72px)}
.pa-con-ask .concierge-ask{font-size:clamp(1.7rem,1.3rem + 1.2vw,2.3rem)}
.pa-paths{gap:16px}
.pa-path{position:relative;gap:8px;padding:22px 22px 22px;border:1px solid var(--border-strong);background:var(--surface-raised);transition:border-color var(--dur-2) var(--jh-ease),background-color var(--dur-2) var(--jh-ease),color var(--dur-2) var(--jh-ease),transform var(--dur-2) var(--jh-ease),box-shadow var(--dur-2) var(--jh-ease)}
.pa-path::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;background:var(--rule-gold);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--jh-ease)}
.pa-path:hover{border-color:var(--jh-gold-500);transform:translateY(-2px);box-shadow:var(--jh-shadow-1)}
.pa-path:hover::after{transform:scaleX(1)}
.pa-path-icon{width:28px;height:28px;fill:none;stroke:var(--jh-gold-deep);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.pa-path .cp-title{font-size:1.25rem;line-height:1.2;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;font-family:var(--jh-font-body);font-weight:600}
.pa-path .cp-line{color:var(--text-muted)}
.pa-path-go{margin-top:auto;padding-top:10px;font:500 .8125rem/1.3 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-accent)}
.pa-path.on{background:var(--jh-black);border-color:var(--jh-black);color:var(--jh-ivory);box-shadow:inset 0 0 0 1px var(--jh-gold-500)}
.pa-path.on .cp-line{color:var(--text-inverse-muted)}
.pa-path.on .pa-path-icon{stroke:var(--jh-gold-300)}
.pa-path.on .pa-path-go{color:var(--jh-gold-300)}
.pa-path.on::after{transform:scaleX(1);background:var(--jh-gold-300)}
.pa-con-form-wrap{max-width:760px;margin-top:clamp(28px,4vw,44px)}
.pa-con-form{max-width:none}
.pa-con-section{display:flex;margin:0 0 6px}
.pa-con-basics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
@media (max-width:640px){.pa-con-basics{grid-template-columns:1fr}}
.pa-con-form .path-fields legend{margin-top:34px}
.pa-con-regarding{margin-top:0}
.pa-con-submit{margin-top:30px}
.pa-showroom-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px clamp(32px,5vw,72px);align-items:end}
.pa-showroom h2{margin:12px 0 0;font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem)}
.pa-showroom-lines{margin-top:16px}
.pa-showroom-actions{margin:0}
@media (max-width:760px){.pa-showroom-in{grid-template-columns:1fr}.pa-showroom-actions .btn-jh{width:100%}}
.pa-map .map-slot-note{color:var(--text-inverse-muted)}