:root{
  --timber:#C08A3E;
  --timber-deep:#96692B;
  --charcoal:#241A12;
  --sand:#FAF6EF;
  --sand-warm:#F1E7D6;
  --white:#FFFFFF;
  --brass:#A9762E;
  --ink:#201811;
  --ink-soft:#645A4C;
  --ink-faint:#8C8478;
  --line:rgba(36,26,18,0.12);
  --shadow-card:0 20px 40px -15px rgba(36,26,18,0.16), 0 4px 6px -2px rgba(36,26,18,0.07);
  --font-display:'Archivo', Arial, sans-serif;
  --font-body:'Source Sans 3', Arial, sans-serif;
  --ease: cubic-bezier(0.22,1,0.36,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  font-family:var(--font-body); background:var(--white); color:var(--ink);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.ph{
  border:1px dashed var(--brass); background:rgba(168,120,60,0.08);
  padding:4px 8px; display:inline-block; font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:#7a5423; font-family:var(--font-body); font-weight:600;
}
.wrap{max-width:1140px; margin:0 auto; padding:0 32px;}
.eyebrow{
  font-family:var(--font-body); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:700; color:var(--timber);
}

/* ===== NAV ===== */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:40px;
  padding:22px 5%;
  transition:background-color 300ms var(--ease), padding 300ms var(--ease), box-shadow 300ms var(--ease);
}
nav.solid{ background:var(--charcoal); padding:14px 5%; box-shadow:0 1px 0 rgba(255,255,255,0.08); }
.nav-logo-plate{ padding:6px 14px; display:flex; align-items:center; gap:10px; }
.nav-logo{height:34px; display:block; transition:filter 300ms var(--ease); transform:translateY(-2px);}
/* Once the nav goes solid (dark), swap the navy icon for a white silhouette
   instead of leaving navy sitting on dark, cleaner and matches how the rest
   of the site handles dark sections. */
nav.solid .nav-logo{filter:brightness(0) invert(1);}
.nav-wordmark{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.02em; font-weight:700; font-size:18px; color:var(--ink);
  transition:color 300ms var(--ease);
}
nav.solid .nav-wordmark{color:var(--white);}
.nav-links-left, .nav-links-right{display:flex; align-items:center; gap:32px;}
.nav-links-left{justify-self:end;}
.nav-links-right{justify-self:start;}
.nav-links-left a, .nav-links-right a{ font-size:14px; font-weight:600; color:var(--ink-soft); transition:color 200ms var(--ease); }
nav.solid .nav-links-left a, nav.solid .nav-links-right a{color:rgba(255,255,255,0.85);}
.nav-links-left a:hover, .nav-links-right a:hover{color:var(--timber);}
nav.solid .nav-links-left a:hover, nav.solid .nav-links-right a:hover{color:var(--white);}
.nav-links-left a.active, .nav-links-right a.active:not(.nav-phone){color:var(--timber); border-bottom:1px solid var(--timber); padding-bottom:2px;}
nav.solid .nav-links-left a.active, nav.solid .nav-links-right a.active:not(.nav-phone){color:var(--white); border-bottom-color:var(--white);}
.nav-phone{
  background:var(--timber); color:var(--white) !important; padding:12px 22px; font-weight:700 !important;
  font-size:13.5px !important; min-height:44px; display:flex; align-items:center; transition:background 200ms var(--ease);
}
.nav-phone:hover{background:var(--timber-deep);}
nav.solid .nav-phone{background:var(--white); color:var(--charcoal) !important;}
nav.solid .nav-phone:hover{background:var(--sand);}

/* Homepage-only: the hero photo is darkened edge-to-edge now, so the
   transparent nav needs light text before scroll too, not just once .solid kicks in. */
nav.on-hero .nav-logo{filter:brightness(0) invert(1);}
nav.on-hero .nav-wordmark{color:var(--white);}
nav.on-hero .nav-links-left a, nav.on-hero .nav-links-right a{color:rgba(255,255,255,0.85);}
nav.on-hero .nav-links-left a:hover, nav.on-hero .nav-links-right a:hover{color:var(--white);}
nav.on-hero .nav-links-left a.active, nav.on-hero .nav-links-right a.active:not(.nav-phone){color:var(--white); border-bottom-color:var(--white);}
nav.on-hero .nav-hamburger span{background:var(--white);}
nav.on-hero .nav-phone{background:var(--white); color:var(--charcoal) !important;}
nav.on-hero .nav-phone:hover{background:var(--sand);}

.nav-hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:26px; height:20px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-hamburger span{display:block; width:100%; height:2px; background:var(--ink); transition:all 250ms var(--ease);}
nav.solid .nav-hamburger span{background:var(--white);}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--charcoal);
  display:flex; flex-direction:column; justify-content:flex-start; padding:150px 8% 40px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s 300ms;
}
.mobile-menu.open{opacity:1; visibility:visible; transform:translateY(0); transition:opacity 300ms var(--ease), transform 300ms var(--ease);}
.mobile-menu-links{display:flex; flex-direction:column;}
.mobile-menu-links a{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.01em; font-weight:700; font-size:20px; color:var(--white);
  padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.15);
}
.mobile-menu-links a.active{color:#D9A65C;}
.mobile-menu .btn-primary{margin-top:18px; justify-content:center; width:100%; background:var(--brass);}
.mobile-menu .btn-primary:hover{background:#8f6530;}
body.menu-open{overflow:hidden;}
@media(max-width:860px){
  .nav-links-left a, .nav-links-right a{display:none;}
  .nav-hamburger{display:flex;}
  .nav-links-right{gap:0;}
  nav{gap:14px;}
  .nav-links-left{justify-self:start;}
  .nav-logo-plate{justify-self:start;}
}
@media(min-width:861px){ .mobile-menu{display:none;} }

/* ===== HERO (dark full-bleed photo, Axel's-style) ===== */
.hero{
  min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:140px 32px 60px; background:var(--charcoal); position:relative; overflow:hidden;
}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.hero::before{
  /* Darken the photo across its whole surface so white type reads reliably,
     rather than the previous light cream veil. */
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(18,13,9,0.5) 0%, rgba(18,13,9,0.4) 45%, rgba(18,13,9,0.68) 100%);
  pointer-events:none;
}
.hero-inner{max-width:760px; position:relative; z-index:2;}
.hero-logo{
  width:min(300px, 46vw); height:auto; margin:0 auto 22px;
  filter:brightness(0) invert(1);
}
.hero-location{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.02em; font-weight:800;
  font-size:clamp(38px, 6.4vw, 74px); color:var(--white); line-height:1.05;
}
.hero-areas{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:0.1em; font-weight:600;
  font-size:13px; color:rgba(255,255,255,0.6); margin-top:16px;
}
.hero-tagline{
  font-family:var(--font-display); text-transform:uppercase; font-weight:800; letter-spacing:0.04em;
  font-size:clamp(18px, 2.4vw, 24px); color:var(--white); margin-top:22px;
}
.hero-ctas{margin-top:34px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.hero-scroll{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
.hero-scroll span{font-size:13px;}
.btn{
  font-weight:700; font-size:14px; padding:16px 30px; min-height:48px;
  display:inline-flex; align-items:center; gap:8px; transition:all 200ms var(--ease); color:var(--white);
}
.btn-primary{background:var(--timber);}
.btn-primary:hover{background:var(--timber-deep); transform:translateY(-2px);}
.btn-secondary{background:var(--charcoal);}
.btn-secondary:hover{background:#3A2E20; transform:translateY(-2px);}
.btn-outline-ink{background:transparent; border:1.5px solid var(--ink); color:var(--ink);}
.btn-outline-ink:hover{background:var(--ink); color:var(--white); transform:translateY(-2px);}
.btn-outline-white{background:transparent; border:1.5px solid rgba(255,255,255,0.6); color:var(--white);}
.btn-outline-white:hover{background:var(--white); color:var(--charcoal); border-color:var(--white); transform:translateY(-2px);}
.btn-whatsapp{background:transparent; border:1.5px solid var(--ink); color:var(--ink);}
.btn-whatsapp:hover{background:var(--ink); color:var(--white); transform:translateY(-2px);}
.btn-whatsapp svg{flex-shrink:0;}
.final-cta .btn-whatsapp{border-color:rgba(255,255,255,0.5); color:var(--white);}
.final-cta .btn-whatsapp:hover{background:var(--white); color:var(--charcoal);}

/* ===== PAGE HEADER ===== */
.page-header{
  padding:190px 0 100px; background:linear-gradient(160deg, var(--sand) 0%, var(--sand-warm) 45%, #E9DEC8 100%);
  text-align:center;
}
.page-header .eyebrow{display:inline-flex; align-items:center; gap:10px;}
.page-header h1{
  font-family:var(--font-display); text-transform:uppercase; font-weight:800; letter-spacing:-0.01em;
  font-size:clamp(44px,7vw,78px); color:var(--ink); line-height:1.05; margin-top:18px;
}
.page-header h1 em{font-weight:600; color:var(--brass);}
.page-header p{font-size:16px; color:var(--ink-soft); max-width:560px; margin:20px auto 0; line-height:1.65;}

/* ===== PLACEHOLDER MEDIA (for slots still waiting on a real photo) ===== */
.media-ph{
  background:repeating-linear-gradient(45deg,#ECE3D2,#ECE3D2 12px,#E2D6BE 12px,#E2D6BE 24px);
  display:flex; align-items:center; justify-content:center; position:relative;
}
/* Real photo styling, shared by every media slot across the site */
.about-media img, .services-hero-media img, .service-media img, .work-media img, .gallery-item img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:saturate(0.92) contrast(1.04);
}

/* ===== ABOUT / STORY ===== */
.about-section{padding:150px 0; background:var(--sand);}
.about-head{text-align:center; max-width:920px; margin:0 auto 72px;}
.about-head h2{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.01em; font-weight:800; letter-spacing:-0.02em; font-size:clamp(36px,5.2vw,62px);
  color:var(--ink); line-height:1.1; margin-top:14px;
}
.about-head h2 em{font-weight:600; color:var(--brass);}
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:72px; align-items:center;}
.about-media-wrap{position:relative;}
.about-media-wrap::before{
  content:''; position:absolute; top:-20px; left:-20px; right:20px; bottom:20px; border:2px solid var(--charcoal); z-index:0;
}
.about-media{ aspect-ratio:4/5; box-shadow:var(--shadow-card); position:relative; z-index:1; overflow:hidden; }
.about-copy p{font-size:15.5px; color:var(--ink-soft); line-height:1.75; margin-bottom:18px;}
.about-stats{display:flex; margin-top:36px;}
.about-stat{flex:1; padding:24px 24px 0 0; border-top:3px solid var(--charcoal);}
.about-stat:not(:last-child){border-right:1px solid var(--line); margin-right:24px;}
.about-stat .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--ink); line-height:1;}
.about-stat .label{font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); margin-top:8px;}
@media(max-width:860px){ .about-grid{grid-template-columns:1fr; gap:56px;} .about-media-wrap::before{top:-14px; left:-14px; right:14px; bottom:14px;} }
@media(max-width:560px){
  .about-stats{flex-direction:column; gap:20px;}
  .about-stat{padding:20px 0 0; border-right:none !important; margin-right:0 !important; width:100%;}
  .about-stat:not(:last-child){border-bottom:1px solid var(--line); padding-bottom:20px;}
}

/* ===== SPECIALTIES (What We Build) ===== */
.specialty-section{padding:150px 0; background:var(--white);}
.specialty-head{text-align:center; max-width:760px; margin:0 auto 56px;}
.specialty-head h2{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:-0.01em; font-weight:800; font-size:clamp(30px,4.6vw,54px);
  color:var(--ink); line-height:1.15; margin-top:14px;
}
.specialty-head h2 br{display:block; content:'';}
.specialty-head h2 em{font-weight:600; color:var(--brass);}
.specialty-grid{display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:220px; gap:16px;}
.specialty-card{
  position:relative; overflow:hidden; background:linear-gradient(135deg, var(--charcoal) 0%, #3A2E20 100%);
  box-shadow:var(--shadow-card); border-top:3px solid var(--card-accent, var(--brass));
}
.specialty-card:nth-child(1){--card-accent:#B0672E;}
.specialty-card:nth-child(2){--card-accent:#7A4A28;}
.specialty-card:nth-child(3){--card-accent:#A8783C;}
.specialty-card:nth-child(4){--card-accent:#5B3419;}
.specialty-card:nth-child(1), .specialty-card:nth-child(2){grid-row:span 2;}
.specialty-card::after{
  content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,12,9,0.7) 0%, transparent 55%);
}
.specialty-card img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:saturate(0.92) contrast(1.04);}
.specialty-num{position:absolute; top:16px; right:20px; z-index:2; font-family:var(--font-display); font-size:20px; color:rgba(255,255,255,0.7);}
.specialty-body{position:absolute; left:24px; right:24px; bottom:22px; z-index:2;}
.specialty-body h3{
  font-size:clamp(26px, 3vw, 38px); font-weight:800; color:var(--white); text-transform:uppercase;
  letter-spacing:-0.01em; line-height:1.05; transform:translateY(30px); transition:transform 320ms var(--ease);
}
.specialty-card:hover .specialty-body h3, .specialty-card:focus-visible .specialty-body h3{
  transform:translateY(0);
}
.specialty-body p{
  font-size:13.5px; color:rgba(255,255,255,0.85); max-width:38ch; line-height:1.55;
  max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height 320ms var(--ease), opacity 250ms var(--ease), margin-top 320ms var(--ease);
}
.specialty-card:hover .specialty-body p, .specialty-card:focus-visible .specialty-body p{
  max-height:80px; opacity:1; margin-top:10px;
}
.specialty-explore{
  display:block; margin-top:14px; font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--timber); opacity:0; transform:translateY(6px);
  transition:opacity 250ms var(--ease), transform 250ms var(--ease);
}
.specialty-card:hover .specialty-explore, .specialty-card:focus-visible .specialty-explore{
  opacity:1; transform:translateY(0);
}
.specialty-card .ph{position:absolute; top:16px; left:20px; z-index:2; background:rgba(255,255,255,0.92); border-color:var(--white); color:var(--ink);}
@media(max-width:860px){
  .specialty-grid{grid-template-columns:1fr; grid-auto-rows:220px;}
  .specialty-card:nth-child(1), .specialty-card:nth-child(2){grid-row:span 1;}
}

/* ===== SERVICES OVERVIEW HERO ===== */
.services-hero{padding:190px 0 110px; background:linear-gradient(160deg, var(--sand) 0%, var(--sand-warm) 45%, #E9DEC8 100%);}
.services-hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;}
.services-hero .rule-eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.services-hero .rule-eyebrow .rule{width:28px; height:2px; background:var(--timber);}
.services-hero h1{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.01em; font-weight:800; letter-spacing:-0.02em; font-size:clamp(32px,4.2vw,48px);
  color:var(--ink); line-height:1.1;
}
.services-hero h1 em{font-weight:600; color:var(--brass);}
.services-hero p{font-size:16px; color:var(--ink-soft); line-height:1.7; margin-top:22px; max-width:440px;}
.services-pills{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:32px; max-width:440px;}
.services-pills a{
  background:var(--white); border:1px solid var(--line); padding:12px 18px; font-size:13px; font-weight:700; color:var(--ink);
  display:flex; align-items:center; gap:8px; transition:all 200ms var(--ease);
}
.services-pills a:hover{border-color:var(--brass); background:var(--sand);}
.services-pills a::before{content:''; width:6px; height:6px; background:var(--brass); flex-shrink:0;}
@media(max-width:500px){ .services-pills{grid-template-columns:1fr;} }
.services-hero-media{aspect-ratio:4/5; position:relative; overflow:hidden; box-shadow:var(--shadow-card);}

/* ===== SERVICES DETAIL ===== */
.services-detail{background:var(--white);}
.service-row{padding:130px 0; border-bottom:1px solid var(--line); scroll-margin-top:90px;}
.service-row:last-child{border-bottom:none;}
.service-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:80px; align-items:center;}
.service-row:nth-child(even) .service-grid{direction:rtl;}
.service-row:nth-child(even) .service-grid > *{direction:ltr;}
.service-media{aspect-ratio:4/5; position:relative; overflow:hidden; box-shadow:var(--shadow-card);}
.service-media .service-count{
  position:absolute; right:16px; bottom:16px; z-index:2; background:var(--ink); color:var(--white); padding:10px 16px; text-align:center;
}
.service-media .service-count .n{font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--brass); line-height:1;}
.service-media .service-count .of{font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-top:2px;}
.service-copy .rule-eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.service-copy .rule-eyebrow .rule{width:24px; height:2px; background:var(--timber);}
.service-copy h2{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.01em; font-weight:800; letter-spacing:-0.02em; font-size:clamp(38px,5vw,60px);
  color:var(--ink); margin-bottom:24px; line-height:1.02;
}
.service-copy blockquote{
  border-left:3px solid var(--brass); padding-left:20px; margin:0 0 32px;
  font-family:var(--font-display); font-size:18px; color:var(--ink); line-height:1.6;
}
.service-copy .service-handle-label{
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:700;
  border-top:1px solid var(--line); padding-top:18px; margin-bottom:14px;
}
.service-copy .service-list{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 24px;}
.service-copy .service-list li{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--ink);}
.service-copy .service-list li::before{content:''; flex-shrink:0; width:14px; height:1px; background:var(--brass);}
.service-copy .service-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}
@media(max-width:860px){
  .services-hero-grid{grid-template-columns:1fr; gap:40px;}
  .service-grid{grid-template-columns:1fr; gap:36px;}
  .service-row:nth-child(even) .service-grid{direction:ltr;}
  .service-row{padding:80px 0;}
  .service-copy .service-list{grid-template-columns:1fr;}
}

/* ===== TRUST / WE WALK IT FIRST ===== */
.trust-section{background:var(--charcoal); color:var(--white); padding:140px 0;}
.trust-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
.trust-media{aspect-ratio:4/3; overflow:hidden; box-shadow:0 24px 50px -18px rgba(0,0,0,0.5); position:relative;}
.trust-media img, .trust-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.04);}
.trust-caption{margin-top:16px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); font-weight:700;}
.trust-copy .rule-eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.trust-copy .rule-eyebrow .rule{width:24px; height:2px; background:var(--timber);}
.trust-copy .rule-eyebrow .eyebrow{color:var(--timber);}
.trust-copy h2{
  font-family:var(--font-display); text-transform:uppercase; font-weight:800; letter-spacing:-0.01em;
  font-size:clamp(28px, 3.8vw, 46px); line-height:1.08; color:var(--white);
}
.trust-copy h2 em{
  display:block; font-style:italic; font-weight:500; text-transform:none; letter-spacing:0;
  color:var(--timber); font-size:0.85em; margin-top:6px;
}
.trust-copy p{font-size:15px; color:rgba(255,255,255,0.72); line-height:1.75; margin-top:22px; max-width:480px;}
.trust-checklist{list-style:none; margin-top:30px; display:flex; flex-direction:column; gap:14px;}
.trust-checklist li{display:flex; align-items:center; gap:14px; font-size:14.5px; color:rgba(255,255,255,0.9); font-weight:600;}
.trust-check{
  flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--timber); color:var(--charcoal);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
}
.trust-copy .btn-outline-white{margin-top:36px;}
@media(max-width:860px){ .trust-grid{grid-template-columns:1fr; gap:40px;} }

/* ===== HOW WE WORK ===== */
.process-section{background:var(--charcoal); color:var(--white); padding:120px 0;}
.process-head{text-align:center; max-width:720px; margin:0 auto 60px;}
.process-head .eyebrow{color:rgba(250,247,241,0.75);}
.process-head h2{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:-0.01em; font-weight:800; font-size:clamp(30px,4.6vw,54px);
  color:var(--white); margin-top:14px; line-height:1.15;
}
.process-head h2 em{font-weight:600; color:#D9A65C;}
.process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.process-step{border-top:1px solid rgba(255,255,255,0.25); padding-top:20px;}
.process-step .step-num{font-family:var(--font-display); font-size:26px; color:#D9A65C;}
.process-step h3{font-size:16px; font-weight:800; text-transform:uppercase; margin-top:10px; margin-bottom:8px;}
.process-step p{font-size:14px; color:rgba(255,255,255,0.75); line-height:1.6;}
@media(max-width:820px){ .process-grid{grid-template-columns:1fr; gap:32px;} }

/* ===== RECENT WORK STRIP ===== */
.work-section{padding:150px 0 120px; background:var(--sand-warm); border-top:1px solid rgba(168,120,60,0.2); overflow-x:hidden;}
.work-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; flex-wrap:wrap; gap:20px;}
.work-head h2{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:-0.01em; font-weight:800; font-size:clamp(26px,3.4vw,42px);
  color:var(--ink); line-height:1.1; white-space:nowrap;
}
@media(max-width:700px){ .work-head h2{white-space:normal;} }
.work-head h2 em{font-weight:600; color:var(--brass);}
.work-all{
  border:1px solid var(--ink); padding:14px 24px; font-size:13px; font-weight:700; color:var(--ink);
  min-height:44px; display:inline-flex; align-items:center; transition:all 200ms var(--ease);
}
.work-all:hover{background:var(--ink); color:var(--white);}
.work-strip{
  display:flex; gap:24px; overflow-x:auto; padding:0 5% 8px; scroll-snap-type:x proximity; scrollbar-width:none;
  width:100vw; margin-left:calc(-50vw + 50%);
}
.work-strip::-webkit-scrollbar{display:none;}
.work-item{flex:0 0 380px; scroll-snap-align:start;}
.work-media{ aspect-ratio:3/4; height:480px; position:relative; overflow:hidden; box-shadow:var(--shadow-card); }
.work-progress{height:2px; margin-top:24px; position:relative; background:var(--line);}
.work-progress-bar{position:absolute; top:0; left:0; height:100%; width:20%; background:var(--brass); transition:width 150ms linear, left 150ms linear;}
.work-nav{display:flex; justify-content:center; gap:14px; margin-top:28px;}
.work-nav-btn{
  width:44px; height:44px; border:1px solid var(--line); background:var(--white); color:var(--ink); font-size:16px;
  cursor:pointer; transition:all 200ms var(--ease);
}
.work-nav-btn:hover:not(:disabled){background:var(--ink); color:var(--white); border-color:var(--ink);}
.work-nav-btn:disabled{opacity:0.3; cursor:default;}
@media(max-width:700px){
  .work-strip{padding:0 24px 8px; gap:16px;}
  .work-item{flex:0 0 78vw; max-width:320px;}
  .work-media{height:auto; aspect-ratio:3/4;}
}
.work-item .work-tag{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--timber); font-weight:700; margin-top:14px;}
.work-item .work-title{font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); margin-top:4px;}

/* ===== WORK PAGE GALLERY ===== */
.gallery-section{padding:100px 0 150px; background:var(--sand);}
.gallery-filter{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:44px;}
.gallery-filter-label{font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-right:2px;}
.filter-btn{
  background:var(--white); border:1px solid var(--line); color:var(--ink);
  padding:10px 18px; font-size:12.5px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase;
  cursor:pointer; transition:all 200ms var(--ease);
}
.filter-btn:hover{border-color:var(--timber);}
.filter-btn.active{background:var(--timber); border-color:var(--timber); color:var(--white);}
.gallery-empty{font-size:14.5px; color:var(--ink-faint); text-align:center; padding:50px 0;}
@media(max-width:600px){
  .gallery-filter{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:32px;}
  .gallery-filter-label{grid-column:1 / -1; margin-bottom:2px;}
  .filter-btn{
    width:100%; padding:11px 10px; font-size:11.5px; text-align:center;
    min-height:48px; display:flex; align-items:center; justify-content:center; line-height:1.2;
  }
}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.gallery-item{position:relative; aspect-ratio:3/4; overflow:hidden; box-shadow:var(--shadow-card);}
.gallery-item .gallery-cap{position:absolute; left:0; right:0; bottom:0; padding:18px 20px; background:linear-gradient(to top, rgba(15,12,9,0.75) 0%, transparent 100%);}
.gallery-item .gallery-tag{font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.75); font-weight:700;}
.gallery-item .gallery-title{font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--white); margin-top:2px;}
@media(max-width:900px){ .gallery-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .gallery-grid{grid-template-columns:1fr;} }

/* ===== WHY HIRE US ===== */
.why-section{padding:150px 0; background:var(--sand-warm);}
.why-head{text-align:center; max-width:760px; margin:0 auto 56px;}
.why-head h2{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.01em; font-weight:800; letter-spacing:-0.02em; font-size:clamp(30px,3.8vw,46px);
  color:var(--ink); line-height:1.15; margin-top:14px;
}
.why-head h2 em{display:block; font-weight:600; color:var(--brass);}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.why-card{
  border-top:3px solid var(--charcoal); padding:28px 22px 26px; background:var(--white);
  box-shadow:var(--shadow-card); transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.why-card:hover{transform:translateY(-6px); box-shadow:0 28px 50px -18px rgba(91,52,25,0.18), 0 6px 10px -2px rgba(91,52,25,0.08);}
.why-card .num{font-family:var(--font-display); font-weight:600; font-size:30px; color:rgba(91,52,25,0.18); float:right; line-height:1;}
.why-card h3{font-size:15px; font-weight:800; color:var(--ink); text-transform:uppercase; margin-top:34px; margin-bottom:10px; clear:both;}
.why-card p{font-size:13.5px; color:var(--ink-faint); line-height:1.6;}
@media(max-width:900px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .why-grid{grid-template-columns:1fr;} }

/* ===== AREAS / CONTACT ===== */
.contact-section{padding:150px 0; background:var(--white);}
.contact-head{max-width:600px; margin-bottom:64px;}
.contact-head h2{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.01em; font-weight:600; font-size:clamp(36px,4.6vw,54px);
  color:var(--ink); margin-top:14px; margin-bottom:16px;
}
.contact-head p{font-size:15.5px; color:var(--ink-soft); line-height:1.7; max-width:520px;}
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:stretch;}
.contact-cards{display:flex; flex-direction:column; gap:20px;}
.contact-card{background:var(--sand); border:1px solid rgba(168,120,60,0.25); padding:28px 32px; transition:border-color 250ms var(--ease);}
.contact-card:hover{border-color:rgba(168,120,60,0.5);}
.contact-card .card-label{display:block; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--timber); font-weight:700; margin-bottom:8px;}
.contact-card .card-value{font-size:16px; font-weight:600; color:var(--ink);}
.contact-card a.card-value{transition:color 200ms var(--ease);}
.contact-card a.card-value:hover{color:var(--timber);}
.contact-card .card-phone{
  font-family:var(--font-display); font-weight:600; font-size:30px; color:var(--ink);
  transition:color 200ms var(--ease); display:block;
}
.contact-card .card-phone:hover{color:var(--timber);}
.hours-list{list-style:none; display:flex; flex-direction:column; gap:6px;}
.hours-list li{display:flex; justify-content:space-between; gap:16px; font-size:14px; color:var(--ink-soft);}
.hours-list li strong{color:var(--ink); font-weight:600;}
.areas-panel{background:var(--sand); border:1px solid rgba(168,120,60,0.25); display:flex; flex-direction:column; overflow:hidden;}
.areas-map{aspect-ratio:3/2; overflow:hidden;}
.areas-content{padding:32px; display:flex; flex-direction:column; gap:20px; flex:1;}
.areas-content h3{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--timber); font-weight:700;}
.areas-list{display:flex; flex-wrap:wrap; gap:10px;}
.areas-list span{background:var(--white); border:1px solid var(--line); padding:8px 16px; font-size:13.5px; font-weight:600; color:var(--ink);}
@media(max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
@media(max-width:600px){
  .areas-list{display:grid; grid-template-columns:1fr 1fr;}
  .areas-list span{text-align:center; padding:12px 6px; font-size:12.5px; white-space:nowrap;}
  .areas-content{padding:24px 18px;}
}

/* ===== FINAL CTA ===== */
.final-cta{background:var(--charcoal); color:var(--white); text-align:center; padding:110px 32px;}
.final-cta .eyebrow{color:rgba(255,255,255,0.65);}
.final-cta h2{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.01em; font-weight:600; font-size:clamp(38px,5vw,60px);
  margin-top:16px; line-height:1.1; max-width:700px; margin-left:auto; margin-right:auto;
}
.final-cta p{margin:20px auto 0; max-width:440px; color:rgba(255,255,255,0.8); font-size:15.5px;}
.final-cta .hero-ctas{margin-top:34px;}
.final-cta .btn-primary{background:var(--white); color:var(--charcoal);}
.final-cta .btn-primary:hover{background:var(--sand);}

/* ===== FOOTER ===== */
footer{background:var(--ink); color:rgba(255,255,255,0.7); padding:52px 5% 26px;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,0.08);}
.footer-brand{display:flex; align-items:center; gap:11px;}
.footer-logo{height:26px; display:block; filter:brightness(0) invert(1);}
.footer-name{font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.02em; font-weight:700; color:var(--white); font-size:15.5px;}
.footer-links{display:flex; gap:26px; flex-wrap:wrap;}
.footer-links a{font-size:13px; font-weight:600; color:rgba(255,255,255,0.65); transition:color 200ms var(--ease);}
.footer-links a:hover{color:var(--white);}
.footer-bottom{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px 18px; margin-top:22px;
  font-size:11.5px; color:rgba(255,255,255,0.35); text-align:center;
}
.footer-bottom a{color:rgba(255,255,255,0.5); transition:color 200ms var(--ease);}
.footer-bottom a:hover{color:var(--white);}
.footer-legal a:not(:last-child)::after{content:'·'; margin:0 8px; color:rgba(255,255,255,0.25);}
@media(max-width:600px){
  .footer-row{flex-direction:column; align-items:center; text-align:center;}
  .footer-links{justify-content:center;}
}

/* ===== FAQ ===== */
.faq-section{padding:150px 0; background:var(--sand); border-top:1px solid rgba(168,120,60,0.2);}
.faq-grid{display:grid; grid-template-columns:0.75fr 1.4fr; gap:64px; align-items:start;}
.faq-head .rule-eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.faq-head .rule-eyebrow .rule{width:28px; height:2px; background:var(--timber);}
.faq-head h2{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.01em; font-weight:800; letter-spacing:-0.02em; font-size:clamp(42px,5vw,66px);
  color:var(--ink); line-height:1.05;
}
.faq-sub{font-size:15px; color:var(--ink-faint); max-width:320px; margin-top:22px; line-height:1.65;}
.faq-call{
  margin-top:32px; display:inline-flex; align-items:center; gap:12px; background:var(--brass); color:var(--white);
  font-weight:700; font-size:13px; padding:16px 24px; min-height:48px; transition:background 200ms var(--ease);
}
.faq-call:hover{background:#8f6530;}
.faq-list{border-top:1px solid var(--line);}
.faq-row{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:26px 0; display:flex; align-items:center; gap:22px; cursor:pointer;}
.faq-q .qnum{flex-shrink:0; font-family:var(--font-display); font-size:15px; color:var(--timber);}
.faq-q .qtext{flex:1; font-size:16px; font-weight:800; text-transform:uppercase; color:var(--ink);}
.faq-q .toggle{flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; transition:all 250ms var(--ease);}
.faq-q .toggle::before, .faq-q .toggle::after{content:''; position:absolute; background:var(--ink); transition:transform 250ms var(--ease);}
.faq-q .toggle::before{width:11px; height:1.5px;}
.faq-q .toggle::after{width:1.5px; height:11px;}
.faq-row.open .toggle{background:var(--timber); border-color:var(--timber);}
.faq-row.open .toggle::before, .faq-row.open .toggle::after{background:var(--white);}
.faq-row.open .toggle::after{transform:rotate(90deg) scaleY(0);}
.faq-a{max-height:0; overflow:hidden; transition:max-height 350ms var(--ease);}
.faq-row.open .faq-a{max-height:200px;}
.faq-a-inner{padding:0 56px 26px; max-width:520px;}
@media(max-width:820px){ .faq-grid{grid-template-columns:1fr; gap:36px;} }

/* ===== BEFORE & AFTER ===== */
.ba-section{padding:150px 0; background:var(--sand); color:var(--ink);}
.ba-head{text-align:center; max-width:720px; margin:0 auto 64px;}
.ba-head h2{
  font-family:var(--font-display); text-transform:uppercase; font-weight:800; letter-spacing:-0.01em;
  font-size:clamp(30px,4.6vw,54px); color:var(--ink); line-height:1.15; margin-top:14px;
}
.ba-head h2 em{font-weight:600; color:var(--brass);}
.ba-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.ba-pair{display:flex; flex-direction:column; gap:16px;}
.ba-compare{
  position:relative; aspect-ratio:4/3; overflow:hidden; box-shadow:var(--shadow-card);
  cursor:ew-resize; -webkit-user-select:none; user-select:none; --pos:50%;
  touch-action:pan-y;
}
.ba-compare.peek .ba-before,
.ba-compare.peek .ba-divider{transition:left 0.6s var(--ease), clip-path 0.6s var(--ease);}
@media(prefers-reduced-motion:reduce){ .ba-compare.peek .ba-before, .ba-compare.peek .ba-divider{transition:none;} }
.ba-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.ba-after{z-index:1;}
.ba-before{z-index:2; clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
.ba-divider{
  position:absolute; top:0; bottom:0; left:var(--pos); width:3px; background:var(--timber);
  z-index:3; box-shadow:0 0 14px rgba(0,0,0,0.45); transform:translateX(-50%); pointer-events:none;
}
.ba-divider::before{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; background:var(--timber); box-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.ba-divider::after{
  content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:16px; color:var(--white); font-weight:700;
}
.ba-tag{
  position:absolute; top:16px; z-index:4;
  font-family:var(--font-body); font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  padding:6px 14px; color:var(--white); pointer-events:none;
}
.ba-tag.before{left:16px; background:rgba(24,20,16,0.7);}
.ba-tag.after{right:16px; background:var(--brass);}
.ba-caption{font-size:12.5px; color:var(--ink-faint); text-align:center;}
@media(max-width:820px){ .ba-grid{grid-template-columns:1fr; gap:56px;} }

/* ===== WHATSAPP FLOATING BUTTON ===== */
.whatsapp-float{
  position:fixed; bottom:24px; right:24px; z-index:99;
  width:56px; height:56px; border-radius:50%;
  background:var(--timber); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -6px rgba(36,26,18,0.45);
  transition:background 200ms var(--ease), transform 200ms var(--ease);
}
.whatsapp-float:hover{background:var(--timber-deep); transform:translateY(-3px);}
@media(max-width:600px){ .whatsapp-float{width:50px; height:50px; bottom:16px; right:16px;} }

/* ===== LEGAL PAGES (Privacy / Terms) ===== */
.legal-section{padding:100px 0 150px; background:var(--white);}
.legal-content{max-width:760px; margin:0 auto;}
.legal-content .updated{font-size:13px; color:var(--ink-faint); margin-bottom:48px;}
.legal-content h2{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.01em; font-size:24px;
  color:var(--ink); margin-top:44px; margin-bottom:14px;
}
.legal-content h2:first-of-type{margin-top:0;}
.legal-content p{font-size:15.5px; color:var(--ink-soft); line-height:1.75; margin-bottom:16px;}
.legal-content ul{margin:0 0 16px 22px; color:var(--ink-soft); font-size:15.5px; line-height:1.75;}
.legal-content a{color:var(--timber); font-weight:600; border-bottom:1px solid rgba(168,120,60,0.3);}
.legal-content a:hover{border-color:var(--timber);}

/* ===== SCROLL REVEAL ===== */
.reveal{opacity:0; transform:translateY(22px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* Distinct entrance for the specialty cards and the trust-section media,
   a scale-in rather than the flat translateY used everywhere else. */
.reveal.reveal-zoom{transform:scale(0.94); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);}
.reveal.reveal-zoom.in{transform:scale(1);}
.specialty-card.reveal{transform:translateY(24px) scale(0.96); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);}
.specialty-card.reveal.in{transform:translateY(0) scale(1);}
.specialty-card:nth-child(2).reveal{transition-delay:90ms;}
.specialty-card:nth-child(3).reveal{transition-delay:180ms;}
.specialty-card:nth-child(4).reveal{transition-delay:270ms;}

/* ===== MOBILE TYPOGRAPHY REFINEMENT ===== */
/* Bold uppercase display headings use tight line-height (1.05-1.15) that
   reads fine on desktop where they sit on one line, but on a phone they
   often wrap to 2-3 lines and the tight leading makes the wrapped lines
   look like they're touching. Loosen it on mobile only, nothing else changes. */
@media(max-width:600px){
  .hero-location, .page-header h1,
  .specialty-head h2, .about-head h2, .work-head h2, .ba-head h2,
  .why-head h2, .faq-head h2, .process-head h2, .trust-copy h2,
  .services-hero h1, .service-copy h2{
    line-height:1.25;
  }
  .service-copy blockquote{font-size:16px;}
  .about-copy p, .trust-copy p, .service-copy p{font-size:14.5px;}

  /* Several headings use a clamp() with a desktop-sized floor that's too
     big for a phone, so the intended short phrase (set with <br> or <em>)
     wraps again mid-phrase. Fix the actual font-size on mobile instead. */
  .specialty-head h2{font-size:20px;}
  .about-head h2{font-size:21px;}
  .trust-copy h2{font-size:24px;}
  .process-head h2{font-size:26px;}
  .why-head h2{font-size:24px;}
  .faq-head h2{font-size:22px;}
  .page-header h1{font-size:30px;}
  .services-hero h1{font-size:22px;}

  /* The logo artwork itself sits slightly right-of-center within its own
     source file. Barely visible on desktop, but obvious on the large mobile
     hero logo, nudge it left visually rather than re-cropping the shared
     file (which would also affect the nav/footer logo on every page). */
  .hero-logo{transform:translateX(-4.5%);}
}