/* AUI Group — site styles */
/* DIVERGENCE FROM REFERENCE: the display-font token is --aui-display here, not
   --display. Elementor sets `--display: flex` on every .e-con container, which
   shadows an inherited --display and resolves var(--display) to "flex" — an
   invalid font-family — for all content inside a container. Renaming the token
   is the only robust fix; nothing else in the token set collides. */
/* DIVERGENCE FROM REFERENCE: the Google Fonts @import is gone. The same faces
   are self-hosted in assets/css/fonts.css and inlined into <head> by
   inc/performance.php. */
:root{
  --paper:#F5F2EA;
  --ink:#181614;
  --muted:#726C61;
  --line:#DCD5C4;
  --surface:#EDE7D8;
  --panel:#141210;
  --panel-ink:#FAF8F3;
  --muted-on-panel:#A69D8C;
  --line-on-panel:rgba(250,248,243,0.14);
  --accent:#FF5600;
  --accent-ink:#FFFFFF;
  --aui-display:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
::selection{background:var(--accent); color:#fff;}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(rgba(24,22,20,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(24,22,20,.035) 1px, transparent 1px);
  background-size:44px 44px;
}
h1,h2,h3{margin:0; max-width:100%;}
p{margin:0;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
main{width:100%;}
ol{margin:0; padding:0;}

.label{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:14px;
}
h2.title{
  font-family:var(--aui-display); font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(1.8rem,3.2vw,2.7rem); line-height:1.1;
}
.panel h2.title{color:var(--panel-ink);}
.lede{font-size:16px; line-height:1.7; color:var(--muted); max-width:560px;}
.panel .lede{color:var(--muted-on-panel);}

.section{padding:96px clamp(24px,6vw,100px); position:relative;}
.section > *{max-width:1280px; margin-left:auto; margin-right:auto;}
.section.panel{background:var(--panel); color:var(--panel-ink);}
.section.tint{background:var(--surface);}

.sec-head{display:flex; gap:28px; align-items:flex-end; margin-bottom:56px; border-bottom:1px solid var(--line); padding-bottom:32px;}
.panel .sec-head{border-color:var(--line-on-panel);}
.sec-head.center{flex-direction:column; align-items:center; text-align:center; gap:10px;}
.sec-index{font-family:var(--mono); font-size:13px; color:var(--muted); letter-spacing:.04em; flex:none; padding-bottom:4px;}
.sec-index i{font-style:normal; opacity:.5; margin:0 2px;}
.panel .sec-index{color:var(--muted-on-panel);}

.row{display:flex; gap:56px;}
.col{flex:1; min-width:0;}
.grid{display:grid; gap:24px;}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* buttons */
.btn{
  font-family:var(--aui-display); font-size:13px; letter-spacing:.02em; text-transform:uppercase; font-weight:700;
  padding:16px 28px; border-radius:2px; text-align:center;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  white-space:nowrap; text-decoration:none; cursor:pointer; border:1px solid transparent;
}
.btn-accent{background:var(--accent); color:#fff;}
.btn-accent:hover{background:#E64E00;}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.panel .btn-outline{color:var(--panel-ink); border-color:var(--panel-ink);}
.btn-outline:hover{background:var(--ink); color:#fff;}
.panel .btn-outline:hover{background:var(--panel-ink); color:var(--panel);}
.hero-photo .btn-outline{background:rgba(0,0,0,.4); color:#fff; border-color:rgba(255,255,255,.5);}
.hero-photo .btn-outline:hover{background:rgba(0,0,0,.65); color:#fff;}

.tag{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.03em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:6px 12px; display:inline-block;
}
.panel .tag{background:var(--accent); color:#fff;}

/* nav */
.nav-bar{
  position:sticky; top:0; z-index:20; background:rgba(245,242,234,0.92); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px clamp(24px,6vw,100px); border-bottom:1px solid var(--line);
  width:100%;
}
.logo-mark{height:44px; width:auto; aspect-ratio:225/104; display:block; flex:none;}
.nav-links{display:flex; gap:26px; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; align-items:center; font-family:var(--aui-display);}
.nav-links a{text-decoration:none; color:var(--ink); display:inline-flex; align-items:baseline; gap:6px;}
.nav-links a:hover{color:var(--accent);}
.nav-links .idx{font-family:var(--mono); font-size:10px; color:var(--muted); font-weight:400;}
.nav-cta{display:flex; gap:12px; align-items:center;}

/* hero */
.hero-photo{
  position:relative; min-height:clamp(560px,84vh,860px); display:flex; align-items:flex-end;
  background:
    linear-gradient(90deg, rgba(10,9,8,.86) 0%, rgba(10,9,8,.5) 60%, rgba(10,9,8,.28) 100%),
    linear-gradient(0deg, rgba(10,9,8,.62), rgba(10,9,8,.2) 45%, rgba(10,9,8,.55)),
    url('../img/hero-bg.webp') center/cover no-repeat;
  color:#fff; padding-top:64px; padding-bottom:64px;
}
.corner{position:absolute; width:26px; height:26px; opacity:.5; pointer-events:none;}
.corner::before, .corner::after{content:""; position:absolute; background:#fff;}
.corner::before{width:100%; height:1px; top:50%; left:0;}
.corner::after{width:1px; height:100%; left:50%; top:0;}
.corner-tl{top:28px; left:clamp(24px,6vw,100px);}
.corner-tr{top:28px; right:clamp(24px,6vw,100px);}
.corner-bl{bottom:28px; left:clamp(24px,6vw,100px);}
.corner-br{bottom:28px; right:clamp(24px,6vw,100px);}
.hero-vert-label{
  position:absolute; right:34px; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  letter-spacing:.24em; font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.5); text-transform:uppercase;
}
.hero-inner{max-width:1280px; margin:0 auto; width:100%; display:flex; justify-content:space-between; align-items:flex-end; gap:48px;}
.hero-copy{max-width:620px;}
.hero-title{
  font-family:var(--aui-display); font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(2.2rem,4.4vw,3.5rem); line-height:1.1; margin:18px 0 22px; color:#fff;
}
.hero-photo .lede{color:#DCD8CE;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;}
.hero-pill{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,86,0,.16); border:1px solid rgba(255,86,0,.4);
  color:#fff; font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 14px;
}
.hero-pill svg{color:var(--accent); flex:none;}
.hero-figure{position:relative; width:300px; flex:none;}
.hero-figure img{width:100%; display:block; aspect-ratio:4/5; object-fit:cover; border:1px solid rgba(255,255,255,.25);}
.hero-badge{
  margin-top:-1px; background:#fff; color:var(--ink);
  padding:16px 18px; display:flex; gap:12px; align-items:center;
}
.hero-badge .icon{
  width:38px; height:38px; background:var(--surface); flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.hero-badge strong{display:block; font-size:13px; font-weight:700; line-height:1.3; font-family:var(--aui-display);}
.hero-badge span{font-size:11.5px; color:var(--muted);}

/* about */
.about-layout{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.about-media{display:flex; flex-direction:column;}
.about-image-frame{margin-bottom:32px;}
.about-image-frame img{width:100%; display:block; aspect-ratio:16/10; object-fit:cover;}
.brand-row{display:flex; gap:32px; align-items:center; flex-wrap:wrap; margin-bottom:24px;}
.brand-row svg{height:52px; width:auto;}
.feature-index{list-style:none; display:flex; flex-direction:column;}
.feature-index li{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line);}
.feature-index li:first-child{border-top:none; padding-top:0;}
.fi-num{font-family:var(--mono); font-size:13px; color:var(--accent); flex:none; padding-top:2px;}
.feature-index h3{font-family:var(--aui-display); font-size:15.5px; font-weight:700; margin-bottom:5px;}
.feature-index p{font-size:13.5px; line-height:1.6; color:var(--muted);}

.stat-flat-row{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:80px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
}
.stat-flat{text-align:center; padding:26px 20px; border-left:1px solid var(--line);}
.stat-flat:first-child{border-left:none;}
.stat-flat .n{font-family:var(--aui-display); font-weight:700; font-size:52px; letter-spacing:-0.01em; color:var(--accent);}
.stat-flat .l{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:8px; text-transform:uppercase; letter-spacing:.02em;}

/* services */
.svc-list{border-top:1px solid var(--line-on-panel);}
.svc-row{display:grid; grid-template-columns:52px 60px 1fr; gap:24px; align-items:center; padding:26px 0; border-bottom:1px solid var(--line-on-panel);}
.svc-num{font-family:var(--mono); font-size:13px; color:var(--muted-on-panel);}
.svc-icon-box{width:56px; height:56px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff; flex:none;}
.svc-name{font-family:var(--aui-display); font-weight:700; font-size:18px; margin-bottom:4px;}
.svc-desc{font-size:13.5px; line-height:1.6; color:var(--muted-on-panel); max-width:640px;}

/* projects */
.case-study{display:grid; grid-template-columns:1.25fr 1fr; gap:64px; align-items:center; margin-bottom:88px;}
.case-study:last-child{margin-bottom:0;}
.case-study.reverse .case-media{order:2;}
.case-study.reverse .case-copy{order:1;}
.case-image{
  height:440px; background-size:cover; background-position:center; border:1px solid var(--line);
  display:flex; align-items:flex-start; padding:20px;
}
.case-loc{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;}
.case-copy h3{font-family:var(--aui-display); font-size:27px; font-weight:700; margin-bottom:18px;}
.proj-detail{list-style:none; margin:0 0 20px; padding:0; font-size:13.5px; line-height:1.65; color:var(--muted);}
.proj-detail li{padding-left:18px; position:relative; margin-top:8px;}
.proj-detail li::before{content:"—"; position:absolute; left:0; color:var(--accent);}
.proj-link{font-family:var(--aui-display); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; gap:8px;}
.proj-link:hover{color:var(--accent);}

/* reviews */
.quote-block{position:relative; display:flex; gap:8px; margin-top:8px;}
.quote-mark{
  font-family:Georgia,serif; font-size:180px; line-height:1; color:var(--accent); opacity:.16;
  flex:none; margin-top:-.35em; user-select:none;
}
.quote-main{flex:1; min-width:0; padding-top:24px;}
.quote-big{font-family:var(--sans); font-weight:400; font-size:clamp(1.3rem,2.5vw,1.85rem); line-height:1.5; color:var(--ink);}
.quote-meta{display:flex; justify-content:space-between; align-items:center; margin-top:32px; flex-wrap:wrap; gap:20px;}
.quote-name{font-family:var(--aui-display); font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase;}
.quote-role{font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--muted); margin-top:5px;}
.quote-nav{display:flex; gap:10px;}
.carousel-arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent;
  display:flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; flex:none; padding:0;
}
.carousel-arrow:hover{background:var(--ink); border-color:var(--ink); color:#fff;}
.carousel-dots{display:flex; justify-content:center; gap:10px; margin-top:48px;}
.carousel-dots .dot{width:22px; height:2px; background:var(--line); border:none; padding:0; cursor:pointer; transition:background .2s;}
.carousel-dots .dot.active{background:var(--accent);}

/* partners */
.partner-grid{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-on-panel); border-left:1px solid var(--line-on-panel); margin-top:8px;}
.partner-cell{border-right:1px solid var(--line-on-panel); border-bottom:1px solid var(--line-on-panel); display:flex; align-items:center; justify-content:center; padding:40px 24px;}
.partner-cell img{max-height:32px; width:auto; filter:brightness(0) invert(1); opacity:.7;}

/* contact */
.contact-strip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); margin-bottom:64px;}
.contact-item{padding:24px 28px; border-left:1px solid var(--line);}
.contact-item:first-child{border-left:none;}
.contact-item .k{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:10px;}
.contact-item .v{font-size:14px; line-height:1.6;}
.contact-item .v a{text-decoration:none;}
.contact-item .v a:hover{color:var(--accent);}
.contact-form{max-width:820px; margin:0 auto; border:1px solid var(--line); padding:clamp(28px,5vw,56px);}
.field{margin-bottom:18px;}
.field label{display:block; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:0; padding:12px 14px;
  font-family:var(--sans); font-size:14px; color:var(--ink); background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent); outline:none;}
.field textarea{resize:vertical; min-height:90px;}

/* footer */
footer.section{padding-top:56px; padding-bottom:40px;}
.foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid var(--line-on-panel);}
.foot-brand{max-width:280px;}
.foot-tagline{font-size:13.5px; color:var(--muted-on-panel); margin-top:14px; line-height:1.55;}
.foot-links-row{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.03em; align-content:flex-start;}
.foot-links-row a{text-decoration:none;}
.foot-links-row a:hover{color:var(--accent);}
.foot-contact{font-size:13px; line-height:1.85; color:var(--muted-on-panel); text-align:right;}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; margin-top:28px;
  font-size:12px; color:var(--muted-on-panel); flex-wrap:wrap; gap:14px;
}
.foot-bottom img{height:16px; width:auto; opacity:.85;}
.foot-bottom .credit{display:flex; align-items:center; gap:8px;}

@media (max-width: 980px){
  .about-layout{grid-template-columns:1fr; gap:40px;}
  .case-study, .case-study.reverse{grid-template-columns:1fr; gap:28px;}
  .case-study.reverse .case-media, .case-study.reverse .case-copy{order:0;}
  .case-image{height:320px;}
  .partner-grid{grid-template-columns:repeat(2,1fr);}
  .contact-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .contact-item:nth-child(2n+1){border-left:none;}
  .contact-item:nth-child(n+3){border-top:1px solid var(--line);}
}
@media (max-width: 900px){
  .section{padding-top:64px; padding-bottom:64px;}
  .row{flex-direction:column; display:flex; align-items:stretch;}
  .hero-inner{flex-direction:column; align-items:flex-start;}
  .hero-figure{width:220px;}
  .hero-vert-label, .corner{display:none;}
  .g4, .g3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .nav-links{display:none;}
  .nav-bar .btn-outline{display:none;}
  .sec-head{flex-direction:column; align-items:flex-start; gap:10px;}
  .sec-head.center{align-items:center;}
  .quote-block{flex-direction:column; gap:0;}
  .quote-mark{font-size:90px; margin-top:0;}
  .quote-main{padding-top:0;}
  .svc-row{grid-template-columns:40px 48px 1fr; gap:16px; padding:20px 0;}
  .stat-flat-row{grid-template-columns:repeat(2, minmax(0,1fr));}
  .stat-flat:nth-child(odd){border-left:none;}
  .stat-flat:nth-child(n+3){border-top:1px solid var(--line);}
  .stat-flat .n{font-size:42px;}
  .foot-contact{text-align:left;}
}
@media (max-width: 560px){
  .g2{grid-template-columns:1fr;}
}

/* =====================================================================
   MULTI-PAGE ADDITIONS
   Everything above is the original single-page stylesheet.
   Below: styles needed once the site is split into separate pages
   (active nav state, mobile menu, page headers, CTA band).
   ===================================================================== */

/* active nav link */
.nav-links a.is-active{color:var(--accent);}
.nav-links a.is-active .idx{color:var(--accent); opacity:.7;}

/* mobile menu toggle (hidden on desktop) */
.nav-toggle{
  display:none; width:44px; height:44px; padding:0; flex:none; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink);
  align-items:center; justify-content:center; border-radius:2px;
}
.nav-toggle:hover{border-color:var(--ink);}
.nav-toggle .bar{display:block; width:18px; height:1.5px; background:currentColor; position:relative;}
.nav-toggle .bar::before,.nav-toggle .bar::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:currentColor;
}
.nav-toggle .bar::before{top:-6px;}
.nav-toggle .bar::after{top:6px;}

/* page header band for interior pages */
.page-head{
  background:var(--panel); color:var(--panel-ink);
  padding:56px clamp(24px,6vw,100px) 52px;
}
.page-head > div{max-width:1280px; margin:0 auto;}
.crumbs{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted-on-panel); margin-bottom:16px;
}
.crumbs a{text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs span{opacity:.5; margin:0 8px;}
.page-head h1{
  font-family:var(--aui-display); font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.1; color:var(--panel-ink);
}
.page-head .lede{color:var(--muted-on-panel); margin-top:16px;}
.page-head .sec-index{color:var(--muted-on-panel);}
/* the page header already carries the section title, so the section below it
   starts tighter than a standalone section would */
.page-head + .section{padding-top:56px;}

/* CTA band reused at the foot of interior pages */
.cta-band{
  background:var(--accent); color:#fff;
  padding:52px clamp(24px,6vw,100px);
}
.cta-inner{
  max-width:1280px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band h2{
  font-family:var(--aui-display); font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.15;
}
.cta-band p{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase; opacity:.85; margin-top:10px;}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap;}
.cta-band .btn-outline{color:#fff; border-color:rgba(255,255,255,.7);}
.cta-band .btn-outline:hover{background:#fff; color:var(--accent);}
.cta-band .btn-solid{background:#fff; color:var(--accent); border-color:#fff;}
.cta-band .btn-solid:hover{background:var(--ink); border-color:var(--ink); color:#fff;}

/* home page: quick index of the inner pages */
.home-index{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.home-index a{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:28px 26px; text-decoration:none; display:block; background:transparent;
}
.home-index a:hover{background:var(--surface);}
.home-index .n{font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.04em;}
.home-index h3{font-family:var(--aui-display); font-size:17px; font-weight:700; margin:10px 0 6px;}
.home-index p{font-size:13.5px; line-height:1.6; color:var(--muted);}

/* fallback notice shown when partials cannot be fetched (file:// preview) */
.include-warning{
  background:#181614; color:#FAF8F3; font-family:var(--mono); font-size:12.5px;
  line-height:1.7; padding:14px clamp(24px,6vw,100px); border-bottom:2px solid var(--accent);
}
.include-warning code{background:rgba(255,86,0,.18); color:#fff; padding:2px 6px;}

@media (max-width: 900px){
  .nav-toggle{display:inline-flex; order:3;}
  .nav-bar{flex-wrap:wrap; gap:12px;}
  .nav-cta{order:2; margin-left:auto;}
  .nav-links.is-open{
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    width:100%; order:4; border-top:1px solid var(--line); margin-top:12px; padding-top:6px;
  }
  .nav-links.is-open a{padding:13px 0; width:100%; border-bottom:1px solid var(--line);}
  .nav-links.is-open a:last-child{border-bottom:none;}
  .nav-cta .btn-accent{padding:13px 16px; font-size:12px;}
  .home-index{grid-template-columns:1fr;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
}