/* ==========================================================================
   POLITE ROGUE | Digital Marketing Agency
   Sophisticated. Strategic. Unruly.
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, picture, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button.linklike{
  background: none; border: none; padding: 0; margin: 0;
  text-align: left; font-size: inherit; appearance: none; -webkit-appearance: none;
}
a { color: inherit; text-decoration: none; }

/* The native [hidden] attribute is only display:none in the UA stylesheet,
   which any component class setting its own `display` (e.g. .btn's
   display:inline-flex, .footer-social a's display:flex) silently overrides
   at equal specificity by simply appearing later in this file. That broke
   the site's gated-trust-signal pattern: the booking CTA and footer social
   icons carry `hidden` until PR_CONFIG supplies a real URL, and without
   this rule they render anyway with empty/dead hrefs. This single rule
   guarantees `hidden` always wins, for these elements and any future one. */
[hidden]{ display: none !important; }

/* ---- Design tokens ---- */
:root{
  --black:        #0A0A0A;
  --charcoal:     #1C1C1E;
  --ivory:        #F2EEE8;
  --warm-white:   #FAFAF8;
  --soft-gray:    #DADADA;
  --bronze:       #B58A5A;
  --bronze-light: #D4AD7E;
  --bronze-dim:   #8C6A43;

  --ink:          var(--black);
  --paper:        var(--warm-white);

  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  --nav-h: 84px;
}

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

em{ font-style: italic; color: var(--bronze); }

.eyebrow{
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before{
  content: "";
  width: 24px; height: 1px;
  background: var(--bronze);
  display: inline-block;
}

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

.skip-link{
  position: fixed;
  top: -60px; left: 16px;
  z-index: 10000;
  background: var(--bronze);
  color: var(--black);
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 2px;
  transition: top .2s var(--ease-out);
}
.skip-link:focus{ top: 16px; }

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

/* ---- Buttons ---- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  transition: background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), transform .25s var(--ease-out);
  white-space: nowrap;
}
.btn svg{ width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.btn:hover{ transform: translateY(-1px); }
.btn:hover svg{ transform: translateX(4px); }

.btn--bronze{
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--black);
}
.btn--bronze:hover{ background: var(--bronze-light); border-color: var(--bronze-light); }

.btn--ghost-light{ color: var(--warm-white); }
.btn--ghost-light:hover{ background: var(--warm-white); color: var(--black); }

.btn--ghost-dark{ color: var(--black); }
.btn--ghost-dark:hover{ background: var(--black); color: var(--warm-white); }

/* ==========================================================================
   Preloader
   ========================================================================== */
#preloader{
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s var(--ease-in-out), visibility .7s var(--ease-in-out);
}
#preloader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark{ width: 72px; height: 72px; position: relative; }
.preloader-mark svg{ width: 100%; height: 100%; }
.preloader-ring{
  fill: none; stroke: var(--bronze-dim); stroke-width: 1.2;
}
.preloader-ring--anim{
  fill: none; stroke: var(--bronze); stroke-width: 1.4;
  stroke-dasharray: 220; stroke-dashoffset: 220;
  animation: draw-ring 1.6s var(--ease-in-out) infinite;
}
.preloader-glyph{ fill: var(--bronze); opacity: 0; animation: fade-glyph 1.6s var(--ease-in-out) infinite; }
@keyframes draw-ring{
  0%{ stroke-dashoffset: 220; }
  55%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: -220; }
}
@keyframes fade-glyph{
  0%, 100%{ opacity: 0; } 50%{ opacity: 1; }
}
.preloader-pct{
  position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%);
  font-size: 0.7rem; letter-spacing: 0.2em; color: var(--soft-gray);
}

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out), height .4s var(--ease-out);
}
.site-nav .container{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav-brand{ display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1; }
.nav-brand img{ width: 34px; height: 34px; flex-shrink: 0; }
.nav-brand-word{
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--warm-white);
  transition: color .4s var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.nav-links{
  display: flex; align-items: center; gap: 40px;
}
.nav-links a{
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft-gray);
  position: relative;
  padding-bottom: 4px;
  transition: color .3s var(--ease-out);
}
.nav-links a::after{
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--bronze);
  transition: right .3s var(--ease-out);
}
.nav-links a:hover{ color: var(--warm-white); }
.nav-links a:hover::after{ right: 0; }
.nav-cta{ display: flex; align-items: center; gap: 20px; }

/* ---- Language switcher (desktop) ---- */
.lang-switch{ position: relative; }
.lang-current{
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid rgba(242,238,232,0.22);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--soft-gray);
  font-size: 0.74rem; letter-spacing: 0.1em;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.lang-current svg{ width: 12px; height: 12px; stroke: currentColor; }
.lang-current:hover{ color: var(--bronze-light); border-color: rgba(181,138,90,0.5); }
.lang-menu{
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 148px;
  background: var(--black);
  border: 1px solid rgba(242,238,232,0.14);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  z-index: 40;
}
.lang-menu li{
  list-style: none;
  padding: 9px 12px;
  font-size: 0.82rem;
  color: var(--soft-gray);
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lang-menu li:hover{ background: rgba(181,138,90,0.14); color: var(--warm-white); }
.lang-menu li.is-active{ color: var(--bronze-light); }

.site-nav.is-scrolled{
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(181,138,90,0.18);
  height: 68px;
}

.nav-toggle{
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--warm-white);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content: ""; display: block;
  width: 22px; height: 1px; background: currentColor;
  position: relative;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.nav-toggle span::before{ position: absolute; top: -7px; }
.nav-toggle span::after{ position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Cinematic hero / scroll-scrub
   ========================================================================== */
.hero-scrub{
  position: relative;
  height: 500vh; /* scroll runway for the scrub */
  background: var(--black);
}
.hero-stage{
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--black);
}
.hero-media{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero-media video,
.hero-media .hero-poster{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.hero-media video{ opacity: 0; transition: opacity .6s ease; }
.hero-media video.is-ready{ opacity: 1; }
.hero-media .hero-poster{
  transition: opacity .5s ease;
}
.hero-scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 22%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.75) 100%),
    radial-gradient(120% 90% at 12% 100%, rgba(0,0,0,.55), transparent 60%);
  pointer-events: none;
}

.hero-copy{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gutter) 96px;
  max-width: var(--container);
  margin-inline: auto;
  color: var(--warm-white);
}
.hero-caption{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.hero-caption.is-active{ opacity: 1; }
.hero-caption p{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  color: var(--warm-white);
  max-width: 16ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}

.hero-final{
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 0 var(--gutter) 90px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  pointer-events: none;
}
.hero-final.is-active{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.hero-final-inner{ max-width: var(--container); width: 100%; margin-inline: auto; }
.hero-final h1{
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  color: var(--warm-white);
  max-width: 14ch;
}
.hero-final .sub{
  margin-top: 22px;
  max-width: 46ch;
  font-size: 1.05rem;
  color: var(--soft-gray);
}
.hero-final .cta-row{
  margin-top: 34px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}

.scroll-cue{
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--soft-gray);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity .4s ease;
}
.scroll-cue.is-hidden{ opacity: 0; }
.scroll-cue .line{
  width: 1px; height: 34px;
  background: linear-gradient(var(--bronze), transparent);
  position: relative; overflow: hidden;
}
.scroll-cue .line::after{
  content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%;
  background: var(--bronze-light);
  animation: cue-drip 1.8s var(--ease-in-out) infinite;
}
@keyframes cue-drip{
  0%{ top: -100%; } 100%{ top: 100%; }
}

/* Static-hero gate: reduced motion / small viewport / save-data / slow connection */
.no-scrub .hero-scrub{ height: 100vh; }
.no-scrub .hero-stage{ position: relative; }
.no-scrub .hero-caption,
.no-scrub .scroll-cue{ display: none; }
.no-scrub .hero-final{ opacity: 1; transform: none; pointer-events: auto; position: relative; height: 100%; }
.no-scrub .hero-media video{ display: none; }
.no-scrub .hero-media .hero-poster{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .hero-scrub{ height: 100vh; }
  .hero-stage{ position: relative; }
  .hero-caption, .scroll-cue{ display: none; }
  .hero-final{ opacity: 1; transform: none; pointer-events: auto; position: relative; height: 100%; }
}
@media (max-width: 680px){
  .hero-scrub{ height: 100vh; }
  .hero-stage{ position: relative; }
  .hero-caption, .scroll-cue{ display: none; }
  .hero-final{ opacity: 1; transform: none; pointer-events: auto; position: relative; height: 100%; }
}

/* ==========================================================================
   Manifesto
   ========================================================================== */
.manifesto{
  background: var(--black);
  color: var(--warm-white);
  padding: 160px 0;
  position: relative;
}
.manifesto::before{
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 80px;
  background: linear-gradient(var(--bronze), transparent);
}
.manifesto .container{ max-width: 980px; text-align: center; }
.manifesto p.lede{
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.manifesto .lede em{ font-style: italic; }
.manifesto .eyebrow{ display: inline-flex; margin-bottom: 34px; justify-content: center; }
.manifesto-body{ margin-top: 46px; max-width: 660px; margin-inline: auto; display: flex; flex-direction: column; gap: 22px; }
.manifesto-body p{ font-size: 1.02rem; line-height: 1.75; color: var(--soft-gray); }
.reveal{
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Services
   ========================================================================== */
.services{ padding: 140px 0; background: var(--paper); }
.section-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 72px; flex-wrap: wrap;
}
.section-head h2{ font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 14ch; }
.section-head .lead{ max-width: 34ch; color: #4a4a4a; font-size: 1rem; }

.service-grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--soft-gray);
  border: 1px solid var(--soft-gray);
}
.service-card{
  background: var(--paper);
  padding: 44px 32px 40px;
  transition: background .4s var(--ease-out), transform .4s var(--ease-out);
  position: relative;
}
.service-card:hover{ background: var(--black); transform: translateY(-4px); }
.service-card:hover .service-icon svg{ stroke: var(--bronze); }
.service-card:hover h3, .service-card:hover p{ color: var(--warm-white); }
.service-card:hover .service-num{ color: var(--bronze); }
.service-icon{ width: 40px; height: 40px; margin-bottom: 28px; }
.service-icon svg{ width: 100%; height: 100%; stroke: var(--bronze); fill: none; stroke-width: 1.3; transition: stroke .4s ease; }
.service-num{ position: absolute; top: 40px; right: 32px; font-family: var(--font-display); font-size: 0.85rem; color: var(--soft-gray); transition: color .4s ease; }
.service-card h3{ font-size: 1.25rem; margin-bottom: 14px; transition: color .4s ease; }
.service-card p{ font-size: 0.92rem; color: #55524d; line-height: 1.65; transition: color .4s ease; }

@media (max-width: 980px){ .service-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .service-grid{ grid-template-columns: 1fr; } }

/* ---- Homepage 4-pillar teaser grid (Brand / Web / Systems / Growth) ---- */
.pillar-teaser-grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--soft-gray);
  border: 1px solid var(--soft-gray);
}
.pillar-teaser-card{
  background: var(--paper);
  padding: 40px 30px 36px;
  display: flex; flex-direction: column;
  transition: background .4s var(--ease-out), transform .4s var(--ease-out);
}
.pillar-teaser-card:hover{ background: var(--black); transform: translateY(-4px); }
.pillar-teaser-num{
  font-family: var(--font-display); font-size: 0.85rem; color: var(--bronze);
}
.pillar-teaser-card h3{
  font-family: var(--font-display); font-size: 1.5rem; margin-top: 14px;
  transition: color .4s ease;
}
.pillar-teaser-card p{
  margin-top: 12px; font-size: 0.9rem; color: #55524d; line-height: 1.6;
  transition: color .4s ease;
}
.pillar-teaser-caps{ margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.pillar-teaser-caps li{
  font-size: 0.78rem; letter-spacing: 0.04em; color: var(--bronze-dim);
  transition: color .4s ease;
}
.pillar-teaser-card:hover .pillar-teaser-caps li{ color: var(--bronze-light); }
.pillar-teaser-card:hover h3, .pillar-teaser-card:hover p{ color: var(--warm-white); }
.pillar-teaser-link{
  margin-top: 24px; font-size: 0.82rem; font-weight: 600; color: var(--bronze);
  border-bottom: 1px solid transparent; padding-bottom: 2px; align-self: flex-start;
  transition: border-color .3s ease;
}
.pillar-teaser-link:hover{ border-color: var(--bronze); }
.pillar-teaser-card:hover .pillar-teaser-link{ color: var(--bronze-light); }

@media (max-width: 980px){ .pillar-teaser-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .pillar-teaser-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Process
   ========================================================================== */
.process{ padding: 140px 0; background: var(--ivory); overflow: hidden; }
.process-list{ display: flex; flex-direction: column; }
.process-item{
  display: grid;
  grid-template-columns: 100px 1fr 1.1fr;
  gap: 40px;
  align-items: start;
  padding: 40px 0;
  border-top: 1px solid rgba(10,10,10,.12);
}
.process-item:last-child{ border-bottom: 1px solid rgba(10,10,10,.12); }
.process-index{ font-family: var(--font-display); font-size: 1.4rem; color: var(--bronze); }
.process-item h3{ font-size: 1.5rem; }
.process-item p{ color: #4a4a4a; max-width: 52ch; }
@media (max-width: 780px){
  .process-item{ grid-template-columns: 50px 1fr; }
  .process-item p{ grid-column: 2 / -1; }
}

/* ==========================================================================
   Difference
   ========================================================================== */
.difference{ padding: 140px 0; background: var(--black); color: var(--warm-white); }
.difference .section-head h2{ color: var(--warm-white); }
.difference .section-head .lead{ color: var(--soft-gray); }
.diff-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  background: rgba(255,255,255,.1);
}
.diff-card{ background: var(--black); padding: 40px; }
.diff-card h3{
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.03em; margin-bottom: 12px;
  display: flex; align-items: center; gap: 14px;
}
.diff-card h3 .diff-mark{ color: var(--bronze); font-family: var(--font-display); font-style: italic; }
.diff-card p{ color: var(--soft-gray); font-size: 0.92rem; }
@media (max-width: 780px){ .diff-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Insights
   ========================================================================== */
.insights{ padding: 140px 0; background: var(--ivory); }
.insights-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 30px;
}
.insight-card{
  display: block;
  background: var(--warm-white);
  border: 1px solid rgba(28,28,30,0.08);
  border-radius: 4px;
  padding: 32px 28px;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.insight-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(10,10,10,.1);
  border-color: rgba(181,138,90,0.35);
}
.insight-tag{
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 16px;
}
.insight-card h3{
  font-size: 1.18rem; line-height: 1.3; margin-bottom: 12px; color: var(--charcoal);
}
.insight-card p{ color: #55524d; font-size: 0.9rem; line-height: 1.6; margin-bottom: 18px; }
.insight-read{ font-size: 0.78rem; letter-spacing: 0.06em; color: var(--bronze); font-weight: 600; }
@media (max-width: 900px){ .insights-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .insights-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Work / Playbook
   ========================================================================== */
.work{ padding: 140px 0; background: var(--paper); }
.work-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 30px;
}
.work-card{
  position: relative; overflow: hidden; border-radius: 3px;
  aspect-ratio: 4 / 5;
  background: var(--charcoal);
}
.work-card img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.work-card:hover img{ transform: scale(1.06); }
.work-card figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.82));
  color: var(--warm-white);
}
.work-card figcaption .tag{
  display: block; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 6px;
}
.work-meta{
  margin-top: 40px; max-width: 62ch;
  padding: 18px 22px;
  border-left: 2px solid var(--bronze);
  background: rgba(181,138,90,0.06);
  color: var(--charcoal); font-size: 0.95rem; line-height: 1.6;
}
.work-note{
  margin-top: 20px; max-width: 62ch;
  color: #4a4a4a; font-size: 0.95rem;
}

/* -------------------------------------------------------------------- */
/* Capabilities showcase                                                 */
/* -------------------------------------------------------------------- */
.capabilities{ padding: 140px 0; background: var(--ivory); }
.cap-group{ margin-top: 56px; }
.cap-group:first-of-type{ margin-top: 40px; }
.cap-group-head{
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px;
}
.cap-group-brand{
  font-family: var(--font-display);
  font-size: 1.3rem; letter-spacing: 0.03em;
  color: var(--charcoal);
}
.cap-group-tag{
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bronze);
  padding-bottom: 2px; border-bottom: 1px solid rgba(181,138,90,0.4);
}
.cap-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cap-card{
  position: relative; overflow: hidden; border-radius: 3px;
  aspect-ratio: 4 / 5;
  background: var(--charcoal);
}
.cap-card--wide{
  grid-column: 1 / -1;
  aspect-ratio: 16 / 8;
}
.cap-card img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.cap-card:hover img{ transform: scale(1.06); }
.cap-card figcaption{
  position: absolute; left: 0; bottom: 0;
  padding: 12px 16px;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-white);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
  width: 100%;
}
.cap-disclaimer{
  margin-top: 48px; max-width: 68ch;
  color: #6b675f; font-size: 0.86rem; line-height: 1.6; font-style: italic;
}
@media (max-width: 900px){
  .cap-grid{ grid-template-columns: 1fr 1fr; }
  .cap-card--wide{ grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px){
  .cap-grid{ grid-template-columns: 1fr; }
  .cap-card--wide{ aspect-ratio: 16 / 11; }
}

/* -------------------------------------------------------------------- */
/* FAQ                                                                   */
/* -------------------------------------------------------------------- */
.faq{ padding: 130px 0; background: var(--warm-white); }
.faq-list{ max-width: 800px; margin-top: 20px; }
.faq-item{ border-bottom: 1px solid rgba(28,28,30,0.12); }
.faq-item:first-child{ border-top: 1px solid rgba(28,28,30,0.12); }
.faq-q{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none; border: none; text-align: left;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--charcoal);
  cursor: pointer;
}
.faq-q svg{
  width: 18px; height: 18px; stroke: var(--bronze); flex-shrink: 0;
  transition: transform .35s var(--ease-out);
}
.faq-item.is-open .faq-q svg{ transform: rotate(180deg); }
.faq-a{
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease-out);
}
.faq-item.is-open .faq-a{ max-height: 260px; }
.faq-a p{
  padding: 0 4px 26px; max-width: 68ch;
  color: #55524d; font-size: 0.96rem; line-height: 1.7;
}
@media (max-width: 560px){
  .faq-q{ font-size: 1rem; }
  .faq-item.is-open .faq-a{ max-height: 420px; }
}
@media (max-width: 900px){ .work-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .work-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Service pillar pages (Brand / Web / Systems / Growth)
   ========================================================================== */
.pillar-header{ padding: 190px 0 60px; }
.pillar-header .container{ max-width: 900px; }
.pillar-hero-sub{ margin-top: 18px; font-size: 1.1rem; color: var(--soft-gray); max-width: 56ch; }
.pillar-header .cta-row{ margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; }

/* Breadcrumb + back-link on individual service pages (Home / Pillar / Service) */
.pillar-breadcrumb{ padding: 22px 0; background: var(--black); border-top: 1px solid rgba(255,255,255,.1); }
.pillar-breadcrumb .container{ max-width: 900px; font-size: 0.82rem; color: var(--soft-gray); letter-spacing: 0.02em; }
.pillar-breadcrumb a{ color: var(--bronze-light); }
.pillar-breadcrumb a:hover{ text-decoration: underline; }
.pillar-breadcrumb span[aria-hidden]{ margin: 0 8px; color: rgba(255,255,255,.35); }
.pillar-back-link{ margin-top: 30px; }
.pillar-back-link a{ color: var(--bronze); font-weight: 600; font-size: 0.9rem; }
.pillar-back-link a:hover{ text-decoration: underline; }

.pillar-section{ padding: 80px 0; background: var(--warm-white); }
.pillar-section--alt{ background: var(--ivory); }
.pillar-container{ max-width: 900px; }
.pillar-container h2{ font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink); }
.pillar-container--split{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1000px; }
.pillar-proposition{ font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.5; color: var(--ink); max-width: 44ch; }

.pillar-list{ margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.pillar-list li{
  padding-left: 26px; position: relative; color: #3a3937; line-height: 1.6;
}
.pillar-list li::before{
  content: "\2013"; position: absolute; left: 0; color: var(--bronze);
}
.pillar-list--problems li{ font-size: 1.02rem; }

.pillar-tag-list{ margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.pillar-tag-list li{
  list-style: none;
  border: 1px solid rgba(28,28,30,0.16);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.86rem;
  color: var(--ink);
  transition: border-color .25s ease, color .25s ease;
}
/* Capability tags that link to a dedicated service page get a hover state
   so they read as navigation, not decoration. */
.pillar-tag-list li:has(a){ padding: 0; border-color: rgba(181,138,90,0.35); }
.pillar-tag-list li a{ display: block; padding: 8px 18px; }
.pillar-tag-list li:has(a):hover{ border-color: var(--bronze); }
.pillar-tag-list li a:hover{ color: var(--bronze); }

.pillar-process{ background: var(--black); color: var(--warm-white); }
.pillar-process .process-item p{ color: var(--soft-gray); }

.related-pillars{
  margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.related-pillar-card{
  display: block; border: 1px solid rgba(28,28,30,0.14); border-radius: 12px;
  padding: 28px; transition: border-color .3s ease, transform .3s ease;
}
.related-pillar-card:hover{ border-color: var(--bronze); transform: translateY(-3px); }
.related-pillar-num{ font-family: var(--font-display); color: var(--bronze); font-size: 0.9rem; }
.related-pillar-card h3{ font-family: var(--font-display); font-size: 1.3rem; margin-top: 8px; color: var(--ink); }
.related-pillar-card p{ margin-top: 8px; color: #6b6a67; font-size: 0.92rem; }

.pillar-cta{
  padding: 90px 0; text-align: center; background: var(--black); color: var(--warm-white);
}
.pillar-cta p{ font-family: var(--font-display); font-size: clamp(1.3rem, 2.8vw, 1.8rem); max-width: 30ch; margin-inline: auto; }
.pillar-cta .btn{ margin-top: 30px; }

@media (max-width: 700px){
  .pillar-header{ padding: 150px 0 50px; }
  .pillar-container--split{ grid-template-columns: 1fr; gap: 40px; }
  .related-pillars{ grid-template-columns: 1fr; }
}

.insights-index-grid{ margin-top: 0; }
.insights-index-note{ margin-top: 50px; text-align: center; color: #6b6a67; font-size: 0.92rem; }

/* ==========================================================================
   404 / Error page
   ========================================================================== */
.error-page{
  min-height: 100vh;
  display: flex; align-items: center;
  background: var(--black); color: var(--warm-white);
  padding: 160px 0 100px;
}
.error-page-inner{ max-width: 620px; }
.error-page-code{
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--bronze-light);
  line-height: 1;
}
.error-page h1{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-top: 12px;
}
.error-page-lead{ margin-top: 18px; color: var(--soft-gray); max-width: 48ch; }
.error-page .cta-row{ margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }
.error-page-footer{ background: var(--black); }
.error-page-footer .footer-bottom{ border-top: 1px solid rgba(242,238,232,0.1); padding: 24px 0; color: var(--soft-gray); font-size: 0.82rem; }

/* ==========================================================================
   Article / Insights post
   ========================================================================== */
.article-header{
  padding: 190px 0 70px;
  background: var(--black); color: var(--warm-white);
}
.article-header .container{ max-width: 760px; }
.article-tag{ font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze-light); }
.article-header h1{
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin-top: 16px; line-height: 1.15;
}
.article-meta{ margin-top: 20px; color: var(--soft-gray); font-size: 0.88rem; }
.article-body{
  max-width: 720px; margin: 0 auto;
  padding: 80px 24px 100px;
  color: #262524;
}
.article-body p{ font-size: 1.05rem; line-height: 1.8; margin-bottom: 26px; }
.article-body h2{
  font-size: 1.55rem; margin: 52px 0 20px; color: var(--charcoal); line-height: 1.3;
}
.article-body h3{
  font-size: 1.2rem; margin: 36px 0 16px; color: var(--charcoal);
}
.article-body ul, .article-body ol{
  margin: 0 0 26px 22px; list-style: disc;
}
.article-body ol{ list-style: decimal; }
.article-body li{ font-size: 1.02rem; line-height: 1.75; margin-bottom: 10px; }
.article-body blockquote{
  margin: 40px 0; padding: 4px 0 4px 26px;
  border-left: 2px solid var(--bronze);
  font-family: var(--font-display); font-style: italic;
  font-size: 1.3rem; line-height: 1.5; color: var(--charcoal);
}
.article-cta{
  margin-top: 60px; padding: 40px;
  background: var(--paper); border-radius: 4px;
  text-align: center;
}
.article-cta p{ margin-bottom: 20px; font-size: 1.05rem; }
.article-back{
  display: inline-block; margin-bottom: 40px;
  font-size: 0.85rem; color: var(--bronze); font-weight: 600;
}
@media (max-width: 560px){
  .article-header{ padding: 150px 0 50px; }
  .article-body{ padding: 56px 22px 80px; }
}

/* Contextual pillar/process link + Related Insights, appended near the end
   of each article body ahead of the closing CTA. */
.article-contextual-link{
  margin: 50px 0 0; padding: 22px 26px;
  background: var(--paper); border-left: 3px solid var(--bronze);
  font-size: 0.98rem; color: var(--charcoal);
}
.article-contextual-link a{ color: var(--bronze); font-weight: 600; white-space: nowrap; }
.article-contextual-link a:hover{ text-decoration: underline; }
.article-related{ margin-top: 60px; }
.article-related h2{ margin: 0 0 8px; }
.article-related-grid{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px){
  .article-related-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   CTA / Contact
   ========================================================================== */
.contact{
  padding: 150px 0 120px;
  background: var(--black);
  color: var(--warm-white);
  position: relative;
}
.contact-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start;
}
.contact-intro h2{
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 12ch;
}
.contact-intro p{ margin-top: 24px; max-width: 42ch; color: var(--soft-gray); }
.contact-direct{ margin-top: 46px; }
.contact-direct a{
  font-family: var(--font-display); font-size: 1.4rem;
  color: var(--bronze); border-bottom: 1px solid rgba(181,138,90,.4);
  padding-bottom: 4px; transition: border-color .3s ease;
}
.contact-direct a:hover{ border-color: var(--bronze); }
.contact-direct .addr{ margin-top: 18px; color: var(--soft-gray); font-size: 0.9rem; }
.contact-book-cta{ margin-top: 22px; display: inline-flex; }

.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Honeypot: kept in the layout flow (not display:none) so unsophisticated
   bots that skip display:none fields still fill it, but positioned off
   the visible canvas and unreachable by keyboard/AT. */
.field--hp{
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
  margin: 0;
}
.field{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field.full{ grid-column: 1 / -1; }
.field label{
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft-gray);
}
.field input, .field select, .field textarea{
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.25);
  padding: 10px 2px;
  color: var(--warm-white);
  font-size: 0.98rem;
  transition: border-color .3s ease;
}
.field select option{ background: var(--charcoal); color: var(--warm-white); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--bronze);
}
.field textarea{ resize: vertical; min-height: 90px; }
.form-foot{ display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 10px; flex-wrap: wrap; }
.form-note{ font-size: 0.78rem; color: #8b8b8b; max-width: 34ch; }
.form-note button.linklike{ color: var(--bronze-light); text-decoration: underline; text-underline-offset: 2px; display: inline; }
.form-status{ font-size: 0.85rem; margin-top: 14px; min-height: 1.2em; }
.form-status[data-state="ok"]{ color: var(--bronze-light); }
.form-status[data-state="err"]{ color: #d98a7a; }
.contact-form button[type="submit"][disabled]{ opacity: 0.6; cursor: default; }

.contact-success{
  border: 1px solid rgba(181,138,90,.35);
  border-radius: 12px;
  padding: 40px clamp(20px, 4vw, 44px);
  text-align: center;
}
.contact-success h3{ font-family: var(--font-display); font-size: 1.6rem; color: var(--bronze-light); }
.contact-success p{ margin-top: 12px; color: var(--soft-gray); max-width: 46ch; margin-inline: auto; }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; gap: 56px; }
  .form-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Newsletter band
   ========================================================================== */
.newsletter{ background: var(--charcoal); padding: 80px 0; }
.newsletter-inner{
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center;
}
.newsletter-copy h2{ color: var(--warm-white); font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: 10px; }
.newsletter-copy p{ color: var(--soft-gray); margin-top: 14px; max-width: 46ch; }
.newsletter-field{ display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter-field input{
  flex: 1; min-width: 220px;
  background: rgba(250,250,248,0.06);
  border: 1px solid rgba(242,238,232,0.2);
  border-radius: 3px;
  padding: 15px 18px;
  color: var(--warm-white);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.newsletter-field input::placeholder{ color: rgba(242,238,232,0.4); }
.newsletter-field input:focus{ outline: none; border-color: var(--bronze); }
.newsletter-status{ font-size: 0.85rem; margin-top: 12px; min-height: 1.2em; color: var(--bronze-light); }
@media (max-width: 900px){
  .newsletter-inner{ grid-template-columns: 1fr; gap: 30px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--charcoal);
  color: var(--soft-gray);
  padding: 76px 0 28px;
}
.footer-top{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand{ display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand img{ width: 30px; height: 30px; }
.footer-brand span{ font-family: var(--font-display); color: var(--warm-white); font-size: 1.05rem; }
.footer-tag{ color: var(--bronze); font-style: italic; font-family: var(--font-display); font-size: 1rem; max-width: 26ch; }
.footer-col h4{
  font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--warm-white); margin-bottom: 18px; font-weight: 600;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 12px; }
.footer-col a{ font-size: 0.92rem; transition: color .3s ease; }
.footer-col a:hover{ color: var(--bronze); }
.footer-col button.linklike{
  background: none; border: none; padding: 0; text-align: left;
  font-size: 0.92rem; color: inherit; transition: color .3s ease;
}
.footer-col button.linklike:hover{ color: var(--bronze); }

.footer-social{ display: flex; gap: 14px; margin-top: 22px; }
.footer-social a{
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: border-color .3s ease, color .3s ease;
}
.footer-social a:hover{ border-color: var(--bronze); color: var(--bronze); }
.footer-social svg{ width: 15px; height: 15px; }

.footer-bottom{
  padding-top: 28px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; font-size: 0.78rem; color: #8a8a8a;
}
.footer-bottom .legal-links{ display: flex; gap: 22px; }
.footer-bottom button.linklike{ background:none;border:none;padding:0;color:#8a8a8a;font-size:0.78rem;transition: color .3s ease; }
.footer-bottom button.linklike:hover{ color: var(--bronze); }

@media (max-width: 900px){
  .footer-top{ grid-template-columns: 1fr 1fr; row-gap: 40px; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Modals (legal)
   ========================================================================== */
.modal-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 3000;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.modal-overlay.is-open{ opacity: 1; visibility: visible; }
.modal{
  background: var(--paper); color: var(--ink);
  max-width: 640px; width: 100%; max-height: 82vh; overflow-y: auto;
  padding: 44px; border-radius: 3px; position: relative;
  transform: translateY(16px);
  transition: transform .35s var(--ease-out);
}
.modal-overlay.is-open .modal{ transform: translateY(0); }
.modal h2{ font-size: 1.6rem; margin-bottom: 6px; }
.modal .modal-updated{ font-size: 0.78rem; color: #777; margin-bottom: 24px; display: block; }
.modal h3{ font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin: 22px 0 8px; }
.modal p, .modal li{ font-size: 0.92rem; color: #4a4a4a; margin-bottom: 10px; }
.modal-close{
  position: absolute; top: 20px; right: 20px;
  width: 34px; height: 34px; border: 1px solid var(--soft-gray); border-radius: 50%;
  background: none; display: flex; align-items: center; justify-content: center;
}
.modal-close svg{ width: 14px; height: 14px; }

.modal-disclaimer{
  margin-top: 20px; padding: 14px 16px; background: var(--ivory);
  border-left: 2px solid var(--bronze); font-size: 0.82rem !important; color: #55524d !important;
}

/* Cookie preferences rows inside modal */
.cookie-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 16px 0; border-top: 1px solid var(--soft-gray);
}
.cookie-row:last-of-type{ border-bottom: 1px solid var(--soft-gray); margin-bottom: 24px; }
.cookie-row-text strong{ display: block; font-size: 0.92rem; margin-bottom: 4px; }
.cookie-row-text span{ font-size: 0.82rem; color: #666; }

.switch{ position: relative; width: 44px; height: 24px; flex: none; }
.switch input{ opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; }
.switch .track{
  position: absolute; inset: 0; background: var(--soft-gray); border-radius: 20px; transition: background .25s ease;
}
.switch .thumb{
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform .25s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .track{ background: var(--bronze); }
.switch input:checked + .track + .thumb{ transform: translateX(20px); }
.switch input:disabled + .track{ background: #b7ae9c; opacity: .7; }

.modal-actions{ display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Cookie banner
   ========================================================================== */
#cookie-banner{
  position: fixed; left: 20px; right: 20px; bottom: 20px;
  max-width: 640px; margin-inline: auto;
  background: var(--warm-white);
  border: 1px solid var(--soft-gray);
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  padding: 26px 28px;
  z-index: 4000;
  transform: translateY(140%);
  transition: transform .5s var(--ease-out);
}
#cookie-banner.is-visible{ transform: translateY(0); }
#cookie-banner p{ font-size: 0.88rem; color: #4a4a4a; margin-bottom: 18px; }
#cookie-banner a{ color: var(--bronze); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-actions .btn{ padding: 12px 20px; font-size: 0.72rem; }

/* ==========================================================================
   Floating action stack (sticky CTA + WhatsApp)
   ========================================================================== */
.float-stack{
  position: fixed; right: 24px; bottom: 24px;
  z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility .4s;
}
.float-stack.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.float-btn{
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(0,0,0,.3);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.float-btn[hidden]{ display: none; } /* wins over .float-btn's display:flex by specificity */
.float-btn:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.36); }
.float-btn--whatsapp{
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; color: #0A0A0A;
}
.float-btn--whatsapp svg{ width: 26px; height: 26px; }
.float-btn--cta{
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--bronze);
  color: var(--black);
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 560px){
  .float-stack{ right: 16px; bottom: 16px; }
  .float-btn--cta span{ display: none; }
  .float-btn--cta{
    width: 52px; height: 52px; border-radius: 50%; padding: 0;
  }
  .float-btn--cta::after{
    content: "→"; font-size: 1.1rem;
  }
}

/* ==========================================================================
   Utilities / reveal-on-scroll targets
   ========================================================================== */
.section-head.reveal, .process-item.reveal, .diff-card.reveal, .service-card.reveal, .work-card.reveal{ }

@media (max-width: 900px){
  .nav-links{ display: none; }
  .nav-toggle{ display: flex; }
  .lang-switch{ display: none; } /* language choice lives in the mobile drawer instead */
}

/* Header collision fix (small mobile): the wordmark, "Let's Talk" CTA and
   hamburger toggle cannot all fit on one row on common phone widths
   (measured overlap between the wordmark and the CTA button from ~390px
   down to ~430px, and full breakage below 320px). Rather than chase a
   single pixel breakpoint, the header's priority order on small screens is
   logo -> hamburger: the CTA hides here (well above the widths where the
   collision was measured, for margin) since the same action stays reachable
   via the mobile menu, the floating CTA, and the Contact section. Nothing
   changes at tablet/desktop widths (768px+), where there is ample room. */
@media (max-width: 480px){
  .nav-cta .btn--bronze{ display: none; }
  .nav-cta{ gap: 12px; }
}

/* ---- Mobile nav panel ---- */
.mobile-nav{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(340px, 82vw);
  background: var(--black);
  padding: 120px 40px 40px;
  display: flex; flex-direction: column; gap: 26px;
  transform: translateX(100%);
  transition: transform .45s var(--ease-in-out);
  z-index: 999;
  box-shadow: -30px 0 60px rgba(0,0,0,.4);
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav a{
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--warm-white);
}
.mobile-nav-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 998; opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.mobile-nav-backdrop.is-open{ opacity: 1; visibility: visible; }

/* ---- Language switcher (mobile drawer) ---- */
.mobile-lang{
  display: flex; gap: 10px;
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid rgba(242,238,232,0.12);
}
.mobile-lang button{
  background: none;
  border: 1px solid rgba(242,238,232,0.22);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--soft-gray);
  font-size: 0.78rem; letter-spacing: 0.08em;
}
.mobile-lang button.is-active{ color: var(--bronze-light); border-color: rgba(181,138,90,0.5); }