/* ==========================================================================
   Kalky — theme stylesheet
   Design 5, ported from the approved static preview. Palette and type were
   measured from the reference site rather than eyeballed; the mobile hero and
   contrast fixes carried over from the preview are kept as-is because they
   were derived from real pixel measurements.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink:#182127; --body:#767470; --gold:#BF873C; --gold-soft:#D8A85F;
  --brown:#1F140B; --brown-2:#22160C; --white:#fff;
  --linen:#F4F1E8;                       /* page paper */
  --hair:rgba(24,33,39,.14);
  --veil:rgba(0,0,0,.45); --veil-deep:rgba(0,0,0,.62);

  --font:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --fs-h1:clamp(2rem,4.2vw,51px); --fs-h2:clamp(1.8rem,3.7vw,47px);
  --fs-h3:clamp(1.5rem,2.8vw,35px); --fs-h4:clamp(1.15rem,2.1vw,28px);
  --fs-body:17px; --fs-small:13px;
  --lh-tight:1.04; --lh-body:1.62; --ls-h1:-1.1px; --ls-label:.22em;

  --wrap:1200px; --pad-x:clamp(18px,5vw,64px); --sec-y:clamp(56px,7vw,110px);
  --tile-h:400px; --nav-h:88px;
  --ease:cubic-bezier(.16,.75,.25,1); --dur:.9s;
}
@media (max-width:767px){
  :root{ --fs-body:16px; --tile-h:300px; --nav-h:62px; --sec-y:48px; }
}

/* ---------- self-hosted type ---------- */
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-400.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-600.woff2)format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-700.woff2)format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--linen);color:var(--body);font-family:var(--font);
  font-size:var(--fs-body);line-height:var(--lh-body);overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 1.2em}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);font-weight:700}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-tight)}
h3{font-size:var(--fs-h3);line-height:1.086}
h4{font-size:var(--fs-h4);line-height:1.3;text-transform:uppercase}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:#fff;padding:12px 16px;z-index:9999}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--sec-y);position:relative}
.center{text-align:center}
.lead{max-width:62ch}
.label{display:block;font-size:var(--fs-small);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold);margin-bottom:14px}

/* ---------- paper grain ---------- */
body{background-image:url(../img/bg-grain.png);background-repeat:repeat;background-size:300px 300px}

/* ---------- links + buttons ---------- */
.more{display:inline-block;font-size:var(--fs-small);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);padding-bottom:5px;position:relative}
.more::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.more:hover::after{transform:scaleX(1);transform-origin:left}
.btn{display:inline-block;font-size:var(--fs-small);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:16px 34px;border:1px solid var(--gold);color:var(--gold);
  transition:background-color .4s var(--ease),color .4s var(--ease)}
.btn:hover{background:var(--gold);color:#fff}
.btn--solid{background:var(--gold);color:#fff}
.btn--solid:hover{background:var(--ink);border-color:var(--ink)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:800;height:var(--nav-h);display:flex;align-items:center;
  background:transparent;transition:transform .45s var(--ease),background-color .35s ease}
.hdr.solid{background:rgba(20,14,8,.9);backdrop-filter:blur(10px)}
.hdr.hide{transform:translateY(-100%)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.hdr-logo img{height:40px;width:auto}
.nav-list{display:flex;gap:clamp(16px,2vw,34px);align-items:center}
.nav-list a{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;transition:color .3s}
.nav-list a:hover,.nav-list a[aria-current=page]{color:var(--gold-soft)}
.hdr-call{font-size:13px;font-weight:600;letter-spacing:.08em;color:#fff;white-space:nowrap}
.hdr-call:hover{color:var(--gold-soft)}
.burger{display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;width:24px;height:2px;background:#fff;transition:.3s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1023px){ .nav,.hdr-call{display:none} .burger{display:block} }

/* ---------- full-screen menu ---------- */
.menu-overlay{position:fixed;inset:0;z-index:850;background:rgba(14,9,5,.97);
  display:grid;align-content:center;justify-items:center;gap:22px;padding:var(--pad-x);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;overflow-y:auto}
body.nav-open .menu-overlay{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}
.mo-nav{display:grid;gap:6px;text-align:center}
.mo-nav a{color:#fff;font-size:clamp(1.6rem,7vw,2.6rem);font-weight:700;line-height:1.25}
.mo-nav a:hover{color:var(--gold-soft)}
.mo-sub{display:grid;gap:4px;text-align:center;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.mo-sub a{color:rgba(255,255,255,.72);font-size:15px;display:inline-block;padding:8px 0}
.mo-call{color:var(--gold-soft);font-weight:600;letter-spacing:.1em;padding:12px}

/* ---------- hero ---------- */
.hero{position:relative;margin-top:0}
.hero-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.26)0%,rgba(0,0,0,.10)42%,rgba(0,0,0,.66)100%)}
.hero-copy{position:absolute;inset:auto 0 0 0;z-index:2;padding:0 var(--pad-x) clamp(24px,3.4vw,48px)}
.hero-copy .wrap{max-width:none;margin:0;padding:0}
.hero-copy .label{color:#fff;opacity:.95}
.hero-copy h1{color:#fff;max-width:20ch}
.hero-copy p{color:rgba(255,255,255,.9);max-width:52ch;margin-bottom:0}
/* the scrim behind the words: alphas solved against the storefront photo so
   the small label clears AAA, not eyeballed */
.hero-copy::before{content:"";position:absolute;inset:-46% 0 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0)0%,rgba(0,0,0,.30)18%,rgba(0,0,0,.56)34%,
    rgba(0,0,0,.72)66%,rgba(0,0,0,.84)100%)}

/* inner-page hero: shorter, no full-bleed photo needed */
.page-hero{padding:calc(var(--nav-h) + clamp(40px,6vw,90px)) 0 clamp(30px,4vw,60px);
  background:var(--brown);color:rgba(255,255,255,.8)}
.page-hero h1{color:#fff;max-width:22ch}
.page-hero p{max-width:60ch;margin-bottom:0}
body.no-hero{padding-top:0}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:13px;color:var(--body);padding:18px 0 0}
.crumbs a{color:var(--gold)}
.crumbs a:hover{text-decoration:underline}

/* ---------- story ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.story-media{position:relative}
.story-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story-count{position:absolute;left:clamp(14px,2vw,30px);bottom:clamp(14px,2vw,30px);
  background:#fff;padding:clamp(14px,2vw,26px) clamp(18px,2.4vw,34px)}
.story-count span{display:block;font-size:var(--fs-small);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body)}
.story-count strong{display:block;font-size:clamp(2.4rem,5vw,4.4rem);font-weight:700;line-height:1;
  color:var(--ink);letter-spacing:-.02em}

/* ---------- image tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr)}
.tile{position:relative;height:var(--tile-h);display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;overflow:hidden}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;background:var(--veil);transition:background-color .5s var(--ease)}
.tile:hover img{transform:scale(1.07)}
.tile:hover::after{background:var(--veil-deep)}
.tile-in{position:relative;z-index:2;padding:20px}
.tile h3,.tile h4{color:#fff;margin-bottom:14px}
.tile .more{color:#fff}

/* ---------- banner ---------- */
.banner{position:relative;min-height:clamp(320px,46vh,470px);display:grid;place-items:center;
  text-align:center;overflow:hidden}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.58)}
.banner .wrap{position:relative;z-index:2}
.banner h2,.banner h3{color:#fff;max-width:24ch;margin-inline:auto}
.banner p{color:rgba(255,255,255,.85);max-width:56ch;margin-inline:auto}

/* ---------- work grid (walkthroughs + our work) ---------- */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.work .tile{height:clamp(280px,34vw,380px)}

/* ---------- typed heading in the choose-us banner ---------- */
.typed-word{text-decoration:underline;text-underline-offset:.12em;white-space:nowrap}
.typed-caret{display:inline-block;width:.06em;margin-left:.04em;background:currentColor;
  animation:caret 1s steps(1) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.typed-caret{animation:none;opacity:0}}

/* ---------- category strip ---------- */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,22px)}
.cat{text-align:center}
.cat-img{overflow:hidden;margin-bottom:14px}
.cat img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform 1s var(--ease)}
.cat:hover img{transform:scale(1.06)}
.cat h3{font-size:clamp(.95rem,1.3vw,1.15rem);margin:0}

/* ---------- dark band ---------- */
.dark{background:var(--brown);color:rgba(255,255,255,.78)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,16px)}
.gal figure{margin:0;overflow:hidden;position:relative}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:12px 14px;font-size:13px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.8));opacity:0;transition:opacity .3s}
.gal figure:hover figcaption{opacity:1}

/* ---------- video facades ---------- */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.vfacade{margin:0}
.vfacade-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;overflow:hidden}
.vfacade-btn img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1s var(--ease)}
.vfacade-btn:hover img{transform:scale(1.05)}
.vfacade-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:62px;height:62px;
  border-radius:50%;background:rgba(191,135,60,.94);display:block;transition:transform .3s var(--ease)}
.vfacade-play::after{content:"";position:absolute;left:54%;top:50%;translate:-50% -50%;
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.vfacade-btn:hover .vfacade-play{transform:scale(1.1)}
.vfacade-title{margin:12px 0 0;font-size:15px;color:var(--ink);font-weight:600;line-height:1.45}
.dark .vfacade-title{color:#fff}
.vfacade iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* ---------- FAQ ---------- */
.faq-list{max-width:80ch}
.faq{border-bottom:1px solid var(--hair);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font-weight:600;color:var(--ink);font-size:clamp(1rem,1.4vw,1.15rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  translate:0 -60%;rotate:45deg;transition:rotate .3s}
.faq[open] summary::after{rotate:-135deg}
.faq-a{padding:0 0 18px}
.faq-a p{margin:0}
.dark .faq{border-color:rgba(255,255,255,.16)}
.dark .faq summary{color:#fff}

/* ---------- instagram ---------- */
.ig{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px)}
.ig a{overflow:hidden;display:block}
.ig img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 35%;
  transition:transform 1s var(--ease),opacity .4s}
.ig a:hover img{transform:scale(1.07);opacity:.88}

/* ---------- prose (blog posts, terms) ---------- */
.prose{max-width:72ch}
.prose h2,.prose h3{margin-top:1.6em}
.prose ul{list-style:disc;padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose a{color:var(--gold);text-decoration:underline}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.card{background:#fff;padding:clamp(20px,2.6vw,34px);border:1px solid var(--hair)}
.card h3{font-size:clamp(1.1rem,1.6vw,1.35rem)}
.card .num{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--gold);margin-bottom:10px}

/* ---------- form ---------- */
.form-wrap{background:#fff;padding:clamp(22px,3vw,44px);border:1px solid var(--hair)}
.form-wrap input[type=text],.form-wrap input[type=email],.form-wrap input[type=tel],
.form-wrap select,.form-wrap textarea{width:100%;padding:14px 16px;border:1px solid var(--hair);
  font:inherit;font-size:16px;background:#fff;color:var(--ink);margin-bottom:14px}
.form-wrap textarea{min-height:130px}
.form-wrap input[type=submit],.form-wrap button[type=submit]{background:var(--gold);color:#fff;border:0;
  padding:16px 34px;font-size:var(--fs-small);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;min-height:48px}

/* ---------- footer: the minimal bar from design-5 ----------
   Transparent, sitting on the page paper with one hairline rule — not a dark
   block. The link row above it is small, quiet type; it exists so every
   service and city page stays one click from anywhere on the site. */
.foot{background:transparent;border-top:1px solid var(--hair);color:var(--body);
  padding:clamp(26px,3vw,40px) 0}
.foot-nav{display:grid;gap:2px;padding-bottom:clamp(18px,2.4vw,30px)}
.foot-nav .inline-links{display:flex;flex-wrap:wrap;gap:2px 20px}
.foot-nav a{font-size:13.5px;color:var(--body);display:inline-block;padding:7px 0}
.foot-nav a:hover{color:var(--gold)}
.foot-inner{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;min-height:60px;border-top:1px solid var(--hair);
  padding-top:clamp(16px,2vw,24px)}
.foot-copy{margin:0;font-size:15px;color:var(--body)}
.foot-copy a{color:var(--gold)}
.foot-social{display:flex;gap:6px}
.foot-social a{width:44px;height:44px;display:grid;place-items:center;
  color:var(--body);transition:color .3s,transform .3s}
.foot-social a:hover{color:var(--gold);transform:translateY(-2px)}
.foot-social svg{width:17px;height:17px;fill:currentColor}
@media (max-width:640px){
  .foot-inner{flex-direction:column;text-align:center}
  .foot-copy{font-size:14px}
}

/* ---------- back to top ---------- */
.to-top{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:700;
  width:46px;height:46px;border:0;cursor:pointer;background:var(--ink);color:#fff;
  display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),background-color .3s}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--gold)}
.to-top svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- reveals ---------- */
.js .rv{opacity:0;transform:translateY(34px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.12s}.js .rv.d2{transition-delay:.24s}.js .rv.d3{transition-delay:.36s}

/* ==========================================================================
   Responsive. Breakpoints and the mobile hero treatment carry over from the
   preview, where they were set from measurement rather than guesswork.
   ========================================================================== */
@media (max-width:1023px){
  .story{grid-template-columns:1fr}
  .tiles,.work{grid-template-columns:1fr 1fr}
  .cats{grid-template-columns:repeat(3,1fr)}
  .ig{grid-template-columns:repeat(3,1fr)}
  .gal,.vgrid,.cards{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .tiles,.work{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .gal,.vgrid,.cards{grid-template-columns:1fr}

  /* the storefront shows whole rather than cropped, and clears the fixed bar */
  .hero{margin-top:var(--nav-h)}
  .hero-frame{aspect-ratio:auto;overflow:visible}
  .hero-frame img{height:auto;aspect-ratio:2752/1536;object-fit:contain}
  .hero-frame::after,.hero-copy::before{content:none}
  .hero-copy{position:static;padding:clamp(18px,4.5vw,26px) var(--pad-x) 0}
  .hero-copy .label{color:var(--ink);opacity:1;font-size:12px}
  .hero-copy h1{color:var(--ink);font-size:clamp(28px,8.2vw,38px);line-height:1.08;max-width:15ch}
  .hero-copy p{display:none}          /* keyword copy stays in the DOM for crawlers */
  .hdr{background:rgba(20,14,8,.94);backdrop-filter:blur(10px)}

  /* five square tiles in two columns leaves one orphaned — centre it */
  .ig{grid-template-columns:1fr 1fr;--ig-gap:clamp(8px,1vw,14px);gap:var(--ig-gap)}
  .ig a:last-child{grid-column:1/-1;justify-self:center;width:calc((100% - var(--ig-gap))/2)}
}
@media (max-width:1023px){
  /* touch targets: everything tappable clears 44px */
  .inline-links a,.more{min-height:44px;display:inline-flex;align-items:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}