/*
  Varun Mohan Chempankulam — Website Stylesheet
  Self-contained: no external fonts or libraries.
  Organized top to bottom in page order: base -> nav -> hero ->
  ventures -> legacy/vamoch -> capabilities -> quote -> contact ->
  floating whatsapp button. Mobile overrides sit directly below
  the component they adjust rather than in one block at the end.
*/

:root{
  --bg: #0d0d0c;
  --bg-soft: #131311;
  --ink: #edeae2;
  --ink-dim: #8c8880;
  --hair: #2b2a27;
  --silver: #c9c4b8;

  /* system font stacks — no external font requests, renders instantly
     using each device's native serif/sans-serif faces */
  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
}

/* film-grain overlay, ties the digital design to the photo's own grain */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:22px clamp(24px, 5vw, 64px);
  background:rgba(13,13,12,0.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}

.mark{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(0.82rem, 1.6vw, 1.05rem);
  letter-spacing:0.02em;
  color:var(--ink);
  white-space:nowrap;
  flex-shrink:0;
}

@media (max-width:560px){
  .mark{ font-size:0.68rem; letter-spacing:0.01em; }
}

.nav-menu{
  display:flex;
  align-items:center;
  gap:clamp(18px, 2.6vw, 40px);
  list-style:none;
}

.nav-link{
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color 0.3s ease, border-color 0.3s ease;
  white-space:nowrap;
}
.nav-link:hover, .nav-link:focus-visible{
  color:var(--ink);
  border-color:var(--ink-dim);
}

.nav-cta{
  font-family:var(--font-body);
  font-size:0.76rem;
  font-weight:500;
  letter-spacing:0.04em;
  text-decoration:none;
  color:var(--bg);
  background:var(--ink);
  padding:10px 20px;
  border-radius:2px;
  white-space:nowrap;
  transition:background 0.3s ease, transform 0.3s ease;
}
.nav-cta:hover, .nav-cta:focus-visible{
  background:var(--silver);
  transform:translateY(-1px);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:18px;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:32px;
  height:32px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform 0.35s cubic-bezier(.2,.7,.2,1), opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media (max-width:880px){
  .nav-toggle{ display:flex; }

  .nav-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(13,13,12,0.98);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--hair);
    max-height:0;
    opacity:0;
    overflow:hidden;
    padding:0 clamp(24px, 5vw, 64px);
    transition:max-height 0.45s cubic-bezier(.2,.7,.2,1), opacity 0.3s ease, padding 0.45s ease;
  }
  .nav-menu.is-open{
    max-height:420px;
    opacity:1;
    padding:10px clamp(24px, 5vw, 64px) 22px;
  }
  .nav-menu li{
    border-bottom:1px solid var(--hair);
  }
  .nav-menu li:last-child{
    border-bottom:none;
  }
  .nav-link{
    display:block;
    padding:15px 0;
  }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:stretch;
}

.hero-portrait{
  position:relative;
  z-index:2;
  overflow:hidden;
}

.hero-portrait img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  filter:grayscale(1) contrast(1.08) brightness(0.95);
  opacity:0.5;
  transform:translateY(var(--parallax, 0px)) scale(1.06);
  will-change:transform;
}

/* mask so the portrait dissolves into the black field rather than
   sitting in a hard photo box — the "surfacing from the archive" move */
.hero-portrait::before{
  content:"";
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(13,13,12,0) 32%, rgba(13,13,12,0) 68%, var(--bg) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(13,13,12,0) 22%, rgba(13,13,12,0.05) 60%, var(--bg) 100%);
}

.hero-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:28px;
  padding: 0 clamp(24px, 6vw, 80px);
  padding-top:64px;
  padding-bottom:80px;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:0.74rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-dim);
  opacity:0;
  animation:rise 0.9s cubic-bezier(.2,.7,.2,1) 0.15s forwards;
}
.eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--ink-dim);
}

h1{
  font-family:var(--font-display);
  font-weight:400;
  font-style:normal;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height:1.14;
  letter-spacing:-0.01em;
  color:var(--ink);
  opacity:0;
  animation:rise 0.9s cubic-bezier(.2,.7,.2,1) 0.32s forwards;
}

h1 em{
  font-style:italic;
  font-weight:300;
  color:var(--silver);
}

.subheadline{
  font-size:clamp(0.92rem, 1.3vw, 1.05rem);
  letter-spacing:0.01em;
  opacity:0;
  animation:rise 0.9s cubic-bezier(.2,.7,.2,1) 0.48s forwards;
}
.subheadline .name{
  color:var(--ink);
  font-weight:500;
}
.subheadline .roles{
  color:var(--ink-dim);
  font-weight:400;
}

.intro-copy{
  font-size:clamp(0.95rem, 1.15vw, 1.05rem);
  line-height:1.7;
  font-weight:300;
  color:var(--ink-dim);
  max-width:46ch;
  opacity:0;
  animation:rise 0.9s cubic-bezier(.2,.7,.2,1) 0.62s forwards;
}

.cta-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  margin-top:8px;
  opacity:0;
  animation:rise 0.9s cubic-bezier(.2,.7,.2,1) 0.78s forwards;
}

.btn{
  font-family:var(--font-body);
  font-size:0.86rem;
  letter-spacing:0.03em;
  text-decoration:none;
  padding:16px 30px;
  border-radius:2px;
  transition:all 0.35s cubic-bezier(.2,.7,.2,1);
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.btn-primary{
  background:var(--ink);
  color:var(--bg);
  font-weight:500;
}
.btn-primary:hover, .btn-primary:focus-visible{
  background:var(--silver);
  transform:translateY(-1px);
}

.btn-secondary{
  background:transparent;
  color:var(--ink-dim);
  border:1px solid var(--hair);
}
.btn-secondary:hover, .btn-secondary:focus-visible{
  color:var(--ink);
  border-color:var(--ink-dim);
}

.btn-secondary .arrow{
  transition:transform 0.35s ease;
}
.btn-secondary:hover .arrow{
  transform:translateY(3px);
}

@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .eyebrow, h1, .subheadline, .intro-copy, .cta-row{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

@media (max-width: 880px){
  .hero{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
  }
  .hero-portrait{
    min-height:46vh;
    order:-1;
  }
  .hero-content{
    padding-top:32px;
  }
  .hero-portrait img{ opacity:0.4; object-position:center 22%; }
}

/* ---------- shared section scaffolding ---------- */
.section-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 clamp(24px, 6vw, 80px);
}

.section-head{
  max-width:640px;
  margin-bottom:72px;
}

.section-head--flush{
  margin-bottom:0;
}

.section-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  line-height:1.16;
  letter-spacing:-0.005em;
  color:var(--ink);
  margin-top:18px;
}
.section-title em{
  font-style:italic;
  font-weight:300;
  color:var(--silver);
}

.section-sub{
  margin-top:18px;
  font-size:1rem;
  line-height:1.7;
  font-weight:300;
  color:var(--ink-dim);
}

/* ---------- ventures ---------- */
.ventures{
  background:var(--bg);
  padding:130px 0;
  border-top:1px solid var(--hair);
}

.venture-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:0 48px;
  align-items:stretch;
}

.venture-divider{
  width:1px;
  background:var(--hair);
}

.venture-card{
  position:relative;
  overflow:hidden;
  padding:48px 40px;
  background:rgba(255,255,255,0.035);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--hair);
  border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 20px 40px -22px rgba(0,0,0,0.5);
  transition:border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.venture-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,0.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 26px 50px -20px rgba(0,0,0,0.6);
}

/* soft ambient tint sits behind the content, colored per venture */
.venture-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0.6;
  transition:opacity 0.4s ease;
}
.venture-card > *{
  position:relative;
  z-index:1;
}
.venture-card:hover::before{
  opacity:1;
}

.venture-card--green{
  border-color:rgba(137,173,148,0.24);
}
.venture-card--green::before{
  background:radial-gradient(circle at 88% 10%, rgba(126,168,140,0.16), transparent 60%);
}
.venture-card--green:hover{
  border-color:rgba(137,173,148,0.5);
}
.venture-card--green .venture-tag{ color:#a3c0a8; }
.venture-card--green .venture-links a:hover,
.venture-card--green .venture-links a:focus-visible{
  color:#a3c0a8;
  border-color:#a3c0a8;
}

.venture-card--red{
  border-color:rgba(184,116,102,0.24);
}
.venture-card--red::before{
  background:radial-gradient(circle at 88% 10%, rgba(168,92,82,0.16), transparent 60%);
}
.venture-card--red:hover{
  border-color:rgba(184,116,102,0.5);
}
.venture-card--red .venture-tag{ color:#c4897d; }
.venture-card--red .venture-links a:hover,
.venture-card--red .venture-links a:focus-visible{
  color:#c4897d;
  border-color:#c4897d;
}

.venture-tag{
  display:inline-block;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:22px;
  transition:color 0.4s ease;
}

.venture-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.3rem, 2vw, 1.6rem);
  line-height:1.25;
  color:var(--ink);
  margin-bottom:8px;
}

.venture-role{
  font-size:0.86rem;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--ink-dim);
  margin-bottom:22px;
}

.venture-focus{
  font-size:0.95rem;
  line-height:1.65;
  font-weight:300;
  color:var(--ink-dim);
  margin-bottom:30px;
}

.venture-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px 22px;
  padding-top:22px;
  border-top:1px solid var(--hair);
}
.venture-links a{
  font-size:0.8rem;
  letter-spacing:0.03em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--hair);
  padding-bottom:2px;
  transition:border-color 0.3s ease, color 0.3s ease;
}
.venture-links a:hover, .venture-links a:focus-visible{
  color:var(--silver);
  border-color:var(--silver);
}

@media (max-width:880px){
  .ventures{ padding:88px 0; }
  .section-head{ margin-bottom:48px; }
  .venture-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
  .venture-divider{
    width:100%;
    height:1px;
  }
  .venture-card{ padding:36px 28px; }
}

/* ---------- story sections (legacy / vamoch) ---------- */
.story-section{
  background:var(--bg);
  padding:130px 0;
  border-top:1px solid var(--hair);
}

.story-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:64px;
  align-items:start;
}

.story-layout--reverse{
  grid-template-columns:1fr 220px;
}
.story-layout--reverse .story-mark{
  order:2;
}
.story-layout--reverse .story-copy{
  order:1;
}

.story-mark img{
  width:100%;
  height:auto;
  display:block;
}

/* the logo shows on its own white plate — a deliberate black+white
   contrast so each mark reads exactly as designed, not recolored */
.logo-plate{
  background:#ffffff;
  border-radius:3px;
  padding:22px;
  display:inline-block;
  width:100%;
}

/* Legacy section: mark column stretches full height and flips on hover
   to reveal the shop photo behind the crest */
#legacy .story-layout{
  grid-template-columns:260px 1fr;
  align-items:stretch;
}

#legacy .story-mark{
  height:100%;
}

/* Vamoch section: mirrors the Legacy treatment — full-height art on the
   right that flips to reveal the mark on hover */
#vamoch .story-layout--reverse{
  grid-template-columns:1fr 260px;
  align-items:stretch;
}

#vamoch .story-mark{
  height:100%;
}

.flip-card{
  position:relative;
  height:100%;
  min-height:360px;
  perspective:1800px;
}

.flip-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transition:transform 1.1s cubic-bezier(.4,.2,.2,1), box-shadow 1.1s ease;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}

.flip-card:hover .flip-card-inner,
.flip-card.is-flipped .flip-card-inner{
  transform:rotateY(180deg);
  box-shadow:0 34px 54px rgba(0,0,0,0.55);
}

.flip-card-front,
.flip-card-back{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:3px;
  overflow:hidden;
}
.flip-card-back{
  transform:rotateY(180deg);
}

/* content-type modifiers, applied to whichever face (front or back)
   holds that kind of content — the two sections swap which is which */
.flip-face--plate{
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
}
.flip-face--plate img{
  width:100%;
  height:auto;
}

.flip-face--photo{
  border:1px solid var(--hair);
}
.flip-face--photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.flip-card-hint{
  display:none;
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  font-family:var(--font-body);
  font-size:0.66rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--bg);
  background:rgba(255,255,255,0.88);
  padding:6px 13px;
  border-radius:999px;
  pointer-events:none;
  white-space:nowrap;
}

@media (hover:none){
  .flip-card-hint{ display:block; }
}

.flip-card.is-flipped .flip-card-hint{
  display:none;
}

@media (prefers-reduced-motion: reduce){
  .flip-card-inner{ transition:none; }
}

@media (max-width:880px){
  #legacy .story-layout{
    grid-template-columns:1fr;
  }
  #legacy .story-mark{
    height:auto;
    width:100%;
    max-width:240px;
    margin:0 auto;
  }
  #vamoch .story-layout--reverse{
    grid-template-columns:1fr;
  }
  #vamoch .story-mark{
    height:auto;
    width:100%;
    max-width:240px;
    margin:0 auto;
  }
  .flip-card{
    width:100%;
    height:320px;
    min-height:0;
  }
}

.story-copy{
  max-width:64ch;
}

.story-eyebrow{
  margin-bottom:0;
}

.story-section--green .eyebrow{ color:#a3c0a8; }
.story-section--red .eyebrow{ color:#c4897d; }

.story-copy p{
  font-size:1rem;
  line-height:1.8;
  font-weight:300;
  color:var(--ink-dim);
  margin-top:22px;
}

.story-tagline{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  margin-top:16px !important;
  line-height:1.5;
}
.story-section--green .story-tagline{ color:#a3c0a8; }
.story-section--red .story-tagline{ color:#c4897d; }

.story-subhead{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.2rem, 1.9vw, 1.45rem);
  color:var(--ink);
  margin-top:38px;
}

@media (max-width:880px){
  .story-layout, .story-layout--reverse{
    grid-template-columns:1fr;
    gap:32px;
  }
  .story-mark{ max-width:160px; }
  .story-layout--reverse .story-mark,
  .story-layout--reverse .story-copy{
    order:initial;
  }
  .story-section{ padding:84px 0; }
}

/* ---------- capabilities ---------- */
.capabilities{
  background:var(--bg);
  padding:130px 0;
  border-top:1px solid var(--hair);
}

.capability-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px 56px;
  margin-top:56px;
}

.capability-item{
  padding-top:24px;
  border-top:1px solid var(--hair);
  transition:border-color 0.4s ease;
}

.capability-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-bottom:22px;
  border:1px solid var(--hair);
  border-radius:50%;
  color:var(--ink-dim);
  transition:border-color 0.4s ease, color 0.4s ease;
}
.capability-icon svg{
  width:19px;
  height:19px;
}

.capability-item:hover{
  border-color:var(--ink-dim);
}
.capability-item:hover .capability-icon{
  border-color:var(--ink-dim);
  color:var(--ink);
}

.capability-item h3{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
  margin-bottom:12px;
  letter-spacing:0.01em;
}

.capability-item p{
  font-size:0.92rem;
  line-height:1.7;
  font-weight:300;
  color:var(--ink-dim);
}

@media (max-width:880px){
  .capabilities{ padding:84px 0; }
}

@media (max-width:640px){
  .capability-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ---------- philosophy quote (standalone) ---------- */
.quote-section{
  position:relative;
  background:var(--bg-soft);
  padding:150px 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}

/* fine woven texture, purely CSS — no image request, tied to the
   "manuscript" feel established by the crest/ledger motifs elsewhere */
.quote-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, rgba(237,234,226,0.03) 0px, rgba(237,234,226,0.03) 1px, transparent 1px, transparent 7px),
    repeating-linear-gradient(-45deg, rgba(237,234,226,0.03) 0px, rgba(237,234,226,0.03) 1px, transparent 1px, transparent 7px);
}

/* soft vignette so the texture fades toward the center where the
   quote sits, keeping the text area clean and readable */
.quote-section::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center, var(--bg-soft) 0%, transparent 55%);
}

@media (max-width:880px){
  .quote-section{ padding:96px 0; }
}

.quote-inner{
  position:relative;
  z-index:1;
  max-width:820px;
  margin:0 auto;
  padding:0 clamp(24px, 6vw, 80px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.quote-mark{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(3.2rem, 8vw, 5.5rem);
  line-height:1;
  color:var(--hair);
  margin-bottom:-8px;
}

.quote-text{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.35rem, 2.9vw, 2rem);
  line-height:1.5;
  color:var(--silver);
  margin:0;
}

.quote-attribution{
  display:block;
  margin-top:36px;
  font-family:var(--font-body);
  font-style:normal;
  font-size:0.76rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

/* ---------- contact / footer ---------- */
.contact{
  background:var(--bg);
  padding:130px 0 100px;
  border-top:1px solid var(--hair);
}

.contact-list{
  margin-top:48px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.contact-row{
  display:flex;
  align-items:baseline;
  gap:20px;
  padding-bottom:22px;
  border-bottom:1px solid var(--hair);
}

.contact-label{
  font-size:0.74rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
  min-width:110px;
}

.contact-row a, .contact-row span.contact-value{
  font-family:var(--font-display);
  font-size:clamp(1.05rem, 1.8vw, 1.35rem);
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color 0.3s ease, border-color 0.3s ease;
}
.contact-row a:hover, .contact-row a:focus-visible{
  color:var(--silver);
  border-color:var(--silver);
}

@media (max-width:880px){
  .contact{ padding:84px 0 64px; }
}

@media (max-width:560px){
  .contact-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .contact-label{ min-width:0; }
}

.site-footer{
  padding:40px clamp(24px, 6vw, 80px);
  text-align:center;
  border-top:1px solid var(--hair);
}
.site-footer p{
  font-size:0.78rem;
  line-height:1.7;
  color:var(--ink-dim);
  font-weight:300;
}

/* ---------- floating whatsapp button ---------- */
.whatsapp-float-wrap{
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}

.whatsapp-float{
  position:relative;
  flex-shrink:0;
  width:60px;
  height:60px;
  border-radius:999px;
  background:#25d366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  transition:transform 0.3s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
}
.whatsapp-float:hover, .whatsapp-float:focus-visible{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 16px 40px rgba(0,0,0,0.55);
}
.whatsapp-float svg{
  position:relative;
  z-index:1;
}

.whatsapp-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#25d366;
  opacity:0.55;
  z-index:0;
  animation:whatsappPing 2.6s cubic-bezier(0,0,.2,1) infinite;
}

@keyframes whatsappPing{
  0%{ transform:scale(1); opacity:0.5; }
  75%, 100%{ transform:scale(1.8); opacity:0; }
}

.whatsapp-float-label{
  background:var(--ink);
  color:var(--bg);
  font-family:var(--font-body);
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.02em;
  padding:11px 18px;
  border-radius:3px;
  white-space:nowrap;
  opacity:0;
  transform:translateX(10px);
  pointer-events:none;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.whatsapp-float-wrap:hover .whatsapp-float-label{
  opacity:1;
  transform:translateX(0);
}

@media (prefers-reduced-motion: reduce){
  .whatsapp-float::before{ animation:none; opacity:0.25; }
}

@media (max-width:560px){
  .whatsapp-float-wrap{ right:16px; bottom:16px; }
  .whatsapp-float{ width:54px; height:54px; }
  .whatsapp-float-label{ display:none; }
}