/* =========================================================
   ProtoGene Consulting — Design System
   ========================================================= */

:root{
  --red: #E31E24;
  --red-dark: #B3151A;
  --maroon: #7C1315;
  --ink: #121217;
  --ink-soft: #33333d;
  --gray-700: #52525b;
  --gray-500: #79797f;
  --gray-300: #d8d8de;
  --gray-100: #f3f3f6;
  --gray-50: #fafafa;
  --white: #ffffff;
  --indigo: #4F46E5;
  --cyan: #14B8C4;
  --violet: #7C3AED;

  --grad-brand: linear-gradient(120deg, var(--red) 0%, var(--maroon) 100%);
  --grad-ai: linear-gradient(120deg, var(--indigo) 0%, var(--violet) 55%, var(--red) 100%);
  --grad-dark: linear-gradient(160deg, #14141b 0%, #241016 55%, #3a1216 100%);

  --font-head: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(18,18,23,.06);
  --shadow-md: 0 12px 32px rgba(18,18,23,.10);
  --shadow-lg: 0 24px 60px rgba(18,18,23,.16);

  --maxw: 1240px;
  --nav-h: 78px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-head); margin:0; line-height:1.12; letter-spacing:-0.01em; color:var(--ink); }
p{ margin:0; color:var(--gray-700); line-height:1.7; }
button{ font-family:inherit; cursor:pointer; }
section{ position:relative; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:104px 0; }
.section--tight{ padding:72px 0; }
.section--gray{ background:var(--gray-50); }
.section--dark{ background:var(--grad-dark); color:var(--white); }
.section--dark p{ color:rgba(255,255,255,.72); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4{ color:var(--white); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-size:12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red);
  margin-bottom:16px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--red); display:inline-block; border-radius:2px; }
.section--dark .eyebrow{ color:#ff8a8d; }
.section--dark .eyebrow::before{ background:#ff8a8d; }

h2.h-lg{ font-size:clamp(28px,3.6vw,44px); }
h3.h-md{ font-size:clamp(20px,2.2vw,26px); }
.lede{ font-size:clamp(16px,1.4vw,19px); color:var(--gray-700); max-width:640px; }
.section--dark .lede{ color:rgba(255,255,255,.75); }

.section-head{ max-width:760px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:100px; font-weight:600; font-size:15px;
  border:1.5px solid transparent; transition:all .25s ease; white-space:nowrap;
}
.btn-primary{ background:var(--grad-brand); color:var(--white); box-shadow:0 10px 24px rgba(227,30,36,.28); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(227,30,36,.36); }
.btn-outline{ border-color:rgba(18,18,23,.16); color:var(--ink); background:transparent; }
.btn-outline:hover{ border-color:var(--red); color:var(--red); }
.section--dark .btn-outline{ border-color:rgba(255,255,255,.3); color:var(--white); }
.section--dark .btn-outline:hover{ border-color:#fff; }
.btn-white{ background:var(--white); color:var(--ink); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.btn-white:hover{ transform:translateY(-2px); }
.btn-sm{ padding:10px 18px; font-size:13.5px; }
.btn-icon{ width:18px; height:18px; flex:none; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h); display:flex; align-items:center;
  background:rgba(255,255,255,0); border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled{ background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-color:rgba(18,18,23,.08); box-shadow:0 4px 20px rgba(18,18,23,.06); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:34px; width:auto; }
/* Nav starts transparent over a dark hero, so show the white wordmark;
   once the nav gets a light/blurred background on scroll, swap to the
   full-color logo so the wordmark stays legible. */
.brand .logo-dark{ display:none; }
.brand .logo-light{ display:block; }
.nav.is-scrolled .brand .logo-dark{ display:block; }
.nav.is-scrolled .brand .logo-light{ display:none; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  padding:10px 16px; font-size:14.5px; font-weight:600; color:var(--ink-soft);
  border-radius:100px; transition:all .2s ease; position:relative;
}
.nav-links a:hover{ color:var(--red); background:rgba(227,30,36,.06); }
.nav-links a.active{ color:var(--red); background:rgba(227,30,36,.08); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:none; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:.25s; }

/* dark hero variant for nav before scroll on dark-hero pages */
.nav.on-dark:not(.is-scrolled) .nav-links a{ color:rgba(255,255,255,.82); }
.nav.on-dark:not(.is-scrolled) .nav-links a:hover{ color:#fff; background:rgba(255,255,255,.1); }
.nav.on-dark:not(.is-scrolled) .brand-word{ color:#fff; }
.nav.on-dark:not(.is-scrolled) .nav-toggle span{ background:#fff; }

/* ---------- Hero (generic inner-page) ---------- */
.page-hero{
  position:relative; padding:calc(var(--nav-h) + 96px) 0 96px;
  background:var(--grad-dark); color:var(--white); overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 380px at 82% 10%, rgba(227,30,36,.35), transparent 60%),
    radial-gradient(500px 420px at 8% 90%, rgba(79,70,229,.30), transparent 60%);
  pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ font-size:clamp(32px,5vw,56px); max-width:820px; color:#fff; }
.page-hero .lede{ color:rgba(255,255,255,.78); margin-top:18px; max-width:620px; }
.page-hero .btn-outline{ border-color:rgba(255,255,255,.3); color:#fff; }
.page-hero .btn-outline:hover{ border-color:#fff; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hero-tags span{
  font-size:12.5px; font-weight:600; letter-spacing:.03em; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  padding:8px 14px; border-radius:100px;
}
.crumb{ font-size:13.5px; color:rgba(255,255,255,.6); margin-bottom:18px; }
.crumb a:hover{ color:#fff; }
.crumb .sep{ margin:0 8px; opacity:.5; }

/* ---------- Home hero ---------- */
.home-hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:var(--grad-dark); color:var(--white); overflow:hidden; padding-top:var(--nav-h);
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.home-hero::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(900px 560px at 78% 20%, rgba(227,30,36,.30), transparent 60%),
              radial-gradient(700px 520px at 15% 85%, rgba(79,70,229,.28), transparent 60%);
  pointer-events:none;
}
.home-hero .wrap{ position:relative; z-index:2; padding-top:60px; padding-bottom:60px; }
.home-hero h1{ font-size:clamp(36px,6vw,68px); max-width:920px; color:#fff; }
.home-hero h1 .accent{ background:var(--grad-ai); -webkit-background-clip:text; background-clip:text; color:transparent; }
.home-hero .lede{ margin-top:22px; max-width:640px; font-size:clamp(16px,1.6vw,20px); color:rgba(255,255,255,.78); }
.home-hero .btn-outline{ border-color:rgba(255,255,255,.3); color:#fff; }
.home-hero .btn-outline:hover{ border-color:#fff; }
.hero-actions{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.hero-strip{
  margin-top:72px; display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero-strip div{ padding:24px 20px 0; border-right:1px solid rgba(255,255,255,.14); }
.hero-strip div:last-child{ border-right:none; }
.hero-strip .num{ font-family:var(--font-head); font-size:clamp(24px,2.6vw,34px); font-weight:700; }
.hero-strip .lab{ font-size:12.5px; color:rgba(255,255,255,.6); margin-top:4px; letter-spacing:.02em; }
.scroll-cue{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.55); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; }
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7),transparent); animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--white); border:1px solid var(--gray-100); border-radius:var(--radius-md);
  padding:32px; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(227,30,36,.18); }
.card .icon-badge{ margin-bottom:20px; }
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ font-size:14.8px; }
.card .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.card .tags span{ font-size:11px; font-weight:600; color:var(--red-dark); background:rgba(227,30,36,.08); padding:5px 10px; border-radius:100px; }

.icon-badge{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(227,30,36,.12), rgba(124,19,21,.10));
  color:var(--red);
}
.icon-badge svg{ width:26px; height:26px; }
.icon-badge.alt{ background:linear-gradient(135deg, rgba(79,70,229,.12), rgba(124,58,237,.10)); color:var(--indigo); }

/* dark-card variant used on dark sections */
.card--dark{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px); }
.card--dark h3{ color:#fff; }
.card--dark p{ color:rgba(255,255,255,.7); }
.card--dark .icon-badge{ background:rgba(255,255,255,.1); color:#ff8a8d; }

/* ---------- Stat blocks ---------- */
.stat{
  text-align:left; padding:26px 0; border-top:1px solid var(--gray-300);
}
.stat .num{ font-family:var(--font-head); font-size:clamp(30px,3vw,42px); font-weight:700; color:var(--ink); }
.stat .num span{ color:var(--red); }
.stat .lab{ margin-top:6px; font-size:14px; color:var(--gray-500); }

/* ---------- Tabs ---------- */
.tabs-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.tab-btn{
  padding:11px 20px; border-radius:100px; border:1.5px solid var(--gray-300); background:var(--white);
  font-weight:600; font-size:14px; color:var(--ink-soft); transition:all .2s ease;
}
.tab-btn:hover{ border-color:var(--red); color:var(--red); }
.tab-btn.active{ background:var(--grad-brand); border-color:transparent; color:#fff; box-shadow:0 8px 18px rgba(227,30,36,.28); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadein .4s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ---------- Accordion ---------- */
.accordion-item{ border-bottom:1px solid var(--gray-300); }
.accordion-item:first-child{ border-top:1px solid var(--gray-300); }
.accordion-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px; background:none; border:none; text-align:left;
}
.accordion-head h4{ font-size:17px; font-weight:600; }
.accordion-head .plus{ width:22px; height:22px; position:relative; flex:none; }
.accordion-head .plus::before,.accordion-head .plus::after{ content:""; position:absolute; background:var(--red); border-radius:2px; }
.accordion-head .plus::before{ width:16px; height:2px; top:10px; left:3px; }
.accordion-head .plus::after{ width:2px; height:16px; left:10px; top:3px; transition:transform .3s ease; }
.accordion-item.open .plus::after{ transform:rotate(90deg); }
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.accordion-body-in{ padding:0 4px 26px; max-width:760px; }

/* ---------- Numbered process ---------- */
.process{ counter-reset:step; }
.process-item{ display:flex; gap:22px; padding:28px 0; border-top:1px solid var(--gray-300); }
.process-item .idx{
  font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--red);
  width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(227,30,36,.35);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.process-item h4{ font-size:17px; margin-bottom:6px; }
.process-item p{ font-size:14.5px; }

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--radius-lg); padding:64px; background:var(--grad-dark); color:#fff;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(500px 300px at 85% 20%, rgba(227,30,36,.35), transparent 60%),
             radial-gradient(400px 280px at 10% 90%, rgba(79,70,229,.3), transparent 60%);
}
.cta-band-in{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-band h2{ color:#fff; font-size:clamp(24px,3vw,34px); max-width:520px; }
.cta-band p{ color:rgba(255,255,255,.72); margin-top:10px; max-width:480px; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:rgba(255,255,255,.65); padding:76px 0 28px; }
.footer h4{ color:#fff; font-size:14.5px; margin-bottom:18px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand img{ height:32px; margin-bottom:16px; }
.footer p{ color:rgba(255,255,255,.55); font-size:14px; }
.footer-links li{ margin-bottom:12px; }
.footer-links a{ font-size:14px; color:rgba(255,255,255,.65); transition:color .2s; }
.footer-links a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; flex-wrap:wrap; gap:12px; }
.footer-bottom a{ color:rgba(255,255,255,.5); }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; transition:all .2s; }
.social-row a:hover{ background:var(--red); border-color:var(--red); }
.social-row svg{ width:16px; height:16px; }

/* ---------- Reveal on scroll ---------- */
/* Content is visible by default so it never depends on JS running or the
   element having scrolled into view (no-JS, slow JS, crawlers, full-page
   captures). Only once JS confirms it's driving do we hide-then-animate. */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal-stagger.in > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ---------- Marquee (industries strip) ---------- */
.marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:14px; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--ink-soft); background:var(--gray-100); padding:12px 22px; border-radius:100px; white-space:nowrap; border:1px solid var(--gray-300); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Form ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  padding:14px 16px; border-radius:10px; border:1.5px solid var(--gray-300); font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--white); transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--red); }
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:12.5px; color:var(--gray-500); margin-top:14px; }
.form-success{ display:none; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.35); color:#15803d; padding:16px 20px; border-radius:12px; font-size:14px; font-weight:600; margin-bottom:20px; }
.form-success.show{ display:block; }

/* contact info list */
.info-row{ display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--gray-300); }
.info-row .icon-badge{ width:44px; height:44px; border-radius:12px; }
.info-row .icon-badge svg{ width:20px; height:20px; }
.info-row h4{ font-size:15px; margin-bottom:4px; }
.info-row a, .info-row p{ font-size:14.5px; }
.info-row a:hover{ color:var(--red); }

/* Map placeholder */
.map-box{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--gray-300); }

/* ---------- Utility ---------- */
.mt-8{ margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;} .mt-64{margin-top:64px;}
.center-text{ text-align:center; }
.pill{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.03em; padding:6px 14px; border-radius:100px; background:rgba(227,30,36,.08); color:var(--red-dark); }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.badge-row{ display:flex; flex-wrap:wrap; gap:12px; }
.badge-row span{ font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--gray-100); border:1px solid var(--gray-300); padding:8px 14px; border-radius:100px; }

/* Visual placeholders built from CSS (no external images needed) */
.orb-graphic{ position:relative; aspect-ratio:1/1; border-radius:32px; background:var(--grad-dark); overflow:hidden; }
.orb-graphic canvas{ position:absolute; inset:0; width:100%; height:100%; }

.diagram-card{ background:var(--white); border:1px solid var(--gray-100); border-radius:var(--radius-md); padding:36px; box-shadow:var(--shadow-sm); }

/* Back to top */
.to-top{ position:fixed; right:24px; bottom:24px; width:46px; height:46px; border-radius:50%; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(227,30,36,.35); z-index:900; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; border:none; }
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top svg{ width:18px; height:18px; color:#fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .hero-strip{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
  .hero-strip div:nth-child(2){ border-right:none; }
}
@media (max-width: 860px){
  .nav-links, .nav-cta .btn-outline{ display:none; }
  .nav-toggle{ display:block; }
  .nav-cta{ gap:10px; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .section{ padding:72px 0; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .cta-band{ padding:40px 28px; }
  .cta-band-in{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns:1fr; }
  h2.h-lg{ font-size:30px; }
}

/* ---------- Mobile menu overlay ---------- */
.mobile-menu{
  position:fixed; inset:0; background:var(--ink); z-index:1100; display:flex; flex-direction:column;
  padding:26px 28px; transform:translateY(-100%); transition:transform .35s ease; overflow-y:auto;
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu-close{ background:none; border:none; width:40px; height:40px; position:relative; }
.mobile-menu-close::before,.mobile-menu-close::after{ content:""; position:absolute; width:22px; height:2px; background:#fff; top:19px; left:9px; }
.mobile-menu-close::before{ transform:rotate(45deg);} .mobile-menu-close::after{ transform:rotate(-45deg);}
.mobile-menu-links{ margin-top:56px; display:flex; flex-direction:column; gap:6px; }
.mobile-menu-links a{ font-family:var(--font-head); font-size:28px; font-weight:600; color:#fff; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-menu-cta{ margin-top:40px; display:flex; flex-direction:column; gap:14px; }