/* ============================================================
   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}

/* ====================== Page transitions ======================
   Cross-document view-transitions API — Chrome 126+, Edge 126+, Safari 18+.
   Browser snapshots the outgoing page, loads the new page, then cross-fades
   between them. Native, no JS, no SPA needed. Firefox falls back to a simple
   body fade-in. Respects prefers-reduced-motion. */
@view-transition { navigation: auto }

/* ====================== Top loading bar ======================
   2px red bar at the top of the viewport, scaleX-animated when an internal
   link is clicked. Gives instant visual feedback that something is happening
   (especially on slow connections where the view-transition cross-fade alone
   doesn't tell you you've clicked anything yet). Drives off the .is-on class
   added by partials.js link-intercept handler. */
.k-loadbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:99999;
  background:var(--k-red);
  transform:scaleX(0);transform-origin:left center;
  opacity:1;pointer-events:none;
  transition:transform .25s cubic-bezier(.4,0,.2,1), opacity .3s ease-out;
}
/* Click-then-load: bar surges to ~85% over 8s with an aggressive easing curve
   (mostly fast at start, slows toward the end — feels like real network
   loading). When the new page renders, fresh CSS resets it to scaleX(0). */
.k-loadbar.is-on{
  transform:scaleX(0.85);
  transition:transform 8s cubic-bezier(.05,.9,.05,.99);
}
/* Krulis monogram appears in the centre of the viewport AFTER 250ms of
   loading — quick navigations don't trigger it, slow ones get the proper
   branded loader. */
.k-loader-mark{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);
  width:48px;height:48px;z-index:99998;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease-out, transform .3s ease-out;
  background:url('/assets/logos/monogram.png') center/contain no-repeat;
  animation:kr-loader-pulse 1.4s ease-in-out infinite;
}
.k-loader-mark.is-on{opacity:.85;transform:translate(-50%,-50%) scale(1)}
@keyframes kr-loader-pulse{
  0%,100%{filter:opacity(.6)}
  50%{filter:opacity(1)}
}
@media (prefers-reduced-motion: reduce){
  .k-loadbar,.k-loader-mark{display:none}
}

@media (prefers-reduced-motion: no-preference) {
  /* Very snappy crossfade — old page fades out in 120ms, new page fades in
     in 200ms with a tiny 4px lift. Total perceived motion is ~220ms which
     reads as "instant with a touch of polish" rather than an actual animation. */
  ::view-transition-old(root) {
    animation: kr-page-out 0.12s cubic-bezier(.4, 0, .2, 1) both;
  }
  ::view-transition-new(root) {
    animation: kr-page-in 0.20s cubic-bezier(.2, .9, .3, 1) both;
  }
  @keyframes kr-page-out {
    to { opacity: 0; }
  }
  @keyframes kr-page-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* The header is INTENTIONALLY not given a view-transition-name. We tried
     pinning it (view-transition-name: site-header) but the browser then tried
     to morph the .is-active nav link change AND the .is-scrolled height
     change between pages — which felt like a "jump". Leaving it un-named lets
     it crossfade with the rest of the page in one smooth motion. */
}

/* Fallback for browsers without view-transitions (Firefox, older Safari):
   re-use the same kr-page-in keyframe so the feel is consistent across
   browsers — slide-up + fade-in on every page load. */
@media (prefers-reduced-motion: no-preference) {
  @supports not (view-transition-name: none) {
    body { animation: kr-page-in 0.32s cubic-bezier(.16, .84, .44, 1) both }
  }
}

/* Lock the page background so there's never a white flash if the browser
   shows the body before our content paints (between document load and the
   view-transition starting). */
html, body { background: var(--k-paper); }
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}
/* Logo + tagline sizes use clamp() so 4K screens get the big lux feel while
   sub-1500px laptops scale down to a sensible 17/11px. The header was looking
   cramped/oversized at 1366px before. */
.k-logo-mark{display:block;height:clamp(28px, 2.2vw, 38px);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:clamp(17px, 1.3vw, 22px);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:clamp(10px, .8vw, 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}

/* Nav: positioned ABSOLUTELY at viewport-centre of the header (not centred
   between logo + CTA which would shift visually as those change width).
   The header-inner is position:relative so this anchors to the header. */
.k-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);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:clamp(2px, .3vw, 8px)}
.k-nav a{
  position:relative;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  padding:11px clamp(12px, 1.2vw, 22px);
  /* Scales from 15px on cramped laptops to 19px on a 4K monitor */
  font-family:var(--k-body);font-size:clamp(15px, 1.15vw, 19px);color:var(--k-ink-2);
  letter-spacing:.005em;
  transition:color .2s var(--k-ease);
}
.k-nav-caret{font-size:clamp(11px, .9vw, 14px)}
.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).
   With only one item, the dropdown is sized to fit that item exactly — no
   trailing empty white box to the right of the label. */
.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);background:#fff;border:1px solid var(--k-rule-strong);padding: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);white-space:nowrap}
.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;margin:0}
.k-nav-sub a{display:block;padding:12px 22px;font-size:15px;font-family:var(--k-body);color:var(--k-ink-2);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:14px 24px;border-radius:999px;font-family:var(--k-body);font-size:15.5px;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);
}
/* The header "Get in touch" pill is a bit larger again so it commands the right edge */
/* Header CTA pill — scales with viewport so smaller laptops don't get an
   oversized pill that crowds the nav. */
.k-cta-desktop{padding:clamp(10px, .8vw, 15px) clamp(16px, 1.6vw, 28px);font-size:clamp(13px, 1vw, 16px)}
.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 =======================
   padding-top reserves a band BELOW the fixed header so the eyebrow line
   doesn't kiss the header bar. Scaled with viewport so smaller laptops get
   a tighter top band — otherwise the title 'Choice.' clips off the bottom. */
.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-top:calc(var(--k-header-h) + clamp(20px, 2.5vw, 56px));
  padding-bottom:clamp(32px, 4vw, 72px);
}
/* Hero media — dark gradient bg shows immediately so there's no white flash
   if the image hasn't decoded yet. Image visible by default (.78 opacity)
   so we don't depend on JS to reveal it; if a fade is wanted, krulis.js
   adds a class. */
.k-hero-media{position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,#1a1614 0%,#2a2522 60%,#3a3330 100%)}
.k-hero-media img,.k-hero-media video{width:100%;height:100%;object-fit:cover;opacity:.78;image-rendering:auto;transform:translateZ(0)}
.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(48px, 8.5vw, 140px);line-height:.92;letter-spacing:-.04em;
  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 */
/* Hero reveal — was 0.9s with up to 0.72s of staggered delay (~1.6s total),
   which fought the cross-document view-transition and made the homepage feel
   like it was "glitching in". Tightened to 0.35s transitions with much
   shorter cascade so the hero feels resolved at roughly the same moment the
   page-transition completes. */
.k-hreveal{opacity:0;transform:translateY(10px);transition:opacity .35s cubic-bezier(.16,.84,.44,1), transform .35s cubic-bezier(.16,.84,.44,1)}
.k-hreveal.is-in{opacity:1;transform:none}
.k-hreveal--1.is-in{transition-delay:.02s}
.k-hreveal--2.is-in{transition-delay:.07s}
.k-hreveal--3.is-in{transition-delay:.18s}
.k-hreveal--4.is-in{transition-delay:.26s}
.k-hreveal--5.is-in{transition-delay:.34s}

.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;padding-top:calc(var(--k-header-h) + 32px)}
  .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}
}
/* Small phones: even more headroom — the "Krulis Commercial · Since 1974"
   eyebrow was crammed against the sticky header. */
@media(max-width:520px){
  .k-hero{padding-top:calc(var(--k-header-h) + 48px)}
  .k-hero-inner{padding-top:48px}
}
/* Page-intro sections (about / commercial / residential / contact / etc.):
   ensure the eyebrow has clear separation from the sticky header, especially
   when the page just loaded and content is at the top of the viewport. */
.k-pageintro{padding-top:max(72px, calc(var(--k-header-h) + 24px))}
@media(max-width:900px){
  .k-pageintro{padding-top:max(40px, calc(var(--k-header-h) + 18px))}
}

/* ======================= 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)}
/* Status badge on property cards — anchored top-left of the photo, not
   centred (the prior centring on small screens looked off-balance). */
.k-prop-media{position:relative;overflow:hidden}
.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 ======================= */
/* Footer — `margin-top` was causing a paper-coloured gap on pages that end
   with a paper-2 section (e.g. about). Removed; the hero/section bottom
   padding already provides enough breathing room above the dark footer. */
.k-footer{background:var(--k-ink);color:#fff;padding:80px 0 0;margin-top:0}
.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:0}}
@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 ======================= */
/* Mobile nav drawer — sits FIXED over everything, but slides + fades in/out
   instead of snapping from display:none → flex. Pointer-events are off when
   closed so it never intercepts clicks behind it. */
.k-mnav{position:fixed;inset:0;z-index:120;background:var(--k-paper);padding:20px 24px 32px;display:flex;flex-direction:column;gap:28px;overflow-y:auto;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-12px);
  transition:opacity .26s var(--k-ease),transform .26s var(--k-ease),visibility 0s linear .26s}
.k-mnav.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .26s var(--k-ease),transform .26s var(--k-ease),visibility 0s linear 0s}
/* When the drawer is open lock body scroll so the page underneath doesn't drift. */
body.k-mnav-locked{overflow:hidden;touch-action:none}
.k-mnav-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--k-rule-strong);min-height:42px;gap:12px}
/* Mnav logo — sized + spaced to roughly match the header logo's position so
   opening the drawer doesn't feel like the Krulis mark is jumping. */
.k-mnav-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;flex:1}
.k-mnav-logo-mark{display:block;height:clamp(28px,7vw,34px);width:auto;flex-shrink:0;object-fit:contain;object-position:left center}
.k-mnav-logo-text{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1}
.k-mnav-logo-word{font-family:var(--k-display);font-weight:500;font-size:clamp(15px,4vw,18px);letter-spacing:-.01em;color:var(--k-ink);white-space:nowrap}
.k-mnav-logo-tag{font-family:var(--k-body);font-size:clamp(9px,2.4vw,11px);letter-spacing:.16em;text-transform:uppercase;color:var(--k-ink-3);white-space:nowrap}
.k-mnav-close{background:transparent;border:0;font-size:34px;line-height:1;color:var(--k-ink-3);cursor:pointer;padding:4px 8px;flex-shrink:0}
.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}
}