/* ============================================================
   GT Development Corporation — Quiet Premium
   Built on the North Pointe bold-trade template base,
   re-skinned for a premium design-build positioning (file 04):
   editorial serif display, warm neutrals, ONE accent (brand red
   sampled from the real logo file: #D40101), slanted-edge CTA band
   echoing the italic GT mark as the single bold move.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..500;1,9..144,300..500&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:#FBFAF7;
  --stone:#F1EDE6;
  --ink:#161616;
  --ink-soft:#5A5650;
  --ink-faint:#6B675F;
  --char:#121212;
  --red:#D40101;
  --red-dk:#A80101;
  --line:rgba(22,22,22,0.12);
  --line-dk:rgba(255,255,255,0.18);

  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max:1240px;
  --header-h:80px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h);}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); line-height:1.65; font-size:1rem;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--red); outline-offset:3px;}
.skip{
  position:absolute; left:-999px; top:8px; z-index:200;
  background:var(--ink); color:var(--paper); padding:10px 16px; text-decoration:none;
}
.skip:focus{left:8px;}

/* Scroll reveal: only hidden when JS is running and motion is allowed */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease;}
  .js .reveal.in{opacity:1; transform:none;}
}

h1,h2,h3{
  font-family:var(--display); font-weight:300; color:var(--ink);
  margin:0 0 .45em; letter-spacing:-0.015em; line-height:1.08;
}
h1{font-size:clamp(2.7rem,6vw,5.2rem); letter-spacing:-0.025em; line-height:1.02;}
h2{font-size:clamp(2rem,3.6vw,3.1rem);}
h3{font-size:1.35rem; font-weight:400;}
em{font-style:italic; font-weight:300;}
p{margin:0 0 1.1em;}

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--body); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--red);
  margin:0 0 1.2em;
}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor;}
.eyebrow--light{color:#fff;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 36px;}
.section{padding:120px 0;}
.section--tint{background:var(--stone);}
.section--dark{background:var(--char); color:#E9E5DD;}
.section--dark h2, .section--dark h3{color:#fff;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:18px 32px; border:1px solid transparent; cursor:pointer; border-radius:0;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--primary{background:var(--red); color:#fff; border-color:var(--red);}
.btn--primary:hover{background:var(--red-dk); border-color:var(--red-dk);}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.7);}
.btn--ghost:hover{background:#fff; color:var(--ink);}
.btn--ghost-ink{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn--ghost-ink:hover{background:var(--ink); color:#fff;}
.text-link{
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid var(--red); padding-bottom:4px;
}
.text-link:hover{color:var(--red);}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,247,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.06);}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:var(--header-h);
}
.brand{display:flex; align-items:center; text-decoration:none;}
.brand-logo{height:64px; width:auto;}
nav.primary-nav{display:flex; align-items:center; gap:40px;}
nav.primary-nav a{
  text-decoration:none; font-size:.76rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); padding:6px 0;
  border-bottom:1px solid transparent;
}
nav.primary-nav a:hover, nav.primary-nav a.active{color:var(--ink); border-bottom-color:var(--red);}
.header-cta{
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:#fff; background:var(--red); padding:14px 26px;
  border:1px solid var(--red); white-space:nowrap;
  transition:background .25s ease;
}
.header-cta:hover{background:var(--red-dk); border-color:var(--red-dk);}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:calc(94vh - 72px); display:flex; align-items:flex-end; overflow:hidden;
  background:#0d0d0d url('assets/hero/hero-poster.jpg') center 40%/cover no-repeat;
  color:#fff;
}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(8,8,8,.74) 0%, rgba(8,8,8,.40) 52%, rgba(8,8,8,.10) 100%),
    linear-gradient(180deg, rgba(8,8,8,0) 55%, rgba(8,8,8,.55) 100%);
}
.hero-inner{position:relative; z-index:2; width:100%; padding-top:150px; padding-bottom:96px;}
.rule-accent{
  display:block; width:58px; height:6px; background:var(--red); margin-bottom:26px;
  clip-path:polygon(14% 0,100% 0,86% 100%,0 100%);
}
.hero h1{color:#fff; max-width:15ch;}
.hero .lede{color:#EDEAE4; max-width:50ch; font-size:1.15rem; line-height:1.7;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px;}

.discipline-bar{background:var(--char); color:#CFCAC1;}
.discipline-bar .wrap{
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px 44px;
  padding-top:22px; padding-bottom:22px;
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.discipline-bar span{display:inline-flex; align-items:center; gap:44px;}
.discipline-bar span:not(:last-child)::after{
  content:""; width:5px; height:5px; background:var(--red); transform:rotate(45deg);
}

/* ---------- Page banner (interior pages) ---------- */
.page-banner{
  position:relative; min-height:52vh; display:flex; align-items:flex-end; overflow:hidden;
  background:#111; color:#fff;
}
.page-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%; z-index:0;}
.page-banner::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(8,8,8,.25) 0%, rgba(8,8,8,.82) 100%);
}
.page-banner .wrap{position:relative; z-index:2; width:100%; padding-top:130px; padding-bottom:64px;}
.page-banner h1{color:#fff; font-size:clamp(2.4rem,5vw,4.2rem); max-width:18ch;}
.page-banner .lede{color:#EDEAE4; max-width:52ch; font-size:1.1rem; margin:0;}

/* ---------- Intro statement ---------- */
.intro-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:80px; align-items:start;}
.statement{
  font-family:var(--display); font-weight:300; font-size:clamp(1.55rem,2.7vw,2.35rem);
  line-height:1.32; letter-spacing:-0.012em; margin:0;
}
.intro-aside{color:var(--ink-soft); font-size:1.02rem; padding-top:10px; border-top:1px solid var(--line);}
.intro-aside p:last-child{margin:0;}

/* ---------- Section head ---------- */
.section-head{display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:52px;}
.section-head h2{margin:0;}

/* ---------- Feature work grid (home) ---------- */
.work-feature{
  display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:repeat(2, minmax(300px, 1fr));
  gap:22px; min-height:680px;
}
.work-card{
  position:relative; display:block; overflow:hidden; background:var(--stone); color:#fff;
  text-decoration:none;
}
.work-card--lead{grid-row:span 2;}
.work-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%;
  transition:transform 1.1s ease;
}
.work-card:hover img{transform:scale(1.04);}
.work-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,8,0) 45%, rgba(8,8,8,.78) 100%);
}
.work-card .cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:28px 30px;}
.work-card .cap .eyebrow{margin-bottom:.5em;}
.cap-title{display:block; font-family:var(--display); font-weight:300; font-size:1.5rem; line-height:1.2;}

/* ---------- Capabilities (dark) ---------- */
.cap-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:44px; margin-top:56px;}
.cap-item{border-top:1px solid var(--line-dk); padding-top:26px; position:relative;}
.cap-item::before{content:""; position:absolute; top:-1px; left:0; width:44px; height:2px; background:var(--red);}
.cap-item .num{font-family:var(--display); font-weight:300; font-size:1rem; color:#A9A39A; display:block; margin-bottom:22px; letter-spacing:.1em;}
.cap-item h3{color:#fff; font-size:1.5rem;}
.cap-item p{color:#B5AFA5; font-size:.98rem; margin:0;}

/* ---------- Process ---------- */
.process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:56px; margin-top:56px;}
.process-item{border-top:1px solid var(--ink); padding-top:26px;}
.process-item .num{font-family:var(--display); font-weight:300; font-size:3rem; line-height:1; color:var(--ink); display:block; margin-bottom:18px;}
.process-item p{color:var(--ink-soft); margin:0; max-width:34ch;}

/* ---------- People ---------- */
.people-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px;}
.people-tile figure{margin:0;}
.people-tile .frame{aspect-ratio:4/3; overflow:hidden; background:var(--stone);}
.people-tile img{width:100%; height:100%; object-fit:cover; object-position:50% 35%;}
.people-tile figcaption{margin-top:14px; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}

/* ---------- Split rows (services) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:84px; align-items:center; margin-bottom:110px;}
.split:last-child{margin-bottom:0;}
.split .frame{aspect-ratio:4/3; overflow:hidden; background:var(--stone);}
.split .frame img{width:100%; height:100%; object-fit:cover; object-position:50% 25%;}
.split--reverse .frame{order:2;}
.split .idx{font-family:var(--display); font-weight:300; color:var(--ink-faint); font-size:1rem; letter-spacing:.1em; display:block; margin-bottom:18px;}
.split ul{list-style:none; margin:1.4em 0 0; padding:0; border-top:1px solid var(--line);}
.split li{padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.98rem;}
.split li::before{content:""; display:inline-block; width:5px; height:5px; background:var(--red); transform:rotate(45deg); margin-right:14px; vertical-align:middle;}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line); margin-top:40px; max-width:860px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:26px 0; font-family:var(--display); font-weight:400; font-size:1.3rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--body); font-weight:300; font-size:1.6rem; color:var(--red); flex:none;}
.faq-item[open] summary::after{content:"\2013";}
.faq-item p{color:var(--ink-soft); padding-bottom:26px; margin:0; max-width:62ch;}

/* ---------- CTA band: the one bold move, slanted edge echoes the GT mark ---------- */
.cta-band{
  background:var(--char); color:#fff; text-align:center; padding:120px 0;
  clip-path:polygon(0 4%, 100% 0, 100% 96%, 0 100%); margin:-1px 0;
}
.cta-band h2{color:#fff; max-width:20ch; margin:0 auto .4em;}
.cta-band p{color:#BDB7AD; max-width:46ch; margin:0 auto;}
.cta-actions{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap;}

/* ---------- Footer ---------- */
.site-footer{background:var(--stone); color:var(--ink-soft); padding:84px 0 34px; border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:48px;}
.footer-logo{height:72px; width:auto; margin-bottom:18px;}
.footer-grid h3{
  font-family:var(--body); font-size:.72rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); margin-bottom:18px;
}
.footer-grid p{font-size:.96rem; max-width:36ch;}
.footer-grid a{display:block; text-decoration:none; font-size:.96rem; margin-bottom:10px; color:var(--ink-soft);}
.footer-grid a:hover{color:var(--red);}
.footer-bottom{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- Gallery ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px;}
.chip{
  font-family:var(--body); font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:transparent; color:var(--ink); border:1px solid var(--line); padding:12px 22px; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover{border-color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; grid-auto-flow:dense;}
.g-item{margin:0; position:relative;}
.g-item[hidden]{display:none;}
.g-item.wide{grid-column:span 2;}
.g-open{
  display:block; position:relative; width:100%; padding:0; border:0; background:var(--stone);
  aspect-ratio:4/3; overflow:hidden; cursor:zoom-in; color:#fff; text-align:left; font:inherit;
}
.g-item.wide .g-open{aspect-ratio:16/9;}
.g-open img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%;
  transition:transform 1.1s ease;
}
.g-open:hover img{transform:scale(1.04);}
.g-open::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,8,0) 50%, rgba(8,8,8,.78) 100%);
}
.g-cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 24px; font-family:var(--display); font-weight:300; font-size:1.2rem; line-height:1.25;}
.g-cap .eyebrow{display:flex; margin-bottom:.4em; font-size:.66rem;}
.tag{
  position:absolute; top:16px; left:16px; z-index:3; background:var(--paper); color:var(--ink);
  font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:7px 12px;
}
.gallery-note{color:var(--ink-soft); max-width:62ch; margin:0 0 40px;}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(10,10,10,.94);
  display:flex; align-items:center; justify-content:center; padding:56px 72px;
}
.lightbox[hidden]{display:none;}
.lightbox figure{margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:16px;}
.lightbox img{max-width:100%; max-height:78vh; object-fit:contain;}
.lightbox figcaption{color:#D8D3CA; font-size:.9rem; letter-spacing:.06em;}
.lb-close, .lb-nav{
  position:absolute; background:none; border:1px solid var(--line-dk); color:#fff; cursor:pointer;
  width:48px; height:48px; font-size:1.6rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.lb-close:hover, .lb-nav:hover{background:#fff; color:var(--ink);}
.lb-close{top:20px; right:20px;}
.lb-prev{left:16px; top:50%; transform:translateY(-50%);}
.lb-next{right:16px; top:50%; transform:translateY(-50%);}
body.lb-open{overflow:hidden;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:84px; align-items:start;}
.field{margin-bottom:22px;}
.field label{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:9px;
}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--body); font-size:1rem; padding:15px 16px;
  border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:0;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--red); outline-offset:0; border-color:var(--red);}
.field textarea{resize:vertical; min-height:150px;}
.form-note{font-size:.86rem; color:var(--ink-faint); margin:16px 0 0;}
.contact-info .row{padding:22px 0; border-top:1px solid var(--line);}
.contact-info .row:first-child{border-top:0; padding-top:0;}
.contact-info .k{display:block; font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:8px;}
.contact-info a{text-decoration:none; border-bottom:1px solid var(--line);}
.contact-info a:hover{border-bottom-color:var(--red);}
.map-box{margin-top:30px; height:260px; border:1px solid var(--line); overflow:hidden; background:var(--stone);}
.map-box iframe{width:100%; height:100%; border:0; display:block;}

/* ---------- Social links ---------- */
.social{display:inline-flex; align-items:center; gap:12px;}
.social img{width:22px; height:22px; object-fit:contain; flex:none;}
.footer-grid a.social{display:flex; margin-bottom:12px;}
.contact-info a.social{border-bottom:0;}
.social:hover span{color:var(--red);}
.social-row{display:flex; gap:30px; flex-wrap:wrap;}
.social-row .social img{width:24px; height:24px;}

/* ---------- Mobile nav ---------- */
.mobile-menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  width:44px; height:44px; border:none; background:none; cursor:pointer; padding:0; flex:none;
}
.mobile-menu-toggle .bar{display:block; width:24px; height:1.5px; background:var(--ink); transition:transform .25s ease, opacity .25s ease;}
body.nav-open .mobile-menu-toggle .bar:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
body.nav-open .mobile-menu-toggle .bar:nth-child(2){opacity:0;}
body.nav-open .mobile-menu-toggle .bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
body.nav-open{overflow:hidden;}
.mobile-nav-panel{
  position:fixed; inset:0; z-index:100; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:transform .3s ease, opacity .3s ease, visibility .3s;
}
body.nav-open .mobile-nav-panel{transform:none; opacity:1; visibility:visible;}
.mobile-nav-panel nav{display:flex; flex-direction:column; align-items:center; gap:26px;}
.mobile-nav-panel nav a{font-family:var(--display); font-weight:300; font-size:2rem; text-decoration:none; color:var(--ink);}
.mobile-nav-panel nav a.active{color:var(--red);}

/* CASCADE-ORDER WARNING (carried forward from the template): the responsive
   overrides below MUST stay physically after the base .mobile-menu-toggle /
   .mobile-nav-panel rules above. Equal-specificity rules resolve by source
   order, not by whether one sits inside a media query. */
/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .cap-grid{grid-template-columns:repeat(2,1fr);}
  .intro-grid{grid-template-columns:1fr; gap:40px;}
  .split{gap:48px;}
}
@media (max-width:900px){
  .section{padding:84px 0;}
  .wrap{padding:0 24px;}
  nav.primary-nav, .header-cta{display:none;}
  .mobile-menu-toggle{display:flex;}
  .work-feature{grid-template-columns:1fr; grid-template-rows:none; min-height:0;}
  .work-card{aspect-ratio:4/3;}
  .work-card--lead{grid-row:auto;}
  .process-grid, .people-grid{grid-template-columns:1fr; gap:40px;}
  .people-grid{gap:28px;}
  .split, .contact-grid{grid-template-columns:1fr; gap:36px;}
  .split--reverse .frame{order:0;}
  .split{margin-bottom:72px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr; gap:32px;}
  .section-head{flex-direction:column; align-items:flex-start;}
  .lightbox{padding:64px 16px 24px;}
  .lb-prev{left:8px;} .lb-next{right:8px;}
  .cta-band{padding:96px 0;}
}
@media (max-width:560px){
  .cap-grid{grid-template-columns:1fr; gap:36px;}
  .gallery-grid{grid-template-columns:1fr;}
  .g-item.wide{grid-column:auto;}
  .g-item.wide .g-open{aspect-ratio:4/3;}
  .discipline-bar span{gap:20px;}
  .discipline-bar .wrap{gap:12px 20px;}
  .hero{min-height:calc(88vh - 72px);}
  .hero-inner{padding-top:120px; padding-bottom:64px;}
  .btn{width:100%;}
}
@media (min-width:901px){
  .mobile-nav-panel{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .hero video{display:none;}
  html{scroll-behavior:auto;}
}