/* --- TOKENS --- */
:root {
  --green:        #4CAF50;
  --darkgreen:    #3E8E41;
  --shadowgreen:  rgba(76,175,80,0.2);
  --lime:         #30d335;
  --copper:       #B5714A;
  --copper-dark:  #8B5635;
  --copper-light: #D4956E;
  --gold:         #C9A07A;
  --gold-pale:    #E8D5C0;
  --parchment:    #F0E8E0;
  --offwhite:     #F7F4F1;
  --forge:        #1A1410;
  --forge-mid:    #231A13;
  --forge-light:  #2E2118;
  --text-body:    #3A2D25;
  --text-muted:   #7A6558;
  --text-faint:   #A8988C;
  --panel:        #FBF8F5;   /* warm panel — never pure #fff */
  --rule:         rgba(181,113,74,0.22);
  --ff-display:   'Cormorant Garamond', Georgia, serif;
  --ff-body:      'Inter', sans-serif;
  --ease:         cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--ff-body); background: var(--offwhite); color: var(--text-body); overflow-x: hidden; line-height: 1.7; }
img, svg { display: block; }
a { text-decoration: none; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--parchment); }
::-webkit-scrollbar-thumb { background: var(--copper); border-radius: 2px; }

/* --- NAV --- */
nav {
  position: sticky; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3rem; height: 72px;
  background: rgba(26,20,16,0.96);
  border-bottom: 1px solid rgba(181,113,74,0.15);
}
.nav-brand {
  display: flex; align-items: center; gap: 14px;
}
.nav-wordmark {
  font-family: var(--ff-display); font-size: 1.1rem;
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
}
.nav-wordmark span { color: var(--copper); margin: 0 3px; }
/* One social-icon treatment, shared by the nav and the footer so the
   two never drift apart. 37px target, 19px glyph. */
.nav-social, .footer-social { display: flex; align-items: center; gap: 10px; }
.nav-social { margin-left: 6px; }
.nav-social a, .footer-social a {
  width: 37px; height: 37px; flex-shrink: 0;
  border: 1px solid rgba(181,113,74,0.3);
  display: flex; align-items: center; justify-content: center;
  color: rgba(201,160,122,0.75);
  transition: all 0.25s var(--ease);
  border-radius: 8px;
}
.nav-social a svg, .footer-social a svg { width: 19px; height: 19px; }
.footer-social a:hover {
  border-color: var(--copper); color: var(--copper);
  background: rgba(181,113,74,0.1);
  transform: translateY(-2px);
}
.footer-social a:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.footer-social-label {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(201,160,122,0.4); margin-bottom: 0.9rem;
}
@media (prefers-reduced-motion: reduce) { .footer-social a:hover { transform: none; } }
.nav-social a:hover { border-color: var(--copper); color: var(--copper); background: rgba(181,113,74,0.1); }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(240,232,224,0.6);
  transition: color 0.25s var(--ease);
  position: relative; padding-bottom: 2px;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--copper);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover { color: var(--copper); }
.nav-links a:hover::after { width: 100%; }

/* --- Mobile nav toggle (hidden by default, shown ≤640px) --- */
.nav-toggle {
  display: none; background: none; border: 1px solid rgba(181,113,74,0.3);
  width: 38px; height: 38px; align-items: center; justify-content: center;
  cursor: pointer; flex-direction: column; gap: 5px; flex-shrink: 0;
}
.nav-toggle span { display: block; width: 16px; height: 1px; background: var(--gold); transition: all 0.25s var(--ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-mobile-panel {
  display: none; position: fixed; top: 60px; left: 0; right: 0; z-index: 199;
  background: rgba(26,20,16,0.98); border-bottom: 1px solid rgba(181,113,74,0.15);
  flex-direction: column; padding: 0.5rem 0;
}
.nav-mobile-panel.open { display: flex; }
.nav-mobile-panel a {
  padding: 0.9rem 1.5rem; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(240,232,224,0.65); border-bottom: 1px solid rgba(181,113,74,0.08);
}
.nav-mobile-panel a:hover { color: var(--copper); }

/* --- HERO --- */
#hero {
  min-height: 100vh; background: var(--forge);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 7rem 3rem 5rem;
  position: relative; overflow: hidden;
}
/* Background layers.
   These are `position: absolute` while the hero's content is in normal
   flow — so without an explicit z-index they PAINT ON TOP of the text
   and swallow clicks on the hero buttons. `z-index: -1` (safe: #hero
   isolates its own stacking context) puts them back behind, and
   pointer-events:none is a second line of defence. */
.hero-grid-bg {
  position: absolute; inset: 0; z-index: -1; opacity: 0.03;
  background-image:
    linear-gradient(var(--copper) 1px, transparent 1px),
    linear-gradient(90deg, var(--copper) 1px, transparent 1px);
  background-size: 68px 68px;
  pointer-events: none;
}
.hero-glow {
  position: absolute; top: 46%; left: 50%; z-index: -1;
  transform: translate(-50%, -50%);
  width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(circle, rgba(181,113,74,0.12) 0%, rgba(181,113,74,0.04) 45%, transparent 70%);
  pointer-events: none;
}
.hero-logo-wrap {
  position: relative; margin-bottom: 2.5rem;
  display: flex; align-items: center; justify-content: center;
}
.hero-logo-svg { width: 110px; height: 110px; }

/* Homepage hero logo.
   The source PNG has a flat white background. #hero-logo-knockout
   (defined once as a hidden <svg><filter> right after <body> in
   index.html) removes it: it finds the per-pixel minimum of R/G/B —
   a clean "how white is this" signal, since white has a high minimum
   on every channel while a saturated colour like this logo's copper
   or gold has at least one low channel — inverts that into an alpha
   mask, and composites it back over the ORIGINAL colours. So the
   white goes transparent and the artwork's own colours are untouched:
   no hue shift, no darkening.
   (`mix-blend-mode: multiply` alone also removes the white, but on a
   ground this dark it multiplies the logo's own colours down with
   it, leaving them muddy — that's why this uses the SVG filter
   instead. Tested against a synthetic stand-in before shipping,
   since this environment can't fetch the real Cloudinary asset to
   check directly — worth a quick look on your end.) */
.hero-logo {
  height: 190px; width: auto; object-fit: contain;
  margin: 0;
  filter: url(#hero-logo-knockout)
          drop-shadow(0 0 30px rgba(181,113,74,0.38))
          drop-shadow(0 6px 20px rgba(0,0,0,0.5));
}
@media (max-width: 640px) { .hero-logo { height: 130px; } }
/* Content column. Sits in normal flow above the background layers;
   the max-width keeps the tagline to a comfortable measure. */
.hero-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  max-width: 620px;
}

/* Copper rule under the logo, with the brand's star as its node —
   the same motif as the scrollwork dividers further down the page. */
.hero-mark-rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 200px; margin: 1.9rem 0 2.1rem;
}
.hero-mark-rule i {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181,113,74,0.65));
}
.hero-mark-rule i:last-child { background: linear-gradient(90deg, rgba(181,113,74,0.65), transparent); }
.hero-mark-rule span { color: var(--copper); font-size: 0.7rem; line-height: 1; }

/* "Est. Dubai 1990" — small serif, letterspaced, flanked by hairlines. */
.hero-est-row {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 2.2rem;
}
.hero-est-row i { width: 36px; height: 1px; background: rgba(181,113,74,0.4); }

.hero-rule-top, .hero-rule-bottom {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 0.6rem;
}
.hero-rule-line {
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
}
.hero-est {
  font-family: var(--ff-display); font-size: 0.72rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--copper); font-style: italic;
}
.hero-eyebrow {
  font-size: 0.65rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(201,160,122,0.55); margin-bottom: 1.4rem;
  font-weight: 400;
}
.hero-h1 {
  font-family: var(--ff-display);
  font-size: clamp(3.2rem, 8vw, 6rem);
  font-weight: 300; line-height: 1.0;
  color: var(--parchment); margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
}
.hero-h1-italic {
  font-family: var(--ff-display);
  font-size: clamp(3.2rem, 8vw, 6rem);
  font-weight: 300; font-style: italic; line-height: 1.0;
  color: var(--gold); margin-bottom: 1.8rem;
  letter-spacing: 0.02em;
}
.hero-tagline {
  font-family: var(--ff-display); font-size: clamp(1.25rem, 2.9vw, 1.72rem);
  font-weight: 300; font-style: italic; line-height: 1.5;
  color: rgba(232,213,192,0.82); margin: 0;
  letter-spacing: 0.01em; max-width: 520px;
}
.hero-actions {
  display: flex; gap: 1rem; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-top: 2.8rem;
}
/* Buttons must be reliably clickable: keep them above any decorative
   sibling and give them a real hit area. */
.hero-actions a { position: relative; z-index: 2; }

/* --- Load sequence ---
   One orchestrated entrance, staggered by `--d`, rather than a
   separate effect on each element. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-rise { animation: heroRise 0.85s var(--ease) both; animation-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  .hero-rise { animation: none; opacity: 1; transform: none; }
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.9rem 2.4rem;
  background: var(--copper); color: var(--parchment);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 0.25s var(--ease);
}
.btn-primary:hover { background: var(--copper-dark); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.9rem 2.4rem;
  border: 1px solid rgba(181,113,74,0.4); color: rgba(240,232,224,0.65);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: all 0.25s var(--ease);
}
.btn-ghost:hover { border-color: var(--copper); color: var(--copper); }
.hero-scroll-hint {
  position: absolute; bottom: 2.2rem;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.hero-scroll-text {
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(201,160,122,0.35);
}
.hero-scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(181,113,74,0.5), transparent);
}

/* --- COPPER TEXTURE / BLOB ACCENT (legacy helper — softened) --- */
/* Previously this painted a near-opaque copper mass plus a full-bleed
   `mix-blend-mode: overlay` grain across the whole section, which is
   what washed the content out. Now it is a soft, blurred glow that sits
   well behind the content, and the grain is barely-there soft-light. */
.copper-blob-bg { position: relative; isolation: isolate; overflow: hidden; }
.copper-blob-bg::before {
  content: ''; position: absolute; top: -30%; right: -20%;
  width: 54%; height: 130%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,232,210,0.18), transparent 48%),
    linear-gradient(150deg, #D69B6C 0%, #B5714A 38%, #8B5635 70%, #5E3822 100%);
  border-radius: 62% 38% 55% 45% / 58% 42% 58% 42%;
  filter: blur(26px);
  opacity: 0.26; z-index: 0; pointer-events: none;
}
.copper-blob-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light; opacity: 0.25; pointer-events: none; z-index: 0;
}
.copper-blob-bg > * { position: relative; z-index: 1; }
@media (max-width: 780px) {
  .copper-blob-bg::before { width: 88%; height: 52%; top: -12%; right: -24%; opacity: 0.2; }
}

/* ============================================================
   SOFT ORGANIC COPPER SHAPES
   The decorative language from the company profile: irregular,
   soft-edged copper/bronze blobs scattered sparsely behind the
   content. Usage:

     <section class="section has-decor">
       <div class="decor" aria-hidden="true">
         <span class="blob blob--copper blob--o2"
               style="--s:380px; top:-120px; right:-140px"></span>
       </div>
       ...content...
     </section>

   `--s` sets the size; top/left/right/bottom position it. Shapes
   are decoration only: they never take pointer events and are
   always painted below the content layer.
   ============================================================ */
/* `.has-decor` isolates a stacking context, and `.decor` sits at
   z-index:-1 inside it — behind the content but in front of the
   section's own background.
   Do NOT lift the content with `.has-decor > *:not(.decor) {
   position: relative }`: that overrides `position: absolute` on
   children like .hero-glow and .hero-scroll-hint, dropping them
   into normal flow and pushing the whole hero down the page. */
.has-decor { position: relative; isolation: isolate; overflow: hidden; }

.decor {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}

.blob {
  --s: 320px;
  position: absolute; display: block;
  width: var(--s); height: var(--s);
  pointer-events: none;
}

/* Irregular rounded silhouettes — four hand-tuned variants so
   repeated shapes never read as identical circles. */
.blob--o1 { border-radius: 62% 38% 55% 45% / 58% 42% 58% 42%; }
.blob--o2 { border-radius: 44% 56% 38% 62% / 52% 36% 64% 48%; }
.blob--o3 { border-radius: 58% 42% 66% 34% / 40% 62% 38% 60%; }
.blob--o4 { border-radius: 36% 64% 48% 52% / 60% 44% 56% 40%; }

/* Petal silhouettes — rounded square, one corner pulled tight. This
   is the shape used throughout the company profile; the tight corner
   points a different way in each variant. */
.blob--petal1 { border-radius: 46% 46% 46% 14%; }
.blob--petal2 { border-radius: 46% 46% 14% 46%; }
.blob--petal3 { border-radius: 14% 46% 46% 46%; }
.blob--petal4 { border-radius: 46% 14% 46% 46%; }

/* --- Tones --- */

/* Metallic copper mass — for dark forge backgrounds. */
.blob--copper {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,232,210,0.22), transparent 50%),
    radial-gradient(circle at 74% 82%, rgba(20,12,6,0.45), transparent 58%),
    linear-gradient(150deg, #D69B6C 0%, #B5714A 36%, #8B5635 68%, #5E3822 100%);
  filter: blur(18px);
  opacity: 0.3;
}

/* Pale copper wash — for parchment / off-white backgrounds. */
.blob--tint {
  background:
    radial-gradient(circle at 34% 30%, rgba(212,149,110,0.5), transparent 58%),
    linear-gradient(145deg, rgba(212,149,110,0.4) 0%, rgba(181,113,74,0.26) 55%, rgba(201,160,122,0.14) 100%);
  filter: blur(34px);
  opacity: 0.5;
}

/* Diffuse halo — the softest of the three, for edges and corners. */
.blob--glow {
  background: radial-gradient(circle at 50% 50%, rgba(181,113,74,0.34) 0%, rgba(181,113,74,0.1) 45%, transparent 72%);
  filter: blur(12px);
  opacity: 0.75;
}

/* Hairline outline — an echo of a shape rather than a shape. */
.blob--ring {
  background: none;
  border: 1px solid rgba(181,113,74,0.22);
  filter: none;
  opacity: 0.55;
}
.blob--ring-light { border-color: rgba(201,160,122,0.28); }

/* Brushed copper-leaf texture, as on the profile's shapes. Use on the
   one or two largest shapes per page, not on every one. */
.blob--foil {
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,0.09) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 26% 22%, rgba(255,238,222,0.42), transparent 52%),
    radial-gradient(circle at 78% 84%, rgba(24,14,7,0.5), transparent 60%),
    linear-gradient(142deg, #E0A879 0%, #C07E52 30%, #9A6038 62%, #6B4127 100%);
  filter: blur(6px);
  opacity: 0.34;
}

/* Optional metallic grain on a single large shape. */
.blob--grain::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light; opacity: 0.6;
}

/* Fade modifiers for shapes that run off a section edge. */
/* Fades a shape out toward its own edges, for shapes that run off a
   section boundary and would otherwise end on a visible hard edge. */
.blob--soften {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 38%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 38%, transparent 76%);
}

@media (max-width: 900px) {
  /* Keep the composition sparse on small screens: shapes shrink to
     two-thirds and the smallest accents drop out entirely. */
  .blob { width: calc(var(--s) * 0.66); height: calc(var(--s) * 0.66); }
  .blob--drop-mobile { display: none; }
}

/* --- SECTION BASE --- */
.section { padding: 7rem 2rem; }
.inner { max-width: 1080px; margin: 0 auto; }
.eyebrow {
  font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 0.9rem; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--copper);
  flex-shrink: 0;
}
.display-title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 400; line-height: 1.15; color: var(--forge);
  margin-bottom: 1.4rem;
}
.display-title em { font-style: italic; color: var(--copper); }
.display-title-light { color: var(--parchment); }
.body-copy {
  font-size: 0.92rem; line-height: 1.9;
  color: var(--text-muted); max-width: 580px;
}

/* --- DIVIDER --- */
.divider-wrap { overflow: hidden; line-height: 0; }
.divider-wrap svg { width: 100%; height: 44px; }

/* --- ABOUT --- */
#about { background: var(--parchment); }
.about-layout { display: grid; grid-template-columns: 55fr 45fr; gap: 6rem; align-items: center; }
.about-body { margin-bottom: 1rem; }
.about-pull {
  font-family: var(--ff-display); font-size: 1.35rem;
  font-style: italic; font-weight: 300;
  color: var(--copper); border-left: 2px solid var(--copper);
  padding: 0.8rem 0 0.8rem 1.4rem;
  margin: 2rem 0; line-height: 1.5;
}
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 2.5rem; }
.stat-cell { background: var(--panel); padding: 1.4rem 1rem; text-align: center; }
.stat-num { font-family: var(--ff-display); font-size: 2.4rem; font-weight: 300; color: var(--copper); line-height: 1; }
.stat-lbl { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.4rem; }
.about-visual { position: relative; }
.about-frame {
  width: 100%; aspect-ratio: 3/4;
  background: var(--forge); display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.about-frame-inner {
  position: absolute; inset: 14px;
  border: 1px solid rgba(181,113,74,0.25);
  display: flex; align-items: center; justify-content: center;
}
.about-frame-corner {
  position: absolute; width: 20px; height: 20px;
}
.about-frame-corner.tl { top: 8px; left: 8px; border-top: 1px solid var(--copper); border-left: 1px solid var(--copper); }
.about-frame-corner.tr { top: 8px; right: 8px; border-top: 1px solid var(--copper); border-right: 1px solid var(--copper); }
.about-frame-corner.bl { bottom: 8px; left: 8px; border-bottom: 1px solid var(--copper); border-left: 1px solid var(--copper); }
.about-frame-corner.br { bottom: 8px; right: 8px; border-bottom: 1px solid var(--copper); border-right: 1px solid var(--copper); }
.about-badge {
  position: absolute; bottom: -1.2rem; left: -1.2rem;
  background: var(--copper); padding: 1.2rem 1.4rem; text-align: center;
  min-width: 110px;
}
.about-badge-num { font-family: var(--ff-display); font-size: 2.2rem; font-weight: 300; color: var(--parchment); line-height: 1; display: block; }
.about-badge-txt { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240,232,224,0.7); display: block; margin-top: 3px; }

/* --- SERVICES --- */
#services { background: var(--offwhite); }
.services-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3.5rem; flex-wrap: wrap; gap: 1rem; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
a.svc-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.svc-card {
  background: var(--panel); padding: 2.2rem 1.8rem;
  transition: background 0.25s var(--ease);
  position: relative;
}
.svc-card:hover { background: var(--parchment); }
.svc-num {
  font-family: var(--ff-display); font-size: 3rem;
  font-weight: 300; color: rgba(181,113,74,0.12);
  line-height: 1; margin-bottom: 0.8rem;
}
.svc-icon { width: 36px; height: 36px; margin-bottom: 1rem; color: var(--copper); }
.svc-name { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 400; color: var(--forge); margin-bottom: 0.6rem; }
.svc-desc { font-size: 0.83rem; line-height: 1.75; color: var(--text-muted); }
.svc-arrow {
  position: absolute; bottom: 1.5rem; right: 1.5rem;
  width: 28px; height: 28px; border: 1px solid rgba(181,113,74,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--copper); opacity: 0;
  transition: opacity 0.25s var(--ease);
  font-size: 0.8rem;
}
.svc-card:hover .svc-arrow { opacity: 1; }

/* --- MATERIALS & PROCESSES STRIP (specializations) --- */
.material-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(181,113,74,0.15); border: 1px solid rgba(181,113,74,0.15);
  margin-top: 3.5rem;
}
.material-badge { background: var(--offwhite); padding: 1.8rem 1.2rem; text-align: center; transition: background 0.25s var(--ease); }
.material-badge:hover { background: rgba(181,113,74,0.06); }
.material-badge-label { font-family: var(--ff-display); font-size: 1.05rem; color: var(--copper-dark); letter-spacing: 0.01em; }
.material-badge-sub { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
@media (max-width: 780px) { .material-strip { grid-template-columns: repeat(2, 1fr); } }

/* --- LEADERSHIP / MD MESSAGE & CORE VALUES --- */
#leadership { background: var(--forge); }
.md-quote {
  font-family: var(--ff-display); font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-style: italic; font-weight: 300; line-height: 1.75;
  color: rgba(240,232,224,0.85); margin: 1.6rem 0 1.8rem;
}
.md-sign { font-family: var(--ff-display); font-size: 1rem; color: var(--gold); letter-spacing: 0.04em; }
.md-sign span { display: block; font-family: var(--ff-body); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(201,160,122,0.45); margin-top: 4px; }
.core-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(181,113,74,0.12); border: 1px solid rgba(181,113,74,0.12); margin-top: 4rem; }
.value-card { background: var(--forge-mid); padding: 2.2rem 1.6rem; text-align: center; transition: background 0.25s var(--ease); }
.value-card:hover { background: var(--forge-light); }
.value-num { font-family: var(--ff-display); font-size: 0.85rem; color: var(--copper); opacity: 0.6; margin-bottom: 0.8rem; }
.value-name { font-family: var(--ff-display); font-size: 1.1rem; color: var(--parchment); margin-bottom: 0.6rem; }
.value-desc { font-size: 0.76rem; line-height: 1.7; color: rgba(240,232,224,0.4); }
@media (max-width: 780px) { .core-values-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- SAFETY STANDARDS & POLICY --- */
#safety { background: var(--offwhite); }
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem 2.2rem; margin-top: 3.2rem; }
.safety-item { display: flex; gap: 1rem; align-items: flex-start; }
.safety-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(181,113,74,0.35); display: flex; align-items: center; justify-content: center; color: var(--copper); }
.safety-text-title { font-family: var(--ff-display); font-size: 1rem; color: var(--forge); margin-bottom: 0.3rem; }
.safety-text-desc { font-size: 0.8rem; line-height: 1.7; color: var(--text-muted); }
@media (max-width: 900px) { .safety-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .safety-grid { grid-template-columns: 1fr; } }

/* --- PORTFOLIO --- */
#portfolio { background: var(--parchment); }
.port-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; }
.port-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 260px 260px; gap: 10px; }
.port-item { background: var(--forge); position: relative; overflow: hidden; cursor: pointer; }
.port-item:nth-child(1) { grid-column: span 7; }
.port-item:nth-child(2) { grid-column: span 5; }
.port-item:nth-child(3) { grid-column: span 4; }
.port-item:nth-child(4) { grid-column: span 5; }
.port-item:nth-child(5) { grid-column: span 3; }
.port-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.08;
}
.port-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,20,16,0.9) 0%, rgba(26,20,16,0) 55%);
  opacity: 0; transition: opacity 0.35s var(--ease);
  display: flex; align-items: flex-end; padding: 1.4rem;
}
.port-item:hover .port-overlay { opacity: 1; }
.port-label-title { font-family: var(--ff-display); font-size: 1.05rem; color: var(--parchment); font-weight: 400; line-height: 1.3; }
.port-label-sub { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.port-frame {
  position: absolute; inset: 10px;
  border: 1px solid rgba(181,113,74,0.18);
  pointer-events: none;
}
.port-cat-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); background: rgba(26,20,16,0.6);
  padding: 3px 8px; border: 1px solid rgba(201,160,122,0.2);
}

/* --- PROCESS --- */
#process { background: var(--forge); padding: 6rem 2rem; }
.process-title { color: var(--parchment); }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 3.5rem; position: relative; }
.process-steps::before {
  content: ''; position: absolute; top: 28px; left: 10%; right: 10%;
  height: 1px; background: var(--rule);
}
.process-step { text-align: center; padding: 0 1.5rem; }
.process-step-num {
  width: 56px; height: 56px; border: 1px solid rgba(181,113,74,0.3);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.4rem;
  font-family: var(--ff-display); font-size: 1.4rem; font-weight: 300;
  color: var(--copper); background: var(--forge);
  position: relative; z-index: 1;
}
.process-step-name { font-family: var(--ff-display); font-size: 1.1rem; color: var(--parchment); font-weight: 400; margin-bottom: 0.5rem; }
.process-step-desc { font-size: 0.78rem; line-height: 1.7; color: rgba(240,232,224,0.4); }

/* --- CLIENTS --- */
#clients {
  background: linear-gradient(160deg, #1E1610 0%, #2A1D14 50%, #1E1610 100%);
  padding: 5rem 2rem;
  border-top: 1px solid rgba(181,113,74,0.15);
  border-bottom: 1px solid rgba(181,113,74,0.15);
}
.clients-eyebrow {
  font-family: var(--ff-display); font-size: 0.72rem;
  font-style: italic; letter-spacing: 0.2em;
  color: rgba(201,160,122,0.4); text-align: center;
  text-transform: uppercase; font-style: normal;
  margin-bottom: 2.8rem;
}
.clients-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; max-width: 900px; margin: 0 auto; border: 1px solid rgba(181,113,74,0.1); }
.client-cell {
  padding: 1.4rem 2.4rem; border-right: 1px solid rgba(181,113,74,0.1);
  border-bottom: 1px solid rgba(181,113,74,0.1);
  flex: 0 0 auto;
}
.client-cell:nth-child(4n) { border-right: none; }
.client-name {
  font-family: var(--ff-display); font-size: 0.95rem;
  font-weight: 300; letter-spacing: 0.1em;
  color: rgba(240,232,224,0.28);
  transition: color 0.25s var(--ease); cursor: default;
  white-space: nowrap;
}
.client-name:hover { color: var(--gold); }
.logo-ph {
  width: 100%; height: 64px;
  background: rgba(181,113,74,0.06);
  border: 1.5px dashed rgba(181,113,74,0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(201,160,122,0.55); text-align: center; padding: 0 0.5rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  position: relative;
}
.logo-ph::before {
  content: '⬚';
  font-size: 1.1rem;
  color: rgba(181,113,74,0.4);
  line-height: 1;
}
.client-cell:hover .logo-ph {
  background: rgba(181,113,74,0.12);
  border-color: var(--copper);
  color: var(--gold);
}

/* --- CONTACT --- */
#contact { background: var(--forge-mid); padding: 7rem 2rem; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact-left .display-title { color: var(--parchment); }
.contact-sub { font-size: 0.87rem; line-height: 1.85; color: rgba(240,232,224,0.45); margin-bottom: 2.5rem; max-width: 440px; }
.contact-details { display: flex; flex-direction: column; gap: 0; border: 1px solid rgba(181,113,74,0.15); }
.c-detail {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.2rem 1.4rem; border-bottom: 1px solid rgba(181,113,74,0.1);
}
.c-detail:last-of-type { border-bottom: none; }
.c-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid rgba(181,113,74,0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--copper); margin-top: 2px;
}
.c-lbl { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(201,160,122,0.4); margin-bottom: 3px; }
.c-val { font-size: 0.85rem; color: rgba(240,232,224,0.65); line-height: 1.5; }
.map-block { border: 1px solid rgba(181,113,74,0.18); overflow: hidden; }
.map-block iframe { width: 100%; height: 220px; display: block; border: none; filter: grayscale(40%) sepia(20%) brightness(0.85); }
.map-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.75rem; background: rgba(181,113,74,0.08);
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--copper); border-top: 1px solid rgba(181,113,74,0.15);
  transition: background 0.2s;
}
.map-link:hover { background: rgba(181,113,74,0.16); }
.form-wrap { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fg { display: flex; flex-direction: column; gap: 5px; }
.flbl { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240,232,224,0.35); }
.fi {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(181,113,74,0.18);
  color: var(--parchment); padding: 0.8rem 1rem;
  font-family: var(--ff-body); font-size: 0.88rem; outline: none; width: 100%;
  transition: border-color 0.2s;
}
.fi:focus { border-color: var(--copper); }
.fi::placeholder { color: rgba(240,232,224,0.18); }
textarea.fi { resize: vertical; min-height: 120px; }
select.fi { appearance: none; cursor: pointer; color: rgba(240,232,224,0.55); }
select.fi option { background: var(--forge); color: var(--parchment); }
.form-submit {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 1rem 2.6rem; background: var(--copper);
  color: var(--parchment); border: none; cursor: pointer;
  font-family: var(--ff-body); font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.2s var(--ease); align-self: flex-start;
  margin-top: 0.4rem;
}
.form-submit:hover { background: var(--copper-dark); }

/* --- LIGHTBOX --- */
#lightbox {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(26,20,16,0.96); backdrop-filter: blur(6px);
  flex-direction: column;
}
#lightbox.open { display: flex; }
.lb-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 2rem 3rem 1rem; flex-shrink: 0;
  border-bottom: 1px solid rgba(181,113,74,0.15);
}
.lb-title-block { max-width: 600px; }
.lb-title {
  font-family: var(--ff-display); font-size: 1.8rem;
  font-weight: 400; color: var(--parchment); line-height: 1.2;
  margin-bottom: 0.3rem;
}
.lb-subtitle {
  font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--copper);
}
.lb-close {
  background: none; border: 1px solid rgba(181,113,74,0.3);
  color: rgba(240,232,224,0.6); width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.2rem; flex-shrink: 0;
  transition: all 0.2s; margin-left: 2rem;
}
.lb-close:hover { border-color: var(--copper); color: var(--copper); }
.lb-body {
  display: grid; grid-template-columns: 1fr 380px;
  flex: 1; overflow: hidden;
}
.lb-image-area {
  position: relative; background: var(--forge);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lb-main-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.lb-img-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  border: 2px dashed rgba(181,113,74,0.3);
  margin: 1.5rem; box-sizing: border-box;
}
.lb-img-ph-icon { color: rgba(181,113,74,0.35); }
.lb-img-ph-text {
  font-size: 0.65rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(181,113,74,0.4);
}
.lb-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(26,20,16,0.7); border: 1px solid rgba(181,113,74,0.25);
  color: var(--gold); width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.1rem;
  transition: all 0.2s; z-index: 2;
}
.lb-nav-btn:hover { background: var(--copper); border-color: var(--copper); color: var(--parchment); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-counter {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  font-size: 0.65rem; letter-spacing: 0.14em;
  color: rgba(201,160,122,0.4); background: rgba(26,20,16,0.6);
  padding: 4px 12px; border: 1px solid rgba(181,113,74,0.15);
}
.lb-sidebar {
  border-left: 1px solid rgba(181,113,74,0.15);
  display: flex; flex-direction: column; overflow: hidden;
}
.lb-desc-area {
  padding: 2rem; flex: 1; overflow-y: auto;
  border-bottom: 1px solid rgba(181,113,74,0.12);
}
.lb-desc-label {
  font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--copper);
  margin-bottom: 0.8rem;
}
.lb-desc-text {
  font-family: var(--ff-display); font-size: 1rem;
  font-weight: 300; font-style: italic;
  color: rgba(240,232,224,0.55); line-height: 1.8;
}
.lb-thumb-area {
  padding: 1.2rem; overflow-y: auto; flex-shrink: 0;
  max-height: 180px;
}
.lb-thumb-label {
  font-size: 0.58rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(201,160,122,0.3);
  margin-bottom: 0.8rem;
}
.lb-thumbs {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.lb-thumb {
  width: 64px; height: 48px;
  background: var(--forge-light);
  border: 1px solid rgba(181,113,74,0.2);
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: border-color 0.2s;
  flex-shrink: 0; overflow: hidden;
}
.lb-thumb.active { border-color: var(--copper); }
.lb-thumb:hover { border-color: rgba(181,113,74,0.5); }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb-ph {
  font-size: 0.5rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(181,113,74,0.3);
  text-align: center; padding: 4px;
}

/* --- FOOTER --- */
footer {
  background: var(--forge);
  /* Extra bottom padding so the fixed WhatsApp button never sits on
     top of the copyright line. */
  padding: 3rem 4rem 5.5rem;
  border-top: 1px solid rgba(181,113,74,0.15);
  display: block;
  width: 100%;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(181,113,74,0.1);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-brand-name {
  font-family: var(--ff-display); font-size: 1.3rem;
  font-weight: 300; letter-spacing: 0.15em;
  color: var(--gold); margin-bottom: 0.4rem;
}
.footer-brand-tag {
  font-family: var(--ff-display); font-size: 0.85rem;
  font-style: italic; color: rgba(201,160,122,0.35);
}
.footer-nav {
  display: flex; flex-direction: row;
  flex-wrap: wrap; gap: 0.6rem 2rem;
  align-items: center; justify-content: flex-end;
}
.footer-nav a {
  font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(240,232,224,0.3);
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--copper); }
.footer-bottom {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.footer-copy {
  font-size: 0.68rem; color: rgba(240,232,224,0.18); letter-spacing: 0.06em;
}
.footer-uae {
  font-size: 0.68rem; color: rgba(201,160,122,0.25); letter-spacing: 0.08em;
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
  .about-layout { grid-template-columns: 1fr; gap: 3rem; }
  .about-visual { max-width: 380px; margin: 0 auto; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; gap: 3.5rem; }
  .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .process-steps::before { display: none; }
  .lb-body { grid-template-columns: 1fr; }
  .lb-sidebar { border-left: none; border-top: 1px solid rgba(181,113,74,0.15); max-height: 46vh; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  html { font-size: 15px; }

  /* --- Nav --- */
  nav { padding: 0 1.1rem; height: 60px; }
  .nav-wordmark { font-size: 0.82rem; letter-spacing: 0.12em; }
  .nav-social { gap: 6px; }
  .nav-social a { width: 24px; height: 24px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  /* --- Section spacing --- */
  .section { padding: 4rem 1.25rem; }
  #process { padding: 4rem 1.25rem; }
  #testimonials { padding: 4rem 1.25rem !important; }
  #clients { padding: 3.5rem 1.25rem; }
  #contact { padding: 4rem 1.25rem !important; }
  footer { padding: 2.5rem 1.25rem; }

  .hero-eyebrow { font-size: 0.58rem; letter-spacing: 0.2em; }
  .nav-social { gap: 7px; margin-left: 2px; }
  .nav-social a { width: 33px; height: 33px; }
  .nav-social a svg { width: 17px; height: 17px; }
  .hero-mark-rule { width: 150px; margin: 1.4rem 0 1.5rem; }
  .hero-est-row { margin-top: 1.7rem; }
  .hero-est-row i { width: 24px; }
  .hero-actions { margin-top: 2.1rem; gap: 0.75rem; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { padding: 0.85rem 1.7rem; font-size: 0.65rem; }
  .footer-social { gap: 8px; }

  /* --- Hero --- */
  #hero { padding: 6rem 1.25rem 4rem; min-height: 92vh; }
  .hero-h1, .hero-h1-italic { font-size: clamp(2.4rem, 13vw, 3.4rem); }
  .hero-tagline { font-size: 0.95rem; max-width: 320px; }
  .hero-actions { flex-direction: column; width: 100%; gap: 0.9rem; }
  .btn-primary, .btn-ghost { width: 100%; justify-content: center; padding: 1rem 1.5rem; }
  .hero-logo-svg, img[alt="Star Wrought Iron Logo"] { height: 84px !important; }

  /* --- About --- */
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .about-visual { max-width: 280px; }
  .about-badge { left: 0; bottom: -1rem; padding: 1rem 1.1rem; min-width: 90px; }

  /* --- Services --- */
  .services-header { flex-direction: column; align-items: flex-start; }
  .services-grid { grid-template-columns: 1fr; }
  .svc-card { padding: 1.8rem 1.5rem; }
  .svc-arrow { opacity: 1; }

  /* --- Portfolio --- */
  .port-header { flex-direction: column; align-items: flex-start; }
  .port-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
  .port-item, .port-item:nth-child(1), .port-item:nth-child(2),
  .port-item:nth-child(3), .port-item:nth-child(4), .port-item:nth-child(5) {
    grid-column: span 1; height: 240px;
  }
  .port-overlay { opacity: 1; background: linear-gradient(to top, rgba(26,20,16,0.92) 0%, rgba(26,20,16,0.15) 60%, rgba(26,20,16,0) 100%); }

  /* --- Testimonials --- */
  #testimonials > .inner > div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  #testimonials div[style*="gap:1.5rem"] { flex-direction: column; gap: 0.8rem !important; }
  #testimonials div[style*="width:80px"] { display: none; }

  /* --- Process --- */
  .process-steps { grid-template-columns: 1fr; row-gap: 2.2rem; }

  /* --- Clients --- */
  .client-cell { padding: 1rem 1.4rem; }

  /* --- Contact --- */
  .form-row { grid-template-columns: 1fr; }
  .contact-details { border: 1px solid rgba(181,113,74,0.15); }
  .map-block iframe { height: 180px; }

  /* --- Lightbox --- */
  .lb-header { padding: 1.25rem 1.25rem 0.9rem; }
  .lb-title { font-size: 1.25rem; }
  .lb-close { width: 34px; height: 34px; margin-left: 1rem; }
  .lb-image-area { min-height: 240px; }
  .lb-desc-area { padding: 1.25rem; }
  .lb-thumb-area { padding: 0.9rem; max-height: 110px; }
  .lb-thumb { width: 52px; height: 40px; }
  .lb-nav-btn { width: 36px; height: 36px; font-size: 1rem; }

  /* --- Footer --- */
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-nav { justify-content: flex-start; gap: 0.5rem 1.4rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* --- WHATSAPP FLOATING BUTTON --- */
.wa-float {
  position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 300;
  display: flex; align-items: center; gap: 10px;
  background: var(--lime); color: var(--parchment);
  padding: 0.85rem 1.3rem 0.85rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(26,20,16,0.35), 0 0 0 1px var(--shadowgreen);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  cursor: pointer;
}
.wa-float:hover {
  background: var(--darkgreen);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(26,20,16,0.4), 0 0 0 1px var(--shadowgreen);
}
.wa-float-icon {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wa-float-icon svg { width: 22px; height: 22px; position: relative; z-index: 1; }
.wa-float-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.wa-float-label {
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(240,232,224,0.7);
}
.wa-float-sub {
  font-family: var(--ff-display); font-size: 0.95rem; font-style: italic;
  color: var(--parchment);
}
.wa-float-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  animation: waPulse 2.6s infinite;
  pointer-events: none;
}
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 var(--shadowgreen); }
  70%  { box-shadow: 0 0 0 12px rgba(181,113,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(181,113,74,0); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float-pulse { animation: none; }
}
@media (max-width: 640px) {
  .wa-float {
    right: 1rem; bottom: 1rem;
    padding: 0.7rem; border-radius: 50%;
  }
  .wa-float-text { display: none; }
  .wa-float-icon { width: 44px; height: 44px; }
}

/* ============================================================
   GALLERY PAGE (gallery.html) — small additions only.
   Reuses all existing tokens/classes above (nav, footer, hero
   primitives, .port-item / .port-frame / .port-overlay, .btn-*,
   .divider-wrap, .lb-* lightbox) so the page is a true extension
   of the main site rather than a separate style system.
   ============================================================ */

/* Secondary page hero (shorter than the 100vh homepage #hero,
   built from the same hero-grid-bg / hero-glow / hero-eyebrow
   primitives already defined above). */
.page-hero {
  background: var(--forge);
  position: relative; overflow: hidden;
  padding: 9rem 2rem 5rem;
  text-align: center;
}
.page-hero > * { position: relative; z-index: 1; }

/* Breadcrumb / back-to-home link.
   NOTE: the global `nav { position:sticky; height:72px; background:... }`
   rule above matches ANY <nav> element, which was painting a dark 72px
   bar behind the in-page breadcrumb. Reset it here. */
nav.breadcrumb {
  position: static; z-index: auto;
  height: auto; padding: 0;
  background: none; border-bottom: none;
}
.breadcrumb {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(201,160,122,0.45); margin-bottom: 1.8rem;
}
.breadcrumb a { color: var(--copper); transition: color 0.2s var(--ease); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .crumb-sep { color: rgba(201,160,122,0.25); }
.breadcrumb .crumb-current { color: var(--gold); }

/* Full gallery grid — reuses .port-item/.port-frame/.port-overlay
   (from the PORTFOLIO block above) but as an even, responsive
   grid instead of the homepage's asymmetric bento layout. */
.gallery-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.gallery-tile { aspect-ratio: 4 / 3; }
/* --- GALLERY CATEGORY FILTERS --- */
/* Soft copper pills, quiet until active/hovered — sits just above
   the grid. Wired up by initGalleryFilters()/applyGalleryFilter()
   in SWI2.js. */
.gallery-filters {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: 2.6rem;
}
.gallery-filter-btn {
  font-family: var(--ff-body); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  border: 1px solid rgba(181,113,74,0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.gallery-filter-btn:hover {
  border-color: var(--copper);
  color: var(--copper-dark);
  background: rgba(181,113,74,0.07);
}
.gallery-filter-btn.is-active {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--parchment);
}
.gallery-filter-btn.is-active:hover { background: var(--copper-dark); border-color: var(--copper-dark); }
.gallery-filter-btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
@media (max-width: 640px) {
  .gallery-filters { gap: 0.5rem; margin-bottom: 1.8rem; }
  .gallery-filter-btn { padding: 0.55rem 1rem; font-size: 0.64rem; }
}

/* --- INSTAGRAM-STYLE GALLERY TILES --- */
/* Uniform squares, soft rounded corners, one consistent gap. Each
   tile is a single image from the `projects` array and opens the
   shared lightbox at exactly that image. */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  /* Anchor point for .ig-tile--exiting below, which is pulled out of
     flow with position:absolute while it fades — its left/top are
     calculated (in JS) relative to this element's own box. */
  position: relative;
}
.ig-tile {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--forge-light);
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(58,45,37,0.06);
  /* transform is used for both the hover lift AND the filter
     fade/scale + FLIP glide (applyGalleryFilter() in SWI2.js) —
     sharing one transition here keeps both feeling like the same
     motion language. */
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), opacity 0.4s var(--ease);
}
.ig-tile:hover,
.ig-tile:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 14px 34px -14px rgba(94,56,34,0.4);
}
.ig-tile:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

/* --- Category filter states, driven by applyGalleryFilter() --- */
.ig-tile--hidden { display: none; }
.ig-tile--entering { opacity: 0; transform: scale(0.92); }
.ig-tile--exiting {
  opacity: 0; transform: scale(0.92);
  pointer-events: none; /* can't be clicked while fading away */
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ig-tile { transition: none; }
}
.ig-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s var(--ease);
}
.ig-tile:hover img,
.ig-tile:focus-visible img { transform: scale(1.06); }

/* Dark overlay + centred icon on hover */
.ig-tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,20,16,0.82) 0%, rgba(26,20,16,0.42) 55%, rgba(26,20,16,0.3) 100%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.ig-tile:hover .ig-tile-overlay,
.ig-tile:focus-visible .ig-tile-overlay { opacity: 1; }
.ig-tile-icon {
  color: var(--parchment);
  transform: scale(0.85); transition: transform 0.35s var(--ease);
}
.ig-tile:hover .ig-tile-icon { transform: scale(1); }

/* Project title, revealed with the overlay */
.ig-tile-caption {
  position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 1;
  font-family: var(--ff-display); font-style: italic;
  font-size: 0.92rem; line-height: 1.35; color: var(--parchment);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.ig-tile:hover .ig-tile-caption,
.ig-tile:focus-visible .ig-tile-caption { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 640px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ig-tile { border-radius: 12px; }
  .ig-tile-caption { font-size: 0.82rem; left: 10px; right: 10px; bottom: 10px; }
}

/* ============================================================
   GALLERY PAGE HERO
   Full-width, centred, dark forge ground with copper shapes
   drifting behind it and a gradient that resolves cleanly into
   the section below. No logo lockup, no split panel — one title,
   one line of copy, two actions.
   ============================================================ */
.gh {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% -10%, #33241A 0%, #241A13 46%, var(--forge) 100%);
  padding: 11rem 2rem 7rem;
  text-align: center;
}
/* Faint forge grid, same primitive as the homepage hero */
.gh-grid {
  position: absolute; inset: 0; z-index: 0; opacity: 0.03; pointer-events: none;
  background-image:
    linear-gradient(var(--copper) 1px, transparent 1px),
    linear-gradient(90deg, var(--copper) 1px, transparent 1px);
  background-size: 68px 68px;
}
/* Bottom fade so the hero resolves into the next section instead
   of ending on a hard edge. */
.gh-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px; z-index: 1;
  background: linear-gradient(to top, var(--forge) 0%, rgba(26,20,16,0.6) 45%, transparent 100%);
  pointer-events: none;
}
.gh .decor { z-index: 0; }
.gh-inner { position: relative; z-index: 2; max-width: 740px; margin: 0 auto; }
.gh-eyebrow {
  font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(201,160,122,0.5); margin-bottom: 1.6rem;
}
.gh-title {
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(3rem, 8vw, 5.4rem); line-height: 1.02;
  letter-spacing: -0.015em; color: var(--parchment);
  margin: 0;
}
.gh-rule {
  width: 72px; height: 1px; margin: 1.9rem auto 1.6rem;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
}
.gh-sub {
  font-family: var(--ff-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.02rem, 2.2vw, 1.22rem); line-height: 1.7;
  color: rgba(232,213,192,0.66);
  max-width: 500px; margin: 0 auto;
}
.gh-actions {
  display: flex; gap: 1rem; justify-content: center; align-items: center;
  flex-wrap: wrap; margin-top: 2.8rem;
}

@media (max-width: 640px) {
  .gh { padding: 8.5rem 1.5rem 5rem; }
  .gh-fade { height: 120px; }
  .gh-actions { gap: 0.75rem; }
  .gh-actions .btn-primary, .gh-actions .btn-ghost { padding: 0.85rem 1.6rem; font-size: 0.65rem; }
}


@media (max-width: 640px) {
  .page-hero { padding: 7rem 1.25rem 3.5rem; }
  .gallery-grid-wrap { grid-template-columns: 1fr; }
  .gallery-tile { aspect-ratio: 3 / 2; }
}

/* --- ACCESSIBILITY --- */
a:focus-visible, button:focus-visible, .fi:focus-visible, .ig-tile:focus-visible {
  outline: 2px solid var(--copper); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ig-tile, .ig-tile img, .ig-tile-overlay, .ig-tile-caption { transition: none; }
  .ig-tile:hover { transform: none; }
  .ig-tile:hover img { transform: none; }
}