/* Dr. Donna Marino & Associates — site stylesheet */

:root{
  /* Palette (from brand system) */
  --navy:        #22205F;
  --navy-deep:   #17153F;
  --navy-ink:    #0E0D28;
  --teal:        #80D0DD;
  --teal-soft:   #C4E7ED;
  --teal-pale:   #EAF5F7;
  --accent:      #A84498; /* Tweakable */
  --accent-deep: #7E2E72;
  --cream:       #FBF8F3;
  --paper:       #FFFFFF;
  --line:        #E6E1D8;
  --muted:       #6B6780;
  --muted-2:     #9A96AB;

  --f-display: 'Allura','Snell Roundhand',cursive;
  --f-serif:   'Cormorant Garamond',Georgia,serif;
  --f-sans:    'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
  --firm-name: "Dr. Donna Marino & Associates"; /* tweakable */
  --team-word: "our team"; /* tweakable */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--cream);
  color: var(--navy-ink);
  font-family: var(--f-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--navy); text-decoration:none}

/* ---------- Top bar ---------- */
.topbar{
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(8px);
}
.topbar-inner{
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto; align-items:center;
  gap: 32px; padding: 18px 40px;
}
.brand{display:flex; align-items:center; gap:14px; color: var(--navy)}
.brand img{height: 42px; width: 42px}
.brand .name{
  font-family: var(--f-serif); font-size: 20px; font-weight: 500; line-height: 1.1;
  letter-spacing: -0.005em;
}
.brand .name small{
  display:block; font-family: var(--f-sans); font-size: 9px;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-top: 3px;
}
nav.nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap: 28px; justify-content:center;
}
nav.nav a{
  font-family: var(--f-sans); font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--navy-ink); padding: 8px 2px; position:relative;
  transition: color .2s;
}
nav.nav a:hover{color: var(--accent)}
nav.nav a.active{color: var(--navy)}
nav.nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--accent);
}
.top-cta{display:flex; gap: 10px; align-items:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding: 14px 26px;
  font-family: var(--f-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  background: var(--navy); color:#fff; border:1px solid var(--navy);
  border-radius: 2px; cursor:pointer;
  transition: all .22s var(--ease);
}
.btn:hover{ background: var(--navy-deep); border-color: var(--navy-deep); transform: translateY(-1px)}
.btn.ghost{background:transparent; color:var(--navy)}
.btn.ghost:hover{background: var(--navy); color:#fff}
.btn.accent{ background: var(--accent); border-color: var(--accent)}
.btn.accent:hover{ background: var(--accent-deep); border-color: var(--accent-deep)}
.btn.ghost-light{background:transparent; color:#fff; border-color: rgba(255,255,255,.55)}
.btn.ghost-light:hover{background:#fff; color: var(--navy); border-color:#fff}
.btn.sm{padding: 10px 18px; font-size: 10px}
.btn-row{display:flex; gap: 12px; flex-wrap: wrap}

/* ---------- Page shell ---------- */
main{display:block}
.container{max-width: 1280px; margin: 0 auto; padding: 0 40px}
.section{padding: 120px 0}
.section.tight{padding: 80px 0}
.section.dark{ background: var(--navy); color:#fff }
.section.pale{ background: var(--teal-pale) }

.sec-head{
  display:grid; grid-template-columns: 320px 1fr; gap: 80px; margin-bottom: 56px;
  align-items: start;
}
.sec-head .num{
  font-family: var(--f-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--accent);
}
.sec-head .num b{color: var(--navy); font-weight:600; margin-right: 14px}
.sec-head h2{
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; letter-spacing:-0.012em;
  color: var(--navy); margin: 0;
}
.section.dark .sec-head h2{color:#fff}
.section.dark .sec-head .num{color: var(--teal)}
.section.dark .sec-head .num b{color:#fff}
.sec-head p{max-width: 56ch; color: var(--muted); margin: 18px 0 0}
.section.dark .sec-head p{color: rgba(255,255,255,.75)}

.eyebrow{
  font-family: var(--f-sans); font-weight: 600;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding: 80px 0 120px;
  background: var(--cream);
  overflow: hidden;
}
.hero .container{display:grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: center}
.hero h1{
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(44px, 6vw, 88px); line-height: 1.04; letter-spacing:-0.014em;
  color: var(--navy); margin: 22px 0 24px;
  text-wrap: pretty;
}
.hero h1 em{font-family: var(--f-display); font-style:normal; font-weight:400; font-size: 1.1em; color: var(--accent); padding: 0 .04em}
.hero p.lede{
  font-family: var(--f-serif); font-size: 22px; line-height: 1.45; font-weight: 400;
  color: var(--navy-ink); max-width: 48ch; margin: 0 0 32px;
}
.hero .portrait,
.framed-portrait{
  position: relative; aspect-ratio: 4/5; border-radius: 2px;
  background: var(--teal-pale);
}
.hero .portrait::before,
.framed-portrait::before{
  content:''; position:absolute; inset: 8px -8px -8px 8px;
  border: 2px solid var(--accent); border-radius: 2px;
  pointer-events:none; z-index: 0;
}
.hero .portrait img,
.framed-portrait img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover; border-radius: 2px}
.hero-meta{
  display: flex; gap: 28px; margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-meta .m{flex:1}
.hero-meta .m b{
  display:block; font-family: var(--f-serif); font-size: 32px; font-weight: 500;
  color: var(--navy); line-height: 1; margin-bottom: 6px;
}
.hero-meta .m span{
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

/* ---------- Cards ---------- */
.card{
  background: var(--paper); border:1px solid var(--line); border-radius: 2px;
  padding: 32px;
}

/* ---------- 3-up services ---------- */
.services-grid{display:grid; grid-template-columns: repeat(3,1fr); gap: 20px}
.service{
  background: var(--paper); border:1px solid var(--line); border-radius: 2px;
  padding: 32px 30px; position: relative; overflow:hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.service::before{
  content:''; position:absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--navy); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.service:hover::before{transform: scaleY(1)}
.service:hover{transform: translateY(-2px); border-color: var(--navy)}
.service .num{
  font-family: var(--f-serif); font-size: 44px; color: var(--teal);
  line-height: 1; margin-bottom: 20px; font-weight: 400;
}
.service h3{font-family: var(--f-serif); font-weight: 500; font-size: 24px; color: var(--navy); margin: 0 0 10px; line-height: 1.2}
.service p{margin: 0 0 22px; color: var(--muted); font-size: 14.5px; line-height: 1.65}
.service a.more{
  font-family: var(--f-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--navy);
}
.service a.more::after{content:' →'; transition: margin .2s var(--ease)}
.service:hover a.more::after{margin-left: 6px}

/* ---------- Team cards ---------- */
.team-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 32px}
.team-card{
  background: var(--paper); border:1px solid var(--line); border-radius: 2px;
  overflow: hidden; display: grid; grid-template-columns: 1fr; 
}
.team-card .ph{aspect-ratio: 4/5; overflow:hidden; background: var(--teal-pale)}
.team-card .ph img{width:100%; height:100%; object-fit:cover}
.team-card .body{padding: 28px 32px 32px}
.team-card .role{
  font-family: var(--f-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.team-card h3{
  font-family: var(--f-serif); font-size: 32px; font-weight: 500; margin: 8px 0 4px;
  color: var(--navy); line-height: 1.05; letter-spacing:-0.01em;
}
.team-card .cred{font-family: var(--f-sans); font-size: 13px; color: var(--muted); letter-spacing:.04em; margin-bottom: 16px}
.team-card p{color: var(--navy-ink); font-size: 15px; line-height: 1.65; margin: 0 0 14px}

/* ---------- Quote / testimonial ---------- */
.quote{
  background: var(--teal-pale);
  padding: 40px 44px; border-radius: 2px; border-left: 3px solid var(--teal);
  position: relative;
}
.quote::before{
  content:'“'; position:absolute; top: 10px; left: 22px;
  font-family: var(--f-serif); font-size: 86px; line-height: 1; color: var(--teal);
}
.quote blockquote{
  margin: 0; padding-left: 56px;
  font-family: var(--f-serif); font-size: 22px; line-height: 1.4; font-weight: 400; color: var(--navy-ink);
}
.quote cite{
  display:block; padding-left: 56px; margin-top: 16px;
  font-family: var(--f-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-style: normal;
}

/* ---------- Pill tags ---------- */
.tags{display:flex; gap: 8px; flex-wrap: wrap}
.tag{
  display:inline-block; font-family: var(--f-sans); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  color: var(--navy); background: rgba(34,32,95,.05); border: 1px solid rgba(34,32,95,.22);
}

/* ---------- Approach / method ---------- */
.steps{display:grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line)}
.step{padding: 36px 28px; border-left: 1px solid var(--line)}
.step:first-child{border-left: 0}
.step .n{
  font-family: var(--f-display); color: var(--accent); font-size: 64px; line-height: 1; margin-bottom: 16px;
}
.step h4{font-family: var(--f-serif); font-weight: 500; font-size: 22px; color: var(--navy); margin: 0 0 8px; line-height:1.2}
.step p{margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6}

/* ---------- Case study ---------- */
.cases{display:grid; grid-template-columns: 1fr 1fr; gap: 24px}
.case{
  background: var(--paper); border: 1px solid var(--line);
  padding: 34px 36px; border-radius: 2px;
}
.case .kind{font-family: var(--f-sans); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); font-weight: 600}
.case h4{font-family: var(--f-serif); font-weight: 500; font-size: 26px; color: var(--navy); margin: 10px 0 14px; line-height:1.2}
.case p{color: var(--navy-ink); font-size: 15px; line-height: 1.65; margin: 0 0 18px}
.case .kpis{display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; border-top: 1px solid var(--line); padding-top: 18px}
.case .kpis b{display:block; font-family: var(--f-serif); font-size: 28px; color: var(--accent); line-height: 1; font-weight: 500}
.case .kpis span{font-family: var(--f-sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 6px; display:block; font-weight: 600}

/* ---------- Newsletter ---------- */
.newsletter{
  background: var(--navy); color: #fff; border-radius: 2px;
  padding: 56px 64px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
}
.newsletter h3{font-family: var(--f-serif); font-weight: 500; font-size: 36px; line-height: 1.1; margin: 8px 0 10px}
.newsletter p{color: rgba(255,255,255,.78); margin: 0; max-width: 40ch}
.newsletter form{display:flex; gap: 10px}
.newsletter input{
  flex: 1; padding: 14px 16px; border-radius: 2px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.05); color: #fff; font-family: var(--f-sans); font-size: 14px;
}
.newsletter input::placeholder{color: rgba(255,255,255,.55)}
.newsletter input:focus{outline:0; border-color: var(--teal); background: rgba(255,255,255,.1)}

/* ---------- Writing / book grid ---------- */
.writing-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap: 56px; align-items: start}
.writing-book{margin: 0; display:grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start}
.writing-book img{
  display: block; width: 100%; height: auto;
  box-shadow: 0 20px 40px -18px rgba(20, 30, 60, .25), 0 6px 14px -6px rgba(20, 30, 60, .18);
  border-radius: 2px;
}
.writing-book .label{
  font-family: var(--f-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.writing-book h4{
  font-family: var(--f-serif); font-weight: 500; font-size: 26px;
  line-height: 1.1; letter-spacing: -0.01em; color: var(--navy);
  margin: 0 0 10px;
}
.writing-book p{
  font-family: var(--f-serif); font-size: 17px; line-height: 1.5;
  color: var(--navy-ink); margin: 0;
}
@media (max-width: 900px){
  .writing-grid{grid-template-columns: 1fr; gap: 40px}
  .writing-book{grid-template-columns: 160px 1fr; gap: 24px}
}

/* ---------- Full-bleed mood image ---------- */
.bleed-image{margin: 0; padding: 0; width: 100%; overflow: hidden; background: var(--teal-pale); position: relative}
.bleed-image > img{
  display: block; width: 100%;
  height: clamp(320px, 40vw, 520px);
  object-fit: cover; object-position: center 45%;
}

/* ---------- Logo marquee ---------- */
.logo-marquee{
  position: relative; overflow: hidden;
  --marquee-gap: 72px;
  --marquee-duration: 60s;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-marquee__track{
  display: flex; align-items: center; gap: var(--marquee-gap);
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}
.logo-marquee:hover .logo-marquee__track{ animation-play-state: paused }
.logo-marquee__track > img{
  flex: 0 0 auto;
  height: auto; width: auto;
  max-height: 110px; max-width: 220px;
  display: block; object-fit: contain;
  opacity: .92;
  transition: opacity .2s var(--ease);
}
.logo-marquee__track > img:hover{ opacity: 1 }
@keyframes marquee-scroll{
  from { transform: translate3d(0,0,0) }
  to   { transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0) }
}
.logo-marquee[data-dir="rtl"] .logo-marquee__track{ animation-direction: reverse }
@media (prefers-reduced-motion: reduce){
  .logo-marquee__track{ animation: none; transform: none }
  .logo-marquee{ mask-image: none; -webkit-mask-image: none; overflow-x: auto }
}

/* ---------- Logo wall (static grid, legacy) ---------- */
.logo-wall{display:grid; grid-template-columns: repeat(6,1fr); gap: 28px 40px; align-items:center; justify-items:center}
.logo-wall img{
  max-width: 100%; max-height: 48px; width: auto; height: auto;
  display:block; object-fit: contain;
  filter: grayscale(100%) brightness(.72) contrast(1.05);
  opacity: .78; transition: opacity .2s var(--ease), filter .2s var(--ease);
}
.logo-wall img:hover{ opacity: 1; filter: grayscale(100%) brightness(.55) contrast(1.05) }
.logo-wall .lw{
  font-family: var(--f-serif); font-size: 18px; font-weight: 500; color: var(--muted);
  letter-spacing:-0.005em; padding: 18px 8px; text-align:center;
}

/* ---------- Form ---------- */
.form-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 18px}
.field{display:flex; flex-direction:column; gap: 6px}
.field.full{grid-column: 1 / -1}
.field label{font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted)}
.field input, .field textarea, .field select{
  font-family: var(--f-sans); font-size: 15px; color: var(--navy-ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: 2px;
  padding: 14px 16px; outline: 0; transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color: var(--navy); background: var(--paper)}

/* ---------- Footer ---------- */
footer.site{
  background: var(--navy); color: #fff; padding: 72px 0 40px; margin-top: 120px;
}
footer.site .container{display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px}
footer.site h5{font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 0 0 18px}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site ul li{margin-bottom: 10px}
footer.site a{color: #fff; font-size: 14px; border-bottom: 1px solid transparent; padding-bottom: 1px}
footer.site a:hover{border-bottom-color: var(--teal)}
footer.site .brand img{filter: brightness(0) invert(1); height: 40px; width: 40px}
footer.site .brand .name{color: #fff}
footer.site .brand .name small{color: rgba(255,255,255,.55)}
footer.site .about{color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.65; margin: 16px 0 0; max-width: 34ch}
footer.site .legal{
  max-width: 1280px; margin: 56px auto 0; padding: 24px 40px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex; justify-content: space-between; color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- Page header (non-home) ---------- */
.page-head{padding: 96px 0 72px; border-bottom: 1px solid var(--line)}
.page-head .eyebrow{margin-bottom: 14px; display:block}
.page-head h1{font-family: var(--f-serif); font-weight: 500; font-size: clamp(44px, 5.6vw, 80px); line-height: 1.05; letter-spacing:-0.012em; color: var(--navy); margin: 0 0 8px; padding-bottom: 4px}
.page-head p{max-width: 62ch; font-family: var(--f-serif); font-size: 22px; line-height: 1.45; margin: 24px 0 0; color: var(--navy-ink)}

/* ---------- Rule / divider ---------- */
hr.rule{border: 0; border-top: 1px solid var(--line); margin: 0}

/* ---------- Tweaks panel ---------- */
.tweaks-panel{
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  width: 320px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 18px 44px rgba(14,13,40,.18), 0 6px 14px rgba(14,13,40,.08);
  font-family: var(--f-sans); display: none;
}
.tweaks-panel.on{display:block}
.tweaks-panel header{
  display:flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.tweaks-panel header b{font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--navy); font-weight: 700}
.tweaks-panel .body{padding: 16px 18px 20px}
.tweaks-panel .row{margin-bottom: 14px}
.tweaks-panel label{display:block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px}
.tweaks-panel input[type=text], .tweaks-panel select{
  width:100%; padding: 8px 10px; font-size: 13px; font-family: var(--f-sans);
  border: 1px solid var(--line); border-radius: 2px; color: var(--navy-ink); background: var(--cream);
}
.tweaks-panel .swatches{display:flex; gap: 8px}
.tweaks-panel .sw{width: 28px; height: 28px; border-radius: 999px; cursor: pointer; border: 2px solid transparent}
.tweaks-panel .sw.active{border-color: var(--navy)}

/* ---------- Reusable split helper (two-column grids that collapse) ---------- */
.split-2{display:grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start}
.split-2.flip{grid-template-columns: 1.1fr .9fr}
.split-2.even{grid-template-columns: 1fr 1fr}

/* ---------- Reusable bullet list (used on services + elsewhere) ---------- */
.bullet-list{list-style:none; padding:0; margin:0; display:block}
.bullet-list li{
  position: relative;
  padding-left: 22px;
  margin: 0 0 14px;
  font-size: 15px; line-height: 1.55; color: var(--navy-ink);
}
.bullet-list li:last-child{margin-bottom: 0}
.bullet-list li::before{
  content: "•"; color: var(--accent);
  font-family: var(--f-serif); font-size: 20px; line-height: 1;
  position: absolute; left: 0; top: 2px;
}
.bullet-list li b{color: var(--navy)}

/* ---------- Hamburger button (hidden on desktop) ---------- */
.hamburger{
  display:none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  cursor: pointer; position: relative;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.hamburger span{
  display:block; width: 20px; height: 2px; background: var(--navy);
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1){transform: translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity: 0}
.hamburger.open span:nth-child(3){transform: translateY(-7px) rotate(-45deg)}

/* ---------- Mobile drawer ---------- */
.mobile-drawer{
  position: fixed; left: 0; right: 0; top: 72px; bottom: 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 32px 28px 48px;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: transform .24s ease, opacity .24s ease;
  z-index: 100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.open{transform: translateY(0); opacity: 1; pointer-events: auto}
.mobile-nav{display:flex; flex-direction: column; gap: 0; margin-bottom: 32px}
.mobile-nav a{
  display:block; padding: 22px 12px;
  font-family: var(--f-serif); font-weight: 500; font-size: 26px;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  letter-spacing: -0.008em;
  line-height: 1.1;
}
.mobile-nav a:first-child{border-top: 1px solid var(--line)}
.mobile-nav a.active{color: var(--accent)}
.mobile-cta{padding: 8px 12px 0; display:flex; flex-direction: column; gap: 12px}
.mobile-cta .btn{width: 100%; justify-content: center; display: inline-flex; align-items: center; padding: 16px 22px; font-size: 12px}

/* ---------- Responsive breakpoints ---------- */

/* Large tablet / small laptop — 1100px: ease the hero + tighten spacing */
@media (max-width: 1100px){
  .container{padding: 0 32px}
  .topbar-inner{padding: 16px 32px; gap: 20px}
  .section{padding: 96px 0}
  .sec-head{grid-template-columns: 260px 1fr; gap: 48px}
  .newsletter{padding: 48px}
  footer.site .container{gap: 32px}
}

/* Tablet — 900px: swap desktop nav for hamburger, collapse most 2-col layouts */
@media (max-width: 900px){
  nav.nav{display:none}
  .top-cta{display:none}
  .hamburger{display:flex}
  .topbar-inner{grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px 24px}
  .topbar-inner .brand{grid-column: 1}
  .topbar-inner .hamburger{grid-column: 3; justify-self: end}

  .container{padding: 0 24px}
  .section{padding: 80px 0}
  .section.tight{padding: 56px 0}

  .hero{padding: 48px 0 64px}
  .hero .container{grid-template-columns: 1fr; gap: 40px}
  .hero .portrait img, .hero .portrait{max-height: 520px}

  .sec-head{grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px}
  .services-grid{grid-template-columns: 1fr; gap: 16px}
  .cases{grid-template-columns: 1fr; gap: 20px}
  .team-grid{grid-template-columns: 1fr; gap: 24px}
  .form-grid{grid-template-columns: 1fr; gap: 14px}

  .split-2, .split-2.flip, .split-2.even{grid-template-columns: 1fr; gap: 40px}

  .steps{grid-template-columns: 1fr 1fr}
  .step:nth-child(3){border-left: 0}

  .newsletter{grid-template-columns: 1fr; gap: 24px; padding: 40px}
  .newsletter form{flex-direction: column; gap: 12px}
  .newsletter input, .newsletter button{width: 100%}

  footer.site{padding: 56px 0 32px; margin-top: 80px}
  footer.site .container{grid-template-columns: 1fr 1fr; gap: 32px 24px}
  footer.site .legal{flex-direction: column; gap: 8px; align-items: flex-start; padding: 24px 24px 0; margin-top: 40px}

  .logo-wall{grid-template-columns: repeat(3,1fr); gap: 20px 24px}

  .page-head{padding: 72px 0 56px}
}

/* Phone — 640px: single-column everything, tighter type, stacked steps */
@media (max-width: 640px){
  .container{padding: 0 20px}
  .topbar-inner{padding: 12px 20px}
  .section{padding: 64px 0}

  .hero{padding: 32px 0 48px}
  .hero .hero-meta{flex-direction: column; align-items: flex-start; gap: 18px}
  .hero .hero-meta > *{width: 100%}
  .hero .cta-row{flex-direction: column; align-items: stretch; gap: 12px}
  .hero .cta-row .btn{width: 100%; justify-content: center}

  .steps{grid-template-columns: 1fr}
  .step{border-left: 0; border-top: 1px solid var(--line); padding: 28px 0}
  .step:first-child{border-top:0; padding-top: 0}

  .page-head{padding: 56px 0 40px}
  .page-head h1{letter-spacing: -0.01em}
  .page-head p{font-size: 18px}

  .logo-wall{grid-template-columns: repeat(2,1fr); gap: 16px 20px}
  .logo-wall img{max-height: 36px}

  footer.site{margin-top: 64px}
  footer.site .container{grid-template-columns: 1fr; gap: 32px}
  footer.site .legal{padding: 20px 20px 0; margin-top: 32px}

  .card{padding: 24px}
  .mobile-drawer{top: 64px; bottom: 0; padding: 24px 20px 40px}
  .mobile-nav a{font-size: 24px; padding: 20px 10px}

  /* Graceful form controls on small screens */
  input, textarea, select{font-size: 16px} /* prevents iOS zoom */
}

/* Very small — 380px: last-ditch adjustments */
@media (max-width: 380px){
  .container{padding: 0 16px}
  .topbar-inner{padding: 10px 16px; gap: 8px}
  .brand .name small{display:none}
  .section{padding: 56px 0}
}

/* Landscape phones / short viewports — keep drawer scrollable */
@media (max-height: 500px) and (max-width: 900px){
  .mobile-drawer{padding: 20px 24px 32px}
  .mobile-nav a{padding: 14px 10px; font-size: 20px}
  .mobile-nav{margin-bottom: 20px}
}

/* ---------- Brand flourishes (decorative corner accents) ---------- */
/* Each flourish is an absolutely-positioned image overlay on the container
   section. Shown at ~45% opacity so they feel like watermarks, not focal
   elements. Hidden on phones where they'd compete with content. */
.page-head,
.hero{position:relative}
.flourish{
  position:absolute; pointer-events:none; z-index:0;
  opacity: .38;
  width: 260px; height: auto;
  mix-blend-mode: multiply;
  transform: rotate(180deg);
}
.flourish.tl{top:-40px; left:-80px}
.flourish.tr{top:-40px; right:-80px}
.flourish.bl{bottom:-40px; left:-80px}
.flourish.br{bottom:-40px; right:-80px}
.flourish.hero-accent{
  top: 20px; right: -60px; width: 340px;
  opacity: .28;
}
/* On narrower screens the flourish competes with content — shrink slightly */
@media (max-width: 1100px){
  .page-head .flourish{width: 220px; opacity:.3}
}
/* Keep content above flourish */
.page-head .container,
.hero .container{position:relative; z-index:1}

/* Tweaks: allow global disable via body[data-flourish="off"] */
body[data-flourish="off"] .flourish{display:none}

/* Per-section color override: teal PNGs tinted magenta via hue-rotate
   so we get consistent composition across pages. */
[data-flourish-color="magenta"] .flourish{
  filter: hue-rotate(125deg) saturate(2) brightness(0.75);
  opacity: .55;
}

/* Hide on phones to keep layouts clean */
@media (max-width: 900px){
  .flourish{display:none}
}