/* ╔══════════════════════════════════════════════╗
   ║           DESIGN SYSTEM TOKENS              ║
   ╚══════════════════════════════════════════════╝ */

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg:          #070711;
  --bg2:         #0d0d1a;
  --surface:     #111122;
  --card:        #161628;
  --card-hover:  #1c1c32;
  --border:      #2a2a45;
  --border-soft: #1e1e35;

  --text:        #eeeef8;
  --text-sub:    #8888aa;
  --text-muted:  #4a4a6a;

  --gold:        #fbbf24;
  --gold-soft:   rgba(251,191,36,.12);
  --gold-border: rgba(251,191,36,.25);
  --orange:      #f97316;

  --green:       #34d399;
  --green-soft:  rgba(52,211,153,.1);

  --shadow-sm:   0 2px 12px rgba(0,0,0,.4);
  --shadow-md:   0 8px 32px rgba(0,0,0,.5);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.6);

  --nav-blur: rgba(7,7,17,.88);
  --modal-bg: rgba(0,0,0,.85);

  --orb1: rgba(251,191,36,.08);
  --orb2: rgba(249,115,22,.06);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:          #fafaf8;
  --bg2:         #f4f3ef;
  --surface:     #ffffff;
  --card:        #ffffff;
  --card-hover:  #f8f7f3;
  --border:      #e5e2d8;
  --border-soft: #eeece6;

  --text:        #1a1a2e;
  --text-sub:    #5a5a72;
  --text-muted:  #aaa8b8;

  --gold:        #d97706;
  --gold-soft:   rgba(217,119,6,.09);
  --gold-border: rgba(217,119,6,.22);
  --orange:      #ea580c;

  --green:       #059669;
  --green-soft:  rgba(5,150,105,.09);

  --shadow-sm:   0 2px 12px rgba(0,0,0,.06);
  --shadow-md:   0 8px 32px rgba(0,0,0,.1);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.14);

  --nav-blur: rgba(250,250,248,.9);
  --modal-bg: rgba(0,0,0,.55);

  --orb1: rgba(217,119,6,.07);
  --orb2: rgba(234,88,12,.05);
}

/* ╔══════════════════════════════════════════════╗
   ║              GLOBAL RESET                   ║
   ╚══════════════════════════════════════════════╝ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit }
button { font-family:inherit; cursor:pointer }
img { max-width:100%; display:block }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px }
::-webkit-scrollbar-thumb:hover { background:var(--gold) }

/* ╔══════════════════════════════════════════════╗
   ║           KEYFRAME ANIMATIONS               ║
   ╚══════════════════════════════════════════════╝ */
@keyframes fadeUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes slideIn   { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn   { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes pulse     { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.4} }
@keyframes float     { 0%,100%{transform:translateY(0px)} 50%{transform:translateY(-10px)} }
@keyframes shimmer   { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
@keyframes orb       { 0%,100%{transform:scale(1) rotate(0deg)} 50%{transform:scale(1.08) rotate(3deg)} }
@keyframes marquee   { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes glow      { 0%,100%{box-shadow:0 0 8px var(--green)} 50%{box-shadow:0 0 22px var(--green),0 0 40px rgba(52,211,153,.2)} }
@keyframes countAnim { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes borderRun {
  0%   { background-position:0% 50% }
  50%  { background-position:100% 50% }
  100% { background-position:0% 50% }
}
@keyframes pageEnter {
  from { opacity:0; transform:translateY(16px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes skillFill { from{width:0} }

/* ╔══════════════════════════════════════════════╗
   ║         SCROLL REVEAL SYSTEM                ║
   ╚══════════════════════════════════════════════╝ */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .7s ease, transform .7s ease }
.reveal.up    { opacity:1; transform:none }
.reveal-l { opacity:0; transform:translateX(-28px); transition:opacity .65s ease, transform .65s ease }
.reveal-l.up  { opacity:1; transform:none }
.reveal-r { opacity:0; transform:translateX(28px); transition:opacity .65s ease, transform .65s ease }
.reveal-r.up  { opacity:1; transform:none }
.reveal-s { opacity:0; transform:scale(.94); transition:opacity .6s ease, transform .6s ease }
.reveal-s.up  { opacity:1; transform:none }
.d1 { transition-delay:.08s }
.d2 { transition-delay:.16s }
.d3 { transition-delay:.24s }
.d4 { transition-delay:.32s }
.d5 { transition-delay:.40s }

/* ╔══════════════════════════════════════════════╗
   ║               NAVIGATION                    ║
   ╚══════════════════════════════════════════════╝ */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:500;
  display: flex; align-items:center; justify-content:space-between;
  padding: 1rem 5%;
  background: var(--nav-blur);
  backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid var(--border-soft);
  transition: all .3s ease;
}
#nav.scrolled {
  padding: .7rem 5%;
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}
.nav-left { display:flex; align-items:center; gap:.6rem; cursor:pointer }
.nav-mark {
  width:36px; height:36px; border-radius:10px;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-weight:900; font-size:.95rem; color:#000;
  box-shadow: 0 4px 14px rgba(251,191,36,.35);
  transition: transform .2s, box-shadow .2s;
}
.nav-left:hover .nav-mark { transform:scale(1.08) rotate(-3deg); box-shadow:0 6px 20px rgba(251,191,36,.45) }
.nav-wordmark { font-family:'Playfair Display',serif; font-weight:800; font-size:1.05rem; color:var(--text) }
.nav-wordmark span { color:var(--gold) }

.nav-center { display:flex; gap:.2rem; list-style:none }
.nav-center a {
  display:block; padding:.42rem .9rem; border-radius:8px;
  font-size:.82rem; font-weight:500; letter-spacing:.03em;
  color:var(--text-sub); cursor:pointer; transition:all .2s;
  position:relative;
}
.nav-center a::after {
  content:''; position:absolute; bottom:4px; left:50%; right:50%;
  height:2px; background:var(--gold); border-radius:1px; transition:all .25s;
}
.nav-center a:hover, .nav-center a.act { color:var(--text) }
.nav-center a.act::after { left:12px; right:12px }
.nav-center a:hover::after { left:12px; right:12px }

.nav-right { display:flex; align-items:center; gap:.7rem }

/* Theme toggle */
.theme-toggle {
  width:44px; height:26px; background:var(--border); border-radius:13px;
  position:relative; cursor:pointer; border:none; transition:background .3s;
  flex-shrink:0;
}
.theme-toggle::before {
  content:''; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
[data-theme="light"] .theme-toggle::before { transform:translateX(18px) }
.theme-icon {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 6px; font-size:.65rem; pointer-events:none; user-select:none;
}

.btn-hire {
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color:#000; font-weight:700; font-size:.83rem; padding:.5rem 1.2rem;
  border:none; border-radius:9px; cursor:pointer;
  transition:all .22s; box-shadow:0 4px 14px rgba(251,191,36,.3);
  white-space:nowrap;
}
.btn-hire:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(251,191,36,.45) }

/* Hamburger */
.hbg { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; border:none; background:none }
.hbg span { display:block; width:22px; height:2px; background:var(--text-sub); border-radius:1px; transition:all .3s }
.hbg.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); background:var(--gold) }
.hbg.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hbg.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); background:var(--gold) }

.mob-nav {
  display:none; position:fixed; top:57px; left:0; right:0; z-index:499;
  background:var(--nav-blur); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border); padding:1rem 5% 1.5rem;
  flex-direction:column; gap:.3rem;
  animation:fadeIn .2s ease;
}
.mob-nav.open { display:flex }
.mob-nav a {
  padding:.75rem 1rem; border-radius:10px; color:var(--text-sub);
  font-weight:500; font-size:.93rem; cursor:pointer; transition:all .18s;
}
.mob-nav a:hover, .mob-nav a.act { background:var(--gold-soft); color:var(--gold) }
.mob-nav-cta { margin-top:.5rem; padding-top:.8rem; border-top:1px solid var(--border) }
.mob-nav-cta button { width:100%; padding:.8rem; background:linear-gradient(135deg,var(--gold),var(--orange)); color:#000; font-weight:700; border:none; border-radius:10px; font-size:.93rem }

/* ╔══════════════════════════════════════════════╗
   ║           PAGE SYSTEM                       ║
   ╚══════════════════════════════════════════════╝ */
.page { display:none }
.page.active { display:block; animation:pageEnter .45s ease both }

/* ╔══════════════════════════════════════════════╗
   ║           LAYOUT UTILITIES                  ║
   ╚══════════════════════════════════════════════╝ */
.wrap  { max-width:1140px; margin:0 auto; width:100% }
.wrap7 { max-width:760px; margin:0 auto; width:100% }
section { padding:6rem 5% }
.s-pt { padding-top:8rem }

.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin-bottom:.8rem;
}
.eyebrow::before { content:''; width:24px; height:2px; background:linear-gradient(90deg,var(--gold),var(--orange)); border-radius:1px }

h2.st { font-family:'Playfair Display',serif; font-size:clamp(2rem,3.5vw,2.9rem); font-weight:800; color:var(--text); letter-spacing:-.02em; line-height:1.1 }
.s-desc { margin-top:.85rem; color:var(--text-sub); font-weight:300; max-width:500px; line-height:1.75; font-size:.97rem }
.s-hd { margin-bottom:3.5rem }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.88rem; padding:.78rem 1.6rem; border-radius:10px; border:none; cursor:pointer; transition:all .22s; white-space:nowrap }
.btn-primary { background:linear-gradient(135deg,var(--gold),var(--orange)); color:#000; box-shadow:0 4px 18px rgba(251,191,36,.28) }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(251,191,36,.45) }
.btn-secondary { background:var(--surface); color:var(--text); border:1px solid var(--border) }
.btn-secondary:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); background:var(--gold-soft) }
.btn-ghost { background:transparent; color:var(--gold); border:1px solid var(--gold-border) }
.btn-ghost:hover { background:var(--gold-soft); transform:translateY(-1px) }

/* ╔══════════════════════════════════════════════╗
   ║            HOME — HERO                      ║
   ╚══════════════════════════════════════════════╝ */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding:9rem 5% 5rem; position:relative; overflow:hidden;
}
.hero-orb1 {
  position:absolute; width:750px; height:750px; border-radius:50%;
  background:radial-gradient(circle, var(--orb1) 0%, transparent 70%);
  top:-200px; right:-200px; pointer-events:none; animation:orb 12s ease-in-out infinite;
}
.hero-orb2 {
  position:absolute; width:450px; height:450px; border-radius:50%;
  background:radial-gradient(circle, var(--orb2) 0%, transparent 70%);
  bottom:-100px; left:-100px; pointer-events:none; animation:orb 9s ease-in-out infinite reverse;
}
.hero-grid { max-width:1140px; margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }

/* Hero text */
.hero-badge {
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--gold-soft); border:1px solid var(--gold-border);
  border-radius:100px; padding:.38rem 1rem;
  font-size:.74rem; font-weight:700; color:var(--gold); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:1.6rem; animation:fadeUp .8s both;
}
.hero-badge-dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 2s infinite }
.h-name {
  font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(3rem,6vw,5.4rem);
  line-height:.95; letter-spacing:-.02em; color:var(--text);
  animation:fadeUp .8s .07s both;
}
.h-name-accent {
  display:block; background:linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.h-sub { margin-top:1.4rem; color:var(--text-sub); font-size:1.02rem; font-weight:300; max-width:440px; line-height:1.78; animation:fadeUp .8s .14s both }
.h-sub strong { color:var(--text); font-weight:600 }
.h-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; animation:fadeUp .8s .21s both }
.chip {
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:.28rem .75rem; font-size:.78rem; color:var(--text-sub); font-weight:500;
  cursor:default; transition:all .2s;
}
.chip:hover { border-color:var(--gold-border); color:var(--gold); background:var(--gold-soft) }
.h-btns { display:flex; gap:.8rem; margin-top:2.4rem; animation:fadeUp .8s .28s both; flex-wrap:wrap }

/* Hero visual */
.hero-vis { display:flex; justify-content:center; align-items:center; animation:fadeIn 1.1s .2s both; position:relative }
.av-outer {
  position:relative; width:300px; height:300px;
  display:flex; align-items:center; justify-content:center;
}
/* Spinning gradient ring */
.av-ring-svg {
  position:absolute; inset:-6px;
  border-radius:50%; padding:4px;
  background:conic-gradient(from 0deg, var(--gold) 0%, var(--orange) 25%, transparent 45%, transparent 55%, var(--orange) 75%, var(--gold) 100%);
  animation:spin 10s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 4px));
}
.av-bg { position:absolute; inset:0; border-radius:50%; background:var(--bg) }
.av-inner {
  position:relative; z-index:2; width:100%; height:100%;
  border-radius:50%;
  background:linear-gradient(145deg, var(--card) 0%, var(--surface) 100%);
  border:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  box-shadow:var(--shadow-md);
}
.av-letters { font-family:'Playfair Display',serif; font-size:4.5rem; font-weight:900; letter-spacing:-.06em; line-height:1; background:linear-gradient(135deg,var(--gold),var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent }
.av-label { font-size:.7rem; color:var(--text-muted); letter-spacing:.18em; text-transform:uppercase; font-weight:500 }

/* Floating pills */
.fl-pill {
  position:absolute; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:.5rem .9rem; display:flex; align-items:center; gap:.45rem;
  font-size:.76rem; font-weight:600; color:var(--text);
  box-shadow:var(--shadow-sm); z-index:3; white-space:nowrap;
  transition:background .3s, border-color .3s;
}
.fl-pill:nth-child(4) { top:6%;  right:-44px; animation:float 4.5s ease-in-out infinite }
.fl-pill:nth-child(5) { bottom:18%; left:-55px; animation:float 4.5s 1.8s ease-in-out infinite }
.fl-pill:nth-child(6) { bottom:3%;  right:-12px; animation:float 4.5s 1s ease-in-out infinite }
.fl-pill .pill-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }
.pill-dot.green { background:var(--green); animation:glow 2s infinite }
.pill-dot.gold  { background:var(--gold) }
.pill-dot.ora   { background:var(--orange) }

/* Marquee ticker */
.ticker-wrap { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); padding:.75rem 0 }
.ticker-inner { display:flex; width:max-content; animation:marquee 28s linear infinite }
.ticker-item { display:flex; align-items:center; gap:.6rem; padding:0 2rem; color:var(--text-sub); font-size:.82rem; font-weight:500; white-space:nowrap }
.ticker-item .ti-dot { width:4px; height:4px; border-radius:50%; background:var(--gold); flex-shrink:0 }

/* Stats row */
.stats-wrap { display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.stat-box { text-align:center; padding:2.5rem 1rem; position:relative; border-right:1px solid var(--border) }
.stat-box:last-child { border-right:none }
.stat-n { font-family:'Playfair Display',serif; font-size:2.8rem; font-weight:900; line-height:1; background:linear-gradient(135deg,var(--gold),var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent }
.stat-l { font-size:.77rem; color:var(--text-sub); text-transform:uppercase; letter-spacing:.09em; font-weight:500; margin-top:.3rem }

/* ╔══════════════════════════════════════════════╗
   ║         HOME — SERVICES PREVIEW             ║
   ╚══════════════════════════════════════════════╝ */
.prev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem }
.prev-card {
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:1.8rem; cursor:pointer; position:relative; overflow:hidden;
  transition:all .3s cubic-bezier(.34,.55,.55,1);
}
.prev-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--gold-soft), transparent);
  opacity:0; transition:opacity .3s;
}
.prev-card:hover { border-color:var(--gold-border); transform:translateY(-5px); box-shadow:var(--shadow-lg) }
.prev-card:hover::before { opacity:1 }
.prev-ico { font-size:2rem; margin-bottom:1rem }
.prev-title { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:.45rem }
.prev-desc { font-size:.85rem; color:var(--text-sub); line-height:1.6; font-weight:300 }
.prev-link {
  display:inline-flex; align-items:center; gap:.35rem; margin-top:1.1rem;
  font-size:.78rem; font-weight:700; color:var(--gold); letter-spacing:.04em; text-transform:uppercase;
  transition:gap .2s;
}
.prev-card:hover .prev-link { gap:.6rem }

/* Why section */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }
.why-list { list-style:none; display:flex; flex-direction:column; gap:.9rem }
.why-li {
  display:flex; gap:1rem; padding:1.3rem 1.4rem; align-items:flex-start;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  transition:all .3s;
}
.why-li:hover { border-color:var(--gold-border); transform:translateX(5px); background:var(--card-hover); box-shadow:var(--shadow-sm) }
.why-n { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:900; color:var(--gold); min-width:2rem; opacity:.5; line-height:1.1 }
.why-li h4 { font-size:.97rem; font-weight:700; color:var(--text); margin-bottom:.25rem }
.why-li p { font-size:.85rem; color:var(--text-sub); font-weight:300; line-height:1.6 }
.why-right { display:flex; flex-direction:column; gap:1rem }
.big-c {
  background:linear-gradient(145deg, var(--card), var(--surface));
  border:1px solid var(--gold-border); border-radius:20px; padding:3rem; text-align:center;
  box-shadow:var(--shadow-sm);
}
.big-n { font-family:'Playfair Display',serif; font-size:6rem; font-weight:900; line-height:1; background:linear-gradient(135deg,var(--gold),var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.06em }
.big-l { font-size:.82rem; color:var(--text-sub); letter-spacing:.12em; text-transform:uppercase; font-weight:500; margin-top:.4rem }
.mini-g { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.mini-c { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.4rem; text-align:center; transition:all .25s }
.mini-c:hover { border-color:var(--gold-border); background:var(--card-hover) }
.mini-n { font-family:'Playfair Display',serif; font-size:2.1rem; font-weight:900; color:var(--orange); letter-spacing:-.04em; line-height:1 }
.mini-l { font-size:.72rem; color:var(--text-sub); text-transform:uppercase; letter-spacing:.07em; font-weight:500; margin-top:.3rem }

/* CTA banner */
.cta-block {
  border-radius:24px; overflow:hidden; position:relative; padding:4rem 3rem; text-align:center;
  background:linear-gradient(145deg, var(--card) 0%, var(--surface) 100%);
  border:1px solid var(--border);
}
.cta-block::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, var(--gold-soft) 0%, transparent 60%);
}
.cta-block h2 { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:900; color:var(--text); position:relative; letter-spacing:-.02em; margin-bottom:.9rem }
.cta-block p { color:var(--text-sub); max-width:480px; margin:0 auto 2rem; line-height:1.7; position:relative; font-weight:300 }
.cta-btns { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; position:relative }

/* ╔══════════════════════════════════════════════╗
   ║              SKILLS PAGE                    ║
   ╚══════════════════════════════════════════════╝ */
.sk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.2rem }
.sk-card {
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:1.9rem; position:relative; overflow:hidden; transition:all .3s;
}
.sk-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--orange)); transform:scaleX(0); transform-origin:left; transition:transform .4s ease }
.sk-card:hover { border-color:var(--gold-border); transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.sk-card:hover::after { transform:scaleX(1) }
.sk-ic { font-size:2.1rem; margin-bottom:1.1rem; display:block }
.sk-nm { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:.5rem }
.sk-de { font-size:.85rem; color:var(--text-sub); line-height:1.62; font-weight:300 }
.sk-bar { margin-top:1.3rem; display:flex; align-items:center; gap:.8rem }
.sk-track { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden }
.sk-fill { height:100%; border-radius:3px; width:0; background:linear-gradient(90deg,var(--gold),var(--orange)); transition:width 1.5s cubic-bezier(.4,0,.2,1) }
.sk-pct { font-size:.74rem; font-weight:700; color:var(--gold); min-width:32px; text-align:right }

.tools-section { margin-top:5.5rem }
.tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.9rem; margin-top:1.5rem }
.tool {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:1.1rem .8rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  cursor:default; transition:all .25s;
}
.tool:hover { border-color:var(--gold-border); background:var(--card-hover); transform:translateY(-3px); box-shadow:var(--shadow-sm) }
.tool-e { font-size:1.6rem }
.tool-n { font-size:.76rem; color:var(--text-sub); font-weight:500 }

/* ╔══════════════════════════════════════════════╗
   ║            SERVICES PAGE                    ║
   ╚══════════════════════════════════════════════╝ */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem }
.svc-card {
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:2rem; transition:all .3s; cursor:default; position:relative; overflow:hidden;
}
.svc-card.hot {
  background:linear-gradient(160deg, var(--gold-soft), var(--card) 55%);
  border-color:var(--gold-border);
}
.svc-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--gold-border) }
.svc-num { font-family:'Playfair Display',serif; font-size:3rem; font-weight:900; color:var(--border); line-height:1; margin-bottom:.7rem; letter-spacing:-.06em; transition:color .3s }
.svc-card:hover .svc-num { color:var(--gold-border) }
.svc-ico { font-size:1.9rem; margin-bottom:.9rem; display:block }
.svc-title { font-family:'Playfair Display',serif; font-size:1.08rem; font-weight:700; color:var(--text); margin-bottom:.55rem }
.svc-desc { font-size:.85rem; color:var(--text-sub); line-height:1.65; font-weight:300 }
.svc-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem }
.st { background:var(--gold-soft); border:1px solid var(--gold-border); border-radius:6px; padding:.18rem .6rem; font-size:.7rem; color:var(--gold); font-weight:600 }
.svc-price { margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--border); font-size:.83rem; color:var(--text-sub) }
.svc-price strong { color:var(--gold); font-weight:700 }

/* Pricing */
.price-section { margin-top:6rem }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2rem }
.pc {
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  padding:2.2rem; text-align:center; position:relative; transition:all .3s;
}
.pc.pop {
  border:2px solid var(--gold);
  background:linear-gradient(160deg, var(--gold-soft), var(--card) 55%);
}
.pc:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.pc-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg,var(--gold),var(--orange)); color:#000;
  font-size:.68rem; font-weight:800; padding:.22rem .9rem; border-radius:20px; white-space:nowrap; letter-spacing:.05em;
}
.pc-name { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:800; color:var(--text) }
.pc-note { font-size:.8rem; color:var(--text-sub); margin:.25rem 0 1rem }
.pc-amt { font-family:'Playfair Display',serif; font-size:3rem; font-weight:900; color:var(--gold); letter-spacing:-.05em; line-height:1 }
.pc-cur { font-size:1.1rem; vertical-align:super; font-family:'Plus Jakarta Sans',sans-serif }
.pc-per { font-size:.79rem; color:var(--text-sub); margin:.2rem 0 1.8rem }
.pc-feats { list-style:none; text-align:left; display:flex; flex-direction:column; gap:.6rem; margin-bottom:2rem }
.pc-feats li { font-size:.86rem; color:var(--text-sub); display:flex; gap:.6rem; align-items:flex-start; font-weight:300 }
.pc-feats li::before { content:'✓'; color:var(--gold); font-weight:800; flex-shrink:0 }

/* ╔══════════════════════════════════════════════╗
   ║           PORTFOLIO PAGE                    ║
   ╚══════════════════════════════════════════════╝ */
.pf-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2.8rem }
.flt {
  background:var(--card); border:1px solid var(--border); border-radius:9px;
  padding:.4rem 1rem; font-size:.8rem; font-weight:500; color:var(--text-sub);
  cursor:pointer; transition:all .2s; font-family:'Plus Jakarta Sans',sans-serif;
}
.flt:hover, .flt.on { background:var(--gold-soft); border-color:var(--gold-border); color:var(--gold) }

.pf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.4rem }
.pf-card {
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  overflow:hidden; cursor:pointer; transition:all .3s;
}
.pf-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--gold-border) }
.pf-thumb {
  height:200px; display:flex; align-items:center; justify-content:center;
  font-size:4.5rem; position:relative; overflow:hidden;
}
.pf-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s;
}
.pf-card:hover .pf-overlay { opacity:1 }
.pf-view { background:linear-gradient(135deg,var(--gold),var(--orange)); color:#000; font-size:.77rem; font-weight:700; padding:.5rem 1.2rem; border-radius:8px; letter-spacing:.04em }
.pf-body { padding:1.4rem }
.pf-cat { font-size:.68rem; color:var(--gold); font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.3rem }
.pf-title { font-family:'Playfair Display',serif; font-size:1.02rem; font-weight:700; color:var(--text); margin-bottom:.35rem }
.pf-desc { font-size:.83rem; color:var(--text-sub); line-height:1.55 }
.pf-tags { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.8rem }
.ptag { background:var(--surface); border-radius:5px; padding:.12rem .5rem; font-size:.68rem; color:var(--text-muted) }

/* Modal */
.modal-wrap {
  position:fixed; inset:0; background:var(--modal-bg); z-index:600;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  opacity:0; pointer-events:none; transition:opacity .3s; backdrop-filter:blur(10px);
}
.modal-wrap.open { opacity:1; pointer-events:all }
.modal-box {
  background:var(--surface); border:1px solid var(--border); border-radius:22px;
  max-width:700px; width:100%; max-height:90vh; overflow-y:auto; padding:2.5rem;
  position:relative; transform:scale(.94) translateY(16px); transition:transform .35s cubic-bezier(.34,.55,.55,1);
  box-shadow:var(--shadow-lg);
}
.modal-wrap.open .modal-box { transform:scale(1) translateY(0) }
.m-close {
  position:absolute; top:1.2rem; right:1.2rem;
  width:34px; height:34px; border-radius:9px;
  background:var(--card); border:1px solid var(--border); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  color:var(--text-sub); transition:all .2s; font-family:inherit; line-height:1;
}
.m-close:hover { background:var(--gold-soft); color:var(--gold); border-color:var(--gold-border) }
.m-thumb { height:210px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:5rem; margin-bottom:1.5rem; border:1px solid var(--border) }
.m-cat { font-size:.68rem; color:var(--gold); font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.4rem }
.m-title { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:900; color:var(--text); margin-bottom:.9rem; letter-spacing:-.02em }
.m-desc { color:var(--text-sub); line-height:1.75; font-weight:300; font-size:.93rem; margin-bottom:1.5rem }
.m-meta { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-bottom:1.4rem }
.m-mi { background:var(--card); border-radius:12px; padding:.9rem 1rem; border:1px solid var(--border) }
.m-ml { font-size:.68rem; color:var(--text-sub); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.2rem }
.m-mv { font-size:.9rem; color:var(--text); font-weight:600 }
.m-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem }
.m-tag { background:var(--gold-soft); border:1px solid var(--gold-border); border-radius:6px; padding:.2rem .7rem; font-size:.76rem; color:var(--gold); font-weight:600 }
.m-btns { display:flex; gap:.9rem; flex-wrap:wrap }

/* ╔══════════════════════════════════════════════╗
   ║              ABOUT PAGE                     ║
   ╚══════════════════════════════════════════════╝ */
.about-layout { display:grid; grid-template-columns:340px 1fr; gap:5rem; align-items:start }
.about-sticky { position:sticky; top:90px }
.ab-profile {
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.ab-top {
  background:linear-gradient(160deg, var(--card) 0%, var(--surface) 100%);
  padding:2.5rem 1.5rem; text-align:center; position:relative; border-bottom:1px solid var(--border);
}
.ab-top::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(ellipse at 50% 0%, var(--gold-soft) 0%, transparent 65%) }
.ab-av { font-family:'Playfair Display',serif; font-size:5rem; font-weight:900; line-height:1; background:linear-gradient(135deg,var(--gold),var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; z-index:1 }
.ab-nm { font-size:1.05rem; font-weight:700; color:var(--text); position:relative; z-index:1; margin-top:.5rem }
.ab-rl { font-size:.72rem; color:var(--text-sub); letter-spacing:.12em; text-transform:uppercase; position:relative; z-index:1; margin-top:.2rem }
.ab-stats-g { display:grid; grid-template-columns:repeat(4,1fr) }
.ab-st { text-align:center; padding:1.1rem .5rem; border-right:1px solid var(--border) }
.ab-st:last-child { border:none }
.ab-sn { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:900; color:var(--gold) }
.ab-sl { font-size:.62rem; color:var(--text-sub); text-transform:uppercase; letter-spacing:.06em; margin-top:.2rem }
.ab-actions { display:flex; gap:.7rem; padding:1.2rem; border-top:1px solid var(--border) }
.ab-btn { flex:1; padding:.72rem; border-radius:10px; font-size:.84rem; font-weight:600; border:none; cursor:pointer; transition:all .22s; font-family:'Plus Jakarta Sans',sans-serif; text-align:center }
.ab-g { background:linear-gradient(135deg,var(--gold),var(--orange)); color:#000 }
.ab-g:hover { box-shadow:0 4px 18px rgba(251,191,36,.35) }
.ab-s { background:var(--surface); color:var(--text); border:1px solid var(--border) }
.ab-s:hover { border-color:var(--gold-border); color:var(--gold) }

.ab-content h2 { font-family:'Playfair Display',serif; font-size:clamp(2rem,3.2vw,2.7rem); font-weight:900; color:var(--text); letter-spacing:-.03em; line-height:1.1; margin-bottom:1.1rem }
.ab-content p { color:var(--text-sub); line-height:1.82; font-weight:300; margin-bottom:1.2rem; font-size:.97rem }
.ab-content p strong { color:var(--text); font-weight:600 }

.tl { display:flex; flex-direction:column; margin:2.5rem 0 }
.tl-row { display:flex; gap:1.2rem; padding-bottom:2rem; position:relative }
.tl-row:last-child { padding-bottom:0 }
.tl-col { display:flex; flex-direction:column; align-items:center; min-width:36px }
.tl-dot { width:11px; height:11px; border-radius:50%; background:var(--gold); border:2px solid var(--bg); flex-shrink:0; margin-top:4px; box-shadow:0 0 0 3px var(--gold-soft) }
.tl-line { flex:1; width:2px; background:linear-gradient(to bottom,var(--gold),var(--border)); margin-top:4px }
.tl-row:last-child .tl-line { display:none }
.tl-yr { font-size:.7rem; color:var(--gold); font-weight:700; letter-spacing:.04em; margin-bottom:.22rem }
.tl-ti { font-size:.98rem; font-weight:700; color:var(--text); margin-bottom:.28rem }
.tl-de { font-size:.86rem; color:var(--text-sub); line-height:1.58; font-weight:300 }

.vals-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:2rem }
.val-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.3rem; transition:all .25s }
.val-card:hover { border-color:var(--gold-border); transform:translateX(4px) }
.val-ico { font-size:1.5rem; margin-bottom:.6rem }
.val-t { font-size:.94rem; font-weight:700; color:var(--text); margin-bottom:.25rem }
.val-d { font-size:.83rem; color:var(--text-sub); font-weight:300; line-height:1.5 }

/* ╔══════════════════════════════════════════════╗
   ║            CONTACT PAGE                     ║
   ╚══════════════════════════════════════════════╝ */
.ct-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:4rem; align-items:start }
.avail-pill {
  display:flex; align-items:center; gap:.75rem;
  background:var(--green-soft); border:1px solid rgba(52,211,153,.2); border-radius:12px;
  padding:1rem 1.4rem; margin-bottom:2rem;
}
.avail-dot { width:9px; height:9px; border-radius:50%; background:var(--green); flex-shrink:0; animation:glow 2s infinite }
.avail-txt { font-size:.87rem; color:var(--text); font-weight:500 }
.avail-txt span { color:var(--green); font-weight:700 }

.ct-cards { display:flex; flex-direction:column; gap:.85rem }
.ct-card {
  background:var(--card); border:1px solid var(--border); border-radius:13px;
  padding:1.1rem 1.4rem; display:flex; align-items:center; gap:1rem;
  cursor:pointer; transition:all .28s;
}
.ct-card:hover { border-color:var(--gold-border); transform:translateX(4px); box-shadow:var(--shadow-sm); background:var(--card-hover) }
.ct-ico { width:40px; height:40px; border-radius:10px; background:var(--gold-soft); border:1px solid var(--gold-border); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0 }
.ct-lbl { font-size:.68rem; color:var(--text-sub); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:.18rem }
.ct-val { font-size:.88rem; font-weight:600; color:var(--text) }
.ct-arr { margin-left:auto; color:var(--text-muted); transition:all .28s; font-size:1rem }
.ct-card:hover .ct-arr { color:var(--gold); transform:translateX(4px) }

/* Form */
.form-card { background:var(--card); border:1px solid var(--border); border-radius:22px; padding:2.4rem; box-shadow:var(--shadow-sm) }
.form-ttl { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:900; color:var(--text); margin-bottom:.35rem; letter-spacing:-.02em }
.form-st { font-size:.87rem; color:var(--text-sub); margin-bottom:2rem; font-weight:300 }
.f2 { display:grid; grid-template-columns:1fr 1fr; gap:.9rem }
.fg { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem }
.fl { font-size:.78rem; font-weight:700; color:var(--text); letter-spacing:.01em }
.fi, .fsel, .fta {
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:.72rem 1rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:.9rem;
  color:var(--text); width:100%; outline:none; transition:all .22s;
  -webkit-appearance:none; appearance:none;
}
.fsel { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath fill='%235a5a72' d='M5.5 7.5L1 3h9z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; cursor:pointer }
.fta { resize:vertical; min-height:115px }
.fi::placeholder, .fta::placeholder { color:var(--text-muted) }
.fi:focus, .fsel:focus, .fta:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft) }
.fi.err, .fsel.err, .fta.err { border-color:rgba(239,68,68,.55) }
.ferr { font-size:.72rem; color:#f87171; display:none; margin-top:.14rem }
.ferr.on { display:block }
.f-suc { display:none; text-align:center; padding:2.5rem 1rem }
.f-suc.on { display:block; animation:scaleIn .35s ease }
.suc-ic { font-size:3.5rem; margin-bottom:.9rem }
.suc-t { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:900; color:var(--text); margin-bottom:.5rem }
.suc-d { font-size:.9rem; color:var(--text-sub) }

.faq-section { margin-top:2.8rem }
.faq-hd { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:1.2rem }
.faq-list { display:flex; flex-direction:column; gap:.7rem }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:13px; overflow:hidden; transition:border-color .2s }
.faq-item.open { border-color:var(--gold-border) }
.faq-q { padding:1.05rem 1.3rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:1rem }
.faq-qt { font-weight:600; color:var(--text); font-size:.9rem }
.faq-tog { color:var(--text-sub); font-size:1.3rem; transition:all .3s; flex-shrink:0; line-height:1; font-weight:300 }
.faq-item.open .faq-tog { transform:rotate(45deg); color:var(--gold) }
.faq-a { max-height:0; overflow:hidden; transition:max-height .38s ease, padding .28s }
.faq-item.open .faq-a { max-height:200px; padding:0 1.3rem 1.1rem }
.faq-a p { font-size:.86rem; color:var(--text-sub); font-weight:300; line-height:1.68 }

/* ╔══════════════════════════════════════════════╗
   ║               FOOTER                        ║
   ╚══════════════════════════════════════════════╝ */
footer { background:var(--surface); border-top:1px solid var(--border); padding:4.5rem 5% 2rem }
.ft-in { max-width:1140px; margin:0 auto }
.ft-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3.5rem }
.ft-logo { font-family:'Playfair Display',serif; font-weight:900; font-size:1.3rem; color:var(--text); margin-bottom:.8rem }
.ft-logo span { color:var(--gold) }
.ft-bio { font-size:.85rem; color:var(--text-sub); font-weight:300; line-height:1.7; max-width:270px }
.ft-em { font-size:.82rem; color:var(--gold); margin-top:.8rem; display:block; font-weight:500 }
.ft-col h4 { font-size:.86rem; font-weight:700; color:var(--text); margin-bottom:1.1rem; letter-spacing:.02em }
.ft-col ul { list-style:none; display:flex; flex-direction:column; gap:.55rem }
.ft-col ul a { font-size:.84rem; color:var(--text-sub); cursor:pointer; transition:color .2s; font-weight:300 }
.ft-col ul a:hover { color:var(--gold) }
.ft-bot { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid var(--border); flex-wrap:wrap; gap:1rem }
.ft-c { font-size:.78rem; color:var(--text-muted) }
.ft-t { font-size:.78rem; color:var(--text-muted) }
.ft-t span { color:var(--gold) }

/* Back to top */
.btt {
  position:fixed; bottom:2rem; right:2rem;
  width:44px; height:44px; border:none; border-radius:12px;
  background:linear-gradient(135deg,var(--gold),var(--orange));
  color:#000; font-size:1rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:150; opacity:0; transform:translateY(12px); transition:all .3s;
  box-shadow:0 4px 18px rgba(251,191,36,.35);
}
.btt.show { opacity:1; transform:translateY(0) }
.btt:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(251,191,36,.5) }

/* Toast */
.toast {
  position:fixed; bottom:2rem; left:50%;
  transform:translateX(-50%) translateY(60px);
  background:var(--card); border:1px solid var(--border); border-radius:13px;
  padding:.88rem 1.5rem; font-size:.87rem; color:var(--text);
  z-index:700; opacity:0; pointer-events:none; white-space:nowrap;
  box-shadow:var(--shadow-md); transition:all .3s;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0) }
.toast.ok { border-color:rgba(52,211,153,.3); background:var(--green-soft) }
.toast.ok::before { content:'✓  '; color:var(--green); font-weight:700 }

/* ╔══════════════════════════════════════════════╗
   ║             RESPONSIVE                      ║
   ╚══════════════════════════════════════════════╝ */
@media(max-width:1060px) {
  .svc-grid  { grid-template-columns:1fr 1fr }
  .price-grid { grid-template-columns:1fr }
  .ft-top    { grid-template-columns:1fr 1fr; gap:2rem }
  .about-layout { grid-template-columns:1fr }
  .about-sticky { position:static; max-width:360px; margin:0 auto }
}
@media(max-width:900px) {
  .hero-grid   { grid-template-columns:1fr; text-align:center }
  .hero-vis    { display:none }
  .h-chips, .h-btns { justify-content:center }
  .h-sub       { margin:1rem auto 0 }
  .stats-wrap  { grid-template-columns:repeat(2,1fr) }
  .stat-box:nth-child(2) { border-right:none }
  .stat-box:nth-child(3), .stat-box:nth-child(4) { border-top:1px solid var(--border) }
  .prev-grid   { grid-template-columns:1fr 1fr }
  .why-grid    { grid-template-columns:1fr; gap:3rem }
  .ct-layout   { grid-template-columns:1fr }
  .nav-center  { display:none }
  .hbg         { display:flex }
  .svc-grid    { grid-template-columns:1fr }
}
@media(max-width:640px) {
  .prev-grid  { grid-template-columns:1fr }
  .pf-grid    { grid-template-columns:1fr }
  .mini-g     { grid-template-columns:1fr }
  .vals-grid  { grid-template-columns:1fr }
  .f2         { grid-template-columns:1fr }
  .m-meta     { grid-template-columns:1fr }
  .ft-top     { grid-template-columns:1fr }
  section     { padding:4.5rem 4% }
  .s-pt       { padding-top:7rem }
  .cta-block  { padding:2.5rem 1.5rem }
}