/* ============================================================
   KOZAK Ukrainian Services - Redesign (Onyx & Gold)
   Scoped stylesheet for redesigned templates (About, Contact).
   Loaded via header-redesign.php; old reset.css/style.css are
   intentionally NOT loaded on these pages.
   ============================================================ */
:root{
  /* One geometric grotesk across the whole UI - the client rejected serif
     headings outright. Hierarchy comes from size and weight, not family. */
  --font-display:'Jost',ui-sans-serif,system-ui,'Helvetica Neue',Arial,sans-serif;
  --font-label:'Jost',ui-sans-serif,system-ui,'Helvetica Neue',Arial,sans-serif;
  --font-body:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Poster face - hero headline only. Heavy and slightly condensed, set in caps. */
  --font-poster:'Oswald','Arial Narrow',ui-sans-serif,sans-serif;
  /* Every client mockup sets the display headings in a high-contrast serif.
     It applies to h1 and h2 only - card titles and labels stay on the
     grotesk, which is what the mockups show too. */
  --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  /* Handwritten line in the contact hero - the one script face on the site. */
  --font-script:'Kaushan Script','Segoe Script','Bradley Hand',cursive;
  /* a pen signature, not brush lettering - the owners' autographs */
  --font-autograph:'Qwigley','Segoe Script','Bradley Hand',cursive;
  /* Evening-sky navy, not black. The client's mockups are dark blue with gold
     and the hero photograph is a dusk shot, so the page sits in the same key as
     the picture. The ivory blocks further down stay warm on purpose. */
  --bg:#010f1a; --bg-2:#021b2c; --bg-3:#03273f;
  --ink:#f4f0e8; --ink-soft:#c3c9d6; --ink-mute:#8e97aa;
  --line:rgba(203,164,92,.24); --line-soft:rgba(200,216,240,.11);
  --gold:#c9a24a; --gold-bright:#eccb7d; --gold-deep:#a2782d; --on-gold:#010f1a;
  --ivory:#f4efe4; --ivory-ink:#211b13; --ivory-soft:#5f5545; --ivory-line:rgba(33,27,19,.14); --ivory-card:#fffdf8;
  --navy:#021b2c; --navy-2:#03273f;
  --shadow:0 24px 60px -28px rgba(0,0,0,.75);
  /* No page-width container (2026-10-05): every block runs the width of the
     window with this gutter at the sides - 26px on phones, growing to 40px
     on desktops. */
  --gutter:clamp(26px,2.8vw,40px);
  /* the fixed header overlays the heroes, so its height is a token */
  --hdr-h:84px;
}
/* reset (old reset.css not loaded here) */
*{box-sizing:border-box}
/* The header is fixed, so anything the browser scrolls to on its own - an
   #anchor, a form field it focuses, the field a phone keyboard moves to -
   has to stop below it. Without this, after a failed contact-form submit on a
   phone the fields came to rest under the header, and a tap meant for the
   email box landed on the header's button instead (and reloaded the page). */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 12px)}
body.kozak-rd{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.kozak-rd img{max-width:100%;display:block;height:auto}
.kozak-rd a{color:inherit;text-decoration:none}
.kozak-rd h1,.kozak-rd h2,.kozak-rd h3,.kozak-rd h4{margin:0;font-family:var(--font-display);font-weight:500;line-height:1.1;letter-spacing:-.015em}
.kozak-rd h1,.kozak-rd h2{font-family:var(--font-serif);font-weight:600;letter-spacing:-.005em}
.kozak-rd p{margin:0}
.kozak-rd ul{margin:0}
.kozak-rd ::selection{background:var(--gold);color:var(--on-gold)}
.kozak-rd .wrap{margin:0 auto;padding:0 var(--gutter)}
.kozak-rd .eyebrow{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.2em;font-weight:600;font-size:12.5px;color:var(--gold);display:inline-flex;align-items:center;gap:.7em}
/* No rule beside the label: none of the mockups draw one. The colour overrides
   further down still apply to the text itself. */
.kozak-rd .eyebrow.center{justify-content:center}
.kozak-rd .section{padding:clamp(56px,8vw,104px) 0;position:relative}
/* The gap under a section header lives here, once - not on each grid below it.
   .center must not use the margin shorthand or it would wipe that bottom gap. */
.kozak-rd .sec-head{max-width:760px;margin-bottom:clamp(38px,4.6vw,56px)}
.kozak-rd .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kozak-rd .sec-head h2{font-size:clamp(28px,4.4vw,48px);margin:16px 0 0}
.kozak-rd .sec-head p{color:var(--ink-soft);margin-top:14px;font-size:18px}
.kozak-rd .gold-txt{color:var(--gold)}
/* buttons */
.kozak-rd .btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-label);
  text-transform:uppercase;letter-spacing:.01em;font-weight:600;font-size:13.5px;
  padding:12px 20px;border-radius:6px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s,box-shadow .25s,color .25s,background .25s;white-space:nowrap}
.kozak-rd .btn svg{width:16px;height:16px}
.kozak-rd .btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--on-gold);box-shadow:0 12px 28px -12px rgba(201,162,74,.6)}
.kozak-rd .btn-gold:hover{transform:translateY(-2px)}
.kozak-rd .btn-ghost{border-color:var(--line);color:var(--ink)}
.kozak-rd .btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
.kozak-rd .btn-lg{padding:14px 24px;font-size:14px}
/* header */
.kozak-rd.rd-header{font-family:var(--font-body);font-size:17px;line-height:1.65;color:var(--ink);
  -webkit-font-smoothing:antialiased;text-align:left;position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,backdrop-filter .3s,border-color .3s}
/* Nothing sits behind the bar while it is at the top - no panel, no wash and
   no dividing rule. The blue comes from the page and the photograph. The
   background only appears once .is-solid is on. */
.kozak-rd.rd-header.is-solid{background:rgba(1,15,26,.9);background:color-mix(in srgb,#010f1a 90%,transparent);
  backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
@media(prefers-reduced-motion:reduce){.kozak-rd.rd-header{transition:none}}

/* The heroes run underneath the fixed bar; anything that does not open with a
   hero has to clear it instead. The legacy templates put their banner straight
   after the header rather than inside .kozak-rd-main, so they are covered by
   the sibling rule. */
.kozak-rd-main>.section:first-child{padding-top:calc(var(--hdr-h) + clamp(46px,6vw,86px))}
/* Only the legacy shell needs to be pushed clear of the fixed bar. The
   redesigned pages must NOT be: the element right after the header there is
   the drawer wrapper, and padding it down shoved the whole first screen 84px
   below the header instead of letting the hero run underneath it. */
body:not(:has(main.kozak-rd-main)) .kozak-rd.rd-header + *{padding-top:var(--hdr-h)}
/* Solid unless a dark hero runs underneath. Done in CSS as well as in the
   script so a light page never flashes grey-on-white navigation. */
.kozak-rd.rd-header{background:rgba(1,15,26,.9);background:color-mix(in srgb,#010f1a 90%,transparent);
  backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
body:has(main.kozak-rd-main>.hhero),body:has(main.kozak-rd-main>.ahero),
body:has(main.kozak-rd-main>.ct2-hero),body:has(main.kozak-rd-main>.cty-hero),
body:has(main.kozak-rd-main>.phero),body:has(main.kozak-rd-main>.nf){
  --hdr-see-through:1}
body:has(main.kozak-rd-main>.hhero) .kozak-rd.rd-header:not(.is-solid),
body:has(main.kozak-rd-main>.ahero) .kozak-rd.rd-header:not(.is-solid),
body:has(main.kozak-rd-main>.ct2-hero) .kozak-rd.rd-header:not(.is-solid),
body:has(main.kozak-rd-main>.cty-hero) .kozak-rd.rd-header:not(.is-solid),
body:has(main.kozak-rd-main>.phero) .kozak-rd.rd-header:not(.is-solid),
body:has(main.kozak-rd-main>.nf) .kozak-rd.rd-header:not(.is-solid){
  background:transparent;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
.kozak-rd .hhero .wrap,.kozak-rd .ahero .wrap,.kozak-rd .ct2-hero .wrap,
.kozak-rd .cty-hero .wrap,.kozak-rd .svc-hero .wrap,.kozak-rd .phero .wrap,
.kozak-rd .nf .wrap{padding-top:calc(var(--hdr-h) + clamp(14px,2vw,32px))}
.kozak-rd.rd-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
/* legacy sheets style bare tags - keep them out of the shared bar */
.kozak-rd.rd-header *{box-sizing:border-box}
.kozak-rd.rd-header a{color:inherit;text-decoration:none}
.kozak-rd.rd-header img{max-width:100%;height:auto;display:block}
.kozak-rd.rd-header .btn{text-transform:uppercase;border-radius:6px;width:auto;height:auto;text-align:center;
  letter-spacing:.01em;padding:12px 20px;font-size:13px}
.kozak-rd.rd-header .btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--on-gold)}
.kozak-rd .brand{display:flex;align-items:center;gap:13px}
/* the mockups put the gold wordmark first and the badge to the right of it */
.kozak-rd.rd-header .brand{gap:11px}
.kozak-rd.rd-header .brand .brand-text{order:0}
.kozak-rd.rd-header .brand .badge{order:1}
.kozak-rd.rd-header .brand .brand-text b{font-family:var(--font-serif);font-weight:700;
  font-size:clamp(23px,2.1vw,29px);letter-spacing:.04em;color:var(--gold)}
.kozak-rd.rd-header .brand .brand-text span{color:#fff;letter-spacing:.2em;font-size:8.5px;
  margin-top:5px;opacity:.92}
.kozak-rd .brand .badge{width:52px;height:52px;flex:none;display:block;object-fit:contain}
.kozak-rd .rd-footer .brand .badge{width:56px;height:56px}
@media(max-width:600px){.kozak-rd .brand .badge{width:44px;height:44px}}
.kozak-rd .brand .brand-text{display:flex;flex-direction:column;line-height:1}
.kozak-rd .brand .brand-text b{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink)}
.kozak-rd .brand .brand-text span{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.26em;font-size:9.5px;color:var(--gold);margin-top:4px}
.kozak-rd nav.rd-nav{display:flex;align-items:center;gap:26px}
.kozak-rd nav.rd-nav a{font-family:var(--font-label);text-transform:none;letter-spacing:.005em;font-weight:500;font-size:15.5px;color:var(--ink-soft);position:relative;padding:4px 0;transition:color .2s}
.kozak-rd nav.rd-nav a:hover,.kozak-rd nav.rd-nav a.current{color:var(--ink)}
.kozak-rd nav.rd-nav a.current::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--gold)}
.kozak-rd .hdr-right{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.kozak-rd .hdr-cta{display:flex;align-items:center;gap:16px}
.kozak-rd .hdr-tag{position:absolute;top:calc(100% + 8px);right:2px;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.26em;
  font-size:9.5px;color:var(--gold);white-space:nowrap;transition:opacity .25s,visibility 0s}
.kozak-rd.rd-header.is-solid .hdr-tag{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
@media(max-width:1040px){.kozak-rd .hdr-tag{display:none}}
.kozak-rd .hdr-phone{display:flex;align-items:center;gap:9px;font-family:var(--font-label);font-size:16px;color:var(--ink)}
.kozak-rd .hdr-phone svg{width:18px;height:18px;color:var(--gold)}
.kozak-rd .burger{display:none;background:none;border:1px solid var(--line);border-radius:3px;width:44px;height:40px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.kozak-rd .burger svg{width:20px;height:20px}
@media(max-width:1040px){.kozak-rd nav.rd-nav,.kozak-rd .hdr-phone{display:none}.kozak-rd .burger{display:flex}}
/* Below this the row is brand + CTA + burger, and at full size that is about
   490px of content in a 338px box - the burger was being clipped off-screen by
   body{overflow-x:hidden}, leaving phones with no navigation at all. The badge
   still carries the brand, so the wordmark gives way first. */
@media(max-width:620px){
  .kozak-rd.rd-header .wrap{gap:10px}
  .kozak-rd.rd-header .brand .brand-text{display:none}
  .kozak-rd .hdr-cta{gap:10px}
  .kozak-rd.rd-header .hdr-cta .btn{padding:12px 14px;font-size:11.5px;letter-spacing:.06em}
}
@media(max-width:380px){.kozak-rd.rd-header .hdr-cta .btn{display:none}}
/* visibility, not just transform: translated off-screen the drawer's 21 links
   stayed in the tab order at every width, so a keyboard user on desktop lost
   the focus ring for 21 stops after the header. The 0s-delayed transition
   keeps the slide-out animation visible on close. */
.kozak-rd .drawer{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:var(--bg-2);z-index:130;transform:translateX(100%);visibility:hidden;transition:transform .35s,visibility 0s .35s;padding:26px;display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line);overflow-y:auto}
.kozak-rd .drawer.open{transform:none;visibility:visible;transition:transform .35s,visibility 0s}
.kozak-rd .drawer a{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.08em;font-size:16px;color:var(--ink-soft);padding:13px 4px;border-bottom:1px solid var(--line-soft)}
.kozak-rd .drawer .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.kozak-rd .drawer .dh button{background:none;border:none;color:var(--ink);cursor:pointer}
.kozak-rd .scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:125;opacity:0;pointer-events:none;transition:opacity .3s}
.kozak-rd .scrim.open{opacity:1;pointer-events:auto}
/* page hero */
.kozak-rd .phero{position:relative;background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 55%),linear-gradient(160deg,#022a42,#010f1a);border-bottom:1px solid var(--line-soft);overflow:hidden}
.kozak-rd .phero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(200,216,240,.05) 1px,transparent 0);background-size:26px 26px;opacity:.5;pointer-events:none}
.kozak-rd .phero .wrap{position:relative;z-index:2;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.kozak-rd .crumb{display:flex;gap:9px;align-items:center;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--ink-mute);margin-bottom:20px;flex-wrap:wrap}
.kozak-rd .crumb a:hover{color:var(--gold-bright)}
.kozak-rd .crumb .cur{color:var(--gold)}
.kozak-rd .phero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.kozak-rd .phero h1{font-size:clamp(34px,5vw,58px);margin-top:14px}
.kozak-rd .phero .lead{color:var(--ink-soft);font-size:18.5px;margin-top:18px;max-width:46ch}
.kozak-rd .phero-cta{display:flex;gap:13px;margin-top:26px;flex-wrap:wrap}
.kozak-rd .pshot{aspect-ratio:4/3.3;border-radius:6px;border:1px solid var(--line);background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--ink-mute)}
.kozak-rd .pshot.ph-empty{background:linear-gradient(150deg,#043049,#010f1a)}
.kozak-rd .pshot svg{width:40px;height:40px;color:var(--gold);opacity:.55}
.kozak-rd .pshot span{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.11em;font-size:12px}
.kozak-rd .pshot .tg{position:absolute;left:14px;bottom:14px;background:rgba(1,10,18,.72);border:1px solid var(--line);padding:7px 12px;border-radius:3px;font-family:var(--font-label);letter-spacing:.1em;font-size:11px;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:860px){.kozak-rd .phero-grid{grid-template-columns:1fr;gap:32px}.kozak-rd .pshot{max-width:460px}}
/* story (about) */
.kozak-rd .story{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.kozak-rd .story-copy p{color:var(--ink-soft);margin-top:16px;font-size:16.5px;max-width:62ch}
/* editor text: a pasted URL must wrap, not widen the page on a phone */
.kozak-rd .rd-story-body{overflow-wrap:break-word}
.kozak-rd .rd-story-body h2{font-size:clamp(26px,3.8vw,42px);margin-top:14px}
.kozak-rd .rd-story-body h3{font-size:22px;margin-top:20px}
.kozak-rd .rd-story-body p,.kozak-rd .rd-story-body .description{color:var(--ink-soft);margin-top:16px;font-size:16.5px;max-width:62ch}
.kozak-rd .rd-story-body strong,.kozak-rd .rd-story-body b{color:var(--ink)}
.kozak-rd .rd-story-body ul{margin-top:14px;padding-left:0;list-style:none;display:grid;gap:10px}
.kozak-rd .rd-story-body ul li{position:relative;padding-left:26px;color:var(--ink-soft);font-size:16px}
.kozak-rd .rd-story-body ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.kozak-rd .story-copy p b{color:var(--ink)}
.kozak-rd .story-copy .story-close{font-family:var(--font-display);font-size:20px;color:var(--gold-bright);font-style:italic;margin-top:22px;line-height:1.4}
.kozak-rd .story-img{aspect-ratio:4/3;border-radius:10px;border:1px solid var(--line);background:linear-gradient(150deg,#043049,#010f1a) center/cover;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink-mute);box-shadow:var(--shadow);overflow:hidden}
.kozak-rd .story-img svg{width:38px;height:38px;color:var(--gold);opacity:.55}
.kozak-rd .story-img span{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.13em;font-size:11px}
.kozak-rd .verify{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:22px;margin-top:16px}
.kozak-rd .verify .vh{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--gold);margin-bottom:12px}
.kozak-rd .verify .vitem{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:14px;padding:6px 0}
.kozak-rd .verify .vitem svg{width:18px;height:18px;color:var(--gold);flex:none;margin-top:2px}
@media(max-width:820px){.kozak-rd .story{grid-template-columns:1fr;gap:32px}}
/* team */
.kozak-rd .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kozak-rd .tm{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;transition:.3s}
.kozak-rd .tm:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--shadow)}
.kozak-rd .tm .op{aspect-ratio:4/5;background:linear-gradient(160deg,#043049,#010f1a);display:flex;align-items:center;justify-content:center;color:var(--ink-mute);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.kozak-rd .tm .op svg{width:40px;height:40px;color:var(--gold);opacity:.5}
/* real portrait: cover the frame, favour the face, warm it into the palette */
.kozak-rd .tm .op.has-photo{background-size:cover;background-position:center 18%;filter:saturate(.96) contrast(1.02)}
.kozak-rd .tm .op.has-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(1,10,18,.55) 100%);pointer-events:none}
.kozak-rd .tm:hover .op.has-photo{filter:saturate(1.02) contrast(1.03)}
.kozak-rd .tm .ti{padding:18px}
.kozak-rd .tm .ti b{font-family:var(--font-display);font-size:18px;display:block}
.kozak-rd .tm .lead-role{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;color:var(--gold);margin-top:4px}
.kozak-rd .tm .roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.kozak-rd .tm .roles span{font-size:11px;color:var(--ink-mute);border:1px solid var(--line-soft);border-radius:100px;padding:4px 9px}
.kozak-rd .tm .roles li{list-style:none}
@media(max-width:820px){.kozak-rd .team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.kozak-rd .team-grid{grid-template-columns:1fr}}
/* values */
.kozak-rd .valcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kozak-rd .valc{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;padding:32px 26px;text-align:center;transition:.3s}
.kozak-rd .valc:hover{transform:translateY(-5px);border-color:var(--line)}
.kozak-rd .valc .ic{width:60px;height:60px;margin:0 auto 16px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold-bright)}
.kozak-rd .valc .ic svg{width:28px;height:28px}
.kozak-rd .valc h3{font-size:22px}
.kozak-rd .valc p{color:var(--ink-soft);font-size:15px;margin-top:10px}
@media(max-width:820px){.kozak-rd .valcards{grid-template-columns:1fr}}
/* ---------- process: built to the homepage mockup ----------
   Heading left, one-line promise right; six gold rings on a single rail with a
   dot midway between each pair, and number / step / sentence centred under
   every ring. No cards - the mockup has none. */
.kozak-rd .process{background:var(--bg);border-top:1px solid var(--line-soft);
  padding:clamp(18px,1.9vw,24px) 0 clamp(38px,4.4vw,60px)}
/* on the services hub it opens its own band instead of following the homepage's
   "smaller project" card, so it takes a full top margin and no rule */
.kozak-rd .process.process-solo{border-top:0;padding-top:clamp(34px,4.2vw,58px)}
.kozak-rd .proc-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(26px,3.2vw,42px)}
.kozak-rd .proc-head h2{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(22px,2.2vw,29px);line-height:1.15;margin-top:9px}
.kozak-rd .proc-head p{color:var(--ink-soft);font-size:15px;line-height:1.5;margin:0 0 5px;text-align:right}

/* --proc-d is the ring, --proc-g the column gap; the connector and its dot are
   drawn from each step to the next with those two, so they meet every ring
   edge exactly at any width the six columns can take */
.kozak-rd .proc-steps{--proc-d:58px;--proc-g:clamp(12px,1.6vw,26px);
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--proc-g);row-gap:34px}
.kozak-rd .proc-step{position:relative;text-align:center}
.kozak-rd .proc-step:not(:last-child)::after{content:"";position:absolute;
  top:calc(var(--proc-d) / 2);left:calc(50% + var(--proc-d) / 2);
  width:calc(100% + var(--proc-g) - var(--proc-d));height:1px;
  background:rgba(201,162,74,.55);pointer-events:none}
.kozak-rd .proc-step:not(:last-child)::before{content:"";position:absolute;z-index:1;
  top:calc(var(--proc-d) / 2 - 3px);left:calc(100% + var(--proc-g) / 2 - 3px);
  width:6px;height:6px;border-radius:50%;background:var(--gold-bright);pointer-events:none}
.kozak-rd .proc-ic{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:var(--proc-d);height:var(--proc-d);margin:0 auto;border-radius:50%;
  border:2px solid rgba(201,162,74,.55);background:var(--bg);color:var(--gold);
  transition:border-color .25s,color .25s}
.kozak-rd .proc-ic svg{width:28px;height:28px;stroke-width:1.6}
/* strokes the hammer lies across are hidden behind its fill */
.kozak-rd .proc-ic .ic-occ{fill:var(--bg)}
.kozak-rd .proc-step:hover .proc-ic{border-color:var(--gold-bright);color:var(--gold-bright)}
.kozak-rd .proc-n{display:block;margin-top:14px;font-family:var(--font-label);font-weight:600;
  font-size:20px;line-height:1;color:var(--ink);letter-spacing:.01em}
.kozak-rd .proc-step h3{font-family:var(--font-label);font-weight:600;font-size:15px;
  line-height:1.3;color:var(--ink);margin-top:10px;letter-spacing:0}
.kozak-rd .proc-step p{color:var(--ink-soft);font-size:13px;line-height:1.55;
  margin:8px auto 0;max-width:24ch}
/* they arrive in order - the stagger says what the numbers say */
.kozak-rd .proc-step:nth-child(2){transition-delay:.06s}
.kozak-rd .proc-step:nth-child(3){transition-delay:.12s}
.kozak-rd .proc-step:nth-child(4){transition-delay:.18s}
.kozak-rd .proc-step:nth-child(5){transition-delay:.24s}
.kozak-rd .proc-step:nth-child(6){transition-delay:.30s}

@media(max-width:1100px){
  /* three up, two rows: the rail runs within each row and stops at its end */
  .kozak-rd .proc-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kozak-rd .proc-step:nth-child(3n)::after,.kozak-rd .proc-step:nth-child(3n)::before{display:none}
}
@media(max-width:640px){
  .kozak-rd .proc-head{flex-direction:column;align-items:flex-start}
  .kozak-rd .proc-head p{text-align:left}
  .kozak-rd .proc-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .proc-step::after,.kozak-rd .proc-step::before{display:none}
}
/* two up holds on any ordinary phone; six stacked would be a long scroll */
@media(max-width:340px){
  .kozak-rd .proc-steps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .kozak-rd .proc-step{transition-delay:0s}
}
/* nominations - the homepage and About mockups both set this band on the
   evening navy, not ivory */
.kozak-rd .noms{background:var(--bg);color:var(--ink);border-top:1px solid var(--line-soft);
  padding:clamp(24px,2.6vw,36px) 0}
.kozak-rd .noms .eyebrow{color:var(--gold)}
.kozak-rd .noms .sec-head h2{color:var(--ink)}
.kozak-rd .noms .sec-head p{color:var(--ink-soft)}
/* "Real People. Real Results." - intro on the left, one card per platform on
   the right, as the homepage mockup lays it out. */
.kozak-rd .noms-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2.15fr);
  gap:clamp(28px,3.4vw,56px);align-items:center}
.kozak-rd .noms-head h2{font-size:clamp(26px,3.2vw,42px);color:var(--ink);margin-top:15px;letter-spacing:-.02em}
.kozak-rd .noms-head p{color:var(--ink-soft);margin-top:14px;font-size:16px;line-height:1.6;max-width:38ch}
.kozak-rd .award-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kozak-rd .award{background:var(--ivory-card);border:1px solid var(--ivory-line);border-radius:10px;
  padding:24px 18px;text-align:center;box-shadow:0 18px 40px -30px rgba(1,10,20,.5);transition:.3s}
.kozak-rd .award:hover{transform:translateY(-5px)}
.kozak-rd .award .plat{display:flex;align-items:center;justify-content:center;gap:9px;min-height:30px}
.kozak-rd .award .plat svg{width:26px;height:26px;flex:none}
.kozak-rd .award .plat>span{font-family:var(--font-display);font-weight:600;font-size:19px;
  color:var(--ivory-ink);letter-spacing:-.015em}
.kozak-rd .award .plat .glogo{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.02em}
.kozak-rd .award .num{margin-top:15px;font-family:var(--font-display);font-weight:500;font-size:15px;
  color:var(--ivory-soft);line-height:1.3}
.kozak-rd .award .num small{font-size:15px;font-family:inherit}
.kozak-rd .award .rr{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px}
.kozak-rd .award .rr .stars{color:#f4b400;font-size:15px;letter-spacing:1px}
.kozak-rd .award .rr b{font-family:var(--font-display);font-weight:600;font-size:23px;color:var(--ivory-ink);line-height:1}
.kozak-rd .award .note{margin-top:13px;padding-top:12px;border-top:1px solid var(--ivory-line);
  font-size:13px;line-height:1.45;color:var(--ivory-soft)}

/* ---- homepage: "Real People. Real Results." built to its mockup ----
   The intro column is narrow and the four cards are dark glass on the navy:
   logo, count, stars and rating, and only where the mockup has one, a footnote.
   Everything here is scoped to .noms-dark so About's light cards are untouched. */
.kozak-rd .noms-dark .noms-grid{grid-template-columns:minmax(0,.98fr) minmax(0,3.02fr);
  gap:clamp(18px,2vw,30px)}
.kozak-rd .noms-dark .noms-head h2{font-size:clamp(19px,1.9vw,23px);line-height:1.15;margin-top:9px;
  letter-spacing:-.01em}
.kozak-rd .noms-dark .noms-head p{font-size:13px;line-height:1.55;margin-top:10px;max-width:none}
.kozak-rd .noms-dark .award-grid{gap:clamp(10px,1.2vw,16px)}
.kozak-rd .noms-dark .award{display:flex;flex-direction:column;align-items:center;
  padding:clamp(15px,1.4vw,20px) 12px clamp(14px,1.3vw,18px);border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid rgba(200,216,240,.12);box-shadow:0 18px 36px -28px rgba(0,0,0,.8)}
.kozak-rd .noms-dark .award .plat{gap:9px;min-height:34px}
.kozak-rd .noms-dark .award .plat .plat-ic{width:32px;height:32px;flex:none}
.kozak-rd .noms-dark .award .plat .plat-name{font-family:var(--font-display);font-weight:600;
  font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em;color:var(--ink);line-height:1}
.kozak-rd .noms-dark .award-nd .plat .plat-name{color:#00B551;font-weight:700}
.kozak-rd .noms-dark .award-yelp .plat{gap:3px}
.kozak-rd .noms-dark .award-yelp .plat .plat-name{font-weight:700;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.03em}
.kozak-rd .noms-dark .award-yelp .plat .plat-burst{width:31px;height:31px;margin:-8px 0 0 -1px}
.kozak-rd .noms-dark .award .num{margin-top:9px;font-family:var(--font-label);font-weight:500;
  font-size:13.5px;line-height:1.3;color:var(--ink-soft)}
.kozak-rd .noms-dark .award .rr{margin-top:8px;gap:10px}
.kozak-rd .noms-dark .award .rr .stars{color:#f4b400;font-size:17px;letter-spacing:2px;line-height:1}
.kozak-rd .noms-dark .award .rr b{font-family:var(--font-label);font-weight:600;font-size:21px;
  color:var(--ink);line-height:1}
.kozak-rd .noms-dark .award .note{margin-top:10px;padding-top:0;border-top:0;
  font-family:var(--font-label);font-size:12.5px;line-height:1.4;color:var(--ink-soft)}
.kozak-rd .noms-dark .award-badge{display:inline-flex;align-items:center;gap:8px;text-align:left}
.kozak-rd .noms-dark .award-badge svg{width:30px;height:33px;flex:none}
.kozak-rd .noms-dark .award-badge b{font-family:var(--font-label);font-weight:600;font-size:11.5px;
  line-height:1.25;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
@media(max-width:1080px){
  .kozak-rd .noms-grid{grid-template-columns:1fr;gap:34px}
  .kozak-rd .noms-head p{max-width:56ch}
}
@media(max-width:760px){.kozak-rd .award-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ".noms-dark .noms-grid" (three classes) outranks the shared ".noms-grid" one-
   column rule at this width, so the dark variant has to restate it or the
   intro stays squeezed into a sidebar on tablets and phones */
@media(max-width:1080px){
  .kozak-rd .noms-dark .noms-grid{grid-template-columns:1fr;gap:20px}
  .kozak-rd .noms-dark .noms-head p{max-width:56ch}
}
@media(max-width:420px){.kozak-rd .award-grid{grid-template-columns:1fr}}

/* ---- About: "Real Reviews. Real Results." built to its mockup ----
   A low navy band (about 12% of its width in the mockup): a narrow intro whose
   heading holds two lines, then six white cards in one row - Google,
   Nextdoor's three Neighborhood Fave years, Thumbtack and Yelp. Each card keeps
   its logo in a fixed top row so the six logos line up, and centres its
   figures in the space below. Scoped to .noms-about so the homepage's dark
   cards (.noms-dark) are untouched; the grid is restated at each breakpoint
   because this selector outranks the shared rules.
   Column widths were measured, not guessed: "Trusted by Homeowners" is 248px
   in Playfair 600 at 22px, and "49 Recommendations" 115px in Jost 500 at 12px,
   so the intro gets ~290 parts and each card keeps >=118px inside. */
.kozak-rd .noms-about{padding:clamp(16px,1.5vw,22px) 0;scroll-margin-top:calc(var(--hdr-h) + 8px)}
.kozak-rd .noms-about .noms-grid{grid-template-columns:minmax(0,290fr) minmax(0,834fr);
  gap:clamp(18px,1.8vw,26px);align-items:stretch}
.kozak-rd .noms-about .noms-head{align-self:center}
.kozak-rd .noms-about .noms-head .eyebrow{letter-spacing:.06em;font-size:12px;line-height:1.3}
.kozak-rd .noms-about .noms-head h2{font-size:22px;line-height:1.12;margin-top:5px;letter-spacing:-.005em}
.kozak-rd .noms-about .noms-head p{font-size:12.5px;line-height:1.5;margin-top:8px;max-width:none;color:var(--ink-soft)}
.kozak-rd .noms-about .award-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.kozak-rd .noms-about .award{display:grid;grid-template-rows:auto 1fr;justify-items:center;row-gap:4px;
  min-height:122px;padding:12px 7px 11px;border-radius:6px;
  background:#fff;border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 28px -22px rgba(0,0,0,.9);
  color:#16191d;text-decoration:none;text-align:center}
.kozak-rd .noms-about .award:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(0,0,0,.95)}
.kozak-rd .noms-about .award:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.kozak-rd .noms-about .award .plat{height:30px;min-height:0;gap:5px;margin:0}
.kozak-rd .noms-about .award .plat .plat-ic{width:22px;height:22px;flex:none}
.kozak-rd .noms-about .award .plat .plat-name{font-family:var(--font-label);font-weight:700;
  font-size:16.5px;letter-spacing:-.01em;line-height:1;color:#16191d}
.kozak-rd .noms-about .award-nd .plat .plat-name{color:#00a84b}
.kozak-rd .noms-about .award .plat .glogo{font-family:var(--font-label);font-weight:600;
  font-size:23px;letter-spacing:-.02em;line-height:1}
.kozak-rd .noms-about .award-yelp .plat{gap:0}
.kozak-rd .noms-about .award-yelp .plat .plat-name{font-size:21px;letter-spacing:-.035em}
.kozak-rd .noms-about .award-yelp .plat .plat-burst{width:22px;height:22px;margin:-10px 0 0 1px}
.kozak-rd .noms-about .award .fig{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-width:0;align-self:stretch}
/* Nextdoor's green, a shade deeper for the small type so it reads on white */
.kozak-rd .noms-about .award .fave{font-family:var(--font-label);font-weight:500;font-size:12px;line-height:1.2;color:#00913f}
.kozak-rd .noms-about .award .year{font-family:var(--font-label);font-weight:700;font-size:18px;line-height:1.05;color:#00913f}
.kozak-rd .noms-about .award .line{font-family:var(--font-label);font-weight:600;font-size:13px;line-height:1.2;color:#2b3036}
.kozak-rd .noms-about .award .num{margin:0;font-family:var(--font-label);font-weight:500;font-size:12px;line-height:1.25;color:#3a3f46}
.kozak-rd .noms-about .award .rr{margin:0;display:flex;align-items:center;justify-content:center;gap:5px}
.kozak-rd .noms-about .award .rr b{font-family:var(--font-label);font-weight:600;font-size:15px;line-height:1;color:#16191d}
.kozak-rd .noms-about .award .rr .stars{color:#f4b400;font-size:12.5px;letter-spacing:1px;line-height:1}
.kozak-rd .noms-about .award .q{margin:4px 0 0;font-size:11.5px;line-height:1.4;color:#565d67}
@media(max-width:1180px){
  .kozak-rd .noms-about .noms-grid{grid-template-columns:1fr;gap:14px}
  .kozak-rd .noms-about .noms-head p{max-width:64ch}
}
@media(max-width:900px){.kozak-rd .noms-about .award-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:460px){.kozak-rd .noms-about .award-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* stats */
.kozak-rd .statbar{background:linear-gradient(0deg,var(--bg-2),var(--bg-2)) padding-box,linear-gradient(90deg,var(--gold-deep),var(--gold-bright),var(--gold-deep)) border-box;border:1px solid transparent;border-radius:10px}
.kozak-rd .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:34px 22px;text-align:center}
.kozak-rd .stat .v{font-family:var(--font-display);font-size:clamp(28px,4vw,42px);color:var(--gold-bright);line-height:1}
.kozak-rd .stat .l{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--ink-soft);margin-top:8px}
.kozak-rd .stat+.stat{border-left:1px solid var(--line)}
@media(max-width:820px){.kozak-rd .stats{grid-template-columns:repeat(2,1fr);gap:24px}.kozak-rd .stat+.stat{border-left:none}.kozak-rd .stat:nth-child(5){grid-column:1/-1}}
/* ---------- reviews: the Google score and three of them (new/makets/areas_kozak.jpeg) ----------
   Heading left, one line of reassurance right (the mockup's "View all reviews"
   button is gone - the client asked for it out), then four cards: the white
   rating card and three reviews with the reviewer's own Google avatar. */
.kozak-rd .rv{padding:clamp(26px,3vw,44px) 0 clamp(30px,3.4vw,50px)}
.kozak-rd .rv-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);
  align-items:center;margin-bottom:clamp(18px,2vw,26px)}
/* the .rd-outro reset further down puts every h2 in the outro on the grotesk;
   this block sits inside it and the mockup sets the heading in the serif, so it
   needs one class more than that reset to win */
.kozak-rd .rv .rv-head h2{font-family:var(--font-serif);font-weight:600;
  margin-top:10px;font-size:clamp(25px,3.3vw,38px);line-height:1.1;letter-spacing:-.015em}
.kozak-rd .rv-trust{color:var(--ink-soft);font-size:clamp(14px,1.1vw,16px);text-align:right}

.kozak-rd .rv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);
  align-items:stretch}

/* the rating card is the one white thing in the band, which is the point: it
   reads as the platform's own panel rather than ours */
.kozak-rd .rv-google{display:flex;flex-direction:column;background:#fff;color:#1b1f24;
  border-radius:10px;padding:clamp(16px,1.6vw,22px);text-decoration:none;
  transition:transform .3s,box-shadow .3s}
.kozak-rd a.rv-google:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(0,0,0,.85)}
.kozak-rd .rv-g-top{display:flex;align-items:center;gap:9px}
.kozak-rd .rv-g-top svg{width:clamp(20px,1.8vw,25px);height:clamp(20px,1.8vw,25px);flex:none}
.kozak-rd .rv-g-top b{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(18px,1.7vw,23px);color:#3c4043}
.kozak-rd .rv-g-rate{display:flex;align-items:center;gap:10px;margin-top:clamp(10px,1.1vw,15px)}
.kozak-rd .rv-g-rate b{font-family:var(--font-display);font-weight:600;line-height:1;
  font-size:clamp(24px,2.6vw,34px);color:#1b1f24}
.kozak-rd .rv-g-num{margin-top:5px;font-size:clamp(12.5px,1vw,14px);color:#5f6368}
.kozak-rd .rv-g-q{margin-top:clamp(9px,1vw,13px);color:#5f6368;
  font-size:clamp(12px,.95vw,13px);line-height:1.5}
.kozak-rd .rv-g-by{margin-top:auto;padding-top:9px;font-family:var(--font-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;font-size:10px;color:#80868b}

/* a quarter of a 1200px row is narrow, so the padding, the avatar and the gap
   are all trimmed to buy the quote a wider measure - four lines, as the mockup */
.kozak-rd .rv-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(9px,.95vw,11px);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid #053a58;border-radius:10px;padding:clamp(14px,1.35vw,17px);
  transition:border-color .3s,box-shadow .3s}
.kozak-rd .rv-card:hover{border-color:rgba(201,162,74,.4);box-shadow:var(--shadow)}
.kozak-rd .rv-av{width:clamp(30px,2.6vw,34px);height:clamp(30px,2.6vw,34px);flex:none;border-radius:50%;
  object-fit:cover;background:var(--bg-3)}
/* a reviewer with no picture keeps the same circle, with their initial in it */
.kozak-rd .rv-av-tx{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  color:var(--gold);font-family:var(--font-display);font-weight:600;font-size:17px}
.kozak-rd .rv-body{min-width:0;display:flex;flex-direction:column;height:100%}
.kozak-rd .rv-stars{color:#f4b400;font-size:15px;letter-spacing:1.5px;line-height:1}
.kozak-rd .rv-card blockquote{margin:9px 0 0;color:var(--ink-soft);
  font-size:clamp(12.5px,1vw,13.5px);line-height:1.5}
.kozak-rd .rv-card figcaption{margin-top:auto;padding-top:clamp(10px,1.1vw,14px)}
.kozak-rd .rv-card figcaption b{display:block;font-size:clamp(13px,1.05vw,14.5px);color:var(--ink)}
.kozak-rd .rv-card figcaption span{display:block;margin-top:2px;font-size:12px;color:var(--ink-mute)}

@media(max-width:1000px){
  .kozak-rd .rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .kozak-rd .rv-head{grid-template-columns:1fr;gap:10px;align-items:start}
  .kozak-rd .rv-trust{text-align:left}
}
@media(max-width:560px){
  .kozak-rd .rv-grid{grid-template-columns:1fr}
}
/* contact methods */
.kozak-rd .cmeth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kozak-rd .cmeth{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;padding:24px;text-align:center;transition:.3s;display:block}
.kozak-rd .cmeth:hover{transform:translateY(-4px);border-color:var(--gold)}
.kozak-rd .cmeth .ic{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold-bright)}
.kozak-rd .cmeth .ic svg{width:24px;height:24px}
.kozak-rd .cmeth .lb{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--ink-mute)}
.kozak-rd .cmeth b{font-family:var(--font-display);font-size:18px;display:block;margin-top:5px;word-break:break-word}
.kozak-rd .cmeth .sm{font-size:13px;color:var(--ink-soft);margin-top:4px}
@media(max-width:820px){.kozak-rd .cmeth-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.kozak-rd .cmeth-grid{grid-template-columns:1fr}}
.kozak-rd .contact-main{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start;margin-top:32px}
.kozak-rd .next-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:26px}
.kozak-rd .next-card h3{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:15px;color:var(--gold)}
.kozak-rd .next-steps{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:14px}
.kozak-rd .next-steps li{display:flex;gap:13px;align-items:flex-start}
.kozak-rd .next-steps .sn{width:30px;height:30px;flex:none;border-radius:50%;background:var(--gold);color:var(--on-gold);font-family:var(--font-label);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:14px}
.kozak-rd .next-steps b{display:block;font-size:15px}
.kozak-rd .next-steps p{color:var(--ink-mute);font-size:13.5px;margin-top:2px}
.kozak-rd .hours{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:16px}
.kozak-rd .hours .row{display:flex;justify-content:space-between;font-size:14px;padding:5px 0;color:var(--ink-soft)}
.kozak-rd .hours .row span:last-child{font-family:var(--font-label);color:var(--ink)}
.kozak-rd .map{aspect-ratio:16/10;border:1px solid var(--line);border-radius:12px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,var(--bg-3),var(--bg));display:flex;align-items:center;justify-content:center;margin-top:16px}
.kozak-rd .map .ring{position:absolute;border:1px solid var(--line);border-radius:50%}
.kozak-rd .map .pin{position:relative;text-align:center;color:var(--gold-bright)}
.kozak-rd .map .pin svg{width:38px;height:38px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.kozak-rd .map .pin b{display:block;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.11em;font-size:13px;margin-top:6px;color:var(--ink)}
.kozak-rd .map .pin span{font-size:11px;color:var(--ink-mute);font-family:var(--font-label);letter-spacing:.1em}
@media(max-width:860px){.kozak-rd .contact-main{grid-template-columns:1fr}}
/* form shell + CF7 */
.kozak-rd .form-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:30px;box-shadow:var(--shadow)}
.kozak-rd .form-card h3{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:16px;color:var(--gold);margin-bottom:6px}
.kozak-rd .form-card .fintro{color:var(--ink-mute);font-size:14px;margin-bottom:6px}
.kozak-rd .wpcf7{margin-top:8px}
/* CF7 wraps its hidden inputs in a fieldset, which would otherwise draw an empty box */
.kozak-rd .wpcf7 fieldset{border:0;margin:0;padding:0;min-inline-size:0}
.kozak-rd .wpcf7 .hidden-fields-container{display:none}
.kozak-rd .wpcf7 p{margin:0}
.kozak-rd .wpcf7 .form-two-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kozak-rd .wpcf7 .one-form-input{display:flex;flex-direction:column}
.kozak-rd .wpcf7 .full-width-input{margin-top:12px}
.kozak-rd .wpcf7 input[type=text],.kozak-rd .wpcf7 input[type=email],.kozak-rd .wpcf7 input[type=tel],.kozak-rd .wpcf7 input[type=time],.kozak-rd .wpcf7 input[type=date],.kozak-rd .wpcf7 select,.kozak-rd .wpcf7 textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);font-family:var(--font-body);font-size:15px;padding:13px 13px;transition:border-color .2s}
.kozak-rd .wpcf7 input::placeholder,.kozak-rd .wpcf7 textarea::placeholder{color:var(--ink-mute)}
.kozak-rd .wpcf7 select{color:var(--ink-soft);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) calc(1.2em),calc(100% - 15px) calc(1.2em);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.kozak-rd .wpcf7 textarea{min-height:120px;resize:vertical}
.kozak-rd .wpcf7 input:focus,.kozak-rd .wpcf7 select:focus,.kozak-rd .wpcf7 textarea:focus{outline:none;border-color:var(--gold)}
.kozak-rd .wpcf7 .wpcf7-list-item{margin:0}
.kozak-rd .wpcf7 .wpcf7-acceptance{font-size:13px;color:var(--ink-soft)}
.kozak-rd .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label{padding-left:6px}
.kozak-rd .wpcf7 input[type=checkbox]{width:17px;height:17px;accent-color:var(--gold);vertical-align:middle}
.kozak-rd .wpcf7 input[type=submit]{width:100%;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--on-gold);font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:15px;padding:17px 26px;border:none;border-radius:2px;cursor:pointer;margin-top:16px;transition:transform .2s,box-shadow .2s;box-shadow:0 12px 28px -12px rgba(201,162,74,.6)}
.kozak-rd .wpcf7 input[type=submit]:hover{transform:translateY(-2px)}
.kozak-rd .wpcf7 .wpcf7-not-valid-tip{color:#ff9b7a;font-size:12px;margin-top:4px}
.kozak-rd .wpcf7 .wpcf7-not-valid{border-color:#ff9b7a!important}
.kozak-rd .wpcf7-response-output{border:1px solid var(--line)!important;border-radius:6px;color:var(--ink-soft);margin:16px 0 0!important;padding:12px 14px!important;font-size:14px}
.kozak-rd .wpcf7 .ui-datepicker-trigger{display:none}
.kozak-rd .fine{font-size:12px;color:var(--ink-mute);text-align:center;margin-top:12px}
@media(max-width:520px){.kozak-rd .wpcf7 .form-two-columns{grid-template-columns:1fr}}
/* ---------- gold call card ----------
   Not part of the closing CTA any more (that is a photo band now), but still
   the sidebar call card on every area and city page - parts/area-aside.php,
   ".cta-call ca-card". Kept as its own component. */
.kozak-rd .cta-call{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;border-radius:16px;padding:28px 26px 26px;color:var(--on-gold);
  background:linear-gradient(158deg,var(--gold-bright),var(--gold) 52%,var(--gold-deep));
  box-shadow:0 26px 62px -26px rgba(201,162,74,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.kozak-rd .cc-label{display:block;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;font-weight:600;color:rgba(1,15,26,.66)}
.kozak-rd .cc-num{display:flex;align-items:center;gap:11px;margin-top:11px;font-family:var(--font-poster);font-size:clamp(27px,2.7vw,34px);font-weight:600;line-height:1.05;letter-spacing:.005em;color:var(--on-gold);transition:opacity .2s,transform .25s}
.kozak-rd .cc-num svg{width:25px;height:25px;flex:none}
.kozak-rd .cc-num:hover{transform:translateX(2px);opacity:.86}
.kozak-rd .cc-hours{display:block;margin-top:9px;font-size:13px;color:rgba(1,15,26,.72)}
.kozak-rd .cc-rule{display:block;height:1px;margin:22px 0 15px;background:rgba(1,15,26,.24)}
.kozak-rd .cc-alt{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;font-weight:600;color:var(--on-gold);border-bottom:1px solid rgba(1,15,26,.35);padding-bottom:3px;transition:gap .25s,border-color .25s}
.kozak-rd .cc-alt svg{width:15px;height:15px}
.kozak-rd .cc-alt:hover{gap:12px;border-color:var(--on-gold)}
.kozak-rd .cta-call{box-sizing:border-box}
@media(max-width:520px){.kozak-rd .cta-call{padding:22px 20px}}

/* ---------- closing CTA: built to the homepage mockup ----------
   A house with palms at dusk behind the copy, and on the right the four
   promises in a strip with the single button under them. A gold line closes
   the band where the footer begins. The band keeps the mockup's proportion
   (about 5.4:1 at 1440px), and the photograph is framed on the palm crowns and
   the lit windows. The photo URLs come inline from parts/outro.php as
   --cta-img and --cta-img-sm.
   The .rd-outro reset (margin:0 on h2/p/ul) comes later with equal specificity,
   so text rules here carry one extra class. */
.kozak-rd .cta{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);
  padding:clamp(40px,5vw,72px) 0;border-bottom:1px solid rgba(201,162,74,.6)}
.kozak-rd .cta-photo{position:absolute;inset:0;z-index:-2;display:block;
  background-image:var(--cta-img);background-size:cover;background-position:center 46%}
/* as in the mockup the house stays visible behind the headline: a light wash
   that is darkest under the copy and thinnest behind the button */
.kozak-rd .cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(1,15,26,.8) 0%,rgba(1,15,26,.62) 30%,rgba(1,15,26,.3) 55%,rgba(1,15,26,.18) 80%,rgba(1,15,26,.3) 100%),
  linear-gradient(180deg,rgba(1,15,26,.1),rgba(1,15,26,.35))}
.kozak-rd .cta .wrap{position:relative;display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr);gap:clamp(22px,3vw,48px);align-items:center}
.kozak-rd .cta .cta-copy h2{font-family:var(--font-serif);font-weight:600;letter-spacing:-.005em;
  font-size:clamp(24px,2.35vw,31px);line-height:1.16;color:var(--ink)}
.kozak-rd .cta .cta-copy h2 .gold{color:var(--gold-bright)}
.kozak-rd .cta .cta-copy p{margin-top:12px;font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:var(--ink-soft)}

.kozak-rd .cta-act{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.4vw,18px)}
.kozak-rd .cta .cta-marks{list-style:none;margin:0;width:100%;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:10px 12px;
  padding:10px 14px;border-radius:10px;
  background:rgba(1,15,26,.52);border:1px solid rgba(200,216,240,.09);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kozak-rd .cta-marks li{display:flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--font-label);font-size:12.5px;color:var(--ink-soft)}
.kozak-rd .cta-ic{width:28px;height:28px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(201,162,74,.72);color:var(--gold-bright)}
.kozak-rd .cta-ic svg{width:15px;height:15px}
.kozak-rd .cta-act .btn{min-width:min(100%,320px);justify-content:center}

@media(max-width:1140px){
  .kozak-rd .cta .cta-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
}
@media(max-width:1020px){
  .kozak-rd .cta .wrap{grid-template-columns:1fr}
  .kozak-rd .cta-act{align-items:stretch}
  .kozak-rd .cta-photo{background-image:var(--cta-img-sm,var(--cta-img));background-position:center 50%}
  .kozak-rd .cta::before{background:
    linear-gradient(180deg,rgba(1,15,26,.8) 0%,rgba(1,15,26,.55) 45%,rgba(1,15,26,.5) 70%,rgba(1,15,26,.66) 100%)}
}
@media(max-width:620px){
  .kozak-rd .cta .cta-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
  .kozak-rd .cta-marks li{white-space:normal;line-height:1.3}
}

/* ---- the About variant (layout "talk"), built to the About mockup ----
   Lower than the homepage band (about 8% of its width): the copy on the left,
   the estimate and phone buttons in the middle and three facts on the right;
   the photograph framed on the pool and the lit rooms, dark behind the copy and
   the facts. Hairlines instead of the gold line, as that mockup draws it.
   Four-class selectors, so they outrank every shared .cta rule at any width. */
.kozak-rd .cta.cta-talk{padding:clamp(14px,1.3vw,20px) 0;border-bottom:1px solid var(--line-soft)}
/* framed on the lit villa with the pool edge below it (attachment 2030) */
.kozak-rd .cta.cta-talk .cta-photo{background-position:center 56%}
.kozak-rd .cta.cta-talk::before{background:
  linear-gradient(90deg,rgba(1,15,26,.94) 0%,rgba(1,15,26,.86) 26%,rgba(1,15,26,.52) 44%,rgba(1,15,26,.36) 62%,rgba(1,15,26,.66) 80%,rgba(1,15,26,.86) 100%),
  linear-gradient(180deg,rgba(1,15,26,.18),rgba(1,15,26,.38))}
.kozak-rd .cta.cta-talk .wrap{grid-template-columns:auto auto minmax(0,1fr);column-gap:clamp(28px,4.6vw,66px)}
.kozak-rd .cta.cta-talk .cta-copy h2{font-size:clamp(24px,2.05vw,29px);line-height:1.08}
.kozak-rd .cta.cta-talk .cta-copy p{margin-top:7px;font-size:13px;line-height:1.5;color:var(--ink)}
.kozak-rd .cta.cta-talk .cta-btns{display:flex;align-items:center;gap:14px}
.kozak-rd .cta.cta-talk .cta-btns .btn{padding:12px 20px;font-size:13px;border-radius:4px}
.kozak-rd .cta.cta-talk .cta-btns .cta-phone{border:1.5px solid rgba(244,240,232,.78);color:var(--ink);
  background:rgba(1,15,26,.28);font-size:14px;text-transform:none;letter-spacing:.01em;gap:9px}
.kozak-rd .cta.cta-talk .cta-phone svg{width:18px;height:18px;color:var(--gold-bright)}
.kozak-rd .cta.cta-talk .cta-btns .cta-phone:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
.kozak-rd .cta.cta-talk .cta-facts{justify-self:end;display:grid;gap:6px}
.kozak-rd .cta.cta-talk .cta-facts li{display:flex;align-items:center;gap:10px;font-family:var(--font-label);
  font-weight:500;font-size:12.5px;line-height:1.2;color:var(--ink);white-space:nowrap}
.kozak-rd .cta.cta-talk .cta-facts svg{width:22px;height:22px;flex:none;color:var(--gold-bright)}
@media(max-width:1140px){
  .kozak-rd .cta.cta-talk{padding:22px 0}
  .kozak-rd .cta.cta-talk .wrap{grid-template-columns:auto minmax(0,1fr);row-gap:16px}
  .kozak-rd .cta.cta-talk .cta-btns{justify-self:end}
  .kozak-rd .cta.cta-talk .cta-facts{grid-column:1/-1;justify-self:start;grid-auto-flow:column;column-gap:28px}
}
/* below 900px the copy and the two buttons no longer fit side by side */
@media(max-width:900px){
  .kozak-rd .cta.cta-talk .wrap{grid-template-columns:1fr}
  .kozak-rd .cta.cta-talk .cta-btns{justify-self:start;flex-wrap:wrap}
}
@media(max-width:760px){
  .kozak-rd .cta.cta-talk{padding:28px 0}
  .kozak-rd .cta.cta-talk .cta-photo{background-position:center 52%}
  .kozak-rd .cta.cta-talk::before{background:
    linear-gradient(180deg,rgba(1,15,26,.86) 0%,rgba(1,15,26,.7) 55%,rgba(1,15,26,.86) 100%)}
}
@media(max-width:640px){
  .kozak-rd .cta.cta-talk .cta-facts{grid-auto-flow:row;row-gap:9px}
}

/* ---- the Areas variant (layout "start"), built to the Areas mockup ----
   The client's own photograph across the band (attachment 2033: a lit pool
   terrace with the skyline behind). Copy top-left under a gold eyebrow, the two
   buttons beneath it with three two-line badges alongside, and the handwritten
   line down the right-hand edge. Four-class selectors, so they outrank every
   shared .cta rule at every width. */
.kozak-rd .cta.cta-start{padding:clamp(20px,2.1vw,30px) 0;border-bottom:1px solid var(--line-soft)}
/* framed on the terrace and the lit house, with the skyline kept above it */
.kozak-rd .cta.cta-start .cta-photo{background-position:center 42%}
.kozak-rd .cta.cta-start::before{background:
  linear-gradient(90deg,rgba(1,15,26,.93) 0%,rgba(1,15,26,.84) 26%,rgba(1,15,26,.5) 46%,rgba(1,15,26,.4) 64%,rgba(1,15,26,.62) 84%,rgba(1,15,26,.82) 100%),
  linear-gradient(180deg,rgba(1,15,26,.2),rgba(1,15,26,.4))}
/* copy over the whole left side, then buttons and badges on one row under it,
   with the script standing beside both rows */
.kozak-rd .cta.cta-start .wrap{grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"copy copy script" "btns facts script";
  column-gap:clamp(18px,2.6vw,42px);row-gap:clamp(13px,1.5vw,20px);align-items:center}
.kozak-rd .cta.cta-start .cta-copy{grid-area:copy;max-width:52ch}
.kozak-rd .cta.cta-start .cta-copy .eyebrow{font-size:11.5px;letter-spacing:.16em}
.kozak-rd .cta.cta-start .cta-copy h2{margin-top:8px;font-size:clamp(25px,2.5vw,36px);line-height:1.08}
.kozak-rd .cta.cta-start .cta-copy p{margin-top:9px;font-size:clamp(13px,1.05vw,15px);line-height:1.5;color:var(--ink)}
.kozak-rd .cta.cta-start .cta-btns{grid-area:btns;display:flex;align-items:center;gap:13px}
.kozak-rd .cta.cta-start .cta-btns .btn{padding:13px 22px;font-size:13px;border-radius:5px}
.kozak-rd .cta.cta-start .cta-btns .cta-phone{border:1.5px solid rgba(244,240,232,.78);color:var(--ink);
  background:rgba(1,15,26,.28);font-size:14px;text-transform:none;letter-spacing:.01em;gap:9px}
.kozak-rd .cta.cta-start .cta-phone svg{width:18px;height:18px;color:var(--gold-bright)}
.kozak-rd .cta.cta-start .cta-btns .cta-phone:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}

.kozak-rd .cta.cta-start .cta-badges{grid-area:facts;justify-self:end;list-style:none;margin:0;
  display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.kozak-rd .cta.cta-start .cta-badges li{display:flex;align-items:center;gap:10px}
.kozak-rd .cta.cta-start .cta-bic{width:clamp(28px,2.4vw,34px);height:clamp(28px,2.4vw,34px);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--gold-bright)}
.kozak-rd .cta.cta-start .cta-bic svg{width:100%;height:100%}
.kozak-rd .cta.cta-start .cta-badges b{display:block;font-family:var(--font-label);font-weight:600;
  font-size:clamp(11.5px,.98vw,13px);line-height:1.2;color:var(--ink);white-space:nowrap}
.kozak-rd .cta.cta-start .cta-btx{display:block;font-size:clamp(10.5px,.88vw,11.5px);line-height:1.35;
  color:var(--ink-mute);white-space:nowrap}

.kozak-rd .cta.cta-start .cta-script{grid-area:script;justify-self:end;
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  font-family:var(--font-script);font-size:clamp(14px,1.15vw,17px);line-height:1.16;
  color:var(--gold-bright);text-shadow:0 2px 18px rgba(0,0,0,.6);transform:rotate(-9deg)}
.kozak-rd .cta.cta-start .cta-script-u{width:clamp(84px,7vw,112px);height:auto;margin-top:3px;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}

@media(max-width:1240px){
  /* the script is the first thing to go: it is decoration, the badges are not */
  .kozak-rd .cta.cta-start .wrap{grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"copy copy" "btns facts"}
  .kozak-rd .cta.cta-start .cta-script{display:none}
}
@media(max-width:1040px){
  .kozak-rd .cta.cta-start .wrap{grid-template-columns:1fr;grid-template-areas:"copy" "btns" "facts"}
  .kozak-rd .cta.cta-start .cta-badges{justify-self:start;flex-wrap:wrap;gap:14px 26px}
  .kozak-rd .cta.cta-start .cta-copy{max-width:none}
}
@media(max-width:760px){
  .kozak-rd .cta.cta-start{padding:26px 0}
  .kozak-rd .cta.cta-start .cta-photo{background-position:center 50%}
  .kozak-rd .cta.cta-start::before{background:
    linear-gradient(180deg,rgba(1,15,26,.88) 0%,rgba(1,15,26,.72) 55%,rgba(1,15,26,.88) 100%)}
  .kozak-rd .cta.cta-start .cta-btns{flex-wrap:wrap}
  .kozak-rd .cta.cta-start .cta-btns .btn{flex:1 1 220px;justify-content:center}
}
@media(max-width:520px){
  .kozak-rd .cta.cta-start .cta-badges{flex-direction:column;align-items:flex-start;gap:11px}
  .kozak-rd .cta.cta-start .cta-badges b,
  .kozak-rd .cta.cta-start .cta-btx{white-space:normal}
}

/* ============================================================
   HOME HERO - full-bleed team photo, dark wash, gold accents
   ============================================================ */
/* Compact, and sized so the photo panel beside the copy is close to the
   photograph's own 16:9 - the whole house and all four of the team stay in. */
.kozak-rd .hhero{position:relative;overflow:hidden;background:#010f1a;isolation:isolate;
  min-height:clamp(470px,31vw,660px);display:flex;align-items:center}
/* The photo occupies the right-hand panel so the team stands clear of the
   copy rather than behind it. .hhero-photo is only the frame; .hhero-stage
   carries the picture and every animated layer over it. */
/* The panel's left edge was a hard vertical seam. A mask dissolves the
   photograph into the navy instead - the fade ends before the man on the left
   of the group, so he stays sharp. */
.kozak-rd .hhero-photo{position:absolute;top:0;right:0;bottom:0;left:40%;z-index:-2;overflow:hidden;
  /* Every mask and lamp in the hero is given in the photograph's own frame, so
     .hhero-stage has to carry that frame exactly. This element is the size
     container it is measured against. */
  container-type:size;--hero-y:46%;
  /* two mask layers, intersected: the left edge dissolves into the navy and
     the foot of the picture does the same, so neither side shows a seam */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 6%,rgba(0,0,0,.55) 12%,rgba(0,0,0,.85) 18%,#000 26%),
                     linear-gradient(180deg,#000 0,#000 72%,rgba(0,0,0,.55) 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 6%,rgba(0,0,0,.55) 12%,rgba(0,0,0,.85) 18%,#000 26%),
                     linear-gradient(180deg,#000 0,#000 72%,rgba(0,0,0,.55) 88%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* background-size:cover, rebuilt as a real box: the stage keeps the picture's
   1671:941 and overhangs the panel on whichever axis is short, exactly as cover
   would crop. Anchoring it at --hero-y reproduces background-position:center Y. */
.kozak-rd .hhero-stage{position:absolute;left:50%;top:var(--hero-y);
  translate:-50% calc(-1 * var(--hero-y));
  width:max(100cqw,177.5771cqh);height:max(56.3136cqw,100cqh);
  filter:saturate(1.02) contrast(1.02)}
/* Two scrims. The across one keeps the copy on near-solid ground and lets the
   house and the team surface on the right; the down one lands the hero on the
   page colour so the awards bar below joins cleanly. Cool-tinted, because the
   photograph is a dusk shot. */
.kozak-rd .hhero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,#010f1a 0%,rgba(1,15,26,.98) 26%,rgba(1,15,26,.86) 36%,rgba(1,15,26,.55) 45%,
                  rgba(1,15,26,.22) 54%,rgba(1,15,26,.04) 66%,rgba(1,15,26,.22) 100%)}
.kozak-rd .hhero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(1,15,26,.45) 0%,rgba(1,15,26,0) 22%,rgba(1,15,26,.18) 60%,var(--bg) 100%)}
/* the awards bar rides up over the hero's last ~46px, so the copy reserves
   that plus a gap and the button never sits on it */
.kozak-rd .hhero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(84px,7.5vw,116px)}
/* The copy has to finish before the man on the left of the photograph, so the
   column is capped and the headline set a step smaller. */
.kozak-rd .hhero-copy{max-width:560px}
.kozak-rd .hhero .eyebrow{font-size:10.5px;letter-spacing:.15em}
/* poster headline - heavy caps, the punchy Option-3 treatment */
.kozak-rd .hhero h1.poster{font-family:var(--font-poster);font-weight:700;text-transform:uppercase;
  font-size:clamp(36px,4.9vw,66px);line-height:1.02;letter-spacing:.005em;margin-top:14px}
.kozak-rd .hhero h1.poster .gold{color:var(--gold-bright)}
.kozak-rd .hhero .lead{color:var(--ink-soft);font-size:clamp(14.5px,1.05vw,16.5px);margin-top:15px;max-width:44ch;line-height:1.6}
@media(max-width:720px){.kozak-rd .hhero .lead br.lb{display:none}}
.kozak-rd .hhero-cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
/* trust row - three outlined marks, sitting above the buttons */
.kozak-rd .hhero-trust{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:32px}
.kozak-rd .htk{display:flex;align-items:center;gap:13px}
.kozak-rd .htk .ic{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--gold)}
.kozak-rd .htk .ic svg{width:38px;height:38px}
.kozak-rd .htk b{font-family:var(--font-poster);font-weight:600;font-size:27px;line-height:1;color:var(--ink);display:block}
.kozak-rd .htk b.sm{font-size:16px;letter-spacing:.03em;text-transform:uppercase}
.kozak-rd .htk span{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.07em;font-size:11px;
  font-weight:500;color:var(--ink-soft);display:block;margin-top:4px;line-height:1.3}
@media(max-width:560px){.kozak-rd .hhero-trust{gap:14px 24px}.kozak-rd .htk .ic svg{width:32px;height:32px}.kozak-rd .htk b{font-size:22px}}
/* google card */
.kozak-rd .gcard{position:absolute;right:var(--gutter);bottom:34px;z-index:3;background:rgba(2,16,27,.86);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-width:240px;box-shadow:var(--shadow)}
.kozak-rd .gcard .gh{display:flex;align-items:center;gap:9px}
.kozak-rd .gcard .gl{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.kozak-rd .gcard .stars{color:#f4b400;font-size:14px;letter-spacing:1px}
.kozak-rd .gcard .rate{margin-left:auto;font-family:var(--font-label);font-size:19px;color:var(--gold-bright)}
.kozak-rd .gcard small{display:block;color:var(--ink-mute);font-size:11.5px;margin-top:7px}
.kozak-rd .gcard .rl{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--font-label);
  text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:var(--gold)}
.kozak-rd .gcard .rl svg{width:13px;height:13px}
@media(max-width:1100px){
  .kozak-rd .hhero-photo{left:28%}
  .kozak-rd .hhero::before{background:linear-gradient(90deg,#010f1a 0%,rgba(1,15,26,.94) 22%,rgba(1,15,26,.7) 42%,rgba(1,15,26,.2) 66%,rgba(1,15,26,.4) 100%)}
  /* .hhero is a flex row; once the card stops being absolute it becomes a
     second flex item beside .wrap (width:100%) and was squeezed to ~40px.
     Wrapping puts it on its own line at its own width. */
  .kozak-rd .hhero{flex-wrap:wrap}
  .kozak-rd .gcard{position:static;flex:0 0 auto;width:min(290px,100%);
    margin:0 0 clamp(26px,4vw,40px) var(--gutter)}
}
@media(min-width:681px) and (max-width:960px){
  /* Portrait tablets (768-960): beside the copy the team stood right behind
     the headline and the lead, text across their faces. As on phones, the
     photograph becomes its own band under the button - a little shorter and
     framed a little wider than the phone version. Landscape tablets and up
     keep the side-by-side hero. */
  .kozak-rd .hhero{min-height:0}
  .kozak-rd .hhero .wrap{padding-bottom:calc(52vw + 20px)}
  .kozak-rd .hhero-photo{top:auto;bottom:0;left:0;right:0;height:58vw;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%)}
  .kozak-rd .hhero-stage{width:118cqw;height:66.45cqw;left:52%;top:14%;translate:-50% -14%;
    filter:saturate(1.02) brightness(.97)}
  .kozak-rd .hhero::before{background:none}
}
@media(max-width:680px){
  /* A phone has no room beside the copy, and behind it the team had to be
     dimmed to 62% under an 86% scrim - the first screen was text on navy and
     the photograph the whole hero is built on never showed. So here the photo
     is its own band under the button, framed on the four of them (the stage is
     drawn wider than cover so the group fills the width, heads near the top),
     and it fades into the navy above and the awards card below. */
  .kozak-rd .hhero{min-height:0}
  .kozak-rd .hhero .wrap{padding-bottom:calc(58vw + 20px)}
  .kozak-rd .hhero-photo{top:auto;bottom:0;left:0;right:0;height:64vw;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 80%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 80%,transparent 100%)}
  .kozak-rd .hhero-stage{width:128cqw;height:72.08cqw;left:49%;top:12%;translate:-50% -12%;
    filter:saturate(1.02) brightness(.97)}
  .kozak-rd .hhero::before{background:none}
  .kozak-rd .hhero-trust{gap:16px 22px}
  .kozak-rd .hhero h1{max-width:none}
}
/* transformations strip */
.kozak-rd .tstrip-home{background:var(--bg);border-bottom:1px solid var(--line-soft)}
.kozak-rd .tsh{display:grid;grid-template-columns:1fr 2.5fr;gap:clamp(24px,3vw,44px);
  align-items:center;padding:clamp(32px,4vw,52px) 0}
/* ---------- credentials band ----------
   An engraved plate between the transformation block and the services grid:
   four verifiable numbers, then the seal. Numbers count up once on entry. */
.kozak-rd .creds-band{position:relative;background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:clamp(26px,3vw,40px) 0}
.kozak-rd .creds-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 150% at 50% 0%,rgba(201,162,74,.09),transparent 66%)}
.kozak-rd .creds{position:relative;display:grid;grid-template-columns:repeat(4,1fr) minmax(268px,336px);align-items:center;gap:0}
.kozak-rd .cred{position:relative;text-align:center;padding:6px 16px}
/* hairline separators that fade out top and bottom */
.kozak-rd .cred+.cred::before,.kozak-rd .cred-seal::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:62px;background:linear-gradient(180deg,transparent,var(--line),transparent)}
.kozak-rd .cred-ic{display:flex;align-items:center;justify-content:center;color:var(--gold);opacity:.85;margin-bottom:9px}
.kozak-rd .cred-ic svg{width:23px;height:23px}
.kozak-rd .cred-n{display:block;font-family:var(--font-poster);font-weight:600;font-size:clamp(32px,3.3vw,45px);line-height:1;letter-spacing:.005em;font-variant-numeric:tabular-nums;color:var(--gold-bright)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .kozak-rd .cred-n{background:linear-gradient(175deg,#f3dda6,var(--gold) 52%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
}
.kozak-rd .cred-l{display:block;margin-top:10px;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.13em;font-size:10.5px;font-weight:600;line-height:1.55;color:var(--ink-soft)}

.kozak-rd .cred-seal{position:relative;display:flex;align-items:center;gap:16px;margin-left:22px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(201,162,74,.12),rgba(201,162,74,.03))}
.kozak-rd .cred-seal::before{left:-22px}
.kozak-rd .cred-seal img{width:62px;height:62px;flex:none;border-radius:50%}
.kozak-rd .seal-kicker{display:block;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:600;color:var(--gold-bright)}
.kozak-rd .cred-seal p{margin-top:6px;font-size:13px;line-height:1.5;color:var(--ink-soft)}

@media(max-width:1080px){
  .kozak-rd .creds{grid-template-columns:repeat(4,1fr);row-gap:26px}
  .kozak-rd .cred-seal{grid-column:1/-1;margin-left:0;justify-content:center;text-align:left}
  .kozak-rd .cred-seal::before{display:none}
}
@media(max-width:680px){
  .kozak-rd .creds{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .kozak-rd .cred+.cred::before{display:none}
  .kozak-rd .cred:nth-child(2)::before,.kozak-rd .cred:nth-child(4)::before{display:block;height:56px}
  .kozak-rd .cred-seal{flex-direction:column;text-align:center;gap:12px}
}
@media(max-width:400px){
  .kozak-rd .creds{grid-template-columns:1fr;row-gap:24px}
  .kozak-rd .cred::before{display:none}
}

/* --- interactive before/after comparison --- */
/* The mockup's strip is 907x288, so 3.15:1 - low and long, which is the shape
   the client asked for. The frames are 1200x1160, so only 381px of each is
   used; --ba-crop picks which band. 46% was chosen against the alternatives:
   it keeps the dated cabinets AND the cluttered counter on the before, and the
   white cabinetry with the island edge on the after, which is the strongest
   read of the two. Both frames share it so the split stays on one line. */
.kozak-rd .ba{position:relative;aspect-ratio:907/288;--ba-crop:center 46%;
  border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;line-height:0;background:#010f1a}
.kozak-rd .ba img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:var(--ba-crop);pointer-events:none;-webkit-user-drag:none}
.kozak-rd .ba-after{position:absolute;inset:0;width:100%;overflow:hidden;clip-path:inset(0 0 0 var(--ba,50%))}
/* the mockup puts them in the top corners as small rectangles, BEFORE dark and
   AFTER gold - the same gold-with-dark-text pairing as its own button */
.kozak-rd .ba-tag{position:absolute;top:15px;z-index:3;font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.13em;font-size:10.5px;font-weight:600;padding:7px 13px;border-radius:5px;
  pointer-events:none;line-height:1}
.kozak-rd .ba-tag-b{left:15px;color:var(--ink);background:rgba(1,8,15,.78);
  border:1px solid var(--line-soft);backdrop-filter:blur(6px)}
.kozak-rd .ba-tag-a{right:15px;color:var(--on-gold);background:var(--gold);
  border:1px solid var(--gold-bright)}
.kozak-rd .ba-line{position:absolute;top:0;bottom:0;left:var(--ba,50%);width:2px;margin-left:-1px;z-index:4;
  background:linear-gradient(180deg,transparent,rgba(244,240,232,.55) 10%,rgba(244,240,232,.55) 90%,transparent);
  pointer-events:none}
.kozak-rd .ba-knob{position:absolute;top:50%;left:var(--ba,50%);transform:translate(-50%,-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;border:2px solid var(--gold);
  background:rgba(1,8,15,.88);color:var(--gold-bright);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;cursor:ew-resize;padding:0;
  box-shadow:0 8px 24px rgba(0,0,0,.55);transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.kozak-rd .ba-knob:hover{transform:translate(-50%,-50%) scale(1.07)}
/* white, because the knob's own ring and the pulse are both gold */
.kozak-rd .ba-knob:focus-visible{outline:3px solid #fff;outline-offset:3px;
  box-shadow:0 0 0 6px rgba(0,0,0,.55)}
.kozak-rd .ba-knob:active{transform:translate(-50%,-50%) scale(.97)}
.kozak-rd .ba-knob svg{width:22px;height:22px;position:relative;z-index:1}
/* Registering --ba makes it interpolatable, so a click glides the divider
   across instead of teleporting. Dragging removes .anim and tracks 1:1. */
@property --ba{syntax:'<percentage>';inherits:true;initial-value:50%}
.kozak-rd .ba.anim{transition:--ba .5s cubic-bezier(.22,.7,.25,1)}
.kozak-rd .ba-knob{cursor:grab}
.kozak-rd .ba.dragging{cursor:grabbing}
.kozak-rd .ba.dragging .ba-knob{cursor:grabbing;transform:translate(-50%,-50%) scale(1.06)}
/* a soft ring pulses until the slider has been used, so it reads as a control */
.kozak-rd .ba-knob::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--gold-bright);opacity:0;pointer-events:none}
.kozak-rd .ba:not(.touched) .ba-knob::after{animation:baPulse 2.6s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes baPulse{0%{opacity:.6;transform:scale(1)}65%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
@media(prefers-reduced-motion:reduce){
  .kozak-rd .ba.anim{transition:none}
  .kozak-rd .ba:not(.touched) .ba-knob::after{animation:none}
}
@media(max-width:620px){.kozak-rd .ba-knob{width:44px;height:44px}.kozak-rd .ba-knob svg{width:19px;height:19px}}
/* The mockup runs "Real Transformations." edge to edge across its copy column
   and breaks manually before "Real Results." Our column is the same share of
   the content width, so the size is the one that fills it: measured, 30px sets
   that line to 307px in a 315px column. Larger and it wraps to three lines. */
.kozak-rd .tsh-copy h2{font-size:clamp(23px,2.4vw,30px);line-height:1.16}
.kozak-rd .tsh-copy p{color:var(--ink-soft);font-size:15px;line-height:1.62;margin-top:14px}
.kozak-rd .tsh-copy .btn{margin-top:22px}
@media(max-width:1000px){
  /* the strip needs the full width long before the copy does */
  .kozak-rd .tsh{grid-template-columns:1fr;gap:26px}
}
@media(max-width:620px){
  .kozak-rd .ba{aspect-ratio:16/10}
  .kozak-rd .ba-tag{font-size:9.5px;padding:6px 10px;top:11px}
  .kozak-rd .ba-tag-b{left:11px}
  .kozak-rd .ba-tag-a{right:11px}
}

/* ============================================================
   SERVICES INDEX - Bento mosaic + "what's included" chips
   Layout note: with 4 columns and the current 10 services the
   sizes (1=big, 4=wide, 9=big, 10=wide + CTA wide) tile exactly.
   ============================================================ */
.kozak-rd .shero{position:relative;background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 55%),linear-gradient(160deg,#022a42,#010f1a);border-bottom:1px solid var(--line-soft);overflow:hidden}
.kozak-rd .shero-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.kozak-rd .shero-meta div{display:flex;flex-direction:column}
.kozak-rd .shero-meta b{font-family:var(--font-label);font-size:24px;color:var(--gold-bright);line-height:1}
.kozak-rd .shero-meta span{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--ink-mute);margin-top:5px}
.kozak-rd .phero h1 .it{font-style:italic;color:var(--gold-bright);font-weight:500}

.kozak-rd .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:16px}
/* Solid, opaque frame - a translucent border let the photo bleed through the edge.
   Top padding reserves the icon's corner so the copy can never grow into it. */
.kozak-rd .bt{position:relative;border-radius:10px;overflow:hidden;border:1px solid #064466;display:flex;flex-direction:column;
  justify-content:flex-end;padding:78px 22px 22px;transition:transform .4s,border-color .4s,box-shadow .4s;background-size:cover;background-position:center;
  background-color:#221b13;isolation:isolate}
.kozak-rd .bt::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(1,7,13,.15) 0%,rgba(1,7,13,.62) 45%,rgba(1,7,13,.93) 100%);transition:background .4s}
.kozak-rd .bt:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--shadow)}
.kozak-rd .bt:hover::before{background:linear-gradient(180deg,rgba(1,7,13,.3) 0%,rgba(1,7,13,.75) 40%,rgba(1,7,13,.97) 100%)}
.kozak-rd .bt .ic{position:absolute;top:20px;left:20px;width:44px;height:44px;border-radius:9px;background:rgba(1,10,18,.6);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--gold-bright);backdrop-filter:blur(6px);transition:.35s}
.kozak-rd .bt:hover .ic{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.kozak-rd .bt .ic svg{width:22px;height:22px}
.kozak-rd .bt .num{position:absolute;top:26px;right:22px;font-family:var(--font-label);font-size:12px;letter-spacing:.13em;color:var(--ink-soft);
  background:rgba(1,10,18,.5);border:1px solid var(--line-soft);border-radius:100px;padding:3px 9px;backdrop-filter:blur(4px)}
/* belt and braces: if copy ever exceeds the card, clip it instead of letting it
   overflow upward across the icon */
.kozak-rd .bt-body{position:relative;display:block;max-height:100%;overflow:hidden}
.kozak-rd .bt h3{font-size:20px;line-height:1.2;color:var(--ink)}
/* Two clamped lines on a standard tile: enough to explain, never enough to
   overflow a 240px card and ride up over the icon. */
.kozak-rd .bt p{color:var(--ink-soft);font-size:13.5px;line-height:1.5;margin-top:0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s,margin .35s;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.kozak-rd .bt:hover p{max-height:44px;opacity:1;margin-top:9px}
/* Chips only fit the double-height tile. On a single-row card the stack of
   title + copy + chips + link overflows upward past the padding and rides over
   the icon, so those tiles simply do not show them. */
.kozak-rd .bt-chips{display:none;flex-wrap:wrap;gap:6px;margin-top:12px}
.kozak-rd .bt.big .bt-chips{display:flex}
.kozak-rd .bt-chips span{font-size:11.5px;color:var(--ink-soft);border:1px solid var(--line);background:rgba(1,10,18,.55);
  border-radius:100px;padding:4px 10px;backdrop-filter:blur(4px);white-space:nowrap}
.kozak-rd .bt .more{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;
  font-size:11.5px;color:var(--gold);margin-top:12px;opacity:0;transform:translateY(6px);transition:.35s}
.kozak-rd .bt:hover .more{opacity:1;transform:none}
.kozak-rd .bt .more svg{width:14px;height:14px}
/* featured tiles keep their copy open */
.kozak-rd .bt.big{grid-column:span 2;grid-row:span 2}
.kozak-rd .bt.big h3{font-size:clamp(24px,2.6vw,30px)}
.kozak-rd .bt.big p{max-height:none;opacity:1;font-size:15px;max-width:44ch;margin-top:10px;-webkit-line-clamp:4}
.kozak-rd .bt.big .bt-chips{margin-top:14px}
.kozak-rd .bt.big .more{opacity:1;transform:none}
.kozak-rd .bt.wide{grid-column:span 2}
.kozak-rd .bt.wide p{max-height:none;opacity:1;max-width:52ch;margin-top:9px;-webkit-line-clamp:2}
.kozak-rd .bt.wide .more{opacity:1;transform:none}
/* CTA tile */
.kozak-rd .bt-cta{background:radial-gradient(120% 120% at 12% 0%,color-mix(in srgb,var(--gold) 20%,transparent),transparent 60%),var(--bg-3);
  border-color:#075277;justify-content:center;padding:28px 26px}
.kozak-rd .bt-cta::before{display:none}
.kozak-rd .bt-cta h3{font-size:26px;margin-top:12px}
.kozak-rd .bt-cta p{max-height:none;opacity:1;margin-top:10px;max-width:46ch;display:block;-webkit-line-clamp:none}
.kozak-rd .bt-cta .more{opacity:1;transform:none;margin-top:16px;font-size:13px}
@media(max-width:1000px){
  .kozak-rd .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:230px}
  .kozak-rd .bt.big{grid-column:span 2;grid-row:span 2}
  .kozak-rd .bt.wide{grid-column:span 2}
}
@media(max-width:600px){
  .kozak-rd .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .kozak-rd .bt{min-height:250px;grid-column:auto!important;grid-row:auto!important;padding:78px 20px 20px}
  .kozak-rd .bt p{max-height:none;opacity:1;display:block;-webkit-line-clamp:none;margin-top:9px}
  .kozak-rd .bt-chips{display:flex}
  .kozak-rd .bt-chips{margin-top:12px}
  .kozak-rd .bt .more{opacity:1;transform:none}
}
/* trust strip */
.kozak-rd .tstrip{background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.kozak-rd .tstrip .row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:36px 0}
.kozak-rd .ts{display:flex;gap:13px;align-items:flex-start}
.kozak-rd .ts .ic{width:42px;height:42px;flex:none;border-radius:9px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold-bright)}
.kozak-rd .ts .ic svg{width:21px;height:21px}
.kozak-rd .ts b{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.05em;font-size:14px;display:block}
.kozak-rd .ts p{color:var(--ink-mute);font-size:13px;margin-top:4px}
@media(max-width:900px){.kozak-rd .tstrip .row{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:520px){.kozak-rd .tstrip .row{grid-template-columns:1fr}}

/* ============================================================
   LONGFORM BODY - area & service articles
   ============================================================ */
.kozak-rd .rd-longform{max-width:74ch;overflow-wrap:break-word}
.kozak-rd .rd-longform > *:first-child{margin-top:0}
.kozak-rd .rd-longform p{color:var(--ink-soft);font-size:17px;line-height:1.75;margin-top:18px}
.kozak-rd .rd-longform h2{font-size:clamp(24px,3vw,33px);margin-top:52px;padding-top:26px;border-top:1px solid var(--line-soft)}
.kozak-rd .rd-longform h3{font-size:20px;margin-top:32px;color:var(--ink)}
.kozak-rd .rd-longform strong,.kozak-rd .rd-longform b{color:var(--ink);font-weight:600}
.kozak-rd .rd-longform a{color:var(--gold-bright);border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent);transition:.2s}
.kozak-rd .rd-longform a:hover{border-bottom-color:var(--gold-bright)}
.kozak-rd .rd-longform ul,.kozak-rd .rd-longform ol{margin-top:18px;padding-left:0;list-style:none;display:grid;gap:11px}
.kozak-rd .rd-longform li{position:relative;padding-left:28px;color:var(--ink-soft);font-size:16.5px;line-height:1.65}
.kozak-rd .rd-longform ul li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}
.kozak-rd .rd-longform ol{counter-reset:lf}
.kozak-rd .rd-longform ol li{counter-increment:lf;padding-left:34px}
.kozak-rd .rd-longform ol li::before{content:counter(lf);position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:50%;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold-bright);
  font-family:var(--font-label);font-size:12px;display:flex;align-items:center;justify-content:center}
.kozak-rd .rd-longform blockquote{margin-top:26px;padding:20px 24px;border-left:3px solid var(--gold);
  background:var(--bg-2);border-radius:0 10px 10px 0}
.kozak-rd .rd-longform blockquote p{margin:0;color:var(--ink);font-size:17.5px}
/* FAQ - plain details/summary, no JS needed */
.kozak-rd .rd-longform details{margin-top:12px;background:var(--bg-2);border:1px solid var(--line-soft);
  border-radius:10px;padding:0 20px;transition:border-color .25s}
.kozak-rd .rd-longform details[open]{border-color:var(--line)}
.kozak-rd .rd-longform summary{cursor:pointer;list-style:none;padding:17px 30px 17px 0;position:relative;
  color:var(--ink);font-size:16.5px;font-weight:600;font-family:var(--font-display);letter-spacing:-.01em}
.kozak-rd .rd-longform summary::-webkit-details-marker{display:none}
.kozak-rd .rd-longform summary::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.kozak-rd .rd-longform details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.kozak-rd .rd-longform details p{margin:0 0 18px;font-size:16px}
@media(max-width:600px){.kozak-rd .rd-longform h2{margin-top:40px}}

/* ============================================================
   SERVICE AREAS - county cards, city tiles, cross-links
   ============================================================ */
.kozak-rd .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- areas hub hero: built to new/makets/areas_kozak.jpeg ----------
   Copy on the left over a photograph of the coast; on the right a drawn map of
   the four counties with the home base pinned, and the script line over the
   sea. The map is hidden below 1080px, where the copy takes the full width and
   the photograph becomes a plain backdrop. */
.kozak-rd .ah-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);
  min-height:clamp(420px,34vw,660px);display:flex;align-items:center;
  padding:calc(var(--hdr-h) + clamp(16px,1.8vw,28px)) 0 clamp(20px,2.2vw,32px)}
/* the client's artwork already carries the villa, the map and its own dark
   left side, so it fills the whole band and only needs a light wash under the
   copy */
/* the fixed header keeps its own navy bar on this page, so the artwork starts
   below it - at inset:0 the header covered Martin County */
.kozak-rd .ah-photo{position:absolute;inset:var(--hdr-h) 0 0;z-index:-2;display:block;
  background-size:cover;background-position:right center}
.kozak-rd .ah-hero::before{content:"";position:absolute;inset:var(--hdr-h) 0 0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(1,15,26,.88) 0%,rgba(1,15,26,.74) 26%,rgba(1,15,26,.4) 42%,rgba(1,15,26,.12) 56%,rgba(1,15,26,0) 68%),
  linear-gradient(180deg,rgba(1,15,26,.3),rgba(1,15,26,0) 35%,rgba(1,15,26,.35))}
.kozak-rd .ah-hero .wrap{position:relative;z-index:1;width:100%}
.kozak-rd .ah-copy{max-width:600px}
.kozak-rd .ah-copy .eyebrow{letter-spacing:.09em;font-size:12px}
.kozak-rd .ah-copy h1{font-size:clamp(30px,3.5vw,50px);line-height:1.06;letter-spacing:-.02em;margin-top:8px;
  text-shadow:0 2px 26px rgba(0,0,0,.5)}
.kozak-rd .ah-copy h1 .gold{color:var(--gold-bright)}
.kozak-rd .ah-copy .lead{margin-top:14px;max-width:58ch;color:var(--ink-soft);
  font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.6;text-shadow:0 1px 14px rgba(0,0,0,.6)}
/* the four figures, divided as the mockup divides them */
.kozak-rd .ah-facts{list-style:none;margin:clamp(14px,1.6vw,20px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(12px,1.5vw,22px)}
.kozak-rd .ah-facts li{display:flex;align-items:center;gap:9px;padding-left:clamp(12px,1.5vw,22px);
  border-left:1px solid var(--line-soft)}
.kozak-rd .ah-facts li:first-child{padding-left:0;border-left:0}
.kozak-rd .ah-facts svg{width:24px;height:24px;flex:none;color:var(--gold)}
.kozak-rd .ah-facts span{display:flex;flex-direction:column;font-family:var(--font-label);
  font-size:12px;line-height:1.25;color:var(--ink-soft);white-space:nowrap}
.kozak-rd .ah-facts b{font-family:var(--font-label);font-weight:600;font-size:19px;line-height:1.1;color:var(--ink)}
/* the finder, white and square in the hero rather than the dark pill it is
   further down the page */
.kozak-rd .ah-find{margin-top:clamp(16px,1.9vw,26px);max-width:560px}
.kozak-rd .ah-find .ar-find-box{max-width:none;margin:0;border-radius:6px;background:#fff;border-color:transparent;
  padding:0 0 0 16px;gap:10px}
.kozak-rd .ah-find .ar-find-box:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,74,.22)}
.kozak-rd .ah-find .ar-find-box>svg{color:#6b7280}
.kozak-rd .ah-find input{color:#16191d;font-size:15px;padding:15px 0}
.kozak-rd .ah-find input::placeholder{color:#8b929c}
.kozak-rd .ah-find .ar-find-clear{color:#8b929c}
.kozak-rd .ah-find .ar-find-clear:hover{color:#16191d;background:rgba(22,25,29,.07)}
.kozak-rd .ah-find-go{flex:none;border:0;cursor:pointer;align-self:stretch;
  padding:0 clamp(18px,2.2vw,30px);border-radius:0 6px 6px 0;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--on-gold);
  font-family:var(--font-label);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;
  transition:filter .2s}
.kozak-rd .ah-find-go:hover{filter:brightness(1.06)}
.kozak-rd .ah-find .ar-find-out{max-width:none;margin:9px 0 0;text-align:left}

/* ---- the lettering over the sea (the map itself is part of the artwork) ---- */
.kozak-rd .ah-script{position:absolute;z-index:1;right:clamp(14px,2.2vw,40px);bottom:clamp(26px,3.6vw,54px);
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  font-family:var(--font-script);font-size:clamp(15px,1.25vw,19px);line-height:1.14;
  color:var(--gold-bright);text-shadow:0 2px 18px rgba(0,0,0,.6);transform:rotate(-9deg);transform-origin:100% 0}
.kozak-rd .ah-script-u{width:clamp(96px,8vw,124px);height:auto;margin-top:4px;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}

@media(max-width:1180px){
  .kozak-rd .ah-script{font-size:16px}
}
@media(max-width:1080px){
  /* the map sits at the right edge of the artwork; on a narrow screen the
     villa reads better, and the same counties are listed right below */
  .kozak-rd .ah-hero{min-height:0;padding-bottom:clamp(26px,3vw,40px)}
  .kozak-rd .ah-script{display:none}
  .kozak-rd .ah-photo{background-position:32% center}
  .kozak-rd .ah-hero::before{background:
    linear-gradient(180deg,rgba(1,15,26,.86) 0%,rgba(1,15,26,.74) 45%,rgba(1,15,26,.92) 100%)}
  .kozak-rd .ah-copy{max-width:none}
}
@media(max-width:620px){
  .kozak-rd .ah-facts li{padding-left:0;border-left:0;flex:0 0 calc(50% - 16px)}
  .kozak-rd .ah-find-go{padding:0 16px;font-size:11.5px}
}

/* ---------- city hero (new/makets/one_areas_kozak.jpeg) ----------
   Measured off the mockup rather than guessed: at a 1200px container the band
   runs about 325px under the header, the headline is ~58px, the sentence ~19px
   over two lines, and the row of four reassurances sits on a darkened strip
   across the whole width. The photograph is full-bleed and only its right-hand
   half clears the scrim.

   This is deliberately NOT .cty-hero - that class is shared with the service
   pages, page.php and single.php, and none of them follow this mockup. */
.kozak-rd .ch-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);
  padding:calc(var(--hdr-h) + clamp(26px,3.3vw,48px)) 0 clamp(18px,2.2vw,32px)}
.kozak-rd .ch-hero.is-flat{background:var(--bg-2)}
/* the header keeps its own navy bar here, so the picture starts below it */
.kozak-rd .ch-photo{position:absolute;inset:var(--hdr-h) 0 0;z-index:-2;
  width:100%;height:calc(100% - var(--hdr-h));object-fit:cover;object-position:72% 42%}
.kozak-rd .ch-hero::before{content:"";position:absolute;inset:var(--hdr-h) 0 0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(1,15,26,1) 0%,rgba(1,15,26,.995) 33%,rgba(1,15,26,.88) 42%,rgba(1,15,26,.42) 53%,rgba(1,15,26,.1) 65%,rgba(1,15,26,0) 76%),
  linear-gradient(180deg,rgba(1,15,26,.5) 0%,rgba(1,15,26,.05) 20%,rgba(1,15,26,.12) 48%,rgba(1,15,26,.9) 100%)}
.kozak-rd .ch-hero .wrap{position:relative;z-index:1}

/* breadcrumb - sentence case with chevrons, not the uppercase .crumb the rest
   of the site uses; the mockup draws it that way and it is the only one here */
.kozak-rd .ch-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-family:var(--font-label);font-size:14.5px;line-height:1.3;color:#a8aeb6;
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.kozak-rd .ch-crumb a{transition:color .2s}
.kozak-rd .ch-crumb a:hover{color:var(--gold-bright)}
.kozak-rd .ch-crumb .cur{color:#e6e9ec}
.kozak-rd .ch-sep{width:12px;height:12px;flex:none;opacity:.5;margin:0 1px}

.kozak-rd .ch-hero .eyebrow{margin-top:clamp(12px,1.5vw,20px);letter-spacing:.15em;
  font-size:clamp(10.8px,1.02vw,12.6px);color:var(--gold);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.kozak-rd .ch-hero h1{margin-top:5px;font-size:clamp(33px,4.3vw,58px);line-height:1.03;
  letter-spacing:-.018em;text-shadow:0 2px 26px rgba(0,0,0,.55)}
.kozak-rd .ch-hero .lead{margin-top:clamp(10px,1.1vw,14px);max-width:29em;color:var(--ink-soft);
  font-size:clamp(15px,1.35vw,19px);line-height:1.46;text-shadow:0 1px 14px rgba(0,0,0,.65)}

/* the four reassurances, divided as the mockup divides them */
.kozak-rd .ch-trust{list-style:none;margin:clamp(26px,3.4vw,48px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 0}
.kozak-rd .ch-trust li{display:flex;align-items:center;gap:13px;
  padding:2px clamp(16px,2.1vw,30px);border-left:1px solid rgba(200,216,240,.16)}
.kozak-rd .ch-trust li:first-child{padding-left:0;border-left:0}
.kozak-rd .ch-trust svg{width:clamp(30px,2.6vw,37px);height:clamp(30px,2.6vw,37px);flex:none;color:var(--gold)}
.kozak-rd .ch-trust span{display:flex;flex-direction:column;gap:3px;min-width:0;
  font-family:var(--font-label);font-size:13px;line-height:1.22;color:var(--ink-soft);
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.kozak-rd .ch-trust b{font-weight:600;font-size:14.2px;color:#fff;letter-spacing:.002em}

@media(max-width:1180px){
  .kozak-rd .ch-trust li{padding-left:clamp(12px,1.6vw,22px);padding-right:clamp(12px,1.6vw,22px)}
  .kozak-rd .ch-trust span{font-size:12.4px}
  .kozak-rd .ch-trust b{font-size:13.4px}
}
@media(max-width:1000px){
  /* the copy takes the full width and the photograph becomes a backdrop, so the
     scrim has to run top-to-bottom instead of left-to-right */
  .kozak-rd .ch-photo{object-position:60% 42%}
  .kozak-rd .ch-hero::before{background:
    linear-gradient(180deg,rgba(1,15,26,.86) 0%,rgba(1,15,26,.7) 40%,rgba(1,15,26,.9) 100%)}
  .kozak-rd .ch-hero .lead{max-width:46em}
}
@media(max-width:760px){
  .kozak-rd .ch-trust{gap:16px 0}
  .kozak-rd .ch-trust li{flex:0 0 50%;padding:0 10px 0 0;border-left:0}
  .kozak-rd .ch-trust li:nth-child(even){padding-left:14px;border-left:1px solid rgba(200,216,240,.16)}
  .kozak-rd .ch-crumb{font-size:13px;gap:4px}
}
@media(max-width:520px){
  .kozak-rd .ch-hero{padding-bottom:22px}
  .kozak-rd .ch-trust li{flex:0 0 100%;padding:0;border-left:0}
  .kozak-rd .ch-trust li:nth-child(even){padding-left:0;border-left:0}
  .kozak-rd .ch-crumb{font-size:12.5px}
}

/* ---------- city page, second block: local intro + map (one_areas_kozak.jpeg) ----------
   The page's one light band. Tones sampled off the mockup: ground #fcfcfc, the
   card white with a hairline, heading near-black, body a warm-neutral grey.
   Every value is a token on the section, so the whole band can be re-toned from
   these six lines if the client ever wants it warm like /transformations/. */
.kozak-rd .ci{
  --ci-bg:#fcfcfc; --ci-card:#fff; --ci-line:rgba(16,24,32,.1);
  --ci-ink:#10151a; --ci-mid:#4a4f55; --ci-soft:#6b7076;
  background:var(--ci-bg);color:var(--ci-ink);
  padding:clamp(34px,4.2vw,58px) 0 clamp(20px,2.4vw,34px)}
/* the eyebrow is a lighter amber in the mockup; on a white ground that lands at
   about 1.9:1 against the background, so it takes the deeper gold the site's
   other light bands already use and stays readable */
.kozak-rd .ci .eyebrow{color:var(--gold-deep);letter-spacing:.16em;font-size:clamp(11px,1.05vw,13px)}

.kozak-rd .ci-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,484px);
  gap:clamp(26px,3.6vw,54px);align-items:start}

.kozak-rd .ci-copy h2{margin-top:clamp(10px,1.2vw,16px);max-width:14em;
  font-size:clamp(26px,3.3vw,40px);line-height:1.08;letter-spacing:-.012em;color:var(--ci-ink)}
.kozak-rd .ci-copy>p{margin-top:clamp(12px,1.4vw,18px);max-width:34em;
  color:var(--ci-mid);font-size:clamp(15px,1.2vw,16.5px);line-height:1.5}

/* three marks, divided as the mockup divides them */
.kozak-rd .ci-marks{list-style:none;margin:clamp(20px,2.6vw,34px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 0}
.kozak-rd .ci-marks li{display:flex;align-items:center;gap:12px;
  padding:0 clamp(14px,1.9vw,26px);border-left:1px solid var(--ci-line)}
.kozak-rd .ci-marks li:first-child{padding-left:0;border-left:0}
.kozak-rd .ci-marks svg{width:clamp(30px,2.5vw,36px);height:clamp(30px,2.5vw,36px);flex:none;color:var(--gold)}
.kozak-rd .ci-marks span{font-family:var(--font-label);font-size:clamp(13.5px,1.1vw,15px);
  line-height:1.26;color:var(--ci-mid)}

.kozak-rd .ci-act{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(16px,2.2vw,34px);margin-top:clamp(22px,2.8vw,38px)}
.kozak-rd .ci-tel{display:flex;align-items:center;gap:12px}
.kozak-rd .ci-tel svg{width:34px;height:34px;flex:none;color:var(--gold)}
.kozak-rd .ci-tel span{display:flex;flex-direction:column;gap:2px;font-family:var(--font-label);
  font-size:14px;line-height:1.2;color:var(--ci-soft)}
.kozak-rd .ci-tel b{font-weight:600;font-size:clamp(19px,1.7vw,23px);line-height:1.15;color:var(--ci-ink)}
.kozak-rd .ci-tel:hover b{color:var(--gold-deep)}

/* ---- the map card ---- */
.kozak-rd .ci-card{background:var(--ci-card);border:1px solid var(--ci-line);border-radius:12px;
  overflow:hidden;box-shadow:0 18px 40px -30px rgba(16,24,32,.5)}
.kozak-rd .ci-map{position:relative;aspect-ratio:1.94;background:#e8eaec}
.kozak-rd .ci-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.kozak-rd .ci-card-body{padding:clamp(18px,1.9vw,26px)}
.kozak-rd .ci-place{display:flex;align-items:flex-start;gap:11px}
.kozak-rd .ci-place svg{width:30px;height:30px;flex:none;color:var(--gold);margin-top:-2px}
.kozak-rd .ci-place b{display:block;font-family:var(--font-label);font-weight:600;
  font-size:clamp(17px,1.5vw,20px);line-height:1.2;color:var(--ci-ink)}
.kozak-rd .ci-place span{display:block;margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--ci-soft)}
.kozak-rd .ci-near{margin-top:clamp(14px,1.5vw,20px)}
.kozak-rd .ci-near b{display:block;font-family:var(--font-label);font-weight:600;
  font-size:15.5px;color:var(--ci-ink)}
.kozak-rd .ci-near p{margin-top:7px;font-size:14.5px;line-height:1.75;color:var(--ci-soft)}
.kozak-rd .ci-near a{color:var(--ci-soft);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.kozak-rd .ci-near a:hover{color:var(--gold-deep);border-bottom-color:color-mix(in srgb,var(--gold-deep) 45%,transparent)}
.kozak-rd .ci-near span{margin:0 7px;color:var(--ci-line);color:rgba(16,24,32,.26)}
.kozak-rd .ci-near .ci-more{color:var(--gold-deep)}

@media(max-width:1000px){
  .kozak-rd .ci-grid{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,34px)}
  .kozak-rd .ci-card{max-width:520px}
  .kozak-rd .ci-copy h2{max-width:none}
}
@media(max-width:620px){
  .kozak-rd .ci-marks li{flex:0 0 100%;padding:0;border-left:0}
  .kozak-rd .ci-marks{gap:14px 0}
  .kozak-rd .ci-act{gap:18px}
  .kozak-rd .ci-act .btn{width:100%;justify-content:center}
}

/* ---------- city page, third block: the services row (one_areas_kozak.jpeg) ----------
   Nine tiles in a single row, photograph over a grey label. It continues the
   light band the block above starts, so its top padding only has to finish the
   gap the mockup leaves between them. Tile is ~120px at a 1200 container, which
   is why three of the service names come through kozak_service_short(). */
.kozak-rd .csv{
  --ci-bg:#fcfcfc; --ci-line:rgba(16,24,32,.1);
  --ci-ink:#10151a; --ci-mid:#4a4f55;
  --csv-label:#ebebec;
  background:var(--ci-bg);color:var(--ci-ink);
  padding:clamp(14px,1.7vw,24px) 0 clamp(30px,3.6vw,48px)}
.kozak-rd .csv .eyebrow{color:var(--gold-deep);letter-spacing:.16em;font-size:clamp(11px,1.05vw,13px)}

.kozak-rd .csv-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px clamp(20px,3vw,44px);margin-bottom:clamp(18px,2.2vw,30px)}
.kozak-rd .csv-head h2{margin-top:clamp(6px,0.9vw,12px);font-size:clamp(24px,3.1vw,38px);
  line-height:1.1;letter-spacing:-.012em;color:var(--ci-ink)}
/* the mockup's outlined gold button, which the dark .btn-ghost is not */
.kozak-rd .csv-all{flex:none;border-color:var(--gold);color:var(--gold-deep);
  background:transparent;border-radius:5px;padding:13px 20px;font-size:12.5px;letter-spacing:.09em}
.kozak-rd .csv-all:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.kozak-rd .csv-all svg{width:15px;height:15px}

.kozak-rd .csv-row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.kozak-rd .csv-tile{display:flex;flex-direction:column;min-width:0;border-radius:7px;overflow:hidden;
  background:var(--csv-label);transition:transform .25s,box-shadow .25s}
.kozak-rd .csv-tile:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(16,24,32,.45)}
.kozak-rd .csv-pic{display:block;aspect-ratio:.91;overflow:hidden;background:#dfe1e3}
.kozak-rd .csv-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kozak-rd .csv-tile:hover .csv-pic img{transform:scale(1.06)}
.kozak-rd .csv-name{display:block;padding:10px 10px 12px;font-family:var(--font-label);
  font-weight:500;font-size:13.4px;line-height:1.26;color:#26292c;
  overflow-wrap:break-word;hyphens:auto}
.kozak-rd .csv-tile:hover .csv-name{color:var(--gold-deep)}

@media(max-width:1180px){
  .kozak-rd .csv-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .kozak-rd .csv-name{font-size:13.8px;padding:11px 11px 13px}
}
@media(max-width:820px){
  .kozak-rd .csv-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kozak-rd .csv-head{align-items:flex-start}
}
@media(max-width:520px){
  .kozak-rd .csv-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .csv-all{width:100%;justify-content:center}
}

/* ---------- city page, fourth block: recent projects (one_areas_kozak.jpeg) ----------
   A dark band with a scrolling row of finished jobs. The band is a touch deeper
   and greener than the site's navy, sampled off the mockup (#081217). Cards are
   ~212x168 at a 1200 container, five across, and the row scrolls past that. */
.kozak-rd .rp{
  --rp-bg:#081217; --rp-card:#0e1a21; --rp-line:rgba(201,162,74,.5);
  background:var(--rp-bg);color:var(--ink);
  padding:clamp(20px,2.4vw,32px) 0 clamp(22px,2.6vw,34px)}
.kozak-rd .rp .eyebrow{color:var(--gold);letter-spacing:.16em;font-size:clamp(11px,1.05vw,13px)}

.kozak-rd .rp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px clamp(20px,3vw,44px);margin-bottom:clamp(16px,2vw,26px)}
.kozak-rd .rp-head h2{margin-top:clamp(6px,0.9vw,12px);font-size:clamp(24px,3.1vw,38px);
  line-height:1.1;letter-spacing:-.012em}
.kozak-rd .rp-all{flex:none;border-color:var(--rp-line);color:var(--gold-bright);
  border-radius:5px;padding:13px 20px;font-size:12.5px;letter-spacing:.09em}
.kozak-rd .rp-all:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.kozak-rd .rp-all svg{width:15px;height:15px}

.kozak-rd .rp-stage{position:relative}
.kozak-rd .rp-row{display:flex;gap:11px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px}
.kozak-rd .rp-row::-webkit-scrollbar{display:none}

/* five to the screen on a desktop (2026-10-05: "слайды крупнее, 5 штук"), three on a laptop */
.kozak-rd .rp-card{flex:0 0 calc((100% - 44px) / 5);scroll-snap-align:start;position:relative;display:block;
  border-radius:9px;overflow:hidden;background:var(--rp-card);
  transition:transform .3s,box-shadow .3s}
.kozak-rd .rp-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -22px rgba(0,0,0,.9)}
.kozak-rd .rp-pic{position:relative;display:block;aspect-ratio:1.26;overflow:hidden;background:#0c1a22}
.kozak-rd .rp-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the picture carries its own floor so the caption never sits on a bright wall */
.kozak-rd .rp-pic::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,10,14,0) 44%,rgba(2,10,14,.5) 64%,rgba(2,10,14,.88) 100%)}
.kozak-rd .rp-before{opacity:0;transition:opacity .45s}
.kozak-rd .rp-card:hover .rp-before,.kozak-rd .rp-card:focus-visible .rp-before{opacity:1}
.kozak-rd .rp-tag{position:absolute;top:9px;left:9px;z-index:2;opacity:0;transition:opacity .3s;
  padding:4px 9px;border-radius:100px;background:rgba(2,10,14,.82);
  font-family:var(--font-label);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-bright)}
.kozak-rd .rp-card:hover .rp-tag,.kozak-rd .rp-card:focus-visible .rp-tag{opacity:1}
@media(hover:none){
  .kozak-rd .rp-before,.kozak-rd .rp-tag{display:none}
}

.kozak-rd .rp-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:2px;padding:0 13px 12px}
.kozak-rd .rp-txt b{font-family:var(--font-label);font-weight:600;font-size:15px;line-height:1.2;color:#fff}
.kozak-rd .rp-txt span{font-family:var(--font-label);font-size:13.2px;line-height:1.25;color:rgba(230,235,240,.72)}

/* the round arrows, sitting in the page gutter as the mockup draws them */
.kozak-rd .rp-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--rp-line);
  background:rgba(8,18,23,.82);color:var(--gold-bright);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,color .2s,opacity .2s}
.kozak-rd .rp-nav svg{width:19px;height:19px}
.kozak-rd .rp-nav:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.kozak-rd .rp-nav[disabled]{opacity:.28;pointer-events:none}
.kozak-rd .rp-prev{left:-24px}
.kozak-rd .rp-next{right:-24px}

@media(max-width:1280px){
  .kozak-rd .rp-prev{left:6px}
  .kozak-rd .rp-next{right:6px}
}
@media(max-width:1100px){.kozak-rd .rp-card{flex-basis:calc((100% - 22px) / 3)}}
@media(max-width:900px){
  .kozak-rd .rp-card{flex-basis:44vw}
  .kozak-rd .rp-head{align-items:flex-start}
}
@media(max-width:560px){
  .kozak-rd .rp-card{flex-basis:78vw}
  .kozak-rd .rp-nav{width:38px;height:38px}
  .kozak-rd .rp-all{width:100%;justify-content:center}
}

/* ---------- city page, fifth block: reviews (one_areas_kozak.jpeg) ----------
   Three cards on a near-white ground, then a row of the platforms we are on.
   The mockup puts a platform logo inside each card; we cannot say which
   platform a given review came from, so the logos sit together underneath with
   the ratings they really carry. */
.kozak-rd .cr{
  --cr-bg:#fafafb; --cr-card:#fff; --cr-line:rgba(16,24,32,.1);
  --cr-ink:#10151a; --cr-mid:#3b4045; --cr-soft:#6b7076;
  background:var(--cr-bg);color:var(--cr-ink);
  padding:clamp(34px,4vw,54px) 0 clamp(34px,4vw,54px)}
.kozak-rd .cr .eyebrow{color:var(--gold-deep);letter-spacing:.16em;font-size:clamp(11px,1.05vw,13px)}

.kozak-rd .cr-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px clamp(20px,3vw,44px);margin-bottom:clamp(18px,2.2vw,28px)}
.kozak-rd .cr-head h2{margin-top:clamp(6px,0.9vw,12px);font-size:clamp(24px,3.1vw,38px);
  line-height:1.1;letter-spacing:-.012em;color:var(--cr-ink)}
.kozak-rd .cr-all{flex:none;border-color:var(--gold);color:var(--gold-deep);background:transparent;
  border-radius:5px;padding:13px 20px;font-size:12.5px;letter-spacing:.09em}
.kozak-rd .cr-all:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.kozak-rd .cr-all svg{width:15px;height:15px}

.kozak-rd .cr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.kozak-rd .cr-card{display:flex;flex-direction:column;background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:9px;padding:clamp(18px,1.9vw,26px)}
.kozak-rd .cr-stars{font-size:19px;line-height:1;letter-spacing:.09em;color:#f2a83a}
.kozak-rd .cr-card blockquote{margin:14px 0 0;font-size:clamp(14.5px,1.15vw,15.8px);
  line-height:1.5;color:var(--cr-mid)}
.kozak-rd .cr-card cite{display:block;margin-top:auto;padding-top:16px;font-style:normal;
  font-family:var(--font-label);font-size:14px;line-height:1.35;color:var(--cr-soft)}
.kozak-rd .cr-card cite span{display:block;margin-top:2px;font-size:12.6px;color:rgba(16,24,32,.42)}

/* the four profiles, with what each of them actually shows */
.kozak-rd .cr-plats{list-style:none;margin:clamp(18px,2.2vw,28px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.kozak-rd .cr-plats li{flex:1 1 200px;min-width:0}
.kozak-rd .cr-plat{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;height:100%;padding:13px 14px;background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:9px;text-align:center;
  transition:border-color .2s,box-shadow .2s,transform .2s}
a.kozak-rd .cr-plat:hover,.kozak-rd .cr-plat:hover{border-color:rgba(201,162,74,.6);
  box-shadow:0 14px 28px -20px rgba(16,24,32,.45);transform:translateY(-2px)}
.kozak-rd .cr-plat-logo{display:flex;align-items:center;justify-content:center;gap:6px;height:24px}
.kozak-rd .cr-plat-logo .plat-svg{width:21px;height:21px;flex:none}
.kozak-rd .cr-plat-logo .plat-burst{width:13px;height:13px;align-self:flex-start;margin-left:-3px}
.kozak-rd .cr-plat-logo .plat-word{font-family:var(--font-label);font-weight:700;
  font-size:18px;line-height:1;letter-spacing:-.01em}
.kozak-rd .cr-plat-logo .plat-g{font-family:var(--font-label);font-weight:700;font-size:20px;line-height:1;letter-spacing:-.02em}
.kozak-rd .cr-plat-note{font-family:var(--font-label);font-size:12.8px;line-height:1.3;color:var(--cr-soft)}

@media(max-width:900px){
  .kozak-rd .cr-grid{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .cr-head{align-items:flex-start}
  .kozak-rd .cr-plats li{flex-basis:calc(50% - 5px)}
}
@media(max-width:520px){
  .kozak-rd .cr-plats li{flex-basis:100%}
  .kozak-rd .cr-all{width:100%;justify-content:center}
}

/* ---------- closing band, town layout (one_areas_kozak.jpeg) ----------
   Copy and the two buttons on the left, three marks along the right, over the
   same photograph the other closing bands use. Shorter than the others: the
   mockup runs this one at roughly 6:1. */
.kozak-rd .cta.cta-town{padding:clamp(28px,3.4vw,46px) 0}
.kozak-rd .cta.cta-town .wrap{display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"copy marks" "btns marks";
  column-gap:clamp(16px,2.2vw,36px);row-gap:clamp(14px,1.7vw,22px);align-items:center}
.kozak-rd .cta.cta-town .cta-copy{grid-area:copy;max-width:none;text-align:left}
/* 29px, not the 34 the other bands use: the mockup fits the whole question on
   one line and at 34 even "Boca Raton" wrapped */
.kozak-rd .cta.cta-town .cta-copy h2{font-size:clamp(20px,2.2vw,28px);line-height:1.15;text-wrap:balance}
.kozak-rd .cta.cta-town .cta-copy p{margin-top:9px;max-width:46ch;
  font-size:clamp(14.5px,1.15vw,16px);line-height:1.5}
/* the marks sit over the bright half of the photograph, so this layout carries
   a little more wash than the other closing bands */
.kozak-rd .cta.cta-town::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(1,15,26,.5) 0%,rgba(1,15,26,.3) 45%,rgba(1,15,26,.52) 100%)}
.kozak-rd .cta.cta-town .wrap{position:relative;z-index:1}
.kozak-rd .cta.cta-town .cta-btns{grid-area:btns;justify-content:flex-start;margin:0}

/* capped so the question on the left keeps the ~560px it needs for one line;
   past that the marks wrap to two rows rather than squeezing the headline */
.kozak-rd .cta-tmarks{grid-area:marks;list-style:none;margin:0;padding:0;max-width:580px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:13px clamp(12px,1.2vw,16px)}
.kozak-rd .cta-tmarks li{display:flex;align-items:center;gap:10px;min-width:0}
.kozak-rd .cta-tmarks .cta-bic{flex:none;width:32px;height:32px;color:var(--gold)}
.kozak-rd .cta-tmarks .cta-bic svg{width:100%;height:100%}
.kozak-rd .cta-tlabel{font-family:var(--font-label);font-size:13px;line-height:1.28;
  color:var(--ink);text-shadow:0 1px 10px rgba(0,0,0,.6)}

@media(max-width:1180px){
  .kozak-rd .cta-tmarks{gap:12px clamp(14px,2vw,26px)}
  .kozak-rd .cta-tlabel{font-size:12.8px}
  .kozak-rd .cta-tmarks .cta-bic{width:30px;height:30px}
}
@media(max-width:1000px){
  .kozak-rd .cta.cta-town .wrap{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"copy" "btns" "marks";row-gap:clamp(16px,2vw,24px)}
  .kozak-rd .cta.cta-town .cta-copy{max-width:none}
  .kozak-rd .cta-tmarks{gap:14px 26px}
}
@media(max-width:560px){
  .kozak-rd .cta.cta-town .cta-btns{width:100%}
  .kozak-rd .cta.cta-town .cta-btns .btn{flex:1 1 100%;justify-content:center}
  .kozak-rd .cta-tmarks li{flex:0 0 100%}
}

/* ================= single service page (new/makets/Services/*.png) =========
   One template for all twelve services. Light bands are the same cool
   near-white the town pages use; dark bands are the site navy. */
.kozak-rd .svc2-hero,.kozak-rd .svc2-marks,.kozak-rd .svc2-why,
.kozak-rd .svc2-proc,.kozak-rd .svc2-end{--s2-ink:var(--ink)}
.kozak-rd .svc2-inc,.kozak-rd .svc2-ex,.kozak-rd .svc2-rel,.kozak-rd .svc2-faq{
  --s2-bg:#fbfbfb; --s2-card:#fff; --s2-line:rgba(16,24,32,.1);
  --s2-dark:#10151a; --s2-mid:#464b51; --s2-soft:#6b7076}

/* ---- hero ---- */
.kozak-rd .svc2-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);
  padding:calc(var(--hdr-h) + clamp(22px,2.8vw,42px)) 0 clamp(24px,3vw,44px)}
.kozak-rd .svc2-hero.is-flat{background:var(--bg-2)}
.kozak-rd .svc2-photo{position:absolute;inset:var(--hdr-h) 0 0;z-index:-2;
  width:100%;height:calc(100% - var(--hdr-h));object-fit:cover;object-position:68% 50%}
.kozak-rd .svc2-hero::before{content:"";position:absolute;inset:var(--hdr-h) 0 0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(1,15,26,.97) 0%,rgba(1,15,26,.94) 30%,rgba(1,15,26,.78) 42%,rgba(1,15,26,.34) 55%,rgba(1,15,26,.06) 70%,rgba(1,15,26,0) 80%),
  linear-gradient(180deg,rgba(1,15,26,.42) 0%,rgba(1,15,26,.04) 26%,rgba(1,15,26,.5) 100%)}
.kozak-rd .svc2-hero .wrap{position:relative;z-index:1}
@media(min-width:1001px){
  .kozak-rd .svc2-hero[style*="--hero-pos"] .svc2-photo{object-position:var(--hero-pos)}
}
/* the picture on the right part only (handyman): its subject clears the copy */
@media(min-width:1001px){
  .kozak-rd .svc2-hero.is-right .svc2-photo{left:auto;right:0;width:66%;object-position:50% 40%}
}
.kozak-rd .svc2-copy{max-width:640px}
.kozak-rd .svc2-hero h1{margin-top:12px;font-size:clamp(34px,4.6vw,62px);line-height:1.02;
  letter-spacing:-.022em;text-shadow:0 2px 26px rgba(0,0,0,.55)}
.kozak-rd .svc2-hero h1 .gold{color:var(--gold-bright)}
.kozak-rd .svc2-tag{margin-top:10px;font-family:var(--font-label);font-weight:500;
  font-size:clamp(17px,1.65vw,23px);line-height:1.25;color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.6)}
.kozak-rd .svc2-lead{margin-top:12px;max-width:34em;color:var(--ink-soft);
  font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.55;text-shadow:0 1px 14px rgba(0,0,0,.65)}
.kozak-rd .svc2-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,2.2vw,30px)}
.kozak-rd .svc2-script{position:absolute;z-index:1;right:clamp(14px,2.4vw,46px);
  bottom:clamp(50px,7vw,110px);text-align:right;
  font-family:var(--font-script);font-size:clamp(17px,1.5vw,25px);line-height:1.12;
  color:var(--gold-bright);text-shadow:0 2px 18px rgba(0,0,0,.65);transform:rotate(-7deg)}

/* the awards bar is drawn overlapping the homepage hero; on a service page it
   follows the trust marks, where that negative margin would eat them */
.kozak-rd .svc2-marks + .hawards{margin-top:0;padding-top:clamp(16px,2vw,26px)}
.kozak-rd .hawards + .hstrip{padding-top:0}

/* ---- the four marks under the hero ---- */
.kozak-rd .svc2-marks{background:#081217;padding:clamp(14px,1.6vw,22px) 0}
.kozak-rd .svc2-marks .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.kozak-rd .svc2-marks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:14px clamp(16px,2.4vw,42px)}
/* the handwritten line at the end of the row is optional (removed 2026-10-05);
   without it the four marks spread across the full width on wide screens */
@media(min-width:1101px){.kozak-rd .svc2-marks ul{flex:1 1 auto;justify-content:space-between}}
.kozak-rd .svc2-marks li{display:flex;align-items:center;gap:11px;min-width:0}
.kozak-rd .svc2-mic{width:clamp(28px,2.4vw,34px);height:clamp(28px,2.4vw,34px);flex:none;color:var(--gold)}
.kozak-rd .svc2-marks span,.kozak-rd .svc2-end-marks span{display:flex;flex-direction:column;gap:2px;
  font-family:var(--font-label);font-size:12.6px;line-height:1.25;color:var(--ink-soft)}
.kozak-rd .svc2-marks b,.kozak-rd .svc2-end-marks b{font-weight:600;font-size:13.6px;color:#fff}
.kozak-rd .svc2-script2{flex:none;font-family:var(--font-script);font-size:clamp(14px,1.2vw,19px);
  line-height:1.15;text-align:right;color:var(--gold-bright);transform:rotate(-6deg)}

/* ---- what's included ---- */
.kozak-rd .svc2-inc{background:var(--s2-bg);color:var(--s2-dark);padding:clamp(34px,4.2vw,58px) 0}
.kozak-rd .svc2-inc .eyebrow,.kozak-rd .svc2-ex .eyebrow,.kozak-rd .svc2-rel .eyebrow,
.kozak-rd .svc2-faq .eyebrow{color:var(--gold-deep);letter-spacing:.16em;font-size:clamp(11px,1.05vw,13px)}
.kozak-rd .svc2-head{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  gap:14px clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(18px,2.2vw,30px)}
.kozak-rd .svc2-head h2{margin-top:10px;font-size:clamp(23px,2.8vw,33px);line-height:1.12;
  letter-spacing:-.014em;color:var(--s2-dark)}
.kozak-rd .svc2-head p{color:var(--s2-mid);font-size:clamp(14.5px,1.15vw,16px);line-height:1.5}
.kozak-rd .svc2-inc-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(var(--inc-cols,8),minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.kozak-rd .svc2-inc-grid li{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:11px;padding:clamp(14px,1.6vw,22px) 8px;text-align:center;background:var(--s2-card);
  border:1px solid var(--s2-line);border-radius:9px;transition:border-color .2s,transform .2s,box-shadow .2s}
.kozak-rd .svc2-inc-grid li:hover{border-color:rgba(201,162,74,.55);transform:translateY(-3px);
  box-shadow:0 16px 30px -22px rgba(16,24,32,.5)}
.kozak-rd .svc2-iic{width:clamp(30px,2.6vw,38px);height:clamp(30px,2.6vw,38px);color:var(--gold)}
.kozak-rd .svc2-inc-grid span{font-family:var(--font-label);font-weight:600;
  font-size:clamp(12.4px,1vw,13.8px);line-height:1.26;color:var(--s2-dark)}
/* the photo-card version (tile mockup): the icon sits in a gold disc on the
   photograph's lower edge, the title beside the disc, the line under both */
.kozak-rd .svc2-inc.is-cards .svc2-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
/* the card mockups set the heading a little smaller than the kitchen one, so
   the longest ("Complete Bathroom Remodeling Solutions") stays on one line */
.kozak-rd .svc2-inc.is-cards .svc2-head h2{font-size:clamp(23px,2.4vw,31px)}
.kozak-rd .svc2-inc-cards{--disc:clamp(46px,3.9vw,56px);--dl:clamp(8px,.8vw,11px);--bp:clamp(14px,1.5vw,20px);
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.1vw,16px)}
.kozak-rd .svc2-inc-cards li{display:flex;flex-direction:column;background:var(--s2-card);
  border:1px solid var(--s2-line);border-radius:6px;overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.kozak-rd .svc2-inc-cards li:hover{border-color:rgba(201,162,74,.55);transform:translateY(-3px);
  box-shadow:0 16px 30px -22px rgba(16,24,32,.5)}
.kozak-rd .svc2-inc-pic{display:block;width:100%;aspect-ratio:1.64;padding:0;border:0;
  background:#e9ebec;overflow:hidden;cursor:zoom-in}
.kozak-rd .svc2-inc-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kozak-rd .svc2-inc-pic:hover img{transform:scale(1.04)}
.kozak-rd .svc2-inc-pic:focus-visible{outline-offset:-3px}
.kozak-rd .svc2-inc-body{position:relative;flex:1;padding:12px var(--bp) clamp(16px,1.6vw,22px)}
.kozak-rd .svc2-inc-disc{position:absolute;left:var(--dl);top:calc(var(--disc) / -2);
  width:var(--disc);height:var(--disc);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));box-shadow:0 0 0 3px var(--s2-card)}
.kozak-rd .svc2-inc-disc .svc2-iic{width:54%;height:54%;color:var(--on-gold)}
.kozak-rd .svc2-inc-body h3{margin:0;min-height:calc(var(--disc) / 2 - 6px);
  padding-left:calc(var(--dl) + var(--disc) + 9px - var(--bp));font-family:var(--font-label);font-weight:600;
  font-size:clamp(13.8px,1.08vw,15.5px);line-height:1.25;letter-spacing:0;color:var(--s2-dark)}
.kozak-rd .svc2-inc-body p{margin-top:9px;font-size:clamp(14px,1.1vw,15.4px);line-height:1.45;color:var(--s2-mid)}
/* five to a row (doors mockup): a smaller disc and type for the narrower card */
.kozak-rd .svc2-inc-cards.is-5{grid-template-columns:repeat(5,minmax(0,1fr));
  --disc:clamp(34px,2.7vw,40px);--dl:clamp(7px,.7vw,9px);--bp:clamp(12px,1.2vw,16px)}
.kozak-rd .svc2-inc-cards.is-5 .svc2-inc-body h3{font-size:clamp(12.4px,.92vw,13.4px);
  padding-left:calc(var(--dl) + var(--disc) + 7px - var(--bp));margin-right:-6px}
.kozak-rd .svc2-inc-cards.is-5 .svc2-inc-body p{font-size:clamp(13px,.98vw,14.2px)}
/* stacked (outdoor mockup): a taller photograph, the title under the disc in
   the serif, the line under the title */
.kozak-rd .svc2-inc-cards.is-stack .svc2-inc-pic{aspect-ratio:var(--pic-ar,1.26)}
.kozak-rd .svc2-inc-cards.is-stack .svc2-inc-body{padding-top:calc(var(--disc) / 2 + 12px)}
.kozak-rd .svc2-inc-cards.is-stack .svc2-inc-body h3{min-height:0;padding-left:0;
  font-family:var(--font-serif);font-weight:600;font-size:clamp(17px,1.45vw,20px);line-height:1.18;letter-spacing:-.01em}
/* five stacked cards in a row (flooring mockup): a wider photograph and a
   smaller serif title, so "Luxury Vinyl Tile (LVT)" keeps to one line */
.kozak-rd .svc2-inc-cards.is-5.is-stack{--disc:clamp(44px,3.5vw,52px)}
.kozak-rd .svc2-inc-cards.is-5.is-stack .svc2-inc-pic{aspect-ratio:1.42}
.kozak-rd .svc2-inc-cards.is-5.is-stack .svc2-inc-body h3{margin-right:0;font-size:clamp(15px,1.22vw,17px)}
/* the card body is a column, so a "Learn More" line sits at the foot of
   every card in the row whatever the length of the text above it */
.kozak-rd .svc2-inc-body:has(.svc2-inc-more){display:flex;flex-direction:column}
.kozak-rd .svc2-inc-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;
  font-family:var(--font-label);font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep)}
.kozak-rd .svc2-inc-more svg{width:15px;height:15px;transition:transform .25s}
.kozak-rd .svc2-inc-more:hover svg{transform:translateX(4px)}
/* short (bathroom mockup): twelve cards with a low, wide photograph */
.kozak-rd .svc2-inc-cards.is-short{--disc:clamp(40px,3.3vw,48px)}
.kozak-rd .svc2-inc-cards.is-short .svc2-inc-pic{aspect-ratio:3}
.kozak-rd .svc2-inc-cards.is-short .svc2-inc-body h3{font-size:clamp(13px,.95vw,13.8px);letter-spacing:-.005em;
  padding-left:calc(var(--dl) + var(--disc) + 7px - var(--bp));margin-right:-12px}
/* the short gold line the outdoor mockup draws after the section heading */
.kozak-rd .svc2-head h2.has-rule::after{content:"";display:inline-block;vertical-align:middle;
  width:clamp(40px,6vw,96px);height:1.5px;margin-left:clamp(12px,1.6vw,24px);background:var(--gold)}
@media(max-width:1000px){.kozak-rd .svc2-inc-cards,.kozak-rd .svc2-inc-cards.is-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kozak-rd .svc2-inc-cards,.kozak-rd .svc2-inc-cards.is-5{grid-template-columns:minmax(0,1fr)}}

/* ---- why homeowners choose KOZAK ---- */
.kozak-rd .svc2-why{background:#081217;padding:clamp(32px,4vw,54px) 0}
.kozak-rd .svc2-why-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(24px,3.6vw,58px);align-items:center}
.kozak-rd .svc2-why-copy .eyebrow{color:var(--gold);letter-spacing:.16em;font-size:clamp(11px,1.05vw,13px)}
.kozak-rd .svc2-why-copy h2{margin-top:10px;font-size:clamp(25px,3.2vw,40px);line-height:1.1;letter-spacing:-.014em}
.kozak-rd .svc2-why-copy p{margin-top:12px;max-width:40em;color:var(--ink-soft);
  font-size:clamp(14.5px,1.15vw,16px);line-height:1.55}
.kozak-rd .svc2-why-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.kozak-rd .svc2-why-list li{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:9px;padding:0 clamp(6px,1vw,14px);border-left:1px solid rgba(200,216,240,.14)}
.kozak-rd .svc2-why-list li:first-child{border-left:0}
.kozak-rd .svc2-wic{width:clamp(28px,2.4vw,34px);height:clamp(28px,2.4vw,34px);color:var(--gold)}
.kozak-rd .svc2-why-list b{font-family:var(--font-label);font-weight:600;font-size:14.5px;line-height:1.24;color:#fff}
.kozak-rd .svc2-why-list li>span{font-family:var(--font-label);font-size:13px;line-height:1.4;color:var(--ink-soft)}

/* ---- real transformations ---- */
.kozak-rd .svc2-tr{background:var(--s2-bg,#fbfbfb);color:#10151a;padding:clamp(32px,4vw,54px) 0}
.kozak-rd .svc2-tr .eyebrow{color:var(--gold-deep);letter-spacing:.16em;font-size:clamp(11px,1.05vw,13px)}
.kozak-rd .svc2-tr-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(22px,3.2vw,52px);align-items:center}
.kozak-rd .svc2-tr-copy h2{margin-top:10px;font-size:clamp(25px,3.2vw,40px);line-height:1.1;
  letter-spacing:-.014em;color:#10151a}
.kozak-rd .svc2-tr-copy p{margin-top:12px;color:#464b51;font-size:clamp(14.5px,1.15vw,16px);line-height:1.5}
.kozak-rd .svc2-tr-stage{position:relative}
/* the bathroom mockup's text link to the whole portfolio */
.kozak-rd .svc2-tr-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--font-label);
  font-weight:600;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep)}
.kozak-rd .svc2-tr-more svg{width:16px;height:16px;transition:transform .25s}
.kozak-rd .svc2-tr-more:hover svg{transform:translateX(4px)}

/* ---- "no need to remodel the whole room" (bathroom mockup): the heading,
   a line and the button on a navy panel, four popular single updates beside
   it on white; both halves line up with the page's wrap ---- */
/* the navy panel runs from the screen edge to 400px past the wrap's edge, so
   its copy keeps the mockup's two-line heading however wide the screen is */
.kozak-rd .svc2-part{display:grid;background:#fbfbfb;color:#10151a;
  grid-template-columns:calc(var(--gutter) + clamp(290px,24vw,350px)) minmax(0,1fr)}
.kozak-rd .svc2-part-lead{display:flex;flex-direction:column;justify-content:center;background:#081217;color:#fff;
  padding:clamp(26px,3vw,40px) clamp(20px,2.6vw,40px) clamp(26px,3vw,40px) var(--gutter)}
.kozak-rd .svc2-part-lead h2{font-size:clamp(20px,1.75vw,24px);line-height:1.14;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.kozak-rd .svc2-part-lead h2 .gold{color:var(--gold-bright)}
.kozak-rd .svc2-part-lead p{margin-top:12px;color:var(--ink-soft);font-size:clamp(14.5px,1.15vw,16px);line-height:1.45}
.kozak-rd .svc2-part-lead .btn{margin-top:clamp(16px,1.8vw,22px);align-self:flex-start}
.kozak-rd .svc2-part-side{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,2.2vw,30px) var(--gutter) clamp(20px,2.2vw,30px) clamp(20px,2vw,28px)}
.kozak-rd .svc2-part-side h3{margin:0;font-family:var(--font-serif);font-weight:600;font-size:clamp(19px,1.7vw,24px);line-height:1.2;color:#10151a}
.kozak-rd .svc2-part-row{list-style:none;margin:clamp(12px,1.4vw,18px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,.8vw,10px)}
.kozak-rd .svc2-part-row a{display:flex;flex-direction:column;height:100%;background:#fff;color:inherit;
  border:1px solid rgba(16,24,32,.1);border-radius:6px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.kozak-rd .svc2-part-row a:hover{border-color:rgba(201,162,74,.55);transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(16,24,32,.5)}
.kozak-rd .svc2-part-pic{display:block;aspect-ratio:1.9;overflow:hidden;background:#e9ebec}
.kozak-rd .svc2-part-pic img{width:100%;height:100%;object-fit:cover}
.kozak-rd .svc2-part-tx{display:flex;flex-direction:column;gap:5px;padding:11px 10px 13px}
.kozak-rd .svc2-part-tx b{font-family:var(--font-label);font-weight:600;font-size:clamp(13.4px,1.02vw,14.5px);line-height:1.25;color:#10151a}
.kozak-rd .svc2-part-tx>span{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;line-height:1.35;color:#6b7076}
.kozak-rd .svc2-part-tx svg{width:16px;height:16px;flex:none;color:var(--gold-deep);transition:transform .25s}
.kozak-rd .svc2-part-row a:hover svg{transform:translateX(3px)}
@media(max-width:1000px){
  .kozak-rd .svc2-part{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .svc2-part-lead,.kozak-rd .svc2-part-side{padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)}
}
@media(max-width:760px){.kozak-rd .svc2-part-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the light version (flooring mockup): all on white, an eyebrow over a
   normal-case heading, taller photographs, the cards' text centred */
.kozak-rd .svc2-part.is-light{background:#fbfbfb;
  grid-template-columns:calc(var(--gutter) + clamp(300px,27vw,390px)) minmax(0,1fr)}
.kozak-rd .svc2-part.is-light .svc2-part-lead{background:none;color:#10151a;padding-right:clamp(16px,1.6vw,24px)}
/* the eyebrow and the heading each keep to one line, as drawn */
.kozak-rd .svc2-part.is-light .svc2-part-lead .eyebrow{color:var(--gold-deep);letter-spacing:.11em;font-size:clamp(11px,.9vw,12px)}
.kozak-rd .svc2-part.is-light .svc2-part-lead h2{margin-top:9px;text-transform:none;letter-spacing:-.014em;
  font-size:clamp(22px,1.8vw,25px);line-height:1.12;color:#10151a}
.kozak-rd .svc2-part.is-light .svc2-part-lead p{color:#464b51}
.kozak-rd .svc2-part-card{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid rgba(16,24,32,.1);border-radius:6px;overflow:hidden}
.kozak-rd .svc2-part.is-light .svc2-part-pic{width:100%;padding:0;border:0;cursor:zoom-in;aspect-ratio:1.12}
.kozak-rd .svc2-part.is-light .svc2-part-pic:focus-visible{outline-offset:-3px}
.kozak-rd .svc2-part.is-light .svc2-part-tx{align-items:center;text-align:center;padding-left:8px;padding-right:8px}
.kozak-rd .svc2-part.is-light .svc2-part-tx b{font-family:var(--font-serif);font-size:clamp(13.5px,1.02vw,14.8px)}
.kozak-rd .svc2-part.is-light .svc2-part-tx>span{display:block;font-size:clamp(12.6px,.95vw,13.6px)}
@media(max-width:1000px){.kozak-rd .svc2-part.is-light{grid-template-columns:minmax(0,1fr)}}
.kozak-rd .svc2-ba[hidden]{display:none}
.kozak-rd .svc2-ba{margin:0}
.kozak-rd .svc2-ba-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;
  border-radius:10px;overflow:hidden}
.kozak-rd .svc2-ba-half{position:relative;display:block;padding:0;border:0;cursor:zoom-in;
  background:#e9ebec;aspect-ratio:1.42;overflow:hidden}
.kozak-rd .svc2-ba-half img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kozak-rd .svc2-ba-half:hover img{transform:scale(1.04)}
.kozak-rd .svc2-ba-lb{position:absolute;top:10px;padding:5px 11px;border-radius:5px;
  font-family:var(--font-label);font-weight:600;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase}
.kozak-rd .svc2-ba-before{left:10px;background:rgba(6,14,19,.82);color:#fff}
.kozak-rd .svc2-ba-after{right:10px;background:var(--gold);color:var(--on-gold)}
.kozak-rd .svc2-ba-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:#0b141a;color:var(--gold-bright);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.8)}
.kozak-rd .svc2-ba-mid svg{width:17px;height:17px}
.kozak-rd .svc2-ba figcaption{margin-top:10px;font-family:var(--font-label);font-size:13.5px;color:#6b7076}
.kozak-rd .svc2-ba-nav,.kozak-rd .svc2-rev-nav{display:flex;align-items:center;gap:12px;margin-top:14px}
.kozak-rd .svc2-ba-arrow,.kozak-rd .svc2-rev-arrow{width:38px;height:38px;flex:none;border-radius:50%;
  border:1px solid rgba(201,162,74,.5);background:transparent;color:var(--gold-deep);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.kozak-rd .svc2-ba-arrow:hover,.kozak-rd .svc2-rev-arrow:hover{background:var(--gold);color:var(--on-gold)}
.kozak-rd .svc2-ba-arrow svg,.kozak-rd .svc2-rev-arrow svg{width:17px;height:17px}
.kozak-rd .svc2-ba-dots,.kozak-rd .svc2-rev-dots{display:flex;gap:7px}
.kozak-rd .svc2-ba-dot,.kozak-rd .svc2-rev-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(16,24,32,.22);cursor:pointer;transition:background .2s,transform .2s}
.kozak-rd .svc2-ba-dot.is-on,.kozak-rd .svc2-rev-dot.is-on{background:var(--gold);transform:scale(1.25)}

/* ---- results band (tile mockup): the copy and a button on the left, four
   finished photographs filling the band's height on the right ---- */
.kozak-rd .svc2-gal{background:#081217;padding:clamp(14px,1.4vw,20px) 0}
.kozak-rd .svc2-gal .wrap{display:grid;grid-template-columns:minmax(0,.29fr) minmax(0,.71fr);
  gap:clamp(18px,2.4vw,30px);align-items:center}
.kozak-rd .svc2-gal-copy h2{font-size:clamp(24px,2.6vw,33px);line-height:1.12;letter-spacing:-.014em;color:#fff}
.kozak-rd .svc2-gal-copy p{margin-top:12px;color:var(--ink);font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.45}
.kozak-rd .svc2-gal-copy .btn{margin-top:clamp(16px,1.8vw,24px)}
.kozak-rd .svc2-gal-row{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(var(--gal-cols,4),minmax(0,1fr));gap:clamp(5px,.6vw,8px)}
.kozak-rd .svc2-gal-row li{aspect-ratio:.94;border-radius:4px;overflow:hidden;background:#0d1c26}
.kozak-rd .svc2-gal-row img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kozak-rd .svc2-gal-row .svc2-ex-open:focus-visible{outline-offset:-3px}
@media(max-width:1000px){
  .kozak-rd .svc2-gal{padding:clamp(28px,5vw,40px) 0}
  .kozak-rd .svc2-gal .wrap{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){.kozak-rd .svc2-gal-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the light version (doors mockup): white ground, dark type; five in a row
   are taller than wide, as drawn */
.kozak-rd .svc2-gal.is-light{background:#fbfbfb}
.kozak-rd .svc2-gal.is-light .svc2-gal-copy h2{color:#10151a}
.kozak-rd .svc2-gal.is-light .svc2-gal-copy p{color:#464b51}
.kozak-rd .svc2-gal.is-light .svc2-gal-row li{background:#e9ebec}
.kozak-rd .svc2-gal-row.is-5 li{aspect-ratio:.78}
/* on a phone the fifth takes the whole last row rather than leave a gap */
@media(max-width:560px){.kozak-rd .svc2-gal-row.is-5 li:nth-child(5){grid-column:span 2;aspect-ratio:1.6}}

/* ---- before/after pairs band (painting mockup): the copy and a button on the
   left, two pairs side by side on a pale grey ground ---- */
.kozak-rd .svc2-pairs{background:#eceef1;color:#10151a;padding:clamp(14px,1.4vw,20px) 0}
.kozak-rd .svc2-pairs .wrap{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,32px);align-items:center}
/* the heading sits on one line, as drawn */
.kozak-rd .svc2-pairs-copy h2{font-size:clamp(22px,2vw,25px);line-height:1.12;letter-spacing:-.014em;color:#10151a}
.kozak-rd .svc2-pairs-copy p{margin-top:12px;color:#464b51;font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.45}
.kozak-rd .svc2-pairs-copy .btn{margin-top:clamp(16px,1.8vw,24px)}
.kozak-rd .svc2-pairs-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.kozak-rd .svc2-pairs .svc2-ba-pair{border-radius:5px}
.kozak-rd .svc2-pairs .svc2-ba-half{aspect-ratio:1.08}
/* on white (drywall); one pair alone spans the row with wide halves */
.kozak-rd .svc2-pairs.is-light{background:#fbfbfb}
.kozak-rd .svc2-pairs-row.is-1{grid-template-columns:minmax(0,1fr)}
.kozak-rd .svc2-pairs-row.is-1 .svc2-ba-half{aspect-ratio:1.8}
.kozak-rd .svc2-pairs.is-light .svc2-pairs-copy h2{font-size:clamp(24px,2.4vw,32px)}
@media(max-width:1000px){
  .kozak-rd .svc2-pairs{padding:clamp(28px,5vw,40px) 0}
  .kozak-rd .svc2-pairs .wrap{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){.kozak-rd .svc2-pairs-row{grid-template-columns:minmax(0,1fr)}}
/* the halves stay side by side on a phone here, unlike the carousel's */
@media(max-width:560px){
  .kozak-rd .svc2-pairs .svc2-ba-pair{grid-template-columns:1fr 1fr}
  .kozak-rd .svc2-pairs .svc2-ba-mid{display:flex}
}

/* ---- process ---- */
.kozak-rd .svc2-proc{background:#081217;padding:clamp(32px,4vw,54px) 0}
.kozak-rd .svc2-proc .eyebrow{color:var(--gold);letter-spacing:.16em;font-size:clamp(11px,1.05vw,13px)}
.kozak-rd .svc2-proc-head{margin-bottom:clamp(20px,2.6vw,34px)}
.kozak-rd .svc2-proc-head h2{margin-top:10px;font-size:clamp(24px,3vw,36px);line-height:1.1;letter-spacing:-.014em}
.kozak-rd .svc2-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(var(--step-cols,6),minmax(0,1fr));gap:clamp(10px,1.4vw,22px)}
.kozak-rd .svc2-steps li{position:relative;display:flex;flex-direction:column;gap:7px;padding-right:14px}
/* the connector is drawn on every step except the last in its row */
.kozak-rd .svc2-steps li:last-child::after,.kozak-rd .svc2-steps li:last-child::before{display:none}
.kozak-rd .svc2-steps li::after{content:"";position:absolute;top:19px;right:4px;
  width:calc(100% - 52px);height:1px;background:linear-gradient(90deg,var(--gold),rgba(201,162,74,.25));
  -webkit-mask:linear-gradient(90deg,#000 88%,transparent 88%);mask:linear-gradient(90deg,#000 88%,transparent 88%)}
.kozak-rd .svc2-steps li::before{content:"";position:absolute;top:15.5px;right:2px;
  width:8px;height:8px;border-top:1.6px solid var(--gold);border-right:1.6px solid var(--gold);
  transform:rotate(45deg)}
.kozak-rd .svc2-step-n{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1.6px solid var(--gold);color:var(--gold-bright);
  font-family:var(--font-label);font-weight:600;font-size:13.5px}
.kozak-rd .svc2-steps b{margin-top:4px;font-family:var(--font-label);font-weight:600;font-size:15px;color:#fff}
.kozak-rd .svc2-steps li>span:last-child{font-family:var(--font-label);font-size:13.2px;
  line-height:1.45;color:var(--ink-soft)}
/* solid arrows (tile, painting, doors mockups): a solid gold arrow after every
   number, the last one included, and a bolder ring */
.kozak-rd .svc2-proc.is-solid .svc2-step-n{border-width:2px;color:#fff;font-weight:700}
.kozak-rd .svc2-proc.is-solid .svc2-steps li::after{height:1.6px;background:var(--gold);-webkit-mask:none;mask:none}
@media(min-width:1181px){
  .kozak-rd .svc2-proc.is-solid .svc2-steps li:last-child::after,
  .kozak-rd .svc2-proc.is-solid .svc2-steps li:last-child::before{display:block}
}
/* the light version (tile, painting): white ground and a hairline between the
   steps that runs beside the text, not beside the circles */
.kozak-rd .svc2-proc.is-light{background:#fbfbfb;color:#10151a}
.kozak-rd .svc2-proc.is-light .eyebrow{color:var(--gold-deep)}
.kozak-rd .svc2-proc.is-light .svc2-proc-head h2{color:#10151a}
.kozak-rd .svc2-proc.is-light .svc2-steps{gap:22px 0}
.kozak-rd .svc2-proc.is-light .svc2-steps li{--spl:clamp(14px,1.8vw,26px);
  padding:0 clamp(8px,1vw,14px) 0 var(--spl)}
.kozak-rd .svc2-proc.is-light .svc2-steps li:first-child{--spl:0px}
.kozak-rd .svc2-proc.is-light .svc2-steps li+li{background:linear-gradient(rgba(16,24,32,.13),rgba(16,24,32,.13))
  no-repeat 0 56px/1px calc(100% - 56px)}
.kozak-rd .svc2-proc.is-light .svc2-step-n{background:#fff;color:#10151a}
.kozak-rd .svc2-proc.is-light .svc2-steps b{color:#10151a;font-size:clamp(15px,1.2vw,16.5px)}
.kozak-rd .svc2-proc.is-light .svc2-steps li>span:last-child{color:#464b51;font-size:clamp(13.6px,1.05vw,15px)}
.kozak-rd .svc2-proc.is-light .svc2-steps li::after{left:calc(var(--spl) + 50px);right:8px;width:auto}
.kozak-rd .svc2-proc.is-light .svc2-steps li::before{right:7px}
/* on navy the arrow runs from the ring to the end of the step, no hairlines */
.kozak-rd .svc2-proc.is-solid:not(.is-light) .svc2-steps li::after{left:50px;right:8px;width:auto}
.kozak-rd .svc2-proc.is-solid:not(.is-light) .svc2-steps li::before{right:7px}
.kozak-rd .svc2-proc.is-solid:not(.is-light) .svc2-steps b{font-size:clamp(15px,1.2vw,16.5px)}
.kozak-rd .svc2-proc.is-solid:not(.is-light) .svc2-steps li>span:last-child{font-size:clamp(13.6px,1.05vw,15px)}
@media(max-width:1180px){
  .kozak-rd .svc2-proc.is-light .svc2-steps li:nth-child(3n+1){--spl:0px;background:none}
}
@media(max-width:760px){
  .kozak-rd .svc2-proc.is-light .svc2-steps li:nth-child(3n+1){--spl:clamp(14px,1.8vw,26px);
    background:linear-gradient(rgba(16,24,32,.13),rgba(16,24,32,.13)) no-repeat 0 56px/1px calc(100% - 56px)}
  .kozak-rd .svc2-proc.is-light .svc2-steps li:nth-child(odd){--spl:0px;background:none}
}
@media(max-width:560px){
  /* one column: no step starts beside another, so no hairline and no indent
     (:nth-child(n) only to outrank the two-column rules above) */
  .kozak-rd .svc2-proc.is-light .svc2-steps li:nth-child(n){--spl:0px;background:none}
}

/* ---- recent projects ---- */
.kozak-rd .svc2-ex{background:var(--s2-bg);color:var(--s2-dark);padding:clamp(30px,3.6vw,48px) 0}
.kozak-rd .svc2-ex-grid{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  gap:clamp(22px,3.2vw,50px);align-items:center}
.kozak-rd .svc2-ex-copy h2{margin-top:10px;font-size:clamp(21px,2.4vw,29px);line-height:1.14;
  letter-spacing:-.014em;color:var(--s2-dark)}
.kozak-rd .svc2-ex-copy p{margin-top:10px;color:var(--s2-mid);font-size:clamp(14px,1.1vw,15.5px);line-height:1.5}
/* wide (accent walls mockup): the heading over five photographs in a row */
.kozak-rd .svc2-ex.is-wide .svc2-ex-grid{grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.6vw,22px)}
.kozak-rd .svc2-ex.is-wide .svc2-ex-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,.7vw,10px)}
.kozak-rd .svc2-ex.is-wide .svc2-ex-row li{aspect-ratio:1.55;border-radius:4px}
@media(max-width:760px){.kozak-rd .svc2-ex.is-wide .svc2-ex-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .svc2-ex.is-wide .svc2-ex-row li:nth-child(5){grid-column:span 2;aspect-ratio:2.2}}
.kozak-rd .svc2-ex-row{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.1vw,16px)}
.kozak-rd .svc2-ex-row li{border-radius:9px;overflow:hidden;background:#e9ebec;aspect-ratio:1.3}
.kozak-rd .svc2-ex-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.kozak-rd .svc2-ex-row img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kozak-rd .svc2-ex-open:hover img{transform:scale(1.04)}
/* both sit in an overflow:hidden box, which would clip the usual outer ring */
.kozak-rd .svc2-ex-open:focus-visible,.kozak-rd .svc2-ba-half:focus-visible{outline-offset:-3px}

/* ---- reviews + FAQ ---- */
.kozak-rd .svc2-rf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.kozak-rd .svc2-rev{position:relative;isolation:isolate;overflow:hidden;background:#081217;
  padding:clamp(30px,3.8vw,52px) 0 clamp(30px,3.8vw,52px) var(--gutter);
  padding-right:clamp(20px,3vw,44px)}
.kozak-rd .svc2-rev-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.kozak-rd .svc2-rev::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,14,19,.96) 0%,rgba(6,14,19,.9) 46%,rgba(6,14,19,.6) 100%)}
.kozak-rd .svc2-rev .eyebrow{color:var(--gold);letter-spacing:.16em;font-size:clamp(11px,1.05vw,13px)}
.kozak-rd .svc2-rev h2{margin-top:9px;font-size:clamp(24px,3vw,36px);line-height:1.1;letter-spacing:-.014em}
.kozak-rd .svc2-rev-note{margin-top:7px;color:var(--ink-soft);font-size:14.5px}
.kozak-rd .svc2-rev-stage{margin-top:clamp(16px,2vw,26px);max-width:430px}
.kozak-rd .svc2-rev-card{margin:0;background:#fff;border-radius:10px;padding:clamp(16px,1.8vw,24px);
  box-shadow:0 22px 44px -28px rgba(0,0,0,.85)}
.kozak-rd .svc2-rev-card[hidden]{display:none}
.kozak-rd .svc2-rev-stars{font-size:17px;letter-spacing:.09em;color:#f2a83a}
.kozak-rd .svc2-rev-card blockquote{margin:10px 0 0;font-size:14.6px;line-height:1.5;color:#3b4045}
.kozak-rd .svc2-rev-card figcaption{margin-top:12px;font-family:var(--font-label);font-size:13.4px;color:#6b7076}
.kozak-rd .svc2-rev-card figcaption span{display:block;margin-top:2px;font-size:12.4px;color:rgba(16,24,32,.42)}
.kozak-rd .svc2-rev-arrow{border-color:rgba(201,162,74,.55);color:var(--gold-bright)}
.kozak-rd .svc2-rev-dot{background:rgba(255,255,255,.3)}
/* "why choose KOZAK" beside the reviews (full home mockup): four columns,
   a gold outline icon over a two-line title over a short line, hairlines
   between them */
/* the list fills the height the reviews give the band and sits centred in
   it, so the white half does not end in an empty strip */
.kozak-rd .svc2-rwhy{display:flex}
.kozak-rd .svc2-rwhy .svc2-faq-in{display:flex;flex-direction:column;width:100%}
.kozak-rd .svc2-rwhy-list{flex:1;align-content:center;list-style:none;margin:clamp(18px,2.2vw,30px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.kozak-rd .svc2-rwhy-list li{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:6px clamp(6px,.6vw,9px);border-left:1px solid var(--s2-line)}
.kozak-rd .svc2-rwhy-list li:first-child{border-left:0}
.kozak-rd .svc2-rwic{width:clamp(34px,2.8vw,42px);height:clamp(34px,2.8vw,42px);color:var(--gold)}
.kozak-rd .svc2-rwhy-list b{margin-top:4px;font-family:var(--font-label);font-weight:600;
  font-size:clamp(14px,1.1vw,15.4px);line-height:1.25;color:var(--s2-dark)}
.kozak-rd .svc2-rwhy-list li>span{font-size:clamp(12.8px,.95vw,13.4px);line-height:1.45;color:var(--s2-mid)}
@media(max-width:560px){
  .kozak-rd .svc2-rwhy-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .kozak-rd .svc2-rwhy-list li:nth-child(odd){border-left:0}
}
/* The kitchen and bathroom mockups draw the arrows beside the card and the
   dots centred under it. With no page-width container the page margin is
   only the gutter, so the card steps in by an arrow's width and the left
   arrow lines up with the heading above. Every card shares one grid cell so
   the arrows never jump, the hidden ones stay invisible. Narrower, the row
   under the card stays. */
@media(min-width:1300px){
  .kozak-rd .svc2-rev-stage{position:relative;display:grid;margin-left:52px;margin-right:52px}
  /* the card is as tall as the longest review, so a short one sits centred
     in it rather than leaving an empty strip at the bottom */
  .kozak-rd .svc2-rev-card{grid-area:1/1;display:flex;flex-direction:column;justify-content:center}
  .kozak-rd .svc2-rev-card[hidden]{display:flex;visibility:hidden}
  .kozak-rd .svc2-rev-nav{grid-row:2;justify-content:center}
  .kozak-rd .svc2-rev-arrow{position:absolute;top:calc(50% - 11px);transform:translateY(-50%)}
  .kozak-rd .svc2-rev-arrow[data-rev-prev]{left:-52px}
  .kozak-rd .svc2-rev-arrow[data-rev-next]{right:-52px}
}

.kozak-rd .svc2-faq{background:var(--s2-bg);color:var(--s2-dark);
  padding:clamp(30px,3.8vw,52px) var(--gutter) clamp(30px,3.8vw,52px) clamp(20px,3vw,44px)}
.kozak-rd .svc2-faq h2{margin-top:9px;font-size:clamp(24px,3vw,36px);line-height:1.1;
  letter-spacing:-.014em;color:var(--s2-dark)}
.kozak-rd .svc2-faq-list{margin-top:clamp(16px,2vw,26px);display:flex;flex-direction:column;gap:9px}
.kozak-rd .svc2-faq-list details{background:var(--s2-card);border:1px solid var(--s2-line);border-radius:8px}
.kozak-rd .svc2-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;cursor:pointer;list-style:none;font-family:var(--font-label);
  font-size:14.6px;line-height:1.35;color:var(--s2-dark)}
.kozak-rd .svc2-faq-list summary::-webkit-details-marker{display:none}
.kozak-rd .svc2-faq-mk{position:relative;flex:none;width:15px;height:15px;color:var(--gold-deep)}
.kozak-rd .svc2-faq-mk::before,.kozak-rd .svc2-faq-mk::after{content:"";position:absolute;
  background:currentColor;transition:transform .25s,opacity .25s}
.kozak-rd .svc2-faq-mk::before{left:0;top:6.6px;width:15px;height:1.8px}
.kozak-rd .svc2-faq-mk::after{left:6.6px;top:0;width:1.8px;height:15px}
.kozak-rd .svc2-faq-list details[open] .svc2-faq-mk::after{transform:rotate(90deg);opacity:0}
.kozak-rd .svc2-faq-list details>div{padding:0 16px 15px;font-size:14.4px;line-height:1.6;color:var(--s2-mid)}

/* a service with no FAQ in its copy leaves the reviews as the grid's only
   child, and half a band. They take the whole band instead, centred, with the
   scrim even on both sides and in the site navy. Under 1000px every page is
   a single column already, so this stops at the same breakpoint. */
@media(min-width:1001px){
  .kozak-rd .svc2-rf-grid>.svc2-rev:only-child{grid-column:1/-1;background:var(--bg);text-align:center;
    padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)}
  .kozak-rd .svc2-rf-grid>.svc2-rev:only-child::before{background:linear-gradient(90deg,
    rgba(1,15,26,.8) 0%,rgba(1,15,26,.95) 30%,rgba(1,15,26,.95) 70%,rgba(1,15,26,.8) 100%)}
  .kozak-rd .svc2-rf-grid>.svc2-rev:only-child .svc2-rev-stage{max-width:600px;margin-left:auto;margin-right:auto}
  .kozak-rd .svc2-rf-grid>.svc2-rev:only-child .svc2-rev-nav{justify-content:center}
}

/* ---- related services ---- */
.kozak-rd .svc2-rel{background:var(--s2-bg);color:var(--s2-dark);padding:clamp(30px,3.6vw,48px) 0}
.kozak-rd .svc2-rel-grid{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  gap:clamp(22px,3.2vw,50px);align-items:center}
.kozak-rd .svc2-rel-copy h2{margin-top:10px;font-size:clamp(21px,2.4vw,29px);line-height:1.14;
  letter-spacing:-.014em;color:var(--s2-dark)}
.kozak-rd .svc2-rel-copy p{margin-top:10px;color:var(--s2-mid);font-size:15px;line-height:1.5}
.kozak-rd .svc2-rel-row{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.1vw,16px)}
.kozak-rd .svc2-rel-row a{display:flex;flex-direction:column;height:100%;background:var(--s2-card);
  border:1px solid var(--s2-line);border-radius:9px;overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.kozak-rd .svc2-rel-row a:hover{border-color:rgba(201,162,74,.55);transform:translateY(-3px);
  box-shadow:0 16px 30px -22px rgba(16,24,32,.5)}
.kozak-rd .svc2-rel-pic{display:block;aspect-ratio:1.7;overflow:hidden;background:#e9ebec}
.kozak-rd .svc2-rel-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kozak-rd .svc2-rel-row a:hover .svc2-rel-pic img{transform:scale(1.05)}
.kozak-rd .svc2-rel-tx{display:flex;flex-direction:column;gap:7px;padding:12px 13px 14px}
.kozak-rd .svc2-rel-tx b{font-family:var(--font-label);font-weight:600;font-size:14.6px;
  line-height:1.24;color:var(--s2-dark)}
.kozak-rd .svc2-rel-more{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);
  font-weight:600;font-size:11.8px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep)}
.kozak-rd .svc2-rel-more svg{width:14px;height:14px;transition:transform .25s}
.kozak-rd .svc2-rel-row a:hover .svc2-rel-more svg{transform:translateX(4px)}

/* ---- closing band ---- */
.kozak-rd .svc2-end{position:relative;isolation:isolate;overflow:hidden;background:#081217;
  padding:clamp(28px,3.4vw,46px) 0}
.kozak-rd .svc2-end-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:70% 50%}
.kozak-rd .svc2-end::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(6,14,19,.97) 0%,rgba(6,14,19,.92) 40%,rgba(6,14,19,.72) 68%,rgba(6,14,19,.8) 100%)}
.kozak-rd .svc2-end .wrap{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"copy btns marks";
  gap:14px clamp(16px,2.4vw,40px);align-items:center}
.kozak-rd .svc2-end-copy{grid-area:copy}
.kozak-rd .svc2-end .eyebrow{color:var(--gold);letter-spacing:.14em;font-size:clamp(10.5px,1vw,12.5px)}
.kozak-rd .svc2-end h2{margin-top:7px;font-size:clamp(20px,2.3vw,29px);line-height:1.14;letter-spacing:-.014em;text-wrap:balance}
.kozak-rd .svc2-end p{margin-top:7px;color:var(--ink-soft);font-size:clamp(14px,1.1vw,15.5px);line-height:1.45}
.kozak-rd .svc2-end-btns{grid-area:btns;display:flex;flex-wrap:wrap;gap:11px}
.kozak-rd .svc2-end-marks{grid-area:marks;list-style:none;margin:0;padding:0;max-width:390px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px clamp(12px,1.4vw,20px)}
.kozak-rd .svc2-end-marks li{display:flex;align-items:center;gap:10px}
/* the flat version (tile mockup): plain navy, the phone in an outlined box */
.kozak-rd .svc2-end.is-flat{background:var(--bg);padding:clamp(24px,2.4vw,34px) 0}
.kozak-rd .svc2-end.is-flat::before{display:none}
/* flat, but over the dimmed hero photograph (flooring mockup) */
.kozak-rd .svc2-end.is-flat.has-photo{background:#081217}
.kozak-rd .svc2-end.is-flat.has-photo::before{display:block;background:
  linear-gradient(90deg,rgba(6,14,19,.95) 0%,rgba(6,14,19,.9) 45%,rgba(6,14,19,.84) 100%)}
.kozak-rd .svc2-end.is-flat h2{margin-top:0;font-size:clamp(21px,2.1vw,29px)}
.kozak-rd .svc2-end.is-flat .svc2-end-btns .btn{padding:12px 20px;font-size:13px;border-radius:4px}
.kozak-rd .svc2-end.is-flat .cta-phone{border:1.5px solid rgba(244,240,232,.78);color:var(--ink);
  text-transform:none;letter-spacing:.01em;font-size:14.5px;gap:9px}
.kozak-rd .svc2-end.is-flat .cta-phone svg{width:18px;height:18px;color:var(--gold-bright)}
.kozak-rd .svc2-end.is-flat .cta-phone:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
/* the heading and its line each on one line, as drawn; the marks take the rest */
@media(min-width:1181px){
  .kozak-rd .svc2-end.is-flat .wrap{grid-template-columns:auto auto minmax(0,1fr);column-gap:clamp(14px,1.4vw,22px)}
  .kozak-rd .svc2-end.is-flat .svc2-end-btns .btn{padding:12px 18px}
  .kozak-rd .svc2-end.is-flat .svc2-end-marks{max-width:none;column-gap:16px;flex-wrap:nowrap}
  /* 27px keeps the longest closing line ("Let's Build Your Vision Together.")
     on one row with the buttons and both marks, as every flat mockup draws it */
  .kozak-rd .svc2-end.is-flat h2{font-size:clamp(21px,2.1vw,27px)}
  .kozak-rd .svc2-end.is-flat h2,.kozak-rd .svc2-end.is-flat p{white-space:nowrap}
  .kozak-rd .svc2-end.is-flat p{font-size:14.5px}
}

/* the stacked version (outdoor mockup): heading, line and button on the left
   over a yard photograph, three marks along the bottom right. The photograph
   is bright, so the scrim is heavier than the kitchen one. */
.kozak-rd .svc2-end.is-stack{padding:clamp(30px,3.2vw,44px) 0}
/* the palms, the pool and the lounge in the frame, as in the mockup; solid
   navy under the copy, the picture clear on the right, darker along the
   bottom where the marks sit */
.kozak-rd .svc2-end.is-stack .svc2-end-photo{object-position:50% 42%}
.kozak-rd .svc2-end.is-stack::before{background:
  linear-gradient(90deg,rgba(6,14,19,.97) 0%,rgba(6,14,19,.92) 26%,rgba(6,14,19,.38) 48%,rgba(6,14,19,.08) 100%),
  linear-gradient(0deg,rgba(6,14,19,.72) 0%,rgba(6,14,19,0) 48%)}
.kozak-rd .svc2-end.is-stack .wrap{display:flex;align-items:flex-end;justify-content:space-between;
  gap:22px clamp(20px,3vw,48px);flex-wrap:wrap}
.kozak-rd .svc2-end.is-stack .svc2-end-copy{max-width:430px}
.kozak-rd .svc2-end.is-stack h2{margin-top:0;font-size:clamp(25px,2.7vw,36px);line-height:1.08;text-wrap:initial}
.kozak-rd .svc2-end.is-stack .btn{margin-top:clamp(14px,1.6vw,22px)}
.kozak-rd .svc2-end.is-stack .svc2-end-marks{max-width:none;justify-content:flex-end;gap:14px clamp(20px,2.8vw,44px)}
.kozak-rd .svc2-end.is-stack .svc2-end-marks span{font-size:14px;color:var(--ink)}
@media(max-width:1000px){.kozak-rd .svc2-end.is-stack .svc2-end-marks{justify-content:flex-start}}

/* the light version (handyman mockup): white on the left with the heading,
   a line and the button; the closing picture on the right half, fading in
   from the white, a handwritten line over it */
.kozak-rd .svc2-end.is-light{background:#fbfbfb;color:#10151a;padding:clamp(34px,3.8vw,54px) 0}
.kozak-rd .svc2-end.is-light .svc2-end-photo{inset:0 0 0 auto;width:52%;object-position:40% 50%}
.kozak-rd .svc2-end.is-light::before{inset:0 0 0 auto;width:52%;
  background:linear-gradient(90deg,#fbfbfb 0%,rgba(251,251,251,.72) 16%,rgba(251,251,251,0) 46%)}
.kozak-rd .svc2-end.is-light .wrap{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"copy btns .";
  column-gap:clamp(24px,3.4vw,52px)}
.kozak-rd .svc2-end.is-light h2{margin-top:0;color:#10151a;font-size:clamp(23px,2.3vw,30px);line-height:1.18}
.kozak-rd .svc2-end.is-light p{margin-top:12px;color:#464b51;max-width:25em}
.kozak-rd .svc2-end-script{position:absolute;z-index:1;right:clamp(14px,2.6vw,52px);top:50%;
  transform:translateY(-50%) rotate(-8deg);text-align:right;font-family:var(--font-script);
  font-size:clamp(20px,2vw,32px);line-height:1.08;color:#2a2116;text-shadow:0 1px 14px rgba(255,255,255,.85)}
@media(max-width:1000px){
  .kozak-rd .svc2-end.is-light .svc2-end-photo,.kozak-rd .svc2-end.is-light::before,
  .kozak-rd .svc2-end-script{display:none}
  .kozak-rd .svc2-end.is-light .wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "btns"}
}

/* the list version (accent walls mockup): heading and a longer line, the
   button, four marks listed down the right */
.kozak-rd .svc2-end.is-list .wrap{grid-template-columns:minmax(0,1fr) auto auto}
.kozak-rd .svc2-end.is-list .svc2-end-copy{max-width:600px}
.kozak-rd .svc2-end.is-list h2{margin-top:0;font-size:clamp(23px,2.5vw,33px)}
.kozak-rd .svc2-end.is-list p{margin-top:9px}
.kozak-rd .svc2-endl-marks{grid-area:marks;list-style:none;margin:0;padding:0;display:grid;gap:9px}
.kozak-rd .svc2-endl-marks li{display:flex;align-items:center;gap:11px;font-family:var(--font-label);font-size:13.6px;color:var(--ink)}
.kozak-rd .svc2-endl-marks .svc2-mic{width:24px;height:24px}

/* the review version (drywall mockup): the heading and a line with the
   estimate button beside them and the outlined phone under them on the left,
   one review card on the right, over a dimmed interior */
.kozak-rd .svc2-end.is-review{padding:clamp(28px,3.2vw,44px) 0}
.kozak-rd .svc2-end.is-review::before{background:
  linear-gradient(90deg,rgba(6,14,19,.9) 0%,rgba(6,14,19,.76) 48%,rgba(6,14,19,.5) 100%)}
.kozak-rd .svc2-end.is-review .wrap{grid-template-columns:minmax(0,1fr) minmax(0,400px);grid-template-areas:none;
  gap:22px clamp(20px,3vw,48px);align-items:center}
.kozak-rd .svc2-endr-copy{display:grid;grid-template-columns:auto auto;justify-content:start;
  grid-template-areas:"text gold" "phone .";gap:16px clamp(16px,2vw,28px);align-items:end}
.kozak-rd .svc2-endr-text{grid-area:text}
.kozak-rd .svc2-end.is-review h2{margin-top:0;font-size:clamp(22px,2.2vw,30px);line-height:1.12}
.kozak-rd .svc2-endr-copy .btn-gold{grid-area:gold;padding:12px 20px;font-size:13px;border-radius:4px}
.kozak-rd .svc2-endr-copy .cta-phone{grid-area:phone;justify-self:start;padding:12px 20px;border-radius:4px;
  border:1.5px solid rgba(244,240,232,.78);color:var(--ink);text-transform:none;letter-spacing:.01em;font-size:15px;gap:9px}
.kozak-rd .svc2-endr-copy .cta-phone svg{width:18px;height:18px;color:var(--gold-bright)}
.kozak-rd .svc2-endr-copy .cta-phone:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
.kozak-rd .svc2-endr-card{margin:0;background:#fff;color:#10151a;border-radius:8px;
  padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,26px);box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.kozak-rd .svc2-endr-card blockquote{margin:8px 0 0;font-size:clamp(13.8px,1.02vw,14.6px);line-height:1.5;color:#3b4045}
.kozak-rd .svc2-endr-card figcaption{margin-top:10px;font-family:var(--font-label);font-weight:600;font-size:13.6px;color:#10151a}
.kozak-rd .svc2-endr-card figcaption span{font-weight:400;color:#6b7076}
@media(min-width:1181px){.kozak-rd .svc2-end.is-review h2{white-space:nowrap;font-size:clamp(22px,1.95vw,27px)}}
@media(max-width:1000px){.kozak-rd .svc2-end.is-review .wrap{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){
  .kozak-rd .svc2-endr-copy{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "gold" "phone"}
  .kozak-rd .svc2-endr-copy .btn-gold{justify-self:start}
}

/* ---- reviews beside the closing call (doors mockup): the reviews on white,
   one card between two arrows; the service photograph with a navy card over
   it on the right. Both sides line up with the page's wrap. ---- */
.kozak-rd .svc2-rc{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);background:#fff;color:#10151a}
.kozak-rd .svc2-rc-rev{display:flex;align-items:center;
  padding:clamp(24px,2.6vw,36px) clamp(14px,1.6vw,24px) clamp(24px,2.6vw,36px) var(--gutter)}
.kozak-rd .svc2-rc-in{width:100%}
.kozak-rd .svc2-rc .eyebrow{color:var(--gold-deep);letter-spacing:.16em;font-size:clamp(11px,1.05vw,13px)}
.kozak-rd .svc2-rc-in h2{margin-top:8px;font-size:clamp(22px,2.2vw,29px);line-height:1.1;letter-spacing:-.014em;color:#10151a}
.kozak-rd .svc2-rc-note{margin-top:6px;color:#464b51;font-size:clamp(14px,1.1vw,15.5px);line-height:1.45}
.kozak-rd .svc2-rc-stage{margin-top:clamp(12px,1.4vw,18px);display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1vw,14px)}
.kozak-rd .svc2-rc-arrow{width:38px;height:38px;flex:none;border-radius:50%;border:1.5px solid var(--gold);
  background:#fff;color:#10151a;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s}
.kozak-rd .svc2-rc-arrow:hover{background:var(--gold);color:var(--on-gold)}
.kozak-rd .svc2-rc-arrow svg{width:17px;height:17px}
/* on wide screens the arrows sit outside the card as drawn, the card
   stepped in by an arrow's width so the left one stays inside the band (the
   page margin is only the gutter now); the band stays low */
@media(min-width:1300px){
  .kozak-rd .svc2-rc-stage{position:relative;display:block;margin-left:52px;margin-right:52px}
  .kozak-rd .svc2-rc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}
  .kozak-rd .svc2-rc-arrow[data-rev-prev]{left:-52px}
  .kozak-rd .svc2-rc-arrow[data-rev-next]{right:-52px}
}
/* every card sits in the same cell, so the band is as tall as the longest
   review and does not jump as they change; the hidden ones stay invisible */
.kozak-rd .svc2-rc-cards{display:grid}
.kozak-rd .svc2-rc-card{grid-area:1/1;margin:0;background:#fff;border:1px solid rgba(16,24,32,.12);
  border-radius:8px;padding:clamp(14px,1.5vw,20px) clamp(16px,1.8vw,24px)}
.kozak-rd .svc2-rc-card[hidden]{display:block;visibility:hidden}
.kozak-rd .svc2-rc-stars{font-size:17px;letter-spacing:.09em;color:#f2a83a}
.kozak-rd .svc2-rc-card blockquote{margin:6px 0 0;font-size:clamp(13.8px,1.02vw,14.6px);line-height:1.5;color:#3b4045}
.kozak-rd .svc2-rc-card figcaption{margin-top:10px;font-family:var(--font-label);font-weight:600;font-size:13.6px;color:#10151a}
.kozak-rd .svc2-rc-card figcaption span{font-weight:400;color:#6b7076}
.kozak-rd .svc2-rc-cta{position:relative;isolation:isolate;overflow:hidden;background:#081217;
  display:flex;align-items:center;justify-content:flex-end;
  padding:clamp(16px,1.8vw,24px) var(--gutter) clamp(16px,1.8vw,24px) clamp(20px,3vw,40px)}
.kozak-rd .svc2-rc-photo{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.kozak-rd .svc2-rc-box{width:min(100%,560px);display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(16px,2vw,28px);align-items:center;padding:clamp(20px,2.2vw,30px);border-radius:8px;
  background:rgba(3,14,20,.94);color:#fff;box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.kozak-rd .svc2-rc-copy h2{font-size:clamp(21px,2vw,28px);line-height:1.14;letter-spacing:-.014em;color:#fff}
.kozak-rd .svc2-rc-copy p{margin-top:10px;color:var(--ink-soft);font-size:clamp(14px,1.05vw,15px);line-height:1.45}
.kozak-rd .svc2-rc-copy .btn{margin-top:16px}
.kozak-rd .svc2-rc-marks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.kozak-rd .svc2-rc-marks li{display:flex;align-items:center;gap:10px;font-family:var(--font-label);
  font-size:13px;line-height:1.3;color:var(--ink)}
.kozak-rd .svc2-rc-marks .svc2-mic{width:28px;height:28px}
@media(max-width:1000px){
  .kozak-rd .svc2-rc{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .svc2-rc-rev,.kozak-rd .svc2-rc-cta{padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)}
  .kozak-rd .svc2-rc-cta{justify-content:center;padding-top:clamp(40px,8vw,80px);padding-bottom:clamp(40px,8vw,80px)}
}
@media(max-width:560px){
  .kozak-rd .svc2-rc-box{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .svc2-rc-arrow{width:32px;height:32px}
}

/* ---- the full-size viewer ---- */
.kozak-rd .svc2-lb{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,4vw,54px);background:rgba(3,9,13,.93);
  backdrop-filter:blur(3px);cursor:zoom-out}
.kozak-rd .svc2-lb[hidden]{display:none}
.kozak-rd .svc2-lb img{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:8px;box-shadow:0 40px 90px -40px #000}
.kozak-rd .svc2-lb-close{position:absolute;top:clamp(10px,2vw,26px);right:clamp(10px,2vw,26px);
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(8,18,23,.7);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kozak-rd .svc2-lb-close:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.kozak-rd .svc2-lb-close svg{width:19px;height:19px}

/* ---- breakpoints ---- */
@media(max-width:1180px){
  .kozak-rd .svc2-inc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kozak-rd .svc2-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px}
  .kozak-rd .svc2-steps li:nth-child(3n)::after,.kozak-rd .svc2-steps li:nth-child(3n)::before{display:none}
  /* named through .svc2-marks: the strip's own ".svc2-marks span{display:flex}"
     outranks a bare class, so this rule never took and the script stayed on
     every screen - on a 320px phone it ran into "Boca Raton and Surrounding
     Areas" */
  .kozak-rd .svc2-marks .svc2-script2{display:none}
}
@media(max-width:1000px){
  .kozak-rd .svc2-photo{object-position:58% 50%}
  .kozak-rd .svc2-hero::before{background:
    linear-gradient(180deg,rgba(1,15,26,.88) 0%,rgba(1,15,26,.74) 44%,rgba(1,15,26,.92) 100%)}
  .kozak-rd .svc2-copy{max-width:none}
  .kozak-rd .svc2-script{display:none}
  /* .svc2-inc.is-cards .svc2-head is named too: its desktop two-column rule
     is more specific than .svc2-head, so on every card-style service page the
     heading and its sentence stayed side by side on phones - the sentence
     three words to a line in a strip down the right. */
  .kozak-rd .svc2-head,.kozak-rd .svc2-inc.is-cards .svc2-head,.kozak-rd .svc2-why-grid,.kozak-rd .svc2-tr-grid,
  .kozak-rd .svc2-ex-grid,.kozak-rd .svc2-rel-grid{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .svc2-head{align-items:start}
  .kozak-rd .svc2-why-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0}
  .kozak-rd .svc2-why-list li:nth-child(odd){border-left:0}
  .kozak-rd .svc2-rf-grid{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .svc2-rev,.kozak-rd .svc2-faq{padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)}
  .kozak-rd .svc2-rev-stage{max-width:none}
  /* .svc2-end.is-list .wrap is named too: its desktop three-column rule
     outranks the plain one, so on the accent-walls page the two empty columns
     stayed and their gaps took ~32px off the copy on a phone */
  .kozak-rd .svc2-end .wrap,.kozak-rd .svc2-end.is-list .wrap{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"copy" "btns" "marks"}
}
@media(max-width:760px){
  .kozak-rd .svc2-inc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .svc2-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .svc2-steps li::after,.kozak-rd .svc2-steps li::before{display:none}
  .kozak-rd .svc2-ex-row,.kozak-rd .svc2-rel-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .svc2-marks .wrap{display:block}
  .kozak-rd .svc2-marks li{flex:0 0 calc(50% - 12px)}
}
@media(max-width:560px){
  .kozak-rd .svc2-why-list{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .svc2-why-list li{border-left:0;padding:0}
  .kozak-rd .svc2-steps{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .svc2-ba-pair{grid-template-columns:1fr;gap:4px}
  .kozak-rd .svc2-ba-mid{display:none}
  .kozak-rd .svc2-cta .btn,.kozak-rd .svc2-end-btns .btn{flex:1 1 100%;justify-content:center}
  .kozak-rd .svc2-marks li{flex:0 0 100%}
}

/* ---------- city finder ----------
   The first question on an area page is "do you cover me?", so it gets
   answered before anything else. Revealed by JS only - without it the full
   list below is still there and still crawlable. */
.kozak-rd .ar-find-band{background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:clamp(22px,2.6vw,32px) 0}
.kozak-rd .ar-find[hidden]{display:none}
.kozak-rd .ar-find-box{display:flex;align-items:center;gap:13px;max-width:640px;margin:0 auto;
  padding:4px 6px 4px 18px;border:1px solid var(--line);border-radius:100px;background:var(--bg);
  transition:border-color .25s,box-shadow .25s}
.kozak-rd .ar-find-box:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,74,.12)}
.kozak-rd .ar-find-box>svg{width:19px;height:19px;flex:none;color:var(--gold)}
.kozak-rd .ar-find input{flex:1;min-width:0;background:none;border:0;outline:0;padding:14px 0;
  font-family:var(--font-body);font-size:16px;color:var(--ink)}
.kozak-rd .ar-find input::placeholder{color:var(--ink-mute)}
.kozak-rd .ar-find input::-webkit-search-cancel-button{display:none}
.kozak-rd .ar-find-clear{width:38px;height:38px;flex:none;border:0;border-radius:50%;background:none;color:var(--ink-mute);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s,background .2s}
.kozak-rd .ar-find-clear:hover{color:var(--ink);background:rgba(200,216,240,.07)}
.kozak-rd .ar-find-clear svg{width:16px;height:16px}
/* display:flex would otherwise beat the UA [hidden] rule */
.kozak-rd .ar-find-clear[hidden]{display:none}
.kozak-rd .ar-find-out{max-width:640px;margin:11px auto 0;text-align:center;font-family:var(--font-label);
  text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--ink-mute);min-height:1em}
.kozak-rd .ar-find-out b{color:var(--gold)}

/* ---------- our coverage: four county cards (new/makets/areas_kozak.jpeg) ----------
   One card per county, north to south. The mockup lifts the home county out of
   the row with a gold border and a flag on the photograph; the other three are
   identical but quiet. Everything below the photo is a column so the gold
   button sits on the floor of every card whatever the town count is. */
/* the mockup runs this band tight under the hero - nothing like the standard
   section rhythm, so the padding is set here rather than inherited */
.kozak-rd .ar-coast-sec{padding-top:clamp(34px,3.9vw,56px);padding-bottom:clamp(34px,3.9vw,56px)}
.kozak-rd .ar-coast-sec .sec-head{max-width:880px;margin-bottom:clamp(26px,3vw,38px)}
.kozak-rd .cnty{--cnty-gap:clamp(14px,1.5vw,22px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cnty-gap);align-items:stretch}
.kozak-rd .cnty-card{position:relative;display:flex;flex-direction:column;min-width:0;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid #053a58;border-radius:14px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s,transform .3s}
/* display:flex would otherwise beat the UA [hidden] rule when the finder filters */
.kozak-rd .cnty-card[hidden]{display:none}
/* .reveal.in resets transform, so the hover lift needs one class more than it */
.kozak-rd .cnty .cnty-card:hover{border-color:rgba(201,162,74,.45);box-shadow:var(--shadow);transform:translateY(-4px)}

/* the home county stands a little proud of the row, as it does in the mockup.
   Negative margin rather than scale(): scaling would fight .reveal's slide-in
   and soften the type on the one card that most wants to look crisp. */
.kozak-rd .cnty-card.is-hq{margin:-10px 0;border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(201,162,74,.3),0 30px 64px -34px rgba(201,162,74,.55)}

.kozak-rd .cnty-pic{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3)}
.kozak-rd .cnty-pic img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.7,.25,1)}
.kozak-rd .cnty-card:hover .cnty-pic img{transform:scale(1.05)}
/* keeps the flag readable whatever the sky is doing in the photograph */
.kozak-rd .cnty-pic::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,15,26,.3),rgba(1,15,26,0) 44%,rgba(1,15,26,.22))}

.kozak-rd .cnty-flag{position:absolute;top:11px;right:11px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  border-radius:9px;padding:7px 10px;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.09em;
  font-size:10px;font-weight:700;line-height:1;white-space:nowrap}
.kozak-rd .cnty-flag svg{width:13px;height:13px;flex:none}
.kozak-rd .cnty-flag.is-home{background:var(--gold-bright);color:var(--on-gold);box-shadow:0 10px 24px -12px rgba(0,0,0,.85)}
/* HVHZ is a building-code fact, so it keeps the photo's own dark and gold type */
.kozak-rd .cnty-flag.is-hvhz{background:rgba(1,15,26,.86);color:var(--gold-bright);border:1px solid rgba(201,162,74,.34)}

.kozak-rd .cnty-body{display:flex;flex-direction:column;flex:1;padding:16px 16px 17px}
/* the one place card titles take the display serif: this mockup sets them in it */
.kozak-rd .cnty-body h3{font-family:var(--font-serif);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(19px,1.62vw,23px);line-height:1.16}
.kozak-rd .cnty-body h3 a{transition:color .25s}
.kozak-rd .cnty-card:hover h3 a{color:var(--gold-bright)}
.kozak-rd .cnty-ctx{margin-top:9px;color:var(--ink-soft);font-size:14px;line-height:1.55}
.kozak-rd .cnty-cities{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0 18px}
.kozak-rd .cnty-city{border:1px solid var(--line-soft);border-radius:100px;padding:6px 11px;
  background:rgba(255,255,255,.028);font-size:12.5px;line-height:1.15;color:var(--ink-soft);transition:.22s}
.kozak-rd .cnty-city:hover{border-color:var(--gold);color:var(--gold-bright);
  background:color-mix(in srgb,var(--gold) 10%,transparent)}
.kozak-rd .cnty-city[hidden]{display:none}
/* 10.5px is not a stylistic whim: "Explore Palm Beach County" has to stay on
   one line inside a quarter of a 1200px row, as it does in the mockup. The
   two-column breakpoint below has the room and takes the label back up. */
.kozak-rd .cnty-go{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:9px;padding:13px 8px;background:var(--gold-bright);color:var(--on-gold);
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;font-weight:700;
  line-height:1.1;text-align:center;transition:background .25s,box-shadow .25s}
.kozak-rd .cnty-go svg{width:15px;height:15px;flex:none;transition:transform .25s}
.kozak-rd .cnty-go:hover{background:var(--gold);box-shadow:0 14px 30px -16px rgba(201,162,74,.9)}
.kozak-rd .cnty-card:hover .cnty-go svg{transform:translateX(4px)}

.kozak-rd .ar-empty{margin:30px 0 0;text-align:center;color:var(--ink-soft);font-size:15px}
.kozak-rd .ar-empty[hidden]{display:none}
.kozak-rd .ar-empty a{color:var(--gold);border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}

/* ---------- the same page, one county at a time ----------
   On the client's instruction (2026-09-22) every county page is built from the
   hub's own parts: the same hero, the same coverage cards, the same wind-zone
   band, the same closing CTA. Exactly two things differ, and they are here.
   1. The hub's artwork is a drawing of the whole coast with the map in it, so a
      county carries its own photograph instead - busier than the artwork, hence
      the extra stop of darkening under the copy. */
.kozak-rd .ah-hero.is-photo .ah-photo{filter:brightness(.82) saturate(.92)}
/* The county pictures (2026-09-24) are drawn 3:1 with their subject in the
   right half. On a narrow screen the hub's 32% framing would show only the
   empty water on their left, and the full-strength scrim hid what was left,
   so a county page frames the subject and lets a little more of it through. */
@media(max-width:1080px){
  .kozak-rd .ah-hero.is-photo .ah-photo{background-position:70% center}
  .kozak-rd .ah-hero.is-photo::before{background:
    linear-gradient(180deg,rgba(1,15,26,.8) 0%,rgba(1,15,26,.6) 45%,rgba(1,15,26,.9) 100%)}
}
.kozak-rd .ah-hero .crumb{margin-bottom:13px;text-shadow:0 1px 10px rgba(0,0,0,.7)}
/* 2. A county holds four towns or nine, not always four, so the row takes what
      fits and a short last row centres under the ones above rather than hanging
      off the left edge. Town cards carry no pill list, so the blurb needs its
      own floor or the button would sit right under it on the tallest card. */
.kozak-rd .cnty.is-cities{display:flex;flex-wrap:wrap;justify-content:center}
.kozak-rd .cnty.is-cities>.cnty-card{flex:0 0 calc(25% - var(--cnty-gap) * 0.75)}
.kozak-rd .cnty.is-cities .cnty-ctx{margin-bottom:17px}

@media(max-width:1080px){
  /* four columns stop holding two town pills per row, so the row halves */
  .kozak-rd .cnty{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .cnty.is-cities>.cnty-card{flex-basis:calc(50% - var(--cnty-gap) * 0.5)}
  .kozak-rd .cnty-card.is-hq{margin:0}
  .kozak-rd .cnty-go{font-size:12px;letter-spacing:.08em;gap:9px;padding:14px 12px}
}
@media(max-width:620px){
  .kozak-rd .cnty{grid-template-columns:1fr}
  .kozak-rd .cnty.is-cities>.cnty-card{flex-basis:100%}
  .kozak-rd .cnty-body{padding:15px 15px 16px}
}


/* ---------- worth knowing: the wind-zone explainer (new/makets/areas_kozak.jpeg) ----------
   The mockup turns this into the page's one LIGHT band, and a cool near-white
   one - not the warm ivory the transformations and contact pages use. Sampled
   off the mockup: ground #fdfdfd, cards #f4f5f6, ink almost black, and two
   semantic accents that are deliberately not the brand gold, because the point
   of the block is that the two halves of the coast are governed differently.
   Every colour is a token on the section, so the whole band can be re-toned
   (to ivory, say) from these six lines. */
.kozak-rd .hz{
  --hz-bg:#fdfdfd; --hz-card:#f4f5f6; --hz-line:rgba(16,24,32,.07);
  --hz-ink:#0e1418; --hz-mid:#33383d; --hz-soft:#4f545a;
  --hz-green:#2c8659; --hz-blue:#2563eb;
  background:var(--hz-bg);color:var(--hz-ink);
  padding:clamp(22px,2.3vw,32px) 0 clamp(24px,2.6vw,36px)}
.kozak-rd .hz .eyebrow{color:var(--gold-deep);letter-spacing:.14em;font-size:12px}

/* heading left, its one sentence right - both starting on the same line */
.kozak-rd .hz-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:start;margin-bottom:clamp(18px,2vw,26px)}
.kozak-rd .hz-head h2{margin-top:12px;font-size:clamp(25px,3.3vw,38px);line-height:1.1;
  color:var(--hz-ink);letter-spacing:-.015em;text-wrap:balance}
/* pushed down by the eyebrow's own height so the first lines of the two
   columns sit on one baseline, the way the mockup aligns them */
.kozak-rd .hz-head.is-plain{grid-template-columns:minmax(0,1fr);gap:10px}
.kozak-rd .hz-head.is-plain .hz-intro{padding-top:0;max-width:70ch}
.kozak-rd .hz-intro{padding-top:clamp(4px,2.4vw,32px);color:var(--hz-mid);
  font-size:clamp(15px,1.15vw,16.5px);line-height:1.6}

.kozak-rd .hz-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
/* photograph a third of the card, text the rest - the card's height is set by
   the text and the picture crops to it, which is how the mockup's squares read */
.kozak-rd .hz-card{display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);
  background:var(--hz-card);border:1px solid var(--hz-line);border-radius:10px;overflow:hidden}
.kozak-rd .hz-pic{display:block;overflow:hidden;background:#e7e9ec}
.kozak-rd .hz-pic img{display:block;width:100%;height:100%;min-height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.7,.25,1)}
.kozak-rd .hz-card:hover .hz-pic img{transform:scale(1.04)}

/* The mockup's card is a wide, low rectangle with a square photograph. Its
   container is 1360px wide; ours is 1200, so the same paragraph takes more
   lines and the card would run tall. These sizes buy the lines back - the card
   keeps the mockup's shape instead of the mockup's exact millimetres. */
.kozak-rd .hz-body{padding:clamp(16px,1.6vw,22px)}
.kozak-rd .hz-top{display:flex;align-items:center;gap:clamp(10px,1vw,14px)}
.kozak-rd .hz-ic{flex:none;width:clamp(30px,2.7vw,38px);height:clamp(30px,2.7vw,38px);
  display:flex;align-items:center;justify-content:center;color:var(--hz-green)}
.kozak-rd .hz-ic svg{width:100%;height:100%}
.kozak-rd .hz-names{min-width:0}
.kozak-rd .hz-card h3{font-family:var(--font-serif);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(18px,1.8vw,24px);line-height:1.15;color:var(--hz-ink)}
/* sized so the long one - "Inside the High-Velocity Hurricane Zone" - stays on
   the single line the mockup gives it, beside a 38px icon */
.kozak-rd .hz-tag{display:block;margin-top:4px;font-family:var(--font-label);font-weight:700;
  text-transform:uppercase;letter-spacing:.035em;font-size:clamp(10px,.88vw,11.8px);
  line-height:1.25;color:var(--hz-green)}
.kozak-rd .hz-card.is-hvhz .hz-ic,.kozak-rd .hz-card.is-hvhz .hz-tag{color:var(--hz-blue)}
.kozak-rd .hz-card p{margin-top:clamp(10px,1vw,14px);color:var(--hz-soft);
  font-size:clamp(13.5px,1vw,14.5px);line-height:1.55}

@media(max-width:1000px){
  /* two of these side by side stop holding a readable measure before the
     header does, so the cards stack first and keep their picture beside them.
     Full width, the text alone would leave the card 140px tall and the photo a
     thin strip, so the card keeps a floor under it. */
  .kozak-rd .hz-cards{grid-template-columns:1fr}
  .kozak-rd .hz-card{grid-template-columns:minmax(0,27%) minmax(0,1fr);min-height:clamp(150px,20vw,190px)}
}
@media(max-width:760px){
  .kozak-rd .hz-head{grid-template-columns:1fr;gap:14px}
  .kozak-rd .hz-intro{padding-top:0}
}
@media(max-width:560px){
  .kozak-rd .hz-card{grid-template-columns:1fr}
  .kozak-rd .hz-pic{aspect-ratio:16/9}
}
/* city tiles (county + city pages) */
.kozak-rd .ar-city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.kozak-rd .ar-city-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kozak-rd .ar-city-grid{grid-template-columns:1fr}}
.kozak-rd .ar-tile{display:flex;align-items:center;gap:13px;background:var(--bg-2);border:1px solid var(--line-soft);
  border-radius:10px;padding:16px 18px;transition:.25s}
.kozak-rd .ar-tile:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)}
.kozak-rd .ar-tile-ic{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--gold);transition:.25s}
.kozak-rd .ar-tile-ic svg{width:17px;height:17px}
.kozak-rd .ar-tile:hover .ar-tile-ic{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.kozak-rd .ar-tile-name{font-size:15.5px;color:var(--ink);line-height:1.3}
.kozak-rd .ar-tile-go{width:17px;height:17px;margin-left:auto;flex:none;color:var(--ink-mute);transition:.25s}
.kozak-rd .ar-tile:hover .ar-tile-go{color:var(--gold);transform:translateX(3px)}
.kozak-rd .ar-tile.is-prio{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 9%,var(--bg-2)),var(--bg-2));border-color:var(--line)}
/* cross-link strip */
.kozak-rd .ar-near{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:26px;border-top:1px solid var(--line-soft)}
.kozak-rd .ar-near-lb{width:100%;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.16em;
  font-size:11px;color:var(--gold);margin-bottom:6px}
.kozak-rd .ar-near a{border:1px solid var(--line);border-radius:100px;padding:8px 15px;font-size:14px;
  color:var(--ink-soft);transition:.22s}
.kozak-rd .ar-near a:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}

/* ============================================================
   404 - light and short. State it, offer a way out, stop.
   ============================================================ */
.kozak-rd .nf{position:relative;overflow:hidden;padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,96px);
  background:radial-gradient(90% 120% at 50% 0%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 62%),var(--bg)}
.kozak-rd .nf .wrap{position:relative;z-index:1;text-align:center;max-width:760px}
.kozak-rd .nf-code{display:block;font-family:var(--font-poster);font-weight:700;line-height:.9;
  font-size:clamp(96px,20vw,220px);letter-spacing:.01em;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold-bright) 85%,transparent),color-mix(in srgb,var(--gold) 18%,transparent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .kozak-rd .nf-code{color:var(--gold);-webkit-text-fill-color:currentColor}
}
.kozak-rd .nf h1{font-size:clamp(26px,3.8vw,42px);margin-top:6px}
.kozak-rd .nf-lead{color:var(--ink-soft);font-size:17px;margin:14px auto 0;max-width:52ch}
.kozak-rd .nf-actions{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.kozak-rd .nf-search{display:flex;align-items:center;gap:10px;margin:32px auto 0;max-width:440px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:100px;padding:6px 6px 6px 18px}
.kozak-rd .nf-search svg{width:18px;height:18px;color:var(--gold);flex:none}
.kozak-rd .nf-search input{flex:1;min-width:0;background:none;border:0;color:var(--ink);
  font-family:var(--font-body);font-size:15px;padding:10px 0}
.kozak-rd .nf-search input::placeholder{color:var(--ink-mute)}
.kozak-rd .nf-search input:focus{outline:none}
.kozak-rd .nf-search button{flex:none;border:0;cursor:pointer;border-radius:100px;padding:11px 20px;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:12.5px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--on-gold);transition:transform .2s}
.kozak-rd .nf-search button:hover{transform:translateY(-1px)}
.kozak-rd .nf-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  margin-top:36px;padding-top:26px;border-top:1px solid var(--line-soft)}
.kozak-rd .nf-links-lb{width:100%;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;color:var(--gold);margin-bottom:6px}
.kozak-rd .nf-links a{border:1px solid var(--line);border-radius:100px;padding:9px 16px;
  font-size:14px;color:var(--ink-soft);transition:.22s}
.kozak-rd .nf-links a:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
.kozak-rd .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   BOOKING WIDGET (parts/booking.php) - service pages
   ============================================================ */
/* booking */
.kozak-rd .ct-book{padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px);background:var(--bg)}
.kozak-rd .ct-book-head{max-width:620px}
.kozak-rd .ct-book-head h2{font-size:clamp(27px,3.4vw,40px);margin-top:14px}
.kozak-rd .ct-book-head p{color:var(--ink-soft);margin-top:12px;font-size:16.5px}
/* the widget renders its own light UI - give it a clean light card to sit in */
.kozak-rd .ct-widget{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:clamp(14px,2vw,24px);box-shadow:var(--shadow);min-height:220px;color:#222}
.kozak-rd .ct-widget iframe{width:100%!important;border:0;display:block;border-radius:8px}
.kozak-rd .ct-nojs{color:#333;font-size:15px;padding:18px}
.kozak-rd .ct-nojs a{color:var(--gold-deep);font-weight:600}

/* ============================================================
   SHARED OUTRO (parts/outro.php)
   Rendered on every page, including legacy templates whose <body>
   has no .kozak-rd class - so this wrapper must establish its own
   typographic and colour context rather than inherit the page's.
   ============================================================ */
.kozak-rd.rd-outro{background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:17px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;text-align:left}
.kozak-rd.rd-outro *{box-sizing:border-box}
.kozak-rd.rd-outro img{max-width:100%;height:auto;display:block}
.kozak-rd.rd-outro a{color:inherit;text-decoration:none}
.kozak-rd.rd-outro p,.kozak-rd.rd-outro h2,.kozak-rd.rd-outro h3,.kozak-rd.rd-outro h5,
.kozak-rd.rd-outro ul,.kozak-rd.rd-outro blockquote,.kozak-rd.rd-outro figure{margin:0}
.kozak-rd.rd-outro ul{padding:0;list-style:none}
/* legacy style.css gives blockquote a blue rule/box - neutralise it here */
.kozak-rd.rd-outro blockquote{border:0;padding:0;background:none;quotes:none;font-style:normal}
.kozak-rd.rd-outro blockquote::before,.kozak-rd.rd-outro blockquote::after{content:none}
.kozak-rd.rd-outro figcaption{color:inherit}
.kozak-rd.rd-outro h2,.kozak-rd.rd-outro h3{font-family:var(--font-display);font-weight:500;line-height:1.1;letter-spacing:-.015em}
/* legacy style.css styles a generic .btn - keep ours from inheriting it */
.kozak-rd.rd-outro .btn{text-transform:uppercase;box-shadow:none;border-radius:2px;text-align:center;width:auto;height:auto}
.kozak-rd.rd-outro .btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--on-gold);
  box-shadow:0 12px 28px -12px rgba(201,162,74,.6)}
.kozak-rd.rd-outro .btn-ghost{background:none;border-color:var(--line);color:var(--ink)}

/* footer */
.kozak-rd .rd-footer{background:#010a12;border-top:1px solid var(--line);padding:56px 0 24px}
.kozak-rd .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px}
.kozak-rd .foot-brand p{color:var(--ink-mute);font-size:14.5px;max-width:34ch;margin-top:14px}
.kozak-rd .soc-label{display:block;margin-top:22px;font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.18em;font-size:11px;color:var(--gold)}
.kozak-rd .foot-soc{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.kozak-rd .foot-soc a{width:47px;height:47px;border:1px solid var(--line);border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:var(--gold);background:var(--bg-2);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s,color .25s,border-color .25s,box-shadow .25s}
.kozak-rd .foot-soc a:hover{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--on-gold);
  border-color:var(--gold-bright);transform:translateY(-3px);box-shadow:0 10px 22px -10px rgba(201,162,74,.75)}
.kozak-rd .foot-soc svg{width:24px;height:24px}
@media(max-width:520px){.kozak-rd .foot-soc a{width:48px;height:48px}.kozak-rd .foot-soc svg{width:22px;height:22px}}
/* Get in Touch card */
.kozak-rd .ccard{background:radial-gradient(120% 110% at 15% 0%,color-mix(in srgb,var(--gold) 11%,transparent),transparent 62%),var(--bg-2);
  border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:4px}
.kozak-rd .ccard .cc-ic{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--gold);background:var(--bg);transition:.25s}
.kozak-rd .ccard .cc-ic svg{width:20px;height:20px}
.kozak-rd .ccard .cc-ic.sm{width:32px;height:32px;border:0;background:none}
.kozak-rd .ccard .cc-ic.sm svg{width:17px;height:17px}
.kozak-rd .cc-phone{display:flex;align-items:center;gap:12px;padding:4px 0 14px;border-bottom:1px solid var(--line-soft);margin-bottom:8px}
.kozak-rd .cc-phone .cc-txt small{display:block;font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.1em;font-size:10px;color:var(--ink-mute)}
.kozak-rd .cc-phone .cc-txt b{display:block;font-family:var(--font-poster);font-weight:600;font-size:24px;
  line-height:1.15;color:var(--gold-bright);letter-spacing:.01em;margin-top:3px}
.kozak-rd .cc-phone:hover .cc-ic{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.kozak-rd .cc-phone:hover .cc-txt b{color:var(--gold)}
.kozak-rd .cc-row{display:flex;align-items:flex-start;gap:9px;padding:7px 0;color:var(--ink-soft);
  font-size:14px;line-height:1.45;transition:color .2s}
.kozak-rd .cc-row .cc-ic{margin-top:-4px}
.kozak-rd a.cc-row:hover{color:var(--gold-bright)}
.kozak-rd .cc-hours b{color:var(--ink);font-weight:600}
.kozak-rd .ccard .cc-btn{margin-top:16px;width:100%;justify-content:center;font-size:13px;padding:14px 18px;color:var(--on-gold)}
.kozak-rd .ccard .cc-btn:hover{color:var(--on-gold)}
@media(max-width:900px){.kozak-rd .fcol-contact{grid-column:1/-1}}
.kozak-rd .fcol h5{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.11em;font-size:12px;color:var(--gold);margin:0 0 14px}
/* direct children only - the Get in Touch card styles its own links */
.kozak-rd .fcol > a,.kozak-rd .fcol > p{display:block;color:var(--ink-soft);font-size:14.5px;padding:6px 0}
.kozak-rd .fcol > a:hover{color:var(--gold-bright)}
.kozak-rd .fcol .ct{display:flex;gap:9px;align-items:flex-start}
.kozak-rd .fcol .ct svg{width:16px;height:16px;color:var(--gold);margin-top:5px;flex:none}
.kozak-rd .foot-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:42px;padding-top:22px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.kozak-rd .foot-bot p{color:var(--ink-mute);font-size:13px}
.kozak-rd .foot-bot .rrb{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.11em;font-size:12px;color:var(--gold)}
@media(max-width:900px){.kozak-rd .foot-grid{grid-template-columns:1fr 1fr;gap:30px}.kozak-rd .foot-brand{grid-column:1/-1}}
@media(max-width:520px){.kozak-rd .foot-grid{grid-template-columns:1fr}}
/* reveal */
.kozak-rd .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.3,1)}
.kozak-rd .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.kozak-rd .reveal{opacity:1;transform:none;transition:none}}
.kozak-rd :focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

/* ============================================================
   COUNTY PAGES - photo hero, "the place" block, photo credits
   ============================================================ */
.kozak-rd .cty-hero{position:relative;isolation:isolate;padding:clamp(96px,11vw,150px) 0 clamp(46px,5.5vw,76px);overflow:hidden}
.kozak-rd .cty-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* Two washes: a vertical one so the type always has ground under it, and a
   warm one from the left so the photo reads as part of the palette. */
.kozak-rd .cty-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(1,10,18,.86) 0%,rgba(1,10,18,.42) 45%,rgba(1,10,18,.88) 100%),
             linear-gradient(90deg,rgba(2,18,30,.9) 6%,rgba(2,18,30,.26) 55%,rgba(2,18,30,.55) 100%)}
.kozak-rd .cty-hero.is-flat{background:var(--bg-2)}
.kozak-rd .cty-hero .wrap{position:relative}
.kozak-rd .cty-hero h1{font-size:clamp(31px,5vw,58px);margin-top:16px;text-shadow:0 2px 26px rgba(0,0,0,.5)}
.kozak-rd .cty-hero .lead{margin-top:18px;max-width:60ch;color:var(--ink);font-size:17.5px;line-height:1.62;
  text-shadow:0 1px 14px rgba(0,0,0,.75)}
.kozak-rd .cty-hero .crumb{text-shadow:0 1px 10px rgba(0,0,0,.7)}
.kozak-rd .cty-hero .crumb{margin-bottom:22px}

.kozak-rd .cty-place-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(30px,4vw,64px);align-items:center}
.kozak-rd .cty-place-copy h2{font-size:clamp(26px,3.4vw,40px);margin-top:16px;max-width:18ch}
.kozak-rd .cty-place-copy>p{margin-top:18px;color:var(--ink-soft);font-size:16.5px;line-height:1.72;max-width:60ch}
.kozak-rd .cty-known{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.kozak-rd .cty-known-lb{display:block;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.16em;
  font-size:10.5px;font-weight:600;color:var(--gold)}
.kozak-rd .cty-known ul{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px}
.kozak-rd .cty-known li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink-soft)}
.kozak-rd .cty-known li svg{width:15px;height:15px;flex:none;color:var(--gold)}

/* the two supporting photographs, offset so the pair reads as a scrapbook
   rather than a stock grid */
.kozak-rd .cty-place-pics{display:grid;gap:18px}
.kozak-rd .cty-pic{margin:0;position:relative;border-radius:14px;overflow:hidden;border:1px solid #053a58;background:var(--bg-2)}
.kozak-rd .cty-pic:first-child{transform:translateY(-16px)}
.kozak-rd .cty-pic:last-child{margin-left:clamp(0px,4vw,54px)}
.kozak-rd .cty-pic-img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.kozak-rd .cty-pic:hover .cty-pic-img{transform:scale(1.035)}
.kozak-rd .cty-pic figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 13px;font-size:12px;line-height:1.5;
  color:rgba(200,216,240,.94);text-shadow:0 1px 8px rgba(0,0,0,.7);
  background:linear-gradient(180deg,transparent,rgba(1,8,15,.55) 45%,rgba(1,8,15,.93))}

@media(max-width:900px){
  .kozak-rd .cty-place-grid{grid-template-columns:1fr;gap:32px}
  .kozak-rd .cty-place-copy h2{max-width:none}
  .kozak-rd .cty-place-pics{grid-template-columns:1fr 1fr;gap:14px}
  .kozak-rd .cty-pic:first-child,.kozak-rd .cty-pic:last-child{transform:none;margin-left:0}
  }
@media(max-width:560px){
  .kozak-rd .cty-place-pics{grid-template-columns:1fr}
  .kozak-rd .cty-known ul{grid-template-columns:1fr}
}


/* ---------- city bento on the county pages ----------
   Reuses the services tile (.bt) wholesale so the two grids read as one
   system. Sizes come from kozak_city_bento_sizes(), which keeps the cell
   total divisible by four; dense packing is the safety net if a county's
   city count ever changes. */
.kozak-rd .bento.is-cities{grid-auto-flow:row dense}
/* the client's priority markets keep a permanent gold edge */
.kozak-rd .bt.is-prio{border-color:rgba(201,162,74,.5)}
.kozak-rd .bt.is-prio .ic{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}

/* ---------- article + sticky estimate card ----------
   align-items:start is what makes position:sticky work inside the grid -
   a stretched grid item has no room to move. */
.kozak-rd .cty-body{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(28px,4vw,58px);align-items:start}
.kozak-rd .cty-aside{position:sticky;top:104px;display:grid;gap:14px}
.kozak-rd .ca-card{padding:24px 22px 22px}
.kozak-rd .ca-card .cc-num{font-size:clamp(24px,2.2vw,29px)}
.kozak-rd .ca-trust{list-style:none;margin:0;padding:16px 20px;border:1px solid #053a58;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));display:grid;gap:11px}
.kozak-rd .ca-trust li{display:flex;align-items:center;gap:9px;font-family:var(--font-label);font-size:12.5px;
  letter-spacing:.02em;color:var(--ink-soft)}
.kozak-rd .ca-trust li svg{width:14px;height:14px;color:var(--gold);flex:none}
.kozak-rd .ca-trust .rating{padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.kozak-rd .ca-trust .rating a{display:flex;align-items:center;gap:8px;transition:color .25s}
.kozak-rd .ca-trust .rating a:hover{color:var(--gold-bright)}
.kozak-rd .ca-trust .st{color:var(--gold);letter-spacing:.06em;font-size:12px}
.kozak-rd .ca-trust .rating b{color:var(--ink);font-size:14px}
.kozak-rd .ca-trust .rc{color:var(--ink-mute);font-size:12px}
@media(max-width:1040px){
  .kozak-rd .cty-body{grid-template-columns:1fr;gap:34px}
  .kozak-rd .cty-aside{position:static;grid-template-columns:1fr 1fr;align-items:start}
}
@media(max-width:680px){
  .kozak-rd .cty-aside{grid-template-columns:1fr}
}

/* photograph breaking the long article */
.kozak-rd .rd-longform .lf-shot{margin:34px 0;border-radius:14px;overflow:hidden;border:1px solid #053a58;background:var(--bg-2)}
.kozak-rd .rd-longform .lf-shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.kozak-rd .rd-longform .lf-shot figcaption{padding:11px 16px 13px;font-size:12.5px;color:var(--ink-mute);
  border-top:1px solid var(--line-soft);background:rgba(0,0,0,.2)}

/* ---------- Areas mega menu ----------
   CSS-only: :hover opens it for the mouse, :focus-within for the keyboard, so
   it needs no script and works if JS fails. The panel's own padding-top forms
   the bridge across the gap, otherwise the menu closes as the cursor leaves. */
.kozak-rd .rd-nav-item{position:relative;display:flex;align-items:center}
.kozak-rd nav.rd-nav .rd-nav-item>a{display:inline-flex;align-items:center;gap:5px}
.kozak-rd .rd-caret{width:13px;height:13px;opacity:.6;transition:transform .25s,opacity .25s}
.kozak-rd .rd-nav-item:hover .rd-caret,.kozak-rd .rd-nav-item:focus-within .rd-caret{transform:rotate(180deg);opacity:1}
.kozak-rd .rd-mega{position:absolute;top:100%;left:50%;z-index:120;width:min(900px,calc(100vw - 32px));
  padding-top:16px;transform:translateX(-50%) translateY(6px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s,transform .22s,visibility .22s}
.kozak-rd .rd-nav-item:hover .rd-mega,.kozak-rd .rd-nav-item:focus-within .rd-mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* the panel sits on the header's own ground - the bar's deep navy, not the
   lighter blue it had, which read as a different surface under the bar */
.kozak-rd .rd-mega-card{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 22px;
  padding:22px 24px;border:1px solid var(--line);border-radius:12px;
  background:rgba(1,15,26,.97);background:color-mix(in srgb,#010f1a 97%,transparent);box-shadow:0 34px 70px -34px rgba(0,0,0,.9)}
.kozak-rd .rd-mega-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.kozak-rd nav.rd-nav .rd-mega a{text-transform:none;letter-spacing:0;font-family:var(--font-body);
  font-size:13.5px;color:var(--ink-mute);padding:4px 0;white-space:normal}
.kozak-rd nav.rd-nav .rd-mega a:hover{color:var(--gold-bright)}
.kozak-rd nav.rd-nav .rd-mega-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:600;
  color:var(--gold);padding-bottom:9px;margin-bottom:5px;border-bottom:1px solid var(--line-soft)}
.kozak-rd nav.rd-nav .rd-mega-h:hover{color:var(--gold-bright)}
.kozak-rd .rd-mega-h span{font-size:10px;color:var(--ink-mute);border:1px solid var(--line-soft);
  border-radius:100px;padding:1px 7px;flex:none}
.kozak-rd nav.rd-nav .rd-mega-all{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--line-soft);
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--gold)}
.kozak-rd .rd-mega-all svg{width:14px;height:14px;transition:transform .25s}
.kozak-rd .rd-mega-all:hover svg{transform:translateX(4px)}
/* nested county links in the mobile drawer */
.kozak-rd .drawer a.dr-sub{font-size:13px;text-transform:none;letter-spacing:0;padding-left:18px;color:var(--ink-mute)}
@media(max-width:1100px){ .kozak-rd .rd-mega{display:none} }
@media(prefers-reduced-motion:reduce){ .kozak-rd .rd-mega{transition:none} }

/* ============================================================
   SERVICES HUB - what's included, coverage band, FAQ
   Added 2026-08-24. The section-header gap is inherited from
   .sec-head, so none of these grids carry a top margin.
   ============================================================ */

/* --- what every job includes --- */
.kozak-rd .svc-inc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kozak-rd .svc-i{position:relative;background:var(--bg-2);border:1px solid var(--line-soft);
  border-radius:6px;padding:26px 24px 28px;overflow:hidden;
  transition:border-color .3s,transform .3s,background .3s}
/* hairline that fills along the top edge on hover - the same gold-sweep idiom
   the service tiles use, so the two blocks read as one family */
.kozak-rd .svc-i::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transform:scaleX(0);transform-origin:left center;transition:transform .45s ease}
.kozak-rd .svc-i:hover{border-color:var(--line);transform:translateY(-3px);background:var(--bg-3)}
.kozak-rd .svc-i:hover::before{transform:scaleX(1)}
.kozak-rd .svc-i-ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid var(--line);border-radius:5px;background:rgba(201,162,74,.07);color:var(--gold);
  margin-bottom:18px;transition:background .3s,color .3s}
.kozak-rd .svc-i:hover .svc-i-ic{background:rgba(201,162,74,.14);color:var(--gold-bright)}
.kozak-rd .svc-i-ic svg{width:23px;height:23px}
.kozak-rd .svc-i h3{font-size:19px;line-height:1.25;margin-bottom:9px}
.kozak-rd .svc-i p{color:var(--ink-soft);font-size:15px;line-height:1.62}
@media(max-width:960px){.kozak-rd .svc-inc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.kozak-rd .svc-inc{grid-template-columns:1fr}}

/* --- coverage band --- */
.kozak-rd .svc-cov{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,54px);
  align-items:center;background:var(--bg-2);border:1px solid var(--line-soft);
  border-radius:8px;padding:clamp(28px,3.6vw,46px)}
.kozak-rd .svc-cov-main h2{font-size:clamp(25px,2.9vw,34px);margin-top:13px}
.kozak-rd .svc-cov-main p{color:var(--ink-soft);margin-top:15px;max-width:52ch}
.kozak-rd .svc-cov-main .btn{margin-top:26px}
.kozak-rd .svc-cov-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.kozak-rd .svc-cov-list a{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;
  padding:15px 18px;background:var(--bg-3);border:1px solid var(--line-soft);border-radius:5px;
  transition:border-color .28s,transform .28s,background .28s}
.kozak-rd .svc-cov-list a:hover{border-color:var(--line);transform:translateX(4px);background:#2a2318}
.kozak-rd .svc-cov-list b{font-family:var(--font-display);font-weight:500;font-size:17px;color:var(--ink)}
.kozak-rd .svc-cov-list span{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.08em;
  font-size:10.5px;color:var(--ink-mute)}
.kozak-rd .svc-cov-list svg{width:16px;height:16px;color:var(--gold);transition:transform .28s}
.kozak-rd .svc-cov-list a:hover svg{transform:translateX(3px)}
@media(max-width:860px){.kozak-rd .svc-cov{grid-template-columns:1fr}}

/* --- FAQ ---
   No open/close height animation: <details> keeps its content out of the box
   model while closed, so a grid-rows transition has nothing to animate. The
   answer fades in instead, which needs no JS and degrades to plain text. */
.kozak-rd .faq{max-width:880px;margin-left:auto;margin-right:auto;
  border-top:1px solid var(--line-soft)}
.kozak-rd .faq-i{border-bottom:1px solid var(--line-soft)}
.kozak-rd .faq-i summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 4px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.35;
  color:var(--ink);transition:color .25s}
.kozak-rd .faq-i summary::-webkit-details-marker{display:none}
.kozak-rd .faq-i summary:hover{color:var(--gold-bright)}
.kozak-rd .faq-i summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.kozak-rd .faq-i summary svg{width:19px;height:19px;flex:none;color:var(--gold);transition:transform .3s}
.kozak-rd .faq-i[open] summary{color:var(--gold-bright)}
.kozak-rd .faq-i[open] summary svg{transform:rotate(45deg)}
.kozak-rd .faq-a{padding:0 4px 22px;animation:faqIn .34s ease both}
.kozak-rd .faq-a p{color:var(--ink-soft);font-size:15.5px;line-height:1.68;max-width:70ch}
.kozak-rd .faq-a a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.kozak-rd .faq-a a:hover{color:var(--gold-bright)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .kozak-rd .faq-a{animation:none}
  .kozak-rd .svc-i,.kozak-rd .svc-i::before,.kozak-rd .svc-cov-list a{transition:none}
}
/* Below ~520px "Palm Beach County" wraps to two lines and the count beside it
   makes the rows ragged; stack the count under the name and let the arrow
   span both rows instead. */
@media(max-width:520px){
  .kozak-rd .svc-cov-list a{grid-template-columns:1fr auto;row-gap:2px;column-gap:12px}
  .kozak-rd .svc-cov-list b{grid-column:1;grid-row:1}
  .kozak-rd .svc-cov-list span{grid-column:1;grid-row:2}
  .kozak-rd .svc-cov-list svg{grid-column:2;grid-row:1/3;align-self:center}
}

/* Simple dropdown for a menu item that has children - same shell as the Areas
   mega menu, narrowed. Two columns once a list gets long enough that one
   column would run off the bottom of the viewport. */
.kozak-rd .rd-mega.is-simple{width:min(304px,calc(100vw - 32px))}
.kozak-rd .rd-mega.is-simple.is-2col{width:min(660px,calc(100vw - 32px))}
.kozak-rd .rd-mega.is-simple .rd-mega-card{grid-template-columns:1fr;gap:0}
.kozak-rd .rd-mega.is-simple .rd-mega-col{gap:0}
.kozak-rd nav.rd-nav .rd-mega.is-simple a{padding:8px 9px;border-radius:4px;line-height:1.35;
  transition:background .2s,color .2s}
.kozak-rd nav.rd-nav .rd-mega.is-simple a:hover{background:rgba(201,162,74,.09)}
.kozak-rd .rd-mega.is-simple.is-2col .rd-mega-col{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px}

/* ---- the page you are on, marked in the dropdowns and the drawer ----
   Kept quiet: gold text, and one small gold accent - a dot beside a city, a
   thin gold edge on a service, a gold rule under a county. A county whose city
   is being viewed only gets its rule warmed, so the path reads at a glance. */
.kozak-rd nav.rd-nav .rd-mega a.is-here{color:var(--gold-bright)}
.kozak-rd nav.rd-nav .rd-mega:not(.is-simple) .rd-mega-col>a.is-here:not(.rd-mega-h)::before{
  content:"";position:absolute;left:-11px;top:50%;width:5px;height:5px;margin-top:-2.5px;
  border-radius:50%;background:var(--gold)}
.kozak-rd nav.rd-nav .rd-mega-h.is-here{color:var(--gold-bright);border-bottom-color:var(--gold)}
.kozak-rd nav.rd-nav .rd-mega-h.is-path{border-bottom-color:rgba(201,162,74,.55)}
.kozak-rd nav.rd-nav .rd-mega.is-simple a.is-here{background:rgba(201,162,74,.1);box-shadow:inset 2px 0 0 var(--gold)}
/* the mobile drawer: the same navy as the bar, the current item in gold */
.kozak-rd .drawer{background:var(--bg)}
.kozak-rd .drawer a.current,.kozak-rd .drawer a.is-here{color:var(--gold-bright)}
.kozak-rd .drawer a.dr-sub.is-path{color:var(--ink-soft)}
.kozak-rd .drawer a.dr-sub.is-here{position:relative}
.kozak-rd .drawer a.dr-sub.is-here::before{content:"";position:absolute;left:6px;top:50%;width:5px;height:5px;
  margin-top:-2.5px;border-radius:50%;background:var(--gold)}

/* ============================================================
   SINGLE SERVICE PAGES
   Added 2026-08-24. Prose reuses .rd-story-body, the hero reuses
   .cty-hero, so only the parts with no equivalent live here.
   ============================================================ */

/* --- hero: the service's own line icon above the title --- */
.kozak-rd .svc-hero-ic{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;
  border:1px solid var(--line);border-radius:6px;background:rgba(201,162,74,.1);color:var(--gold-bright);
  backdrop-filter:blur(3px);margin-bottom:18px}
.kozak-rd .svc-hero-ic svg{width:27px;height:27px}
.kozak-rd .svc-hero h1{font-size:clamp(32px,4.6vw,56px)}
/* County photos are bright sky-and-water; service photos are interiors that are
   already dark, and the county scrim wiped them out completely. Lighter wash,
   kept heavy on the left where the type sits. */
.kozak-rd .svc-hero::before{
  background:linear-gradient(180deg,rgba(1,10,18,.78) 0%,rgba(1,10,18,.30) 48%,rgba(1,10,18,.84) 100%),
             linear-gradient(90deg,rgba(2,18,30,.88) 0%,rgba(2,18,30,.62) 38%,rgba(2,18,30,.12) 72%,rgba(2,18,30,.34) 100%)}
.kozak-rd .svc-hero .cty-hero-img{filter:brightness(1.1) saturate(1.04)}

/* --- intro + "what this covers" card --- */
.kozak-rd .svc-intro{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:clamp(28px,4vw,58px);align-items:start}
.kozak-rd .svc-intro-copy h2{font-size:clamp(26px,3.4vw,38px);margin-top:13px}
.kozak-rd .svc-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.kozak-rd .svc-mini img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;
  border:1px solid var(--line-soft)}
/* sticky only works because the grid parent sets align-items:start */
.kozak-rd .svc-covers{position:sticky;top:104px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;padding:26px 24px 24px}
.kozak-rd .svc-covers-lb{display:block;font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--gold);margin-bottom:16px}
.kozak-rd .svc-covers ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:11px}
.kozak-rd .svc-covers li{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;
  color:var(--ink-soft);font-size:15px;line-height:1.45}
.kozak-rd .svc-covers li svg{width:15px;height:15px;color:var(--gold);margin-top:4px}
.kozak-rd .svc-covers .btn{width:100%;justify-content:center}
.kozak-rd .svc-covers-note{color:var(--ink-mute);font-size:13px;line-height:1.5;margin-top:14px}
@media(max-width:960px){
  .kozak-rd .svc-intro{grid-template-columns:1fr;gap:32px}
  .kozak-rd .svc-covers{position:static}
}

/* --- trust band --- */
.kozak-rd .svc-trust{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,54px);
  align-items:center;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;
  padding:clamp(28px,3.6vw,48px);position:relative;overflow:hidden}
/* the same gold weave the closing CTA panel uses, so the two read as a family */
.kozak-rd .svc-trust::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(135deg,rgba(201,162,74,.05) 0 2px,transparent 2px 9px)}
.kozak-rd .svc-trust>*{position:relative;z-index:1}
.kozak-rd .svc-trust-head h2{font-size:clamp(26px,3.1vw,36px);margin-top:13px}
.kozak-rd .svc-trust-head p{color:var(--ink-soft);margin-top:15px;max-width:48ch}
.kozak-rd .svc-trust-head .btn{margin-top:24px}
.kozak-rd .svc-trust-head .btn svg{width:17px;height:17px}
.kozak-rd .svc-plats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kozak-rd .svc-plats li{background:var(--bg-3);border:1px solid var(--line-soft);border-radius:6px;
  padding:16px 17px;display:grid;gap:5px;transition:border-color .28s,transform .28s}
.kozak-rd .svc-plats li:hover{border-color:var(--line);transform:translateY(-2px)}
.kozak-rd .svc-plat-n{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;
  font-size:10.5px;color:var(--ink-mute)}
.kozak-rd .svc-plat-r{display:flex;align-items:baseline;gap:8px}
.kozak-rd .svc-plat-r b{font-family:var(--font-label);font-size:23px;color:var(--gold-bright);line-height:1}
.kozak-rd .svc-plat-r .stars{color:var(--gold);font-size:12px;letter-spacing:1px}
.kozak-rd .svc-plat-c{font-size:12.5px;color:var(--ink-mute)}
@media(max-width:860px){.kozak-rd .svc-trust{grid-template-columns:1fr}}
@media(max-width:420px){.kozak-rd .svc-plats{grid-template-columns:1fr}}

/* --- gallery mosaic ---
   Full-bleed: the section head stays inside .wrap, the mosaic is a sibling of it
   and runs the whole page width. Because of that the column count has to climb
   with the viewport, otherwise four tiles across a 1900px screen turn the
   gallery into billboards and push it several screens tall. */
.kozak-rd .svc-gal-sec>.wrap{margin-bottom:clamp(26px,3.2vw,42px)}
.kozak-rd .svc-gal{--gal-gap:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gal-gap);
  padding-inline:var(--gal-gap);grid-auto-flow:row dense}
.kozak-rd .svc-gal a{position:relative;display:block;overflow:hidden;border-radius:6px;aspect-ratio:1;
  border:1px solid var(--line-soft);background:var(--bg-2)}
/* every fifth tile doubles up, alternating sides - see kozak_gallery_layout() */
.kozak-rd .svc-gal a.is-big{grid-column:span 2;grid-row:span 2}
.kozak-rd .svc-gal a.is-big.at-right{grid-column:3/span 2}
.kozak-rd .svc-gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.kozak-rd .svc-gal a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(1,10,18,.5));
  opacity:0;transition:opacity .35s}
.kozak-rd .svc-gal a:hover img,.kozak-rd .svc-gal a:focus-visible img{transform:scale(1.07)}
.kozak-rd .svc-gal a:hover::after,.kozak-rd .svc-gal a:focus-visible::after{opacity:1}
.kozak-rd .svc-gal-z{position:absolute;right:10px;bottom:10px;width:32px;height:32px;display:flex;
  align-items:center;justify-content:center;border-radius:50%;background:rgba(1,10,18,.72);
  border:1px solid var(--line);color:var(--gold-bright);opacity:0;transform:translateY(6px);
  transition:opacity .3s,transform .3s}
.kozak-rd .svc-gal-z svg{width:16px;height:16px}
.kozak-rd .svc-gal a:hover .svc-gal-z,.kozak-rd .svc-gal a:focus-visible .svc-gal-z{opacity:1;transform:none}
/* .at-right pins a big tile to the last pair of a four-column row, so it only
   means anything at four columns; past that the dense flow staggers them for us. */
@media(min-width:1180px){
  .kozak-rd .svc-gal{--gal-gap:11px;grid-template-columns:repeat(5,1fr)}
  .kozak-rd .svc-gal a.is-big.at-right{grid-column:auto/span 2}
}
@media(min-width:1560px){
  .kozak-rd .svc-gal{--gal-gap:12px;grid-template-columns:repeat(6,1fr)}
}
@media(min-width:2100px){
  .kozak-rd .svc-gal{grid-template-columns:repeat(7,1fr)}
}
@media(max-width:900px){
  .kozak-rd .svc-gal{grid-template-columns:repeat(3,1fr)}
  .kozak-rd .svc-gal a.is-big.at-right{grid-column:span 2}
}
@media(max-width:560px){
  .kozak-rd .svc-gal{--gal-gap:8px;grid-template-columns:repeat(2,1fr)}
  .kozak-rd .svc-gal a.is-big,.kozak-rd .svc-gal a.is-big.at-right{grid-column:span 2;grid-row:span 2}
}

/* --- other services --- */
.kozak-rd .svc-other{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kozak-rd .svc-other a{display:grid;grid-template-columns:38px 1fr 16px;align-items:center;gap:14px;
  padding:16px 18px;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:6px;
  font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--ink);
  transition:border-color .28s,transform .28s,background .28s}
.kozak-rd .svc-other a:hover{border-color:var(--line);background:var(--bg-3);transform:translateY(-3px)}
.kozak-rd .svc-other-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line-soft);border-radius:5px;color:var(--gold)}
.kozak-rd .svc-other-ic svg{width:19px;height:19px}
.kozak-rd .svc-other-ar{width:16px;height:16px;color:var(--gold);transition:transform .28s}
.kozak-rd .svc-other a:hover .svc-other-ar{transform:translateX(3px)}
@media(max-width:900px){.kozak-rd .svc-other{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kozak-rd .svc-other{grid-template-columns:1fr}}

/* --- closing call band ---
   Deliberately a slim strip, not another framed panel: the outro CTA sits
   right below it and two full panels in a row read as a mistake. */
.kozak-rd .svc-call-sec{padding:0 0 clamp(46px,5.5vw,72px)}
.kozak-rd .svc-call{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:linear-gradient(100deg,var(--bg-3),var(--bg-2));border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:8px;padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,38px)}
.kozak-rd .svc-call h2{font-size:clamp(21px,2.4vw,29px);margin-top:10px;max-width:24ch}
.kozak-rd .svc-call .btn svg{width:18px;height:18px}

/* --- lightbox --- */
.kozak-rd-lb{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(8,7,5,.94);opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
.kozak-rd-lb.open{opacity:1;visibility:visible}
.kozak-rd-lb img{max-width:min(1200px,92vw);max-height:86vh;width:auto;height:auto;display:block;
  border-radius:6px;box-shadow:0 30px 80px -30px #000}
.kozak-rd-lb button{position:absolute;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(27,23,18,.9);
  color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.kozak-rd-lb button:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.kozak-rd-lb button svg{width:21px;height:21px}
.kozak-rd-lb .lb-x{top:20px;right:20px}
.kozak-rd-lb .lb-p{left:max(16px,3vw)}
.kozak-rd-lb .lb-n{right:max(16px,3vw)}
.kozak-rd-lb .lb-c{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-family:var(--font-label);letter-spacing:.1em;font-size:11.5px;color:var(--ink-mute)}
@media(max-width:620px){
  .kozak-rd-lb button{width:40px;height:40px}
  .kozak-rd-lb .lb-p{left:10px}.kozak-rd-lb .lb-n{right:10px}
}
@media(prefers-reduced-motion:reduce){
  .kozak-rd .svc-gal img,.kozak-rd .svc-gal a::after,.kozak-rd .svc-gal-z,
  .kozak-rd .svc-other a,.kozak-rd .svc-plats li,.kozak-rd-lb{transition:none}
}
/* The article is a reading column, not a full-width block: .rd-story-body caps
   its paragraphs at 62ch, so a full .wrap container left half the row empty. */
.kozak-rd .svc-body{max-width:820px;margin-left:auto;margin-right:auto}
.kozak-rd .svc-body p{max-width:none}
/* Job photos come in every shape; left at height:auto a portrait shot ran taller
   than the viewport and broke the read. Crop them all to one landscape band. */
.kozak-rd .svc-body-fig{margin:36px 0}
.kozak-rd .svc-body-fig img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:7px;border:1px solid var(--line-soft)}
@media(max-width:600px){.kozak-rd .svc-body-fig img{aspect-ratio:4/3}}
/* --- longform, folded away at the bottom of a service page ---
   Closed it is one quiet bar; open it is the same reading column as before.
   Kept native <details> so it works without JS and is announced correctly. */
.kozak-rd .svc-more-sec{padding-top:0}
.kozak-rd .svc-more{max-width:920px;margin-inline:auto;background:var(--bg-2);
  border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;
  transition:border-color .3s}
.kozak-rd .svc-more:hover{border-color:var(--line)}
.kozak-rd .svc-more summary{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px clamp(20px,3vw,32px);cursor:pointer;list-style:none}
.kozak-rd .svc-more summary::-webkit-details-marker{display:none}
.kozak-rd .svc-more summary:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.kozak-rd .svc-more-lb{display:grid;gap:7px;min-width:0}
.kozak-rd .svc-more-t{font-family:var(--font-poster);font-size:clamp(19px,2.2vw,24px);
  line-height:1.25;color:var(--ink);transition:color .3s}
.kozak-rd .svc-more-h{color:var(--ink-mute);font-size:14.5px;line-height:1.6;max-width:62ch}
.kozak-rd .svc-more:hover .svc-more-t,.kozak-rd .svc-more[open] .svc-more-t{color:var(--gold-bright)}
.kozak-rd .svc-more-ic{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--line);color:var(--gold);background:rgba(255,255,255,.02);
  transition:transform .35s,border-color .3s,background .3s,color .3s}
.kozak-rd .svc-more-ic svg{width:20px;height:20px}
.kozak-rd .svc-more:hover .svc-more-ic{border-color:rgba(201,162,74,.5);color:var(--gold-bright)}
.kozak-rd .svc-more[open] .svc-more-ic{transform:rotate(45deg);background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.kozak-rd .svc-more-a{padding:6px clamp(20px,3vw,32px) clamp(30px,4vw,44px);
  border-top:1px solid var(--line-soft);animation:faqIn .34s ease both}
/* The longform renders inside .rd-outro now, and that wrapper zeroes margins on
   p/h2/ul/figure for the footer. Put the reading rhythm back, scoped to here.
   Headings also step down a size: inside a 920px card, 42px was shouting. */
.kozak-rd .svc-more-a.rd-story-body h2{margin:36px 0 0;font-size:clamp(23px,3vw,33px)}
.kozak-rd .svc-more-a.rd-story-body h3{margin:26px 0 0}
.kozak-rd .svc-more-a.rd-story-body p{margin:16px 0 0}
.kozak-rd .svc-more-a.rd-story-body ul{margin:16px 0 0;padding-left:0;list-style:none}
.kozak-rd .svc-more-a.rd-story-body ul li{padding-left:26px}
.kozak-rd .svc-more-a.rd-story-body figure{margin:36px 0}
.kozak-rd .svc-more-a.rd-story-body>*:first-child{margin-top:26px}
@media(max-width:560px){
  .kozak-rd .svc-more summary{gap:14px;padding:20px 18px}
  .kozak-rd .svc-more-ic{width:38px;height:38px}
  .kozak-rd .svc-more-h{display:none}
}
@media(prefers-reduced-motion:reduce){
  .kozak-rd .svc-more-a{animation:none}
  .kozak-rd .svc-more-ic{transition:none}
}
/* Scope list as its own block, for services that have no article yet. */
.kozak-rd .svc-covers-wide{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:12px}
.kozak-rd .svc-covers-wide li{display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:center;
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:6px;padding:17px 19px;
  color:var(--ink);font-size:16px;transition:border-color .28s,transform .28s}
.kozak-rd .svc-covers-wide li:hover{border-color:var(--line);transform:translateY(-2px)}
.kozak-rd .svc-covers-wide svg{width:17px;height:17px;color:var(--gold)}
@media(max-width:860px){.kozak-rd .svc-covers-wide{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kozak-rd .svc-covers-wide{grid-template-columns:1fr}}
/* Floor so a collapsed Markate frame never renders as a bare white slab before
   the watchdog in parts/booking.php gets to it. */
/* Shown only when the Markate embed fails to paint - see parts/booking.php. */
.kozak-rd .ct-fallback{margin-top:18px;background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:8px;padding:22px 24px}
.kozak-rd .ct-fallback[hidden]{display:none}
.kozak-rd .ct-fallback p{color:var(--ink-soft);font-size:15.5px;max-width:60ch}
.kozak-rd .ct-fallback strong{color:var(--ink)}
.kozak-rd .ct-fallback-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

/* Award cards link out to the profile their figures come from. */
.kozak-rd a.award{display:block;text-decoration:none;color:inherit}
.kozak-rd .award.is-link{cursor:pointer}
.kozak-rd .award.is-link:hover,.kozak-rd .award.is-link:focus-visible{
  transform:translateY(-5px);border-color:rgba(201,162,74,.55);
  box-shadow:0 22px 46px -26px rgba(1,10,20,.6)}
/* The ring is drawn outside the card, on the navy band - so it is light. */
.kozak-rd .award.is-link:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.kozak-rd .noms a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:2px}
/* gold on ivory is 1.4:1 - invisible. The ivory blocks get the dark ink ring. */
.kozak-rd .aowners a:focus-visible,
.kozak-rd .aval-list a:focus-visible,.kozak-rd .ct2-main a:focus-visible{
  outline:2px solid var(--ivory-ink);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){
  .kozak-rd .award.is-link:hover{transform:none}
}


/* ============================================================
   HERO - award seals, plain-facts line, slow photo drift
   ============================================================ */

/* ---- the evening scene ---------------------------------------------------
   Ported from the client's own "Анимация дома v2.dc.html". Layer order, mask
   polygons, lamp placements, rhythms and particle tracks are theirs; the
   coordinates are percentages of the photograph's frame, which is why
   .hhero-stage has to keep that frame exactly.

   Two departures, both asked for after the file arrived:
     - no camera push-in. Their kb keyframe is not ported.
     - the lamps do not fade up on load. That entrance read as a blink, so they
       are lit from the first frame and their stagger is reused as a negative
       phase offset instead - no two lamps ever sit on the same beat.

   The whole trick of the piece: the four of them are painted back on top
   through a silhouette mask, so no lamp, sway or ripple can reach them. */
.kozak-rd .hh-base,
.kozak-rd .hh-palm img,
.kozak-rd .hh-bush img,
.kozak-rd .hh-people img{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover}
.kozak-rd .hh-palm,.kozak-rd .hh-bush,.kozak-rd .hh-people,.kozak-rd .hh-air{position:absolute;inset:0;display:block}
.kozak-rd .hh-defs{position:absolute;width:0;height:0;overflow:hidden}

.kozak-rd .hh-palm,.kozak-rd .hh-bush,.kozak-rd .hh-people,.kozak-rd .hh-pool{
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.kozak-rd .hh-people{-webkit-mask-image:url('img/hero-mask-people.svg');
                             mask-image:url('img/hero-mask-people.svg')}
/* each crown rocks about its own trunk base, so only the fronds move */
.kozak-rd .hh-palm-l{-webkit-mask-image:url('img/hero-mask-palm-l.svg');
                             mask-image:url('img/hero-mask-palm-l.svg');
  transform-origin:7% 100%;animation:kozakPalmSway 7.5s ease-in-out infinite}
.kozak-rd .hh-palm-r{-webkit-mask-image:url('img/hero-mask-palm-r.svg');
                             mask-image:url('img/hero-mask-palm-r.svg');
  transform-origin:93% 100%;animation:kozakPalmSway 9.5s ease-in-out infinite reverse}
@keyframes kozakPalmSway{0%,100%{transform:rotate(0) translateX(0)}
  25%{transform:rotate(.35deg) translateX(2px)}
  75%{transform:rotate(-.35deg) translateX(-2px)}}
/* the shrubs bend rather than rock, so they skew as well as turn */
.kozak-rd .hh-bush-r{-webkit-mask-image:url('img/hero-mask-bush-r.svg');
                             mask-image:url('img/hero-mask-bush-r.svg');
  transform-origin:93.5% 82.4%;animation:kozakRustle 4.6s ease-in-out .8s infinite}
@keyframes kozakRustle{0%,100%{transform:skewX(0) rotate(0)}
  25%{transform:skewX(1deg) rotate(.3deg)}
  55%{transform:skewX(-.9deg) rotate(-.3deg)}
  80%{transform:skewX(.5deg) rotate(.15deg)}}

/* the pool, redrawn over itself at the same scale and offset, then pushed
   around by the turbulence filter in the markup */
.kozak-rd .hh-pool{position:absolute;left:0;top:74%;width:18%;height:26%;
  -webkit-mask-image:url('img/hero-mask-pool.svg');mask-image:url('img/hero-mask-pool.svg')}
.kozak-rd .hh-pool span{position:absolute;inset:0;display:block;
  background-size:555.56% 384.62%;background-position:0% 100%;background-repeat:no-repeat;
  filter:url(#kozakRipple)}

.kozak-rd .hh-lamp{position:absolute;pointer-events:none;mix-blend-mode:screen;opacity:.85;
  left:calc(var(--cx) - var(--w) / 2);top:calc(var(--cy) - var(--h) / 2);
  width:var(--w);height:var(--h)}
.kozak-rd .hh-lamp>i{position:absolute;inset:0;display:block;opacity:.6;filter:blur(6px);
  background:radial-gradient(ellipse at center,var(--tone) 0%,rgba(255,190,90,0) 70%)}
.kozak-rd .hh-warm{--tone:rgba(255,196,100,.55)}
.kozak-rd .hh-soft{--tone:rgba(255,214,150,.42)}
.kozak-rd .hh-flick{animation:kozakLampFlick var(--dur) ease-in-out calc(-1 * var(--ph)) infinite}
.kozak-rd .hh-breathe{animation:kozakLampBreathe var(--dur) ease-in-out calc(-1 * var(--ph)) infinite}
@keyframes kozakLampFlick{0%,100%{opacity:.6}20%{opacity:.85}45%{opacity:.65}70%{opacity:1}}
@keyframes kozakLampBreathe{0%,100%{opacity:.5}50%{opacity:1}}

.kozak-rd .hh-fly{position:absolute;left:var(--x);top:var(--y);pointer-events:none;
  animation:kozakFlyX var(--dx) ease-in-out var(--d) infinite alternate}
.kozak-rd .hh-fly>i{display:block;animation:kozakFlyY var(--dy) ease-in-out calc(var(--d) * .7) infinite alternate}
.kozak-rd .hh-fly>i>i{display:block;width:4px;height:4px;border-radius:50%;
  background:rgba(255,228,160,.95);box-shadow:0 0 6px 2px rgba(255,200,110,.7);
  animation:kozakTwinkle var(--bl) ease-in-out var(--d) infinite}
.kozak-rd .hh-star{position:absolute;left:var(--x);top:var(--y);width:2px;height:2px;
  border-radius:50%;background:#fff;box-shadow:0 0 4px 1px rgba(255,255,255,.6);
  pointer-events:none;animation:kozakTwinkle var(--bl) ease-in-out var(--d) infinite}
@keyframes kozakFlyX{from{transform:translateX(calc(-1 * var(--ax)))}to{transform:translateX(var(--ax))}}
@keyframes kozakFlyY{from{transform:translateY(calc(-1 * var(--ay)))}to{transform:translateY(var(--ay))}}
@keyframes kozakTwinkle{0%,100%{opacity:.08}50%{opacity:1}}

/* the two layers that cost the most - a second and third copy of the
   photograph, one of them under an animated SVG filter - come off first */
@media(max-width:900px){
  .kozak-rd .hh-pool,.kozak-rd .hh-palm,.kozak-rd .hh-bush{display:none}
}
/* below this the photo runs full-bleed behind the copy, where lamps flickering
   under running text are a distraction rather than an effect */
@media(max-width:680px){
  .kozak-rd .hh-lamp,.kozak-rd .hh-air,.kozak-rd .hh-people{display:none}
}

.kozak-rd .hhero-seals{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.kozak-rd .hseal{display:flex;align-items:center;gap:11px;padding:9px 16px 9px 11px;
  border:1px solid var(--line);border-radius:100px;background:rgba(2,16,27,.72);
  backdrop-filter:blur(8px);transition:border-color .25s,background .25s,transform .25s}
.kozak-rd .hseal:hover{border-color:var(--gold);background:rgba(2,16,27,.9);transform:translateY(-2px)}
.kozak-rd .hseal-ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;flex:none}
.kozak-rd .hseal-ic svg{width:17px;height:17px}
/* each platform keeps its own colour - that recognition is the whole point */
.kozak-rd .hseal-nd .hseal-ic{background:rgba(0,181,81,.16);color:#00B551}
.kozak-rd .hseal-tt .hseal-ic{background:rgba(0,159,217,.16);color:#009FD9}
.kozak-rd .hseal-tx b{display:block;font-family:var(--font-label);font-size:12.5px;
  letter-spacing:.03em;color:var(--ink);line-height:1.2}
.kozak-rd .hseal-tx span{display:block;font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.09em;font-size:9.5px;color:var(--ink-mute);margin-top:3px}
.kozak-rd .hhero-facts{margin-top:16px;font-family:var(--font-label);font-size:12px;
  letter-spacing:.04em;color:var(--ink-mute)}
@media(max-width:560px){
  .kozak-rd .hhero-seals{gap:8px}
  .kozak-rd .hseal{padding:8px 13px 8px 9px;gap:9px}
  .kozak-rd .hseal-tx b{font-size:11.5px}
  .kozak-rd .hhero-facts{font-size:11px;line-height:1.6}
}

/* ---- sticky call bar (phones) ---- */
.kozak-rd .callbar{display:none}
@media(max-width:720px){
  .kozak-rd .callbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:110;
    display:flex;align-items:center;gap:13px;padding:12px 18px;border-radius:100px;
    background:linear-gradient(120deg,var(--gold-bright),var(--gold));color:var(--on-gold);
    box-shadow:0 16px 38px -12px rgba(0,0,0,.75);
    transform:translateY(140%);opacity:0;pointer-events:none;
    transition:transform .38s cubic-bezier(.2,.7,.3,1),opacity .3s}
  .kozak-rd .callbar.on{transform:none;opacity:1;pointer-events:auto}
  .kozak-rd .callbar-ic{display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;background:rgba(1,15,26,.14);flex:none}
  .kozak-rd .callbar-ic svg{width:18px;height:18px}
  .kozak-rd .callbar-tx b{display:block;font-family:var(--font-label);font-size:15px;line-height:1.15}
  .kozak-rd .callbar-tx span{display:block;font-family:var(--font-label);text-transform:uppercase;
    letter-spacing:.08em;font-size:9.5px;opacity:.72;margin-top:2px}
  /* The bar covers the bottom ~70px of the screen. The three new footers
     already end 96px lower for it (.sfoot/.bfoot/.afoot below); a page without
     one - the service pages end on their closing band - had nothing, so its
     last block sat under the bar for good and, inside the reveal observer's
     bottom margin, never even faded in. Such a page ends 86px lower, on the
     body's navy, the colour every page already ends on. */
  body:has([data-callbar]):not(:has(.sfoot,.bfoot,.afoot)){padding-bottom:86px}
}
@media(prefers-reduced-motion:reduce){
  /* the palms static are pixel-identical to the base, and a ripple frozen
     mid-displacement would just look like a defect - both come off. The lamps
     stay, lit and still. */
  .kozak-rd .hh-palm,.kozak-rd .hh-bush,.kozak-rd .hh-pool,.kozak-rd .hh-air{display:none}
  .kozak-rd .hh-lamp>i{animation:none}
  .kozak-rd .callbar{transition:none}
  .kozak-rd .hseal{transition:none}
}

/* ============================================================
   CONTACT PAGE (page-contacts.php) - built to the client mockup.
   Namespaced .ct2- so it cannot collide with .ct-book, which is
   the booking widget and still lives on every service page.
   ============================================================ */

/* --- hero ------------------------------------------------- */
.kozak-rd .ct2-hero{position:relative;background:#010f1a;overflow:hidden;isolation:isolate}
.kozak-rd .ct2-hero-photo{position:absolute;inset:0 0 0 32%;background-size:cover;background-position:center 40%}
/* Two scrims: one across, so the copy sits on near-solid ground and the photo
   surfaces on the right; one down, so the trust row keeps its contrast. */
.kozak-rd .ct2-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#010f1a 0%,rgba(1,15,26,.97) 27%,rgba(1,15,26,.66) 48%,rgba(1,15,26,.16) 74%,rgba(1,15,26,.46) 100%),
             linear-gradient(180deg,rgba(1,15,26,.34) 0%,rgba(1,15,26,0) 30%,rgba(1,15,26,.5) 66%,rgba(1,15,26,.93) 100%)}
/* the header sits over this hero (see the see-through list at the top), so
   the copy starts below it - as the mockup has it, the crumb one small gap
   under the bar. It started at 28-52px, and the crumb ran under the logo. */
.kozak-rd .ct2-hero .wrap{position:relative;z-index:2;padding-top:calc(var(--hdr-h) + clamp(12px,2.2vw,30px));padding-bottom:clamp(26px,3.4vw,42px)}
.kozak-rd .ct2-hero-copy{max-width:640px}
.kozak-rd .ct2-hero h1{font-size:clamp(37px,5.5vw,64px);line-height:1.05;margin-top:2px}
.kozak-rd .ct2-lead{color:var(--ink-soft);font-size:clamp(15.5px,1.2vw,18px);margin-top:18px;max-width:46ch;line-height:1.6}

.kozak-rd .ct2-trust{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:clamp(26px,3.4vw,42px) 0 0;
  text-shadow:0 1px 10px rgba(0,0,0,.75)}
.kozak-rd .ct2-trust li{display:flex;align-items:center;gap:12px;padding:5px clamp(16px,2.1vw,30px);position:relative}
.kozak-rd .ct2-trust li:first-child{padding-left:0}
.kozak-rd .ct2-trust li+li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:34px;background:var(--line-soft)}
.kozak-rd .ct2-trust-ic{width:33px;height:33px;flex:none;color:var(--gold)}
.kozak-rd .ct2-trust-ic svg{width:100%;height:100%;display:block}
.kozak-rd .ct2-trust-tx{display:flex;flex-direction:column;line-height:1.32}
.kozak-rd .ct2-trust-tx b{font-family:var(--font-label);font-weight:600;font-size:14.5px;color:var(--ink)}
.kozak-rd .ct2-trust-tx span{font-size:13.5px;color:var(--ink-mute)}

/* The handwritten line. Decoration over the photo - the readable copy is the
   .sr-only twin, so it is never read out twice. */
.kozak-rd .ct2-script{position:absolute;z-index:2;right:clamp(22px,4vw,74px);top:clamp(60px,11.5vw,142px);
  display:flex;flex-direction:column;align-items:center;transform:rotate(-7deg);pointer-events:none;
  color:var(--gold-bright);text-shadow:0 2px 20px rgba(0,0,0,.6)}
.kozak-rd .ct2-script-t{font-family:var(--font-script);font-weight:400;font-size:clamp(23px,2.45vw,37px);
  line-height:1.24;text-align:center;letter-spacing:.005em}
.kozak-rd .ct2-script-u{width:clamp(148px,15vw,222px);height:auto;margin-top:4px;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
@media(max-width:1180px){.kozak-rd .ct2-script{display:none}}

/* --- form / details / map --------------------------------- */
.kozak-rd .ct2-main{background:var(--ivory);color:var(--ivory-ink);scroll-margin-top:90px;
  padding:clamp(48px,6.2vw,88px) 0 clamp(52px,6.8vw,96px)}
.kozak-rd .ct2-cols{display:grid;grid-template-columns:1.16fr .86fr .98fr;gap:clamp(28px,3.4vw,58px);align-items:start}
.kozak-rd .ct2-main h2{font-size:clamp(23px,2.4vw,31px);color:var(--ivory-ink);letter-spacing:-.02em}
.kozak-rd .ct2-main h3{font-family:var(--font-display);font-weight:500;font-size:19px;color:var(--ivory-ink);letter-spacing:-.01em}
.kozak-rd .ct2-sub{color:var(--ivory-soft);font-size:15.5px;margin-top:12px;max-width:44ch;line-height:1.6}
.kozak-rd .ct2-noform{margin-top:20px;color:var(--ivory-soft);font-size:15.5px}
.kozak-rd .ct2-noform a{color:var(--gold-deep);font-weight:600;border-bottom:1px solid rgba(162,120,45,.4)}

.kozak-rd .ct2-form .wpcf7{margin-top:22px}
.kozak-rd .ct2-form .cf-row+.cf-row,.kozak-rd .ct2-form .cf-send{margin-top:12px}
.kozak-rd .ct2-form .wpcf7-form-control-wrap{display:block}
.kozak-rd .ct2-form input[type=text],
.kozak-rd .ct2-form input[type=tel],
.kozak-rd .ct2-form input[type=email],
.kozak-rd .ct2-form select,
.kozak-rd .ct2-form textarea{width:100%;display:block;font-family:var(--font-body);font-size:15.5px;
  color:var(--ivory-ink);background:var(--ivory-card);border:1px solid var(--ivory-line);border-radius:4px;
  padding:15px 16px;line-height:1.4;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.kozak-rd .ct2-form textarea{min-height:130px;resize:vertical;line-height:1.55}
.kozak-rd .ct2-form ::placeholder{color:#8b8171;opacity:1}
.kozak-rd .ct2-form input:focus,.kozak-rd .ct2-form select:focus,.kozak-rd .ct2-form textarea:focus{
  outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(201,162,74,.2)}
.kozak-rd .ct2-form .cf-sel{position:relative}
/* fixed from the top, not 50%: the error line under an invalid select made
   the row taller and pulled the arrow down onto the field's bottom edge */
.kozak-rd .ct2-form .cf-sel::after{content:"";position:absolute;right:18px;top:24px;
  width:11px;height:7px;pointer-events:none;background:var(--ivory-soft);clip-path:polygon(0 0,100% 0,50% 100%)}
.kozak-rd .ct2-form select{padding-right:42px;cursor:pointer}
/* Honeypot - off-screen and out of the accessibility tree (aria-hidden in the
   markup). Anything that fills it is a bot; see kozak wpcf7_spam filter. */
.kozak-rd .ct2-form .cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.kozak-rd .ct2-form input[type=submit]{width:100%;cursor:pointer;border:0;border-radius:4px;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:13.5px;
  padding:17px 22px;color:var(--on-gold);background-color:var(--gold);
  /* Arrow layer sits just past the label. The offset is tuned to "Send
     Message" at this size - re-tune it if the label changes. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1409' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),linear-gradient(180deg,var(--gold-bright),var(--gold));
  background-repeat:no-repeat,no-repeat;background-size:16px 16px,100% 100%;
  background-position:calc(50% + 72px) center,0 0;
  box-shadow:0 12px 26px -14px rgba(162,120,45,.8);transition:transform .22s,box-shadow .22s}
.kozak-rd .ct2-form input[type=submit]:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(162,120,45,.9)}
.kozak-rd .ct2-form input[type=submit]:disabled{opacity:.6;cursor:default;transform:none}
.kozak-rd .ct2-form .wpcf7-spinner{display:block;margin:14px auto 0}
.kozak-rd .ct2-form .wpcf7-not-valid-tip{color:#a52318;font-size:13px;margin-top:7px;font-weight:500}
.kozak-rd .ct2-form input.wpcf7-not-valid,
.kozak-rd .ct2-form select.wpcf7-not-valid,
.kozak-rd .ct2-form textarea.wpcf7-not-valid{border-color:#a52318;background:#fffaf9}
/* the dark-form rule near the top sets a light coral with !important - on
   the ivory form the intended dark red has to win the same way */
.kozak-rd .ct2-form .wpcf7 .wpcf7-not-valid{border-color:#a52318!important}
.kozak-rd .ct2-form form .wpcf7-response-output{display:none;margin:18px 0 0;padding:13px 15px;border-radius:4px;
  border:1px solid var(--ivory-line);background:var(--ivory-card);color:var(--ivory-ink);font-size:14.5px;line-height:1.5}
.kozak-rd .ct2-form form.sent .wpcf7-response-output,
.kozak-rd .ct2-form form.invalid .wpcf7-response-output,
.kozak-rd .ct2-form form.failed .wpcf7-response-output,
.kozak-rd .ct2-form form.spam .wpcf7-response-output,
.kozak-rd .ct2-form form.unaccepted .wpcf7-response-output,
.kozak-rd .ct2-form form.aborted .wpcf7-response-output{display:block}
.kozak-rd .ct2-form form.sent .wpcf7-response-output{border-color:#3f7d3f;color:#26602a}
.kozak-rd .ct2-form form.invalid .wpcf7-response-output,
.kozak-rd .ct2-form form.failed .wpcf7-response-output,
.kozak-rd .ct2-form form.spam .wpcf7-response-output{border-color:#a52318;color:#8c1d18}

.kozak-rd .ct2-il{list-style:none;padding:0;margin:20px 0 0}
.kozak-rd .ct2-il li{display:flex;gap:14px;align-items:flex-start;padding:13px 0}
.kozak-rd .ct2-il-ic{width:29px;height:29px;flex:none;color:var(--gold-deep);margin-top:2px}
.kozak-rd .ct2-il-ic svg{width:100%;height:100%;display:block}
.kozak-rd .ct2-il-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.kozak-rd .ct2-il-b{font-family:var(--font-label);font-weight:600;font-size:17px;line-height:1.3;
  color:var(--ivory-ink);word-break:break-word;transition:color .2s}
.kozak-rd a.ct2-il-b:hover{color:var(--gold-deep)}
.kozak-rd .ct2-il-tx>span{font-size:14.5px;color:var(--ivory-soft);line-height:1.45}
.kozak-rd .ct2-il-h{font-family:var(--font-label);font-weight:600;font-size:14.5px;color:var(--ivory-ink);line-height:1.6}

.kozak-rd .ct2-follow{margin-top:24px;padding-top:26px;border-top:1px solid var(--ivory-line)}
/* Brand-coloured social row (parts/social-row.php). One set of rules for both
   footers and the contact page; the wrapper class only changes the sizing. */
.kozak-rd .soc-row{display:flex;gap:11px;flex-wrap:wrap}
.kozak-rd .soc-b{width:44px;height:44px;border-radius:50%;flex:none;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .22s,filter .22s}
.kozak-rd .soc-b:hover{transform:translateY(-3px);filter:brightness(1.1)}
.kozak-rd .soc-b svg{width:22px;height:22px;display:block}
.kozak-rd .soc-facebook{background:#1877f2}
.kozak-rd .soc-instagram{background:radial-gradient(circle at 28% 108%,#fdf497 0%,#fd5949 46%,#d6249f 62%,#285aeb 92%)}
.kozak-rd .soc-google{background:linear-gradient(135deg,#ea4335 0%,#fbbc05 42%,#34a853 70%,#4285f4 100%)}
.kozak-rd .soc-nextdoor{background:#00b246}
.kozak-rd .soc-yelp{background:#d32323}
.kozak-rd .soc-youtube{background:#e62117}
.kozak-rd .ct2-soc{margin-top:15px}

.kozak-rd .ct2-map{margin-top:20px;border:1px solid var(--ivory-line);border-radius:6px;overflow:hidden;
  background:#e6e2d8;aspect-ratio:4/3.5}
.kozak-rd .ct2-map iframe{width:100%;height:100%;border:0;display:block}
.kozak-rd .ct2-loc h3{margin-top:22px}
.kozak-rd .ct2-loc p{color:var(--ivory-soft);font-size:15px;margin-top:9px;line-height:1.6}
.kozak-rd .ct2-loc-btn{margin-top:22px;border-color:rgba(33,27,19,.24);color:var(--ivory-ink)}
.kozak-rd .ct2-loc-btn:hover{border-color:var(--gold-deep);color:var(--gold-deep)}

/* --- closing band ----------------------------------------- */
.kozak-rd .ct2-cons{display:grid;grid-template-columns:minmax(0,34%) 1fr;background:#010f1a}
.kozak-rd .ct2-cons-photo{position:relative;min-height:290px;background-size:cover;background-position:center 26%}
.kozak-rd .ct2-cons-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(1,13,23,.2) 0%,rgba(1,13,23,0) 42%,rgba(1,13,23,.92) 100%)}
.kozak-rd .ct2-cons-body{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:clamp(24px,3.2vw,56px);padding:clamp(36px,4.4vw,64px) clamp(24px,3.2vw,58px)}
.kozak-rd .ct2-cons-txt h2{font-size:clamp(25px,3vw,40px);margin-top:14px}
.kozak-rd .ct2-cons-txt p{color:var(--ink-soft);margin-top:13px;font-size:16.5px;max-width:52ch;line-height:1.6}
.kozak-rd .ct2-cons-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
.kozak-rd .ct2-cons-list{list-style:none;margin:0;padding:2px 0 2px clamp(22px,2.4vw,44px);
  border-left:1px solid var(--line-soft);display:grid;gap:13px}
.kozak-rd .ct2-cons-list li{display:flex;align-items:center;gap:12px;font-size:15.5px;color:var(--ink-soft)}
.kozak-rd .ct2-cons-ic{width:23px;height:23px;flex:none;color:var(--gold)}
.kozak-rd .ct2-cons-ic svg{width:100%;height:100%;display:block}

/* --- responsive ------------------------------------------- */
@media(max-width:1100px){
  .kozak-rd .ct2-cols{grid-template-columns:1fr 1fr}
  .kozak-rd .ct2-form{grid-column:1/-1}
  .kozak-rd .ct2-hero-photo{inset:0 0 0 18%}
}
@media(max-width:980px){
  .kozak-rd .ct2-cons{grid-template-columns:1fr}
  .kozak-rd .ct2-cons-photo{min-height:230px;background-position:center 30%}
  .kozak-rd .ct2-cons-photo::after{background:linear-gradient(180deg,rgba(1,13,23,.15) 0%,rgba(1,13,23,0) 45%,rgba(1,13,23,.9) 100%)}
  .kozak-rd .ct2-cons-body{grid-template-columns:1fr;gap:30px}
  .kozak-rd .ct2-cons-list{border-left:0;border-top:1px solid var(--line-soft);padding:26px 0 0;
    grid-template-columns:1fr 1fr;gap:13px 26px}
}
@media(max-width:900px){
  .kozak-rd .ct2-hero-photo{inset:0}
  .kozak-rd .ct2-hero::before{background:linear-gradient(180deg,rgba(1,15,26,.9) 0%,rgba(1,15,26,.82) 45%,rgba(1,15,26,.95) 100%)}
  .kozak-rd .ct2-trust li{padding:5px 18px}
  .kozak-rd .ct2-trust li:nth-child(3){padding-left:0}
  .kozak-rd .ct2-trust li:nth-child(3)::before{display:none}
}
@media(max-width:760px){
  .kozak-rd .ct2-cols{grid-template-columns:1fr}
  .kozak-rd .ct2-info,.kozak-rd .ct2-loc{padding-top:8px;border-top:1px solid var(--ivory-line)}
  .kozak-rd .ct2-map{aspect-ratio:16/11}
}
@media(max-width:620px){
  .kozak-rd .ct2-trust{flex-direction:column;gap:2px}
  .kozak-rd .ct2-trust li{padding:8px 0!important}
  .kozak-rd .ct2-trust li+li::before{display:none}
  .kozak-rd .ct2-cons-list{grid-template-columns:1fr}
  .kozak-rd .ct2-cons-cta .btn{width:100%;justify-content:center}
}

/* ============================================================
   LARGE FOOTER (parts/footer-big.php) - Contact page only.
   ============================================================ */
.kozak-rd .bfoot{background:#01080f;border-top:1px solid var(--line);padding:clamp(46px,5.2vw,72px) 0 22px}
.kozak-rd .bf-grid{display:grid;grid-template-columns:1.32fr .74fr 1.2fr .84fr 1.1fr;gap:clamp(20px,2.4vw,40px)}
.kozak-rd .bf-word{display:flex;flex-direction:column;line-height:1;color:var(--gold)}
.kozak-rd .bf-word b{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,2.6vw,34px);
  letter-spacing:.075em;color:var(--gold)}
.kozak-rd .bf-word span{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.2em;
  font-size:9.5px;color:var(--gold-deep);margin-top:8px}
.kozak-rd a.bf-word:hover b{color:var(--gold-bright)}
.kozak-rd .bf-brand p{color:var(--ink-mute);font-size:14.5px;max-width:32ch;margin-top:20px;line-height:1.7}
.kozak-rd .bf-soc{margin-top:22px;gap:9px}
.kozak-rd .bf-soc .soc-b{width:40px;height:40px}
.kozak-rd .bf-soc .soc-b svg{width:20px;height:20px}
/* column headings are h2 (not h5) so the page's outline has no gap; the look is unchanged */
.kozak-rd .bf-col h2{font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.65;color:var(--ink);
  margin:0 0 14px;letter-spacing:-.01em}
.kozak-rd .bf-col a{display:block;color:var(--ink-mute);font-size:14.5px;padding:5px 0;transition:color .2s}
.kozak-rd .bf-col a:hover{color:var(--gold-bright)}
.kozak-rd .bf-col a.bf-more{color:var(--ink-mute);opacity:.72;font-style:italic}
.kozak-rd .bf-motto{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-left:clamp(18px,2.2vw,40px);border-left:1px solid var(--line-soft)}
.kozak-rd .bf-tag{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,1.55vw,22px);
  line-height:1.28;color:var(--gold-bright);letter-spacing:-.015em;white-space:nowrap}
.kozak-rd .bf-mark{display:block;margin-top:20px;color:var(--gold)}
.kozak-rd .bf-mark svg{width:54px;height:auto;display:block}
.kozak-rd .bf-word-sm{align-items:center;margin-top:16px}
.kozak-rd .bf-word-sm b{font-size:25px}
.kozak-rd .bf-word-sm span{font-size:8px;letter-spacing:.18em}
.kozak-rd .bf-fam{margin-top:13px;font-size:13.5px;color:var(--ink-mute)}
.kozak-rd .bf-bot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(32px,3.8vw,52px);padding-top:22px;border-top:1px solid var(--line-soft)}
.kozak-rd .bf-bot p{color:var(--ink-mute);font-size:13px}
.kozak-rd .bf-legal{display:flex;align-items:center;flex-wrap:wrap}
.kozak-rd .bf-legal a{color:var(--ink-mute);font-size:13px;padding:0 14px;transition:color .2s}
.kozak-rd .bf-legal a:last-child{padding-right:0}
.kozak-rd .bf-legal a:hover{color:var(--gold-bright)}
.kozak-rd .bf-legal a+a{border-left:1px solid var(--line-soft)}
@media(max-width:1160px){
  .kozak-rd .bf-grid{grid-template-columns:1.3fr 1fr 1fr;gap:34px 30px}
  .kozak-rd .bf-motto{grid-column:2/-1;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
    align-items:center;gap:20px;text-align:left;padding-left:0;padding-top:26px;
    border-left:0;border-top:1px solid var(--line-soft)}
  .kozak-rd .bf-mark,.kozak-rd .bf-word-sm{margin-top:0}
  .kozak-rd .bf-fam{margin-top:0}
}
@media(max-width:820px){
  .kozak-rd .bf-grid{grid-template-columns:1fr 1fr}
  .kozak-rd .bf-brand{grid-column:1/-1}
  .kozak-rd .bf-motto{grid-column:1/-1}
}
@media(max-width:520px){
  .kozak-rd .bf-grid{grid-template-columns:1fr}
  .kozak-rd .bf-motto{flex-direction:column;align-items:flex-start;text-align:left}
  .kozak-rd .bf-word-sm{align-items:flex-start}
  .kozak-rd .bf-legal a:first-child{padding-left:0}
}

/* ============================================================
   CONTACT FORM 7 - this install does not load CF7's own
   stylesheet, so everything it would normally hide or style is
   handled here. Unscoped on purpose: it has to cover any CF7
   form on the site, redesigned template or legacy.
   ============================================================ */
/* CF7 repeats every validation error in a list for screen readers. Without
   CF7's CSS that list printed on the page as raw text under the form. */
.screen-reader-response{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wpcf7 form .wpcf7-spinner{visibility:hidden;display:inline-block;width:24px;height:24px;margin:0 0 0 12px;
  border-radius:50%;vertical-align:middle;background-color:rgba(201,162,74,.35);opacity:.9;position:relative}
.wpcf7 form.submitting .wpcf7-spinner{visibility:visible}
.wpcf7 form .wpcf7-spinner::before{content:"";position:absolute;inset:5px;border-radius:50%;
  background-color:var(--gold-deep,#a2782d);animation:kozakSpin 1s linear infinite}
@keyframes kozakSpin{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.wpcf7 form .wpcf7-spinner::before{animation:none}}
.wpcf7 form.submitting input[type=submit]{opacity:.7;pointer-events:none}
.wpcf7-list-item{display:inline-block;margin:0 1em 0 0}

/* ============================================================
   HOME HERO - animation, and the drawn house
   The client asked for the first screen to move and suggested
   the house from the mockup. There is no photograph of one, so
   it is drawn in gold line and inked in on load, with the
   windows warming up afterwards. Everything here stops dead
   under prefers-reduced-motion.
   ============================================================ */
.kozak-rd .hhero .hhero-h1{font-family:var(--font-serif);font-weight:600;
  font-size:clamp(26px,3.05vw,41px);line-height:1.12;letter-spacing:-.01em;margin-top:12px;text-wrap:balance}
.kozak-rd .hhero .hhero-h1 .gold{color:var(--gold-bright)}

/* staggered entrance: eyebrow, headline, lead, button, seals, facts, card */
.kozak-rd .hhero.is-anim .an{opacity:0;transform:translateY(18px);
  animation:kozakHeroIn .85s cubic-bezier(.22,.75,.3,1) forwards;
  animation-delay:calc(var(--d,0) * 110ms + 140ms)}
@keyframes kozakHeroIn{to{opacity:1;transform:none}}

.kozak-rd .hhero-house{position:absolute;left:-2%;bottom:-7%;z-index:-1;pointer-events:none;
  width:clamp(260px,29vw,450px);color:var(--gold);opacity:.115}
.kozak-rd .hhero-house svg{width:100%;height:auto;display:block}
.kozak-rd .hhero-house .hh-l{stroke-dasharray:1;stroke-dashoffset:1;
  animation:kozakHouseDraw 2.6s ease-out .55s forwards}
@keyframes kozakHouseDraw{to{stroke-dashoffset:0}}
.kozak-rd .hhero-house .hh-w{fill:var(--gold-bright);fill-opacity:0;
  animation:kozakHouseWin 11s ease-in-out infinite alternate}
.kozak-rd .hhero-house rect:nth-of-type(1){animation-delay:2.9s}
.kozak-rd .hhero-house rect:nth-of-type(2){animation-delay:3.3s}
.kozak-rd .hhero-house rect:nth-of-type(3){animation-delay:3.15s}
.kozak-rd .hhero-house rect:nth-of-type(4){animation-delay:3.55s}
@keyframes kozakHouseWin{0%{fill-opacity:0}20%{fill-opacity:.6}55%{fill-opacity:.2}100%{fill-opacity:.5}}
/* Smaller and moved to the other corner on phones rather than dropped - this
   is the element the client asked for, and most of this trade's traffic is
   mobile. */
@media(max-width:900px){
  .kozak-rd .hhero-house{left:auto;right:-5%;bottom:-4%;width:clamp(170px,50vw,290px);opacity:.085}
}
@media(max-width:380px){.kozak-rd .hhero-house{display:none}}

/* ============================================================
   STRIP UNDER THE HERO - mockup items 1, 2 and 5 plus the two
   figures the client asked to add.
   ============================================================ */
/* No rules above or below. The mockup draws the five items straight on the dark
   ground: the only edge near them is the awards card's own gold border. A
   border-top here landed hard against that card (padding-top is 0 under it) and
   read as an underline on the card rather than a divider, and the rule below
   cut the strip off from a section painted in the very same colour. */
.kozak-rd .hstrip{background:var(--bg);padding:clamp(20px,2.3vw,30px) 0}
/* Columns are sized to their content and the slack is shared between them, as
   the mockup draws it. Five equal fifths looked broken: four items floated in
   100-140px of dead space while the fifth was squeezed into three wrapped
   lines. Everything is top-aligned so all five first lines sit on one line -
   also the mockup, which is what keeps a row of unequal items looking straight.
   The mockup draws no rules between the items, so there are none. */
.kozak-rd .hstrip-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,max-content);justify-content:space-between;
  gap:clamp(14px,1.8vw,30px)}
.kozak-rd .hstrip-list li{display:flex;align-items:flex-start;gap:12px;position:relative;min-width:0}
.kozak-rd .hstrip-ic{width:34px;height:34px;flex:none;color:var(--gold);margin-top:-1px}
.kozak-rd .hstrip-ic svg{width:100%;height:100%;display:block}
.kozak-rd .hstrip-tx{display:flex;flex-direction:column;line-height:1.34;min-width:0}
.kozak-rd .hstrip-tx b{font-family:var(--font-poster);font-weight:600;font-size:clamp(19px,1.5vw,21px);
  color:var(--ink);line-height:1.18;letter-spacing:.01em}
.kozak-rd .hstrip-tx>span{font-family:var(--font-label);text-transform:none;letter-spacing:0;
  font-size:13px;color:var(--ink-mute);margin-top:1px}
/* items with no figure carry their whole meaning in the label, so it is set in
   the page ink rather than the muted caption grey - same size either way */
.kozak-rd .hstrip-list li.is-text .hstrip-tx>span{color:var(--ink);margin-top:0;font-weight:500}
@media(max-width:1080px){
  .kozak-rd .hstrip-list{grid-template-columns:repeat(3,minmax(0,1fr));
    justify-content:normal;gap:22px 24px}
}
@media(max-width:640px){.kozak-rd .hstrip-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.kozak-rd .hstrip-list{grid-template-columns:1fr}}

/* ============================================================
   SERVICE TILES (parts/services-bento.php, variant "tiles")
   The homepage mockup's even photo grid. Column count comes
   from the partial so the last row is never a ragged remainder.
   ============================================================ */
.kozak-rd .stiles-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:22px;flex-wrap:wrap;margin-bottom:clamp(24px,2.8vw,38px)}
.kozak-rd .stiles-head .sec-head{margin-bottom:0}
.kozak-rd .stiles-all{flex:none}
.kozak-rd .stiles{display:grid;grid-template-columns:repeat(var(--stile-cols,5),minmax(0,1fr));
  gap:clamp(10px,1.05vw,15px)}
.kozak-rd .stile{display:flex;flex-direction:column;background:var(--bg-2);
  border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;
  transition:transform .28s,border-color .28s,box-shadow .28s}
.kozak-rd .stile:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow)}
.kozak-rd .stile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.kozak-rd .stile-img{display:block;aspect-ratio:1/1;overflow:hidden;background-color:var(--bg-3)}
.kozak-rd .stile-img img{width:100%;height:100%;object-fit:cover;display:block}
.kozak-rd .stile-name{display:flex;align-items:center;gap:10px;padding:13px 12px 15px;
  font-family:var(--font-label);font-weight:500;font-size:13px;line-height:1.3;color:var(--ink)}
.kozak-rd .stile-ic{width:26px;height:26px;flex:none;color:var(--gold)}
.kozak-rd .stile-ic svg{width:100%;height:100%;display:block}
@media(max-width:1100px){.kozak-rd .stiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.kozak-rd .stiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.kozak-rd .stiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .stile-name{font-size:12.5px;padding:11px 10px 13px}}

/* ============================================================
   MEET THE OWNERS - family photo, the copy, and the two owners.
   No "learn more" button: the client asked for it to come out.
   ============================================================ */
/* built to the homepage mockup: the family photograph, the copy, and the two
   owners, on the same evening navy as the process block above it */
.kozak-rd .owners{background:var(--bg);border-top:1px solid var(--line-soft);
  padding:clamp(28px,3.2vw,44px) 0}
.kozak-rd .own-grid{display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(0,1fr) minmax(0,1.18fr);
  gap:clamp(18px,2vw,28px);align-items:stretch}
.kozak-rd .own-photo{border-radius:8px;border:1px solid var(--line-soft);
  min-height:clamp(320px,27vw,390px);background-size:cover;background-position:center 38%}
.kozak-rd .own-copy{align-self:center}
.kozak-rd .own-copy h2{font-size:clamp(23px,2.25vw,31px);line-height:1.12;margin-top:10px;letter-spacing:-.01em}
.kozak-rd .own-copy p{color:var(--ink-soft);margin-top:12px;font-size:14px;line-height:1.62}
.kozak-rd .own-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.kozak-rd .own-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft)}
.kozak-rd .own-list svg{width:19px;height:19px;flex:none;color:var(--gold)}
.kozak-rd .own-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.3vw,18px)}
.kozak-rd .own-card{position:relative;border-radius:8px;overflow:hidden;
  min-height:clamp(320px,27vw,390px);border:1px solid rgba(201,162,74,.22);
  background-color:var(--bg-3);background-size:cover;background-position:center top}
.kozak-rd .own-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,10,18,0) 38%,rgba(1,10,18,.55) 62%,rgba(1,10,18,.96) 100%)}
.kozak-rd .own-card-in{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px 14px 20px}
.kozak-rd .own-card-in b{display:block;font-family:var(--font-serif);font-weight:600;
  font-size:clamp(18px,1.6vw,22px);color:var(--ink);letter-spacing:-.005em}
.kozak-rd .own-card-in>span{display:block;font-family:var(--font-label);font-size:12px;
  line-height:1.4;color:var(--ink-soft);margin-top:5px}

/* ---- the autograph ----
   Three classes, so it outranks ".own-card-in>span" (two classes and a tag)
   which would otherwise pull the wrapper back to caption size. The name sits
   on its own line at the right, as a signature closes a letter; the swash is
   an SVG stroke under it. */
.kozak-rd :is(.own-card-in,.own-prof-tx) .own-sig{position:relative;display:flex;justify-content:flex-end;
  margin:0;height:48px;font-size:0;color:var(--gold-bright)}
.kozak-rd :is(.own-card-in,.own-prof-tx) .own-sign{display:block;font-family:var(--font-autograph);
  font-size:clamp(40px,3.4vw,50px);line-height:1;color:var(--gold-bright);white-space:nowrap;
  margin:0 4px 0 0;letter-spacing:0;text-transform:none;
  transform:rotate(-8deg);transform-origin:right bottom;text-shadow:0 2px 12px rgba(0,0,0,.55);
  clip-path:inset(-45% -18% -45% -18%);
  transition:clip-path 1.25s cubic-bezier(.5,.08,.35,1) .45s}
.kozak-rd .own-swash{position:absolute;right:-2px;bottom:-9px;width:min(118px,82%);height:26px;
  overflow:visible;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;
  transform:rotate(-4deg);transform-origin:right center}
.kozak-rd .own-swash path{stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset .7s cubic-bezier(.5,0,.3,1) 1.55s,opacity 0s linear 1.55s}
/* Signing: until the card has scrolled in, the name is covered from the right
   and the swash undrawn; revealing the card writes the name left to right
   along its own slant, then draws the swash. Tied to .reveal:not(.in), so
   without the observer the signature is simply there. */
/* 118%, not 100%: the left edge is opened 18% for the capitals' lead-in
   strokes, so the cover has to reach that far too or a sliver of the "I" in
   Ievgen shows before anything is written */
.kozak-rd :is(.own-card,.own-prof).reveal:not(.in) .own-sign{clip-path:inset(-45% 118% -45% -18%)}
/* a zero-length dash still paints its round caps as a dot, so the undrawn swash
   is also made invisible, and becomes visible the moment it starts drawing */
.kozak-rd :is(.own-card,.own-prof).reveal:not(.in) .own-swash path{stroke-dashoffset:1;opacity:0}
@media(prefers-reduced-motion:reduce){
  .kozak-rd :is(.own-card-in,.own-prof-tx) .own-sign,.kozak-rd .own-swash path{transition:none}
}

@media(max-width:1180px){
  .kozak-rd .own-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .kozak-rd .own-cards{grid-column:1/-1}
  .kozak-rd .own-card,.kozak-rd .own-photo{min-height:360px}
}
@media(max-width:760px){
  .kozak-rd .own-grid{grid-template-columns:1fr}
  .kozak-rd .own-photo{min-height:280px}
  .kozak-rd .own-card{min-height:340px}
}
@media(max-width:430px){.kozak-rd .own-cards{grid-template-columns:1fr}}

/* ============================================================
   SLIM FOOTER (parts/footer-slim.php) - homepage only.
   ============================================================ */
/* the sticky call bar is fixed over the bottom of the viewport on phones, so
   both footers reserve room for it or it covers the legal links */
/* the evening navy, as the mockup draws it; the gold line above is the CTA's */
.kozak-rd .sfoot{background:var(--bg);padding:clamp(24px,2.8vw,38px) 0 20px}
@media(max-width:720px){
  .kozak-rd .sfoot,.kozak-rd .bfoot{padding-bottom:96px}
}
.kozak-rd .sf-row{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,2.4vw,42px);flex-wrap:wrap}
.kozak-rd .sf-brand{display:flex;flex-direction:column;line-height:1;flex:none}
.kozak-rd .sf-brand b{font-family:var(--font-serif);font-weight:600;font-size:clamp(32px,3.1vw,44px);
  letter-spacing:.01em;line-height:.95;color:var(--gold-bright)}
.kozak-rd .sf-brand>span{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-size:10.5px;color:var(--ink-soft);margin-top:8px}
.kozak-rd .sf-brand i{font-style:normal;font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.14em;font-weight:700;font-size:10.5px;color:var(--gold);margin-top:11px;word-spacing:.35em}
.kozak-rd a.sf-brand:hover b{color:var(--gold-bright)}
.kozak-rd .sf-contact{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:clamp(14px,2.1vw,38px)}
.kozak-rd .sf-contact li{display:flex;align-items:center;gap:10px;font-size:14.5px;
  color:var(--ink-soft);line-height:1.45}
.kozak-rd .sf-ic{width:28px;height:28px;flex:none;color:var(--gold);
  display:flex;align-items:center;justify-content:center}
.kozak-rd .sf-ic svg{width:20px;height:20px}
.kozak-rd .sf-contact a{color:var(--ink-soft);transition:color .2s;word-break:break-word}
.kozak-rd .sf-contact a:hover{color:var(--gold-bright)}
.kozak-rd .sf-soc{gap:14px;align-items:center}
.kozak-rd .sf-soc .soc-b{width:38px;height:38px}
.kozak-rd .sf-soc .soc-b svg{width:19px;height:19px}
/* Nextdoor and Yelp stand as bare marks in the mockup, not in circles */
.kozak-rd .sf-soc .soc-nextdoor,.kozak-rd .sf-soc .soc-yelp{background:none;width:34px}
.kozak-rd .sf-soc .soc-nextdoor{color:#00b246}
.kozak-rd .sf-soc .soc-yelp{color:#ff1a1a}
.kozak-rd .sf-soc .soc-nextdoor svg,.kozak-rd .sf-soc .soc-yelp svg{width:30px;height:30px}
.kozak-rd .sf-bot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:clamp(22px,2.6vw,34px);padding-top:18px;border-top:1px solid var(--line-soft)}
.kozak-rd .sf-bot p{color:var(--ink-mute);font-size:12.5px}
.kozak-rd .sf-legal{display:flex;align-items:center;flex-wrap:wrap}
/* the mockup spaces the three links apart with no rules between them */
.kozak-rd .sf-legal{gap:clamp(18px,2.4vw,34px)}
.kozak-rd .sf-legal a{color:var(--ink-mute);font-size:12.5px;transition:color .2s}
.kozak-rd .sf-legal a:hover{color:var(--gold-bright)}
.kozak-rd .sf-tag{font-size:12px;color:var(--ink-mute);text-align:right;line-height:1.5}
@media(max-width:900px){
  .kozak-rd .sf-row{gap:22px}
  .kozak-rd .sf-bot{justify-content:flex-start}
  .kozak-rd .sf-tag{text-align:left;width:100%}
}

/* ============================================================
   SINGLE-BAR FOOTER (parts/footer-bar.php) - About, built to its mockup.
   One low row: gold wordmark, the menu, white social marks, the copyright.
   ============================================================ */
.kozak-rd .afoot{background:var(--bg);border-top:0;padding:clamp(14px,1.3vw,18px) 0}
@media(max-width:720px){.kozak-rd .afoot{padding-bottom:96px}}
.kozak-rd .af-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;column-gap:clamp(24px,3.4vw,52px)}
.kozak-rd .af-brand{display:flex;flex-direction:column;line-height:1}
.kozak-rd .af-brand b{font-family:var(--font-serif);font-weight:600;font-size:30px;letter-spacing:.01em;color:var(--gold)}
.kozak-rd .af-brand span{margin-top:4px;font-family:var(--font-label);font-weight:500;font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.kozak-rd a.af-brand:hover b{color:var(--gold-bright)}
.kozak-rd .af-nav{display:flex;flex-wrap:wrap;align-items:center;column-gap:clamp(18px,2.4vw,34px);row-gap:6px}
.kozak-rd .af-nav a{font-family:var(--font-label);font-weight:500;font-size:13.5px;line-height:1.4;color:var(--ink);transition:color .2s}
.kozak-rd .af-nav a:hover,.kozak-rd .af-nav a.is-on{color:var(--gold-bright)}
/* the brand-coloured buttons of the shared row, drawn as plain white marks */
.kozak-rd .af-soc{gap:clamp(16px,1.8vw,24px);align-items:center;flex-wrap:nowrap}
.kozak-rd .af-soc .soc-b{width:22px;height:22px;background:none;border-radius:0;color:var(--ink)}
.kozak-rd .af-soc .soc-b:hover{color:var(--gold-bright);filter:none}
.kozak-rd .af-soc .soc-b svg{width:21px;height:21px}
/* Facebook's round mark: the "f" knocked out of a white disc, its stem
   running off the bottom edge */
.kozak-rd .af-soc .soc-facebook{width:21px;height:21px;border-radius:50%;overflow:hidden;
  background:var(--ink);color:var(--bg);align-items:flex-end}
.kozak-rd .af-soc .soc-facebook svg{width:18px;height:18px;margin:0 0 -3.5px 1px}
.kozak-rd .af-soc .soc-facebook:hover{background:var(--gold-bright);color:var(--bg)}
.kozak-rd .af-soc .soc-youtube svg path{fill:var(--bg)}
.kozak-rd .af-copy{font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
@media(max-width:1080px){
  .kozak-rd .af-row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:12px}
  .kozak-rd .af-copy{grid-column:1/-1}
}
@media(max-width:720px){
  .kozak-rd .af-row{grid-template-columns:minmax(0,1fr) auto}
  .kozak-rd .af-nav{grid-column:1/-1;grid-row:2}
  .kozak-rd .af-copy{grid-row:3}
}

@media(prefers-reduced-motion:reduce){
  .kozak-rd .hhero.is-anim .an{opacity:1;transform:none;animation:none}
  .kozak-rd .hhero-house .hh-l{stroke-dashoffset:0;animation:none}
  .kozak-rd .hhero-house .hh-w{fill-opacity:.35;animation:none}
  .kozak-rd .stile,.kozak-rd .soc-b{transition:none}
}

/* ============================================================
   ABOUT (page-about.php) - built to the client mockup.
   Namespaced .a- so it cannot collide with the home or contact
   blocks. The trust strip and the owner cards are the shared
   partials, so their rules live with the homepage above.
   ============================================================ */
/* --- hero: built to the mockup ---
   Heading left on the navy; the two owners right of centre, cut at the waist;
   the script on a rising slant in the top-right corner and the owners' names
   under it. The photo (attachment 2029) already carries dark, blurred sides,
   so the wash only has to hold the copy. */
.kozak-rd .ahero{position:relative;overflow:hidden;background:#010f1a;isolation:isolate;
  min-height:clamp(440px,56vh,560px);display:flex;align-items:center}
.kozak-rd .ahero-photo{position:absolute;inset:0 0 0 31%;z-index:-2;overflow:hidden}
.kozak-rd .ahero-zoom{position:absolute;inset:0;display:block;background-size:cover;
  background-position:66% 24%}
.kozak-rd .ahero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,#010f1a 0%,rgba(1,15,26,.97) 33%,rgba(1,15,26,.6) 46%,rgba(1,15,26,.08) 60%,rgba(1,15,26,0) 80%,rgba(1,15,26,.3) 100%),
             linear-gradient(180deg,rgba(1,15,26,.35) 0%,rgba(1,15,26,0) 26%,rgba(1,15,26,0) 70%,rgba(1,15,26,.55) 100%)}
/* clears the fixed header: the shared hero rule sets this, and the old
   override here put the breadcrumb underneath the logo */
.kozak-rd .ahero .wrap{position:relative;z-index:2;width:100%;
  padding-top:calc(var(--hdr-h) + clamp(10px,1.4vw,20px));padding-bottom:clamp(30px,3.6vw,50px)}
.kozak-rd .ahero-copy{max-width:640px}
/* as in the mockup: plain words and a chevron, not the site's caps crumb */
.kozak-rd .ahero .crumb{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink);
  gap:11px;margin-bottom:12px}
.kozak-rd .ahero .crumb .cur{color:var(--ink)}
.kozak-rd .ahero .crumb-sep{font-size:18px;line-height:1;color:var(--ink-soft)}
.kozak-rd .ahero h1{font-family:var(--font-serif);font-weight:600;
  font-size:clamp(30px,3.3vw,47px);line-height:1.08;letter-spacing:-.02em;margin-top:0;text-wrap:balance}
.kozak-rd .ahero h1 .gold{color:var(--gold-bright)}
.kozak-rd .ahero .lead{color:var(--ink-soft);font-size:clamp(15px,1.15vw,17px);
  margin-top:14px;max-width:54ch;line-height:1.6}
.kozak-rd .ahero-cta{display:flex;gap:13px;margin-top:24px;flex-wrap:wrap}
.kozak-rd .ahero-cap{position:absolute;right:clamp(20px,3vw,48px);bottom:clamp(18px,2.4vw,34px);
  z-index:2;text-align:left;text-shadow:0 1px 12px rgba(0,0,0,.75)}
.kozak-rd .ahero-cap b{display:block;font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.06em;font-size:14px;font-weight:600;color:var(--ink)}
.kozak-rd .ahero-cap span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.kozak-rd .ahero-script{position:absolute;z-index:2;right:clamp(26px,3.4vw,62px);top:calc(var(--hdr-h) + 6px);
  display:flex;flex-direction:column;align-items:flex-end;transform:rotate(-17deg);transform-origin:100% 0;
  pointer-events:none;color:var(--gold-bright);text-shadow:0 2px 20px rgba(0,0,0,.65)}
.kozak-rd .ahero-script-t{font-family:var(--font-script);font-size:clamp(24px,2.4vw,36px);
  line-height:1.02;text-align:left}
.kozak-rd .ahero-script-u{width:clamp(110px,10vw,150px);height:auto;margin-top:2px;margin-right:-4px;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
.kozak-rd .ahero.is-anim .an{opacity:0;transform:translateY(18px);
  animation:kozakHeroIn .85s cubic-bezier(.22,.75,.3,1) forwards;
  animation-delay:calc(var(--d,0) * 110ms + 140ms)}
@media(max-width:1180px){.kozak-rd .ahero-script{display:none}}
@media(max-width:900px){
  /* the caption drops under the copy instead of standing beside it */
  .kozak-rd .ahero{flex-wrap:wrap;align-content:center}
  .kozak-rd .ahero .wrap{padding-bottom:16px}
  .kozak-rd .ahero-photo{inset:0}
  .kozak-rd .ahero-zoom{background-position:62% 20%}
  .kozak-rd .ahero::before{background:linear-gradient(180deg,rgba(1,15,26,.84) 0%,rgba(1,15,26,.72) 45%,rgba(1,15,26,.94) 100%)}
  .kozak-rd .ahero-cap{position:static;flex:0 0 100%;box-sizing:border-box;width:100%;max-width:none;
    margin:0 auto;padding:0 var(--gutter) 30px;text-align:left;text-shadow:none}
}

/* --- our story: built to the mockup ---
   Copy on the left, the quote on the right, and between them a finished room
   that fills the band's height and melts into the navy at both edges. */
.kozak-rd .astory-sec{position:relative;overflow:hidden;padding:clamp(30px,3.6vw,50px) 0;
  border-bottom:1px solid var(--line-soft)}
.kozak-rd .astory{--astory-pad:clamp(30px,3.6vw,50px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.14fr) minmax(0,.5fr);
  gap:clamp(20px,2.5vw,40px);align-items:center}
.kozak-rd .astory-copy,.kozak-rd .astory-quote{position:relative;z-index:1}
.kozak-rd .astory-copy .eyebrow{letter-spacing:.06em;font-size:13.5px}
.kozak-rd .astory-copy h2{font-size:clamp(24px,2.3vw,33px);margin-top:8px;letter-spacing:-.015em;line-height:1.14}
.kozak-rd .astory-copy p{color:var(--ink-soft);margin-top:12px;font-size:15px;line-height:1.62}
.kozak-rd .astory-btn{margin-top:20px}
/* runs from the band's top edge to its bottom edge and a little under both
   neighbours; the mask does the fading */
.kozak-rd .astory-img{align-self:stretch;min-height:clamp(250px,24vw,340px);
  margin:calc(-1 * var(--astory-pad)) clamp(-40px,-2.4vw,-20px) calc(-1 * var(--astory-pad)) clamp(-90px,-5vw,-40px);
  background-size:auto 165%;background-position:52% 12%;background-repeat:no-repeat;background-color:var(--bg-2);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 78%,transparent 100%)}
.kozak-rd .astory-quote{margin:0}
.kozak-rd .astory-quote blockquote{margin:0;font-family:var(--font-label);font-weight:400;
  font-size:clamp(17px,1.55vw,22px);line-height:1.5;color:var(--ink)}
/* sits on the first line without making that line taller than the rest */
.kozak-rd .aq-mark{display:inline-block;vertical-align:-.36em;margin-right:.3em;
  font-family:var(--font-serif);font-weight:700;font-size:2.4em;line-height:0;color:var(--gold)}
.kozak-rd .astory-quote blockquote::after{content:"";display:block;width:42px;height:3px;border-radius:2px;
  background:var(--gold);margin-top:20px}
.kozak-rd .astory-quote figcaption{margin-top:16px;font-style:italic;font-size:15px;color:var(--ink-soft)}
@media(max-width:1080px){
  .kozak-rd .astory{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kozak-rd .astory-img{margin-right:calc(-1 * var(--gutter));
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
  .kozak-rd .astory-quote{grid-column:1/-1;padding-top:6px}
}
@media(max-width:720px){
  .kozak-rd .astory{grid-template-columns:1fr}
  .kozak-rd .astory-img{margin:0;min-height:0;aspect-ratio:16/10;border-radius:8px;
    background-size:cover;background-position:center 30%;-webkit-mask-image:none;mask-image:none}
}

/* --- meet the owners: built to the mockup ---
   A light band (the mockup's near-white, as on the services hub's One Team
   block): the copy on the left, then a white card per owner - portrait on the
   left, and beside it the homepage's caption and autograph
   (parts/owner-cards.php, layout "profile"). */
.kozak-rd .aowners{--own-ink:#16191d;--own-soft:#565d67;background:#f7f7f6;color:var(--own-ink);
  padding:clamp(28px,3.2vw,44px) 0}
.kozak-rd .aown-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.62fr);
  gap:clamp(22px,3vw,48px);align-items:center}
.kozak-rd .aowners .eyebrow{color:var(--gold-deep);letter-spacing:.06em;font-size:13.5px}
.kozak-rd .aown-copy h2{font-size:clamp(24px,2.1vw,30px);line-height:1.14;color:var(--own-ink);margin-top:8px;letter-spacing:-.015em}
.kozak-rd .aown-copy p{color:var(--own-soft);margin-top:12px;font-size:15px;line-height:1.62;max-width:50ch}

.kozak-rd .own-profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.kozak-rd .own-prof{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  min-height:clamp(212px,16.5vw,240px);background:#fff;border:1px solid rgba(22,25,29,.08);
  border-radius:10px;overflow:hidden;box-shadow:0 14px 34px -26px rgba(22,25,29,.45)}
.kozak-rd .own-prof-photo{display:block;background-color:#e8e6e1;background-size:cover;background-position:center 16%}
.kozak-rd .own-prof-tx{display:flex;flex-direction:column;min-width:0;
  padding:clamp(16px,1.5vw,22px) clamp(12px,1.15vw,17px) clamp(14px,1.3vw,18px)}
.kozak-rd .own-prof-tx h3{margin:0;font-family:var(--font-serif);font-weight:600;
  font-size:clamp(21px,1.9vw,27px);line-height:1.1;letter-spacing:-.005em;color:var(--own-ink)}
.kozak-rd .own-prof-co{display:block;margin-top:10px;font-family:var(--font-label);font-size:11.5px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--own-soft)}
.kozak-rd .own-prof-role{display:block;margin-top:4px;font-family:var(--font-label);font-weight:600;
  font-size:clamp(13.5px,1.05vw,15px);line-height:1.3;color:var(--gold-deep)}
/* the autograph closes the card at its foot; on white it takes a deeper gold
   and no shadow (the shared rules are written for a dark photograph) */
.kozak-rd .own-prof-tx .own-sig{margin-top:auto;padding-top:10px}
.kozak-rd .own-prof-tx .own-sign{color:#b3873a;text-shadow:none;font-size:clamp(38px,3.1vw,46px)}
.kozak-rd .own-prof-tx .own-swash{color:#b3873a}

@media(max-width:1180px){
  .kozak-rd .aown-grid{grid-template-columns:1fr}
  .kozak-rd .aown-copy p{max-width:64ch}
}
@media(max-width:700px){.kozak-rd .own-profiles{grid-template-columns:1fr}}
@media(max-width:380px){.kozak-rd .own-prof{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}}

/* --- why homeowners choose kozak: built to the mockup ---
   A compact band on the navy: the label and heading left-aligned, then six
   outlined cells on the same ground, each with a gold mark, a two-line title
   and one sentence. */
.kozak-rd .awhy{padding:clamp(28px,3.2vw,44px) 0;border-top:1px solid var(--line-soft)}
.kozak-rd .awhy-head{margin-bottom:clamp(16px,1.8vw,24px)}
.kozak-rd .awhy-head .eyebrow{letter-spacing:.06em;font-size:13.5px}
.kozak-rd .awhy-head h2{font-size:clamp(24px,2.2vw,32px);line-height:1.14;margin-top:6px;letter-spacing:-.01em}
.kozak-rd .awhy-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.1vw,16px)}
.kozak-rd .awhy-grid li{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:8px;padding:clamp(16px,1.5vw,22px) 12px clamp(16px,1.5vw,22px);background:transparent;
  border:1px solid rgba(200,216,240,.16);border-radius:6px;transition:border-color .25s,transform .25s}
.kozak-rd .awhy-grid li:hover{border-color:rgba(201,162,74,.7);transform:translateY(-3px)}
.kozak-rd .awhy-ic{width:clamp(34px,2.9vw,42px);height:clamp(34px,2.9vw,42px);color:var(--gold-bright)}
.kozak-rd .awhy-ic svg{width:100%;height:100%;display:block}
.kozak-rd .awhy-grid b{font-family:var(--font-label);font-weight:600;font-size:clamp(14.5px,1.2vw,16.5px);
  color:var(--ink);line-height:1.28;margin-top:2px}
.kozak-rd .awhy-grid li>span:last-child{font-size:13.5px;color:var(--ink-soft);line-height:1.45;text-wrap:balance}
@media(max-width:1080px){.kozak-rd .awhy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.kozak-rd .awhy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- our values: built to the mockup ---
   A LOW band - the mockup's is about 11% of its own width (the client:
   «обрати внимание, насколько блок низкий»). On the left ~41% a warm room
   that darkens towards its right edge, where the label, heading and one
   sentence sit; on the right the four values on the light ground, left
   aligned, divided by hairlines. Everything is sized so the band stays
   around 160-180px on a laptop. */
.kozak-rd .avalues{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);align-items:stretch}
.kozak-rd .aval-photo{position:relative;display:flex;align-items:center;justify-content:flex-end;
  background-size:160% auto;background-position:30% 80%;background-repeat:no-repeat;background-color:var(--bg-2);
  padding:clamp(10px,.85vw,13px) clamp(18px,2.2vw,36px) clamp(10px,.85vw,13px) clamp(90px,14vw,250px)}
.kozak-rd .aval-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(1,15,26,.12) 0%,rgba(1,15,26,.5) 22%,rgba(1,15,26,.84) 40%,rgba(1,15,26,.9) 100%)}
.kozak-rd .aval-copy{position:relative;z-index:1;width:100%;max-width:46ch}
.kozak-rd .aval-copy .eyebrow{letter-spacing:.06em;font-size:12px;line-height:1.3}
.kozak-rd .aval-copy h2{font-size:clamp(19px,1.8vw,26px);line-height:1.05;margin-top:3px;letter-spacing:-.01em}
.kozak-rd .aval-copy p{color:#dde2ea;margin-top:6px;font-size:13px;line-height:1.4;text-wrap:pretty}
.kozak-rd .aval-list{list-style:none;margin:0;background:#f7f7f6;color:#16191d;
  padding:clamp(10px,.85vw,13px) clamp(10px,1.4vw,24px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:center}
.kozak-rd .aval-list li{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;
  padding:4px clamp(12px,1.6vw,26px);border-left:1px solid rgba(22,25,29,.12)}
.kozak-rd .aval-list li:first-child{border-left:0}
.kozak-rd .aval-ic{width:clamp(28px,2.3vw,34px);height:clamp(28px,2.3vw,34px);margin-bottom:3px;color:#c68a2b}
.kozak-rd .aval-ic svg{width:100%;height:100%;display:block}
.kozak-rd .aval-list b{font-family:var(--font-label);font-weight:600;font-size:clamp(14px,1.1vw,15.5px);
  line-height:1.25;color:#16191d}
.kozak-rd .aval-list li>span:last-child{font-size:13px;color:#565d67;line-height:1.42;text-wrap:pretty}
@media(max-width:1080px){
  .kozak-rd .avalues{grid-template-columns:1fr}
  .kozak-rd .aval-photo{justify-content:flex-start;padding:22px 26px 22px max(26px,30vw)}
  .kozak-rd .aval-list{padding:16px 10px}
}
@media(max-width:700px){
  .kozak-rd .aval-photo{padding:22px 26px}
  .kozak-rd .aval-photo::before{background:linear-gradient(90deg,rgba(1,15,26,.78),rgba(1,15,26,.88))}
  .kozak-rd .aval-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .kozak-rd .aval-list li:nth-child(odd){border-left:0}
}
@media(max-width:380px){
  .kozak-rd .aval-list{grid-template-columns:1fr}
  .kozak-rd .aval-list li{border-left:0}
}

/* --- service area band --- */
/* --- service-area band: built to the mockup ---
   One low row on the navy (about 5% of its width in the mockup): a gold palm
   beside the label and a one-line heading, the sentence, and a gold outlined
   button, with hairlines above and below as the mockup separates its bands. */
.kozak-rd .aarea{background:var(--bg);border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);padding:clamp(12px,1.1vw,16px) 0}
.kozak-rd .aarea-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:clamp(20px,2.8vw,40px);align-items:center}
.kozak-rd .aarea-head{display:flex;align-items:center;gap:clamp(12px,1.3vw,18px)}
.kozak-rd .aarea-ic{width:44px;height:44px;flex:none;color:var(--gold)}
.kozak-rd .aarea-ic svg{width:100%;height:100%;display:block}
.kozak-rd .aarea-tx .eyebrow{letter-spacing:.05em;font-size:11.5px;line-height:1.3}
.kozak-rd .aarea-tx h2{font-size:21px;line-height:1.2;margin-top:2px;letter-spacing:0;
  white-space:nowrap;color:var(--ink)}
.kozak-rd .aarea-in>p{color:var(--ink-soft);font-size:12.5px;line-height:1.5;text-wrap:pretty}
.kozak-rd .aarea-btn{border:1.5px solid var(--gold);color:var(--gold-bright);background:transparent;
  padding:10px 16px;font-size:12.5px;letter-spacing:.02em;border-radius:4px}
.kozak-rd .aarea-btn:hover{background:rgba(201,162,74,.12);transform:translateY(-2px)}
.kozak-rd .aarea-btn svg{width:15px;height:15px}
@media(max-width:1080px){
  .kozak-rd .aarea{padding:20px 0}
  .kozak-rd .aarea-in{grid-template-columns:minmax(0,1fr) auto;row-gap:12px}
  .kozak-rd .aarea-in>p{grid-column:1/-1;grid-row:2}
}
@media(max-width:620px){
  .kozak-rd .aarea-in{grid-template-columns:1fr}
  .kozak-rd .aarea-tx h2{white-space:normal}
  .kozak-rd .aarea-btn{justify-self:start;grid-row:3}
}

/* ============================================================
   AWARDS BAR + SMALLER-PROJECT BAND - both from the homepage
   mockup. The awards bar overlaps the hero's lower edge, which
   is where the mockup puts it, and now carries the Thumbtack
   seal and the Google rating that used to sit inside the hero.
   ============================================================ */
.kozak-rd .hawards{position:relative;z-index:3;
  margin-top:clamp(-46px,-3.2vw,-26px);padding-bottom:clamp(18px,2.2vw,30px)}
.kozak-rd .haw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:rgba(1,10,18,.93);background:color-mix(in srgb,#010a12 93%,transparent);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.kozak-rd .haw-cell{display:flex;align-items:center;gap:clamp(10px,1.3vw,18px);
  padding:clamp(15px,1.8vw,25px) clamp(14px,1.7vw,26px);
  border-left:1px solid var(--line-soft);color:inherit;transition:background .25s}
.kozak-rd .haw-cell:first-child{border-left:0}
.kozak-rd a.haw-cell:hover{background:rgba(201,162,74,.07)}
.kozak-rd a.haw-cell:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.kozak-rd .haw-logo{flex:none;display:flex;align-items:center;justify-content:center}
.kozak-rd .haw-tt svg{width:clamp(30px,3vw,38px);height:auto;color:#009FD9;display:block}
.kozak-rd .haw-g svg{width:clamp(30px,3vw,40px);height:auto;display:block}
.kozak-rd .haw-nd svg{width:clamp(32px,3.1vw,40px);height:auto;display:block}
.kozak-rd .haw-trophy{flex:none;width:clamp(38px,3.8vw,52px);color:var(--gold)}
.kozak-rd .haw-trophy svg{width:100%;height:auto;display:block}
.kozak-rd .haw-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.kozak-rd .haw-tx b{font-family:var(--font-display);font-weight:600;
  font-size:clamp(16.5px,1.65vw,22px);color:var(--ink);line-height:1.15;letter-spacing:-.01em}
.kozak-rd .haw-tx>span{font-size:13px;color:var(--ink-soft);line-height:1.4}
/* three classes, so these beat ".haw-tx>span" and ".haw-tx b" above */
.kozak-rd .haw-tx .haw-rate{font-size:11.5px;color:var(--ink-mute);
  display:flex;align-items:center;gap:6px;margin-top:2px}
.kozak-rd .haw-tx .haw-big{display:flex;align-items:center;gap:9px}
.kozak-rd .haw-rate i,.kozak-rd .haw-big i{font-style:normal;color:#f4b400;letter-spacing:1px}
/* the small Google mark before "Google Award" under Top 5 */
.kozak-rd .haw-gmark{width:12px;height:12px;flex:none;display:block}
/* Nextdoor's years, in the platform's green */
.kozak-rd .haw-tx .haw-years{color:#3fcf86;font-weight:600;letter-spacing:.02em}
.kozak-rd .haw-hex{position:relative;flex:none;width:clamp(44px,4.2vw,58px);margin-left:auto}
.kozak-rd .haw-hex svg{width:100%;height:auto;display:block}
.kozak-rd .haw-hex i{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-style:normal;font-family:var(--font-label);
  font-weight:700;font-size:8px;line-height:1.2;color:#fff;text-align:center;letter-spacing:.02em}
/* four in a row, two by two on tablets and small laptops, one column on phones */
@media(max-width:1180px){
  .kozak-rd .haw{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .haw-cell:nth-child(odd){border-left:0}
  .kozak-rd .haw-cell:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
@media(max-width:900px){
  .kozak-rd .hawards{margin-top:0;padding-top:clamp(18px,3vw,28px)}
}
@media(max-width:600px){
  .kozak-rd .haw{grid-template-columns:1fr}
  .kozak-rd .haw-cell{border-left:0;border-top:1px solid var(--line-soft)}
  .kozak-rd .haw-cell:first-child{border-top:0}
}

/* built to the mockup: a flat dark card with a muted gold edge, the toolbox-and-
   hammer mark at a real size, and the heading in the serif */
.kozak-rd .hsmall{padding:0 0 clamp(18px,1.9vw,24px)}
.kozak-rd .hsmall-in{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;
  border:1px solid rgba(201,162,74,.5);border-radius:8px;
  padding:clamp(16px,1.9vw,24px) clamp(18px,2.3vw,32px);background:var(--bg-2)}
.kozak-rd .hsmall-ic{flex:none;width:clamp(48px,5vw,72px);color:var(--gold)}
.kozak-rd .hsmall-ic svg{width:100%;height:auto;display:block}
.kozak-rd .hsmall-ic .ic-occ{fill:var(--bg-2)}
.kozak-rd .hsmall-tx{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 300px}
.kozak-rd .hsmall-tx b{font-family:var(--font-serif);font-weight:600;
  font-size:clamp(20px,2.1vw,29px);line-height:1.15;color:var(--ink);letter-spacing:-.01em}
.kozak-rd .hsmall-tx>span{font-size:15px;color:var(--ink-soft);line-height:1.5}
.kozak-rd .hsmall .btn{flex:none}
@media(max-width:620px){.kozak-rd .hsmall .btn{width:100%;justify-content:center}}

/* header height token per breakpoint, and the bar's own compaction */
@media(max-width:1040px){:root{--hdr-h:76px}}
@media(max-width:620px){:root{--hdr-h:68px}
  .kozak-rd.rd-header .wrap{padding-top:11px;padding-bottom:11px}}

/* Privacy Policy and Terms - long legal prose on the navy ground. */
/* legal text quotes whole URLs; on a phone one of them was wider than the
   screen and pushed the page - and the header's menu button - sideways */
.kozak-rd .legal-body{max-width:78ch;overflow-wrap:anywhere}
.kozak-rd .legal-body h2{font-size:clamp(21px,2.3vw,29px);margin:34px 0 0}
.kozak-rd .legal-body h3,.kozak-rd .legal-body h4{font-family:var(--font-display);font-weight:600;
  font-size:18px;color:var(--ink);margin:26px 0 0}
.kozak-rd .legal-body p{margin:14px 0 0;color:var(--ink-soft);line-height:1.75}
.kozak-rd .legal-body ul,.kozak-rd .legal-body ol{margin:14px 0 0;padding-left:22px;color:var(--ink-soft)}
.kozak-rd .legal-body li{margin-top:7px;line-height:1.7}
.kozak-rd .legal-body a{color:var(--gold-bright);border-bottom:1px solid rgba(236,203,125,.35)}
.kozak-rd .legal-body a:hover{border-bottom-color:var(--gold-bright)}
.kozak-rd .legal-body strong{color:var(--ink)}
.kozak-rd .legal-body>*:first-child{margin-top:0}
.kozak-rd .cty-hero-date{margin-top:14px;font-family:var(--font-label);font-size:13.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
/* post cards reuse the service tiles but their images are landscape */
.kozak-rd .stiles .stile-img:has(img[width]){aspect-ratio:16/10}

/* ============================================================
   TRANSFORMATIONS (page-transformations.php) - built to
   new/makets/transformations_kozak.jpeg. Namespaced .tr- so it
   cannot collide with .tstrip-home, which is the homepage band
   that links here.
   ============================================================ */

/* ---- hero ---- */
.kozak-rd .tr-hero{position:relative;overflow:hidden;background:var(--bg);isolation:isolate;
  min-height:clamp(400px,27vw,520px);display:flex;align-items:center}
/* the comparison runs to the right edge and under the header, exactly as the
   mockup has it; the scrim below carries the copy across its left half */
.kozak-rd .tr-hero-photo{position:absolute;top:0;right:0;bottom:0;left:34%;z-index:-2;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 10%,rgba(0,0,0,.85) 20%,#000 30%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 10%,rgba(0,0,0,.85) 20%,#000 30%)}
/* --tr-split is where the two halves meet, measured across the whole hero, so
   the two labels can be placed against it from outside .tr-hero-photo. It is
   the panel's left edge plus 46% of what is left, which is where the mockup
   puts the seam. */
.kozak-rd .tr-hero{--tr-split:64.4%}
.kozak-rd .tr-hero-photo img{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover}
.kozak-rd .tr-hero-after{position:absolute;inset:0;display:block;overflow:hidden;
  clip-path:inset(0 0 0 46%)}
.kozak-rd .tr-hero-split{position:absolute;top:0;bottom:0;left:46%;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,transparent,rgba(244,240,232,.5) 12%,rgba(244,240,232,.5) 88%,transparent)}

/* BEFORE sits just inside the seam, AFTER out at the edge. The mockup staggers
   them vertically, but its hero starts below an opaque header - under ours the
   higher one disappeared, so both sit on one line, low enough to clear it. */
.kozak-rd .tr-tag{position:absolute;z-index:2;font-family:var(--font-label);
  text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:600;
  padding:8px 15px;border-radius:5px;line-height:1;pointer-events:none}
/* the 40px is the client's own adjustment; --hdr-h keeps them clear of the
   bar as it shrinks (84 -> 76px) on the way down */
.kozak-rd .tr-tag{top:calc(var(--hdr-h) + 17% - 40px)}
.kozak-rd .tr-tag-b{left:calc(var(--tr-split) - 16px);transform:translateX(-100%);
  color:var(--ink);background:rgba(1,8,15,.72);border:1px solid var(--line-soft);
  backdrop-filter:blur(6px)}
.kozak-rd .tr-tag-a{right:clamp(18px,2.6vw,44px);
  color:var(--on-gold);background:var(--gold);border:1px solid var(--gold-bright)}
/* the mockup darkens the whole "before" half and leaves the "after" half clean,
   which is both the reason the copy stays legible and a nice piece of meaning */
.kozak-rd .tr-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,var(--bg) 0%,rgba(1,15,26,.98) 30%,rgba(1,15,26,.9) 42%,rgba(1,15,26,.62) 52%,
                  rgba(1,15,26,.22) 64%,rgba(1,15,26,.04) 74%)}
.kozak-rd .tr-hero .wrap{position:relative;z-index:2;width:100%;
  padding-top:calc(var(--hdr-h) + clamp(18px,2.4vw,34px));padding-bottom:clamp(26px,3vw,42px)}

.kozak-rd .tr-crumbs{display:flex;align-items:center;gap:9px;font-family:var(--font-label);
  font-size:12px;color:var(--ink-mute);margin-bottom:clamp(14px,2vw,26px)}
.kozak-rd .tr-crumbs a{color:var(--ink-soft)}
.kozak-rd .tr-crumbs a:hover{color:var(--gold-bright)}

.kozak-rd .tr-h1{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(30px,4vw,54px);line-height:1.08;max-width:16ch}
.kozak-rd .tr-h1 .gold{color:var(--gold-bright)}
.kozak-rd .tr-hero .lead{color:var(--ink-soft);font-size:clamp(14.5px,1.05vw,16.5px);
  line-height:1.62;margin-top:16px;max-width:46ch}

.kozak-rd .tr-facts{list-style:none;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:14px clamp(20px,2.6vw,40px)}
.kozak-rd .tr-facts li{display:flex;align-items:center;gap:11px;
  font-family:var(--font-label);font-size:12.5px;line-height:1.35;color:var(--ink)}
.kozak-rd .tr-facts svg{width:26px;height:26px;flex:none;color:var(--gold)}

/* the handwritten line the mockup lays over the photograph */
.kozak-rd .tr-script{position:absolute;right:clamp(20px,3vw,52px);bottom:clamp(16px,2.4vw,34px);
  z-index:3;font-family:'Kaushan Script',cursive;color:var(--gold-bright);
  font-size:clamp(20px,2.3vw,32px);line-height:1.25;text-align:right;
  text-shadow:0 2px 18px rgba(1,15,26,.75);pointer-events:none}

/* ---- the work itself, on the ivory the site already uses for light bands ---- */
.kozak-rd .tr-work{background:var(--ivory);color:var(--ivory-ink);
  padding:clamp(30px,3.6vw,50px) 0 clamp(38px,4.6vw,64px)}
.kozak-rd .tr-filters{display:flex;flex-wrap:wrap;justify-content:center;
  gap:9px;margin-bottom:clamp(24px,3vw,38px)}
.kozak-rd .tr-chip{font-family:var(--font-label);font-size:13px;line-height:1;
  padding:11px 20px;border-radius:100px;cursor:pointer;
  border:1px solid var(--ivory-line);background:rgba(33,27,19,.05);color:var(--ivory-soft);
  transition:background .2s,color .2s,border-color .2s}
.kozak-rd .tr-chip:hover{color:var(--ivory-ink);border-color:rgba(33,27,19,.3)}
.kozak-rd .tr-chip.is-on{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:600}
.kozak-rd .tr-chip:focus-visible{outline:2px solid var(--ivory-ink);outline-offset:2px}

.kozak-rd .tr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,28px)}
.kozak-rd .trc{background:var(--ivory-card);border:1px solid var(--ivory-line);
  border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
/* the filter hides cards with the hidden attribute, and a display declaration
   on the element beats the browser's own [hidden]{display:none} - without this
   the attribute was set and the card carried on rendering */
.kozak-rd .trc[hidden]{display:none}
/* Back to the mockup's wide card: at 4:3 the sources' own ratio the cards ran
   too tall in a three-up grid. The pairs are 1200x900, so the middle band of
   each frame is used - centred, since the client crops them deliberately. */
.kozak-rd .trc .ba{aspect-ratio:1.96;--ba-crop:center center;border:0;border-radius:0;box-shadow:none;
  border-bottom:1px solid var(--ivory-line)}
.kozak-rd .trc .ba-knob{width:40px;height:40px;border-width:2px}
.kozak-rd .trc .ba-knob svg{width:17px;height:17px}
.kozak-rd .trc .ba-tag{font-size:9.5px;padding:6px 10px;top:12px;letter-spacing:.12em}
.kozak-rd .trc .ba-tag-b{left:12px}
.kozak-rd .trc .ba-tag-a{right:12px}

.kozak-rd .trc-body{padding:clamp(16px,1.5vw,22px)}
.kozak-rd .trc-title{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(18px,1.5vw,21px);line-height:1.2;color:var(--ivory-ink)}
.kozak-rd .trc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px;
  font-family:var(--font-label);font-size:12.5px;color:var(--gold-deep)}
.kozak-rd .trc-meta span{opacity:.6}
.kozak-rd .trc-desc{margin-top:11px;font-size:14.5px;line-height:1.55;color:var(--ivory-soft)}

.kozak-rd .tr-empty,.kozak-rd .tr-none{text-align:center;color:var(--ivory-soft);
  font-size:15px;margin:clamp(18px,2vw,28px) 0 0}
.kozak-rd .tr-none a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}

/* ---- closing band ---- */
.kozak-rd .tr-cta{position:relative;overflow:hidden;background:var(--bg);isolation:isolate;
  padding:clamp(38px,4.6vw,66px) 0}
/* the only night exterior we hold is the hero photograph, so it is anchored to
   its right where the lit house is, and sunk far enough that it reads as a
   ground rather than as the homepage picture again */
.kozak-rd .tr-cta-photo{position:absolute;top:0;right:0;bottom:0;left:38%;z-index:-2;
  background-size:cover;background-position:96% 42%;opacity:.8;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 40%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 40%)}
.kozak-rd .tr-cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,var(--bg) 0%,rgba(1,15,26,.96) 30%,rgba(1,15,26,.66) 48%,rgba(1,15,26,.34) 68%,rgba(1,15,26,.5) 100%)}
/* the four marks stand on the picture's right half; without this they land on
   whatever the photograph happens to have there and stop being readable */
.kozak-rd .tr-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(1,15,26,0) 28%,rgba(1,15,26,.5) 55%,rgba(1,15,26,.86) 78%,rgba(1,15,26,.95) 100%)}
/* The mockup runs the copy down the left and stands the four marks in a single
   row to its right, sitting on the same line as the buttons - not as a band
   across the foot of the section. */
.kozak-rd .tr-cta .wrap{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);
  gap:clamp(22px,3vw,54px);align-items:end}
.kozak-rd .tr-cta-copy{max-width:none}
.kozak-rd .tr-cta h2{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(28px,3.5vw,48px);line-height:1.1;margin-top:13px}
.kozak-rd .tr-cta p{color:var(--ink-soft);font-size:clamp(14.5px,1.05vw,16.5px);
  line-height:1.62;margin-top:14px;max-width:44ch}
.kozak-rd .tr-cta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,30px)}
.kozak-rd .tr-cta-btns .btn svg{width:17px;height:17px}

.kozak-rd .tr-cta-facts{list-style:none;margin:0;padding:0 0 6px;
  display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;
  gap:16px clamp(10px,1.3vw,22px)}
.kozak-rd .tr-cta-facts li{display:flex;align-items:center;gap:9px}
.kozak-rd .tr-cta-facts svg{width:23px;height:23px;flex:none;color:var(--gold)}
.kozak-rd .tr-cta-facts span{font-family:var(--font-label);font-size:11px;line-height:1.35;
  color:var(--ink-soft);text-wrap:balance}
.kozak-rd .tr-cta-facts b{display:block;font-weight:500;font-size:11.5px;color:var(--ink);white-space:nowrap}

@media(max-width:1000px){
  .kozak-rd .tr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the two columns stop fitting: the marks go back under the copy, two up */
  .kozak-rd .tr-cta .wrap{grid-template-columns:1fr;gap:clamp(26px,3.4vw,40px)}
  .kozak-rd .tr-cta-facts{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:0}
  .kozak-rd .tr-hero-photo{left:26%}
  .kozak-rd .tr-hero{--tr-split:60%}
}
@media(max-width:760px){
  /* the comparison goes full-bleed behind the copy, as every other hero does */
  .kozak-rd .tr-hero{min-height:0}
  .kozak-rd .tr-hero-photo{left:0;-webkit-mask-image:none;mask-image:none}
  .kozak-rd .tr-hero::before{background:
    linear-gradient(180deg,rgba(1,15,26,.78) 0%,rgba(1,15,26,.9) 55%,var(--bg) 100%)}
  /* full-bleed behind the copy on phones, where labels over running text would
     only be in the way */
  .kozak-rd .tr-tag,.kozak-rd .tr-hero-split{display:none}
  /* same trap as the services hub: .tr-hero is a flex row and the script
     sits outside .wrap, so static it became a squeezed right-hand column that
     ran off a 360px screen. Its own line under the copy instead. */
  .kozak-rd .tr-hero{flex-wrap:wrap}
  .kozak-rd .tr-script{position:static;display:block;text-align:left;
    flex:0 0 100%;max-width:none;margin:-6px auto 0;padding:0 var(--gutter) clamp(22px,4vw,34px)}
  .kozak-rd .tr-script br{display:none}
  .kozak-rd .tr-grid{grid-template-columns:1fr}
  .kozak-rd .tr-cta-photo{left:0;opacity:.5}
  .kozak-rd .tr-cta::before{background:
    linear-gradient(180deg,rgba(1,15,26,.82) 0%,rgba(1,15,26,.92) 60%,var(--bg) 100%)}
}

/* ============================================================
   SERVICES HUB (page-services.php) - built to
   new/makets/services_kozak.jpeg. Namespaced .hub- because
   .svc-* already belongs to the single service page.
   ============================================================ */

/* ---- hero ---- */
.kozak-rd .hub-hero{position:relative;overflow:hidden;background:var(--bg);isolation:isolate;
  min-height:clamp(380px,25vw,480px);display:flex;align-items:center}
.kozak-rd .hub-hero-photo{position:absolute;top:0;right:0;bottom:0;left:32%;z-index:-2;display:block;
  background-size:cover;background-position:center 55%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 12%,#000 30%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 12%,#000 30%)}
.kozak-rd .hub-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,var(--bg) 0%,rgba(1,15,26,.97) 26%,rgba(1,15,26,.86) 38%,rgba(1,15,26,.5) 50%,
                  rgba(1,15,26,.16) 64%,rgba(1,15,26,.04) 76%)}
.kozak-rd .hub-hero .wrap{position:relative;z-index:2;width:100%;
  padding-top:calc(var(--hdr-h) + clamp(18px,2.4vw,34px));padding-bottom:clamp(24px,3vw,40px)}

.kozak-rd .hub-crumbs{display:flex;align-items:center;gap:9px;font-family:var(--font-label);
  font-size:12px;color:var(--ink-mute);margin-bottom:clamp(12px,1.8vw,22px)}
.kozak-rd .hub-crumbs a{color:var(--ink-soft)}
.kozak-rd .hub-crumbs a:hover{color:var(--gold-bright)}

/* the mockup sets this on two lines with a manual break; the column has to be
   wide enough for "Improvement Services" or it falls to three */
.kozak-rd .hub-h1{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(27px,3.35vw,45px);line-height:1.08;max-width:21ch}
.kozak-rd .hub-h1 .gold{color:var(--gold-bright)}
.kozak-rd .hub-hero .lead{color:var(--ink-soft);font-size:clamp(14.5px,1.05vw,16.5px);
  line-height:1.62;margin-top:15px;max-width:52ch}

.kozak-rd .hub-facts{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:14px clamp(20px,2.6vw,42px)}
.kozak-rd .hub-facts li{display:flex;align-items:center;gap:11px}
.kozak-rd .hub-facts svg{width:27px;height:27px;flex:none;color:var(--gold)}
.kozak-rd .hub-facts span{font-family:var(--font-label);font-size:11.5px;line-height:1.35;color:var(--ink-soft)}
.kozak-rd .hub-facts b{display:block;font-weight:500;font-size:12.5px;color:var(--ink);white-space:nowrap}

.kozak-rd .hub-script{position:absolute;right:clamp(18px,2.6vw,46px);top:50%;transform:translateY(-46%);
  z-index:3;font-family:'Kaushan Script',cursive;color:var(--gold-bright);text-align:right;
  font-size:clamp(19px,2.1vw,30px);line-height:1.24;text-shadow:0 2px 18px rgba(1,15,26,.7);pointer-events:none}

/* ---- the twelve, on the ivory the site uses for its light bands ---- */
.kozak-rd .hub-work{background:var(--ivory);color:var(--ivory-ink);
  padding:clamp(34px,4.2vw,60px) 0 clamp(40px,5vw,70px)}
.kozak-rd .hub-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,44px);align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.kozak-rd .hub-head .eyebrow{color:var(--gold-deep)}
.kozak-rd .hub-head h2{font-family:var(--font-serif);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(24px,2.9vw,38px);line-height:1.12;color:var(--ivory-ink);margin-top:12px}
.kozak-rd .hub-head p{color:var(--ivory-soft);font-size:14.5px;line-height:1.6}

.kozak-rd .hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px)}
.kozak-rd .hubc{background:var(--ivory-card);border:1px solid var(--ivory-line);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.kozak-rd .hubc:hover{border-color:rgba(33,27,19,.28);transform:translateY(-3px);
  box-shadow:0 18px 34px -22px rgba(33,27,19,.5)}
.kozak-rd .hubc-photo{display:block;aspect-ratio:16/10;overflow:hidden;background:rgba(33,27,19,.06)}
.kozak-rd .hubc-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* the gold disc rides the seam between photo and body, as in the mockup */
.kozak-rd .hubc-body{position:relative;padding:clamp(14px,1.3vw,20px);padding-top:26px;flex:1}
.kozak-rd .hubc-ic{position:absolute;top:-19px;left:clamp(14px,1.3vw,20px);
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--on-gold);
  box-shadow:0 6px 16px -6px rgba(33,27,19,.55)}
.kozak-rd .hubc-ic svg{width:19px;height:19px}
.kozak-rd .hubc h3{font-family:var(--font-label);font-weight:600;font-size:14.5px;line-height:1.25;
  color:var(--ivory-ink);letter-spacing:0}
.kozak-rd .hubc h3 a{color:inherit}
.kozak-rd .hubc h3 a::after{content:"";position:absolute;inset:0}
.kozak-rd .hubc p{color:var(--ivory-soft);font-size:13px;line-height:1.5;margin-top:8px}
.kozak-rd .hubc-more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;
  font-size:10.5px;font-weight:600;color:var(--gold-deep)}
.kozak-rd .hubc-more svg{width:14px;height:14px;transition:transform .25s}
.kozak-rd .hubc:hover .hubc-more svg{transform:translateX(3px)}

/* ---- process: parts/process.php, shared with the homepage (see .process) ---- */

/* ---- one team: built to the mockup ----
   The mockup sets this band on a neutral near-white (#f7f7f7), not the ivory of
   the grid above. The photo runs to the page's left edge and nearly fills the
   band's height; the copy sits beside it; a hairline divides off the six
   reasons, spread down the photo's height, each with its own gold mark. */
.kozak-rd .hub-team{--team-ink:#16191d;--team-soft:#565d67;--team-label:#30353b;--team-line:rgba(22,25,29,.13);
  background:#f7f7f6;color:var(--team-ink)}
.kozak-rd .hub-team .wrap{display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1fr) minmax(0,.62fr);
  column-gap:clamp(20px,2.6vw,38px);align-items:center;
  padding-top:clamp(12px,1.1vw,16px);padding-bottom:clamp(12px,1.1vw,16px)}
/* the client's photograph is landscape and nearly fills the frame */
.kozak-rd .hub-team-photo{display:block;align-self:stretch;min-height:clamp(200px,16.4vw,240px);
  background-size:cover;background-position:52% 42%;border-radius:0 8px 8px 0;
  margin-left:calc(-1 * var(--gutter))}
.kozak-rd .hub-team-copy{padding:clamp(8px,.8vw,12px) 0}
.kozak-rd .hub-team-copy .eyebrow{color:var(--gold-deep);font-size:12px;letter-spacing:.07em}
.kozak-rd .hub-team-copy h2{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(22px,2.15vw,31px);line-height:1.15;color:var(--team-ink);margin-top:8px}
.kozak-rd .hub-team-copy p{color:var(--team-soft);font-size:14.5px;line-height:1.62;
  margin-top:10px;max-width:56ch}
.kozak-rd .hub-team-copy .btn{margin-top:18px}
.kozak-rd .hub-ticks{list-style:none;margin:0;align-self:stretch;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  padding:clamp(12px,1.3vw,18px) 0 clamp(12px,1.3vw,18px) clamp(18px,3vw,44px);
  border-left:1px solid var(--team-line)}
.kozak-rd .hub-ticks li{display:flex;align-items:center;gap:14px;
  font-family:var(--font-label);font-size:14.5px;line-height:1.3;color:var(--team-label)}
.kozak-rd .hub-ticks svg{width:24px;height:24px;flex:none;color:var(--gold)}

/* ---- closing band ---- */
.kozak-rd .hub-cta{position:relative;overflow:hidden;background:var(--bg);isolation:isolate;
  padding:clamp(34px,4.2vw,58px) 0}
/* the picture is a lit kitchen and dining room at dusk (2026-09-24, as the
   mockup has it); the band used to dim a dark floor photo to near-black, so the
   scrims below now only guard the copy on the left and the facts at the foot */
.kozak-rd .hub-cta-photo{position:absolute;top:0;right:0;bottom:0;left:34%;z-index:-2;display:block;
  background-size:cover;background-position:center 45%;opacity:.92;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 40%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 40%)}
.kozak-rd .hub-cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,var(--bg) 0%,rgba(1,15,26,.95) 30%,rgba(1,15,26,.62) 48%,rgba(1,15,26,.2) 70%,rgba(1,15,26,.3) 100%)}
.kozak-rd .hub-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(1,15,26,0) 40%,rgba(1,15,26,.35) 68%,rgba(1,15,26,.78) 100%)}
/* the copy takes the full width so the heading and its sentence each hold one
   line (the client: wrapped lines only made the band taller); the buttons and
   the three facts share the row beneath, facts to the right as in the mockup */
.kozak-rd .hub-cta .wrap{position:relative;z-index:1}
/* the mockup sets this one label in title case, not as a spaced-out caps line */
.kozak-rd .hub-cta .eyebrow{text-transform:none;letter-spacing:.005em;font-size:clamp(14px,1.15vw,16.5px)}
.kozak-rd .hub-cta h2{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(25px,2.8vw,38px);line-height:1.12;margin-top:8px}
.kozak-rd .hub-cta p{color:var(--ink-soft);font-size:clamp(14.5px,1.15vw,16.5px);
  line-height:1.6;margin-top:10px}
.kozak-rd .hub-cta-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:20px clamp(20px,3vw,48px);margin-top:clamp(18px,2.2vw,28px)}
.kozak-rd .hub-cta-btns{display:flex;flex-wrap:wrap;gap:12px}
.kozak-rd .hub-cta-btns .btn svg{width:17px;height:17px}
.kozak-rd .hub-cta-facts{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(18px,2.6vw,44px)}
.kozak-rd .hub-cta-facts li{display:flex;align-items:center;gap:12px}
.kozak-rd .hub-cta-facts svg{width:36px;height:36px;flex:none;color:var(--gold)}
.kozak-rd .hub-cta-facts span{font-family:var(--font-label);font-size:13.5px;line-height:1.35;color:var(--ink-soft)}
.kozak-rd .hub-cta-facts b{display:block;font-weight:500;font-size:14.5px;color:var(--ink);white-space:nowrap}

@media(max-width:1100px){
  .kozak-rd .hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* photo and copy side by side; the reasons drop beneath in three columns */
  .kozak-rd .hub-team .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
  .kozak-rd .hub-ticks{grid-column:1/-1;align-self:auto;display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;
    margin-top:12px;padding:20px 0 12px;border-left:0;border-top:1px solid var(--team-line)}
}
@media(max-width:820px){
  .kozak-rd .hub-hero-photo{left:0;-webkit-mask-image:none;mask-image:none}
  .kozak-rd .hub-hero::before{background:
    linear-gradient(180deg,rgba(1,15,26,.8) 0%,rgba(1,15,26,.92) 55%,var(--bg) 100%)}
  /* .hub-hero is a flex row and the script sits outside .wrap, so once it
     stops being absolute it became a second column beside the copy - on a
     phone it squeezed the headline down to a lone "&" and ran off the right
     edge. It now takes its own line under the copy, on the wrap's gutter. */
  .kozak-rd .hub-hero{flex-wrap:wrap}
  .kozak-rd .hub-script{position:static;display:block;text-align:left;transform:none;
    flex:0 0 100%;max-width:none;margin:-6px auto 0;padding:0 var(--gutter) clamp(22px,4vw,34px)}
  .kozak-rd .hub-script br{display:none}
  .kozak-rd .hub-head{grid-template-columns:1fr;align-items:start}
  .kozak-rd .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .hub-team .wrap{grid-template-columns:1fr;padding-top:26px}
  .kozak-rd .hub-team-photo{margin-left:0;min-height:230px;border-radius:8px}
  .kozak-rd .hub-team-copy{padding:20px 0 4px}
  .kozak-rd .hub-ticks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .hub-cta-photo{left:0;opacity:.6}
  .kozak-rd .hub-cta::before{background:
    linear-gradient(180deg,rgba(1,15,26,.84) 0%,rgba(1,15,26,.93) 60%,var(--bg) 100%)}
}
@media(max-width:520px){
  .kozak-rd .hub-grid{grid-template-columns:1fr}
  .kozak-rd .hub-ticks{grid-template-columns:1fr}
}

/* ============================================================
   ARTICLE LISTINGS (parts/post-list.php) AND SEARCH (search.php)
   Added in QA, 2026-09-24 - both used to render the old theme.
   ============================================================ */
.kozak-rd .blg-lead{margin-top:16px;max-width:62ch;color:var(--ink-soft);font-size:17px;line-height:1.62}
.kozak-rd .blg-lead p{margin:0}
.kozak-rd .blg-lead p + p{margin-top:8px}
.kozak-rd .blg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.kozak-rd .blg-card{position:relative;display:flex;flex-direction:column;background:var(--bg-2);
  border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;transition:border-color .25s,transform .25s}
.kozak-rd .blg-card:hover{border-color:var(--line);transform:translateY(-3px)}
.kozak-rd .blg-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.kozak-rd .blg-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.7,.25,1)}
.kozak-rd .blg-card:hover .blg-img img{transform:scale(1.04)}
.kozak-rd .blg-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.kozak-rd .blg-date{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--gold)}
.kozak-rd .blg-title{margin-top:8px;font-family:var(--font-serif);font-weight:600;font-size:clamp(18px,1.5vw,21px);line-height:1.25}
/* the title link covers the whole card, so the card is one click target */
.kozak-rd .blg-title a{color:var(--ink)}
.kozak-rd .blg-title a::after{content:"";position:absolute;inset:0;z-index:1}
.kozak-rd .blg-card:hover .blg-title a{color:var(--gold-bright)}
.kozak-rd .blg-excerpt{margin-top:10px;color:var(--ink-soft);font-size:15px;line-height:1.6}
.kozak-rd .blg-more{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:600;color:var(--gold-bright)}
.kozak-rd .blg-more svg{width:15px;height:15px;transition:transform .25s}
.kozak-rd .blg-card:hover .blg-more svg{transform:translateX(3px)}
.kozak-rd .blg-none{color:var(--ink-soft);font-size:17px}
.kozak-rd .blg-none a{color:var(--gold-bright)}
.kozak-rd .blg-about{padding-top:0}
.kozak-rd .blg-about .legal-body{border-top:1px solid var(--line-soft);padding-top:clamp(28px,3.4vw,44px)}
/* pagination (the_posts_pagination) */
.kozak-rd .blg-pages{margin-top:clamp(30px,3.6vw,46px)}
.kozak-rd .blg-pages .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.kozak-rd .blg-pages .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  padding:0 14px;border:1px solid var(--line);border-radius:100px;color:var(--ink-soft);
  font-family:var(--font-label);font-size:14px;letter-spacing:.04em;transition:.2s}
.kozak-rd .blg-pages a.page-numbers:hover{border-color:var(--gold);color:var(--gold-bright)}
.kozak-rd .blg-pages .page-numbers.current{background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  border-color:transparent;color:var(--on-gold);font-weight:600}
.kozak-rd .blg-pages .page-numbers.dots{border:0;min-width:0;padding:0 4px}
@media(max-width:1000px){.kozak-rd .blg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.kozak-rd .blg-grid{grid-template-columns:1fr}}

.kozak-rd .srch-form{margin:26px 0 0;max-width:520px}
.kozak-rd .srch-list{list-style:none;margin:0;padding:0;max-width:860px;display:grid;gap:12px}
.kozak-rd .srch-item{position:relative;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:12px;
  padding:18px 22px 18px;transition:border-color .25s}
.kozak-rd .srch-item:hover{border-color:var(--line)}
.kozak-rd .srch-kind{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--gold)}
.kozak-rd .srch-title{margin-top:5px;font-family:var(--font-serif);font-weight:600;font-size:clamp(19px,1.7vw,23px);line-height:1.25}
.kozak-rd .srch-title a{color:var(--ink)}
.kozak-rd .srch-title a::after{content:"";position:absolute;inset:0}
.kozak-rd .srch-item:hover .srch-title a{color:var(--gold-bright)}
.kozak-rd .srch-snip{margin-top:8px;color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.kozak-rd .srch-url{display:block;margin-top:8px;font-size:13px;color:var(--ink-mute);overflow-wrap:anywhere}
.kozak-rd .srch-none p{color:var(--ink-soft);font-size:17px;max-width:62ch}
.kozak-rd .srch-links{justify-content:flex-start;border-top:0;padding-top:0;margin-top:20px}

/* ============================================================
   "GET MY FREE ESTIMATE" POP-UP
   parts/estimate-modal.php + js/estimate.js. Every estimate button on the
   site opens it; the Contact page keeps its own form. The fields are the
   Contact page's five, placeholders and all, laid two to a row.
   Desktop: photo panel + ivory form. 601-900px: one centred card, no photo.
   Phones: the same card, near full screen. When the window is shorter than
   the form, the form column scrolls inside the dialog - the dialog itself
   never runs off the screen. Fields are 16px so iOS does not zoom in.
   Stacking: above the drawer (130), the call bar (110) and the header.
   ============================================================ */
html.est-lock{overflow:hidden}
@supports (scrollbar-gutter:stable){html.est-lock{scrollbar-gutter:stable}}
@supports not (scrollbar-gutter:stable){html.est-lock body{padding-right:var(--est-sbw,0)}}
.kozak-rd.est{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:20px;font-family:var(--font-body);font-size:16px;line-height:1.55;font-weight:400;
  color:var(--ivory-ink);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased}
.kozak-rd.est[hidden]{display:none}
.kozak-rd.est *,.kozak-rd.est *::before,.kozak-rd.est *::after{box-sizing:border-box}
.kozak-rd .est-scrim{position:absolute;inset:0;background:rgba(1,10,18,.76);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .24s ease;touch-action:none}
.kozak-rd.est.is-open .est-scrim{opacity:1}

/* flex, not grid: a stretched flex item takes the height max-height leaves
   the dialog, so the form column scrolls inside it */
.kozak-rd .est-dialog{position:relative;display:flex;align-items:stretch;width:min(920px,100%);
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
  background:var(--ivory);border-radius:14px;overflow:hidden;outline:none;
  box-shadow:0 44px 110px -30px rgba(0,0,0,.85),0 0 0 1px rgba(201,162,74,.3);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.kozak-rd.est.is-open .est-dialog{opacity:1;transform:none}

.kozak-rd .est-x{position:absolute;top:12px;right:12px;z-index:3;width:42px;height:42px;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(33,27,19,.07);color:var(--ivory-ink);transition:background .2s,transform .25s}
.kozak-rd .est-x:hover{background:rgba(33,27,19,.14);transform:rotate(90deg)}
.kozak-rd .est-x svg{width:19px;height:19px;display:block}

/* --- the photo panel: the picture fills it, the promises sit over its foot --- */
.kozak-rd .est-side{position:relative;flex:0 0 360px;min-height:min(580px,calc(100dvh - 40px));overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;background:#021b2c;color:var(--ink)}
.kozak-rd .est-side-ph{position:absolute;inset:0;z-index:-1;overflow:hidden}
.kozak-rd .est-side-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,15,26,0) 44%,rgba(1,15,26,.55) 62%,rgba(1,15,26,.92) 80%,#010f1a 100%)}
.kozak-rd .est-side-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--est-photo-pos,50% 20%)}
.kozak-rd .est-side-in{position:relative;padding:0 28px 26px}
.kozak-rd .est-side .eyebrow{color:var(--gold-bright);font-size:11.5px}
.kozak-rd .est-side-h{font-family:var(--font-serif);font-weight:600;font-size:30px;line-height:1.1;color:#fff;
  margin-top:8px;letter-spacing:-.005em;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.kozak-rd .est-side-h .gold{color:var(--gold)}
.kozak-rd .est-side-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.kozak-rd .est-side-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.4;color:#dde2ea}
.kozak-rd .est-side-list svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--gold)}
.kozak-rd .est-side-call{margin-top:14px;padding-top:12px;border-top:1px solid rgba(201,162,74,.3);
  font-size:13px;line-height:1.4;color:var(--ink-mute)}
.kozak-rd .est-side-call b{margin-left:4px;font-family:var(--font-label);font-weight:600;
  font-size:16px;letter-spacing:.01em;color:var(--gold-bright);white-space:nowrap}

/* --- the form column --- */
.kozak-rd .est-main{position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;padding:34px 36px 26px;background:var(--ivory)}
.kozak-rd .est-view{flex:none;margin:auto 0}
.kozak-rd .est-view[hidden]{display:none}
.kozak-rd .est-main .eyebrow{color:var(--gold-deep)}
.kozak-rd.est .est-h{font-family:var(--font-serif);font-weight:600;font-size:clamp(24px,2.4vw,29px);line-height:1.12;
  color:var(--ivory-ink);margin:8px 0 0;padding-right:40px;letter-spacing:-.01em}
.kozak-rd.est .est-sub{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--ivory-soft);max-width:50ch}
.kozak-rd .est-trust{display:none}

.kozak-rd.est .wpcf7{margin-top:18px}
.kozak-rd.est .est-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kozak-rd.est .est-wide,.kozak-rd.est .est-send{grid-column:1/-1}
.kozak-rd.est .est-f{min-width:0}
.kozak-rd.est .wpcf7-form-control-wrap{display:block;position:relative}
/* the Contact page's fields */
.kozak-rd.est input[type=text],.kozak-rd.est input[type=tel],.kozak-rd.est input[type=email],
.kozak-rd.est select,.kozak-rd.est textarea{display:block;width:100%;height:auto;margin:0;padding:14px 16px;
  font-family:var(--font-body);font-size:16px;line-height:1.4;font-weight:400;color:var(--ivory-ink);
  background:var(--ivory-card);border:1px solid var(--ivory-line);border-radius:4px;box-shadow:none;
  -webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.kozak-rd.est textarea{height:92px;min-height:70px;resize:vertical;line-height:1.5}
.kozak-rd.est ::placeholder{color:#8b8171;opacity:1}
.kozak-rd.est input:focus,.kozak-rd.est select:focus,.kozak-rd.est textarea:focus{outline:none;
  border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(201,162,74,.2)}
.kozak-rd.est select{padding-right:42px;cursor:pointer;background-image:none}
.kozak-rd.est select option{color:var(--ivory-ink)}
.kozak-rd.est .est-sel .wpcf7-form-control-wrap::after{content:"";position:absolute;right:18px;top:23px;
  width:11px;height:7px;pointer-events:none;background:var(--ivory-soft);clip-path:polygon(0 0,100% 0,50% 100%)}

.kozak-rd.est .cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.kozak-rd.est .est-send{position:relative;margin-top:2px}
.kozak-rd.est input[type=submit]{display:block;width:100%;margin:0;cursor:pointer;border:0;border-radius:4px;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:13.5px;
  padding:17px 22px;color:var(--on-gold);background-color:var(--gold);
  /* the arrow sits just past the label - tuned to "Get My Free Estimate" */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1409' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),linear-gradient(180deg,var(--gold-bright),var(--gold));
  background-repeat:no-repeat,no-repeat;background-size:16px 16px,100% 100%;
  background-position:calc(50% + var(--est-arrow,110px)) center,0 0;
  box-shadow:0 12px 26px -14px rgba(162,120,45,.8);transition:transform .22s,box-shadow .22s,opacity .2s;
  -webkit-appearance:none;appearance:none}
.kozak-rd.est input[type=submit]:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(162,120,45,.9)}
.kozak-rd.est input[type=submit]:focus-visible{outline:2px solid var(--ivory-ink);outline-offset:3px}
.kozak-rd.est input[type=submit]:disabled{opacity:.6;cursor:default;transform:none}
.kozak-rd.est .wpcf7 form .wpcf7-spinner{position:absolute;right:16px;top:50%;margin:-12px 0 0;background-color:rgba(1,15,26,.18)}
.kozak-rd.est .wpcf7 form .wpcf7-spinner::before{background-color:var(--on-gold)}

.kozak-rd.est .wpcf7 .wpcf7-not-valid-tip{display:block;margin-top:6px;color:#a52318;font-size:13px;font-weight:500;line-height:1.35}
.kozak-rd.est .wpcf7 .wpcf7-not-valid{border-color:#a52318!important;background-color:#fffaf9}
.kozak-rd.est .wpcf7 form .wpcf7-response-output{display:none;margin:14px 0 0!important;padding:12px 14px!important;
  border:1px solid var(--ivory-line)!important;border-radius:4px;background:var(--ivory-card);
  color:var(--ivory-ink);font-size:14px;line-height:1.5}
.kozak-rd.est .wpcf7 form.invalid .wpcf7-response-output,.kozak-rd.est .wpcf7 form.unaccepted .wpcf7-response-output,
.kozak-rd.est .wpcf7 form.failed .wpcf7-response-output,.kozak-rd.est .wpcf7 form.spam .wpcf7-response-output,
.kozak-rd.est .wpcf7 form.aborted .wpcf7-response-output{display:block;border-color:#a52318!important;color:#8c1d18}
.kozak-rd.est .wpcf7 form.sent .wpcf7-response-output{display:block;border-color:#3f7d3f!important;color:#26602a}

.kozak-rd.est .est-fine{margin-top:12px;font-size:12.5px;line-height:1.5;color:#7a6f5d;text-align:center}
.kozak-rd.est .est-fine a{color:var(--ivory-ink);border-bottom:1px solid rgba(33,27,19,.3)}
.kozak-rd.est .est-fine a:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
.kozak-rd.est a:focus-visible,.kozak-rd.est .est-x:focus-visible,.kozak-rd.est .btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

/* --- the thank-you view --- */
.kozak-rd .est-done{padding:26px 6px 18px;text-align:center;outline:none}
.kozak-rd .est-done-ic{width:64px;height:64px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--on-gold);
  box-shadow:0 16px 34px -14px rgba(162,120,45,.9)}
.kozak-rd .est-done-ic svg{width:30px;height:30px;display:block}
.kozak-rd.est .est-done .est-h{margin-top:18px;padding-right:0}
.kozak-rd.est .est-done .est-sub{margin-left:auto;margin-right:auto;max-width:42ch}
.kozak-rd.est .est-done-call a{color:var(--gold-deep);font-weight:700;border-bottom:1px solid rgba(162,120,45,.45);white-space:nowrap}
.kozak-rd .est-done-btns{margin-top:24px;display:flex;justify-content:center}
.kozak-rd .est-done-btns .btn{padding:15px 26px;font-size:13.5px}

/* --- tablets: one card, no photo panel --- */
@media(max-width:900px){
  .kozak-rd .est-dialog{width:min(580px,100%);border-top:3px solid var(--gold)}
  .kozak-rd .est-side{display:none}
  .kozak-rd .est-main{padding:28px 28px 22px}
  .kozak-rd .est-trust{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:10px 0 0;padding:0}
  .kozak-rd .est-trust li{display:flex;align-items:center;gap:6px;font-family:var(--font-label);font-weight:600;
    font-size:12.5px;letter-spacing:.02em;color:#4d4435}
  .kozak-rd .est-trust svg{width:14px;height:14px;flex:none;color:var(--gold-deep)}
}
/* --- phones: the same card, the screen's width less a small margin --- */
@media(max-width:600px){
  .kozak-rd.est{padding:10px}
  .kozak-rd .est-dialog{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);border-radius:12px;transform:translateY(24px)}
  .kozak-rd .est-scrim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(1,10,18,.8)}
  .kozak-rd .est-main{padding:22px 18px 18px}
  .kozak-rd .est-x{top:8px;right:8px}
  .kozak-rd.est .est-h{font-size:24px;padding-right:40px}
  .kozak-rd.est .est-sub{font-size:14px}
  .kozak-rd.est .wpcf7{margin-top:14px}
  .kozak-rd.est .est-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .kozak-rd.est input[type=text],.kozak-rd.est input[type=tel],.kozak-rd.est input[type=email],
  .kozak-rd.est select,.kozak-rd.est textarea{padding:13px 14px}
  .kozak-rd.est textarea{height:84px}
  .kozak-rd.est .est-sel .wpcf7-form-control-wrap::after{top:22px}
  .kozak-rd .est-done{padding-top:14px}
}
@media(prefers-reduced-motion:reduce){
  .kozak-rd .est-dialog,.kozak-rd .est-scrim,.kozak-rd .est-x{transition:none}
  .kozak-rd .est-dialog{transform:none}
}

/* ============================================================
   REVIEW SLIDERS ON THE HOMEPAGE AND ABOUT (2026-10-05)
   Both use parts/reviews-slider.php, the service pages' cards.
   ============================================================ */
/* homepage, "Real People. Real Results.": the slider under the heading, the
   four platform cards two by two beside it */
.kozak-rd .noms-dark.has-rev .noms-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:center}
.kozak-rd .noms-dark.has-rev .award-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.kozak-rd .noms-dark.has-rev .svc2-rev-stage{max-width:560px}
@media(max-width:1080px){
  .kozak-rd .noms-dark.has-rev .noms-grid{grid-template-columns:1fr}
  .kozak-rd .noms-dark.has-rev .award-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){.kozak-rd .noms-dark.has-rev .award-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.kozak-rd .noms-dark.has-rev .award-grid{grid-template-columns:1fr}}

/* About: three at a time, two on a tablet, one on a phone; the carousel in
   parts/outro.php reads --per */
.kozak-rd .arev{padding:clamp(34px,4vw,58px) 0;background:var(--bg)}
.kozak-rd .arev-head{margin-bottom:clamp(16px,2vw,26px)}
.kozak-rd .arev-head h2{margin-top:8px;font-size:clamp(24px,2.6vw,34px);line-height:1.1;color:var(--ink)}
.kozak-rd .rvs{--per:3}
.kozak-rd .rvs-track{display:grid;grid-template-columns:repeat(var(--per),minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
/* the single-card slider's wide-screen rules stack every card in one cell;
   here the cards sit side by side and the hidden ones leave the row */
.kozak-rd .rvs .svc2-rev-card{grid-area:auto;display:flex;flex-direction:column;justify-content:flex-start}
.kozak-rd .rvs .svc2-rev-card[hidden]{display:none;visibility:visible}
.kozak-rd .rvs .svc2-rev-card figcaption{margin-top:auto;padding-top:12px}
.kozak-rd .rvs .svc2-rev-nav{grid-row:auto;justify-content:center;margin-top:clamp(16px,1.8vw,22px)}
.kozak-rd .rvs .svc2-rev-arrow{position:static;transform:none}
@media(max-width:1000px){.kozak-rd .rvs{--per:2}}
@media(max-width:640px){.kozak-rd .rvs{--per:1}}

/* the five-figure strip with a page's own marks in front (seven in one row):
   content-sized columns where they fit, four and three below that */
.kozak-rd .hstrip.is-wide .hstrip-list{grid-template-columns:repeat(var(--n),max-content)}
@media(max-width:1360px){
  .kozak-rd .hstrip.is-wide .hstrip-list{grid-template-columns:repeat(4,minmax(0,1fr));
    justify-content:normal;gap:22px 24px}
}
@media(max-width:760px){.kozak-rd .hstrip.is-wide .hstrip-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.kozak-rd .hstrip.is-wide .hstrip-list{grid-template-columns:1fr}}
/* on the service pages and towns the awards come right after the strip */
.kozak-rd .hstrip + .hawards{margin-top:0;padding-top:0}

/* plain text pages (Privacy Policy, Terms): one centred reading column under
   the header, nothing else (2026-10-05) */
.kozak-rd .txt-page{padding:calc(var(--hdr-h) + clamp(28px,4vw,56px)) 0 clamp(40px,5vw,72px);background:var(--bg)}
.kozak-rd .txt-col{max-width:calc(860px + 2 * var(--gutter))}
.kozak-rd .txt-page .crumb{font-family:var(--font-label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.kozak-rd .txt-page .crumb a{color:var(--ink-mute)}
.kozak-rd .txt-page .crumb a:hover{color:var(--gold-bright)}
.kozak-rd .txt-page .crumb .cur{color:var(--gold)}
.kozak-rd .txt-page h1{margin-top:12px;font-size:clamp(30px,4vw,48px);line-height:1.08;color:var(--ink)}
.kozak-rd .txt-page .legal-body{max-width:none;margin-top:clamp(18px,2.4vw,30px);
  padding-top:clamp(18px,2.4vw,30px);border-top:1px solid var(--line-soft)}

/* service page before/after drawn as the Transformations page's cards
   ('tr_style' => 'cards', painting since 2026-10-05) */
.kozak-rd .svc2-trc{background:var(--ivory);color:var(--ivory-ink);padding:clamp(40px,5vw,72px) 0}
.kozak-rd .svc2-trc-head{max-width:760px;margin-bottom:clamp(20px,2.4vw,32px)}
.kozak-rd .svc2-trc-head .eyebrow{color:var(--gold-deep);letter-spacing:.16em;font-size:clamp(11px,1.05vw,13px)}
.kozak-rd .svc2-trc-head h2{margin-top:8px;font-size:clamp(26px,3vw,40px);line-height:1.08;color:var(--ivory-ink)}
.kozak-rd .svc2-trc-head p{margin-top:10px;color:var(--ivory-soft);font-size:clamp(15px,1.2vw,17px)}
.kozak-rd .svc2-trc .trc-title{font-size:clamp(19px,1.5vw,22px)}
.kozak-rd .svc2-trc-more{margin-top:clamp(20px,2.4vw,32px);text-align:center}
/* the text fills the reading column (the story pages' 62ch cap made it a
   narrow strip inside it) */
.kozak-rd .txt-page .legal-body p,.kozak-rd .txt-page .legal-body ul,.kozak-rd .txt-page .legal-body ol{max-width:none}

/* ============================================================
   AWARDS BAR, FIVE CELLS (2026-10-08): BusinessRate's "Ranked #1"
   joins as the second cell. Five in a row on a wide screen; three
   over two between 761 and 1280px; two to a row (the last one
   across) on small tablets; one column on phones. ":nth-child(n)"
   lifts these over the four-cell rules above (odd / n+3).
   ============================================================ */
/* columns as wide as their words need, the spare width shared out: with five
   equal ones "Home Renovation Companies" broke over three lines while the
   Nextdoor cell stood half empty */
.kozak-rd .haw{grid-template-columns:repeat(5,auto)}
.kozak-rd .haw-tx .haw-rate{white-space:nowrap}
@media(min-width:1281px){
  .kozak-rd .haw-cell{padding-left:clamp(14px,1.3vw,24px);padding-right:clamp(14px,1.3vw,24px);gap:clamp(10px,.9vw,16px)}
}
.kozak-rd .haw-crest{flex:none;width:clamp(36px,3.5vw,48px)}
.kozak-rd .haw-crest svg{width:100%;height:auto;display:block;overflow:visible}
@media(max-width:1280px){
  .kozak-rd .haw{grid-template-columns:repeat(6,minmax(0,1fr))}
  .kozak-rd .haw-cell:nth-child(n){grid-column:span 2;border-top:0;border-left:1px solid var(--line-soft)}
  .kozak-rd .haw-cell:nth-child(n+4){grid-column:span 3;border-top:1px solid var(--line-soft)}
  .kozak-rd .haw-cell:nth-child(1),.kozak-rd .haw-cell:nth-child(4){border-left:0}
}
@media(max-width:760px){
  .kozak-rd .haw{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .haw-cell:nth-child(n){grid-column:auto;border-left:1px solid var(--line-soft);border-top:1px solid var(--line-soft)}
  .kozak-rd .haw-cell:nth-child(odd){border-left:0}
  .kozak-rd .haw-cell:nth-child(-n+2){border-top:0}
  .kozak-rd .haw-cell:last-child{grid-column:1 / -1}
}
@media(max-width:600px){
  .kozak-rd .haw{grid-template-columns:1fr}
  .kozak-rd .haw-cell:nth-child(n){border-left:0;border-top:1px solid var(--line-soft)}
  .kozak-rd .haw-cell:first-child{border-top:0}
}

/* ============================================================
   TRANSFORMATIONS, 2026-10-08
   - the first screen is one photograph (the client's kitchen and
     living room) across the whole width, darkened towards the copy
     as the mockup does it; no before/after in the middle any more;
   - the cards take each pair's own shape (--ar from the template),
     so no photograph is cut, and the grid packs them as a masonry
     wall (parts/outro.php sets each card's row span) so portrait
     and landscape pairs sit together without holes.
   ============================================================ */
.kozak-rd .tr-hero.is-photo{min-height:clamp(440px,34vw,620px)}
.kozak-rd .tr-hero.is-photo .tr-hero-photo{left:0;-webkit-mask-image:none;mask-image:none}
.kozak-rd .tr-hero.is-photo .tr-hero-photo img{object-position:50% 58%}
.kozak-rd .tr-hero.is-photo::before{background:
  linear-gradient(90deg,rgba(1,15,26,.94) 0%,rgba(1,15,26,.86) 26%,rgba(1,15,26,.62) 46%,rgba(1,15,26,.34) 66%,rgba(1,15,26,.22) 100%),
  linear-gradient(180deg,rgba(1,15,26,.55) 0%,rgba(1,15,26,0) 30%,rgba(1,15,26,0) 72%,rgba(1,15,26,.7) 100%)}
@media(max-width:760px){
  .kozak-rd .tr-hero.is-photo::before{background:
    linear-gradient(180deg,rgba(1,15,26,.82) 0%,rgba(1,15,26,.74) 50%,rgba(1,15,26,.92) 100%)}
}

.kozak-rd .tr-grid{align-items:start}
.kozak-rd .trc .ba{aspect-ratio:var(--ar,1.96)}
.kozak-rd .tr-grid.is-masonry{grid-auto-rows:4px;row-gap:0}

/* ============================================================
   RECENT PROJECTS IN FOCUS (service pages, 2026-10-08)
   The client's work photographs one at a time: the one in front at
   full strength and in its own shape (never cropped to a common
   box), the next ones dimmed beside it and running off the right
   edge of the screen. parts/outro.php moves the row; without the
   script it is a plain scrolling row with nothing dimmed.
   ============================================================ */
.kozak-rd .svc2-ex.is-focus{padding:clamp(40px,5vw,76px) 0;overflow:hidden}
.kozak-rd .svc2-ex.is-focus .svc2-ex-grid{grid-template-columns:minmax(260px,.44fr) minmax(0,1.56fr);
  gap:clamp(24px,3.4vw,56px)}
.kozak-rd .svc2-ex.is-focus .svc2-ex-copy h2{font-size:clamp(24px,2.6vw,36px)}
.kozak-rd .exf-nav{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,2.2vw,30px)}
.kozak-rd .exf-count{font-family:var(--font-label);font-size:14px;letter-spacing:.08em;color:var(--s2-soft);
  min-width:4.6em;text-align:center}
.kozak-rd .exf-count b{font-size:19px;font-weight:600;color:var(--s2-dark)}
.kozak-rd .exf{--exf-h:clamp(300px,33vw,560px);position:relative;min-width:0;
  margin-right:calc(-1 * var(--gutter));touch-action:pan-y}
.kozak-rd .exf-track{position:relative;display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);
  overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 18px 0}
.kozak-rd .exf.is-ready{overflow:hidden}
.kozak-rd .exf.is-ready .exf-track{overflow:visible;scroll-snap-type:none;
  transition:transform .65s cubic-bezier(.22,.7,.2,1);will-change:transform}
.kozak-rd .exf-slide{flex:0 0 auto;position:relative;display:block;padding:0;border:0;
  width:min(calc(var(--exf-h) * var(--ar)),84vw);aspect-ratio:var(--ar);height:auto;
  border-radius:10px;overflow:hidden;background:#e9ebec;scroll-snap-align:start;cursor:pointer;
  transition:opacity .55s,filter .55s,box-shadow .55s}
.kozak-rd .exf-slide img{display:block;width:100%;height:100%;object-fit:cover}
.kozak-rd .exf.is-ready .exf-slide{opacity:.4;filter:saturate(.5)}
.kozak-rd .exf.is-ready .exf-slide:hover{opacity:.72}
.kozak-rd .exf.is-ready .exf-slide.is-on{opacity:1;filter:none;cursor:zoom-in;
  box-shadow:0 30px 60px -34px rgba(16,24,32,.6)}
.kozak-rd .exf-slide:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
@media(max-width:1000px){
  .kozak-rd .svc2-ex.is-focus .svc2-ex-grid{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .exf{--exf-h:clamp(260px,62vw,480px)}
}
@media(prefers-reduced-motion:reduce){
  .kozak-rd .exf.is-ready .exf-track,.kozak-rd .exf-slide{transition:none}
}

/* before/after halves in the pair's own shape (2026-10-08): the template puts
   --ar on .svc2-ba-pair; portrait pairs stay side by side on a phone, where
   stacked they would run a screen and a half tall */
.kozak-rd .svc2-ba-pair[style*="--ar"] .svc2-ba-half{aspect-ratio:var(--ar)}
.kozak-rd .svc2-tr-stage .svc2-ba-pair[style*="--ar"]{max-width:calc(var(--ar) * 2 * 560px + 6px)}
@media(max-width:560px){
  .kozak-rd .svc2-ba-pair[style*="--ar:0"]{grid-template-columns:1fr 1fr;gap:4px}
  .kozak-rd .svc2-ba-pair[style*="--ar:0"] + .svc2-ba-mid,.kozak-rd .svc2-ba-pair[style*="--ar:0"] .svc2-ba-mid{display:flex}
}

/* homepage before/after (2026-10-08): the whole frame, in its own shape, so
   the band grows taller and nothing is cut; the copy column gets more room */
@media(min-width:1001px){.kozak-rd .tsh{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}}
.kozak-rd .tsh .ba[style*="--ar"]{aspect-ratio:var(--ar);--ba-crop:center center}
@media(max-width:620px){.kozak-rd .tsh .ba[style*="--ar"]{aspect-ratio:var(--ar)}}

/* ============================================================
   CEILING MOCKUP PIECES (2026-10-08), usable by any service page
   ============================================================ */
/* a link to the work photographs under the line beside a card heading */
.kozak-rd .svc2-head-side p{color:var(--s2-mid);font-size:clamp(14.5px,1.15vw,16px);line-height:1.5}
.kozak-rd .svc2-head-side .svc2-tr-more{margin-top:12px}
/* the second grid follows the first on the same ground, a hairline between */
.kozak-rd .svc2-inc.is-second{padding-top:0}
.kozak-rd .svc2-inc.is-second .wrap{border-top:1px solid rgba(16,24,32,.08);padding-top:clamp(30px,3.6vw,50px)}
/* the estimate card that closes the first grid */
.kozak-rd .svc2-inc-cards li.svc2-inc-cta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:clamp(12px,1.2vw,18px);padding:clamp(20px,2vw,30px);background:#eef1f5;border-color:rgba(16,24,32,.06)}
.kozak-rd .svc2-inc-cards li.svc2-inc-cta:hover{transform:none}
.kozak-rd .svc2-inc-cta-ic{width:clamp(44px,3.6vw,56px);height:auto;color:var(--gold)}
.kozak-rd .svc2-inc-cta p{font-family:var(--font-serif);font-weight:600;font-size:clamp(17px,1.35vw,21px);
  line-height:1.3;color:var(--s2-dark)}
@media(max-width:1000px){.kozak-rd .svc2-inc-cards li.svc2-inc-cta{grid-column:1 / -1}}

/* three reviews in a row under a heading */
.kozak-rd .svc2-rrow{background:var(--s2-bg,#fbfbfb);color:#10151a;padding:clamp(36px,4.4vw,64px) 0;
  --s2-bg:#fbfbfb;--s2-mid:#464b51;--s2-dark:#10151a}
.kozak-rd .svc2-rrow-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:clamp(18px,2.2vw,30px)}
.kozak-rd .svc2-rrow-head h2{font-size:clamp(24px,2.6vw,36px);line-height:1.1;letter-spacing:-.014em;color:#10151a}
.kozak-rd .svc2-rrow-head p{margin-top:8px;color:#464b51;font-size:clamp(14.5px,1.15vw,16px)}
.kozak-rd .svc2-rrow-head .svc2-tr-more{margin:0 0 4px;flex:none}
.kozak-rd .svc2-rrow .svc2-rev-card{border:1px solid rgba(16,24,32,.1);box-shadow:0 18px 36px -30px rgba(16,24,32,.45)}
@media(max-width:640px){.kozak-rd .svc2-rrow-head{flex-direction:column;align-items:flex-start}}

/* closing band: contacts on navy, the Contact page's form on white */
.kozak-rd .svc2-end.is-form{display:grid;grid-template-columns:calc(var(--gutter) + clamp(320px,36vw,560px)) minmax(0,1fr);
  padding:0;background:#fff;color:#10151a;scroll-margin-top:90px}
.kozak-rd .svc2-endf-lead{background:#081217;color:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(34px,4vw,60px) clamp(22px,3vw,48px) clamp(34px,4vw,60px) var(--gutter)}
.kozak-rd .svc2-endf-lead h2{font-size:clamp(26px,2.8vw,40px);line-height:1.1;color:#fff}
.kozak-rd .svc2-endf-lead p{margin-top:12px;color:var(--ink-soft);font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.55}
.kozak-rd .svc2-endf-contacts{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px clamp(18px,2vw,30px)}
.kozak-rd .svc2-endf-contacts a,.kozak-rd .svc2-endf-contacts span{display:inline-flex;align-items:center;gap:9px;
  color:#fff;font-size:14.5px;line-height:1.35}
.kozak-rd .svc2-endf-contacts a:hover{color:var(--gold-bright)}
.kozak-rd .svc2-endf-contacts svg{width:20px;height:20px;flex:none;color:var(--gold)}
.kozak-rd .svc2-endf-side{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,3.4vw,52px) var(--gutter) clamp(28px,3.4vw,52px) clamp(22px,3vw,48px)}
.kozak-rd .svc2-endf-form .wpcf7{margin-top:0}
.kozak-rd .svc2-endf-form .wpcf7-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kozak-rd .svc2-endf-form .wpcf7-form > *{grid-column:1 / -1}
.kozak-rd .svc2-endf-form .cf-row{grid-column:auto}
.kozak-rd .svc2-endf-form .cf-row+.cf-row,.kozak-rd .svc2-endf-form .cf-send{margin-top:0}
.kozak-rd .svc2-endf-form .cf-row:has(select){grid-column:1 / -1}
.kozak-rd .svc2-endf-form .cf-row:has(textarea){grid-column:1 / 3}
.kozak-rd .svc2-endf-form .cf-send{grid-column:3;align-self:start}
.kozak-rd .svc2-endf-form textarea{min-height:110px}
.kozak-rd .svc2-endf-form .cf-hp{grid-column:auto}
@media(max-width:1000px){
  .kozak-rd .svc2-end.is-form{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .svc2-endf-lead,.kozak-rd .svc2-endf-side{padding-left:var(--gutter);padding-right:var(--gutter)}
}
@media(max-width:640px){
  .kozak-rd .svc2-endf-form .wpcf7-form{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .svc2-endf-form .cf-row:has(textarea),.kozak-rd .svc2-endf-form .cf-send{grid-column:1 / -1}
}

/* homepage "Our Services" (2026-10-08, main.docx: «текст услуг больше и
   название раздела на одной строке», as the homepage mockup draws it): the
   heading runs on one line beside the button, the names and icons are larger */
.kozak-rd .stiles-head .sec-head{max-width:none}
.kozak-rd .stiles-head .sec-head h2{font-size:clamp(28px,3.2vw,46px)}
@media(min-width:1101px){.kozak-rd .stiles-head .sec-head h2{white-space:nowrap}}
.kozak-rd .stile-name{gap:12px;padding:15px 14px 17px;font-size:clamp(13.5px,1.08vw,15.5px);line-height:1.28}
.kozak-rd .stile-ic{width:clamp(28px,2.4vw,34px);height:clamp(28px,2.4vw,34px)}
@media(max-width:560px){.kozak-rd .stile-name{font-size:13px;padding:12px 10px 14px}}
/* the closing band's own scrim belongs to its photograph versions */
.kozak-rd .svc2-end.is-form::before,.kozak-rd .svc2-end.is-form::after{display:none}
.kozak-rd .svc2-endf-side{background:#fff}
.kozak-rd .svc2-endf-form textarea{height:132px;min-height:0}
/* the estimate card in a narrow four-up column (1001-1280px): the button may
   wrap and take the card's width instead of running out of it */
.kozak-rd .svc2-inc-cta .btn{max-width:100%;white-space:normal;text-align:center;justify-content:center}
@media(max-width:1280px) and (min-width:1001px){
  .kozak-rd .svc2-inc-cta .btn{width:100%;padding-left:12px;padding-right:12px;font-size:12px}
  .kozak-rd .svc2-inc-cta p{font-size:16px}
}
/* the gallery's no-script fallback scrolls without a bar: the bar's height
   would vanish once the script takes over and nudge the page up */
.kozak-rd .exf-track{scrollbar-width:none}
.kozak-rd .exf-track::-webkit-scrollbar{display:none}

/* ============================================================
   HOMEPAGE HERO, 2026-10-12: less dark beside the copy so the
   photograph shows wider (the client: the pool behind the team
   was lost in the shade). On a wide screen the picture starts
   further left, its left edge dissolves over a short run, the
   foot is no longer darkened, and the shade is shaped round the
   copy instead of a full-height band - the headline keeps its
   dark ground, while the pool and the lit steps left of the team
   stay clear. Phones and tablets keep their own layout.
   ============================================================ */
@media(min-width:1101px){
  .kozak-rd .hhero-photo{left:31%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 2.5%,rgba(0,0,0,.9) 5%,#000 7%),
                       linear-gradient(180deg,#000 0,#000 90%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 2.5%,rgba(0,0,0,.9) 5%,#000 7%),
                       linear-gradient(180deg,#000 0,#000 90%,transparent 100%)}
  .kozak-rd .hhero::before{background:
    radial-gradient(ellipse 42% 44% at 19% 37%,rgba(1,15,26,.84) 0%,rgba(1,15,26,.66) 50%,rgba(1,15,26,0) 100%),
    linear-gradient(90deg,#010f1a 0%,rgba(1,15,26,.88) 20%,rgba(1,15,26,.4) 29%,rgba(1,15,26,.08) 38%,rgba(1,15,26,0) 46%,rgba(1,15,26,.14) 100%)}
  .kozak-rd .hhero::after{background:
    linear-gradient(180deg,rgba(1,15,26,.42) 0%,rgba(1,15,26,0) 20%,rgba(1,15,26,0) 80%,rgba(1,15,26,.5) 94%,var(--bg) 100%)}
}

/* homepage before/after, 2026-10-12: the client's pick from Transformations
   (Open-Plan Kitchen Remodel) in a lower frame - at the photographs' own 3:2
   the band stood about 620px tall with empty space beside the copy. 1.9:1
   keeps the cabinets, the island and the pendants; only ceiling and floor
   are trimmed. Phones still show the whole frame. */
@media(min-width:1001px){
  .kozak-rd .tsh{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
  .kozak-rd .tsh .ba[style*="--ar"]{aspect-ratio:1.9;--ba-crop:center 42%}
}
@media(min-width:621px) and (max-width:1000px){
  .kozak-rd .tsh .ba[style*="--ar"]{aspect-ratio:1.75;--ba-crop:center 42%}
}
/* the endless gallery's silent swap from a copy back to the real photograph */
.kozak-rd .exf.is-jump .exf-slide,.kozak-rd .exf.is-jump .exf-track{transition:none}

/* Contact page (2026-10-12): the message field at half its height - it was
   272px (the form's ten rows); the visitor can still drag it taller */
.kozak-rd .ct2-form textarea{height:136px;min-height:96px}

/* ============================================================
   SHARED REVIEWS AS A SLIDER (parts/outro.php, 2026-10-12)
   The rating card stays put on the left; every other review runs
   in a slider beside it - three to a view, two on tablets, one on
   phones (--per, read by carousel() in parts/outro.php), wrapping
   round the end. Arrows and dots under the cards.
   ============================================================ */
.kozak-rd .rv-stage{grid-column:span 3;--per:3;display:flex;flex-direction:column;min-width:0}
.kozak-rd .rv-track{display:grid;grid-template-columns:repeat(var(--per),minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);flex:1}
.kozak-rd .rv-card[hidden]{display:none}
.kozak-rd .rv-card.is-on{animation:rvIn .45s ease both}
@keyframes rvIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.kozak-rd .rv-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(14px,1.6vw,20px)}
.kozak-rd .rv-nav[hidden]{display:none}
.kozak-rd .rv-arrow{width:38px;height:38px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;background:transparent;color:var(--gold);border:1px solid rgba(201,162,74,.55);
  transition:background .2s,color .2s,border-color .2s}
.kozak-rd .rv-arrow:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.kozak-rd .rv-arrow svg{width:17px;height:17px}
.kozak-rd .rv-dots{display:flex;gap:7px}
.kozak-rd .rv-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(244,240,232,.25);transition:background .2s,transform .2s}
.kozak-rd .rv-dot.is-on{background:var(--gold);transform:scale(1.25)}
@media(max-width:1000px){
  .kozak-rd .rv-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .kozak-rd .rv-stage{grid-column:auto;--per:2}
}
@media(max-width:760px){
  .kozak-rd .rv-grid{grid-template-columns:1fr}
  .kozak-rd .rv-stage{--per:2}
}
@media(max-width:560px){.kozak-rd .rv-stage{--per:1}}
@media(prefers-reduced-motion:reduce){.kozak-rd .rv-card.is-on{animation:none}}

/* the light version (areas hub and county pages): ivory ground between the
   dark coverage band and the dark closing band; the rating card turns navy so
   it still stands apart from the white review cards */
.kozak-rd .rv.is-light{background:var(--ivory);color:var(--ivory-ink)}
.kozak-rd .rv.is-light .eyebrow{color:var(--gold-deep)}
.kozak-rd .rv.is-light .rv-head h2{color:var(--ivory-ink)}
.kozak-rd .rv.is-light .rv-trust{color:var(--ivory-soft)}
.kozak-rd .rv.is-light .rv-card{background:#fff;border-color:var(--ivory-line);box-shadow:0 18px 36px -30px rgba(33,27,19,.45)}
.kozak-rd .rv.is-light .rv-card:hover{border-color:rgba(162,120,45,.45)}
.kozak-rd .rv.is-light .rv-card blockquote{color:var(--ivory-soft)}
.kozak-rd .rv.is-light .rv-card figcaption b{color:var(--ivory-ink)}
.kozak-rd .rv.is-light .rv-card figcaption span{color:#8b8171}
.kozak-rd .rv.is-light .rv-av-tx{border-color:var(--ivory-line);color:var(--gold-deep)}
.kozak-rd .rv.is-light .rv-google{background:#081217;color:#fff;box-shadow:0 24px 44px -30px rgba(1,15,26,.8)}
.kozak-rd .rv.is-light .rv-g-top b,.kozak-rd .rv.is-light .rv-g-rate b{color:#fff}
.kozak-rd .rv.is-light .rv-g-num,.kozak-rd .rv.is-light .rv-g-q{color:rgba(244,240,232,.72)}
.kozak-rd .rv.is-light .rv-g-by{color:rgba(244,240,232,.55)}
.kozak-rd .rv.is-light .rv-arrow{color:var(--gold-deep);border-color:rgba(162,120,45,.5)}
.kozak-rd .rv.is-light .rv-arrow:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.kozak-rd .rv.is-light .rv-dot{background:rgba(33,27,19,.18)}
.kozak-rd .rv.is-light .rv-dot.is-on{background:var(--gold-deep)}
/* review sliders take a horizontal swipe: the browser keeps only vertical
   scrolling on them, otherwise it claims the gesture and the swipe is lost */
.kozak-rd [data-rev-stage]{touch-action:pan-y}
/* no dark shadow under the photograph in front (2026-10-12, the client: «эту
   тень тёмную снизу убрать»); the row loses the room it kept for it */
.kozak-rd .exf.is-ready .exf-slide.is-on{box-shadow:none}
.kozak-rd .exf-track{padding-bottom:4px}

/* the closing form, laid out plainly (2026-10-12, the client: «очень
   лаконично… сейчас кнопка непонятно где»): name, phone, email in a row, the
   project on its own line, a low message field, and the button across the
   full width under it, as on the Contact page */
.kozak-rd .svc2-endf-form .cf-row:has(textarea),
.kozak-rd .svc2-endf-form .cf-send{grid-column:1 / -1}
.kozak-rd .svc2-endf-form textarea{height:100px;min-height:72px}
.kozak-rd .svc2-endf-form .cf-send{margin-top:4px}
.kozak-rd .svc2-endf-form .wpcf7-spinner{position:absolute;margin:0}
.kozak-rd .svc2-endf-form .cf-send{position:relative}

/* the ceiling page's closing form, compact (2026-10-12, second pass - the client:
   «кривая форма… компактно сделай»): two rows - name, phone, email and the
   project in one, then a one-line message beside the button, all 52px high;
   the contacts on the left in one column. Two columns below 1281px, one on phones. */
.kozak-rd .svc2-endf-contacts{flex-direction:column;flex-wrap:nowrap;gap:12px}
.kozak-rd .svc2-endf-side{justify-content:center}
.kozak-rd .svc2-endf-form .wpcf7-form{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kozak-rd .svc2-endf-form .cf-row,
.kozak-rd .svc2-endf-form .cf-row:has(select){grid-column:auto}
.kozak-rd .svc2-endf-form .cf-row:has(textarea){grid-column:1 / 4}
.kozak-rd .svc2-endf-form .cf-send{grid-column:4;margin-top:0;align-self:start}
.kozak-rd .svc2-endf-form textarea{height:52px;min-height:52px;padding-top:15px;padding-bottom:15px;line-height:1.4;resize:vertical}
.kozak-rd .svc2-endf-form input[type=submit]{height:52px;margin:0;padding-top:0;padding-bottom:0;
  box-shadow:0 10px 22px -16px rgba(162,120,45,.85)}
.kozak-rd .svc2-endf-form select{padding-right:36px}
@media(max-width:1280px){
  .kozak-rd .svc2-endf-form .wpcf7-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kozak-rd .svc2-endf-form .cf-row:has(textarea),.kozak-rd .svc2-endf-form .cf-send{grid-column:1 / -1}
}
@media(max-width:640px){
  .kozak-rd .svc2-endf-form .wpcf7-form{grid-template-columns:minmax(0,1fr)}
  .kozak-rd .svc2-endf-form textarea{height:96px}
}

/* review sliders: every dot clearly visible, the ones on screen gold and a
   little larger (2026-10-12, the client: «все точки, а активные подсвечены») */
.kozak-rd .svc2-rev-dot{background:rgba(244,240,232,.58)}
.kozak-rd .svc2-rev-dot:hover{background:rgba(244,240,232,.85)}
.kozak-rd .svc2-rev-dot.is-on{background:var(--gold-bright)}
.kozak-rd .rv-dot{background:rgba(244,240,232,.58)}
.kozak-rd .rv-dot.is-on{background:var(--gold-bright)}
.kozak-rd .rv.is-light .rv-dot{background:rgba(33,27,19,.26)}
.kozak-rd .rv.is-light .rv-dot.is-on{background:var(--gold-deep)}
/* the same sliders on a white or near-white band (doors' reviews beside the
   closing call, the ceiling page's three-in-a-row): dark dots there */
.kozak-rd .svc2-rc .svc2-rev-dot,.kozak-rd .svc2-rrow .svc2-rev-dot{background:rgba(16,24,32,.24)}
.kozak-rd .svc2-rc .svc2-rev-dot:hover,.kozak-rd .svc2-rrow .svc2-rev-dot:hover{background:rgba(16,24,32,.45)}
.kozak-rd .svc2-rc .svc2-rev-dot.is-on,.kozak-rd .svc2-rrow .svc2-rev-dot.is-on{background:var(--gold)}

/* the form band on a photograph (2026-10-12): the closing picture across the
   whole band under a navy scrim, the copy straight on it, the form in a dark
   glass card on the right */
.kozak-rd .svc2-end.is-form.has-photo{background:#081217;color:#fff;padding:clamp(40px,5vw,72px) 0;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center}
.kozak-rd .svc2-end.is-form.has-photo::before{display:block;content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(6,14,19,.9) 0%,rgba(6,14,19,.72) 34%,rgba(6,14,19,.38) 68%,rgba(6,14,19,.5) 100%)}
.kozak-rd .svc2-end.is-form.has-photo .svc2-end-photo{object-position:50% 55%}
.kozak-rd .svc2-end.is-form.has-photo .svc2-endf-lead{background:none;padding:0 clamp(20px,3vw,48px) 0 var(--gutter)}
.kozak-rd .svc2-end.is-form.has-photo .svc2-endf-side{background:none;padding:0 var(--gutter) 0 0}
.kozak-rd .svc2-end.is-form.has-photo .svc2-endf-form{background:rgba(1,12,20,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(201,162,74,.28);border-radius:12px;padding:clamp(18px,2vw,28px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.kozak-rd .svc2-end.is-form.has-photo .svc2-endf-form .wpcf7-response-output{color:var(--ink)}
@media(max-width:1000px){
  .kozak-rd .svc2-end.is-form.has-photo{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,32px)}
  .kozak-rd .svc2-end.is-form.has-photo .svc2-endf-lead,
  .kozak-rd .svc2-end.is-form.has-photo .svc2-endf-side{padding:0 var(--gutter)}
  .kozak-rd .svc2-end.is-form.has-photo::before{background:rgba(6,14,19,.82)}
}

/* message fields grow with what is typed instead of showing a scroll bar
   (parts/outro.php sets the height; this only hides the bar meanwhile) */
.kozak-rd .ct2-form textarea{overflow-y:hidden}
.kozak-rd .ct2-form textarea.is-max{overflow-y:auto}

/* the process band on the service pages: no padding of its own (2026-10-15,
   the client's instruction: ".svc2-proc - padding: 0") */
.kozak-rd .svc2-proc,.kozak-rd .svc2-proc.is-light,.kozak-rd .svc2-proc.is-solid{padding:0}

/* ============================================================
   SERVICE FIRST SCREEN, 'panel' (2026-10-15, Full Home first):
   the client's own photograph whole and unaltered on the right at
   its own shape, fading in at its left edge; a blurred, darkened
   copy of it fills the band behind the copy. Phones and tablets
   keep the usual full-bleed picture under the scrim.
   ============================================================ */
.kozak-rd .svc2-hero.is-panel{background:#06121b}
.kozak-rd .svc2-hero.is-panel .svc2-photo-blur{position:absolute;inset:var(--hdr-h) 0 0;z-index:-3;
  background-size:cover;background-position:center;filter:blur(26px) brightness(.42) saturate(1.05);transform:scale(1.12)}
@media(min-width:1001px){
  .kozak-rd .svc2-hero.is-panel .svc2-photo{left:auto;right:0;width:auto;max-width:62%;
    height:calc(100% - var(--hdr-h));aspect-ratio:var(--ar);object-fit:cover;object-position:50% 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
  .kozak-rd .svc2-hero.is-panel::before{background:
    linear-gradient(90deg,rgba(1,15,26,.75) 0%,rgba(1,15,26,.45) 40%,rgba(1,15,26,0) 60%),
    linear-gradient(180deg,rgba(1,15,26,.42) 0%,rgba(1,15,26,0) 22%,rgba(1,15,26,0) 80%,rgba(1,15,26,.5) 100%)}
}
@media(max-width:1000px){.kozak-rd .svc2-hero.is-panel .svc2-photo-blur{display:none}}

/* 2026-10-15, the client's list: the handwritten lines on Contact and About.
   Contact - «стоит прям на кухне»: two lines, low on the right over the rug,
   clear of the kitchen; a size step down below 1260px keeps it off the
   trust row. About - «сдвинь вниз чуть»: the new words ("From Our Family to
   Your Home.") sit beside the owners' heads instead of under the header. */
.kozak-rd .ct2-script{top:auto;bottom:clamp(30px,3.2vw,52px);right:clamp(22px,3vw,56px)}
@media(max-width:1260px){
  .kozak-rd .ct2-script-t{font-size:26px}
  .kozak-rd .ct2-script-u{width:160px}
}
.kozak-rd .ahero-script{top:calc(var(--hdr-h) + 84px)}
@media(max-width:1300px){
  .kozak-rd .ahero-script{right:24px}
  .kozak-rd .ahero-script-t{font-size:26px}
}

/* 2026-10-15, the client's list for the homepage: «поубирай место пустое между
   разделами», «шрифт заголовков больше», «our services: сверху место пустое,
   и our services может больше?». Homepage only - the process block, the
   reviews band and the eyebrows are shared with other pages.
   Gaps: before/after band 52 → 40px a side, services 104 → 44px a side,
   process bottom 60 → 40px. Headings: every section title now sits at
   36-40px next to the services' 46px (they were 23-31px); eyebrows 12.5 →
   15px, the services one 18px. */
body.page-template-page-home .kozak-rd-main .eyebrow{font-size:15px;letter-spacing:.18em}
body.page-template-page-home .kozak-rd-main .stiles-sec .eyebrow{font-size:18px}
body.page-template-page-home .kozak-rd-main .tsh{padding:clamp(26px,2.8vw,40px) 0}
body.page-template-page-home .kozak-rd-main .tsh-copy h2{font-size:clamp(26px,2.5vw,36px)}
body.page-template-page-home .kozak-rd-main .stiles-sec{padding:clamp(32px,3.1vw,44px) 0}
body.page-template-page-home .kozak-rd-main .process{padding-bottom:clamp(28px,2.8vw,40px)}
body.page-template-page-home .kozak-rd-main .proc-head h2,
body.page-template-page-home .kozak-rd-main .own-copy h2{font-size:clamp(26px,2.7vw,40px)}
body.page-template-page-home .kozak-rd-main .noms-dark .noms-head h2{font-size:clamp(24px,2.4vw,34px)}