/* =========================================================
   CZIVORA — Luxury Property & Home Solutions
   Design tokens: Dark Navy primary field, Silver accent,
   Cream/White content panels, architectural hairline frames.
   ========================================================= */

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

:root{
  --navy:        #0B2545;
  --navy-deep:   #071A33;
  --navy-black:  #050D1F;
  --silver:       #B8C4CE;
  --silver-light: #E3E8EC;
  --cream:      #FAF8F5;
  --white:      #FFFFFF;
  --ink:        #111111;
  --grey:       #ECE8E3;
  --border:     #DDD7CF;
  --on-navy:     #EDF1F5;
  --on-navy-dim: rgba(237,241,245,0.68);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 144px;

  --radius: 20px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  background: var(--navy);
  color: var(--on-navy);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

body::before{
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('images/Patterns.png');
  background-repeat: repeat;
  background-size: 350px 350px;
  opacity: 0.04;
  pointer-events: none;
  z-index: -1;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5{ font-family: var(--font-display); font-weight: 500; margin: 0; line-height: 1.1; letter-spacing: 0.2px; }
p{ margin: 0; }

::selection{ background: var(--silver); color: var(--navy-black); }

:focus-visible{
  outline: 2px solid var(--silver);
  outline-offset: 3px;
}

.container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}
@media (min-width: 900px){
  .container{ padding: 0 var(--space-5); }
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--silver);
}
.eyebrow::before{
  content:'';
  width: 28px; height: 1px;
  background: var(--silver);
  display: inline-block;
}

.section{ padding: var(--space-6) 0; position: relative; }
.section--tight{ padding: var(--space-5) 0; }

.section-head{
  max-width: 720px;
  margin-bottom: var(--space-5);
}
.section-head h2{ font-size: clamp(32px, 4vw, 52px); margin-top: 14px; }
.section-head p{ margin-top: 18px; font-size: 18px; color: var(--on-navy-dim); max-width: 60ch; }
.section--light .section-head p{ color: #5b5147; }

.section--light{
  background-image: linear-gradient(rgba(250,248,245,0.95), rgba(250,248,245,0.95)), url('images/Patterns.png');
  background-repeat: repeat, repeat;
  background-size: auto, 350px 350px;
  color: var(--ink);
}
.section--light .eyebrow{ color: var(--navy); }
.section--light .eyebrow::before{ background: var(--navy); }

.section--white{
  background-image: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)), url('images/Patterns.png');
  background-repeat: repeat, repeat;
  background-size: auto, 350px 350px;
  color: var(--ink);
}
.section--white .eyebrow{ color: var(--navy); }
.section--white .eyebrow::before{ background: var(--navy); }

/* ---------------- Buttons ---------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .45s var(--ease);
  white-space: nowrap;
}
.btn-gold{
  background: var(--silver);
  color: var(--navy-black);
}
.btn-gold:hover{ background: var(--silver-light); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(184,196,206,.28); }

.btn-outline{
  background: transparent;
  border-color: rgba(237,241,245,0.4);
  color: var(--on-navy);
}
.btn-outline:hover{ border-color: var(--silver); color: var(--silver); transform: translateY(-2px); }

.btn-dark{
  background: var(--navy);
  color: var(--on-navy);
  border-color: rgba(184,196,206,.4);
}
.btn-dark:hover{
  background: var(--navy-deep);
  border-color: var(--silver);
  transform: translateY(-2px);
}

.btn-arrow{ font-size: 15px; }

/* ---------------- Header ---------------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 12px 0;
  background: var(--navy);
  transition: all .5s var(--ease);
}
.site-header.is-scrolled{
  background:var(--navy-deep);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 10px 0;
  border-bottom: 1px solid rgba(184,196,206,0.18);
}
.nav-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.nav-links{
  display: none;
  align-items: center;
  gap: 34px;
  font-family: var( --font-display);
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nav-links a{
  position: relative;
  padding: 4px 0;
  color: var(--on-navy-dim);
  transition: color .3s;
}
.nav-links a:hover, .nav-links a.active{ color: var(--silver); }
.nav-links a::after{
  content:'';
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--silver);
  transition: right .35s var(--ease);
}
.nav-links a:hover::after{ right: 0; }
.nav-right{ justify-content: flex-end; }
.nav-left{ justify-content: flex-start; }

.logo{
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.logo img{
  height: 50px;      
  width: auto;
  display: block;
}
.nav-cta{ display: none; }
.nav-toggle{
  grid-column: 3;
  background: none; border: 1px solid rgba(237,241,245,.35);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-navy);
  justify-self: end;
}
@media (min-width: 1080px){
  .nav-links{ display: flex; }
  .nav-cta{ display: inline-flex; }
  .nav-toggle{ display: none; }
}

.mobile-menu{
  position: fixed; inset: 0;
  background: var(--navy-black);
  z-index: 600;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-3);
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu a{ font-family: var(--font-display); font-size: 30px; color: var(--on-navy); }
.mobile-menu .close-btn{
  position: absolute; top: 24px; right: 24px;
  background: none; border: 1px solid rgba(237,241,245,.35);
  width: 44px; height: 44px; border-radius: 50%; color: var(--on-navy);
}

/* ---------------- Hero ---------------- */
.hero{
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  padding-top: 140px;
}
.hero-bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.hero-bg::after{
  content:'';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 37, 69, 0.35) 0%, rgba(9, 33, 61, 0.55) 55%, var(--navy) 100%);
}
.hero-inner{
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-6);
  width: 100%;
}
.hero-frame{
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(184,196,206,.4);
  z-index: 3;
  pointer-events: none;
}
.hero-frame::before, .hero-frame::after{
  content: '';
  position: absolute;
  width: 34px; height: 34px;
  border: 1px solid var(--silver);
}
.hero-frame::before{ top: -1px; left: -1px; border-right: none; border-bottom: none; }
.hero-frame::after{ bottom: -1px; right: -1px; border-left: none; border-top: none; }

.hero h1{
  color: var(--on-navy);
  font-size: clamp(46px, 8vw, 108px);
  max-width: 18ch;
  font-weight: 400;
}
.hero h1 em{ color: var(--silver); font-style: italic; }
.hero-sub{
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: 18px;
  color: var(--on-navy-dim);
}
.hero-actions{
  margin-top: var(--space-4);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.hero-meta{
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-6);
  z-index: 3;
  display: none;
  writing-mode: vertical-rl;
  color: var(--on-navy-dim);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  gap: 10px;
}
@media (min-width: 1080px){ .hero-meta{ display: flex; } }

.scroll-cue{
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 3;
  display: flex; align-items: center; gap: 12px;
  color: var(--on-navy-dim);
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
}
.scroll-cue .line{ width: 1px; height: 40px; background: rgba(184,196,206,.5); position: relative; overflow: hidden; }
.scroll-cue .line::after{
  content:''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--silver);
  animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ top: -100%; } 60%{ top: 100%; } 100%{ top: 100%; } }

.page-hero{
  padding: 200px 0 var(--space-5);
  position: relative;
  overflow: hidden;
}
.page-hero .eyebrow{ margin-bottom: 18px; }
.page-hero h1{ font-size: clamp(40px, 6vw, 76px); color: var(--on-navy); max-width: 16ch; }
.page-hero p{ margin-top: 18px; color: var(--on-navy-dim); max-width: 56ch; font-size: 17px; }
.page-hero-bg{
  position: absolute; top: 0; right: -10%; width: 55%; height: 100%;
  background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.5) 30%, black 60%);
  mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.5) 30%, black 60%);
  opacity: .55;
}

/* ---------------- Cards ---------------- */
.grid{ display: grid; gap: var(--space-3); }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: 1fr; }
@media (min-width: 700px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1080px){
  .grid-3{ grid-template-columns: repeat(3,1fr); }
  .grid-4{ grid-template-columns: repeat(4,1fr); }
}

.card{
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: var(--space-3);
transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);  position: relative;
}
.card:hover{
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(5,13,31,.35);
  border-color: var(--silver);
  background: var(--navy);
}

.card:hover .num{ color: var(--silver); }
.card:hover h3{ color: var(--on-navy); }
.card:hover p{ color: var(--on-navy-dim); }
.card:hover .card-icon{
  background: rgba(184,196,206,.12);
  border-color: rgba(184,196,206,.3);
  color: var(--silver);
}
.card .num{
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--navy);
  letter-spacing: 2px;
}
.card h3{ font-size: 23px; margin-top: 14px; color: var(--ink); }
.card p{ margin-top: 10px; font-size: 15px; color: #6b6157; }
.card-icon{
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  margin-bottom: 10px;
}

.card-dark{
  background: rgba(250,248,245,0.04);
  border: 1px solid rgba(184,196,206,.22);
  color: var(--on-navy);
}
.card-dark:hover{ background: rgba(250,248,245,0.07); box-shadow: none; transform: translateY(-6px); border-color: var(--silver); }
.card-dark h3{ color: var(--on-navy); }
.card-dark p{ color: var(--on-navy-dim); }
.card-dark .card-icon{ background: rgba(184,196,206,.12); border-color: rgba(184,196,206,.3); color: var(--silver); }

.service-card{ display:flex; flex-direction: column; height: 100%; }
.service-card a.more{
  margin-top: auto; padding-top: 18px;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--navy); font-weight: 600;
  display:inline-flex; align-items:center; gap: 8px;
}
.service-card:hover a.more{ color: var(--silver); }
/* ---------------- Services — split editorial layout (scrollable) ---------------- */
.services-split{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1080px){
  .services-split{ grid-template-columns: 300px 1fr; gap: var(--space-5); }
}

.services-intro h2{ font-size: clamp(28px, 3vw, 38px); margin-top: 14px; color: var(--ink); }
.services-intro p{ margin-top: 16px; font-size: 15px; color: #6b6157; max-width: 34ch; }
.services-link{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--navy);
  transition: gap .3s;
}
.services-link:hover{ gap: 12px; color: var(--silver); }

.services-nav{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-4);
}
.services-arrow{
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  transition: all .3s;
}
.services-arrow svg{
  display: block;
}.services-arrow{
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  transition: all .3s;
}
.services-arrow svg{
  display: block;
}
.services-arrow:hover{ background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.services-arrow[disabled]{ opacity: .35; pointer-events: none; }

.services-cols-wrap{ overflow: hidden; }
.services-cols{
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.services-cols::-webkit-scrollbar{ display: none; }

.service-col{
  flex: 0 0 auto;
  width: 230px;
  scroll-snap-align: start;
  display: block;
}
@media (min-width: 640px){ .service-col{ width: 240px; } }

.service-col-photo{ border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3.2; }
.service-col-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.service-col:hover .service-col-photo img{ transform: scale(1.08); }

.service-col-icon{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--white); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  margin-top: 16px; transition: all .35s;
}
.service-col:hover .service-col-icon{ background: var(--navy); border-color: var(--navy); color: var(--on-navy); }

.service-col h3{ font-size: 16px; font-weight: 600; font-family: var(--font-body); color: var(--ink); margin-top: 12px; }
.service-col p{ font-size: 13.5px; color: #8a8075; margin-top: 6px; line-height: 1.5; }
/* ---------------- Portfolio / masonry ---------------- */
.filter-bar{
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
}
.filter-toggle{
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 10px 22px; border-radius: 999px;
  border: 1px solid rgba(184,196,206,.3);
  background: transparent; color: var(--on-navy);
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  transition: all .35s;
  white-space: nowrap;
}
.section--light .filter-toggle{ border-color: var(--border); color: var(--navy); }
.filter-toggle:hover, .filter-toggle.is-open{ background: var(--silver); color: var(--navy-black); border-color: var(--silver); }
.filter-toggle-arrow{ transition: transform .3s var(--ease); flex-shrink: 0; }
.filter-toggle.is-open .filter-toggle-arrow{ transform: rotate(180deg); }

.filter-options{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .4s var(--ease), opacity .35s var(--ease), margin-top .4s var(--ease);
}
.filter-options.is-open{
  max-height: 500px;
  opacity: 1;
  margin-top: 14px;
}

.filter-btn{
  padding: 10px 22px; border-radius: 999px;
  border: 1px solid rgba(184,196,206,.3);
  background: transparent; color: var(--on-navy-dim);
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  transition: all .35s;
}
.section--light .filter-btn{ border-color: var(--border); color: #6b6157; }
.filter-btn:hover, .filter-btn.active{ background: var(--silver); color: var(--navy-black); border-color: var(--silver); }
@media (min-width: 700px){ .masonry{ columns: 2; } }
@media (min-width: 1080px){ .masonry{ columns: 3; } }
.masonry-item{
  break-inside: avoid;
  margin-bottom: var(--space-3);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  display: block;
  border: 1px solid var(--border);
}
.masonry-item img{ width: 100%; transition: transform .8s var(--ease); }
.masonry-item:hover img{ transform: scale(1.07); }
.masonry-caption{
  position: absolute; inset: auto 0 0 0;
  padding: 24px;
  background: linear-gradient(0deg, rgba(5,13,31,.92), transparent);
  color: var(--on-navy);
  transform: translateY(12px);
  opacity: 0;
  transition: all .45s var(--ease);
}
.masonry-item:hover .masonry-caption{ opacity: 1; transform: translateY(0); }
.masonry-caption .tag{ font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--silver); }
.masonry-caption h3{ font-size: 21px; margin-top: 6px; }

/* ---------------- Testimonials ---------------- */
.testi-track{ display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.testi-track::-webkit-scrollbar{ height: 4px; }
.testi-track::-webkit-scrollbar-thumb{ background: rgba(184,196,206,.4); }
.testi-card{
  scroll-snap-align: start;
  min-width: 320px; max-width: 380px; flex: 1 0 auto;
}
.stars{ color: var(--silver); letter-spacing: 3px; font-size: 15px; }
.testi-card p.quote{ margin-top: 16px; font-size: 16px; font-style: italic; color: #4a4038; font-family: var(--font-display); font-size: 20px; }
.testi-person{ margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.testi-person img{ width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testi-person .name{ font-weight: 600; font-size: 14px; }
.testi-person .role{ font-size: 12px; color: #8a8075; }

/* =========================================================
   CZIVORA — WORK PROCESS
========================================================= */

.work-process {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 96px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(rgba(11,37,69,0.96), rgba(11,37,69,0.96)), url('images/Patterns.png');
  background-repeat: repeat, repeat;
  background-size: auto, 350px 350px;
  overflow: hidden;
}

.process-section-head{
  position: relative;
  z-index: 20;
  max-width: 1100px;
  margin: 0 auto var(--space-5);
  text-align: center;
  padding: 0 var(--space-3);
}
.process-section-head h2{
  font-size: clamp(32px, 4vw, 52px);
  margin-top: 14px;
  color: var(--on-navy);
}

/* =========================================================
   CONNECTOR SVG — no longer used; curves are now drawn per-card
   via ::after pseudo-elements so the same zigzag layout works
   at every breakpoint (see RESPONSIVE block below).
========================================================= */
.process-canvas .process-connectors {
  display: none !important;
}

/* =========================================================
   COMMON CARD — zigzag layout, all breakpoints
========================================================= */
.process-canvas .process-card {
  position: relative;
  box-sizing: border-box;
  border-radius: 24px;
  overflow: visible;
  z-index: 5;
  box-shadow: 0 12px 30px rgba(7, 26, 51, 0.055);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  width: 44%;
  height: auto;
  min-height: 0;
}

.process-canvas .process-card:nth-child(odd) {
  background: var(--cream);
  border: 1px solid rgba(184, 196, 206, 0.65);
}
.process-canvas .process-card:nth-child(even) {
  background: #F7F9FA;
  border: 1px solid rgba(184, 196, 206, 0.55);
}

.process-canvas .process-card:nth-child(odd)  { align-self: flex-start; }
.process-canvas .process-card:nth-child(even) { align-self: flex-end; }

.process-canvas .process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(7, 26, 51, 0.10);
  border-color: rgba(184, 196, 206, 0.95);
}

/* =========================================================
   NUMBER — CIRCLE badge above each card, all breakpoints
========================================================= */
.process-canvas .duration {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  z-index: 6;
  box-shadow: 0 4px 10px rgba(7,26,51,0.18);
}
.process-canvas .duration span {
  display: block;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.process-canvas .duration-green { background: var(--navy); }
.process-canvas .duration-green span { color: var(--on-navy); }
.process-canvas .duration-black { background: var(--navy-deep); }
.process-canvas .duration-black span { color: var(--on-navy); }

/* =========================================================
   CARD MAIN — centered content, all breakpoints
========================================================= */
.process-canvas .card-main {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 26px;
}

.process-canvas .card-top {
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.process-canvas .card-icon {
  position: relative;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.process-canvas .search-icon { background: rgba(184, 196, 206, 0.24); }
.process-canvas .search-icon::before {
  content: "";
  width: 8px; height: 8px;
  border: 1.4px solid var(--navy);
  border-radius: 50%;
}
.process-canvas .search-icon::after {
  content: "";
  position: absolute;
  width: 5px; height: 1.4px;
  background: var(--navy);
  transform: rotate(45deg);
  left: 16px; top: 17px;
}

.process-canvas .design-icon { background: rgba(184, 196, 206, 0.24); }
.process-canvas .design-icon::before {
  content: "✦";
  font-family: var(--font-body);
  font-size: 16px; line-height: 1;
  color: var(--navy);
}

.process-canvas .prototype-icon { background: rgba(184, 196, 206, 0.24); }
.process-canvas .prototype-icon::before {
  content: "";
  width: 9px; height: 14px;
  border: 1.3px solid var(--navy);
  border-radius: 2px;
}

.process-canvas .delivery-icon { background: rgba(184, 196, 206, 0.24); }
.process-canvas .delivery-icon::before {
  content: "✓";
  font-family: var(--font-body);
  font-size: 16px; line-height: 1;
  font-weight: 700;
  color: var(--navy);
}

.process-canvas .card-top h2 {
  margin: 0; padding: 0;
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--navy-deep);
}

.process-canvas .card-main p {
  margin: 12px 0 0 0;
  padding: 0;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--navy);
}

/* connector curve drawn under every card except the last, all breakpoints */
.process-canvas .process-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 140px;
  height: 100px;
}
.process-canvas .process-card:nth-child(odd):not(:last-child)::after {
  right: -70px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M10 0 C10 50,90 50,90 100' stroke='%23C7A14A' stroke-width='2.5' stroke-dasharray='3 7' fill='none' stroke-linecap='round'/></svg>");
}
.process-canvas .process-card:nth-child(even):not(:last-child)::after {
  left: -70px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M90 0 C90 50,10 50,10 100' stroke='%23C7A14A' stroke-width='2.5' stroke-dasharray='3 7' fill='none' stroke-linecap='round'/></svg>");
}

/* =========================================================
   MASTER CANVAS — fluid zigzag stack, same at every breakpoint
========================================================= */
.process-canvas {
  position: relative;
  width: 100%;
  max-width: 780px;
  height: auto;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 100px;
  color: var(--ink);
  font-family: var(--font-body);
  isolation: isolate;
}

.work-process { overflow: visible; }

/* =========================================================
   RESPONSIVE — PROCESS SECTION
   Same zigzag layout at every size now (desktop / laptop /
   tablet / mobile). Only spacing, card width and type-scale
   step down for smaller screens.
========================================================= */

/* ---------- DESKTOP / LAPTOP / TABLET: 601px and up ----------
   Same look as tablet on every larger screen too (per request) —
   it's fine if it stays this compact size instead of scaling up. */
@media (min-width: 601px) {
  .process-canvas { max-width: 640px; padding: 0 30px; gap: 90px; }

  .process-canvas .process-card { width: 48%; }

  .process-canvas .card-main { padding: 26px 24px; }

  .process-canvas .card-top h2 { font-size: 20px; }
  .process-canvas .card-main p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
  }

  .process-canvas .duration {
    top: -20px;
    width: 46px; height: 46px;
  }
  .process-canvas .duration span { font-size: 13px; }

  .process-canvas .process-card:not(:last-child)::after {
    width: 130px; height: 90px;
  }
  .process-canvas .process-card:nth-child(odd):not(:last-child)::after  { right: -60px; }
  .process-canvas .process-card:nth-child(even):not(:last-child)::after{ left: -60px; }
}

/* ---------- MOBILE: ≤600px ---------- */
@media (max-width: 600px) {
  .process-canvas { max-width: 420px; padding: 0 16px; gap: 70px; }

  .process-canvas .process-card { width: 56%; }

  .process-canvas .card-main { padding: 20px 16px; }

  .process-canvas .card-top h2 { font-size: 17px; }
  .process-canvas .card-main p {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.4;
  }

  .process-canvas .duration {
    top: -16px;
    width: 38px; height: 38px;
  }
  .process-canvas .duration span { font-size: 11px; }

  .process-canvas .process-card:not(:last-child)::after {
    width: 90px; height: 70px;
  }
  .process-canvas .process-card:nth-child(odd):not(:last-child)::after  { right: -42px; }
  .process-canvas .process-card:nth-child(even):not(:last-child)::after{ left: -42px; }
}
/* ---------------- Stats ---------------- */
.stat{ text-align: center; }
.stat .figure{ font-family: var(--font-display); font-size: clamp(38px,5vw,64px); color: var(--navy-deep); }
.stat .label{ margin-top: 6px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--navy-deep); }

/* ---------------- CTA band ---------------- */
.cta-band{
  border-radius: var(--radius);
  border: 1px solid rgba(184,196,206,.35);
  padding: var(--space-5) var(--space-3);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, rgba(184,196,206,.14), transparent 60%);
}
.cta-band h2{ font-size: clamp(30px,4vw,48px); color: var(--on-navy); max-width: 22ch; margin: 0 auto; }
.cta-band p{ margin-top: 14px; color: var(--on-navy-dim); }
.cta-band .hero-actions{ justify-content: center; margin-top: var(--space-4); }

/* ---------------- Footer ---------------- */
.site-footer{
   background-image: linear-gradient(rgba(7,26,51,0.95), rgba(7,26,51,0.95)), url('images/Patterns.png'); 
   background-repeat: repeat, repeat;
   background-size: auto, 350px 350px;
   padding: var(--space-6) 0 var(--space-3); 
   border-top: 1px solid rgba(184,196,206,.2);
   }
.footer-grid{ display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 900px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-logo{
    display: flex;
    align-items: center;
    justify-content: flex-start;   
    margin-bottom: 20px;
}

.footer-logo img{
    width: 150px;      
    height: auto;
    display: block;
}
.footer-about{ margin-top: 16px; 
  color: var(--white); 
  font-size: 16px;
   max-width: 34ch; }
.footer-col h4{ 
  font-size: 16px;
   letter-spacing: 2px; 
   text-transform: uppercase; 
   color: var(--silver); 
   margin-bottom: 18px; }
.footer-col ul li{ margin-bottom: 10px;
 font-size: 16px; 
 }
.footer-col ul li a{ 
  color: var(--white); 
  font-size: 16px; 
  transition: color .3s;
 }
.footer-col ul li a:hover{ color: var(--silver); }
.footer-social{ display: flex; gap: 12px; margin-top: 18px; }
.footer-social a{
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(184,196,206,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  transition: all .3s;
}
.footer-social a:hover{ background: var(--silver); color: var(--navy-black); border-color: var(--silver); }
.footer-bottom{
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(184,196,206,.15);
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between;
  font-size: 16px; color: var( --white);
}

/* ---------------- Floating widgets ---------------- */
.whatsapp-float{
  position: fixed; right: 26px; bottom: 26px; z-index: 400;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--silver); color: var(--navy-black);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  transition: transform .35s;
}
.whatsapp-float:hover{ transform: scale(1.08); }
.back-to-top{
  position: fixed; right: 26px; bottom: 92px; z-index: 400;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(5,13,31,.7); border: 1px solid rgba(184,196,206,.4);
  color: var(--silver); display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: all .35s;
}
.back-to-top.show{ opacity: 1; pointer-events: auto; }

/* ---------------- Reveal animation ---------------- */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------------- Forms ---------------- */
.form-field{ margin-bottom: 18px; }
.form-field label{ display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; color: var(--silver); }
.section--light .form-field label{ color: var(--navy); }
.form-field input, .form-field select, .form-field textarea{
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(184,196,206,.35);
  padding: 12px 4px;
  color: inherit;
  font-family: var(--font-body);
  font-size: 15px;
}
.section--light .form-field input,
.section--light .form-field select,
.section--light .form-field textarea{ border-bottom-color: var(--border); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline: none; border-bottom-color: var(--silver); }
.form-field select option{ color: var(--navy) !important; background: var(--white) !important; }
.form-field select option:checked,
.form-field select option:hover,
.form-field select option:focus{ color: var(--navy) !important; background: var(--silver-light) !important; }
.form-field textarea{ resize: vertical; min-height: 110px; }
.form-row{ display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px){ .form-row{ grid-template-columns: 1fr 1fr; } }

/* ---------------- FAQ ---------------- */
.faq-item{ border-bottom: 1px solid var(--border); }
.faq-q{
  width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; background: none; border: none;
  font-family: var(--font-display); font-size: 20px; color: var(--ink);
}
.faq-q .plus{ font-size: 22px; color: var(--navy); transition: transform .35s; }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq-a p{ padding-bottom: 22px; color: #6b6157; font-size: 15px; max-width: 70ch; }

/* ---------------- Before / After ---------------- */
.ba-slider{ position: relative; border-radius: var(--radius); overflow: hidden; user-select: none; border: 1px solid var(--border); }
.ba-slider img{ width: 100%; display: block; }
.ba-after{ position: absolute; inset: 0; overflow: hidden; width: 50%; }
.ba-after img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ba-handle{
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: var(--silver);
  transform: translateX(-1px);
  cursor: ew-resize;
}
.ba-handle::after{
  content: '⇔';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--silver); color: var(--navy-black);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.ba-label{ position: absolute; top: 16px; padding: 6px 14px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; background: rgba(5,13,31,.75); color: var(--on-navy); border-radius: 999px; }
.ba-label.before{ left: 16px; }
.ba-label.after{ right: 16px; }

/* ---------------- Blog ---------------- */
.blog-card img{ border-radius: var(--radius-sm); margin-bottom: 16px; aspect-ratio: 4/3; object-fit: cover; }
.blog-card .meta{ font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); }
.blog-card h3{ font-size: 22px; margin-top: 10px; }
.blog-card p{ margin-top: 8px; }

/* ---------------- Breadcrumb ---------------- */
.breadcrumb{ font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--on-navy-dim); }
.breadcrumb a:hover{ color: var(--silver); }

/* ---------------- Utility ---------------- */
.text-center{ text-align: center; }
.mt-0{ margin-top: 0 !important; }
.divider{ height: 1px; background: rgba(184,196,206,.25); margin: var(--space-5) 0; }
.section--light .divider, .section--white .divider{ background: var(--border); }
.flex-between{ display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pill{
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  background: rgba(184,196,206,.14); color: var(--silver); border: 1px solid rgba(184,196,206,.3);
}
.section--light .pill{ background: rgba(11,37,69,.06); color: var(--navy); border-color: rgba(11,37,69,.18); }
/* ---------------- Service photo card (services.html) ---------------- */
.service-photo-card{
  display: block;
  position: relative;
  padding-bottom: 4px;
}

.service-photo-card-img{
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.service-photo-card-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.service-photo-card:hover .service-photo-card-img img{ transform: scale(1.08); }

.service-photo-card-icon{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-navy);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin-top: -24px;
  margin-left: 20px;
  border: 4px solid var(--cream);
  transition: background .35s, transform .35s var(--ease);
}
.section--white .service-photo-card-icon{ border-color: var(--white); }
.service-photo-card:hover .service-photo-card-icon{
  background: var(--silver);
  color: var(--navy-black);
  transform: scale(1.08);
}

.service-photo-card h3{
  font-size: 21px;
  margin-top: 18px;
  color: var(--ink);
}
.service-photo-card p{
  margin-top: 8px;
  font-size: 14.5px;
  color: #6b6157;
  line-height: 1.55;
}

/* ================================================================
   GOLD THEME (toggle) — swaps the Navy/Silver palette for a
   Deep Red / Gold palette. Since both states stay dark (light text
   throughout), this is a simple token swap rather than a light/dark
   flip — no text-color or logo changes needed.
   ================================================================ */
body.theme-gold{
  --navy:        #7A1218;
  --navy-deep:   #580D12;
  --navy-black:  #3A080B;
  --silver:       #C9A227;
  --silver-light: #E4C25C;
}

/* A few spots use hard-coded rgba() instead of the variables above,
   so they need explicit overrides to follow the swap. */
body.theme-gold .site-footer{
  background-image: linear-gradient(rgba(58,8,11,0.92), rgba(58,8,11,0.92)), url('images/Patterns.png');
}
body.theme-gold .cta-band{
  background: radial-gradient(120% 140% at 50% 0%, rgba(201,162,39,.14), transparent 60%);
}
body.theme-gold .masonry-caption{
  background: linear-gradient(0deg, rgba(58,8,11,.92), transparent);
}
body.theme-gold .ba-label{ background: rgba(58,8,11,.75); }
body.theme-gold .back-to-top{ background: rgba(58,8,11,.7); }
body.theme-gold .card:hover{ box-shadow: 0 30px 60px rgba(58,8,11,.35); }
body.theme-gold .work-process{
  background-image: linear-gradient(rgba(122,18,24,0.96), rgba(122,18,24,0.96)), url('images/Patterns.png');
}

/* Theme toggle button (fixed, near the mobile menu button so it never collides with nav text) */
.theme-toggle{
  position: fixed;
  top: 14px; right: 78px;
  z-index: 550;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(237,241,245,.35);
  background: rgba(5,13,31,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: var(--on-navy);
  cursor: pointer;
  transition: all .3s;
}
.theme-toggle:hover{ border-color: var(--silver); color: var(--silver); transform: translateY(-2px); }
.theme-toggle .icon-gem{ display: none; }
.theme-toggle .icon-moon{ display: block; }
body.theme-gold .theme-toggle{ background: rgba(58,8,11,.4); border-color: rgba(228,194,92,.4); }
body.theme-gold .theme-toggle:hover{ border-color: var(--silver); color: var(--silver); }
body.theme-gold .theme-toggle .icon-gem{ display: block; }
body.theme-gold .theme-toggle .icon-moon{ display: none; }
@media (min-width: 1080px){
  .theme-toggle{ top: 24px; right: 16px; }
}
@media (min-width: 1300px){
  .theme-toggle{ right: 44px;}
}

/* ================================================================
   HEADER FIX — Mobile + Tablet (below 1080px, hamburger breakpoint)
   Logo moves to the left. Theme-toggle button, which was previously
   `position: fixed` and could overlap the logo/hamburger, now sits
   inside the nav grid alongside them.
   ================================================================ */
@media (max-width: 1079px){
  .nav-grid{
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  .logo{
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
  .logo img{
    height: 42px;
  }

  .nav-toggle{
    grid-column: 3;
    justify-self: end;
    width: 40px; height: 40px;
  }

  /* theme-toggle stays position:fixed (it's not a grid child),
     just shift it left of the hamburger so the two never overlap */
  .theme-toggle{
    top: 14px;
    right: 68px;
    width: 40px; height: 40px;
  }
}

@media (max-width: 480px){
  .logo img{ height: 36px; }
  .container{ padding: 0 var(--space-2); }
}
/* ================================================================
   SERVICES MOSAIC — services.html
   Staggered photo/card grid (2 rows x 4 columns = 8 services),
   replaces the old uniform service-photo-card grid on this page.
   ================================================================ */
.services-mosaic{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.services-mosaic + .services-mosaic{ margin-top: 24px; }
 
.mosaic-col{ display: block; }
.mosaic-col-inner{ display: flex; flex-direction: column; gap: var(--space-3); }
.mosaic-col--offset .mosaic-col-inner{ margin-top: 24px; }
 
.mosaic-photo{
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 4.6;
  border: 1px solid var(--border);
}
.mosaic-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mosaic-col:hover .mosaic-photo img{ transform: scale(1.06); }
 
.service-mini-card{ padding: var(--space-3); }
.service-mini-card .card-icon{ width: 44px; height: 44px; }
.service-mini-card h3{ font-size: 20px; margin-top: 14px; }
.service-mini-card p{ margin-top: 8px; font-size: 14px; min-height: 62px; }
 
@media (max-width: 980px){
  .services-mosaic{ grid-template-columns: repeat(2, 1fr); }
  .mosaic-col--offset .mosaic-col-inner{ margin-top: 0; }
  .services-mosaic .mosaic-col:nth-child(2n) .mosaic-col-inner{ margin-top: var(--space-4); }
}
@media (max-width: 560px){
  .services-mosaic{ grid-template-columns: 1fr; }
  .services-mosaic .mosaic-col-inner{ margin-top: 0 !important; }
  .mosaic-photo{ aspect-ratio: 4/3; }
}

/* ================================================================
   CONTACT PAGE — responsive fixes
   (contact.html: enquiry form + details/map split, grid-2 layout)
   ================================================================ */

/* 1) Google Map iframe carries hardcoded width="600" height="450"
   attributes. Unlike <img>, an iframe does NOT shrink with
   max-width:100% alone once it has explicit width/height attrs —
   it was overflowing its rounded container and causing horizontal
   scroll on tablet/mobile. Force it fluid at every breakpoint. */
.reveal iframe{
  width: 100% !important;
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 220px;
  display: block;
  border: 0;
}
@media (min-width: 700px){
  .reveal iframe{ min-height: 280px; }
}

/* 2) File upload field (image/PDF attachment) — style the native
   file input so it matches the underline inputs instead of showing
   the browser's default grey button on the dark form panel. */
.form-field input[type="file"]{
  padding: 10px 0;
  color: var(--on-navy-dim);
  font-size: 13.5px;
}
.section--light .form-field input[type="file"],
.section--white .form-field input[type="file"]{
  color: #6b6157;
}
.form-field input[type="file"]::file-selector-button{
  padding: 8px 18px;
  margin-right: 14px;
  border-radius: 999px;
  border: 1px solid rgba(184,196,206,.4);
  background: transparent;
  color: var(--on-navy);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all .3s;
}
.form-field input[type="file"]::file-selector-button:hover{
  background: var(--silver);
  color: var(--navy-black);
  border-color: var(--silver);
}
.section--light .form-field input[type="file"]::file-selector-button,
.section--white .form-field input[type="file"]::file-selector-button{
  border-color: var(--border);
  color: var(--navy);
}

/* 3) The form/details two-up grid (.grid-2) had no tablet step —
   between 700px and 1079px the two panels sat edge to edge with the
   same tight gap as mobile, and on desktop it could feel loose.
   Give it a proper gap at each range. */
@media (min-width: 700px) and (max-width: 1079px){
  .grid-2{ gap: var(--space-3); }
}
@media (min-width: 1080px){
  .grid-2{ gap: var(--space-4); }
}

/* 4) Contact detail cards (Email / Phone / Office / Business Hours)
   sit in a NESTED .grid-2 inside the outer form/details .grid-2.
   At 700px+ that nested grid also went 2-up, which is fine on
   tablets/desktop, but on small phones (<481px) the Office address
   line wrapped awkwardly in a half-width card. Stack it there. */
@media (max-width: 480px){
  .grid-2 .grid-2{ grid-template-columns: 1fr; }
}

/* 5) Page-hero visual: on phones the right-side portrait image sits
   directly behind the short heading/eyebrow text and mostly just
   adds visual noise at that size. Fade it down, then drop it once
   the viewport is too narrow for it to read as a photo at all. */
@media (max-width: 640px){
  .page-hero-bg{ opacity: .2; width: 75%; }
}
@media (max-width: 420px){
  .page-hero-bg{ display: none; }
}

/* 6) Keep the success/error message under the submit button from
   shifting layout when it wraps to two lines on narrow screens. */
.form-note{ min-height: 18px; line-height: 1.4; }

/* ================================================================
   CUSTOM DROPDOWN — "Service Needed" select
   The native <select> popup is styled by the browser/OS (white
   panel, blue highlight in Chrome) and can't be themed with CSS
   alone. This replaces the visible control with a fully themed
   dropdown, while a hidden native <select> (.custom-select-native)
   still carries the real value for form submission.
   ================================================================ */
.custom-select{ position: relative; }

.custom-select-trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(184,196,206,.35);
  padding: 12px 4px;
  color: inherit;
  font-family: var(--font-body);
  font-size: 15px;
  text-align: left;
}
.section--light .custom-select-trigger,
.section--white .custom-select-trigger{ border-bottom-color: var(--border); }

.custom-select-trigger:focus-visible{ outline: none; border-bottom-color: var(--silver); }
.custom-select.is-open .custom-select-trigger{ border-bottom-color: var(--silver); }

.custom-select-arrow{ flex-shrink: 0; color: var(--silver); transition: transform .3s var(--ease); }
.custom-select.is-open .custom-select-arrow{ transform: rotate(180deg); }

.custom-select-options{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: linear-gradient(rgba(11,37,69,.97), rgba(11,37,69,.97));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(184,196,206,.22);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 48px rgba(5,13,31,.4);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: max-height .3s var(--ease), opacity .25s var(--ease), transform .3s var(--ease);
}
.custom-select.is-open .custom-select-options{
  max-height: 280px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(184,196,206,.45) transparent;
}
.custom-select-options::-webkit-scrollbar{ width: 6px; }
.custom-select-options::-webkit-scrollbar-track{ background: transparent; }
.custom-select-options::-webkit-scrollbar-thumb{
  background: rgba(184,196,206,.45);
  border-radius: 999px;
}
.custom-select-options::-webkit-scrollbar-thumb:hover{ background: rgba(184,196,206,.7); }

.custom-select-options li{
  padding: 12px 14px;
  font-size: 14px;
  color: var(--on-navy);
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.custom-select-options li:hover,
.custom-select-options li.active{
  background: var(--silver);
  color: var(--navy-black);
}
.custom-select-options li.selected{ color: var(--silver); font-weight: 600; }
.custom-select-options li.selected:hover{ color: var(--navy-black); }

/* Light-section variant, in case this dropdown is reused on a
   cream/white panel elsewhere on the site */
.section--light .custom-select-options,
.section--white .custom-select-options{
  background: var(--white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--border);
  box-shadow: 0 20px 40px rgba(17,17,17,.12);
  scrollbar-color: rgba(11,37,69,.3) transparent;
}
.section--light .custom-select-options::-webkit-scrollbar-thumb,
.section--white .custom-select-options::-webkit-scrollbar-thumb{
  background: rgba(11,37,69,.25);
}
.section--light .custom-select-options::-webkit-scrollbar-thumb:hover,
.section--white .custom-select-options::-webkit-scrollbar-thumb:hover{
  background: rgba(11,37,69,.4);
}
.section--light .custom-select-options li,
.section--white .custom-select-options li{ color: var(--ink); }
.section--light .custom-select-options li:hover,
.section--white .custom-select-options li:hover,
.section--light .custom-select-options li.active,
.section--white .custom-select-options li.active{
  background: var(--navy);
  color: var(--on-navy);
}
.section--light .custom-select-options li.selected,
.section--white .custom-select-options li.selected{ color: var(--navy); }

/* Hidden native <select> — kept in the DOM (not display:none) so
   its value is still picked up by FormData on submit, but visually
   and functionally replaced by the custom dropdown above. */
.custom-select-native{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/* Lightbox popup */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5,13,31,.92);
  padding: 40px;
}
.lightbox.is-open{ display: flex; }
.lightbox-img{
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lightbox-caption{
  position: absolute;
  bottom: 30px; left: 0; right: 0;
  text-align: center;
  color: var(--on-navy);
  font-family: var(--font-display);
  font-size: 18px;
}
.lightbox-close{
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(237,241,245,.35);
  background: rgba(5,13,31,.5);
  color: var(--on-navy); font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-prev, .lightbox-next{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(237,241,245,.35);
  background: rgba(5,13,31,.5);
  color: var(--on-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.lightbox-prev{ left: 24px; }
.lightbox-next{ right: 24px; }
.lightbox-prev:hover, .lightbox-next:hover, .lightbox-close:hover{
  background: var(--silver); color: var(--navy-black); border-color: var(--silver);
}
@media (max-width: 640px){
  .lightbox-prev, .lightbox-next{ width: 40px; height: 40px; font-size: 14px; }
  .lightbox-prev{ left: 10px; }
  .lightbox-next{ right: 10px; }
}

/* ===== Service detail content (theme-aware) ===== */
.svc-content{
  background: rgba(250,248,245,0.04);
  border: 1px solid rgba(184,196,206,.22);
  border-radius: var(--radius);
  padding: var(--space-4);
  color: var(--on-navy);
  font-size: 17px;
  line-height: 1.85;
}
.svc-content p{
  margin: 0 0 18px;
  color: var(--on-navy-dim);
}
.svc-heading{
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  color: var(--silver);
  margin: 40px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(184,196,206,.3);
}
.svc-heading:first-child{ margin-top: 0; }
.svc-list{
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.svc-list li{
  position: relative;
  padding: 12px 16px 12px 42px;
  margin-bottom: 10px;
  background: rgba(184,196,206,.08);
  border-left: 3px solid var(--silver);
  border-radius: var(--radius-sm);
  color: var(--on-navy);
}
.svc-list li::before{
  content: "✦";
  position: absolute;
  left: 15px;
  color: var(--silver);
}
@media (max-width: 600px){
  .svc-content{ padding: var(--space-3); }
}

/* Light background variant (if service-detail section uses section--light) */
.section--light .svc-content{ background: var(--white); border-color: var(--border); }
.section--light .svc-content p,
.section--light .svc-content .svc-list li{ color: var(--ink); }
.section--light .svc-heading{ color: var(--navy); border-bottom-color: var(--border); }
.section--light .svc-list li{ background: var(--cream); border-left-color: var(--navy); }
.section--light .svc-list li::before{ color: var(--navy); }