/* ═══════════════════════════════════════
   ONE7 Agency — Shared Design System
   shared.css · used by every page
   ═══════════════════════════════════════ */

/* ── Reset & Root ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img {
  max-width: 100%; height: auto; display: block;
  /* Download protection */
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none; /* iOS long-press save */
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;        /* no right-click on <img> element itself */
}

:root {
  --bg:         #000000;
  --bg-card:    #111111;
  --bg-card2:   #161616;
  --border:     #222222;
  --border-mid: #333333;
  --text:       #ffffff;
  --text2:      rgba(255,255,255,.72);
  --text3:      rgba(255,255,255,.38);
  --accent:     #2937b1;
  --grad1:      #60b58e;
  --grad2:      #6687b5;
  --font-d:     'Barlow', sans-serif;
  --font-b:     'Barlow', sans-serif;
  --radius:     14px;
  --radius-sm:  8px;
  --radius-xs:  6px;
  --nav-h:      85px;
  --section-px: 80px;
  --section-py: 100px;
  --transition: .22s cubic-bezier(.22,1,.36,1);
}

/* ── Gaza — Arabic title font (self-hosted, by PCRF) ──
   Drop font file at: fonts/Gaza-Regular.woff2  (or .ttf as fallback)
   The unicode-range below ensures Gaza ONLY renders Arabic glyphs;
   Latin text continues to use its existing font (Wix Madefor / Barlow). */
@font-face {
  font-family: 'Gaza';
  src: url('fonts/Gaza-Regular.woff2') format('woff2'),
       url('fonts/Gaza-Regular.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
/* Apply Gaza ONLY when the project name is detected as Arabic.
   The JS card-renderer adds the .ar class only when the title contains Arabic glyphs.
   English titles never get this class → they keep the default website font. */
html body .work-card-name.ar,
html body .port-name.ar,
html body .work-card-name .ar,
html body .port-name .ar,
html body .modal-title .ar {
  font-family: 'Gaza', var(--font-d), system-ui, sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  overflow-x: hidden;
  /* NO padding-top — header is the sticky spacer */
}

/* ── Typography helpers ── */
.grad-text {
  background: linear-gradient(135deg, #60b58e, #6687b5, #9d7fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: #7b8fff; margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-d); font-weight: 800;
  font-size: clamp(30px, 3.5vw, 48px); letter-spacing: -1px;
  line-height: 1.08; color: var(--text); margin-bottom: 16px;
}
.section-subtitle {
  font-size: 16px; line-height: 1.72; color: var(--text2); max-width: 600px;
}

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, var(--grad1), var(--grad2));
  color: #fff; font-family: var(--font-b); font-weight: 600; font-size: 14px;
  padding: 13px 26px; border-radius: var(--radius-sm); text-decoration: none;
  border: none; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: .1px;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(96,181,142,.25);
  opacity: .95;
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-primary:focus-visible { outline: 2px solid var(--grad1); outline-offset: 3px; }

.btn-outline {
  background: transparent; color: var(--text); font-family: var(--font-b);
  font-weight: 600; font-size: 14px; padding: 13px 26px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-mid);
  text-decoration: none; cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: .1px;
}
.btn-outline:hover {
  border-color: #444;
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
}
.btn-outline:active { transform: translateY(0); }
.btn-outline:focus-visible { outline: 2px solid var(--grad1); outline-offset: 3px; }

.btn-sm { padding: 8px 16px; font-size: 13px; border-radius: var(--radius-xs); }

/* ── Skip link & screen-reader utilities ── */
.skip-link {
  position: absolute; top: -100%; left: 16px; z-index: 9999;
  background: var(--bg-card); color: var(--text);
  font-size: 13px; font-weight: 600; padding: 10px 18px;
  border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════
   NAVBAR — header is the sticky container
══════════════════════════════════════ */
header {
  position: sticky;
  top: 0;
  z-index: 300;
  height: var(--nav-h);
  background: rgba(6,6,6,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

nav {
  /* pure layout — no positioning needed */
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--section-px);
  height: 100%;
}

.nav-logo {
  font-family: var(--font-d); font-weight: 800; font-size: 22px;
  letter-spacing: -.5px; color: var(--text); text-decoration: none;
  flex-shrink: 0;
}
.nav-logo span {
  background: linear-gradient(135deg, var(--grad1), var(--grad2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links li a {
  font-family: var(--font-b); font-weight: 500; font-size: 14px;
  color: rgba(255,255,255,.78); text-decoration: none; padding: 9px 14px;
  border-radius: var(--radius-xs);
  transition: background var(--transition), color var(--transition);
  cursor: pointer; display: block; white-space: nowrap;
}
.nav-links li a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-links li a.active { background: rgba(255,255,255,.08); color: #fff; font-weight: 600; }

.nav-cta {
  background: linear-gradient(135deg, var(--grad1), var(--grad2));
  color: #fff; font-family: var(--font-b); font-weight: 600; font-size: 13px;
  padding: 10px 18px; border-radius: var(--radius-xs); border: none;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  white-space: nowrap; text-decoration: none; display: inline-block;
  letter-spacing: .1px;
}
.nav-cta:hover { opacity: .88; transform: translateY(-1px); }

/* ── Section wrapper ── */
.section { padding: var(--section-py) var(--section-px); }
.section.alt { background: transparent; }

/* ── Unified section divider — soft fading gradient line between consecutive sections ── */
.section + .section { position: relative; }
.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 2 * var(--section-px)));
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  pointer-events: none;
}

/* Soften existing hero & marquee dividers for consistency */
.page-hero { border-bottom-color: rgba(255,255,255,.07); }
.clients   { border-top-color: rgba(255,255,255,.07); border-bottom-color: rgba(255,255,255,.07); }
.section-header-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 56px;
}

/* ── Cards — Service ── */
.service-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.service-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-mid);
  box-shadow: 0 20px 48px rgba(0,0,0,.5);
}
.service-img { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.service-img svg { width: 48%; height: 48%; }
.service-info { padding: 22px; border-top: 1px solid var(--border); }
.service-title {
  font-family: var(--font-d); font-weight: 700; font-size: 16px;
  letter-spacing: -.2px; color: var(--text); margin-bottom: 8px;
}
.service-desc { font-size: 13px; line-height: 1.65; color: var(--text2); }

/* ── Cards — Portfolio ── */
.port-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.port-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-mid);
  box-shadow: 0 20px 48px rgba(0,0,0,.5);
}
.port-thumb {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.port-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .5s var(--transition);
}
.port-card:hover .port-thumb img { transform: scale(1.06); }
.port-thumb svg { width: 48%; height: 48%; opacity: .45; flex-shrink: 0; }

.port-info {
  padding: 14px 18px; display: flex; align-items: center;
  justify-content: space-between; border-top: 1px solid var(--border);
  gap: 12px;
}
.port-name {
  font-family: var(--font-d); font-weight: 600; font-size: 14px;
  letter-spacing: -.15px; color: var(--text); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.port-view {
  background: transparent; border: 1px solid var(--border-mid); border-radius: var(--radius-xs);
  padding: 8px 16px; font-family: var(--font-b); font-size: 12px; font-weight: 600;
  color: var(--text2); cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  white-space: nowrap; flex-shrink: 0;
}
.port-view:hover { border-color: #555; color: #fff; background: rgba(255,255,255,.06); }

/* ── Form inputs ── */
.form-input, .form-textarea, .form-select {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 16px;
  font-family: var(--font-b); font-size: 14px; color: var(--text);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text3); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: rgba(96,181,142,.4);
  background: rgba(255,255,255,.05);
}
.form-textarea { resize: vertical; min-height: 140px; }
.form-select { appearance: none; cursor: pointer; }
.form-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text3); margin-bottom: 8px;
}
.form-group { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer {
  border-top: 1px solid var(--border); padding: 48px var(--section-px);
  background: #030303;
}
/* ── Footer — single row on desktop ── */
.ft {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.ft-copy {
  font-size: 12px; color: var(--text3);
  flex: 1; text-align: center;
}
.ft-social-block { display: flex; align-items: center; gap: 12px; }
.ft-social-label {
  font-size: 11px; color: var(--text3); font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;
}
.ft-socials { display: flex; gap: 8px; }
.soc {
  width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); text-decoration: none;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.soc:hover { border-color: #444; color: #fff; background: rgba(255,255,255,.05); }
.soc svg { width: 15px; height: 15px; }

/* ══════════════════════════════════════
   CLIENTS — infinite scrolling marquee
══════════════════════════════════════ */
.clients {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 0 0 40px;
  background: var(--bg);
  /* no overflow:hidden here — label uses translateY(-50%) to straddle the top border */
}
.clients-label {
  margin-top: -1px;
  align-self: center;
  transform: translateY(-50%);
  font-size: 14px; font-weight: 600; letter-spacing: -.1px;
  color: var(--text); white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 28px;
  position: relative; z-index: 1;
}
.clients-scroll {
  width: 100%;
  overflow: hidden;
  padding-top: 8px;
}
.clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 22s linear infinite;
}
.clients-scroll:hover .clients-track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}
.client-logo-img {
  height: 80px; width: auto; max-width: 180px;
  object-fit: contain; flex-shrink: 0;
  opacity: .75; transition: opacity .3s;
  mix-blend-mode: lighten;
  display: block;
  margin-right: 80px; /* space carried per-item — not gap, so loop seam is exact */
}
.client-logo-img:hover { opacity: 1; }

/* ── Animations ── */
.fade-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity .65s var(--transition), transform .65s var(--transition);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}

/* ── Hero badge ── */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(41,55,177,.1); border: 1px solid rgba(41,55,177,.25);
  color: #7b8fff; font-size: 11px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; padding: 7px 16px; border-radius: 100px; margin-bottom: 32px;
}
.hero-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #7b8fff; animation: pulse 2s infinite;
}

/* ── Page hero (inner pages) ── */
.page-hero {
  padding: 80px var(--section-px) 64px; text-align: center;
  border-bottom: 1px solid var(--border); position: relative; overflow: hidden;
  background-color: var(--bg);
}
.page-hero .section-label { text-align: center; }
.page-hero .section-title { text-align: center; }
.page-hero p {
  font-size: 16px; line-height: 1.72; color: var(--text2);
  max-width: 560px; margin: 12px auto 0;
}

/* ── Coming soon badge ── */
.coming-soon-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,153,50,.1); border: 1px solid rgba(255,153,50,.22);
  color: #ffaa44; font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 20px;
}

/* ══════════════════════════════════════
   NAV DROPDOWN — Work categories
══════════════════════════════════════ */
.nav-has-dropdown { position: relative; }

.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 3px; cursor: pointer;
}
.nav-dropdown-trigger svg { flex-shrink: 0; transition: transform var(--transition); }
.nav-has-dropdown:hover .nav-dropdown-trigger svg,
.nav-has-dropdown:focus-within .nav-dropdown-trigger svg {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%; transform: translateX(-50%) translateY(-8px);
  width: 320px;
  background: rgba(10,10,10,.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 28px 72px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 400; pointer-events: none;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}
.nav-dropdown::before {
  content: ''; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 100%; height: 14px;
}
.nav-dropdown-inner {
  padding: 8px; display: flex; flex-direction: column; gap: 1px;
}
.nav-dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none;
  transition: background var(--transition);
}
.nav-dropdown-item:hover { background: rgba(255,255,255,.07); }
.nav-dropdown-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nav-dropdown-label { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.2; margin-bottom: 2px; }
.nav-dropdown-sub { font-size: 11px; color: var(--text3); line-height: 1.3; }
.nav-dropdown-all {
  display: flex; align-items: center; justify-content: center;
  margin: 4px 0 2px; padding: 10px;
  font-size: 12px; font-weight: 600; color: var(--text3);
  text-decoration: none; border-top: 1px solid var(--border);
  transition: color var(--transition); gap: 6px;
}
.nav-dropdown-all:hover { color: var(--text); }

/* ══════════════════════════════════════
   MOBILE NAV — hamburger + slide panel
══════════════════════════════════════ */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 38px; height: 38px; cursor: pointer;
  border: 1px solid var(--border-mid); border-radius: 8px;
  padding: 9px 8px; background: none; flex-shrink: 0;
  transition: border-color var(--transition);
}
.nav-hamburger:hover { border-color: #444; }
.nav-hamburger span {
  display: block; width: 100%; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: all .28s cubic-bezier(.22,1,.36,1);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-panel {
  /* HIDDEN by default — multiple layers of hiding for reliability */
  display: none;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: rgba(6,6,6,.98);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--border);
  z-index: 299;
  padding: 10px 14px 18px;
  flex-direction: column; gap: 2px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.mobile-nav-panel a {
  font-size: 15px; font-weight: 500; color: var(--text2);
  text-decoration: none; padding: 13px 14px; border-radius: 10px;
  transition: background var(--transition), color var(--transition);
}
.mobile-nav-panel a:hover { background: rgba(255,255,255,.05); color: #fff; }
.mobile-nav-panel a.active { color: #fff; font-weight: 600; background: rgba(255,255,255,.07); }
.mobile-nav-panel .mobile-cta {
  margin-top: 10px;
  background: linear-gradient(135deg, var(--grad1), var(--grad2));
  color: #fff; font-weight: 600; font-size: 14px;
  text-align: center; border-radius: 10px; padding: 13px;
  text-decoration: none; display: block;
}

/* ══════════════════════════════════════
   TABLET  ≤ 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  :root {
    --nav-h: 60px;
    --section-px: 20px;
    --section-py: 60px;
  }

  /* nav */
  nav { padding: 0 20px; }
  .nav-logo img { height: 22px !important; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  /* mobile panel — show/hide via hamburger only */
  .mobile-nav-panel { display: none; visibility: hidden; pointer-events: none; top: 60px; }
  .mobile-nav-panel.open { display: flex !important; visibility: visible; pointer-events: all; }

  /* sections */
  .section-header-row { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; }

  /* clients */
  .clients { padding: 0 0 28px; }
  .clients-label { font-size: 12px; padding: 9px 22px; }
  .client-logo-img { height: 64px !important; max-width: 130px; margin-right: 56px; }

  /* page hero */
  .page-hero { padding: 64px 20px 48px; }
  .page-hero .section-title { font-size: clamp(26px, 5vw, 38px); }

  /* footer — mobile: logo|socials row, then copyright centered below */
  footer { padding: 28px 20px; }
  .ft { flex-wrap: wrap; gap: 12px; }
  .ft .nav-logo { flex: 0 0 auto; }
  .ft-social-block { flex: 0 0 auto; }
  .ft-social-label { display: none; } /* hide "FOLLOW US" on mobile */
  .ft-copy { order: 3; flex: 0 0 100%; padding-top: 12px; border-top: 1px solid var(--border); }

  /* cards */
  .port-card .port-info { flex-direction: column; align-items: flex-start; gap: 10px; }
  .service-card .service-img { aspect-ratio: 4/3; }

  /* forms */
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ══════════════════════════════════════
   MOBILE  ≤ 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  :root {
    --nav-h: 56px;
    --section-px: 16px;
    --section-py: 48px;
  }

  /* nav */
  nav { padding: 0 16px; }
  .nav-logo img { height: 20px !important; }
  .mobile-nav-panel { top: 56px !important; }
  .mobile-nav-panel.open { top: 56px !important; }

  /* global typography */
  .section-title { font-size: clamp(22px, 6.5vw, 32px) !important; letter-spacing: -.3px; }
  .section-label { font-size: 10px; letter-spacing: 2px; margin-bottom: 10px; }
  .section-header-row { gap: 14px; margin-bottom: 28px; }

  /* buttons */
  .btn-primary { font-size: 14px; padding: 13px 22px; }
  .btn-outline  { font-size: 14px; padding: 13px 22px; }

  /* clients */
  .clients { padding: 0 0 20px; }
  .clients-label { font-size: 11px; padding: 7px 18px; }
  .client-logo-img { height: 52px !important; max-width: 100px; margin-right: 40px; }

  /* page hero */
  .page-hero { padding: 52px 16px 36px; }
  .page-hero .section-title { font-size: clamp(22px, 6vw, 30px); }
  .page-hero p { font-size: 14px; line-height: 1.65; }

  /* footer */
  footer { padding: 28px 16px; }
  .ft-links { gap: 12px; }
  .ft-links a { font-size: 13px; }
  .ft-socials { gap: 6px; }
  .soc { width: 34px; height: 34px; }
  .ft-copy { font-size: 11px; }
  .ft-meta a { font-size: 11px; }
  .ft-meta-sep { font-size: 11px; padding: 0 7px; }

  /* cards */
  .port-card .port-thumb { aspect-ratio: 1; }
  .port-name { font-size: 13px; }
  .port-view { font-size: 11px; padding: 7px 12px; }

  /* modal */
  .modal-box { border-radius: 16px; }
  .modal-header { padding: 16px 20px; }
  .modal-title { font-size: 16px; }
  .modal-body { padding: 16px; }
  .modal-gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
}