/* =========================================================
   DogWaterChamp — styles.css (logo-based theme)
   Path note: logo expects images/dwc_site_logo.png
   ========================================================= */

/* ---------- Theme (from logo) ---------- */
:root{
  --olive-900:#262d08;   /* very dark olive (header) */
  --olive-800:#343c0b;
  --olive-700:#4a530f;
  --olive-600:#596411;
  --olive-500:#6b7616;   /* mid olive (hero tint) */
  --olive-050:#f6f8ef;   /* page bg */
  --ink:#121212;         /* primary text */
  --muted:#556055;       /* secondary text */
  --purple:#8b2ab9;      /* ring/piping purple */
  --pink:#f07ad6;        /* bright pink accent */
  --pink-700:#de54c7;
  --cream:#fff3fb;       /* light pink text bg */
  --white:#ffffff;

  --radius:14px;
  --shadow-1:0 6px 20px rgba(0,0,0,.08);
  --shadow-2:0 10px 28px rgba(0,0,0,.18);
  --focus:2px solid var(--pink);

  /* softer, neutral accents (keep brand family, less purple/olive) */
  --accent-neutral: #c9b8c6;   /* soft mauve */
  --line-neutral:   #bfb6c4;   /* subtle line/underline */
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto;}

/* ---------- Base ---------- */
html,body{height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--olive-050);
  color:var(--ink);
  line-height:1.6;
}

/* ---------- Header / Nav ---------- */
.site-header{
  background: linear-gradient(180deg,#14181c,#1a1f24);
  color:var(--cream);
  border-bottom: 3px solid var(--line-neutral);
}
.nav-container{
  max-width:1100px; margin:0 auto;
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-text{
  color:var(--cream);
  font-weight:800; letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.logo-mark{
  width:44px; height:44px; border-radius:50%;
  background:url('images/dwc_site_logo.png') center/contain no-repeat;
  box-shadow:0 0 0 2px var(--purple), 0 2px 10px rgba(0,0,0,.35);
}
@media (min-width:900px){ .logo-mark{width:52px;height:52px} }

.site-nav{display:flex; gap:18px; flex-wrap:wrap}
.site-nav a{
  color:var(--cream); opacity:.9; text-decoration:none; font-weight:600;
  padding:6px 6px 8px; border-bottom:2px solid transparent; transition:opacity .15s, border-color .15s;
}
.site-nav a:hover,
.site-nav a.active{
  opacity:1;
  border-bottom-color: var(--accent-neutral);
  color:var(--white);
}
.site-nav a:focus-visible{ outline:var(--focus); outline-offset:3px; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; text-align:center; color:var(--cream);
  padding:70px 16px 56px;
  background:
    linear-gradient(to bottom, rgba(16,19,23,.78), rgba(16,19,23,.45)),
    url('images/abandoned_arcade_sub_floor_green_man.jpg') center/cover no-repeat;
  border-bottom: 3px solid var(--line-neutral);
}
.hero h1{
  font-size:clamp(28px, 3.2vw + 12px, 44px);
  font-weight:900; letter-spacing:.02em; margin-bottom:8px;
}
.hero p{opacity:.95; max-width:780px; margin:0 auto}
.hero-sub{
  max-width:32rem;
  margin:0.5rem auto 1.25rem;
}
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  justify-content:center;
  margin-top:0.5rem;
}
.hero-cta .btn{text-decoration:none;}

/* ---------- Page containers ---------- */
main, .portfolio-wrapper{max-width:1100px; margin:0 auto 56px; padding:0 16px;}
h2{
  font-size:clamp(22px, 2.2vw + 10px, 30px);
  color:var(--olive-900); text-align:center; margin:28px 0 12px;
  border-bottom:3px solid var(--line-neutral); display:inline-block; padding-bottom:6px;
}
.intro{text-align:center; margin:28px auto 42px; max-width:800px; color:var(--muted)}

/* ---------- Cards / grids (generic) ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:22px;}
.card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:22px;
  transition:transform .2s, box-shadow .2s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}

/* ---------- BENEFITS (dark block, with subtle image) ---------- */
.benefits{
  /* Per-section background image control:
     Default = construction photo (home page).
     Override per page by adding an indicator class, e.g.:
       <section class="benefits benefits-bg-house"> ... */
  --benefits-bg-image: url('images/construction_zone_2_60.jpg');

  position:relative;
  background:linear-gradient(180deg, #10140d, var(--olive-900));
  color:#e9ecff;
  border-radius:var(--radius);
  padding:56px 16px;
  margin:48px 0;
  box-shadow:var(--shadow-2);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

/* Indicator classes (swap per page/section) */
.benefits-bg-construction{ --benefits-bg-image: url('images/construction_zone_2_60.jpg'); }
.benefits-bg-house{ --benefits-bg-image: url('images/pale_grey_house_front.jpg'); }

.benefits::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--benefits-bg-image) center/cover no-repeat;
  opacity:0.22;              /* dial between 0.18–0.35 as you like */
  filter:brightness(0.8) contrast(1.15);
  z-index:1;
}

.benefits .container{
  max-width:1100px;
  margin:0 auto;
  position:relative;
  z-index:2;
  text-align:center;
}
.benefits h2{
  color:#e9ecff;
  border-bottom:3px solid var(--line-neutral);
  margin-bottom:6px;
}
.benefits .benefits-intro{
  opacity:.92;
  max-width:780px;
  margin:0 auto 22px;
  text-align:center;
}

/* Benefit pills (new) */
.benefit-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  justify-content:center;
  margin:1.25rem 0;
}
.benefit-pill{
  padding:0.4rem 0.9rem;
  border-radius:999px;
  font-size:0.9rem;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(0,0,0,0.18);
  white-space:nowrap;
}
.benefits-note{
  text-align:center;
  max-width:32rem;
  margin:0 auto;
  font-size:0.95rem;
  opacity:0.9;
}

/* (Old metrics styles kept in case used elsewhere; safe to ignore) */
.metrics{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:14px; margin:18px 0 24px;
}
.metric{
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:18px;
  text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.metric .num{display:flex; align-items:flex-end; justify-content:center; gap:4px; line-height:1}
.metric .val{font-size:clamp(44px, 6vw, 68px); font-weight:900}
.metric .suffix{font-size:clamp(26px, 3.2vw, 36px); font-weight:900}
.metric .label{font-weight:800; margin-top:6px}
.metric .src{font-size:.85rem; opacity:.75}

/* Accordion (benefits, currently unused) */
.accordion{display:grid; gap:12px}
.acc-item{border:1px solid rgba(255,255,255,.16); border-radius:14px; background:#121636; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.22)}
.acc-item[data-open="true"]{background:#151a3d}
.acc-btn{
  width:100%; text-align:left; background:transparent; color:#e9ecff; border:0;
  padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer;
  font-weight:800; font-size:1.05rem;
}
.acc-btn:focus-visible{outline:var(--focus); outline-offset:3px}
.acc-chevron{position:relative; width:12px; height:12px; flex:0 0 12px}
.acc-chevron::before{
  content:""; position:absolute; inset:0; width:10px; height:10px; margin:auto;
  border-right:2px solid #b0b7bd; border-bottom:2px solid #b0b7bd; transform:rotate(45deg);
  transition:transform .22s ease;
}
.acc-item[data-open="true"] .acc-chevron::before{transform:rotate(-135deg)}
.acc-panel{overflow:hidden; height:0; transition:height .22s ease; border-top:1px solid rgba(255,255,255,.12)}
.acc-content{padding:14px 18px 18px; color:#dfe4ff}
.icon-list{list-style:none; padding:0; margin:0}
.icon-list li{position:relative; margin-top:10px; padding-left:26px}
.icon-list li::before{
  content:""; position:absolute; left:0; top:.35em; width:10px; height:10px;
  border-right:2px solid var(--pink); border-bottom:2px solid var(--pink); transform:rotate(-45deg)
}
.footnote{opacity:.85; font-size:.9rem; text-align:center; margin-top:12px}
.footnote a{color:var(--pink)}

/* ---------- SECTORS / STORY SECTION ---------- */
#sectors{
  padding:48px 16px;
  background:var(--white);
  border:1px solid #e9e9e9;
  border-radius:var(--radius);
  margin:40px 0;
}
#sectors .container{max-width:1100px; margin:0 auto}
#sectors h2{
  color:var(--olive-900);
  border:0;
  text-align:left;
  margin:0 0 4px;
}
#sectors .kicker{
  display:block; margin:4px 0 18px; color:var(--olive-700);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em; font-size:.9rem; text-transform:uppercase;
}
.story-grid{
  display:grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap:24px 32px;
}
@media (max-width:900px){
  .story-grid{ grid-template-columns:1fr; }
}
.media-col .media-block{margin-bottom:1.25rem;}
.media-placeholder{
  border:1px dashed rgba(0,0,0,0.15);
  border-radius:0.75rem;
  padding:1.25rem;
  text-align:center;
  font-size:0.9rem;
  opacity:0.8;
}
.media-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-top:0.5rem;
}
.btn.small{
  font-size:0.85rem;
  padding:0.35rem 0.75rem;
}

/* old dropdown sectors styles kept for other pages if needed */
#sectors .grid.sector-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 36px}
@media (max-width:900px){ #sectors .grid.sector-grid{grid-template-columns:1fr} }
#sectors .fold{border-bottom:2px solid #cfd8dc}
#sectors .hdr{
  width:100%; background:none; border:0; padding:14px 0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left;
}
#sectors .ttl{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:800; letter-spacing:.1em; color:var(--olive-900);
}
#sectors .hdr:focus-visible{outline:var(--focus); outline-offset:3px}
#sectors .arrow{position:relative; width:18px; height:18px; flex:0 0 18px}
#sectors .arrow::before{
  content:""; position:absolute; inset:0; width:12px; height:12px; margin:auto;
  border-right:2px solid #2a2f33; border-bottom:2px solid #2a2f33; transform:rotate(45deg);
  transition:transform .2s ease;
}
#sectors .fold[data-open="true"] .arrow::before{transform:rotate(-135deg)}
#sectors .panel{overflow:hidden; height:0; transition:height .22s ease}
#sectors .inner{padding:10px 0 16px}
#sectors .line{margin:6px 0; color:var(--ink)}
#sectors .source{
  display:inline-block; margin-left:6px; font-size:.9rem; color:#7c6f85;
  text-decoration:none; border-bottom:1px solid rgba(124,111,133,.4)
}
#sectors .source:hover{color:#9b86a8; border-bottom-color:currentColor}
#sectors .links{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:10px 24px}

/* ---------- WIDE vs VERTICAL CONTENT SECTION ---------- */
.content-types{
  padding:48px 16px;
  margin:0 0 32px;
}
.content-types .container{max-width:1100px; margin:0 auto;}
.center{text-align:center;}
.sub{
  max-width:40rem;
  margin:0.5rem auto 2rem;
  opacity:0.9;
}
.bottom-note{
  max-width:40rem;
  margin:1.5rem auto 0;
  font-size:0.95rem;
  opacity:0.9;
}
.content-grid{
  display:grid;
  gap:2rem;
}
@media (min-width:800px){
  .content-grid{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }
}
.content-block h3{margin-bottom:0.3rem;}
.media-caption{
  font-size:0.9rem;
  opacity:0.9;
  margin-bottom:0.75rem;
}
.wide-frame iframe{
  width:100%;
  border-radius:12px;
  box-shadow:var(--shadow-1);
}

/* Phone mockup for vertical content */
.phone-shell{
  max-width:360px;
  margin:0 auto;
  padding:10px 12px 14px;
  border-radius:32px;
  background:linear-gradient(145deg,#111318,#222832);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  position:relative;
}
.phone-notch{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:64px;
  height:7px;
  border-radius:0 0 12px 12px;
  background:rgba(0,0,0,0.7);
}
.phone-inner{
  border-radius:24px;
  overflow:hidden;
  background:#000;
}
.phone-inner iframe{
  display:block;
  width:100%;
  height:500px;
  border:0;
}

/* ===== ADD: video inside phone mockup (fixes black side bars) ===== */
.phone-inner video{
  display:block;
  width:100%;
  height:500px;
  border:0;
  background:#000;
  object-fit:cover; /* fills frame; crops edges slightly */
}

/* ---------- Services snapshot / drawing sleeve / proof ---------- */
.services-snapshot{
  margin-top:2.5rem;
}
.services-snapshot h3{
  text-align:center;
  margin-bottom:1.2rem;
}
.service-grid{gap:1.25rem;}
.service-card{
  background:rgba(0,0,0,0.02);
  padding:1.1rem;
  border-radius:0.75rem;
}
.drawing-sleeve-callout{
  margin-top:2.5rem;
  padding:1.25rem;
  border-radius:0.75rem;
  background:rgba(0,0,0,0.03);
}
.proof-row{
  margin:2.5rem 0 0;
  text-align:center;
}
.proof-row h3{margin-bottom:0.4rem;}
.text-link{
  text-decoration:none;
  color:var(--purple);
}
.text-link:hover{
  text-decoration:underline;
}

/* ---------- Forms ---------- */
form{
  max-width:620px; margin:0 auto; background:var(--white); padding:22px;
  border-radius:var(--radius); box-shadow:var(--shadow-1);
}
form label{display:block; margin-bottom:6px; font-weight:700; color:var(--olive-900)}
form input, form textarea{
  width:100%; padding:.75rem; margin-bottom:1.1rem; border:1px solid #cfd8dc; border-radius:10px; font-size:1rem;
}
form input:focus, form textarea:focus{outline:var(--focus); border-color:var(--pink)}
button, .btn{
  display:inline-block; background:var(--pink); color:#231b26; border:2px solid var(--pink);
  padding:.7rem 1.2rem; border-radius:999px; font-weight:900; text-decoration:none; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s;
}
button:hover, .btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.25)}
.btn.ghost{background:transparent; color:var(--pink)}

/* ---------- Footer ---------- */
footer{
  background:var(--olive-900); color:var(--cream); text-align:center; padding:24px 16px; margin-top:48px;
  border-top:3px solid var(--purple);
}
footer .partner-logos{
  margin-top:12px; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; align-items:center;
}
footer .partner-logos img{height:26px; opacity:.9; transition:transform .15s, opacity .15s}
footer .partner-logos img:hover{transform:translateY(-1px); opacity:1}

/* ---------- Utilities ---------- */
.text-center{text-align:center}
.note{font-style:italic; color:var(--muted); font-size:.95rem; margin-top:8px}
.back-link{display:inline-block; margin-top:16px; color:var(--pink); text-decoration:none; font-weight:800}
.back-link:hover{text-decoration:underline}

/* ---------- Carousel (if used) ---------- */
.tmg-carousel{position:relative; max-width:1100px; margin:0 auto 24px}
.tmg-viewport{
  position:relative; width:100%; height:68vh; max-height:820px; min-height:360px;
  background:#0b0e15; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-2)
}
@media (max-width:640px){.tmg-viewport{height:62vh}}
.tmg-slide{position:absolute; inset:0; display:none}
.tmg-slide.is-active{display:block}
.tmg-slide iframe,.tmg-slide>div{width:100%; height:100%; border:0}
.tmg-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.25); background:rgba(15,18,36,.7); color:#fff;
  width:40px; height:40px; border-radius:999px; cursor:pointer; font-size:22px;
  display:grid; place-items:center; transition:background .2s, transform .1s;
}
.tmg-nav:hover{background:rgba(15,18,36,.9)}
.tmg-prev{left:-14px} .tmg-next{right:-14px}
@media (max-width:640px){.tmg-prev{left:6px}.tmg-next{right:6px}}

/* ---------- Section-specific bullet fixes ---------- */
.benefits ul, .benefits li, .icon-list,
#sectors .links{list-style:none !important}
.benefits details summary::-webkit-details-marker,
.benefits details summary::marker{display:none}

/* ---------- SERVICES (cards polish) ---------- */
.packages.grid { gap: 22px; }

.package-card.card{
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 22px;
  transition: transform .2s, box-shadow .2s;
}
.package-card.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2); }

.package-card h3{ margin-bottom: .35rem; color: var(--olive-900); }
.package-card .price{ font-size: 1.4rem; font-weight: 900; margin-top: .35rem; color: var(--pink); }

/* Clean icon bullets inside service cards */
.package-card .icon-list{ list-style: none; margin: .5rem 0 0 0; padding: 0; }
.package-card .icon-list li{
  position: relative; margin: .45rem 0; padding-left: 26px; color: var(--ink);
}
.package-card .icon-list li::before{
  content:""; position:absolute; left:0; top:.42em; width:10px; height:10px;
  border-right:2px solid var(--pink); border-bottom:2px solid var(--pink); transform:rotate(-45deg);
}

/* CTA row under each card */
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:.6rem; }

/* ===== Services: line up CTA buttons across cards ===== */
.packages.grid {
  align-items: stretch;
}
.package-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.package-card .price {
  margin-top: .35rem;
  margin-bottom: .35rem;
}
.package-card .icon-list {
  margin-bottom: .25rem;
}
.package-card .cta-row {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .package-card .cta-row .btn {
    flex: 1 1 auto;
  }
}

/* ===== Services cards: tidy layout & aligned buttons ===== */
.packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .packages { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.package-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 22px;
  border: 1px solid #eceff1;
}
.package-card h3 { 
  margin-bottom: .4rem; 
  color: var(--olive-900);
}
.package-card .icon-list { 
  margin: .35rem 0 .6rem; 
}
.package-card .icon-list li { 
  margin-top: .45rem;
}
.package-card .price {
  font-size: 1.4rem;
  font-weight: 900;
  margin: .25rem 0 .6rem;
  color: var(--pink);
}
.package-card .note {
  color: var(--muted);
}
.package-card .cta-row {
  margin-top: auto;
  display: flex;
  gap: 10px;
}
.package-card .cta-row .btn {
  flex: 1 1 0;
  text-align: center;
  white-space: nowrap;
}
.package-card .cta-row .btn.ghost {
  border-color: var(--pink);
}

/* ===== Mobile nav upgrade ===== */
.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

/* toggle button (hidden on desktop) */
.menu-toggle{display:none}

/* Desktop stays as-is; below 900px we switch to a drawer nav */
@media (max-width: 900px){
  .nav-container{ position:relative; }

  .menu-toggle{
    display:grid; place-items:center;
    width:44px; height:44px; margin-left:auto;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.25);
    border-radius:12px; cursor:pointer;
  }
  .menu-toggle .bar{
    display:block; width:20px; height:2px; background:#fff; margin:3px 0;
    transition:transform .2s ease, opacity .2s ease;
  }
  .site-header.is-open .menu-toggle .bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
  .site-header.is-open .menu-toggle .bar:nth-child(2){ opacity:0; }
  .site-header.is-open .menu-toggle .bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    background:linear-gradient(180deg, var(--olive-900), var(--olive-800));
    border-bottom:3px solid var(--purple);
    display:block;
    padding:8px 8px 14px;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .25s ease, opacity .2s ease, visibility 0s linear .25s;
    box-shadow:0 10px 24px rgba(0,0,0,.25);
    z-index:50;
  }
  .site-header.is-open .site-nav{
    max-height:60vh; opacity:1; visibility:visible; transition-delay:0s;
  }

  .site-nav a{
    display:block;
    padding:12px 12px;
    margin:6px 8px;
    border-radius:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.15);
    font-weight:700; letter-spacing:.01em;
  }
  .site-nav a.active,
  .site-nav a:hover{ background:rgba(255,255,255,.09); }

  body.no-scroll{ overflow:hidden; }
}

/* =========================
   Contact page add-ons
   ========================= */
.contact-grid{
  max-width:1100px;
  margin:24px auto 56px;
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:22px;
  padding:0 16px;
}
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
}
.contact-grid .card{ padding:22px; }

.phone-stack{
  font-family:"Oswald", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  font-size:clamp(28px, 5.2vw, 54px);
  line-height:1.06;
  display:grid;
  gap:.18rem;
  letter-spacing:.4px;
  color:var(--olive-900);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.phone-stack span{ display:block; }

.divider{
  margin:1.2rem 0;
  height:1px; border:0;
  background:linear-gradient(90deg,transparent,var(--line-neutral),transparent);
}

.linkish{
  background:none; border:0; color:#0b5fff;
  text-decoration:underline; cursor:pointer; font:inherit; padding:0;
}

.ghost{
  margin-top:.6rem; background:transparent; border:1px solid #bbb;
  color:var(--ink); border-radius:12px; padding:.6rem .9rem; cursor:pointer;
}
.ghost:hover{ background:#f6f6f6; }

.micro-note{ font-size:.92rem; color:var(--muted); margin-top:.6rem; }
.copied{ margin-left:.5rem; color:#0c8f2a; }

/* Two-column list that wraps nicely */
.client-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 2rem;
  max-width: 1100px;
}
.client-list li a {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  padding: .5rem .25rem;
  border-radius: 8px;
  transition: transform .15s ease, background .15s ease;
}
.client-list li a:hover { transform: translateX(2px); }
@media (max-width: 800px) {
  .client-list { grid-template-columns: 1fr; }
}

/* Scroll-reveal */
.reveal-on-scroll li { 
  opacity: 0; 
  transform: translateY(10px); 
  transition: opacity .35s ease, transform .35s ease;
}
.reveal-on-scroll li.is-visible { 
  opacity: 1; 
  transform: none; 
}

/* Carousel overrides */
.tmg-carousel {
  position: relative !important;
  max-width: 1100px;
  margin: 1rem auto 2rem;
  padding-left: 56px !important;
  padding-right: 56px !important;
  z-index: 2 !important;
}
.tmg-viewport {
  position: relative !important;
  overflow: hidden !important;
  height: 520px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.12) !important;
  z-index: 1 !important;
}
.tmg-slide { position: absolute !important; inset: 0 !important; display: none !important; }
.tmg-slide.is-active { display: block !important; }
.tmg-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 9999 !important;
  width: 48px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.6) !important;
  color: #fff !important;
  cursor: pointer !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  line-height: 1 !important;
  padding: 0 !important;

  box-shadow: 0 4px 14px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(2px) !important;
  pointer-events: auto !important;
}
.tmg-prev { left: 12px !important; }
.tmg-next { right: 12px !important; }
@media (max-width: 640px) {
  .tmg-carousel { padding-left: 50px !important; padding-right: 50px !important; }
  .tmg-nav { width: 44px !important; height: 44px !important; font-size: 24px !important; }
  .tmg-prev { left: 8px !important; }
  .tmg-next { right: 8px !important; }
}
@media (max-width: 420px){
  .tmg-carousel{ padding-left:38px; padding-right:38px; }
}

/* Old Google Maps thumbnail style (currently unused, safe to keep) */
.maps-embed-frame {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  position: relative;
  text-decoration: none;
}
.maps-embed-thumb {
  background: linear-gradient(180deg,#20252b,#0f1216);
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e6e6e6;
  font-size: 1rem;
  letter-spacing: 0.03em;
  opacity: .85;
}
.maps-embed-thumb::after {
  content: "▶";
  font-size: 42px;
  color: #fff;
  opacity: .85;
  position: absolute;
}

/* (Previously wrapped in <style> ... </style> — removed, because this is a .css file) */
.short-link-tile{
  display:block;
  position:relative;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
}
.short-thumb{
  width:100%;
  height:auto;
  display:block;
}
.short-play{
  position:absolute;
  left:14px;
  bottom:14px;
  font-size:28px;
  line-height:1;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,0.60);
  color:#fff;
}
.short-cta{
  position:absolute;
  right:14px;
  bottom:14px;
  font-size:14px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.90);
  color:#111;
}
.short-link-tile:hover .short-cta{
  background:rgba(255,255,255,1);
}
/* =========================
   Video page: Vertical grid
   ========================= */

.dw-vertical-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap:22px;
  margin-top:18px;
}

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

.dw-vertical-card{
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px;
  border: 1px solid #eceff1;
}

.dw-vertical-wrap{
  width:100%;
  border-radius: 16px;
  overflow:hidden;
  background:#000;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  /* Makes the vertical player feel like a phone-sized frame */
  aspect-ratio: 9 / 16;
}

.dw-vertical-video{
  display:block;
  width:100%;
  height:100%;
  background:#000;
  /* FILL the 9:16 frame */
  object-fit: cover;   /* use "contain" if you prefer no crop */
}

.dw-vertical-note{
  margin-top: 16px;
  text-align:center;
}

.dw-vertical-actions{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.footer-easter-egg {
  color: inherit;
  text-decoration: none;
  opacity: .65;
}

.footer-easter-egg:hover {
  opacity: 1;
  text-decoration: underline;
}
.brand-logo{
    height:42px;
    width:auto;
    display:block;
    flex-shrink:0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

@media (max-width: 700px) {
  .footer .inner,
  footer .inner {
    align-items: flex-start;
  }

  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

.brand-logo {
  display: block;
  width: auto;
  height: 48px;
  flex-shrink: 0;
}

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