/* ============================================================
 *  Zing Website — one stylesheet for every public page.
 *  Identity: Zing group identity v1.0 — Vermilion / Ink / Ivory, lit first letter.
 *  Type: Bricolage Grotesque (display) · DM Sans (text) · Schibsted Grotesk (wordmark).
 * ============================================================ */

:root{
  --ivory:#F7F2E9;      /* page ground */
  --cream:#FDFAF3;      /* cards */
  --paper:#FFF7EA;      /* text on vermilion */
  --ink:#26221E;
  --ink-soft:#4A443C;
  --ink-faint:#A2988A;
  --line:#E4DCCD;
  --line-strong:#D8CFBF;
  --field-line:#D9D0C0;
  --vermilion:#F04E33;
  --vermilion-deep:#D8432A;
  --night:#1C1916;
  --ok:#2F6B4F;
  --bad:#B3261E;
  --radius:16px;
  --radius-sm:10px;
  --max:1280px;
  --pad:40px;
  --display:'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  --text:'DM Sans', system-ui, -apple-system, sans-serif;
  --mark:'Schibsted Grotesk', 'Bricolage Grotesque', system-ui, sans-serif;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; background:var(--ivory); color:var(--ink); font-family:var(--text); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none; transition:color .15s ease, background-color .15s ease, border-color .15s ease }
a:hover{ color:var(--vermilion) }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.03em; text-wrap:balance }
p{ margin:0; text-wrap:pretty }
i[lang]{ font-style:italic }
button,input,select,textarea{ font-family:var(--text); font-size:15px; color:var(--ink) }
:focus-visible{ outline:2px solid var(--vermilion); outline-offset:3px; border-radius:4px }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

.page{ max-width:var(--max); margin:0 auto; background:var(--ivory) }
.wrap{ padding-left:var(--pad); padding-right:var(--pad) }

/* ---------- type scale ---------- */
.eyebrow{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--vermilion) }
.eyebrow.muted{ color:var(--ink-faint) }
.h-hero{ font-size:74px; line-height:.94; letter-spacing:-.035em }
.h-xl{ font-size:54px; line-height:1 }
.h-l{ font-size:42px; line-height:1 }
.h-m{ font-size:38px; line-height:1.05 }
.h-s{ font-size:22px; letter-spacing:-.02em }
.lede{ font-size:19px; line-height:1.55; color:var(--ink-soft); max-width:470px }
.lede-stack{ display:flex; flex-direction:column; gap:14px; font-size:17px; max-width:520px }
.lede-stack p{ margin:0 }
.lede-stack i.name{ font-style:italic }
.body{ font-size:16px; line-height:1.6; color:var(--ink-soft) }
.small{ font-size:13px; color:var(--ink-faint) }

.h-quiet{ font-family:var(--display); font-weight:600; font-size:40px; line-height:1.1; letter-spacing:-.02em; max-width:18ch }
.hero.brand-head{ padding-top:56px; padding-bottom:8px }
.sub-line{ font-size:18px; line-height:1.55; color:var(--ink-soft); max-width:56ch; margin:0 auto }
.split-side .amazing .z{ color:var(--ink) }
@media (max-width:860px){ .h-quiet{ font-size:30px } .br-wide{ display:none } }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 26px; border-radius:999px; font-weight:700; font-size:15px; white-space:nowrap; border:1.5px solid transparent; cursor:pointer; line-height:1; transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease }
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--vermilion); color:var(--paper) }
.btn-primary:hover{ background:var(--ink); color:var(--paper) }
.btn-ink{ background:var(--ink); color:var(--ivory) }
.btn-ink:hover{ background:var(--vermilion); color:var(--paper) }
.btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent }
.btn-outline:hover{ background:var(--ink); color:var(--ivory) }
.btn-paper{ background:var(--paper); color:var(--ink) }
.btn-paper:hover{ background:var(--ink); color:var(--paper) }
.btn-sm{ padding:11px 20px; font-size:14px }
.btn-lg{ padding:18px 30px; font-size:16px }
.btn[disabled]{ opacity:.55; cursor:default; transform:none }

/* ---------- header ---------- */
.site-header{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px var(--pad); border-bottom:1px solid var(--line); min-height:104px }
.brand-lockup{ display:flex; align-items:flex-start; gap:18px; line-height:1 }
.brand-lockup:hover{ color:inherit }
.wordmark{ display:inline-block; line-height:1 }
.wordmark .wm{ font-family:var(--mark); font-weight:800; font-size:36px; line-height:.88; letter-spacing:.02em }
.wordmark .wm .lit{ color:var(--vermilion) }
.wordmark .wm .rest{ color:var(--ink) }
.wordmark .desc{ display:flex; justify-content:space-between; width:100%; font-size:7.5px; font-weight:600; color:var(--ink-faint); margin-top:5px }
.wordmark.lg .wm{ font-size:44px }
.wordmark.lg .desc{ font-size:9px; margin-top:6px }
.lockup-divider{ align-self:center; width:1px; height:34px; background:var(--line-strong) }
.header-right{ display:flex; align-items:center; gap:14px }
.house-switch{ font-size:13px; font-weight:700; color:var(--ink-faint); letter-spacing:.02em; white-space:nowrap }
.house-switch:hover{ color:var(--vermilion) }
.site-nav{ display:flex; gap:30px; font-size:15px; font-weight:500; white-space:nowrap }
.site-nav a[aria-current="page"]{ color:var(--vermilion) }
.nav-toggle{ display:none; background:none; border:1.5px solid var(--ink); border-radius:999px; padding:9px 14px; font-weight:700; font-size:14px; cursor:pointer }

/* ---------- footer ---------- */
.site-footer{ padding:32px var(--pad) 40px; border-top:1px solid var(--line); display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; font-size:14px }
.site-footer.slim{ grid-template-columns:1fr auto; align-items:center; gap:16px 32px; padding:24px var(--pad) 32px }
.site-footer.slim .footer-col{ flex-direction:row; flex-wrap:wrap; gap:8px 20px; font-size:13.5px; color:var(--ink-soft) }
.site-footer.slim .small{ font-size:13px }
.footer-col{ display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--ink-soft) }
.footer-col .eyebrow{ font-size:12px; letter-spacing:.12em; color:var(--ink-faint) }
.footer-brand{ display:flex; flex-direction:column; gap:12px }
.footer-brand .brand-lockup{ align-self:flex-start }
.footer-brand .wordmark .wm{ font-size:26px }
.footer-brand .wordmark .desc{ font-size:5.5px; margin-top:4px }
.footer-brand .lockup-divider{ height:24px }
.footer-brand .body{ font-size:14px; line-height:1.5 }

/* ---------- sections ---------- */
.hero{ padding:64px var(--pad) 48px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:44px; align-items:end }
.hero-copy{ display:flex; flex-direction:column; gap:22px }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; padding-top:4px }
.hero-visual{ position:relative; height:380px; border-radius:var(--radius); overflow:hidden; transform:rotate(1deg) }
.hero-visual.flat{ transform:none }
.hero.center{ grid-template-columns:1fr; text-align:center; align-items:center; justify-items:center }
.hero.center .hero-copy{ align-items:center }

.band{ margin:0 var(--pad); background:var(--ink); color:var(--ivory); border-radius:var(--radius); padding:44px 48px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center }
.band .eyebrow{ color:var(--vermilion) }
.band p{ color:#CFC7BA; max-width:560px }
.band-copy{ display:flex; flex-direction:column; gap:12px }

.section{ padding:56px var(--pad) 24px }
.section-head{ display:flex; flex-direction:column; gap:12px; max-width:640px; margin-bottom:28px }
.section-head .lede{ max-width:none }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.cards.two{ grid-template-columns:repeat(2,1fr) }
.cards.four{ grid-template-columns:repeat(4,1fr) }
.card{ background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:10px }
.card .h-s{ color:var(--vermilion) }
.card p{ font-size:15.5px; line-height:1.55; color:var(--ink-soft) }
.card-visual{ border-radius:var(--radius-sm); overflow:hidden; margin:-28px -28px 8px; aspect-ratio:1.4 }
.card.tile{ padding:0; overflow:hidden; gap:0 }
.card.tile .card-visual{ margin:0; aspect-ratio:1; border-radius:0 }
.card.tile .tile-body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:6px }
.card.tile .tile-body .h-s{ color:var(--ink) }
.card.tile:hover .tile-body .h-s{ color:var(--vermilion) }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.stats.three{ grid-template-columns:repeat(3,1fr) }
.stat{ background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:24px 26px; display:flex; flex-direction:column; gap:4px }
.stat .num{ font-family:var(--display); font-weight:800; font-size:44px; letter-spacing:-.03em; line-height:1; color:var(--ink) }
.stat .num .lit{ color:var(--vermilion) }
.stat .lbl{ font-size:14px; color:var(--ink-soft) }

.split{ margin:32px var(--pad) 56px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--cream) }
.split-side{ background:var(--vermilion); color:var(--paper); padding:44px 40px; display:flex; flex-direction:column; gap:16px; justify-content:space-between }
.split-side .eyebrow{ color:var(--paper); opacity:.85 }
.split-side p{ font-size:16.5px; line-height:1.55; opacity:.92 }
.split-side a{ font-weight:700; color:var(--paper) }
.split-side a:hover{ color:var(--ink) }
.split-main{ padding:40px; display:flex; flex-direction:column; gap:16px }

.feature{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:center; padding:40px var(--pad) }
.feature + .feature{ border-top:1px solid var(--line) }
.feature.flip .feature-visual{ order:-1 }
.feature-copy{ display:flex; flex-direction:column; gap:16px }
.feature-visual{ border-radius:var(--radius); overflow:hidden; aspect-ratio:1.4 }
.links-row{ display:flex; flex-wrap:wrap; gap:10px; padding-top:6px }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; border:1.5px solid var(--line-strong); font-size:13.5px; font-weight:600; color:var(--ink-soft) }
.chip:hover{ border-color:var(--ink); color:var(--ink) }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:24px var(--pad) 8px }
.gallery .img-slot{ aspect-ratio:1; border-radius:14px }
.gallery.two{ grid-template-columns:1fr 1fr }
.gallery.two .img-slot{ aspect-ratio:4/3 }

.list-plain{ display:flex; flex-direction:column; gap:10px; font-size:15px; color:var(--ink-soft) }
.list-plain strong{ color:var(--ink); font-weight:600 }
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.contact-grid .card a{ font-weight:600; color:var(--ink) }
.contact-grid .card a:hover{ color:var(--vermilion) }
.c-card{ gap:10px; padding:26px 26px 24px }
.ico{ width:46px; height:46px; border-radius:50%; background:#FDEBE6; color:var(--vermilion); display:inline-flex; align-items:center; justify-content:center; margin-bottom:4px; flex:0 0 auto }
.c-card .mail{ font-weight:600; font-size:17px; color:var(--ink) }
.c-card .tel{ font-size:15px; color:var(--ink-soft); font-weight:400 }
.c-card .hint{ font-size:14px; color:var(--ink-soft); line-height:1.5; margin-top:2px }
.c-card .hint .go{ color:var(--vermilion); font-weight:600 }
.c-addr{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:18px; padding:22px 26px }
.c-addr .ico{ margin:0 } .c-addr .l{ flex:1; font-weight:600; font-size:16px; min-width:240px } .c-addr .l small{ display:block; font-weight:400; font-size:14px; color:var(--ink-soft); margin-top:2px }
.chip-ico{ gap:8px } .chip-ico .ci{ color:var(--vermilion) }

/* ---------- forms ---------- */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.field{ width:100%; padding:14px 16px; border:1.5px solid var(--field-line); border-radius:var(--radius-sm); font-size:15px; background:var(--ivory); color:var(--ink); outline:none; appearance:none; -webkit-appearance:none; transition:border-color .15s ease }
.field:focus{ border-color:var(--vermilion) }
.field::placeholder{ color:var(--ink-faint) }
textarea.field{ resize:vertical; min-height:112px }
select.field{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A443C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px }
select.field.is-placeholder{ color:var(--ink-faint) }
.form-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.form-note{ font-size:14.5px; font-weight:600; color:var(--ok) }
.form-note.err{ color:var(--bad) }
.field.invalid{ border-color:var(--bad) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }

/* ---------- image slots ---------- */
.img-slot{ position:relative; width:100%; height:100%; min-height:100%; overflow:hidden; background:
  linear-gradient(135deg, #EFE7D8 0%, #E6DCC9 55%, #DED2BC 100%); }
.img-slot::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 20% 18%, rgba(240,78,51,.16), transparent 42%),
  radial-gradient(circle at 82% 78%, rgba(38,34,30,.12), transparent 46%); }
.img-slot::after{ content:"z"; position:absolute; right:6%; bottom:-10%; font-family:var(--mark); font-weight:800; font-size:min(46vw,260px); line-height:1; color:rgba(240,78,51,.14); letter-spacing:-.02em; pointer-events:none }
.img-slot.has-img::before,.img-slot.has-img::after{ display:none }
.img-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 50%); opacity:0; transition:opacity .35s ease }
.img-slot.has-img img{ opacity:1 }
.img-slot.has-img{ background:var(--line) }
[data-slot]:not(.img-slot){ display:block }
.img-slot.logo-slot{ background:none; min-height:0; height:auto; width:auto; overflow:visible }
.img-slot.logo-slot::before,.img-slot.logo-slot::after{ display:none }
.img-slot.logo-slot img{ position:static; opacity:1; width:auto; height:auto; object-fit:contain; transition:none }


/* ---------- landing (direction E: mark + line + button ON the photo, logos below) ----------
   One grid, four cells, so the two photos and the two logo rows share their row lines. */
.t-body{ font-size:16px; line-height:1.55; color:var(--ink-soft) }
.houses{ padding:28px var(--pad) 0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; column-gap:16px; row-gap:0;
  grid-template-areas:"pz pa" "fz fa" }
.h-photo.z{ grid-area:pz } .h-photo.a{ grid-area:pa } .h-foot.z{ grid-area:fz } .h-foot.a{ grid-area:fa }
.h-photo{ position:relative; display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:4/5; max-height:620px; border-radius:var(--radius); overflow:hidden; background:var(--night); color:var(--ivory); isolation:isolate }
.h-photo:hover{ color:var(--ivory) }
.h-photo .carousel{ position:absolute; inset:0; z-index:0; display:block; height:auto; aspect-ratio:auto; border-radius:0; background:var(--night) }
.h-photo .carousel > [data-slot]{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease }
.h-photo .carousel > [data-slot].is-on{ opacity:1 }
.h-photo .img-slot{ background:linear-gradient(135deg,#3A332C,#1C1916) } .h-photo .img-slot::after{ color:rgba(247,242,233,.08) }
.h-photo::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(28,25,22,.38),transparent 30%,transparent 55%,rgba(28,25,22,.8)) }
.h-photo .carousel-dots{ bottom:auto; top:22px; right:22px; left:auto; justify-content:flex-end; z-index:2 }
.h-top{ position:relative; z-index:2; padding:24px 26px 0; display:block }
.wordmark.hm{ display:inline-block; width:max-content } .wordmark.hm .wm{ font-size:40px } .wordmark.hm .desc{ font-size:7.5px; margin-top:5px }
.wordmark.iv .wm .rest{ color:var(--ivory) } .wordmark.iv .desc{ color:#CFC7BA }
.h-bot{ position:relative; z-index:2; padding:0 26px 26px; display:flex; align-items:flex-end; justify-content:space-between; gap:18px }
.h-line{ font-family:var(--display); font-weight:500; font-size:21px; line-height:1.3; letter-spacing:-.01em; color:var(--ivory); max-width:24ch; text-shadow:0 1px 10px rgba(0,0,0,.25) }
.btn-enter{ padding:16px 26px; font-size:16px; font-weight:600; flex:0 0 auto }
.h-photo:hover .btn-enter{ background:var(--ivory); color:var(--ink) }
.h-foot{ padding:22px 8px 0; display:flex; align-items:center; min-height:92px }
.h-foot .brand-row{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 30px; padding:0; border:0; margin:0 }
.h-foot .brand-logo{ display:inline-flex; align-items:center; height:56px; max-width:230px }
.h-foot .brand-logo img{ max-height:40px; max-width:230px; width:auto; height:auto; object-fit:contain; display:block }
.h-foot [data-slot="logo-rdbd"] img{ max-height:56px }
.h-foot [data-slot="logo-rosy-roti"] img{ max-height:40px }
.h-foot [data-slot="logo-croom-light"] img{ max-height:34px }
.h-foot [data-slot="logo-yokocho-light"] img{ max-height:28px }
.h-foot [data-slot="logo-imr-light"] img{ max-height:56px }
@media (max-width:1100px){ .wordmark.hm .wm{ font-size:34px } .h-line{ font-size:19px } .h-bot{ flex-direction:column; align-items:flex-start } }
@media (max-width:860px){
  .houses{ padding-top:16px; grid-template-columns:1fr; column-gap:0; grid-template-areas:"pz" "fz" "pa" "fa" }
  .h-photo{ max-height:none } .h-foot.z{ padding-bottom:28px } .h-foot{ min-height:0 }
  .h-bot{ flex-direction:column; align-items:stretch } .btn-enter{ width:100%; padding:17px } .h-line{ max-width:none; font-size:20px }
}

/* awards ticker */
.ticker{ margin:32px var(--pad) 0; overflow:hidden; border-radius:12px; background:var(--cream); border:1px solid var(--line) }
.ticker.night{ background:var(--night); color:var(--ivory); border-color:var(--night) }
.ticker .tk{ display:flex; width:max-content; animation:tk-slide 42s linear infinite }
.ticker:hover .tk{ animation-play-state:paused }
@keyframes tk-slide{ to{ transform:translateX(-50%) } }
.ticker .it{ display:inline-flex; align-items:center; gap:12px; padding:13px 28px; font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; color:#CFC7BA }
.ticker .it b{ font-weight:600; color:var(--ivory) }
.ticker .it .yr{ color:var(--ink-faint) }
.ticker .it::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--vermilion) }
.ticker .it .aw-tile{ display:inline-flex; align-items:center; justify-content:center; height:26px; padding:4px 7px; border-radius:6px; background:var(--ivory); margin-right:2px }
.ticker .it .aw{ height:100%; width:auto; max-width:72px; object-fit:contain; display:block }
.ticker .it.has-logo{ padding-left:22px }
.ticker[hidden]{ display:none }
@media (max-width:1100px){ .half{ max-height:560px } }
@media (max-width:860px){
  .masthead{ padding:18px var(--pad) 12px } .t-quiet{ font-size:16px }
  .halves{ grid-template-columns:1fr } .half{ aspect-ratio:4/5; max-height:none }
  .ticker{ margin:16px 0 0; border-radius:0 }
}
@media (prefers-reduced-motion:reduce){ .ticker .tk{ animation:none } }

/* ---------- carousel (auto-advancing photo frames) ----------
   Generic: any [data-carousel] stacks its frames absolutely and fades the .is-on one in.
   (Dropped by mistake in v09 — the brand-page carousels then stacked their frames vertically.) */
.carousel{ position:relative; height:420px; border-radius:var(--radius); overflow:hidden; background:var(--line) }
.carousel > [data-slot]{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; pointer-events:none }
.carousel > [data-slot].is-on{ opacity:1; pointer-events:auto }
.carousel-dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:7px; z-index:2 }
.carousel-dots{ pointer-events:auto }
.carousel-dots span{ width:8px; height:8px; border-radius:50%; background:rgba(247,242,233,.55); box-shadow:0 0 0 1px rgba(38,34,30,.25); transition:background .3s, transform .3s; cursor:pointer; position:relative }
.carousel-dots span::after{ content:""; position:absolute; inset:-8px }
.carousel-dots span:hover{ background:rgba(247,242,233,.95) }
.carousel-dots span.is-on{ background:var(--vermilion); transform:scale(1.25) }
.chip .ig{ margin-right:2px }
@media (max-width:860px){ .carousel{ height:240px } }

/* ---------- about (landing) ---------- */
.about{ padding:40px var(--pad) 48px; max-width:900px }
.about-text{ font-size:17px; line-height:1.7; max-width:68ch; margin:0 }
.about-text p{ margin:0 0 16px } .about-text p:last-child{ margin-bottom:0 }
.about-text i.name{ font-style:italic }
@media (max-width:860px){ .about{ padding:32px var(--pad) 40px } }

/* ---------- brand blocks (logo + copy left, carousel right) ---------- */
.brand-block{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:center; padding:40px var(--pad) }
.brand-block + .brand-block{ border-top:1px solid var(--line) }
.brand-block.flip{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) }
.brand-block.flip .brand-carousel{ order:-1 }
.brand-copy{ display:flex; flex-direction:column; gap:18px }
.brand-mark{ display:block; height:72px }
.brand-mark img{ max-height:72px; max-width:300px; width:auto; height:auto; object-fit:contain; display:block }
.brand-mark .brand-name{ font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:-.03em }
.brand-mark[data-slot="logo-imr-light"]{ height:124px } .brand-mark[data-slot="logo-imr-light"] img{ max-height:124px; max-width:320px }
.brand-carousel{ height:auto; aspect-ratio:1.4 }
.icon-link{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line-strong); color:var(--ink-soft); transition:border-color .15s, color .15s, background-color .15s }
.icon-link:hover{ border-color:currentColor }
/* brand colours on the round icon buttons */
.icon-link[data-kind="instagram"]{ color:#D62976 }
.icon-link[data-kind="maps"]{ color:#EA4335 }
.icon-link[data-kind="delivery"]{ color:#FC8019 }
.icon-link[data-kind="reserve"]{ color:#2F6B4F }
.icon-link[data-kind="linkedin"]{ color:#0A66C2 }
.brand-copy .links-row{ gap:10px }
@media (max-width:860px){
  .brand-block,.brand-block.flip{ grid-template-columns:1fr; gap:20px; padding:32px var(--pad) }
  .brand-block.flip .brand-carousel{ order:0 }
  .brand-mark{ height:56px } .brand-mark img{ max-height:56px; max-width:220px }
  .brand-mark[data-slot="logo-imr-light"]{ height:96px } .brand-mark[data-slot="logo-imr-light"] img{ max-height:96px }
}

/* ---------- misc ---------- */
.divider{ height:1px; background:var(--line); margin:0 var(--pad) }
.to-top{ color:var(--ink-faint); font-size:13px }
.mark-draft{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); border:1px dashed var(--line-strong); padding:3px 8px; border-radius:6px }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  :root{ --pad:28px }
  .h-hero{ font-size:60px }
  .h-xl{ font-size:46px }
  .cards.four{ grid-template-columns:repeat(2,1fr) }
  .stats{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:860px){
  :root{ --pad:20px }
  .site-header{ flex-wrap:wrap; min-height:0; padding:16px var(--pad); gap:14px }
  .site-nav{ display:none; width:100%; flex-direction:column; gap:0; order:3; border-top:1px solid var(--line); padding-top:6px }
  .site-nav a{ padding:12px 2px; border-bottom:1px solid var(--line); font-size:16px }
  .site-nav a:last-child{ border-bottom:0 }
  .site-header.open .site-nav{ display:flex }
  .nav-toggle{ display:inline-flex }
  .header-cta{ display:none }
  .wordmark .wm{ font-size:30px }
  .house-switch{ display:none }
  .hero{ grid-template-columns:1fr; padding-top:40px; gap:28px }
  .hero-visual{ height:260px; transform:none }
  .h-hero{ font-size:46px }
  .h-xl{ font-size:38px }
  .h-l{ font-size:34px }
  .h-m{ font-size:30px }
  .band{ grid-template-columns:1fr; padding:32px 26px }
  .cards,.cards.two,.cards.four,.contact-grid,.gallery{ grid-template-columns:1fr }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .split{ grid-template-columns:1fr }
  .split-side,.split-main{ padding:28px 24px }
  .feature,.feature.flip{ grid-template-columns:1fr; gap:24px }
  .feature.flip .feature-visual{ order:0 }
  .form-row{ grid-template-columns:1fr }
  .site-footer{ grid-template-columns:1fr; gap:28px }
  .section{ padding-top:40px }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .img-slot img{ transition:none }
}