/* ==========================================================================
   DR. SMITH KIIZA INTERNATIONAL CIVIL AND CRIMINAL ATTORNEYS
   Responsive adaptation layer
   ==========================================================================
   Base stylesheet is desktop-first. This file adapts every layout, spacing,
   type step, and component from large desktop (1440+) down to small phone
   (320px), plus landscape phones, touch devices, and hover-capability
   queries. It is NOT a shrink pass — grid patterns, ordering, aspect ratios,
   and interaction models change deliberately at each breakpoint.

   INDEX
   01. Large desktop          ≥ 1440px
   02. Desktop                 ≤ 1280px
   03. Laptop                  ≤ 1200px
   04. Tablet landscape        ≤ 1024px  ← NAV BREAKPOINT
   05. Small tablet            ≤ 900px
   06. Tablet portrait         ≤ 768px   ← MAJOR COLLAPSE
   07. Phone landscape         ≤ 640px
   08. Phone portrait          ≤ 480px
   09. Small phone             ≤ 375px
   10. Minimum supported       ≤ 320px
   11. Landscape phones (short viewport height)
   12. Touch devices (hover: none)
   13. Coarse pointer adjustments
   14. Fine pointer / hover-capable niceties
   15. Print
   ========================================================================== */


/* ==========================================================================
   01. LARGE DESKTOP  ≥ 1440px
   ---------------------------------------------------------------------------
   Give big screens more air and slightly larger hero/heading steps. This is
   the only upward-scaling block; from here down we only tighten.
   ========================================================================== */
@media (min-width: 1440px){
  :root{
    --container:      1360px;
    --container-wide: 1560px;
    --gutter:         clamp(28px, 4.5vw, 72px);
    --section-y:      clamp(96px, 10vw, 180px);
    --fs-display:     clamp(2.8rem, 5.4vw, 5.6rem);
    --fs-h2:          clamp(2.2rem, 3.6vw, 3.6rem);
  }

  .hero-inner{gap:60px}
  .hero-title{letter-spacing:-.02em}
  .hero-sub{font-size:1.15rem}

  .practice-head{gap:100px}
  .insights-head{gap:100px}
  .about-grid{gap:130px}
  .attorney-grid{gap:130px}
  .contact-grid{gap:120px}

  .card-body{padding:30px 30px 34px}
  .card-wide .card-body{padding:44px 52px}
  .insight-body{padding:30px 30px 34px}

  .footer-grid{gap:96px}
}


/* ==========================================================================
   02. DESKTOP  ≤ 1280px
   ---------------------------------------------------------------------------
   The reference desktop. Very light tightening only. Nav gaps shrink by a
   few pixels so the seven links + CTA still fit comfortably.
   ========================================================================== */
@media (max-width: 1280px){
  :root{
    --container:      1180px;
    --container-wide: 1280px;
    --nav-h:          84px;
  }

  .nav-links ul{gap:24px}
  .nav-link{font-size:.74rem; letter-spacing:.13em}

  .hero-title{font-size:clamp(2.4rem, 5.6vw, 4.6rem)}

  .cards{gap:22px}
  .insight-grid{gap:24px}

  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
}


/* ==========================================================================
   03. LAPTOP  ≤ 1200px
   ---------------------------------------------------------------------------
   First real compression: hero aside is hidden, three-column card grids
   stay three but with tighter gaps, why-grid keeps two columns but tighter.
   ========================================================================== */
@media (max-width: 1200px){
  :root{
    --container:      1040px;
    --container-wide: 1120px;
    --section-y:      clamp(72px, 10vw, 140px);
    --nav-h:          80px;
  }

  /* Hero: drop the vertical aside rail, it's a large-screen nicety */
  .hero-inner{
    grid-template-columns: minmax(0,1fr);
    gap:0;
  }
  .hero-aside{display:none}
  .hero-title{max-width:18ch}

  /* Section heads */
  .section-head{margin-bottom:clamp(48px, 6.5vw, 78px)}

  /* Practice */
  .practice-head{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    gap:48px;
  }
  .cards{gap:20px}
  .card-body{padding:24px 22px 28px}
  .card-body h3{font-size:1.32rem}
  .card-body p{font-size:.88rem}
  .card-wide .card-body{padding:32px 36px}

  /* Why */
  .why-grid{column-gap:clamp(32px, 5vw, 72px)}
  .why-item{padding:34px 0 38px}
  .why-item h3{font-size:clamp(1.4rem, 2vw, 1.75rem)}

  /* Insights */
  .insights-head{gap:48px}
  .insight-grid{gap:22px}
  .insight-body{padding:24px 22px 26px}

  /* Contact */
  .contact-grid{gap:56px}
  .contact-list li{grid-template-columns:84px 1fr; gap:16px}

  /* Footer */
  .footer-grid{gap:52px}
}


/* ==========================================================================
   04. TABLET LANDSCAPE  ≤ 1024px  ·  NAV BREAKPOINT
   ---------------------------------------------------------------------------
   Desktop navigation hides, hamburger appears. Two-column hero aside gone.
   All primary two-column grids become single-column. Practice cards fall to
   two columns. Timeline stays four columns but wraps to two rows.
   ========================================================================== */
@media (max-width: 1024px){
  :root{
    --container:      940px;
    --container-wide: 1000px;
    --nav-h:          76px;
    --nav-h-s:        64px;
    --gutter:         clamp(22px, 4vw, 48px);
    --section-y:      clamp(72px, 9.5vw, 128px);
  }

  /* --- Navbar --- */
  .nav-links{display:none}
  .nav-indicator{display:none}
  .menu-toggle{display:inline-flex}
  .nav-cta{display:none}      /* The mobile menu carries the CTA on tablet+ */

  .nav-inner{gap:16px}

  /* --- Hero --- */
  .hero{
    padding: calc(var(--nav-h) + 44px) 0 72px;
    min-height: 92svh;
  }
  @supports (min-height: 92svh){ .hero{min-height:92svh} }
  .hero-media img{object-position:center 40%}
  .hero-title{font-size:clamp(2.2rem, 6vw, 3.8rem); max-width:20ch}
  .hero-sub{font-size:1rem; max-width:52ch}
  .hero-accent{margin-top:52px}
  .hero-scroll{left:auto; right:var(--gutter)}

  /* --- Trust strip --- */
  .trust{padding:26px 0}
  .trust-inner{gap:22px}
  .trust-item{font-size:1rem}

  /* --- About / Attorney --- */
  .about-grid,
  .attorney-grid{
    grid-template-columns:minmax(0,1fr);
    gap:56px;
  }
  .about-media{padding-right:0; max-width:560px}
  .about-media .img-frame{aspect-ratio: 16/11}
  .about-media-stamp{right:14px}
  .about-media-caption{margin-top:18px}

  .attorney-media{padding:16px 0 0 16px; max-width:520px}
  .attorney-media img{aspect-ratio: 16/12}
  .attorney-frame{transform:translate(16px,16px)}
  .attorney-badge{left:0; bottom:24px; transform:translateX(-8px)}

  /* --- Practice areas --- */
  .practice-head{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
  }
  .practice-lede{padding-bottom:0}
  .practice-head .h2{margin-bottom:.4em}

  .cards{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
  }
  .card-wide{
    grid-column: span 2;
    flex-direction:row;
  }
  .card-wide .card-media{
    flex:0 0 42%;
    aspect-ratio:auto;
  }
  .card-wide .card-body{padding:28px 32px}

  .practice-cta{margin-top:64px; padding-top:36px}

  /* --- Why grid --- */
  .why-grid{grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:40px}

  /* --- Approach --- */
  .approach-grid{
    grid-template-columns:minmax(0,1fr);
    min-height:0;
  }
  .approach-media{min-height:340px; aspect-ratio: 16/9}
  .approach-media-caption{left:24px; bottom:24px}
  .approach-panel{padding: clamp(48px, 7vw, 88px) clamp(28px, 6vw, 80px)}

  /* --- Timeline --- */
  .timeline{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:48px 32px;
    padding-top:52px;
  }
  .timeline-line{top:22px}
  .tl-step{padding-right:8px}
  .tl-step p{max-width:40ch}
  /* Second row of the grid needs a spacer so the line doesn't run through */
  .tl-step:nth-child(n+3){padding-top:24px}

  /* --- Testimonials --- */
  .testimonial-panel{
    padding: clamp(44px, 6vw, 72px) clamp(28px, 5vw, 64px) clamp(34px, 4.5vw, 48px);
  }
  .ttext{max-width:56ch}

  /* --- Insights --- */
  .insights-head{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
  }
  .insights-lede{max-width:56ch; padding-bottom:0}
  .insight-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px}

  /* --- Final CTA --- */
  .final-cta{padding: clamp(88px, 11vw, 140px) 0}
  .final-title{max-width:22ch}

  /* --- Contact --- */
  .contact-grid{
    grid-template-columns:minmax(0,1fr);
    gap:56px;
  }
  .contact-info{padding-top:0}
  .contact-list{margin-top:34px; padding-top:32px}
  .contact-list li{grid-template-columns:88px 1fr}

  /* --- Footer --- */
  .footer-grid{
    grid-template-columns:1.5fr 1fr 1fr;
    gap:44px;
  }
  .footer-col:last-child{grid-column: 3 / 4}

  /* --- Modal --- */
  .modal-panel{grid-template-columns:minmax(0,1fr)}
  .modal-media img{min-height:280px; max-height:340px}
  .modal-panel{max-height:92vh}
}


/* ==========================================================================
   05. SMALL TABLET  ≤ 900px
   ---------------------------------------------------------------------------
   In-between sizing. Not a major structural change but sharpens typography
   and spacing so the 768 breakpoint doesn't feel like a cliff.
   ========================================================================== */
@media (max-width: 900px){
  :root{
    --container:      820px;
    --container-wide: 880px;
  }

  .hero-title{font-size:clamp(2.1rem, 6.4vw, 3.4rem)}
  .hero-sub{max-width:48ch}

  .cards{gap:18px}
  .card-body{padding:22px 20px 26px}
  .card-body h3{font-size:1.24rem}
  .card-body p{font-size:.86rem}

  .why-item h3{font-size:1.5rem}
  .why-item p{font-size:.94rem}

  .tl-step h3{font-size:1.28rem}
  .tl-step p{font-size:.88rem}

  .insight-body h3{font-size:1.28rem}
  .insight-body p{font-size:.88rem}

  .ttext{font-size:1.35rem}
  .tquote-mark{font-size:5.6rem}

  .footer-grid{grid-template-columns:1fr 1fr; gap:40px}
  .footer-col:last-child{grid-column:2 / 3}
  .footer-brand{grid-column:1 / -1; max-width:44ch}
}


/* ==========================================================================
   06. TABLET PORTRAIT  ≤ 768px  ·  MAJOR COLLAPSE
   ---------------------------------------------------------------------------
   Every multi-column editorial grid becomes single column. Practice cards
   fall to one column. Timeline turns vertical with a left rail. Trust strip
   becomes a two-by-two grid with vertical gold rules. Footer stacks to two
   columns.
   ========================================================================== */
@media (max-width: 768px){
  :root{
    --container:      100%;
    --container-wide: 100%;
    --gutter:         clamp(20px, 5vw, 32px);
    --section-y:      clamp(64px, 9vw, 100px);
    --nav-h:          72px;
    --nav-h-s:        62px;
    --fs-display:     clamp(1.9rem, 8.4vw, 2.8rem);
    --fs-h2:          clamp(1.7rem, 6.6vw, 2.4rem);
    --fs-h3:          clamp(1.2rem, 4.6vw, 1.5rem);
  }

  /* Anchor offset */
  html{scroll-padding-top: calc(var(--nav-h-s) + 14px)}

  /* --- Navbar --- */
  .navbar{padding:14px 0}
  .navbar.is-scrolled{padding:10px 0}
  .brand-mark{width:38px; height:38px}
  .brand-name{font-size:.95rem; letter-spacing:.12em}
  .brand-sub{font-size:.54rem; letter-spacing:.2em}

  /* --- Hero --- */
  .hero{
    padding: calc(var(--nav-h) + 34px) 0 64px;
    min-height: 90svh;
    align-items:flex-end;
  }
  @supports (min-height: 90svh){ .hero{min-height:90svh} }
  .hero-media img{object-position:center 42%}
  .hero-veil{
    background:
      linear-gradient(180deg, rgba(23,23,23,.62) 0%, rgba(23,23,23,.35) 30%, rgba(23,23,23,.94) 100%);
  }
  .hero-corner{display:none}
  .hero-grid{background-size:64px 64px}

  .hero-eyebrow{
    font-size:.62rem;
    letter-spacing:.24em;
    margin-bottom:22px;
    gap:12px;
  }
  .hero-eyebrow .gold-line{width:26px}
  .hero-title{
    font-size:var(--fs-display);
    line-height:1.06;
    max-width:100%;
    margin-bottom:22px;
    letter-spacing:-.01em;
  }
  .hero-sub{font-size:.98rem; max-width:44ch; margin-bottom:30px}

  .hero-ctas{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    width:100%;
  }
  .hero-ctas .btn{
    justify-content:center;
    width:100%;
    padding:16px 22px;
  }

  .hero-accent{margin-top:40px; gap:14px}
  .hero-accent-line{width:56px}
  .hero-accent-label{font-size:.6rem; letter-spacing:.28em}

  .hero-scroll{display:none}

  /* --- Trust strip: 2 x 2 grid --- */
  .trust{padding:22px 0}
  .trust-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 22px;
    justify-items:start;
  }
  .trust-divider{display:none}
  .trust-item{
    width:100%;
    padding-left:14px;
    border-left:1px solid rgba(182,154,99,.4);
    align-items:flex-start;
    gap:10px;
    font-size:.96rem;
    flex-direction:column;
    row-gap:4px;
  }
  .trust-item .trust-index{font-size:.56rem}
  .trust-label{line-height:1.35}

  /* --- Section heads --- */
  .section-head{margin-bottom:48px}
  .eyebrow{font-size:.66rem; letter-spacing:.26em; margin-bottom:18px; gap:12px}
  .gold-line{width:28px}

  /* --- About --- */
  .about-grid{gap:44px}
  .about-media{max-width:none; padding-right:0}
  .about-media .img-frame{aspect-ratio: 4/3.4}
  .about-media-stamp{
    top:14px;
    right:12px;
    padding:12px 14px;
  }
  .about-media-caption{font-size:.64rem; letter-spacing:.2em}

  .principles{
    grid-template-columns:1fr;
    gap:14px;
    margin:30px 0 28px;
    padding:22px 0;
  }
  .principles li{
    flex-direction:row;
    align-items:center;
    gap:14px;
    padding-left:14px;
  }
  .plabel{font-size:1.08rem}

  /* --- Practice: single column --- */
  .cards{grid-template-columns:1fr; gap:16px}
  .card-wide{
    grid-column: span 1;
    flex-direction:column;
  }
  .card-wide .card-media{
    flex:none;
    aspect-ratio:16/10;
  }
  .card-wide .card-body{padding:24px 22px 28px}
  .card-media{aspect-ratio:16/9}
  .card-body{padding:22px 22px 26px}
  .card-body h3{font-size:1.3rem}
  .card-body p{font-size:.9rem}

  .practice-cta{
    margin-top:52px;
    padding-top:32px;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }
  .practice-cta p{font-size:1.15rem}
  .practice-cta .btn{width:100%; justify-content:center}

  /* --- Why: single column --- */
  .why-grid{grid-template-columns:1fr; column-gap:0}
  .why-item{
    padding:30px 0 32px;
    flex-direction:row;
    gap:18px;
  }
  .why-num{padding-top:6px; font-size:.66rem}
  .why-item h3{font-size:1.45rem}
  .why-item p{font-size:.94rem; max-width:52ch}

  /* --- Attorney --- */
  .attorney-grid{gap:44px}
  .attorney-media{max-width:none; padding:14px 0 0 14px}
  .attorney-media img{aspect-ratio: 4/4.6}
  .attorney-frame{transform:translate(14px,14px); inset:0 14px 14px 0}
  .attorney-badge{left:0; bottom:20px; transform:translateX(-6px); padding:12px 14px}
  .badge-text{font-size:.54rem; letter-spacing:.18em}

  .descriptors{gap:8px 14px; padding-bottom:18px}
  .descriptors li{font-size:.62rem; letter-spacing:.2em}
  .attorney-body .btn{width:100%; justify-content:center}

  /* --- Approach --- */
  .approach-media{min-height:280px; aspect-ratio:auto}
  .approach-media-caption{
    left:20px; bottom:20px;
    font-size:.6rem; letter-spacing:.24em;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .approach-panel{padding: 56px clamp(22px, 5vw, 40px) 60px}

  .triad{
    gap:16px 26px;
    padding:22px 0;
    margin:26px 0;
  }
  .triad li{flex-direction:row; align-items:baseline; gap:10px}
  .triad-label{font-size:1.15rem}

  /* --- Timeline: vertical with left rail --- */
  .timeline{
    grid-template-columns:1fr;
    gap:0;
    padding-top:0;
    padding-left:30px;
  }
  .timeline-line{
    left:6px;
    top:6px;
    bottom:6px;
    right:auto;
    width:1px;
    height:auto;
    background:rgba(23,23,23,.13);
  }
  .timeline-line::after{
    background:linear-gradient(180deg, var(--gold-dim), var(--gold));
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.8s var(--ease-out);
  }
  .timeline.is-in .timeline-line::after{transform: scaleY(1)}

  .tl-step{
    padding:0 0 40px 0;
    margin-left:0;
  }
  .tl-step:nth-child(n+3){padding-top:0}
  .tl-step:last-child{padding-bottom:0}

  .tl-dot{
    top:6px;
    left:-28px;
    width:12px;
    height:12px;
  }
  .tl-num{margin-bottom:10px}
  .tl-step h3{font-size:1.32rem}
  .tl-step p{max-width:52ch; font-size:.9rem}

  /* --- Testimonials --- */
  .testimonial-panel{
    padding: 40px 24px 28px;
    border-radius: var(--radius-sm);
  }
  .tquote-mark{font-size:4.6rem; margin-bottom:8px}
  .ttext{font-size:1.18rem; line-height:1.55; margin-bottom:26px}
  .tslides{min-height:0}
  .tslide{position:relative; inset:auto; display:none}
  .tslide.is-active{display:block; position:relative}
  .tmeta{padding-top:18px; max-width:none}
  .tcontrols{margin-top:30px; padding-top:22px; gap:16px}
  .tbtn{width:42px; height:42px}
  .tdot{width:7px; height:7px}
  .tdot.is-active{width:18px}
  .testimonial-note{font-size:.72rem; margin-top:18px; padding-left:14px}

  /* --- Insights: single column --- */
  .insight-grid{grid-template-columns:1fr; gap:18px}
  .insight-media{aspect-ratio:16/9}
  .insight-body{padding:24px 22px 26px}
  .insight-body h3{font-size:1.28rem}
  .insight-body p{font-size:.9rem}

  /* --- Final CTA --- */
  .final-cta{padding: clamp(72px, 12vw, 110px) 0}
  .final-line{width:60px; margin-bottom:24px}
  .final-title{
    font-size:clamp(1.8rem, 7vw, 2.4rem);
    max-width:100%;
    margin-bottom:22px;
  }
  .final-sub{margin-bottom:32px}
  .final-actions{flex-direction:column; align-items:stretch; gap:12px}
  .final-actions .btn{width:100%; justify-content:center; padding:17px 22px}

  /* --- Contact --- */
  .contact-grid{gap:48px}
  .contact-list li{
    grid-template-columns:1fr;
    gap:6px;
    padding-bottom:16px;
  }
  .clabel{font-size:.6rem; letter-spacing:.28em}
  .contact-list a,
  .contact-list .cval{font-size:1.16rem}

  .contact-quote{margin-top:34px; padding:18px 0 0 20px}
  .contact-quote p{font-size:1.05rem}

  /* --- Footer --- */
  .footer{padding-top:56px}
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:36px 28px;
    padding-bottom:48px;
  }
  .footer-brand{
    grid-column:1 / -1;
    max-width:none;
    padding-bottom:22px;
    border-bottom:1px solid rgba(245,241,232,.08);
  }
  .footer-col:last-child{grid-column:auto}
  .footer-col h4{font-size:.62rem; margin-bottom:16px}
  .footer-col ul{gap:10px}
  .footer-col a,
  .footer-col span{font-size:.86rem}
  .footer-bottom{
    font-size:.74rem;
    padding:22px 0;
    gap:8px;
  }

  /* --- FAB --- */
  .fab{
    right:16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    gap:10px;
  }
  .fab-btn{width:50px; height:50px}
  .fab-btn svg{width:20px; height:20px}
  .fab-tip{display:none}   /* tooltips are hover-only; suppress on touch-first sizes */

  /* --- Modal --- */
  .modal{padding:16px 14px}
  .modal-panel{
    max-height:calc(100vh - 32px);
    border-radius:var(--radius-sm);
  }
  .modal-media img{min-height:200px; max-height:240px}
  .modal-body{padding:32px 22px 32px}
  .modal-title{font-size:1.6rem}
  .modal-close{width:40px; height:40px; top:10px; right:10px}
  .modal-actions{flex-direction:column; align-items:stretch}
  .modal-actions .btn{width:100%; justify-content:center}

  .modal-body-article{padding-top:44px}
  .article-prose p{font-size:.98rem}
}


/* ==========================================================================
   07. PHONE LANDSCAPE  ≤ 640px
   ---------------------------------------------------------------------------
   Tighter type steps, generous tap targets, single-column everything.
   ========================================================================== */
@media (max-width: 640px){
  :root{
    --gutter: clamp(18px, 5vw, 28px);
    --section-y: clamp(56px, 10vw, 84px);
    --nav-h: 68px;
    --nav-h-s: 60px;
    --fs-display: clamp(1.85rem, 8vw, 2.6rem);
    --fs-h2: clamp(1.6rem, 6.4vw, 2.2rem);
    --fs-lede: 1rem;
  }

  html{scroll-padding-top: calc(var(--nav-h-s) + 12px)}

  /* Navbar */
  .navbar{padding:12px 0}
  .navbar.is-scrolled{padding:8px 0}
  .brand-mark{width:34px; height:34px}
  .brand-name{font-size:.88rem; letter-spacing:.11em}

  /* Hero */
  .hero{padding: calc(var(--nav-h) + 26px) 0 56px}
  .hero-title{margin-bottom:20px}
  .hero-sub{font-size:.94rem; margin-bottom:26px}
  .hero-ctas .btn{padding:15px 20px; font-size:.72rem}
  .hero-accent{margin-top:34px; gap:12px}
  .hero-accent-line{width:44px}
  .hero-accent-label{font-size:.56rem; letter-spacing:.24em}

  /* Trust */
  .trust{padding:20px 0}
  .trust-inner{gap:14px 18px}
  .trust-item{font-size:.9rem; padding-left:12px}
  .trust-label{line-height:1.3}

  /* Section head */
  .section-head{margin-bottom:40px}

  /* Cards */
  .card-media{aspect-ratio:16/9.5}
  .card-body{padding:20px 20px 24px; gap:12px}
  .card-body h3{font-size:1.22rem}
  .card-body p{font-size:.88rem; line-height:1.62}
  .card-link{font-size:.64rem; letter-spacing:.22em; padding-top:10px}

  /* Why */
  .why-item{padding:26px 0 28px; gap:16px}
  .why-item h3{font-size:1.32rem; margin-bottom:8px}

  /* Attorney */
  .attorney-media img{aspect-ratio:4/4.4}
  .attorney-badge{padding:10px 12px}
  .badge-mark{width:26px; height:26px}
  .badge-text{font-size:.5rem; letter-spacing:.16em}

  /* Approach */
  .approach-media{min-height:240px}
  .approach-media-caption{left:16px; bottom:16px}
  .approach-panel{padding:48px 20px 52px}

  /* Timeline */
  .timeline{padding-left:26px}
  .timeline-line{left:5px}
  .tl-dot{left:-24px; width:11px; height:11px}
  .tl-step{padding-bottom:32px}

  /* Testimonials */
  .testimonial-panel{padding:34px 20px 24px}
  .tquote-mark{font-size:4rem}
  .ttext{font-size:1.1rem}
  .tmeta{padding-top:16px}
  .tname{font-size:.86rem}
  .tsource{font-size:.62rem; letter-spacing:.22em}
  .tcontrols{margin-top:26px; padding-top:20px}
  .tbtn{width:40px; height:40px}
  .tbtn svg{width:16px; height:16px}

  /* Insights */
  .insight-body{padding:22px 20px 24px}
  .insight-body h3{font-size:1.2rem}
  .tag{font-size:.58rem; letter-spacing:.24em}

  /* Final CTA */
  .final-cta{padding: clamp(64px, 13vw, 96px) 0}
  .final-title{font-size:clamp(1.7rem, 7.4vw, 2.2rem)}
  .final-actions .btn{padding:15px 20px; font-size:.72rem}

  /* Contact */
  .contact-grid{gap:40px}
  .contact-list li{padding-bottom:14px}

  /* Footer */
  .footer{padding-top:48px}
  .footer-grid{gap:32px 24px; padding-bottom:40px}
  .footer-logo{margin-bottom:18px}
  .footer-logo .brand-name{font-size:1rem}
  .footer-logo .brand-sub{font-size:.56rem}

  /* FAB */
  .fab{right:14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); gap:9px}
  .fab-btn{width:46px; height:46px}
  .fab-btn svg{width:18px; height:18px}

  /* Modal */
  .modal{padding:12px 10px}
  .modal-body{padding:28px 20px 28px}
  .modal-title{font-size:1.48rem}
  .modal-media img{min-height:180px; max-height:220px}
  .modal-actions .btn{padding:14px 20px; font-size:.72rem}
}


/* ==========================================================================
   08. PHONE PORTRAIT  ≤ 480px
   ---------------------------------------------------------------------------
   Common small-phone tier (iPhone SE portrait, Pixel 4a, etc). Extra
   conservative type, single-column trust strip, tighter nav.
   ========================================================================== */
@media (max-width: 480px){
  :root{
    --gutter: 18px;
    --section-y: clamp(52px, 10vw, 72px);
    --nav-h: 64px;
    --nav-h-s: 58px;
    --fs-display: clamp(1.7rem, 8.6vw, 2.2rem);
    --fs-h2: clamp(1.5rem, 6.8vw, 1.95rem);
  }

  /* Navbar */
  .navbar{padding:10px 0}
  .navbar.is-scrolled{padding:7px 0}
  .brand-mark{width:32px; height:32px}
  .brand-mark svg{width:24px; height:24px}
  .brand-name{font-size:.84rem; letter-spacing:.1em}
  .brand-sub{display:none}
  .menu-toggle{width:40px; height:40px}

  /* Hero */
  .hero{padding: calc(var(--nav-h) + 22px) 0 48px}
  .hero-eyebrow{font-size:.58rem; letter-spacing:.2em; margin-bottom:18px; gap:10px}
  .hero-eyebrow .gold-line{width:20px}
  .hero-title{margin-bottom:18px; line-height:1.08}
  .hero-sub{font-size:.92rem; margin-bottom:24px}
  .hero-ctas .btn{padding:14px 18px; font-size:.68rem; letter-spacing:.18em}
  .hero-accent{margin-top:30px}
  .hero-accent-label{font-size:.52rem; letter-spacing:.22em}

  /* Trust: single column, but denser 2-column kept as an option */
  .trust{padding:18px 0}
  .trust-inner{grid-template-columns:1fr; gap:12px}
  .trust-item{
    padding-left:12px;
    font-size:.9rem;
    flex-direction:row;
    align-items:baseline;
    gap:10px;
    border-left-color:rgba(182,154,99,.5);
  }
  .trust-item .trust-index{min-width:22px}

  /* Section head */
  .eyebrow{font-size:.6rem; letter-spacing:.22em; margin-bottom:16px}
  .gold-line{width:22px}

  /* About media caption / stamp */
  .about-media-caption{font-size:.58rem; letter-spacing:.18em; gap:8px}
  .about-media-stamp{padding:10px 12px; top:10px; right:10px}
  .stamp-text{font-size:.52rem; letter-spacing:.18em}

  /* Principles */
  .principles{gap:12px; padding:18px 0; margin:24px 0}
  .plabel{font-size:1rem}

  /* Practice cards */
  .card-media{aspect-ratio:16/10}
  .card-body{padding:18px 18px 22px; gap:10px}
  .card-body h3{font-size:1.16rem}
  .card-body p{font-size:.86rem}

  /* Attorney */
  .attorney-badge{
    left:8px; bottom:16px;
    padding:9px 11px;
    transform:translateX(0);
  }
  .badge-text{font-size:.48rem; letter-spacing:.14em}

  /* Timeline */
  .timeline{padding-left:22px}
  .timeline-line{left:4px}
  .tl-dot{left:-21px; width:10px; height:10px}
  .tl-step h3{font-size:1.22rem}

  /* Testimonials */
  .testimonial-panel{padding:30px 18px 22px}
  .tquote-mark{font-size:3.6rem}
  .ttext{font-size:1.04rem; margin-bottom:22px}
  .tcontrols{margin-top:22px; padding-top:18px; gap:12px}

  /* Footer */
  .footer{padding-top:44px}
  .footer-grid{
    grid-template-columns:1fr;
    gap:30px;
    padding-bottom:36px;
  }
  .footer-brand{padding-bottom:20px}
  .footer-bottom{text-align:left; padding:20px 0}
  .footer-fine{font-size:.68rem}

  /* FAB */
  .fab{right:12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); gap:8px}
  .fab-btn{width:44px; height:44px}
  .fab-btn svg{width:17px; height:17px}

  /* Modal */
  .modal{padding:10px 8px}
  .modal-body{padding:26px 18px 24px}
  .modal-title{font-size:1.36rem}
  .modal-fine{font-size:.74rem; padding-left:12px}
  .modal-close{width:36px; height:36px; top:8px; right:8px}
}


/* ==========================================================================
   09. SMALL PHONE  ≤ 375px  (iPhone SE, older Androids)
   ---------------------------------------------------------------------------
   Ensures no horizontal overflow, preserves headline legibility, and keeps
   tap targets ≥ 40px.
   ========================================================================== */
@media (max-width: 375px){
  :root{
    --gutter: 16px;
    --section-y: clamp(48px, 9.5vw, 64px);
    --fs-display: clamp(1.55rem, 9vw, 1.95rem);
    --fs-h2: clamp(1.4rem, 7vw, 1.75rem);
    --fs-lede: .96rem;
  }

  body{font-size:.96rem}
  p{line-height:1.68}

  /* Navbar */
  .navbar{padding:9px 0}
  .brand-mark{width:30px; height:30px}
  .brand-mark svg{width:22px; height:22px}
  .brand-name{font-size:.8rem}

  /* Hero */
  .hero{padding: calc(var(--nav-h) + 18px) 0 42px}
  .hero-title{margin-bottom:16px}
  .hero-sub{font-size:.9rem; margin-bottom:22px}
  .hero-ctas .btn{padding:13px 16px; font-size:.66rem; letter-spacing:.16em}

  /* Trust */
  .trust{padding:16px 0}
  .trust-item{font-size:.86rem}

  /* Cards */
  .card-body h3{font-size:1.1rem}
  .card-body p{font-size:.84rem}

  /* Why */
  .why-item h3{font-size:1.24rem}
  .why-item p{font-size:.9rem}

  /* Timeline */
  .tl-step h3{font-size:1.16rem}
  .tl-step p{font-size:.86rem}

  /* Testimonials */
  .ttext{font-size:1rem}
  .tname{font-size:.82rem}
  .tsource{font-size:.58rem; letter-spacing:.2em}
  .tbtn{width:38px; height:38px}

  /* Insights */
  .insight-body h3{font-size:1.14rem}
  .insight-body p{font-size:.86rem}

  /* Final CTA */
  .final-title{font-size:clamp(1.5rem, 8vw, 1.9rem)}

  /* Contact */
  .contact-list a,
  .contact-list .cval{font-size:1.08rem}

  /* Footer */
  .footer-col a,
  .footer-col span{font-size:.84rem}
  .footer-bottom{font-size:.72rem}

  /* FAB */
  .fab-btn{width:42px; height:42px}
  .fab-btn svg{width:16px; height:16px}
}


/* ==========================================================================
   10. MINIMUM SUPPORTED  ≤ 320px  (very small / older devices)
   ---------------------------------------------------------------------------
   Guarantee no horizontal overflow; condense everything aggressively.
   ========================================================================== */
@media (max-width: 320px){
  :root{
    --gutter: 14px;
    --section-y: 44px;
    --fs-display: 1.5rem;
    --fs-h2: 1.32rem;
  }

  .brand-name{font-size:.76rem; letter-spacing:.09em}

  .hero-title{font-size:1.5rem; line-height:1.1}
  .hero-sub{font-size:.86rem}

  .btn{padding:12px 14px; font-size:.64rem; letter-spacing:.14em}

  .trust-item{font-size:.82rem}
  .trust-index{font-size:.52rem}

  .card-body h3{font-size:1.05rem}
  .card-body p{font-size:.82rem}

  .ttext{font-size:.96rem}

  .fab-btn{width:40px; height:40px}
  .fab-btn svg{width:15px; height:15px}
}


/* ==========================================================================
   11. LANDSCAPE PHONES  (short viewport height)
   ---------------------------------------------------------------------------
   Users rotating to landscape get little vertical room. The hero should not
   swallow the entire screen; the FAB may collide with the browser UI, so
   we raise it a bit more.
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape){
  :root{
    --nav-h: 60px;
    --nav-h-s: 54px;
  }

  .hero{
    min-height: auto;
    padding: calc(var(--nav-h) + 24px) 0 48px;
  }
  .hero-title{font-size:clamp(1.6rem, 4.4vh, 2.2rem); margin-bottom:14px}
  .hero-sub{font-size:.92rem; margin-bottom:20px}
  .hero-ctas{flex-direction:row; flex-wrap:wrap; gap:10px}
  .hero-ctas .btn{width:auto; flex:0 1 auto}
  .hero-accent{margin-top:22px}
  .hero-scroll{display:none}

  .trust{padding:14px 0}
  .trust-inner{grid-template-columns:repeat(4, 1fr)}

  /* Keep FAB from obscuring critical content in landscape */
  .fab{
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
    gap:6px;
  }
  .fab-btn{width:40px; height:40px}
  .fab-btn svg{width:16px; height:16px}
  .fab-tip{display:none}

  /* Modals: shrink padding */
  .modal-panel{max-height:calc(100vh - 20px)}
  .modal-media img{min-height:140px; max-height:180px}
  .modal-body{padding:24px 20px}
}


/* ==========================================================================
   12. TOUCH DEVICES  (hover: none)
   ---------------------------------------------------------------------------
   Remove hover-only affordances, enlarge tap targets, keep cards clickable
   without relying on hover.
   ========================================================================== */
@media (hover: none){
  /* Disable hover-only reveal states that would leave content "stuck" */
  .card:hover,
  .insight:hover{transform:none; box-shadow:none; border-color:inherit}

  .card:hover .card-media img,
  .insight:hover .insight-media img{transform:none}

  .card:hover .card-body h3,
  .insight:hover .insight-body h3{color:inherit}

  .why-item:hover h3{color:inherit}
  .why-item:hover .why-line{width:80px}   /* keep the state that signals "in view" */

  .fab-btn:hover{transform:none; filter:none}
  .fab-btn:hover .fab-tip{opacity:0}

  .btn:hover svg{transform:none}
  .card:hover .card-link svg{transform:none}

  /* Tap targets */
  .nav-link,
  .footer-col a,
  .contact-list a{min-height:44px; display:inline-flex; align-items:center}

  .tbtn{min-width:44px; min-height:44px}
  .tdot{padding:6px}

  /* Ensure the "Learn more" arrow still animates on tap feedback */
  .card:active,
  .insight:active{transform:scale(.99); transition:transform 120ms var(--ease)}
}


/* ==========================================================================
   13. COARSE POINTER  (stylus, some tablets)
   ---------------------------------------------------------------------------
   Slightly larger controls.
   ========================================================================== */
@media (pointer: coarse){
  .btn,
  .nav-cta,
  .fab-btn,
  .menu-toggle,
  .mobile-close,
  .modal-close,
  .tbtn{min-height:44px}

  .nav-link{padding:10px 0}
  .tdot{padding:5px; box-sizing:content-box}
}


/* ==========================================================================
   14. FINE POINTER / HOVER-CAPABLE NICETIES
   ---------------------------------------------------------------------------
   Re-enable premium micro-interactions only where hover is meaningful.
   ========================================================================== */
@media (hover: hover) and (pointer: fine){
  .card-link:hover{letter-spacing:.28em}

  .footer-col a:hover::after{width:100%}

  .contact-list a{position:relative}
  .contact-list a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-3px;
    width:0;
    height:1px;
    background:var(--gold);
    transition: width .4s var(--ease);
  }
  .contact-list a:hover::after{width:100%}
}


/* ==========================================================================
   15. PRINT
   ---------------------------------------------------------------------------
   Strip chrome, expand to a document layout.
   ========================================================================== */
@media print{
  :root{
    --gutter: 0;
    --section-y: 24pt;
  }

  body{
    background:#fff;
    color:#000;
    font-size:11pt;
    line-height:1.5;
  }

  .navbar,
  .mobile-menu,
  .fab,
  .scroll-progress,
  .loader,
  .hero-scroll,
  .hero-corner,
  .hero-aside,
  .modal,
  .tcontrols,
  .tdots,
  .practice-cta,
  .final-cta,
  .approach-media-caption{
    display:none !important;
  }

  .container,
  .container-wide{
    width:100% !important;
    max-width:none !important;
  }

  .hero,
  .trust,
  .practice,
  .approach,
  .final-cta,
  .footer,
  .testimonial-panel{
    background:#fff !important;
    color:#000 !important;
    box-shadow:none !important;
  }

  .hero-media,
  .hero-veil,
  .hero-grid{display:none}

  .hero-inner,
  .about-grid,
  .attorney-grid,
  .contact-grid,
  .approach-grid,
  .cards,
  .insight-grid,
  .why-grid,
  .footer-grid{
    display:block;
  }

  .card,
  .insight,
  .testimonial-panel,
  .approach-panel{
    border:1px solid #ccc;
    page-break-inside: avoid;
    margin-bottom:12pt;
    padding:12pt;
  }

  .card-media,
  .insight-media,
  .about-media .img-frame,
  .attorney-media img,
  .approach-media{
    page-break-inside: avoid;
    max-width:60mm;
  }

  .h2, .hero-title, .final-title{color:#000 !important}
  .h2 em, .hero-title em, .final-title em{color:#000 !important}

  .eyebrow, .gold-line, .tag{color:#000 !important}

  a{color:#000; text-decoration:underline}

  .footer-bottom p{margin:4pt 0}
}