/* ==========================================================
   LLC Website — Matte Premium Agency CSS (Clean + Unified)
   Author: Max Eldabbas
========================================================== */

/* ================================
   0) FONTS
================================ */
@font-face{
  font-family: "Satoshi";
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/Satoshi-Variable.woff2") format("woff2");}
@font-face{
  font-family: "Satoshi";
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  src: url("../assets/fonts/Satoshi-VariableItalic.woff2") format("woff2");}

/* ================================
   1) TOKENS (Matte + Orange Accent)
================================ */
/*:root{*/
/*  !* Brand accent (use sparingly) *!*/
/*  --accent:   #D97745;  !* matte orange *!*/
/*  --accent-2: #C46334;  !* hover *!*/

/*  !* Backgrounds (alternate sections) *!*/
/*  --bg:        #F3F1ED;     !* warm matte base *!*/
/*  --bg-soft:   #EFEAE2;     !* slightly deeper warm *!*/
/*  --bg-white:  rgba(255,255,255,.88); !* soft paper white *!*/

/*  !* Surfaces *!*/
/*  --paper:     rgba(255,255,255,.86);*/
/*  --glass:     rgba(255,255,255,.68);*/

/*  !* Text *!*/
/*  --ink:       #171615;*/
/*  --ink-2:     #11100F;*/
/*  --muted:     #5E5A55;*/
/*  --muted-2:   #7A746D;*/

/*  !* Lines (very subtle, but we won’t use on section seams) *!*/
/*  --line:      rgba(17,16,15,.10);*/

/*  !* Layout *!*/
/*  --maxw:      1140px;*/
/*  --radius:    20px;*/
/*  --radius-sm: 14px;*/

/*  !* Type *!*/
/*  --font-sans: "Satoshi", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;*/
/*  --fs-base:   18px;*/
/*  --lh:        1.6;*/

/*  --w-regular: 420;*/
/*  --w-medium:  560;*/
/*  --w-semibold:650;*/
/*  --w-bold:    750;*/
/*  --w-black:   850;*/

/*  !* Shadows (matte) *!*/
/*  --shadow-sm: 0 8px 18px rgba(17,16,15,.06);*/
/*  --shadow:    0 18px 40px rgba(17,16,15,.10);*/
/*  --shadow-lg: 0 30px 70px rgba(17,16,15,.14);*/

/*  !* Header *!*/
/*  --header-h: 84px;*/
/*  --header-h-mobile: 64px;*/

/*  !* Buttons (rectangle-ish) *!*/
/*  --btn-radius: 12px;*/
/*  --btn-pad-y:  0.80rem;*/
/*  --btn-pad-x:  1.10rem;*/

/*  !* Focus *!*/
/*  --focus: rgba(217,119,69,.32);*/
/*}*/

:root{
  /* Brand accent (use sparingly) */
  --accent:#D97745; --accent-2:#C46334;
  --accent-icon: #d97745;

   /*Backgrounds (alternate sections) */
  --bg:#F7F6F3;
  --bg-2:#FFFFFF;
  --surface:rgba(255,255,255,.90);
  --surface-2:rgba(255,255,255,.78);

  /*--bg:#F7F7F5;*/
  /*--bg-2:#FFFFFF;*/
  /*--surface:rgba(255,255,255,.90);*/
  /*--surface-2:rgba(255,255,255,.78);*/

  /* Surfaces */
  --paper:     rgba(255,255,255,.86);
  --glass:     rgba(255,255,255,.68);
  --paper-tan: #f3ede4;

  /* Text */
  --ink:#0F172A;
  --muted:#475569;
  --ink-2:     #11100F;
  --muted-2:   #7A746D;

  /* Lines (very subtle, but we won’t use on section seams) */
  --line:rgba(15,23,42,.08);

  /* Layout */
  --maxw:      1140px;
  --radius:    20px;
  --radius-sm: 14px;

  /* Type */
  --font-sans: "Satoshi", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-base:   18px;
  --lh:        1.6;

  --w-regular: 420;
  --w-medium:  560;
  --w-semibold:650;
  --w-bold:    750;
  --w-black:   850;

  /* Shadows (matte) */
  --shadow-sm:0 8px 18px rgba(2,6,23,.06);
  --shadow:0 18px 40px rgba(2,6,23,.10);
  --shadow-lg:0 30px 70px rgba(2,6,23,.14);

  /* Header */
  --header-h: 84px;
  --header-h-mobile: 64px;

  /* Buttons (rectangle-ish) */
  --btn-radius: 12px;
  --btn-pad-y:  0.80rem;
  --btn-pad-x:  1.10rem;

  /* Focus */
  --focus: rgba(217,119,69,.32);
}

/* ================================
   2) BASE / RESET
================================ */
*{ box-sizing:border-box; }
html, body{ height:100%; }

html{
  font-size: var(--fs-base);
  scroll-behavior: smooth;}

/* Page transition: fade only main content */
main{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms ease;}

main{ will-change: opacity, transform; }

body main{
  opacity: 0;
  transform: translateY(6px);}

/* Fade in once partials are injected */
body.is-ready main{
  opacity: 1;
  transform: translateY(0);}

/* Fade out when leaving */
body.is-leaving main{
  opacity: 0;
  transform: translateY(6px);}

@media (prefers-reduced-motion: reduce){
  main{ transition: none; transform: none; }
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;

  font-family: var(--font-sans), serif;
  font-weight: var(--w-regular);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  color: var(--ink);

  /* Matte ambient background (no orange wash) */
  background:
          radial-gradient(900px 520px at 12% -10%, rgba(217,119,69,.04), transparent 60%),
          radial-gradient(900px 520px at 92% 0%, rgba(23,22,21,.04), transparent 58%),
          var(--bg);
  /*opacity: 1;*/
  /*transition: opacity 8000ms ease;*/
}

/*body.is-leaving{*/
/*  opacity: 0;*/
/*}*/

/*@media (prefers-reduced-motion: reduce){*/
/*  body{ transition: none; }*/
/*}*/

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
p{ margin:0 0 1rem; color: var(--muted); }

:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Prevent random SVGs from blowing up layout */
svg{ max-width:100%; height:auto; }

/* ================================
   3) LAYOUT HELPERS
================================ */
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;}

.container.projects{
  align-items: center;
  justify-content: center;}

.section{
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  background: transparent;}

body.terms-privacy .section + .section{
  padding-top: 0;}

.under-construction .section{
  padding-top: 200px;
  padding-bottom: 200px;}

.section-title-2 {
  text-align: center;}

/* SECTION SKINS (apply on the section element) */
.section-warm{  background: var(--bg-2); }
.section-soft{  background: var(--bg); }
.section-white{ background: var(--surface); }

/* Back-compat: if you already use .section-soft / .section-panel */
.section-panel{ background: var(--bg); }

/* No seams: kill pseudo background layers entirely */
.section::before,
.section::after{  display: none !important;

  content: none !important;}

.section-tight{ padding: 56px 0; }

/* Center content for all sections below hero */
.section:not(.hero):not(.hero-premium){
  text-align: center;}

.section:not(.hero):not(.hero-premium) .container{
  display: flex;
  flex-direction: column;
  align-items: center;}

/*.section:not(.hero):not(.hero-premium) .btn,*/
/*.section:not(.hero):not(.hero-premium) .cta-primary,*/
/*.section:not(.hero):not(.hero-premium) .cta-link{*/
/*  margin-left: auto;*/
/*  margin-right: auto;*/
/*}*/

/*.section:not(.hero):not(.hero-premium) .grid{*/
/*  justify-items: center;*/
/*}*/

/*.section:not(.hero):not(.hero-premium) .grid > *{*/
/*  text-align: center;*/
/*}*/

/*.section:not(.hero):not(.hero-premium) .maxw{*/
/*  margin-left: auto;*/
/*  margin-right: auto;*/
/*}*/

/*.section:not(.hero):not(.hero-premium) .section-kicker,*/
/*.section:not(.hero):not(.hero-premium) .kicker{*/
/*  margin-left: auto;*/
/*  margin-right: auto;*/
/*}*/

.center{ text-align:center; }

.center-btn{ text-align:center; margin-top: 24px;}

.grid{ display:grid; gap: 22px; }
.grid.two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px){
  .grid.two, .grid.three{ grid-template-columns: 1fr; }
}

/* ================================
   4) TYPOGRAPHY
================================ */
h1,h2,h3,h4{
  margin: 0 0 .6rem;
  color: var(--ink-2);
  letter-spacing: -0.02em;}

h1{
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  font-weight: var(--w-black);
  line-height: 1.07;}
h2{
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: var(--w-bold);
  line-height: 1.15;}
h3{
  font-size: 1.15rem;
  font-weight: var(--w-bold);
  line-height: 1.25;}

.kicker, .section-kicker{  align-content: center;
  margin: 0 0 10px;
  color: rgba(217,119,69,.78);
  font-size: .72rem;
  letter-spacing: .18em;

  text-transform: uppercase;}

.muted{ color: var(--muted-2); }
.maxw{ max-width: 62ch; }

/* ================================
   5) HEADER / NAV
================================ */
header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 3000;
  border-bottom: 1px solid rgba(17,16,15,.06);

  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);}

body{ padding-top: var(--header-h); }
@media (max-width: 768px){
  body{ padding-top: var(--header-h-mobile); }
}

header .nav{  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;

  min-height: var(--header-h);}
@media (max-width: 768px){
  header .nav{ min-height: var(--header-h-mobile); }
}

.brand-name{
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;}

.brand-logo{
  max-height: 100px;}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;}

.footer-brand-logo{
  display: block;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-height: 100px;
  text-align: center;
  margin-inline: auto;}

.site-nav ul{  display:flex;
  align-items:center;
  gap: 18px;
  margin:0;
  padding:0;

  list-style:none;}

.site-nav a{
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(23,22,21,.78);
  font-size: .95rem;
  font-weight: var(--w-semibold);}

.site-nav a:hover,
.site-nav a.is-active{
  background: rgba(217,119,69,.10);
  color: var(--accent);}

/* Responsive show/hide helpers */
.desktop-only{ display:inline-flex; }
.mobile-only{ display:none; }
@media (max-width:768px){
  .desktop-only{ display:none !important; }
  .mobile-only{ display:block; }
}

.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(17,16,15,.10);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  color: rgba(23,22,21,.86);
}
@media (max-width:768px){
  .menu-toggle{ display:inline-flex; }
}

@media (max-width:768px){
  #mobile-menu.site-nav{
    position: fixed;
    top: calc(env(safe-area-inset-top) + var(--header-h-mobile));
    left: 0; right: 0;
    border-bottom: 1px solid rgba(17,16,15,.06);

    background: rgba(248,248,248,.97);
    opacity: 0;
    box-shadow: var(--shadow);

    transform: translateY(-10px);
    transition: transform .2s ease, opacity .2s ease;
    pointer-events:none;
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);}
  #mobile-menu.site-nav.is-open{    opacity: 1;

    transform: translateY(0);
    pointer-events:auto;}
  #mobile-menu.site-nav ul{
    display:grid;
    gap: 8px;
    padding: 14px 18px 18px;}
  #mobile-menu.site-nav a{
    display:block;
    padding: 14px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(17,16,15,.08);
  }
}

/* ================================
   6) BUTTONS (Rectangular + Matte)
================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;

  /*padding: var(--btn-pad-y) var(--btn-pad-x);*/
  padding: 12px 18px;
  border-radius: var(--btn-radius);
  border: none;
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow-sm);

  font-weight: 650;
  font-size: .95rem;
  color: rgba(17,16,15,.90);

  transition:
          background .15s ease,
          color .15s ease;
}

/* Light buttons darken slightly */
.btn:hover{
  background: rgba(255,255,255,.70);}

/* Primary = orange accent (no gradients) */
.btn-primary{
  border: none;
  color: #fff;
  background: var(--accent);
  box-shadow: var(--shadow-sm);

  transition:
          background .15s ease,
          color .15s ease;
}

/* Dark → light shift */
.btn-primary:hover{
  background: color-mix(in srgb, var(--accent) 85%, #fff 15%);}

/* Header CTA = stylish gray matte (your request) */
header .btn{
  background: rgba(17,16,15,.06);
  border: none;
  color: rgba(17,16,15,.90);
  box-shadow: none;

  transition:
          background .15s ease,
          color .15s ease;
}

header .btn:hover{
  background: rgba(23,20,18,.65);
  color: #fff;}

/* Links that look like subtle CTAs */
.cta-link{  padding-bottom: 2px;
  border-bottom: 1px solid rgba(23,22,21,.22);
  color: rgba(23,22,21,.72);

  font-weight: var(--w-semibold);}
.cta-link:hover{
  color: rgba(23,22,21,.92);
  border-bottom-color: rgba(23,22,21,.42);}

.cta-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-sm);

  transition:
          background .15s ease,
          color .15s ease;
}

.cta-primary:hover{
  background: color-mix(in srgb, var(--accent) 85%, #fff 15%);}

.card:hover,
.work-card:hover,
.quote-card:hover{  box-shadow: var(--shadow-sm);

  transform: none;}

/* Icon sizing in buttons */
.btn svg,
.menu-toggle svg{  display: block;

  width: 22px;
  height: 22px;}

/* ================================
   7) CARDS (Uniform)
================================ */
.card{
  background: var(--paper);
  border: 1px solid rgba(17,16,15,.08);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.card p{ margin-bottom: 0; }

/* ================================
   8) HERO
================================ */
.hero{ padding: clamp(52px, 6vw, 86px) 0; }

.hero-grid{
  display:grid;
  align-items: center;
  grid-template-columns: 1.1fr .9fr;
  gap: 34px;}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
}

.hero-title{  margin: 0 0 12px;
  color: var(--ink-2);

  font-size: clamp(2.4rem, 4.8vw, 4rem);
  font-weight: var(--w-black);
  line-height: 1.05;
  letter-spacing: -0.03em;}

.hero-subtitle{
  max-width: 60ch;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 1.05rem;}

.hero-cta{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 16px;
  margin-top: 6px;}

.value-prop-rail{
  margin-top: 22px;
  max-width: 38ch;
}

.value-prop-stage{
  position: relative;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(120deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
  overflow: hidden;
}

.value-prop-item{
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  color: var(--ink);
  font-weight: var(--w-semibold);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(8px);
  animation: value-prop-cycle 9s infinite;
}

.value-prop-item:nth-child(2){ animation-delay: 3s; }
.value-prop-item:nth-child(3){ animation-delay: 6s; }

.value-prop-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: var(--accent);
  box-shadow: 0 0 0 6px rgba(217,119,69,.12);
  flex: 0 0 22px;
}

.value-prop-icon svg{
  width: 18px;
  height: 18px;
  display: block;
}

.value-prop-item:first-child .value-prop-icon svg{
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(1px);
}

.value-prop-label{
  font-size: 0.98rem;
}

@keyframes value-prop-cycle{
  0%{ opacity: 0; transform: translateY(8px); }
  10%{ opacity: 1; transform: translateY(0); }
  30%{ opacity: 1; transform: translateY(0); }
  40%{ opacity: 0; transform: translateY(-8px); }
  100%{ opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 700px){
  .value-prop-rail{ max-width: 100%; }
  .value-prop-stage{ height: 64px; }
  .value-prop-item{ align-items: center; }
  .value-prop-icon{ margin-top: 0; }
  .value-prop-label{
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce){
  .value-prop-stage{
    height: auto;
    padding: 10px 12px;
  }
  .value-prop-item{
    position: relative;
    opacity: 1;
    transform: none;
    animation: none;
    padding: 6px 4px;
  }
}

/* Proof cards */
.hero-proof{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;}
@media (max-width: 900px){
  .hero-proof{ grid-template-columns: 1fr; }
}

/* =========================================
   HERO BACKGROUND (left tan → fades into image)
   Works with: <section class="section hero hero-premium section-soft">
========================================= */

.hero.hero-premium{
  position: relative;

  /* background image */
  background-image: url("../assets/images/hero/hero_background_path.png");
  background-repeat: no-repeat;

  /* keep the “path” / focal point on the right */
  background-position: right center;
  background-size: cover;
  overflow: hidden;}

/* The fade overlay (tan/white on left → transparent on right) */
.hero.hero-premium::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  /* tweak these stops to taste */
  background: linear-gradient(
          90deg,
          #f7f6f3 0%,
          #f7f6f3 42%,
          rgba(247,246,243,0.96) 55%,
          rgba(247,246,243,0.80) 64%,
          rgba(247,246,243,0.45) 72%,
          rgba(247,246,243,0.18) 82%,
          rgba(247,246,243,0.00) 100%
  );
}

/* Make sure your hero content sits above the overlay */
.hero.hero-premium .container,
.hero.hero-premium .hero-grid{
  position: relative;
  z-index: 2;}

.local-strip{
  padding: 28px 0;
}

.local-strip-inner{
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(120deg, rgba(255,255,255,.92), rgba(247,246,243,.9));
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
}

.local-strip-pin{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(217,119,69,.12);
  box-shadow: inset 0 0 0 1px rgba(217,119,69,.22);
}

.local-strip-pin svg{
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.local-strip-kicker{
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
  margin: 0 0 4px;
}

.local-strip-title{
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: var(--ink-2);
}

.local-strip-subtitle{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}


.local-strip-dots{
  display: grid;
  gap: 6px;
  justify-items: end;
}

.local-strip-dots span{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(217,119,69,.35);
}

@media (max-width: 900px){
  .local-strip-inner{
    grid-template-columns: auto 1fr;
  }
  .local-strip-dots{ display: none; }
}

.proof-item{
  border: 1px solid rgba(17,16,15,.08);
  background: var(--glass);
  border-radius: 16px;
  padding: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.proof-top{ font-weight: var(--w-bold); color: rgba(17,16,15,.88); }
.proof-bottom{ color: rgba(17,16,15,.56); font-size: .92rem; margin-top: 2px; }

.media-frame{
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid rgba(17,16,15,.08);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow-lg);
}
.media-caption{ margin-top: 10px; color: rgba(17,16,15,.56); font-size: .92rem; }

/* ================================
   9) TRUST / LOGOS
================================ */
.logo-marquee{
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 30px;
}

/* ✅ the moving ROW */
.logo-track{
  display: inline-flex;          /* <-- needs flex for gap + alignment */
  align-items: center;
  gap: 130px;
  height: auto !important;
  width: max-content;            /* <-- allows smooth marquee width */
  animation: marquee 26s linear infinite;}

/* ✅ normalize logos visually */
.logo-track img{
  display: block;
  max-height: 44px;              /* your baseline */
  max-width: 160px;              /* cap wide logos */
  width: auto;
  height: auto;
  opacity: .75;
  filter: grayscale(100%);
  object-fit: contain;}

.logo-marquee-img.is-small{
  transform: scale(2);}

@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation:none; }
}

/* --- Stop horizontal overflow (mobile marquee fix) --- */
html, body{  width: 100%;

  overflow-x: hidden;}

.logo-marquee{
  width: 100%;
  max-width: 100%;
  overflow: hidden;          /* clip the moving track */
  border-radius: 18px;}

/* Track can be wider than viewport, but it must not affect layout width */
.logo-track{
  display: inline-flex;
  width: max-content;        /* keep the marquee working */
  max-width: none;
  will-change: transform;}

/* Helpful if any child images accidentally create extra width */
.logo-track img{
  display: block;
  max-width: none;}

@media (max-width: 860px){
  .logo-track{
    gap: 60px;
    height: 72px;}

  .logo-track img{
    height: 36px;
    opacity: .85;}

  .logo-marquee{
    padding-top: 25px;}
}


/* ================================
   10) WORK / PROJECT CARDS
   - Keeps legacy .work-card support
   - Clean single-source-of-truth for .work-tile
================================ */

/* ---- Grid (single definition) ---- */
.work-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
  margin-top: 22px;
  max-width: 980px;
  margin-inline: auto;}
@media (max-width: 950px){
  .work-grid{ grid-template-columns: 1fr; }
}


/* ==========================================================
   A) Legacy work-card system (kept, non-conflicting)
========================================================== */
.work-card{
  position: relative;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;}
.work-card:hover{  box-shadow: 0 26px 70px rgba(17,16,15,.12);

  transform: translateY(-3px);}

.work-thumb{  width: 100%;
  height: 100%;

  aspect-ratio: 16 / 10;
  overflow:hidden;}
.work-thumb img{  display:block;

  width: 100%;
  height: 100%;
  filter: brightness(0.82);
  transition: filter .25s ease;
  object-fit: cover;}

.work-meta{ padding: 16px 16px 18px; }
.work-title{ font-weight: var(--w-bold); letter-spacing: -.01em; }
.work-desc{ color: rgba(17,16,15,.60); margin-top: 6px; }

.work-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;}
.work-tags span{
  font-size: .82rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,16,15,.10);
  background: rgba(255,255,255,.70);
  color: rgba(17,16,15,.70);
}


/* ==========================================================
   B) Work tiles (the ones you’re using now)
   Goals:
   - background image covers tile
   - logo stays proportional (no crop/stretch)
   - default darker image + readable logo
   - on hover: image brightens, halo fades out
========================================================== */

.work-tile{
  position: relative;
  display:block;
  border-radius: 22px;
  background:#000;                 /* safety if image fails */
  box-shadow: var(--shadow-sm);
  isolation: isolate;              /* keep overlays contained */
  transition: box-shadow .18s ease;
  aspect-ratio: 16 / 10;
  overflow:hidden;}

/* ✅ BACKGROUND IMAGE ONLY (never target all imgs) */
.work-tile-img{  display:block;

  width: 100%;
  height: 100%;

  /* darker BEFORE hover */
  filter: brightness(0.90);
  transform: scale(1.0001);        /* avoids tiny seams on some GPUs */
  transition: filter .25s ease, transform .25s ease;
  object-fit: cover;}

/* Overlay layer that centers content */
.work-tile-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding: clamp(18px, 3vw, 34px);
  z-index: 2;
  pointer-events:none;             /* click goes to the link */
}

/* Optional: a subtle veil (kept very light so you don’t see a “box”) */
.work-tile-overlay{
  background: rgba(0,0,0,0.00);
  transition: background .25s ease;}

/* Logo frame (responsible for sizing + halo) */
.work-logo-frame{
  position: relative;
  display:grid;
  place-items:center;

  /* ensures consistent bounding box across logos */
  width: min(78%, 420px);
  height: min(36%, 140px);}

/* Halo behind logo: improves readability but is NOT a box */
.work-logo-frame::before{  position:absolute;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(0,0,0,.48), rgba(0,0,0,0) 72%);
  opacity: 1;
  transition: opacity .25s ease;
  pointer-events:none;

  content:"";
  inset: -20px -34px;}

/* ✅ LOGO ONLY — never gets forced to 100% height/width */
.work-tile-logo{  object-fit: contain;    /* key: contain prevents cropping */
  display:block;

  width: 100%;
  height: 100%;

  /* make white logos pop without “ugly overlay box” */
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.22));}

/* Hover behavior */
.work-tile:hover .work-tile-img{
  filter: brightness(0.92);
  transform: scale(1.02);}

.work-tile:hover .work-tile-logo{
  opacity: 0;
  transform: scale(.96);}

.work-tile:hover .work-tile-overlay{
  background: rgba(217,119,69,.06);}

/* halo disappears on hover (your request) */
.work-tile:hover .work-logo-frame::before{
  opacity: 0;}

/* Keyboard accessibility */
.work-tile:focus-visible{
  outline: 3px solid rgba(217,119,69,.35);
  outline-offset: 4px;
  border-radius: 22px;
}


/* ================================
   11) QUOTES
================================ */
.quote-shell{
  display:grid;
  align-items:center;
  grid-template-columns: 40px 1fr 40px;
  gap: 12px;
  margin-top: 26px;}
@media (max-width: 700px){
  .quote-shell{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "card card"
      "prev next";
    row-gap: 16px;
    column-gap: 8px;
  }
  .quote-card{ grid-area: card; }
  .quote-nav[data-quote-dir="-1"]{
    grid-area: prev;
    justify-self: end;
  }
  .quote-nav[data-quote-dir="1"]{
    grid-area: next;
    justify-self: start;
  }
  .quote-nav svg{
    width: 22px;
    height: 22px;
    stroke-width: 2;
  }
  .quote-card{
    padding-top: 26px !important;
  }
  .quote-card .quote-logo{
    position: static;
    width: 120px;
    margin: 0 0 12px;
    opacity: .5;
  }
  .quote-card .quote-watermark-industry{
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    height: 72px !important;
    background-position: center 6px !important;
    background-size: min(70%, 220px) !important;
    opacity: 0.2 !important;
  }
  .quote-text{
    margin-top: 0 !important;
  }
}

@media (max-width: 860px){
  .quote-card .quote-logo{
    position: static !important;
    display: block;
    width: 120px;
    margin: 0 auto 12px;
    opacity: .5;
  }
}
.quote-nav{
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor:pointer;
  color: rgba(17,16,15,.6);
  display: grid;
  place-items: center;
  transition: transform .16s ease, color .16s ease;
}

.quote-nav svg{
  width: 40px;
  height: 40px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.quote-nav:hover{
  color: rgba(17,16,15,.9);
  transform: translateY(-1px);
}

.quote-nav:active{
  transform: translateY(0);
}
.quote-card{
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(17,16,15,.08);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  overflow: hidden;
}

.quote-card .quote-logo{
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 140px;
  height: auto;
  opacity: .12;
  pointer-events: none;
  filter: saturate(0.9);
}
.quote-watermark-industry{
  position: absolute;
  inset: 12px;
  background-image: url("../assets/images/logos/industry_salon_logo.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: min(50%, 240px);
  opacity: 0.12;
  pointer-events: none;
}

.quote-watermark-concord{
  position: absolute;
  inset: 12px;
  background-image: url("../assets/images/logos/concord_limo_logo.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: min(50%, 150px);
  opacity: 0.12;
  pointer-events: none;
}

.quote-meter{
  height: 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.10);
  overflow: hidden;
  margin: 10px auto 18px;
  max-width: 520px;
}

.quote-meter-bar{
  display: block;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, rgba(217,119,69,.4), rgba(217,119,69,1));
  animation: quote-meter 6s linear infinite;
}

@keyframes quote-meter{
  0%{ width: 10%; }
  60%{ width: 70%; }
  100%{ width: 10%; }
}
.quote-text{ font-size: 1.05rem; color: rgba(17,16,15,.78); line-height: 1.7; }
.quote-meta{ margin-top: 14px; display:flex; gap: 10px; flex-wrap:wrap; }
.quote-name{ font-weight: var(--w-bold); }
.quote-role{ color: rgba(17,16,15,.55); }

.quote-shell{
  touch-action: pan-y; /* allow vertical scroll, we handle horizontal */
  -webkit-tap-highlight-color: transparent;}

.quote-card{
  user-select: none;
  -webkit-user-select: none;}

/* ================================
   12) CONTACT / FORMS (Unified)
================================ */
.contact-split{
  display:grid;
  align-items:start;
  grid-template-columns: 1fr 1.05fr;
  gap: 22px;}
@media (max-width: 900px){
  .contact-split{ grid-template-columns: 1fr; }
}

.contact-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(17,16,15,.08);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(17,16,15,.06);
  margin: 0 0 12px;
}

.contact-item .contact-icon{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display:block;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: rgba(17,16,15,.70);
}

.contact-text{
  color: rgba(17,16,15,.82);
  font-weight: var(--w-semibold);}
.contact-text a{  padding-bottom: 2px;

  border-bottom: 1px solid rgba(17,16,15,.18);}
.contact-text a:hover{ border-bottom-color: rgba(17,16,15,.35); }

/* Form shell */
.contact-form{
  border-radius: 20px;
  border: 1px solid rgba(17,16,15,.08);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

/* Field labels */
.contact-form .label,
.contact-form label{
  display:block;
  margin-bottom: 6px;
  color: rgba(17,16,15,.58);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;}

/* Inputs */
.contact-form input,
.contact-form textarea{
  width:100%;
  margin-top: 6px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,16,15,.12);
  background: rgba(255,255,255,.88);
  color: rgba(17,16,15,.92);
  outline:none;
  box-shadow: 0 6px 14px rgba(17,16,15,.05);
}

.contact-form textarea{ resize: vertical; min-height: 130px; }

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(217,119,69,.35);
  box-shadow: 0 0 0 4px rgba(217,119,69,.12);}

/* Grid rows */
.form-row,
.contact-page .form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;}
@media (max-width: 560px){
  .form-row,
  .contact-page .form-grid{
    grid-template-columns: 1fr;}
}

/* Submit button inside forms */
.contact-submit,
.contact-page .contact-submit{  justify-content: center;

  width: 100%;
  margin-top: 6px;}

/* Contact page copy helpers */
.contact-page .contact-lede{  max-width: 60ch;

  margin: 0 0 18px;
  color: rgba(17,16,15,.62);
  text-align: center;}
.contact-page .contact-ctas{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;}
.contact-page .contact-micro{
  margin-top: 14px;
  color: rgba(17,16,15,.55);
  font-size: .95rem;}
.contact-page .form-note{
  margin: 8px 2px 0;
  color: rgba(17,16,15,.55);
  font-size: .9rem;}

/* =============== Contact v2 =============== */
.contact-v2 {
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: clamp(56px, 7vw, 96px);}

.contact-page .contact-v2{
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-height: 820px){
  .contact-page .contact-v2{
    min-height: auto;
    padding-top: clamp(32px, 5vh, 64px);
    padding-bottom: clamp(32px, 5vh, 64px);
  }
}

.contact-page .contact-v2 .container{
  width: 100%;
}

.contact-v2-grid{
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 48px);}

.contact-page .contact-v2-grid{
  align-items: center;
}

.contact-page .contact-v2-left{
  justify-self: center;
  text-align: center;
  align-self: center;
}

.contact-page .contact-v2-card{
  justify-self: center;
  align-self: center;
}

.contact-v2-left{ max-width: 62ch; }

.contact-v2-title {
  margin: 10px 0 12px;
  line-height: 1.05;
  letter-spacing: -0.02em;}

.contact-v2-lede {
  margin: 0 0 18px;
  color: var(--muted, rgba(0,0,0,0.65));
  line-height: 1.55;}

.contact-v2-chips {
  display: grid;
  gap: 10px;
  margin: 18px 0 18px;}

/* =========================
   HOMEPAGE — Bigger Contact Form
   ========================= */

.home .contact-v2-card{
  width: min(500px, 60%);   /* bigger card */
  padding: 20px;             /* more breathing room */
}

/* Increase spacing inside the form */
.home .contact-v2-form{
  gap: 28px;}

/* Slightly larger inputs on homepage */
.home .contact-v2-form .input,
.home .contact-v2-form .textarea{
  padding: 16px 18px;
  font-size: 1rem;}

/* Bigger submit button on homepage */
.home .contact-v2-submit{
  padding: 16px 22px;
  font-size: 1.05rem;}

.contact-v2 .contact-v2-card{
  width: min(720px, 100%);
  margin-inline: auto;}

.contact-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.70);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: filter .18s ease, transform .18s ease;}

.contact-chip:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);}

.chip-icon {  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  font-size: 15px;}

.chip-text {
  font-weight: 600;
  letter-spacing: -0.01em;}

.contact-v2-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;}

.contact-v2-micro {
  margin-top: 16px;
  color: var(--muted, rgba(0,0,0,0.55));
  font-size: 0.95rem;}

/* Right card */
.contact-v2-card {
  border-radius: 18px;
  background: rgba(255,255,255,0.70);
  box-shadow: 0 18px 60px rgba(0,0,0,0.08);
  overflow: visible !important;}

.contact-v2-form {
  padding: clamp(18px, 2.4vw, 26px);}

.contact-v2-form-head {
  margin-bottom: 14px;}

.contact-v2-form-title {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.01em;}

.contact-v2-form-sub {
  margin: 6px 0 0;
  color: var(--muted, rgba(0,0,0,0.60));
  font-size: 0.95rem;
  line-height: 1.45;}

.contact-v2-submit {
  width: 100%;
  margin-top: 10px;}

.contact-v2-note {
  margin: 10px 0 0;
  color: var(--muted, rgba(0,0,0,0.55));
  font-size: 0.92rem;
  text-align: center;}

/* Inputs: modern + minimal */
.contact-v2 .input,
.contact-v2 .textarea {
  background: rgba(255,255,255,0.85);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  border-radius: 14px;
}

.contact-v2 .input:focus,
.contact-v2 .textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 0 0 4px rgba(235, 125, 60, 0.18);}

/* Mobile */
@media (max-width: 920px) {
  .contact-v2-grid {
    grid-template-columns: 1fr;}
  .contact-v2-left {
    max-width: none;}
}

/* ===== Contact v2: FORCE clean form layout (overrides globals) ===== */
.contact-v2 .contact-v2-card{
  width: 100%;
  max-width: none;
  margin: 0;}

.contact-v2 .contact-v2-form .field{
  display: block !important;
  margin: 0 0 14px !important;}

.contact-v2 .contact-v2-form .label{
  display: block !important;
  margin: 0 0 8px !important;
  color: rgba(0,0,0,0.70) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;}

.contact-v2 .contact-v2-form .input,
.contact-v2 .contact-v2-form .textarea{
  width: 100% !important;
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.9) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10) !important;
  font: inherit !important;
}

.contact-v2 .contact-v2-form .textarea{  min-height: 160px;

  resize: vertical;}

.contact-v2 .contact-v2-form .form-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 6px !important;}

@media (max-width: 720px){
  .contact-v2 .contact-v2-form .form-grid{
    grid-template-columns: 1fr !important;}
}

/* nice focus */
.contact-v2 .contact-v2-form .input:focus,
.contact-v2 .contact-v2-form .textarea:focus{
  outline: none !important;
  box-shadow:
          inset 0 0 0 1px rgba(0,0,0,0.16),
          0 0 0 4px rgba(235, 125, 60, 0.18) !important;
}

/* center the form header but keep form fields normal */
.contact-v2 .contact-v2-form-head{  margin-bottom: 18px;

  text-align: center;}
.contact-v2 .contact-v2-form-title{
  margin: 0;}
.contact-v2 .contact-v2-form-sub{
  margin: 6px 0 0;}

/* CTA should not be comically tall if global styles do that */
.contact-v2 .contact-v2-submit{
  width: 100% !important;
  margin-top: 6px !important;}

/* ===== Contact v2 socials ===== */
.contact-social { margin-top: 18px; text-align: center}

.contact-social-label{
  margin: 0 0 10px;
  color: rgba(17,16,15,.55);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;}

.contact-social-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 16px;}

.social-btn{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(17,16,15,.08);
  box-shadow: 0 10px 26px rgba(17,16,15,.06);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  text-decoration: none;
  color: rgba(17,16,15,.78);
}

.site-footer .social-btn {  border-color: rgba(17,16,15,.12);

  background: rgba(255,255,255,0.92);
  color: rgba(17,16,15,0.75);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);}

.site-footer .social-btn svg {
  stroke: currentColor;}

.site-footer .social-btn:hover {
  background: #fff;
  color: rgba(17,16,15,0.9);
  box-shadow: 0 14px 34px rgba(0,0,0,0.25);
  transform: translateY(-1px);}

.social-btn svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-btn:hover{  filter: brightness(0.98);
  box-shadow: 0 14px 34px rgba(17,16,15,.10);

  transform: translateY(-1px);}

/* orange focus ring */
.social-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(235, 125, 60, 0.18), 0 10px 26px rgba(17,16,15,.08);}

/* ===== FORCE 2-col contact on desktop ===== */
@media (min-width: 921px){
  .contact-v2 .contact-v2-grid{
    display: grid !important;
    align-items: start !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: clamp(24px, 4vw, 48px) !important;}

  .contact-v2 .contact-v2-left,
  .contact-v2 .contact-v2-card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;}
}

/* ================================
   13) FOOTER (Keep premium, warm-compatible)
================================ */
footer.site-footer{
  background:
          linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%),
          rgba(17,16,15,.92);
  color: rgba(255,255,255,.86);
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 64px 0 22px;
}

footer.site-footer .container{ padding: 0 22px; }

footer.site-footer .footer-grid{
  display: grid;
  align-items: start;
  grid-template-columns: 1.1fr 1.9fr;
  gap: 52px;}

footer.site-footer .footer-links{
  display: grid;
  align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;}

footer.site-footer ul{ list-style: none; padding: 0; margin: 0; }

footer.site-footer .footer-logo-text{  margin: 0 0 10px;
  color: rgba(255,255,255,.96);

  font-weight: 750;
  letter-spacing: -0.01em;}

footer.site-footer .footer-blurb{  max-width: 42ch;

  margin: 0 0 14px;
  color: rgba(255,255,255,.68);
  line-height: 1.65;}

footer.site-footer .footer-col h4{
  margin: 0 0 14px;
  color: rgba(255,255,255,.72);
  font-size: .75rem;
  letter-spacing: .20em;
  text-transform: uppercase;}

footer.site-footer .footer-col ul{ display: grid; gap: 10px; }

footer.site-footer a{ color: rgba(255,255,255,.74); text-decoration: none; }

footer.site-footer .footer-col a{  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;

  font-weight: 650;
  line-height: 1.5;
  transition: color .15s ease, transform .15s ease;}
footer.site-footer .footer-col a:hover{
  color: rgba(255,255,255,.96);
  transform: translateX(2px);}

footer.site-footer .footer-note{
  color: rgba(255,255,255,.58);
  font-size: .95rem;
  font-weight: 500;}

footer.site-footer .footer-social{
  display: inline-flex;
  gap: 10px;
  margin-top: 14px;}

footer.site-footer .footer-social a{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
footer.site-footer .footer-social a:hover{  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);

  transform: translateY(-1px);}

/* Constrain footer icons */
footer.site-footer .footer-social svg,
footer.site-footer .footer-social .icon{
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  flex: 0 0 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: rgba(255,255,255,.82);
}

footer.site-footer .footer-bottom{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);}

footer.site-footer .footer-bottom-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,.58);
  font-size: .95rem;}

@media (max-width: 980px){
  footer.site-footer .footer-grid{
    grid-template-columns: 1fr;
    gap: 34px;}
  footer.site-footer .footer-links{
    grid-template-columns: 1fr;
    gap: 22px;}
  footer.site-footer .footer-bottom-inner{
    flex-direction: column;
    gap: 10px;
    text-align: center;}
}

/* ================================
   14) REVEAL
================================ */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  will-change: opacity, transform;}
.reveal.in,
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);}
.no-js .reveal{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ================================
   15) ABOUT
================================ */
.about-simple{
  display:grid;
  align-items:center;
  justify-content: center;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;}

.about-media img{  display:block;

  width:100%;
  height:auto;
  border-radius: 22px;
  box-shadow: 0 22px 70px rgba(0,0,0,.12);}

.about-list{  display:grid;
  gap:.55rem;
  margin: 1rem 0 1.25rem;
  padding:0;

  list-style:none;}

.about-list li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  opacity:.9;}

.about-list li::before{  line-height:1;
  opacity:.5;
  transform: translateY(.15rem);

  content:"•";}

.about-actions{
  display:flex;
  align-items:center;
  gap:.8rem;}

.about-copy {
  max-width: 680px;
  text-align: center;
  margin-inline: auto;}

.about-copy .section-kicker{
  display: block;
  width: 100%;
  text-align: center;
  margin-inline: auto;}

/* Keep your “center sections below hero” preference */
.section .about-copy{
  text-align:center;}
.section .about-actions{
  justify-content:center;}
.section .about-list{
  justify-items:center;}

.about-media {
  display: flex;
  justify-content: center;
  margin-top: 1rem;}

.about-media img {  display: block;

  width: 180px;          /* control size here */
  height: 180px;         /* must match width for perfect circle */
  border-radius: 50%;
  object-fit: cover;}

/* But on desktop, re-left-align for a more premium look (optional) */
@media (min-width: 900px){
  .section .about-copy{ text-align:left; }
  .section .about-actions{ justify-content:flex-start; }
  .section .about-list{ justify-items:start; }
}

@media (max-width: 900px){
  .about-simple{ grid-template-columns: 1fr; }
}

/* Services revamp */

.services-grid{  gap: 18px;

  margin-top: 26px;}

.svc-card{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 18px 55px rgba(2,6,23,.08);
  padding: 28px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

.svc-card::before{  position:absolute;
  background: radial-gradient(900px 240px at 20% 0%, rgba(255,255,255,.70), transparent 55%);
  opacity: .55;
  pointer-events:none;

  content:"";
  inset:-2px;}

/* Your hover preference: no lift, just subtle brighten/darken */
.svc-card:hover{  border-color: rgba(217,119,69,.18);
  box-shadow: 0 26px 75px rgba(2,6,23,.12);

  transform: translateY(-2px);}

.svc-card.is-featured{
  background:
          radial-gradient(900px 520px at 20% 0%, rgba(217,119,69,.10), transparent 55%),
          rgba(255,255,255,.82);
  border-color: rgba(217,119,69,.28);
}

.svc-card.is-featured::after{
  content:"Most popular";
  position:absolute;
  top: 16px;
  right: 16px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(217,119,69,.12);
  border: 1px solid rgba(217,119,69,.22);
  color: rgba(17,16,15,.78);
}

.svc-title{
  margin: 0 0 .5rem;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.2;}

.svc-desc{
  margin: 0;
  line-height: 1.5;
  opacity: .85;}

.svc-meta{  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: .5rem;

  margin-top: .9rem;}

.svc-pill{
  display:inline-flex;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  font-size: .9rem;
  line-height: 1;
  opacity: .9;}

/* Responsive */
@media (max-width: 900px){
  .services-grid{ grid-template-columns: 1fr; }
}

/* Don’t clip the intl-tel-input flag dropdown */
.contact-v2 .contact-v2-card,
.contact-v2 .contact-v2-form,
.contact-v2 .field{
  position: relative !important;
  z-index: 5 !important;
  overflow: visible !important;}


/* ===== WORK TILE: FINAL OVERRIDES ===== */

.work-tile{
  position: relative;
  overflow: hidden;}

/* dark by default; brighten on hover */
.work-tile-img{  display: block;

  width: 100%;
  height: 100%;
  filter: brightness(0.60);
  transition: filter .25s ease, transform .25s ease;
  object-fit: cover;}

.work-tile:hover .work-tile-img{
  transform: scale(1.02);}

/* overlay veil + centered logo */
.work-tile-overlay{
  position:absolute;
  display:grid;
  place-items:center;
  padding: 0;
  inset:0;}

.work-tile:hover .work-tile-overlay{
  background: rgba(17,16,15,0.10);}

/* halo behind logo (no ugly box) */
.work-logo-frame{
  display: grid;
  place-items:center;
  margin: 0;}

.work-logo-frame::before{  position: absolute;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(0,0,0,.50), rgba(0,0,0,0) 70%);
  opacity: 1;
  transition: opacity .25s ease;
  pointer-events: none;

  content: "";
  inset: -18px -28px;}

.work-tile:hover .work-logo-frame::before{
  opacity: 0; /* halo disappears on hover */
}

/* ✅ Make ALL logos the same “presence” using WIDTH as the driver */
.work-tile-logo{  display: block;

  width: min(74%, 380px);

  /* defensive: in case older rules linger */
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;}

.work-tile--concord .work-tile-logo{
  transform: translateX(-2%) translateY(-15%);}

/* ================================
   SERVICES V3 (complete redesign)
================================ */
.services-v3 .section-head{ margin-bottom: 18px; }

/* Outcomes strip */
.svc-outcomes{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  max-width: 980px;
  margin: 18px auto 22px;}

.svc-outcome{
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}

.svc-outcome-title{  color: rgba(17,16,15,.88);

  font-weight: 750;
  letter-spacing: -0.01em;}

.svc-outcome-sub{
  margin-top: 4px;
  color: rgba(71,85,105,.88);
  font-size: .95rem;}

/* Main grid */
.svc-grid-v3{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-top: 6px;}

/* Service panels */
.svc-panel{
  position: relative;
  border-radius: 24px;
  padding: 22px 22px 18px;
  text-align: left;

  background:
          radial-gradient(900px 360px at 18% 0%, rgba(255,255,255,.85), transparent 55%),
          rgba(255,255,255,.72);

  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
  overflow: hidden;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

/* subtle edge-light */
.svc-panel::before{  position:absolute;
  background: radial-gradient(600px 280px at 70% -10%, rgba(217,119,69,.10), transparent 55%);
  opacity: .65;
  pointer-events:none;

  content:"";
  inset: -2px;}

.svc-panel:hover{  border-color: rgba(217,119,69,.16);
  box-shadow: 0 26px 85px rgba(2,6,23,.12);

  transform: translateY(-2px);}

/* primary card gets slightly more presence, not tacky */
.svc-panel.is-primary{
  background:
          radial-gradient(900px 520px at 20% 0%, rgba(217,119,69,.14), transparent 58%),
          rgba(255,255,255,.78);
  border-color: rgba(217,119,69,.22);
}

.svc-panel-top{ max-width: 62ch; }

.svc-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;

  padding: 8px 10px;
  border-radius: 999px;

  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.06);
  color: rgba(15,23,42,.70);
}

.svc-panel.is-primary .svc-badge{  border-color: rgba(217,119,69,.20);

  background: rgba(217,119,69,.12);
  color: rgba(17,16,15,.78);}

.svc-h{
  margin: 12px 0 8px;
  font-size: 1.2rem;
  letter-spacing: -0.02em;}

.svc-p{
  margin: 0;
  color: rgba(71,85,105,.92);
  line-height: 1.55;}

/* bullets */
.svc-bullets{  display: grid;
  gap: 10px;

  margin: 16px 0 0;
  padding: 0;
  list-style: none;}

.svc-bullets li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(15,23,42,.78);}

.svc-bullets li::before{  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: .45rem;
  border-radius: 999px;
  background: rgba(217,119,69,.55);
  box-shadow: 0 10px 22px rgba(217,119,69,.18);

  content:"";}

/* footer tags */
.svc-foot{ margin-top: 16px; }

.svc-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;}

.svc-tags span{
  font-size: .9rem;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.06);
  color: rgba(15,23,42,.72);
  font-weight: 600;
}

/* CTA row */
.svc-cta-row{  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin-top: 22px;}

/* Responsive */
@media (max-width: 980px){
  .svc-outcomes{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px){
  .svc-grid-v3{ grid-template-columns: 1fr; }
  .svc-panel{ text-align: center; }
  .svc-bullets li{ justify-content: center; }
  .svc-bullets li::before{ margin-top: .55rem; }
  .svc-tags{ justify-content: center; }
}

/* ===== Mobile menu icon (hamburger) ===== */
.menu-toggle{
  display: none; /* your existing default is fine */
}

@media (max-width: 768px){
  .menu-toggle{
    display: inline-flex;          /* ensure it shows */
    align-items: center;
    justify-content: center;}
}

/* Make sure the SVG actually renders and has dimensions */
.menu-toggle .menu-icon{  display: block;

  width: 24px;
  height: 24px;}

/* IMPORTANT: paths need a stroke or they can render invisible */
.menu-toggle .menu-icon .line{
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
}

/* ===== Mobile menu: hamburger → X ===== */

/* make the icon inherit the button text color */
.menu-toggle .menu-icon{
  display: block;}

/* ensure the lines are visible (some resets accidentally remove stroke) */
.menu-toggle .menu-icon .line{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;

  transform-box: fill-box;
  transform-origin: center;

  transition: transform .22s ease, opacity .18s ease;
}

/* open state */
.menu-toggle.is-open .menu-icon .line1{
  transform: translateY(5px) rotate(45deg);}

.menu-toggle.is-open .menu-icon .line2{
  opacity: 0;}

.menu-toggle.is-open .menu-icon .line3{
  transform: translateY(-5px) rotate(-45deg);}

/* ================================
   Footer legal links
================================ */
.footer-legal{
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.65);
  font-size: .9rem;}

.footer-legal a{  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.22);

  color: rgba(255,255,255,.72);
  font-weight: 500;
  text-decoration: none;}

.footer-legal a:hover{
  color: rgba(255,255,255,.95);
  border-bottom-color: rgba(255,255,255,.45);}

/* Stack nicely on mobile */
@media (max-width: 680px){
  .footer-legal{
    margin-top: 8px;}
}

/* ================================
              PROCESS
================================ */
.process { overflow: hidden; }

.process-grid{
  display:grid;
  align-items: start;
  grid-template-columns: 380px 1fr;
  gap: 26px;
  margin-top: 26px;}

/* Left rail */
.process-rail{
  display:grid;
  gap: 12px;}

.process-step{
  position: relative;
  text-align: left;
  border: 1px solid rgba(20,20,20,.06);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 16px 16px;
  cursor: pointer;

  /* Premium depth */
  box-shadow:
          0 1px 0 rgba(255,255,255,.75) inset,
          0 12px 30px rgba(20,20,20,.06);

  transition:
          transform 160ms ease,
          box-shadow 160ms ease,
          border-color 160ms ease,
          background 160ms ease;
}

/* Accent bar (premium “selected” affordance) */
.process-step::before{  position:absolute;
  top: 12px;
  bottom: 12px;
  left: 10px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background 160ms ease, box-shadow 160ms ease;

  content:"";}

.process-step:hover{
  transform: translateY(-1px);
  box-shadow:
          0 1px 0 rgba(255,255,255,.75) inset,
          0 18px 45px rgba(20,20,20,.10);
  border-color: rgba(20,20,20,.10);
}

.process-step.is-active{
  background: rgba(255,255,255,.92);
  border-color: rgba(217,119,69,.22);
  box-shadow:
          0 1px 0 rgba(255,255,255,.78) inset,
          0 22px 60px rgba(217,119,69,.10),
          0 14px 40px rgba(20,20,20,.08);
}

.process-step.is-active::before{
  background: rgba(217,119,69,.95);
  box-shadow: 0 0 0 6px rgba(217,119,69,.10);}

.process-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 36px;
  height: 24px;
  margin-right: 10px;
  border-radius: 999px;
  background: rgba(20,20,20,.04);
  color: rgba(20,20,20,.65);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;}

.process-step-title{
  display:block;
  margin-top: 10px;
  color: rgba(20,20,20,.92);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.01em;}

.process-step-sub{
  display:block;
  margin-top: 4px;
  color: rgba(20,20,20,.58);
  font-size: 13px;
  line-height: 1.35;}

/* Right panel container */
.process-panel-wrap{
  position: relative;
  border: 1px solid rgba(20,20,20,.06);
  background: rgba(255,255,255,.70);
  border-radius: 24px;
  padding: 12px;

  /* Premium “card on matte” */
  box-shadow:
          0 1px 0 rgba(255,255,255,.75) inset,
          0 32px 90px rgba(20,20,20,.10);
  transition:
          opacity 220ms cubic-bezier(.22,.61,.36,1),
          transform 220ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

/* Inner panel layout */
.process-panel{
  display:grid;
  align-items: center;
  grid-template-columns: 1.05fr .95fr;
  gap: 12px;
  padding: 6px;
  border-radius: 20px;}

/* Copy */
.process-panel-top{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;}

.process-badge{
  width: fit-content;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(217,119,69,.10);
  border: 1px solid rgba(217,119,69,.18);
  color: rgba(20,20,20,.70);
  margin-left: auto;
  margin-right: auto;
}

.process-panel h3{
  margin: 0;
  color: rgba(20,20,20,.95);
  font-size: 22px;
  letter-spacing: -0.02em;}

.process-panel p{  max-width: 46ch;

  margin: 0;
  color: rgba(20,20,20,.62);}

/* Bullets with “premium checks” */
.process-bullets{  display:grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;

  list-style: none;}

.process-bullets li{
  display:flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(20,20,20,.62);
  font-size: 14px;
  line-height: 1.45;}

.process-bullets li::before{
  content: "✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  margin-top: 1px;
  background: rgba(217,119,69,.12);
  border: 1px solid rgba(217,119,69,.18);
  color: rgba(20,20,20,.78);
  font-weight: 800;
}

#process-desc {  max-width: 46ch;
  color: #555;               /* darker than body copy */
  margin-top: 10px;
  margin-bottom: 18px;

  font-size: 1.05rem;        /* slightly larger than body */
  line-height: 1.55;}

.process-panel p {  max-width: 50ch;
  color: #777;               /* clearly secondary */
  margin: 0 0 12px;

  font-size: 0.95rem;
  line-height: 1.7;}

.process-body{ margin-top: 12px; }
.process-paragraph{  max-width: 46ch;

  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.6;}

@media (max-width: 720px){
  .process-body{
    display: none;}
  .process-cta-row{
    flex-direction: column;
    align-items: stretch;}

  .process-cta-row .cta-link{
    display: none;}

  .process{
    padding-top: 56px;
    padding-bottom: 56px;}

  .process-panel-wrap{
    padding: 14px;}

  .process-lead{
    padding: 16px;}
}

/* CTA row */
.process-cta-row{  display:flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-top: 16px;}

.process-cta-row a{
  text-align: center;}

.process-panel-copy::after {  display: block;
  width: 36px;
  height: 1px;
  margin: 18px 0 20px;
  background: rgba(217,119,69,.25);

  content: "";}

/* Media */
.process-panel-media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(20,20,20,.06);
  background: rgba(255,255,255,.55);

  box-shadow:
          0 1px 0 rgba(255,255,255,.6) inset,
          0 20px 60px rgba(20,20,20,.14);
  height: 280px;
}

/* Add a subtle gradient overlay so any photo looks “art directed” */
.process-panel-media::after{
  content:"";
  position:absolute; inset:0;
  background:
          radial-gradient(120% 80% at 20% 20%, rgba(255,255,255,.35), transparent 55%),
          linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18));
  pointer-events:none;
}

.process-panel-media img{  display:block;

  width: 100%;
  height: 100%;
  filter: saturate(1.02) contrast(1.02);
  transform: scale(1.04);
  object-fit: cover;}

.process-panel-media img.is-contain{  background: rgba(246,241,234,0.25);

  object-fit: contain;}

.process-panel-media img.is-contain{  background: rgba(246,241,234,0.25);
  filter: none;
  transform: none;

  object-fit: contain;}

/* Smooth panel swap (JS adds .is-swapping briefly) */
.process-panel-wrap.is-swapping{
  opacity: .96;
  transform: translateY(-4px);
  /*transition: opacity 180ms ease, transform 180ms ease;*/
}

/* MOBILE: make it clean + tappable */
@media (max-width: 720px){
  .process-cta-row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;}

  .process-cta-row .cta-primary{    justify-content: center;

    width: 100%;
    text-align: center;}

  .process-cta-row .cta-link{    justify-content: center;

    width: 100%;
    padding: 12px 14px;
    background: rgba(210,108,54,.08);
    box-shadow: inset 0 0 0 1px rgba(210,108,54,.16);}

  /* remove underline on mobile pill */
  .process-cta-row .cta-link::after{ display:none; }
}

/* Responsive */
@media (max-width: 980px){
  .process-grid{ grid-template-columns: 1fr; }
  .process-panel{ grid-template-columns: 1fr; }
}

/* Tabs + panel layout */
.process-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 22px;}

/* Top tabs */
.process-tabs{  display: flex;
  position: relative;
  justify-content: center;
  gap: 16px;

  margin-top: 18px;
  margin-bottom: 12px;}

.process-tabs{
  isolation: isolate;
}

.process-tabs::before{
  content: "";
  position: absolute;
  top: calc(100% + 22px);
  left: 6%;
  right: 6%;
  height: 2px;
  background: rgba(15,23,42,.12);
  transform: translateY(-50%);
  z-index: -1;
  pointer-events: none;
}

.process-tabs::after{
  content: "";
  position: absolute;
  top: calc(100% + 22px);
  left: 6%;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, rgba(217,119,69,.75), rgba(217,119,69,1));
  transform: translateY(-50%);
  transition: width .3s ease;
  z-index: -1;
  pointer-events: none;
}

.process-tabs[data-active-step="1"]::after{ width: 0%; }
.process-tabs[data-active-step="2"]::after{ width: calc((100% - 12%) * 0.3333); }
.process-tabs[data-active-step="3"]::after{ width: calc((100% - 12%) * 0.6666); }
.process-tabs[data-active-step="4"]::after{ width: calc(100% - 12%); }

.process-tab{
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
  cursor: pointer;

  /* bigger hit target */
  width: 56px;
  height: 56px;
  border-radius: 999px;

  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;

  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.process-tab:hover{
  background: rgba(255,255,255,.55);
  box-shadow: 0 14px 36px rgba(20,20,20,.08);
  transform: translateY(-1px);}

.process-tab.is-active{
  background: rgba(255,255,255,.85);
  box-shadow:
          0 22px 60px rgba(217,119,69,.14),
          0 10px 24px rgba(20,20,20,.06);
}

/* Orange icons */
.process-tab svg{
  width: 30px;
  height: 30px;
  fill: none;
  stroke: rgba(217,119,69,.95);}

.process-tab svg [fill]:not([fill="none"]){
  fill: rgba(217,119,69,.95);}

.process-tab:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.process-tab.is-active .process-tab-icon{  border-color: rgba(217,119,69,.35);
  background: rgba(217,119,69,.16);
  transform: scale(1.03);

  animation: breathe 2.8s ease-in-out infinite;}

@keyframes breathe{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}

.process-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(217,119,69,.10);
  border: 1px solid rgba(217,119,69,.18);
  color: var(--accent-icon);
  flex: 0 0 auto;
}

.process-tab-icon{
  width: 55px;
  height: 55px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: #fff;
  border: 1px solid rgba(217,119,69,.20);

  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.process-ico svg{
  width: 35px;
  height: 35px;
  fill: currentColor;
  stroke: currentColor !important;}

.process-tab-title{
  font-weight: 700;
  line-height: 1.15;}

/* Panel stays same */
.process-panel-wrap{
  border: 1px solid rgba(20,20,20,.08);
  background: rgba(255,255,255,.70);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 26px 70px rgba(20,20,20,.08);
}

/* Lead bubble (title + desc container) */
.process-lead{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(217,119,69,.18);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 18px;

  box-shadow:
          0 12px 30px rgba(20,20,20,.05),
          inset 0 1px 0 rgba(255,255,255,.6);

  position: relative;
  text-align: center;
}

/* Optional: subtle orange accent */
.process-lead::before{
  content:"";
  position:absolute;
  left:-1px;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:3px;
  background: linear-gradient(
          to bottom,
          rgba(217,119,69,.65),
          rgba(217,119,69,.15)
  );
}

.process-lead h3{
  margin: 8px 0 6px;}

.process-lead #process-desc{  max-width: 46ch;

  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;}

/* Your body paragraphs now read as “secondary” */
.process-paragraph{  max-width: 56ch;
  margin: 0 0 14px;
  color: rgba(20,20,20,.62);

  font-size: .95rem;
  line-height: 1.75;}

/* Responsive: wrap tabs */
@media (max-width: 900px){
  .process-tabs{
    grid-template-columns: 1fr 1fr;}
}
@media (max-width: 520px){
  .process-tabs{
    grid-template-columns: 1fr;}
}

/* --------------------------------
   Process icon tabs: kill white halo
--------------------------------- */

/* Make the button itself never draw a “ring” */
.process-tab{  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;

  appearance: none;}

/* If you have any global button focus shadows, override them here */
.process-tab:focus,
.process-tab:focus-visible,
.process-tab:active{
  outline: none !important;
  box-shadow: none !important;}

/* The icon "pill" is the only visual element */
.process-tab-icon{
  display: grid;
  place-items: center;
  border-radius: 18px;              /* or 999px if you want fully round */
  background: rgba(217,119,69,.10); /* your soft orange */
  border: 1px solid rgba(217,119,69,.22);
  box-shadow: none;                 /* <-- this prevents a white halo */
}

/* Active state: your orange ring/shadow (not white) */
.process-tab.is-active .process-tab-icon{
  background: rgba(217,119,69,.14);
  border-color: rgba(217,119,69,.35);
  box-shadow: 0 10px 30px rgba(217,119,69,.18); /* orange glow */
}

/* Keyboard accessibility: show a deliberate orange focus ring */
.process-tab:focus-visible .process-tab-icon{
  box-shadow:
    0 0 0 3px rgba(217,119,69,.22),
    0 10px 30px rgba(217,119,69,.18);
}

/* ================================
   PORTFOLIO — Gallery-grade polish
================================ */

.portfolio-hero{
  padding-top: clamp(64px, 7vw, 110px);
  overflow: hidden;}

.portfolio-hero-inner{
  display: grid;
  align-items: center;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(18px, 4vw, 46px);}

.portfolio-hero .maxw{  max-width: 30ch;
  margin: 12px auto 0;

  text-align: center;}

@media (max-width: 900px){
  .portfolio-hero-inner{ grid-template-columns: 1fr; }
}

.portfolio-title{  margin: 0 0 10px;

  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;}

.portfolio-sub{
  margin: 0 0 18px;
  color: var(--muted);}

.portfolio-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 10px;}

.portfolio-filters{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;}

.pf-chip{
  appearance: none;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.60);
  color: rgba(15,23,42,.78);
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(2,6,23,.06);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.pf-chip:hover{  box-shadow: 0 18px 50px rgba(2,6,23,.10);

  transform: translateY(-1px);}
.pf-chip.is-active{  border-color: rgba(217,119,69,.22);

  background: rgba(217,119,69,.12);
  color: rgba(15,23,42,.92);
  box-shadow: 0 22px 60px rgba(217,119,69,.14);}

/* Hero “art” — subtle ambient sculpture */
.portfolio-hero-art{ position: relative; min-height: 320px; }
.ph-orb{
  position: absolute;
  border-radius: 999px;
  opacity: .85;
  filter: blur(18px);}
.ph-orb-a{  left: -60px; top: -40px;

  width: 320px; height: 320px;
  background: radial-gradient(circle at 30% 30%, rgba(217,119,69,.25), transparent 60%);}
.ph-orb-b{  right: -80px; bottom: -80px;

  width: 360px; height: 360px;
  background: radial-gradient(circle at 40% 40%, rgba(2,6,23,.14), transparent 62%);}

.ph-frame{
  position: absolute;
  inset: 24px 14px 24px 14px;
  border-radius: 26px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 30px 90px rgba(2,6,23,.10);
  overflow: hidden;
}
.ph-frame-inner{
  position: absolute;
  inset: -40px;
  background:
          radial-gradient(900px 380px at 20% 0%, rgba(255,255,255,.9), transparent 55%),
          radial-gradient(900px 420px at 80% 20%, rgba(217,119,69,.12), transparent 60%),
          linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.10));
  transform: rotate(-6deg);
}

/* Grid: featured first card spans 2 columns */
.portfolio-grid{ margin-top: 18px; }
.work-card--featured{
  grid-column: span 2;}
@media (max-width: 950px){
  .work-card--featured{ grid-column: auto; }
}

/* Card hover becomes “gallery”: light sheen + refined lift */
.work-card{
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;}
.work-card:hover{  box-shadow: 0 34px 90px rgba(2,6,23,.14);

  transform: translateY(-4px);}

/* Image: cinematic by default, brightens on hover */
.work-thumb img{
  filter: brightness(.84) saturate(1.02);
  transition: filter .25s ease, transform .25s ease;}
.work-card:hover .work-thumb img{
  filter: brightness(.96) saturate(1.05);
  transform: scale(1.02);}

/* Tags look more “designed” */
.work-tags span{
  border-radius: 999px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.06);
}

.portfolio-footer-cta{  display: flex;
  justify-content: center;

  margin-top: 26px;}

/* ================================
   PORTFOLIO (hero left, square tiles, tabs above grid)
================================ */

.portfolio-page .portfolio-hero{
  padding-top: clamp(56px, 6vw, 96px);}

/* HERO left-aligned ONLY on portfolio */
.portfolio-page .portfolio-hero .container{
  text-align: left;
  align-items: flex-start;
  display: block; /* cancels your global flex-centering on sections */
}

.portfolio-hero .maxw{
  margin: 0;}

.portfolio-hero-ctas{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 14px;
  margin-top: 18px;}

/* Filter tabs */
.portfolio-filters{
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 16px;}

.filter-tab{
  appearance: none;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  color: rgba(15,23,42,.78);
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}

.filter-tab:hover{  filter: brightness(0.98);

  transform: translateY(-1px);}

.filter-tab.is-active{  border-color: rgba(217,119,69,.22);

  background: rgba(217,119,69,.12);
  color: rgba(17,16,15,.82);}

.filter-tab:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(217,119,69,.18), 0 10px 26px rgba(2,6,23,.08);}

/* Square grid */
.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;}

@media (max-width: 1100px){
  .portfolio-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .portfolio-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .portfolio-grid{ grid-template-columns: 1fr; }
}

/* Square tiles: all identical */
.project-tile{
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* hard square */
.project-tile{
  aspect-ratio: 1 / 1;}

.project-tile:hover{  border-color: rgba(217,119,69,.18);
  box-shadow: var(--shadow);

  transform: translateY(-2px);}

.project-media{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;}

/* image covers and is consistent */
.project-media img{  display: block;

  width: 100%;
  height: 100%;
  filter: brightness(.92);
  transition: transform .25s ease, filter .25s ease;
  object-fit: cover;}

.project-tile:hover .project-media img{  filter: brightness(.96);

  transform: scale(1.04);}


.project-media video {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.001);
  backface-visibility: hidden;
  object-fit: cover;}

/* bottom meta overlay: consistent height */
.project-meta{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;

  border-radius: 18px;
  padding: 12px 12px;

  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 60px rgba(2,6,23,.10);
}

.project-title{  color: rgba(15,23,42,.92);

  font-weight: 800;
  letter-spacing: -0.01em;}

.project-desc{
  /* clamp so all cards feel uniform */
  display: -webkit-box;

  margin-top: 6px;
  color: rgba(71,85,105,.86);
  font-size: .95rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;}

.project-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;}

.project-tags span{
  font-size: .82rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  color: rgba(15,23,42,.70);
}

/* keyboard */
.project-tile:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(217,119,69,.22), var(--shadow);}

/* ================================
   Portfolio — reference style (tabs + square tiles + logo overlay)
================================ */

/* Tabs row (centered) */
.port-tabs{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin: 6px 0 26px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15,23,42,.10);}

/* Each tab: clean text + underline on active */
.port-tab{  position: relative;
  padding: 10px 2px;
  border: 0;
  background: transparent;
  color: rgba(15,23,42,.72);

  font-size: 1.1rem;
  font-weight: 650;
  cursor: pointer;

  appearance: none;}

@media (max-width: 768px){
  .port-tabs .port-tab{
    font-size: 1rem;    /* bump for readability */
    padding: 5px 10px;   /* better touch comfort */
  }
}

.port-tab:hover{ color: rgba(15,23,42,.92); }

.port-tab::after{  position: absolute;
  bottom: -11px;
  left: 0; right: 0;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transition: background .18s ease;

  content:"";}

.port-tab.is-active{
  color: rgba(15,23,42,.92);}

.port-tab.is-active::after{
  background: rgba(217,119,69,.85); /* your orange accent */
}

/* ===== Portfolio grid: collapse remaining tiles to center ===== */
.port-grid{
  --tile: 260px;       /* pick your square size */
  --gap: 24px;

  display: grid !important;
  gap: var(--gap) !important;

  /* This is the key: number of columns collapses based on visible items + available width */
  grid-template-columns: repeat(auto-fit, minmax(var(--tile), var(--tile))) !important;

  justify-content: center !important; /* centers the whole set */
  justify-items: center !important;

  width: 100% !important;     /* grid can be full width */
  margin-inline: auto !important;
}

/* Square tiles */
.port-tile{
  width: var(--tile) !important;
  aspect-ratio: 1 / 1 !important;}

@media (min-width: 1100px){
  .port-grid{
    --tile: 252px;  /* 256 also often works; 260 is usually too big with your padding */
  }
}

/* Mobile: let it go fluid */
@media (max-width: 620px){
  .port-grid{
    grid-template-columns: 1fr !important;}
  .port-tile{
    width: 100% !important;
    max-width: 420px; /* optional */
  }
}

/* Your JS depends on this */
.port-tile.is-gone{ display: none !important; }

/* IMPORTANT: hidden tiles must not occupy grid cells */
.port-tile.is-gone{ display: none !important; }


/* Tile */
.port-tile{
  position: relative;
  display: block;
  background: #000;
  aspect-ratio: 1 / 1;        /* square */
  box-shadow: none;           /* reference is flat */
  transform: translateZ(0);
  border-radius: 12px;
  overflow: hidden;}

/* Background image */
.port-bg{  display: block;

  width: 100%;
  height: 100%;
  filter: brightness(.72);
  transform: scale(1.001);
  transition: transform .28s ease, filter .28s ease;
  object-fit: cover;}

/* Centered logo overlay */
.port-overlay{
  position: absolute;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: none;
  inset: 0;}

/* Logo sizing */
.port-logo{  display: block;

  width: min(70%, 260px);
  height: auto;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.25));
  object-fit: contain;
  opacity: 1;
  transition: opacity .25s ease;}

/* Optional wordmark if you use text instead of logos */
.port-wordmark{  color: rgba(255,255,255,.92);

  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 18px 40px rgba(0,0,0,.35);}

/* Hover */
.port-tile:hover .port-bg{
  filter: brightness(.86);
  transform: scale(1.04);}

.port-tile:hover .port-logo{
  opacity: 0;
}

/* Keyboard */
.port-tile:focus-visible{
  outline: 3px solid rgba(217,119,69,.35);
  outline-offset: 4px;
}

/* ===== Portfolio filtering: soft fade ===== */
.port-tile{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 420ms ease, transform 420ms ease;
  will-change: opacity, transform;}

.port-tile.is-hidden{
  opacity: 0;
  transform: translateY(6px) scale(.985);
  pointer-events: none;}

.port-tile.is-gone{
  display: none;}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .port-tile{ transition: none; }
}

.port-overlay::before{  position:absolute;
  background: radial-gradient(closest-side, rgba(0,0,0,.35), rgba(0,0,0,0) 70%);
  opacity: .9;
  transition: opacity .25s ease;

  content:"";
  inset:0;}

.port-tile:hover .port-overlay::before{
  opacity: .6;}

.port-overlay{
  position: absolute;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: none;
  inset: 0;}

.port-logo,
.port-wordmark{
  position: relative; /* sits above the veil */
  z-index: 1;}

/* ================================
   ABOUT — Gallery-grade polish
================================ */

.about-hero{
  padding-top: clamp(64px, 7vw, 110px);
  overflow: hidden;}

.about-hero-inner{
  display: grid;
  align-items: center;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(18px, 4vw, 46px);}

@media (max-width: 900px){
  .about-hero-inner{ grid-template-columns: 1fr; }
}

.about-title{  margin: 0 0 10px;

  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;}

.about-sub{ margin: 0 0 18px; color: var(--muted); }

.about-hero-ctas{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;}

.about-proof{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  max-width: 720px;
  margin-top: 18px;}

@media (max-width: 900px){
  .about-proof{ grid-template-columns: 1fr; }
}

.about-proof-item{
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.62);
  border-radius: 18px;
  padding: 12px 12px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}

.about-proof-top{  color: rgba(15,23,42,.92);

  font-weight: 750;
  letter-spacing: -0.01em;}
.about-proof-bottom{
  margin-top: 4px;
  color: rgba(71,85,105,.88);
  font-size: .95rem;}

/* Hero art panel */
.about-hero-art{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 270px;}

/* ABOUT: WHO I AM + WHAT I DO (uses your existing project-two-col pattern) */
.about-page .project-two-col{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;          /* ✅ vertical centering on desktop */
}

/* Make sure the right column (card) centers nicely */
.about-page .project-media{
  display: flex;
  align-items: center;          /* ✅ centers the card within the column */
  justify-content: center;}

/* Optional: keep the card a consistent max width so it "lines up" visually */
.about-page .project-media .card{
  width: min(520px, 100%);}

/* Mobile: stack and ensure media is NOT hidden */
@media (max-width: 860px){
  .about-page .project-two-col{
    grid-template-columns: 1fr;}

  /* ✅ this is the “it’s missing” fix if any other CSS hides it */
  .about-page .project-media{
    display: flex !important;
    margin-top: 14px;}

  /* Optional: if you want the text first, card second (current order already does that) */
  .about-page .project-copy{ order: 1; }
  .about-page .project-media{ order: 2; }
}

.ah-orb{
  position:absolute;
  border-radius: 999px;
  opacity: .85;
  filter: blur(18px);}
.ah-orb-a{  left: -60px; top: -40px;

  width: 320px; height: 320px;
  background: radial-gradient(circle at 30% 30%, rgba(217,119,69,.22), transparent 60%);}
.ah-orb-b{  right: -90px; bottom: -90px;

  width: 360px; height: 360px;
  background: radial-gradient(circle at 40% 40%, rgba(2,6,23,.14), transparent 62%);}

.ah-frame{
  position: absolute;
  inset: 24px 14px;
  border-radius: 26px;
  background: rgba(255,255,255,.01);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 30px 90px rgba(2,6,23,.10);
  overflow: hidden;

  display: grid;
  place-items: center;
}

.ah-frame img{  display: block;
  width: auto;

  max-width: 72%;
  height: auto;
  max-height: 72%;
  object-fit: contain;}

.ah-frame-inner{
  position:absolute;
  inset: -40px;
  background:
          radial-gradient(900px 380px at 20% 0%, rgba(255,255,255,.9), transparent 55%),
          radial-gradient(900px 420px at 80% 20%, rgba(217,119,69,.12), transparent 60%),
          linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.10));
  transform: rotate(-6deg);
}

/* Mini spec cards inside hero art */
.ah-mini{
  position:absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;}

@media (max-width: 900px){
  .ah-mini{ grid-template-columns: 1fr; }
}

.ah-mini-card{
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 55px rgba(2,6,23,.08);
  padding: 12px 12px;
}

.ah-mini-kicker{  color: rgba(71,85,105,.70);

  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;}

.ah-mini-title{
  margin-top: 6px;
  color: rgba(15,23,42,.92);
  font-weight: 800;
  letter-spacing: -0.01em;}

.ah-mini-sub{
  margin-top: 2px;
  color: rgba(71,85,105,.82);
  font-size: .92rem;}

/* Principles cards: add icon + refined hover */
.about-card{
  position: relative;
  overflow: hidden;}
.about-card-ico{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  margin: 0 auto 10px;
  background: rgba(217,119,69,.12);
  border: 1px solid rgba(217,119,69,.18);
  color: rgba(15,23,42,.86);
  box-shadow: 0 16px 44px rgba(217,119,69,.12);
  font-weight: 900;
}

.about-card:hover{  box-shadow: 0 34px 90px rgba(2,6,23,.12);

  transform: translateY(-3px);}

/* Snapshot section layout */
.about-snap-inner{
  display:grid;
  align-items: start;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 4vw, 46px);}

@media (max-width: 900px){
  .about-snap-inner{ grid-template-columns: 1fr; text-align: center; }
  .about-snap-ctas{ justify-content: center; }
}

.about-snap-ctas{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 14px;
  margin-top: 12px;}

/* Steps rail */
.about-steps{
  border-radius: 24px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 28px 85px rgba(2,6,23,.10);
  padding: 14px;
  display:grid;
  gap: 10px;
}

.about-step{
  display:flex;
  gap: 12px;
  align-items: flex-start;
  text-align:left;
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,23,42,.06);
}

.about-step-num{  display:grid;
  place-items:center;

  width: 44px;
  height: 36px;
  border-radius: 999px;
  background: rgba(2,6,23,.04);
  color: rgba(15,23,42,.70);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .10em;}

.about-step-title{  color: rgba(15,23,42,.92);

  font-weight: 800;
  letter-spacing: -0.01em;}

.about-step-sub{
  margin-top: 2px;
  color: rgba(71,85,105,.82);
  font-size: .95rem;}

/* Tools pill row */
.about-tool-pills{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 980px;
  margin-inline: auto;}

.about-tool-pills span{
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.06);
  color: rgba(15,23,42,.76);
  font-weight: 650;
}

/* CTA band extra presence */
.about-cta{
  background:
          radial-gradient(900px 520px at 20% 0%, rgba(217,119,69,.10), transparent 55%),
          var(--bg);
}

/* ================================
   ABOUT — Studio DNA
================================ */
.studio-dna .dna-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  max-width: 980px;
  margin-inline: auto;
}

@media (max-width: 980px){
  .studio-dna .dna-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px){
  .studio-dna .dna-grid{ grid-template-columns: 1fr; }
}

.dna-card{
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 16px 50px rgba(2,6,23,.08);
}
.dna-card h3{
  margin: 10px 0 6px;
}
.dna-card p{
  margin: 0;
  color: rgba(71,85,105,.88);
}
.dna-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(217,119,69,.12);
  border: 1px solid rgba(217,119,69,.2);
}
.dna-icon svg{
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ================================
   SERVICES — Product-page polish
================================ */

.services-hero{
  padding-top: clamp(64px, 7vw, 110px);}

.services-hero-ctas{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content: center;
  gap: 14px;}

.value-deliverables{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .value-deliverables{ grid-template-columns: 1fr; }
}
.value-cards{
  margin-top: 0;
}
.value-deliverables-right{
  text-align: left;
}
.deliverables-title{
  margin: 6px 0 12px;
}
.deliverables-stack{
  display: grid;
  gap: 12px;
}
.deliverable-panel h4{
  margin: 0 0 8px;
  font-size: 1rem;
}

.services-scope .scope-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  max-width: 1100px;
  margin-inline: auto;
}
@media (max-width: 980px){
  .services-scope .scope-grid{ grid-template-columns: 1fr; }
}

.scope-card{
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 60px rgba(2,6,23,.10);
  text-align: left;
}
.scope-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.scope-pill{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(217,119,69,.12);
  border: 1px solid rgba(217,119,69,.2);
  color: rgba(15,23,42,.85);
}
.scope-price{
  font-weight: 750;
  color: rgba(15,23,42,.85);
}
.scope-list{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(71,85,105,.85);
}
.scope-cta{
  display: inline-block;
  margin-top: 12px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.services-includes .include-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  max-width: 980px;
  margin-inline: auto;
}
@media (max-width: 980px){
  .services-includes .include-grid{ grid-template-columns: 1fr; }
}
.include-item{
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 16px 50px rgba(2,6,23,.08);
  text-align: left;
}
.include-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: rgba(15,23,42,.85);
  background: rgba(217,119,69,.12);
  border: 1px solid rgba(217,119,69,.2);
}
.include-item h3{
  margin: 10px 0 6px;
}
.include-item p{
  margin: 0;
  color: rgba(71,85,105,.85);
}

.services-deliverables .deliverables-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 18px auto 0;
}
@media (max-width: 900px){
  .services-deliverables .deliverables-grid{ grid-template-columns: 1fr; }
}
.deliverable-panel{
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 22px 70px rgba(2,6,23,.10);
}
.deliverable-list{
  margin: 10px 0 8px;
  padding-left: 18px;
  color: rgba(71,85,105,.85);
}
.deliverable-spec{
  display: grid;
  gap: 8px;
  margin: 10px 0 8px;
  color: rgba(71,85,105,.85);
}
.deliverable-note{
  margin: 0;
  color: rgba(71,85,105,.7);
  font-size: .95rem;
}

/* Your outcomes strip (matches your v3 styles) */
.svc-outcomes{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  max-width: 980px;
  margin: 18px auto 0;}

@media (max-width: 980px){
  .svc-outcomes{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .svc-outcomes{ grid-template-columns: 1fr; }
}

.svc-outcome{
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}

.svc-outcome-title{  color: rgba(15,23,42,.92);

  font-weight: 750;
  letter-spacing: -0.01em;}
.svc-outcome-sub{
  margin-top: 4px;
  color: rgba(71,85,105,.88);
  font-size: .95rem;}

/* Feature cards: icon treatment */
.svc-feature{
  position: relative;
  overflow: hidden;}
.svc-ico{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  margin: 0 auto 10px;
  background: rgba(217,119,69,.12);
  border: 1px solid rgba(217,119,69,.18);
  box-shadow: 0 16px 44px rgba(217,119,69,.12);
  font-weight: 900;
}

/* Packages already use your svc-grid-v3 + svc-panel system,
   but this helps spacing and section vibe */
.services-packages .svc-cta-row{  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin-top: 22px;}

/* Process steps */
.services-steps{  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;

  max-width: 980px;
  margin-inline: auto;}

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

.services-step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  text-align:left;
  border-radius: 20px;
  padding: 14px 14px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 22px 70px rgba(2,6,23,.08);
}

.services-step-pill{  display:grid;
  place-items:center;

  width: 44px;
  height: 36px;
  border-radius: 999px;
  background: rgba(2,6,23,.04);
  color: rgba(15,23,42,.70);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .10em;}

.services-step-title{  color: rgba(15,23,42,.92);

  font-weight: 800;
  letter-spacing: -0.01em;}
.services-step-sub{
  margin-top: 2px;
  color: rgba(71,85,105,.82);
  font-size: .95rem;}

/* FAQ */
.services-faq-grid{  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;

  max-width: 980px;
  margin-inline: auto;}

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

.services-faq-item{
  border-radius: 20px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
  padding: 14px 16px;
  text-align: left;
}

.services-faq-item summary{  color: rgba(15,23,42,.92);
  font-weight: 800;
  letter-spacing: -0.01em;
  list-style: none;

  cursor: pointer;}

.services-faq-item summary::-webkit-details-marker{
  display:none;}

.services-faq-item p{
  margin: 10px 0 0;
  color: rgba(71,85,105,.85);
  line-height: 1.6;}

/* ==========================================================
   19) intl-tel-input — FINAL (scoped, single block)
   Keep this at the VERY END of your CSS.
   IMPORTANT: do NOT define any other .iti / .iti__* rules elsewhere.
========================================================== */
.contact-v2 .iti{  position:relative !important;
  display:block !important;

  width:100% !important;}
.contact-v2 .iti,
.contact-v2 .iti *{
  box-sizing:border-box !important;}

/* Allow dropdown to escape ONLY from the phone field wrapper */
.contact-v2 .field:has(.iti){
  position:relative !important;
  z-index:1 !important;
  overflow:visible !important;}

/* Reserve space for flag (and dial code if enabled) */
.contact-v2 .iti input#phone{  box-sizing:border-box !important;

  width:100% !important;
  padding-left:86px !important;}
.contact-v2 .iti--separate-dial-code input#phone{
  padding-left:136px !important;}

/* Flag area: vertically centered */
.contact-v2 .iti__selected-flag{
  display:flex !important;
  align-items:center !important;
  height:100% !important;
  padding:0 10px !important;}

/* Dropdown: anchored, capped, scrollable */
.contact-v2 .iti__country-list{
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: calc(100% + 10px) !important; /* space under input */
  margin: 0 !important;
  box-sizing: border-box !important;
  width: calc(100% - 24px) !important;

  max-height: min(260px, 45vh) !important; /* <-- prevents covering your whole form */
  overflow-y: auto !important;
  overflow-x: hidden !important;

  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(17,16,15,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 26px 70px rgba(2,6,23,.16) !important;

  z-index: 99999 !important;
}

/* Search input inside dropdown */
.contact-v2 .iti__search-input{  box-sizing:border-box !important;

  width:calc(100% - 24px) !important;
  margin:10px 12px 8px !important;}

/* Row spacing */
.contact-v2 .iti__country{
  padding-top:10px !important;
  padding-bottom:10px !important;}

/* === Ensure intl-tel dropdown renders ABOVE the card === */

/* 1) Put the whole contact section/card on a predictable stacking layer */
.contact-v2{
  position: relative;
  z-index: 1;}

/* 2) Make the card NOT create a weird stacking context */
.contact-v2-card{
  position: relative;
  z-index: 1;
  overflow: visible !important;
  isolation: auto !important;   /* in case it was set somewhere */
  transform: none !important;   /* remove if you intentionally transform the card */
  filter: none !important;      /* remove if you intentionally filter the card */
}

/* 3) Put the phone field ABOVE everything inside the card */
.contact-v2 .field:has(.iti){
  position: relative !important;
  z-index: 9999 !important;
  overflow: visible !important;}

/* 4) Put the dropdown above ALL */
.contact-v2 .iti__country-list{
  z-index: 100000 !important;}

/* ================================
   intl-tel-input: prevent mega dropdown
================================ */

/* Keep the dropdown constrained and floating */
.iti { width: 100%; } /* your input can still be full width */

.contact-v2 .iti__country-list{
  position: absolute !important;
  right: 12px !important;
  left: 12px !important;
  z-index: 9999 !important;

  box-sizing: border-box !important;
  width: calc(100% - 24px) !important; /* match search input width */
  max-width: none !important;

  max-height: 260px !important;

  background: #ffffff;
  backdrop-filter: none !important;
  overflow-y: auto !important;
}

/* In case you have global UL rules forcing full width */
.iti__country-list,
.iti__country-list li{
  width: auto !important;}

/* Keep flags sane if you have global img rules */
.iti__flag,
.iti__flag-box,
.iti__country-list img{
  max-width: none !important;}

/* intl-tel-input dropdown: make it opaque + above everything */
.iti__country-list{
  background: #fff !important;
  opacity: 1 !important;
  z-index: 99999 !important;
  box-shadow: 0 18px 60px rgba(20,20,20,.18) !important;
  border: 1px solid rgba(20,20,20,.12) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.iti__search-input{  border-bottom: 1px solid rgba(20,20,20,.10) !important;

  background: #fff !important;}

.hero.hero-premium {
  background-image:
          linear-gradient(
                  90deg,
                  #faf8f4 0%,
                  #faf8f4 20%,
                  rgba(250,248,244,0.95) 38%,
                  rgba(250,248,244,0.85) 50%,
                  rgba(250,248,244,0.65) 58%,
                  rgba(250,248,244,0.40) 65%,
                  rgba(250,248,244,0.20) 70%,
                  rgba(250,248,244,0.00) 80%
          ),
          url("../assets/images/hero/hero_background_path.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero.hero-premium::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background: linear-gradient(
          90deg,
          #ffffff 0%,
          rgba(255,255,255,0.98) 22%,
          rgba(255,255,255,0.70) 45%,
          rgba(255,255,255,0.00) 70%
  ) !important;
}

.hero.hero-premium .hero-grid{
  position: relative !important;
  z-index: 2 !important;}

/* ============ Project Page Layout (Unified) ============ */

/* HERO */
.project-hero{
  padding-top: clamp(40px, 7vw, 86px);
  padding-bottom: clamp(28px, 5vw, 56px);}

.project-hero-copy{ text-align: left; }

.project-hero-grid{
  display: grid;
  align-items: center;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 44px);}

.project-hero-media{
  display: flex;
  justify-content: flex-end;
  min-width: 0;}

.project-hero-media img{
  width: min(560px, 100%);
  height: auto;
  display: block;
  border-radius: 22px;
  border: 1px solid rgba(20,20,20,.06);
  box-shadow: 0 18px 60px rgba(20,20,20,.12);
  background: var(--paper-tan, #f7f4ee);
}

.project-hero-ctas{  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;

  margin-top: 18px;}

/* TAGS (optional) */
.project-tags{  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;

  list-style: none;}

.project-tag{
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20,20,20,.10);
  background: rgba(255,255,255,.6);
}

/* ===== Metrics band (yours) ===== */
.project-metrics{
  background: linear-gradient(90deg, rgba(217,119,69,.92), rgba(200,92,38,.92));
  color: #fff;}
.project-metrics .container{ padding: 0; }

.project-metrics-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);}

.metric{
  padding: 26px 18px;
  border-right: 1px solid rgba(255,255,255,.18);
  text-align: center;}
.metric:last-child{ border-right: 0; }

.metric-value{  font-size: clamp(22px, 2.4vw, 34px);

  font-weight: 800;
  line-height: 1.1;}
.metric-label{
  margin-top: 6px;
  font-size: 13px;
  opacity: .95;}


/* ================================
   Unified 2-column sections
   (Use for: Vision, Strategy, Reveal)
================================ */

/* Apply to your containers: .project-two-col */
.project-two-col{
  display: grid;
  align-items: center;
  grid-template-columns: 1.1fr 1fr; /* media slightly bigger by default */
  gap: clamp(18px, 3vw, 44px);}

/* Make sure grid children can shrink (prevents overflow weirdness) */
.project-two-col > *{ min-width: 0; }

/* Default placement: media left, copy right */
.project-two-col .project-media{ grid-column: 1; }
.project-two-col .project-copy { grid-column: 2; }

/* Flip modifier: put copy left, media right */
.project-two-col.project-split--flip{
  grid-template-columns: 1fr 1.1fr; /* keep media big on right */
}
.project-two-col.project-split--flip .project-copy { grid-column: 1; }
.project-two-col.project-split--flip .project-media{ grid-column: 2; }


/* ================================
   Media styling (images + video)
================================ */

/* Images in section media */
.project-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  border: 1px solid rgba(20,20,20,.06);
  box-shadow: 0 18px 60px rgba(20,20,20,.10);
  background: var(--paper-tan, #f7f4ee);
}

/* Video block: make it bigger + consistent */
.project-media--video{
  width: 110%;
  margin-left: -5%;}

/* The mask controls size. Make it larger here. */
.project-media--video .video-mask{
  width: 100%;
  border-radius: 18px;
  background: var(--paper-tan, #f7f4ee);
  transform: translateZ(0);

  /* ✅ Bigger video frame */
  aspect-ratio: 16 / 10;                 /* taller than 16/9 */
  min-height: clamp(260px, 32vw, 420px); /* ensures presence on desktop */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;}

/* Video fill */
.project-scroll{
  display: block;
  width: 100%;
  height: 100%;

  /* tiny overfill to hide 1px artifacts */
  transform: translate3d(0,0.75px,0) scale(1.02);
  backface-visibility: hidden;
  object-fit: contain;
  will-change: transform;}

/* If you ever want the video to show more instead of crop:
.project-scroll{ object-fit: contain; background: var(--paper-tan,#f7f4ee); }
*/

/* ===== Preview toggle + device frames ===== */
.site-preview{
  width: 100%;
  margin-top: 14px;}

.preview-toggle{
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(20,20,20,.10);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 30px rgba(20,20,20,.08);
  margin-bottom: 12px;
}

.preview-tab{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  color: rgba(21,21,21,.75);
}

.preview-tab.is-active{  border: 1px solid rgba(20,20,20,.08);

  background: rgba(255,255,255,.95);
  color: #151515;
  box-shadow: 0 8px 18px rgba(20,20,20,.10);}

.preview-stage{
  width: 100%;}

.preview-pane{
  width: 100%;}

.device{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(20,20,20,.08);
  box-shadow: 0 18px 60px rgba(20,20,20,.12);
  background: rgba(255,255,255,.45);
}

.device-desktop{
  aspect-ratio: 16 / 10;}

.device-mobile{
  width: min(320px, 88vw);
  margin: 0 auto;
  border-radius: 30px;
  aspect-ratio: 9 / 19.5;}

.preview-video{
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.008);
  backface-visibility: hidden;
  object-fit: cover;}

/* Optional: center the toggle on mobile */
@media (max-width: 860px){
  .preview-toggle{
    display: flex;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;}
}

/* ================================
   Mobile responsiveness
================================ */
@media (max-width: 900px){

  .project-hero-grid{
    grid-template-columns: 1fr;}
  .project-hero-media{
    justify-content: flex-start;}
  .project-hero-media img{
    width: 100%;}

  .project-two-col,
  .project-two-col.project-split--flip{
    grid-template-columns: 1fr;}

  /*!* Stack order: keep whatever you wrote in HTML *!*/
  /*.project-two-col .project-media,*/
  /*.project-two-col .project-copy{*/
  /*  grid-column: auto;*/
  /*}*/

  /* Slightly shorter video on mobile */
  .project-media--video .video-mask{
    min-height: 220px;
    aspect-ratio: 16 / 11;}

  /* metrics */
  .project-metrics-grid{
    grid-template-columns: 1fr;}
  .metric{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.18);}
  .metric:last-child{ border-bottom: 0; }
}


/* Quote */
.quote-card{
  margin: 0;
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: 22px;
  border: 1px solid rgba(20,20,20,.06);
  background: rgba(255,255,255,.75);
  box-shadow: 0 18px 60px rgba(20,20,20,.08);
}
.quote-meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;}
.quote-meta span{
  font-size: 13px;
  opacity: .75;}
.quote-text{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  opacity: .92;}

/* Related */
.related-grid{  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;

  margin-top: 18px;}
.related-tile{
  overflow: hidden;
  border-radius: 22px; /* match your vibe */
}
.related-tile img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;     /* tweak if you want */
  height: auto;
  object-fit: cover;         /* this is the key */
  object-position: top;      /* keep the top visible, crop bottom */
}
.related-tile img{  display: block;

  width: 100%;
  height: auto;}
.related-title{
  position: absolute;
  bottom: 12px;
  left: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 8px 30px rgba(0,0,0,.35);}

/* FORCE Related Projects tiles to center as a group */
.related-grid{
  display: flex !important;
  justify-content: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;     /* stays nice if you add more later */
}
.related-grid .related-tile{
  width: min(360px, 100%) !important; /* keeps tile size consistent */
}

/* Responsive */
@media (max-width: 920px){
  .project-hero-grid{
    grid-template-columns: 1fr;}
  .project-hero-media{
    justify-content: flex-start;}
  .project-split,
  .project-results{
    grid-template-columns: 1fr;}
  .project-split--flip .project-copy,
  .project-split--flip .project-media{
    order: initial;}
  .project-metrics-grid{
    grid-template-columns: 1fr;}
  .metric{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.18);}
  .metric:last-child{ border-bottom: 0; }
  .related-grid{
    grid-template-columns: repeat(2, 1fr);}
}

/* FORCE: project hero is always 2 columns on desktop */
.project-hero .project-hero-grid{
  display: grid !important;
  align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(18px, 3vw, 44px);}

/* prevent weird overflow pushing things down */
.project-hero .project-hero-copy,
.project-hero .project-hero-media{
  min-width: 0;}

.project-hero .project-hero-media{
  justify-self: end;}

.project-hero .project-hero-media img{  display: block;

  width: min(560px, 100%);
  height: auto;}

.project-title{
  font-size: 2.5rem;}

:is(.industry-salon-page, .riley-lab-page) .project-title{  color: #594E45;

  font-size: 2.5rem;}

:is(.industry-salon-page, .riley-lab-page) .project-metric{
  color: #594E45;}

/* =========================================================
   INDUSTRY SALON PROJECT PAGE — Metrics (scoped, page-specific)
   ========================================================= */

:is(.industry-salon-page, .riley-lab-page) .project-metrics{  margin: 0;

  padding: 0;}

:is(.industry-salon-page, .riley-lab-page) .project-metrics .container{
  padding: 0;}

:is(.industry-salon-page, .riley-lab-page) .project-metrics-grid{
  display: grid;
  border-radius: 18px;
  grid-template-columns: repeat(3, 1fr); /* equal width */
  overflow: hidden;}

/* individual metric blocks */
:is(.industry-salon-page, .riley-lab-page) .metric{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 110px;
  padding: 26px 18px;

  text-align: center;}

/* typography */
:is(.industry-salon-page, .riley-lab-page) .metric-value{  color: #2b2b2b;
  font-size: clamp(22px, 2.6vw, 36px);

  font-weight: 800;
  line-height: 1.1;}

:is(.industry-salon-page, .riley-lab-page) .metric-label{
  margin-top: 6px;
  color: #2b2b2b;
  font-size: 13px;
  letter-spacing: .02em;
  opacity: .75;}

/* tan banding — subtle, editorial */
:is(.industry-salon-page, .riley-lab-page) .project-metrics-grid .metric:nth-child(1){
  background: #EFE6DA;}

:is(.industry-salon-page, .riley-lab-page) .project-metrics-grid .metric:nth-child(2){
  background: #E6D7C5;}

:is(.industry-salon-page, .riley-lab-page) .project-metrics-grid .metric:nth-child(3){
  background: #DBC7AE;}

/* responsive: stack but keep style */
@media (max-width: 900px){
  :is(.industry-salon-page, .riley-lab-page) .project-metrics-grid{
    grid-template-columns: 1fr;}
}

/* Section background can be whatever you want */
:is(.industry-salon-page, .riley-lab-page) .metrics-band{  padding: 0;

  background: transparent;}

/* Full width, no gutters */
:is(.industry-salon-page, .riley-lab-page) .metrics-row{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border-radius: 18px;
  overflow: hidden;

  background: none;          /* ❌ remove beige here */
}

/* Base metric styles */
:is(.industry-salon-page, .riley-lab-page) .metric{
  padding: 22px 18px;
  font-size: 44px;
  font-weight: 800;
  text-align: center;}

/* Individual tan shades */
:is(.industry-salon-page, .riley-lab-page) .metric:nth-child(1){
  background: #f3eadf;   /* light tan */
}

:is(.industry-salon-page, .riley-lab-page) .metric:nth-child(2){
  background: #e7dac7;   /* mid tan */
}

:is(.industry-salon-page, .riley-lab-page) .metric:nth-child(3){
  background: #dccbb1;   /* deeper tan */
}

:is(.industry-salon-page, .riley-lab-page) .metric span{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  opacity: .75;}

/* ================================
   HOME — Clarity + Conversion
================================ */
.home .hero-grid{
  align-items: center;
}

.home .hero-copy{
  max-width: 620px;
}

.home .hero-title{
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
}

.home .hero-subtitle{
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
  color: rgba(20,20,20,.78);
}

.home .hero-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.home .hero-trustline{
  margin-top: 14px;
  font-size: 14px;
  color: rgba(20,20,20,.7);
}

/* AEO-friendly lead lines */
.aeo-lede{
  margin: 10px auto 0;
  max-width: 60ch;
  font-size: 1rem;
  color: rgba(20,20,20,.78);
}

.home .who-for-grid{
  display: grid;
  gap: 24px;
  text-align: center;
}

.home .who-for-list{
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: 500;
  justify-items: center;
}

.home .who-for-list li{
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(20,20,20,.06);
  width: min(560px, 100%);
}

.home .who-for .section-subtitle{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Who-for cards: soft themed accents + staggered reveal */
.home .who-for-list li.reveal{
  opacity: 0;
  transform: translateY(12px);
}

.home .who-for-list li.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease;
}

.home .who-for-list li:nth-child(1){
  background: rgba(252,246,235,.85);
  border-color: rgba(225,200,160,.25);
}
.home .who-for-list li:nth-child(2){
  background: rgba(236,243,250,.85);
  border-color: rgba(170,196,224,.25);
}
.home .who-for-list li:nth-child(3){
  background: rgba(238,245,240,.85);
  border-color: rgba(170,200,182,.25);
}
.home .who-for-list li:nth-child(4){
  background: rgba(242,238,248,.85);
  border-color: rgba(190,178,216,.25);
}
.home .who-for-list li:nth-child(5){
  background: rgba(248,240,240,.85);
  border-color: rgba(216,180,180,.25);
}

@media (prefers-reduced-motion: no-preference){
  .home .who-for-list li.reveal:nth-child(1){ transition-delay: .05s; }
  .home .who-for-list li.reveal:nth-child(2){ transition-delay: .12s; }
  .home .who-for-list li.reveal:nth-child(3){ transition-delay: .19s; }
  .home .who-for-list li.reveal:nth-child(4){ transition-delay: .26s; }
  .home .who-for-list li.reveal:nth-child(5){ transition-delay: .33s; }
}

.home .deliverables-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home .deliverable-card{
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(20,20,20,.08);
  box-shadow: 0 10px 30px rgba(20,20,20,.06);
}

.home .deliverable-card h3{
  margin: 0 0 8px;
}

.home .how-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home .how-card{
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(20,20,20,.08);
}

.home .how-step{
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: rgba(17,16,15,.08);
  margin-bottom: 10px;
}

.home .case-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home .case-card{
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(20,20,20,.08);
}

.home .case-line{
  margin: 6px 0;
}

.home .testimonials-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
}

.home .testimonial-card{
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(20,20,20,.08);
}

.home .testimonial-card span{
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: rgba(20,20,20,.7);
}

/* ================================
   Trust components (reusable)
================================ */
.testimonial-card{
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(20,20,20,.08);
}

.testimonial-card span{
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: rgba(20,20,20,.7);
}

.case-study-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-study-card{
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(20,20,20,.08);
  text-align: left;
}

.case-study-line{
  margin: 6px 0;
}

.trust-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

.trust-card{
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(20,20,20,.08);
  text-align: left;
}

@media (max-width: 980px){
  .case-study-grid,
  .trust-grid{
    grid-template-columns: 1fr;
  }
}

.home .faq-grid{
  display: grid;
  gap: 12px;
}

.home .faq-item{
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(20,20,20,.08);
}

.home .faq-item summary{
  cursor: pointer;
  font-weight: 600;
}

.home .final-cta-inner{
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.home .final-cta-inner .hero-cta{
  justify-content: center;
}

@media (max-width: 860px){
  .home .deliverables-grid,
  .home .case-grid,
  .home .how-grid,
  .home .testimonials-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   RILEY LAB PORTAL — Page Theme Overrides
   ========================================================= */
.riley-lab-page{
  --rl-blue-900: #24324f;
  --rl-blue-700: #2d57c8;
  --rl-blue-600: #3b6fe0;
  --rl-blue-200: #cfe1ff;
  --rl-blue-100: #eef4ff;
  --rl-ice: #f6f9ff;
  --rl-gold: #f6c84f;
  --rl-green: #6fc06f;
  --rl-coral: #e97a6a;
  color: var(--rl-blue-900);
}

/* Soft science-style background + faint node pattern */
.riley-lab-page .section{
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(59,111,224,.18), transparent 60%),
    radial-gradient(900px 600px at 90% -20%, rgba(111,192,111,.16), transparent 55%),
    radial-gradient(800px 500px at 100% 30%, rgba(246,200,79,.12), transparent 60%),
    var(--rl-ice);
}

.riley-lab-page .section-white{
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(59,111,224,.12), transparent 60%),
    var(--rl-ice);
}

.riley-lab-page .section-soft{
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(111,192,111,.12), transparent 60%),
    var(--rl-blue-100);
}

.riley-lab-page .kicker{
  color: var(--rl-blue-700);
  letter-spacing: .08em;
}

.riley-lab-page .project-title{
  color: var(--rl-blue-900);
}

.riley-lab-page .project-metric{
  color: var(--rl-blue-900);
}

.riley-lab-page .project-hero-copy p,
.riley-lab-page .project-copy p{
  color: rgba(36,50,79,.85);
}

/* Hero media: soft card treatment */
.riley-lab-page .project-hero-media img{
  background: #ffffff;
  border-radius: 18px;
  box-shadow:
    0 14px 40px rgba(36,50,79,.18),
    0 2px 8px rgba(36,50,79,.12);
  padding: 12px;
}

/* Metrics band: match portal accent chips */
.riley-lab-page .metrics-row{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(36,50,79,.12);
}

.riley-lab-page .metric{
  color: var(--rl-blue-900);
}

.riley-lab-page .metric:nth-child(1){
  background: rgba(246,200,79,.28);
}
.riley-lab-page .metric:nth-child(2){
  background: rgba(59,111,224,.20);
}
.riley-lab-page .metric:nth-child(3){
  background: rgba(111,192,111,.22);
}

.riley-lab-page .metric span{
  color: rgba(36,50,79,.75);
}

/* Buttons: clean academic blue */
.riley-lab-page .btn.btn-primary{
  background: linear-gradient(135deg, #2f61d6, #4477ea);
  box-shadow: 0 12px 30px rgba(47,97,214,.28);
}

.riley-lab-page .btn.btn-primary:hover{
  filter: brightness(1.04);
}

/* Preview device frame: subtle lab UI card */
.riley-lab-page .device{
  background: #ffffff;
  border: 1px solid rgba(36,50,79,.12);
  box-shadow: 0 14px 40px rgba(36,50,79,.12);
}

/* Riley Lab preview videos: avoid edge cropping */
.riley-lab-page .device-desktop .preview-video{
  object-fit: contain;
  transform: none;
  background: transparent;
}

/* Blend letterboxing into the portal palette */
.riley-lab-page .device-desktop .device-clip{
  background: var(--rl-ice);
}

/* Riley Lab desktop preview: match actual video aspect ratio (1660 × 832) */
.riley-lab-page .device-desktop{
  aspect-ratio: 1660 / 832;
}

/* =========================================================
   RICHIE IZZO PORTFOLIO — Page Theme Overrides
   ========================================================= */
.richie-izzo-page{
  --ri-green: #3a5a20;
  --ri-green-dark: #2a3f17;
  --ri-accent: #8bd14b;
}

/* Light theme with subtle portfolio accents */
.richie-izzo-page .kicker{
  color: rgba(58,90,32,.7);
  letter-spacing: .18em;
}

.richie-izzo-page .project-title,
.richie-izzo-page .project-metric{
  color: #1c1c1c;
}

.richie-izzo-page .project-hero-media img{
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(20,20,20,.18);
}

/* Metrics band: match Industry Salon structure */
.richie-izzo-page .metrics-band{
  padding: 0;
  background: transparent;
}

.richie-izzo-page .metrics-row{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border-radius: 18px;
  overflow: hidden;
  background: none;
}

.richie-izzo-page .metric{
  padding: 22px 18px;
  font-size: 44px;
  font-weight: 800;
  text-align: center;
}

.richie-izzo-page .metric:nth-child(1){
  background: #d2e2c8;
}
.richie-izzo-page .metric:nth-child(2){
  background: #bfd6b0;
}
.richie-izzo-page .metric:nth-child(3){
  background: #a9c595;
}

.richie-izzo-page .metric span{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  opacity: .75;
}

.richie-izzo-page .btn.btn-primary{
  background: linear-gradient(135deg, #2f4b18, #3f6a22);
  box-shadow: 0 12px 30px rgba(40,70,20,.28);
}

.richie-izzo-page .cta-link{
  color: rgba(28,28,28,.7);
}

.richie-izzo-page .device{
  border: 1px solid rgba(20,20,20,.08);
  box-shadow: 0 18px 40px rgba(20,20,20,.12);
}

.richie-izzo-page .device-desktop{
  aspect-ratio: auto;
}

.richie-izzo-page .device-desktop .preview-video{
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
  background: transparent;
}

.richie-izzo-page .device-desktop .device-clip{
  height: auto;
  background: transparent;
}

.richie-izzo-page .quote-card{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(20,20,20,.08);
}

/* Richie Izzo — mobile refinements */
@media (max-width: 860px){
  .richie-izzo-page .project-title{
    font-size: clamp(28px, 7vw, 36px);
  }

  .richie-izzo-page .project-hero-media img{
    width: 100%;
    height: auto;
  }

  .richie-izzo-page .metric{
    font-size: clamp(20px, 4.4vw, 26px);
    line-height: 1.1;
    padding: 14px 10px;
  }
}

@media (max-width: 1024px){
  /* Ensure text-first, media-second on Richie page */
  .richie-izzo-page .container.project-two-col{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
  }

  .richie-izzo-page .project-results .site-preview{
    order: 2;
  }

  .richie-izzo-page .container.project-two-col > .project-copy{
    order: 1;
  }

  .richie-izzo-page .container.project-two-col > .project-media{
    order: 2;
  }

  .richie-izzo-page .container.project-hero-grid{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
  }

  .richie-izzo-page .container.project-hero-grid > .project-hero-copy{
    order: 1;
  }

  .richie-izzo-page .container.project-hero-grid > .project-hero-media{
    order: 2;
  }

  .richie-izzo-page .project-copy,
  .richie-izzo-page .project-hero-copy{
    text-align: center;
    width: 100%;
    max-width: none;
  }

  .richie-izzo-page .project-copy p,
  .richie-izzo-page .project-hero-copy p{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: none;
    word-break: normal;
    hyphens: none;
    overflow-wrap: break-word;
  }

  .richie-izzo-page .project-media,
  .richie-izzo-page .project-hero-media{
    justify-self: stretch;
    width: 100%;
  }

  .richie-izzo-page .container.project-two-col,
  .richie-izzo-page .container.project-hero-grid{
    width: 100% !important;
    justify-items: stretch !important;
  }

  .richie-izzo-page .project-copy,
  .richie-izzo-page .project-hero-copy,
  .richie-izzo-page .project-copy p,
  .richie-izzo-page .project-hero-copy p{
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .richie-izzo-page .project-copy,
  .richie-izzo-page .project-hero-copy{
    padding-inline: 16px;
    box-sizing: border-box;
  }
}

/*!* Dividers *!*/
/*:is(.industry-salon-page, .riley-lab-page) .metric + .metric{*/
/*  border-left: 1px solid rgba(0,0,0,.08);*/
/*}*/

/* FORCE: project-two-col always wins even if project-split/results still exist */
.container.project-two-col{
  display: grid !important;
  align-items: center !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: clamp(18px, 3vw, 44px) !important;}

.container.project-two-col > *{ min-width:0; }

.container.project-two-col .project-media{ grid-column:1 !important; }
.container.project-two-col .project-copy { grid-column:2 !important; }

.container.project-two-col.project-split--flip{
  grid-template-columns: 1fr 1.1fr !important;}
.container.project-two-col.project-split--flip .project-copy { grid-column:1 !important; }
.container.project-two-col.project-split--flip .project-media{ grid-column:2 !important; }

@media (max-width: 900px){
  .container.project-two-col,
  .container.project-two-col.project-split--flip{
    grid-template-columns: 1fr !important;}
  .container.project-two-col .project-media,
  .container.project-two-col .project-copy{
    grid-column:auto !important;}
}

/* ================================
   Project pages — Mobile overrides
   Put this at the END of style.css
================================ */

/* HERO: use grid areas so we can reorder cleanly */
.project-hero-grid{
  grid-template-areas: "copy media"; /* desktop default */
}
.project-hero-copy{ grid-area: copy; }
.project-hero-media{ grid-area: media; }

/* TWO-COL: use areas so flip works on desktop */
.project-two-col{
  grid-template-areas: "media copy"; /* desktop default */
}
.project-two-col .project-media{ grid-area: media; }
.project-two-col .project-copy{ grid-area: copy; }

.project-two-col.project-split--flip{
  grid-template-areas: "copy media"; /* desktop flipped */
}

/* ✅ Mobile stack + typography fixes */
@media (max-width: 860px){

  /* Prevent “one-word-per-line” + hyphenation */
  :is(.industry-salon-page, .riley-lab-page),
  :is(.industry-salon-page, .riley-lab-page) p,
  :is(.industry-salon-page, .riley-lab-page) li{
    hyphens: none;
    word-break: normal;
    overflow-wrap: break-word; /* safe wrapping without weird hyphenation */
  }

  /* HERO stacks: media first, then copy */
  .project-hero-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "media"
      "copy";
    gap: 18px;
    align-items: start;
  }

  .project-hero-media{    justify-self: stretch;

    width: 100%;}
  .project-hero-media img{    display: block;

    width: 100%;
    height: auto;}

  /*!* TWO-COL stacks: always media then copy (even for flip) *!*/
  /*.project-two-col,*/
  /*.project-two-col.project-split--flip{*/
  /*  grid-template-columns: 1fr !important;*/
  /*  grid-template-areas:*/
  /*    "media"*/
  /*    "copy";*/
  /*  gap: 18px;*/
  /*  align-items: start;*/
  /*}*/

  /* Make sure copy spans full width */
  .project-copy,
  .project-hero-copy{
    width: 100%;
    max-width: none;}

  /* Undo any “wide media” tricks on mobile */
  .project-media--video{
    width: 100%;
    margin-left: 0;}
  .project-media--video .video-mask{
    min-height: 0;
    aspect-ratio: 16 / 10; /* keep your nice frame */
  }
}

/* Fix: project-metric is used for BOTH tiles and headings.
   Force headings to behave like headings. */
@media (max-width: 860px){
  .project-copy > h2.project-metric{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    /* prevent letter-by-letter wrapping */
    white-space: normal !important;
    word-break: normal !important;
    transform: none !important;
    hyphens: none !important;
    overflow-wrap: normal !important;
    text-orientation: mixed !important;

    /* just in case any vertical-writing styles exist */
    writing-mode: horizontal-tb !important;}
}

@media (max-width: 860px){

  /* Force the layout to single column */
  .project-two-col,
  .project-hero-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;}

  /* HARD RESET the copy column (this fixes "min-content" / tiny inline-size issues) */
  .project-copy,
  .project-hero-copy{
    display: block !important;
    align-self: start !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;}

  /* HARD RESET text flow */
  .project-copy p,
  .project-hero-copy p{
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;

    word-break: normal !important;
    hyphens: none !important;
    inline-size: 100% !important;
    max-inline-size: none !important;
    overflow-wrap: normal !important;
    text-orientation: mixed !important;

    writing-mode: horizontal-tb !important;}

  /* Media should also be normal width on mobile */
  .project-media,
  .project-media img{
    width: 100% !important;
    max-width: 100% !important;}
}

/* =========================================================
   MOBILE: ALWAYS text first, media second (kills flipping)
   Targets your actual markup: .container.project-two-col
========================================================= */
@media (max-width: 860px){

  /* TWO-COL SECTIONS (Vision / Strategy / Reveal / Results) */
  :is(.industry-salon-page, .riley-lab-page) .container.project-two-col{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "copy"
      "media" !important;
    gap: 18px !important;
    align-items: start !important;
  }

  :is(.industry-salon-page, .riley-lab-page) .container.project-two-col > .project-copy{
    grid-area: copy !important;}
  :is(.industry-salon-page, .riley-lab-page) .container.project-two-col > .project-media{
    grid-area: media !important;}

  /* HERO */
  :is(.industry-salon-page, .riley-lab-page) .container.project-hero-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "copy"
      "media" !important;
    gap: 18px !important;
  }
  :is(.industry-salon-page, .riley-lab-page) .container.project-hero-grid > .project-hero-copy{
    grid-area: copy !important;}
  :is(.industry-salon-page, .riley-lab-page) .container.project-hero-grid > .project-hero-media{
    grid-area: media !important;}
}

/* =====================================
   Project scroll video — borderless
===================================== */

/* Kill card styling on the video container */
.project-media--video,
.project-media--video .video-mask{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;}

/* Optional: soften or remove rounding */
.project-media--video .video-mask{
  border-radius: 12px; /* set to 0 if you want sharp edges */
  overflow: hidden;}

/* Make video fill cleanly */
.project-media--video video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* no letterboxing */
  background: transparent;}

/*!* =====================================*/
/*   Project scroll video — borderless + intrinsic sizing*/
/*===================================== *!*/

/*!* Kill card styling *!*/
/*.project-media--video,*/
/*.project-media--video .video-mask{*/
/*  border: none !important;*/
/*  box-shadow: none !important;*/
/*  background: transparent !important;*/
/*}*/

/*!* Let the wrapper size itself to the video *!*/
/*.project-media--video .video-mask{*/
/*  border-radius: 12px; !* or 0 *!*/
/*  overflow: visible;  !* IMPORTANT: no clipping *!*/
/*}*/

/*!* Let the video control height *!*/
/*.project-media--video video{*/
/*  display: block;*/
/*  width: 100%;*/
/*  height: auto !important;      !* <-- key change *!*/
/*  max-width: 100%;*/
/*  object-fit: contain !important; !* <-- no cropping *!*/
/*  background: transparent;*/
/*}*/

/* =========================================
   Footer — compact on mobile
========================================= */
@media (max-width: 860px){

  /* Hide long content on mobile */
  .site-footer .footer-blurb,
  .site-footer .footer-links,
  .site-footer .footer-bottom-inner span:nth-child(2){
    display: none !important;}

  /* Stack + center the remaining content */
  .site-footer .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: center;}

  .site-footer .footer-brand{
    align-items: center;}

  .site-footer .contact-social-grid{
    justify-content: center;}

  /* Show the new compact nav */
  .site-footer .footer-mobile-nav{
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 14px;}

  .site-footer .footer-mobile-nav a{
    text-decoration: none;}

  .site-footer .footer-quote-btn{    width: min(260px, 100%);

    margin-top: 8px;}

  /* Bottom line: keep just © */
  .site-footer .footer-bottom-inner{
    justify-content: center;
    text-align: center;}
}

/* -----------------------------------------
   Footer mobile nav: hidden on desktop
------------------------------------------ */
.site-footer .footer-mobile-nav{
  display: none; /* desktop default */
}

/* =========================================
   Footer — compact on mobile
========================================= */
@media (max-width: 860px){

  /* Hide long content on mobile */
  .site-footer .footer-blurb,
  .site-footer .footer-links,
  .site-footer .footer-bottom-inner span:nth-child(2){
    display: none !important;}

  /* IMPORTANT: keep Privacy/Terms on mobile */
  .site-footer .footer-legal{
    display: flex !important;
    justify-content: center;
    gap: 10px;}

  /* Stack + center the remaining content */
  .site-footer .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: center;}

  .site-footer .footer-brand{
    align-items: center;}

  .site-footer .contact-social-grid{
    justify-content: center;}

  /* Show the new compact nav on mobile */
  .site-footer .footer-mobile-nav{
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 14px;}

  .site-footer .footer-quote-btn{    width: min(260px, 100%);

    margin-top: 8px;}

  /* Bottom row centered */
  .site-footer .footer-bottom-inner{    flex-wrap: wrap;

    justify-content: center;
    gap: 12px;
    text-align: center;}
}

/* Desktop default: tabs visible, dropdown hidden */
/* Mobile dropdown container */
.port-tabs{ display: flex !important; }
.port-filter{ display: none !important; align-items: center; justify-content: center;}

@media (max-width: 860px){
  .port-tabs{ display: none !important; }
  .port-filter{ display: block !important; margin-top: 18px !important; margin-bottom: 22px !important;}
  .port-select{
    -webkit-tap-highlight-color: transparent;}

  .port-grid{
    margin-top: 8px !important;}

  /* The select itself */
  .port-select{
    -webkit-appearance: none;
    appearance: none;

    width: 220px;
    height: auto;

    /* ✅ Use symmetric padding so centered text isn't fighting iOS */
    padding: 0 18px;

    /* ✅ True vertical centering */
    line-height: 46px;

    /* keep yours */
    border-radius: 14px;
    border: 1px solid rgba(20,20,20,.10);
    background: rgba(255,255,255,.75);
    color: #151515;
    font: inherit;
    font-weight: 600;
    letter-spacing: .2px;

    text-align: center;
    text-align-last: center;

    box-shadow:
      0 1px 0 rgba(255,255,255,.65) inset,
      0 10px 30px rgba(20,20,20,.08);

    outline: none;
    cursor: pointer;

    /* ✅ prevents tiny text clipping on iOS */
    -webkit-font-smoothing: antialiased;
  }

  /* Focus state (subtle + premium) */
  .port-select:focus{
    border-color: rgba(217,119,69,.55); /* your orange accent */
    box-shadow:
            0 1px 0 rgba(255,255,255,.65) inset,
            0 10px 30px rgba(20,20,20,.08),
            0 0 0 4px rgba(217,119,69,.16);
  }

  /* Custom chevron */
/*  .port-select-icon{
    position: absolute;
    top: 50%;
    right: 14px;
    width: 18px;
    height: 18px;
    opacity: .7;
    transform: translateY(-50%);
    pointer-events: none;}*/

}

@supports (-webkit-touch-callout: none){
  @media (max-width: 860px){
    .port-filter{
      margin-top: 18px !important;
      margin-bottom: 24px !important;
      text-align-last: center;}
    .port-grid{ margin-top: 10px; }
  }
}

/* Screen-reader only (accessible labels) */
.sr-only{
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;}

/* ================================
   HERO — mobile readability fix
   (veil over background image)
================================ */

/* Make hero a stacking context */
.hero.hero-premium{
  position: relative;
  overflow: hidden;}

/* Ensure content is above the overlay */
.hero.hero-premium .hero-grid{
  position: relative;
  z-index: 1;}

/* HERO — mobile: glass panel behind text (instead of washing whole image) */
@media (max-width: 860px){

  /* turn OFF the section-wide veil you added */
  .hero.hero-premium::before,
  .hero.hero-premium::after{
    content: none !important;}

  /* background image stays visible */
  .hero.hero-premium{
    background-position: 70% center; /* tweak: 60–85% until it looks perfect */
    background-size: cover;}

  /* “glass card” behind the copy */
  .hero.hero-premium .hero-copy{
    display: inline-block;
    max-width: 44ch;
    padding: 18px 18px 16px;
    border-radius: 18px;

    background: rgba(255,255,255,.60);
    border: 1px solid rgba(20,20,20,.08);
    box-shadow: 0 16px 40px rgba(20,20,20,.10);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* slightly stronger text contrast */
  .hero.hero-premium .hero-title{ color:#111; }
  .hero.hero-premium .hero-subtitle{ color: rgba(20,20,20,1); }
}

/* iOS Safari only: stabilize intl-tel-input dropdown when dropdownContainer = body */
@supports (-webkit-touch-callout: none) {

  .iti__country-list{
    position: fixed !important;         /* key for iOS */
    max-height: min(260px, 45vh) !important;

    background: #fff !important;
    opacity: 1 !important;
    -webkit-overflow-scrolling: touch !important;
    backdrop-filter: none !important;
    overflow-y: auto !important;}

  .iti__search-input{
    background: #fff !important;}
}

/* ABOUT page: hide "What I'm best at" card on mobile */
@media (max-width: 860px){
  .about-page .project-media{
    display: none !important;}
}

/* Outer frame: border + shadow only */
.device{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(20,20,20,.08);
  box-shadow: 0 18px 60px rgba(20,20,20,.12);
  background: transparent;
}

/* THIS is the missing piece */
.device-clip{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transform: translateZ(0);
  isolation: isolate;
  overflow: hidden;}

/* Mobile keeps its larger radius */
.device-mobile{ border-radius: 30px; }

/* Richie Izzo preview override (after base device rules) */
.richie-izzo-page .device{
  background: transparent;
  border-radius: 10px;
  overflow: visible;
}

.richie-izzo-page .device-mobile{
  border-radius: 30px;
  overflow: hidden;
}

.richie-izzo-page .device-desktop{
  aspect-ratio: 1920 / 946;
}

.richie-izzo-page .device-desktop .preview-video{
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
  background: transparent;
}

.richie-izzo-page .device-desktop .device-clip{
  height: auto;
  background: transparent;
  border-radius: 8px;
}

/* Video: absolute + slightly oversized (no transform scaling) */
.preview-video{
  position: absolute;

  display: block;
  inset: -2px;                      /* overhang on all sides */
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  object-fit: cover;}

/* Keep aspect-ratios */
.device-desktop{ aspect-ratio: 16 / 10; }
.device-mobile{
  width: min(280px, 80vw);
  margin: 0 auto;
  aspect-ratio: 9 / 19.5;}

.preview-pane[data-pane="mobile"] .device-mobile{
  width: min(280px, 80vw);
}

/* Industry Salon desktop preview: match actual video aspect ratio (1920 x 976) */
.industry-salon-page .device-desktop{
  aspect-ratio: 1920 / 976;
}