/* ==========================================================================
   Zomorod Al Sahra Technical Services LLC — Premium Site Stylesheet
   ========================================================================== */

:root {
  /* Brand */
  --emerald-950:  #0a2a20;
  --emerald-900:  #0f3d2d;
  --emerald-800:  #124a37;
  --emerald:      #145c43;
  --emerald-mid:  #1a6e52;
  --emerald-light:#27a070;
  --emerald-brt:  #34c187;
  --emerald-pale: #eaf5f0;
  --emerald-mist: #f2f9f5;

  --gold:         #b8820a;
  --gold-light:   #d4991e;
  --gold-pale:    #f7ecd3;

  --sand:         #fdf8f2;
  --white:        #ffffff;

  --dark:         #0d1f18;
  --text:         #16241d;
  --text-mid:     #48604f;
  --text-muted:   #78927e;
  --border:       #dfeee6;
  --bg:           #f5faf7;

  /* Glass — light surfaces */
  --glass-bg:        rgba(255,255,255,0.62);
  --glass-bg-strong: rgba(255,255,255,0.82);
  --glass-border:    rgba(255,255,255,0.55);
  --glass-shadow:    0 8px 40px rgba(15,61,45,0.10), 0 2px 8px rgba(15,61,45,0.05);

  /* Glass — dark surfaces (hero / process / footer) */
  --glass-dark-bg:     rgba(255,255,255,0.07);
  --glass-dark-border: rgba(255,255,255,0.16);
  --glass-dark-shadow: 0 8px 40px rgba(0,0,0,0.35);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body {
  font-family:'DM Sans', system-ui, sans-serif;
  background:var(--white); color:var(--text);
  overflow-x:hidden; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; }
button { font-family:inherit; }
ul { list-style:none; }

::selection { background:var(--emerald-brt); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--emerald-mid); border-radius:10px; border:2px solid var(--bg); }

/* ── UTILITIES ── */
.container { max-width:1360px; margin:0 auto; padding:0 6%; }
.eyebrow {
  display:inline-flex; align-items:center; gap:9px; color:var(--emerald);
  font-size:12.5px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; margin-bottom:18px;
}
.eyebrow::before { content:''; width:30px; height:2px; background:linear-gradient(90deg,var(--gold-light),var(--emerald)); border-radius:2px; }
.eyebrow.on-dark { color:rgba(255,255,255,0.85); }
.eyebrow.on-dark::before { background:linear-gradient(90deg,var(--gold-light),rgba(255,255,255,0.6)); }
.eyebrow.center { justify-content:center; }

h1,h2,h3,h4 { font-family:'Playfair Display', serif; color:var(--dark); }
.h-display { font-size:clamp(36px,4.8vw,62px); line-height:1.1; letter-spacing:-0.5px; }
.h-section { font-size:clamp(28px,3.4vw,46px); line-height:1.16; letter-spacing:-0.3px; margin-bottom:20px; }
.h-section em, .h-display em { font-style:normal; color:var(--emerald); position:relative; }
.section-sub { color:var(--text-mid); font-size:16.5px; line-height:1.8; max-width:580px; }
.divider { width:64px; height:3px; background:linear-gradient(90deg,var(--emerald),var(--gold-light)); border-radius:3px; margin:22px 0 30px; }
.divider.center { margin-left:auto; margin-right:auto; }

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

section { padding:120px 0; position:relative; }
@media (max-width:960px){ section { padding:80px 0; } }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:12px; font-weight:600; font-size:15px;
  text-decoration:none; border:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  letter-spacing:0.1px;
}
.btn svg { width:18px; height:18px; flex-shrink:0; }
.btn-primary { background:linear-gradient(135deg,var(--emerald-mid),var(--emerald)); color:#fff; box-shadow:0 10px 30px rgba(20,92,67,0.32), inset 0 1px 0 rgba(255,255,255,0.15); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(20,92,67,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }
.btn-primary:active { transform:translateY(-1px); }
.btn-gold { background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#fff; box-shadow:0 10px 30px rgba(184,130,10,0.32); }
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(184,130,10,0.4); }
.btn-glass { background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1.5px solid var(--glass-border); color:var(--text); box-shadow:var(--glass-shadow); }
.btn-glass:hover { transform:translateY(-3px); border-color:var(--emerald-mid); color:var(--emerald); }
.btn-glass-dark { background:var(--glass-dark-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1.5px solid var(--glass-dark-border); color:#fff; }
.btn-glass-dark:hover { transform:translateY(-3px); background:rgba(255,255,255,0.14); }
.btn-outline { border:1.5px solid var(--border); color:var(--text); background:var(--white); }
.btn-outline:hover { border-color:var(--emerald); color:var(--emerald); transform:translateY(-2px); }
.btn-wa { background:linear-gradient(135deg,#2fd873,#1fa855); color:#fff; box-shadow:0 10px 30px rgba(37,211,102,0.35); }
.btn-wa:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(37,211,102,0.45); }
.btn-block { width:100%; }
.btn-lg { padding:18px 36px; font-size:16px; }
.btn-sm { padding:11px 20px; font-size:13.5px; border-radius:10px; }

/* Glass card base */
.glass {
  background:var(--glass-bg); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-border); border-radius:var(--radius-lg); box-shadow:var(--glass-shadow);
}
.glass-dark {
  background:var(--glass-dark-bg); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-dark-border); border-radius:var(--radius-lg); box-shadow:var(--glass-dark-shadow);
}

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity:1; transform:none; }
.reveal-scale { opacity:0; transform:scale(0.94); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-scale.visible { opacity:1; transform:none; }
.reveal-left { opacity:0; transform:translateX(-36px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-left.visible { opacity:1; transform:none; }
.reveal-right { opacity:0; transform:translateX(36px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-right.visible { opacity:1; transform:none; }
.stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ==========================================================================
   TOP UTILITY BAR
   ========================================================================== */
.topbar {
  background:linear-gradient(90deg,var(--emerald-950),var(--emerald-900));
  color:rgba(255,255,255,0.9); font-size:13px;
}
.topbar-inner { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:9px 0; }
.topbar a { text-decoration:none; color:rgba(255,255,255,0.9); display:inline-flex; align-items:center; gap:7px; transition:color .2s; }
.topbar a:hover { color:var(--gold-light); }
.topbar svg { width:14px; height:14px; opacity:.85; flex-shrink:0; }
.topbar-left, .topbar-right { display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.topbar-badge { display:flex; align-items:center; gap:6px; color:rgba(255,255,255,0.65); }
@media (max-width:860px){ .topbar-left { display:none; } .topbar-inner{ justify-content:center; } }

/* ==========================================================================
   NAV
   ========================================================================== */
nav.site-nav {
  position:sticky; top:0; z-index:200; width:100%;
  background:rgba(255,255,255,0.78); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s, background .3s;
}
nav.site-nav.scrolled { box-shadow:0 8px 30px rgba(15,61,45,0.09); background:rgba(255,255,255,0.92); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:84px; }
.logo { display:flex; align-items:center; gap:13px; text-decoration:none; }
.logo-icon { width:46px; height:46px; flex-shrink:0; }
.logo-text { line-height:1.25; }
.logo-text strong { display:block; font-family:'Playfair Display',serif; font-size:16.5px; color:var(--emerald); font-weight:700; }
.logo-text span { font-size:10.5px; color:var(--text-muted); letter-spacing:1.3px; text-transform:uppercase; }

.nav-links { display:flex; gap:6px; align-items:center; }
.nav-links a { text-decoration:none; color:var(--text-mid); font-size:14px; font-weight:600; padding:10px 16px; border-radius:9px; transition:color .2s, background .2s; }
.nav-links a:hover { color:var(--emerald); background:var(--emerald-pale); }
.nav-cta-group { display:flex; align-items:center; gap:10px; }
.nav-call { display:flex; align-items:center; gap:9px; color:var(--emerald); text-decoration:none; font-weight:700; font-size:14.5px; }
.nav-call svg { width:18px; height:18px; }

.nav-burger { display:none; width:44px; height:44px; border-radius:10px; border:1.5px solid var(--border); background:var(--white); align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.nav-burger svg { width:20px; height:20px; color:var(--emerald); }

@media (max-width:980px) {
  .nav-links, .nav-call { display:none; }
  .nav-burger { display:flex; }
}

/* Mobile menu drawer */
.mobile-menu {
  position:fixed; inset:0; z-index:300; display:none;
}
.mobile-menu.open { display:block; }
.mobile-menu-backdrop { position:absolute; inset:0; background:rgba(10,25,20,0.55); backdrop-filter:blur(4px); }
.mobile-menu-panel {
  position:absolute; top:0; right:0; height:100%; width:min(340px,86%);
  background:rgba(253,248,242,0.96); backdrop-filter:blur(20px);
  padding:28px 26px; display:flex; flex-direction:column; gap:6px;
  box-shadow:-16px 0 50px rgba(0,0,0,0.25);
  transform:translateX(100%); transition:transform .35s var(--ease);
}
.mobile-menu.open .mobile-menu-panel { transform:translateX(0); }
.mobile-menu-close { align-self:flex-end; width:40px; height:40px; border-radius:10px; border:1.5px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.mobile-menu-panel a.m-link { padding:14px 6px; font-size:16px; font-weight:600; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); }
.mobile-menu-panel .btn { margin-top:18px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position:relative; min-height:92vh; display:flex; align-items:center;
  padding:150px 0 90px; overflow:hidden; isolation:isolate;
}
.hero-bg {
  position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 65%;
  will-change:transform;
}
.hero-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay {
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,26,20,0.88) 0%, rgba(10,30,22,0.82) 40%, rgba(11,31,24,0.94) 100%),
    linear-gradient(100deg, rgba(10,42,32,0.55) 0%, transparent 55%);
}
.hero-noise { position:absolute; inset:0; z-index:-1; opacity:0.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero-inner { display:grid; grid-template-columns:1.15fr 0.85fr; gap:70px; align-items:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:9px; background:var(--glass-dark-bg); backdrop-filter:blur(14px);
  border:1px solid var(--glass-dark-border); color:#fff; padding:8px 18px 8px 8px; border-radius:100px; font-size:13px; font-weight:600; margin-bottom:26px;
}
.hero-badge .dot { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--gold-light),var(--gold)); display:flex; align-items:center; justify-content:center; }
.hero-badge svg { width:14px; height:14px; color:#fff; }
.hero h1 { color:#fff; font-size:clamp(36px,5vw,60px); line-height:1.12; margin-bottom:24px; letter-spacing:-0.5px; }
.hero h1 em { font-style:normal; background:linear-gradient(120deg,var(--gold-light),#f0cf7a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { color:rgba(255,255,255,0.78); font-size:17px; line-height:1.8; max-width:540px; margin-bottom:38px; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.hero-trust { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero-trust-item { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,0.75); font-weight:500; }
.hero-trust-item svg { width:17px; height:17px; color:var(--emerald-brt); flex-shrink:0; }
.hero-trust-sep { width:1px; height:18px; background:rgba(255,255,255,0.2); }

.hero-visual { display:flex; flex-direction:column; gap:18px; }
.hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hero-stat-card {
  padding:26px 22px; text-align:left; transition:transform .35s var(--ease), background .3s;
  animation: floaty 6s ease-in-out infinite;
}
.hero-stat-card:nth-child(2){ animation-delay:.4s; }
.hero-stat-card:nth-child(3){ animation-delay:.8s; }
.hero-stat-card:nth-child(4){ animation-delay:1.2s; }
.hero-stat-card:hover { transform:translateY(-6px); background:rgba(255,255,255,0.12); }
.hero-stat-num { font-family:'Playfair Display',serif; font-size:38px; color:#fff; line-height:1; margin-bottom:6px; display:flex; align-items:baseline; gap:2px; }
.hero-stat-num .suffix { font-size:22px; color:var(--gold-light); }
.hero-stat-label { font-size:12px; color:rgba(255,255,255,0.62); text-transform:uppercase; letter-spacing:1.2px; font-weight:600; }
@keyframes floaty { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }

.hero-emergency-strip {
  display:flex; align-items:center; gap:14px; padding:16px 20px; margin-top:2px;
}
.hero-emergency-strip .pulse-dot { width:10px; height:10px; border-radius:50%; background:#ff5a5a; box-shadow:0 0 0 rgba(255,90,90,0.5); animation:pulse-red 2s infinite; flex-shrink:0; }
@keyframes pulse-red { 0%{ box-shadow:0 0 0 0 rgba(255,90,90,0.55);} 70%{ box-shadow:0 0 0 10px rgba(255,90,90,0);} 100%{ box-shadow:0 0 0 0 rgba(255,90,90,0);} }
.hero-emergency-strip p { color:rgba(255,255,255,0.85); font-size:13.5px; }
.hero-emergency-strip strong { color:#fff; }

.scroll-cue { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,0.55); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; z-index:2; }
.scroll-cue .line { width:1.5px; height:34px; background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent); animation:scroll-cue 1.8s ease-in-out infinite; }
@keyframes scroll-cue { 0%{ opacity:0; transform:scaleY(0.3); transform-origin:top; } 40%{ opacity:1; transform:scaleY(1); transform-origin:top; } 100%{ opacity:0; transform:scaleY(1); transform-origin:bottom; } }

@media (max-width:980px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero { padding-top:130px; min-height:auto; }
  .hero-stats { grid-template-columns:1fr 1fr; }
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust-strip { background:var(--white); border-bottom:1px solid var(--border); padding:0; }
.trust-strip-inner { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item { display:flex; align-items:center; gap:16px; padding:34px 26px; border-right:1px solid var(--border); transition:background .25s; }
.trust-item:last-child { border-right:none; }
.trust-item:hover { background:var(--emerald-mist); }
.trust-item-icon { width:50px; height:50px; border-radius:14px; background:var(--emerald-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.trust-item-icon svg { width:24px; height:24px; color:var(--emerald); }
.trust-item h4 { font-family:'DM Sans',sans-serif; font-size:14.5px; font-weight:700; color:var(--dark); margin-bottom:2px; }
.trust-item p { font-size:12.5px; color:var(--text-muted); }
@media (max-width:900px){ .trust-strip-inner { grid-template-columns:1fr 1fr; } .trust-item { border-bottom:1px solid var(--border); } .trust-item:nth-child(2){ border-right:none; } }
@media (max-width:560px){ .trust-strip-inner { grid-template-columns:1fr; } .trust-item { border-right:none; } }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about { background:var(--white); }
.about-inner { display:grid; grid-template-columns:0.95fr 1.05fr; gap:70px; align-items:center; }
.about-visual { position:relative; }
.about-img-wrap { border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 30px 70px rgba(15,61,45,0.22); aspect-ratio:4/4.6; }
.about-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.about-visual:hover .about-img-wrap img { transform:scale(1.05); }
.about-float-card {
  position:absolute; bottom:-28px; left:-28px; padding:22px 26px; display:flex; align-items:center; gap:16px; max-width:250px;
}
.about-float-card .icon-badge { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,var(--gold-light),var(--gold)); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 10px 24px rgba(184,130,10,0.35); }
.about-float-card .icon-badge svg { width:24px; height:24px; color:#fff; }
.about-float-card strong { display:block; font-family:'Playfair Display',serif; font-size:20px; color:var(--dark); }
.about-float-card span { font-size:12px; color:var(--text-muted); }
.about-badge-top { position:absolute; top:-22px; right:-18px; background:var(--emerald); color:#fff; border-radius:16px; padding:16px 20px; text-align:center; box-shadow:0 20px 45px rgba(20,92,67,0.35); }
.about-badge-top strong { display:block; font-family:'Playfair Display',serif; font-size:26px; }
.about-badge-top span { font-size:10.5px; opacity:.85; text-transform:uppercase; letter-spacing:1px; }

.about-content p.body { color:var(--text-mid); font-size:16px; line-height:1.85; margin-bottom:18px; }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; padding-top:32px; border-top:1px solid var(--border); }
.about-stat strong { display:block; font-family:'Playfair Display',serif; font-size:30px; color:var(--emerald); }
.about-stat span { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; }

@media (max-width:980px) {
  .about-inner { grid-template-columns:1fr; gap:60px; }
  .about-visual { max-width:420px; margin:0 auto; }
  .about-float-card, .about-badge-top { display:none; }
}
@media (max-width:560px){ .about-stats { grid-template-columns:1fr; gap:14px; } }

/* ==========================================================================
   WHY US
   ========================================================================== */
.why { background:var(--bg); }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.why-card { padding:34px 28px; background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-lg); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; position:relative; overflow:hidden; }
.why-card::after { content:''; position:absolute; inset:0; border-radius:var(--radius-lg); padding:1.5px; background:linear-gradient(135deg,var(--emerald-brt),var(--gold-light)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s; }
.why-card:hover { transform:translateY(-8px); box-shadow:0 22px 50px rgba(15,61,45,0.14); }
.why-card:hover::after { opacity:1; }
.why-icon { width:54px; height:54px; border-radius:14px; background:var(--emerald-pale); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.why-icon svg { width:26px; height:26px; color:var(--emerald); }
.why-card h3 { font-size:17.5px; margin-bottom:10px; }
.why-card p { color:var(--text-mid); font-size:13.5px; line-height:1.7; }
@media (max-width:980px){ .why-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .why-grid { grid-template-columns:1fr; } }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services { background:var(--white); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.service-card {
  padding:38px 32px; background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; position:relative; overflow:hidden;
}
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--emerald),var(--gold-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.service-card:hover { transform:translateY(-8px); box-shadow:0 26px 56px rgba(15,61,45,0.15); border-color:transparent; }
.service-card:hover::before { transform:scaleX(1); }
.service-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; }
.service-icon { width:58px; height:58px; border-radius:16px; background:linear-gradient(135deg,var(--emerald-pale),#dcf0e6); display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease), background .35s; }
.service-icon svg { width:27px; height:27px; color:var(--emerald); }
.service-card:hover .service-icon { transform:scale(1.08) rotate(-4deg); background:linear-gradient(135deg,var(--emerald),var(--emerald-mid)); }
.service-card:hover .service-icon svg { color:#fff; }
.service-tag { font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gold); background:var(--gold-pale); padding:5px 10px; border-radius:100px; }
.service-card h3 { font-size:19px; margin-bottom:11px; }
.service-card p { color:var(--text-mid); font-size:14px; line-height:1.75; margin-bottom:18px; }
.service-link { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--emerald); text-decoration:none; }
.service-link svg { width:15px; height:15px; transition:transform .25s; }
.service-card:hover .service-link svg { transform:translateX(4px); }

@media (max-width:980px){ .services-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .services-grid { grid-template-columns:1fr; } }

/* ==========================================================================
   INDUSTRIES
   ========================================================================== */
.industries { background:var(--emerald-mist); }
.industries-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.industry-chip {
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:30px 16px;
  background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-md);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.industry-chip:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(15,61,45,0.12); }
.industry-chip .ind-icon { width:48px; height:48px; border-radius:50%; background:var(--emerald-pale); display:flex; align-items:center; justify-content:center; }
.industry-chip .ind-icon svg { width:22px; height:22px; color:var(--emerald); }
.industry-chip span { font-size:13px; font-weight:600; color:var(--dark); }
@media (max-width:980px){ .industries-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .industries-grid { grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.portfolio { background:var(--white); }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.portfolio-item { position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.1; box-shadow:0 14px 34px rgba(15,61,45,0.1); }
.portfolio-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.portfolio-item:hover img { transform:scale(1.08); }
.portfolio-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(9,26,20,0.88) 0%, rgba(9,26,20,0.15) 55%, transparent 80%); display:flex; align-items:flex-end; padding:24px; }
.portfolio-caption .cat { font-size:11px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--gold-light); margin-bottom:6px; display:block; }
.portfolio-caption h4 { color:#fff; font-family:'Playfair Display',serif; font-size:19px; }
.portfolio-caption p { color:rgba(255,255,255,0.7); font-size:12.5px; margin-top:4px; }
@media (max-width:980px){ .portfolio-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .portfolio-grid { grid-template-columns:1fr; } }

/* ==========================================================================
   BEFORE / AFTER
   ========================================================================== */
.before-after { background:var(--bg); }
.ba-note { display:flex; align-items:center; gap:10px; color:var(--text-muted); font-size:12.5px; margin-top:18px; }
.ba-note svg { width:15px; height:15px; flex-shrink:0; color:var(--gold); }
.ba-slider {
  position:relative; max-width:920px; margin:0 auto; aspect-ratio:16/8.4; border-radius:var(--radius-xl);
  overflow:hidden; box-shadow:0 30px 70px rgba(15,61,45,0.2); cursor:ew-resize; user-select:none;
}
.ba-slider img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba-after { clip-path:inset(0 0 0 50%); }
.ba-label { position:absolute; top:20px; padding:7px 16px; border-radius:100px; font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; background:rgba(9,26,20,0.65); color:#fff; backdrop-filter:blur(6px); }
.ba-label.before { left:20px; }
.ba-label.after { right:20px; }
.ba-handle { position:absolute; top:0; bottom:0; left:50%; width:0; transform:translateX(-50%); }
.ba-handle-line { position:absolute; top:0; bottom:0; left:0; width:3px; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.25); transform:translateX(-50%); }
.ba-handle-btn { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.3); gap:2px; }
.ba-handle-btn svg { width:14px; height:14px; color:var(--emerald); }

/* ==========================================================================
   AMC
   ========================================================================== */
.amc { background:var(--dark); position:relative; overflow:hidden; }
.amc::before { content:''; position:absolute; top:-200px; right:-150px; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(39,160,112,0.18),transparent 70%); }
.amc::after { content:''; position:absolute; bottom:-200px; left:-150px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(212,153,30,0.12),transparent 70%); }
.amc .eyebrow, .amc h2, .amc .section-sub { color:#fff; position:relative; }
.amc .eyebrow { color:rgba(255,255,255,0.85); }
.amc .section-sub { color:rgba(255,255,255,0.65); }
.amc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
.amc-card { padding:38px 32px; display:flex; flex-direction:column; transition:transform .3s var(--ease); }
.amc-card.featured { background:linear-gradient(160deg, rgba(39,160,112,0.18), rgba(212,153,30,0.08)); border-color:rgba(212,153,30,0.35); transform:scale(1.02); }
.amc-card:hover { transform:translateY(-8px); }
.amc-card.featured:hover { transform:scale(1.02) translateY(-8px); }
.amc-plan-badge { align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--dark); background:var(--gold-light); padding:5px 12px; border-radius:100px; margin-bottom:18px; }
.amc-card h3 { color:#fff; font-size:23px; margin-bottom:8px; }
.amc-card .amc-desc { color:rgba(255,255,255,0.55); font-size:13.5px; margin-bottom:24px; }
.amc-card ul { display:flex; flex-direction:column; gap:13px; margin-bottom:28px; flex:1; }
.amc-card li { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:rgba(255,255,255,0.82); }
.amc-card li svg { width:16px; height:16px; color:var(--emerald-brt); flex-shrink:0; margin-top:2px; }
@media (max-width:980px){ .amc-grid { grid-template-columns:1fr; } .amc-card.featured { transform:none; } .amc-card.featured:hover{ transform:translateY(-8px);} }

/* ==========================================================================
   EMERGENCY CTA BANNER
   ========================================================================== */
.emergency-banner { padding:0; }
.emergency-inner {
  border-radius:var(--radius-xl); padding:52px 56px; background:linear-gradient(120deg,#b3231f,#8a1a17);
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; position:relative; overflow:hidden;
  box-shadow:0 30px 70px rgba(179,35,31,0.3);
}
.emergency-inner::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% 30%, rgba(255,255,255,0.12), transparent 60%); }
.emergency-left { display:flex; align-items:center; gap:20px; position:relative; }
.emergency-icon { width:60px; height:60px; border-radius:16px; background:rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; animation:pulse-ring 2s infinite; }
.emergency-icon svg { width:28px; height:28px; color:#fff; }
@keyframes pulse-ring { 0%{ box-shadow:0 0 0 0 rgba(255,255,255,0.3);} 70%{ box-shadow:0 0 0 16px rgba(255,255,255,0);} 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0);} }
.emergency-left h3 { color:#fff; font-size:24px; margin-bottom:6px; }
.emergency-left p { color:rgba(255,255,255,0.8); font-size:14px; }
.emergency-right { display:flex; gap:14px; position:relative; flex-wrap:wrap; }
.btn-white { background:#fff; color:#8a1a17; box-shadow:0 10px 26px rgba(0,0,0,0.2); }
.btn-white:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,0.28); }
@media (max-width:760px){ .emergency-inner { padding:38px 26px; flex-direction:column; text-align:center; } .emergency-left { flex-direction:column; } }

/* ==========================================================================
   SERVICE AREAS
   ========================================================================== */
.areas { background:var(--white); }
.areas-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.area-pill { display:flex; align-items:center; gap:9px; padding:14px 16px; background:var(--emerald-mist); border:1px solid var(--border); border-radius:12px; font-size:13.5px; font-weight:600; color:var(--text); transition:background .25s, transform .25s; }
.area-pill:hover { background:var(--emerald-pale); transform:translateY(-3px); }
.area-pill svg { width:15px; height:15px; color:var(--emerald); flex-shrink:0; }
@media (max-width:980px){ .areas-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .areas-grid { grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   CERTIFICATIONS
   ========================================================================== */
.certs { background:var(--emerald-mist); }
.certs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.cert-card { text-align:center; padding:34px 22px; background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-lg); transition:transform .3s var(--ease), box-shadow .3s; }
.cert-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(15,61,45,0.12); }
.cert-badge { width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:linear-gradient(135deg,var(--emerald),var(--emerald-mid)); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(20,92,67,0.28); }
.cert-badge svg { width:28px; height:28px; color:#fff; }
.cert-card h4 { font-size:15px; margin-bottom:6px; font-family:'DM Sans',sans-serif; font-weight:700; color:var(--dark); }
.cert-card p { font-size:12.5px; color:var(--text-muted); }
@media (max-width:900px){ .certs-grid { grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials { background:var(--white); }
.t-track-wrap { overflow:hidden; }
.t-track { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 6px 22px; scrollbar-width:none; }
.t-track::-webkit-scrollbar { display:none; }
.t-card { scroll-snap-align:start; min-width:min(400px,84vw); padding:34px 30px; display:flex; flex-direction:column; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-lg); }
.t-stars { display:flex; gap:3px; margin-bottom:18px; }
.t-stars svg { width:16px; height:16px; color:var(--gold-light); }
.t-card p.quote { font-size:15px; color:var(--text); line-height:1.8; margin-bottom:24px; flex:1; }
.t-person { display:flex; align-items:center; gap:13px; }
.t-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--emerald),var(--emerald-mid)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Playfair Display',serif; font-weight:700; font-size:16px; flex-shrink:0; }
.t-person strong { display:block; font-size:14px; color:var(--dark); }
.t-person span { font-size:12px; color:var(--text-muted); }
.t-controls { display:flex; gap:10px; justify-content:center; }
.t-nav-btn { width:44px; height:44px; border-radius:50%; border:1.5px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, border-color .2s; }
.t-nav-btn:hover { background:var(--emerald-pale); border-color:var(--emerald-mid); }
.t-nav-btn svg { width:18px; height:18px; color:var(--emerald); }

/* Google reviews showcase */
.gr-card { display:flex; align-items:center; gap:28px; padding:34px 38px; flex-wrap:wrap; margin-top:50px; }
.gr-score { text-align:center; }
.gr-score strong { font-family:'Playfair Display',serif; font-size:48px; color:var(--dark); line-height:1; }
.gr-score .t-stars { justify-content:center; margin:8px 0 4px; }
.gr-score span { font-size:12.5px; color:var(--text-muted); }
.gr-divider { width:1px; align-self:stretch; background:var(--border); }
.gr-text { flex:1; min-width:220px; }
.gr-text h4 { font-size:16px; margin-bottom:6px; }
.gr-text p { font-size:13.5px; color:var(--text-mid); }
.gr-logo { width:38px; height:38px; flex-shrink:0; }
@media (max-width:640px){ .gr-card { justify-content:center; text-align:center; } .gr-divider { display:none; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background:var(--bg); }
.faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-md); overflow:hidden; transition:border-color .25s; }
.faq-item.open { border-color:var(--emerald-mid); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; background:none; border:none; text-align:left; cursor:pointer; font-size:15.5px; font-weight:600; color:var(--dark); }
.faq-q .plus { width:30px; height:30px; border-radius:50%; background:var(--emerald-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .3s var(--ease), background .3s; }
.faq-q .plus svg { width:14px; height:14px; color:var(--emerald); transition:transform .3s var(--ease); }
.faq-item.open .plus { background:var(--emerald); }
.faq-item.open .plus svg { color:#fff; transform:rotate(135deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a-inner { padding:0 26px 24px; color:var(--text-mid); font-size:14.5px; line-height:1.8; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-section {
  background:linear-gradient(135deg,var(--emerald-900),var(--emerald));
  border-radius:var(--radius-xl); padding:70px 60px; text-align:center; position:relative; overflow:hidden;
}
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(212,153,30,0.15), transparent 55%), radial-gradient(circle at 85% 80%, rgba(255,255,255,0.08), transparent 55%); }
.cta-section > * { position:relative; }
.cta-section h2 { color:#fff; font-size:clamp(26px,3.4vw,40px); margin-bottom:16px; }
.cta-section p { color:rgba(255,255,255,0.72); font-size:16px; max-width:520px; margin:0 auto 34px; }
.cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
@media (max-width:640px){ .cta-section { padding:50px 26px; } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { background:var(--sand); }
.contact-inner { display:grid; grid-template-columns:0.95fr 1.15fr; gap:70px; align-items:start; }
.contact-info-list { display:flex; flex-direction:column; gap:16px; margin-top:36px; }
.contact-item { display:flex; gap:16px; align-items:flex-start; padding:18px; background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-md); transition:box-shadow .25s, border-color .25s, transform .25s; }
.contact-item:hover { border-color:var(--emerald-mid); box-shadow:0 10px 30px rgba(15,61,45,0.09); transform:translateY(-3px); }
.contact-icon { width:48px; height:48px; min-width:48px; background:var(--emerald-pale); border:1px solid var(--emerald-mid); border-radius:13px; display:flex; align-items:center; justify-content:center; }
.contact-icon svg { width:21px; height:21px; color:var(--emerald); }
.contact-item h4 { font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-muted); margin-bottom:4px; font-weight:700; }
.contact-item a, .contact-item p { font-size:15px; color:var(--dark); text-decoration:none; font-weight:600; }
.contact-item a:hover { color:var(--emerald); }
.contact-map { margin-top:24px; border-radius:var(--radius-md); overflow:hidden; border:1.5px solid var(--border); aspect-ratio:16/9; }
.contact-map iframe { width:100%; height:100%; border:0; }

.contact-form { padding:46px 42px; }
.contact-form h3 { font-size:25px; margin-bottom:8px; }
.contact-form .form-subtitle { font-size:14px; color:var(--text-muted); margin-bottom:30px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:17px; }
.form-group label { display:block; font-size:13px; color:var(--text-mid); margin-bottom:7px; font-weight:700; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; background:rgba(255,255,255,0.7); border:1.5px solid var(--border); border-radius:11px; padding:13px 16px;
  color:var(--dark); font-family:'DM Sans',sans-serif; font-size:14px; outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--emerald); box-shadow:0 0 0 4px rgba(20,92,67,0.1); background:#fff; }
.form-group textarea { resize:vertical; min-height:110px; }
.form-note { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); margin-top:4px; }
.form-note svg { width:14px; height:14px; color:var(--emerald); flex-shrink:0; }
.form-success { display:none; text-align:center; padding:30px 10px; }
.form-success .success-icon { width:60px; height:60px; margin:0 auto 18px; border-radius:50%; background:var(--emerald-pale); display:flex; align-items:center; justify-content:center; }
.form-success .success-icon svg { width:28px; height:28px; color:var(--emerald); }
.form-success h4 { font-size:22px; color:var(--emerald); margin-bottom:8px; }
.form-success p { color:var(--text-mid); font-size:14.5px; }

@media (max-width:980px){ .contact-inner { grid-template-columns:1fr; gap:50px; } }
@media (max-width:560px){ .contact-form { padding:30px 24px; } .form-row { grid-template-columns:1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.site-footer { background:var(--dark); padding:70px 0 0; position:relative; overflow:hidden; }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:50px; padding-bottom:56px; }
.footer-brand .logo-text strong { color:var(--gold-light); }
.footer-brand .logo-text span { color:rgba(255,255,255,0.35); }
.footer-brand p.desc { color:rgba(255,255,255,0.45); font-size:14px; line-height:1.8; margin-top:20px; max-width:290px; }
.footer-socials { display:flex; gap:10px; margin-top:24px; }
.footer-social-btn { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .2s, transform .2s; }
.footer-social-btn:hover { background:var(--emerald-mid); transform:translateY(-3px); }
.footer-social-btn svg { width:16px; height:16px; color:#fff; }
.footer-col h4 { font-family:'DM Sans',sans-serif; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--gold-light); margin-bottom:22px; }
.footer-col ul { display:flex; flex-direction:column; gap:13px; }
.footer-col ul a { text-decoration:none; color:rgba(255,255,255,0.5); font-size:14px; transition:color .2s; display:inline-flex; align-items:center; gap:8px; }
.footer-col ul a:hover { color:#fff; }
.footer-col ul a svg { width:14px; height:14px; flex-shrink:0; opacity:.7; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding:26px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:13px; color:rgba(255,255,255,0.32); }
.footer-bottom a { color:var(--gold-light); text-decoration:none; }

@media (max-width:900px){ .footer-top { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top { grid-template-columns:1fr; gap:36px; } }

/* ==========================================================================
   FLOATING ACTION BUTTONS
   ========================================================================== */
.fab-stack { position:fixed; right:24px; bottom:24px; z-index:400; display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
.fab {
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,0.22); transition:transform .25s var(--ease), box-shadow .25s;
}
.fab:hover { transform:scale(1.1); }
.fab svg { width:27px; height:27px; fill:#fff; }
.fab-wa { background:linear-gradient(135deg,#2fd873,#1fa855); animation:wa-pulse 2.6s infinite; }
.fab-call { background:linear-gradient(135deg,var(--emerald-mid),var(--emerald)); width:50px; height:50px; }
@keyframes wa-pulse { 0%,100%{ box-shadow:0 10px 30px rgba(37,211,102,0.4);} 50%{ box-shadow:0 10px 34px rgba(37,211,102,0.65),0 0 0 8px rgba(37,211,102,0.12);} }
.fab-back-top { width:44px; height:44px; background:var(--white); border:1.5px solid var(--border); opacity:0; pointer-events:none; transform:translateY(10px); }
.fab-back-top.show { opacity:1; pointer-events:auto; transform:none; }
.fab-back-top svg { width:18px; height:18px; fill:none; stroke:var(--emerald); stroke-width:2.4; }

/* Sticky mobile CTA bar */
.mobile-cta-bar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:390; }
.mobile-cta-bar .bar-inner {
  display:flex; background:rgba(253,248,242,0.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--border); box-shadow:0 -8px 30px rgba(15,61,45,0.12);
  padding:calc(env(safe-area-inset-bottom,0) + 10px) 12px 10px;
}
.mobile-cta-bar a { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; margin:0 5px; border-radius:12px; font-weight:700; font-size:14px; text-decoration:none; }
.mobile-cta-bar a svg { width:18px; height:18px; }
.mobile-cta-bar .m-call { background:var(--emerald); color:#fff; }
.mobile-cta-bar .m-wa { background:#25D366; color:#fff; }
@media (max-width:760px) {
  .mobile-cta-bar { display:block; }
  .fab-stack { bottom:96px; }
  body { padding-bottom:74px; }
}

/* ==========================================================================
   MISC RESPONSIVE
   ========================================================================== */
@media (max-width:760px) {
  .certs-grid { grid-template-columns:1fr 1fr; }
  .amc-card.featured { transform:none; }
  .gr-card { flex-direction:column; text-align:center; }
}