/* ============================================================
   Insaaf Law Group — production stylesheet
   Base chrome (header/nav/footer), accessibility, and the
   responsive layer over the approved 1440px page designs.
   ============================================================ */

:root {
  --hh: 72px;            /* header height, top of page */
  --hh-stuck: 62px;      /* header height, sticky state */
  --paper: #F1EFE9;
  --paper-2: #F6F4EE;
  --paper-3: #F6F3EC;
  --ink: #101010;
  --ink-2: #0D0D0C;
  --oxblood: #A11A1C;
  --oxblood-2: #C4413F;
  --line: #D9D5CB;
  --line-2: #C9C5BA;
  --line-dark: #2A2823;
  --muted: #6E6A60;
  --muted-dark: #A6A297;
}

html, body { margin: 0; padding: 0; background: var(--paper); }
body { font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
[id] { scroll-margin-top: calc(var(--hh-stuck) + 38px); }
img { max-width: 100%; }
::selection { background: var(--oxblood); color: var(--paper-3); }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }

.page { width: 100%; max-width: 1440px; margin: 0 auto; background: var(--paper); overflow-x: clip; }

/* ---------- header ---------- */
.site-header { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 26px 56px; background: var(--paper); border-bottom: 1px solid transparent; position: sticky; top: 0; z-index: 60; transition: background 0.3s cubic-bezier(.22,.61,.36,1), padding 0.3s cubic-bezier(.22,.61,.36,1), border-color 0.3s cubic-bezier(.22,.61,.36,1), transform 0.25s ease-out; }
/* sticky state: 4-6% lighter cream, ~97% opacity, subtle blur, faint hairline */
.site-header.scrolled { background: rgba(248, 246, 241, 0.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: rgba(0, 0, 0, 0.07); }
/* mobile: header may retire on deliberate downward scroll, returns on any upward scroll */
@media (max-width: 980px) { .site-header.retired { transform: translateY(-100%); } }
.site-header .brand { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: 0.05em; }
.site-nav { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; }
.site-nav a { position: relative; padding-bottom: 3px; }
.site-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--oxblood); transition: width 0.22s cubic-bezier(0.22,1,0.36,1); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { width: 100%; }
.site-nav a.active { border-bottom: none; } .site-nav a.active::after { width: 18px; }
.site-nav .btn-contact { border: 1.5px solid var(--ink); border-radius: 0; padding: 9px 28px; font-size: 13.5px; font-weight: 600; margin-left: 4px; transition: background 0.22s ease-out, color 0.22s ease-out; }
.site-nav .btn-contact:hover, .site-nav .btn-contact:focus-visible { background: var(--ink); color: var(--paper); }
.site-nav .btn-contact::after { display: none; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; cursor: pointer; width: 30px; height: 22px; position: relative; }
.nav-burger span { position: absolute; left: 0; width: 100%; height: 2.5px; background: var(--ink); transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease; }
.nav-burger span:nth-child(1) { top: 0; }
.nav-burger span:nth-child(2) { top: 9.5px; }
.nav-burger span:nth-child(3) { top: 19px; }

/* ---------- footer ---------- */
.site-footer { max-width: 1440px; margin: 0 auto; position: relative; background: var(--ink-2); color: var(--paper); overflow: hidden; border-top: 1px solid var(--line-dark); }
/* giant wordmark: quiet architecture BEHIND the sitemap, not its own band */
.site-footer .brandband { position: absolute; right: -14px; bottom: 44px; user-select: none; pointer-events: none; z-index: 0; }
.site-footer .brandband div { font-family: 'Archivo Black', sans-serif; font-size: 244px; letter-spacing: -0.01em; line-height: 0.86; color: #16150F; white-space: nowrap; }
.site-footer .cols { position: relative; z-index: 1; display: grid; grid-template-columns: 1.8fr 0.72fr 0.82fr 0.78fr; gap: 52px; align-items: start; padding: 60px 56px 46px 56px; }
.site-footer h2 { font-family: 'Archivo Black', sans-serif; font-size: 40px; line-height: 1.06; text-transform: uppercase; margin: 0 0 20px 0; font-weight: 400; }
.site-footer .rule { width: 44px; height: 3px; background: var(--oxblood); margin-bottom: 20px; }
.site-footer .mail { font-size: 21px; font-weight: 600; color: #F1EDE3; display: inline-block; margin: 2px 0 4px 0; }
.site-footer .mail .arr { color: var(--oxblood-2); }
.site-footer .note { font-size: 13.5px; line-height: 1.7; color: rgba(241,239,233,0.6); max-width: 340px; margin-top: 22px; }
.site-footer .col-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--oxblood-2); margin: 8px 0 18px 0; }
.site-footer .col-links { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; line-height: 1.5; color: rgba(241,239,233,0.85); }
.site-footer .col-links a { transition: color 0.18s ease; }
.site-footer .col-links a:hover, .site-footer .col-links a:focus-visible { color: var(--paper-3); }
.site-footer .office { font-size: 13.5px; line-height: 1.9; color: rgba(241,239,233,0.85); }
.site-footer .chips { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; font-size: 13.5px; }
.site-footer .chips a { color: rgba(241,239,233,0.85); transition: color 0.18s ease; }
.site-footer .chips a:hover, .site-footer .chips a:focus-visible { color: var(--paper); }
.site-footer .bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-dark); padding: 18px 56px; font-size: 13px; color: rgba(241,239,233,0.65); gap: 16px; flex-wrap: wrap; }
.site-footer .bar a { transition: color 0.18s ease; }
.site-footer .bar a:hover, .site-footer .bar a:focus-visible { color: var(--paper-3); }
.site-footer .bar .mid { display: flex; gap: 24px; }

/* ---------- interactive affordances shared across pages ---------- */
.arr { display: inline-block; transition: transform 0.22s cubic-bezier(0.22,1,0.36,1); }
a:hover .arr, a:focus-visible .arr { transform: translateX(6px); }
a[style] { display: block; }
a.lnk, a.cbtn, a.sbtn, span.lnk { display: inline-flex; align-items: center; gap: 6px; }
label[tabindex] { cursor: pointer; }

/* skip link */
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 18px; z-index: 100; }
.skip:focus { left: 0; }

/* ============================================================
   RESPONSIVE LAYER — overrides the approved desktop inline styles
   ============================================================ */

/* ---------- 981-1180px: the widescreen-laptop gap ---------- */
@media (max-width: 1180px) and (min-width: 981px) {
  .page [style*="font-size: 116px"] { font-size: clamp(48px, 8.4vw, 116px) !important; }
  /* People band: image full width, copy below */
  .page [style*="grid-template-columns: 1fr 320px"] { grid-template-columns: 1fr !important; }
  .site-footer .cols { gap: 34px; }
  .site-footer .brandband div { font-size: 17vw; }
}

@media (max-width: 980px) {
  .page [style*="grid-template-columns: 1fr 320px"] { grid-template-columns: 1fr !important; }

  /* nav becomes a slide-down panel */
  .site-header { padding: 18px 20px; }
  .nav-burger { display: block; }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 16px 0; display: none; }
  .site-nav a { padding: 14px 24px; font-size: 16px; }
  .site-nav a.active { border-bottom: none; color: var(--oxblood); font-weight: 700; }
  .site-nav .btn-contact { margin: 12px 24px 0 24px; text-align: center; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { top: 9.5px; transform: rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { top: 9.5px; transform: rotate(-45deg); }

  /* collapse layout grids from the approved boards */
  .page [style*="grid-template-columns: repeat(5"] { grid-template-columns: 1fr 1fr !important; }
  .page [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  .page [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  .page [style*="grid-template-columns:"]:not([style*="repeat("]):not([style*="90px 1fr"]) { grid-template-columns: 1fr !important; }
  .page [style*="grid-template-columns: 90px 1fr"] { grid-template-columns: 1fr !important; }
  .page [style*="border-left: 1px solid"] { border-left: none !important; padding-left: 0 !important; }
  .page [style*="border-right: 1px solid #2A2823"] { border-right: none !important; }

  /* gutters */
  .page [style*="padding: 88px 56px"], .page [style*="padding: 72px 56px"], .page [style*="padding: 64px 56px"],
  .page [style*="padding: 60px 56px"], .page [style*="padding: 56px 56px"], .page [style*="padding: 52px 56px"],
  .page [style*="padding: 48px 56px"], .page [style*="padding: 44px 56px"], .page [style*="padding: 40px 56px"],
  .page [style*="padding: 34px 56px"], .page [style*="padding: 30px 56px"], .page [style*="padding: 26px 56px"],
  .page [style*="padding: 20px 56px"], .page [style*="padding: 12px 56px"], .page [style*="padding: 10px 56px"],
  .page [style*="padding: 0 56px"], .page [style*="padding: 56px;"] { padding-left: 20px !important; padding-right: 20px !important; }
  .page [style*="margin: 0 56px"], .page [style*="margin: 56px 56px"], .page [style*="margin: 44px 56px"] { margin-left: 20px !important; margin-right: 20px !important; }

  .page [style*="display: flex"] { flex-wrap: wrap; }

  /* release fixed widths and nowraps */
  .page [style*="width: 1440px"] { width: 100% !important; }
  .page [style*="white-space: nowrap"] { white-space: normal !important; }
  .page [style*="max-width: 330px"] { max-width: none !important; }

  /* display type scales down */
  .page [style*="font-size: 158px"] { font-size: clamp(46px, 13vw, 158px) !important; line-height: 0.92 !important; }
  .page [style*="font-size: 116px"] { font-size: clamp(42px, 11vw, 116px) !important; }
  .page [style*="font-size: 110px"] { font-size: clamp(40px, 10.5vw, 110px) !important; }
  .page [style*="font-size: 96px"], .page [style*="font-size: 92px"] { font-size: clamp(36px, 9.5vw, 96px) !important; }
  .page [style*="font-size: 88px"], .page [style*="font-size: 86px"], .page [style*="font-size: 84px"] { font-size: clamp(33px, 9vw, 88px) !important; }
  .page [style*="font-size: 78px"], .page [style*="font-size: 76px"], .page [style*="font-size: 74px"] { font-size: clamp(30px, 8vw, 78px) !important; }
  .page [style*="font-size: 58px"], .page [style*="font-size: 56px"], .page [style*="font-size: 54px"],
  .page [style*="font-size: 52px"], .page [style*="font-size: 50px"] { font-size: clamp(26px, 6.5vw, 58px) !important; }
  .page [style*="font-size: 44px"], .page [style*="font-size: 42px"], .page [style*="font-size: 40px"],
  .page [style*="font-size: 38px"] { font-size: clamp(23px, 5.5vw, 44px) !important; }
  .page [style*="font-size: 34px"], .page [style*="font-size: 33px"], .page [style*="font-size: 31px"],
  .page [style*="font-size: 30px"] { font-size: clamp(20px, 4.8vw, 34px) !important; }
  .page [style*="font-size: 290px"] { font-size: 110px !important; }

  /* image bands */
  .page [style*="height: 460px"], .page [style*="height: 430px"], .page [style*="height: 420px"],
  .page [style*="height: 400px"] { height: min(56vw, 460px) !important; }
  .page [style*="height: 560px"] { height: min(70vw, 560px) !important; }
  .page [style*="height: 340px"], .page [style*="height: 320px"], .page [style*="height: 300px"],
  .page [style*="height: 290px"], .page [style*="height: 280px"], .page [style*="height: 260px"],
  .page [style*="height: 240px"], .page [style*="height: 230px"], .page [style*="height: 210px"],
  .page [style*="height: 200px"], .page [style*="height: 190px"], .page [style*="height: 160px"] { height: min(52vw, 300px) !important; }

  /* sub-service drawer becomes a bottom sheet */
  .page .drawer { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-height: 88vh; overflow-y: auto; transform: translateY(110%) !important; box-shadow: 0 -20px 60px rgba(16,16,16,0.35) !important; z-index: 80; }
  .page input[id^="svc-"]:checked + .drawer { transform: translateY(0) !important; }
  .page .drawer [style*="white-space: nowrap"] { white-space: normal !important; }

  /* footer */
  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 36px; padding: 48px 20px 40px 20px; }
  .site-footer .brandband { display: none; }
  .site-footer .bar { padding: 16px 20px; }
}

@media (max-width: 620px) {
  /* team photo: closer crop on phones, per art direction */
  .page [style*="aspect-ratio: 7/3"] { aspect-ratio: 3/2 !important; }

  /* hero: keep the type monumental; let the last line wrap instead of shrinking */
  .page [style*="font-size: 116px"] { font-size: clamp(48px, 14.5vw, 116px) !important; }
  /* hero CTA: near full-width tap target */
  .page [style*="border: 1.5px solid #A11A1C"] { display: flex !important; justify-content: center; width: 100%; box-sizing: border-box; }

  .page [style*="grid-template-columns: repeat(5"], .page [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .page [style*="padding: 40px 44px"] { padding: 26px 20px !important; }
  .page [style*="display: flex"][style*="justify-content: space-between"] { flex-wrap: wrap; gap: 12px; }
}

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

/* ---------- motion: three languages, nothing more ----------
   1. typography — masked upward reveals (hero, load-time only)
   2. photography — slow scale / clip reveals on first viewport entry
   3. interface — small line/arrow/plus movements on interaction
   All initial hidden/clipped states are double-gated: html.fx (JS ran)
   AND prefers-reduced-motion: no-preference — content can never be
   stranded invisible. */

@media (prefers-reduced-motion: no-preference) {
  /* hero sequence: eyebrow → three masked lines → rail → CTA; done by ~1.2s */
  html.fx .page .fx-eyebrow { opacity: 0; animation: fx-fade 0.5s ease-out forwards; }
  html.fx .page h1 .hl { opacity: 0; transform: translateY(32px); clip-path: inset(0 0 100% 0); animation: hl-in 0.8s cubic-bezier(0.19,1,0.22,1) forwards; }
  html.fx .page h1 .hl:nth-child(1) { animation-delay: 0.12s; }
  html.fx .page h1 .hl:nth-child(2) { animation-delay: 0.21s; }
  html.fx .page h1 .hl:nth-child(3) { animation-delay: 0.30s; }
  html.fx .page .fx-rail { opacity: 0; animation: fx-fade 0.5s ease-out 0.65s forwards; }
  html.fx .page .fx-cta  { opacity: 0; animation: fx-fade 0.5s ease-out 0.75s forwards; }

  /* photography: settle on first entry, then stay still */
  html.fx img.fx-scale { transform: scale(1.04); transition: transform 1.4s cubic-bezier(0.19,1,0.22,1); will-change: transform; }
  html.fx img.fx-scale.in { transform: scale(1); }
  html.fx img.fx-clip-up { clip-path: inset(100% 0 0 0); transition: clip-path 0.7s cubic-bezier(0.19,1,0.22,1); }
  html.fx img.fx-clip-up.in { clip-path: inset(0 0 0 0); }
  html.fx img.fx-clip-left { clip-path: inset(0 100% 0 0); transition: clip-path 0.8s cubic-bezier(0.19,1,0.22,1); }
  html.fx img.fx-clip-left.in { clip-path: inset(0 0 0 0); }

  /* cards: a 10px rise on entry, once */
  html.fx .page-main a.post, html.fx .page-main .post { transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
  html.fx .page-main .fx-pending { opacity: 0; transform: translateY(10px); }

  /* footer: the wordmark rises a few pixels as the page ends */
  html.fx .site-footer .brandband div { transform: translateY(34px); transition: transform 0.9s cubic-bezier(0.19,1,0.22,1); }
  html.fx .site-footer .brandband.in div { transform: translateY(0); }
}
@keyframes hl-in { to { opacity: 1; transform: none; clip-path: inset(0 0 -0.25em 0); } }
@keyframes fx-fade { to { opacity: 1; } }

/* interface details — cheap, always on */
details.exp .plus { transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); display: inline-block; }
details.exp[open] .plus { transform: rotate(45deg); }
details.exp summary { transition: border-color 0.2s ease; }

/* header compacts slightly after the fold */
.site-header { transition: padding 0.25s ease; }
.site-header.scrolled { padding-top: 15px; padding-bottom: 15px; }

/* ---------- editorial reel (Mogadishu band): slow crossfade, no controls ----------
   Base state shows only the first scene, so no-JS and reduced-motion get a
   still photograph. JS cycles scenes by toggling .reel-on. */
.reel .reel-img:not(:first-child) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.fx .reel .reel-img { transition: opacity 1.1s ease-in-out, transform 4s linear; }
  html.fx .reel .reel-img.reel-on { opacity: 1; transform: scale(1.015); }
  html.fx .reel .reel-img:not(.reel-on) { transform: scale(1); }
}

/* ---------- article rail: sticky TOC with active-section highlight ---------- */
@media (min-width: 981px) {
  .page-main .art-rail { position: sticky; top: calc(var(--hh-stuck) + 28px); align-self: start; }
}
.page-main .tocl { border-left: 2px solid transparent; padding-left: 10px !important; margin-left: -12px; transition: color 0.15s ease, border-color 0.15s ease; }
.page-main .tocl:hover { color: #101010; }
.page-main .tocl.on { color: #101010; font-weight: 600; border-left-color: #A11A1C; }

/* ================= SUBSCRIBE POPUP =================
   Two layouts off one language: .sub-a centre modal (blog index),
   .sub-b corner slide-in (articles). Hidden by default in CSS and
   revealed only by site.js, so a JS failure shows nothing rather
   than a stuck overlay. */
.sub-veil { position: fixed; inset: 0; background: rgba(16,16,16,0.58); z-index: 4000; display: none; }
.sub-veil.sub-on { display: block; }
.sub-pop { display: none; position: fixed; z-index: 4010; background: #F6F3EC;
           border: 1px solid #101010; box-shadow: 0 26px 64px rgba(0,0,0,0.32); }
.sub-pop .sub-pic { background: #DDD9CE; overflow: hidden; }
.sub-pop .sub-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sub-pop .sub-body { padding: 34px 36px; position: relative; }
.sub-chip { display: inline-block; background: #A11A1C; color: #F6F3EC; font-family: 'Archivo', sans-serif;
            font-weight: 700; letter-spacing: 0.13em; font-size: 10px; padding: 5px 10px; text-transform: uppercase; }
.sub-pop h2 { font-family: 'Archivo Black', sans-serif; letter-spacing: -0.015em; margin: 15px 0 13px;
              color: #101010; font-size: 28px; line-height: 1.08; }
.sub-pop p { margin: 0; color: #26251F; font-size: 14.5px; line-height: 1.6; }
.sub-form { display: flex; margin-top: 20px; }
.sub-form input { flex: 1; min-width: 0; background: #FFFFFF; color: #101010; padding: 13px 15px; font-size: 13px;
                  border: 1px solid #C9C5BA; border-right: none; font-family: inherit; outline-offset: -2px; }
.sub-form button { background: #101010; color: #F1EFE9; border: 1.5px solid #101010; padding: 13px 24px;
                   font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; }
.sub-form button:hover { background: #A11A1C; border-color: #A11A1C; }
.sub-fine { margin-top: 12px; font-size: 11.5px; color: #6E6A60; line-height: 1.5; }
.sub-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: none;
         cursor: pointer; color: #6E6A60; font-size: 20px; line-height: 1; font-family: inherit; z-index: 2; }
.sub-x:hover { color: #101010; }
.sub-msg { margin-top: 14px; font-size: 13px; line-height: 1.5; display: none; }
.sub-msg.sub-show { display: block; }
.sub-msg.sub-ok { color: #101010; font-weight: 600; }
.sub-msg.sub-err { color: #A11A1C; }
.sub-pop input[aria-invalid="true"] { border-color: #A11A1C; }

/* A — centre modal, blog index */
.sub-pop.sub-a { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(670px, calc(100vw - 40px)); }
.sub-pop.sub-a.sub-on { display: grid; grid-template-columns: 250px 1fr; }
.sub-pop.sub-a .sub-body { display: flex; flex-direction: column; justify-content: center; }
.sub-pop.sub-a .sub-chip { align-self: flex-start; }

/* B — corner slide-in, article pages */
.sub-pop.sub-b { bottom: 26px; left: 26px; width: min(370px, calc(100vw - 40px)); }
.sub-pop.sub-b.sub-on { display: block; }
.sub-pop.sub-b .sub-pic { height: 132px; }
.sub-pop.sub-b .sub-pic img { object-position: center 42%; }
.sub-pop.sub-b .sub-body { padding: 22px 24px 24px; }
.sub-pop.sub-b h2 { font-size: 19.5px; line-height: 1.14; margin: 12px 0 9px; }
.sub-pop.sub-b p { font-size: 13.5px; line-height: 1.55; }
.sub-pop.sub-b .sub-form { flex-direction: column; margin-top: 16px; }
.sub-pop.sub-b .sub-form input { border-right: 1px solid #C9C5BA; margin-bottom: 8px; }
.sub-pop.sub-b .sub-form button { padding: 12px; }

/* Entrance motion, double-gated like the rest of the site */
html.fx .sub-pop.sub-a.sub-on { animation: sub-rise 0.34s cubic-bezier(0.22,0.61,0.36,1) both; }
html.fx .sub-pop.sub-b.sub-on { animation: sub-slide 0.34s cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes sub-rise  { from { opacity: 0; transform: translate(-50%,-46%); } to { opacity: 1; transform: translate(-50%,-50%); } }
@keyframes sub-slide { from { opacity: 0; transform: translateY(14px); }     to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  html.fx .sub-pop.sub-a.sub-on, html.fx .sub-pop.sub-b.sub-on { animation: none; }
}

@media (max-width: 720px) {
  .sub-pop.sub-a.sub-on { grid-template-columns: 1fr; }
  .sub-pop.sub-a .sub-pic { height: 150px; }
  .sub-pop.sub-a .sub-body { padding: 26px 24px; }
  .sub-pop.sub-a h2 { font-size: 24px; }
  .sub-pop.sub-b { left: 12px; right: 12px; bottom: 12px; width: auto; }
}