/* ============================================================
   KRULIS COMMERCIAL, Design System
   Aesthetic: Editorial / institutional. Restrained.
   Brand colour (red) used sparingly as signal, never as a field.
   ============================================================ */

@font-face{font-family:'Whyte';src:url('../fonts/Whyte-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Whyte';src:url('../fonts/Whyte-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Whyte';src:url('../fonts/Whyte-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Whyte';src:url('../fonts/Whyte-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Akkurat';src:url('../fonts/Akkurat.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  /* Brand */
  --k-red:#F22942;
  --k-red-deep:#C81E34;
  --k-red-wash:#FCE7EB;

  /* Neutrals, warm, editorial */
  --k-ink:#111111;
  --k-ink-2:#2A2826;
  --k-ink-3:#5A5753;
  --k-ink-4:#8A8680;
  --k-rule:#1a1a1a0f;
  --k-rule-strong:#1a1a1a22;

  --k-paper:#F7F5F2;    /* warm off-white, primary bg */
  --k-paper-2:#EFEDE8;  /* slightly deeper panel */
  --k-paper-3:#E4E1DA;  /* card wash */
  --k-white:#FFFFFF;

  /* Type */
  --k-display:'Whyte','Helvetica Neue',Arial,sans-serif;
  --k-body:'Akkurat','Helvetica Neue',Arial,sans-serif;

  /* Scale */
  /* Fluid container: phone → 4K. Gutter scales with viewport, max width is
     a generous cap that only kicks in on very wide screens to keep hero
     line-lengths sane. */
  --k-max:none;
  --k-gutter:clamp(20px, 5vw, 140px);
  --k-radius:2px;
  --k-header-h:78px;

  /* Motion */
  --k-ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  font-family:var(--k-body);
  font-size:15px;
  line-height:1.6;
  color:var(--k-ink);
  background:var(--k-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--k-ink);color:var(--k-paper)}

/* ======================= Layout primitives ======================= */
.k-wrap{width:100%;margin:0 auto;padding:0 var(--k-gutter)}
@media(max-width:780px){:root{--k-gutter:20px}}
@media(min-width:2400px){:root{--k-gutter:clamp(120px, 7vw, 220px)}}

.k-rule{height:1px;background:var(--k-rule-strong);border:0;margin:0}

/* ======================= Typography ======================= */
.k-eyebrow{
  font-family:var(--k-body);
  font-size:15px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--k-ink-3);
  font-weight:400;
  display:inline-flex;align-items:center;gap:10px;
}
.k-eyebrow::before{content:"";width:28px;height:1px;background:var(--k-ink-3);display:inline-block}

.k-display-xxl{font-family:var(--k-display);font-weight:300;font-size:clamp(56px,9.2vw,148px);line-height:.92;letter-spacing:-.04em}
.k-display-xl{font-family:var(--k-display);font-weight:400;font-size:clamp(44px,6.4vw,96px);line-height:.95;letter-spacing:-.035em}
.k-display-l{font-family:var(--k-display);font-weight:400;font-size:clamp(36px,4.6vw,68px);line-height:1;letter-spacing:-.03em}
.k-display-m{font-family:var(--k-display);font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.02em}
.k-display-s{font-family:var(--k-display);font-weight:500;font-size:clamp(20px,1.6vw,26px);line-height:1.15;letter-spacing:-.01em}
.k-lede{font-family:var(--k-display);font-weight:300;font-size:clamp(20px,1.9vw,28px);line-height:1.35;letter-spacing:-.01em;color:var(--k-ink-2)}
.k-body{font-size:16px;line-height:1.65;color:var(--k-ink-2)}
.k-small{font-size:15px;color:var(--k-ink-3)}
.k-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;letter-spacing:.02em}

/* ======================= Header ======================= */
.k-header{
  position:sticky;top:0;z-index:80;
  background:color-mix(in oklab, var(--k-paper) 92%, transparent);backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:height .35s var(--k-ease), transform .35s var(--k-ease), background .25s var(--k-ease), border-color .25s var(--k-ease);
  will-change:transform;
  height:var(--k-header-h);
}
.k-header.is-scrolled{
  --k-header-h:62px;
  background:color-mix(in oklab, var(--k-paper) 97%, transparent);
  border-bottom-color:var(--k-rule-strong);
}
.k-header.is-scrolled .k-logo-mark{height:28px}
.k-header.is-scrolled .k-logo-word{font-size:18px}
@media(min-width:1600px){.k-header.is-scrolled .k-logo-word{font-size:20px}.k-header.is-scrolled .k-logo-mark{height:32px}}
@media(min-width:1900px){.k-header.is-scrolled .k-logo-word{font-size:22px}.k-header.is-scrolled .k-logo-mark{height:36px}}
@media(min-width:2400px){.k-header.is-scrolled .k-logo-word{font-size:24px}.k-header.is-scrolled .k-logo-mark{height:40px}}
.k-header.is-scrolled .k-logo-tag{display:none}
.k-header.is-hidden{transform:translateY(-100%)}
.k-header-inner{
  position:relative;
  width:100%;margin:0 auto;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:32px;padding:0 var(--k-gutter);height:100%;
  transition:height .35s var(--k-ease);
}
.k-logo{display:inline-flex;align-items:center;gap:12px;line-height:1}
.k-logo > span{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.k-logo-mark{display:block;height:36px;width:auto;flex-shrink:0;object-fit:contain;object-position:left center;transition:height .35s var(--k-ease)}
.k-logo-word{font-family:var(--k-display);font-weight:500;font-size:21px;letter-spacing:-.01em;color:var(--k-ink);line-height:1.05;white-space:nowrap;transition:font-size .35s var(--k-ease)}
.k-logo-word em{font-style:normal;color:var(--k-red)}
.k-logo-tag{font-family:var(--k-body);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--k-ink-3);display:block;line-height:1;white-space:nowrap}
.k-logo-tag em{font-style:italic;font-family:var(--k-display);text-transform:lowercase;letter-spacing:0;color:var(--k-ink-2);font-size:1.05em}

.k-nav{justify-self:center;position:static;left:auto;top:auto;transform:none;min-width:0}
.k-logo{justify-self:start;min-width:0}
.k-header-cta{display:flex;align-items:center;gap:18px;justify-self:end}
.k-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.k-nav a{
  position:relative;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  padding:10px 18px;
  font-family:var(--k-body);font-size:17px;color:var(--k-ink-2);
  letter-spacing:.01em;
  transition:color .2s var(--k-ease);
}
.k-nav a:hover{color:var(--k-ink)}
.k-nav a.is-active{color:var(--k-ink)}
.k-nav a.is-active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1px;background:var(--k-red);
}

/* Submenu (About → The team) */
.k-nav-has-sub{position:relative}
.k-nav-caret{font-size:13px;margin-left:2px;color:var(--k-ink-3);transition:transform .2s var(--k-ease)}
.k-nav-has-sub:hover .k-nav-caret{transform:rotate(180deg);color:var(--k-ink)}
.k-nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:180px;background:#fff;border:1px solid var(--k-rule-strong);padding:6px 0;list-style:none;margin:0;opacity:0;pointer-events:none;transition:opacity .2s var(--k-ease), transform .2s var(--k-ease);z-index:90;box-shadow:0 8px 28px rgba(0,0,0,.06)}
.k-nav-has-sub:hover .k-nav-sub,.k-nav-has-sub:focus-within .k-nav-sub{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.k-nav-sub li{display:block}
.k-nav-sub a{display:block;padding:10px 18px;font-size:15px;font-family:var(--k-body);color:var(--k-ink-2);white-space:nowrap;text-decoration:none}
.k-nav-sub a::after{display:none !important}
.k-nav-sub a:hover{background:var(--k-paper-2);color:var(--k-ink)}

.k-header-cta{display:flex;align-items:center;gap:18px;justify-content:flex-end}
.k-header-phone{font-family:var(--k-body);font-size:15px;color:var(--k-ink-2)}
.k-header-phone small{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--k-ink-4)}

.k-btn{
  --bg:var(--k-ink);--fg:var(--k-paper);--bd:var(--k-ink);
  display:inline-flex;align-items:center;gap:10px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  padding:12px 20px;border-radius:999px;font-family:var(--k-body);font-size:14px;letter-spacing:.02em;
  transition:background .2s var(--k-ease), color .2s var(--k-ease), border-color .2s var(--k-ease), transform .2s var(--k-ease);
}
.k-btn:hover{transform:translateY(-1px)}
.k-btn .dot{width:6px;height:6px;border-radius:50%;background:var(--k-red)}
.k-btn--ghost{--bg:transparent;--fg:var(--k-ink);--bd:var(--k-rule-strong)}
.k-btn--ghost:hover{--bd:var(--k-ink)}
.k-btn--light{--bg:var(--k-paper);--fg:var(--k-ink);--bd:var(--k-paper)}
.k-btn--red{--bg:var(--k-red);--fg:#fff;--bd:var(--k-red)}
.k-btn--red:hover{--bg:var(--k-red-deep);--bd:var(--k-red-deep)}
.k-btn--outline-light{--bg:transparent;--fg:#fff;--bd:#ffffff55}
.k-btn--outline-light:hover{--bd:#fff}
.k-btn .dot,.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* IB Group ecosystem blocks (home + about) */
.k-ib-parent{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:center;padding:56px 64px;background:var(--k-paper-2);border:1px solid var(--k-rule-strong);color:inherit;transition:background .3s var(--k-ease)}
.k-ib-parent:hover{background:#fff}
.k-ib-parent-mark{display:flex;align-items:center;justify-content:center}
.k-ib-parent-mark img{width:100%;max-width:260px;height:auto;max-height:110px;object-fit:contain;object-position:left center;display:block}
.k-ib-parent-copy .k-arrow-link,.k-arrow-link{display:inline-block;margin-top:22px;font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--k-red);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:900px){.k-ib-parent{grid-template-columns:1fr;gap:28px;padding:28px}}

/* ===================== Home IB. Group rail ===================== */
.k-ibhome{display:grid;grid-template-columns:.9fr 1.6fr;gap:64px;align-items:start}
@media(max-width:1100px){.k-ibhome{grid-template-columns:1fr;gap:40px}}
.k-ibhome-head{padding-right:8px}
.k-ibhome-rail{display:grid;grid-template-columns:auto 1px 1fr;gap:32px;align-items:stretch;padding:32px 32px;background:#fff;border:1px solid var(--k-rule)}
@media(max-width:780px){.k-ibhome-rail{grid-template-columns:1fr;gap:24px;padding:24px}}
.k-ibhome-parent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:140px;padding:6px 12px}
.k-ibhome-parent img{max-width:120px;max-height:64px;width:auto;object-fit:contain}
.k-ibhome-parent span{font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-ink-3);text-align:center;white-space:nowrap}
.k-ibhome-divider{background:var(--k-rule);width:1px;align-self:stretch}
@media(max-width:780px){.k-ibhome-divider{height:1px;width:auto}}
.k-ibhome-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--k-rule);align-self:stretch;border:1px solid var(--k-rule)}
@media(max-width:780px){.k-ibhome-subs{grid-template-columns:repeat(2,1fr)}}
.k-ibhome-sub{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 10px;text-decoration:none;color:inherit;transition:background .25s var(--k-ease)}
.k-ibhome-sub:hover{background:var(--k-paper-2)}
.k-ibhome-sub img{max-width:84px;max-height:32px;width:auto;object-fit:contain}
.k-ibhome-sub img[src*="ib-property"],
.k-ibhome-sub img[src*="ib-living"],
.k-ibhome-sub img[src*="ib-insurance"]{max-height:30px;max-width:74px}
.k-ibhome-sub img[src*="noble"]{max-width:34px;max-height:32px}
.k-ibhome-sub img[src*="maintain"]{max-height:18px;max-width:90px}
.k-ibhome-sub small{font-family:var(--k-body);font-size:14px;color:var(--k-ink-3);letter-spacing:.02em;text-align:center}
.k-ibhome-here{grid-column:1/-1;margin-top:8px;padding-top:24px;border-top:1px solid var(--k-rule);display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.k-ibhome-here p{font-family:var(--k-body);font-size:14.5px;color:var(--k-ink-2);margin:0}
.k-ibhome-here strong{color:var(--k-red);font-weight:500}
.k-ibhome-here a{color:var(--k-ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--k-rule-strong);text-underline-offset:3px}
.k-ib-parent--open{background:transparent;border:0;border-top:1px solid var(--k-rule);padding:48px 0 0;gap:64px;grid-template-columns:200px 1fr;align-items:start}
.k-ib-parent--open:hover{background:transparent}
.k-ib-parent--open .k-ib-parent-mark{justify-content:flex-start}
.k-ib-parent--open .k-ib-parent-mark img{max-width:220px;max-height:88px}
@media(max-width:900px){.k-ib-parent--open{grid-template-columns:1fr;gap:24px;padding:36px 0 0}}

.k-ib-subs{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--k-rule-strong);border:1px solid var(--k-rule-strong)}
.k-ib-subs a{background:#fff;height:120px;display:flex;align-items:center;justify-content:center;padding:20px;transition:background .3s var(--k-ease)}
.k-ib-subs a:hover{background:var(--k-paper-2)}
.k-ib-subs img{max-height:48%;max-width:72%;width:auto;height:auto;object-fit:contain}
@media(max-width:900px){.k-ib-subs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.k-ib-subs{grid-template-columns:repeat(2,1fr)}}

.k-burger{display:none;width:42px;height:42px;border:1px solid var(--k-rule-strong);background:transparent;border-radius:999px;align-items:center;justify-content:center;gap:3px;flex-direction:column;cursor:pointer;flex-shrink:0}
.k-burger span{width:16px;height:1px;background:var(--k-ink);transition:transform .25s var(--k-ease)}

/* Mobile header: K monogram only; full wordmark hidden; CTA hidden; burger shows */
.k-logo-mark--mono{height:32px;width:auto;flex-shrink:0;object-fit:contain;object-position:left center;transition:height .35s var(--k-ease)}
.k-header.is-scrolled .k-logo-mark--mono{height:28px}

/* Hide tagline early so wordmark + nav both breathe */
@media(max-width:1280px){
  .k-logo-tag{display:none}
}
/* Collapse nav + CTA to drawer together — no awkward in-between state */
@media(max-width:1100px){
  .k-nav{display:none}
  .k-cta-desktop{display:none}
  .k-burger{display:inline-flex}
  .k-logo-mark--mono{height:34px}
  /* Two-column header: logo left, burger right */
  .k-header-inner{grid-template-columns:1fr auto;gap:16px}
  .k-header-cta{justify-self:end}
}
@media(max-width:560px){
  .k-logo-text{display:none}
  .k-logo-mark--mono{height:30px}
}
/* Landscape phones: tighten header height + hero */
@media(max-width:1024px) and (orientation:landscape) and (max-height:520px){
  :root{--k-header-h:56px}
  .k-header.is-scrolled{--k-header-h:48px}
  .k-hero{min-height:100vh;padding-bottom:32px}
  .k-hero-inner{padding-top:80px !important}
  .k-hero-title{font-size:clamp(36px,8vw,64px) !important;line-height:.95 !important}
  .k-hero-meta{gap:24px !important}
  .k-mnav{padding:14px 20px 24px}
  .k-mnav li a{font-size:clamp(18px,3.6vw,22px);padding:8px 0}
}

/* ======================= Hero ======================= */
.k-hero{
  position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--k-ink);color:#fff;overflow:hidden;
  padding-bottom:64px;
}
.k-hero-media{position:absolute;inset:0;z-index:0}
.k-hero-media img,.k-hero-media video{width:100%;height:100%;object-fit:cover;opacity:.78;image-rendering:auto;transform:translateZ(0);will-change:transform}
.k-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.65) 100%);
}
.k-hero-inner{position:relative;z-index:2;width:100%;margin:0 auto;padding:0 var(--k-gutter)}
.k-hero-meta{display:grid;grid-template-columns:1.4fr auto;justify-content:space-between;align-items:flex-end;gap:48px}
@media(max-width:780px){.k-hero-meta{grid-template-columns:1fr}}
.k-hero-title{
  font-family:var(--k-display);font-weight:300;
  font-size:clamp(56px,10vw,168px);line-height:.9;letter-spacing:-.045em;
  color:#fff;margin:0 0 20px;max-width:12ch;
}
.k-hero-title em{font-style:normal;font-weight:300;color:#fff;position:relative;display:inline-block}
.k-hero-title em::after{content:""}
/* First word ("Krulis") in hero tagline — red */
.k-hero-tag-kw{color:var(--k-red);font-style:normal}
/* Square red full stop — sits cleanly at the baseline of the last word */
.k-sq-dot{display:inline-block;width:.2em;height:.2em;background:var(--k-red);margin-left:.12em;vertical-align:-.02em}
.k-hero-sub{font-family:var(--k-body);font-size:15px;color:#ffffffcc;max-width:36ch;line-height:1.6;margin:0}
.k-hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:22px;text-align:right}
.k-hero-kpi{font-family:var(--k-display);font-weight:300;font-size:44px;line-height:1;color:#fff;letter-spacing:-.02em}
.k-hero-kpi small{display:block;font-family:var(--k-body);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#ffffff99;margin-top:8px;font-weight:400}
.k-hero-btns{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/* Hero — tagline appears immediately; other bits reveal on scroll/load progression */
@keyframes k-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.k-fade{opacity:0;animation:k-fade-up .9s cubic-bezier(.2,.7,.2,1) forwards}
.k-fade--1{animation-delay:.05s}
.k-fade--2{animation-delay:.18s}
.k-fade--3{animation-delay:.55s}  /* buttons appear after title */
.k-fade--4{animation-delay:.7s}   /* $1B+ */
.k-fade--5{animation-delay:.88s}  /* 1974 */

/* Hero scroll-reveal — stays hidden until hero is scrolled into view */
.k-hreveal{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.k-hreveal.is-in{opacity:1;transform:none}
.k-hreveal--1.is-in{transition-delay:.05s}
.k-hreveal--2.is-in{transition-delay:.1s}
.k-hreveal--3.is-in{transition-delay:.35s}
.k-hreveal--4.is-in{transition-delay:.55s}
.k-hreveal--5.is-in{transition-delay:.72s}

.k-hero-ticker{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;gap:0;overflow:hidden;border-top:1px solid #ffffff22;
  background:rgba(0,0,0,.25);
}
.k-hero-ticker div{
  flex:1;padding:16px 24px;font-family:var(--k-body);font-size:14px;color:#fff;
  display:flex;justify-content:space-between;gap:14px;border-right:1px solid #ffffff18;
  letter-spacing:.02em;
}
.k-hero-ticker div:last-child{border-right:0}
.k-hero-ticker span{color:#ffffff80;font-size:13px;letter-spacing:.18em;text-transform:uppercase}

@media(max-width:780px){
  .k-hero{min-height:80vh}
  .k-hero-inner{padding-top:104px}
  .k-hero-ticker{font-size:12px}
  .k-hero-ticker div{padding:10px 14px;flex-direction:column;gap:2px}
  .k-hero-right{align-items:flex-start;text-align:left}
}

/* ======================= Section ======================= */
.k-section{padding:clamp(56px,9vw,140px) 0;position:relative}
.k-section--tight{padding:clamp(40px,6vw,96px) 0}
.k-section--dark{background:var(--k-ink);color:#fff}
.k-section--dark .k-eyebrow,.k-section--dark .k-eyebrow::before{color:#ffffff80;background:#ffffff80}
.k-section--dark .k-lede{color:#ffffffcc}
.k-section--paper2{background:var(--k-paper-2)}

/* Section headings: pull tight-left, not float-right. Two-column layout only when the right column has real content. */
.k-section-head{display:grid;grid-template-columns:1fr;gap:24px;align-items:end;margin-bottom:56px}
.k-section-head h2{margin:14px 0 0;max-width:22ch}
.k-section-head.k-section-head--split{grid-template-columns:1.4fr 1fr;gap:80px;margin-bottom:72px;max-width:none}
@media(max-width:900px){.k-section-head.k-section-head--split{grid-template-columns:1fr;gap:24px;margin-bottom:40px}}

/* ======================= Property card ======================= */
.k-prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.k-prop-grid--2{grid-template-columns:repeat(2,1fr)}
.k-prop-grid--3-fixed{grid-template-columns:repeat(3,1fr) !important;gap:24px 16px}
.k-prop-grid--3-fixed .k-prop-title{font-size:clamp(15px,1.6vw,22px)}
.k-prop-grid--3-fixed .k-prop-meta,.k-prop-grid--3-fixed .k-prop-price{font-size:clamp(11px,1.1vw,14px)}
.k-prop-grid--4{grid-template-columns:repeat(4,1fr);gap:32px 20px}
.k-prop-grid--6{grid-template-columns:repeat(6,1fr);gap:28px 16px}
@media(min-width:1700px){.k-prop-grid--4{grid-template-columns:repeat(5,1fr)}}
@media(min-width:2200px){.k-prop-grid{grid-template-columns:repeat(5,1fr)}.k-prop-grid--4{grid-template-columns:repeat(6,1fr)}.k-prop-grid--6{grid-template-columns:repeat(7,1fr)}}
@media(min-width:2800px){.k-prop-grid{grid-template-columns:repeat(6,1fr)}.k-prop-grid--4{grid-template-columns:repeat(7,1fr)}.k-prop-grid--6{grid-template-columns:repeat(8,1fr)}}
@media(max-width:1500px){.k-prop-grid--6{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1280px){.k-prop-grid--6{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1200px){.k-prop-grid--4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.k-prop-grid{grid-template-columns:repeat(2,1fr)}.k-prop-grid--4{grid-template-columns:repeat(2,1fr)}.k-prop-grid--6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.k-prop-grid{grid-template-columns:1fr}.k-prop-grid--4{grid-template-columns:1fr}.k-prop-grid--6{grid-template-columns:repeat(2,1fr);gap:16px 10px}}

.k-prop{display:block;position:relative;color:var(--k-ink);background:transparent}
.k-prop-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--k-paper-3)}
.k-prop-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--k-ease)}
.k-prop:hover .k-prop-media img{transform:scale(1.04)}
.k-prop-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--k-paper);color:var(--k-ink);
  font-family:var(--k-body);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 10px;border-radius:2px;
}
.k-prop-badge--red{background:var(--k-red);color:#fff}
.k-prop-badge--ink{background:var(--k-ink);color:#fff}
.k-prop-ref{
  position:absolute;top:14px;right:14px;z-index:2;
  font-family:ui-monospace,Menlo,monospace;font-size:13px;color:#ffffffcc;
  background:rgba(0,0,0,.4);padding:4px 8px;border-radius:2px;
  letter-spacing:.04em;
}
.k-prop-body{padding:20px 2px 0}
.k-prop-line{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-bottom:6px}
.k-prop-title{font-family:var(--k-display);font-weight:500;font-size:20px;letter-spacing:-.01em;margin:0;color:var(--k-ink)}
.k-prop-price{font-family:var(--k-display);font-weight:500;font-size:15px;white-space:nowrap}
@media(max-width:640px){
  .k-prop-line{flex-direction:column;align-items:flex-start;gap:6px}
  .k-prop-price{white-space:normal;font-size:16px}
}
.k-prop-sub{font-family:var(--k-body);font-size:14px;color:var(--k-ink-3);margin:0 0 14px}
.k-prop-specs{display:flex;flex-wrap:wrap;gap:20px;padding-top:16px;border-top:1px solid var(--k-rule-strong);font-size:14px;color:var(--k-ink-3);font-family:var(--k-body);letter-spacing:0}
.k-prop-specs span{display:inline-flex;align-items:baseline;gap:6px}
.k-prop-specs b{color:var(--k-ink);font-weight:500;font-family:var(--k-display);font-size:15px}

/* ======================= Footer ======================= */
.k-footer{background:var(--k-ink);color:#fff;padding:100px 0 0;margin-top:120px}
.k-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;padding-bottom:80px;border-bottom:1px solid #ffffff1c}
.k-footer h4{font-family:var(--k-body);font-weight:400;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#ffffff80;margin:0 0 18px}
.k-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.k-footer li a{font-family:var(--k-display);font-size:18px;color:#fff;font-weight:400}
.k-footer li a:hover{color:var(--k-red)}
.k-footer-wordmark{font-family:var(--k-display);font-weight:300;font-size:clamp(48px,7vw,96px);line-height:.9;letter-spacing:-.04em;margin:0 0 28px}
.k-footer-wordmark em{font-style:normal;color:var(--k-red)}
.k-footer-lede{font-family:var(--k-body);font-size:16px;color:#ffffffbb;max-width:32ch;line-height:1.7}
.k-footer-offices{display:flex;flex-direction:column;gap:18px}
.k-footer-office b{font-family:var(--k-body);font-weight:500;color:#fff;display:block;font-size:15px;letter-spacing:.02em}
.k-footer-office span{font-family:var(--k-body);font-size:15px;color:#ffffff99;line-height:1.6}
.k-footer-bot{display:flex;justify-content:space-between;align-items:center;padding:28px 0;font-size:14px;color:#ffffff66}
.k-footer-bot a{color:#ffffff99}
.k-footer-bot a:hover{color:#fff}
.k-footer-ib{display:flex;align-items:center;gap:12px;color:#ffffffaa;font-size:14px}
.k-footer-ib img{height:18px;width:auto;filter:brightness(0) invert(1);opacity:.7}

@media(max-width:900px){.k-footer-grid{grid-template-columns:1fr 1fr;gap:40px}.k-footer{padding:60px 0 0;margin-top:60px}}
@media(max-width:560px){.k-footer-grid{grid-template-columns:1fr}.k-footer-bot{flex-direction:column;gap:10px;text-align:center}}

/* ======================= Breadcrumb / page intro ======================= */
.k-pageintro{padding:72px 0 40px;border-bottom:1px solid var(--k-rule-strong)}
.k-pageintro-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:end}
.k-pageintro h1{margin:14px 0 0}
.k-pageintro-right{display:flex;flex-direction:column;gap:16px}
.k-crumbs{display:none}
@media(max-width:900px){.k-pageintro-grid{grid-template-columns:1fr;gap:24px}.k-pageintro{padding:40px 0 24px}}

/* ======================= Filter bar ======================= */
.k-filters{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--k-rule-strong);
  border-top:1px solid var(--k-rule-strong);border-bottom:1px solid var(--k-rule-strong);
  margin-bottom:40px;
}
.k-filter[hidden]{display:none!important}
.k-filter{
  background:#fff;padding:18px 44px 18px 24px;
  display:flex;flex-direction:column;gap:6px;position:relative;
  transition:background .2s var(--k-ease);cursor:pointer;min-height:68px;justify-content:center;
}
.k-filter:hover{background:var(--k-paper-2)}
.k-filter.k-filter--open{background:#fff;box-shadow:inset 0 -2px 0 var(--k-red);z-index:5}
.k-filter:focus-within{background:#fff}
.k-filter > label{font-family:var(--k-body);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--k-ink-4);cursor:pointer;font-weight:500}
.k-filter select,.k-filter input{
  border:0;background:transparent;font-family:var(--k-display);font-weight:500;
  font-size:16px;color:var(--k-ink);padding:0;outline:none;width:100%;
  appearance:none;-webkit-appearance:none;cursor:pointer;letter-spacing:-.005em;
}
.k-filter input{cursor:text;font-weight:400}
.k-filter input::placeholder{color:var(--k-ink-4);font-weight:400}
/* Chevron on selects only */
.k-filter:has(select)::after{
  content:"";position:absolute;right:24px;top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--k-ink-3);border-bottom:1.5px solid var(--k-ink-3);
  transform:translateY(-75%) rotate(45deg);pointer-events:none;
  transition:border-color .2s var(--k-ease), transform .25s var(--k-ease);
}
.k-filter:has(select):hover::after{border-color:var(--k-ink);transform:translateY(-50%) rotate(45deg)}
.k-filter--open:has(select)::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--k-ink)}

/* Custom popover for enhanced selects */
.k-filter--enhanced{position:relative}
.k-sel-pop{
  position:absolute;left:-1px;right:-1px;top:calc(100% + 1px);z-index:10;
  background:#fff;border:1px solid var(--k-rule-strong);box-shadow:0 16px 40px -12px rgba(17,16,15,.18);
  padding:6px;display:none;max-height:320px;overflow:auto;
}
.k-filter--open .k-sel-pop{display:block}
.k-sel-opt{
  display:block;width:100%;text-align:left;padding:12px 14px;border:0;background:transparent;
  font-family:var(--k-display);font-weight:400;font-size:15px;color:var(--k-ink);cursor:pointer;
  transition:background .15s var(--k-ease),color .15s var(--k-ease);
}
.k-sel-opt:hover{background:var(--k-paper)}
.k-sel-opt.is-on{background:var(--k-ink);color:#fff;font-weight:500}

/* JS-enhanced selects show their value in a span */
.k-filter-val{
  font-family:var(--k-display);font-weight:500;font-size:16px;color:var(--k-ink);
  line-height:1.2;letter-spacing:-.005em;pointer-events:none;
}

.k-filter--go{
  background:var(--k-ink);display:flex;align-items:center;justify-content:center;
  border:0;padding:18px;color:#fff;font-family:var(--k-body);font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:500;min-width:150px;
  transition:background .25s var(--k-ease),letter-spacing .25s var(--k-ease);cursor:pointer;
}
.k-filter--go:hover{background:var(--k-red);letter-spacing:.16em}
@media(max-width:900px){.k-filter--go{grid-column:1/-1}}
@media(max-width:520px){.k-filters{grid-template-columns:1fr}}

.k-tabs{display:flex;gap:2px;border-bottom:1px solid var(--k-rule-strong);margin-bottom:40px;flex-wrap:wrap}
.k-tab{background:transparent;border:0;padding:16px 24px 16px 0;margin-right:28px;font-family:var(--k-display);font-size:clamp(16px,2.2vw,20px);color:var(--k-ink-4);position:relative;letter-spacing:-.01em}
.k-tab b{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:400;margin-left:8px;color:var(--k-ink-4)}
.k-tab.is-active{color:var(--k-ink)}
.k-tab.is-active::after{content:"";position:absolute;left:0;right:28px;bottom:-1px;height:1px;background:var(--k-red)}

.k-result-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;font-family:ui-monospace,Menlo,monospace;font-size:14px;color:var(--k-ink-3)}

/* ======================= Mobile nav overlay ======================= */
.k-mnav{position:fixed;inset:0;z-index:120;background:var(--k-paper);padding:20px 24px 32px;display:none;flex-direction:column;gap:28px;overflow-y:auto}
.k-mnav.is-open{display:flex}
.k-mnav-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--k-rule-strong)}
.k-mnav-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.k-mnav-logo .k-logo-mark--mono{height:38px}
.k-mnav-logo .k-logo-text{display:flex;flex-direction:column;gap:4px}
.k-mnav-logo .k-logo-word{font-family:var(--k-display);font-weight:500;font-size:19px;letter-spacing:-.01em;color:var(--k-ink);line-height:1;white-space:nowrap}
.k-mnav-logo .k-logo-tag{font-family:var(--k-body);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--k-ink-3);line-height:1}
.k-mnav-close{background:transparent;border:0;font-size:34px;line-height:1;color:var(--k-ink-3);cursor:pointer;padding:4px 8px}
.k-mnav-close:hover{color:var(--k-red)}
.k-mnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.k-mnav li a{font-family:var(--k-display);font-weight:400;font-size:clamp(20px,4.2vw,26px);padding:14px 0;display:block;border-bottom:1px solid var(--k-rule);color:var(--k-ink);text-decoration:none;letter-spacing:-.01em}
.k-mnav li a:hover{color:var(--k-red)}
.k-mnav-cta{margin-top:auto;align-self:stretch;justify-content:center;padding:18px;font-size:15px;letter-spacing:.08em}

/* ======================= Utility ======================= */
.k-grid{display:grid;gap:40px}
.k-cols-2{grid-template-columns:repeat(2,1fr)}
.k-cols-3{grid-template-columns:repeat(3,1fr)}
.k-cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.k-cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.k-cols-2,.k-cols-3,.k-cols-4{grid-template-columns:1fr;gap:32px!important}}
@media(max-width:900px){.k-section{padding:72px 0}.k-section--tight{padding:48px 0}}
@media(max-width:560px){.k-section{padding:56px 0}}

.k-reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--k-ease),transform .9s var(--k-ease)}

/* ======================= Home: Practice (with icons) ======================= */
.k-practice-grid{gap:clamp(40px,5vw,72px)!important}
.k-practice{position:relative;padding-top:8px}
.k-practice-icon{width:44px;height:44px;color:var(--k-red);margin-bottom:24px}
.k-practice-icon svg{width:100%;height:100%;display:block}
.k-practice-line{width:28px;height:1px;background:var(--k-ink-4);margin:0 0 18px}

/* ======================= Home: Ambition callout ======================= */
.k-ambition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(48px,7vw,120px);align-items:start;padding:clamp(24px,4vw,48px) 0}
.k-ambition-left{position:sticky;top:140px}
.k-ambition-title{margin:14px 0 0;font-size:clamp(40px,5.2vw,78px);line-height:.98;letter-spacing:-.025em}
.k-ambition-right{display:flex;flex-direction:column;gap:28px;padding-top:10px}
.k-ambition-body{max-width:52ch;color:var(--k-ink-3)}
.k-sq-dot--lg{width:.22em;height:.22em;margin-left:.1em;vertical-align:-.02em}
@media(max-width:900px){.k-ambition{grid-template-columns:1fr;gap:32px}.k-ambition-left{position:static}}

/* ======================= Home: Why Krulis pillars ======================= */
.k-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--k-rule)}
.k-why{background:var(--k-paper);padding:clamp(32px,3.2vw,48px) clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:14px;transition:background .4s var(--k-ease)}
.k-why:hover{background:var(--k-paper-2)}
.k-why-icon{width:40px;height:40px;color:var(--k-red);margin-bottom:14px}
.k-why-icon svg{width:100%;height:100%;display:block}
.k-why h3{font-family:var(--k-display);font-weight:500;font-size:clamp(18px,1.35vw,22px);line-height:1.2;letter-spacing:-.01em;margin:0;color:var(--k-ink)}
.k-why p{font-size:14.5px;line-height:1.6;color:var(--k-ink-3);margin:0;max-width:40ch}
@media(max-width:1100px){.k-why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.k-why-grid{grid-template-columns:1fr}}

/* Services page rows */
.k-svc-row{gap:clamp(32px,5vw,80px);margin-bottom:clamp(56px,8vw,100px)}
.k-svc-row:last-child{margin-bottom:0}
.k-svc-img-r{order:2}
@media(max-width:900px){.k-svc-img-r{order:0}}
.k-reveal.is-in{opacity:1;transform:none}

.k-placeholder{
  background:
    repeating-linear-gradient(45deg, #e4e1da 0, #e4e1da 6px, #efede8 6px, #efede8 12px);
  display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--k-ink-4);letter-spacing:.1em;text-transform:uppercase;
}

/* ======================= Tweaks panel ======================= */
.k-tweaks{
  position:fixed;right:20px;bottom:20px;z-index:200;
  background:var(--k-ink);color:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);font-family:var(--k-body);font-size:13px;
  width:280px;max-height:calc(100vh - 40px);display:none;flex-direction:column;
}
.k-tweaks.is-on{display:flex}
.k-tweaks header{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff15}
.k-tweaks header b{font-family:var(--k-display);font-weight:500;font-size:13px;letter-spacing:.02em}
.k-tweaks header button{background:transparent;border:0;color:#ffffff80;font-size:16px;padding:0;line-height:1}
.k-tweaks-body{padding:14px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.k-tweak{display:flex;flex-direction:column;gap:6px}
.k-tweak label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#ffffff80}
.k-tweak select,.k-tweak input[type=text]{background:#ffffff0f;border:1px solid #ffffff20;color:#fff;padding:8px 10px;border-radius:4px;font:inherit;width:100%}
.k-tweak-row{display:flex;gap:6px}
.k-tweak-chip{flex:1;padding:8px;background:#ffffff0f;border:1px solid #ffffff20;border-radius:4px;text-align:center;color:#fff}
.k-tweak-chip.is-on{background:var(--k-red);border-color:var(--k-red)}
.k-tweak-color{display:flex;gap:6px}
.k-tweak-color button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;padding:0}
.k-tweak-color button.is-on{border-color:#fff}


/* ============================================================
   MOBILE & LANDSCAPE OPTIMISATIONS  (added pass)
   Goal: every page reads cleanly down to 360px wide and on
   short landscape phones (max-height ~520px).
   ============================================================ */

/* General small-screen polish */
@media(max-width:780px){
  /* Sections breathe less aggressively */
  .k-section{padding:64px 0}
  .k-section--tight{padding:48px 0}
  .k-section-head{margin-bottom:32px;gap:16px}
  .k-section-head.k-section-head--split{grid-template-columns:1fr;gap:16px;margin-bottom:36px}
  /* Tame display sizes */
  .k-display-xl{font-size:clamp(48px,12vw,84px) !important}
  .k-display-l{font-size:clamp(34px,8.4vw,52px) !important;line-height:1.04}
  .k-display-m{font-size:clamp(26px,6.6vw,40px) !important;line-height:1.08}
  .k-lede{font-size:17px}
  .k-body{font-size:16px}
  /* Hero KPIs: smaller, inline-ish */
  .k-hero-kpi{font-size:30px}
  .k-hero-kpi small{font-size:11px;letter-spacing:.14em}
  .k-hero-btns .k-btn{flex:1;min-width:140px;justify-content:center}
  /* Footer + grids stack */
  .k-footer-grid{grid-template-columns:1fr 1fr !important;gap:32px !important}
  .k-grid.k-cols-3,.k-grid.k-cols-4{grid-template-columns:1fr 1fr !important}
  .k-why-grid{grid-template-columns:1fr !important;gap:0 !important}
  /* Practice / why blocks: trim padding */
  .k-practice,.k-why{padding:28px 20px !important}
}

@media(max-width:520px){
  .k-footer-grid{grid-template-columns:1fr !important}
  .k-grid.k-cols-3,.k-grid.k-cols-4{grid-template-columns:1fr !important}
  .k-hero-btns{flex-direction:column;align-items:stretch}
  .k-hero-btns .k-btn{width:100%}
  /* Latest listings: at narrow widths, drop to 2-up so cards stay legible.
     With 3 items in the grid, hide the 3rd to keep a tidy 2-card row. */
  .k-prop-grid--3-fixed{grid-template-columns:repeat(2,1fr) !important;gap:18px 12px}
  .k-prop-grid--3-fixed > :nth-child(3){display:none}
  .k-prop-grid--3-fixed .k-prop-title{font-size:15px}
  .k-prop-grid--3-fixed .k-prop-meta,.k-prop-grid--3-fixed .k-prop-price{font-size:12px}
}

/* Landscape phones — short viewports */
@media(orientation:landscape) and (max-height:520px){
  .k-hero{min-height:100svh;padding-bottom:24px}
  .k-hero-inner{padding-top:88px !important}
  .k-hero-meta{grid-template-columns:1.4fr auto !important;gap:24px !important}
  .k-hero-title{font-size:clamp(38px,7vw,68px) !important;line-height:.96 !important}
  .k-hero-right{align-items:flex-end;text-align:right;gap:10px}
  .k-hero-kpi{font-size:24px}
  .k-hero-ticker{display:none}
  .k-section{padding:48px 0}
  .k-section--tight{padding:36px 0}
}

/* Touch targets */
@media(hover:none) and (pointer:coarse){
  .k-btn{min-height:44px;padding:14px 22px}
  .k-nav a,.k-mnav li a{min-height:44px;display:flex;align-items:center}
  .k-burger{width:44px;height:44px}
}

/* =================== Big-screen scale tiers (last in file so they win) =================== */
@media(min-width:1600px){
  .k-body{font-size:18px}
  .k-small{font-size:16px}
  .k-eyebrow{font-size:14px}
  :root{--k-header-h:88px}
  .k-header.is-scrolled{--k-header-h:68px}
  .k-header{height:88px}
  .k-header.is-scrolled{height:68px}
  .k-logo-word{font-size:23px}
  .k-logo-mark{height:40px}
  .k-logo-tag{font-size:13px}
  .k-nav a{font-size:16px}
  .k-header-phone{font-size:16px}
}
@media(min-width:1900px){
  .k-body{font-size:19px;line-height:1.65}
  .k-small{font-size:17px}
  :root{--k-header-h:96px}
  .k-header.is-scrolled{--k-header-h:72px}
  .k-header{height:96px}
  .k-header.is-scrolled{height:72px}
  .k-logo-word{font-size:25px}
  .k-logo-mark{height:44px}
  .k-logo-tag{font-size:14px}
  .k-nav a{font-size:17px}
  .k-header-phone{font-size:17px}
}
@media(min-width:2400px){
  .k-body{font-size:21px;line-height:1.65}
  .k-small{font-size:18px}
  .k-eyebrow{font-size:15px}
  :root{--k-header-h:108px}
  .k-header.is-scrolled{--k-header-h:80px}
  .k-header{height:108px}
  .k-header.is-scrolled{height:80px}
  .k-logo-word{font-size:28px}
  .k-logo-mark{height:50px}
  .k-logo-tag{font-size:15px}
  .k-nav a{font-size:18px}
  .k-header-phone{font-size:18px}
}