/* ===========================================================================
   fissyapp.com — site styles
   Built on the Fissy brand tokens. The teal, the purple and the type are the
   same values the financial tools use, so a user crossing from this site into
   a calculator does not feel they changed company.
   =========================================================================== */

:root{
  /* Brand — sampled from the logo. Identical to financial-tools/assets/css/fissy-brand.css */
  --teal:        #12b89b;
  --teal-d:      #0d9680;
  --teal-bright: #1fd8b6;
  --purple:      #7030a0;
  --gold:        #fcd743;

  --ink:         #0b1020;   /* page background, dark sections */
  --ink-soft:    #131a2e;
  --paper:       #ffffff;
  --text:        #1b2333;
  --text-dim:    #5a6478;
  --text-invert: #ffffff;
  --line:        #e6e9ef;

  --font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1140px;
  --r:    16px;
  --r-sm: 10px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; letter-spacing:-.02em; margin:0 0 .4em }
h1{ font-size:clamp(2.1rem, 6vw, 3.8rem); line-height:1.08 }
h2{ font-size:clamp(1.6rem, 3.6vw, 2.5rem); line-height:1.15 }
h3{ font-size:1.15rem }
p{ margin:0 0 1em }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px }
.kicker{
  font-family:var(--font-head); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin:0 0 .8em
}
.section{ padding:clamp(56px, 9vw, 104px) 0 }
/* The tools section sits directly under the hero and must break the fold —
   its heading is the reason a visitor scrolls at all, so it gets a tighter
   top padding than a normal section. */
.section--tools{ padding-top:clamp(30px, 3.5vw, 46px) }
.section--dark{ background:var(--ink); color:var(--text-invert) }
.section--dark .kicker{ color:var(--teal-bright) }
.section--tint{ background:#f6f8fa }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-head); font-weight:600; font-size:1rem;
  padding:15px 30px; border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; min-height:52px;   /* thumb-sized */
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn--primary{ background:var(--teal); color:#04241f; box-shadow:0 6px 20px rgba(18,184,155,.28) }
.btn--primary:hover{ background:var(--teal-bright) }
.btn--ghost{ background:transparent; color:var(--text-invert); border-color:rgba(255,255,255,.5) }
.btn--ghost:hover{ background:rgba(255,255,255,.1) }
.btn--dark{ background:var(--ink); color:#fff }

/* ── Header ────────────────────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line);
}
.hdr__in{ display:flex; align-items:center; gap:24px; height:86px }
.hdr__logo{ display:flex; align-items:center }
.hdr__logo img{ height:50px; width:auto }
@media (max-width:520px){
  .hdr__in{ height:74px }
  .hdr__logo img{ height:42px }
}
.hdr__nav{ display:flex; gap:26px; margin-left:auto; align-items:center }
/* :not(.hdr__lang) matters — "a" makes this selector more specific than
   .hdr__lang, so without it the nav link rules win and strip the pill's
   horizontal padding. */
.hdr__nav a:not(.hdr__lang){
  font-family:var(--font-head); font-weight:500; font-size:.95rem;
  text-decoration:none; color:var(--text); padding:6px 0;
  border-bottom:2px solid transparent;
}
.hdr__nav a:not(.hdr__lang):hover,
.hdr__nav a:not(.hdr__lang)[aria-current="page"]{ border-bottom-color:var(--teal) }
.hdr__lang{
  /* flex:none — without it the pill shrinks below its own text and "EN"
     spills past the rounded border. */
  flex:0 0 auto; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:600; font-size:.8rem; letter-spacing:.06em;
  text-decoration:none; border:1.5px solid var(--line); border-radius:999px;
  padding:7px 14px; min-height:34px; color:var(--text-dim);
}
.hdr__lang:hover{ border-color:var(--teal); color:var(--teal) }
.hdr__burger{
  display:none; margin-left:auto; background:none; border:0; padding:10px;
  width:46px; height:46px; cursor:pointer;
}
.hdr__burger span{ display:block; height:2px; background:var(--text); margin:5px 0; border-radius:2px }

@media (max-width:860px){
  .hdr__burger{ display:block }
  .hdr__nav{
    /* must match .hdr__in height, or the panel floats over / under the bar */
    position:fixed; inset:86px 0 auto; flex-direction:column; align-items:stretch;
    gap:0; background:#fff; border-bottom:1px solid var(--line); padding:8px 20px 20px;
    margin:0; display:none;
  }
  .hdr__nav.is-open{ display:flex }
  .hdr__nav a:not(.hdr__lang){ padding:15px 0; border-bottom:1px solid var(--line) }
  .hdr__lang{ align-self:flex-start; margin-top:14px }
}

/* Declared after the 860px block on purpose: both match on a phone, and the
   later rule wins. The panel must start exactly at the header's height. */
@media (max-width:520px){
  .hdr__nav{ inset:74px 0 auto }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* Height is deliberately under 100vh: the tools section must peek above the
   fold so there is a visible reason to scroll. A full-height hero is a wall. */
.hero{ position:relative; min-height:min(76vh, 660px); display:flex; align-items:center;
       color:#fff; overflow:hidden; background:var(--ink) }
.hero__media{ position:absolute; inset:0 }
.hero__media video, .hero__media img{ width:100%; height:100%; object-fit:cover }
/* The old site put white text straight onto a bright video and it was unreadable.
   This scrim is the fix: heavy on the left where the words are, light on the right. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(95deg, rgba(8,12,24,.93) 0%, rgba(8,12,24,.78) 42%,
                           rgba(8,12,24,.42) 72%, rgba(8,12,24,.30) 100%),
    linear-gradient(to top, rgba(8,12,24,.75) 0%, transparent 45%);
}
/* padding-block, NOT the "padding: X 0" shorthand — this element is also a
   .wrap, and the shorthand would reset its padding-inline to 0 and push the
   headline flat against the screen edge on a phone. */
.hero__in{ position:relative; padding-block:clamp(64px,8vw,96px) }
.hero h1{ max-width:14ch; text-shadow:0 2px 26px rgba(0,0,0,.5) }
.hero h1 .accent{ color:var(--teal-bright); display:block }
.hero__sub{ font-size:clamp(1.05rem,2.2vw,1.3rem); color:rgba(255,255,255,.82); max-width:34ch; margin-bottom:2em }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.grid{ display:grid; gap:20px }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(280px,1fr)) }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)) }
.grid--4{ grid-template-columns:repeat(auto-fit, minmax(230px,1fr)) }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px; text-decoration:none; color:inherit; display:block;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.card:hover{ border-color:var(--teal); transform:translateY(-2px);
              box-shadow:0 14px 34px rgba(18,184,155,.13) }
.card h3{ margin-bottom:.35em }
.card p{ color:var(--text-dim); font-size:.95rem; margin:0 }
.card__go{ display:inline-block; margin-top:14px; font-family:var(--font-head);
           font-weight:600; font-size:.9rem; color:var(--teal) }

.section--dark .card{ background:var(--ink-soft); border-color:rgba(255,255,255,.1); color:#fff }
.section--dark .card p{ color:rgba(255,255,255,.66) }
.section--dark a.card:hover{ border-color:var(--teal-bright) }

/* ── Split (mission / vision) ──────────────────────────────────────────── */
.split{ display:grid; gap:clamp(24px,5vw,60px); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.split__lead{ font-size:clamp(1.15rem,2.4vw,1.5rem); font-family:var(--font-head);
              font-weight:500; line-height:1.4 }

/* ═══════════════════════════════════════════════════════════════════════
   THE ROUTE — Fissy Grow
   Grow is a GPS, so it is drawn as a route: four waypoints joined by a
   line, each with a pin. The line is the one piece of ornament on the
   whole site, and it earns its place by carrying the product's idea.
   ═══════════════════════════════════════════════════════════════════════ */
.route{ position:relative; overflow:hidden; background:var(--ink); color:#fff;
        padding-block:clamp(64px,9vw,112px) }
.route__bg{ position:absolute; inset:0 }
.route__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30% }
/* Photograph carries mood, never legibility — the scrim does the reading. */
.route__scrim{ position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,16,32,.95) 0%, rgba(11,16,32,.93) 45%, rgba(11,16,32,.97) 100%),
    radial-gradient(80% 60% at 82% 12%, rgba(31,216,182,.14) 0%, transparent 70%) }
.route__in{ position:relative }
.route__head{ max-width:56ch; margin-bottom:clamp(38px,5vw,58px) }
.route .kicker{ color:var(--teal-bright) }
.route .lead{ color:rgba(255,255,255,.76) }

.stops{ list-style:none; margin:0; padding:0; display:grid; gap:26px;
        grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) }
.stop{ position:relative; padding-top:40px }

/* The route line: drawn on each stop, joined edge to edge. */
.stop::before{
  content:''; position:absolute; top:11px; left:0; right:-26px; height:2px;
  background:linear-gradient(90deg, var(--teal-bright) 0%, rgba(31,216,182,.32) 100%);
}
.stop:last-child::before{ right:0;
  background:linear-gradient(90deg, rgba(31,216,182,.32) 0%, transparent 100%) }
.stop__pin{
  position:absolute; top:4px; left:0; width:16px; height:16px; border-radius:50%;
  background:var(--teal-bright); box-shadow:0 0 0 5px rgba(31,216,182,.18);
}
.stop:not(:first-child) .stop__pin{ background:rgba(31,216,182,.55); box-shadow:0 0 0 4px rgba(31,216,182,.10) }
.stop__n{ display:block; font-family:var(--font-head); font-weight:700; font-size:.78rem;
          letter-spacing:.14em; color:var(--teal-bright); opacity:.9; margin-bottom:.5em }
.stop h3{ font-size:1.18rem; margin-bottom:.4em }
.stop p{ color:rgba(255,255,255,.68); font-size:.96rem; margin:0 }

@media (max-width:640px){
  /* On a phone the route runs downward, which is also how you read. */
  .stops{ grid-template-columns:1fr; gap:0 }
  .stop{ padding:0 0 30px 34px }
  .stop::before{ top:6px; bottom:-4px; left:7px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, var(--teal-bright) 0%, rgba(31,216,182,.30) 100%) }
  .stop:last-child::before{ bottom:auto; height:22px }
  .stop__pin{ top:0; left:0 }
}

.route__foot{ margin-top:clamp(34px,4vw,48px); display:flex; align-items:center;
              gap:22px; flex-wrap:wrap }
.route__note{ margin:0; color:rgba(255,255,255,.5); font-size:.9rem; max-width:44ch }

/* ═══════════════════════════════════════════════════════════════════════
   EL CAMINO DEL DINERO — six rungs
   Each rung carries its own stage colour (--rung), purple at the bottom
   through to green at the top, so the climb is legible before a word is
   read. The bar grows with the stage: stage six is six times stage one.
   ═══════════════════════════════════════════════════════════════════════ */
.rungs{ list-style:none; margin:0; padding:0; display:grid; gap:2px;
        border-radius:var(--r); overflow:hidden;
        box-shadow:0 10px 34px rgba(15,23,42,.08) }
.rung{ position:relative; display:grid; grid-template-columns:64px 8px 1fr;
       align-items:center; gap:0 20px; background:#fff; padding:20px 24px 20px 0 }
.rung__n{
  display:grid; place-items:center; width:64px; height:64px;
  font-family:var(--font-head); font-weight:700; font-size:1.5rem;
  color:#fff; background:var(--rung);
  /* A soft square rather than a circle — it reads as a step, not a bullet. */
  border-radius:0 14px 14px 0;
}
/* The growing bar: the visual argument that these stages are cumulative. */
.rung__bar{ display:block; width:8px; border-radius:99px; background:var(--rung); opacity:.85;
            height:calc(14px + var(--i, 0) * 7px) }
.rung:nth-child(1){ --i:0 } .rung:nth-child(2){ --i:1 } .rung:nth-child(3){ --i:2 }
.rung:nth-child(4){ --i:3 } .rung:nth-child(5){ --i:4 } .rung:nth-child(6){ --i:5 }
.rung__body h3{ margin-bottom:.25em; color:var(--rung); filter:saturate(.9) brightness(.85) }
.rung__body p{ margin:0; color:var(--text-dim); font-size:.96rem; max-width:62ch }

@media (max-width:560px){
  .rung{ grid-template-columns:52px 6px 1fr; gap:0 14px; padding:16px 18px 16px 0 }
  .rung__n{ width:52px; height:52px; font-size:1.2rem }
  .rung__body p{ font-size:.92rem }
}

/* ── Section sub-heading ───────────────────────────────────────────────── */
.section__sub{ color:var(--text-dim); max-width:52ch; margin-bottom:2.4em }

/* ── Cards with imagery ────────────────────────────────────────────────── */
.card--img{ padding:0; overflow:hidden; display:flex; flex-direction:column }
.card__media{ display:block; aspect-ratio:16/10; overflow:hidden; background:#e9edf3 }
.card__media img{ width:100%; height:100%; object-fit:cover;
                  transition:transform .4s cubic-bezier(.2,.7,.3,1) }
a.card--img:hover .card__media img{ transform:scale(1.045) }
/* Flex so the "Abrir ->" links sit on one line across the row however long
   each description happens to be. A ragged row of links reads as sloppy. */
.card--img{ height:100% }
.card__body{ display:flex; flex-direction:column; flex:1; padding:22px 22px 26px }
.card__body .card__go{ margin-top:auto; padding-top:14px }
.grid--4{ align-items:stretch }

/* Services get a teal rule instead of a picture — not everything needs one. */
.card--service{ position:relative; padding-top:30px }
.card__rule{ position:absolute; top:0; left:26px; right:26px; height:3px;
             background:var(--teal); border-radius:0 0 3px 3px }

/* ── Split with a figure ───────────────────────────────────────────────── */
.split--media{ align-items:center }
.split__fig{ margin:0 }
.split__fig img{ width:100%; border-radius:var(--r); aspect-ratio:4/3; object-fit:cover;
                 box-shadow:0 18px 48px rgba(15,23,42,.16) }

/* ── Inner page headers ────────────────────────────────────────────────── */
.page-top{ padding-top:clamp(52px,7vw,84px) }
.page-top h1{ max-width:20ch }
.lead{ font-size:clamp(1.05rem,2vw,1.25rem); color:rgba(255,255,255,.74); max-width:60ch }

/* ═══════════════════════════════════════════════════════════════════════
   GAMES — this page should feel like a game, not a brochure.
   Dark table, playing-card decks, a rule strip instead of a paragraph.
   ═══════════════════════════════════════════════════════════════════════ */
.arcade{ position:relative; overflow:hidden; background:var(--ink); color:#fff;
         padding-block:clamp(56px,8vw,96px) }
.arcade__bg{ position:absolute; inset:0 }
.arcade__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 35% }
.arcade__scrim{ position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,16,32,.90) 0%, rgba(11,16,32,.86) 40%, rgba(11,16,32,.99) 100%),
    radial-gradient(70% 50% at 20% 10%, rgba(112,48,160,.34) 0%, transparent 70%),
    radial-gradient(60% 50% at 90% 30%, rgba(31,216,182,.20) 0%, transparent 70%) }
.arcade__in{ position:relative }
.arcade h1{ max-width:16ch }
.arcade .lead{ color:rgba(255,255,255,.76); max-width:58ch }

/* Rule strip — the "30 years / 3 ways / 1 philosophy" line a game box has. */
.rules{ list-style:none; margin:2.2em 0 0; padding:0; display:flex; flex-wrap:wrap; gap:14px }
.rules li{
  display:flex; align-items:baseline; gap:9px;
  border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:10px 20px;
  background:rgba(255,255,255,.04);
}
.rules strong{ font-family:var(--font-head); font-size:1.35rem; color:var(--teal-bright) }
.rules span{ font-size:.9rem; color:rgba(255,255,255,.66) }

/* Decks — playing cards on a dark table. */
.decks{ padding-top:clamp(34px,4vw,54px) }
.deck{
  position:relative; display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:#fff; border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, #16203a 0%, #0e1526 100%);
  border:1px solid rgba(255,255,255,.10);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease, box-shadow .22s ease;
}
.deck:hover{ transform:translateY(-6px) rotate(-.5deg);
             border-color:var(--teal-bright);
             box-shadow:0 22px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(31,216,182,.25) }
.deck__art{ position:relative; display:block; aspect-ratio:16/11; overflow:hidden }
.deck__art img{ width:100%; height:100%; object-fit:cover; opacity:.82;
                transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s ease }
.deck:hover .deck__art img{ transform:scale(1.06); opacity:1 }
.deck__tag{
  position:absolute; top:12px; right:12px; z-index:2;
  font-family:var(--font-head); font-weight:600; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 12px; border-radius:999px;
  background:rgba(4,36,31,.82); color:var(--teal-bright);
  border:1px solid rgba(31,216,182,.35); backdrop-filter:blur(6px);
}
.deck__body{ display:flex; flex-direction:column; flex:1; padding:22px 22px 24px }
.deck__lvl{ font-family:var(--font-head); font-weight:700; font-size:.72rem;
            letter-spacing:.16em; text-transform:uppercase; color:var(--teal-bright);
            opacity:.85; margin-bottom:.6em }
.deck h3{ margin-bottom:.4em }
.deck p{ color:rgba(255,255,255,.66); font-size:.95rem; margin:0 }
.deck__play{ margin-top:auto; padding-top:18px; font-family:var(--font-head);
             font-weight:600; color:var(--teal-bright) }
.decks__note{ margin-top:2.4em; color:rgba(255,255,255,.45); font-size:.92rem; max-width:56ch }

@media (prefers-reduced-motion:reduce){
  .deck:hover{ transform:none }
}

/* ── People ────────────────────────────────────────────────────────────── */
.grid--people{ max-width:760px }
.person__photo{
  aspect-ratio:4/5; width:100%; object-fit:cover; border-radius:var(--r); margin-bottom:18px;
  background:linear-gradient(160deg,#e8ecf2,#dfe4ec);
}
/* Shown until the real headshots land. Deliberately abstract — better an
   honest placeholder than an AI-generated face on an About page. */
.person__photo--placeholder{
  display:grid; place-items:center;
  background:linear-gradient(160deg, #10233a, #0b1020);
  border:1px solid rgba(255,255,255,.08);
}
.person__photo--placeholder span{
  font-family:var(--font-head); font-weight:700; font-size:3.2rem;
  color:var(--teal-bright); opacity:.85; letter-spacing:.02em;
}
.person h3{ margin-bottom:.15em }
.person__role{ font-size:.9rem; color:var(--teal-d); font-family:var(--font-head); font-weight:600 }
.person__bio{ color:var(--text-dim); font-size:.95rem; margin-top:.5em }

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact{
  display:grid; gap:clamp(28px,5vw,56px); align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

/* The form sits on a raised panel so it reads as one object rather than a
   column of dark holes punched into a dark section. */
.contact__form{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r); padding:clamp(22px,3vw,32px);
}
/* Short fields pair up on wide screens; the stack was taller than the column
   beside it and left an obvious hole. */
.form__row{ display:grid; gap:0 16px; grid-template-columns:1fr 1fr }
@media (max-width:620px){ .form__row{ grid-template-columns:1fr } }

.field{ display:block; margin-bottom:16px }
.field > span{
  display:block; font-family:var(--font-head); font-weight:600;
  font-size:.8rem; letter-spacing:.01em; margin-bottom:6px; color:rgba(255,255,255,.82)
}
.field .req{ color:var(--teal-bright) }
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:1rem; padding:13px 15px; min-height:50px;
  border:1.5px solid rgba(255,255,255,.22); border-radius:var(--r-sm);
  background:rgba(255,255,255,.03); color:#fff; transition:border-color .12s ease, background .12s ease;
}
.field textarea{ min-height:96px; resize:vertical }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.35) }
.field input:hover, .field textarea:hover{ border-color:rgba(255,255,255,.34) }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--teal-bright); background:rgba(31,216,182,.07)
}
.field select option{ color:#111 }

/* Radio pills. The native control is removed from view but stays in the
   accessibility tree and keeps keyboard behaviour — :focus-visible below
   draws the ring the hidden input would have had. */
.radios{ display:flex; flex-wrap:wrap; gap:9px }
.radios label{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 18px; min-height:46px; cursor:pointer; font-size:.95rem;
  font-family:var(--font-head); font-weight:500;
  border:1.5px solid rgba(255,255,255,.22); border-radius:999px;
  color:rgba(255,255,255,.78); transition:all .12s ease;
}
.radios input{ position:absolute; opacity:0; width:0; height:0 }
.radios label:hover{ border-color:rgba(255,255,255,.42); color:#fff }
.radios label:has(input:checked){
  border-color:var(--teal-bright); background:var(--teal-bright); color:#04241f; font-weight:600;
}
.radios label:has(input:focus-visible){ outline:2px solid var(--teal-bright); outline-offset:3px }

.form__foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px }
.form__note{ font-size:.82rem; color:rgba(255,255,255,.45); margin:0; max-width:30ch }
.form__msg{ margin-top:14px; font-size:.95rem; min-height:1.4em }
.form__msg--err{ color:#ffb4b4 }
.form__msg--ok{ color:var(--teal-bright) }

.contact__meta a{ color:var(--teal-bright); text-decoration:none }
.contact__meta a:hover{ text-decoration:underline }

/* ── Footer ────────────────────────────────────────────────────────────── */
.ftr{ background:#05080f; color:rgba(255,255,255,.6); padding:40px 0; font-size:.9rem }
.ftr__in{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between }
.ftr__social{ display:flex; gap:10px; align-items:center }
.ftr__follow{ margin-right:6px }
.ftr__social a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  color:rgba(255,255,255,.62); text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  transition:color .14s ease, border-color .14s ease, background .14s ease;
}
.ftr__social a:hover{ color:#04241f; background:var(--teal-bright); border-color:var(--teal-bright) }
.ftr__social a:focus-visible{ outline:2px solid var(--teal-bright); outline-offset:2px }
/* fill:currentColor is what lets one hover rule recolour all three marks. */
.ftr__social svg{ width:19px; height:19px; fill:currentColor }

/* ── Floating WhatsApp ─────────────────────────────────────────────────── */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:56px; height:56px; border-radius:50%; background:#25d366;
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.wa svg{ width:30px; height:30px; fill:#fff }

/* Respect people who asked for less motion — the hero video is the big offender. */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  .hero__media video{ display:none }
}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap
}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--teal); color:#04241f;
  padding:12px 18px; z-index:100; font-family:var(--font-head); font-weight:600
}
.skip:focus{ left:8px; top:8px }