/* Katherine Varnava Interiors — PIKOTW static rebuild (demo). Hand-written; no framework. */
:root{
  --chalk:#ede9de;      /* Warm Chalk */
  --linen:#c9bba6;      /* Natural Linen */
  --bronze:#81573b;     /* accent */
  --ink:#43352d;        /* Charcoal Ink */
  --black:#2f2e2d;      /* near-black text */
  --serif:'Juana',Georgia,'Times New Roman',serif;
  --sans:'Figtree',Helvetica,Arial,sans-serif;
  --gutter:7vw;
  --maxw:1500px;
  --header-h:108px;
}
*{box-sizing:border-box}
html{font-size:14px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--chalk);color:var(--black);font-family:var(--sans);font-size:1rem;line-height:1.6;font-weight:400}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0 0 1em;color:inherit}
h1{font-size:1.8rem;line-height:1.36;letter-spacing:0}
h2{font-size:1.6rem;line-height:1.37;letter-spacing:-.02em}
h3{font-size:1.4rem;line-height:1.38;letter-spacing:-.02em}
h1 em,h2 em,h3 em{font-style:italic}
.eyebrow{font-family:var(--sans);font-size:1rem;letter-spacing:.15em;text-transform:uppercase;line-height:1.4;margin:0 0 1.4em}
p{margin:0 0 1.2em}
p.small{font-size:.9rem;line-height:1.4}
p.italic{font-style:italic}
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.two-col{display:grid;grid-template-columns:1fr 1fr;column-gap:10.3%;row-gap:44px;align-items:start}
.two-col>*{min-width:0}
.two-col>*>*{max-width:100%}
.col-top-pad{padding-top:56px}
.col-bottom{align-self:end;padding-bottom:40px}
.centered{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.narrow{max-width:660px;margin-left:auto;margin-right:auto}

/* buttons — the Squarespace "underline" button */
.btn{display:inline-block;border:0;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;line-height:1;padding:11px 4px 7px;border-bottom:1px solid currentColor;color:inherit;background:none;cursor:pointer;transition:opacity .3s ease}
.btn:hover{opacity:.6}
.btn.mt{margin-top:.6em}

/* themes */
.theme-white{background:var(--chalk);color:var(--black)}
.theme-dark{background:var(--ink);color:var(--chalk)}
.theme-black{background:var(--black);color:var(--chalk)}
.theme-bronze{background:var(--bronze);color:var(--chalk)}
.theme-linen{background:var(--linen);color:var(--black)}

/* header */
.site-header{position:absolute;top:0;left:0;right:0;height:var(--header-h);z-index:50;color:var(--chalk)}
.site-header.on-light{color:var(--black)}
.site-header .container{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding-top:28px}
.site-header nav{padding-top:2px}
.site-header nav{display:flex;align-items:center}
.site-header nav.left{justify-content:flex-end;padding-right:118px}
.site-header nav.right{justify-content:flex-start;padding-left:118px}
.site-header nav a{font-family:var(--sans);font-size:.9em;letter-spacing:.15em;text-indent:.15em;text-transform:uppercase;margin:0 1.5vw;padding:4px 0 3px;border-bottom:1px solid transparent;line-height:1.6}
.site-header nav a.active,.site-header nav a:hover{border-bottom-color:currentColor}
.logo{display:block;width:388px}
.logo img{width:100%}
.logo .ink{display:none}
.site-header.on-light .logo .chalk{display:none}
.site-header.on-light .logo .ink{display:block}
.burger{display:none;position:absolute;right:2vw;top:42px;width:26px;height:20px;background:none;border:0;padding:0;cursor:pointer;z-index:60}
.burger span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s ease,opacity .3s ease}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:9px}.burger span:nth-child(3){top:16px}
.menu-open .burger{color:var(--chalk)}
.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:0;z-index:55;background:var(--ink) url('../img/menu-bg-1000.jpg') center/cover no-repeat;color:#eeeadf;padding:calc(var(--header-h) + 20px) 6vw 40px}
.mobile-menu a{display:block;font-family:var(--serif);font-size:32px;line-height:1.5}
.mobile-menu .logo{width:300px;position:absolute;top:34px;left:6vw}
.menu-open .mobile-menu{display:block}
.menu-open{overflow:hidden}

/* hero */
.hero{position:relative;height:48.6vw;overflow:hidden}
.hero picture{display:block;height:100%}
.hero img{width:100%;height:100%;object-fit:cover}
.section{padding:100px 0}
.section.tight{padding:60px 0}
.section.flush-top{padding-top:0}

/* image blocks */
.img-block{position:relative;overflow:hidden}
.img-block picture{display:block;width:100%;height:100%}
.img-block img{width:100%;height:100%;object-fit:cover}
.fixed-h{height:var(--h,700px)}
.overlay-text{position:absolute;left:56px;bottom:50px;max-width:270px;color:var(--chalk)}
.overlay-text h2{font-size:1.8rem;margin-bottom:.4em}
.watermark{position:absolute;right:80px;bottom:-190px;width:300px;pointer-events:none;z-index:3}
.watermark img{width:100%}
.rel{position:relative}

/* accordion */
.accordion{list-style:none;margin:2.4em 0 2.6em;padding:0;border-top:1px solid rgba(237,233,222,.55)}
.accordion li{border-bottom:1px solid rgba(237,233,222,.55)}
.accordion button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;color:inherit;font-family:var(--serif);font-size:1.4rem;letter-spacing:-.02em;text-align:left;padding:18px 0;cursor:pointer}
.accordion button svg{width:14px;height:14px;flex:none;transition:transform .3s ease}
.accordion li.open button svg{transform:rotate(180deg)}
.accordion .panel{display:none;padding:0 0 20px}
.accordion li.open .panel{display:block}

/* quote */
.quote{text-align:center;padding:80px 0 60px}
.quote .mark{font-family:var(--serif);font-size:1.6rem;line-height:1;margin:0}
.quote blockquote{font-family:var(--serif);font-size:1.6rem;line-height:1.37;letter-spacing:-.02em;margin:1.2em auto;max-width:540px}
hr.rule{border:0;border-top:1px solid var(--black);margin:0}

/* forms */
form{margin-top:1.4em}
.field{margin:0 0 1.5em}
.field label{display:block;font-size:.9rem;margin-bottom:.35em}
.field label small{font-size:.65rem;opacity:.85;margin-left:.3em}
.field .sub{font-size:.65rem;margin:.2em 0 .3em}
.field input[type=text],.field input[type=email],.field textarea{width:100%;border:0;border-radius:0;background:rgba(201,187,166,.45);padding:9px 10px;font:inherit;color:inherit;outline:0}
.theme-white .contact-form .field input,.theme-white .contact-form .field textarea{background:#d8cdbb}
.field textarea{min-height:110px;resize:vertical}
.name-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:flex;align-items:center;gap:8px;font-size:.6rem;margin:-.6em 0 1.4em}
.check input{width:12px;height:12px;margin:0;appearance:none;border:1px solid var(--black);border-radius:50%}
.check input:checked{background:var(--black)}
.form-note{font-size:.9rem;display:none;margin-top:1em}
form.sent .form-note{display:block}
.contact-form{max-width:560px;margin:0 auto}

/* services */
.stage{padding:0 0 60px;margin-bottom:60px;border-bottom:1px solid var(--black)}
.stages{padding-top:50px}
.stage:last-of-type{border-bottom:0}
.stage .num{font-size:.75rem;letter-spacing:.15em;margin:0 0 1.6em}
.stage h2{font-size:1.8rem;margin-bottom:1em}
.stage p{margin-bottom:1.6em}
.stage ul{list-style:none;padding:0;margin:0}
.stage li{font-size:.9rem;line-height:1.55;margin:0 0 .4em}
.stage li:before{content:'\2022  '}
.sticky{position:sticky;top:40px}

/* portfolio */
.portfolio-hero{position:relative;height:69.4vw;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--chalk)}
.portfolio-hero .bg{position:absolute;inset:0}
.portfolio-hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.portfolio-hero .bg img.on{opacity:1}
.portfolio-hero .bg:after{content:'';position:absolute;inset:0;background:rgba(40,35,30,.22)}
.portfolio-list{position:relative;z-index:2;text-align:center;max-width:1100px;padding:0 var(--gutter);line-height:2.2}
.portfolio-list a{font-family:var(--serif);font-size:2.5vw;line-height:1.1;transition:color .3s ease;white-space:nowrap}
.portfolio-list a:hover{color:#2e2d2c}
.portfolio-list .dash{font-family:var(--serif);font-size:2.5vw;margin:0 .5em}
.project-hero{position:relative;height:56.7vw;display:flex;align-items:center;justify-content:center;overflow:hidden}
.project-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.project-card{position:relative;z-index:2;background:var(--chalk);width:440px;height:260px;margin-top:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.project-card h1{font-size:1.6rem;margin-bottom:.9em}
.project-card .soon{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 1.6em}
.pager{display:flex;justify-content:space-between;align-items:center;height:108px;padding:0 2.5vw}
.pager a{font-family:var(--serif);font-size:1.6rem;display:flex;align-items:center;gap:14px}
.pager svg{width:14px;height:14px}

/* footer */
.site-footer{background:var(--black);color:var(--chalk);padding:56px 0 40px}
.site-footer .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.site-footer .label{font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.6;margin:0 0 .6em}
.site-footer p{font-size:.9rem;line-height:1.7;margin:0}
.site-footer a.u{text-decoration:underline;text-underline-offset:2px}
.site-footer .links{text-align:right}
.site-footer .links a{display:block;font-size:.9rem;line-height:1.7;text-decoration:underline;text-underline-offset:2px}
.site-footer .icon{width:92px;margin-top:6px}
.site-footer .bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:44px;font-size:.7rem}
.site-footer .bottom .r{text-align:right}
.site-footer .bottom a{text-decoration:underline;text-underline-offset:2px}

/* reveal on scroll (mirrors the Squarespace fade) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* utilities */
.privacy .container{max-width:900px;padding-top:180px;padding-bottom:100px}
.privacy h2{font-size:1.4rem;margin-top:2em}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .site-header nav.left{padding-right:60px}.site-header nav.right{padding-left:60px}
  .logo{width:300px}
}
@media (max-width:1000px){
  .site-header nav.left{padding-right:24px}.site-header nav.right{padding-left:24px}
  .site-header nav a{margin:0 1vw;font-size:.8em}
  .logo{width:230px}
}
@media (max-width:767px){
  :root{--gutter:6vw;--header-h:96px}
  .site-header nav{display:none}
  .site-header .container{grid-template-columns:1fr;justify-items:start;padding-top:24px}
  .logo{width:270px}
  .burger{top:36px;height:14px}.burger span:nth-child(1){top:1px}.burger span:nth-child(2){top:6px}.burger span:nth-child(3){top:11px}
  .burger{display:block}
  .hero{height:140vw;max-height:640px}
  .portfolio-hero{height:120vw;max-height:700px}
  .project-hero{height:100vw;max-height:600px}
  .section{padding:64px 0}
  .two-col{grid-template-columns:1fr;row-gap:40px}
  .col-top-pad{padding-top:0}.col-bottom{padding-bottom:0}
  .fixed-h{height:auto;aspect-ratio:var(--ar,3/2)}
  .overlay-text{left:24px;top:40px;bottom:auto;max-width:270px}
  .bleed-m{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .bleed-m.fixed-h{aspect-ratio:1/1.1}
  .watermark{width:150px;right:4vw;bottom:-70px}
  .cols .col{display:contents}
  .cols>.col>*{margin-top:0}
  .cols.home-story{display:flex;flex-direction:column;gap:40px}
  .m-narrow{width:62%}
  .o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}
  .m-hide{display:none}
  .watermark{width:160px;right:6vw;bottom:-90px}
  .portfolio-list a,.portfolio-list .dash{font-size:7vw;white-space:normal}
  .portfolio-list .dash{display:none}
  .portfolio-list a{display:block;padding:10px 0;line-height:1.2}
  .project-card{width:86%;height:auto;padding:36px 24px}
  .sticky{position:static}
  .site-footer .top,.site-footer .bottom{grid-template-columns:1fr;text-align:center;justify-items:center;row-gap:24px}
  .site-footer .links,.site-footer .bottom .r{text-align:center}
  .site-footer .icon{order:-1}
  .privacy .container{padding-top:140px}
}
@media (max-width:600px){
  .name-row{grid-template-columns:1fr}
  .pager a span{display:none}
}

/* independent columns (Squarespace stacks each column separately) */
.cols{display:grid;grid-template-columns:1fr 1fr;column-gap:10.3%;align-items:start}
.cols>*{min-width:0}
.cols .col>*+*{margin-top:50px}
.home-form .field input,.home-form .field textarea{background:transparent;border-bottom:1px solid rgba(47,46,45,.25);padding-left:0}
.contact-form .btn{display:block;margin:0 auto}
@media (max-width:767px){.cols{grid-template-columns:1fr;row-gap:40px}.cols .col>*+*{margin-top:40px}}

/* consent bar */
#consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;background:var(--black);color:var(--chalk);padding:16px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:.9rem;max-width:720px;margin:0 auto}
#consent p{margin:0}#consent a{text-decoration:underline}
#consent button{font:inherit;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;background:none;border:1px solid var(--chalk);color:var(--chalk);padding:8px 14px;margin-left:8px;cursor:pointer}
#consent button[data-c=granted]{background:var(--chalk);color:var(--black)}