/* ==========================================================================
   beeAIve — design system
   Shared stylesheet for the English (/) and French (/fr/) versions.
   Brand palette: navy #00263A + orange #F28C2D (charte graphique beeAIve).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand */
  --navy:        #00263A;
  --navy-deep:   #001A28;
  --navy-soft:   #0B3450;
  --card:        #0A3049;
  --card-hi:     #0D3A57;
  --orange:      #F28C2D;
  --orange-soft: #F5A857;
  --coral:       #FF6E52;
  --white:       #FFFFFF;

  /* Text on dark */
  --ink:    #FFFFFF;
  --ink-70: rgba(255,255,255,.76);
  --ink-50: rgba(255,255,255,.60);
  --line:   rgba(255,255,255,.14);
  --line-hi:rgba(255,255,255,.28);

  /* Feedback */
  --ok:  #7CD992;
  --err: #FF9C93;

  /* Space scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 88px;

  /* Shape */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --maxw:      1160px;
  --shadow:    0 20px 50px -20px rgba(0,10,20,.65);
  --shadow-sm: 0 8px 22px -12px rgba(0,10,20,.7);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.3,1);

  /* Sticky header offset for anchor scrolling */
  --header-h: 68px;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Never let a bitmap or vector distort: height always derives from width. */
img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

h1,h2,h3,h4{
  font-family:'Sora', 'Inter', sans-serif;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.015em;
  text-wrap:balance;
}

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

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

/* Accessible, visible focus — keyboard only. */
:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}
:focus:not(:focus-visible){ outline:none; }

/* Anchor targets clear the sticky header. */
[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

::selection{ background:var(--orange); color:var(--navy-deep); }

/* ---------- 3. Layout ---------- */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--s-5);
}

section{ padding:var(--s-9) 0; position:relative; }

.divider{ height:1px; background:var(--line); }

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--orange);
  color:var(--navy-deep);
  padding:12px 20px;
  border-radius:0 0 var(--radius-sm) 0;
  font-weight:600;
  text-decoration:none;
}
.skip-link:focus{ left:0; }

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

/* Subtle honeycomb texture — brand motif, kept below content. */
.honeycomb::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M30 0 L60 17.3 L60 51.9 L30 69.3 L0 51.9 L0 17.3 Z'/%3E%3Cpath d='M0 52 L30 69.3 L30 103.9 L0 121.2 L-30 103.9 L-30 69.3 Z'/%3E%3Cpath d='M60 52 L90 69.3 L90 103.9 L60 121.2 L30 103.9 L30 69.3 Z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0;
}
.honeycomb > *{ position:relative; z-index:1; }

/* ---------- 4. Typographic components ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  color:var(--orange);
  font-weight:600;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:var(--s-4);
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--orange);
  border-radius:2px;
  flex:none;
}
.eyebrow.centered{ justify-content:center; margin-inline:auto; }

.section-head{ max-width:62ch; margin:0 0 var(--s-7); }
.section-head.centered{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(28px, 3.4vw, 40px); }
.section-head p{ color:var(--ink-70); font-size:clamp(16px,1.6vw,17.5px); }

.lead{
  font-size:clamp(17px, 1.8vw, 19px);
  color:var(--ink-70);
  max-width:56ch;
}

.accent{ color:var(--orange); }

/* ---------- 5. Buttons, tags, badges ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:13px 24px;
  min-height:46px;
  border-radius:999px;
  font-family:inherit;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-primary{
  background:var(--orange);
  color:var(--navy-deep);
  box-shadow:0 10px 24px -10px rgba(242,140,45,.65);
}
.btn-primary:hover{ background:var(--orange-soft); box-shadow:0 14px 30px -12px rgba(242,140,45,.8); }

.btn-ghost{
  background:rgba(255,255,255,.03);
  color:var(--white);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--line-hi); background:rgba(255,255,255,.07); }

.btn-coral{
  background:linear-gradient(135deg, var(--coral), var(--orange));
  color:var(--navy-deep);
  box-shadow:0 10px 24px -10px rgba(255,110,82,.6);
}

.btn-lg{ padding:16px 32px; font-size:16px; min-height:54px; }

.tag-row{ display:flex; flex-wrap:wrap; gap:var(--s-2); list-style:none; }
.tag{
  font-size:13px;
  color:var(--ink-70);
  border:1px solid var(--line);
  padding:7px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.03);
}

.icon-badge{
  width:52px; height:52px;
  border-radius:14px;
  background:rgba(242,140,45,.12);
  border:1px solid rgba(242,140,45,.35);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--s-5);
  flex:none;
}
.icon-badge svg{
  width:26px; height:26px;
  stroke:var(--orange);
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- 6. Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(0,26,40,.82);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4);
  padding:14px var(--s-5);
  max-width:var(--maxw);
  margin:0 auto;
}

.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; flex:none; }
/* width:auto + max-* pairs keep the true intrinsic ratio in every case. */
.brand-icon{ width:auto; height:auto; max-width:30px; max-height:30px; object-fit:contain; flex:none; }
.brand-word{ width:auto; height:auto; max-width:132px; max-height:18px; object-fit:contain; flex:none; }

.nav-links{
  display:flex; align-items:center; gap:var(--s-6);
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  color:var(--ink-70);
  padding:6px 0;
  position:relative;
  transition:color .18s var(--ease);
  display:inline-flex; align-items:center; gap:6px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px;
  background:var(--orange);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav-links a:hover{ color:var(--white); }
.nav-links a:hover::after,
.nav-links a[aria-current="true"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="true"]{ color:var(--white); }
.nav-links svg{ flex:none; }

.nav-right{ display:flex; align-items:center; gap:var(--s-4); }

/* Language switcher — real links, crawlable, no JS required. */
.lang-switch{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  background:rgba(255,255,255,.04);
  list-style:none;
  gap:2px;
}
.lang-switch a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px;
  padding:5px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--ink-50);
  transition:color .18s var(--ease), background .18s var(--ease);
}
.lang-switch a:hover{ color:var(--white); }
.lang-switch a[aria-current="true"]{
  background:var(--orange);
  color:var(--navy-deep);
}

.menu-toggle{
  display:none;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--white);
  width:44px; height:44px;
  border-radius:12px;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.menu-toggle svg{ width:22px; height:22px; }
.menu-toggle .ico-close{ display:none; }
.nav.open .menu-toggle .ico-open{ display:none; }
.nav.open .menu-toggle .ico-close{ display:block; }

.mobile-only{ display:none; }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(56px, 8vw, 104px) 0 clamp(56px, 8vw, 100px);
  border-bottom:1px solid var(--line);
}
.hero-glow{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 82% 18%, rgba(242,140,45,.18), transparent 46%),
    radial-gradient(circle at 12% 88%, rgba(11,52,80,.95), transparent 56%);
  pointer-events:none;
  z-index:0;
}
.hero-hexes{
  position:absolute;
  right:-140px; top:-160px;
  opacity:.4;
  pointer-events:none;
  z-index:0;
}
.hero > .wrap{ position:relative; z-index:1; }

.hero-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(32px, 5vw, 64px);
  align-items:center;
}
.hero h1{
  font-size:clamp(32px, 5vw, 58px);
  max-width:16ch;
  margin-bottom:var(--s-5);
}
.hero .lead{ margin:0 0 var(--s-6); }
.hero-actions{ display:flex; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-6); }

.hero-visual{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:180px;
}
.hero-visual .glow{
  position:absolute;
  width:min(220px, 48%);
  aspect-ratio:1/1;
  background:radial-gradient(circle, rgba(242,140,45,.3), transparent 70%);
  filter:blur(12px);
  pointer-events:none;
}
.hero-logo{
  position:relative;
  width:auto; height:auto;
  max-width:min(180px, 42%);
  max-height:180px;
  object-fit:contain;
  animation:float 6s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

/* ---------- 8. Service cards ---------- */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); }

.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  transition:transform .22s var(--ease), border-color .22s var(--ease),
             box-shadow .22s var(--ease), background .22s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(242,140,45,.5);
  background:var(--card-hi);
  box-shadow:var(--shadow);
}
.card h3{ font-size:18.5px; margin-bottom:var(--s-2); }
.card p{ color:var(--ink-70); font-size:15px; margin:0; }
.card .icon-badge{ margin-bottom:var(--s-4); }

.card-list{
  list-style:none;
  margin:var(--s-4) 0 0;
  padding:0;
  display:grid;
  gap:6px;
}
.card-list li{
  color:var(--ink-50);
  font-size:14px;
  padding-left:18px;
  position:relative;
}
.card-list li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:7px; height:7px;
  background:var(--orange);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* ---------- 9. Split sections ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px, 5vw, 64px);
  align-items:center;
}
.split.reverse .split-visual{ order:2; }
.split.reverse .split-text{ order:1; }
.split h2{ font-size:clamp(26px, 3vw, 36px); max-width:17ch; }
.split p{ color:var(--ink-70); font-size:clamp(15.5px,1.6vw,16.5px); }

.hex-illustration{
  aspect-ratio:1/1;
  max-width:250px;
  margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  opacity:.85;
}
.hex-illustration svg{ width:100%; height:100%; }

/* ---------- 10. Process steps ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s-5);
  list-style:none;
  counter-reset:step;
}
.step{
  position:relative;
  padding:28px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
  counter-increment:step;
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.step:hover{ border-color:rgba(242,140,45,.45); transform:translateY(-4px); }
.step::before{
  content:"0" counter(step);
  display:block;
  font-family:'Sora','Inter',sans-serif;
  font-size:30px;
  font-weight:800;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(242,140,45,.75);
  margin-bottom:var(--s-4);
}
.step h3{ font-size:17.5px; margin-bottom:6px; }
.step p{ color:var(--ink-70); font-size:14.5px; margin:0; }

/* ---------- 11. Alternate surface ---------- */
.surface-deep{
  background:var(--navy-deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}

/* ---------- 12. FAQ ---------- */
.faq{ max-width:840px; margin:0 auto; display:grid; gap:var(--s-3); }
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--card);
  overflow:hidden;
  transition:border-color .2s var(--ease);
}
.faq-item[open]{ border-color:rgba(242,140,45,.42); }
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:20px 56px 20px 22px;
  position:relative;
  font-family:'Sora','Inter',sans-serif;
  font-weight:600;
  font-size:16.5px;
  line-height:1.4;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"";
  position:absolute;
  right:22px; top:calc(50% - 5px);
  width:10px; height:10px;
  border-right:2px solid var(--orange);
  border-bottom:2px solid var(--orange);
  transform:rotate(45deg);
  transition:transform .22s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(-135deg); top:calc(50% - 2px); }
.faq-item .faq-body{
  padding:0 22px 22px;
  color:var(--ink-70);
  font-size:15.5px;
}

/* ---------- 13. Jé'Rhumy (offbeat) ---------- */
.offbeat{ position:relative; overflow:hidden; }
.offbeat::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 88% 20%, rgba(255,110,82,.18), transparent 44%),
    radial-gradient(circle at 6% 92%, rgba(242,140,45,.1), transparent 48%);
  pointer-events:none;
  z-index:0;
}
.offbeat > .wrap{ position:relative; z-index:1; }
.offbeat-badge{
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,110,82,.13);
  border:1px solid rgba(255,110,82,.42);
  color:var(--coral);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:var(--s-4);
}
.offbeat-badge svg{ width:14px; height:14px; flex:none; }
.offbeat h2{ font-size:clamp(26px,3.2vw,36px); max-width:18ch; }
.offbeat p{ color:var(--ink-70); max-width:50ch; }
.offbeat .tag-row{ margin:var(--s-5) 0 var(--s-6); }
.offbeat .tag{ border-color:rgba(255,110,82,.32); }

.vinyl-panel{
  position:relative;
  aspect-ratio:1/1;
  max-width:400px;
  margin:0 auto;
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(255,110,82,.1), rgba(242,140,45,.05));
  border:1px solid rgba(255,110,82,.25);
  display:flex; align-items:center; justify-content:center;
}
.vinyl{
  position:relative;
  width:58%; aspect-ratio:1/1;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.06) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 35% 30%, #123047, #041521 70%);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  animation:spin 14s linear infinite;
}
.vinyl::after{
  content:"";
  width:26%; height:26%;
  border-radius:50%;
  background:linear-gradient(135deg, var(--coral), var(--orange));
  border:3px solid var(--navy-deep);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.bars{
  position:absolute;
  left:50%; bottom:13%;
  transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:4px;
  height:46px;
}
.bars span{
  width:4px;
  border-radius:3px;
  background:linear-gradient(180deg, var(--coral), var(--orange));
  animation:bar 1.4s ease-in-out infinite;
}
.bars span:nth-child(1){ height:40%; animation-delay:0s; }
.bars span:nth-child(2){ height:70%; animation-delay:.12s; }
.bars span:nth-child(3){ height:100%; animation-delay:.24s; }
.bars span:nth-child(4){ height:55%; animation-delay:.36s; }
.bars span:nth-child(5){ height:85%; animation-delay:.48s; }
.bars span:nth-child(6){ height:35%; animation-delay:.6s; }
@keyframes bar{
  0%,100%{ transform:scaleY(.5); opacity:.7; }
  50%{ transform:scaleY(1); opacity:1; }
}

/* ---------- 14. Contact ---------- */
.contact{ text-align:center; }
.contact h2{ font-size:clamp(26px,3.6vw,40px); max-width:22ch; margin:0 auto var(--s-3); }
.contact > .wrap > p{ color:var(--ink-70); max-width:54ch; margin:0 auto var(--s-6); font-size:17px; }

.contact-form{
  max-width:560px;
  margin:0 auto;
  text-align:left;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow-sm);
}
.contact-form .hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.field{ margin-bottom:var(--s-4); }
.field label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-70);
  margin-bottom:7px;
}
.field .optional{ font-weight:400; color:var(--ink-50); }
.field input,
.field textarea{
  width:100%;
  background:var(--navy-deep);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-family:inherit;
  font-size:15px;
  color:var(--white);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--ink-50); }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(242,140,45,.18);
}
.field textarea{ resize:vertical; min-height:104px; }

.form-submit{ width:100%; margin-top:var(--s-1); }
.form-submit[disabled]{ opacity:.6; cursor:not-allowed; transform:none; }
.form-status{
  margin:var(--s-3) 0 0;
  font-size:14.5px;
  min-height:1.3em;
}
.form-status.ok{ color:var(--ok); }
.form-status.err{ color:var(--err); }
.form-alt{
  text-align:center;
  color:var(--ink-50);
  font-size:14.5px;
  margin-top:var(--s-5);
}
.form-alt a{ color:var(--ink-70); text-decoration:underline; text-underline-offset:3px; }
.form-alt a:hover{ color:var(--white); }

/* ---------- 15. Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line);
  padding:var(--s-7) 0 var(--s-6);
  background:var(--navy-deep);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--s-7);
  margin-bottom:var(--s-6);
}
.foot-brand{ display:inline-flex; align-items:center; gap:var(--s-2); text-decoration:none; }
.foot-icon{ width:auto; height:auto; max-width:24px; max-height:24px; object-fit:contain; flex:none; }
.foot-word{ width:auto; height:auto; max-width:112px; max-height:16px; object-fit:contain; flex:none; }
.foot-about{ color:var(--ink-50); font-size:14.5px; margin:var(--s-4) 0 0; max-width:40ch; }
.foot-col h3{
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-50);
  margin-bottom:var(--s-4);
  font-weight:600;
}
.foot-col ul{ list-style:none; display:grid; gap:10px; }
.foot-col a{ text-decoration:none; color:var(--ink-70); font-size:14.5px; }
.foot-col a:hover{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:var(--s-3);
  padding-top:var(--s-5);
  border-top:1px solid var(--line);
  font-size:13.5px;
  color:var(--ink-50);
}
.foot-bottom a{ color:var(--ink-50); text-decoration:underline; text-underline-offset:3px; }
.foot-bottom a:hover{ color:var(--white); }

/* ---------- 16. Back to top ---------- */
.to-top{
  position:fixed;
  right:20px; bottom:20px;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(10,48,73,.9);
  backdrop-filter:blur(8px);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:55;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ border-color:var(--orange); }
.to-top svg{ width:18px; height:18px; }

/* ---------- 17. Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

/* ---------- 18. Responsive ---------- */
@media (max-width:980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  :root{ --s-9:64px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; min-height:0; margin-bottom:var(--s-2); }
  .hero-logo{ max-width:min(120px, 30vw); max-height:16vh; }
  .hero h1{ max-width:20ch; }
  .split{ grid-template-columns:1fr; }
  .split.reverse .split-visual,
  .split.reverse .split-text{ order:initial; }
  .hex-illustration{ max-width:160px; opacity:.7; }
  .grid-3{ grid-template-columns:1fr 1fr; }
}

@media (max-width:820px){
  .nav-links,
  .nav-right .desktop-only{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-only{ display:block; }
  .nav{ padding:11px var(--s-4); position:relative; }
  .brand-icon{ max-width:26px; max-height:26px; }
  .brand-word{ max-width:114px; max-height:16px; }

  .nav.open .nav-links{
    display:flex;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--navy);
    border-bottom:1px solid var(--line);
    padding:var(--s-2) var(--s-5) var(--s-5);
    box-shadow:var(--shadow);
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
  }
  .nav.open .nav-links a{
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:16px;
  }
  .nav.open .nav-links a::after{ display:none; }
  .nav.open .nav-links li.mobile-only{ border:none; padding-top:var(--s-4); }
  .nav.open .nav-links li.mobile-only a{
    border-bottom:none;
    padding:13px 24px;
    width:100%;
  }
}

@media (max-width:680px){
  :root{ --s-9:52px; }
  section{ padding:var(--s-9) 0; }
  .wrap{ padding:0 var(--s-4); }
  .hero{ padding:32px 0 44px; }
  .hero-logo{ max-width:min(92px, 26vw); max-height:12vh; }
  .hero-hexes{ display:none; }
  .grid-4, .grid-3, .grid-2, .steps{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .form-row{ grid-template-columns:1fr; }
  .contact-form{ padding:24px 20px; }
  .hex-illustration{ max-width:132px; }
  .faq-item summary{ font-size:15.5px; padding:18px 48px 18px 18px; }
  .faq-item .faq-body{ padding:0 18px 18px; font-size:15px; }
  .to-top{ right:14px; bottom:14px; }
}

/* ---------- 19. Motion & print preferences ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  header.site-header, .to-top, .hero-glow, .hero-hexes, .vinyl-panel{ display:none; }
  body{ background:#fff; color:#000; }
  .card, .step, .faq-item, .contact-form{ border-color:#ccc; background:#fff; }
}