/* Font loaded via <link> in HTML for performance — no @import needed */

/* ================================================================
   İSTANBUL EGZOST — Design System
   Aesthetic: Industrial Automotive Luxury
   Inspired by: Porsche (60%) · Akrapovič (30%) · Lamborghini (10%)
   ================================================================

   Architecture:
   ─ 1. Tokens (custom properties)
   ─ 2. Reset & Base
   ─ 3. Typography
   ─ 4. Layout (containers, sections, grids)
   ─ 5. Components (buttons, cards, pills, tags, lists)
   ─ 6. Navigation & Header
   ─ 7. Hero
   ─ 8. Content Patterns (trust bar, timeline, process, FAQ, table)
   ─ 9. Media System
   ─ 10. Page-Specific (services, blog, gallery, contact, error)
   ─ 11. Footer
   ─ 12. Animation & Motion
   ─ 13. Focus & Accessibility
   ─ 14. Responsive Breakpoints
   ================================================================ */


/* ================================================================
   1. TOKENS
   ================================================================ */

:root {
  /* ── Palette ── */
  --color-bg:            #0a0a0b;
  --color-bg-elev:       #111214;
  --color-bg-soft:       #16181b;
  --color-bg-panel:      #1c1f23;

  --color-text:          #f0f1f4;
  --color-text-muted:    #b4bac5;
  --color-text-soft:     #878f9b;

  --color-accent:        #b79263;
  --color-accent-strong: #d5b183;
  --color-metal:         #c0c8d2;
  --color-performance:   #a01e26;

  --color-border:        rgba(255,255,255,0.06);
  --color-border-soft:   rgba(255,255,255,0.04);
  --color-border-strong: rgba(213,177,131,0.22);

  /* ── Spacing (8 px rhythm) ── */
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-96:  6rem;
  --space-128: 8rem;

  /* ── Radius ── */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* ── Shadows ── */
  --shadow-soft:     0 2px 10px rgba(0,0,0,0.10);
  --shadow-card:     0 4px 18px rgba(0,0,0,0.12);
  --shadow-elevated: 0 8px 28px rgba(0,0,0,0.16);

  /* ── Motion ── */
  --transition-fast: 160ms ease;
  --transition-base: 260ms cubic-bezier(0.22,1,0.36,1);

  /* ── Layout ── */
  --container-max:    1240px;
  --container-narrow: 920px;
  --header-height:    72px;
}


/* ================================================================
   2. RESET & BASE
   ================================================================ */

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  margin:0;
  min-height:100vh;
  color:var(--color-text);
  font-family:"Sora","Segoe UI",system-ui,sans-serif;
  font-weight:400;
  line-height:1.7;
  letter-spacing:0.005em;
  background:var(--color-bg);
}

/* Subtle diagonal texture — very faint */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0.04;
  background-image:repeating-linear-gradient(
    115deg,
    rgba(255,255,255,0.015) 0,
    rgba(255,255,255,0.015) 1px,
    transparent 1px,
    transparent 44px
  );
}

img,video,iframe{display:block;max-width:100%}

a{
  color:inherit;
  text-decoration:none;
  transition:color var(--transition-fast);
}
a:hover{color:var(--color-accent-strong)}

p{
  margin:0 0 var(--space-16);
  color:var(--color-text-muted);
  font-size:0.935rem;
  line-height:1.72;
}

ul,ol{margin:0;padding:0}


/* ================================================================
   3. TYPOGRAPHY
   ================================================================ */

h1,h2,h3,h4{
  margin:0 0 var(--space-16);
  line-height:1.15;
  text-transform:none;
  letter-spacing:-0.01em;
  font-family:"Sora","Segoe UI",system-ui,sans-serif;
  font-weight:600;
  color:#eef0f4;
}

h1{
  font-size:clamp(2rem,4.5vw,3.5rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  font-weight:700;
}

h2{
  font-size:clamp(1.45rem,2.6vw,2.15rem);
  letter-spacing:-0.014em;
}

h3{
  font-size:clamp(1.08rem,1.6vw,1.35rem);
  letter-spacing:-0.005em;
}

h4{
  font-size:clamp(0.96rem,1.2vw,1.12rem);
}

small,.text-small{font-size:0.875rem}


/* ================================================================
   4. LAYOUT
   ================================================================ */

/* ── Containers ── */
.container{
  width:min(100% - 2.5rem,var(--container-max));
  margin-inline:auto;
}

.container-narrow{
  width:min(100% - 2.5rem,var(--container-narrow));
  margin-inline:auto;
}

/* ── Sections ── */
.section{
  padding-block:clamp(var(--space-80),8vw,var(--space-128));
}

.section-tight{
  padding-block:clamp(var(--space-48),5vw,var(--space-80));
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-32);
  margin-bottom:clamp(var(--space-32),3.5vw,var(--space-48));
}

/* ── Grid System ── */
.grid{
  display:grid;
  gap:clamp(var(--space-20),2.5vw,var(--space-24));
}

.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}


/* ================================================================
   5. COMPONENTS
   ================================================================ */

/* ── Skip Link ── */
.skip-link{
  position:absolute;
  top:-120px;
  left:var(--space-16);
  z-index:3000;
  padding:0.6rem 0.9rem;
  border-radius:var(--radius-sm);
  font-weight:600;font-size:0.8rem;
  background:linear-gradient(135deg,var(--color-accent),var(--color-accent-strong));
  color:#070708;
}
.skip-link:focus{top:var(--space-12)}

/* ── Kicker (section label) ── */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:var(--space-8);
  margin-bottom:var(--space-12);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.68rem;
  color:var(--color-accent-strong);
  font-weight:600;
}
.kicker::before{
  content:"";
  width:1.1rem;
  height:1px;
  background:var(--color-accent-strong);
  opacity:0.6;
}

.muted{color:var(--color-text-soft)}

/* ── Pill & Tag ── */
.pill{
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
  padding:0.22rem 0.55rem;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:rgba(255,255,255,0.02);
  color:#c8cfd8;
  text-transform:uppercase;
  font-size:0.62rem;
  font-weight:500;
  letter-spacing:0.1em;
}

.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-8);
}

.tag{
  padding:0.22rem 0.55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  font-size:0.68rem;
  color:#b4bcc6;
  letter-spacing:0.02em;
}

/* ── Button System ── */
.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-12);
}

.btn{
  --btn-height:2.32rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--btn-height);
  padding:0.4rem 0.95rem;
  border-radius:var(--radius-xs);
  border:1px solid transparent;
  font-family:"Sora","Segoe UI",system-ui,sans-serif;
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  line-height:1;
  cursor:pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}
.btn:hover{opacity:0.92}
.btn:active{opacity:0.85}

.btn-primary{
  color:#08080a;
  border-color:transparent;
  background:linear-gradient(135deg,#b89468,#d4b285);
  box-shadow:0 1px 6px rgba(0,0,0,0.12);
}
.btn-primary:hover{
  color:#050506;
  box-shadow:0 2px 10px rgba(0,0,0,0.18);
  opacity:1;
}

.btn-secondary{
  color:#e0e4ea;
  border-color:rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.025);
}
.btn-secondary:hover{
  border-color:rgba(213,177,131,0.25);
  background:rgba(255,255,255,0.04);
  opacity:1;
}

.btn-ghost{
  color:#d0d6de;
  border-color:rgba(255,255,255,0.08);
  background:transparent;
}
.btn-ghost:hover{
  border-color:rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.02);
  opacity:1;
}

.btn-link,.btn-text{
  min-height:auto;
  padding:0;
  border:0;
  border-radius:0;
  color:var(--color-accent-strong);
  background:transparent;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.1em;
}
.btn-link:hover,.btn-text:hover{
  color:#efc596;
  opacity:1;
}

/* ── Card System ── */
.card{
  position:relative;
  overflow:hidden;
  height:100%;
  padding:clamp(var(--space-20),1.8vw,var(--space-24));
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.05);
  background:rgba(17,19,22,0.6);
  box-shadow:var(--shadow-soft);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}
.card:hover{
  border-color:rgba(213,177,131,0.12);
  box-shadow:var(--shadow-card);
}

.card h3,.card h4{margin-bottom:var(--space-8)}

.icon-dot{
  width:1.3rem;
  height:1.3rem;
  margin-bottom:var(--space-12);
  border-radius:var(--radius-xs);
  background:linear-gradient(140deg,#c8d0d8,#8a95a2);
  box-shadow:0 1px 4px rgba(0,0,0,0.10);
}

/* ── Check List ── */
.check-list{
  list-style:none;
  display:grid;
  gap:var(--space-12);
}
.check-list li{
  position:relative;
  padding-left:1.2rem;
  color:#c8d0d8;
  font-size:0.92rem;
}
.check-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55rem;
  width:0.45rem;
  height:0.45rem;
  border-radius:0.12rem;
  background:linear-gradient(135deg,#c0c8d0,#8a95a2);
}

/* ── Notice ── */
.notice{
  border-left:2px solid var(--color-performance);
  border-radius:var(--radius-sm);
  padding:var(--space-16);
  font-weight:600;
  font-size:0.88rem;
  color:#ecc8cb;
  background:rgba(160,30,38,0.08);
}


/* ================================================================
   6. NAVIGATION & HEADER
   ================================================================ */

.site-header{
  position:sticky;
  top:0;
  z-index:1200;
  min-height:var(--header-height);
  border-bottom:1px solid var(--color-border-soft);
  background:rgba(8,8,10,0.84);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.header-inner{
  min-height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-24);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--space-12);
  font-family:"Sora","Segoe UI",system-ui,sans-serif;
  letter-spacing:0.02em;
  font-size:1rem;
  font-weight:600;
}

.brand-mark{
  width:2rem;
  height:2rem;
  border-radius:var(--radius-xs);
  display:grid;
  place-content:center;
  color:#0a0b0c;
  font-size:0.7rem;
  font-weight:700;
  background:linear-gradient(140deg,#d0d7de,#96a1ad);
  box-shadow:0 1px 4px rgba(0,0,0,0.12);
}

.brand span:last-child{line-height:1}

.brand-logo-img{
  display:block;
  height:54px;
  width:auto;
  max-width:200px;
  object-fit:contain;
  filter:brightness(0.98) contrast(1.03);
  transition:filter 200ms ease, opacity 200ms ease;
}
.brand:hover .brand-logo-img{
  filter:brightness(1.05) contrast(1.06);
  opacity:0.90;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:var(--space-20);
}

.nav-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:var(--space-4);
}

.nav-list a{
  padding:0.32rem 0.55rem;
  border-radius:var(--radius-xs);
  color:#c4cbd4;
  font-size:0.77rem;
  font-weight:500;
  letter-spacing:0.025em;
  transition:color var(--transition-fast),background var(--transition-fast);
}

.nav-list a:hover,
.nav-list a[aria-current="page"]{
  color:#e4e8ee;
  background:rgba(255,255,255,0.06);
}

.nav-toggle{
  display:none;
  width:2.4rem;
  height:2.4rem;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.025);
  color:#e4e8ee;
  font-size:0.66rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

main section[id]{
  scroll-margin-top:calc(var(--header-height) + 1rem);
}


/* ================================================================
   7. HERO
   ================================================================ */

.hero{
  position:relative;
  overflow:hidden;
  min-height:clamp(520px,68vh,700px);
  padding-top:clamp(var(--space-80),10vw,var(--space-128));
  padding-bottom:clamp(var(--space-48),5vw,var(--space-64));
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(96deg,rgba(7,8,9,0.90) 18%,rgba(7,8,9,0.52) 54%,rgba(7,8,9,0.82) 100%),
    url("https://images.unsplash.com/photo-1611821064430-0d40291d0f0b?auto=format&fit=crop&w=2200&q=80") center/cover no-repeat;
}

/* Subtle warm glow — very restrained */
.hero::after{
  content:"";
  position:absolute;
  right:-10%;
  top:12%;
  width:18rem;
  height:18rem;
  background:radial-gradient(circle,rgba(160,30,38,0.05),transparent 70%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  display:grid;
  gap:clamp(var(--space-40),5vw,var(--space-64));
  grid-template-columns:minmax(0,1.4fr) minmax(260px,0.6fr);
  align-items:start;
}

.hero-copy{max-width:660px}

.hero-copy h1{
  max-width:16ch;
  margin-bottom:var(--space-20);
}

.hero-copy > p{
  max-width:52ch;
  margin-bottom:var(--space-20);
  color:#bcc4ce;
  line-height:1.76;
  font-size:clamp(0.9rem,1vw,0.98rem);
}

.hero-tags{margin-bottom:var(--space-20)}

.hero-panel{
  padding:clamp(var(--space-20),2vw,var(--space-24));
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(155deg,rgba(14,16,18,0.72),rgba(14,16,18,0.50));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-soft);
  justify-self:end;
  max-width:370px;
}

.hero-panel h2{
  font-size:clamp(1.1rem,1.4vw,1.32rem);
  max-width:22ch;
  margin-bottom:var(--space-12);
}

.hero-panel p{
  font-size:0.86rem;
  line-height:1.72;
}

.hero .btn{
  --btn-height:2.28rem;
  padding-inline:0.85rem;
  font-size:0.7rem;
}

.hero-panel .btn-row{gap:var(--space-8)}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-12);
  margin-top:var(--space-32);
}

.stat{
  padding:0.7rem 0.8rem;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.05);
  background:rgba(255,255,255,0.015);
}

.stat b{
  display:block;
  margin-bottom:0.1rem;
  color:#eef0f4;
  font-family:"Sora","Segoe UI",system-ui,sans-serif;
  font-size:clamp(1.15rem,1.5vw,1.35rem);
  font-weight:600;
  letter-spacing:-0.01em;
}

.stat span{
  font-size:0.7rem;
  letter-spacing:0.04em;
  color:#9aa3af;
}


/* ================================================================
   8. CONTENT PATTERNS
   ================================================================ */

/* ── Trust Bar ── */
.trust-bar{
  border-block:1px solid var(--color-border-soft);
  background:rgba(10,10,12,0.65);
}

.trust-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-12);
  padding-block:var(--space-16);
}

.trust-item{
  padding:0.55rem 0.7rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--color-border-soft);
  background:rgba(255,255,255,0.01);
  text-align:center;
  font-size:0.7rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#bcc4ce;
}

/* ── About Preview ── */
.about-preview{align-items:start}

/* ── Timeline ── */
.timeline{
  position:relative;
  display:grid;
  gap:var(--space-16);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.timeline::before{
  content:"";
  position:absolute;
  top:1.1rem;
  left:1.4rem;
  right:1.4rem;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(213,177,131,0.18),transparent);
}

.timeline-item{
  position:relative;
  padding:var(--space-20);
  padding-top:var(--space-32);
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:rgba(255,255,255,0.01);
}
.timeline-item::before{
  content:"";
  position:absolute;
  top:0.72rem;
  left:1rem;
  width:0.55rem;
  height:0.55rem;
  border-radius:50%;
  background:var(--color-accent-strong);
  box-shadow:0 0 0 4px rgba(213,177,131,0.06);
}

.timeline-year{
  display:inline-block;
  margin-bottom:var(--space-8);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:600;
  font-size:0.7rem;
  color:#e0bc84;
}

/* ── Process Steps ── */
.process-steps{
  counter-reset:process;
  display:grid;
  gap:var(--space-20);
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.process-step{
  position:relative;
  padding:var(--space-20);
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:rgba(17,19,22,0.55);
}
.process-step::before{
  counter-increment:process;
  content:counter(process,decimal-leading-zero);
  display:inline-flex;
  margin-bottom:var(--space-12);
  padding:0.18rem 0.5rem;
  border-radius:999px;
  color:#08080a;
  background:linear-gradient(120deg,#bec8d4,#e0e5eb);
  font-family:"Sora","Segoe UI",system-ui,sans-serif;
  font-weight:600;
  letter-spacing:0.04em;
  font-size:0.68rem;
}

/* ── Table ── */
.table-wrap{
  overflow-x:auto;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:rgba(255,255,255,0.01);
}

table{width:100%;min-width:700px;border-collapse:collapse}

th,td{
  text-align:left;
  padding:0.8rem 1rem;
  border-bottom:1px solid var(--color-border-soft);
}

th{
  color:#e0b87e;
  font-family:"Sora","Segoe UI",system-ui,sans-serif;
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.012);
}

td{font-size:0.88rem}
tbody tr:hover td{background:rgba(255,255,255,0.015)}

/* ── FAQ ── */
.faq-list{display:grid;gap:var(--space-8)}

.faq-item{
  border-radius:var(--radius-sm);
  border:1px solid var(--color-border);
  background:rgba(255,255,255,0.01);
  overflow:clip;
  transition:border-color var(--transition-fast);
}
.faq-item:hover{border-color:rgba(255,255,255,0.08)}

.faq-question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-16);
  border:0;
  background:transparent;
  color:var(--color-text);
  text-align:left;
  font:inherit;
  font-weight:600;
  font-size:0.92rem;
  padding:var(--space-16);
  cursor:pointer;
  transition:color var(--transition-fast);
}
.faq-question:hover{color:#fff}

.faq-question::after{
  content:"+";
  flex-shrink:0;
  font-size:1.05rem;
  line-height:1;
  color:var(--color-accent-strong);
  opacity:0.6;
}
.faq-question[aria-expanded="true"]::after{content:"\2013"}

.faq-answer{
  display:none;
  padding:0 var(--space-16) var(--space-16);
}
.faq-answer p{margin:0}
.faq-item.open .faq-answer{display:block}


/* ================================================================
   9. MEDIA SYSTEM
   ================================================================ */

.media-grid{
  display:grid;
  gap:var(--space-16);
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.media-block{display:grid;gap:var(--space-8)}

.media-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:#101214;
  aspect-ratio:16/9;
}
.media-frame.is-square{aspect-ratio:1/1}
.media-frame.is-portrait{aspect-ratio:4/5}

.media-frame img,
.media-frame video,
.media-frame iframe{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 550ms cubic-bezier(0.22,1,0.36,1);
}
.media-frame:hover img,
.media-frame:hover video{
  transform:scale(1.015);
}

.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,0.20));
}

.media-caption{
  margin:0;
  font-size:0.76rem;
  color:var(--color-text-soft);
  letter-spacing:0.01em;
}

.media-placeholder{
  display:grid;
  place-content:center;
  color:#a8b0ba;
  text-align:center;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:0.7rem;
  background:linear-gradient(140deg,rgba(255,255,255,0.03),rgba(255,255,255,0.008));
}


/* ================================================================
   10. PAGE-SPECIFIC
   ================================================================ */

/* ── Breadcrumb & Page Hero ── */
.breadcrumb{
  margin-bottom:var(--space-20);
  letter-spacing:0.04em;
  font-size:0.74rem;
  color:var(--color-text-soft);
}
.breadcrumb a{color:#b8c0ca}

.page-hero{
  padding-top:clamp(var(--space-48),6vw,var(--space-80));
  padding-bottom:clamp(var(--space-40),4.5vw,var(--space-64));
  border-bottom:1px solid var(--color-border-soft);
  background:linear-gradient(180deg,rgba(14,16,18,0.75),rgba(10,11,12,0.45));
}

.page-hero .container,
.page-hero .container-narrow{
  display:grid;
  gap:var(--space-12);
}
.page-hero p{max-width:62ch}

/* ── Content Section ── */
.content-section{
  padding-block:clamp(var(--space-48),5vw,var(--space-80));
}

/* ── Article System ── */
.article-wrap{display:grid;gap:var(--space-40)}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-8);
}

.article-content{display:grid;gap:var(--space-20)}

.article-content ul,
.article-content ol{
  padding-left:1.2rem;
  color:var(--color-text-muted);
}
.article-content li{margin-bottom:var(--space-8)}

/* Editorial styling for blog h2 */
.article-content h2{
  margin-top:var(--space-8);
  padding-bottom:var(--space-8);
  border-bottom:1px solid var(--color-border-soft);
}

.related-links{
  display:grid;
  gap:var(--space-20);
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* ── Stat Strip ── */
.stat-strip{
  display:grid;
  gap:var(--space-12);
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.stat-strip .card{
  text-align:center;
  padding:var(--space-16);
}

.stat-strip b{
  display:block;
  color:#e0b87e;
  font-family:"Sora","Segoe UI",system-ui,sans-serif;
  font-size:clamp(1.1rem,1.7vw,1.45rem);
  font-weight:600;
  letter-spacing:-0.01em;
}

/* ── Service & Blog Card Pills ── */
.blog-card .pill,
.service-card .pill{margin-bottom:var(--space-12)}

.article-list{display:grid;gap:var(--space-32)}

/* ── Services — showcase modules ── */
.service-showcase{display:grid;gap:var(--space-24)}

.service-module{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  gap:var(--space-24);
  align-items:stretch;
}

.service-content{
  display:grid;
  gap:var(--space-16);
  align-content:start;
}

.service-points{
  list-style:none;
  display:grid;
  gap:var(--space-8);
}
.service-points li{
  position:relative;
  padding-left:1rem;
  color:#c0c8d2;
  font-size:0.88rem;
}
.service-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55rem;
  width:0.3rem;
  height:0.3rem;
  border-radius:50%;
  background:var(--color-accent-strong);
  opacity:0.7;
}

/* ── Gallery ── */
.gallery-grid{
  display:grid;
  gap:var(--space-20);
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.gallery-item{
  position:relative;
  overflow:hidden;
  min-height:200px;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:linear-gradient(150deg,rgba(160,30,38,0.04),rgba(22,25,30,0.80));
  transition:border-color var(--transition-base);
}
.gallery-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(150deg,transparent 34%,rgba(0,0,0,0.35));
}
.gallery-item:hover{
  border-color:var(--color-border-strong);
}

.gallery-label{
  position:absolute;
  left:var(--space-16);
  bottom:var(--space-16);
  z-index:1;
  max-width:85%;
  font-weight:600;
  font-size:0.86rem;
  line-height:1.35;
}

/* ── CTA Banner ── */
.cta-banner{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid rgba(213,177,131,0.10);
  padding:clamp(var(--space-24),3vw,var(--space-40));
  background:linear-gradient(120deg,rgba(160,30,38,0.05),rgba(16,18,21,0.90) 50%,rgba(213,177,131,0.03) 100%);
  box-shadow:var(--shadow-soft);
}

/* ── Contact ── */
.contact-grid{
  display:grid;
  gap:var(--space-24);
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.contact-card{
  padding:var(--space-20);
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:rgba(255,255,255,0.008);
}

/* ── Blog System ── */
.blog-grid{
  display:grid;
  gap:var(--space-24);
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.blog-index-card{
  display:grid;
  gap:var(--space-12);
}
.blog-index-card h2,
.blog-index-card h3{margin-bottom:var(--space-4)}
.blog-index-card .media-frame{border-radius:var(--radius-sm)}

.article-shell{display:grid;gap:var(--space-32)}
.article-feature{margin-bottom:var(--space-4)}

.article-layout{
  display:grid;
  gap:var(--space-40);
  grid-template-columns:minmax(0,1fr) minmax(240px,280px);
}

.article-sidebar{
  position:sticky;
  top:calc(var(--header-height) + var(--space-16));
  align-self:start;
  display:grid;
  gap:var(--space-12);
}
.article-sidebar .card{padding:var(--space-16)}
.article-inline-media{margin-block:var(--space-16)}
.article-end-cta{margin-top:var(--space-16)}

/* ── Map Box ── */
.map-box{
  min-height:240px;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:linear-gradient(150deg,rgba(14,16,19,0.85),rgba(160,30,38,0.04));
  display:grid;
  place-content:center;
  text-align:center;
  padding:var(--space-20);
}

/* ── Error Page ── */
.error-wrap{
  min-height:calc(100vh - 300px);
  display:grid;
  place-content:center;
  text-align:center;
  gap:var(--space-16);
}


/* ================================================================
   11. FOOTER
   ================================================================ */

.site-footer{
  margin-top:var(--space-64);
  border-top:1px solid var(--color-border-soft);
  background:rgba(7,8,9,0.96);
}

.footer-top{
  padding-top:clamp(var(--space-40),5vw,var(--space-64));
  padding-bottom:var(--space-32);
}

.footer-grid{
  display:grid;
  gap:var(--space-32);
  grid-template-columns:1.3fr 1fr 1fr 1fr;
}

.footer-title{
  margin-bottom:var(--space-16);
  font-size:0.93rem;
  letter-spacing:0.02em;
}

.footer-links{
  list-style:none;
  display:grid;
  gap:0.4rem;
}
.footer-links a{
  color:#b4bcc6;
  font-size:0.86rem;
  transition:color var(--transition-fast);
}
.footer-links a:hover{color:var(--color-accent-strong)}

.footer-bottom{
  border-top:1px solid var(--color-border-soft);
  padding-block:var(--space-16);
  color:#8a929e;
  font-size:0.8rem;
  letter-spacing:0.01em;
}


/* ================================================================
   12. ANIMATION & MOTION
   ================================================================ */

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity 550ms cubic-bezier(0.22,1,0.36,1),
    transform 550ms cubic-bezier(0.22,1,0.36,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}


/* ================================================================
   13. FOCUS & ACCESSIBILITY
   ================================================================ */

:focus-visible{
  outline:2px solid var(--color-accent-strong);
  outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}


/* ================================================================
   14. RESPONSIVE BREAKPOINTS
   ================================================================ */

/* ── 1200px ── */
@media(max-width:1200px){
  .process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid,.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{position:static}
}

/* ── 1024px ── */
@media(max-width:1024px){
  :root{--header-height:64px}

  .hero{min-height:520px}
  .hero-inner{grid-template-columns:1fr;gap:var(--space-32)}
  .hero-panel{max-width:480px;justify-self:start}

  .grid-3,.grid-4,.related-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline{grid-template-columns:1fr}
  .timeline::before{display:none}
  .gallery-grid,.media-grid,.service-module{grid-template-columns:1fr}
}

/* ── 860px (mobile nav) ── */
@media(max-width:860px){
  .nav-toggle{display:inline-flex}

  .site-nav{
    position:absolute;
    top:calc(100% + 0.3rem);
    left:0.75rem;
    right:0.75rem;
    border-radius:var(--radius-md);
    border:1px solid var(--color-border);
    background:linear-gradient(145deg,rgba(12,13,14,0.98),rgba(18,20,22,0.98));
    box-shadow:var(--shadow-elevated);
    padding:var(--space-16);
    display:grid;
    gap:var(--space-12);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    pointer-events:none;
    transition:
      opacity var(--transition-fast),
      transform var(--transition-fast),
      visibility var(--transition-fast);
  }

  .site-nav.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }

  .nav-list{flex-direction:column;align-items:stretch}
  .nav-list a{display:block;padding:0.5rem 0.65rem}
}

/* ── 768px ── */
@media(max-width:768px){
  .container,.container-narrow{
    width:min(100% - 1.5rem,var(--container-max));
  }

  .section{padding-block:var(--space-64)}
  .section-tight{padding-block:var(--space-48)}
  .section-head{flex-direction:column;align-items:flex-start}

  .hero-inner,.grid-2,.grid-3,.grid-4,
  .contact-grid,.related-links,.gallery-grid,
  .footer-grid,.stat-strip,.blog-grid{
    grid-template-columns:1fr;
  }

  .hero-stats,.trust-grid,.process-steps{
    grid-template-columns:1fr;
  }

  .hero{min-height:auto}
  .hero::before{background-position:60% center}

  table{min-width:620px}
}

/* ── 560px ── */
@media(max-width:560px){
  h1{font-size:clamp(1.8rem,10vw,2.6rem)}
  h2{font-size:clamp(1.4rem,7vw,1.9rem)}

  .btn{width:100%}
  .btn-row{width:100%}
  .hero-copy > p{font-size:0.88rem}
}

/* ── 480px ── */
@media(max-width:480px){
  .container,.container-narrow{
    width:min(100% - 1rem,var(--container-max));
  }

  .card,.hero-panel,.timeline-item,
  .process-step,.contact-card,.cta-banner{
    padding:var(--space-16);
  }
}


/* ================================================================
   15. VISUAL REFINEMENT — Professional Enhancement Layer
   ================================================================ */

/* ── Card: top accent shimmer on hover ── */
.card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(213,177,131,0.42) 50%,transparent 100%);
  opacity:0;
  transition:opacity var(--transition-base);
  pointer-events:none;
}
.card:hover::before{opacity:1}

/* ── Nav: active page accent colour ── */
.nav-list a[aria-current="page"]{
  color:var(--color-accent-strong);
  background:rgba(183,146,99,0.07);
}

/* ── Gallery: full image support ── */
.gallery-item{
  min-height:240px;
  cursor:pointer;
}
.gallery-item img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  transition:transform 650ms cubic-bezier(0.22,1,0.36,1);
}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item::after{z-index:1}
.gallery-label{z-index:2}

/* ── Gallery label: frosted glass backdrop ── */
.gallery-label{
  padding:0.35rem 0.7rem;
  border-radius:var(--radius-xs);
  background:rgba(0,0,0,0.54);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#eef0f4;
  font-weight:600;
}

/* ── Pill: accent tint ── */
.pill{
  background:rgba(183,146,99,0.09);
  border-color:rgba(183,146,99,0.22);
  color:var(--color-accent-strong);
}

/* ── CTA Banner: warm radial glow ── */
.cta-banner::before{
  content:"";
  position:absolute;
  top:-45%;right:-8%;
  width:440px;height:440px;
  background:radial-gradient(circle,rgba(183,146,99,0.07) 0%,transparent 65%);
  pointer-events:none;
}
.cta-banner h2{max-width:32ch}

/* ── Process step: accent top edge ── */
.process-step{border-top-color:rgba(213,177,131,0.10)}
.process-step::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,rgba(213,177,131,0.28),transparent 70%);
  pointer-events:none;
}

/* ── Stat strip: left accent line on hover ── */
.stat-strip .card::after{
  content:"";
  position:absolute;
  left:0;top:18%;bottom:18%;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--color-accent),transparent);
  opacity:0;
  transition:opacity var(--transition-base);
}
.stat-strip .card:hover::after{opacity:0.65}

/* ── Contact card hover ── */
.contact-card{
  transition:border-color var(--transition-base),background var(--transition-base);
}
.contact-card:hover{
  border-color:rgba(213,177,131,0.13);
  background:rgba(255,255,255,0.012);
}

/* ── Trust bar item hover ── */
.trust-item{
  transition:border-color var(--transition-fast),color var(--transition-fast);
}
.trust-item:hover{
  border-color:rgba(213,177,131,0.16);
  color:#d0d8e0;
}

/* ── FAQ: open state subtle tint ── */
.faq-item.open{
  border-color:rgba(213,177,131,0.14);
  background:rgba(183,146,99,0.025);
}

/* ── Brand: hover accent on label ── */
.brand:hover span:last-child{color:var(--color-accent-strong)}

/* ── Service module media: scale on hover ── */
.service-module .media-frame img{
  transition:transform 620ms cubic-bezier(0.22,1,0.36,1);
}
.service-module .media-frame:hover img{transform:scale(1.03)}

/* ── Blog index card media: scale on hover ── */
.blog-index-card .media-frame img{
  transition:transform 600ms cubic-bezier(0.22,1,0.36,1);
}
.blog-index-card:hover .media-frame img{transform:scale(1.03)}

/* ── Page hero: warmer layered backdrop ── */
.page-hero{
  background:
    linear-gradient(180deg,rgba(10,11,13,0.88) 0%,rgba(8,9,10,0.50) 100%),
    radial-gradient(ellipse 80% 55% at 78% 50%,rgba(183,146,99,0.04),transparent);
}

/* ── Header: subtle warm border ── */
.site-header{border-bottom-color:rgba(183,146,99,0.06)}

/* ── Footer: warm top border ── */
.site-footer{border-top-color:rgba(183,146,99,0.08)}

/* ── Kicker: stronger visual weight ── */
.kicker::before{
  width:1.4rem;
  background:linear-gradient(90deg,var(--color-accent),var(--color-accent-strong));
  opacity:0.8;
}

/* ── Check list: accent bullet ── */
.check-list li::before{
  background:linear-gradient(135deg,var(--color-accent),var(--color-accent-strong));
}

/* ── Service points: glowing accent dot ── */
.service-points li::before{
  opacity:1;
  box-shadow:0 0 5px rgba(213,177,131,0.22);
}

/* ── Tag: refined hover ── */
.tag{
  border-color:rgba(213,177,131,0.11);
  color:#c8d0d8;
  transition:border-color var(--transition-fast),color var(--transition-fast);
}
.tag:hover{
  border-color:rgba(213,177,131,0.24);
  color:var(--color-accent-strong);
}

/* ── Notice: stronger left border ── */
.notice{border-left-width:3px}

/* ── Timeline dot: enhanced glow ── */
.timeline-item::before{
  box-shadow:0 0 0 5px rgba(213,177,131,0.08),0 0 12px rgba(213,177,131,0.14);
}

/* ── Hero: stronger warm glow ── */
.hero::after{
  width:26rem;
  height:26rem;
  opacity:0.9;
  background:radial-gradient(circle,rgba(160,30,38,0.07),transparent 68%);
}

/* ── Blog card: hover border accent ── */
.blog-index-card:hover{
  --card-border:rgba(213,177,131,0.12);
}

/* ── Scroll-reveal: subtle delay stagger for grids ── */
.grid .card:nth-child(2){transition-delay:60ms}
.grid .card:nth-child(3){transition-delay:120ms}
.grid .card:nth-child(4){transition-delay:180ms}
.process-steps .process-step:nth-child(2){transition-delay:70ms}
.process-steps .process-step:nth-child(3){transition-delay:140ms}
.process-steps .process-step:nth-child(4){transition-delay:210ms}

/* ── Gallery grid: stagger reveal ── */
.gallery-grid .gallery-item:nth-child(2){transition-delay:55ms}
.gallery-grid .gallery-item:nth-child(3){transition-delay:110ms}
.gallery-grid .gallery-item:nth-child(4){transition-delay:55ms}
.gallery-grid .gallery-item:nth-child(5){transition-delay:110ms}
.gallery-grid .gallery-item:nth-child(6){transition-delay:165ms}
.gallery-grid .gallery-item:nth-child(7){transition-delay:55ms}
.gallery-grid .gallery-item:nth-child(8){transition-delay:110ms}
.gallery-grid .gallery-item:nth-child(9){transition-delay:165ms}


/* ================================================================
   16. DESIGN SYSTEM — Component Identity & Visual Hierarchy
   ================================================================ */

/* ──────────────────────────────────────────
   A. ICON-DOT → Accent Marker Bar
   Replaces generic grey square with a branded
   gold accent bar — acts as a content anchor.
   ────────────────────────────────────────── */
.icon-dot{
  width:2.2rem;
  height:2px;
  border-radius:2px;
  margin-bottom:var(--space-16);
  background:linear-gradient(90deg,var(--color-accent) 0%,var(--color-accent-strong) 55%,transparent 100%);
  box-shadow:0 0 7px rgba(183,146,99,0.20);
}

/* Contact card icon variant: accent ring with fill */
.contact-card .icon-dot{
  position:relative;
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  border:1px solid rgba(183,146,99,0.30);
}
.contact-card .icon-dot::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:linear-gradient(140deg,var(--color-accent),var(--color-accent-strong));
}


/* ──────────────────────────────────────────
   B. TYPOGRAPHY HIERARCHY
   ────────────────────────────────────────── */

/* Hero stats: accent number */
.stat b{
  color:var(--color-accent-strong);
  letter-spacing:-0.018em;
}

/* Stat strip: gradient clip text */
.stat-strip b{
  background:linear-gradient(130deg,#c8a46a 0%,#e8c98a 50%,#d0a865 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Section heading: tight contrast */
.section-head h2{
  color:#f0f2f6;
  letter-spacing:-0.016em;
}

/* Hero copy heading */
.hero-copy h1{color:#f6f7fa}

/* Page hero heading */
.page-hero h1{color:#f4f5f8}


/* ──────────────────────────────────────────
   C. PROCESS STEPS — Gold Counter Badge
   ────────────────────────────────────────── */
.process-step::before{
  background:linear-gradient(120deg,var(--color-accent),var(--color-accent-strong));
  color:#07080a;
  font-size:0.68rem;
  letter-spacing:0.05em;
  padding:0.22rem 0.6rem;
  box-shadow:0 1px 6px rgba(183,146,99,0.20);
}

.process-step h3{
  margin-top:var(--space-4);
  font-size:clamp(0.96rem,1.2vw,1.08rem);
  color:#e8ecf2;
}


/* ──────────────────────────────────────────
   D. SECTION RHYTHM — Subtle Dividers
   ────────────────────────────────────────── */
.trust-bar + .section,
.section + .section,
.section-tight + .section,
.section + .section-tight,
.section-tight + .section-tight{
  border-top:1px solid rgba(255,255,255,0.038);
}
.trust-bar{border-top:0}


/* ──────────────────────────────────────────
   E. TABLE — Readability
   ────────────────────────────────────────── */
tbody tr:nth-child(even) td{background:rgba(255,255,255,0.007)}
tbody tr:hover td{
  background:rgba(183,146,99,0.038) !important;
  color:#e0e4ea;
}
th{
  letter-spacing:0.08em;
  font-size:0.72rem;
  color:#d4a567;
}


/* ──────────────────────────────────────────
   F. FOOTER — Brand Hierarchy
   ────────────────────────────────────────── */
.footer-title{
  color:#d8dce4;
  position:relative;
  padding-bottom:var(--space-12);
  margin-bottom:var(--space-20);
}
.footer-title::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:1.8rem;height:1px;
  background:linear-gradient(90deg,var(--color-accent),transparent 90%);
}


/* ──────────────────────────────────────────
   G. CTA BANNER — Heading Depth
   ────────────────────────────────────────── */
.cta-banner h2{
  color:#f2ede8;
  text-shadow:0 2px 16px rgba(183,146,99,0.10);
  max-width:30ch;
}
.cta-banner p{
  max-width:58ch;
  color:#b4bcc6;
}


/* ──────────────────────────────────────────
   H. TIMELINE — Connector & Card Hover
   ────────────────────────────────────────── */
.timeline::before{
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(213,177,131,0.14) 15%,
    rgba(213,177,131,0.28) 50%,
    rgba(213,177,131,0.14) 85%,
    transparent 100%
  );
}
.timeline-item{
  transition:border-color var(--transition-base),background var(--transition-base);
}
.timeline-item:hover{
  border-color:rgba(213,177,131,0.14);
  background:rgba(255,255,255,0.012);
}
.timeline-year{
  font-size:0.72rem;
  color:var(--color-accent-strong);
  letter-spacing:0.12em;
}


/* ──────────────────────────────────────────
   I. HERO PANEL — Depth & Hover
   ────────────────────────────────────────── */
.hero-panel{transition:border-color var(--transition-base)}
.hero-panel:hover{border-color:rgba(213,177,131,0.13)}
.hero-panel h2{color:#edf0f5}


/* ──────────────────────────────────────────
   J. SERVICE & BLOG CARDS — Content Flow
   ────────────────────────────────────────── */
.service-card,.blog-card{
  display:grid;
  gap:var(--space-8);
  align-content:start;
}
.service-card h3,.blog-card h3{
  font-size:clamp(1rem,1.3vw,1.18rem);
  line-height:1.3;
  color:#edf0f5;
  letter-spacing:-0.008em;
}
.service-card p,.blog-card p{
  font-size:0.875rem;
  line-height:1.70;
}


/* ──────────────────────────────────────────
   K. TRUST BAR — Label Weight
   ────────────────────────────────────────── */
.trust-item{
  font-weight:500;
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:#c8d0da;
}


/* ──────────────────────────────────────────
   L. NAV — Underline Slide Animation
   ────────────────────────────────────────── */
.nav-list a{position:relative}
.nav-list a::after{
  content:"";
  position:absolute;
  left:0.55rem;right:0.55rem;bottom:0.14rem;
  height:1px;
  background:var(--color-accent-strong);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition-base);
}
.nav-list a:hover::after{transform:scaleX(1)}
.nav-list a[aria-current="page"]::after{
  transform:scaleX(1);
  opacity:0.5;
}


/* ──────────────────────────────────────────
   M. BREADCRUMB — Accent Link Style
   ────────────────────────────────────────── */
.breadcrumb{
  letter-spacing:0.02em;
  font-size:0.76rem;
}
.breadcrumb a{
  color:var(--color-accent);
  opacity:0.85;
  transition:opacity var(--transition-fast),color var(--transition-fast);
}
.breadcrumb a:hover{
  opacity:1;
  color:var(--color-accent-strong);
}


/* ──────────────────────────────────────────
   N. BUTTONS — Primary Glow
   ────────────────────────────────────────── */
.btn-primary{
  box-shadow:0 2px 12px rgba(183,146,99,0.22),0 1px 4px rgba(0,0,0,0.12);
}
.btn-primary:hover{
  box-shadow:0 4px 18px rgba(183,146,99,0.30),0 1px 6px rgba(0,0,0,0.14);
  opacity:1;
}


/* ──────────────────────────────────────────
   O. ARTICLE CONTENT — Editorial Flow
   ────────────────────────────────────────── */
.article-content h2{
  font-size:clamp(1.25rem,2vw,1.75rem);
  color:#e8ecf2;
  margin-top:var(--space-24);
  letter-spacing:-0.012em;
}
.article-content h2:first-child{margin-top:0}
.article-content > p{
  font-size:0.935rem;
  line-height:1.78;
  color:#bcc4ce;
}


/* ──────────────────────────────────────────
   P. MAP BOX — Depth Enhancement
   ────────────────────────────────────────── */
.map-box{
  background:
    linear-gradient(155deg,rgba(14,16,19,0.92),rgba(8,10,12,0.80)),
    radial-gradient(ellipse 70% 60% at 50% 60%,rgba(183,146,99,0.04),transparent);
  border-color:rgba(213,177,131,0.08);
}


/* ──────────────────────────────────────────
   Q. HERO STATS — Hover Refinement
   ────────────────────────────────────────── */
.stat{
  border-color:rgba(183,146,99,0.08);
  background:rgba(183,146,99,0.02);
  transition:border-color var(--transition-base),background var(--transition-base);
}
.stat:hover{
  border-color:rgba(183,146,99,0.16);
  background:rgba(183,146,99,0.04);
}
.stat span{
  font-size:0.68rem;
  letter-spacing:0.05em;
  color:#9aa3af;
  text-transform:uppercase;
}


/* ──────────────────────────────────────────
   R. RESPONSIVE ADJUSTMENTS for Section 16
   ────────────────────────────────────────── */
@media(max-width:768px){
  .contact-card .icon-dot{
    width:1.6rem;
    height:1.6rem;
  }
  .icon-dot{width:1.8rem}
  .footer-title{padding-bottom:var(--space-8)}
  .stat-strip b{
    -webkit-text-fill-color:unset;
    color:#d4a567;
  }
}


/* ================================================================
   17. LANDING PAGE V2 — Dramatic Redesign Components
   ================================================================ */

/* ── Hero: layout & depth ── */
.hero{
  display:flex;
  flex-direction:column;
  min-height:clamp(660px,88vh,920px);
  padding-top:0;
  padding-bottom:0;
}

/* Large decorative year in background */
.hero-bg-deco{
  position:absolute;
  right:-1%;top:6%;
  z-index:0;
  font-size:clamp(9rem,20vw,20rem);
  font-weight:700;
  letter-spacing:-0.07em;
  color:rgba(255,255,255,0.022);
  pointer-events:none;
  user-select:none;
  line-height:1;
  overflow:hidden;
}

/* Content area: flex-grow to fill space above stats strip */
.hero-v2-content{
  flex:1;
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(var(--space-40),5vw,var(--space-64));
  grid-template-columns:minmax(0,1.45fr) minmax(260px,0.55fr);
  align-items:start;
  padding-top:clamp(var(--space-64),9vw,var(--space-96));
  padding-bottom:var(--space-48);
}

/* LEFT COPY */
.hero-v2-eyebrow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-12);
  margin-bottom:var(--space-24);
}

.badge-accent{
  padding:0.28rem 0.72rem;
  border-radius:var(--radius-xs);
  border:1px solid rgba(183,146,99,0.42);
  background:rgba(183,146,99,0.10);
  color:var(--color-accent-strong);
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

.eyebrow-sep{
  color:rgba(255,255,255,0.18);
  font-size:0.75rem;
}

.eyebrow-loc{
  font-size:0.74rem;
  color:var(--color-text-soft);
  letter-spacing:0.04em;
}

/* Override hero h1 for v2 */
.hero-v2-left > h1{
  font-size:clamp(2.8rem,6.2vw,5rem);
  line-height:1.04;
  letter-spacing:-0.03em;
  font-weight:700;
  margin-bottom:var(--space-24);
  max-width:20ch;
  color:#f6f8fc;
}

.text-accent{
  display:block;
  color:var(--color-accent-strong);
  font-style:italic;
  font-weight:700;
}

.hero-v2-left > p{
  max-width:54ch;
  color:#b8c2cc;
  font-size:clamp(0.9rem,1.1vw,0.98rem);
  line-height:1.78;
  margin-bottom:var(--space-32);
}

/* XL button variant */
.btn-xl{
  --btn-height:2.85rem;
  padding-inline:1.25rem;
  font-size:0.74rem;
}

/* STATS STRIP — pinned to bottom of hero */
.hero-v2-stats-strip{
  position:relative;
  z-index:1;
  border-top:1px solid rgba(255,255,255,0.07);
  background:rgba(0,0,0,0.38);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.hero-v2-stats-inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:stretch;
}

.hero-v2-stat{
  padding:var(--space-20) var(--space-24);
  text-align:center;
  border-right:1px solid rgba(255,255,255,0.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.3rem;
}
.hero-v2-stat:last-child{border-right:0}

.hero-v2-stat strong{
  display:block;
  font-family:"Sora",system-ui,sans-serif;
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  font-weight:700;
  letter-spacing:-0.025em;
  line-height:1;
  background:linear-gradient(130deg,#c8a46a 0%,#e8c98a 55%,#c8a46a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-v2-stat > span{
  font-size:0.65rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:#7a8290;
}

.hero-v2-phone{
  display:block;
  font-family:"Sora",system-ui,sans-serif;
  font-size:clamp(0.95rem,1.4vw,1.2rem);
  font-weight:600;
  letter-spacing:-0.005em;
  color:var(--color-accent-strong);
  transition:color var(--transition-fast);
  line-height:1;
}
.hero-v2-phone:hover{color:#efc596}


/* ── Trust V2: numbered items ── */
.trust-v2{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}

.trust-v2-item{
  display:flex;
  align-items:center;
  gap:var(--space-12);
  padding:var(--space-16) var(--space-20);
  border-right:1px solid rgba(255,255,255,0.04);
  transition:background var(--transition-fast);
}
.trust-v2-item:last-child{border-right:0}
.trust-v2-item:hover{background:rgba(183,146,99,0.025)}

.trust-v2-num{
  flex-shrink:0;
  font-family:"Sora",system-ui,sans-serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1;
  color:rgba(183,146,99,0.30);
}

.trust-v2-text{
  font-size:0.74rem;
  font-weight:500;
  letter-spacing:0.02em;
  color:#bec6d0;
}


/* ── Service Card: numbered badge ── */
.svc-num{
  display:block;
  font-family:"Sora",system-ui,sans-serif;
  font-size:1.9rem;
  font-weight:700;
  letter-spacing:-0.05em;
  line-height:1;
  color:rgba(183,146,99,0.16);
  margin-bottom:var(--space-12);
  transition:color var(--transition-base);
}
.service-card:hover .svc-num{
  color:rgba(183,146,99,0.36);
}


/* ── About card: decorative year ── */
.about-v2-card{
  position:relative;
  overflow:hidden;
}
.about-v2-year{
  position:absolute;
  right:-0.5rem;
  bottom:-0.8rem;
  font-family:"Sora",system-ui,sans-serif;
  font-size:clamp(4rem,9vw,7.5rem);
  font-weight:700;
  letter-spacing:-0.06em;
  line-height:1;
  color:rgba(255,255,255,0.028);
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.about-v2-card > *:not(.about-v2-year){
  position:relative;
  z-index:1;
}


/* ── Process: visual connecting track ── */
.process-v2{
  position:relative;
}
.process-v2::after{
  content:"";
  position:absolute;
  top:2.55rem;
  left:11%;right:11%;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(183,146,99,0.20) 15%,
    rgba(183,146,99,0.20) 85%,
    transparent 100%);
  pointer-events:none;
  z-index:0;
}
.process-v2 .process-step{
  position:relative;
  z-index:1;
}


/* ── Gallery V2: featured first item ── */
.gallery-v2{
  display:grid;
  gap:var(--space-16);
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:220px 220px;
}

.gallery-item--feature{
  grid-row:span 2;
}
.gallery-item--feature .gallery-label{
  font-size:0.9rem;
}


/* ── CTA V2: dramatic version ── */
.cta-v2{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  padding:clamp(var(--space-48),6vw,var(--space-80)) clamp(var(--space-32),5vw,var(--space-64));
  background:
    linear-gradient(135deg,rgba(160,30,38,0.09) 0%,rgba(8,9,11,0.96) 38%,rgba(183,146,99,0.05) 100%);
  border:1px solid rgba(183,146,99,0.13);
  box-shadow:0 24px 64px rgba(0,0,0,0.28),0 1px 0 rgba(183,146,99,0.08) inset;
}

/* Overwrite existing cta-banner pseudo-elements to avoid conflicts */
.cta-v2.cta-banner::before{
  top:-40%;right:-8%;
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(183,146,99,0.09) 0%,transparent 62%);
}
.cta-v2::after{
  content:"";
  position:absolute;
  bottom:-25%;left:-5%;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(160,30,38,0.08),transparent 65%);
  pointer-events:none;
}

.cta-v2-content{
  position:relative;
  z-index:1;
}

.cta-v2-heading{
  font-size:clamp(1.7rem,3.5vw,2.9rem);
  letter-spacing:-0.025em;
  line-height:1.1;
  max-width:22ch;
  color:#f2ede8;
  margin-bottom:var(--space-16);
}

.cta-v2-sub{
  max-width:56ch;
  color:#b0b8c2;
  font-size:0.935rem;
  line-height:1.75;
  margin-bottom:var(--space-32);
}


/* ── Section label ornament ── */
.section-ornament{
  display:inline-flex;
  align-items:center;
  gap:var(--space-8);
  margin-bottom:var(--space-32);
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(183,146,99,0.50);
}
.section-ornament::before,
.section-ornament::after{
  content:"";
  flex:1;
  min-width:2rem;
  height:1px;
  background:linear-gradient(90deg,rgba(183,146,99,0.30),transparent);
}
.section-ornament::after{
  background:linear-gradient(270deg,rgba(183,146,99,0.30),transparent);
}


/* ── Responsive: Section 17 ── */
@media(max-width:1024px){
  .hero-v2-content{
    grid-template-columns:1fr;
    padding-bottom:var(--space-32);
  }
  .hero-panel{max-width:520px;justify-self:start}
  .hero-v2-stats-inner{grid-template-columns:repeat(2,1fr)}
  .hero-v2-stat:nth-child(3){border-left:1px solid rgba(255,255,255,0.06)}
  .trust-v2{grid-template-columns:repeat(2,1fr)}
  .trust-v2-item:nth-child(2){border-right:0}
  .trust-v2-item:nth-child(4){border-right:0}
  .gallery-v2{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
  }
  .gallery-item--feature{grid-row:auto}
  .process-v2::after{display:none}
}

@media(max-width:768px){
  .hero{min-height:auto}
  .hero-bg-deco{display:none}
  .hero-v2-stats-inner{grid-template-columns:repeat(2,1fr)}
  .trust-v2{grid-template-columns:1fr}
  .trust-v2-item{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .gallery-v2{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .gallery-item--feature{grid-row:auto}
}

@media(max-width:560px){
  .hero-v2-left > h1{font-size:clamp(2.2rem,10vw,3rem)}
  .hero-v2-stats-inner{grid-template-columns:1fr 1fr}
  .hero-v2-stat:nth-child(3),
  .hero-v2-stat:nth-child(4){
    grid-column:span 2;
    border-left:0;
  }
  .btn-xl{width:100%}
  .cta-v2-heading{font-size:clamp(1.5rem,8vw,2rem)}
}


/* ================================================================
   18. PREMIUM UI — Buttons · Contact · Footer · Typography · Glass
   ================================================================

   A. Button System — Premium Revision
   B. Typography — Enhanced Whitespace & Rhythm
   C. Card Glassmorphism — Service, Blog, Hero Panel
   D. Contact Section — Icon Badges, Structured Layout
   E. Footer — Column Hierarchy, Social Icons, Bottom Bar
   F. Form Inputs — Dark-theme ready (future proofing)
   G. Map Box & Info Cards — Depth Treatment
   H. Section Rhythm — Breathing room
   I. Responsive — Section 18
   ================================================================ */


/* ─────────────────────────────────────────────────────────────────
   A. BUTTON SYSTEM — Premium Revision
   ───────────────────────────────────────────────────────────────── */

/* Base override: bigger, rounder, with lift transition */
.btn{
  --btn-height:2.75rem;
  padding:0.6rem 1.5rem;
  border-radius:var(--radius-md);
  font-size:0.76rem;
  letter-spacing:0.065em;
  transition:
    color var(--transition-fast),
    border-color var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base),
    transform 180ms cubic-bezier(0.22,1,0.36,1),
    opacity var(--transition-fast);
}
.btn:hover{
  opacity:1;
  transform:translateY(-1px);
}
.btn:active{
  transform:translateY(0);
  opacity:0.92;
}

/* Primary — gold gradient with luminous glow */
.btn-primary{
  color:#06060a;
  border-color:transparent;
  background:linear-gradient(135deg,#c9a067 0%,#e0bf8b 52%,#c29260 100%);
  background-size:200% 100%;
  background-position:0% 50%;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 2px 14px rgba(183,146,99,0.30),
    0 1px 4px rgba(0,0,0,0.18);
}
.btn-primary:hover{
  color:#040409;
  background-position:100% 50%;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 5px 24px rgba(183,146,99,0.42),
    0 2px 8px rgba(0,0,0,0.20);
}

/* Secondary — frosted glass border */
.btn-secondary{
  color:#d4dae4;
  border-color:rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.028);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn-secondary:hover{
  color:var(--color-accent-strong);
  border-color:rgba(213,177,131,0.38);
  background:rgba(183,146,99,0.065);
  box-shadow:0 0 0 1px rgba(213,177,131,0.14);
}

/* Ghost — elegant transparent with subtle glow */
.btn-ghost{
  color:#c8d0da;
  border-color:rgba(255,255,255,0.10);
  background:transparent;
}
.btn-ghost:hover{
  color:#eef0f4;
  border-color:rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.04);
  box-shadow:0 0 0 1px rgba(255,255,255,0.06);
}

/* Link / text button */
.btn-link,.btn-text{
  color:var(--color-accent-strong);
  letter-spacing:0.09em;
}
.btn-link:hover,.btn-text:hover{
  color:#f0c882;
  transform:none;
}

/* Nav CTA — compact variant */
.site-nav > .btn-primary{
  --btn-height:2.2rem;
  padding:0.4rem 1.05rem;
  font-size:0.72rem;
}

/* btn-xl — hero/CTA scale */
.btn-xl{
  --btn-height:3.1rem;
  padding:0.72rem 2rem;
  border-radius:var(--radius-md);
  font-size:0.8rem;
  letter-spacing:0.06em;
}


/* ─────────────────────────────────────────────────────────────────
   B. TYPOGRAPHY — Enhanced Whitespace & Rhythm
   ───────────────────────────────────────────────────────────────── */

/* More breathing room for paragraphs */
p{
  line-height:1.82;
  margin-bottom:var(--space-20);
}

/* Tighter inside last-child p (no double margin at bottom of cards) */
p:last-child{margin-bottom:0}

/* Section header gets more vertical separation */
.section-head{
  margin-bottom:clamp(var(--space-40),4.5vw,var(--space-64));
}

/* Card h2/h3 comfort spacing */
.card h2,.card h3{
  margin-bottom:var(--space-12);
  letter-spacing:-0.01em;
}

/* Hero copy paragraph larger on desktop */
.hero-copy > p,.hero-v2-left > p{
  font-size:clamp(0.92rem,1.05vw,1.02rem);
  line-height:1.82;
  color:#b8c2ce;
}


/* ─────────────────────────────────────────────────────────────────
   C. CARD GLASSMORPHISM — Service, Blog, General Card
   ───────────────────────────────────────────────────────────────── */

/* Base card: richer glass */
.card{
  background:linear-gradient(
    145deg,
    rgba(22,25,30,0.82) 0%,
    rgba(14,16,20,0.90) 100%
  );
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 6px 24px rgba(0,0,0,0.20);
}
.card:hover{
  border-color:rgba(213,177,131,0.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 10px 36px rgba(0,0,0,0.28),
    0 0 0 1px rgba(213,177,131,0.07);
}

/* Service card — richer identity */
.service-card{
  background:linear-gradient(
    150deg,
    rgba(20,23,28,0.88) 0%,
    rgba(12,14,18,0.95) 100%
  );
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.055);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 8px 32px rgba(0,0,0,0.24);
}
.service-card:hover{
  border-color:rgba(213,177,131,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 14px 44px rgba(0,0,0,0.32),
    0 0 0 1px rgba(213,177,131,0.09),
    0 2px 8px rgba(183,146,99,0.08);
}

/* Blog card — same treatment */
.blog-card,.blog-index-card{
  background:linear-gradient(
    145deg,
    rgba(20,23,28,0.84) 0%,
    rgba(14,16,20,0.92) 100%
  );
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.055);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 6px 24px rgba(0,0,0,0.20);
}
.blog-card:hover,.blog-index-card:hover{
  border-color:rgba(213,177,131,0.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 40px rgba(0,0,0,0.30),
    0 0 0 1px rgba(213,177,131,0.08);
}

/* Hero panel — deeper glass */
.hero-panel{
  background:linear-gradient(155deg,rgba(16,18,22,0.80),rgba(12,14,18,0.70));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 8px 40px rgba(0,0,0,0.28);
}


/* ─────────────────────────────────────────────────────────────────
   D. CONTACT SECTION — Icon Badges, Structured Layout
   ───────────────────────────────────────────────────────────────── */

/* Icon badge above card title */
.contact-card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.8rem;
  height:2.8rem;
  border-radius:var(--radius-md);
  margin-bottom:var(--space-20);
  background:rgba(183,146,99,0.10);
  border:1px solid rgba(183,146,99,0.20);
  color:var(--color-accent-strong);
  flex-shrink:0;
}
.contact-card-icon svg{
  width:1.2rem;
  height:1.2rem;
}

/* Contact card — premium glass elevation */
.contact-card{
  position:relative;
  overflow:hidden;
  padding:clamp(var(--space-24),2.5vw,var(--space-32));
  background:linear-gradient(
    145deg,
    rgba(20,23,28,0.84) 0%,
    rgba(12,14,18,0.92) 100%
  );
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.065);
  border-radius:var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 8px 32px rgba(0,0,0,0.22);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}
.contact-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(213,177,131,0.40),transparent);
  opacity:0;
  transition:opacity var(--transition-base);
}
.contact-card:hover{
  border-color:rgba(213,177,131,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 14px 48px rgba(0,0,0,0.30),
    0 0 0 1px rgba(213,177,131,0.09);
  transform:translateY(-3px);
}
.contact-card:hover::before{opacity:1}

.contact-card h2{
  font-size:1.18rem;
  font-weight:600;
  letter-spacing:-0.01em;
  margin-bottom:var(--space-8);
  color:#f0f2f6;
}
.contact-card > p{
  font-size:0.9rem;
  color:#8a96a4;
  line-height:1.78;
  margin-bottom:var(--space-16);
}

/* Phone numbers list inside contact card */
.contact-info-list{
  list-style:none;
  display:grid;
  gap:var(--space-8);
  margin-bottom:var(--space-20);
}
.contact-info-list li a{
  color:#ccd4de;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:0.01em;
  transition:color var(--transition-fast);
}
.contact-info-list li a:hover{color:var(--color-accent-strong)}

/* Contact page check-list card */
.contact-grid + .section .card,
.contact-grid ~ * .card{
  border-radius:var(--radius-lg);
}


/* ─────────────────────────────────────────────────────────────────
   E. FOOTER — Column Hierarchy, Social Icons, Bottom Bar
   ───────────────────────────────────────────────────────────────── */

/* Footer background — richer dark */
.site-footer{
  margin-top:var(--space-80);
  border-top:1px solid rgba(213,177,131,0.09);
  background:linear-gradient(180deg,rgba(8,9,11,0.99) 0%,#040506 100%);
}

.footer-top{
  padding-top:clamp(var(--space-48),6vw,var(--space-80));
  padding-bottom:clamp(var(--space-32),4vw,var(--space-48));
}

/* Column titles — uppercase spaced, gold underline accent */
.footer-title{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#c4cdd8;
  margin-bottom:var(--space-20);
  padding-bottom:var(--space-10,0.625rem);
  border-bottom:1px solid rgba(255,255,255,0.05);
  position:relative;
}
.footer-title::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  width:1.6rem;
  height:1px;
  background:var(--color-accent);
}

/* Brand column description */
.footer-grid > div:first-child > p{
  max-width:26ch;
  font-size:0.875rem;
  line-height:1.80;
  color:#545e6e;
  margin-bottom:var(--space-20);
}

/* Footer links — muted with slide indent on hover */
.footer-links{
  display:grid;
  gap:0.5rem;
}
.footer-links a{
  display:inline-flex;
  color:#505a68;
  font-size:0.875rem;
  padding:0.08rem 0;
  transition:
    color var(--transition-fast),
    padding-left var(--transition-base);
}
.footer-links a:hover{
  color:#c4cdd6;
  padding-left:0.35rem;
}

/* Social icon links row */
.footer-social{
  display:flex;
  gap:var(--space-8);
  margin-top:var(--space-4);
}
.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.1rem;
  height:2.1rem;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.02);
  color:#636e7c;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background var(--transition-fast),
    transform 160ms ease;
}
.footer-social-link:hover{
  border-color:rgba(213,177,131,0.28);
  color:var(--color-accent-strong);
  background:rgba(183,146,99,0.07);
  transform:translateY(-1px);
}
.footer-social-link svg{
  width:0.88rem;
  height:0.88rem;
  fill:currentColor;
  flex-shrink:0;
}

/* Footer bottom bar — two-column flex */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.04);
  padding-block:var(--space-20);
}
.footer-bottom .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-8);
  color:#40484e;
  font-size:0.76rem;
  letter-spacing:0.02em;
}


/* ─────────────────────────────────────────────────────────────────
   F. FORM INPUTS — Dark-Theme Premium
   ───────────────────────────────────────────────────────────────── */

.form-group{
  display:grid;
  gap:var(--space-8);
  margin-bottom:var(--space-16);
}
.form-label{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#7a8290;
}
.form-input,
.form-textarea{
  width:100%;
  padding:0.72rem 1rem;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  color:#dde2ea;
  font-family:inherit;
  font-size:0.9rem;
  line-height:1.5;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}
.form-input::placeholder,
.form-textarea::placeholder{color:#454f5e}
.form-input:hover,
.form-textarea:hover{border-color:rgba(255,255,255,0.14)}
.form-input:focus,
.form-textarea:focus{
  border-color:rgba(183,146,99,0.48);
  background:rgba(183,146,99,0.045);
  box-shadow:0 0 0 3px rgba(183,146,99,0.11);
}
.form-textarea{min-height:120px;resize:vertical}


/* ─────────────────────────────────────────────────────────────────
   G. MAP BOX & INFO CARDS — Depth Treatment
   ───────────────────────────────────────────────────────────────── */

.map-box{
  background:linear-gradient(
    145deg,
    rgba(16,18,22,0.92) 0%,
    rgba(10,12,15,0.96) 100%
  );
  border:1px solid rgba(255,255,255,0.065);
  border-radius:var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 6px 24px rgba(0,0,0,0.20);
  min-height:280px;
}
.map-box p{
  max-width:32ch;
  font-size:0.9rem;
  color:#6a7380;
  line-height:1.78;
  margin-bottom:var(--space-20);
}


/* ─────────────────────────────────────────────────────────────────
   H. SECTION RHYTHM — Subtle separators between stacked sections
   ───────────────────────────────────────────────────────────────── */

.section + .section-tight,
.section-tight + .section-tight{
  border-top:1px solid rgba(255,255,255,0.03);
}

/* Check-list bullets — gold accent */
.check-list li::before{
  background:linear-gradient(135deg,var(--color-accent),var(--color-accent-strong));
  opacity:0.9;
}


/* ─────────────────────────────────────────────────────────────────
   I. RESPONSIVE — Section 18
   ───────────────────────────────────────────────────────────────── */

@media(max-width:768px){
  .btn{
    --btn-height:2.6rem;
    padding:0.55rem 1.25rem;
  }
  .btn-xl{
    --btn-height:2.85rem;
    padding:0.65rem 1.5rem;
  }
  .footer-bottom .container{
    justify-content:center;
    text-align:center;
  }
  .footer-social{
    justify-content:flex-start;
  }
  .contact-card{
    padding:var(--space-24);
  }
}

@media(max-width:560px){
  .btn{width:100%}
  .footer-social{justify-content:center}
  .contact-card-icon{
    width:2.4rem;
    height:2.4rem;
  }
}


/* ================================================================
   19. LUXURY AUTOMOTIVE — Gallery Pro · Footer Minimal · Type Auth
   ================================================================
   A. Footer Minimal  — ultra-clean luxury signature strip
   B. Gallery Pro     — full-bleed hover-reveal editorial grid
   C. Typography      — dominant headings, restrained body
   D. Responsive      — Section 19 breakpoints
   ================================================================ */


/* ─────────────────────────────────────────────────────────────────
   A. FOOTER MINIMAL — Luxury Signature Strip
   Visual match for the Tailwind reference:
   py-10 · text-center · text-slate-600 · text-[10px] · font-black
   uppercase · tracking-[0.2em] · border-t border-slate-900/50
   bg-slate-950
   ───────────────────────────────────────────────────────────────── */

.footer-minimal{
  padding-block:2.5rem;
  text-align:center;
  background:#020617;
  border-top:1px solid rgba(15,23,42,0.50);
  color:#475569;
  font-size:0.625rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.20em;
  margin-top:0;
}
.footer-minimal p{
  margin:0;
  line-height:1;
}
.footer-minimal .footer-credit{
  margin-top:0.5rem;
  color:#1e293b;
  font-style:italic;
  text-transform:none;
  letter-spacing:normal;
  font-weight:400;
  font-size:0.7rem;
  line-height:1.4;
}


/* ─────────────────────────────────────────────────────────────────
   B. GALLERY PRO — Full-bleed hover-reveal editorial grid
   ───────────────────────────────────────────────────────────────── */

.gallery-pro{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3px;
  background:#000;
}

/* Items 1 and 5 span 2 columns → editorial asymmetry */
.gallery-pro .gallery-item:nth-child(1),
.gallery-pro .gallery-item:nth-child(5){
  grid-column:span 2;
}

/* Reset Section 15 overrides inside gallery-pro */
.gallery-pro .gallery-item{
  position:relative;
  height:360px;
  min-height:0;
  border-radius:0;
  border:none;
  overflow:hidden;
  background:#060708;
  cursor:pointer;
  transition:none;
}

/* Image: start slightly dimmed, scale on hover */
.gallery-pro .gallery-item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter:brightness(0.84) saturate(0.88);
  transition:
    transform 700ms cubic-bezier(0.22,1,0.36,1),
    filter    700ms ease;
}
.gallery-pro .gallery-item:hover img{
  transform:scale(1.06);
  filter:brightness(0.62) saturate(1.10);
}

/* Gradient overlay: deepen on hover */
.gallery-pro .gallery-item::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.16) 44%,
    transparent 72%
  );
  opacity:0.42;
  transition:opacity 420ms ease;
  pointer-events:none;
}
.gallery-pro .gallery-item:hover::after{opacity:1}

/* Category pill — top-left, always visible */
.gallery-category{
  position:absolute;
  top:1rem;
  left:1rem;
  z-index:3;
  padding:0.18rem 0.52rem;
  border-radius:999px;
  background:rgba(183,146,99,0.15);
  border:1px solid rgba(183,146,99,0.28);
  color:var(--color-accent-strong);
  font-size:0.58rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* Label: hidden at rest, slide-up on hover */
.gallery-pro .gallery-label{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:1.2rem 1.1rem 1rem;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#f0f2f5;
  font-size:0.84rem;
  font-weight:600;
  letter-spacing:0.005em;
  line-height:1.38;
  border-radius:0;
  opacity:0;
  transform:translateY(7px);
  transition:
    opacity   360ms cubic-bezier(0.22,1,0.36,1),
    transform 360ms cubic-bezier(0.22,1,0.36,1);
}
.gallery-pro .gallery-item:hover .gallery-label{
  opacity:1;
  transform:translateY(0);
}

/* Gold accent line before label text */
.gallery-pro .gallery-label::before{
  content:"";
  display:inline-block;
  width:1.4rem;
  height:1px;
  background:var(--color-accent-strong);
  vertical-align:middle;
  margin-right:0.5rem;
  opacity:0;
  transform:scaleX(0);
  transform-origin:left center;
  transition:
    opacity   240ms 80ms ease,
    transform 280ms 80ms ease;
}
.gallery-pro .gallery-item:hover .gallery-label::before{
  opacity:0.65;
  transform:scaleX(1);
}

/* Touch devices: labels always shown */
@media(hover:none){
  .gallery-pro .gallery-label{opacity:1;transform:translateY(0)}
  .gallery-pro .gallery-label::before{opacity:0.55;transform:scaleX(1)}
}


/* ─────────────────────────────────────────────────────────────────
   C. TYPOGRAPHY — Authoritative Headings, Refined Body
   ───────────────────────────────────────────────────────────────── */

h1{
  font-weight:800;
  letter-spacing:-0.026em;
  line-height:1.06;
}
h2{
  font-weight:700;
  letter-spacing:-0.020em;
}
h3{
  font-weight:600;
  letter-spacing:-0.012em;
}

p{
  color:#9aa4b2;
  line-height:1.84;
}

.kicker{
  letter-spacing:0.22em;
  font-size:0.64rem;
}

.section-head{
  margin-bottom:clamp(var(--space-48),5vw,var(--space-80));
}

.btn{font-weight:700}


/* ─────────────────────────────────────────────────────────────────
   D. RESPONSIVE — Section 19
   ───────────────────────────────────────────────────────────────── */

@media(max-width:1024px){
  .gallery-pro{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .gallery-pro .gallery-item:nth-child(1),
  .gallery-pro .gallery-item:nth-child(5){
    grid-column:span 2;
  }
  .gallery-pro .gallery-item{height:300px}
}

@media(max-width:640px){
  .gallery-pro{
    grid-template-columns:1fr;
    gap:2px;
  }
  .gallery-pro .gallery-item:nth-child(1),
  .gallery-pro .gallery-item:nth-child(5){
    grid-column:span 1;
  }
  .gallery-pro .gallery-item{height:260px}
}


/* ================================================================
   20. FOOTER PREMIUM — Industrial Automotive Luxury
   ================================================================
   Inspired by Porsche / Akrapovič footer language:
   spacious · dark · minimal · elegant · balanced · understated

   A. Custom Properties — footer design tokens
   B. Footer Shell & Top Band (3-column grid)
   C. Brand / Heritage column
   D. Services column
   E. Contact column
   F. Logo band (centered)
   G. Bottom bar (legal + copyright)
   H. Responsive
   ================================================================ */

/* ─────────────────────────────────────────────────────────────────
   A. FOOTER DESIGN TOKENS
   ───────────────────────────────────────────────────────────────── */
.footer-prem{
  --fp-bg:       #070809;
  --fp-bg-mid:   #050607;
  --fp-bg-bot:   #030405;
  --fp-sep:      rgba(255,255,255,0.05);
  --fp-text:     #5a6270;
  --fp-text-dim: #32383e;
  --fp-text-hi:  #9aa4b2;
  --fp-accent:   #b79263;
  --fp-accent-s: #d5b183;
}


/* ─────────────────────────────────────────────────────────────────
   B. FOOTER SHELL & TOP BAND
   ───────────────────────────────────────────────────────────────── */

.footer-prem{
  background:var(--fp-bg);
  margin-top:0;
}

.fp-top{
  padding-top:clamp(3.5rem,6vw,5.5rem);
  padding-bottom:clamp(3rem,5vw,4.5rem);
  border-bottom:1px solid var(--fp-sep);
}

/* 3-column: brand 1.15fr · services 1fr · contact 1fr */
.fp-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:clamp(2rem,4vw,5rem);
  align-items:start;
}


/* ─────────────────────────────────────────────────────────────────
   C. BRAND / HERITAGE COLUMN
   ───────────────────────────────────────────────────────────────── */

.fp-brand-name{
  font-size:0.96rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#c4cdd8;
  margin:0 0 0.35rem;
  line-height:1;
}

.fp-since{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  margin:0 0 1.4rem;
  font-size:0.60rem;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fp-accent);
  line-height:1;
}
.fp-since::before{
  content:"";
  width:1.0rem;
  height:1px;
  background:var(--fp-accent);
  opacity:0.48;
  flex-shrink:0;
}

.fp-desc{
  font-size:0.83rem;
  line-height:1.80;
  color:var(--fp-text);
  max-width:28ch;
  margin:0;
}


/* ─────────────────────────────────────────────────────────────────
   D. COLUMN HEADINGS (shared)
   ───────────────────────────────────────────────────────────────── */

.fp-heading{
  font-size:0.64rem;
  font-weight:700;
  letter-spacing:0.20em;
  text-transform:uppercase;
  color:var(--fp-text-hi);
  margin:0 0 1.3rem;
  padding-bottom:0.7rem;
  border-bottom:1px solid var(--fp-sep);
  position:relative;
}
.fp-heading::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  width:1.3rem;
  height:1px;
  background:var(--fp-accent);
}


/* ─────────────────────────────────────────────────────────────────
   E. SERVICES COLUMN
   ───────────────────────────────────────────────────────────────── */

.fp-links{
  list-style:none;
  display:grid;
  gap:0.58rem;
}
.fp-links a{
  display:inline-flex;
  font-size:0.83rem;
  color:var(--fp-text);
  padding:0.05rem 0;
  transition:
    color 140ms ease,
    padding-left 220ms cubic-bezier(0.22,1,0.36,1);
}
.fp-links a:hover{
  color:#b8c2cc;
  padding-left:0.28rem;
}


/* ─────────────────────────────────────────────────────────────────
   F. CONTACT COLUMN
   ───────────────────────────────────────────────────────────────── */

.fp-contact{
  font-style:normal;
  display:grid;
  gap:0.7rem;
}

.fp-contact-item{
  display:flex;
  align-items:flex-start;
  gap:0.6rem;
  font-size:0.83rem;
  color:var(--fp-text);
  line-height:1.55;
  transition:color 140ms ease;
}
.fp-contact-item:hover{color:#b8c2cc}

.fp-contact-icon{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  width:0.95rem;
  height:0.95rem;
  margin-top:0.18rem;
  opacity:0.42;
}
.fp-contact-icon svg{
  width:100%;
  height:100%;
  fill:currentColor;
}


/* ─────────────────────────────────────────────────────────────────
   G. LOGO BAND — centered, minimal
   ───────────────────────────────────────────────────────────────── */

.fp-logo-band{
  padding-block:clamp(2.2rem,3.5vw,3.2rem);
  border-bottom:1px solid var(--fp-sep);
  background:var(--fp-bg-mid);
  text-align:center;
}

.fp-logo{
  display:inline-block;
  max-height:96px;
  width:auto;
  max-width:280px;
  opacity:0.88;
  filter:brightness(0.94) contrast(1.05);
  transition:opacity 220ms ease;
}
.fp-logo:hover{opacity:1}

/* Fallback text when logo image is absent */
.fp-logo-text{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#404850;
}
.fp-logo-text strong{
  font-size:1.05rem;
  color:#2c3238;
}


/* ─────────────────────────────────────────────────────────────────
   H. BOTTOM BAR — legal links + copyright
   ───────────────────────────────────────────────────────────────── */

.fp-bottom{
  padding-block:1.35rem;
  background:var(--fp-bg-bot);
}

.fp-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.65rem;
}

.fp-legal{
  display:flex;
  align-items:center;
  gap:0.55rem;
  flex-wrap:wrap;
}
.fp-legal a{
  font-size:0.70rem;
  color:var(--fp-text-dim);
  letter-spacing:0.015em;
  transition:color 140ms ease;
}
.fp-legal a:hover{color:var(--fp-text)}

.fp-dot-sep{
  color:var(--fp-text-dim);
  font-size:0.70rem;
  opacity:0.45;
  user-select:none;
}

.fp-copy{
  font-size:0.70rem;
  color:var(--fp-text-dim);
  letter-spacing:0.015em;
  margin:0;
}


/* ─────────────────────────────────────────────────────────────────
   I. RESPONSIVE — Section 20
   ───────────────────────────────────────────────────────────────── */

/* Tablet: 2-col, brand spans full width */
@media(max-width:1024px){
  .fp-grid{
    grid-template-columns:1fr 1fr;
    gap:2.5rem 3.5rem;
  }
  .fp-col--brand{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:2.5rem;
    row-gap:0.2rem;
    align-items:start;
    padding-bottom:1rem;
    border-bottom:1px solid var(--fp-sep);
  }
  .fp-col--brand .fp-brand-name{grid-column:1;grid-row:1}
  .fp-col--brand .fp-since{grid-column:1;grid-row:2}
  .fp-col--brand .fp-desc{grid-column:2;grid-row:1/3;align-self:center}
}

/* Mobile: single column */
@media(max-width:680px){
  .fp-grid{grid-template-columns:1fr;gap:2.5rem}
  .fp-col--brand{
    grid-column:1;
    display:block;
  }
  .fp-col--brand .fp-desc{margin-top:0.9rem}
  .fp-bottom-inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .fp-legal{justify-content:center}
  .fp-logo{max-height:56px}
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION 21 — Legal Prose Pages
═══════════════════════════════════════════════════════════════════ */

.legal-prose {
  max-width: 760px;
  margin-inline: auto;
}

.legal-prose h2 {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #c4cdd8;
  margin-top: clamp(2rem, 3.5vw, 2.8rem);
  margin-bottom: 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.legal-prose h2:first-child {
  margin-top: 0;
}

.legal-prose p {
  color: #7a8694;
  line-height: 1.88;
  margin-bottom: 1rem;
}

.legal-prose ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1.2rem 0;
  display: grid;
  gap: 0.5rem;
}

.legal-prose ul li {
  color: #7a8694;
  line-height: 1.72;
  padding-left: 1.1rem;
  position: relative;
}

.legal-prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent, #b79263);
}

.legal-prose strong {
  color: #9aa4b2;
  font-weight: 600;
}

.legal-prose em {
  color: #9aa4b2;
  font-style: italic;
}

.legal-prose a {
  color: var(--color-accent, #b79263);
  text-decoration: none;
  border-bottom: 1px solid rgba(183,146,99,0.28);
  transition: color 220ms, border-color 220ms;
}

.legal-prose a:hover {
  color: var(--color-accent-strong, #d5b183);
  border-color: rgba(213,177,131,0.55);
}

.legal-updated {
  margin-top: clamp(2.5rem, 4vw, 3.5rem) !important;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.78rem !important;
  color: #3e454e !important;
  letter-spacing: 0.02em;
}