/*
Theme Name: Niyarch
Theme URI: https://niyarch.com
Author: Niyarch
Description: Custom theme for Niyarch — Architects & Project Consultants. Editorial one-page site with a Selected Portfolio, Core Services, Articles & Insights (from Posts), Careers, and a redevelopment enquiry form. Includes a built-in Site Mode switch (Coming Soon / Live / Maintenance).
Version: 1.0.0
Requires PHP: 7.4
Text Domain: niyarch
*/

:root{
  --paper:#FFFFFF;
  --mist:#F2F2F0;
  --black:#000000;
  --graphite:#2B2B2A;
  --slate:#7A7A77;
  --rule:#DADAD7;
  --display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --ease-quiet:cubic-bezier(.65,0,.35,1);
  --inscription:"Cinzel", "Trajan Pro", "Times New Roman", serif;
  --statement:"Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --index:"Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --quote:"Newsreader", Georgia, "Times New Roman", serif;
  --para: 15.5px;
  --quote-size: clamp(19px, 1.8vw, 21px);
  --text:"Geist", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap:1180px;
  --gutter:clamp(20px, 5vw, 48px);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 76px);
  scroll-behavior:smooth;
  min-height:100%;
  background:#FFFFFF linear-gradient(180deg, var(--paper) 0%, var(--mist) 100%) fixed;
}
html{background:#fff !important;}
body{
  margin:0;
  background:transparent;
  color:var(--graphite);
  font-family:var(--text);
  font-size:17px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--graphite); outline-offset:3px;}
p{margin:0; text-align:justify; text-justify:inter-word;}
html, body, body * { -webkit-hyphens: none !important; -ms-hyphens: none !important; hyphens: none !important; }
p, li, .pf-text p, .prose p, .founder-body, .svc-panel-inner p, .art-body p, .article-teaser, .pp-credit p {
  overflow-wrap: normal; word-break: normal; text-justify: inter-word; text-wrap: pretty;
}
a[href^="mailto:"] { overflow-wrap: anywhere; }
.nw{white-space:nowrap;}
.contact p, .careers p, [style*="text-align:center"] p, .contact-col p{text-align:center !important;}
h1,h2,h3,h4{margin:0; font-weight:400;}
h1,h2,.work-name,.founder h3,.article h3,.careers-pull{color:var(--black);}
strong{font-weight:500;}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);}
.screen-reader-text{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;}

/* ---------- navigation ---------- */
.site-nav{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:68px;}
.nav-logo{height:28px; width:auto;}
.nav-links{display:flex; gap:26px; list-style:none; margin:0; padding:0; font-family:var(--display); font-size:16.5px; letter-spacing:0.01em;}
.nav-links a{text-decoration:none; color:var(--slate);}
.nav-links a:hover{color:var(--graphite);}
.nav-links a{display:inline-flex; flex-direction:column; align-items:center; transition:color .3s var(--ease-quiet);}
.nav-toggle{display:none; background:none; border:1px solid var(--rule); color:var(--graphite); font:500 14px var(--text); padding:8px 14px; cursor:pointer;}
@media (max-width: 980px){
  .nav-toggle{display:block;}
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:var(--paper);
    border-bottom:1px solid var(--rule); padding:8px var(--gutter) 16px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{display:block; padding:12px 0; font-size:17px; color:var(--graphite); border-bottom:1px solid var(--rule);}
  .nav-links li:last-child a{border-bottom:none;}
}
@media (max-width: 600px){
  .site-nav{position:relative; top:auto;}
  html{scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 12px); background-attachment:scroll;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 22px; font:500 15px var(--text);
  text-decoration:none; border:1px solid var(--graphite); cursor:pointer;
}
.btn-solid{background:var(--graphite); color:var(--paper);}
.btn-solid:hover{background:#000;}
.btn-line{background:transparent; color:var(--graphite);}
.btn-line:hover{background:var(--graphite); color:var(--paper);}
.btn-row{display:flex; flex-wrap:wrap; gap:12px;}
.btn[disabled]{opacity:.55; cursor:default;}

.mantra{font-size:15px; color:var(--slate); letter-spacing:.02em;}

/* ---------- hero ---------- */
.hero{padding-block:clamp(12px, 2.5vw, 32px) clamp(64px, 9vw, 112px); --hero-reserve:clamp(280px, 33vh, 320px);}
.hero-stack{display:flex; flex-direction:column; align-items:center; text-align:center;}
.hero-figure{margin:0; width:min(100%, calc((100vh - var(--hero-reserve)) * 1312 / 1199));}
@supports (height:100svh){ .hero-figure{width:min(100%, calc((100svh - var(--hero-reserve)) * 1312 / 1199));} }
@media (min-width: 900px){
  .hero-figure{width:min(68vw, 1120px, calc((100vh - var(--hero-reserve)) * 1312 / 1199));}
  @supports (height:100svh){ .hero-figure{width:min(68vw, 1120px, calc((100svh - var(--hero-reserve)) * 1312 / 1199));} }
}
.plate{position:relative; aspect-ratio:1312/1199;}
.plate img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;}
.plate-sketch{opacity:0; transition:opacity 1.5s var(--ease-quiet);}
.plate.sketch-in .plate-sketch{opacity:1;}
.hero-words{display:flex; flex-direction:column; align-items:center; gap:clamp(22px, 3vw, 34px); margin-top:clamp(20px, 3vw, 40px);}
.hero h1{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(17px, 2vw, 27px); line-height:1.4; letter-spacing:.03em;
  color:#1E1E1D; max-width:100%; text-wrap:balance;
}
.hero .btn-row{justify-content:center;}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px, 9vw, 120px); border-top:1px solid var(--rule);}
.section-title{
  text-transform:uppercase; letter-spacing:0.02em; font-family:var(--display);
  font-size:clamp(30px, 4vw, 46px); line-height:1.12; margin-bottom:clamp(28px, 4vw, 48px);
}
.section-intro{color:var(--slate); max-width:60ch; margin:-18px 0 clamp(28px, 4vw, 44px);}

/* about / practice */
.practice{padding-block:0; border-top:1px solid var(--rule);}
.practice-grid{
  position:relative; display:grid; grid-template-columns:minmax(0, 10fr) minmax(0, 6fr);
  grid-template-rows:auto auto; column-gap:clamp(40px, 6vw, 104px); align-items:start;
  padding-block:clamp(72px, 10vw, 132px);
}
.practice-intro{grid-column:1; grid-row:1;}
.practice-founder{grid-column:1; grid-row:2; align-self:end; margin-top:clamp(40px, 5vw, 64px); display:flex; flex-direction:column; gap:14px;}
.practice-col{max-width:62ch;}
.practice-intro .prose{display:flex; flex-direction:column; gap:20px;}
.practice-intro .prose p{font-size:var(--para); line-height:1.75;}
.founder-role{font-family:var(--display); font-size:clamp(22px, 2.6vw, 28px); line-height:1.2; color:var(--black); margin:0; text-transform:uppercase; letter-spacing:0.02em; text-align:left;}
.founder-body{font-size:var(--para); line-height:1.7; color:var(--graphite); margin:0;}
.founder-portrait{grid-column:2; grid-row:1 / span 2; margin:0; align-self:end;}
.portrait-frame{position:relative; aspect-ratio:3/4; width:100%; background:var(--mist); border:1px solid var(--rule); overflow:hidden;}
.portrait-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.portrait-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--slate); font:400 14px var(--text); letter-spacing:.18em; text-transform:uppercase;
  background:repeating-linear-gradient(45deg, transparent 0 22px, rgba(122,122,119,0.05) 22px 24px), var(--mist);
}
@media (max-width: 860px){
  .practice-grid{grid-template-columns:1fr; row-gap:clamp(28px, 7vw, 44px);}
  .practice-col{max-width:none;}
  .founder-portrait{grid-column:1; grid-row:3; position:static; width:100%; max-width:340px; margin-top:4px;}
}

/* core services - editorial index */
.services-section{padding-block:clamp(88px, 12vw, 168px);}
.svc-grid{display:grid; grid-template-columns:minmax(0, 10fr) minmax(0, 6fr); column-gap:clamp(40px, 6vw, 104px); align-items:start;}
.svc-lead{position:sticky; top:clamp(88px, 12vh, 132px); max-width:none;}
.svc-title{text-transform:uppercase; letter-spacing:0.02em; font-family:var(--display); font-weight:400; font-size:clamp(30px, 4vw, 46px); line-height:1.12; margin:0; color:var(--black);}
.svc-index{max-width:640px;}
.svc-list{border-top:0;}
.svc-item{border-bottom:1px solid var(--rule);}
.svc-item:last-child{border-bottom:0;}
.svc-head{margin:0; font-weight:inherit;}
.svc-toggle{
  width:100%; display:grid; grid-template-columns:1fr auto; align-items:baseline; column-gap:clamp(16px, 2.4vw, 32px);
  background:none; border:0; margin:0; padding:clamp(22px, 2.6vw, 30px) 2px; font-family:var(--text); text-align:left; color:var(--black);
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:padding-left .4s var(--ease-quiet);
}
.svc-num{font-size:13px; letter-spacing:0.12em; color:var(--slate); font-variant-numeric:tabular-nums; transform:translateY(-1px); transition:color .4s var(--ease-quiet);}
.svc-name{font-family:var(--display); font-size:clamp(19px, 2.1vw, 27px); line-height:1.2; font-weight:400; color:var(--graphite); transition:color .4s var(--ease-quiet);}
.svc-arrow{color:var(--slate); display:inline-flex; align-self:center; transition:transform .45s var(--ease-quiet), color .4s var(--ease-quiet);}
.svc-arrow svg{display:block;}
@media (hover:hover){
  .svc-toggle:hover{padding-left:12px;}
  .svc-toggle:hover .svc-name{color:var(--black);}
  .svc-toggle:hover .svc-num{color:var(--graphite);}
  .svc-toggle:hover .svc-arrow{color:var(--graphite); transform:translateY(2px);}
}
.svc-item.is-open .svc-name{color:var(--black);}
.svc-item.is-open .svc-num{color:var(--graphite);}
.svc-item.is-open .svc-arrow{transform:rotate(180deg); color:var(--graphite);}
.svc-panel{overflow:hidden; height:0; opacity:0; transition:height .42s var(--ease-quiet), opacity .3s ease;}
.svc-item.is-open .svc-panel{opacity:1;}
.svc-panel-inner{padding:0 0 clamp(26px, 3vw, 38px); max-width:62ch;}
.svc-panel-inner p{margin:0; font-size:var(--para); line-height:1.78; color:var(--graphite);}
@media (max-width: 860px){
  .svc-grid{grid-template-columns:1fr; gap:clamp(28px, 6vw, 44px);}
  .svc-lead{position:static;}
  .svc-intro{margin-bottom:clamp(8px, 3vw, 20px);}
}
@media (prefers-reduced-motion: reduce){ .svc-panel, .svc-arrow, .svc-toggle, .svc-name, .svc-num{transition:none;} }

/* ============ Selected Portfolio: dissolve tiles + glass reader ============ */
.pf-head{width:fit-content; max-width:100%; margin:0 0 clamp(28px, 4vw, 48px);}
.pf-quote{margin:0; text-align:right;}
.pf-subhead{font-family:var(--quote); font-style:italic; font-weight:400; color:var(--slate); font-size:var(--quote-size); line-height:1.5; margin:0 0 8px; text-align:right;}
.pf-sign{font-family:var(--quote); font-style:italic; font-size:17px; color:var(--slate); margin:0; text-align:right;}
@media (max-width: 600px){ .pf-head{width:auto;} .pf-quote, .pf-subhead{text-align:left;} .pf-sign{text-align:right;} }

.pp-block{position:relative; display:grid; grid-template-columns:1.68fr 1fr 1fr; gap:clamp(16px, 2.2vw, 28px); align-items:stretch;}
.pp-tile{position:relative; min-width:0;}
.pp-tile--lead{grid-row:span 2;}
.pp-btn{position:relative; display:block; width:100%; aspect-ratio:1/1; border:0; margin:0; padding:0; background:transparent; cursor:pointer; text-align:center; -webkit-tap-highlight-color:transparent; font:inherit; color:inherit;}
.pp-tile--lead .pp-btn{aspect-ratio:auto; height:100%; min-height:100%;}
.pp-btn:focus-visible{outline:2px solid var(--graphite); outline-offset:3px;}
.pp-art{position:absolute; inset:0; overflow:hidden;}
.pp-art::after{content:""; position:absolute; inset:0; background:rgba(255,255,255,.10); pointer-events:none; z-index:1;}
.pp-tile--ph .pp-art::after{display:none;}
.pp-bg{position:absolute; inset:0; background-image:var(--img); background-size:var(--tsize, cover); background-position:var(--tpos, var(--pos, center)); filter:grayscale(1);}
.pp-bg--soft{filter:grayscale(1) blur(7px); transform:scale(1.06); transition:opacity .6s ease;
  -webkit-mask-image:linear-gradient(to bottom, transparent 30%, #000 82%); mask-image:linear-gradient(to bottom, transparent 30%, #000 82%);}
.pp-dusk{position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(20,20,19,.70) 0%, rgba(20,20,19,.32) 22%, rgba(20,20,19,0) 46%);}
.pp-name{position:absolute; left:0; right:0; bottom:clamp(34px, 3.2vw, 44px); padding:0 12px; z-index:3;
  font-family:var(--display); font-weight:400; font-size:clamp(16px, 1.55vw, 21px); line-height:1.2; letter-spacing:.07em; text-transform:uppercase; color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.38), 0 0 2px rgba(0,0,0,.25);}
.pp-tile--lead .pp-name{font-size:clamp(19px, 1.9vw, 25px);}
.pp-tile .pp-aka{position:absolute; left:0; right:0; bottom:clamp(34px, 3.2vw, 44px); padding:0 12px; z-index:3; font-family:var(--quote); font-style:italic; font-size:clamp(12.5px, 1.1vw, 14.5px); color:rgba(255,255,255,.88);}
.pp-tile.has-aka .pp-name{bottom:calc(clamp(34px, 3.2vw, 44px) + 22px);}
.pp-tile--ph .pp-aka{color:var(--slate);}
.pp-hint{position:absolute; left:0; right:0; bottom:clamp(12px, 1.3vw, 18px); z-index:3; display:flex; justify-content:center; align-items:center;
  font-family:var(--text); font-size:10.5px; letter-spacing:.06em; color:rgba(255,255,255,.78); transition:color .3s ease;}
.pp-arrow{display:none; transition:transform .35s var(--ease-quiet);}
.pp-tile--ph .pp-art{background:#F4F4F2 repeating-linear-gradient(45deg, transparent 0 22px, rgba(122,122,119,.07) 22px 24px);}
.pp-tile--ph .pp-dusk, .pp-tile--ph .pp-bg{display:none;}
.pp-tile--ph .pp-name{color:var(--black); text-shadow:none;}
.pp-tile--ph .pp-hint{color:#9C9C98;}
@media (hover:hover) and (pointer:fine){
  .pp-hint-t{display:none;}
  .pp-arrow{display:block;}
  .pp-btn:hover .pp-hint{color:#fff;}
  .pp-tile--ph .pp-btn:hover .pp-hint{color:var(--graphite);}
  .pp-btn:hover .pp-bg--soft{opacity:.55;}
}
.pp-tile.pp-hide{display:none;}

/* status badge */
.pp-badge{position:absolute; top:clamp(12px,1.5vw,18px); left:clamp(12px,1.5vw,18px); z-index:3;
  font-family:var(--index); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:rgba(20,20,19,.55); border:1px solid rgba(255,255,255,.4); padding:4px 9px;}
.pp-tile--ph .pp-badge{color:var(--graphite); background:rgba(255,255,255,.7); border-color:var(--rule);}

/* text-only tiles */
.pp-note{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; aspect-ratio:1/1; min-width:0;
  padding:clamp(18px, 2.2vw, 30px); background:#F7F7F5;}
.pp-note-name{font-family:var(--display); font-size:clamp(15px, 1.45vw, 19px); line-height:1.25; letter-spacing:.07em; text-transform:uppercase; color:var(--black); margin-bottom:8px;}
.pp-note-line{font-family:var(--text); font-size:13px; line-height:1.6; color:var(--slate); font-weight:400;}
.pp-note-loc{font-family:var(--quote); font-style:italic; font-size:14.5px; line-height:1.5; color:var(--slate);}
.pp-note--stage{position:relative; align-items:flex-start; justify-content:flex-start; text-align:left;}
.pp-note--stage .pp-note-name{margin-bottom:4px;}
.pp-note--row{justify-content:flex-start; padding:9px clamp(16px, 1.8vw, 24px) 8px; background:#FBFBFA;}
.pp-note--row .pp-note-name{margin-bottom:2px;}
.pp-note--row .pp-note-line{line-height:1.45;}
.pp-note-aka{font-family:var(--quote); font-style:italic; font-size:13px; line-height:1.3; color:var(--slate); margin:-1px 0 3px;}

/* per-project timeline (generalised N-stage dot/line) */
.pp-stages{position:relative; left:0; right:0; margin-top:auto; width:100%;}
.pp-note--stage .pp-stages{position:absolute; left:clamp(18px, 2.2vw, 30px); right:clamp(18px, 2.2vw, 30px); bottom:clamp(18px, 2.2vw, 30px);}
.pp-stages-line{position:relative; left:6px; right:6px; top:5px; height:1px; background:#C8C8C4; margin:0 6px;}
.pp-stages-done{position:absolute; left:0; top:0; height:1px; background:var(--graphite); display:block;}
.pp-stages-dots{position:relative; display:flex; justify-content:space-between; margin-top:-6px;}
.pp-d{width:11px; height:11px; border-radius:50%; background:#fff; border:1px solid #B9B9B5;}
.pp-d--f{background:var(--graphite); border-color:var(--graphite);}
.pp-d--c{border:2px solid var(--black);}
.pp-stages-lb{display:flex; justify-content:space-between; margin-top:8px; font-family:var(--text); font-size:11px; color:var(--slate); gap:6px;}
.pp-stages-lb span{flex:1; text-align:center;}
.pp-stages-lb span:first-child{text-align:left;}
.pp-stages-lb span:last-child{text-align:right;}
.pp-stages-lb .pp-cur{color:var(--black); font-weight:600;}

/* glass reader */
.pp-glass{z-index:6; display:flex; align-items:flex-end; gap:clamp(20px, 2.6vw, 32px); isolation:isolate;
  background:linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(246,247,248,.46) 55%, rgba(255,255,255,.58) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(1.25) brightness(1.03); backdrop-filter:blur(24px) saturate(1.25) brightness(1.03);
  border:1px solid rgba(255,255,255,.95); outline:1px solid rgba(0,0,0,.06); outline-offset:0;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -30px 60px -40px rgba(120,125,130,.18);
  opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .6s var(--ease-quiet); position:relative;}
.pp-glass::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 68%, rgba(255,255,255,.22) 100%);}
.pp-glass > *{position:relative;}
.pp-glass > .pp-x{position:absolute;}
.pp-glass[hidden]{display:none;}
.pp-glass.is-inline{scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 84px); position:relative; grid-column:1 / -1; margin:0 -8px; padding:8px;}
.pp-glass.is-in{opacity:1; transform:none;}
.pp-glass.is-overlay{position:absolute; inset:-14px; padding:14px;}
.pp-glass.is-inline .pp-pic{width:min(48%, 520px);}
.pp-glass.is-narrow{flex-direction:column; align-items:stretch; gap:0; padding:8px 8px 18px;}
.pp-glass.is-narrow .pp-pic{width:100%;}
.pp-glass.is-narrow .pp-story{padding:14px 6px 0;}
.pp-glass.is-narrow .pp-title{font-size:20px;}
.pp-pic{flex:none; aspect-ratio:1/1; background-image:var(--img); background-size:cover; background-position:center; filter:grayscale(1); transition:filter .9s ease .15s;}
.pp-glass.is-in .pp-pic{filter:none;}
.pp-glass.is-overlay .pp-pic{height:100%;}
.pp-pic.is-ph{background:#F4F4F2 repeating-linear-gradient(45deg, transparent 0 22px, rgba(122,122,119,.08) 22px 24px);}
.pp-story{flex:1 1 auto; min-width:0; padding:0 clamp(8px, 1vw, 14px) 2px 0;}
.pp-title{font-family:var(--display); font-weight:400; font-size:clamp(21px, 2vw, 25px); line-height:1.2; letter-spacing:.05em; text-transform:uppercase; color:var(--black); margin:0 0 4px;}
.pf-aka{font-family:var(--quote); font-style:italic; font-size:15px; color:var(--graphite); margin:0 0 2px;}
.pf-loc{font-family:var(--quote); font-style:italic; color:var(--slate); font-size:15.5px; line-height:1.5; margin:0 0 12px; text-align:left;}
.pf-facts{list-style:none; margin:0 0 12px; padding:0; font-size:12.5px; line-height:1.65; color:var(--graphite);}
.pf-text p{font-size:13.5px; line-height:1.72; color:var(--graphite); text-align:justify;}
.pf-status-tag{display:inline-block; margin:0 0 12px; font-family:var(--index); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); border:1px solid var(--rule); padding:3px 9px;}
.pf-svc{margin-top:12px; display:flex; flex-direction:column; gap:10px;}
.pf-chain{margin:0; font-family:var(--index); font-size:11.5px; line-height:1.9 !important; text-align:left;}
.pf-step{white-space:nowrap;}
.pf-svc-done{color:#4A4A48 !important; font-weight:400 !important;}
.pf-svc-open{color:#000 !important; font-weight:600 !important;}
.pf-svc-next{color:#76766F !important; font-weight:400 !important;}
.pf-arr{color:#76766F !important; margin:0 3px 0 4px !important;}
.pf-record{margin-top:14px; padding-top:10px; border-top:1px solid var(--rule); font-family:var(--text); font-size:11.5px; line-height:1.55; letter-spacing:.02em; color:var(--slate); text-align:left;}
.pp-x{position:absolute; top:14px; right:16px; z-index:2; display:flex; padding:10px; margin:0; border:0; background:none; color:var(--graphite); cursor:pointer;}
.pp-x:hover{color:var(--black);}
.pp-tapclose{display:none; margin:14px 0 0; text-align:center; font-family:var(--text); font-size:10.5px; letter-spacing:.06em; color:#C4C4C0;}
@media (hover:none), (pointer:coarse){ .pp-x{display:none;} .pp-tapclose{display:block;} .pp-glass{cursor:pointer;} }

/* banners + drawers (Before Niyarch) */
.pp-banner-wrap{margin-top:clamp(28px, 4vw, 56px);}
.pp-banner{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%;
  border:0; margin:0; padding:clamp(20px, 2.4vw, 28px) 16px clamp(34px, 3.4vw, 42px); background:none;
  border-top:1px solid #CFCFCB; border-bottom:1px solid #CFCFCB; cursor:pointer; font:inherit; color:inherit; -webkit-tap-highlight-color:transparent;}
.pp-banner-name{font-family:var(--display); font-weight:400; font-size:clamp(20px, 2.2vw, 28px); line-height:1.2; letter-spacing:.07em; text-transform:uppercase; color:var(--black);}
.pp-banner .pp-hint{position:static; color:#9C9C98; margin-top:4px;}
@media (hover:hover) and (pointer:fine){ .pp-banner:hover .pp-hint{color:var(--graphite);} }
.pp-banner[aria-expanded="true"] .pp-arrow{transform:rotate(180deg);}
.pp-drawer[hidden]{display:none;}
.pp-drawer-inner{padding:clamp(22px, 3vw, 36px) 0 clamp(8px, 1.5vw, 16px);}
.pp-drawer-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}
@media (max-width: 700px){ .pp-drawer-grid{grid-template-columns:1fr;} }

@media (max-width: 1099px){
  .pp-block{grid-template-columns:1fr 1fr;}
  .pp-tile--lead{grid-column:1 / -1; grid-row:auto;}
  .pp-tile--lead .pp-btn{aspect-ratio:4/3; height:auto; min-height:0;}
  .pp-banner{padding:18px 16px 26px;}
}
@media (max-width: 599px){
  .pp-block{grid-template-columns:1fr;}
  .pp-tile--lead .pp-btn{aspect-ratio:4/5;}
  .pp-note{aspect-ratio:auto; min-height:0; padding:26px 22px;}
  .pp-note--stage{padding-bottom:84px;}
}
@media (prefers-reduced-motion: reduce){ .pp-glass, .pp-pic, .pp-bg--soft, .pp-arrow, .pp-hint{transition:none;} }

/* D1 body copy sizing inside portfolio + articles */
#portfolio .pp-glass .pf-text p{font-size:12.15px;}
#articles .article-teaser{font-size:13.5px;}
#artReader .art-body p{font-size:13.95px; line-height:1.8;}
@media (max-width: 599px){ #portfolio .pp-glass .pf-text p{font-size:12px;} }

/* articles - preview cards that expand to a full read (sourced from WordPress Posts) */
.articles{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 4vw, 40px); align-items:stretch;}
.article{border-top:1px solid var(--rule); padding-top:18px; display:flex; flex-direction:column; gap:12px; transition:border-color .4s var(--ease-quiet);}
.article-date{margin:auto 0 0; font-family:var(--text); font-size:12px; letter-spacing:.04em; color:var(--slate); text-align:left;}
.article h3{font-family:var(--display); font-size:22px; line-height:1.25;}
.article-teaser{color:var(--slate); font-size:15px; line-height:1.6; text-align:left;}
.art-toggle{
  margin-top:0; align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; border-bottom:1px solid var(--rule); padding:8px 0 6px;
  font:500 12px var(--index); letter-spacing:0.12em; text-transform:uppercase; color:var(--graphite);
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .3s var(--ease-quiet), color .3s var(--ease-quiet);
}
.art-toggle svg{display:block; transition:transform .45s var(--ease-quiet);}
.art-toggle:hover{border-color:var(--graphite); color:var(--black);}
.article.is-open{border-top-color:var(--graphite);}
.article.is-open .art-toggle svg{transform:rotate(180deg);}
.art-reader{grid-column:1 / -1; overflow:hidden; height:0; opacity:0; transition:height .5s var(--ease-quiet), opacity .35s ease;}
.art-reader.is-open{opacity:1;}
.art-reader-inner{padding:clamp(28px, 4vw, 48px) 0 clamp(8px, 2vw, 16px); border-top:1px solid var(--rule);}
.art-reader-inner > .art-content{max-width:none; width:66.666%;}
.art-reader h3{font-family:var(--display); font-size:clamp(26px, 3.2vw, 36px); line-height:1.2; color:var(--black); margin:0 0 12px;}
.art-sub{font-family:var(--quote); font-style:italic; color:var(--slate); font-size:clamp(17px, 1.6vw, 20px); line-height:1.5; margin:0 0 0; text-align:left;}
.art-date{margin:0 0 10px; font-family:var(--text); font-size:12.5px; letter-spacing:.04em; color:var(--slate); text-align:left;}
.art-body{display:flex; flex-direction:column; gap:18px; border-top:1px solid var(--rule); margin-top:clamp(12px, 1.6vw, 18px); padding-top:clamp(18px, 2.4vw, 26px);}
.art-body p{font-size:var(--para); line-height:1.8; color:var(--graphite); text-align:justify;}
.art-date--end{margin:clamp(20px, 2.6vw, 28px) 0 0; padding-top:12px; border-top:1px solid var(--rule);}
.art-close{margin-top:clamp(28px, 3.4vw, 40px);}
.articles-empty{color:var(--slate); font-size:15px;}
@media (max-width: 860px){ .articles{grid-template-columns:1fr;} .art-body p{text-align:left;} .art-reader-inner > .art-content{width:100%;} }
@media (prefers-reduced-motion: reduce){ .art-reader, .art-toggle svg, .article{transition:none;} }

/* careers */
.careers{display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(28px, 4vw, 44px);}
.careers-quote{font-family:var(--quote); font-style:italic; font-weight:400; color:var(--slate); font-size:var(--quote-size); line-height:1.5; max-width:48ch; margin:0; text-align:center;}
.careers-cta{justify-content:center;}
.careers-form-toggle{margin-top:4px;}
.careers-form{width:100%; max-width:760px; margin:clamp(8px,2vw,20px) auto 0; text-align:left; display:none;}
.careers-form.is-open{display:block;}
.field-note{font-size:12.5px; color:var(--slate); margin-top:4px;}

/* contact */
.contact{text-align:center; display:flex; flex-direction:column; align-items:center; gap:clamp(20px, 3vw, 34px);}
.contact .contact-title{white-space:normal; margin-bottom:8px; max-width:20ch; text-wrap:balance; font-size:clamp(26px, 3.2vw, 44px);}
.contact-grid{
  width:100%; display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 4vw, 56px); margin-top:clamp(20px, 3vw, 32px);
  text-align:center; border-top:1px solid var(--rule); padding-top:clamp(32px, 4vw, 48px);
}
.contact-col p{font-size:var(--para); line-height:1.8; color:var(--graphite); text-align:center;}
.contact-col a{color:var(--graphite); text-decoration:none; border-bottom:1px solid var(--rule);}
.contact-col a:hover{color:var(--black); border-color:var(--graphite);}
.contact-label{font-family:var(--index); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--slate); margin:0 0 12px;}
@media (max-width: 720px){ .contact-grid{grid-template-columns:1fr; gap:28px;} }

/* forms (enquiry + careers share this) */
.enquiry, .careers-form-inner{width:100%; max-width:760px; margin:clamp(8px,2vw,20px) auto 0; text-align:left;}
.enquiry-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px);}
.field{display:flex; flex-direction:column; gap:7px;}
.field--full{grid-column:1 / -1;}
.field span{font-family:var(--index); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate);}
.field input, .field select, .field textarea{
  font-family:var(--text); font-size:var(--para); color:var(--graphite); background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:9px 2px; border-radius:0; -webkit-appearance:none; appearance:none; transition:border-color .3s var(--ease-quiet); width:100%;
}
.field input[type="file"]{border:1px dashed var(--rule); padding:12px; font-size:14px;}
.field textarea{border:1px solid var(--rule); padding:10px 12px; resize:vertical; line-height:1.6;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--graphite);}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237A7A77' stroke-width='1.2'/></svg>"); background-repeat:no-repeat; background-position:right 4px center; padding-right:22px;}
.enquiry-actions{display:flex; align-items:center; gap:18px; margin-top:clamp(20px,3vw,30px); flex-wrap:wrap;}
.enquiry-note{font-size:14px; color:var(--slate);}
.enquiry-note.is-error{color:#B3261E;}
.enquiry-note.is-ok{color:#2E7D32;}
@media (max-width:600px){ .enquiry-grid{grid-template-columns:1fr;} }

.contact-map{width:100%; margin-top:clamp(28px, 4vw, 44px); border:1px solid var(--rule); overflow:hidden;}
.contact-map iframe{width:100%; height:clamp(280px, 38vw, 420px); border:0; display:block; filter:grayscale(1);}
.map-links{display:flex; gap:14px; justify-content:center; align-items:center; margin:14px 0 0; font-family:var(--index); font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate);}
.map-links a{color:var(--graphite); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px;}
.map-links a:hover{color:var(--black); border-color:var(--graphite);}

/* footer */
.site-footer{border-top:1px solid var(--rule); padding-block:28px;}
.footer-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--slate);}
.footer-logo{height:34px; width:auto;}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(20,20,19,.92); display:flex; align-items:center; justify-content:center; padding:calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);}
.lightbox[hidden]{display:none;}
.lightbox-frame{margin:0; display:flex; flex-direction:column; gap:12px; max-width:min(1200px, 100%); max-height:100%;}
.lightbox-frame img{max-width:100%; max-height:calc(100vh - 150px); object-fit:contain; margin-inline:auto;}
.lightbox-bar{display:flex; justify-content:space-between; align-items:center; gap:16px; color:#F2F2F0;}
.lightbox-close{background:none; border:1px solid #F2F2F0; color:#F2F2F0; font:500 14px var(--text); padding:8px 16px; cursor:pointer;}

/* opening logo fade */
html.logo-wait .nav-logo{opacity:0;}
.nav-logo{transition:opacity 1s ease-out;}
.scroll-cue{
  display:inline-flex; flex-direction:column; align-items:center; gap:6px; color:var(--slate); font:400 12px var(--text);
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none; padding:8px 6px 4px; opacity:.75;
}
.scroll-cue:hover{opacity:1; color:var(--graphite);}
.scroll-cue svg{display:block;}
.scroll-cue--practice{position:absolute; left:0; bottom:clamp(18px, 3vw, 30px); grid-column:1;}
@media (max-width: 860px){ .scroll-cue--practice{display:none;} }

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* ---------- Simple admin-facing repeater UI (theme settings pages) ---------- */
.niy-repeater-row{display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid #dcdcde; background:#fff; margin-bottom:8px;}
.niy-repeater-row .niy-field{flex:1; display:flex; flex-direction:column; gap:4px;}
.niy-repeater-row input[type="text"], .niy-repeater-row textarea, .niy-repeater-row select{width:100%;}
.niy-repeater-remove{align-self:flex-start; margin-top:22px;}
.niy-stage-status{width:auto;}
