/* ==========================================================================
   Doctors Branding — WordPress integration layer
   --------------------------------------------------------------------------
   The approved frontend carried some styling as inline `style` attributes and
   had no markup for WordPress-only features. Those declarations are lifted
   here VERBATIM (same values, same units) and joined by the core classes
   WordPress emits — editor content, captions, galleries, comments, pagination
   — plus the language switcher the bilingual build needs.

   Rule: nothing in this file changes an approved value. It only relocates
   inline styles into classes and covers markup the static build never had.
   Design tokens come from assets/css/style.css; none are redefined here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Footer — lifted from the inline styles on the static footer
   -------------------------------------------------------------------------- */
.site-footer{
  position:relative;
  z-index:2;
  border-top:1px solid var(--glass-border);
  padding-block:64px 32px;
}

.footer-brand-col .brand{
  margin-bottom:18px;
}

.footer-about{
  font-size:13.5px;
  max-width:300px;
  line-height:1.7;
}

.footer-col-title,
.footer-widget .footer-col-title{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-primary);
  margin-bottom:16px;
}

.site-footer .footer-links{
  font-size:13.5px;
}

.footer-socials .icon-badge{
  width:42px;
  height:42px;
}

.footer-address{
  font-style:normal;
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-icon{
  width:15px;
  height:15px;
  color:var(--c-medical);
  flex:none;
}

.footer-bottom{
  font-size:12.5px;
  color:var(--text-faint);
}

.footer-legal-links{
  display:flex;
  gap:24px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}

.footer-legal-links a{
  padding-block:10px;
}

/* --------------------------------------------------------------------------
   2. Video modal — lifted from the inline styles on #videoModal
   -------------------------------------------------------------------------- */
.video-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(2,3,6,.88);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-radius:0;
}

.video-modal.open{
  display:flex;
}

.video-modal__inner{
  position:relative;
  width:min(880px,92vw);
  aspect-ratio:16/9;
}

.video-modal__close{
  position:absolute;
  top:-44px;
  right:0;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  display:grid;
  place-items:center;
}

.video-modal iframe{
  width:100%;
  height:100%;
  border-radius:var(--r-lg);
  border:1px solid var(--glass-border);
}

/* --------------------------------------------------------------------------
   3. Language switcher — new component, built only from existing tokens
   -------------------------------------------------------------------------- */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border-radius:var(--r-full);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-filter);
  -webkit-backdrop-filter:var(--glass-filter);
}

.lang-switch__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:6px 10px;
  border-radius:var(--r-full);
  font-family:var(--font-heading);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--text-muted);
  transition:color .25s ease, background .25s ease;
}

.lang-switch__item:hover{
  color:var(--text-primary);
}

.lang-switch__item.is-active{
  color:#fff;
  background:var(--grad-primary);
  box-shadow:var(--shadow-glow-blue);
}

.lang-switch--drawer{
  margin-top:16px;
  align-self:flex-start;
}

@media (max-width:1080px){
  .lang-switch--header{ display:none; }
}

/* --------------------------------------------------------------------------
   4. Editor content — the classes WordPress emits inside post/page content
   -------------------------------------------------------------------------- */
.entry-content > *{
  margin-bottom:1.25em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4{
  margin-top:1.8em;
  margin-bottom:.6em;
  font-family:var(--font-heading);
  color:var(--text-primary);
}

.entry-content h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); }
.entry-content h3{ font-size:clamp(1.3rem,2vw,1.6rem); }
.entry-content h4{ font-size:1.15rem; }

.entry-content p,
.entry-content li{
  color:var(--text-soft);
  line-height:1.8;
}

.entry-content a{
  color:var(--c-medical);
  text-decoration:underline;
  text-underline-offset:3px;
}

.entry-content a:hover{
  color:var(--c-primary);
}

.entry-content ul,
.entry-content ol{
  padding-left:1.4em;
}

.entry-content ul{ list-style:disc; }
.entry-content ol{ list-style:decimal; }

.entry-content blockquote{
  margin:2em 0;
  padding:20px 28px;
  border-left:3px solid var(--c-primary);
  border-radius:var(--r-sm);
  background:var(--glass-bg);
  color:var(--text-soft);
  font-size:1.05rem;
}

.entry-content code{
  padding:2px 6px;
  border-radius:6px;
  background:var(--glass-bg-strong);
  font-size:.9em;
}

.entry-content pre{
  padding:20px;
  border-radius:var(--r-sm);
  background:var(--bg-navy-900);
  border:1px solid var(--glass-border);
  overflow-x:auto;
}

.entry-content img,
.entry-content iframe,
.entry-content video{
  max-width:100%;
  height:auto;
  border-radius:var(--r-md);
}

.entry-content table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
}

.entry-content th,
.entry-content td{
  padding:12px 14px;
  border:1px solid var(--glass-border);
  text-align:left;
}

.entry-content th{
  background:var(--glass-bg);
  color:var(--text-primary);
}

.entry-content hr{
  border:0;
  height:1px;
  background:var(--glass-border);
  margin:2.5em 0;
}

/* Core alignment + caption classes */
.alignleft{ float:left; margin:0 1.5em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.5em; }
.aligncenter{ display:block; margin-inline:auto; }
.alignwide{ width:min(100%,1100px); margin-inline:auto; }
.alignfull{ width:100%; }

.wp-caption{ max-width:100%; }

.wp-caption-text,
.wp-element-caption{
  margin-top:8px;
  font-size:13px;
  color:var(--text-muted);
  text-align:center;
}

.screen-reader-text{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.sticky,
.bypostauthor{ /* Required by the WordPress theme review guidelines. */ }

/* --------------------------------------------------------------------------
   5. Pagination, archives and comments
   -------------------------------------------------------------------------- */
.db-pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:48px;
  flex-wrap:wrap;
}

.db-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:42px;
  padding:0 14px;
  border-radius:var(--r-full);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  color:var(--text-soft);
  font-size:14px;
  transition:color .25s ease, border-color .25s ease;
}

.db-pagination .page-numbers:hover{
  color:var(--text-primary);
  border-color:var(--glass-border-strong);
}

.db-pagination .page-numbers.current{
  color:#fff;
  background:var(--grad-primary);
  border-color:transparent;
  box-shadow:var(--shadow-glow-blue);
}

.db-comments{
  margin-top:64px;
}

.db-comments .comment-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.db-comments .comment-body{
  padding:20px 24px;
  border-radius:var(--r-md);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
}

.db-comments .children{
  list-style:none;
  margin:20px 0 0 24px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.db-comments input[type="text"],
.db-comments input[type="email"],
.db-comments input[type="url"],
.db-comments textarea{
  width:100%;
  padding:14px 16px;
  border-radius:var(--r-sm);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  color:var(--text-primary);
}

/* --------------------------------------------------------------------------
   6. Motion opt-out — the dashboard toggle and the OS preference
   -------------------------------------------------------------------------- */
body.no-motion [data-aos]{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

  .bg-fx .blob,
  #particles-canvas{ display:none; }
}

/* --------------------------------------------------------------------------
   7. Admin bar — keep the fixed header clear of it
   -------------------------------------------------------------------------- */
body.admin-bar .mobile-drawer{ top:32px; }

@media (max-width:782px){
  body.admin-bar .mobile-drawer{ top:46px; }
}

/* --------------------------------------------------------------------------
   8. Inline emphasis inside dashboard-authored copy
   Replaces the `<strong style="color:var(--text-primary)">` the static build
   used inline. Same rendered result, now editable from the dashboard.
   -------------------------------------------------------------------------- */
.hl-strong{
  color:var(--text-primary);
  font-weight:700;
}

/* --------------------------------------------------------------------------
   9. Hero — inline styles lifted from the static build, values unchanged
   -------------------------------------------------------------------------- */
.hero-proof-note{
  font-size:14px;
  color:var(--text-soft);
  margin-top:4px;
}

.hero-empower-line{
  font-size:14.5px;
  color:var(--text-soft);
  max-width:480px;
}

.float-card-value{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--text-primary);
  font-size:15px;
}

.float-card-label{
  font-size:11.5px;
  color:var(--text-muted);
}

.hero-pulse{
  position:absolute;
  top:42%;
  right:2%;
  width:60px;
  height:60px;
  border-radius:50%;
  display:grid;
  place-items:center;
  animation-delay:.6s;
}

/* --------------------------------------------------------------------------
   10. Why-branding, services, doctors and review cards
   -------------------------------------------------------------------------- */
.why-point-title{
  color:var(--text-primary);
}

.why-point-text{
  font-size:14px;
  margin-top:2px;
}

.why-stat-card{
  padding:28px;
}

.why-stat-card:nth-child(even){
  margin-top:32px;
}

.why-stat-card .stat-num{
  font-size:2.2rem;
}

.why-stat-text{
  font-size:14px;
  margin-top:8px;
}

.service-card{
  padding:26px;
}

.service-card-title{
  font-size:1.05rem;
  margin-top:16px;
}

.service-card-text{
  font-size:13.5px;
  margin-top:6px;
}

.doctor-tile{
  text-align:center;
  padding:0 8px;
}

.doctor-tile__media{
  width:100%;
  aspect-ratio:1;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:24px;
  background:linear-gradient(135deg, rgba(57,139,239,.1), rgba(24,70,129,.1));
  border:1px solid var(--glass-border);
}

.doctor-tile__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.doctor-tile__name{
  font-size:17px;
  font-weight:700;
  color:var(--text-primary);
  margin:0;
  letter-spacing:-.3px;
}

.doctor-tile__role{
  font-size:13px;
  color:var(--c-medical);
  margin:8px 0 0;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.google-badge-row{
  text-align:center;
  margin-bottom:48px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.google-badge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:50px;
  padding:12px 20px;
}

.google-badge__score{
  color:var(--text-primary);
  font-size:16px;
}

.google-badge__label{
  color:var(--text-muted);
  font-size:13px;
}

.review-card{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:28px;
  height:100%;
  display:flex;
  flex-direction:column;
}

.review-card__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:16px;
}

.review-card__person{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex:1;
}

.review-card__avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--grad-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  font-size:16px;
  flex-shrink:0;
  object-fit:cover;
}

.review-card__name{
  color:var(--text-primary);
  font-size:15px;
  display:block;
}

.review-card__meta{
  font-size:12px;
  color:var(--text-muted);
  margin:4px 0 0;
}

.review-card__date{
  font-size:12px;
  color:var(--text-muted);
  margin:0 0 12px;
}

.review-card__quote{
  font-size:14px;
  color:var(--text-primary);
  line-height:1.6;
  flex:1;
}

.review-card__result{
  margin-top:16px;
}

.reviews-cta{
  text-align:center;
  margin-top:48px;
}

.reviews-cta .btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

/* --------------------------------------------------------------------------
   11. Closing CTA band — inline styles lifted from the static build
   -------------------------------------------------------------------------- */
.final-cta{
  padding:clamp(36px,6vw,72px);
  position:relative;
  overflow:hidden;
}

.final-cta__blob{
  width:320px;
  height:320px;
  top:-100px;
  right:-80px;
  background:radial-gradient(circle,var(--c-navy-deep),transparent 70%);
  opacity:.35;
}

.final-cta-inner{
  position:relative;
  z-index:2;
}

.final-cta__title{
  font-size:clamp(1.8rem,3.6vw,2.8rem);
}

.final-cta__form{
  padding:28px;
  width:100%;
  max-width:360px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.final-cta__form-title{
  font-size:1.05rem;
}

.final-cta__form-msg{
  font-size:12.5px;
  min-height:16px;
}

/* The CTA band form stays compact and placeholder-led, unlike the fuller
   Contact page form — hide GF's visible labels here to match. */
.final-cta__form.dbrand-gform .gform_wrapper .gfield_label,
.final-cta__form.dbrand-gform .gform_wrapper .gform_fields{
  margin-bottom:0;
}

.final-cta__form.dbrand-gform .gform_wrapper .gfield_label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.final-cta__form.dbrand-gform .gform_wrapper .gform_fields{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.final-cta__form.dbrand-gform .gform_wrapper .gfield{
  margin-bottom:0 !important;
}

.final-cta__form.dbrand-gform .gform_footer{
  margin:0;
  padding:0;
}

.db-field{
  padding:15px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-border);
  color:var(--text-primary);
  font-size:14px;
  min-height:44px;
  width:100%;
}

.db-field::placeholder{
  color:var(--text-muted);
}

.db-field:focus-visible{
  outline:2px solid var(--c-primary);
  outline-offset:2px;
}

/* The honeypot must be unreachable for people but present in the DOM. */
.db-honeypot{
  position:absolute !important;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   12. WordPress-only page furniture
   Inner-page heroes, blog and case-study cards, FAQ accordion, contact rows.
   Built entirely from the existing tokens — no new colours, radii or spacing
   values are introduced here.
   -------------------------------------------------------------------------- */
.page-hero,
.archive-hero{
  padding-top:clamp(120px,14vw,180px);
  padding-bottom:clamp(24px,3vw,32px);
}

.page-hero .section-head,
.archive-hero .section-head{
  margin-bottom:0;
}

.page-featured{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-card);
  margin-bottom:clamp(32px,5vw,56px);
}

.page-featured img{
  display:block;
  width:100%;
  height:auto;
}

.page-content{
  max-width:820px;
  margin-inline:auto;
}

/* ---- Blog cards ---- */
.post-grid{
  gap:24px;
}

.post-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}

.post-card__media{
  display:block;
  aspect-ratio:3/2;
  overflow:hidden;
}

.post-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.post-card__body{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}

.post-card__meta{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--c-medical);
  margin:0;
}

.post-card__title{
  font-size:1.15rem;
  margin:0;
}

.post-card__title a{
  color:var(--text-primary);
}

.post-card__excerpt{
  font-size:13.5px;
  color:var(--text-soft);
  margin:0;
  flex:1;
}

.post-card__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--c-medical);
}

/* ---- FAQ accordion ---- */
.faq-group-title{
  font-size:1.3rem;
  margin:40px 0 18px;
}

.faq-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:860px;
  margin-inline:auto;
}

.faq-item{
  border-radius:var(--r-md);
  padding:0;
  overflow:hidden;
}

.faq-item__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1rem;
  color:var(--text-primary);
}

.faq-item__q::-webkit-details-marker{
  display:none;
}

.faq-item__chevron{
  width:18px;
  height:18px;
  flex:none;
  color:var(--c-medical);
  transition:transform .3s ease;
}

.faq-item[open] .faq-item__chevron{
  transform:rotate(180deg);
}

.faq-item__a{
  padding:0 24px 22px;
}

.faq-item__a p{
  margin:0;
  font-size:14.5px;
}

/* ---- Work filters ---- */
.work-filters .btn.is-active{
  color:#fff;
  background:var(--grad-primary);
  border-color:transparent;
  box-shadow:var(--shadow-glow-blue);
}

/* ---- Search + empty states ---- */
.db-search{
  display:flex;
  gap:10px;
  align-items:center;
}

.no-results{
  max-width:560px;
  margin-inline:auto;
  padding:40px;
  border-radius:var(--r-lg);
  text-align:center;
}

.no-results .icon-badge{
  margin-inline:auto;
  margin-bottom:18px;
}

.no-results__title{
  font-size:1.4rem;
  margin-bottom:10px;
}

.no-results__text{
  color:var(--text-soft);
  font-size:14.5px;
  margin-bottom:24px;
}

/* ---- Post navigation ---- */
.post-nav{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:56px;
  padding-top:28px;
  border-top:1px solid var(--glass-border);
  flex-wrap:wrap;
}

.post-nav__label{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--c-medical);
  margin-bottom:4px;
}

.post-nav__title{
  color:var(--text-primary);
  font-size:15px;
}

/* --------------------------------------------------------------------------
   13. About page
   All measurements lifted from the approved about-us.html build; the only
   change is moving its inline styles and its bespoke <style> block into
   classes so the same page becomes dynamic markup.
   -------------------------------------------------------------------------- */
.about-hero{
  padding:140px 0 80px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.about-hero::before{
  content:'';
  position:absolute;
  top:-120px;
  left:50%;
  transform:translateX(-50%);
  width:640px;
  height:640px;
  background:radial-gradient(circle, rgba(57,139,239,.14), transparent 70%);
  pointer-events:none;
}

.about-hero__inner{
  max-width:760px;
  margin-inline:auto;
  position:relative;
}

.about-hero__proof-text p{
  font-size:12.5px;
  color:var(--text-muted);
  margin:2px 0 0;
  text-align:left;
}

.about-banner{
  padding:0 0 64px;
}

.about-banner__frame{
  border-radius:var(--r-xl);
  overflow:hidden;
  padding:8px;
  max-width:1100px;
  margin-inline:auto;
}

.about-banner__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:calc(var(--r-xl) - 8px);
}

/* --------------------------------------------------------------------------
   27. About page team banner — optional click-to-play video
   Reuses .video-play-btn (assets/css/style.css) so the play affordance
   matches the video-testimonial cards exactly; only the positioning here is
   new, since the banner frame is a whole-width photo rather than a card.
   -------------------------------------------------------------------------- */
.about-banner__frame--video{
  position:relative;
  display:block;
  width:100%;
  cursor:pointer;
  border:none;
  font:inherit;
  color:inherit;
}

.about-banner__frame--video::after{
  content:'';
  position:absolute;
  inset:8px;
  border-radius:calc(var(--r-xl) - 8px);
  background:linear-gradient(0deg, rgba(2,3,6,.45) 0%, rgba(2,3,6,0) 40%);
  pointer-events:none;
}

.about-banner__play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}

.about-banner__frame--video:hover .about-banner__play{
  transform:translate(-50%,-50%) scale(1.1);
}

.about-stats{
  padding:56px 0;
  border-top:1px solid var(--glass-border);
  border-bottom:1px solid var(--glass-border);
}

.about-stats__grid{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:24px;
}

.stat-card--inline{
  display:flex;
  align-items:center;
  gap:16px;
  text-align:left;
  border-radius:var(--r-lg);
}

.stat-num--inline{
  justify-content:flex-start;
  font-size:clamp(1.6rem,3vw,2.1rem);
}

.about-tinted{
  background:rgba(25,35,60,.3);
}

.about-copy{
  font-size:16px;
  line-height:1.8;
  color:var(--text-soft);
  margin:24px 0;
}

.about-quote{
  padding:clamp(28px,4vw,44px);
  border-radius:var(--r-xl);
  position:relative;
}

.about-quote__mark{
  width:36px;
  height:36px;
  color:var(--c-medical);
  opacity:.5;
}

.about-quote__text{
  font-size:clamp(18px, 2.2vw, 22px);
  font-weight:600;
  color:var(--text-primary);
  line-height:1.5;
  margin:16px 0 0;
}

.about-quote__attribution{
  margin-top:28px;
}

.about-quote__photo{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
  object-position:top center;
}

.about-quote__name{
  font-weight:600;
  color:var(--text-primary);
  font-size:14.5px;
}

.about-quote__role{
  font-size:12.5px;
  color:var(--c-medical);
}

.about-numbered-grid{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:28px;
  max-width:1080px;
  margin-inline:auto;
}

.about-numbered-card{
  padding:32px;
  border-radius:var(--r-lg);
  position:relative;
}

.about-numbered-card .icon-badge{
  margin-bottom:20px;
}

.about-numbered-card__num{
  position:absolute;
  top:20px;
  right:24px;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:32px;
  color:var(--glass-border);
}

.about-numbered-card__title{
  font-size:18px;
  font-weight:600;
  color:var(--text-primary);
  margin:0 0 12px;
}

.about-numbered-card__text{
  font-size:14.5px;
  color:var(--text-soft);
  margin:0;
  line-height:1.7;
}

.about-values-grid{
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:24px;
  max-width:1080px;
  margin-inline:auto;
}

.about-value-card{
  padding:28px;
  border-radius:var(--r-lg);
}

.about-value-card .icon-badge{
  margin-bottom:20px;
}

.about-value-card__title{
  font-size:17px;
  font-weight:600;
  color:var(--text-primary);
  margin:0 0 12px;
}

.about-value-card__text{
  font-size:14px;
  color:var(--text-soft);
  margin:0;
  line-height:1.7;
}

/* ---- Our Approach — connected process track ---- */
.approach-track{
  --steps:3;
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:32px;
  max-width:1120px;
  margin-inline:auto;
}

.approach-line{
  position:absolute;
  top:26px;
  left:calc(100% / (var(--steps) * 2));
  right:calc(100% / (var(--steps) * 2));
  height:2px;
  background:linear-gradient(90deg, transparent, var(--glass-border-strong) 15%, var(--glass-border-strong) 85%, transparent);
  z-index:0;
}

.approach-step{
  position:relative;
  z-index:1;
}

.approach-step-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}

.approach-num{
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:800;
  color:var(--c-medical);
  letter-spacing:.04em;
}

.approach-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:14px;
  background:var(--grad-primary);
  box-shadow:0 8px 20px rgba(57,139,239,.25);
  flex:none;
}

.approach-icon svg,
.approach-icon i{
  width:24px;
  height:24px;
  color:#fff;
}

.approach-card{
  border-radius:var(--r-lg);
  padding:28px;
  text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
}

.approach-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(0,0,0,.18);
}

.approach-card h3{
  font-size:17px;
  font-weight:600;
  color:var(--text-primary);
  margin:0 0 12px;
}

.approach-card p{
  font-size:14.5px;
  color:var(--text-soft);
  margin:0;
  line-height:1.7;
}

@media (max-width:860px){
  .approach-track{ grid-template-columns:1fr; gap:24px; }
  .approach-line{ display:none; }
}

/* --------------------------------------------------------------------------
   14. Service page — feature groups, pricing tiers, and category archive
   -------------------------------------------------------------------------- */
.service-feature-grid{
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:24px;
}

.service-feature-card{
  padding:32px;
  border-radius:var(--r-lg);
}

.service-feature-card .icon-badge{
  margin-bottom:20px;
}

.service-feature-card__title{
  font-size:16px;
  font-weight:600;
  color:var(--text-primary);
  margin:0 0 10px;
}

.service-feature-card__text{
  font-size:13.5px;
  color:var(--text-soft);
  margin:0;
  line-height:1.6;
}

.service-tinted{
  background:rgba(25,35,60,.3);
}

.pricing-grid{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
}

.pricing-card{
  padding:32px;
  border-radius:var(--r-lg);
  position:relative;
}

.pricing-card--featured{
  border:2px solid var(--c-medical);
  background:rgba(57,139,239,.08);
}

.pricing-card__badge{
  position:absolute;
  top:-12px;
  left:20px;
  background:var(--c-medical);
  color:#fff;
  padding:4px 12px;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
}

.pricing-card__name{
  font-size:18px;
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 8px;
}

.pricing-card__text{
  font-size:13px;
  color:var(--text-soft);
  margin:0;
}

.pricing-card__price{
  display:block;
  margin:24px 0;
}

.pricing-card__amount{
  font-size:32px;
  font-weight:700;
  color:var(--c-medical);
}

.pricing-card__unit{
  font-size:13px;
  color:var(--text-soft);
}

.pricing-card__features{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  font-size:13px;
}

.pricing-card__features li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:10px;
  color:var(--text-soft);
}

.pricing-card__features li i{
  width:14px;
  height:14px;
  margin-top:2px;
  flex:none;
  color:var(--c-medical);
}

.pricing-card .btn{
  width:100%;
  justify-content:center;
}

/* ---- Services archive: category groups ---- */
.service-category{
  margin-bottom:56px;
}

.service-category:last-child{
  margin-bottom:0;
}

.service-category .section-head{
  margin-bottom:32px;
}

.service-category .section-title{
  font-size:1.6rem;
  margin-bottom:0;
}

/* ---- Services archive card: whole-card link variant ---- */
a.service-card{
  text-decoration:none;
  color:inherit;
  position:relative;
}

.service-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--c-medical);
  margin-top:18px;
  opacity:.85;
  transition:gap .25s ease, opacity .25s ease;
}

.service-link i,
.service-link svg{
  width:14px;
  height:14px;
  transition:transform .25s ease;
}

a.service-card:hover .service-link{
  opacity:1;
  gap:10px;
}

a.service-card:hover .service-link i,
a.service-card:hover .service-link svg{
  transform:translateX(3px);
}

/* --------------------------------------------------------------------------
   15. Our Work — portfolio masonry gallery
   Values lifted directly from the approved our-work.html build.
   -------------------------------------------------------------------------- */
.portfolio-grid{
  columns:4;
  column-gap:20px;
  margin-top:40px;
}

.portfolio-item{
  position:relative;
  break-inside:avoid;
  margin-bottom:20px;
  border-radius:var(--r-lg);
  overflow:hidden;
  cursor:pointer;
  border:1px solid var(--glass-border);
  transition:transform .3s ease, box-shadow .3s ease;
}

.portfolio-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card-hover);
}

.portfolio-item img{
  width:100%;
  height:auto;
  display:block;
}

.portfolio-item.filtered-out{
  display:none;
}

.portfolio-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(2,3,6,.85) 100%);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:16px;
  opacity:0;
  transition:opacity .3s ease;
}

.portfolio-item:hover .portfolio-overlay{
  opacity:1;
}

.portfolio-badge{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#fff;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:6px 12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.25);
}

@media (max-width:1024px){ .portfolio-grid{ columns:3; } }
@media (max-width:720px){ .portfolio-grid{ columns:2; } }
@media (max-width:480px){ .portfolio-grid{ columns:1; } }

/* ---- Image lightbox ---- */
.image-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(2,3,6,.9);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  padding:24px;
}

.image-modal.open{
  display:flex;
}

.image-modal__inner{
  position:relative;
  max-width:min(700px, 92vw);
  max-height:92vh;
}

.image-modal__close{
  position:absolute;
  top:-44px;
  right:0;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  display:grid;
  place-items:center;
}

.image-modal__img{
  max-width:100%;
  max-height:92vh;
  display:block;
  border-radius:var(--r-lg);
  border:1px solid var(--glass-border);
  object-fit:contain;
}

/* --------------------------------------------------------------------------
   16. Case studies — before/after mock preview
   Gradient values lifted directly from the approved case-studies.html build,
   where they were inline styles unique to each card; centralised here as
   three reusable "badge colour" variants shared with .badge-*.
   -------------------------------------------------------------------------- */
.case-mockup{
  border-radius:12px;
  height:100%;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  text-align:center;
  padding:20px;
}

.case-mockup--before{
  background:linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color:var(--text-muted);
}

.case-mockup--primary{
  background:linear-gradient(135deg, #398bef 0%, #184681 100%);
  color:#fff;
  font-weight:600;
}

.case-mockup--success{
  background:linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  color:#fff;
  font-weight:600;
}

.case-mockup--warning{
  background:linear-gradient(135deg, #f97316 0%, #d97706 100%);
  color:#fff;
  font-weight:600;
}

/* --------------------------------------------------------------------------
   17. FAQ page — live search box
   -------------------------------------------------------------------------- */
.faq-page-body{
  max-width:760px;
  margin-inline:auto;
  margin-top:-50px;
  position:relative;
  z-index:1;
}

.faq-search-box{
  padding:14px 20px;
  margin-bottom:16px;
}

/* .faq-search-input suppresses its own outline (it sits flush inside the
   glass pill with no room for one); this replaces it with a visible ring on
   the pill itself so keyboard users still get a focus indicator. */
.faq-search-box:focus-within{
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 999px;
}

.faq-search-box i{
  width:18px;
  height:18px;
  color:var(--text-muted);
}

.faq-search-input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  font-size:14.5px;
  color:var(--text-primary);
  padding-block:13px;
  min-height:44px;
}

.faq-search-input::placeholder{
  color:var(--text-muted);
}

.faq-empty{
  display:none;
  text-align:center;
  color:var(--text-muted);
  padding:20px 0;
}

.faq-item.filtered-out{
  display:none;
}

.faq-still-questions{
  text-align:center;
  margin-top:32px;
}

.faq-still-questions p{
  font-size:14.5px;
  color:var(--text-soft);
}

.faq-still-questions a{
  color:var(--c-medical);
  font-weight:600;
  text-decoration:underline;
}

/* --------------------------------------------------------------------------
   18. Contact page — quick tiles, form + info grid
   -------------------------------------------------------------------------- */
.contact-tiles{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
}

.contact-tile{
  padding:24px;
  border-radius:var(--r-lg);
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
}

.contact-tile__label{
  font-size:12px;
  color:var(--text-muted);
  margin:0 0 2px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.contact-tile__value{
  font-size:15px;
  font-weight:600;
  color:var(--text-primary);
  margin:0;
}

.contact-page-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:32px;
}

@media (max-width:860px){
  .contact-page-grid{ grid-template-columns:1fr; }
  .contact-page-grid .grid-2{ grid-template-columns:1fr; }
}

.contact-form-panel{
  padding:clamp(28px,4vw,44px);
  border-radius:var(--r-xl);
}

.contact-form-panel__title{
  font-size:22px;
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 6px;
}

.contact-form-panel__text{
  font-size:14px;
  color:var(--text-soft);
  margin:0 0 32px;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contact-form__label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:8px;
}

.contact-form__submit{
  width:100%;
  justify-content:center;
  padding:14px 28px;
  font-size:16px;
}

.contact-form__status{
  font-size:14px;
  text-align:center;
  min-height:20px;
  color:var(--text-soft);
  margin:0;
}

.contact-info-stack{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contact-info-card{
  padding:28px;
  border-radius:var(--r-lg);
}

.contact-info-card__row{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.contact-info-card__row .icon-badge{
  flex:none;
}

.contact-info-card__title{
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
  margin:0 0 8px;
}

.contact-info-card__text{
  font-size:13.5px;
  color:var(--text-soft);
  margin:0 0 4px;
  line-height:1.6;
}

.contact-info-card__text:last-child{
  margin-bottom:0;
}

.contact-info-card__heading{
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
  margin:0 0 16px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.contact-social-row{
  display:flex;
  gap:12px;
}

.contact-social-row .icon-badge{
  width:44px;
  height:44px;
}

/* --------------------------------------------------------------------------
   19. Legal pages (Privacy Policy, Terms of Service)
   -------------------------------------------------------------------------- */
.legal-hero{
  padding-top:120px;
  padding-bottom:48px;
  text-align:center;
}

.legal-updated{
  font-size:13px;
  color:var(--text-muted);
  margin-top:16px;
  text-align:center;
}

.legal-section{
  padding-bottom:80px;
}

.legal-content{
  padding:clamp(24px,5vw,56px);
  border-radius:var(--r-lg);
}

/* --------------------------------------------------------------------------
   20. Gravity Forms — reskinned to match the theme's own form fields
   Gravity Forms' own stylesheet is disabled (see
   inc/template-functions/gravity-forms.php) so these rules style its raw
   markup directly, matching .db-field / .contact-form__label exactly.
   -------------------------------------------------------------------------- */
.dbrand-gform .gform_wrapper{
  margin:0;
}

.dbrand-gform .gform_heading{
  display:none;
}

.dbrand-gform form{
  display:flex;
  flex-direction:column;
  gap:0;
}

.dbrand-gform .gform_fields{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}

.dbrand-gform .gfield{
  grid-column:span 2;
}

.dbrand-gform .gfield.gf_left_half,
.dbrand-gform .gfield.gf_right_half{
  grid-column:span 1;
}

@media (max-width:480px){
  .dbrand-gform .gfield.gf_left_half,
  .dbrand-gform .gfield.gf_right_half{
    grid-column:span 2;
  }
}

.dbrand-gform .gfield_label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:8px;
}

.dbrand-gform .gfield_required{
  color:var(--c-medical);
  margin-left:2px;
}

.dbrand-gform input[type="text"],
.dbrand-gform input[type="email"],
.dbrand-gform input[type="tel"],
.dbrand-gform input[type="url"],
.dbrand-gform input[type="number"],
.dbrand-gform select,
.dbrand-gform textarea{
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-border);
  color:var(--text-primary);
  font-size:14px;
  font-family:inherit;
}

.dbrand-gform textarea{
  resize:none;
  min-height:120px;
}

.dbrand-gform ::placeholder{
  color:var(--text-muted);
  opacity:1;
}

.dbrand-gform select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238D98B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
}

.dbrand-gform .ginput_container{
  margin-top:0;
}

.dbrand-gform .gform_footer{
  margin:0;
  padding:0;
}

.dbrand-gform .gform_button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:8px;
  padding:14px 28px;
  margin-top:4px;
  border:none;
  border-radius:var(--r-full);
  background:var(--grad-primary);
  color:#fff;
  font-family:var(--font-heading);
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}

.dbrand-gform .gform_button:hover{
  box-shadow:var(--shadow-glow-blue);
}

.dbrand-gform .gform_validation_errors,
.dbrand-gform .validation_error{
  color:#ff6b6b;
  font-size:13px;
  margin-bottom:16px;
  padding:12px 16px;
  border-radius:var(--r-sm);
  background:rgba(255,107,107,.08);
  border:1px solid rgba(255,107,107,.3);
}

.dbrand-gform .gfield_validation_message{
  color:#ff6b6b;
  font-size:12px;
  margin-top:6px;
}

.dbrand-gform .gfield_error input,
.dbrand-gform .gfield_error select,
.dbrand-gform .gfield_error textarea{
  border-color:#ff6b6b;
}

.dbrand-gform .gform_confirmation_message{
  font-size:14px;
  text-align:center;
  color:var(--c-success);
}

/* --------------------------------------------------------------------------
   21. Horizontal-overflow guard
   The off-canvas mobile drawer is position:fixed and parked off-screen at
   rest; body{overflow-x:hidden} (assets/css/style.css) only clips normal-flow
   content, not fixed-position descendants, so the page could still be
   scrolled a few pixels right at any viewport width. html-level overflow
   clipping catches fixed elements too, with no visual change.
   -------------------------------------------------------------------------- */
html{
  overflow-x:hidden;
}

/* --------------------------------------------------------------------------
   22. Footer clearance for the floating action buttons
   .whatsapp-fab and .back-to-top are position:fixed near the bottom corners
   at every viewport (assets/css/style.css / responsive.css). On short mobile
   viewports the footer's last row scrolls to rest at that same fixed band,
   so the buttons sit on top of and obscure the legal links. Adding bottom
   clearance to the footer — not touching the buttons or the footer's own
   layout — keeps the last row clear of them once fully scrolled.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .site-footer{
    padding-bottom:76px;
  }
}

/* --------------------------------------------------------------------------
   23. Blog — index & single
   Composed entirely from tokens/components the approved design already ships
   (.glass, .tag-pill, .badge, .meta-text, .grid) so nothing here introduces a
   new visual language.
   -------------------------------------------------------------------------- */
.blog-cat-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:24px;
}

.blog-cat-filter .tag-pill.is-active{
  color:#fff;
  background:var(--grad-primary);
  border-color:transparent;
  box-shadow:var(--shadow-glow-blue);
}

.post-card__cat{
  align-self:flex-start;
}

.post-single-meta{
  margin-top:16px;
  font-size:13px;
  color:var(--text-soft);
}

.post-single-footer{
  flex-wrap:wrap;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--glass-border);
}

.post-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.share-links{
  display:flex;
  align-items:center;
  gap:10px;
}

.share-links__label{
  font-size:13px;
  color:var(--text-soft);
  margin-right:2px;
}

.share-links__btn{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  color:var(--text-soft);
  transition:transform var(--dur-fast) var(--ease-out-soft), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.share-links__btn svg{
  width:16px;
  height:16px;
}

.share-links__btn:hover{
  transform:translateY(-2px);
  background:var(--glass-bg-strong);
  border-color:var(--glass-border-strong);
  color:var(--c-primary);
}

.author-box{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:32px;
  padding:28px;
}

.author-box__avatar{
  flex:none;
  width:72px;
  height:72px;
  border-radius:50%;
}

.author-box__name{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:16px;
  color:var(--text-primary);
  margin:0 0 6px;
}

.author-box__bio{
  font-size:13.5px;
  color:var(--text-soft);
  margin:0;
}

@media (max-width:640px){
  .post-single-footer{
    flex-direction:column;
    align-items:flex-start;
  }

  .author-box{
    flex-direction:column;
    text-align:center;
  }
}

/* --------------------------------------------------------------------------
   24. Case study detail page
   The archive grid keeps the approved .case-study-card teaser layout;
   this page needs a roomier, single-story layout, so it is composed from
   the same tokens (.glass, .tag-pill, .btn-glass, .case-section-title,
   .case-study-results) arranged in a new, cleaner structure instead of
   reusing the compact two-column teaser card as a whole page.
   -------------------------------------------------------------------------- */
.case-hero-photo{
  display:block;
  width:280px;
  height:280px;
  object-fit:cover;
  border-radius:var(--r-lg);
  border:1px solid var(--glass-border-strong);
  box-shadow:var(--shadow-card);
  margin:28px auto;
}

.case-info-panel{
  padding:28px;
  margin-bottom:32px;
}

.case-info-panel__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}

.case-info-panel__links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.case-info-panel__achievements{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--glass-border);
}

.case-detail-grid{
  gap:24px;
  align-items:stretch;
}

.case-detail-card{
  padding:28px;
}

.case-detail-card .case-section-text{
  font-size:14.5px;
}

@media (max-width:640px){
  .case-info-panel__row{
    flex-direction:column;
    align-items:flex-start;
  }

  .case-study-results{
    grid-template-columns:1fr;
  }
}

/* --------------------------------------------------------------------------
   25. Case studies archive — doctor photo card
   The approved before/after mockup preview still covers case studies with no
   real photo; when a featured image is set, it replaces the split mockup
   with a single photo filling the same left-hand slot.
   -------------------------------------------------------------------------- */
.case-study-image--photo{
  display:block;
}

.case-study-photo{
  width:100%;
  height:100%;
  min-height:380px;
  object-fit:cover;
  border-radius:var(--r-md);
  display:block;
}

/* --------------------------------------------------------------------------
   26. Team photo — true 1:1
   The approved design's .team-image is a fixed 320px-tall band (its ratio
   drifts with card width in a grid), and the card template requested the
   3:2 'dbrand-card' image size. Doctor/team portraits already have their own
   square 'dbrand-avatar' size registered in inc/template-functions/setup.php
   (200x200, hard-cropped) — the card now requests that size, and the
   container here is pinned to aspect-ratio 1/1 so it stays square at every
   grid width instead of a fixed height.
   -------------------------------------------------------------------------- */
.team-image{
  height:auto;
  aspect-ratio:1/1;
}

/* --------------------------------------------------------------------------
   28. Our Work — video gallery items
   Video portfolio items reuse .video-play-btn (assets/css/style.css) as a
   centered play affordance; .portfolio-item is already position:relative,
   so this only needs its own centering + hover-scale, matching the pattern
   already used for the case-study and about-banner video triggers.
   -------------------------------------------------------------------------- */
.portfolio-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}

.portfolio-item:hover .portfolio-play{
  transform:translate(-50%,-50%) scale(1.1);
}