/* ==========================================================================
   Kasia Barrie Design — design system
   Editorial serif at light weight, warm cream ground, image-led.
   Palette and type carried over from the approved homepage concept.
   ========================================================================== */

:root{
  --cream:#F1E9DE; --offwhite:#FEFBEE; --ink:#31190F; --taupe:#DED4C9;
  --olive:#5B4E39; --muted:#6B5443; --gold:#8F6724;
  --line:rgba(49,25,15,.16); --line-soft:rgba(49,25,15,.09);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --kbd-pad:clamp(1.25rem,5vw,6rem);
  --maxw:1280px;
  --d-hero:clamp(2.9rem,8.4vw,8.2rem);
  --d1:clamp(2rem,5vw,4.4rem);
  --d2:clamp(1.4rem,2.7vw,2.2rem);
  --d3:clamp(1.15rem,1.9vw,1.5rem);
  --body:clamp(1rem,.97rem + .2vw,1.12rem);
  --label:.72rem;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--cream); color:var(--ink);
  font-size:var(--body); line-height:1.65; overflow-x:hidden; margin:0;
}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.06;letter-spacing:-.015em;text-wrap:balance;margin:0}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
::selection{background:var(--olive);color:var(--offwhite)}

/* Block-theme plumbing ----------------------------------------------------
   The root layout puts a blockGap between the header part and <main>, which
   opens a strip of background above every hero. Sections own their own
   vertical rhythm here, so the root gap is not wanted. */
.wp-site-blocks > *{margin-block-start:0;margin-block-end:0}
.wp-site-blocks > main{margin-block-start:0}
.wp-block-template-part{margin-block:0}

/* Layout helpers ---------------------------------------------------------- */
.kbd-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--kbd-pad)}
.kbd-measure{max-width:62ch}
.kbd-section{padding-block:clamp(4rem,9vw,8rem)}
.kbd-section--tight{padding-block:clamp(2.5rem,6vw,5rem)}
.kbd-bleed{width:100vw;margin-left:calc(50% - 50vw)}

/* Type devices ------------------------------------------------------------ */
.kbd-label{font-family:var(--sans);font-size:var(--label);font-weight:700;letter-spacing:.24em;text-transform:uppercase;line-height:1.4}
/* Same masthead rule as .kbd-marker, so the two label devices match. It uses
   currentColor, which is what lets it work on the dark CTA band as well as on
   cream. */
.kbd-eyebrow{display:inline-flex;flex-direction:column;align-items:stretch;color:var(--olive)}
.kbd-eyebrow .l{height:1px;background:currentColor;opacity:.3;margin-bottom:.7rem}
.kbd-i{font-style:italic}
.kbd-lead{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.5;color:#4a3323}

/* Numbered section marker. Repeats well — the more it recurs, the more the
   site reads as one continuous document. */
/* Section numbering was removed on 25 September: decorative, and it collided
   whenever a section moved. The dimension mark beside the label went with it on
   the same day, because a tick and a tapering hairline floating to the left of
   a small label read as an artefact rather than a decision.
   It is a masthead rule now: one hairline directly above the label, sized to
   the label itself, so the two read as a single typographic unit. inline-flex
   is what makes the rule take the label's width rather than the column's. */
.kbd-marker{display:inline-flex;flex-direction:column;align-items:stretch;
  margin-bottom:clamp(1.8rem,3.5vw,3rem)}
.kbd-marker .num{display:none}
.kbd-marker .rule{height:1px;background:var(--line);margin-bottom:.7rem;
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.kbd-marker.in .rule{transform:scaleX(1)}
.kbd-marker .name{font-size:var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* Buttons ----------------------------------------------------------------- */
.kbd-btn{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-weight:600;
  font-size:.95rem;letter-spacing:.02em;padding:.85rem 1.5rem;border-radius:2px;
  border:1.5px solid var(--ink);transition:background .22s,color .22s,border-color .22s;
  cursor:pointer;min-height:46px;text-align:center;justify-content:center;
}
.kbd-btn--fill{background:var(--ink);color:var(--offwhite)}
.kbd-btn--fill:hover{background:#20100a;color:var(--offwhite)}
.kbd-btn--line{background:transparent;color:var(--ink)}
.kbd-btn--line:hover{background:var(--ink);color:var(--offwhite)}
.kbd-btn--ghost{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.kbd-btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.kbd-btn--light{background:var(--offwhite);color:var(--ink);border-color:var(--offwhite)}
.kbd-btn--light:hover{background:#fff;color:var(--ink)}

/* Padded to a reliable tap target. These were 24px tall, well under the 44px
   guideline, and the negative margin keeps the text where it was optically. */
.kbd-ln{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;padding-block:.6rem;margin-block:-.6rem}
.kbd-ln .arw{transition:transform .4s var(--ease)}
.kbd-ln:hover .arw{transform:translateX(5px)}

/* Motion ------------------------------------------------------------------ */
/* Scoped to .js so that if the script never runs, nothing is left invisible.
   The class is set by an inline snippet in <head>. */
.js .kbd-reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .kbd-reveal.in{opacity:1;transform:none}
.js .kbd-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.js .kbd-clip.in{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kbd-reveal,.kbd-clip,.kbd-marker .rule{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
    }

/* Craft layer: grain + cursor --------------------------------------------- */
.kbd-grain{
  position:fixed;inset:0;z-index:58;pointer-events:none;opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* White ring with a dark outer shadow so the cursor stays visible on both the
   cream ground and full-bleed photography. */
.kbd-cursor{
  position:fixed;top:0;left:0;width:24px;height:24px;border:1.5px solid rgba(255,255,255,.95);
  border-radius:50%;box-shadow:0 0 0 1.5px rgba(0,0,0,.3);z-index:80;pointer-events:none;
  transform:translate(-50%,-50%);transition:width .25s,height .25s;will-change:transform;
}
.kbd-cursor::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.5);border-radius:50%;transform:translate(-50%,-50%)}
.kbd-cursor.big{width:52px;height:52px}
@media(hover:none),(prefers-reduced-motion:reduce){.kbd-cursor{display:none}}

/* Header ------------------------------------------------------------------ */
.kbd-bar{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s,border-color .3s}
/* A transparent bar is white type with only the photograph behind it, and some
   heroes are bright at the top (the process page opens on a pale floor plan).
   Its own short gradient keeps the nav legible without making the bar solid. */
.kbd-bar:not(.always-solid)::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,10,5,.62) 0%,rgba(20,10,5,.30) 55%,rgba(20,10,5,0) 100%);
  pointer-events:none;z-index:-1}
.kbd-bar.s::before{opacity:0;transition:opacity .3s}
.kbd-bar.s{background:color-mix(in srgb,var(--cream) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* Pages without a dark hero start in the solid state so the nav is legible. */
.kbd-bar.always-solid{background:color-mix(in srgb,var(--cream) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.kbd-bar-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.85rem}
.kbd-brand{display:inline-block;font-family:var(--serif);font-size:1.6rem;letter-spacing:.02em;color:#fff;transition:color .3s;line-height:1.25}
.kbd-bar.s .kbd-brand,.kbd-bar.always-solid .kbd-brand{color:var(--ink)}
.kbd-brand b{display:block;font-weight:400}
.kbd-brand span{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;opacity:.8;margin-top:1px}
.kbd-nav{display:none;gap:1.9rem}
.kbd-nav a{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:#fff;transition:color .3s;white-space:nowrap}
.kbd-bar.s .kbd-nav a,.kbd-bar.always-solid .kbd-nav a{color:var(--ink)}
.kbd-nav a:hover,.kbd-nav a[aria-current]{color:var(--olive)}
.kbd-bar-cta{display:flex;align-items:center;gap:.9rem}
.kbd-callchip{display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-weight:600;font-size:.9rem;
  transition:color .3s;white-space:nowrap;padding:.65rem .25rem;margin:-.65rem -.25rem}
.kbd-bar.s .kbd-callchip,.kbd-bar.always-solid .kbd-callchip{color:var(--ink)}
.kbd-callchip svg{width:16px;height:16px;flex:none}
.kbd-bar .kbd-btn--book{display:none;padding:.6rem 1.1rem;min-height:0;border-color:#fff;color:#fff}
.kbd-bar.s .kbd-btn--book,.kbd-bar.always-solid .kbd-btn--book{border-color:var(--ink);color:var(--ink)}
.kbd-bar .kbd-btn--book:hover{background:#fff;color:var(--ink)}
.kbd-bar.s .kbd-btn--book:hover,.kbd-bar.always-solid .kbd-btn--book:hover{background:var(--ink);color:#fff}
@media(min-width:64rem){.kbd-nav{display:flex}.kbd-bar .kbd-btn--book{display:inline-flex}}

/* Services dropdown ------------------------------------------------------- */
.kbd-has-sub{position:relative;display:flex;align-items:center}
.kbd-has-sub>a{display:inline-flex;align-items:center;gap:.4rem}
.kbd-caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.7;transition:transform .25s}
.kbd-has-sub:hover .kbd-caret,.kbd-has-sub.open .kbd-caret{transform:rotate(180deg)}
.kbd-sub{
  position:absolute;top:100%;left:50%;margin-left:-8rem;transform:translateY(6px);min-width:16rem;
  background:var(--offwhite);border:1px solid var(--line);border-radius:2px;
  box-shadow:0 18px 48px rgba(49,25,15,.18);padding:.5rem 0;
  display:flex;flex-direction:column;z-index:70;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,transform .22s,visibility .22s;
}
/* Nine explained services in one column is a 500px drop. Two columns keeps it
   to about half that and reads as a considered menu rather than a list. */
@media(min-width:64rem){
  .kbd-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.15rem .4rem;padding:.9rem .7rem;width:min(38rem,calc(100vw - 3rem));min-width:0;
    left:0;margin-left:-2rem}
  .kbd-sub-all{grid-column:1 / -1;margin-top:.35rem}
}
/* A gap between the trigger and the panel would drop the hover, so bridge it. */
.kbd-has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.kbd-has-sub:hover .kbd-sub,.kbd-has-sub:focus-within .kbd-sub,.kbd-has-sub.open .kbd-sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(10px);
}
/* Service marks. Sized to the cap height of the label beside them and held at
   a lower contrast, so they read as a guide rather than competing with the
   type. */
.kbd-ico{width:19px;height:19px;flex:none;opacity:.55;transition:opacity .25s var(--ease)}
.kbd-sub a:hover .kbd-ico,.kbd-drawer a.sub:hover .kbd-ico{opacity:1}
.kbd-sub a,.kbd-drawer a.sub{display:flex;align-items:flex-start;gap:.75rem}
.kbd-drawer a.sub .kbd-ico{width:17px;height:17px}
/* Each service carries the line it already has on the services index, so the
   menu explains itself instead of listing nine names. */
.kbd-sub a .txt,.kbd-drawer a.sub .txt{display:block;min-width:0}
.kbd-sub a .n,.kbd-drawer a.sub .n{display:block}
.kbd-sub a .d,.kbd-drawer a.sub .d{display:block;margin-top:.2rem;font-size:.78rem;
  letter-spacing:0;text-transform:none;font-weight:400;line-height:1.4;color:var(--muted)}
.kbd-ico{margin-top:.15rem}

.kbd-sub a{
  display:block;padding:.6rem 1.2rem;font-size:.85rem;letter-spacing:.02em;text-transform:none;
  font-weight:500;color:var(--ink);transition:background .18s,color .18s;
  white-space:normal;
}
.kbd-sub a:hover{background:var(--cream);color:var(--olive)}
.kbd-sub-all{
  margin-top:.4rem;border-top:1px solid var(--line-soft);
  font-size:.72rem!important;letter-spacing:.16em!important;text-transform:uppercase!important;
  font-weight:700!important;color:var(--muted)!important;
}
.kbd-sub-all:hover{color:var(--ink)!important}
@media(prefers-reduced-motion:reduce){.kbd-sub{transition:none}}

/* Mobile nav */
.kbd-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:0}
.kbd-burger span{display:block;height:1.5px;width:22px;background:#fff;transition:transform .3s,opacity .3s,background .3s}
.kbd-bar.s .kbd-burger span,.kbd-bar.always-solid .kbd-burger span{background:var(--ink)}
.kbd-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.kbd-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.kbd-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:64rem){.kbd-burger{display:none}}
.kbd-drawer{
  position:fixed;inset:0;z-index:59;background:var(--cream);padding:6rem var(--kbd-pad) 3rem;
  display:flex;flex-direction:column;gap:.2rem;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.kbd-drawer.open{opacity:1;visibility:visible}
.kbd-drawer a{font-family:var(--serif);font-size:clamp(1.6rem,7vw,2.4rem);font-weight:300;padding-block:.35rem;border-bottom:1px solid var(--line-soft)}
.kbd-drawer .sub{font-family:var(--sans);font-size:.95rem;font-weight:400;padding-left:1rem;border-bottom:1px solid var(--line-soft);color:var(--muted)}
.kbd-drawer-foot{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:.7rem}

/* Hero — one per page. The reveal is the page's single "moment". ----------- */
.kbd-hero{position:relative;overflow:hidden;background:var(--ink)}
.kbd-hero--full{height:clamp(600px,100svh,1020px)}
.kbd-hero--page{height:clamp(420px,62svh,680px)}
.kbd-hero--short{height:clamp(320px,46svh,480px)}

/* Split hero: type on one side, a portrait film on the other ---------------
   Everything Kasia films is vertical. Cropping 9:16 into a wide band throws
   away two thirds of the frame, so the film keeps its own shape and the hero
   becomes an editorial spread rather than a photograph with text on top.
   The ground is cream rather than a dimmed image, so the film is the only
   picture on the screen and the type is read at full contrast. */
.kbd-hero--split{height:auto;background:var(--cream);color:var(--ink);overflow:visible;
  padding:calc(var(--kbd-bar-h,67px) + clamp(2.5rem,6vw,5rem)) 0 clamp(3rem,7vw,6rem)}
.kbd-split{display:grid;gap:clamp(1.6rem,4vw,4rem);align-items:center}
/* On a phone the film sits between the headline and the rest of the copy, so
   the kitchen is on the first screen rather than four paragraphs down. */
.kbd-split-head{order:1}
.kbd-split-media{order:2}
.kbd-split-rest{order:3}
@media(min-width:60rem){
  .kbd-split{grid-template-columns:1.08fr .92fr;grid-template-rows:auto auto}
  .kbd-split-head{grid-column:1;grid-row:1;align-self:end}
  .kbd-split-rest{grid-column:1;grid-row:2;align-self:start;margin-top:0}
  .kbd-split-media{grid-column:2;grid-row:1 / span 2}
}
.kbd-hero--split .kbd-label{color:var(--muted)}
.kbd-hero--split h1{margin:.6rem 0 0;font-size:var(--d-hero);line-height:.97;letter-spacing:-.015em}
.kbd-hero--split .kbd-lead{margin-top:0;max-width:34ch}
@media(min-width:60rem){.kbd-hero--split .kbd-lead{margin-top:clamp(1.1rem,2vw,1.6rem)}}
.kbd-hero--split .kbd-hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.5rem,3vw,2.2rem)}

/* The film. Held to a width the 720px source can still fill on a 2x screen,
   so it never looks soft. */
.kbd-split-media{justify-self:center;width:100%;max-width:23rem}
@media(max-width:59.99rem){.kbd-split-media{max-width:19rem}}
.kbd-vframe{position:relative;aspect-ratio:720/1292;overflow:hidden;background:var(--ink);
  box-shadow:0 34px 80px rgba(49,25,15,.26),0 4px 16px rgba(49,25,15,.12)}
.kbd-vframe video,.kbd-vframe img{width:100%;height:100%;object-fit:cover;display:block}
.kbd-vcap{margin:.9rem 0 0;text-align:center;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* Shown only when the browser refused to autoplay, so nobody is left looking
   at a still they cannot start. */
.kbd-vplay{position:absolute;inset:auto 0 0 0;margin:0 auto 1.1rem;width:52px;height:52px;
  border:0;border-radius:50%;background:rgba(254,251,238,.92);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.kbd-vplay[hidden]{display:none}
.kbd-vplay svg{width:24px;height:24px;margin-left:2px}

.kbd-hero-trust--dark{color:var(--muted)}
.kbd-hero-trust--dark span{color:var(--muted)}

.kbd-hero-bg{position:absolute;inset:0}
.kbd-hero-bg img,.kbd-hero-bg video{width:100%;height:100%;object-fit:cover}
/* The scrim has to work over a bright image as well as a dark one. The process
   page opens on a pale 3D floor plan and the white type was unreadable on it,
   because the old gradient thinned to 12% exactly where the headline sits. It
   is weighted to the lower half now, which is where .kbd-hero-in is anchored. */
.kbd-hero::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(20,10,5,.52) 0%,rgba(20,10,5,.22) 20%,rgba(20,10,5,.40) 48%,rgba(20,10,5,.72) 76%,rgba(20,10,5,.88) 100%)}
.kbd-hero-in{position:absolute;left:0;right:0;bottom:clamp(1.5rem,4vw,3.4rem);z-index:3;color:#fff;
  text-shadow:0 1px 26px rgba(20,10,5,.5),0 1px 3px rgba(20,10,5,.35)}
.kbd-hero-in h1{font-size:var(--d-hero);color:#fff;max-width:14ch;margin:1.2rem 0 0}
.kbd-hero--page .kbd-hero-in h1,.kbd-hero--short .kbd-hero-in h1{font-size:var(--d1);max-width:20ch}
.kbd-hero-lead{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-top:1.6rem}
.kbd-hero-lead p{max-width:46ch;color:rgba(255,255,255,.9)}
.kbd-hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.kbd-hero-trust{display:flex;align-items:center;gap:.7rem;margin-top:1.6rem;color:rgba(255,255,255,.9);font-size:.85rem;flex-wrap:wrap}
/* The stars carry the rating, so they have to clear 3:1 wherever they sit.
   The old #E7C98B measured 1.09:1 on the taupe review cards and 2.6 on cream,
   which made the site's most repeated trust signal almost invisible.
   --gold was #B98B3E, which still only managed 2.56 on cream and 2.10 on
   taupe. #8F6724 is the lightest gold that clears 3:1 on cream, taupe and the
   dark bands at once: anything lighter fails on taupe, anything darker starts
   failing on ink. Measured, not estimated. */
.kbd-stars{color:var(--gold);letter-spacing:1px}
.kbd-scrollcue{position:absolute;right:var(--kbd-pad);bottom:clamp(1.5rem,4vw,3.4rem);z-index:3;color:rgba(255,255,255,.85);display:none;align-items:center;gap:.6rem;font-size:var(--label);letter-spacing:.2em;text-transform:uppercase}
@media(min-width:64rem){.kbd-scrollcue{display:flex}}
/* Hero slideshow. CSS rather than a <video>, because Safari's autoplay policy
   (and Low Power Mode) can refuse to start a video and leave a still frame,
   whereas a CSS transition always runs. It is also sharper: these are full
   2048px stills rather than compressed video frames. */
.kbd-slides>*{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease);overflow:hidden}
.kbd-slides>*.on{opacity:1}
.kbd-slides>* img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);will-change:transform}
/* The slow push only runs on the slide that is showing, so each one starts
   from the top of its move rather than partway through. */
.kbd-slides>*.on img{animation:kbd-push 8s linear forwards}
.kbd-slides>*:nth-child(even).on img{animation-name:kbd-pull}
@keyframes kbd-push{from{transform:scale(1.02)}to{transform:scale(1.11)}}
@keyframes kbd-pull{from{transform:scale(1.11)}to{transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){
  .kbd-slides>*{opacity:0;transition:none}
  .kbd-slides>*:first-child{opacity:1}
  .kbd-slides>* img,.kbd-slides>*.on img{animation:none;transform:none}
}

/* Breadcrumb -------------------------------------------------------------- */
.kbd-crumb{font-size:var(--label);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);font-weight:600}
.kbd-crumb a:hover{color:#fff}
.kbd-crumb .sep{opacity:.5;margin-inline:.45rem}

/* Reviews ----------------------------------------------------------------- */
.kbd-head{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.2rem)}
.kbd-head h2{font-size:var(--d1);max-width:18ch}
.kbd-revgrid{display:grid;gap:clamp(1.4rem,2.5vw,2.4rem)}
@media(min-width:52rem){.kbd-revgrid{grid-template-columns:repeat(3,1fr)}}
.kbd-rev{border-top:1px solid var(--line);padding-top:1.4rem}
.kbd-rev .st{color:var(--gold);letter-spacing:2px;font-size:.9rem}
.kbd-rev blockquote{font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.32;margin:.9rem 0 1.1rem;font-weight:300}
.kbd-rev .by{font-size:var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kbd-rev .by b{color:var(--ink);font-weight:700}

/* A single long testimonial, set as a page-width editorial quote. */
.kbd-longquote{background:var(--offwhite);padding-block:clamp(3.5rem,8vw,7rem)}
.kbd-longquote .inner{display:grid;gap:clamp(2rem,5vw,4.5rem)}
@media(min-width:60rem){.kbd-longquote .inner{grid-template-columns:1fr 1fr;align-items:center}}
.kbd-longquote blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.42;margin:0}
.kbd-longquote blockquote p+p{margin-top:1rem}
.kbd-longquote .frame{aspect-ratio:4/5;overflow:hidden;background:var(--taupe)}
.kbd-longquote .frame img{width:100%;height:100%;object-fit:cover}

/* Full-bleed image band --------------------------------------------------- */
.kbd-band{position:relative;overflow:hidden;background:var(--ink);height:clamp(420px,74vh,760px)}
.kbd-band img,.kbd-band video{width:100%;height:100%;object-fit:cover}
.kbd-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,10,5,.62),rgba(20,10,5,.05) 60%)}
.kbd-band .cap{position:absolute;left:var(--kbd-pad);bottom:clamp(1.6rem,4vw,3rem);z-index:2;color:#fff;max-width:36ch}
.kbd-band .cap .kbd-label{color:rgba(255,255,255,.75)}
.kbd-band .cap h2{color:#fff;font-size:var(--d2);margin:.7rem 0 .9rem}
.kbd-playtag{display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;cursor:pointer;padding:0;font-family:var(--sans);font-weight:600}
.kbd-playtag .dot{width:34px;height:34px;border:1px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center;flex:none}

/* Project grid ------------------------------------------------------------ */
.kbd-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.kbd-filters button,.kbd-filters a{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:.55rem 1.05rem;border:1px solid var(--line);border-radius:40px;background:transparent;
  color:var(--muted);cursor:pointer;transition:.2s;
}
.kbd-filters button.active,.kbd-filters button:hover,.kbd-filters a.active,.kbd-filters a:hover{background:var(--ink);color:var(--offwhite);border-color:var(--ink)}
.kbd-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,1.6rem)}
.kbd-card{grid-column:span 12;display:block}
.kbd-card[hidden]{display:none}
@media(min-width:48rem){
  .kbd-card{grid-column:span 6}
  .kbd-card.big{grid-column:span 8}
  .kbd-card.tall{grid-column:span 4}
  .kbd-card.third{grid-column:span 4}
}
.kbd-card .frame{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--taupe)}
.kbd-card.tall .frame{aspect-ratio:3/4}
.kbd-card .frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.kbd-card:hover .frame img{transform:scale(1.04)}
.kbd-card .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:.9rem;gap:1rem}
.kbd-card .meta .t{font-family:var(--serif);font-size:1.3rem;font-weight:300;line-height:1.15}
.kbd-card .meta .loc{font-size:var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.kbd-tag{position:absolute;top:.9rem;left:.9rem;z-index:2;background:color-mix(in srgb,var(--offwhite) 90%,transparent);color:var(--ink);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:.35rem .7rem;border-radius:30px}

/* Project detail ---------------------------------------------------------- */
.kbd-facts{display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:48rem){.kbd-facts{grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,2rem)}}
.kbd-fact{padding-block:1.2rem;border-bottom:1px solid var(--line)}
@media(min-width:48rem){.kbd-fact{border-bottom:0}}
.kbd-fact dt{font-size:var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.4rem}
.kbd-fact dd{margin:0;font-family:var(--serif);font-size:1.15rem;font-weight:300}

/* The brief / the decisions / the outcome — a project reads as an argument,
   not a gallery. Numbered, asymmetric, text first then the evidence. */
.kbd-chapter{display:grid;gap:clamp(1.5rem,4vw,3.5rem);padding-block:clamp(2.5rem,6vw,5rem);border-top:1px solid var(--line)}
@media(min-width:60rem){.kbd-chapter{grid-template-columns:.85fr 1.15fr;align-items:start}}
.kbd-chapter h2{font-size:var(--d2)}
.kbd-chapter .body{max-width:60ch}
.kbd-chapter .body p+p{margin-top:1rem}

/* Before / after — a fixed pair, both states visible at once.
   Deliberately not a drag slider: one state is always hidden behind an
   interaction, and the handle breaks the moment the block is re-edited. */
.kbd-ba{display:grid;gap:clamp(.8rem,2vw,1.4rem)}
@media(min-width:40rem){.kbd-ba{grid-template-columns:1fr 1fr}}
.kbd-ba figure{margin:0}
.kbd-ba .frame{aspect-ratio:4/3;overflow:hidden;background:var(--taupe)}
.kbd-ba .frame img{width:100%;height:100%;object-fit:cover}
.kbd-ba figcaption{margin-top:.7rem;font-size:var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kbd-ba figcaption .note{display:block;margin-top:.35rem;letter-spacing:0;text-transform:none;font-weight:400;font-size:.88rem;color:#4a3323;line-height:1.5}

/* Gallery ----------------------------------------------------------------- */
.kbd-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.4vw,1.2rem)}
.kbd-gallery figure{margin:0;grid-column:span 12}
@media(min-width:48rem){
  .kbd-gallery figure{grid-column:span 6}
  .kbd-gallery figure.w{grid-column:span 12}
  .kbd-gallery figure.t{grid-column:span 4}
}
.kbd-gallery .frame{overflow:hidden;background:var(--taupe);aspect-ratio:3/2}
.kbd-gallery figure.t .frame{aspect-ratio:3/4}
.kbd-gallery .frame img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.kbd-gallery figure:hover .frame img{transform:scale(1.03)}

/* About ------------------------------------------------------------------- */
.kbd-about{background:var(--offwhite)}
.kbd-about .grid2{display:grid;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(min-width:60rem){.kbd-about .grid2{grid-template-columns:.8fr 1.2fr}}
.kbd-about .frame{aspect-ratio:4/5;overflow:hidden;background:var(--taupe)}
.kbd-about .frame img{width:100%;height:100%;object-fit:cover}
.kbd-about h2{font-size:var(--d1);margin:.8rem 0 1.3rem;max-width:16ch}
.kbd-about blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.28;color:var(--olive);margin:0 0 1.3rem}
.kbd-about p{color:#4a3323;max-width:54ch}
.kbd-about p+p{margin-top:.9rem}
.kbd-sig{font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--ink);margin-top:1.4rem}
.kbd-yearchip{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.3rem;font-size:var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* About intro: the portrait at its own proportions rather than cropped into
   a letterbox hero. */
.kbd-about-intro{display:grid;gap:clamp(1.8rem,4vw,4rem);align-items:center}
@media(min-width:56rem){.kbd-about-intro{grid-template-columns:.75fr 1.25fr}}
.kbd-about-intro .frame{aspect-ratio:3/4;overflow:hidden;background:var(--taupe)}
.kbd-about-intro .frame img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.kbd-about-intro h2{font-size:var(--d1);margin-bottom:.9rem}
.kbd-about-intro p{color:#4a3323;max-width:52ch}
.kbd-about-intro p+p{margin-top:.8rem}

/* Process ----------------------------------------------------------------- */
.kbd-steps{display:grid;gap:0}
.kbd-step{display:grid;gap:.5rem;padding:clamp(1.4rem,3vw,2.2rem) 0;border-top:1px solid var(--line)}
@media(min-width:48rem){.kbd-step{grid-template-columns:5rem 1fr 1.4fr;gap:2rem;align-items:baseline}}
.kbd-step:last-child{border-bottom:1px solid var(--line)}
.kbd-step .n{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--olive)}
.kbd-step h3{font-family:var(--serif);font-weight:300;font-size:var(--d2)}
.kbd-step p{color:#4a3323;margin:0}
.kbd-foot-note{margin-top:1.8rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,1.8vw,1.5rem);color:var(--ink)}

/* Process, with a picture against each step. Alternating sides so the page
   has a rhythm rather than five identical rows. */
.kbd-steps-rich{display:grid;gap:clamp(2.5rem,6vw,5.5rem)}
.kbd-stepr{display:grid;gap:clamp(1.4rem,3.5vw,3rem);align-items:center}
@media(min-width:56rem){
  .kbd-stepr{grid-template-columns:1fr 1.15fr}
  .kbd-stepr.flip .txt{order:2}
  .kbd-stepr.flip .pic{order:1}
}
/* A step without a photograph runs the full width rather than leaving the
   second column empty. Installation and project management have no honest
   image in the library yet. */
@media(min-width:60rem){.kbd-stepr .txt:only-child{grid-column:1 / -1;max-width:62ch}}
.kbd-stepr .txt h2,.kbd-stepr .txt h3{font-size:var(--d2);margin-bottom:.8rem}
.kbd-stepr .txt p{color:#4a3323;max-width:46ch;margin:0}
.kbd-stepr .pic .frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--taupe)}
.kbd-stepr .pic .frame img,.kbd-stepr .pic .frame video{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.kbd-stepr:hover .pic .frame img{transform:scale(1.03)}
.kbd-stepr .pic .play{
  position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,10,5,.28);
  border:0;cursor:pointer;transition:background .3s;
}
.kbd-stepr .pic .play:hover{background:rgba(20,10,5,.12)}
.kbd-stepr .pic .play span{
  width:60px;height:60px;border:1px solid rgba(255,255,255,.85);border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:1rem;
}

/* Service index ----------------------------------------------------------- */
.kbd-svc-grid{display:grid;gap:clamp(1.2rem,2.4vw,2rem)}
@media(min-width:44rem){.kbd-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:68rem){.kbd-svc-grid{grid-template-columns:repeat(3,1fr)}}
.kbd-svc{display:block;background:var(--offwhite);border:1px solid var(--line-soft);transition:border-color .25s,transform .4s var(--ease)}
.kbd-svc:hover{border-color:var(--line);transform:translateY(-3px)}
.kbd-svc .frame{aspect-ratio:4/3;overflow:hidden;background:var(--taupe)}
.kbd-svc .frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.kbd-svc:hover .frame img{transform:scale(1.04)}
.kbd-svc .in{padding:clamp(1.1rem,2vw,1.6rem)}
.kbd-svc h3{font-size:var(--d3);margin-bottom:.5rem}
.kbd-svc p{font-size:.95rem;color:#4a3323;margin:0 0 .9rem}

/* Dark CTA ---------------------------------------------------------------- */
.kbd-cta{background:var(--ink);color:var(--offwhite);padding-block:clamp(4rem,10vw,9rem);text-align:center}
.kbd-cta .kbd-eyebrow{color:#C9A567}
.kbd-cta h2{color:var(--offwhite);font-size:clamp(2.2rem,5.5vw,5rem);margin:1rem auto 1.2rem;max-width:16ch}
.kbd-cta p{max-width:46ch;margin:0 auto 2rem;color:rgba(254,251,238,.78)}
.kbd-cta-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
/* The mid-page version. Cream, slim, one line, rules above and below so it
   reads as a pause in the page rather than the end of it. */
.kbd-cta--quiet{background:var(--cream);color:var(--ink);text-align:center;
  padding-block:clamp(2.4rem,5vw,3.6rem)}
.kbd-cta--quiet .kbd-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(2rem,4vw,3rem)}
/* .kbd-cta p above sets max-width:46ch with margin:0 auto. Overriding margin to
   0 here kept the width limit and lost the centring, which pushed the heading
   61px left of everything else in the band. */
.kbd-cta--quiet .h{font-family:var(--serif);font-weight:300;font-size:var(--d2);
  line-height:1.15;margin:0 auto;max-width:24ch;color:var(--ink)}
.kbd-cta--quiet .s{max-width:48ch;margin:.85rem auto 0;color:var(--muted);font-size:.95rem}
.kbd-cta--quiet .kbd-cta-actions{margin-top:1.6rem}

/* Instagram --------------------------------------------------------------- */
.kbd-ig{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(min-width:52rem){.kbd-ig{grid-template-columns:repeat(6,1fr)}}
.kbd-ig .t{aspect-ratio:1;overflow:hidden;background:var(--taupe);position:relative}
.kbd-ig img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.kbd-ig .t:hover img{transform:scale(1.06)}

/* Google review bar (sitewide, above the footer) --------------------------- */
.kbd-gbar{background:var(--taupe);padding-block:clamp(3rem,6vw,5rem);text-align:center}
.kbd-gbar .g{display:inline-flex;align-items:center;gap:.7rem;font-size:1rem;color:var(--ink);font-weight:600}
.kbd-gbar .score{font-family:var(--serif);font-size:2.4rem;line-height:1;font-weight:300}
.kbd-gbar p{max-width:50ch;margin:.8rem auto 1.2rem;color:#4a3323}

/* Footer ------------------------------------------------------------------ */
.kbd-footer{background:var(--ink);color:rgba(254,251,238,.82);padding-block:clamp(3.5rem,7vw,6rem)}
.kbd-footer h2,.kbd-footer h3{color:var(--offwhite)}
.kbd-footer a:hover{color:#fff}
.kbd-fgrid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:60rem){.kbd-fgrid{grid-template-columns:1.2fr 1.4fr 1fr}}
.kbd-footer .fh{font-size:var(--label);letter-spacing:.22em;text-transform:uppercase;color:rgba(254,251,238,.55);font-weight:700;margin-bottom:1rem;font-family:var(--sans)}
.kbd-footer .brandmark{font-family:var(--serif);font-size:1.5rem;font-weight:300;color:var(--offwhite);margin-bottom:.8rem}
.kbd-areas{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.88rem}
.kbd-flinks{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.1rem;font-size:.88rem}
.kbd-social{display:flex;gap:1rem;margin-top:1.2rem}
.kbd-social a{width:34px;height:34px;border:1px solid rgba(254,251,238,.3);border-radius:50%;display:grid;place-items:center;transition:.25s}
.kbd-social a:hover{background:var(--offwhite);color:var(--ink);border-color:var(--offwhite)}
.kbd-social svg{width:15px;height:15px}
.kbd-fbot{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid rgba(254,251,238,.16);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:rgba(254,251,238,.55)}
.kbd-fbot a:hover{color:#fff}

/* Forms ------------------------------------------------------------------- */
.kbd-field{display:grid;gap:.4rem;margin-bottom:1.1rem}
/* Form labels used --label, the decorative eyebrow token, which put them at
   11.5px: the smallest type on the most important page. They get their own
   size now, so raising them does not inflate every section eyebrow. */
.kbd-field label{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--muted);display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.kbd-field label .req{font-size:.6875rem;letter-spacing:.06em;text-transform:none;font-weight:400;
  font-style:italic;font-family:var(--serif);color:var(--olive)}
.kbd-field label .req--either{color:var(--muted)}
.kbd-formreq{margin:0 0 1.5rem;max-width:44ch;font-size:.9rem;line-height:1.55;color:var(--muted)}
.kbd-field input,.kbd-field select,.kbd-field textarea{
  font-family:var(--sans);font-size:1rem;padding:.8rem .9rem;border:1px solid var(--line);
  border-radius:2px;background:var(--offwhite);color:var(--ink);width:100%;
}
.kbd-field textarea{min-height:130px;resize:vertical}
.kbd-field input:focus,.kbd-field select:focus,.kbd-field textarea:focus{outline:2px solid var(--olive);outline-offset:1px;border-color:var(--olive)}
.kbd-field--2{display:grid;gap:1.1rem}
@media(min-width:40rem){.kbd-field--2{grid-template-columns:1fr 1fr}}
.kbd-consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:#4a3323;margin-bottom:1.2rem;line-height:1.5}
.kbd-consent input{width:auto;margin-top:.25rem;flex:none;accent-color:var(--olive)}
.kbd-consent a{text-decoration:underline}
.kbd-note{font-size:.85rem;color:var(--muted)}
.kbd-msg{padding:.9rem 1.1rem;border-radius:2px;margin-bottom:1.2rem;font-size:.95rem}
.kbd-msg--ok{background:rgba(91,78,57,.12);border:1px solid rgba(91,78,57,.35)}
.kbd-msg--err{background:rgba(150,40,20,.08);border:1px solid rgba(150,40,20,.3)}
.kbd-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Newsletter in the footer */
.kbd-news{display:flex;gap:.5rem;margin-bottom:.8rem}
.kbd-news input{flex:1;font-family:var(--sans);font-size:.95rem;padding:.7rem .9rem;border:1px solid rgba(254,251,238,.3);background:transparent;color:var(--offwhite);border-radius:2px;min-width:0}
.kbd-news input::placeholder{color:rgba(254,251,238,.45)}
.kbd-news button{background:var(--offwhite);color:var(--ink);border:0;padding:0 1.1rem;border-radius:2px;font-weight:700;cursor:pointer;font-family:var(--sans);font-size:.9rem}
.kbd-news button:hover{background:#fff}
.kbd-footer .kbd-consent{color:rgba(254,251,238,.6)}
.kbd-footer .kbd-consent a{color:rgba(254,251,238,.85)}

/* Floating actions -------------------------------------------------------- */
.kbd-float{position:fixed;right:1rem;bottom:1rem;z-index:55;display:flex;flex-direction:column;gap:.6rem;align-items:flex-end}
.kbd-wa{
  width:54px;height:54px;border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.25);transition:transform .25s;
}
.kbd-wa:hover{transform:scale(1.06)}
.kbd-wa svg{width:28px;height:28px;fill:#fff}
/* Mobile call bar — the phone number is one tap from anywhere. */
.kbd-callbar{position:fixed;left:0;right:0;bottom:0;z-index:56;display:grid;grid-template-columns:1fr 1fr;background:var(--ink);border-top:1px solid rgba(254,251,238,.15)}
.kbd-callbar a{padding:.9rem;text-align:center;color:var(--offwhite);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.45rem}
.kbd-callbar a+a{border-left:1px solid rgba(254,251,238,.15)}
.kbd-callbar svg{width:15px;height:15px;flex:none}
@media(min-width:64rem){.kbd-callbar{display:none}}
@media(max-width:63.99rem){
  body{padding-bottom:52px}
  .kbd-float{bottom:64px}
  /* Clear the fixed call bar so the hero's last line is never underneath it. */
  .kbd-hero-in{bottom:clamp(2.6rem,7vw,4rem)}
  .kbd-scrollcue{bottom:clamp(2.6rem,7vw,4rem)}
}

/* Cookie banner ----------------------------------------------------------- */
.kbd-cookie{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:70;background:var(--offwhite);
  border:1px solid var(--line);padding:1.1rem 1.3rem;box-shadow:0 10px 40px rgba(49,25,15,.18);
  display:none;gap:1rem;align-items:center;flex-wrap:wrap;max-width:44rem;margin-inline:auto;border-radius:2px;
}
.kbd-cookie.show{display:flex}
.kbd-cookie p{font-size:.88rem;margin:0;flex:1 1 20rem;color:#4a3323}
.kbd-cookie .acts{display:flex;gap:.5rem;flex-wrap:wrap}
.kbd-cookie button{font-size:.82rem;padding:.6rem 1.1rem;min-height:0}
@media(max-width:63.99rem){.kbd-cookie{bottom:64px}}

/* Article ----------------------------------------------------------------- */
.kbd-article{max-width:44rem;margin-inline:auto}
.kbd-article p{margin-block:1.1rem;color:#3d2517}
.kbd-article h2{font-size:var(--d2);margin-top:2.6rem;margin-bottom:.9rem}
.kbd-article h3{font-size:var(--d3);margin-top:2rem;margin-bottom:.7rem}
.kbd-article ul,.kbd-article ol{margin-block:1.1rem;padding-left:1.3rem}
.kbd-article li{margin-block:.45rem}
.kbd-article img{margin-block:2rem}
.kbd-article blockquote{border-left:2px solid var(--olive);padding-left:1.3rem;margin-block:2rem;font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.4;color:var(--olive)}
.kbd-article a{text-decoration:underline;text-underline-offset:3px}

/* The grid belongs on the post template list, not on the query wrapper around
   it. On the wrapper it had one child, so the twelve articles stacked in a
   single narrow column. Affects /articles/, the archives and search. */
.kbd-postgrid>.wp-block-post-template{display:grid;gap:clamp(1.4rem,3vw,2.4rem);
  list-style:none;margin:0;padding:0}
@media(min-width:44rem){.kbd-postgrid>.wp-block-post-template{grid-template-columns:repeat(2,1fr)}}
@media(min-width:68rem){.kbd-postgrid>.wp-block-post-template{grid-template-columns:repeat(3,1fr)}}
.kbd-postgrid>.wp-block-post-template>li{margin:0}
.kbd-post .frame{aspect-ratio:3/2;overflow:hidden;background:var(--taupe);margin-bottom:.9rem}
.kbd-post .frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.kbd-post:hover .frame img{transform:scale(1.04)}
/* The post-title block renders an h2, so this used to target h3 and miss,
   leaving grid titles at the full section-heading display size. */
.kbd-post .wp-block-post-title{font-size:var(--d3);line-height:1.25;margin-top:.35rem;margin-bottom:.4rem}
.kbd-post .date{font-size:var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kbd-post p{font-size:.95rem;color:#4a3323;margin-top:.5rem}

/* FAQ --------------------------------------------------------------------- */
.kbd-faq details{border-top:1px solid var(--line)}
.kbd-faq details:last-of-type{border-bottom:1px solid var(--line)}
.kbd-faq summary{
  padding:1.2rem 2.5rem 1.2rem 0;cursor:pointer;list-style:none;position:relative;
  font-family:var(--serif);font-size:var(--d3);font-weight:300;
}
.kbd-faq summary::-webkit-details-marker{display:none}
.kbd-faq summary::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:1.3rem;color:var(--olive);transition:transform .3s}
.kbd-faq details[open] summary::after{content:"−"}
.kbd-faq .a{padding-bottom:1.4rem;max-width:64ch;color:#4a3323}
.kbd-faq .a p+p{margin-top:.8rem}

/* Location pages ---------------------------------------------------------- */
.kbd-loc-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.kbd-loc-grid a{
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:.5rem 1rem;border:1px solid var(--line);border-radius:40px;color:var(--muted);transition:.2s;
}
.kbd-loc-grid a:hover{background:var(--ink);color:var(--offwhite);border-color:var(--ink)}

/* E-book ------------------------------------------------------------------ */
/* Credentials. Renders nothing until Kasia supplies them, so it can sit in the
   page without anyone seeing an empty box. */
.kbd-creds-h{font-size:var(--d3);margin:0 0 1.4rem}
.kbd-creds ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-soft);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.kbd-creds li{background:var(--cream);padding:1.35rem 1.5rem;display:flex;flex-direction:column;gap:.35rem}
.kbd-creds .t{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kbd-creds .d{font-family:var(--serif);font-weight:300;font-size:var(--d3);line-height:1.25}

/* 3D design visuals on the home page. Deliberately not styled like the project
   grid: a stated heading, a lead that says they are drawings, and a lighter
   frame, so they are never mistaken for photographs of finished rooms. */
.kbd-vis{display:grid;gap:clamp(1.8rem,4vw,3.2rem)}
@media(min-width:62rem){.kbd-vis{grid-template-columns:.8fr 1.2fr;align-items:center}}
.kbd-vis-head h2{font-size:var(--d2);margin:.7rem 0 0}
.kbd-vis-head .kbd-lead{margin:1rem 0 1.4rem;max-width:40ch}
.kbd-vis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.4vw,1rem)}
.kbd-vis-i{margin:0}
.kbd-vis-i .frame{aspect-ratio:3/4;overflow:hidden;background:var(--taupe);
  border:1px solid var(--line-soft)}
.kbd-vis-i img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.kbd-vis-i:hover img{transform:scale(1.03)}

.kbd-arealist{display:flex;flex-wrap:wrap;gap:.35rem .7rem;align-items:baseline;line-height:1.9}
.kbd-arealist a{border-bottom:1px solid var(--line);padding-bottom:1px}
.kbd-arealist a:hover{border-bottom-color:var(--ink)}
.kbd-arealist span{color:var(--line)}

/* The newsletter form was drawn for the dark footer: off-white type on a
   transparent ground with a 30% border. The same shortcode is reused on the
   book pages, which stand on cream, so there it was cream on cream. Scoped to
   the article context so the footer version is untouched. */
.kbd-article .kbd-news input{background:var(--offwhite);color:var(--ink);border-color:var(--line)}
.kbd-article .kbd-news input::placeholder{color:var(--muted);opacity:1}
.kbd-article .kbd-news input:focus{outline:2px solid var(--olive);outline-offset:2px;border-color:var(--olive)}
.kbd-article .kbd-news button{background:var(--ink);color:var(--offwhite)}
.kbd-article .kbd-news button:hover{background:var(--olive)}

.kbd-formnote{margin:1.2rem 0 0;max-width:46ch;font-size:.82rem;line-height:1.55;color:var(--muted)}
.kbd-formnote a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.kbd-book-hero{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:60rem){.kbd-book-hero{grid-template-columns:.85fr 1.15fr}}
/* The cover is finished artwork with its own spine, so it is shown whole at the
   shape it was drawn in rather than cropped into a frame. The shadow sits on
   the image, and the reveal is a fade rather than a clip-path wipe, because a
   clip-path cuts the shadow off with it. */
.kbd-book-cover{max-width:25rem;margin-inline:auto}
/* On a phone a full-width cover is 560px tall and pushes the title off the
   screen, so the book is held back until there is a column beside it. */
@media(max-width:60rem){.kbd-book-cover{max-width:17rem}}
.kbd-book-cover img{display:block;width:100%;height:auto;box-shadow:0 30px 70px rgba(49,25,15,.30),0 4px 14px rgba(49,25,15,.14)}
/* The cover's subtitle, set in the display serif so it reads as part of the
   title rather than as the opening of the body copy. */
.kbd-book-sub{margin:.85rem 0 0;max-width:30ch;font-family:var(--serif);font-weight:300;
  font-style:italic;font-size:var(--d3);line-height:1.35;color:var(--olive)}
/* The cover picks out one word in gold; the page does the same. Scoped here,
   so gold stays a stars-only colour everywhere else. */
.kbd-book-sub .accent{color:var(--gold)}
.kbd-langs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.kbd-langs a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.45rem .9rem;border:1px solid var(--line);border-radius:40px;color:var(--muted)}
.kbd-langs a.active,.kbd-langs a:hover{background:var(--ink);color:var(--offwhite);border-color:var(--ink)}

/* Video testimonials — two side by side --------------------------------- */
.kbd-vids{display:grid;gap:clamp(1.2rem,2.5vw,2rem)}
@media(min-width:48rem){.kbd-vids{grid-template-columns:1fr 1fr}}
@media(min-width:60rem){.kbd-vids--three{grid-template-columns:repeat(3,1fr)}}
.kbd-vids--three .kbd-vid{aspect-ratio:16/9}
.kbd-vid{position:relative;aspect-ratio:9/16;background:var(--ink);overflow:hidden}
@media(min-width:48rem){.kbd-vid{aspect-ratio:4/5}}
.kbd-vid video,.kbd-vid img{width:100%;height:100%;object-fit:cover}
.kbd-vid .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,10,5,.25);border:0;cursor:pointer;transition:background .3s}
.kbd-vid .play:hover{background:rgba(20,10,5,.1)}
.kbd-vid .play span{width:64px;height:64px;border:1px solid rgba(255,255,255,.8);border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.1rem}
.kbd-vid .cap{position:absolute;left:1rem;bottom:1rem;right:1rem;color:#fff;z-index:2;pointer-events:none}
.kbd-vid .cap .n{font-family:var(--serif);font-size:1.15rem;font-weight:300}
.kbd-vid .cap .r{font-size:var(--label);letter-spacing:.16em;text-transform:uppercase;opacity:.85}

/* Reels: vertical video at the shape it was filmed in ---------------------- */
.kbd-reels{display:grid;gap:clamp(1rem,2.4vw,1.8rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:52rem){.kbd-reels{grid-template-columns:repeat(3,1fr)}}
@media(min-width:76rem){.kbd-reels{grid-template-columns:repeat(4,1fr)}}
.kbd-reel{margin:0}
.kbd-reel .frame{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--ink)}
.kbd-reel video{width:100%;height:100%;object-fit:cover;display:block}
.kbd-reel .play{
  position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,10,5,.22);
  border:0;cursor:pointer;transition:background .3s;
}
.kbd-reel .play:hover{background:rgba(20,10,5,.06)}
.kbd-reel .play span{
  width:56px;height:56px;border:1px solid rgba(255,255,255,.85);border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:.95rem;backdrop-filter:blur(2px);
}
.kbd-reel figcaption{
  margin-top:.8rem;font-size:var(--label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}

/* Lightbox ---------------------------------------------------------------- */
.kbd-lb{position:fixed;inset:0;z-index:95;background:rgba(20,10,5,.94);display:none;place-items:center;padding:clamp(1rem,4vw,3rem)}
.kbd-lb.open{display:grid}
.kbd-lb img,.kbd-lb video{max-width:100%;max-height:86svh;width:auto;height:auto;object-fit:contain}
.kbd-lb .x{position:absolute;top:1rem;right:1rem;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.2rem;display:grid;place-items:center}
.kbd-lb .nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:1px solid rgba(255,255,255,.4);color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1.1rem}
.kbd-lb .nav.prev{left:1rem}
.kbd-lb .nav.next{right:1rem}
.kbd-lb .cap{position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:.85rem}

/* Editor-facing nudge: keep the admin bar from covering the fixed header. */
.admin-bar .kbd-bar{top:32px}
@media screen and (max-width:782px){.admin-bar .kbd-bar{top:46px}}

/* Print ------------------------------------------------------------------- */
@media print{
  .kbd-bar,.kbd-float,.kbd-callbar,.kbd-cookie,.kbd-grain,.kbd-cursor,.kbd-drawer{display:none!important}
  body{background:#fff;color:#000}
}

/* SYNF: multi-step booking form */
.kbd-step{display:none}
.kbd-step.is-active{display:block}
.kbd-steps-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.4rem}
.kbd-steps-progress{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;text-align:center;flex:1}

.kbd-form .kbd-step{padding:0;border-top:0}
/* The process page owns .kbd-step p{margin:0}; give the form intro its gap back */
.kbd-form .kbd-step .kbd-formreq{margin:0 0 1.5rem}
.kbd-steps-nav [hidden]{display:none}
.kbd-hero-bg>div:not([class]){position:absolute;inset:0}