/* VREAL Architectural Services | forked from quiet-luxury-v1 | accent = logo red */

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

:root{
  --paper:    #FFFFFF;
  --tint:     #F4F0E8;
  --ink:      #1C1F1E;
  --ink-soft: #4F5553;
  --ink-faint:#6A6F6C;
  --accent:     #AF1311;
  --accent-dk:  #7E0E0D;
  --accent-tint:#F7E9E8;
  --line:     rgba(28,31,30,0.12);
  --line-dark:rgba(255,255,255,0.20);

  --display: 'Fraunces', serif;
  --body:    'Inter', sans-serif;

  --max: 1180px;
}

@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
em{font-style:italic; color:var(--accent);}
.hero-media em, .img-banner em, .cta-band em{color:inherit;}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  margin:0 0 0.4em;
  color:var(--ink);
  letter-spacing:-0.01em;
  line-height:1.1;
}
h1{font-size:clamp(2.4rem,5.2vw,3.8rem); font-weight:500;}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:500;}
h3{font-size:1.2rem; font-weight:600; font-family:var(--body);}
p{margin:0 0 1em;}

.eyebrow{
  font-family:var(--body);
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:inline-block;
  margin-bottom:0.9em;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
.section{padding:96px 0;}
.section--tight{padding:56px 0;}
.section--tint{background:var(--tint);}

/* ---------- Hairline rule (signature divider, replaces prior motifs) ---------- */
.rule{border:none; border-top:1px solid var(--line); max-width:var(--max); margin:0 auto;}
.rule-wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
.rule-wrap .rule{margin:0;}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; padding-bottom:20px;
}
.brand{
  display:flex; align-items:center;
  text-decoration:none; color:var(--ink);
}
.brand-logo{
  height:40px; width:auto; display:block;
}
nav.primary-nav{display:flex; align-items:center; gap:32px;}
nav.primary-nav a{
  text-decoration:none; font-weight:500; font-size:0.94rem; color:var(--ink-soft);
  padding:4px 2px; border-bottom:1.5px solid transparent;
}
nav.primary-nav a:hover, nav.primary-nav a.active{color:var(--ink); border-bottom-color:var(--accent);}
.header-cta{
  font-family:var(--body); font-size:0.88rem; font-weight:600;
  color:var(--paper); text-decoration:none;
  background:var(--accent); padding:11px 22px; border-radius:100px;
  white-space:nowrap; border:1.5px solid var(--accent);
}
.header-cta:hover{background:var(--accent-dk); border-color:var(--accent-dk);}

/* ---------- Full-bleed media hero ---------- */
.hero-media{
  position:relative;
  min-height:92vh;
  display:flex; align-items:flex-end;
  background:linear-gradient(150deg,#0E0F0E 0%,#20221F 100%);
  overflow:hidden;
  color:var(--paper);
}
.hero-media video, .hero-media .fallback-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero-media::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,12,11,0.10) 0%, rgba(10,12,11,0.30) 60%, rgba(10,12,11,0.72) 100%);
}
.hero-media .wrap{position:relative; z-index:2; padding-bottom:64px; padding-top:140px; width:100%;}
.hero-media .rule-accent{width:56px; height:2px; background:var(--paper); opacity:0.7; margin-bottom:18px;}
.hero-media h1{color:var(--paper); max-width:16ch; font-size:clamp(2.6rem,6vw,4.6rem);}
.hero-media .eyebrow{color:#D8D4C8;}
.hero-media .lede{color:#E7E5DD; max-width:46ch; font-size:1.15rem;}

.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:0.98rem;
  padding:15px 28px; text-decoration:none; border:1.5px solid transparent;
  cursor:pointer; border-radius:100px;
}
.btn--primary{background:var(--accent); color:var(--paper); border-color:var(--accent);}
.btn--primary:hover{background:var(--accent-dk); border-color:var(--accent-dk);}
.btn--ghost{border-color:var(--paper); color:var(--paper); background:transparent;}
.btn--ghost:hover{background:var(--paper); color:var(--ink);}
.btn--ghost-ink{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn--ghost-ink:hover{background:var(--ink); color:var(--paper);}

/* Credential strip under hero (McComsey-style dark band) */
.credential-bar{background:var(--ink); color:#C7CBC9;}
.credential-bar .wrap{
  display:flex; justify-content:center; gap:40px; flex-wrap:wrap;
  padding:20px 32px; font-family:var(--display); font-style:italic; font-size:1.02rem;
}
.credential-bar .dot{color:rgba(255,255,255,0.35); font-style:normal;}

/* ---------- Image banner (interior pages) ---------- */
.img-banner{
  position:relative; min-height:44vh;
  display:flex; align-items:flex-end;
  background:#181A18;
  color:var(--paper); overflow:hidden;
}
.img-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.img-banner::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,12,11,0.15) 0%, rgba(10,12,11,0.82) 100%);
}
.img-banner .wrap{position:relative; z-index:2; padding:120px 32px 44px;}
.img-banner h1{color:var(--paper);}
.img-banner .lede{color:#E7E5DD; font-size:1.08rem;}
.img-banner .eyebrow{color:#D8D4C8;}

/* ---------- Section heading row ---------- */
.head-row{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:end; margin-bottom:48px;}
.head-row p{color:var(--ink-soft); font-size:1.05rem; margin:0;}

/* ---------- Photo service cards (replaces icon tiles) ---------- */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.tile{
  position:relative; overflow:hidden; border-radius:2px;
  aspect-ratio:4/5; background:var(--tint);
}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.7s ease;}
.tile:hover img{transform:scale(1.04);}
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,12,11,0) 40%, rgba(10,12,11,0.82) 100%);
}
.tile .cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 24px 24px;}
.tile .cap h3{color:var(--paper); margin-bottom:0.3em; font-family:var(--display); font-weight:600; font-size:1.3rem;}
.tile .cap p{color:#DCDAD3; font-size:0.9rem; margin:0;}

/* Simple text-only tiles (used on services.html detail grid) */
.tiles--plain{grid-template-columns:1fr 1fr;}
.tile--plain{
  aspect-ratio:auto; background:transparent; border-top:1px solid var(--line);
  padding:32px 0 8px;
}
.tile--plain::after{display:none;}
.tile--plain .cap{position:static; padding:0;}
.tile--plain .cap h3{color:var(--ink); font-size:1.25rem;}
.tile--plain .cap p{color:var(--ink-soft); font-size:0.98rem;}
.tile--plain .tile-index{font-family:var(--display); font-style:italic; color:var(--accent); font-size:1rem; display:block; margin-bottom:10px;}

/* ---------- Two column trust block ---------- */
.trust-grid{display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:center;}
.trust-grid .stat-row{display:flex; gap:44px; margin-top:28px;}
.stat .num{font-family:var(--display); font-style:italic; font-weight:600; font-size:2.2rem; color:var(--accent); display:block; line-height:1;}
.stat .label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); font-weight:600;}
.trust-portrait{position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px;}
.trust-portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* ---------- Process ---------- */
.process-list{display:flex; flex-direction:column;}
.process-item{
  display:grid; grid-template-columns:110px 1fr; gap:28px;
  padding:32px 0; border-top:1px solid var(--line);
}
.process-item:last-child{border-bottom:1px solid var(--line);}
.process-item .step-tag{font-family:var(--display); font-style:italic; color:var(--accent); font-size:1.3rem; padding-top:2px;}
.process-item h3{margin-bottom:0.3em;}
.process-item p{color:var(--ink-soft); margin:0; max-width:60ch;}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.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:20px;
  padding:24px 0; font-weight:600; font-size:1.08rem; font-family:var(--display);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--body); font-weight:400; color:var(--accent); font-size:1.5rem; flex:none;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{color:var(--ink-soft); padding-bottom:24px; margin:0; max-width:66ch;}

/* ---------- CTA band (single accent punctuation, McComsey-style dark strip) ---------- */
.cta-band{
  background:var(--accent); color:var(--paper);
  padding:80px 0; text-align:center;
}
.cta-band h2{color:var(--paper); max-width:20ch; margin:0 auto 0.4em; font-style:italic;}
.cta-band .eyebrow{color:#F3D9D7;}
.cta-band .btn--primary{background:var(--paper); color:var(--accent); border-color:var(--paper);}
.cta-band .btn--primary:hover{background:var(--accent-tint);}
.cta-band .btn--ghost{border-color:var(--paper); color:var(--paper);}
.cta-actions{display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap;}

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--ink); color:#B9BDBA;
  padding:56px 0 30px;
}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.footer-brand h3{margin:0;}
.footer-logo{height:30px; width:auto; display:block;}
.footer-grid h3{color:var(--paper); font-size:0.8rem; font-family:var(--body); font-weight:600; text-transform:uppercase; letter-spacing:0.1em;}
.footer-grid a{display:block; color:#A6ABA8; text-decoration:none; font-size:0.94rem; margin-bottom:9px;}
.footer-grid a:hover{color:var(--paper);}
.footer-bottom{
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.12);
  font-size:0.8rem; color:#787D7A;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.gallery-card{
  position:relative; background:var(--ink); border-radius:2px;
  aspect-ratio:4/5; overflow:hidden;
}
.gallery-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 0.7s ease;
}
.gallery-card:hover img{transform:scale(1.04);}
.gallery-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,12,11,0) 45%, rgba(10,12,11,0.85) 100%);
}
.gallery-card .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px 22px 22px;
}
.gallery-card .cap .eyebrow{color:#D8D4C8; margin-bottom:0.3em;}
.gallery-card .cap p{margin:0; font-size:0.92rem; color:#EDEBE4; font-family:var(--display);}
.gallery-note{
  border:1px solid var(--line); background:var(--tint); border-radius:2px;
  padding:20px 22px; font-size:0.94rem; color:var(--ink-soft); margin-bottom:40px;
}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.contact-card{background:var(--tint); border:1px solid var(--line); padding:36px; border-radius:2px;}
.field{margin-bottom:20px;}
.field label{
  display:block; font-size:0.76rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--body); font-size:0.98rem;
  padding:12px 14px; border:1px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:2px;
}
.field textarea{resize:vertical; min-height:110px;}
.contact-info .row{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line);}
.contact-info .row:first-child{border-top:none;}
.contact-info .k{font-size:0.76rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); width:120px; flex:none; padding-top:2px;}
.map-box{
  margin-top:28px; height:220px; border:1px solid var(--line); border-radius:2px; overflow:hidden;
  background:var(--tint);
  display:flex; align-items:center; justify-content:center;
  font-size:0.82rem; color:var(--ink-faint); text-align:center; padding:20px;
}

/* ---------- Mobile nav ---------- */
.mobile-menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px; border:none; background:none; cursor:pointer; padding:0; flex:none;
}
.mobile-menu-toggle .bar{
  display:block; width:22px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform 0.25s ease, opacity 0.25s ease;
}
body.nav-open .mobile-menu-toggle .bar:nth-child(1){transform:translateY(7px) 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(-7px) 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:30px;
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}
body.nav-open .mobile-nav-panel{
  transform:translateY(0); opacity:1; visibility:visible;
}
.mobile-nav-panel nav{display:flex; flex-direction:column; align-items:center; gap:24px;}
.mobile-nav-panel nav a{
  font-family:var(--display); font-weight:500; font-size:1.7rem; text-decoration:none; color:var(--ink);
}
.mobile-nav-panel nav a.active{color:var(--accent); font-style:italic;}

/* CASCADE-ORDER WARNING (learned the hard way on the Haus of Solace build,
   7/30/2026): the responsive overrides below MUST stay physically after
   the base .mobile-menu-toggle/.mobile-nav-panel rules above. CSS rules of
   EQUAL specificity resolve by source order, not by whether one sits inside
   a media query — a later unconditional rule silently beats an earlier
   conditional one even when the media query matches. Putting the base
   display:none rule after the @media override (as first written) meant the
   "show it on mobile" rule never won at any screen width, and the hamburger
   was invisible on every real phone despite the media query being 100%
   correct. If you ever refactor this file, keep base-rules-then-breakpoints
   as the order, always. */
/* ---------- Responsive ---------- */
@media (max-width:880px){
  .trust-grid, .contact-grid, .head-row{grid-template-columns:1fr;}
  .tiles{grid-template-columns:repeat(2,1fr);}
  .tiles--plain{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr; gap:24px;}
  .credential-bar .wrap{gap:20px; font-size:0.88rem;}
  nav.primary-nav{display:none;}
  .mobile-menu-toggle{display:flex;}
}
@media (min-width:881px){
  .mobile-nav-panel{display:none;}
}
@media (max-width:520px){
  .tiles{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr;}
  .process-item{grid-template-columns:1fr;}
}


/* ============================================================
   VREAL additions
   ============================================================ */

/* ---------- Intro (BIG-style: cream screen, logo slides to header while the screen lifts) ---------- */
.intro, .intro-mark{display:none;}
.intro-pending body{overflow:hidden;}
.intro-pending .brand-logo{visibility:hidden;}
.intro-pending .intro{
  display:block; position:fixed; inset:0; z-index:200;
  background:var(--tint); overflow:hidden;
  transition:transform 0.95s cubic-bezier(.76,0,.24,1);
}
.intro-pending .intro.lift{transform:translateY(-100%);}
.intro-pending .intro-mark{
  display:block; position:fixed; left:50%; top:50%; z-index:210;
  height:clamp(120px,26vh,220px); width:auto;
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity 0.6s ease;
}
.intro-pending .intro-mark.show{opacity:1;}
.intro-pending .intro-mark.fly{transition:transform 0.95s cubic-bezier(.76,0,.24,1);}

/* ---------- Project films (vertical video cards) ---------- */
.film-grid{display:grid; grid-template-columns:repeat(2,minmax(0,380px)); gap:40px; justify-content:center;}
.film{margin:0;}
.film-frame{
  position:relative; aspect-ratio:2/3; background:#000; overflow:hidden; border-radius:2px;
}
.film-frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000;}
.film-play{
  position:absolute; left:50%; bottom:9%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:var(--paper); border:1.5px solid var(--accent);
  font-family:var(--body); font-weight:600; font-size:0.92rem;
  padding:12px 22px; border-radius:100px; cursor:pointer;
}
.film-play:hover{background:var(--accent-dk); border-color:var(--accent-dk);}
.film-play svg{width:14px; height:14px; fill:currentColor;}
.film.playing .film-play{display:none;}
.film figcaption{padding-top:16px;}
.film figcaption .eyebrow{margin-bottom:0.3em;}
.film figcaption h3{font-family:var(--display); font-weight:600; font-size:1.25rem; margin:0;}

.gallery-note strong{color:var(--ink);}

/* footer social */
.footer-social{display:flex; gap:12px; margin-top:18px;}
.footer-grid .footer-social a{display:inline-block; margin:0; line-height:0;}
.footer-social img{width:32px; height:32px; border-radius:50%; transition:opacity 0.2s ease;}
.footer-social a:hover img{opacity:0.8;}

/* four-up service tiles (class, not inline style, so the responsive rules below still win) */
.tiles--four{grid-template-columns:repeat(4,1fr);}
@media (max-width:880px){.tiles--four{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){
  .tiles--four{grid-template-columns:1fr;}
  .contact-info .row{flex-direction:column; gap:4px;}
  .contact-info .k{width:auto;}
}

/* keep long emails and form fields from widening the mobile layout */
.contact-grid > *{min-width:0;}
.contact-info .row > span:last-child, .footer-grid a{overflow-wrap:anywhere;}
.field input, .field select, .field textarea{max-width:100%;}

@media (max-width:880px){
  .film-grid{grid-template-columns:minmax(0,380px); gap:36px;}
}