/* =======================================================
  Designed by PageMelo
  A Zarephia brand

  Visit the website: https://pagemelo.com
  Buy here: https://pagemelo.gumroad.com
  Follow for updates: https://instagram.com/hello.pagemelo

  License: Single Use Only
  Copyright © PageMelo. All rights reserved.
  ======================================================= */

/* ============ THEME & TOKENS ============ */
:root {
  --bg: #ffffff;
  --surface: #f7f8fb;
  --text: #101418;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #6c5ce7;     /* purple */
  --accent-contrast: #ffffff;
  --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
  --radius: 1.25rem;     /* 20px */
  --hero-font: 'Poppins', sans-serif;
  --content-font: 'Poppins', sans-serif;
  --nav-h: 76px; /* fallback; refined precisely by JS on load */
}
html[data-theme="dark"] {
  --bg: #12171e;
  --surface: #1a212b;
  --text: #d7dee6;
  --muted: #98a2ae;
  --border: #2a3441;
  --accent: #22d3ee;     /* cyan */
  --accent-contrast: #05202a;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
html[data-theme="soft"] {
  --bg: #fffdfa;
  --surface: color-mix(in oklab, var(--accent) 5%, #fffaf4);
  --text: #1b1d21;
  --muted: #6f6b6b;
  --border: color-mix(in oklab, var(--accent) 9%, #f6efe8);
  --accent: #d99a5b;     /* warm sand, unisex — overridden per accentPreset at runtime */
  --accent-contrast: #2a1a0d;
  --shadow: 0 10px 30px rgba(217, 154, 91, 0.18);
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--hero-font), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
h1, h2, h3, h4, h5, h6, .navbar-brand, .section-title { font-family: var(--hero-font), sans-serif; }
/* --content-font is intentionally reserved for the italic testimonial quotes below,
   matching the original design where Lora only ever appears there. */

.no-transition, .no-transition * { transition: none !important; }

.section-pad { padding: 90px 0; min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; scroll-margin-top: var(--nav-h); }

/* ==========================================================
   PREVIEW-ONLY OVERRIDE (added by Zarephia's editor)
   Only applies inside the live-preview iframe (script.js adds
   this class), never on the real deployed site. Full-viewport
   sections are correct and intentional for an actual visitor's
   browser, but in a shrunk-down preview pane they mean lots of
   near-empty space per section. Here, sections size to their
   real content instead.
========================================================== */
.zarephia-preview-mode .section-pad,
.zarephia-preview-mode .hero {
  min-height: auto;
}
.section-pad > .container { width: 100%; }
.section-alt { background: var(--surface); }
.section-title { font-weight: 700; letter-spacing: -0.3px; margin-bottom: .6rem; }
.lead-muted { color: var(--muted); }

/* Wider side margins on larger screens */
@media (min-width: 992px) {
  .container { padding-left: 3rem; padding-right: 3rem; }
}
@media (min-width: 1400px) {
  .container { padding-left: 6rem; padding-right: 6rem; }
}
/* Mobile: Bootstrap's default ~12px container padding reads too tight */
@media (max-width: 767.98px) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* Tablet portrait (iPad Mini/Air/Pro 11", 768-834px, and similar):
   this band sits between the mobile and desktop container rules above and
   was falling back to Bootstrap's ~12px default gutter, reading far too
   tight for a screen this wide. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

/* Navbar */
.navbar { background: rgba(255,255,255,0.6); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
html[data-theme="dark"] .navbar { background: rgba(18,23,30,0.6); }
.brand-mark { display: inline-flex; align-items: center; gap: .55rem; }
.brand-dot { width: .55rem; height: .55rem; background: var(--accent); border-radius: 50%; flex: none; }
@media (min-width: 1200px) {
  .navbar-collapse { flex: 1 1 auto; }

  /* .navbar-nav's mx-xl-auto only lands dead-center when the brand block
     (left) and the theme/Hire-Me/toggler block (right) are equal width --
     they aren't, so the nav links drift toward whichever side is
     narrower. Center them against the navbar itself instead, independent
     of sibling widths. Kicks in at the same 1200px point the expanded
     (non-hamburger) nav itself appears, so there's always room for it. */
  .navbar > .container { position: relative; }
  .navbar-nav.mx-xl-auto {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Mobile-style (hamburger) navbar: a collapsed menu that reads like a
   clean list instead of cramped links, a brand name that truncates
   instead of wrapping/overflowing, and the theme switcher moved inside
   the menu (see .mobile-theme-row) so the top bar never wraps onto two
   lines. Deliberately extended through the whole tablet range (up to
   1200px, matching navbar-expand-xl) rather than switching to the
   expanded desktop nav at 992px: below 1200px there isn't reliably
   enough room for brand + 5 nav links + theme/Hire-Me/toggler side by
   side without them overlapping -- every iPad in every orientation
   falls in this range. */
@media (max-width: 1199.98px) {
  .brand-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navbar-nav .nav-link { padding: .75rem 0; border-bottom: 1px solid var(--border); }
  .navbar-nav .nav-item:last-child .nav-link { border-bottom: none; }

  /* Overlay the menu on top of the page instead of pushing content down.
     .navbar is position:sticky, which already acts as the containing
     block for this absolutely-positioned panel. */
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1035;
    margin-top: 0;
    padding: 0 1rem 1rem;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(0,0,0,.14);
  }
}
/* Tablet has real room to spare compared to a phone -- let the brand
   name breathe more before it gets truncated. Covers the same range as
   the hamburger nav above (768-1199px). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .brand-name { max-width: 260px; }
}
.mobile-theme-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .5rem; padding: .9rem 0; border-bottom: 1px solid var(--border);
}
.mobile-theme-label {
  font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.mobile-theme-btns { display: flex; gap: .4rem; }
.mobile-theme-btns .theme-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .65rem; font-size: .8rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.mobile-theme-btns .theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.navbar .nav-link { position: relative; color: var(--text); font-weight: 400; }
.navbar .nav-link:hover { color: var(--accent); }
.navbar .nav-link.active { color: var(--accent); font-weight: 700; }
.navbar .nav-link.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); border-radius: 2px;
}
.dropdown-menu {
  background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: calc(var(--radius) - .6rem);
}
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface); color: var(--accent); }
html[data-theme="dark"] .navbar-toggler-icon { filter: invert(1) brightness(1.6); }
.navbar-toggler { border-color: var(--border); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--accent) 30%, transparent); }
.navbar .btn { padding: .5rem 1.1rem; font-size: .9rem; }
.navbar-brand { color: var(--text) !important; }
.brand-name { font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
.brand-suffix {
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: .15rem .45rem; border: 1px solid var(--border); border-radius: 6px;
}
/* iPad Pro 12.9"/13" landscape only (1366x1024) -- the brand suffix
   crowds the navbar at this exact size. Scoped tightly (width AND height,
   plus touch-only) so it doesn't affect any other breakpoint, and doesn't
   accidentally catch common 1366x768 laptop screens, which share the
   width but not the height and aren't touch devices. */
@media (min-width: 1360px) and (max-width: 1372px) and (min-height: 1018px) and (max-height: 1030px) and (hover: none) and (pointer: coarse) {
  .brand-suffix { display: none !important; }
}

/* Buttons */
.btn-accent, .btn-soft {
  padding: .7rem 1.5rem;
  font-weight: 600;
  font-size: .95rem;
}
.btn-accent {
  --bs-btn-bg: var(--accent);
  --bs-btn-color: var(--accent-contrast);
  --bs-btn-hover-bg: color-mix(in oklab, var(--accent) 85%, black);
  --bs-btn-hover-color: var(--accent-contrast);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  border-radius: calc(var(--radius) - .5rem);
  box-shadow: 0 8px 18px color-mix(in oklab, var(--accent) 18%, transparent);
}
.btn-soft {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: calc(var(--radius) - .5rem);
  --bs-btn-hover-bg: var(--surface);
  --bs-btn-hover-color: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  transition: border-color .2s ease, color .2s ease;
}
@media (max-width: 767.98px) {
  .btn-icon-hide-mobile i { display: none; }
}

/* Hero */
.hero {
  padding: 90px 0;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  background:
    radial-gradient(800px 400px at 90% -20%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(600px 300px at -10% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--surface) 60%, transparent) 0%, transparent 40%);
}
.hero > .container { width: 100%; }
.hero-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.avatar {
  width: 64px; height: 64px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
}

.service-item { padding-left: 0; transition: transform .2s ease; }
.service-item:hover { transform: translateX(3px); }
.service-item > i { font-size: 1.5rem; color: var(--accent); display: block; margin-bottom: 1rem; }
.service-item ul { padding-left: 1.1rem; color: var(--muted); margin-bottom: 0; }
.service-item ul li { margin-bottom: .25rem; }
.services-grid { row-gap: 3.5rem; }
@media (max-width: 767.98px) {
  .services-grid { row-gap: 1.75rem; }
}

/* Pricing */
.pricing-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - .3rem);
  background: var(--bg);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pricing-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: 0 14px 32px color-mix(in oklab, var(--accent) 20%, transparent);
}
@media (min-width: 992px) {
  .pricing-card.featured { transform: scale(1.04); }
  .pricing-card.featured:hover { transform: scale(1.04) translateY(-4px); }
}
.pricing-badge {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-contrast);
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  padding: .3rem .9rem; border-radius: 999px; box-shadow: var(--shadow);
  white-space: nowrap;
}
.pricing-price { font-family: var(--hero-font), sans-serif; font-size: 2.2rem; font-weight: 700; margin: .25rem 0 1.25rem; color: var(--text); }
.pricing-period { font-size: .95rem; font-weight: 500; color: var(--muted); margin-left: .25rem; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 1.75rem; color: var(--muted); flex: 1 1 auto; }
.pricing-features li { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .65rem; font-size: .92rem; }
.pricing-features li i { color: var(--accent); margin-top: .2rem; flex: none; }
.pricing-card .btn { margin-top: auto; }

.tool-item { transition: transform .2s ease; cursor: default; }
.tool-item:hover { transform: translateY(-3px); }
.tool-item:hover .tool-icon { color: color-mix(in oklab, var(--accent) 80%, black); }
.tool-icon { display: block; font-size: 1.8rem; color: var(--accent); margin-bottom: .6rem; transition: color .2s ease; }

/* Tools grid: rendered as one <div class="tools-row"> per row group computed
   in JS (see initTools/_groupToolRows in script.js), not as a single flat
   wrapping grid -- a flat grid relying on the browser to wrap on its own
   can't guarantee a specific split like 7 -> 4-over-3.
   Each .tool-col has a FIXED width (not a percentage of the row), so every
   icon is the exact same size with the exact same gap around it in every
   row, whether that row has 5 items or 1. justify-content: center then
   centers the row as a block when it doesn't fill the full row width --
   sizing never has to be scaled down per row, which is what caused the
   cramped/uneven spacing in the row-scaling approach this replaces. */
.tools-grid { display: flex; flex-direction: column; gap: 2.75rem; }
.tools-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3rem; }
/* A row with the max 5 items spreads edge-to-edge across the full width
   instead of clustering at its fixed compact width -- the `gap` above still
   applies as a minimum, space-between just distributes any extra room. */
.tools-row-full { justify-content: space-between; }
.tool-col { flex: 0 0 92px; max-width: 92px; }
@media (min-width: 576px) {
  .tool-col { flex: 0 0 112px; max-width: 112px; }
  .tools-grid { gap: 3rem; }
  .tools-row { gap: 2.75rem 3.375rem; }
}
@media (min-width: 992px) {
  .tool-col { flex: 0 0 140px; max-width: 140px; }
  .tools-grid { gap: 3.75rem; }
  .tools-row { gap: 3.25rem 4.125rem; }
}

.surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.icon-pill { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items:center; justify-content:center; background: color-mix(in oklab, var(--accent) 14%, var(--bg)); }

.trait-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.75rem 2.5rem; padding: 1.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.process-rows { display: grid; row-gap: 2.5rem; column-gap: 2rem; }
.process-step { position: relative; }
.step-num {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; margin-bottom: 1rem;
}
@media (min-width: 992px) {
  .process-step:not(.step-last)::after {
    content: ''; position: absolute; top: 1.1rem; left: calc(2.2rem + 12px); right: -1.5rem; height: 1px; background: var(--border);
  }
}
/* Below desktop, the precise column math isn't worth it — just stack in reading order */
@media (max-width: 991.98px) {
  .process-rows { display: flex; flex-direction: column; gap: 2rem; }
}
.trait-item { display: flex; align-items: center; gap: .8rem; }
.trait-item > i { font-size: 1.3rem; color: var(--accent); flex: none; }
.card-clean { border: 1px solid var(--border); border-radius: calc(var(--radius) - .3rem); background: var(--bg); box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card-clean:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 24px color-mix(in oklab, var(--accent) 16%, transparent); }
.card-clickable { cursor: pointer; }
.card-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card-clickable .btn { position: relative; z-index: 1; }

/* Tags */
.tag { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border-radius:999px; border:1px solid var(--border); background: var(--surface); font-size:.85rem; color: var(--muted); }
.tag i { color: var(--accent); }

/* Skills (About) */
.skills-grid { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Selected Work — cards */
.work-fan { position: relative; height: 92px; margin-bottom: 14px; }
.work-fan.no-thumbs { height: 28px; }
.work-fan .thumb {
  position: absolute; width: 92px; height: 70px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  box-shadow: var(--shadow); overflow: hidden;
}
.work-fan .thumb img, .work-fan .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan-play-badge {
  position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .7rem; pointer-events: none;
}
.work-fan .thumb:nth-child(1) { left: 8px;  top: 16px; transform: rotate(-8deg); z-index: 1; }
.work-fan .thumb:nth-child(2) { left: 36px; top: 6px;  transform: rotate(3deg);  z-index: 2; }
.work-fan .thumb:nth-child(3) { left: 64px; top: 12px; transform: rotate(11deg); z-index: 1; }
.work-stat {
  position: absolute; right: 0; top: 0; z-index: 3;
  background: color-mix(in oklab, var(--accent) 16%, var(--bg)); color: var(--accent);
  font-weight: 600; font-size: .78rem; padding: .3rem .65rem; border-radius: 999px;
}
.work-eyebrow { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }

/* Themed modal for case studies */
.modal-content { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-header { padding-right: 1.5rem; }
.btn-close { filter: var(--bs-btn-close-white, none); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
@media (max-width: 767.98px) {
  /* Drag handle affordance + swipe-to-dismiss target */
  .modal-header {
    position: relative;
    padding-top: 1.5rem;
    touch-action: none;
  }
  .modal-header::before {
    content: "";
    position: absolute;
    top: .5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
  }
}
.gallery-grid { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.gallery-grid.count-1 { grid-template-columns: 1fr; }
.gallery-grid.count-1 .g-item { aspect-ratio: 16 / 9; }
.gallery-grid.count-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-grid.count-3 { grid-template-columns: repeat(3, 1fr); }
.g-item {
  aspect-ratio: 4 / 3; border-radius: 12px; background: var(--surface);
  border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--muted); overflow: hidden; cursor: zoom-in; position: relative;
}
.g-item img, .g-item video { width: 100%; height: 100%; object-fit: cover; }
.gallery-hero-wrap { margin-bottom: 1.5rem; }
.gallery-hero {
  aspect-ratio: 16 / 9; border-radius: 12px; background: var(--surface);
  border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--muted); overflow: hidden; margin-bottom: .5rem; cursor: zoom-in; position: relative;
}
.gallery-hero img, .gallery-hero video { width: 100%; height: 100%; object-fit: cover; }
.gallery-zoom-hint {
  position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.gallery-strip { display: grid; gap: .4rem; }
.gallery-thumb {
  aspect-ratio: 1 / 1; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  cursor: zoom-in; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--muted);
  position: relative;
}
.gallery-thumb img, .gallery-thumb video { width: 100%; height: 100%; object-fit: cover; }
/* Play badge overlay shown on video thumbnails/hero (videos stay muted with
   no controls until opened full-size in the lightbox) */
.gallery-play-badge {
  position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .95rem; pointer-events: none;
}
.gallery-play-badge-lg { width: 54px; height: 54px; font-size: 1.4rem; }
/* Shown in place of a video/embed thumbnail when no preview image is
   available (e.g. a Vimeo/Loom thumbnail failed to load) */
.embed-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--muted);
}
.lightbox {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 2000;
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-stage { max-width: 88vw; max-height: 82vh; display: flex; align-items: center; justify-content: center; }
.lightbox-stage img, .lightbox-stage video { max-width: 88vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
/* YouTube/Vimeo/Loom links play in an iframe instead of a <video> tag */
.lightbox-embed { width: min(88vw, 1100px); aspect-ratio: 16 / 9; }
.lightbox-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; }
.lightbox-embed-fallback {
  aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: rgba(255,255,255,.04); border-radius: 8px; padding: 28px 24px;
}
.lightbox-embed-fallback img { width: 100%; max-width: 480px; border-radius: 8px; object-fit: cover; }
.lightbox-embed-fallback p { max-width: 420px; text-align: center; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: fixed; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 50%;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer;
}
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-count { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .85rem; opacity: .8; }
.case-block + .case-block { margin-top: 1rem; }
.case-label { font-weight: 600; font-size: .82rem; color: var(--accent); margin-bottom: .25rem; }
.modal-columns { display: block; }
.modal-media { margin-bottom: 0; }
.modal-info-solo { max-width: 640px; margin: 0 auto; }
@media (min-width: 768px) {
  .modal-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
  .modal-media .gallery-hero-wrap, .modal-media .gallery-grid { margin-bottom: 0; }
}
/* Tablet portrait (iPad, etc.): Bootstrap doesn't widen .modal-lg/.modal-xl
   past its base 500px until 992px, but the two-column case-study layout
   above already switched on at 768px -- so tablets were squeezing a
   gallery + text side by side into ~230px each. Give the wide modals room
   to match, since tablets have the width to spare. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .modal-lg, .modal-xl { max-width: 700px; }
}

.contact-row { border-top: 1px solid var(--border); }
.contact-link {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 0;
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
  transition: gap .2s ease;
}
.contact-link:hover { gap: 1.15rem; }
.contact-link > i { font-size: 1.3rem; color: var(--accent); flex: none; }
@media (max-width: 991.98px) {
  .contact-faq-col { margin-top: 1.5rem; }
}
.accordion-item { background: transparent; border: 1px solid var(--border); border-radius: calc(var(--radius) - .6rem) !important; margin-bottom: .6rem; overflow: hidden; }
.accordion-button { background: var(--surface); color: var(--text); font-weight: 600; }
.accordion-button:not(.collapsed) { background: color-mix(in oklab, var(--accent) 10%, var(--surface)); color: var(--text); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--accent) 25%, transparent); }
.accordion-button::after { filter: none; }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.8); }
.accordion-body { background: var(--bg); color: var(--muted); }
footer { border-top: 1px solid var(--border); }

.testimonial-feature { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.testimonial-feature > i { font-size: 2rem; color: var(--accent); }
.testimonial-quote { font-family: var(--content-font), 'Lora', serif; font-style: italic; font-size: 1.5rem; line-height: 1.5; color: var(--text); margin: .5rem 0 1rem; }
.testimonial-grid { display: flex; flex-direction: column; gap: 3rem; }
.testimonial-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3rem; }
.testimonial-support { flex: 1 1 260px; max-width: 320px; }
.testimonial-support blockquote { font-family: var(--content-font), 'Lora', serif; font-style: italic; font-size: 1.05rem; line-height: 1.6; color: var(--text); margin: 0 0 .6rem; }
.muted { color: var(--muted); }
.link-accent { color: var(--accent); text-decoration: none; }
.link-accent:hover { text-decoration: underline; }

/* Back to top */
#backToTop {
  position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: none;
  border-radius: 999px; padding: .7rem .9rem;
  background: var(--accent); color: var(--accent-contrast); border: none; box-shadow: var(--shadow);
}

/* Smooth anchor offset for fixed navbar */
:target { scroll-margin-top: var(--nav-h); }

/* On mobile, don't force sections to fill the full viewport height and
   center their content — that's what leaves a gap under the navbar when
   a section is shorter than the screen. Let content flow naturally instead. */
@media (max-width: 991.98px) {
  .hero,
  .section-pad {
    min-height: auto;
    display: block;
  }
}
/* Tablet landscape (iPad Mini/Air/Pro 11" landscape: ~1024-1194px wide but
   only ~768-834px tall) lands above the 992px desktop breakpoint, so it
   was still getting the full-viewport-height, vertically-centered
   treatment meant for desktop -- on a screen this short and wide that
   reads cramped/oddly centered. Gated to touch devices (hover:none,
   pointer:coarse) so a desktop browser window resized to the same width
   keeps its normal centered hero. */
@media (min-width: 992px) and (max-width: 1200px) and (hover: none) and (pointer: coarse) {
  .hero,
  .section-pad {
    min-height: auto;
    display: block;
  }
}

/* ===== PageMelo adjustments (October 2026) ===== */

/* Navbar name on phones and tablets: uses the room the navbar has (it was
   capped at 150px, so "My Verylongn..." even on roomy tablets). script.js
   (fitBrandName) shrinks the text down to 15px if needed, then lets it wrap
   onto two lines (.is-two-lines). */
@media (max-width: 1199.98px) {
  .navbar > .container { flex-wrap: nowrap; }
  .navbar-brand { min-width: 0; flex: 1 1 auto; margin-right: .75rem; }
  .brand-mark { min-width: 0; max-width: 100%; }
  .brand-name { max-width: 100%; }
  .brand-name.is-two-lines {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
}
/* The smallest phones (under 360px) leave the name only ~125px beside the
   theme and menu buttons, so it may take a third line there. */
@media (max-width: 359.98px) {
  .brand-name.is-two-lines { -webkit-line-clamp: 3; }
}

/* Long unbroken text (a pasted link, a very long word) wraps instead of
   running off the side on phones -- as in the Pearls. */
p, li, h1, h2, h3, h4, h5, h6, blockquote {
  overflow-wrap: anywhere;
}

/* Space under the navbar on tablets and phones (owner's report, October
   2026). The hero has 90px above and below; on a computer it's centered in
   a full screen, but where it isn't (under 992px, and touch tablets in
   landscape) all 90px sat right under the navbar. Less space on top there;
   the space below is unchanged. */
@media (max-width: 991.98px) {
  .hero { padding-top: 40px; }
}
@media (max-width: 575.98px) {
  .hero { padding-top: 32px; }
}
@media (min-width: 992px) and (max-width: 1200px) and (hover: none) and (pointer: coarse) {
  .hero { padding-top: 48px; }
}

/* Copy button beside the email address (PageMelo, October 2026): the
   address is always shown, and copying it doesn't depend on an email app.
   Takes the text color around it, so it suits light and dark themes. */
.copy-email {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  padding: 0.3em 0.8em;
  min-height: 32px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  background: transparent;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.copy-email:hover,
.copy-email:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: currentColor;
}
.copy-email.is-copied { border-color: currentColor; }
@media (hover: none) and (pointer: coarse) {
  .copy-email { min-height: 44px; padding: 0.3em 1em; }
}

/* Opal's email card: the card used to be one big link; now the address is
   the link and the Copy button sits beside it (a button can't sit inside a
   link). */
.contact-email-card:hover { gap: .9rem; }
.contact-email-body { min-width: 0; }
.contact-email-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.contact-email-address { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.contact-email-address:hover { color: var(--accent); }

/* Pricing: a lone card on the last row sits in the middle, as wide as the
   cards above it (owner, October 2026). The grid fits 2 plans per row at
   768-991px (3 plans = 2 + 1) and 3 per row at 992-1399px (4 plans =
   3 + 1); it used to leave the lone card at the left. The card spans the
   whole row and takes one column's width. Phones (one per row) and full
   rows are unchanged. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pricing-grid > .pricing-card:nth-child(3):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 1.75rem) / 2);
  }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .pricing-grid > .pricing-card:nth-child(4):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 2 * 1.75rem) / 3);
  }
}

/* The case-study window's Close button at the bottom (October 2026): full
   width on phones, where the X is far up a long window. */
.portfolio-modal .modal-footer { padding: .75rem 1.5rem 1.25rem; }
@media (max-width: 767.98px) {
  .portfolio-modal .modal-footer { padding: .75rem 1rem 1rem; }
  .portfolio-modal .modal-close-bottom { width: 100%; min-height: 44px; margin: 0; }
}