/* ==========================================================================
   Eng. Mohamed Abdishakur Mohamud — Personal Portfolio
   Ribaad Technology. Clean, minimal, modern.

   Design rules used here:
   - One accent (cyan). Gradients only on the primary button and headline.
   - Hairline borders instead of heavy shadows.
   - Hover = a small lift + a border that wakes up. Nothing else.
   - Only two things move on their own: hero particles and the circuit lines.

   1 Tokens   2 Base       3 Buttons    4 Navbar    5 Hero
   6 About    7 Expertise  8 Ribaad     9 Projects  10 Stack
   11 Timeline 12 Leadership 13 Services 14 Stats   15 Testimonials
   16 Contact 17 Footer    18 Reveal    19 Responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --primary:#0B1F4D;
  --secondary:#1557C0;
  --blue:#2563EB;
  --cyan:#00BFFF;
  --dark:#071225;
  --light:#F7FAFF;
  --white:#FFFFFF;
  --text:#172033;
  --muted:#667085;

  /* surfaces */
  --surface:#FFFFFF;
  --surface-2:#FAFCFF;
  --line:rgba(11,31,77,.09);
  --line-strong:rgba(11,31,77,.16);
  --accent-soft:rgba(0,191,255,.14);

  --grad:linear-gradient(135deg,#0B1F4D,#1557C0 55%,#00BFFF);

  /* one shadow at rest, one on hover */
  --shadow:0 1px 2px rgba(11,31,77,.04),0 8px 24px rgba(11,31,77,.05);
  --shadow-hover:0 2px 4px rgba(11,31,77,.05),0 18px 40px rgba(11,31,77,.10);

  --r:14px;
  --r-lg:22px;

  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Sora','Inter',system-ui,sans-serif;

  /* one easing for every interaction */
  --ease:cubic-bezier(.16,1,.3,1);
  --t:.34s;

  --nav-h:76px;
  --section-y:clamp(80px,10vw,140px);
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;}

html{
  overflow-x:hidden;              /* nothing ever scrolls sideways */
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--surface);
  font-size:16px;
  line-height:1.68;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--primary);
  line-height:1.14;
  letter-spacing:-.03em;
  margin:0 0 .6rem;
  text-wrap:balance;
}

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

a{color:var(--secondary);text-decoration:none;transition:color var(--t) var(--ease);}
a:hover{color:var(--primary);}

::selection{background:var(--cyan);color:var(--dark);}

:focus-visible{
  outline:2px solid var(--secondary);
  outline-offset:3px;
  border-radius:8px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--primary);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0;color:#fff;}

/* Sections ---------------------------------------------------------------- */
.section{
  position:relative;
  padding-top:var(--section-y);
  padding-bottom:var(--section-y);
}
.section-tint{
  background:var(--surface-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.section-head{
  max-width:640px;
  margin:0 0 clamp(44px,5.5vw,68px);
}
.section-title{
  font-size:clamp(1.9rem,4vw,2.85rem);
  font-weight:700;
}
.section-sub{
  color:var(--muted);
  font-size:1.05rem;
  margin:.7rem 0 0;
  max-width:56ch;
}
.on-dark{color:#fff;}
.section-sub.on-dark{color:rgba(255,255,255,.66);}

.grad-text{
  background:linear-gradient(100deg,#0B1F4D 0%,#1557C0 55%,#2E86DE 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Eyebrow: a quiet pill, not a shouty banner */
.eyebrow{
  display:inline-flex;
  align-items:center;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--secondary);
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:.38rem .95rem;
  margin-bottom:1.5rem;
  background:var(--surface);
}

/* Shared card surface — one look, reused everywhere */
.glass-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.glass-dark{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);
}

/* ---------- 3. Buttons ---------- */
.btn-brand,.btn-ghost{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.94rem;
  letter-spacing:-.01em;
  padding:.78rem 1.55rem;
  border-radius:999px;
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease),
             background var(--t) var(--ease),
             color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.btn-brand{
  background:var(--primary);
  color:#fff;
  isolation:isolate;               /* keeps the gradient layer under the label */
  box-shadow:0 6px 16px rgba(11,31,77,.16);
}
.btn-brand::before{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background:var(--grad);
  opacity:0;
  transition:opacity var(--t) var(--ease);
}
.btn-brand:hover,.btn-brand:focus-visible{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(11,31,77,.22);
}
.btn-brand:hover::before,.btn-brand:focus-visible::before{opacity:1;}
.btn-brand:active{transform:translateY(0);}

.btn-ghost{
  background:transparent;
  color:var(--primary);
  border-color:var(--line-strong);
}
.btn-ghost:hover,.btn-ghost:focus-visible{
  color:var(--primary);
  border-color:var(--primary);
  background:rgba(11,31,77,.03);
  transform:translateY(-2px);
}
.btn-ghost:active{transform:translateY(0);}

/* Ripple */
.ripple .ink{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:rgba(255,255,255,.3);
  animation:ripple .55s var(--ease);
  pointer-events:none;
  z-index:2;
}
.btn-ghost .ink{background:rgba(11,31,77,.10);}
@keyframes ripple{to{transform:scale(2.6);opacity:0;}}

/* ---------- 4. Navbar ---------- */
.site-nav{
  height:var(--nav-h);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease),
             border-color var(--t) var(--ease),
             backdrop-filter var(--t) var(--ease);
}
.site-nav.scrolled{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);
}

.navbar-brand{display:flex;align-items:center;gap:.6rem;}
.brand-mark{width:40px;height:40px;object-fit:contain;}
.brand-text{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.97rem;
  color:var(--primary);
  letter-spacing:-.02em;
}

.nav-links{gap:.1rem;}
.nav-links .nav-link{
  position:relative;
  font-weight:500;
  font-size:.92rem;
  color:var(--muted);
  padding:.45rem .72rem;
  border-radius:8px;
  transition:color var(--t) var(--ease);
}
/* A small dot marks the current section. Quieter than an underline. */
.nav-links .nav-link::after{
  content:"";
  position:absolute;
  left:50%;bottom:.1rem;
  width:4px;height:4px;
  margin-left:-2px;
  border-radius:50%;
  background:var(--cyan);
  opacity:0;
  transform:scale(.4);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
}
.nav-links .nav-link:hover{color:var(--primary);}
.nav-links .nav-link.active{color:var(--primary);font-weight:600;}
.nav-links .nav-link.active::after{opacity:1;transform:scale(1);}

.nav-cta{margin-left:1rem;padding:.58rem 1.2rem;font-size:.87rem;}

/* Hamburger */
.navbar-toggler{border:none;padding:.4rem;box-shadow:none!important;}
.burger{display:block;width:24px;}
.burger i{
  display:block;height:1.8px;background:var(--primary);border-radius:2px;
  margin:5px 0;
  transition:transform var(--t) var(--ease),opacity .2s ease;
}
.navbar-toggler[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(6.8px) rotate(45deg);}
.navbar-toggler[aria-expanded="true"] .burger i:nth-child(2){opacity:0;}
.navbar-toggler[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-6.8px) rotate(-45deg);}

/* Scroll progress */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:var(--cyan);
  z-index:1100;
  transition:width .12s linear;
}

/* ---------- 5. Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:calc(var(--nav-h) + 56px) 0 80px;
  overflow:hidden;
  background:var(--surface);
}
/* Very faint grid, faded out at the edges */
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(11,31,77,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,31,77,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 65% at 50% 42%,#000 20%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 42%,#000 20%,transparent 100%);
  pointer-events:none;
}
.hero .container{position:relative;z-index:2;}
.hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}

/* One soft wash instead of two loud blobs */
.blob{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;}
.blob-a{
  width:520px;height:520px;
  top:-160px;right:-120px;
  background:radial-gradient(circle,rgba(0,191,255,.28),transparent 70%);
}
.blob-b{display:none;}

.hero-title{
  text-wrap:normal;
  font-size:clamp(2.1rem,4.9vw,3.35rem);
  font-weight:700;
  margin-bottom:1.5rem;
}
.hero-name{
  font-family:var(--font-display);
  font-size:1.06rem;
  font-weight:600;
  color:var(--primary);
  margin-bottom:.1rem;
}
.hero-role{color:var(--muted);font-size:.98rem;margin-bottom:1.4rem;}
.hero-lead{
  color:var(--muted);
  max-width:52ch;
  font-size:1.02rem;
  margin-bottom:2.1rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2.3rem;}

.social-row{list-style:none;padding:0;margin:0;display:flex;gap:.55rem;flex-wrap:wrap;}
.social-row a{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:1rem;
  transition:transform var(--t) var(--ease),
             color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.social-row a:hover,.social-row a:focus-visible{
  transform:translateY(-3px);
  color:var(--primary);
  border-color:var(--primary);
}

/* Portrait — clean rounded frame with one offset accent line */
.portrait-stage{
  position:relative;
  max-width:400px;
  margin-inline:auto;
  padding:18px;
}
.circuit{
  position:absolute;inset:-4% -8%;
  width:116%;height:108%;
  color:rgba(21,87,192,.16);
  z-index:0;
}
.circuit path{stroke-dasharray:5 11;animation:dash 26s linear infinite;}
.circuit circle{opacity:.5;}
@keyframes dash{to{stroke-dashoffset:-160;}}

.portrait-frame{
  position:relative;
  z-index:2;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-2);
  box-shadow:var(--shadow);
}
.portrait-img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 16%;
  background:#eef3fb;
  transition:transform 1.2s var(--ease);
}
.portrait-stage:hover .portrait-img{transform:scale(1.025);}

/* One thin accent frame, offset behind the photo. The only decoration here. */
.portrait-ring{
  position:absolute;
  inset:18px;
  transform:translate(18px,18px);
  border:1px solid var(--cyan);
  border-radius:var(--r-lg);
  z-index:1;
  pointer-events:none;
  opacity:.55;
}

.float-card{
  position:absolute;
  z-index:3;
  display:flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  border-radius:12px;
  padding:.62rem .85rem;
  box-shadow:var(--shadow);
  max-width:215px;
}
.float-card strong{
  display:block;
  font-family:var(--font-display);
  font-size:.83rem;
  font-weight:600;
  color:var(--primary);
  line-height:1.3;
}
.float-card small{font-size:.72rem;color:var(--muted);line-height:1.35;display:block;}
.float-card img{width:28px;height:28px;object-fit:contain;}
.float-card .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px var(--accent-soft);
  flex:0 0 auto;
}
.float-card-top{top:5%;left:-8%;}
.float-card-bottom{bottom:6%;right:-8%;}

.scroll-hint{
  position:absolute;bottom:28px;left:50%;
  transform:translateX(-50%);
  width:22px;height:36px;
  border:1.5px solid var(--line-strong);
  border-radius:12px;
  z-index:3;
  display:grid;place-items:start center;
  padding-top:6px;
  transition:border-color var(--t) var(--ease);
}
.scroll-hint:hover{border-color:var(--primary);}
.scroll-hint span{
  width:3px;height:7px;border-radius:2px;
  background:var(--secondary);
  animation:wheel 2.2s var(--ease) infinite;
}
@keyframes wheel{
  0%{transform:translateY(0);opacity:1;}
  60%{transform:translateY(11px);opacity:0;}
  100%{opacity:0;}
}

/* ---------- 6. About ---------- */
.about-photo{
  position:relative;
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:var(--surface-2);
}
.about-photo img{
  width:100%;
  aspect-ratio:5/6;
  object-fit:cover;
  object-position:center 14%;
  background:#eef3fb;
  transition:transform 1.2s var(--ease);
}
.about-photo:hover img{transform:scale(1.03);}
.about-photo figcaption{
  position:absolute;left:14px;right:14px;bottom:14px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  border-radius:12px;
  padding:.7rem .9rem;
}
.about-photo figcaption strong{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:.9rem;color:var(--primary);
}
.about-photo figcaption span{font-size:.78rem;color:var(--muted);}

.about-copy h3{font-size:.94rem;color:var(--muted);margin-bottom:1.1rem;font-weight:500;letter-spacing:.01em;}
.about-copy p{color:var(--muted);max-width:60ch;}

.role-list{
  list-style:none;padding:0;
  margin:1.6rem 0 2rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(236px,1fr));
  gap:.5rem 1.4rem;
}
.role-list li{
  display:flex;align-items:center;gap:.55rem;
  font-size:.92rem;color:var(--text);
}
.role-list i{color:var(--cyan);font-size:1rem;}

.about-stats{margin-top:2.8rem;padding-top:2.2rem;border-top:1px solid var(--line);}
.mini-stat{height:100%;}
.mini-stat .num{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.6rem,3vw,2.05rem);
  color:var(--primary);
  line-height:1.1;
  letter-spacing:-.04em;
}
.mini-stat .num-word{font-size:clamp(1.15rem,2.2vw,1.45rem);}
.mini-stat p{margin:.3rem 0 0;font-size:.82rem;color:var(--muted);line-height:1.45;}

/* ---------- 7. Expertise ---------- */
.exp-card{
  height:100%;
  padding:1.7rem 1.5rem;
  position:relative;
  overflow:hidden;
  transition:transform var(--t) var(--ease),
             border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
/* one hairline that draws across the top on hover */
.exp-card::after{
  content:"";
  position:absolute;top:0;left:0;right:0;
  height:2px;
  background:var(--grad);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--ease);
}
.exp-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-hover);
}
.exp-card:hover::after{transform:scaleX(1);}

.exp-icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:11px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--secondary);
  font-size:1.2rem;
  margin-bottom:1.1rem;
  transition:background var(--t) var(--ease),
             color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.exp-card:hover .exp-icon{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.exp-card h3{font-size:1rem;font-weight:600;margin-bottom:.45rem;}
.exp-card p{font-size:.885rem;color:var(--muted);margin:0;}

/* ---------- 8. Ribaad band ---------- */
.ribaad-band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.logo-stage{position:relative;display:inline-grid;place-items:center;padding:26px;}
.logo-stage::before{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,191,255,.12),transparent 66%);
}
.logo-large{position:relative;width:min(280px,68vw);height:auto;object-fit:contain;}
.ribaad-lead{color:var(--muted);font-size:1.02rem;max-width:56ch;}

.chip-list{
  list-style:none;padding:0;
  margin:1.7rem 0 2.2rem;
  display:flex;flex-wrap:wrap;gap:.45rem;
}
.chip-list li{
  font-size:.83rem;
  font-weight:500;
  padding:.42rem .95rem;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:var(--surface);
  transition:color var(--t) var(--ease),
             border-color var(--t) var(--ease),
             transform var(--t) var(--ease);
}
.chip-list li:hover{
  color:var(--primary);
  border-color:var(--line-strong);
  transform:translateY(-2px);
}

/* ---------- 9. Projects ---------- */
.project-card{
  height:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:transform var(--t) var(--ease),
             border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.project-card:hover{
  transform:translateY(-5px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-hover);
}

.project-thumb{
  position:relative;
  aspect-ratio:16/10;
  display:grid;place-items:center;
  color:rgba(255,255,255,.9);
  font-size:2.3rem;
  overflow:hidden;
}
.project-thumb::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:26px 26px;
  transition:transform 1.1s var(--ease);
}
.project-card:hover .project-thumb::after{transform:scale(1.1);}
.project-thumb i{position:relative;z-index:1;transition:transform .6s var(--ease);}
.project-card:hover .project-thumb i{transform:translateY(-6px);}

.thumb-1{background:linear-gradient(140deg,#0B1F4D,#1B4A9E);}
.thumb-2{background:linear-gradient(140deg,#12336F,#1E7FD1);}
.thumb-3{background:linear-gradient(140deg,#071225,#1E4C9A);}
.thumb-4{background:linear-gradient(140deg,#123A7A,#2C93D6);}
.thumb-5{background:linear-gradient(140deg,#0B1F4D,#2455B8);}
.thumb-6{background:linear-gradient(140deg,#164275,#0B1F4D);}

.thumb-cta{
  position:absolute;
  z-index:2;
  bottom:14px;left:14px;
  opacity:0;
  transform:translateY(8px);
  background:rgba(255,255,255,.95);
  color:var(--primary);
  font-size:.79rem;
  font-weight:600;
  padding:.42rem 1rem;
  border-radius:999px;
  overflow:hidden;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
}
.project-card:hover .thumb-cta,
.thumb-cta:focus-visible{opacity:1;transform:translateY(0);}

.project-body{padding:1.35rem 1.35rem 1.5rem;flex:1;display:flex;flex-direction:column;}
.project-cat{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.project-body h3{font-size:1.04rem;font-weight:600;margin:.35rem 0 .5rem;}
.project-body p{font-size:.885rem;color:var(--muted);flex:1;}

.tags{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem;}
.tags li{
  font-size:.71rem;
  font-weight:500;
  padding:.24rem .6rem;
  border-radius:5px;
  border:1px solid var(--line);
  color:var(--muted);
}

/* ---------- 10. Tech stack ---------- */
.stack-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);   /* 12 tools = two even rows */
  gap:.75rem;
}
.stack-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.4rem .8rem;
  text-align:center;
  transition:transform var(--t) var(--ease),
             border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.stack-item i{
  font-size:1.8rem;
  color:var(--muted);
  transition:color var(--t) var(--ease),transform var(--t) var(--ease);
}
.stack-item span{
  display:block;margin-top:.6rem;
  font-size:.8rem;font-weight:500;color:var(--muted);
  transition:color var(--t) var(--ease);
}
.stack-item:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-hover);
}
.stack-item:hover i{color:var(--secondary);transform:translateY(-2px);}
.stack-item:hover span{color:var(--primary);}

/* ---------- 11. Timeline ---------- */
.timeline{list-style:none;margin:0;padding:0 0 0 32px;position:relative;max-width:780px;}
.timeline::before{
  content:"";
  position:absolute;left:5px;top:8px;bottom:8px;
  width:1px;
  background:var(--line-strong);
}
.tl-item{position:relative;margin-bottom:1.1rem;}
.tl-item:last-child{margin-bottom:0;}
.tl-dot{
  position:absolute;left:-32px;top:26px;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--surface);
  border:1.5px solid var(--secondary);
  transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.tl-item:hover .tl-dot{background:var(--cyan);box-shadow:0 0 0 5px var(--accent-soft);}

.tl-card{
  padding:1.45rem 1.55rem;
  transition:transform var(--t) var(--ease),
             border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.tl-item:hover .tl-card{
  transform:translateX(5px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-hover);
}
.tl-date{
  font-size:.71rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
}
.tl-card h3{font-size:1.06rem;font-weight:600;margin:.35rem 0 .18rem;}
.tl-org{color:var(--secondary);font-weight:500;font-size:.89rem;margin-bottom:.55rem;}
.tl-card p:last-child{color:var(--muted);font-size:.9rem;margin:0;}

/* ---------- 12. Leadership ---------- */
.leadership-band{
  position:relative;
  background:var(--dark);
  overflow:hidden;
}
.leadership-band::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(700px 380px at 15% 0%,rgba(0,191,255,.14),transparent 65%),
    linear-gradient(180deg,rgba(11,31,77,.6),transparent 60%);
  pointer-events:none;
}
.leadership-band .container{position:relative;z-index:1;}

.lead-card{
  height:100%;
  padding:1.9rem 1.7rem;
  transition:transform var(--t) var(--ease),
             background var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.lead-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.07);
  border-color:rgba(0,191,255,.4);
}
.lead-icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.14);
  color:var(--cyan);
  font-size:1.15rem;
  margin-bottom:1.1rem;
  transition:border-color var(--t) var(--ease);
}
.lead-card:hover .lead-icon{border-color:rgba(0,191,255,.5);}
.lead-card h3{color:#fff;font-size:1.06rem;font-weight:600;}
.lead-card p{color:rgba(255,255,255,.66);font-size:.92rem;margin:0;}

/* ---------- 13. Services ---------- */
.service-card{
  height:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.7rem 1.5rem;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:transform var(--t) var(--ease),
             border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.service-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-hover);
}
.svc-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:11px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--secondary);
  font-size:1.1rem;
  margin-bottom:1rem;
  transition:background var(--t) var(--ease),
             color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.service-card:hover .svc-icon{
  background:var(--primary);border-color:var(--primary);color:#fff;
}
.service-card h3{font-size:1rem;font-weight:600;}
.service-card p{font-size:.885rem;color:var(--muted);flex:1;margin-bottom:1rem;}
.svc-link{
  font-size:.84rem;font-weight:600;color:var(--primary);
  position:relative;align-self:flex-start;
}
.svc-link::after{
  content:"";
  position:absolute;left:0;bottom:-3px;
  width:100%;height:1px;
  background:var(--primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease);
}
.service-card:hover .svc-link::after,
.svc-link:focus-visible::after{transform:scaleX(1);}

/* ---------- 14. Stats band ---------- */
.stats-band{
  position:relative;
  padding:clamp(60px,7vw,88px) 0;
  background:var(--primary);
  overflow:hidden;
}
.stats-band::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(620px 300px at 80% 20%,rgba(0,191,255,.20),transparent 70%);
}
.stats-band .container{position:relative;z-index:1;}
.big-stat .num{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3rem);
  color:#fff;
  line-height:1.05;
  letter-spacing:-.04em;
}
.big-stat p{margin:.45rem 0 0;color:rgba(255,255,255,.62);font-size:.86rem;}

/* ---------- 15. Testimonials ---------- */
.quote-carousel{max-width:760px;margin-inline:auto;padding-bottom:56px;}
.quote-card{margin:0;padding:2.3rem 2.1rem 1.9rem;position:relative;text-align:center;}
.quote-mark{font-size:1.9rem;color:var(--cyan);display:block;margin-bottom:.5rem;opacity:.7;}
.quote-card p{
  font-size:clamp(1rem,1.9vw,1.12rem);
  color:var(--text);
  line-height:1.72;
  margin-bottom:1.6rem;
  max-width:52ch;
  margin-inline:auto;
}
.quote-card footer{display:flex;align-items:center;justify-content:center;gap:.8rem;}
.avatar{
  width:44px;height:44px;
  border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--secondary);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.85rem;
  flex:0 0 auto;
}
.quote-card cite{font-style:normal;text-align:left;}
.quote-card cite strong{
  display:block;font-family:var(--font-display);font-weight:600;
  color:var(--primary);font-size:.92rem;
}
.quote-card cite span{font-size:.8rem;color:var(--muted);}

.quote-carousel .carousel-control-prev,
.quote-carousel .carousel-control-next{
  width:40px;height:40px;
  top:auto;bottom:0;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--muted);
  opacity:1;
  transition:color var(--t) var(--ease),
             border-color var(--t) var(--ease),
             transform var(--t) var(--ease);
}
.quote-carousel .carousel-control-prev{left:calc(50% - 122px);}
.quote-carousel .carousel-control-next{right:calc(50% - 122px);}
.quote-carousel .carousel-control-prev:hover,
.quote-carousel .carousel-control-next:hover{
  color:var(--primary);border-color:var(--primary);transform:translateY(-2px);
}

/* Bootstrap styles indicators with transparent borders and a fixed size,
   so these override it properly instead of fighting it. */
.quote-carousel .carousel-indicators{bottom:14px;margin:0;}
.quote-carousel .carousel-indicators [data-bs-target]{
  box-sizing:content-box;
  width:6px;height:6px;
  border:none;
  border-radius:50%;
  background-color:var(--line-strong);
  opacity:1;
  margin:0 4px;
  text-indent:0;
  transition:width var(--t) var(--ease),background-color var(--t) var(--ease);
}
.quote-carousel .carousel-indicators [data-bs-target].active{
  background-color:var(--secondary);
  width:20px;
  border-radius:3px;
}

/* ---------- 16. Contact ---------- */
.contact-cards{display:grid;gap:.7rem;}
.contact-card{
  display:flex;align-items:center;gap:.95rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.05rem 1.2rem;
  color:var(--text);
  transition:transform var(--t) var(--ease),
             border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.contact-card:hover{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-hover);
  color:var(--text);
}
.cc-icon{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--secondary);
  font-size:1rem;
  flex:0 0 auto;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.contact-card:hover .cc-icon{background:var(--primary);border-color:var(--primary);color:#fff;}
.contact-card strong{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:.89rem;color:var(--primary);
}
.contact-card span{font-size:.84rem;color:var(--muted);word-break:break-word;}

.contact-form{padding:1.9rem 1.8rem;}
.contact-form .form-label{
  font-size:.82rem;font-weight:500;color:var(--muted);margin-bottom:.35rem;
}
.contact-form .form-control{
  border:1px solid var(--line);
  border-radius:10px;
  padding:.7rem .9rem;
  font-size:.93rem;
  background:var(--surface-2);
  color:var(--text);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.contact-form .form-control:hover{border-color:var(--line-strong);}
.contact-form .form-control:focus{
  border-color:var(--secondary);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,87,192,.10);
  outline:none;
}
.contact-form .form-control.invalid{border-color:#DC2626;}
.err{font-size:.77rem;color:#DC2626;min-height:1.05rem;margin-top:.2rem;}
.form-note{margin:.9rem 0 0;font-size:.86rem;font-weight:500;color:var(--secondary);}
.form-note.error{color:#DC2626;}

/* ---------- 17. Footer ---------- */
.site-footer{
  background:var(--dark);
  color:rgba(255,255,255,.6);
  padding:clamp(56px,6vw,80px) 0 26px;
}
.foot-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;}
.foot-brand img{width:46px;height:46px;object-fit:contain;}
.foot-brand strong{
  display:block;font-family:var(--font-display);font-weight:600;
  color:#fff;font-size:.94rem;line-height:1.35;
}
.foot-brand span{font-size:.8rem;color:rgba(255,255,255,.5);}
.foot-blurb{font-size:.88rem;max-width:34ch;}

.site-footer h4{color:#fff;font-size:.88rem;font-weight:600;margin-bottom:1rem;}
.foot-list{list-style:none;padding:0;margin:0;}
.foot-list li{margin-bottom:.5rem;}
.foot-list a{
  color:rgba(255,255,255,.6);
  font-size:.88rem;
  transition:color var(--t) var(--ease),padding-left var(--t) var(--ease);
}
.foot-list a:hover{color:#fff;padding-left:4px;}

.foot-social{margin-top:1.3rem;}
.foot-social a{
  background:transparent;
  border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.7);
  width:38px;height:38px;font-size:.92rem;
}
.foot-social a:hover{color:#fff;border-color:rgba(255,255,255,.45);}

.foot-bottom{
  margin-top:2.8rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between;
}
.foot-bottom p{margin:0;font-size:.8rem;color:rgba(255,255,255,.4);}

/* Back to top */
.to-top{
  position:fixed;right:20px;bottom:22px;
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--primary);
  font-size:.95rem;
  display:grid;place-items:center;
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--t) var(--ease),
             transform var(--t) var(--ease),
             border-color var(--t) var(--ease),
             visibility var(--t);
  z-index:1050;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.to-top:hover{transform:translateY(-3px);border-color:var(--primary);}

/* ---------- 18. Scroll reveal ---------- */
.reveal,.reveal-right{
  opacity:0;
  transition:opacity .6s var(--ease),transform .7s var(--ease);
  will-change:opacity,transform;
}
.reveal{transform:translateY(16px);}
.reveal-right{transform:translateY(20px);}
.reveal.visible,.reveal-right.visible{opacity:1;transform:none;}
.reveal[data-delay="1"]{transition-delay:.06s;}
.reveal[data-delay="2"]{transition-delay:.12s;}
.reveal[data-delay="3"]{transition-delay:.18s;}
.reveal[data-delay="4"]{transition-delay:.24s;}
.reveal[data-delay="5"]{transition-delay:.30s;}
.reveal[data-delay="6"]{transition-delay:.36s;}

/* ---------- 19. Responsive ---------- */
@media (hover:none){
  /* Touch screens get the hover state at rest, not on tap. */
  .thumb-cta{opacity:1;transform:none;}
}

@media (max-width:1199.98px){
  .float-card-top{left:-3%;}
  .float-card-bottom{right:-3%;}
}

@media (max-width:991.98px){
  :root{--nav-h:68px;}

  .stack-grid{grid-template-columns:repeat(4,1fr);}

  .site-nav{
    background:rgba(255,255,255,.88);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    border-bottom-color:var(--line);
  }
  .navbar-collapse{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:.9rem 1rem 1.2rem;
    margin-top:.7rem;
    box-shadow:var(--shadow-hover);
  }
  .nav-links .nav-link{padding:.6rem .3rem;font-size:.98rem;}
  .nav-links .nav-link::after{left:auto;right:.3rem;bottom:auto;top:50%;margin-top:-2px;margin-left:0;}
  .nav-cta{margin:.9rem 0 0;width:100%;justify-content:center;}

  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 44px);text-align:center;}
  .hero-copy{margin-bottom:3rem;}
  .hero-lead{margin-inline:auto;}
  .hero-actions,.social-row{justify-content:center;}
  .scroll-hint{display:none;}
  .portrait-stage{max-width:340px;}

  .section-head{margin-inline:auto;text-align:center;}
  .section-sub{margin-inline:auto;}
  .about-photo{max-width:400px;margin-inline:auto;}
  .role-list{text-align:left;}
  .about-copy p{margin-inline:auto;}
  .logo-stage{margin-bottom:1.4rem;}
  .chip-list{justify-content:center;}
  .ribaad-lead{margin-inline:auto;}
  .ribaad-band .col-lg-7{text-align:center;}
  .timeline{margin-inline:auto;}
  .tl-item:hover .tl-card{transform:translateY(-3px);}
}

@media (max-width:767.98px){
  body{font-size:15.5px;}
  /* narrower gutters so wide rows never push past the screen edge */
  .row.g-5{--bs-gutter-x:1.5rem;}
  .hero-actions .btn{width:100%;justify-content:center;}
  .float-card{max-width:180px;padding:.5rem .7rem;}
  .float-card small{display:none;}
  .float-card-top{left:-6px;top:2%;}
  .float-card-bottom{right:-6px;bottom:3%;}
  .quote-card{padding:1.9rem 1.25rem 1.6rem;}
  .quote-card footer{flex-direction:column;text-align:center;gap:.55rem;}
  .quote-card cite{text-align:center;}
  .quote-carousel .carousel-control-prev{left:calc(50% - 96px);}
  .quote-carousel .carousel-control-next{right:calc(50% - 96px);}
  .contact-form{padding:1.5rem 1.2rem;}
  .foot-bottom{justify-content:center;text-align:center;}
  .about-stats{padding-top:1.8rem;}
}

@media (max-width:575.98px){
  .brand-text{font-size:.9rem;}
  .timeline{padding-left:24px;}
  .tl-dot{left:-24px;}
  .tl-card{padding:1.2rem 1.15rem;}
  .stack-grid{grid-template-columns:repeat(3,1fr);gap:.55rem;}
  .stack-item{padding:1.1rem .5rem;}
  .stack-item i{font-size:1.55rem;}
  .portrait-stage{padding:14px;}
  .portrait-ring{inset:14px;transform:translate(10px,10px);}
  .blob{filter:blur(80px);}
}

@media (max-width:359.98px){
  .float-card{display:none;}
  .social-row a{width:38px;height:38px;}
}

@media (min-width:1600px){
  .container{max-width:1320px;}
}

/* ---------- 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;
  }
  .reveal,.reveal-right{opacity:1;transform:none;}
  .hero-particles{display:none;}
}

@media print{
  .site-nav,.to-top,.scroll-progress,.hero-particles,.scroll-hint{display:none!important;}
  body{background:#fff;}
}

/* ==========================================================================
   20. Polish layer — Font Awesome icons, richer hovers, form interactions
   Appended after the base rules so these win where they overlap.
   ========================================================================== */

/* ---------- Icon sizing (Font Awesome renders slightly smaller than BI) ---------- */
.exp-icon i,.svc-icon i,.lead-icon i,.cc-icon i{
  transition:transform .45s var(--ease);
}

/* ---------- Buttons: label holds still, icon slides ---------- */
.btn-brand,.btn-ghost{gap:.55rem;}
.btn-label{position:relative;}
.btn-icon{
  font-size:.82em;
  transform:translateX(-3px);
  opacity:.75;
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.btn-brand:hover .btn-icon,
.btn-brand:focus-visible .btn-icon,
.btn-ghost:hover .btn-icon,
.btn-ghost:focus-visible .btn-icon{
  transform:translateX(2px);
  opacity:1;
}
.nav-cta .btn-icon{font-size:.76em;}

/* ---------- Cursor spotlight on cards ----------
   JS writes --mx / --my as percentages. The highlight sits under the content
   and only appears while the pointer is over the card. */
.exp-card,.service-card,.project-card,.tl-card,.contact-card,.stack-item,.lead-card{
  position:relative;
  overflow:hidden;
}
.exp-card::before,
.service-card::before,
.tl-card::before,
.contact-card::before,
.stack-item::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
             rgba(37,99,235,.09),transparent 62%);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.exp-card:hover::before,
.service-card:hover::before,
.tl-item:hover .tl-card::before,
.contact-card:hover::before,
.stack-item:hover::before{opacity:1;}

.lead-card::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
             rgba(0,191,255,.16),transparent 60%);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.lead-card:hover::before{opacity:1;}

/* keep card content above the highlight */
.exp-icon,.svc-icon,.lead-icon,.cc-icon,
.exp-card h3,.exp-card p,
.service-card h3,.service-card p,.svc-link,
.tl-card > *,.contact-card > *,
.stack-item i,.stack-item span,
.lead-card h3,.lead-card p{position:relative;z-index:1;}

/* ---------- Icon micro-motion, one move per card type ---------- */
.exp-card:hover .exp-icon i{transform:translateY(-2px) scale(1.06);}
.service-card:hover .svc-icon i{transform:rotate(-8deg) scale(1.06);}
.contact-card:hover .cc-icon i{transform:scale(1.1);}
.lead-card:hover .lead-icon i{transform:scale(1.08);}

/* ---------- Service link arrow ---------- */
.svc-link i{
  font-size:.78em;
  margin-left:.15rem;
  display:inline-block;
  transform:translateX(-2px);
  transition:transform .4s var(--ease);
}
.service-card:hover .svc-link i{transform:translateX(3px);}

/* ---------- Project thumbnail button ---------- */
.thumb-cta{display:inline-flex;align-items:center;gap:.4rem;}
.thumb-cta i{
  font-size:.75em;
  transform:translateX(-2px);
  transition:transform .4s var(--ease);
}
.project-card:hover .thumb-cta i{transform:translateX(2px);}

/* ---------- Social buttons: icon lifts, ring draws ---------- */
.social-row a{position:relative;overflow:hidden;}
.social-row a i{transition:transform .4s var(--ease);}
.social-row a:hover i{transform:translateY(-2px) scale(1.08);}

/* ---------- Stack tiles ---------- */
.stack-item i{font-size:1.65rem;}

/* ---------- Quote mark ---------- */
.quote-mark{font-size:1.5rem;}

/* ---------- Form: floating labels, inline icons, live state ---------- */
.contact-form .field{position:relative;}

.contact-form .field-icon{
  position:absolute;
  left:.95rem;
  top:1.02rem;
  font-size:.88rem;
  color:var(--muted);
  pointer-events:none;
  transition:color .3s var(--ease);
  z-index:1;
}
.contact-form .field-area .field-icon{top:1.05rem;}

.contact-form .form-control{
  padding:1.35rem .95rem .55rem 2.6rem;   /* room for label above and icon at left */
  min-height:3.35rem;
}
.contact-form textarea.form-control{
  padding-top:1.6rem;
  min-height:9rem;
  resize:vertical;
}

/* the label sits inside the field and rises when the field is used */
.contact-form .field label{
  position:absolute;
  left:2.6rem;
  top:.95rem;
  margin:0;
  font-size:.93rem;
  font-weight:400;
  color:var(--muted);
  pointer-events:none;
  transform-origin:left top;
  transition:transform .28s var(--ease),color .28s var(--ease);
}
.contact-form .field .form-control:focus ~ label,
.contact-form .field .form-control:not(:placeholder-shown) ~ label{
  transform:translateY(-.72rem) scale(.78);
  color:var(--secondary);
}
.contact-form .field .form-control:focus ~ .field-icon,
.contact-form .field:focus-within .field-icon{color:var(--secondary);}

/* green tick once a field passes */
.contact-form .field-tick{
  position:absolute;
  right:.95rem;
  top:1.05rem;
  font-size:.9rem;
  color:#16A34A;
  opacity:0;
  transform:scale(.6);
  transition:opacity .3s var(--ease),transform .35s var(--ease);
  pointer-events:none;
}
.contact-form .field.ok .field-tick{opacity:1;transform:scale(1);}
.contact-form .field.ok .form-control{border-color:rgba(22,163,74,.45);}
.contact-form .field.bad .form-control{border-color:#DC2626;}
.contact-form .field.bad .field-icon{color:#DC2626;}

/* shake once when a field is submitted empty or wrong */
.contact-form .field.shake{animation:shake .4s var(--ease);}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  50%{transform:translateX(4px);}
  75%{transform:translateX(-2px);}
}

.field-foot{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.counter{
  font-size:.75rem;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  padding-top:.2rem;
  transition:color .3s var(--ease);
}
.counter.near{color:#B45309;}

.err{display:block;}

.form-foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.form-note{margin:0;}
.form-note.ok{color:#16A34A;}

/* submit button states */
#sendBtn .btn-spin{display:none;font-size:.85em;}
#sendBtn.sending{pointer-events:none;}
#sendBtn.sending .btn-icon{display:none;}
#sendBtn.sending .btn-spin{display:inline-block;animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#sendBtn.sent{background:#16A34A;box-shadow:0 6px 16px rgba(22,163,74,.28);}
#sendBtn.sent::before{opacity:0;}

/* ---------- Mobile spacing for the taller fields ---------- */
@media (max-width:575.98px){
  .contact-form .form-control{padding-left:2.4rem;}
  .contact-form .field label,
  .contact-form .field-icon{left:.85rem;}
  .contact-form .field label{left:2.4rem;}
  .field-foot{flex-direction:column;gap:.15rem;}
  .counter{align-self:flex-end;}
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  .exp-card::before,.service-card::before,.tl-card::before,
  .contact-card::before,.stack-item::before,.lead-card::before{display:none;}
  #sendBtn.sending .btn-spin{animation:none;}
  .contact-form .field.shake{animation:none;}
}