/* Server-rendered pages (blog, projects). Same palette and type as the React build. */
:root{
  --cream:#EEEAE3;
  --dark:#1C1A17;
  --mid:#6B6660;
  --bronze:#A8895C;
}
*{box-sizing:border-box;margin:0;padding:0;font-weight:300}
body{background:var(--cream);color:var(--dark);font-family:'Heebo',sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.pk-nav{position:fixed;top:0;right:0;left:0;z-index:200;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;padding:24px 52px;
  background:var(--cream);box-shadow:0 1px 0 rgba(28,26,23,.08)}
.pk-logo{justify-self:start;display:block}
.pk-logo img{height:46px;width:auto;display:block}
.pk-wordmark{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;letter-spacing:.22em}
.pk-links{display:flex;align-items:center;gap:44px;grid-column:2}
.pk-links > a,.pk-has-sub > a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  transition:opacity .2s;white-space:nowrap}
.pk-links a:hover{opacity:.55}
.pk-has-sub{position:relative;display:flex;align-items:center}
.pk-sub{position:absolute;top:100%;right:50%;transform:translateX(50%);margin-top:22px;
  background:var(--cream);box-shadow:0 22px 50px rgba(0,0,0,.22);padding:14px 0;min-width:220px;
  text-align:center;opacity:0;visibility:hidden;transition:opacity .25s}
/* bridge the gap so the pointer can reach the submenu */
.pk-sub::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.pk-has-sub:hover .pk-sub{opacity:1;visibility:visible}
.pk-sub a{display:block;padding:11px 26px;font-size:11px;letter-spacing:.12em;white-space:nowrap}
.pk-sub a:hover{opacity:.55}

.pk-footer{background:var(--cream);border-top:.5px solid rgba(28,26,23,.14);padding:80px 52px 40px}
.pk-footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px;max-width:1240px;margin:0 auto}
.pk-footer-brand img{height:44px;width:auto;margin-bottom:22px}
.pk-footer-brand p{font-size:12.5px;line-height:1.9;color:var(--mid);max-width:320px}
.pk-footer-nap{margin-top:18px}
.pk-footer h4{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--dark);
  font-weight:400;margin-bottom:18px}
.pk-footer-grid a{display:block;font-size:12.5px;line-height:2.2;color:var(--mid)}
.pk-footer-grid a:hover{color:var(--dark)}
.pk-copy{text-align:center;margin-top:60px;font-size:10px;letter-spacing:.2em;color:var(--mid)}

.fab-contact{position:fixed;bottom:32px;left:32px;z-index:250;width:58px;height:58px;
  border-radius:4px;background:#8B6A4E;color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.18);transition:transform .25s}
.fab-contact:hover{transform:translateY(-3px)}

.pk-wrap{max-width:760px;margin:0 auto;padding:150px 24px 90px}
.pk-wrap.pk-wide{max-width:1180px}
.pk-meta{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mid);
  margin-bottom:18px;text-align:center}
h1{font-size:clamp(28px,4.6vw,46px);line-height:1.25;text-align:center;margin-bottom:34px}
.pk-hero{margin:0 -24px 44px}
.pk-hero img{width:100%;display:block}

.pk-body{font-size:15.5px;line-height:1.95;text-align:justify}
.pk-body p{margin-bottom:18px}
.pk-body h2{font-size:24px;margin:38px 0 14px;font-weight:400;text-align:right}
.pk-body h3{font-size:19px;margin:30px 0 12px;font-weight:400;text-align:right}
.pk-body img{display:block;margin:34px auto}
.pk-body ul,.pk-body ol{margin:0 20px 18px 0}
.pk-body a{color:var(--bronze);border-bottom:1px solid rgba(168,137,92,.4)}

.pk-back{text-align:center;margin:52px 0 90px}
.pk-back a{display:inline-block;border:1px solid var(--dark);padding:12px 36px;
  font-size:10px;letter-spacing:.26em}

.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pk-card .pk-thumb{display:block;aspect-ratio:3/2.1;overflow:hidden;margin-bottom:14px;background:#ddd6ca}
.pk-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pk-card:hover img{transform:scale(1.05)}
.pk-card h3{font-size:14.5px;line-height:1.5;margin-bottom:6px;font-weight:400}
.pk-card p{font-size:12px;color:var(--mid);line-height:1.7}
.pk-date,.pk-loc{display:block;font-size:9.5px;letter-spacing:.2em;color:var(--mid);
  margin-top:8px;text-transform:uppercase}
.pk-pager{margin-top:60px;text-align:center;font-size:12px;letter-spacing:.14em}
.pk-pager a{margin:0 10px}

.pk-project-hero{position:relative;height:78vh;overflow:hidden}
.pk-project-hero img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.72)}
.pk-project-title{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#fff;text-align:center}
.pk-project-title h1{color:#fff;margin-bottom:8px}
.pk-project-title p{font-size:11px;letter-spacing:.24em}
.pk-credit{margin-top:40px;font-size:12px;letter-spacing:.06em;color:var(--mid);text-align:center}
.pk-gallery{max-width:900px;margin:0 auto;padding:0 24px}
.pk-gallery figure{margin-bottom:56px}
.pk-gallery figcaption{margin-top:14px;font-size:12.5px;line-height:1.8;color:var(--mid);text-align:center}

@media(max-width:900px){.pk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  /* the 1fr auto 1fr grid cannot shrink below the links' intrinsic width, so on a phone
     the logo sits above a wrapped row of links instead */
  .pk-nav{padding:12px 14px;grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:8px}
  .pk-logo{justify-self:center}
  .pk-links{grid-column:1;width:100%;min-width:0;flex-wrap:wrap;justify-content:center}
  .pk-logo img{height:34px}
  .pk-links{gap:14px;flex-wrap:wrap;justify-content:center}
  .pk-links > a,.pk-has-sub > a{font-size:9px;letter-spacing:.08em}
  .pk-footer{padding:60px 20px 30px}
  .pk-footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .fab-contact{bottom:18px;left:18px;width:48px;height:48px}
}
@media(max-width:600px){
  .pk-grid{grid-template-columns:1fr}
  .pk-wrap{padding-top:130px}
  .pk-project-hero{height:60vh}
  .pk-footer-grid{grid-template-columns:1fr}
}

/* ===== ported verbatim from the React bundle so server-rendered pages match 1:1 ===== */
.nav-link:hover { opacity: 0.45 !important; }
.footer-link:hover { opacity: 0.4 !important; }
.col-item:hover .col-hover { opacity: 1 !important; }
.col-item:hover .col-bg { transform: scale(1.06) !important; }
.press-item:hover .press-bg { transform: scale(1.04) !important; }
.press-item .press-bg-hover { opacity: 0; transition: opacity 0.5s ease; }
.press-item:hover .press-bg-hover { opacity: 1; }
.blog-item:hover .blog-bg { transform: scale(1.04) !important; }
.project-card:hover .project-bg { transform: scale(1.05) !important; }
.faq-row:hover .faq-q { opacity: 0.6; }
.cta-btn {
          background: #8B6A4E;
          color: #fff;
          border: none;
          cursor: pointer;
          transition: background 0.25s ease, transform 0.2s ease;
        }
.cta-btn:hover { background: #77593d; }
.fab-contact:hover { transform: scale(1.06); }
.dropcap::first-letter {
          float: right;
          font-family: Heebo, sans-serif;
          font-size: 3.4em;
          line-height: 0.78;
          font-weight: 400;
          color: #1C1A17;
          padding: 4px 0 0 12px;
        }
.projects-track::-webkit-scrollbar { display: none; }
.projects-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
        }
@media (max-width: 1100px) {
          .projects-grid { grid-template-columns: repeat(3, 1fr); }
        }
@media (max-width: 720px) {
          .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
        }
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
.img-warm { position: relative; overflow: hidden; }
.img-warm::after {
          content: '';
          position: absolute;
          inset: 0;
          background: rgba(140, 68, 10, 0.38);
          pointer-events: none;
          mix-blend-mode: multiply;
          z-index: 2;
        }
.img-warm::before {
          content: '';
          position: absolute;
          inset: 0;
          opacity: 0.28;
          pointer-events: none;
          z-index: 3;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
          mix-blend-mode: overlay;
        }

/* article body, matching the bundle's own paragraph styling */
.pk-article p{font-family:Heebo,sans-serif;font-size:14.5px;line-height:1.85;color:#1C1A17;margin-bottom:18px;text-align:justify}
.pk-article h2{font-family:Heebo,sans-serif;font-size:22px;font-weight:400;color:#1C1A17;margin:44px 0 16px;text-align:right;letter-spacing:.02em}
.pk-article h3{font-family:Heebo,sans-serif;font-size:18px;font-weight:400;margin:32px 0 12px;text-align:right}
.pk-article img{width:100%;height:auto;display:block;margin:34px 0}
.pk-article ul,.pk-article ol{margin:0 20px 18px 0;font-family:Heebo,sans-serif;font-size:14.5px;line-height:1.85}
.pk-article a{color:#A8895C;border-bottom:1px solid rgba(168,137,92,.4)}
.pk-article p:first-of-type::first-letter{float:right;font-family:Heebo,sans-serif;font-size:3.4em;line-height:.78;font-weight:400;color:#A8895C;padding:4px 0 0 12px}

/* ===== mobile corrections for the ported templates ===== */
@media (max-width: 760px){
  /* the hover submenu is unreachable on touch and its 220px box overflows the viewport */
  .pk-sub{display:none}

  /* the bundle's 72px side padding is a desktop measure */
  section[style*="72px"]{padding-left:20px !important;padding-right:20px !important}

  /* project hero: the back button and the title block are pinned at 52px */
  #pj-hero{height:56vh !important}
  #pj-hero .cta-btn{top:82px !important;left:16px !important;padding:8px 14px !important;font-size:9px !important}
  #pj-hero > div[style*="right: 52px"]{right:16px !important;left:16px !important;bottom:28px !important}
  #p-hero h1,#b-hero h1{font-size:clamp(30px,9vw,44px) !important}

  /* the featured-article split stacks */
  a[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important;gap:24px !important}
}

/* ===== 2026-09 client design: nav phone, footer, phone fab (from the bundle) ===== */
.pk-nav{padding:28px 52px}
.pk-logo img{height:52px}
.pk-phone{justify-self:end;grid-column:3;font-family:'Cormorant Garamond',Georgia,serif;font-size:12.5px;font-weight:400;
  letter-spacing:.13em;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;
  direction:ltr;unicode-bidi:isolate;white-space:nowrap;cursor:default}
.pk-footer{border-top:0;padding:180px 52px 0}
.pk-footer-grid{gap:24px;max-width:none;padding-bottom:72px}
.pk-footer-brand img{height:48px;margin:0;filter:brightness(0)}
.pk-footer h4{margin-bottom:22px}
.pk-footer ul{list-style:none}
.pk-footer li{margin-bottom:13px}
.pk-footer-grid a{display:flex;align-items:center;gap:9px;font-size:13px;line-height:normal;color:var(--dark);transition:opacity .2s}
.pk-footer-grid a:hover{color:var(--dark)}
.pk-copy{text-align:right;margin:0;border-top:.5px solid rgba(28,26,23,.1);padding:24px 0 40px;font-size:10px;letter-spacing:.1em}
.fab-contact{border-radius:0;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .25s ease}
.fab-phone{bottom:102px}
@keyframes fabRing{0%,62%,78%,100%{transform:rotate(0)}64%{transform:rotate(-13deg)}66%{transform:rotate(11deg)}
  68%{transform:rotate(-9deg)}70%{transform:rotate(7deg)}72%{transform:rotate(-5deg)}74%{transform:rotate(3deg)}76%{transform:rotate(-1.5deg)}}
.fab-phone svg{animation:fabRing 5s ease-in-out infinite;transform-origin:50% 58%}
.fab-phone:hover svg{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.fab-phone svg{animation:none}}
.v-hero-full{height:100vh;height:100svh;min-height:420px}
@media (max-width:760px){
  .pk-phone{display:none}
  .pk-footer{padding:80px 24px 0}
  .pk-footer-grid{grid-template-columns:1fr 1fr;gap:40px 24px;padding-bottom:48px}
  .fab-contact{left:18px;width:48px;height:48px}
  .fab-mail{bottom:18px}
  .fab-phone{bottom:76px}
}
/* kitchen pages on phones, as the client's build lays them out: one column, image first */
@media (max-width:760px){
  .page-template-page-kitchen [style*="padding:0 72px"],.page-template-page-kitchen [style*="padding: 0px 72px"]{padding-left:24px !important;padding-right:24px !important}
  .page-template-page-kitchen [style*="padding:40px 72px"],.page-template-page-kitchen [style*="padding: 40px 72px"]{padding-left:24px !important;padding-right:24px !important}
  .pk-split-row{grid-template-columns:1fr !important;gap:30px !important;margin-bottom:62px !important}
  .pk-split-row > div:first-child{order:0 !important}
  .pk-split-row > div:last-child{order:1 !important}
}
/* cinema hero on phones, as the client's build: the film full width, the text beneath it */
@media (max-width:760px){
  #v-hero.v-hero-full{height:auto;min-height:0;display:block !important;padding:92px 0 56px !important}
  #v-hero .pk-film{width:100%;height:auto !important;overflow:visible}
  #v-hero .pk-film video{position:relative !important;aspect-ratio:590/480;height:auto !important}
  #v-hero .pk-film-shade{display:none}
  #v-hero .pk-film-text{position:static !important;padding:0 20px !important;margin-top:22px}
  #v-hero .pk-film-text h1{font-size:30px !important;margin-bottom:6px !important}
  #v-hero .pk-film-text button{margin-top:14px !important}
  #v-hero .pk-film-text p{font-size:14px !important;margin:18px auto 0 !important;padding:0 56px}
}
/* article FAQ accordion, same motion as the homepage one */
#article-faq .pk-faq-a{transition:grid-template-rows .45s cubic-bezier(.65,0,.35,1),opacity .28s ease}
/* the panel carries inline styles from the template, so the open state needs !important */
#article-faq .faq-row.is-open .pk-faq-a{grid-template-rows:1fr !important;opacity:1 !important;
  transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1),opacity .45s ease .08s}
#article-faq .faq-row.is-open .pk-faq-plus{transform:rotate(135deg) !important}
#article-faq .pk-faq-q:hover .faq-q{opacity:.6}
@media (max-width:760px){#article-faq{padding-left:20px !important;padding-right:20px !important}}