/* ── TM Designs Ltd — shared site styles (externalized for Core Web Vitals) ── */

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.editorial-shadow { box-shadow: 0 20px 40px rgba(0,0,0,0.04); }

/* ── Fixed architectural background ── */
body::before {
  content:''; position:fixed; inset:0; z-index:-1;
  background:url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&q=35&auto=format&fit=crop') center/cover no-repeat;
  filter:brightness(0.15) saturate(0.5);
}
section { background-color:rgba(252,249,245,0.96) !important; }
section.bg-surface-container-low { background-color:rgba(246,243,239,0.97) !important; }
section.bg-inverse-surface { background-color:rgba(49,48,46,0.97) !important; }
footer { background-color:rgba(246,243,239,0.98) !important; }
nav { background-color:rgba(252,249,245,0.88) !important; }

/* Eyebrow */
.eyebrow-line { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:#b89650; margin-bottom:1.5rem; display:flex; align-items:center; gap:10px; }
.eyebrow-line::before { content:''; display:block; width:28px; height:0.5px; background:#b89650; }

/* ══ HOME (index) ══ */
.hero-split { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; padding-top:80px; }
@media (max-width:768px){
  .hero-split { grid-template-columns:1fr; }
  .hero-split-right { height:60vw; min-height:260px; order:-1; }
}
.hero-split-left { padding:8vh 5vw 6vh 5vw; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; background:rgba(252,249,245,0.97); }
.hero-split-right { position:relative; overflow:hidden; background:#1c1c1a; }
.hero-h1 { font-size:clamp(2.4rem,4.5vw,5rem); line-height:1.05; letter-spacing:-0.02em; }
.hero-h1 em { color:#b89650; font-style:italic; }
.hero-sub { font-size:16px; max-width:420px; line-height:1.7; }

.cycle-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.2s ease; animation:kenBurns 8s ease-in-out infinite alternate; }
.cycle-slide.active { opacity:1; }
@keyframes kenBurns { from{transform:scale(1.18);} to{transform:scale(1.0);} }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,26,24,0.45) 0%,rgba(26,26,24,0.18) 100%); z-index:1; }
.hero-badge { position:absolute; bottom:8%; left:50%; transform:translateX(-50%); background:rgba(247,245,239,0.1); border:0.5px solid rgba(247,245,239,0.3); color:#fff; padding:1.2rem 1.8rem; text-align:center; backdrop-filter:blur(10px); min-width:200px; z-index:3; }
.hero-badge-number { font-family:'Noto Serif',serif; font-size:2.2rem; font-weight:700; color:#e7c177; display:block; line-height:1; }
.hero-badge-text { font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:rgba(247,245,239,0.65); margin-top:4px; }

.hero-stats-row { display:flex; gap:1.5rem; padding-top:2rem; border-top:1px solid rgba(26,26,24,0.1); margin-top:2.5rem; flex-wrap:wrap; }
.stat-num { font-family:'Noto Serif',serif; font-size:1.8rem; font-weight:700; color:#b89650; line-height:1; }
.stat-lbl { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#7f7667; margin-top:4px; }

.marquee-strip { background:#1c1c1a; color:#f7f5ef; padding:13px 0; overflow:hidden; white-space:nowrap; }
.marquee-inner { display:inline-flex; animation:marquee 32s linear infinite; }
.marquee-inner span { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; padding:0 2.5rem; color:rgba(247,245,239,0.45); }
.marquee-inner .mdot { color:#e7c177; padding:0 0.5rem; }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

.reviews-track { position:relative; min-height:260px; }
.review-card { display:none; }
.review-card.active { display:block; animation:reviewFade 0.5s ease; }
@keyframes reviewFade { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
.review-card-inner { max-width:680px; margin:0 auto; text-align:center; padding:3rem 2.5rem; }
.review-quote { font-family:'Noto Serif',serif; font-size:4rem; line-height:0.6; color:#b89650; opacity:0.35; display:block; margin-bottom:1rem; }
.review-stars { color:#b89650; font-size:18px; letter-spacing:3px; display:block; margin-bottom:1.25rem; }
@media (max-width:767px){ .review-card-inner { padding:2rem 1.25rem; } .review-quote { font-size:2.5rem; } }

@media (max-width:767px){
  .mobile-3col { grid-template-columns:repeat(3,1fr) !important; gap:0.5rem !important; }
  .mobile-3col .card-inner { padding:0.5rem !important; }
  .pricing-mobile-3col { grid-template-columns:repeat(3,1fr) !important; gap:0.4rem !important; }
}

.step-card { cursor:pointer; }
@media (min-width:768px){ .step-card { cursor:default; } }

.work-scroll-wrap { overflow-x:auto; overflow-y:visible; padding:0 5vw 1.5rem; scrollbar-width:thin; scrollbar-color:#d4b578 transparent; cursor:grab; }
.work-scroll-wrap:active { cursor:grabbing; }
.work-scroll-wrap::-webkit-scrollbar { height:3px; }
.work-scroll-wrap::-webkit-scrollbar-thumb { background:#d4b578; }
.work-track { display:flex; gap:3px; width:max-content; }
.work-item { position:relative; overflow:hidden; flex-shrink:0; transition:transform 0.35s ease; }
.work-item:hover { transform:scale(1.015); z-index:2; }
.work-wide { width:460px; height:320px; }
.work-sq { width:320px; height:320px; }
.work-tall { width:240px; height:320px; }
@media (max-width:768px) { .work-wide{width:280px;height:200px;} .work-sq{width:200px;height:200px;} .work-tall{width:150px;height:200px;} }
.work-img { width:100%; height:100%; object-fit:cover; transition:transform 0.55s ease; display:block; }
.work-item:hover .work-img { transform:scale(1.06); }
.work-caption { position:absolute; bottom:0; left:0; right:0; padding:0.75rem 1rem; background:linear-gradient(transparent,rgba(26,26,24,0.78)); color:#f7f5ef; z-index:2; }
.work-caption-title { font-family:'Noto Serif',serif; font-size:1rem; font-weight:600; }
.work-caption-sub { font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(247,245,239,0.6); }

/* ══ SUB-PAGE HERO (gallery + our work) ══ */
.projects-hero { min-height:38vh; display:flex; align-items:flex-end; position:relative; overflow:hidden; padding-top:80px; }
.projects-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center 40%; filter:brightness(0.5) saturate(0.7); }
.projects-hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,26,24,0.7) 0%,rgba(26,26,24,0.35) 100%); }
.page-gallery .projects-hero { min-height:34vh; }

/* ══ GALLERY PAGE ══ */
.page-gallery { overflow-x:hidden; max-width:100vw; }
.gallery-pair { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#000; }
@media(max-width:860px){ .gallery-pair { grid-template-columns:1fr; } }
.gallery-pair.three-up { grid-template-columns:1fr 1fr 1fr; }
@media(max-width:860px){ .gallery-pair.three-up { grid-template-columns:1fr; } }
.gallery-panel { position:relative; overflow:hidden; aspect-ratio:4/3; background:#fff; }
.gallery-panel img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-panel.drawing-panel { background:#fff; }
.gallery-panel.drawing-panel img { object-fit:contain; padding:1.25rem; background:#fff; }
.gallery-tag { position:absolute; top:10px; left:10px; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; font-weight:700; padding:5px 10px; border-radius:9999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
@media(max-width:640px){
  .page-gallery .projects-hero { min-height:30vh; padding-top:96px; }
  .gallery-meta-title { font-size:1.2rem; }
  .gallery-note { font-size:12.5px; }
}
.gallery-tag.tag-drawing { background:rgba(28,37,53,0.85); color:#e7c177; }
.gallery-tag.tag-photo { background:rgba(184,150,80,0.9); color:#fff; }
.gallery-meta { padding:1.5rem 0.25rem 0; }
.gallery-meta-title { font-family:'Noto Serif',serif; font-size:1.5rem; font-weight:600; color:#1c1c1a; margin:0; }
.gallery-meta-sub { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#7f7667; margin-top:6px; }
.gallery-note { font-size:13px; color:#4d4639; line-height:1.7; margin-top:0.75rem; max-width:60ch; }

/* ══ OUR WORK PAGE ══ */
.project-grid { display:grid; gap:3px; }
.project-grid-3 { grid-template-columns:repeat(3,1fr); }
.project-grid-4 { grid-template-columns:repeat(4,1fr); }
.project-grid-2 { grid-template-columns:repeat(2,1fr); }
@media(max-width:900px){ .project-grid-3, .project-grid-4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .project-grid-3, .project-grid-4, .project-grid-2 { grid-template-columns:1fr; } }
.project-item { position:relative; overflow:hidden; aspect-ratio:4/3; cursor:pointer; }
.project-item.tall { aspect-ratio:3/4; }
.project-item.wide { aspect-ratio:16/9; }
.project-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.55s ease; display:block; }
.project-item:hover img { transform:scale(1.06); }
.project-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(26,26,24,0.82) 0%, rgba(26,26,24,0.1) 50%, transparent 100%); opacity:0; transition:opacity 0.3s ease; }
.project-item:hover .project-overlay { opacity:1; }
.project-caption { position:absolute; bottom:0; left:0; right:0; padding:1.25rem 1.25rem 1rem; transform:translateY(4px); transition:transform 0.3s ease; }
.project-item:hover .project-caption { transform:translateY(0); }
.project-type-badge { display:inline-block; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(247,245,239,0.7); background:rgba(26,26,24,0.55); border:0.5px solid rgba(247,245,239,0.25); padding:3px 8px; margin-bottom:6px; backdrop-filter:blur(4px); }
.project-title { font-family:'Noto Serif',serif; font-size:1rem; font-weight:600; color:#f7f5ef; line-height:1.2; }
.project-label { padding:0.6rem 0.75rem; background:rgba(252,249,245,0.97); border-top:1px solid rgba(209,197,180,0.3); }
.project-label-title { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#1c1c1a; margin:0; }
.project-label-sub { font-size:10px; color:#7f7667; letter-spacing:0.05em; margin-top:1px; }
.category-section { scroll-margin-top:90px; }
.filter-pill { border:1px solid rgba(184,150,80,0.4); padding:6px 16px; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; font-weight:700; cursor:pointer; transition:all 0.2s; color:#4d4639; border-radius:9999px; background:transparent; }
.filter-pill.active, .filter-pill:hover { background:#b89650; color:#fff; border-color:#b89650; }
.drawing-card { background:#1c2535; border:1px solid rgba(231,193,119,0.25); position:relative; overflow:hidden; aspect-ratio:4/3; }
.drawing-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(231,193,119,0.04) 0%,transparent 60%); }
.drawing-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; text-align:center; }
.blueprint-lines { position:absolute; inset:0; opacity:0.07; background-image: repeating-linear-gradient(0deg,#e7c177 0px,transparent 1px,transparent 28px,#e7c177 29px), repeating-linear-gradient(90deg,#e7c177 0px,transparent 1px,transparent 28px,#e7c177 29px); }

/* --- Utilities for mobile menu, payment section & star rating (not in precompiled tailwind build) --- */
.inset-x-0{left:0;right:0;}
.w-11{width:2.75rem;}
.h-11{height:2.75rem;}
.-mr-2{margin-right:-0.5rem;}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05);}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.12),0 8px 10px -6px rgba(0,0,0,.10);}
.gap-x-6{column-gap:1.5rem;}
.gap-y-2{row-gap:0.5rem;}
.tracking-\[0\.12em\]{letter-spacing:0.12em;}
@media (min-width:640px){.sm\:inline-block{display:inline-block;}.sm\:w-auto{width:auto;}}
.p-8{padding:2rem;}
.gap-5{gap:1.25rem;}
.max-w-4xl{max-width:56rem;}