/* ══════════════════════════════════════
   VARIABLES — Off-White · Charcoal · Gold · Burgundy
══════════════════════════════════════ */
:root {
  /* Backgrounds — warm off-white */
  --bg-base:   #faf9f7;
  --bg-alt:    #f3f1ee;
  --bg-card:   #ffffff;
  --bg-card-h: #fdfcfb;
  --bg-dark:   #1c1a18;
  --bg-dark2:  #141210;

  /* Text */
  --t-900: #141210;
  --t-800: #1e1c1a;
  --t-600: #3d3b38;
  --t-400: #6b6864;
  --t-300: #9b9894;
  --t-200: #c8c5c0;
  --t-inv: #f5f3f0;

  /* Gold */
  --g-600: #9a6500;
  --g-500: #b87a00;
  --g-400: #d4900a;
  --g-300: #e8a81a;
  --g-200: #f5c040;
  --g-100: #fde9a2;

  /* Burgundy */
  --r-700: #5a1020;
  --r-600: #751528;
  --r-500: #1a4b8b;
  --r-400: #1344a7;
  --r-300: #c22845;
  --r-200: #d94060;
  --r-glow: rgba(139,26,48,.08);
  --r-light: rgba(139,26,48,.06);

  /* Borders */
  --b-light: rgba(20,18,16,.07);
  --b-mid:   rgba(20,18,16,.12);
  --b-dark:  rgba(20,18,16,.2);
  --b-gold:  rgba(184,122,0,.25);
  --b-red:   rgba(139,26,48,.2);

  /* Shadows */
  --sh-sm: 0 1px 4px rgba(20,18,16,.06), 0 2px 12px rgba(20,18,16,.04);
  --sh-md: 0 2px 8px rgba(20,18,16,.07), 0 8px 28px rgba(20,18,16,.06);
  --sh-lg: 0 4px 16px rgba(20,18,16,.08), 0 16px 48px rgba(20,18,16,.08);

  /* Spacing */
  --s1: clamp(.25rem, .4vw, .375rem);
  --s2: clamp(.5rem, .8vw, .75rem);
  --s3: clamp(.75rem, 1.2vw, 1rem);
  --s4: clamp(1rem, 1.8vw, 1.5rem);
  --s5: clamp(1.5rem, 2.5vw, 2rem);
  --s6: clamp(2rem, 3.5vw, 3rem);
  --s7: clamp(2.5rem, 5vw, 4.5rem);
  --s8: clamp(3.5rem, 7vw, 6.5rem);
  --s9: clamp(5rem, 9vw, 9rem);

  /* Font sizes */
  --f10: clamp(.625rem, 1vw, .75rem);
  --f11: clamp(.7rem, 1.1vw, .8125rem);
  --f12: clamp(.75rem, 1.2vw, .875rem);
  --f14: clamp(.8125rem, 1.4vw, .9375rem);
  --f16: clamp(.9rem, 1.6vw, 1rem);
  --f18: clamp(1rem, 1.8vw, 1.125rem);
  --f20: clamp(1.1rem, 2vw, 1.25rem);
  --f24: clamp(1.2rem, 2.4vw, 1.5rem);
  --f28: clamp(1.4rem, 2.8vw, 1.75rem);
  --f36: clamp(1.7rem, 3.6vw, 2.25rem);
  --f48: clamp(2rem, 4.8vw, 3rem);
  --f60: clamp(2.4rem, 6vw, 3.75rem);
  --f72: clamp(2.8rem, 7.2vw, 4.5rem);

  --rad-s: 4px;
  --rad-m: 8px;
  --rad-l: 14px;
  --tr: .3s cubic-bezier(.4, 0, .2, 1);
}

/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  background: var(--bg-base);
  color: var(--t-600);
  overflow-x: hidden;
  line-height: 1.65;
  cursor: none;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--r-400), var(--g-400));
  border-radius: 4px;
}

/* ══════════════════════════════════════
   CURSOR
══════════════════════════════════════ */
#cd {
  position: fixed;
  top: 0; left: 0;
  z-index: 99999;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--g-400);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s, background .25s;
}

#cr {
  position: fixed;
  top: 0; left: 0;
  z-index: 99998;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(168,32,56,.4);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .28s, height .28s, border-color .28s;
}

body.hov #cd { width: 10px; height: 10px; background: var(--r-400); }
body.hov #cr { width: 40px; height: 40px; border-color: rgba(168,32,56,.6); }

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s6);
  background: var(--bg-dark);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: var(--tr);

}

nav.sc {
  background: var(--bg-dark2);
  box-shadow: 0 2px 24px rgba(0,0,0,.35);
  border-bottom-color: rgba(212,144,10,.2);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  flex-shrink: 0;
}

/*.lm {
  width: clamp(2rem, 3.5vw, 2.6rem);
  height: clamp(2rem, 3.5vw, 2.6rem);
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(212,144,10,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
} */
 .lm {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.lm img {
  height: 50px;   /* adjust based on navbar height */
  width: auto;
  display: block;
}

.ln-name {
  font-family: 'Cinzel', serif;
  font-size: clamp(.8rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: .06em;
  color: #f0ece6;
  display: block;
  line-height: 1.2;
}

.ln-tag {
  font-size: var(--f10);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-300);
  display: block;
}

.nm {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

.nm > li { position: relative; }

.ni {
  font-size: var(--f12);
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(240,236,230,.65);
  text-decoration: none;
  padding: var(--s2) var(--s3);
  border-radius: var(--rad-s);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color var(--tr), background var(--tr);
  white-space: nowrap;
}

.ni:hover, .ni.act {
  color: #f0ece6;
  background: rgba(255,255,255,.06);
}

.ni svg {
  width: 11px; height: 11px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s;
}

.nm > li:hover .ni svg { transform: rotate(180deg); }

.nb {
  font-family: 'Jost', sans-serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-900);
  background: linear-gradient(135deg, var(--g-200), var(--g-400));
  border: none;
  border-radius: var(--rad-s);
  padding: var(--s2) var(--s4);
  text-decoration: none;
  cursor: none;
  transition: var(--tr);
  box-shadow: 0 2px 12px rgba(212,144,10,.35);
  white-space: nowrap;
}

.nb:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(212,144,10,.5);
}

/* MEGA DROPDOWN */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: clamp(500px, 52vw, 760px);
  background: #ffffff;
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  transition-delay: 250ms;
  box-shadow: 0 20px 60px rgba(20,18,16,.14), 0 4px 16px rgba(20,18,16,.08);
  z-index: 1000;
}

.mega::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: #ffffff;
  border-left: 1px solid var(--b-light);
  border-top: 1px solid var(--b-light);
}
/* transparent bridge fills the gap so cursor doesn't lose hover while travelling down */
.mega::after {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.nm > li:hover .mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0ms;
}

.mg {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr;
  gap: var(--s5);
}

.mh {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-500);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--b-gold);
}

.ml {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ml a {
  display: block;
  font-size: var(--f12);
  color: var(--t-400);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 4px;
  transition: var(--tr);
  white-space: nowrap;
}

.ml a:hover {
  color: var(--r-500);
  background: var(--r-light);
  padding-left: 14px;
}

.mg-g + .mg-g { margin-top: var(--s4); }

/* HAMBURGER */
.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: none;
  padding: 4px;
  z-index: 1001;
}

.ham span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: rgba(240,236,230,.75);
  border-radius: 2px;
  transition: var(--tr);
}

.ham.op span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ham.op span:nth-child(2) { opacity: 0; }
.ham.op span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* MOBILE NAV */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* REMOVED justify-content:center — items now start from top so scroll works */
  gap: var(--s3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s9) var(--s5) var(--s8);
}

.mnav.op { opacity: 1; pointer-events: auto; }

.mnav > a {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 500;
  color: rgba(240,236,230,.85);
  text-decoration: none;
  transition: color .25s;
}

.mnav > a:hover { color: var(--g-200); }

.mdet { width: 100%; max-width: 360px; }

.mdet summary {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 500;
  color: rgba(240,236,230,.85);
  text-align: center;
  list-style: none;
  cursor: pointer;
  padding: var(--s2) 0;
  transition: color .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* chevron on summary 
.mdet summary::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(240,236,230,.6);
  border-bottom: 2px solid rgba(240,236,230,.6);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform .3s, border-color .3s;
  flex-shrink: 0;
} */
.mdet[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
  border-color: var(--g-300);
}

/* ── Services nav — split link + arrow ── */
.svc-wrap {
  display: flex;
  align-items: center;
  gap: 0.1px;
  padding: 0;
}

.svc-link {
  font-size: var(--f12);
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(240,236,230,.65);
  text-decoration: none;
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  border-radius: var(--rad-s) 0 0 var(--rad-s);
  transition: color var(--tr), background var(--tr);
  white-space: nowrap;
}

.svc-link:hover { color: #f0ece6; background: rgba(255,255,255,.06); }

.svc-arrow {
  background: none;
  border: none;
  cursor: none;
  padding: var(--s2) var(--s2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 var(--rad-s) var(--rad-s) 0;
  transition: color var(--tr), background var(--tr);
}

.svc-arrow:hover { background: rgba(255,255,255,.06); }

.svc-arrow svg {
  width: 11px;
  height: 11px;
  stroke: rgba(240,236,230,.65);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s, stroke .3s;
}

.nm > li:hover .svc-arrow svg { transform: rotate(180deg); stroke: #f0ece6; }

.mdet[open] summary, .mdet summary:hover { color: var(--g-200); }

.mc {
  font-size: var(--f10);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-300);
  text-align: center;
  margin: var(--s3) 0 var(--s2);
}

.mdet a {
  display: block;
  font-size: var(--f14);
  color: rgba(200,197,192,.8);
  text-decoration: none;
  text-align: center;
  padding: 5px 0;
  transition: color .25s;
}

.mdet a:hover { color: #f0ece6; }


/* ══════════════════════════════════════
   DISCLAIMER POPUP
══════════════════════════════════════ */
#disclaimer-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(8, 6, 18, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: opacity .4s ease;
}

#disclaimer-overlay.disc-hide {
  opacity: 0;
  pointer-events: none;
}

#disclaimer-modal {
  background: #0f0c1e;
  border: 1px solid rgba(212, 144, 10, 0.25);
  border-radius: 1rem;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(212, 144, 10, 0.12), 0 24px 60px rgba(0,0,0,.7);
  overflow: hidden;
  animation: discSlideIn .45s cubic-bezier(.22,1,.36,1) both;
}

@keyframes discSlideIn {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.disc-header {
  padding: 2rem 2rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.disc-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212,144,10,.15), rgba(168,32,56,.12));
  border: 1px solid rgba(212,144,10,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.disc-icon i { font-size: 1.4rem; color: #d4900a; }

.disc-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: #f5f0e8;
  margin: 0;
  letter-spacing: .02em;
}

.disc-body {
  padding: 1.25rem 2rem 1rem;
  overflow-y: auto;
  flex: 1;
}

.disc-body::-webkit-scrollbar { width: 4px; }
.disc-body::-webkit-scrollbar-track { background: transparent; }
.disc-body::-webkit-scrollbar-thumb { background: rgba(212,144,10,.3); border-radius: 2px; }

.disc-lead {
  font-size: .95rem;
  font-weight: 500;
  color: #d4900a;
  margin: 0 0 1rem;
  font-family: 'Jost', sans-serif;
}

.disc-scroll p {
  font-family: 'Jost', sans-serif;
  font-size: .875rem;
  line-height: 1.75;
  color: rgba(245,240,232,.65);
  margin: 0 0 .85rem;
  text-align: justify;
}

.disc-scroll p:last-child { margin-bottom: 0; }
.disc-scroll strong { color: rgba(245,240,232,.9); font-weight: 600; }

.disc-footer {
  padding: 1.25rem 2rem 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  text-align: center;
}

.disc-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(135deg, #d4900a, #a82038);
  color: #fff;
  border: none;
  padding: .85rem 2.2rem;
  border-radius: 3rem;
  font-family: 'Jost', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  box-shadow: 0 4px 20px rgba(212,144,10,.3);
  width: 100%;
  justify-content: center;
}

.disc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,144,10,.4);
  opacity: .92;
}

.disc-btn:active { transform: translateY(0); }
.disc-btn i { font-size: .9rem; }

.disc-note {
  margin: .85rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  color: rgba(245,240,232,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.disc-note i { font-size: .7rem; color: rgba(212,144,10,.5); }

@media (max-width: 480px) {
  #disclaimer-modal { border-radius: .75rem; }
  .disc-header { padding: 1.5rem 1.25rem 1rem; }
  .disc-body { padding: 1rem 1.25rem .75rem; }
  .disc-footer { padding: 1rem 1.25rem 1.5rem; }
  .disc-header h2 { font-size: 1.3rem; }
  .disc-scroll p { font-size: .83rem; }
}

/* ══════════════════════════════════════
   SECTION COMMONS
══════════════════════════════════════ */
section {
  position: relative;
  z-index: 2;
  padding: var(--s8) var(--s6);
}

.w {
  max-width: min(1140px, 96vw);
  margin: 0 auto;
}
.wrap {
  max-width: min(1140px, 96vw);
  margin: 0 auto;
}

.sl {
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--r-400);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s3);
  justify-content: center;
}

.sl::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--r-400);
}

.st {
  font-family: 'Playfair Display', serif;
  font-size: var(--f48);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: var(--s3);
  text-align: center;
}

.st em {
  font-style: italic;
  color: var(--g-500);
}

.sb {
  font-size: var(--f16);
  color: var(--t-400);
  line-height: 1.8;
  max-width: min(680px, 90vw);
  text-align: center;
  margin: 1rem auto;
}

.rule {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--g-400), transparent);
  /*margin: var(--s3) 0;*/
  margin: auto;
}

/* centered header variant */
.sc-h { text-align: center; }
.sc-h .sl { justify-content: center; }
.sc-h .sl::before { display: none; }
.sc-h .sl::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--r-400);
}
.sc-h .rule { margin: var(--s3) auto; }
.sc-h .sb { margin: 0 auto; }

/* section divider */
.dl {
  position: relative;
  z-index: 2;
  height: 1px;
  background: var(--b-light);
}

/*__________________________________Index Page________________________________________________*/

/* ══════════════════════════════════════════════════════════
   INDEX PAGE — ih-* classes only
   Paste this block at the END of style.css
═══════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────── */
.ih-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s6);
  padding-top: clamp(5rem, 12vw, 8rem);
  padding-bottom: var(--s7);
  padding-left: var(--s6);
  padding-right: var(--s6);
  overflow: hidden;
  background:
    radial-gradient(ellipse 65% 50% at 50% -5%, rgba(90,16,28,.5) 0%, transparent 62%),
    radial-gradient(ellipse 40% 30% at 90% 80%, rgba(180,110,0,.15) 0%, transparent 55%),
    var(--bg-dark);
  position: relative;
}

/* subtle grid overlay */
.ih-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212,144,10,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,144,10,.03) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.ih-glow-r {
  position: absolute;
  top: 15%;
  right: 8%;
  width: clamp(300px, 40vw, 560px);
  height: clamp(300px, 40vw, 560px);
  background: radial-gradient(circle, rgba(139,26,48,.07) 0%, transparent 70%);
  pointer-events: none;
}

.ih-glow-g {
  position: absolute;
  bottom: 10%;
  left: 4%;
  width: clamp(200px, 28vw, 380px);
  height: clamp(200px, 28vw, 380px);
  background: radial-gradient(circle, rgba(184,122,0,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* two-column hero layout */
.ih-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: center;
  position: relative;
  z-index: 2;
}

/* LEFT */
.ih-left {
  display: flex;
  flex-direction: column;
  align-items: center;    /* Centers children horizontally */
  text-align: center;     /* Centers text inside the children */
  opacity: 0;
  animation: rise .8s ease .1s forwards;
}

.ih-h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: #f0ece6;
  margin-bottom: var(--s4);
  text-align:center;
}

.ih-h1 span {
  display: block;
  background: linear-gradient(110deg, var(--g-100) 0%, var(--g-300) 45%, var(--g-200) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ih-sub {
  font-size: var(--f18);
  font-weight: 300;
  color: rgba(200,196,190,.8);
  line-height: 1.78;
  max-width: 520px;
  margin-bottom: var(--s6);
  margin-left: auto;
  margin-right: auto;
}

/* RIGHT */
.ih-right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* IP card */
.ih-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(212,144,10,.18);
  border-radius: var(--rad-l);
  padding: var(--s5);
  width: 100%;
  max-width: 420px;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.ih-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,144,10,.5), transparent);
}

.ih-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s5);
}

.ih-card-logo {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.ih-card-name {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  color: #f0ece6;
  letter-spacing: .04em;
  line-height: 1.2;
}

.ih-card-tag {
  display: block;
  font-size: var(--f10);
  color: var(--g-300);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ih-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.22);
  border-radius: 100px;
  padding: 4px 10px;
  font-size: var(--f10);
  color: #4ade80;
  font-weight: 500;
  letter-spacing: .04em;
}

.ih-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: pd 2s ease-in-out infinite;
}

/* 2×2 service mini grid inside card */
.ih-svc-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  margin-bottom: var(--s4);
}

.ih-sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding: var(--s3) var(--s2);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(212,144,10,.1);
  border-radius: var(--rad-m);
  text-decoration: none;
  transition: var(--tr);
  cursor: none;
}

.ih-sm:hover {
  background: rgba(212,144,10,.08);
  border-color: rgba(212,144,10,.28);
  transform: translateY(-2px);
}

.ih-sm-ico {
  width: 2.2rem; height: 2.2rem;
  border-radius: var(--rad-s);
  background: rgba(212,144,10,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g-300);
  font-size: var(--f16);
}

.ih-sm span {
  font-size: var(--f11);
  font-weight: 600;
  color: rgba(240,236,230,.8);
  letter-spacing: .03em;
}

/* card bottom CTA */
.ih-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  background: rgba(212,144,10,.07);
  border: 1px solid rgba(212,144,10,.15);
  border-radius: var(--rad-m);
  text-decoration: none;
  transition: var(--tr);
  cursor: none;
}
.ih-wv-card .ih-wv-c1{
  padding:0;
}

.ih-card-cta:hover {
  background: rgba(212,144,10,.13);
  border-color: rgba(212,144,10,.3);
}

.ih-card-cta span {
  font-size: var(--f12);
  font-weight: 500;
  color: var(--g-200);
}

.ih-card-cta i {
  color: var(--g-400);
  font-size: var(--f12);
  transition: transform .3s;
}

.ih-card-cta:hover i { transform: translateX(4px); }

/* floating badges */
.ih-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: rgba(20,18,16,.92);
  border: 1px solid rgba(212,144,10,.2);
  border-radius: var(--rad-m);
  padding: var(--s2) var(--s3);
  backdrop-filter: blur(16px);
  box-shadow: var(--sh-md);
  pointer-events: none;
}

.ih-badge strong {
  display: block;
  font-size: var(--f12);
  font-weight: 600;
  color: #f0ece6;
}

.ih-badge span {
  display: block;
  font-size: var(--f10);
  color: rgba(200,196,190,.5);
}

.ih-badge-ico {
  width: 2rem; height: 2rem;
  border-radius: var(--rad-s);
  background: linear-gradient(135deg, var(--g-300), var(--g-200));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-900);
  font-size: var(--f12);
  flex-shrink: 0;
}

.ih-badge-1 {
  top: -2.4rem;
  right: -1.5rem;
  animation: ih-float 4s ease-in-out infinite;
}

.ih-badge-2 {
  bottom: -3rem;
  left: -1.5rem;
  animation: ih-float 4s ease-in-out 2s infinite;
}

@keyframes ih-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ── MARQUEE ──────────────────────────────────────────── */
.ih-marquee-wrap {
  overflow: hidden;
  background: rgba(212,144,10,.05);
  border-top: 1px solid rgba(212,144,10,.1);
  border-bottom: 1px solid rgba(212,144,10,.1);
  padding: .8rem 0;
  position: relative;
  z-index: 2;
}

.ih-marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: ih-marquee 32s linear infinite;
}

.ih-marquee-wrap:hover .ih-marquee-track {
  animation-play-state: paused;
}

.ih-mi {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 2rem;
  font-size: var(--f12);
  font-weight: 500;
  color: var(--t-400);
  white-space: nowrap;
}

.ih-mi i { color: var(--g-400); font-size: var(--f11); }

.ih-sep {
  display: inline-flex;
  align-items: center;
  padding: 0 .75rem;
  font-size: .5rem;
  color: var(--g-400);
  opacity: .5;
}

@keyframes ih-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── SERVICES ─────────────────────────────────────────── */
.ih-svc-sec { background: var(--bg-alt); }

/* tab filter */
.ih-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  justify-content: center;
  margin: var(--s5) 0 var(--s6);
  background: var(--bg-card);
  padding: 5px;
  border-radius: var(--rad-m);
  border: 1px solid var(--b-light);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.ih-tab {
  padding: 7px 20px;
  border: none;
  background: transparent;
  border-radius: var(--rad-s);
  font-family: 'Jost', sans-serif;
  font-size: var(--f12);
  font-weight: 500;
  color: var(--t-400);
  cursor: none;
  transition: var(--tr);
  white-space: nowrap;
}

.ih-tab:hover { color: var(--t-900); background: var(--bg-alt); }

.ih-tab.ih-tab-act {
  background: var(--bg-dark);
  color: var(--t-inv);
}

/* services grid */
.ih-sg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}

/* service card */
.ih-sc {
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  text-decoration: none;
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  position: relative;
  overflow: hidden;
  cursor: none;
}

.ih-sc::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--r-400), var(--g-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

.ih-sc:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: var(--b-mid);
}

.ih-sc:hover::after { transform: scaleX(1); }

/* featured (dark) variant */
.ih-sc-feat {
  background: var(--bg-card);
  border-color: rgba(212,144,10,.2);
}

.ih-sc-feat h3 { color: #f0ece6; }
.ih-sc-feat p  { color: rgba(200,196,190,.55); }

.ih-sc-feat .ih-sc-tag {
  background: rgba(255,255,255,.07);
  color: rgba(200,196,190,.55);
}

.ih-sc-feat .ih-sc-link { color: var(--g-200); }

.ih-sc-feat .ih-sc-ico {
  background: rgba(212,144,10,.15);
  color: var(--g-300);
}

.ih-sc-ico {
  width: 3rem; height: 3rem;
  border-radius: var(--rad-m);
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f20);
  color: var(--g-500);
  margin-bottom: var(--s4);
  transition: var(--tr);
}

.ih-sc:not(.ih-sc-feat):hover .ih-sc-ico {
  background: var(--bg-dark);
  color: var(--g-300);
}

.ih-sc h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
  line-height: 1.3;
}

.ih-sc p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.7;
  margin-bottom: var(--s4);
  flex: 1;
}

.ih-sc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: var(--s4);
}

.ih-sc-tags span {
  font-size: var(--f10);
  padding: 3px 10px;
  background: var(--bg-alt);
  color: #212020;
  border-radius: 100px;
  letter-spacing: .04em;
}

.ih-sc-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--f12);
  font-weight: 600;
  color: var(--t-800);
  transition: gap .3s;
}

.ih-sc:hover .ih-sc-link { gap: 10px; }

.ih-sc-link i { font-size: var(--f11); }

/* hidden during tab filter */
.ih-sc-hidden {
  display: none !important;
}

/* ── WHY US ───────────────────────────────────────────── */
.ih-why { background: var(--bg-base); }

.ih-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  align-items: center;
}

/* visual stack */
.ih-why-vis {
  position: relative;
  height: clamp(320px, 40vw, 480px);
}

.ih-wv-main {
  position: absolute;
  top: 0; left: 0;
  width: 75%;
  height: 68%;
  background: var(--bg-dark);
  border-radius: var(--rad-l);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

.ih-shield-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  font-size: clamp(5rem, 10vw, 9rem);
  color: rgba(212,144,10,.05);
  pointer-events: none;
}

.ih-wv-num {
  font-family: 'Playfair Display', serif;
  font-size: var(--f60);
  font-weight: 700;
  color: var(--g-300);
  line-height: 1;
  margin-bottom: var(--s1);
  position: relative;
  z-index: 1;
}

.ih-wv-label {
  font-size: var(--f12);
  color: rgba(200,196,190,.6);
  line-height: 1.55;
  max-width: 200px;
  position: relative;
  z-index: 1;
  padding-top: 5px;
}

.ih-wv-card {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4);
  box-shadow: var(--sh-md);
}

.ih-wv-c1 {
  right: 0;
  top: 2%;
  width: 58%;
}

.ih-wv-c2 {
  left: 8%;
  bottom: 0;
  width: 62%;
}

/* reuse .ip / .ipt / .ipd for the feature list in why-right */
.ih-why-right .ip { margin-top: var(--s5); }

/* ── TESTIMONIALS inside .ben ─────────────────────────── */
.ih-stars {
  display: flex;
  gap: 3px;
  margin-bottom: var(--s3);
}

.ih-stars i { color: var(--g-300); font-size: var(--f12); }

.ih-tq {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: var(--s4);
  position: relative;
  flex: 1;
}

.ih-tq::before {
  content: '"';
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  color: var(--g-400);
  opacity: .18;
  position: absolute;
  top: -1rem; left: -.4rem;
  line-height: 1;
}

.ih-author {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: auto;
}

.ih-av {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--bg-dark);
  border: 1px solid var(--b-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  color: var(--g-300);
  flex-shrink: 0;
}

.ih-author strong {
  display: block;
  font-size: var(--f14);
  font-weight: 600;
  color: var(--t-900);
}

.ih-author span {
  font-size: var(--f11);
  color: var(--t-300);
}

/* make .bc inside .ben flex so ih-tq fills height */
.ben .bc { display: flex; flex-direction: column; }

/* ── CTA contact row ──────────────────────────────────── */
.ih-cta-contact {
  display: flex;
  justify-content: center;
  gap: var(--s6);
  flex-wrap: wrap;
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.08);
}

.ih-cc {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.ih-cc > i {
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--rad-m);
  background: rgba(212,144,10,.1);
  border: 1px solid rgba(212,144,10,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g-300);
  font-size: var(--f16);
  flex-shrink: 0;
}

.ih-cc span {
  display: block;
  font-size: var(--f10);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(200,196,190,.4);
  margin-bottom: 2px;
}

.ih-cc strong {
  display: block;
  font-size: var(--f14);
  color: rgba(240,236,230,.85);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   PROFESSIONAL FOOTER — pf-* classes
   Paste at the END of style.css.
   Overrides the old minimal footer completely.
   Logo image: logo.png (black background logo — shows well
   on the dark footer background).
═══════════════════════════════════════════════════════════ */

/* Reset old footer rule so it doesn't conflict */
footer.pf {
  background: #0d0d0d;
  padding: 0;
  position: relative;
  z-index: 2;
}

/* Shared max-width wrapper */
.pfw {
  max-width: min(1200px, 94vw);
  margin: 0 auto;
}

/* ── TOP BAND ─────────────────────────────────────────── */
.pf-top {
  padding: var(--s8) var(--s6) var(--s7);
}

.pf-top .pfw {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 1.1fr 1.1fr 1.1fr;
  gap: var(--s6);
  align-items: start;
}

/* ── BRAND COLUMN ─────────────────────────────────────── */
.pf-brand {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.pf-logo {
  display: inline-block;
  text-decoration: none;
  line-height: 0; /* removes gap below img */
}

.pf-logo img {
  height: 50px;
  width: auto;
  /* Logo has black background — clip it neatly */
  border-radius: var(--rad-m);
  display: block;
}

.pf-tagline {
  font-size: var(--f13);
  color: rgba(200,196,190,.55);
  line-height: 1.82;
  max-width: 300px;
}

/* Social row */
.pf-socials {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.pf-soc {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f12);
  color: rgba(200,196,190,.55);
  text-decoration: none;
  transition: var(--tr);
  cursor: none;
}

.pf-soc:hover {
  border-color: rgba(212,144,10,.5);
  background: rgba(212,144,10,.1);
  color: var(--g-300);
  transform: translateY(-2px);
}

.pf-soc-wa:hover {
  border-color: rgba(37,211,102,.4);
  background: rgba(37,211,102,.1);
  color: #25d366;
}

/* ── LINK COLUMNS ─────────────────────────────────────── */
.pf-col {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.pf-h {
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g-300);
  padding-bottom: var(--s2);
  border-bottom: 1px solid rgba(212,144,10,.2);
  margin-bottom: var(--s1);
}

.pf-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.pf-list li a {
  font-size: var(--f13);
  color: rgba(200,196,190,.5);
  text-decoration: none;
  transition: color .25s, padding-left .25s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pf-list li a::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(212,144,10,.35);
  flex-shrink: 0;
  transition: background .25s;
}

.pf-list li a:hover {
  color: var(--g-200);
}

.pf-list li a:hover::before {
  background: var(--g-300);
}

/* ── CONTACT COLUMN ───────────────────────────────────── */
.pf-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.pf-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: var(--f13);
  color: rgba(200,196,190,.5);
  line-height: 1.65;
}

.pf-contact li i {
  font-size: var(--f14);
  color: var(--g-400);
  flex-shrink: 0;
  margin-top: 2px;
  width: 14px;
  text-align: center;
}

.pf-contact li a {
  color: rgba(200,196,190,.5);
  text-decoration: none;
  transition: color .25s;
}

.pf-contact li a:hover { color: var(--g-200); }

/* Free consultation CTA */
.pf-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s2);
  padding: var(--s2) var(--s4);
  background: linear-gradient(135deg, var(--g-200), var(--g-400));
  color: #111;
  font-family: 'Jost', sans-serif;
  font-size: var(--f12);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--rad-s);
  box-shadow: 0 4px 14px rgba(212,144,10,.3);
  transition: var(--tr);
  cursor: none;
  width: fit-content;
}

.pf-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(212,144,10,.45);
}

.pf-cta i { font-size: var(--f11); }

/* ── DIVIDER ──────────────────────────────────────────── */
.pf-div {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,144,10,.25) 20%,
    rgba(212,144,10,.25) 80%,
    transparent 100%);
  margin: 0 var(--s6);
}

/* ── BOTTOM BAR ───────────────────────────────────────── */
.pf-bottom {
  padding: var(--s4) var(--s6);
}

.pf-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

.pf-copy {
  font-size: var(--f11);
  color: rgba(200,196,190,.35);
  line-height: 1.5;
}

.pf-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  list-style: none;
  align-items: center;
}

.pf-legal li { display: flex; align-items: center; gap: var(--s3); }

.pf-legal li + li::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(200,196,190,.2);
  flex-shrink: 0;
}

.pf-legal a {
  font-size: var(--f11);
  color: rgba(200,196,190,.35);
  text-decoration: none;
  transition: color .25s;
}

.pf-legal a:hover { color: var(--g-200); }

/* ══════════════════════════════════════════════════════════
   FOOTER RESPONSIVE
   768px  → 2-col grid for link columns, brand full-width top
   480px  → single column, all links stacked one below another
   360px  → tighter padding, smaller type
═══════════════════════════════════════════════════════════ */

/* ── 1024px ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pf-top .pfw {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s5);
  }

  /* Brand spans full row */
  .pf-brand {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--s5);
  }

  .pf-tagline { max-width: 420px; }
}

/* ── 768px ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pf-top { padding: var(--s7) var(--s4) var(--s6); }

  /*
   * 3-column grid: brand spans full top row, the 3 link
   * columns sit in equal cells, contact spans full bottom row.
   * Each column is left-aligned internally — grid distributes
   * space equally so columns appear visually balanced.
   */
  .pf-top .pfw {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s5) var(--s6);
  }

  .pf-brand {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s3);
  }

  .pf-tagline { text-align: center; max-width: 500px; }
  .pf-socials { justify-content: center; }

  /* Contact col spans full bottom row */
  .pf-col:last-child { grid-column: 1 / -1; }

  /*
   * ALIGNMENT — same start point per column:
   * align-items: flex-start means heading + every link in
   * that column share ONE left edge determined by the grid
   * cell — not by the longest link, not by centering each
   * item. The grid cell itself is the centering container.
   */
  .pf-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .pf-h { text-align: left; }
  .pf-list { align-items: flex-start; width: 100%; }
  .pf-list li a { justify-content: flex-start; }

  /* Contact full-row: 2-column grid so items aren't stretched */
  .pf-col:last-child .pf-contact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3) var(--s6);
    width: 100%;
  }

  .pf-contact li { justify-content: flex-start; text-align: left; }

  .pf-div   { margin: 0 var(--s4); }
  .pf-bottom { padding: var(--s4); }

  .pf-bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s2);
  }

  .pf-legal { justify-content: center; }
  .pf-logo img {
    height: 40px;
    width: auto;
  }
}

/* ── 480px — single column, links one below another ────── */
@media (max-width: 480px) {
  .pf-top { padding: var(--s6) var(--s4) var(--s5); }

  .pf-top .pfw {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  /* Contact col no longer needs span */
  .pf-col:last-child { grid-column: auto; }

  /*
   * ALIGNMENT at 480px — same-start in single column:
   * Each .pf-col is full-width (1fr grid cell).
   * align-items: flex-start keeps heading + links left-aligned.
   * .pf-list uses width: fit-content + margin: 0 auto so the
   * left-aligned block is centred inside the full-width cell.
   * Every link starts from the same left edge of that block.
   */
  .pf-col {
    align-items: flex-start;
    width: 100%;
  }

  .pf-h {
    /* heading matches the width of the list block */
    width: fit-content;
    margin: 0 auto var(--s2);
    text-align: left;
  }

  .pf-list {
    width: fit-content;   /* shrink to longest link width */
    margin: 0 auto;       /* centre that block            */
    align-items: anchor-center;
    gap: 0;
  }

  .pf-list li { display: block; }

  .pf-list li a {
    display: flex;
    justify-content: flex-start;  /* bullet + text: same left edge */
    padding: var(--s2) 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: var(--f13);
    white-space: nowrap;
  }

  .pf-list li a::before {
    display: none;
  }

  .pf-list li:last-child a { border-bottom: none; }

  /* Contact col — centered block, items start from same left edge */
.pf-col:last-child .pf-contact {
  display: flex;
  flex-direction: column;
  width: 100%;                  /* full width, no overflow */
  max-width: 180px;             /* cap it so it centres nicely */
  margin: 0 auto;               /* centre the block */
  align-items: flex-start;      /* all items share same left edge */
  gap: var(--s3);
}

.pf-contact li {
  justify-content: flex-start;
  text-align: left;
  font-size: var(--f13);
  white-space: normal;          /* allow address to wrap */
  width: 100%;
}

  .pf-logo-img { height: 60px; }
  .pf-div      { margin: 0 var(--s3); }
  .pf-bottom   { padding: var(--s3) var(--s4); }
  .pf-copy     { font-size: var(--f11); text-align: center; }
  .pf-legal    { justify-content: center; gap: var(--s2); }
  .pf-legal a  { font-size: var(--f11); }
  
}

/* ── 360px ────────────────────────────────────────────── */
@media (max-width: 360px) {
  .pf-top      { padding: var(--s5) var(--s3) var(--s5); }
  .pf-logo-img { height: 52px; }
  .pf-tagline  { font-size: var(--f12); }
  .pf-h        { font-size: 0.6rem; letter-spacing: .12em; }
  .pf-list li a  { font-size: var(--f12); }
  .pf-contact li { font-size: var(--f12); }
  .pf-copy     { font-size: 0.62rem; }
  .pf-legal a  { font-size: 0.62rem; }
  .pf-legal li + li::before { display: none; }
  .pf-legal    { gap: var(--s2); }
}
/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .ih-wrap          { gap: var(--s5); }
  .ih-sg            { grid-template-columns: repeat(2, 1fr); }
  .ih-why-grid      { grid-template-columns: 1fr; gap: var(--s6); }
  .ih-why-vis       { height: clamp(280px, 50vw, 400px); }
}

@media (max-width: 768px) {
  .lm img {
    height: 40px;
  }
  .ih-wrap          { grid-template-columns: 1fr; }
  .ih-right         { display: none; } /* hide card on mobile — hero stays clean */
  .ih-h1            { font-size: var(--f60); }
  .ih-sg            { grid-template-columns: 1fr; }
  .ih-why-vis       { height: auto; position: static; display: flex; flex-direction: column; gap: var(--s3); }
  .ih-wv-main,
  .ih-wv-card       { position: static; width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; text-align: left; }
  /* Target the row inside these specific cards */
    .ih-why-vis .ipt {
        display: flex !important;
        width: fit-content !important; /* Shrinks the box to fit the icon + text */
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding-left: 0 !important; /* Optional: clears extra padding if it looks off-center */
    }
  .ih-wv-main       { padding: var(--s5); min-height: 180px; text-align: center; }
  .ih-badge-1,
  .ih-badge-2       { display: none; }
  .ih-cta-contact   { gap: var(--s4); }
  .ih-tabs          { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .ih-sc-ico { 
    margin: auto;
    margin-bottom: var(--s4);
  }
  .ih-sc p {
    text-align: center;
  }
  .ih-sc-tags {
    justify-content: center;
  }
  .ih-sc-link {
    justify-content: center;
  }
  .ih-wv-label {
    margin: auto;
  }
  .st{
    text-align: center;
  }
  .sl {
    justify-content: center;
  }
  .sb {
    text-align: center;
  }
  
  
  

}

@media (max-width: 480px) {
  .ih-h1            { font-size: var(--f48); }
  .ih-sub           { font-size: var(--f16); }
  .ih-cta-contact   { flex-direction: column; align-items: flex-start; gap: var(--s3); text-align: left; }
  .ih-marquee-wrap  { display: none; }
  .sb {
        text-align: justify;
    }
}

/* ══════════════════════════════════════
   360 px — smallest phones
══════════════════════════════════════ */
@media (max-width: 360px) {
  /* Hero */
  .ih-hero          { padding-left: var(--s4); padding-right: var(--s4); }
  .ih-h1            { font-size: var(--f36); letter-spacing: -.02em; }
  .ih-sub           { font-size: var(--f14); line-height: 1.7; }

  /* hero buttons — full width, stacked */
  .ih-hero .hb      { flex-direction: column; gap: var(--s2); }
  .ih-hero .btn-g,
  .ih-hero .btn-o   { width: 100%; justify-content: center; }

  /* stats bar — 2-column grid instead of flex row */
  .hst              { grid-template-columns: 1fr 1fr !important;
                      display: grid !important; }
  .sv               { border-right: none !important;
                      border-bottom: 1px solid rgba(255,255,255,.07); }
  .sv:nth-child(odd){ border-right: 1px solid rgba(255,255,255,.07) !important; }
  .sv:last-child    { grid-column: 1 / -1; border-bottom: none; }
  .svv              { font-size: var(--f20); }

  /* Services section */
  .ih-svc-sec       { padding-left: var(--s4); padding-right: var(--s4); }
  .ih-tabs          { gap: 4px; padding: 4px; }
  .ih-tab           { padding: 6px 12px; font-size: var(--f10); }
  .ih-sc            { padding: var(--s4); }
  .ih-sc h3         { font-size: var(--f18); }
  .ih-sc p          { font-size: var(--f12); }
  .ih-sc-ico        { width: 2.4rem; height: 2.4rem; font-size: var(--f16); margin-bottom: var(--s3); }

  /* Why us */
  .ih-why           { padding-left: var(--s4); padding-right: var(--s4); }
  .ih-wv-num        { font-size: var(--f48); }
  .ih-wv-label      { font-size: var(--f11); }
  .ih-wv-main       { min-height: 150px; }
  .ih-wv-card       { padding: var(--s3); }

  /* Why right — section heading */
  .ih-why-right .st { font-size: var(--f28); }
  .ih-why-right .sb { font-size: var(--f14); }

  /* Process — reused .proc / .ts */
  .proc             { padding-left: var(--s4); padding-right: var(--s4); }
  .tb               { padding: var(--s3); }
  .tb h3            { font-size: var(--f14); }
  .tb p             { font-size: var(--f12); }
  .tn               { width: 36px !important; height: 36px !important; font-size: var(--f11); }

  /* Testimonials */
  .ben              { padding-left: var(--s4); padding-right: var(--s4); }
  .bc               { padding: var(--s4); }
  .ih-tq            { font-size: var(--f12); }
  .ih-av            { width: 2.2rem; height: 2.2rem; font-size: var(--f11); }
  .ih-author strong { font-size: var(--f12); }
  .ih-author span   { font-size: var(--f10); }

  /* CTA */
  .cta              { padding-left: var(--s4); padding-right: var(--s4); }
  .ctab             { padding: var(--s6) var(--s4); }
  .ctab h2          { font-size: var(--f28); }
  .ctabs            { flex-direction: column; gap: var(--s2); }
  .ctabs .btn-g,
  .ctabs .btn-o     { width: 100%; justify-content: center; }
  .ih-cta-contact   { padding-top: var(--s4); gap: var(--s2); }
  .ih-cc > i        { width: 2rem; height: 2rem; font-size: var(--f14); }
  .ih-cc strong     { font-size: var(--f12); }

  /* Section headings */
  .st               { font-size: var(--f28); }

  /* Footer */
  .fi2              { flex-direction: column; gap: var(--s3); text-align: center; }
  .fls              { justify-content: center; flex-wrap: wrap; gap: var(--s2); }
}

/*______________________________________About Us___________________________________________________*/

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE — ab-* classes only
   Paste this block at the END of style.css
   (after the index-page ih-* block if already added)
═══════════════════════════════════════════════════════════ */

/* ── STORY SECTION ────────────────────────────────────── */
.ab-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  align-items: center;
}

.ab-story-left .sl { margin-bottom: var(--s3); }

/* body paragraphs in story */
.ab-p {
  font-size: var(--f16);
  color: var(--t-400);
  line-height: 1.85;
  margin-bottom: var(--s4);
}

.ab-p:last-child { margin-bottom: 0; }

/* Visual column */
.ab-vis {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(340px, 44vw, 500px);
}

.ab-vis-main {
  position: relative;
  width: clamp(200px, 26vw, 300px);
  height: clamp(200px, 26vw, 300px);
}

/* stat cards float around the spinner — desktop only */
.ab-stat-card {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  padding: var(--s3) var(--s4);
  box-shadow: var(--sh-md);
  text-align: center;
  min-width: 110px;
  animation: ab-float 4s ease-in-out infinite;
}

/* wrapper is invisible on desktop — cards are absolute inside .ab-vis */
.ab-vis-stats {
  position: contents; /* lets children remain in ab-vis positioning context */
}

.ab-sc-1 { top: 2%;  left: -10%; animation-delay: 0s;   }
.ab-sc-2 { top: 35%; right: -8%; animation-delay: 1.3s; }
.ab-sc-3 { bottom: 4%; left: 4%; animation-delay: 2.6s; }

@keyframes ab-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.ab-sc-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: var(--f28);
  font-weight: 700;
  color: var(--g-400);
  line-height: 1.1;
}

.ab-sc-lbl {
  display: block;
  font-size: var(--f10);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-300);
  margin-top: 3px;
}

/* ── MISSION / VISION / VALUES ────────────────────────── */
.ab-mvv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
  margin-bottom: var(--s4);
}

.ab-mv-card {
  border-radius: var(--rad-l);
  padding: var(--s6);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--b-light);
  box-shadow: var(--sh-sm);
}

.ab-mission {
  background: linear-gradient(145deg, var(--bg-dark) 0%, rgba(90,16,28,.85) 100%);
  border-color: rgba(212,144,10,.2);
}

.ab-vision {
  background: var(--bg-card);
}

.ab-mv-ico {
  width: 3rem;
  height: 3rem;
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f20);
  margin-bottom: var(--s3);
}

.ab-mission .ab-mv-ico {
  background: rgba(212,144,10,.15);
  color: var(--g-300);
}

.ab-vision .ab-mv-ico {
  background: rgba(19,68,167,.08);
  color: var(--r-500);
}

.ab-mv-tag {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}

.ab-mission .ab-mv-tag { color: var(--g-300); }
.ab-vision  .ab-mv-tag { color: var(--r-500); }

.ab-mv-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--s3);
}

.ab-mission h3 { color: #f0ece6; }
.ab-vision  h3 { color: var(--t-900); }

.ab-mv-card p {
  font-size: var(--f14);
  line-height: 1.82;
}

.ab-mission p { color: rgba(200,196,190,.7); }
.ab-vision  p { color: var(--t-400); }

/* Values — reuses .bc grid from ben section, adds icon */
.ab-vals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
}

.ab-val { display: flex; flex-direction: column; }

.ab-val-ico {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--rad-m);
  background: var(--bg-alt);
  border: 1px solid var(--b-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f16);
  color: var(--g-500);
  margin-bottom: var(--s3);
  flex-shrink: 0;
  transition: var(--tr);
}

.ab-val:hover .ab-val-ico {
  background: var(--bg-dark);
  color: var(--g-300);
  border-color: rgba(212,144,10,.4);
}

.ab-val h3 {
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}

.ab-val p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.75;
  text-align: justify;
  hyphens: auto;
}

/* ── WHAT SETS US APART ───────────────────────────────── */
.ab-apart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.ab-apart-card {
  padding: var(--s5);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  position: relative;
  overflow: hidden;
}

.ab-apart-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--r-400), var(--g-400));
  opacity: 0;
  transition: opacity .35s;
}

.ab-apart-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--b-mid);
}

.ab-apart-card:hover::after { opacity: 1; }

.ab-apart-card .wi {
  margin: 0 0 var(--s4);
}

.ab-apart-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}

.ab-apart-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.78;
  text-align: justify;
  hyphens: auto;
}

/* ── TEAM ─────────────────────────────────────────────── */
.ab-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.ab-tm {
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: var(--tr);
}

.ab-tm:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--b-gold);
}

.ab-tm-av {
  position: relative;
  background: var(--bg-dark);
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ab-tm-av span {
  font-family: 'Cinzel', serif;
  font-size: var(--f36);
  font-weight: 600;
  color: var(--g-200);
  line-height: 1;
  opacity: .9;
}

.ab-tm-badge {
  position: absolute;
  bottom: -1rem;
  right: 1.2rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g-300), var(--g-200));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f12);
  color: var(--t-900);
  border: 3px solid var(--bg-card);
  box-shadow: var(--sh-sm);
}

.ab-tm-body {
  padding: var(--s5);
  padding-top: calc(var(--s5) + .5rem);
}

.ab-tm-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}

.ab-tm-body .tch { margin-bottom: var(--s3); }

.ab-tm-body p {
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.78;
  margin-bottom: var(--s4);
  text-align: justify;
  hyphens: auto;
}

.ab-tm-expertise {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.ab-tm-expertise span {
  font-size: var(--f10);
  padding: 3px 10px;
  background: var(--bg-alt);
  color: var(--t-300);
  border-radius: 100px;
  letter-spacing: .03em;
}

/* ── INDUSTRIES ───────────────────────────────────────── */
.ab-ind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
}

.ab-ind {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.ab-ind:hover {
  border-color: var(--b-gold);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.ab-ind i {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--rad-s);
  background: var(--bg-alt);
  border: 1px solid var(--b-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f16);
  color: var(--g-500);
  flex-shrink: 0;
  transition: var(--tr);
}

.ab-ind:hover i {
  background: var(--bg-dark);
  color: var(--g-300);
}

.ab-ind span {
  font-size: var(--f13);
  font-weight: 500;
  color: var(--t-600);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE RESPONSIVE
   Rule: ALL content centred from 768px and below — no exceptions.
   Card paragraphs: text-align justify + hyphens auto (professional method).
   Stats bar: always stacks BELOW hero content, never beside it.
═══════════════════════════════════════════════════════════ */

/* ── 1024px ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ab-story-grid  { grid-template-columns: 1fr; gap: var(--s6); }
  .ab-story-right { order: -1; }
  .ab-vis         { height: clamp(280px, 50vw, 380px); }
  .ab-mvv         { grid-template-columns: 1fr; }
  .ab-vals        { grid-template-columns: repeat(2, 1fr); }
  .ab-apart-grid  { grid-template-columns: repeat(2, 1fr); }
  .ab-team-grid   { grid-template-columns: repeat(2, 1fr); }
  .ab-ind-grid    { grid-template-columns: repeat(3, 1fr); }
}

/* ── 768px — MASTER CENTRING BREAKPOINT ──────────────── */
/*
   HERO FIX:
   .hero uses display:flex — at this point the existing
   style.css already switches it but .hc and .hst end up
   side-by-side because the hero flex direction defaults
   to row. We force column here so stats are always below.
   We also fix the .sv overflow by switching to a 3+2 grid.
*/
@media (max-width: 768px) {

  /* ── HERO: stack content above stats, fix overflow ── */
  .hero {
    flex-direction: column;
    justify-content: center;
    gap: var(--s6);
    padding-bottom: var(--s7);
  }

  .hc {
    width: 100%;
  }

  /* Stats bar: 3-column grid — fits 5 items cleanly (3+2) */
  .hst {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 0; /* gap on parent handles spacing */
  }

  .sv {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  /* row 1: items 1-3 get right borders between siblings */
  .sv:nth-child(1),
  .sv:nth-child(2) { border-right: 1px solid rgba(255,255,255,.07) !important; }

  /* row 2: items 4 and 5 — centre them using grid trick */
  .sv:nth-child(4) { grid-column: 1 / 2; border-right: 1px solid rgba(255,255,255,.07) !important; }
  .sv:nth-child(5) { grid-column: 2 / 3; }

  /* last visible item in each row: no bottom border on last row */
  .sv:nth-child(4),
  .sv:nth-child(5) { border-bottom: none; }

  /* ── STORY section ── */
  .ab-story-grid  { grid-template-columns: 1fr; gap: var(--s5); }
  .ab-story-right { order: -1; }

  /* floating stat cards: stack as a row of 3 pills */
  .ab-vis {
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: var(--s4);
  }

  .ab-vis-main {
    width: clamp(160px, 45vw, 220px);
    height: clamp(160px, 45vw, 220px);
  }

  .ab-stat-card {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    width: 100%;
    animation: none;
  }

  /* Row all three stat-cards horizontally */
  .ab-vis-stats {
    display: flex;
    gap: var(--s3);
    width: 100%;
  }

  .ab-vis-stats .ab-stat-card {
    flex: 1;
  }

  .ab-sc-num { font-size: var(--f20); }
  .ab-sc-lbl { font-size: var(--f10); }

  /* Story paragraphs — centre on tablet/mobile */
  .ab-p {
    text-align: center;
  }

  /* ── MISSION / VISION: single col, fully centred ── */
  .ab-mvv         { grid-template-columns: 1fr; gap: var(--s4); }

  .ab-mv-card {
    padding: var(--s5);
    text-align: center;
  }

  .ab-mv-ico {
    margin-left: auto;
    margin-right: auto;
  }

  /* Uniform font size for ALL card paragraphs — fixes mismatch */
  .ab-mv-card p,
  .ab-val p,
  .ab-apart-card p,
  .ab-tm-body p {
    font-size: var(--f14);
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
  }

  /* ── VALUES: single col, centred ── */
  .ab-vals        { grid-template-columns: 1fr; gap: var(--s3); }

  .ab-val {
    align-items: center;
    text-align: center;
  }

  .ab-val-ico {
    margin-bottom: var(--s3);
  }

  .ab-val h3      { text-align: center; }

  /* val paragraphs: justified within their block, block centred */
  .ab-val p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    max-width: 54ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── WHAT SETS US APART ── */
  .ab-apart-grid  { grid-template-columns: 1fr; gap: var(--s3); }

  .ab-apart-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ab-apart-card .wi  { margin: 0 auto var(--s4); }
  .ab-apart-card h3   { text-align: center; }

  .ab-apart-card p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    max-width: 54ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── TEAM ── */
  .ab-team-grid   {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .ab-tm-av       { text-align: center; }

  .ab-tm-body {
    text-align: center;
  }

  .ab-tm-body h3  { text-align: center; }
  .ab-tm-body .tch { display: inline-block; }

  .ab-tm-body p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    max-width: 54ch;
    margin-left: auto;
    margin-right: auto;
  }

  .ab-tm-expertise {
    justify-content: center;
  }

  /* ── INDUSTRIES ── */
  .ab-ind-grid    { grid-template-columns: repeat(2, 1fr); }

  .ab-ind {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s2);
  }

  /* ── MILESTONES ── */
  .ts .tb h3      { text-align: left; }
  .ts .tb p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* ── 480px ────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Stats bar: 2+2+1 layout */
  .hst {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .sv:nth-child(1) { border-right: 1px solid rgba(255,255,255,.07) !important; border-bottom: 1px solid rgba(255,255,255,.07); }
  .sv:nth-child(2) { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.07); }
  .sv:nth-child(3) { border-right: 1px solid rgba(255,255,255,.07) !important; border-bottom: 1px solid rgba(255,255,255,.07); }
  .sv:nth-child(4) {
    grid-column: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .sv:nth-child(5) {
    grid-column: 1 / -1 !important; /* span full width — centred lone item */
    border-right: none !important;
    border-bottom: none;
  }

  /* Story */
  .ab-vis-main    { width: clamp(130px, 44vw, 180px); height: clamp(130px, 44vw, 180px); }
  .ab-sc-num      { font-size: var(--f18); }

  /* Mission / Vision — uniform font, all centred */
  .ab-mv-card     { padding: var(--s4); text-align: center; }
  .ab-mv-card h3  { font-size: var(--f20); text-align: center; }

  /* ALL card paragraphs: same font size, justified text */
  .ab-mv-card p,
  .ab-val p,
  .ab-apart-card p,
  .ab-tm-body p {
    font-size: var(--f13);
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Values */
  .ab-val         { align-items: center; text-align: center; }
  .ab-val h3      { font-size: var(--f16); text-align: center; }

  /* Apart */
  .ab-apart-card  { padding: var(--s4); align-items: center; text-align: center; }
  .ab-apart-card h3 { font-size: var(--f16); text-align: center; }

  /* Team */
  .ab-team-grid   { max-width: 100%; }
  .ab-tm-body     { text-align: center; }
  .ab-tm-body h3  { font-size: var(--f18); text-align: center; }
  .ab-tm-expertise { justify-content: center; }

  /* Industries */
  .ab-ind-grid    { grid-template-columns: 1fr; }
  .ab-ind         { flex-direction: column; align-items: center; text-align: center; }
}

/* ── 360px ────────────────────────────────────────────── */
@media (max-width: 360px) {

  /* Hero stats: single column, each item full width */
  .hst {
    grid-template-columns: 1fr !important;
  }

  .sv {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    grid-column: auto !important;
  }

  .sv:last-child { border-bottom: none !important; }

  /* Story */
  .ab-vis-main    { width: 130px; height: 130px; }
  .ab-sc-num      { font-size: var(--f16); }
  .ab-sc-lbl      { font-size: 0.62rem; }
  .ab-stat-card   { padding: var(--s2) var(--s3); }
  .ab-p           { font-size: var(--f14); line-height: 1.75; text-align: center; }

  /* Mission / Vision */
  .ab-mvv         { gap: var(--s3); }
  .ab-mv-card     { padding: var(--s3); text-align: center; }
  .ab-mv-card h3  { font-size: var(--f18); text-align: center; }

  /* ALL card paragraphs — same size, same treatment */
  .ab-mv-card p,
  .ab-val p,
  .ab-apart-card p,
  .ab-tm-body p {
    font-size: var(--f12);
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Values */
  .bc.ab-val      { padding: var(--s4) var(--s3); }
  .ab-val         { align-items: center; text-align: center; }
  .ab-val h3      { font-size: var(--f14); text-align: center; }
  .ab-val-ico     { width: 2.2rem; height: 2.2rem; font-size: var(--f14); }

  /* What sets us apart */
  .ab-apart-card  { padding: var(--s3); align-items: center; text-align: center; }
  .ab-apart-card h3 { font-size: var(--f14); text-align: center; }
  .ab-apart-card .wi { width: 2rem; height: 2rem; margin: 0 auto var(--s3); }

  /* Team */
  .ab-tm-av       { height: 84px; }
  .ab-tm-av span  { font-size: var(--f28); }
  .ab-tm-body     { padding: var(--s3); padding-top: calc(var(--s3) + .4rem); text-align: center; }
  .ab-tm-body h3  { font-size: var(--f16); text-align: center; }
  .ab-tm-expertise span { font-size: 0.62rem; padding: 2px 7px; }
  .ab-tm-expertise      { justify-content: center; }

  /* Industries */
  .ab-ind-grid    { grid-template-columns: 1fr; gap: var(--s2); }
  .ab-ind         { padding: var(--s3); gap: var(--s2); flex-direction: column; align-items: center; text-align: center; }
  .ab-ind i       { width: 2rem; height: 2rem; font-size: var(--f14); }
  .ab-ind span    { font-size: var(--f12); }

  /* Milestones */
  .tb             { padding: var(--s3); }
  .tb h3          { font-size: var(--f14); text-align: left; }
  .tb p           { font-size: var(--f12);
                    text-align: justify;
                    hyphens: auto;
                    -webkit-hyphens: auto;
                    word-break: break-word; }

  /* Section headings */
  .st             { font-size: var(--f28); }

  /* CTA */
  .ctab           { padding: var(--s5) var(--s3); }
  .ctab h2        { font-size: var(--f28); }
  .ctab p         { font-size: var(--f13); text-align: center; }
  .ctabs          { flex-direction: column; gap: var(--s2); }
  .ctabs .btn-g,
  .ctabs .btn-o   { width: 100%; justify-content: center; }
}

/*______________________________________Contact Us Page__________________________________________*/

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE — ct-* classes only
   Paste this block at the END of style.css
   Rules: All centred from 768px down. Card text justified.
   No overflow on any screen down to 360px.
═══════════════════════════════════════════════════════════ */

/* ── HERO — medium dark blue, NOT black ──────────────── */
/*
   Color: #0d2545  (deep navy-blue, noticeably lighter than
   the site's --bg-dark #1c1a18 and --bg-dark2 #141210)
   Accent glow uses the existing gold to stay on-brand.
*/
.ct-hero {
  position: relative;
  padding-top: clamp(6rem, 13vw, 9rem);
  padding-bottom: var(--s8);
  padding-left: var(--s6);
  padding-right: var(--s6);
  overflow: hidden;
  background: #0d2545;
}

/* subtle diagonal grid — gives texture without being heavy */
.ct-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* warm gold glow top-right lifts the blue into brand palette */
.ct-hero-glow {
  position: absolute;
  top: -10%;
  right: -5%;
  width: clamp(300px, 45vw, 600px);
  height: clamp(300px, 45vw, 600px);
  background: radial-gradient(circle, rgba(212,144,10,.10) 0%, transparent 68%);
  pointer-events: none;
}

.ct-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: center;
  position: relative;
  z-index: 2;
}

/* hero heading */
.ct-h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f60);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #f0ece6;
  margin-bottom: var(--s4);
}

.ct-h1 span {
  display: block;
  background: linear-gradient(110deg, var(--g-100) 0%, var(--g-300) 45%, var(--g-200) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ct-hsub {
  font-size: var(--f16);
  font-weight: 300;
  color: rgba(200,196,190,.75);
  line-height: 1.82;
  max-width: 480px;
}

/* quick-contact cards stacked on right */
.ct-hero-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.ct-qc {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--rad-l);
  text-decoration: none;
  transition: var(--tr);
  cursor: none;
  position: relative;
  overflow: hidden;
}

.ct-qc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--g-300), var(--g-200));
  opacity: 0;
  transition: opacity .3s;
  border-radius: 0 2px 2px 0;
}

.ct-qc:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(212,144,10,.35);
  transform: translateX(4px);
}

.ct-qc:hover::before { opacity: 1; }

/* WhatsApp card gets green accent on hover */
.ct-qc-wa:hover {
  border-color: rgba(37,211,102,.35);
}

.ct-qc-wa:hover::before {
  background: linear-gradient(180deg, #25d366, #128c7e);
}

.ct-qc-ico {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--rad-m);
  background: rgba(212,144,10,.15);
  border: 1px solid rgba(212,144,10,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f18);
  color: var(--g-300);
  flex-shrink: 0;
  transition: var(--tr);
}

.ct-qc-wa .ct-qc-ico {
  background: rgba(37,211,102,.12);
  border-color: rgba(37,211,102,.2);
  color: #25d366;
}

.ct-qc:hover .ct-qc-ico {
  background: rgba(212,144,10,.22);
  border-color: rgba(212,144,10,.4);
}

.ct-qc-wa:hover .ct-qc-ico {
  background: rgba(37,211,102,.2);
  border-color: rgba(37,211,102,.35);
}

.ct-qc-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ct-qc-lbl {
  font-size: var(--f10);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,196,190,.45);
}

.ct-qc-body strong {
  font-size: var(--f14);
  font-weight: 600;
  color: #f0ece6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ct-qc-sub {
  font-size: var(--f11);
  color: rgba(200,196,190,.4);
}

.ct-qc-arr {
  color: rgba(200,196,190,.3);
  font-size: var(--f12);
  flex-shrink: 0;
  transition: transform .3s, color .3s;
}

.ct-qc:hover .ct-qc-arr {
  color: var(--g-300);
  transform: translateX(4px);
}

/* ── MAIN CONTACT BODY ────────────────────────────────── */
.ct-main { background: var(--bg-base); }

.ct-main-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s7);
  align-items: start;
}

/* Form section heading */
.ct-form-head { margin-bottom: var(--s6); }

.ct-form-sub {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.8;
  margin-top: var(--s3);
}

/* ── FORM ─────────────────────────────────────────────── */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* two-column row */
.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

.ct-field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.ct-field-full { grid-column: 1 / -1; }

.ct-field label {
  font-size: var(--f12);
  font-weight: 600;
  color: var(--t-600);
  letter-spacing: .03em;
}

.ct-req { color: var(--r-400); }

/* input wrapper with icon */
.ct-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-input-wrap > i:first-child {
  position: absolute;
  left: 14px;
  color: var(--t-200);
  font-size: var(--f14);
  pointer-events: none;
  transition: color .25s;
  z-index: 1;
}

.ct-input-wrap input,
.ct-input-wrap select,
.ct-input-wrap textarea {
  width: 100%;
  padding: clamp(.65rem, 1.2vw, .85rem) var(--s4) clamp(.65rem, 1.2vw, .85rem) 2.6rem;
  font-family: 'Jost', sans-serif;
  font-size: var(--f14);
  color: var(--t-800);
  background: var(--bg-card);
  border: 1.5px solid var(--b-mid);
  border-radius: var(--rad-m);
  outline: none;
  transition: border-color .25s, box-shadow .25s;
  appearance: none;
  -webkit-appearance: none;
}

.ct-input-wrap textarea {
  resize: vertical;
  min-height: 130px;
  padding-top: clamp(.65rem, 1.2vw, .85rem);
  line-height: 1.65;
}

.ct-input-wrap input::placeholder,
.ct-input-wrap textarea::placeholder { color: var(--t-200); }

.ct-input-wrap input:focus,
.ct-input-wrap select:focus,
.ct-input-wrap textarea:focus {
  border-color: var(--r-400);
  box-shadow: 0 0 0 3px rgba(19,68,167,.1);
}

.ct-input-wrap:focus-within > i:first-child { color: var(--r-400); }

/* select dropdown arrow */
.ct-select-wrap select { padding-right: 2.8rem; cursor: none; }

.ct-chev {
  position: absolute !important;
  right: 12px;
  font-size: var(--f11);
  color: var(--t-300);
  pointer-events: none;
}

/* textarea icon sits at top */
.ct-ta-wrap > i:first-child { top: clamp(.75rem, 1.4vw, .95rem); align-self: flex-start; }

/* ── CHECKBOX ─────────────────────────────────────────── */
.ct-check-label {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  cursor: none;
}

.ct-check-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ct-checkmark {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--b-dark);
  border-radius: 4px;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: var(--tr);
  flex-shrink: 0;
}

.ct-check-label:has(input:checked) .ct-checkmark {
  background: var(--r-400);
  border-color: var(--r-400);
}

.ct-check-label:has(input:checked) .ct-checkmark::after {
  content: '';
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(40deg) translateY(-1px);
  display: block;
}

.ct-check-label span:last-child {
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.65;
}

/* ── SUBMIT BUTTON ────────────────────────────────────── */
.ct-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: clamp(.85rem, 1.6vw, 1rem) var(--s5);
  font-family: 'Jost', sans-serif;
  font-size: var(--f14);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--t-900);
  background: linear-gradient(135deg, var(--g-200), var(--g-400));
  border: none;
  border-radius: var(--rad-m);
  cursor: none;
  box-shadow: 0 4px 18px rgba(212,144,10,.38);
  transition: var(--tr);
}

.ct-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,144,10,.52);
}

.ct-submit i { font-size: var(--f14); }

/* ── SUCCESS MESSAGE ──────────────────────────────────── */
.ct-success {
  display: none;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  background: rgba(34,197,94,.07);
  border: 1px solid rgba(34,197,94,.2);
  border-radius: var(--rad-m);
}

.ct-success.ct-show { display: flex; }

.ct-success i {
  font-size: var(--f24);
  color: #22c55e;
  flex-shrink: 0;
}

.ct-success strong {
  display: block;
  font-size: var(--f14);
  font-weight: 600;
  color: var(--t-900);
}

.ct-success span {
  font-size: var(--f12);
  color: var(--t-400);
}

/* ── FORM ERROR STATE ─────────────────────────────────── */
.ct-err .ct-input-wrap input,
.ct-err .ct-input-wrap select,
.ct-err .ct-input-wrap textarea {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.1);
}

.ct-err label { color: #c0392b; }

/* ── INFO PANEL ───────────────────────────────────────── */
.ct-info {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.ct-info-card {
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  background: var(--bg-card);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.ct-info-card:hover {
  box-shadow: var(--sh-md);
  border-color: var(--b-mid);
}

.ct-info-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--b-light);
}

.ct-info-ico {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--rad-m);
  background: rgba(19,68,167,.07);
  border: 1px solid rgba(19,68,167,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f16);
  color: var(--r-500);
  flex-shrink: 0;
}

.ct-info-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
}

/* Offices */
.ct-offices {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ct-office {
  padding: var(--s3) 0;
}

.ct-office-divider {
  height: 1px;
  background: var(--b-light);
}

.ct-off-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--r-500);
  background: rgba(19,68,167,.06);
  border: 1px solid rgba(19,68,167,.14);
  border-radius: 3px;
  padding: 2px 8px;
  margin-bottom: var(--s2);
}

.ct-off-b2 { color: var(--g-600); background: rgba(212,144,10,.06); border-color: rgba(184,122,0,.18); }
.ct-off-b3 { color: #1a6b4a; background: rgba(26,107,74,.06); border-color: rgba(26,107,74,.18); }

.ct-office p {
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.7;
  margin-bottom: var(--s2);
}

.ct-map-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--f12);
  font-weight: 600;
  color: var(--r-500);
  text-decoration: none;
  transition: gap .25s, color .25s;
}

.ct-map-link:hover { gap: 8px; color: var(--r-400); }

/* Hours */
.ct-hours {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.ct-hours li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--f13);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--b-light);
}

.ct-hours li:last-child { border-bottom: none; }

.ct-hours li span { color: var(--t-400); }
.ct-hours li strong { color: var(--t-900); font-weight: 600; }
.ct-closed span,
.ct-closed strong { color: var(--t-300); }

.ct-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: var(--s3);
  padding: var(--s3);
  background: rgba(212,144,10,.05);
  border: 1px solid rgba(184,122,0,.15);
  border-radius: var(--rad-m);
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.65;
}

.ct-note i { color: var(--g-500); flex-shrink: 0; margin-top: 1px; }

/* Socials */
.ct-socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}

.ct-social {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s3);
  background: var(--bg-alt);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  text-decoration: none;
  font-size: var(--f12);
  font-weight: 500;
  color: var(--t-600);
  transition: var(--tr);
  cursor: none;
}

.ct-social i {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--rad-s);
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f12);
  color: var(--g-300);
  flex-shrink: 0;
  transition: var(--tr);
}

.ct-social:hover {
  border-color: var(--b-gold);
  background: var(--bg-card);
  color: var(--t-900);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

/* ── MAP ──────────────────────────────────────────────── */
.ct-map-sec { background: var(--bg-alt); }

.ct-map-frame {
  margin-top: var(--s5);
  border-radius: var(--rad-l);
  overflow: hidden;
  border: 1px solid var(--b-light);
  box-shadow: var(--sh-md);
}

.ct-map-frame iframe { display: block; }

/* ── INLINE MAP (below form) ──────────────────────────── */
.ct-inline-map {
  margin-top: var(--s5);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

/* Single flex row: [icon + text group] ... [button] */
.ct-inline-map-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--b-light);
  background: var(--bg-base);
}

/* Left group: bare icon + title+address side by side */
.ct-inline-map-left {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 1;
  min-width: 0;
}

/* Bare icon — no box, no background, just the pin */
.ct-inline-map-ico {
  font-size: var(--f20);
  color: var(--r-500);
  flex-shrink: 0;
  line-height: 1;
}

.ct-inline-map-left > div {
  min-width: 0;
}

.ct-inline-map-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  white-space: nowrap;
  margin-bottom: 2px;
}

.ct-inline-map-head p {
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button sits on the far right — NOT touching the edge */
.ct-map-link-out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--f12);
  font-weight: 600;
  color: var(--r-500);
  text-decoration: none;
  padding: var(--s2) var(--s3);
  border: 1px solid rgba(19,68,167,.18);
  border-radius: var(--rad-s);
  background: rgba(19,68,167,.05);
  transition: var(--tr);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.ct-map-link-out:hover {
  background: rgba(19,68,167,.1);
  border-color: rgba(19,68,167,.3);
  color: var(--r-400);
  transform: translateY(-1px);
}

.ct-inline-map-frame { display: block; }
.ct-inline-map-frame iframe { display: block; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — strictly centred from 768px down,
   no overflow, every element accounted for.
═══════════════════════════════════════════════════════════ */

/* ── 1024px ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ct-hero-inner   { grid-template-columns: 1fr; gap: var(--s6); }
  .ct-h1           { font-size: var(--f48); }
  .ct-hsub         { max-width: 100%; }
  .ct-hero-cards   { flex-direction: row; flex-wrap: wrap; }
  .ct-qc           { flex: 1 1 calc(50% - var(--s3)); min-width: 0; }
  .ct-main-grid    { grid-template-columns: 1fr; gap: var(--s6); }
  .ct-info         { display: grid; grid-template-columns: repeat(2, 1fr); }
}

/* ── 768px ────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hero */
  .ct-hero         { padding-left: var(--s4); padding-right: var(--s4); }
  .ct-hero-inner   { grid-template-columns: 1fr; gap: var(--s5); }

  .ct-hero-text    { text-align: center; }
  .ct-hero-text .hp { display: inline-flex; }

  .ct-h1           { font-size: var(--f36); text-align: center; }
  .ct-hsub         {
    font-size: var(--f14);
    text-align: center;
    max-width: 54ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* Quick-contact cards: full width, stacked */
  .ct-hero-cards   { flex-direction: column; }
  .ct-qc           { flex: none; width: 100%; }

  /* Form section */
  .ct-form-head    { text-align: center; }
  .ct-form-head .sl { justify-content: center; }
  .ct-form-head .sl::before { display: none; }
  .ct-form-head .sl::after  {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--r-400);
  }
  .ct-form-head .rule { margin-left: auto; margin-right: auto; }
  .ct-form-sub     { text-align: center; }

  /* Two-column rows collapse to single */
  .ct-row          { grid-template-columns: 1fr; gap: var(--s3); }

  /* Info panel: stack all cards */
  .ct-info         { grid-template-columns: 1fr; }

  /* Office cards: centre all text */
  .ct-info-card    { text-align: center; }
  .ct-info-head    { justify-content: center; }
  .ct-office p     {
    text-align: center;
  }
  .ct-map-link     { margin: 0 auto; }
  .ct-offices      { align-items: center; }

  /* Hours: keep justify-between for the row spacing */
  .ct-hours li     { justify-content: space-between; }

  /* Socials: 2-col grid stays, just centre them */
  .ct-socials      { justify-items: center; }

  /* Map */
  .ct-map-frame iframe { height: 300px; }
  /* inline map: address can wrap on tablet, keep row layout */
  .ct-inline-map-head  { padding: var(--s3) var(--s4); }
  .ct-inline-map-head p { white-space: normal; }

  /* FAQ keep left-aligned text for readability */
  .fa p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* ── 480px ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ct-hero         { padding-left: var(--s3); padding-right: var(--s3); }
  .ct-h1           { font-size: var(--f28); }
  .ct-hsub         { font-size: var(--f13); }

  /* Quick-contact cards: tighter */
  .ct-qc           { padding: var(--s3) var(--s4); gap: var(--s3); }
  .ct-qc-ico       { width: 2.2rem; height: 2.2rem; font-size: var(--f16); }
  .ct-qc-body strong { font-size: var(--f13); }

  /* Form */
  .ct-form-sub     { font-size: var(--f13); text-align: center; }
  .ct-check-label span:last-child { font-size: var(--f11); }

  /* Info card */
  .ct-info-card    { padding: var(--s4); text-align: center; }
  .ct-info-head    { justify-content: center; }
  .ct-info-head h3 { font-size: var(--f16); }
  .ct-office p     { font-size: var(--f12); text-align: center; }

  /* Hours: keep row layout, compress font */
  .ct-hours li     { font-size: var(--f12); }

  /* Socials: full width */
  .ct-socials      { grid-template-columns: 1fr; }
  .ct-social       { justify-content: center; }

  /* Map */
  .ct-map-frame iframe { height: 240px; }
  .ct-inline-map-head  { padding: var(--s2) var(--s4); gap: var(--s2); }
  .ct-inline-map-head h3 { font-size: var(--f14); }
  .ct-inline-map-head p  { font-size: var(--f11); white-space: normal; }
  .ct-map-link-out       { font-size: var(--f11); padding: var(--s1) var(--s2); }
  .ct-inline-map-frame iframe { height: 220px; }

  /* FAQ */
  .fq              { font-size: var(--f14); }
  .fa p            {
    font-size: var(--f13);
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
  }
}

/* ── 360px ────────────────────────────────────────────── */
@media (max-width: 360px) {
  /* Hero */
  .ct-hero         { padding-left: var(--s3); padding-right: var(--s3); padding-top: 5.5rem; }
  .ct-h1           { font-size: var(--f24); letter-spacing: -.02em; text-align: center; }
  .ct-hsub         { font-size: var(--f12); text-align: center; }

  /* Quick-contact */
  .ct-qc           { padding: var(--s2) var(--s3); gap: var(--s2); }
  .ct-qc-ico       { width: 1.9rem; height: 1.9rem; font-size: var(--f14); }
  .ct-qc-body strong { font-size: var(--f12); white-space: normal; }
  .ct-qc-body .ct-qc-sub { display: none; } /* too tight at 360 */
  .ct-qc-arr       { display: none; }

  /* Form section heading */
  .ct-form-head .st { font-size: var(--f28); text-align: center; }
  .ct-form-sub      {
    font-size: var(--f12);
    text-align: center;
  }

  /* Inputs */
  .ct-input-wrap input,
  .ct-input-wrap select,
  .ct-input-wrap textarea {
    font-size: var(--f12);
    padding-left: 2.2rem;
  }

  .ct-input-wrap > i:first-child { left: 10px; font-size: var(--f12); }

  .ct-submit { font-size: var(--f12); padding: .8rem var(--s4); }

  /* Info cards */
  .ct-info-card    { padding: var(--s3); text-align: center; }
  .ct-info-head    { justify-content: center; gap: var(--s2); }
  .ct-info-ico     { width: 2rem; height: 2rem; font-size: var(--f14); }
  .ct-info-head h3 { font-size: var(--f15); }

  .ct-off-badge    { font-size: 0.58rem; }
  .ct-office p     { font-size: var(--f11); text-align: center; }
  .ct-map-link     { font-size: var(--f11); }

  .ct-hours li     { font-size: var(--f11); gap: var(--s2); }

  .ct-note         { font-size: var(--f11); }

  .ct-social       { font-size: var(--f11); padding: var(--s2); justify-content: center; }
  .ct-social i     { width: 1.6rem; height: 1.6rem; font-size: var(--f11); }

  /* Map */
  .ct-map-frame iframe { height: 200px; }
  .ct-inline-map-head  { padding: var(--s2) var(--s3); gap: var(--s2); flex-wrap: wrap; }
  .ct-inline-map-ico   { font-size: var(--f16); }
  .ct-inline-map-head h3 { font-size: var(--f13); }
  .ct-inline-map-head p  { font-size: var(--f11); white-space: normal; }
  .ct-map-link-out       { font-size: var(--f11); padding: var(--s1) var(--s2); }
  .ct-inline-map-frame iframe { height: 190px; }

  /* FAQ */
  .fq              { font-size: var(--f13); }
  .fa p            {
    font-size: var(--f12);
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
  }

  /* Section titles */
  .st              { font-size: var(--f28); }

  /* CTA */
  .ctab            { padding: var(--s5) var(--s3); }
  .ctab h2         { font-size: var(--f28); }
  .ctabs           { flex-direction: column; gap: var(--s2); }
  .ctabs .btn-g,
  .ctabs .btn-o    { width: 100%; justify-content: center; }
}



/*______________________________________Trademark Registration Page_______________________________*/


/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(5rem, 12vw, 8rem);
  padding-bottom: var(--s8);
  overflow: hidden;
  background:
    radial-gradient(ellipse 65% 50% at 50% -5%, rgba(90,16,28,.5) 0%, transparent 62%),
    radial-gradient(ellipse 40% 30% at 90% 80%, rgba(180,110,0,.15) 0%, transparent 55%),
    var(--bg-dark);
    gap: 8px;
}

.hc {
  text-align: center;
  max-width: min(820px, 92vw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(194,40,69,.35);
  background: rgba(139,26,48,.1);
  border-radius: 100px;
  padding: 6px 18px;
  font-size: var(--f10);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(249 214 112);
  margin-bottom: var(--s5);
  opacity: 0;
  animation: rise .7s ease .1s forwards;
}

.hp i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--r-300);
  box-shadow: 0 0 6px var(--r-400);
  animation: pd 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pd {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

.hh {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: #f0ece6;
  margin-bottom: var(--s4);
  opacity: 0;
  animation: rise .8s ease .3s forwards;
}

.hh span {
  display: block;
  background: linear-gradient(110deg, var(--g-100) 0%, var(--g-300) 45%, var(--g-200) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hs {
  font-size: var(--f18);
  font-weight: 300;
  color: rgba(200,196,190,.85);
  line-height: 1.75;
  max-width: min(580px, 90vw);
  margin: 0 auto var(--s6);
  opacity: 0;
  animation: rise .8s ease .5s forwards;
}

.hb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
  opacity: 0;
  animation: rise .8s ease .65s forwards;
}

.btn-g {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', sans-serif;
  font-size: var(--f14);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-900);
  background: linear-gradient(135deg, var(--g-200), var(--g-400));
  border: none;
  border-radius: var(--rad-s);
  padding: clamp(.75rem, 1.4vw, .9rem) clamp(1.5rem, 2.8vw, 2rem);
  text-decoration: none;
  cursor: none;
  transition: var(--tr);
  box-shadow: 0 4px 18px rgba(212,144,10,.38);
}

.btn-g:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,144,10,.52);
}

.btn-g svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-o {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', sans-serif;
  font-size: var(--f14);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(240,236,230,.85);
  background: transparent;
  border: 1px solid rgba(240,236,230,.2);
  border-radius: var(--rad-s);
  padding: clamp(.75rem, 1.4vw, .9rem) clamp(1.5rem, 2.8vw, 2rem);
  text-decoration: none;
  cursor: none;
  transition: var(--tr);
}

.btn-o:hover {
  border-color: rgba(212,144,10,.5);
  color: var(--g-200);
  background: rgba(212,144,10,.06);
}

.hst {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s7);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--rad-m);
  overflow: hidden;
  opacity: 0;
  animation: rise .8s ease .85s forwards;
  background: rgba(255,255,255,.03);
}

.sv {
  flex: 1 1 clamp(120px, 18vw, 200px);
  padding: var(--s4) var(--s3);
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.07);
}

.sv:last-child { border-right: none; }

.svv {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 600;
  color: var(--g-200);
  display: block;
  line-height: 1.1;
}

.svl {
  font-size: var(--f10);
  color: rgba(200,196,190,.6);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   INTRO — WHAT IS TRADEMARK
══════════════════════════════════════ */
.intro { background: var(--bg-base); }

.ig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: center;
  margin-top: var(--s6);
}

.iv {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tmd {
  position: relative;
  width: clamp(200px, 26vw, 310px);
  height: clamp(200px, 26vw, 310px);
}

.tr1 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--b-red);
  animation: rot 28s linear infinite;
}

.tr1::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--r-400);
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(168,32,56,.5);
}

.tr2 {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid var(--b-gold);
  animation: rot 18s linear infinite reverse;
}

.tr2::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--g-400);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(212,144,10,.5);
}

@keyframes rot {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

.tc {
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8f6f2, #f0ede8);
  border: 1px solid var(--b-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-md);
}

.tg {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 700;
  font-style: italic;
  color: var(--g-500);
  line-height: 1;
  user-select: none;
}

.ip {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s5);
}

.ipt {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.ipt:hover {
  border-color: var(--b-red);
  box-shadow: var(--sh-md);
  transform: translateX(4px);
}
#fast-processing{
  padding: 0 1.5rem !important;
}

.ipd {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--r-400);
  flex-shrink: 0;
  margin-top: 8px;
}

.ipt h4 { font-size: var(--f16); font-weight: 600; color: var(--t-900); margin-bottom: 3px; }
.ipt p  { font-size: var(--f14); color: var(--t-400); line-height: 1.6;text-align: justify; }

/* ══════════════════════════════════════
   BENEFITS
══════════════════════════════════════ */
.ben { background: var(--bg-alt); }

.bg2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
  gap: var(--s3);
  margin-top: var(--s6);
}

.bc {
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  padding: var(--s5);
  background: var(--bg-card);
  transition: var(--tr);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.bc::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--r-400), var(--g-400));
  opacity: 0;
  transition: opacity .35s;
}

.bc:hover {
  border-color: var(--b-mid);
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
}

.bc:hover::after { opacity: 1; }

.bn {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 700;
  color: rgba(184,122,0,.12);
  line-height: 1;
  margin-bottom: var(--s3);
  user-select: none;
}

.bc h3 { font-size: var(--f16); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2); }
.bc p  { font-size: var(--f14); color: var(--t-400); line-height: 1.65; text-align: justify; hyphens: auto;}

/* ══════════════════════════════════════
   WHO CAN APPLY
══════════════════════════════════════ */
.who { background: var(--bg-base); }

.wg {
  display: grid;
  grid-template-columns: repeat(3, minmax(min(210px, 100%), 1fr));
  gap: var(--s3);
  margin-top: var(--s6);
}

.wc {
  text-align: center;
  padding: var(--s5) var(--s4);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.wc:hover {
  border-color: var(--b-gold);
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.wi {
  width: clamp(2.8rem, 4.5vw, 3.4rem);
  height: clamp(2.8rem, 4.5vw, 3.4rem);
  border-radius: 50%;
  border: 1px solid var(--b-gold);
  background: rgba(212,144,10,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s3);
}

.wi svg {
  width: 42%; height: 42%;
  stroke: var(--g-500);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wc h3 { font-size: var(--f16); font-weight: 600; color: var(--t-900); margin-bottom: var(--s1); }
.wc p  { font-size: var(--f12); color: var(--t-400); line-height: 1.6; }

/* ══════════════════════════════════════
   TYPES
══════════════════════════════════════ */
.typ { background: var(--bg-alt); }

.tg2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(235px, 100%), 1fr));
  gap: var(--s3);
  margin-top: var(--s6);
}

.tc2 {
  padding: var(--s4);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.tc2:hover {
  border-color: var(--b-red);
  box-shadow: var(--sh-md);
}

.tch {
  display: inline-block;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--r-500);
  border: 1px solid var(--b-red);
  border-radius: 3px;
  padding: 3px 8px;
  margin-bottom: var(--s2);
  background: var(--r-light);
}

.tc2 h3 { font-size: var(--f16); font-weight: 600; color: var(--t-900); margin-bottom: var(--s1); }
.tc2 p  { font-size: var(--f12); color: var(--t-400); line-height: 1.6; }

/* ══════════════════════════════════════
   PROCESS / TIMELINE
══════════════════════════════════════ */
.proc { background: var(--bg-base); }

.tl {
  position: relative;
  margin-top: var(--s6);
  display: flex;
  flex-direction: column;
}

.tl::before {
  content: '';
  position: absolute;
  left: clamp(19px, 3.5vw, 27px);
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--r-400) 0%, var(--g-400) 65%, transparent 100%);
  opacity: .25;
}
 
.ts {
  display: grid;
  gap: var(--s4);
  align-items: flex-start;
  padding: var(--s4) 0;
  position: relative;
  z-index: 1;
}

.tn {
  width: clamp(38px, 5.5vw, 52px);
  height: clamp(38px, 5.5vw, 52px);
  border-radius: 50%;
  border: 1.5px solid var(--b-gold);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  color: var(--g-500);
  transition: var(--tr);
  position: relative;
  z-index: 2;
  box-shadow: var(--sh-sm);
}

.ts:hover .tn {
  background: rgba(212,144,10,.06);
  border-color: var(--g-400);
  box-shadow: 0 0 0 4px rgba(212,144,10,.1);
}

.tb {
  flex: 1;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.ts:hover .tb {
  border-color: var(--b-mid);
  box-shadow: var(--sh-md);
}

.tb h3 { font-size: var(--f16); font-weight: 600; color: var(--t-900); margin-bottom: 6px; }
.tb p  { font-size: var(--f14); color: var(--t-400); line-height: 1.65; }

/* ══════════════════════════════════════
   FEES TABLE
══════════════════════════════════════ */
.fee { background: var(--bg-alt); }

.tw {
  margin-top: var(--s6);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  overflow-x: auto;
  box-shadow: var(--sh-md);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 380px;
  font-size: var(--f14);
}

thead {
  background: var(--t-900);
  border-bottom: 1px solid var(--b-dark);
}

thead th {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-200);
  padding: var(--s3) var(--s4);
  text-align: left;
}

tbody tr {
  border-bottom: 1px solid var(--b-light);
  background: var(--bg-card);
  transition: background .2s;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--bg-base); }
tbody tr:hover { background: rgba(212,144,10,.04); }

tbody td {
  padding: var(--s3) var(--s4);
  color: var(--t-400);
  vertical-align: top;
  line-height: 1.5;
}

tbody td:first-child { color: var(--t-600); font-weight: 500; }
.fv { color: var(--g-600); font-weight: 700; }
.fn { font-size: var(--f12); color: var(--t-300); margin-top: var(--s3); text-align: center; }

/* ══════════════════════════════════════
   DOCUMENTS
══════════════════════════════════════ */
.dcs { background: var(--bg-base); }

.dg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin-top: var(--s6);
}

.dcat {
  padding: var(--s5);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
}

.dcat h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--b-gold);
}

.dl2 {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.dl2 li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.55;
}

.dl2 li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--r-400);
  flex-shrink: 0;
  margin-top: 7px;
}

/* ══════════════════════════════════════
   TRADEMARK CLASSES
══════════════════════════════════════ */
.cls { background: var(--bg-alt); }

.cn {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  background: rgba(212,144,10,.04);
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.75;
}

.cn strong { color: var(--t-900); font-weight: 600; }

.cc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  margin-top: var(--s5);
}

.cc-col h3 {
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}

.cc-col:first-child h3 { color: #111316; }
.cc-col:last-child h3  { color: #111316; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--b-light);
  border-radius: var(--rad-s);
  background: var(--bg-card);
  font-size: var(--f10);
  color: var(--t-400);
  transition: var(--tr);
  cursor: default;
  min-width: 60px;
  box-shadow: var(--sh-sm);
}

.chip:hover {
  border-color: var(--b-red);
  color: var(--t-800);
  box-shadow: var(--sh-md);
}

.chip b {
  font-size: var(--f12);
  font-weight: 700;
  color: #404040;
  line-height: 1.2;
  margin-bottom: 1px;
}

.cc-col:last-child .chip b    { color: #404040; }
.cc-col:last-child .chip:hover { border-color: var(--b-gold); }

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.faq { background: var(--bg-base); }

.fl {
  max-width: min(820px, 100%);
  margin: var(--s6) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.fi {
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
  box-shadow: var(--sh-sm);
}

.fi.op {
  border-color: var(--b-gold);
  box-shadow: var(--sh-md);
}

.fq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  cursor: pointer;
  font-size: var(--f16);
  font-weight: 500;
  color: var(--t-600);
  user-select: none;
  transition: color .25s;
}

.fq:hover, .fi.op .fq { color: var(--t-900); }

.fi-ico {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--b-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .3s, border-color .3s, background .3s;
}

.fi.op .fi-ico {
  transform: rotate(45deg);
  border-color: var(--g-400);
  background: rgba(212,144,10,.08);
}

.fi-ico svg {
  width: 10px; height: 10px;
  stroke: var(--t-300);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.fi.op .fi-ico svg { stroke: var(--g-500); }

.fa {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .4s ease;
  padding: 0 var(--s4);
}

.fi.op .fa {
  max-height: 280px;
  padding: 0 var(--s4) var(--s4);
}

.fa p { font-family: 'Jost', sans-serif; font-size: var(--f14); color: var(--t-400); line-height: 1.8; }

/* ══════════════════════════════════════
   CTA
══════════════════════════════════════ */
.cta {
  background: var(--bg-dark);
  text-align: center;
}

.ctab {
  max-width: min(780px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(212,144,10,.18);
  border-radius: var(--rad-l);
  padding: var(--s8) var(--s6);
  background: linear-gradient(160deg, rgba(90,16,28,.35) 0%, rgba(140,80,0,.15) 100%);
  position: relative;
  overflow: hidden;
}

.ctab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(139,26,48,.2) 0%, transparent 60%);
  pointer-events: none;
}

.ctab h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f48);
  font-weight: 600;
  color: #f0ece6;
  line-height: 1.2;
  margin-bottom: var(--s3);
}

.ctab p {
  font-size: var(--f16);
  color: rgba(200,196,190,.8);
  line-height: 1.75;
  max-width: min(520px, 90vw);
  margin: 0 auto var(--s6);
}

.ctabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer {
  position: relative;
  z-index: 2;
  background: var(--t-900);
  padding: var(--s5) var(--s6);
}

.fi2 {
  max-width: min(1140px, 96vw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.fc { font-size: var(--f12); color: rgba(200,196,190,.5); }

.fls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  list-style: none;
}

.fls a {
  font-size: var(--f12);
  color: rgba(200,196,190,.5);
  text-decoration: none;
  transition: color .25s;
}

.fls a:hover { color: var(--g-200); }

/* ══════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════ */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}

.rv.vis { opacity: 1; transform: translateY(0); }

.d1 { transition-delay: .1s; }
.d2 { transition-delay: .18s; }
.d3 { transition-delay: .26s; }
.d4 { transition-delay: .34s; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .ig  { grid-template-columns: 1fr; }
  .iv  { display: none; }
  .dg  { grid-template-columns: 1fr; }
  .cc  { grid-template-columns: 1fr; }
  .mega { width: min(490px, 90vw); }
  .mg  { grid-template-columns: 1.5fr 1fr; }
}

@media (max-width: 768px) {
  nav { padding: var(--s2) var(--s4); height: 70px; }
  .nm, .nb { display: none; }
  .ham { display: flex; }

  section { padding: var(--s7) var(--s4); }
  .hb  { flex-direction: column; align-items: center; }
  .bg2 { grid-template-columns: 1fr; }
  .wg  { grid-template-columns: repeat(2, 1fr); }
  .tg2 { grid-template-columns: 1fr; }

  .tl::before { left: 18px; }
  .tn { width: 36px; height: 36px; font-size: var(--f11); }

  thead th, tbody td { padding: var(--s2) var(--s3); }

  .st { font-size: var(--f36); }
  .hh { font-size: var(--f48); }

  /* center text on tablet/mobile */
  .mob-c,
  .mob-c .st { text-align: center; }
  .mob-c .sl { justify-content: center; }
  .mob-c .sl::before { display: none; }
  .mob-c .sl::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--r-400);
  }
  .mob-c .rule { margin-left: auto; margin-right: auto; }
  .mob-c .sb   { margin: 0 auto; text-align: center; }

  .fi2 { flex-direction: column; text-align: center; }
  .fls { justify-content: center; }
  .hp {
    margin-top: 3.125rem; 
  }
  .ih-sub {
    text-align: center;
  }
  .hp {
    margin: 1.25rem 9rem;
  }
  .ih-sc h3 {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .wg { grid-template-columns: 1fr; }
  .hst { flex-direction: column; }
  .sv {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .sv:last-child { border-bottom: none; grid-column: 1 / -1 !important; }
  .tc2 {
    text-align: center;
  }
  .tc2 p, .tb p, .cn, .fa p, .dcat h3{
    text-align: justify;
    hyphens: auto;
}
.dcat h3{
    text-align: center;
}
.hp {
        margin:2rem;
    }
.hst .sv:nth-child(3),
.hst .sv:nth-child(4) { display: none; }
}

@media (max-width: 360px) {
  section { padding: var(--s6) var(--s3); }
  .hh { font-size: var(--f36); }
  .btn-g, .btn-o { padding: .65rem 1.1rem; font-size: var(--f12); }
}

/*___________________________________________ Trademark Objection__________________________________________*/
/* ══════════════════════════════════════
   TRADEMARK OBJECTION PAGE
══════════════════════════════════════ */
.grd-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s6);}
.grd-panel{border:1px solid var(--b-light);border-radius:var(--rad-l);overflow:hidden;box-shadow:var(--sh-sm);}
.grd-head{padding:var(--s4) var(--s5);display:flex;align-items:center;gap:var(--s3);}
.grd-head.abs{background:rgba(162,32,56,.06);border-bottom:1px solid rgba(162,32,56,.15);}
.grd-head.rel{background:rgba(212,144,10,.06);border-bottom:1px solid rgba(212,144,10,.2);}
.grd-badge{font-family:'Cinzel',serif;font-size:var(--f10);font-weight:600;letter-spacing:.12em;padding:4px 10px;border-radius:3px;flex-shrink:0;}
.abs .grd-badge{color:var(--r-500);background:rgba(162,32,56,.1);border:1px solid rgba(162,32,56,.2);}
.rel .grd-badge{color:var(--g-600);background:rgba(212,144,10,.1);border:1px solid rgba(212,144,10,.25);}
.grd-head h3{font-family:'Playfair Display',serif;font-size:var(--f18);font-weight:600;color:var(--t-900);}
.grd-body{padding:var(--s4) var(--s5);background:var(--bg-card);}
.grd-body ul{list-style:none;display:flex;flex-direction:column;gap:var(--s2);}
.grd-body li{display:flex;align-items:flex-start;gap:10px;font-size:var(--f14);color:var(--t-400);line-height:1.6;}
.grd-body li::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:7px;}
.abs .grd-body li::before{background:var(--r-400);}
.rel .grd-body li::before{background:var(--g-400);}
.grd-body .sub{font-size:var(--f12);color:var(--t-300);margin-top:3px;display:block;}

.warn{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4) var(--s5);border:1px solid rgba(162,32,56,.25);border-left:3px solid var(--r-400);border-radius:var(--rad-m);background:rgba(162,32,56,.04);margin-top:var(--s5);}
.warn-ico{flex-shrink:0;width:20px;height:20px;margin-top:2px;}
.warn-ico svg{width:20px;height:20px;stroke:#c41d1d;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.warn p{font-size:var(--f14);color:var(--t-600);line-height:1.7;}
.warn strong{color:#c41d1d;}

.tip{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4) var(--s5);border:1px solid var(--b-gold);border-left:3px solid var(--g-400);border-radius:var(--rad-m);background:rgba(212,144,10,.04);margin-top:var(--s5);}
.tip-ico{flex-shrink:0;width:20px;height:20px;margin-top:2px;}
.tip-ico svg{width:20px;height:20px;stroke:var(--g-500);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tip p{font-size:var(--f14);color:var(--t-600);line-height:1.7;}
.tip strong{color:var(--g-600);}

.out-g{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s6);}
.out-c{padding:var(--s5);border-radius:var(--rad-m);text-align:center;border:1px solid var(--b-light);background:var(--bg-card);box-shadow:var(--sh-sm);transition:var(--tr);}
.out-c:hover{transform:translateY(-3px);box-shadow:var(--sh-md);}
.out-num{font-family:'Playfair Display',serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:700;margin-bottom:var(--s2);line-height:1;}
.out-c:nth-child(1) .out-num{color:rgba(34,160,34,.45);}
.out-c:nth-child(2) .out-num{color:rgba(212,144,10,.5);}
.out-c:nth-child(3) .out-num{color:rgba(162,32,56,.45);}
.out-c h3{font-size:var(--f16);font-weight:600;color:var(--t-900);margin-bottom:var(--s2);}
.out-c p{font-size:var(--f14);color:var(--t-400);line-height:1.65;}

.cmp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:var(--s6);border:1px solid var(--b-light);border-radius:var(--rad-l);overflow:hidden;box-shadow:var(--sh-md);}
.cmp-head{background:var(--t-900);padding:var(--s3) var(--s4);font-family:'Cinzel',serif;font-size:var(--f10);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g-200);}
.cmp-head.r{color:var(--r-200);}
.cmp-row{display:contents;}
.cmp-row>div{padding:var(--s3) var(--s4);font-size:var(--f14);border-bottom:1px solid var(--b-light);border-right:1px solid var(--b-light);transition:background .2s;}
.cmp-row>div:last-child{border-right:none;}
.cmp-row:last-child>div{border-bottom:none;}
.cmp-row:hover>div{background:rgba(212,144,10,.03);}
.cmp-row>div:first-child{color:var(--t-600);font-weight:600;background:rgba(20,18,16,.02);}
.cmp-row>div:nth-child(2){color:var(--t-400);}
.cmp-row>div:nth-child(3){color:var(--t-400);}

@media(max-width:900px){
  .grd-wrap{grid-template-columns:1fr;}
  .out-g{grid-template-columns:1fr;}
  .cmp-grid{grid-template-columns:1fr;}
  .cmp-head:nth-child(2),.cmp-head:nth-child(3){display:none;}
  .cmp-row>div:nth-child(2)::before{content:'Objection: ';font-weight:600;color:var(--t-600);}
  .cmp-row>div:nth-child(3)::before{content:'Opposition: ';font-weight:600;color:var(--t-600);}
  .cmp-row>div{border-right:none;}
  .cmp-row>div:not(:last-child){border-bottom:1px solid var(--b-light);}
  .cmp-row:last-child>div:last-child{border-bottom:none;}
}
@media(max-width:768px){
  .out-g{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .grd-wrap{grid-template-columns:1fr;}
  .out-g{grid-template-columns:1fr;}
  .grd-head{flex-direction:column;align-items:center;gap:var(--s2);}
  .warn,.tip{flex-direction:column;gap:var(--s2);}
  .warn-ico,.tip-ico{width:18px;height:18px;}
  .cmp-row>div{padding:var(--s2) var(--s3);font-size:var(--f12);}
  .cmp-head{padding:var(--s2) var(--s3);font-size:9px;}
  .out-num{font-size:clamp(1.5rem,6vw,2rem);}
}

@media(max-width:360px){
  .grd-body{padding:var(--s3) var(--s3);}
  .grd-head{padding:var(--s3) var(--s3);}
  .warn,.tip{padding:var(--s3) var(--s3);}
  .out-c{padding:var(--s4) var(--s3);}
  .cmp-grid{font-size:var(--f12);}
  .grd-body li{font-size:var(--f12);}
  .grd-body .sub{font-size:11px;}
}

@media(max-width:320px){
  .grd-badge{font-size:9px;padding:3px 7px;}
  .grd-head h3{font-size:var(--f16);}
  .cmp-row>div:nth-child(2)::before{content:'Obj: ';}
  .cmp-row>div:nth-child(3)::before{content:'Opp: ';}
  .warn p,.tip p{font-size:var(--f12);}
}

/*_________________________________Trademark Search Page_____________________________________________*/
/* ══════════════════════════════════════
   TRADEMARK SEARCH PAGE  (prefix: ts-)
   Sections: hero · what · why · types · how · results · check · faq
══════════════════════════════════════ */

/* ─────────────────────────────────────
   ts-hero
───────────────────────────────────── */
.ts-hero {
  background: linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-dark2) 100%);
  padding: clamp(7rem,14vw,12rem) 0 clamp(4rem,8vw,7rem);
  position: relative;
  overflow: hidden;
}

.ts-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(184,122,0,.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(26,75,139,.06) 0%, transparent 70%);
  pointer-events: none;
}

.ts-hero-inner {
  max-width: clamp(560px, 72vw, 860px);
  margin: 0 auto;
  padding: 0 var(--s5);
  text-align: center;
  position: relative;
  z-index: 1;
}

.ts-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-200);
  background: rgba(212,144,10,.1);
  border: 1px solid rgba(212,144,10,.2);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: var(--s4);
}

.ts-hero-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-300);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

.ts-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  color: var(--t-inv);
  line-height: 1.1;
  margin-bottom: var(--s4);
}

.ts-hero-title span {
  background: linear-gradient(135deg, var(--g-200), var(--g-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ts-hero-sub {
  font-size: var(--f18);
  color: rgba(240,236,230,.65);
  line-height: 1.75;
  max-width: 700px;
  margin: 0 auto var(--s5);
}

.ts-hero-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.ts-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  flex-wrap: wrap;
  border-top: 1px solid rgba(240,236,230,.08);
  padding-top: var(--s5);
}

.ts-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ts-hero-stat-v {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 700;
  color: var(--g-200);
  line-height: 1;
}

.ts-hero-stat-l {
  font-size: var(--f11);
  color: rgba(240,236,230,.45);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────
   ts-what
───────────────────────────────────── */
.ts-what { padding: var(--s8) 0; background: var(--bg-base); }

.ts-what-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--s7);
  align-items: start;
  margin-top: var(--s6);
}

.ts-what-points {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s4);
}

.ts-what-pt {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.ts-what-pt:hover { transform: translateX(4px); box-shadow: var(--sh-md); }

.ts-what-pt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--r-400);
  flex-shrink: 0;
  margin-top: 5px;
}

.ts-what-pt h4 {
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: 3px;
}

.ts-what-pt p {
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.6;
}

.ts-what-visual { display: flex; justify-content: center; align-items: flex-start; padding-top: var(--s6); }

/* ─────────────────────────────────────
   ts-why
───────────────────────────────────── */
.ts-why { padding: var(--s8) 0; background: var(--bg-alt); }

.ts-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.ts-why-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  position: relative;
}

.ts-why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.ts-why-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--g-400);
  margin-bottom: var(--s2);
}

.ts-why-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
  line-height: 1.3;
}

.ts-why-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   ts-types
───────────────────────────────────── */
.ts-types { padding: var(--s8) 0; background: var(--bg-base); }

.ts-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.ts-type-card {
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  transition: var(--tr);
}

.ts-type-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.ts-type-header {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s4);
  border-bottom: 1px solid var(--b-light);
}

.ts-type-wm { background: rgba(184,122,0,.06); }
.ts-type-ph { background: rgba(26,75,139,.06); }
.ts-type-vc { background: rgba(162,32,56,.06); }

.ts-type-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ts-type-wm .ts-type-icon { background: rgba(184,122,0,.1); border: 1px solid rgba(184,122,0,.2); }
.ts-type-ph .ts-type-icon { background: rgba(26,75,139,.1); border: 1px solid rgba(26,75,139,.15); }
.ts-type-vc .ts-type-icon { background: rgba(162,32,56,.08); border: 1px solid rgba(162,32,56,.15); }

.ts-type-wm .ts-type-icon svg { stroke: var(--g-500); width: 20px; height: 20px; }
.ts-type-ph .ts-type-icon svg { stroke: var(--r-400); width: 20px; height: 20px; }
.ts-type-vc .ts-type-icon svg { stroke: var(--r-300); width: 20px; height: 20px; }

.ts-type-badge {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-300);
  margin-bottom: 3px;
}

.ts-type-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.2;
}

.ts-type-desc {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.7;
  padding: var(--s4) var(--s4) 0;
}

.ts-type-opts {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  flex: 1;
}

.ts-type-opt {
  padding: var(--s2) var(--s3);
  border-radius: var(--rad-s);
  background: var(--bg-alt);
  border-left: 2px solid var(--b-gold);
}

.ts-type-opt-tag {
  display: block;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g-600);
  margin-bottom: 3px;
}

.ts-type-opt p { font-size: var(--f13); color: var(--t-400); line-height: 1.6; }

.ts-type-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: var(--s3) var(--s4);
  background: rgba(212,144,10,.04);
  border-top: 1px solid rgba(212,144,10,.12);
}

.ts-type-note svg { width: 14px; height: 14px; stroke: var(--g-500); flex-shrink: 0; margin-top: 2px; }
.ts-type-note p { font-size: var(--f12); color: var(--t-400); line-height: 1.6; }

/* ─────────────────────────────────────
   ts-how
───────────────────────────────────── */
.ts-how { padding: var(--s8) 0; background: var(--bg-alt); }

.ts-how-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--s6);
  position: relative;
}

.ts-how-steps::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--b-gold), var(--b-light));
}

.ts-how-step {
  display: flex;
  gap: var(--s5);
  align-items: flex-start;
  padding: var(--s4) 0 var(--s5);
  position: relative;
}

.ts-how-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--b-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  color: var(--g-500);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.ts-how-step:hover .ts-how-num {
  background: var(--g-400);
  color: var(--bg-dark);
  border-color: var(--g-400);
}

.ts-how-body {
  padding-top: 14px;
  flex: 1;
}

.ts-how-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}

.ts-how-body p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.75;
  max-width: 720px;
}

.ts-how-link {
  margin-top: var(--s3);
}

.ts-how-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--f13);
  font-weight: 500;
  color: var(--g-500);
  text-decoration: none;
  border-bottom: 1px solid var(--b-gold);
  padding-bottom: 1px;
  transition: color .25s, border-color .25s;
}

.ts-how-link a:hover { color: var(--g-300); border-color: var(--g-300); }
.ts-how-link svg { width: 13px; height: 13px; stroke: currentColor; }

/* ─────────────────────────────────────
   ts-results
───────────────────────────────────── */
.ts-results { padding: var(--s8) 0; background: var(--bg-base); }

.ts-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s6);
}

.ts-status-card {
  padding: var(--s4) var(--s5);
  border-radius: var(--rad-m);
  border: 1px solid var(--b-light);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  position: relative;
  padding-left: calc(var(--s5) + 14px);
  transition: var(--tr);
}

.ts-status-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

.ts-status-dot {
  position: absolute;
  left: var(--s4);
  top: var(--s4);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}

.ts-status-safe .ts-status-dot  { background: #06B6D4; }
.ts-status-warn .ts-status-dot  { background: #ff9800; }
.ts-status-pend .ts-status-dot  { background: #6b6864; }
.ts-status-ok   .ts-status-dot  { background: #DC3545; }
.ts-status-exp  .ts-status-dot  { background: #92400E }
.ts-status-info .ts-status-dot  { background: #991B1B; }

.ts-status-card h3 {
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}

.ts-status-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

.ts-results-tip {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--b-gold);
  border-left: 3px solid var(--g-400);
  border-radius: var(--rad-m);
  background: rgba(212,144,10,.04);
}

.ts-results-tip-ico {
  width: 36px;
  height: 36px;
  background: rgba(212,144,10,.1);
  border-radius: var(--rad-s);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ts-results-tip-ico svg { width: 16px; height: 16px; stroke: var(--g-500); }

.ts-results-tip h4 {
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: 4px;
}

.ts-results-tip p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   ts-check
───────────────────────────────────── */
.ts-check { padding: var(--s8) 0; background: var(--bg-alt); }

.ts-check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.ts-check-col {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
}

.ts-check-col h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--b-light);
}

.ts-check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.ts-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
}

.ts-check-ico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(34,160,34,.1);
  border: 1px solid rgba(34,160,34,.25);
  color: #22a022;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ts-check-err {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(194,40,69,.08);
  border: 1px solid rgba(194,40,69,.2);
  color: var(--r-300);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─────────────────────────────────────
   ts-faq  (uses shared .fl .fi .fq .fa
   classes from style.css — no overrides
   needed, section has its own padding)
───────────────────────────────────── */
.ts-faq { padding: var(--s8) 0; background: var(--bg-base); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .ts-why-grid      { grid-template-columns: repeat(2, 1fr); }
  .ts-types-grid    { grid-template-columns: repeat(2, 1fr); }
  .ts-results-grid  { grid-template-columns: repeat(2, 1fr); }
  .ts-check-grid    { grid-template-columns: repeat(2, 1fr); }
  .ts-what-grid     { grid-template-columns: 1fr; }
  .ts-what-visual   { display: none; }
  .ts-hero-title    { font-size: var(--f60); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .ts-hero-inner    { padding: 0 var(--s4); }
  .ts-hero-title    { font-size: var(--f48); }
  .ts-hero-sub      { font-size: var(--f16); }
  .ts-hero-stats    { gap: var(--s4); }
  .ts-hero-stat-v   { font-size: var(--f20); }

  .ts-why-grid      { grid-template-columns: 1fr; }
  .ts-types-grid    { grid-template-columns: 1fr; }
  .ts-results-grid  { grid-template-columns: 1fr; }
  .ts-check-grid    { grid-template-columns: 1fr; }

  .ts-how-steps::before { left: 22px; }
  .ts-how-num       { width: 44px; height: 44px; font-size: var(--f11); }
  .ts-how-step      { gap: var(--s3); }
  .ts-how-body h3   { font-size: var(--f18); }

  .ts-results-tip   { flex-direction: column; gap: var(--s3); }
  .ts-results-tip-ico { width: 32px; height: 32px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .ts-hero-title    { font-size: var(--f36); }
  .ts-hero-sub      { font-size: var(--f14); }
  .ts-hero-btns     { flex-direction: column; align-items: stretch; }
  .ts-hero-btns .btn-g,
  .ts-hero-btns .btn-o { text-align: center; justify-content: center; }
  .ts-hero-stats    { gap: var(--s3); }
  .ts-hero-stat-v   { font-size: var(--f18); }
  .ts-hero-stat-l   { font-size: 9px; }

  .ts-why-card,
  .ts-type-card,
  .ts-check-col     { padding: var(--s4); }

  .ts-type-header   { padding: var(--s3); gap: var(--s2); }
  .ts-type-icon     { width: 36px; height: 36px; }
  .ts-type-icon svg { width: 16px; height: 16px; }
  .ts-type-desc,
  .ts-type-opts     { padding-left: var(--s3); padding-right: var(--s3); }
  .ts-type-note     { padding: var(--s3); }

  .ts-how-steps::before { display: none; }
  .ts-how-step      { flex-direction: column; gap: var(--s2); padding-bottom: var(--s4); border-bottom: 1px solid var(--b-light); }
  .ts-how-step:last-child { border-bottom: none; }
  .ts-how-num       { width: 38px; height: 38px; font-size: var(--f10); margin: 0 auto; }
  .ts-how-body      { padding-top: 0; text-align: center; }
  .ts-how-body p {
    text-align: center;
  }
  .ts-results-tip h4 {
    text-align: center;
  }
  .ts-results-tip-ico {
    margin: 0 auto;
  }
  .ts-check-col h3 {
    text-align: center;
  }

  .ts-status-card   { padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 14px); }
  .ts-what-pt       { padding: var(--s3); }
  .ts-check-list li { font-size: var(--f13); }
  .ts-what-pt p {
    text-align: justify;
    hyphens: auto;
  }
  .ts-why-card p {
    text-align: justify;
  }
  .ts-type-desc, .ts-type-opts {
    text-align: justify;
  }
  
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .ts-hero-pill     { font-size: 8px; padding: 5px 12px; }
  .ts-hero-title    { font-size: var(--f28); }
  .ts-hero-sub      { font-size: var(--f13); }
  .ts-hero-stats    { flex-direction: column; gap: var(--s2); align-items: center; }

  .ts-type-header h3,
  .ts-how-body h3   { font-size: var(--f16); }

  .ts-results-tip   { padding: var(--s3); }
  .ts-type-opt      { padding: var(--s2); }
  .ts-type-opt p    { font-size: var(--f12); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .ts-hero-title    { font-size: var(--f24); }
  .ts-hero-pill     { font-size: 7px; letter-spacing: .1em; }
  .ts-why-card h3,
  .ts-check-col h3  { font-size: var(--f16); }
  .ts-how-num       { width: 32px; height: 32px; font-size: 9px; }
  .ts-type-badge    { font-size: 8px; }
  .ts-check-ico,
  .ts-check-err     { width: 18px; height: 18px; font-size: 10px; }
  .ts-status-card   { padding-left: var(--s3); }
  .ts-status-dot    { left: 8px; }
}

/*___________________________________________Well Known Trademark Page______________________________*/

/* ══════════════════════════════════════
   WELL-KNOWN TRADEMARK PAGE  (prefix: wt-)
   Sections: hero · what · vs · crit · ben · docs · proc · cases · faq
══════════════════════════════════════ */

/* ─────────────────────────────────────
   wt-hero
───────────────────────────────────── */
.wt-hero {
  background: linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-dark2) 100%);
  padding: clamp(7rem,14vw,12rem) 0 clamp(4rem,8vw,7rem);
  position: relative;
  overflow: hidden;
}

.wt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 75% 35%, rgba(212,144,10,.08) 0%, transparent 70%),
    radial-gradient(ellipse 45% 60% at 15% 75%, rgba(162,32,56,.06) 0%, transparent 70%);
  pointer-events: none;
}

.wt-hero-inner {
  max-width: clamp(560px,72vw,860px);
  margin: 0 auto;
  padding: 0 var(--s5);
  text-align: center;
  position: relative;
  z-index: 1;
}

.wt-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-200);
  background: rgba(212,144,10,.1);
  border: 1px solid rgba(212,144,10,.2);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: var(--s4);
}

.wt-hero-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-300);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

.wt-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  color: var(--t-inv);
  line-height: 1.1;
  margin-bottom: var(--s4);
}

.wt-hero-title span {
  background: linear-gradient(135deg, var(--g-200), var(--g-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wt-hero-sub {
  font-size: var(--f18);
  color: rgba(240,236,230,.65);
  line-height: 1.75;
  max-width: 700px;
  margin: 0 auto var(--s5);
}

.wt-hero-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.wt-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  flex-wrap: wrap;
  border-top: 1px solid rgba(240,236,230,.08);
  padding-top: var(--s5);
}

.wt-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.wt-hero-stat-v {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 700;
  color: var(--g-200);
  line-height: 1;
}

.wt-hero-stat-l {
  font-size: var(--f11);
  color: rgba(240,236,230,.45);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────
   wt-what
───────────────────────────────────── */
.wt-what { padding: var(--s8) 0; background: var(--bg-base); }

.wt-what-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--s7);
  align-items: start;
  margin-top: var(--s6);
}

.wt-what-body { display: flex; flex-direction: column; gap: var(--s4); }

.wt-what-examples {
  padding: var(--s4) var(--s5);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-l);
  background: rgba(212,144,10,.04);
}

.wt-what-ex-label {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-600);
  margin-bottom: var(--s3);
}

.wt-what-ex-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.wt-what-chip {
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--t-900);
  background: var(--bg-card);
  border: 1px solid var(--b-mid);
  border-radius: var(--rad-s);
  padding: 5px 12px;
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.wt-what-chip:hover {
  border-color: var(--b-gold);
  color: var(--g-600);
  box-shadow: var(--sh-md);
}

.wt-what-visual { display: flex; justify-content: center; align-items: flex-start; padding-top: var(--s6); }

/* ─────────────────────────────────────
   wt-vs
───────────────────────────────────── */
.wt-vs { padding: var(--s8) 0; background: var(--bg-alt); }

.wt-vs-table {
  margin-top: var(--s6);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.wt-vs-head {
  display: grid;
  grid-template-columns: 1.2fr 2fr 2fr;
  background: var(--bg-dark);
}

.wt-vs-head > div {
  padding: var(--s3) var(--s4);
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(240,236,230,.6);
}

.wt-vs-hl { color: var(--g-200) !important; }

.wt-vs-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 2fr;
  border-bottom: 1px solid var(--b-light);
  transition: background .2s;
}

.wt-vs-row:last-child { border-bottom: none; }
.wt-vs-row:hover > div { background: rgba(212,144,10,.03); }

.wt-vs-row > div {
  padding: var(--s3) var(--s4);
  font-size: var(--f14);
  color: var(--t-400);
  border-right: 1px solid var(--b-light);
  line-height: 1.65;
}

.wt-vs-row > div:last-child { border-right: none; }

.wt-vs-label {
  font-weight: 600;
  color: var(--t-600) !important;
  background: rgba(20,18,16,.02);
}

.wt-vs-row .wt-vs-hl {
  color: var(--t-400) !important;
  background: rgba(212,144,10,.03);
  border-left: 2px solid var(--b-gold);
}

/* ─────────────────────────────────────
   wt-crit
───────────────────────────────────── */
.wt-crit { padding: var(--s8) 0; background: var(--bg-base); }

.wt-crit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.wt-crit-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  position: relative;
}

.wt-crit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.wt-crit-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--g-400);
  margin-bottom: var(--s2);
}

.wt-crit-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
  line-height: 1.3;
}

.wt-crit-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   wt-ben
───────────────────────────────────── */
.wt-ben { padding: var(--s8) 0; background: var(--bg-alt); }

.wt-ben-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.wt-ben-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.wt-ben-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.wt-ben-large {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(212,144,10,.04) 0%, var(--bg-card) 60%);
  border-color: var(--b-gold);
}

.wt-ben-ico {
  width: 44px;
  height: 44px;
  background: rgba(212,144,10,.08);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s3);
  flex-shrink: 0;
}

.wt-ben-ico svg {
  width: 20px;
  height: 20px;
  stroke: var(--g-500);
}

.wt-ben-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
  line-height: 1.3;
}

.wt-ben-large h3 { font-size: var(--f20); }

.wt-ben-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   wt-docs
───────────────────────────────────── */
.wt-docs { padding: var(--s8) 0; background: var(--bg-base); }

.wt-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.wt-docs-col {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.wt-docs-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--b-light);
}

.wt-docs-ico {
  width: 36px;
  height: 36px;
  background: rgba(212,144,10,.08);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-s);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wt-docs-ico svg { width: 16px; height: 16px; stroke: var(--g-500); }

.wt-docs-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.wt-docs-list {
  list-style: none;
  padding: var(--s4) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.wt-docs-list li {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
  padding-left: 16px;
  position: relative;
}

.wt-docs-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--g-400);
}

/* ─────────────────────────────────────
   wt-proc (reuses shared .ts .tn .tb
   classes from style.css — no overrides)
───────────────────────────────────── */
.wt-proc { padding: var(--s8) 0; background: var(--bg-alt); }

/* ─────────────────────────────────────
   wt-cases
───────────────────────────────────── */
.wt-cases { padding: var(--s8) 0; background: var(--bg-base); }

.wt-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.wt-case-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.wt-case-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.wt-case-mark {
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--g-500);
  background: rgba(212,144,10,.08);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-s);
  padding: 5px 12px;
  display: inline-block;
  width: fit-content;
}

.wt-case-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.35;
}

.wt-case-facts {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.7;
}

.wt-case-held {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.7;
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--g-400);
  background: rgba(212,144,10,.04);
  border-radius: 0 var(--rad-s) var(--rad-s) 0;
  margin-top: auto;
}

.wt-case-held span {
  font-weight: 600;
  color: var(--g-600);
  display: block;
  margin-bottom: 3px;
  font-size: var(--f12);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: 'Cinzel', serif;
}

/* ─────────────────────────────────────
   wt-faq (uses shared .fl .fi .fq .fa)
───────────────────────────────────── */
.wt-faq { padding: var(--s8) 0; background: var(--bg-alt); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .wt-crit-grid   { grid-template-columns: repeat(2, 1fr); }
  .wt-ben-grid    { grid-template-columns: repeat(2, 1fr); }
  .wt-ben-large   { grid-column: span 2; }
  .wt-docs-grid   { grid-template-columns: repeat(2, 1fr); }
  .wt-cases-grid  { grid-template-columns: repeat(2, 1fr); }
  .wt-what-grid   { grid-template-columns: 1fr; }
  .wt-what-visual { display: none; }
  .wt-hero-title  { font-size: var(--f60); }

  .wt-vs-head,
  .wt-vs-row      { grid-template-columns: 1fr 1.5fr 1.5fr; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .wt-hero-inner  { padding: 0 var(--s4); }
  .wt-hero-title  { font-size: var(--f48); }
  .wt-hero-sub    { font-size: var(--f16); }
  .wt-hero-stats  { gap: var(--s4); }
  .wt-hero-stat-v { font-size: var(--f20); }

  .wt-crit-grid   { grid-template-columns: 1fr; }
  .wt-ben-grid    { grid-template-columns: 1fr; }
  .wt-ben-large   { grid-column: span 1; }
  .wt-docs-grid   { grid-template-columns: 1fr; }
  .wt-cases-grid  { grid-template-columns: 1fr; }

  /* Collapse comparison table on mobile */
  .wt-vs-head     { grid-template-columns: 1fr; }
  .wt-vs-head > div:nth-child(2) { display: none; }
  .wt-vs-head > div:nth-child(3) { display: none; }
  .wt-vs-head > div:first-child  { display: none; }
  .wt-vs-row      { grid-template-columns: 1fr; }
  .wt-vs-row > div { border-right: none; border-bottom: 1px solid var(--b-light); }
  .wt-vs-row > div:last-child { border-bottom: none; }
  .wt-vs-row > div:nth-child(2)::before { content: 'Regular: '; font-weight: 600; color: var(--t-600); }
  .wt-vs-row .wt-vs-hl::before { content: 'Well-Known: '; font-weight: 600; color: var(--g-600); }
  .wt-vs-row .wt-vs-hl { border-left: none; border-top: 2px solid var(--b-gold); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .wt-hero-title  { font-size: var(--f36); }
  .wt-hero-sub    { font-size: var(--f14); }
  .wt-hero-btns   { flex-direction: column; align-items: stretch; }
  .wt-hero-btns .btn-g,
  .wt-hero-btns .btn-o { text-align: center; justify-content: center; }
  .wt-hero-stats  { gap: var(--s3); }
  .wt-hero-stat-v { font-size: var(--f18); }
  .wt-hero-stat-l { font-size: 9px; }

  .wt-crit-card,
  .wt-ben-card,
  .wt-case-card   { padding: var(--s4); }

  .wt-docs-head   { padding: var(--s3) var(--s4); gap: var(--s2); justify-content: center; }
  .wt-docs-ico    { width: 30px; height: 30px; }
  .wt-docs-ico svg { width: 14px; height: 14px; }
  .wt-docs-list   { padding: var(--s3) var(--s4); }

  .wt-what-examples { padding: var(--s3) var(--s4); }
  .wt-what-chip   { font-size: var(--f11); padding: 4px 10px; }

  .wt-ben-ico     { width: 38px; height: 38px; margin: 1rem auto; }
  .wt-ben-ico svg { width: 17px; height: 17px; }
  .wt-ben-card h3 {
    text-align: center;
  }
  .wt-case-title {
    text-align: center;
  }
  .wt-case-mark {
    margin: auto;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .wt-hero-pill   { font-size: 8px; padding: 5px 12px; }
  .wt-hero-title  { font-size: var(--f28); }
  .wt-hero-sub    { font-size: var(--f13); }
  .wt-hero-stats  { flex-direction: column; align-items: center; gap: var(--s2); }

  .wt-crit-card h3,
  .wt-ben-card h3,
  .wt-case-title  { font-size: var(--f16); }

  .wt-what-ex-chips { gap: 6px; }
  .wt-what-chip   { font-size: 10px; padding: 3px 8px; }

  .wt-case-mark   { font-size: 10px; padding: 4px 10px; }
  .wt-case-held   { padding: var(--s2) var(--s3); }
  .wt-docs-list li { font-size: var(--f13); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .wt-hero-title  { font-size: var(--f24); }
  .wt-hero-pill   { font-size: 7px; letter-spacing: .1em; }
  .wt-crit-card,
  .wt-ben-card    { padding: var(--s3); }
  .wt-crit-num,
  .wt-ben-large h3 { font-size: var(--f14); }
  .wt-docs-head h3 { font-size: var(--f14); }
  .wt-case-card   { padding: var(--s3); }
  .wt-ben-ico     { width: 32px; height: 32px; }
  .wt-ben-ico svg { width: 14px; height: 14px; }
}

/*______________________________________________Trademark Watch ____________________________________________*/

/* ══════════════════════════════════════
   TRADEMARK WATCH PAGE  (prefix: tw-)
   Sections: hero · what · why · types · how · action · who · faq
══════════════════════════════════════ */

/* ─────────────────────────────────────
   tw-hero
───────────────────────────────────── */
.tw-hero {
  background: linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-dark2) 100%);
  padding: clamp(7rem,14vw,12rem) 0 clamp(4rem,8vw,7rem);
  position: relative;
  overflow: hidden;
}

.tw-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 80% 30%, rgba(162,32,56,.09) 0%, transparent 70%),
    radial-gradient(ellipse 45% 60% at 10% 80%, rgba(212,144,10,.06) 0%, transparent 70%);
  pointer-events: none;
}

.tw-hero-inner {
  max-width: clamp(560px,72vw,860px);
  margin: 0 auto;
  padding: 0 var(--s5);
  text-align: center;
  position: relative;
  z-index: 1;
}

.tw-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-200);
  background: rgba(212,144,10,.1);
  border: 1px solid rgba(212,144,10,.2);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: var(--s4);
}

.tw-hero-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-300);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

.tw-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  color: var(--t-inv);
  line-height: 1.1;
  margin-bottom: var(--s4);
}

.tw-hero-title span {
  background: linear-gradient(135deg, var(--g-200), var(--g-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tw-hero-sub {
  font-size: var(--f18);
  color: rgba(240,236,230,.65);
  line-height: 1.75;
  max-width: 700px;
  margin: 0 auto var(--s5);
}

.tw-hero-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.tw-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  flex-wrap: wrap;
  border-top: 1px solid rgba(240,236,230,.08);
  padding-top: var(--s5);
}

.tw-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tw-hero-stat-v {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 700;
  color: var(--g-200);
  line-height: 1;
}

.tw-hero-stat-l {
  font-size: var(--f11);
  color: rgba(240,236,230,.45);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────
   tw-what
───────────────────────────────────── */
.tw-what { padding: var(--s8) 0; background: var(--bg-base); }

.tw-what-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--s7);
  align-items: start;
  margin-top: var(--s6);
}

.tw-what-body { display: flex; flex-direction: column; gap: var(--s4); }

.tw-what-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: rgba(162,32,56,.06);
  border: 1px solid rgba(162,32,56,.2);
  border-left: 3px solid #a82038;
  border-radius: var(--rad-m);
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
}

.tw-what-alert strong { color: var(--t-700); }

.tw-what-alert-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(162,32,56,.1);
  border-radius: var(--rad-s);
  margin-top: 1px;
}

.tw-what-alert-ico svg {
  width: 16px;
  height: 16px;
  stroke: #c0313d;
}

.tw-what-visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--s6);
}

/* ─────────────────────────────────────
   tw-why
───────────────────────────────────── */
.tw-why { padding: var(--s8) 0; background: var(--bg-alt); }

.tw-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.tw-why-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.tw-why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: rgba(162,32,56,.25);
}

.tw-why-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s3);
  flex-shrink: 0;
}

.tw-why-icon-red {
  background: rgba(162,32,56,.08);
  border: 1px solid rgba(162,32,56,.2);
}

.tw-why-icon-red svg { stroke: #c0313d; width: 20px; height: 20px; }

.tw-why-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
  line-height: 1.3;
}

.tw-why-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   tw-types
───────────────────────────────────── */
.tw-types { padding: var(--s8) 0; background: var(--bg-base); }

.tw-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.tw-type-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.tw-type-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.tw-type-badge {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .16em;
  display: inline-block;
  width: fit-content;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid;
}

.tw-type-badge-1 { color: var(--g-500); background: rgba(212,144,10,.08); border-color: var(--b-gold); }
.tw-type-badge-2 { color: #3b7dd8; background: rgba(59,125,216,.08); border-color: rgba(59,125,216,.3); }
.tw-type-badge-3 { color: #2e9e5a; background: rgba(46,158,90,.08); border-color: rgba(46,158,90,.3); }
.tw-type-badge-4 { color: #9b59b6; background: rgba(155,89,182,.08); border-color: rgba(155,89,182,.3); }
.tw-type-badge-5 { color: #c0313d; background: rgba(162,32,56,.08); border-color: rgba(162,32,56,.25); }

.tw-type-icon {
  width: 44px;
  height: 44px;
  background: rgba(212,144,10,.08);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tw-type-icon svg { width: 20px; height: 20px; stroke: var(--g-500); }

.tw-type-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.tw-type-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.7;
  flex: 1;
}

.tw-type-covers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: var(--s2);
  border-top: 1px solid var(--b-light);
  margin-top: auto;
}

.tw-type-covers span {
  font-size: var(--f12);
  color: var(--t-500);
  background: var(--bg-alt);
  border: 1px solid var(--b-mid);
  border-radius: var(--rad-s);
  padding: 3px 10px;
}

/* ─────────────────────────────────────
   tw-how  (timeline — parallel to .ts .tn .tb in style.css
   but scoped independently for this section)
───────────────────────────────────── */
.tw-how { padding: var(--s8) 0; background: var(--bg-alt); }

.tw-how-timeline {
  margin-top: var(--s6);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 60px;
}

.tw-how-timeline::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(to bottom, var(--b-gold), transparent);
}

.tw-how-step {
  display: flex;
  gap: var(--s5);
  padding-bottom: var(--s6);
  position: relative;
}

.tw-how-step:last-child { padding-bottom: 0; }

.tw-how-num {
  position: absolute;
  left: -60px;
  top: 0;
  width: 44px;
  height: 44px;
  background: var(--bg-dark);
  border: 1px solid var(--b-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  color: var(--g-300);
  letter-spacing: .06em;
  flex-shrink: 0;
  z-index: 1;
}

.tw-how-body {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm);
  flex: 1;
  transition: var(--tr);
}

.tw-how-body:hover {
  border-color: var(--b-gold);
  box-shadow: var(--sh-md);
}

.tw-how-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}

.tw-how-body p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   tw-action
───────────────────────────────────── */
.tw-action { padding: var(--s8) 0; background: var(--bg-base); }

.tw-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.tw-action-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.tw-action-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.tw-action-best {
  border-color: rgba(46,158,90,.3);
  background: linear-gradient(135deg, rgba(46,158,90,.04), var(--bg-card));
}

.tw-action-primary {
  border-color: var(--b-gold);
  background: linear-gradient(135deg, rgba(212,144,10,.05), var(--bg-card));
}

.tw-action-tag {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-500);
  border: 1px solid var(--b-gold);
  background: rgba(212,144,10,.06);
  border-radius: 100px;
  padding: 4px 12px;
  width: fit-content;
}

.tw-action-best .tw-action-tag {
  color: #2e9e5a;
  border-color: rgba(46,158,90,.3);
  background: rgba(46,158,90,.06);
}

.tw-action-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.tw-action-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.7;
  flex: 1;
}

.tw-action-when {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--f13);
  color: var(--t-500);
  padding-top: var(--s3);
  border-top: 1px solid var(--b-light);
  margin-top: auto;
}

.tw-action-when svg { width: 14px; height: 14px; stroke: var(--g-400); flex-shrink: 0; }

/* ─────────────────────────────────────
   tw-who
───────────────────────────────────── */
.tw-who { padding: var(--s8) 0; background: var(--bg-alt); }

.tw-who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.tw-who-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.tw-who-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.tw-who-ico {
  width: 44px;
  height: 44px;
  background: rgba(212,144,10,.08);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s3);
}

.tw-who-ico svg { width: 20px; height: 20px; stroke: var(--g-500); }

.tw-who-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
  line-height: 1.3;
}

.tw-who-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   tw-faq  (uses shared .fl .fi .fq .fa)
───────────────────────────────────── */
.tw-faq { padding: var(--s8) 0; background: var(--bg-base); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .tw-hero-title    { font-size: var(--f60); }
  .tw-what-grid     { grid-template-columns: 1fr; }
  .tw-what-visual   { display: none; }
  .tw-why-grid      { grid-template-columns: repeat(2, 1fr); }
  .tw-types-grid    { grid-template-columns: repeat(2, 1fr); }
  .tw-action-grid   { grid-template-columns: repeat(2, 1fr); }
  .tw-who-grid      { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .tw-hero-inner    { padding: 0 var(--s4); }
  .tw-hero-title    { font-size: var(--f48); }
  .tw-hero-sub      { font-size: var(--f16); }
  .tw-hero-stats    { gap: var(--s4); }
  .tw-hero-stat-v   { font-size: var(--f20); }

  .tw-why-grid      { grid-template-columns: 1fr; }
  .tw-types-grid    { grid-template-columns: 1fr; }
  .tw-action-grid   { grid-template-columns: 1fr; }
  .tw-who-grid      { grid-template-columns: 1fr; }

  .tw-how-timeline  { padding-left: 50px; }
  .tw-how-timeline::before { left: 18px; }
  .tw-how-num       { left: -50px; width: 38px; height: 38px; font-size: var(--f10); }

  .tw-what-alert    { flex-direction: column; gap: var(--s2); }
  .tw-what-alert-ico { width: 28px; height: 28px; }
  .tw-what-alert-ico svg { width: 14px; height: 14px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .tw-hero-title    { font-size: var(--f36); }
  .tw-hero-sub      { font-size: var(--f14); }
  .tw-hero-btns     { flex-direction: column; align-items: stretch; }
  .tw-hero-btns .btn-g,
  .tw-hero-btns .btn-o { text-align: center; justify-content: center; }
  .tw-hero-stats    { gap: var(--s3); }
  .tw-hero-stat-v   { font-size: var(--f18); }
  .tw-hero-stat-l   { font-size: 9px; }

  .tw-how-timeline  { padding-left: 44px; }
  .tw-how-timeline::before { display: none; }
  .tw-how-num       { left: -44px; width: 34px; height: 34px; font-size: 9px; }
  .tw-how-body      { padding: var(--s3) var(--s4); }
  .tw-how-body h3   { font-size: var(--f16); }

  .tw-why-card,
  .tw-type-card,
  .tw-action-card,
  .tw-who-card      { padding: var(--s4); }

  .tw-type-covers span { font-size: 11px; padding: 2px 8px; }
  .tw-action-when   { font-size: var(--f12); }
  .tw-why-card h3 {
    text-align: center;
  }
  .tw-why-icon-red {
    margin: 1rem auto;
  }
  .tw-why-card h3 {
    text-align: center;
  }
  .tw-type-icon {
    margin: auto;
  }
  .tw-type-card h3 {
    text-align: center;
  }
  .tw-type-covers {
    justify-content: center;
  }
  .tw-action-tag {
    margin: auto;
  }
  .tw-action-card h3 {
    text-align: center;
  }
  .tw-who-ico {
    margin: 1rem auto;
  }
  .tw-who-card h3 {
    text-align: center;
  }

}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .tw-hero-pill     { font-size: 8px; padding: 5px 12px; }
  .tw-hero-title    { font-size: var(--f28); }
  .tw-hero-sub      { font-size: var(--f13); }
  .tw-hero-stats    { flex-direction: column; align-items: center; gap: var(--s2); }

  .tw-why-card h3,
  .tw-type-card h3,
  .tw-action-card h3,
  .tw-who-card h3   { font-size: var(--f16); }

  .tw-how-body h3   { font-size: var(--f15); }
  .tw-type-covers span { font-size: 10px; }
  .tw-what-alert    { padding: var(--s3); font-size: var(--f13); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .tw-hero-title    { font-size: var(--f24); }
  .tw-hero-pill     { font-size: 7px; letter-spacing: .1em; }
  .tw-why-card,
  .tw-type-card,
  .tw-action-card,
  .tw-who-card      { padding: var(--s3); }
  .tw-why-icon,
  .tw-type-icon,
  .tw-who-ico       { width: 36px; height: 36px; }
  .tw-why-icon svg,
  .tw-type-icon svg,
  .tw-who-ico svg   { width: 16px; height: 16px; }
  .tw-how-timeline  { padding-left: 38px; }
  .tw-how-num       { left: -38px; width: 30px; height: 30px; font-size: 8px; }
  .tw-how-body      { padding: var(--s3); }
  .tw-action-tag    { font-size: 8px; padding: 3px 10px; }
}

/*___________________________________Trademark Renewal______________________________________*/

/* ══════════════════════════════════════
   TRADEMARK RENEWAL PAGE  (prefix: tr2-)
   Sections: hero · what · dead · fees · docs · proc · cons · ben · faq
   NOTE: tr- prefix is already used by another page, so this uses tr2-
══════════════════════════════════════ */

/* ─────────────────────────────────────
   tr2-hero
───────────────────────────────────── */
.tr2-hero {
  background: linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-dark2) 100%);
  padding: clamp(7rem, 14vw, 12rem) 0 clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}

.tr2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 55% at 70% 25%, rgba(212,144,10,.09) 0%, transparent 70%),
    radial-gradient(ellipse 50% 55% at 20% 80%, rgba(212,144,10,.05) 0%, transparent 70%);
  pointer-events: none;
}

.tr2-hero-inner {
  max-width: clamp(560px, 72vw, 860px);
  margin: 0 auto;
  padding: 0 var(--s5);
  text-align: center;
  position: relative;
  z-index: 1;
}

.tr2-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-200);
  background: rgba(212,144,10,.1);
  border: 1px solid rgba(212,144,10,.2);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: var(--s4);
}

.tr2-hero-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-300);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

.tr2-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  color: var(--t-inv);
  line-height: 1.1;
  margin-bottom: var(--s4);
}

.tr2-hero-title span {
  background: linear-gradient(135deg, var(--g-200), var(--g-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tr2-hero-sub {
  font-size: var(--f18);
  color: rgba(240,236,230,.65);
  line-height: 1.75;
  max-width: 700px;
  margin: 0 auto var(--s5);
}

.tr2-hero-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.tr2-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  flex-wrap: wrap;
  border-top: 1px solid rgba(240,236,230,.08);
  padding-top: var(--s5);
}

.tr2-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tr2-hero-stat-v {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 700;
  color: var(--g-200);
  line-height: 1;
}

.tr2-hero-stat-l {
  font-size: var(--f11);
  color: rgba(240,236,230,.45);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────
   tr2-what
───────────────────────────────────── */
.tr2-what { padding: var(--s8) 0; background: var(--bg-base); }

.tr2-what-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--s7);
  align-items: start;
  margin-top: var(--s6);
}

.tr2-what-body { display: flex; flex-direction: column; gap: var(--s4); }

.tr2-what-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: rgba(212,144,10,.05);
  border: 1px solid var(--b-gold);
  border-left: 3px solid var(--g-400);
  border-radius: var(--rad-m);
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
}

.tr2-what-note strong { color: var(--t-700); }

.tr2-what-note-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,144,10,.1);
  border-radius: var(--rad-s);
  margin-top: 1px;
}

.tr2-what-note-ico svg { width: 16px; height: 16px; stroke: var(--g-500); }

.tr2-what-visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--s6);
}

/* ─────────────────────────────────────
   tr2-dead  (deadline timeline)
───────────────────────────────────── */
.tr2-dead { padding: var(--s8) 0; background: var(--bg-alt); }

.tr2-dead-track {
  position: relative;
  margin-top: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding-left: 20px;
}

.tr2-dead-bar {
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 3px;
  background: linear-gradient(
    to bottom,
    #2e9e5a 0%,
    #d4840a 35%,
    #c0313d 65%,
    #7a1a22 100%
  );
  border-radius: 3px;
}

.tr2-dead-stage {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  position: relative;
}

.tr2-dead-dot {
  position: absolute;
  left: -26px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg-alt);
  flex-shrink: 0;
  z-index: 1;
}

.tr2-dead-dot-green   { background: #2e9e5a; }
.tr2-dead-dot-amber   { background: #d4840a; }
.tr2-dead-dot-red     { background: #c0313d; }
.tr2-dead-dot-darkred { background: #7a1a22; }

.tr2-dead-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4) var(--s5);
  flex: 1;
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.tr2-dead-card:hover {
  box-shadow: var(--sh-md);
  transform: translateX(3px);
}

.tr2-dead-green .tr2-dead-card  { border-left: 3px solid #2e9e5a; }
.tr2-dead-amber .tr2-dead-card  { border-left: 3px solid #d4840a; }
.tr2-dead-red   .tr2-dead-card  { border-left: 3px solid #c0313d; }
.tr2-dead-darkred .tr2-dead-card { border-left: 3px solid #7a1a22; }

.tr2-dead-label {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid;
  margin-bottom: var(--s2);
}

.tr2-dead-label-green   { color: #2e9e5a; border-color: rgba(46,158,90,.3); background: rgba(46,158,90,.08); }
.tr2-dead-label-amber   { color: #c07800; border-color: rgba(212,132,10,.35); background: rgba(212,132,10,.08); }
.tr2-dead-label-red     { color: #c0313d; border-color: rgba(192,49,61,.3); background: rgba(192,49,61,.07); }
.tr2-dead-label-darkred { color: #7a1a22; border-color: rgba(122,26,34,.3); background: rgba(122,26,34,.07); }

.tr2-dead-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
  line-height: 1.3;
}

.tr2-dead-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.7;
  margin-bottom: var(--s3);
}

.tr2-dead-fee {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--b-light);
  flex-wrap: wrap;
}

.tr2-dead-fee-label {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-500);
}

.tr2-dead-fee-val {
  font-size: var(--f14);
  font-weight: 600;
}

.tr2-dead-fee-green   { color: #2e9e5a; }
.tr2-dead-fee-amber   { color: #c07800; }
.tr2-dead-fee-red     { color: #c0313d; }
.tr2-dead-fee-darkred { color: #7a1a22; }

/* ─────────────────────────────────────
   tr2-fees  (fee table)
───────────────────────────────────── */
.tr2-fees { padding: var(--s8) 0; background: var(--bg-base); }

.tr2-fees-table {
  margin-top: var(--s6);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.tr2-fees-head {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1.2fr 2fr;
  background: var(--bg-dark);
}

.tr2-fees-head > div {
  padding: var(--s3) var(--s4);
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(240,236,230,.55);
  border-right: 1px solid rgba(240,236,230,.06);
}

.tr2-fees-head > div:last-child { border-right: none; }

.tr2-fees-row {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1.2fr 2fr;
  border-bottom: 1px solid var(--b-light);
  transition: background .2s;
}

.tr2-fees-row:last-child { border-bottom: none; }
.tr2-fees-row:hover > div { background: rgba(212,144,10,.02); }
.tr2-fees-best { background: rgba(46,158,90,.03); }
.tr2-fees-na { background: rgba(122,26,34,.03); }

.tr2-fees-row > div {
  padding: var(--s3) var(--s4);
  font-size: var(--f14);
  color: var(--t-400);
  border-right: 1px solid var(--b-light);
  line-height: 1.6;
  vertical-align: middle;
}

.tr2-fees-row > div:last-child { border-right: none; }

.tr2-fees-scenario {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 500;
  color: var(--t-600) !important;
}

.tr2-fees-badge {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid;
  width: fit-content;
}

.tr2-fees-badge-green   { color: #2e9e5a; border-color: rgba(46,158,90,.3); background: rgba(46,158,90,.07); }
.tr2-fees-badge-amber   { color: #c07800; border-color: rgba(212,132,10,.35); background: rgba(212,132,10,.07); }
.tr2-fees-badge-red     { color: #c0313d; border-color: rgba(192,49,61,.3); background: rgba(192,49,61,.06); }
.tr2-fees-badge-dark    { color: var(--t-400); border-color: var(--b-mid); background: var(--bg-alt); }

.tr2-fees-val {
  font-weight: 700;
  color: var(--t-800) !important;
}

.tr2-fees-val span { font-size: var(--f12); font-weight: 400; color: var(--t-400); }
.tr2-fees-val small { display: block; font-size: var(--f12); font-weight: 400; color: var(--t-400); margin-top: 2px; }

.tr2-fees-val-green   { color: #2e9e5a !important; }
.tr2-fees-val-amber   { color: #c07800 !important; }
.tr2-fees-val-red     { color: #c0313d !important; }
.tr2-fees-val-na      { color: var(--t-400) !important; font-weight: 400 !important; font-style: italic; }

.tr2-fees-note { color: var(--t-400) !important; font-size: var(--f13) !important; }

.tr2-fees-note-box {
  margin-top: var(--s4);
  padding: var(--s3) var(--s5);
  background: rgba(212,144,10,.04);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.7;
}

/* ─────────────────────────────────────
   tr2-docs
───────────────────────────────────── */
.tr2-docs { padding: var(--s8) 0; background: var(--bg-alt); }

.tr2-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.tr2-doc-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  position: relative;
}

.tr2-doc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.tr2-doc-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--g-400);
  margin-bottom: var(--s2);
}

.tr2-doc-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
  line-height: 1.3;
}

.tr2-doc-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   tr2-proc  (reuses shared .ts .tn .tb from style.css)
───────────────────────────────────── */
.tr2-proc { padding: var(--s8) 0; background: var(--bg-base); }

/* ─────────────────────────────────────
   tr2-cons  (consequences section)
───────────────────────────────────── */
.tr2-cons { padding: var(--s8) 0; background: var(--bg-alt); }

.tr2-cons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.tr2-cons-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.tr2-cons-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: rgba(162,32,56,.25);
}

.tr2-cons-ico {
  width: 44px;
  height: 44px;
  background: rgba(162,32,56,.07);
  border: 1px solid rgba(162,32,56,.2);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s3);
}

.tr2-cons-ico svg { width: 20px; height: 20px; stroke: #c0313d; }

.tr2-cons-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
  line-height: 1.3;
}

.tr2-cons-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   tr2-ben
───────────────────────────────────── */
.tr2-ben { padding: var(--s8) 0; background: var(--bg-base); }

.tr2-ben-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.tr2-ben-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}

.tr2-ben-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.tr2-ben-ico {
  width: 44px;
  height: 44px;
  background: rgba(212,144,10,.08);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s3);
}

.tr2-ben-ico svg { width: 20px; height: 20px; stroke: var(--g-500); }

.tr2-ben-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
  line-height: 1.3;
}

.tr2-ben-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   tr2-faq  (uses shared .fl .fi .fq .fa)
───────────────────────────────────── */
.tr2-faq { padding: var(--s8) 0; background: var(--bg-alt); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .tr2-hero-title   { font-size: var(--f60); }
  .tr2-what-grid    { grid-template-columns: 1fr; }
  .tr2-what-visual  { display: none; }
  .tr2-docs-grid    { grid-template-columns: repeat(2, 1fr); }
  .tr2-cons-grid    { grid-template-columns: repeat(2, 1fr); }
  .tr2-ben-grid     { grid-template-columns: repeat(2, 1fr); }

  .tr2-fees-head,
  .tr2-fees-row     { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .tr2-hero-inner   { padding: 0 var(--s4); }
  .tr2-hero-title   { font-size: var(--f48); }
  .tr2-hero-sub     { font-size: var(--f16); }
  .tr2-hero-stats   { gap: var(--s4); }
  .tr2-hero-stat-v  { font-size: var(--f20); }

  .tr2-docs-grid    { grid-template-columns: 1fr; }
  .tr2-cons-grid    { grid-template-columns: 1fr; }
  .tr2-ben-grid     { grid-template-columns: 1fr; }

  /* Simplify fee table on tablet */
  .tr2-fees-head    { grid-template-columns: 1fr 1fr; }
  .tr2-fees-head > div:nth-child(3),
  .tr2-fees-head > div:nth-child(4) { display: none; }
  .tr2-fees-row     { grid-template-columns: 1fr 1fr; }
  .tr2-fees-row > div:nth-child(3),
  .tr2-fees-row > div:nth-child(4)  { display: none; }

  .tr2-dead-track   { padding-left: 16px; }
  .tr2-dead-bar     { left: -2px; }
  .tr2-dead-dot     { left: -24px; width: 12px; height: 12px; }
  .tr2-dead-card    { padding: var(--s4); }

  .tr2-what-note    { flex-direction: column; gap: var(--s2); }
  .tr2-what-note-ico { width: 28px; height: 28px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .tr2-hero-title   { font-size: var(--f36); }
  .tr2-hero-sub     { font-size: var(--f14); }
  .tr2-hero-btns    { flex-direction: column; align-items: stretch; }
  .tr2-hero-btns .btn-g,
  .tr2-hero-btns .btn-o { text-align: center; justify-content: center; }
  .tr2-hero-stats   { gap: var(--s3); }
  .tr2-hero-stat-v  { font-size: var(--f18); }
  .tr2-hero-stat-l  { font-size: 9px; }

  .tr2-dead-track   { padding-left: 14px; }
  .tr2-dead-bar     { display: none; }
  .tr2-dead-dot     { left: -22px; width: 10px; height: 10px; top: 20px; }
  .tr2-dead-card h3 { font-size: var(--f16); }
  .tr2-dead-fee     { flex-direction: column; align-items: flex-start; gap: 3px; }
  .tr2-dead-fee-val { font-size: var(--f13); }

  .tr2-fees-head,
  .tr2-fees-row     { grid-template-columns: 1fr; }
  .tr2-fees-head > div:not(:first-child) { display: none; }
  .tr2-fees-row > div:not(:first-child),
  .tr2-fees-row > div:nth-child(2) { display: none; }
  .tr2-fees-val     { display: block; }
  /* Show all columns stacked on mobile via flex trick */
  .tr2-fees-row     { display: flex; flex-direction: column; }
  .tr2-fees-row > div { border-right: none; border-bottom: 1px solid var(--b-light); }
  .tr2-fees-row > div:last-child { border-bottom: none; }
  .tr2-fees-row > div:nth-child(3)::before { content: 'Physical: '; font-weight: 600; color: var(--t-600); font-size: var(--f12); }
  .tr2-fees-row > div:nth-child(4) { display: none; }

  .tr2-doc-card,
  .tr2-cons-card,
  .tr2-ben-card     { padding: var(--s4); }
  .tr2-cons-card h3 {
    text-align: center;
  }
  .tr2-cons-ico {
    margin: 1rem auto;
  }
  .tr2-ben-card h3 {
    text-align: center;
  }
  .tr2-ben-ico {
    margin: 1rem auto;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .tr2-hero-pill    { font-size: 8px; padding: 5px 12px; }
  .tr2-hero-title   { font-size: var(--f28); }
  .tr2-hero-sub     { font-size: var(--f13); }
  .tr2-hero-stats   { flex-direction: column; align-items: center; gap: var(--s2); }

  .tr2-doc-card h3,
  .tr2-cons-card h3,
  .tr2-ben-card h3  { font-size: var(--f16); }

  .tr2-what-note    { padding: var(--s3); font-size: var(--f13); }
  .tr2-dead-label   { font-size: 8px; }
  .tr2-dead-card h3 { font-size: var(--f15); }
  .tr2-cons-ico,
  .tr2-ben-ico      { width: 36px; height: 36px; }
  .tr2-cons-ico svg,
  .tr2-ben-ico svg  { width: 16px; height: 16px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .tr2-hero-title   { font-size: var(--f24); }
  .tr2-hero-pill    { font-size: 7px; letter-spacing: .1em; }
  .tr2-doc-card,
  .tr2-cons-card,
  .tr2-ben-card     { padding: var(--s3); }
  .tr2-dead-card    { padding: var(--s3); }
  .tr2-fees-note-box { padding: var(--s3) var(--s4); font-size: var(--f12); }
  .tr2-doc-num      { font-size: 9px; }
}

/*_______________________________________Trademark Assignment_________________________________*/

/* ══════════════════════════════════════
   TRADEMARK ASSIGNMENT PAGE  (prefix: ta-)
   Sections: hero · what · avt · types · restr · deed · docs · proc · fees · avl · faq
══════════════════════════════════════ */

/* ─────────────────────────────────────
   ta-hero
───────────────────────────────────── */
.ta-hero {
  background: linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-dark2) 100%);
  padding: clamp(7rem, 14vw, 12rem) 0 clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}

.ta-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 75% 20%, rgba(212,144,10,.1) 0%, transparent 65%),
    radial-gradient(ellipse 40% 55% at 15% 85%, rgba(162,32,56,.07) 0%, transparent 65%);
  pointer-events: none;
}

.ta-hero-inner {
  max-width: clamp(560px, 72vw, 860px);
  margin: 0 auto;
  padding: 0 var(--s5);
  text-align: center;
  position: relative;
  z-index: 1;
}

.ta-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-200);
  background: rgba(212,144,10,.1);
  border: 1px solid rgba(212,144,10,.2);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: var(--s4);
}

.ta-hero-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-300);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

.ta-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  color: var(--t-inv);
  line-height: 1.1;
  margin-bottom: var(--s4);
}

.ta-hero-title span {
  background: linear-gradient(135deg, var(--g-200), var(--g-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ta-hero-sub {
  font-size: var(--f18);
  color: rgba(240,236,230,.65);
  line-height: 1.75;
  max-width: 720px;
  margin: 0 auto var(--s5);
}

.ta-hero-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.ta-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  flex-wrap: wrap;
  border-top: 1px solid rgba(240,236,230,.08);
  padding-top: var(--s5);
}

.ta-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ta-hero-stat-v {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 700;
  color: var(--g-200);
  line-height: 1;
}

.ta-hero-stat-l {
  font-size: var(--f11);
  color: rgba(240,236,230,.45);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────
   ta-what
───────────────────────────────────── */
.ta-what { padding: var(--s8) 0; background: var(--bg-base); }

.ta-what-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--s7);
  align-items: start;
  margin-top: var(--s6);
}

.ta-what-body { display: flex; flex-direction: column; gap: var(--s4); }

/* Assignor → Assignee compare panel */
.ta-what-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s3);
  align-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4);
}

.ta-what-compare-col {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.ta-what-compare-head {
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--rad-s);
  text-align: center;
  margin-bottom: 4px;
}

.ta-wc-assignor {
  color: #c0313d;
  background: rgba(162,32,56,.08);
  border: 1px solid rgba(162,32,56,.2);
}

.ta-wc-assignee {
  color: #2e9e5a;
  background: rgba(46,158,90,.08);
  border: 1px solid rgba(46,158,90,.2);
}

.ta-what-compare-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ta-what-compare-col li {
  font-size: var(--f13);
  color: var(--t-400);
  display: flex;
  align-items: center;
  gap: 7px;
}

.ta-what-compare-col li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--g-400);
  flex-shrink: 0;
}

.ta-what-compare-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--g-400);
}

.ta-what-compare-arrow svg {
  width: 48px;
  stroke: var(--g-400);
}

.ta-what-compare-arrow span {
  font-size: var(--f11);
  color: var(--t-400);
  text-align: center;
  line-height: 1.4;
}

.ta-what-visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--s4);
}

/* ─────────────────────────────────────
   ta-avt  (assignment vs transmission)
───────────────────────────────────── */
.ta-avt { padding: var(--s8) 0; background: var(--bg-alt); }

.ta-avt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin-top: var(--s6);
}

.ta-avt-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.ta-avt-a {
  border-top: 3px solid var(--g-400);
}

.ta-avt-b {
  border-top: 3px solid #3b7dd8;
}

.ta-avt-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.ta-avt-badge {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid;
  width: fit-content;
}

.ta-avt-badge-a {
  color: var(--g-500);
  background: rgba(212,144,10,.08);
  border-color: var(--b-gold);
}

.ta-avt-badge-b {
  color: #3b7dd8;
  background: rgba(59,125,216,.08);
  border-color: rgba(59,125,216,.3);
}

.ta-avt-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f22);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.ta-avt-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.75;
  flex: 1;
}

.ta-avt-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--s3) 0;
  border-top: 1px solid var(--b-light);
}

.ta-avt-examples span {
  font-size: var(--f12);
  color: var(--t-500);
  background: var(--bg-alt);
  border: 1px solid var(--b-mid);
  border-radius: var(--rad-s);
  padding: 3px 10px;
}

.ta-avt-form {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--f13);
}

.ta-avt-form-label {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-500);
}

.ta-avt-form-val {
  font-weight: 600;
  color: var(--g-500);
}

/* ─────────────────────────────────────
   ta-types  (4 types of assignment)
───────────────────────────────────── */
.ta-types { padding: var(--s8) 0; background: var(--bg-base); }

.ta-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
  margin-top: var(--s6);
}

.ta-type-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.ta-type-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.ta-type-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--g-400);
}

.ta-type-ico {
  width: 44px;
  height: 44px;
  background: rgba(212,144,10,.08);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ta-type-ico svg { width: 20px; height: 20px; stroke: var(--g-500); }

.ta-type-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.ta-type-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.75;
  flex: 1;
}

.ta-type-example {
  background: var(--bg-alt);
  border: 1px solid var(--b-light);
  border-left: 3px solid var(--g-400);
  border-radius: var(--rad-s);
  padding: var(--s3) var(--s4);
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.65;
}

.ta-type-example strong { color: var(--t-700); }

.ta-type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--s2);
  border-top: 1px solid var(--b-light);
}

.ta-type-tags span {
  font-size: var(--f12);
  color: var(--t-500);
  background: var(--bg-alt);
  border: 1px solid var(--b-mid);
  border-radius: var(--rad-s);
  padding: 3px 10px;
}

/* ─────────────────────────────────────
   ta-restr  (legal restrictions)
───────────────────────────────────── */
.ta-restr { padding: var(--s8) 0; background: var(--bg-alt); }

.ta-restr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin-top: var(--s6);
}

.ta-restr-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.ta-restr-card:hover {
  box-shadow: var(--sh-md);
  border-color: rgba(162,32,56,.25);
}

.ta-restr-ico {
  width: 44px;
  height: 44px;
  background: rgba(162,32,56,.07);
  border: 1px solid rgba(162,32,56,.2);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ta-restr-ico svg { width: 20px; height: 20px; stroke: #c0313d; }

.ta-restr-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .12em;
  color: #c0313d;
  background: rgba(162,32,56,.07);
  border: 1px solid rgba(162,32,56,.2);
  border-radius: 100px;
  padding: 4px 12px;
  width: fit-content;
}

.ta-restr-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.35;
}

.ta-restr-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.75;
}

.ta-restr-exception {
  background: rgba(212,144,10,.05);
  border: 1px solid var(--b-gold);
  border-left: 3px solid var(--g-400);
  border-radius: var(--rad-s);
  padding: var(--s3) var(--s4);
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.65;
  margin-top: auto;
}

.ta-restr-exception strong { color: var(--t-700); }

/* ─────────────────────────────────────
   ta-deed  (assignment deed elements)
───────────────────────────────────── */
.ta-deed { padding: var(--s8) 0; background: var(--bg-base); }

.ta-deed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.ta-deed-elem {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.ta-deed-elem:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.ta-deed-ico {
  width: 40px;
  height: 40px;
  background: rgba(212,144,10,.08);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.ta-deed-ico svg { width: 18px; height: 18px; stroke: var(--g-500); }

.ta-deed-elem h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.ta-deed-elem p { font-size: var(--f13); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   ta-docs  (documents required)
───────────────────────────────────── */
.ta-docs { padding: var(--s8) 0; background: var(--bg-alt); }

.ta-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.ta-doc-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.ta-doc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.ta-doc-req { border-top: 3px solid #c0313d; }
.ta-doc-rec { border-top: 3px solid var(--g-400); }
.ta-doc-cond { border-top: 3px solid #3b7dd8; }

.ta-doc-tag {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid;
  width: fit-content;
  margin-bottom: 4px;
}

.ta-doc-tag-req  { color: #c0313d; border-color: rgba(192,49,61,.3); background: rgba(192,49,61,.06); }
.ta-doc-tag-rec  { color: var(--g-500); border-color: var(--b-gold); background: rgba(212,144,10,.06); }
.ta-doc-tag-cond { color: #3b7dd8; border-color: rgba(59,125,216,.3); background: rgba(59,125,216,.06); }

.ta-doc-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  color: var(--t-400);
  letter-spacing: .1em;
}

.ta-doc-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f17);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.ta-doc-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   ta-proc  (reuses shared .ts .tn .tb)
───────────────────────────────────── */
.ta-proc { padding: var(--s8) 0; background: var(--bg-base); }

/* ─────────────────────────────────────
   ta-fees  (fee table)
───────────────────────────────────── */
.ta-fees { padding: var(--s8) 0; background: var(--bg-alt); }

.ta-fees-table {
  margin-top: var(--s6);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.ta-fees-head {
  display: grid;
  grid-template-columns: 2.5fr 2fr 1fr 1fr;
  background: var(--bg-dark);
}

.ta-fees-head > div {
  padding: var(--s3) var(--s4);
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,236,230,.5);
  border-right: 1px solid rgba(240,236,230,.06);
}

.ta-fees-head > div:last-child { border-right: none; }

.ta-fees-row {
  display: grid;
  grid-template-columns: 2.5fr 2fr 1fr 1fr;
  border-bottom: 1px solid var(--b-light);
  transition: background .18s;
}

.ta-fees-row:last-child { border-bottom: none; }
.ta-fees-row:hover > div { background: rgba(212,144,10,.02); }
.ta-fees-main { background: rgba(212,144,10,.03); }

.ta-fees-row > div {
  padding: var(--s3) var(--s4);
  font-size: var(--f14);
  color: var(--t-400);
  border-right: 1px solid var(--b-light);
  line-height: 1.6;
}

.ta-fees-row > div:last-child { border-right: none; }

.ta-fees-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 500;
  color: var(--t-600) !important;
}

.ta-fees-form {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--g-500);
  background: rgba(212,144,10,.08);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-s);
  padding: 3px 10px;
  width: fit-content;
}

.ta-fees-val {
  font-weight: 700;
  color: var(--t-800) !important;
}

.ta-fees-val span {
  font-size: var(--f12);
  font-weight: 400;
  color: var(--t-400);
}

.ta-fees-val-gold { color: var(--g-500) !important; }

.ta-fees-note {
  margin-top: var(--s4);
  padding: var(--s3) var(--s5);
  background: rgba(212,144,10,.04);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.7;
}

/* ─────────────────────────────────────
   ta-avl  (assignment vs licence comparison table)
───────────────────────────────────── */
.ta-avl { padding: var(--s8) 0; background: var(--bg-base); }

.ta-avl-table {
  margin-top: var(--s6);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.ta-avl-head {
  display: grid;
  grid-template-columns: 1.5fr 2fr 2fr;
  background: var(--bg-dark);
}

.ta-avl-head > div {
  padding: var(--s3) var(--s4);
  font-family: 'Playfair Display', serif;
  font-size: var(--f14);
  font-weight: 600;
  color: rgba(240,236,230,.7);
  border-right: 1px solid rgba(240,236,230,.08);
}

.ta-avl-head > div:last-child { border-right: none; }
.ta-avl-head-a { color: var(--g-200) !important; }
.ta-avl-head-b { color: #87b4f0 !important; }

.ta-avl-row {
  display: grid;
  grid-template-columns: 1.5fr 2fr 2fr;
  border-bottom: 1px solid var(--b-light);
  transition: background .18s;
}

.ta-avl-row:last-child { border-bottom: none; }
.ta-avl-row:nth-child(even) { background: rgba(0,0,0,.015); }
.ta-avl-row:hover > div { background: rgba(212,144,10,.02); }

.ta-avl-row > div {
  padding: var(--s3) var(--s4);
  font-size: var(--f14);
  color: var(--t-400);
  border-right: 1px solid var(--b-light);
  line-height: 1.6;
}

.ta-avl-row > div:last-child { border-right: none; }

.ta-avl-criterion {
  font-weight: 600;
  color: var(--t-700) !important;
  font-size: var(--f13) !important;
}

/* ─────────────────────────────────────
   ta-faq  (uses shared .fl .fi .fq .fa)
───────────────────────────────────── */
.ta-faq { padding: var(--s8) 0; background: var(--bg-alt); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .ta-hero-title    { font-size: var(--f60); }
  .ta-what-grid     { grid-template-columns: 1fr; }
  .ta-what-visual   { display: none; }
  .ta-deed-grid     { grid-template-columns: repeat(2, 1fr); }

  .ta-fees-head,
  .ta-fees-row      { grid-template-columns: 2fr 1.5fr 1fr 1fr; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .ta-hero-inner    { padding: 0 var(--s4); }
  .ta-hero-title    { font-size: var(--f48); }
  .ta-hero-sub      { font-size: var(--f16); }
  .ta-hero-stats    { gap: var(--s4); }
  .ta-hero-stat-v   { font-size: var(--f20); }

  .ta-avt-grid      { grid-template-columns: 1fr; }
  .ta-types-grid    { grid-template-columns: 1fr; }
  .ta-restr-grid    { grid-template-columns: 1fr; }
  .ta-deed-grid     { grid-template-columns: 1fr; }
  .ta-docs-grid     { grid-template-columns: 1fr; }

  .ta-what-compare  { grid-template-columns: 1fr; gap: var(--s2); }
  .ta-what-compare-arrow { transform: rotate(90deg); }

  /* Simplify fee and avl tables */
  .ta-fees-head,
  .ta-fees-row      { grid-template-columns: 2fr 1fr; }
  .ta-fees-head > div:nth-child(2),
  .ta-fees-head > div:nth-child(4),
  .ta-fees-row > div:nth-child(2),
  .ta-fees-row > div:nth-child(4) { display: none; }

  .ta-avl-head,
  .ta-avl-row       { grid-template-columns: 1fr 1fr; }
  .ta-avl-head > div:nth-child(3),
  .ta-avl-row > div:nth-child(3) { display: none; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .ta-hero-title    { font-size: var(--f36); }
  .ta-hero-sub      { font-size: var(--f14); }
  .ta-hero-btns     { flex-direction: column; align-items: stretch; }
  .ta-hero-btns .btn-g,
  .ta-hero-btns .btn-o { text-align: center; justify-content: center; }
  .ta-hero-stats    { gap: var(--s3); }
  .ta-hero-stat-v   { font-size: var(--f18); }
  .ta-hero-stat-l   { font-size: 9px; }

  .ta-type-card,
  .ta-restr-card,
  .ta-avt-card,
  .ta-deed-elem,
  .ta-doc-card      { padding: var(--s4); }

  .ta-type-card h3  { font-size: var(--f17);text-align: center; }
  .ta-type-ico {
    margin: auto;
  }
  .ta-type-tags {
    justify-content: center;
  }
  .ta-avt-card h3   { font-size: var(--f18); }

  .ta-fees-head,
  .ta-fees-row      { display: flex; flex-direction: column; }
  .ta-fees-head     { display: none; }
  .ta-fees-row > div { border-right: none; border-bottom: 1px solid var(--b-light); }
  .ta-fees-row > div:last-child { border-bottom: none; }
  .ta-fees-row > div:nth-child(2),
  .ta-fees-row > div:nth-child(4) { display: flex; }

  .ta-avl-head,
  .ta-avl-row       { display: flex; flex-direction: column; }
  .ta-avl-head      { display: none; }
  .ta-avl-row > div { border-right: none; border-bottom: 1px solid var(--b-light); }
  .ta-avl-row > div:last-child { border-bottom: none; }
  .ta-avl-row > div:nth-child(3) { display: flex; }

  .ta-what-compare  { padding: var(--s3); }
  .ta-what-compare-col li { font-size: var(--f12); }
  .ta-what-compare-col ul {
    margin: auto;
  }
  .ta-restr-num {
    margin: auto;
  }
  .ta-restr-card h3 {
    text-align: center;
  }
  .ta-doc-tag-req {
    margin: auto;
  }
  .ta-doc-tag-rec {
    margin: auto;
  }
  .ta-doc-tag-cond {
    margin: auto;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .ta-hero-pill     { font-size: 8px; padding: 5px 12px; }
  .ta-hero-title    { font-size: var(--f28); }
  .ta-hero-sub      { font-size: var(--f13); }
  .ta-hero-stats    { flex-direction: column; align-items: center; gap: var(--s2); }

  .ta-type-card h3,
  .ta-avt-card h3,
  .ta-restr-card h3 { font-size: var(--f16); }

  .ta-deed-ico,
  .ta-type-ico,
  .ta-restr-ico     { width: 36px; height: 36px; }
  .ta-deed-ico svg,
  .ta-type-ico svg,
  .ta-restr-ico svg { width: 16px; height: 16px; }

  .ta-avt-examples span { font-size: 10px; padding: 2px 8px; }
  .ta-type-tags span    { font-size: 10px; padding: 2px 8px; }
  .ta-type-example      { font-size: var(--f12); padding: var(--s2) var(--s3); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .ta-hero-title    { font-size: var(--f24); }
  .ta-hero-pill     { font-size: 7px; letter-spacing: .1em; }
  .ta-type-card,
  .ta-avt-card,
  .ta-restr-card,
  .ta-deed-elem,
  .ta-doc-card      { padding: var(--s3); }
  .ta-fees-note,
  .ta-restr-exception { padding: var(--s3) var(--s4); font-size: var(--f12); }
  .ta-avl-criterion { font-size: var(--f12) !important; }
}

/*____________________________________Trademark USA Registration___________________________________*/

/* ══════════════════════════════════════
   USA TRADEMARK REGISTRATION PAGE  (prefix: us-)
   Sections: hero · why · atty · basis · proc · fees · docs · time · comp · faq
══════════════════════════════════════ */

/* ─────────────────────────────────────
   us-hero
───────────────────────────────────── */
.us-hero {
  background: linear-gradient(170deg, #0a1628 0%, #0f2040 55%, #0a1a2e 100%);
  padding: clamp(7rem, 14vw, 12rem) 0 clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}

.us-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(60,59,110,.25) 0%, transparent 65%),
    radial-gradient(ellipse 40% 55% at 15% 80%, rgba(178,34,52,.12) 0%, transparent 65%);
  pointer-events: none;
}

/* Subtle flag-stripe background decoration */
.us-flag {
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  height: 100%;
  opacity: .04;
  pointer-events: none;
  overflow: hidden;
}

.us-flag-stripes {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.us-flag-stripes span {
  flex: 1;
  /*background: repeating-linear-gradient(
    0deg,
    #B22234 0px,
    #B22234 calc(100% / 13),
    #FFFFFF calc(100% / 13),
    #FFFFFF calc(200% / 13)
  ); */
}

.us-hero-inner {
  max-width: clamp(560px, 72vw, 860px);
  margin: 0 auto;
  padding: 0 var(--s5);
  text-align: center;
  position: relative;
  z-index: 1;
}

.us-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240,236,230,.75);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: var(--s4);
}

.us-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  color: #f0ece6;
  line-height: 1.1;
  margin-bottom: var(--s4);
}

.us-hero-title span {
  background: linear-gradient(135deg, #c8a84b, #e8cf84, #c8a84b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.us-hero-sub {
  font-size: var(--f18);
  color: rgba(240,236,230,.6);
  line-height: 1.75;
  max-width: 720px;
  margin: 0 auto var(--s5);
}

.us-hero-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.us-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  flex-wrap: wrap;
  border-top: 1px solid rgba(240,236,230,.08);
  padding-top: var(--s5);
}

.us-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.us-hero-stat-v {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 700;
  color: #c8a84b;
  line-height: 1;
}

.us-hero-stat-l {
  font-size: var(--f11);
  color: rgba(240,236,230,.4);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────
   us-why
───────────────────────────────────── */
.us-why { padding: var(--s8) 0; background: var(--bg-base); }

.us-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.us-why-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.us-why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.us-why-ico {
  width: 44px;
  height: 44px;
  background: rgba(60,59,110,.08);
  border: 1px solid rgba(60,59,110,.2);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
}

.us-why-ico svg { width: 20px; height: 20px; stroke: #3c3b6e; }

.us-why-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.us-why-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; }

/* ─────────────────────────────────────
   us-atty  (mandatory US attorney banner)
───────────────────────────────────── */
.us-atty { padding: var(--s6) 0; background: var(--bg-alt); }

.us-atty-banner {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s5);
  align-items: start;
  background: linear-gradient(135deg, rgba(60,59,110,.07) 0%, rgba(60,59,110,.03) 100%);
  border: 1px solid rgba(60,59,110,.2);
  border-left: 4px solid #3c3b6e;
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s6);
}

.us-atty-icon {
  width: 56px;
  height: 56px;
  background: rgba(60,59,110,.1);
  border: 1px solid rgba(60,59,110,.25);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.us-atty-icon svg { width: 26px; height: 26px; stroke: #3c3b6e; }

.us-atty-label {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #3c3b6e;
  background: rgba(60,59,110,.08);
  border: 1px solid rgba(60,59,110,.2);
  border-radius: 100px;
  padding: 4px 12px;
  width: fit-content;
  margin-bottom: var(--s3);
}

.us-atty-body h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f28);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
  margin-bottom: var(--s3);
}

.us-atty-body h2 em {
  font-style: italic;
  color: #3c3b6e;
}

.us-atty-body p {
  font-size: var(--f15);
  color: var(--t-400);
  line-height: 1.72;
  margin-bottom: var(--s3);
}

.us-atty-body p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────
   us-basis  (4 filing bases)
───────────────────────────────────── */
.us-basis { padding: var(--s8) 0; background: var(--bg-base); }

.us-basis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
}

.us-basis-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.us-basis-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.us-basis-rec {
  border: 2px solid var(--g-400);
  background: rgba(212,144,10,.02);
}

.us-basis-badge {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid;
  width: fit-content;
}

.us-basis-badge-gold {
  color: var(--g-500);
  background: rgba(212,144,10,.1);
  border-color: var(--g-400);
}

.us-basis-sec {
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .12em;
  color: #3c3b6e;
  padding: 4px 0;
  border-bottom: 1px solid var(--b-light);
}

.us-basis-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.us-basis-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.72;
}

.us-basis-key {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--s3) 0;
  border-top: 1px solid var(--b-light);
}

.us-basis-key-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.55;
}

.us-basis-key-item svg {
  width: 14px;
  height: 14px;
  stroke: #2e9e5a;
  flex-shrink: 0;
  margin-top: 2px;
}

.us-basis-suited {
  font-size: var(--f13);
  color: var(--t-400);
  background: var(--bg-alt);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-s);
  padding: var(--s2) var(--s3);
  margin-top: auto;
  line-height: 1.6;
}

.us-basis-suited strong { color: var(--t-700); }

/* Comparison table */
.us-basis-compare {
  margin-top: var(--s5);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.us-basis-compare-head {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.2fr 1.5fr;
  background: var(--bg-dark);
}

.us-basis-compare-head > div {
  padding: var(--s3) var(--s4);
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,236,230,.5);
  border-right: 1px solid rgba(240,236,230,.06);
}

.us-basis-compare-head > div:last-child { border-right: none; }

.us-basis-compare-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.2fr 1.5fr;
  border-bottom: 1px solid var(--b-light);
  transition: background .18s;
}

.us-basis-compare-row:last-child { border-bottom: none; }
.us-basis-compare-row:hover > div { background: rgba(212,144,10,.02); }
.us-bc-gold { background: rgba(212,144,10,.04); }

.us-basis-compare-row > div {
  padding: var(--s3) var(--s4);
  font-size: var(--f13);
  color: var(--t-400);
  border-right: 1px solid var(--b-light);
  line-height: 1.6;
}

.us-basis-compare-row > div:last-child { border-right: none; }

.us-bc-label {
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  color: #3c3b6e;
  background: rgba(60,59,110,.08);
  border: 1px solid rgba(60,59,110,.2);
  border-radius: var(--rad-s);
  padding: 3px 9px;
  white-space: nowrap;
}

.us-bc-no  { color: #2e9e5a; font-weight: 500; }
.us-bc-yes { color: #c07800; font-weight: 500; }

/* ─────────────────────────────────────
   us-proc  (reuses shared .ts .tn .tb)
───────────────────────────────────── */
.us-proc { padding: var(--s8) 0; background: var(--bg-alt); }

/* ─────────────────────────────────────
   us-fees  (fee table)
───────────────────────────────────── */
.us-fees { padding: var(--s8) 0; background: var(--bg-base); }

.us-fees-table {
  margin-top: var(--s6);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.us-fees-head {
  display: grid;
  grid-template-columns: 2.5fr 0.8fr 2fr;
  background: #0a1628;
}

.us-fees-head > div {
  padding: var(--s3) var(--s4);
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,168,75,.7);
  border-right: 1px solid rgba(200,168,75,.1);
}

.us-fees-head > div:last-child { border-right: none; }

.us-fees-row {
  display: grid;
  grid-template-columns: 2.5fr 0.8fr 2fr;
  border-bottom: 1px solid var(--b-light);
  transition: background .18s;
}

.us-fees-row:last-child { border-bottom: none; }
.us-fees-row:hover > div { background: rgba(60,59,110,.02); }
.us-fees-main { background: rgba(60,59,110,.03); }

.us-fees-row > div {
  padding: var(--s3) var(--s4);
  font-size: var(--f14);
  color: var(--t-400);
  border-right: 1px solid var(--b-light);
  line-height: 1.6;
}

.us-fees-row > div:last-child { border-right: none; }

.us-fees-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--f13);
  color: var(--t-600) !important;
}

.us-fees-form {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  color: #3c3b6e;
  background: rgba(60,59,110,.08);
  border: 1px solid rgba(60,59,110,.2);
  border-radius: var(--rad-s);
  padding: 3px 10px;
  width: fit-content;
}

.us-fees-val {
  font-family: 'Playfair Display', serif;
  font-size: var(--f22);
  font-weight: 700;
  color: var(--t-900) !important;
}

.us-fees-val span {
  font-size: var(--f13);
  font-weight: 400;
  color: var(--t-400);
  font-family: 'Jost', sans-serif;
}

.us-fees-val-gold  { color: var(--g-500) !important; }
.us-fees-val-amber { color: #c07800 !important; font-size: var(--f18) !important; }

.us-fees-note { font-size: var(--f13); color: var(--t-400) !important; }

.us-fees-note-box {
  margin-top: var(--s4);
  padding: var(--s3) var(--s5);
  background: rgba(60,59,110,.04);
  border: 1px solid rgba(60,59,110,.15);
  border-radius: var(--rad-m);
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.7;
}

/* ─────────────────────────────────────
   us-docs  (documents required)
───────────────────────────────────── */
.us-docs { padding: var(--s8) 0; background: var(--bg-alt); }

.us-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.us-doc-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.us-doc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.us-doc-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  color: var(--g-400);
  letter-spacing: .14em;
}

.us-doc-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f17);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.us-doc-card p { font-size: var(--f14); color: var(--t-400); line-height: 1.7; flex: 1; }

.us-doc-req, .us-doc-opt {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid;
  width: fit-content;
  margin-top: auto;
}

.us-doc-req {
  color: #2e9e5a;
  border-color: rgba(46,158,90,.3);
  background: rgba(46,158,90,.07);
}

.us-doc-opt {
  color: #3c3b6e;
  border-color: rgba(60,59,110,.3);
  background: rgba(60,59,110,.07);
}

/* ─────────────────────────────────────
   us-time  (timeline visual)
───────────────────────────────────── */
.us-time { padding: var(--s8) 0; background: var(--bg-base); }

.us-time-track {
  position: relative;
  margin-top: var(--s6);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.us-time-bar {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: linear-gradient(to bottom, #3c3b6e 0%, #b22234 50%, #3c3b6e 100%);
  border-radius: 3px;
}

.us-time-stage {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  position: relative;
}

.us-time-dot {
  position: absolute;
  left: -26px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--g-400);
  border: 2px solid var(--bg-base);
  z-index: 1;
}

.us-time-info {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s3) var(--s5);
  flex: 1;
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s3);
  align-items: center;
}

.us-time-info:hover {
  border-color: var(--b-gold);
  box-shadow: var(--sh-md);
  transform: translateX(3px);
}

.us-time-when {
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--g-500);
  background: rgba(212,144,10,.07);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-s);
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
}

.us-time-ev {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: 4px;
}

.us-time-detail {
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.6;
}

/* ─────────────────────────────────────
   us-comp  (India vs USA comparison)
───────────────────────────────────── */
.us-comp { padding: var(--s8) 0; background: var(--bg-alt); }

.us-comp-table {
  margin-top: var(--s6);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.us-comp-head {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr 1.8fr;
  background: var(--bg-dark);
}

.us-comp-head > div {
  padding: var(--s3) var(--s4);
  font-family: 'Playfair Display', serif;
  font-size: var(--f15);
  font-weight: 600;
  color: rgba(240,236,230,.65);
  border-right: 1px solid rgba(240,236,230,.08);
}

.us-comp-head > div:last-child { border-right: none; }
.us-comp-in  { color: var(--g-200) !important; }
.us-comp-us  { color: #87b4f0 !important; }

.us-comp-row {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr 1.8fr;
  border-bottom: 1px solid var(--b-light);
  transition: background .18s;
}

.us-comp-row:last-child { border-bottom: none; }
.us-comp-row:nth-child(even) { background: rgba(0,0,0,.015); }
.us-comp-row:hover > div { background: rgba(60,59,110,.025); }

.us-comp-row > div {
  padding: var(--s3) var(--s4);
  font-size: var(--f14);
  color: var(--t-400);
  border-right: 1px solid var(--b-light);
  line-height: 1.6;
}

.us-comp-row > div:last-child { border-right: none; }

.us-comp-crit {
  font-weight: 600;
  color: var(--t-700) !important;
  font-size: var(--f13) !important;
}

/* ─────────────────────────────────────
   us-faq  (uses shared .fl .fi .fq .fa)
───────────────────────────────────── */
.us-faq { padding: var(--s8) 0; background: var(--bg-base); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .us-hero-title          { font-size: var(--f60); }
  .us-why-grid            { grid-template-columns: repeat(2, 1fr); }
  .us-basis-grid          { grid-template-columns: 1fr; }
  .us-docs-grid           { grid-template-columns: repeat(2, 1fr); }

  .us-basis-compare-head,
  .us-basis-compare-row   { grid-template-columns: 0.8fr 1.5fr 1fr 1.5fr; }

  .us-fees-head,
  .us-fees-row            { grid-template-columns: 2fr 0.7fr 1.5fr; }

  .us-time-info           { grid-template-columns: 100px 1fr; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .us-hero-inner          { padding: 0 var(--s4); }
  .us-hero-title          { font-size: var(--f48); }
  .us-hero-sub            { font-size: var(--f16); }
  .us-hero-stats          { gap: var(--s4); }
  .us-hero-stat-v         { font-size: var(--f20); }

  .us-why-grid            { grid-template-columns: 1fr; }
  .us-docs-grid           { grid-template-columns: 1fr; }

  .us-atty-banner         { grid-template-columns: 1fr; }
  .us-atty-icon           { display: none; }
  .us-atty-body h2        { font-size: var(--f22); }

  .us-basis-compare-head,
  .us-basis-compare-row   { grid-template-columns: 0.8fr 1.5fr 1fr; }
  .us-basis-compare-head > div:last-child,
  .us-basis-compare-row > div:last-child { display: none; }

  .us-fees-head,
  .us-fees-row            { grid-template-columns: 2fr 0.7fr; }
  .us-fees-head > div:last-child,
  .us-fees-row > div:last-child { display: none; }

  .us-time-info           { grid-template-columns: 1fr; gap: var(--s2); }
  .us-time-when           { text-align: left; width: fit-content; }

  .us-comp-head,
  .us-comp-row            { grid-template-columns: 1fr 1fr; }
  .us-comp-head > div:last-child,
  .us-comp-row > div:last-child { display: none; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .us-hero-title          { font-size: var(--f36); }
  .us-hero-sub            { font-size: var(--f14); }
  .us-hero-btns           { flex-direction: column; align-items: stretch; }
  .us-hero-btns .btn-g,
  .us-hero-btns .btn-o    { text-align: center; justify-content: center; }
  .us-hero-stats          { gap: var(--s3); }
  .us-hero-stat-v         { font-size: var(--f18); }
  .us-hero-stat-l         { font-size: 9px; }

  .us-basis-card          { padding: var(--s4); }
  .us-why-card,
  .us-doc-card            { padding: var(--s4); }

  .us-basis-compare-head  { display: none; }
  .us-basis-compare-row   { display: flex; flex-direction: column; gap: 0; }
  .us-basis-compare-row > div { border-right: none; border-bottom: 1px solid var(--b-light); }
  .us-basis-compare-row > div:last-child { border-bottom: none; }
  .us-basis-compare-row > div:nth-child(3),
  .us-basis-compare-row > div:nth-child(4) { display: flex; }

  .us-fees-head           { display: none; }
  .us-fees-row            { display: flex; flex-direction: column; }
  .us-fees-row > div      { border-right: none; border-bottom: 1px solid var(--b-light); }
  .us-fees-row > div:last-child { border-bottom: none; }
  .us-fees-row > div:last-child { display: flex; }

  .us-comp-head           { display: none; }
  .us-comp-row            { display: flex; flex-direction: column; }
  .us-comp-row > div      { border-right: none; border-bottom: 1px solid var(--b-light); }
  .us-comp-row > div:last-child { display: flex; border-bottom: none; }

  .us-time-bar            { display: none; }
  .us-time-track          { padding-left: 0; }
  .us-time-dot            { display: none; }

  .us-fees-val            { font-size: var(--f18) !important; }
  .us-why-card h3 {
    text-align: center;
  }
  .us-why-ico {
    margin: auto;
  }
  .us-why-card p {
    text-align: justify;
  }  
  .us-atty-body p {
    text-align: justify;
  }
  .us-doc-req {
    margin: auto;
  }
  .us-doc-opt {
    margin: auto;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .us-hero-pill           { font-size: 8px; padding: 5px 10px; gap: 6px; }
  .us-hero-title          { font-size: var(--f28); }
  .us-hero-sub            { font-size: var(--f13); }
  .us-hero-stats          { flex-direction: column; align-items: center; gap: var(--s2); }

  .us-basis-sec           { font-size: 9px; }
  .us-why-ico,
  .us-atty-icon           { width: 36px; height: 36px; }
  .us-why-ico svg,
  .us-atty-icon svg       { width: 16px; height: 16px; }

  .us-why-card h3,
  .us-basis-card h3       { font-size: var(--f16); }
  .us-atty-body h2        { font-size: var(--f18); }

  .us-basis-key-item      { font-size: var(--f12); }
  .us-time-ev             { font-size: var(--f14); }
  .us-time-detail         { font-size: var(--f12); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .us-hero-title          { font-size: var(--f24); }
  .us-hero-pill           { font-size: 7px; letter-spacing: .08em; }
  .us-why-card,
  .us-basis-card,
  .us-doc-card            { padding: var(--s3); }
  .us-atty-banner         { padding: var(--s4); }
  .us-fees-note-box,
  .us-basis-suited        { padding: var(--s3); font-size: var(--f12); }
  .us-comp-crit           { font-size: 11px !important; }
  .us-fees-val            { font-size: var(--f16) !important; }
}

/*______________________________________Trademark Class Finder_________________________________*/

/* ══════════════════════════════════════
   TRADEMARK CLASS FINDER PAGE  (prefix: tc-)
   Sections: hero · intro · finder · popular · faq
══════════════════════════════════════ */

/* ─────────────────────────────────────
   tc-hero  (dark, grid-line bg)
───────────────────────────────────── */
.tc-hero {
  background: linear-gradient(160deg, var(--bg-dark) 0%, #0e1e30 100%);
  padding: clamp(7rem, 14vw, 12rem) 0 clamp(4rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}

.tc-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.tc-hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212,144,10,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,144,10,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black, transparent);
}

.tc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 15% 30%, rgba(212,144,10,.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 85% 75%, rgba(162,32,56,.06) 0%, transparent 60%);
  pointer-events: none;
}

.tc-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: clamp(560px, 78vw, 920px);
  margin: 0 auto;
  padding: 0 var(--s5);
}

.tc-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-200);
  background: rgba(212,144,10,.08);
  border: 1px solid rgba(212,144,10,.18);
  border-radius: 100px;
  padding: 6px 18px;
  margin-bottom: var(--s4);
}

.tc-hero-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-300);
  animation: pulse-dot 2s ease-in-out infinite;
}

.tc-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  color: var(--t-inv);
  line-height: 1.1;
  margin-bottom: var(--s4);
}

.tc-hero-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--g-200), var(--g-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tc-hero-sub {
  font-size: var(--f17);
  color: rgba(240,236,230,.6);
  line-height: 1.75;
  max-width: 700px;
  margin: 0 auto var(--s5);
}

.tc-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  flex-wrap: wrap;
  border-top: 1px solid rgba(240,236,230,.08);
  padding-top: var(--s5);
}

.tc-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tc-hero-stat-div {
  width: 1px;
  height: 32px;
  background: rgba(240,236,230,.12);
}

.tc-hstat-v {
  font-family: 'Playfair Display', serif;
  font-size: var(--f32);
  font-weight: 700;
  color: var(--g-200);
  line-height: 1;
}

.tc-hstat-l {
  font-size: var(--f11);
  color: rgba(240,236,230,.4);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────
   tc-intro  (what is / rules / wheel)
───────────────────────────────────── */
.tc-intro { padding: var(--s8) 0; background: var(--bg-base); }

.tc-intro-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s7);
  align-items: center;
}

.tc-intro-rules {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s4);
}

.tc-intro-rule {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: var(--bg-alt);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  padding: var(--s3) var(--s4);
  transition: var(--tr);
}

.tc-intro-rule:hover {
  border-color: var(--b-gold);
  box-shadow: var(--sh-sm);
}

.tc-intro-rule svg {
  width: 18px;
  height: 18px;
  stroke: var(--g-500);
  flex-shrink: 0;
  margin-top: 2px;
}

.tc-intro-rule div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tc-intro-rule strong {
  font-size: var(--f14);
  font-weight: 600;
  color: var(--t-800);
}

.tc-intro-rule span {
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.55;
}

/* Decorative wheel visual */
.tc-intro-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tc-wheel {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc-wheel-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid;
}

.tc-ring-1 {
  width: 260px;
  height: 260px;
  border-color: rgba(212,144,10,.15);
  animation: spin-slow 30s linear infinite;
}

.tc-ring-2 {
  width: 200px;
  height: 200px;
  border-color: rgba(212,144,10,.2);
  border-style: dashed;
  animation: spin-slow 20s linear infinite reverse;
}

.tc-ring-3 {
  width: 140px;
  height: 140px;
  border-color: rgba(212,144,10,.3);
  animation: spin-slow 15s linear infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.tc-wheel-center {
  position: relative;
  z-index: 2;
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, var(--g-500), var(--g-700));
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 0 30px rgba(212,144,10,.3);
}

.tc-wc-num {
  font-family: 'Playfair Display', serif;
  font-size: var(--f32);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.tc-wc-lbl {
  font-size: var(--f10);
  color: rgba(255,255,255,.75);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tc-wheel-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 2;
}

.tc-wheel-label span {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 700;
  color: var(--t-900);
}

.tc-wheel-label small {
  font-size: var(--f11);
  color: var(--t-400);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.tc-wl-goods    { top: 10px; left: 50%; transform: translateX(-50%); }
.tc-wl-services { bottom: 10px; left: 50%; transform: translateX(-50%); }

/* ─────────────────────────────────────
   tc-finder  (interactive class grid)
───────────────────────────────────── */
.tc-finder { padding: var(--s8) 0; background: var(--bg-alt); }

/* Search + tabs bar */
.tc-finder-bar {
  display: flex;
  gap: var(--s3);
  align-items: center;
  margin-top: var(--s5);
  flex-wrap: wrap;
}

.tc-search-wrap {
  flex: 1;
  min-width: 260px;
  position: relative;
  display: flex;
  align-items: center;
}

.tc-search-ico {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  stroke: var(--t-400);
  pointer-events: none;
}

.tc-search {
  width: 100%;
  padding: 12px 44px 12px 42px;
  font-family: 'Jost', sans-serif;
  font-size: var(--f15);
  color: var(--t-900);
  background: var(--bg-card);
  border: 1.5px solid var(--b-mid);
  border-radius: var(--rad-m);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.tc-search:focus {
  border-color: var(--g-400);
  box-shadow: 0 0 0 3px rgba(212,144,10,.12);
}

.tc-search::placeholder { color: var(--t-300); }

.tc-search-clear {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--t-400);
  border-radius: 50%;
  transition: color .18s, background .18s;
}

.tc-search-clear.visible { display: flex; }
.tc-search-clear:hover { color: var(--t-900); background: var(--bg-alt); }
.tc-search-clear svg { width: 14px; height: 14px; }

/* Tabs */
.tc-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
  padding: 4px;
  flex-shrink: 0;
}

.tc-tab {
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: none;
  border-radius: var(--rad-s);
  background: none;
  color: var(--t-400);
  cursor: pointer;
  transition: background .18s, color .18s;
  white-space: nowrap;
}

.tc-tab:hover { background: var(--bg-alt); color: var(--t-700); }

.tc-tab-active {
  background: var(--bg-dark);
  color: var(--g-200);
  box-shadow: var(--sh-sm);
}

/* Results count */
.tc-count {
  font-size: var(--f13);
  color: var(--t-400);
  margin-top: var(--s3);
  padding: 0 2px;
}

.tc-count strong { color: var(--g-500); }

/* The class grid */
.tc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin-top: var(--s4);
}

/* Class card */
.tc-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4);
  box-shadow: var(--sh-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .2s;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  cursor: pointer;
}

.tc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.tc-card.tc-hidden {
  display: none;
}

.tc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tc-card-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f22);
  font-weight: 600;
  color: var(--g-400);
  line-height: 1;
}

.tc-card-type {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid;
}

.tc-type-goods {
  color: var(--g-500);
  background: rgba(212,144,10,.07);
  border-color: var(--b-gold);
}

.tc-type-services {
  color: #3c3b6e;
  background: rgba(60,59,110,.07);
  border-color: rgba(60,59,110,.25);
}

.tc-card-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.tc-card-desc {
  font-size: var(--f13);
  color: var(--t-400);
  line-height: 1.65;
  flex: 1;
}

.tc-card-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--b-light);
}

.tc-card-examples span {
  font-size: 11px;
  color: var(--t-500);
  background: var(--bg-alt);
  border: 1px solid var(--b-mid);
  border-radius: var(--rad-s);
  padding: 2px 8px;
}

/* Highlighted card (search hit) */
.tc-card.tc-match {
  border-color: var(--g-400);
  background: rgba(212,144,10,.025);
}

.tc-card.tc-match .tc-card-num { color: var(--g-300); }

/* No results */
.tc-no-results {
  text-align: center;
  padding: var(--s8) 0;
  color: var(--t-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
}

.tc-no-results svg { width: 56px; height: 56px; color: var(--t-300); }
.tc-no-results p { font-size: var(--f16); }

/* ─────────────────────────────────────
   tc-popular  (business type quick-match)
───────────────────────────────────── */
.tc-popular { padding: var(--s8) 0; background: var(--bg-base); }

.tc-popular-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}

.tc-pop-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.tc-pop-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.tc-pop-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}

.tc-pop-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}

.tc-pop-classes {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--f13);
  color: var(--t-400);
}

.tc-pop-class {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--g-500);
  background: rgba(212,144,10,.08);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-s);
  padding: 3px 9px;
  text-decoration: none;
  transition: background .18s, color .18s;
  white-space: nowrap;
  flex-shrink: 0;
}

.tc-pop-class:hover {
  background: var(--g-500);
  color: #fff;
}

/* ─────────────────────────────────────
   tc-faq  (uses shared .fl .fi .fq .fa)
───────────────────────────────────── */
.tc-faq { padding: var(--s8) 0; background: var(--bg-alt); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .tc-hero-title      { font-size: var(--f60); }
  .tc-grid            { grid-template-columns: repeat(3, 1fr); }
  .tc-popular-grid    { grid-template-columns: repeat(2, 1fr); }
  .tc-intro-grid      { grid-template-columns: 1fr; }
  .tc-intro-visual    { display: none; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .tc-hero-inner      { padding: 0 var(--s4); }
  .tc-hero-title      { font-size: var(--f48); }
  .tc-hero-sub        { font-size: var(--f15); }
  .tc-hero-stats      { gap: var(--s3); }
  .tc-hstat-v         { font-size: var(--f24); }
  .tc-hero-stat-div   { display: none; }

  .tc-finder-bar      { flex-direction: column; align-items: stretch; }
  .tc-tabs            { justify-content: center; }
  .tc-grid            { grid-template-columns: repeat(2, 1fr); }
  .tc-popular-grid    { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .tc-hero-title      { font-size: var(--f36); }
  .tc-hero-sub        { font-size: var(--f14); }
  .tc-hero-stats      { gap: var(--s2); }

  .tc-grid            { grid-template-columns: 1fr; }
  .tc-popular-grid    { grid-template-columns: 1fr; }

  .tc-tabs            { flex-wrap: wrap; }
  .tc-tab             { font-size: 10px; padding: 7px 12px; }

  .tc-card            { padding: var(--s3); }
  .tc-card-num        { font-size: var(--f18); }
  .tc-card-title      { font-size: var(--f15); }
  .tc-card-desc       { font-size: var(--f12); }
  .tc-pop-card h3 {
    text-align: center;
  }
  .tc-pop-icon {
    margin: auto;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .tc-hero-pill       { font-size: 8px; letter-spacing: .12em; }
  .tc-hero-title      { font-size: var(--f28); }
  .tc-hstat-v         { font-size: var(--f20); }

  .tc-card-examples span { font-size: 10px; }
  .tc-pop-card        { padding: var(--s3); }
  .tc-pop-card h3     { font-size: var(--f14); }
  .tc-pop-classes     { font-size: var(--f12); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .tc-hero-title      { font-size: var(--f24); }
  .tc-search          { font-size: var(--f14); }
  .tc-card            { padding: var(--s2); gap: var(--s2); }
  .tc-card-num        { font-size: var(--f16); }
  .tc-card-title      { font-size: var(--f14); }
  .tc-card-desc       { font-size: 11px; }
  .tc-pop-classes     { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/*_______________________________Copyright Services Section_______________________________________*/

/* ══════════════════════════════════════
   COPYRIGHT REGISTRATION PAGE CSS
   Prefix: crh· crcmp· crworks· crbens·
           crproc· crfees· crdocs· crdur·
           crlimits· crfaq· crctasec·
   Palette: Forest green accents — text always neutral (dark/white)
══════════════════════════════════════ */

:root {
  --cr-900:  #0d2b1f;
  --cr-800:  #133d2c;
  --cr-700:  #1a5239;
  --cr-600:  #206644;
  --cr-500:  #277a50;
  --cr-400:  #34a06b;
  --cr-300:  #52c68a;
  --cr-200:  #85dcaa;
  --cr-100:  #c8f0da;
  --cr-b:    rgba(52,160,107,.22);
}

/* page accent overrides — only structural, no text color */
.csl   { color: var(--cr-500) !important; }
.crule { background: var(--cr-400) !important; }

/* ─────────────────────────────────────
   crh — HERO
───────────────────────────────────── */
.crh {
  position: relative;
  background: linear-gradient(155deg, var(--cr-900) 0%, #0a2218 40%, var(--cr-800) 100%);
  padding: clamp(7rem,14vw,12rem) 0 clamp(4rem,7vw,6rem);
  overflow: hidden;
}
.crh-canvas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.crh-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.crh-orb1 {
  width: clamp(300px,40vw,600px); height: clamp(300px,40vw,600px);
  background: radial-gradient(circle, rgba(52,160,107,.18) 0%, transparent 70%);
  top: -20%; left: -10%;
}
.crh-orb2 {
  width: clamp(200px,30vw,450px); height: clamp(200px,30vw,450px);
  background: radial-gradient(circle, rgba(133,220,170,.08) 0%, transparent 70%);
  bottom: 0; right: 5%;
}
.crh-orb3 {
  width: clamp(150px,20vw,320px); height: clamp(150px,20vw,320px);
  background: radial-gradient(circle, rgba(26,82,57,.25) 0%, transparent 70%);
  top: 50%; left: 55%; transform: translate(-50%,-50%);
}
.crh-inkmarks { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; }

.crh-inner {
  position: relative; z-index: 1; text-align: center;
  max-width: clamp(560px,78vw,900px); margin: 0 auto; padding: 0 var(--s5);
}
.crh-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f10); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(240,237,232,.7);
  background: rgba(52,160,107,.1); border: 1px solid rgba(52,160,107,.2);
  border-radius: 100px; padding: 6px 18px; margin-bottom: var(--s4);
}
.crh-badge svg { width: 14px; height: 14px; stroke: rgba(240,237,232,.6); }

.crh-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72); font-weight: 700;
  color: #f0ede8; line-height: 1.1; margin-bottom: var(--s4);
}
.crh-title em {
  font-style: italic; color: #fff;
  background: none; -webkit-text-fill-color: unset;
}

.crh-sub {
  font-size: var(--f17); color: rgba(240,237,232,.55);
  line-height: 1.75; max-width: 680px; margin: 0 auto var(--s5);
}
.crh-sub strong { color: rgba(240,237,232,.85); }

.crh-actions {
  display: flex; justify-content: center;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6);
}
.crh-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--cr-600), var(--cr-400));
  padding: 14px 28px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(52,160,107,.35);
  transition: opacity .2s, transform .2s;
}
.crh-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.crh-btn-primary svg { width: 16px; height: 16px; }

.crh-btn-ghost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,237,232,.7);
  border: 1.5px solid rgba(240,237,232,.2);
  padding: 14px 24px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.crh-btn-ghost:hover { border-color: rgba(240,237,232,.4); background: rgba(255,255,255,.05); }

.crh-stats {
  display: flex; justify-content: center; align-items: center;
  gap: var(--s4); flex-wrap: wrap;
  border-top: 1px solid rgba(240,237,232,.08); padding-top: var(--s5);
}
.crh-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.crh-sdiv { width: 1px; height: 32px; background: rgba(240,237,232,.1); }
.crh-sv {
  font-family: 'Playfair Display', serif; font-size: var(--f28); font-weight: 700;
  color: #fff; line-height: 1;
}
.crh-sl {
  font-size: var(--f11); color: rgba(240,237,232,.35);
  letter-spacing: .07em; text-transform: uppercase;
}

/* ─────────────────────────────────────
   crcmp — AUTO vs REGISTERED COMPARISON
   Mobile: stack into card layout (label-above-values)
───────────────────────────────────── */
.crcmp { padding: var(--s8) 0; background: var(--bg-base); }
.crcmp-grid {
  display: grid; grid-template-columns: 1fr 420px;
  gap: var(--s7); align-items: start;
}
.crcmp-body p + p { margin-top: var(--s3); }

.crcmp-table {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); overflow: hidden; box-shadow: var(--sh-md);
}
.crcmpt-head {
  background: var(--cr-800); color: rgba(240,237,232,.85);
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; padding: 14px 20px;
}
/* column header row — fixed widths so columns never overlap */
.crcmpt-subhd {
  background: var(--cr-900);
  display: grid !important;
  grid-template-columns: 1fr 96px 110px;
}
.crcmpt-subhd div {
  padding: 10px 16px;
  font-family: 'Cinzel', serif; font-size: var(--f10); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,237,232,.45);
}
/* NO hover on header row */
.crcmpt-subhd { pointer-events: none; }

/* body rows */
.crcmpt-row {
  display: grid; grid-template-columns: 1fr 96px 110px;
  border-bottom: 1px solid var(--b-light); transition: background .15s;
}
.crcmpt-row:last-child { border-bottom: none; }
.crcmpt-row:hover { background: var(--bg-alt); }
.crcmpt-row span {
  display: flex; align-items: center; justify-content: center;
  padding: 13px 16px; font-size: var(--f13); color: var(--t-600);
}
.crcmpt-row span:first-child {
  justify-content: flex-start; color: var(--t-800); font-size: var(--f13);
}

/* cross — red, stroke only, no fill */
.crx { color: var(--t-400) !important; }
.crx svg {
  width: 13px; height: 13px;
  stroke: #c0392b; stroke-width: 2.2;
  fill: none;
}

/* tick — dark neutral, stroke only, clean */
.crck { color: var(--t-700) !important; font-weight: 600; }
.crck svg {
  width: 15px; height: 15px;
  stroke: var(--t-700); stroke-width: 2.4;
  fill: none;
}

/* text values in table — always neutral */
.crwk { color: var(--t-300) !important; font-size: var(--f12) !important; font-style: italic; }

/* ─────────────────────────────────────
   crworks — TYPES OF WORKS
───────────────────────────────────── */
.crworks { padding: var(--s8) 0; background: var(--bg-alt); }
.crworks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }

.crwork {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.crwork:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--cr-b); }

.crwork-icon {
  width: 52px; height: 52px;
  background: rgba(52,160,107,.07); border: 1px solid var(--cr-b);
  border-radius: var(--rad-m); display: flex; align-items: center;
  justify-content: center; margin-bottom: var(--s1); flex-shrink: 0;
}
.crwork-icon svg { width: 26px; height: 26px; stroke: var(--t-600); }

.crwork h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18); font-weight: 600; color: var(--t-900);
}
.crwork p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; flex: 1; }

.crwork-examples {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--b-light);
}
.crwork-examples span {
  font-size: 11px; color: var(--t-500);
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: var(--rad-s); padding: 2px 9px;
}

.crwork-dur {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--f12); font-weight: 600; color: var(--t-600); margin-top: 4px;
}
.crwork-dur svg { width: 14px; height: 14px; stroke: var(--t-400); }

.crworks-swbox {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); align-items: center;
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-left: 4px solid var(--cr-400);
  border-radius: var(--rad-m); padding: var(--s4) var(--s5); margin-top: var(--s5);
}
.crworks-sw-icon {
  width: 46px; height: 46px; background: rgba(52,160,107,.08);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
}
.crworks-sw-icon svg { width: 22px; height: 22px; stroke: var(--t-600); }
.crworks-swbox strong { display: block; font-size: var(--f15); color: var(--t-900); margin-bottom: 4px; }
.crworks-swbox p { font-size: var(--f13); color: var(--t-500); line-height: 1.6; }

/* ─────────────────────────────────────
   crbens — BENEFITS
───────────────────────────────────── */
.crbens { padding: var(--s8) 0; background: var(--bg-base); }
.crbens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6); }

.crben {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); transition: var(--tr); position: relative; overflow: hidden;
}
.crben::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cr-500), var(--cr-300));
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.crben:hover::before { transform: scaleX(1); }
.crben:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--cr-b); }

.crben-ico {
  width: 44px; height: 44px; background: rgba(52,160,107,.07); border: 1px solid var(--cr-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s3);
}
.crben-ico svg { width: 22px; height: 22px; stroke: var(--t-600); }
.crben h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2);
}
.crben p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; }

/* ─────────────────────────────────────
   crproc — 8-STEP PROCESS
───────────────────────────────────── */
.crproc { padding: var(--s8) 0; background: var(--bg-alt); }
.crproc-steps { display: flex; flex-direction: column; }

.crproc-step { display: grid; grid-template-columns: 80px 1fr; gap: var(--s5); position: relative; }
.crproc-left { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }

.crproc-num {
  font-family: 'Cinzel', serif; font-size: var(--f20); font-weight: 600;
  color: var(--t-700);
  background: var(--bg-card); border: 2px solid var(--b-mid);
  border-radius: 50%; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
  transition: background .2s, border-color .2s, color .2s;
}
.crproc-step:hover .crproc-num { background: var(--cr-500); color: #fff; border-color: var(--cr-500); }

.crproc-line {
  flex: 1; width: 2px;
  background: linear-gradient(to bottom, var(--b-mid), transparent);
  margin: 8px 0 0; min-height: var(--s7);
}
.crproc-body { padding-bottom: var(--s6); }
.crproc-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2);
}
.crproc-body p { font-size: var(--f14); color: var(--t-500); line-height: 1.7; }

.crproc-note {
  margin-top: var(--s3); background: var(--bg-alt);
  border-left: 3px solid var(--b-dark);
  border-radius: 0 var(--rad-s) var(--rad-s) 0;
  padding: var(--s2) var(--s3); font-size: var(--f12); color: var(--t-500); line-height: 1.6;
}
.crproc-note strong { color: var(--t-800); }
.crproc-note-warn { background: rgba(212,144,10,.05); border-left-color: var(--g-400); }
.crproc-note-ok { background: rgba(52,160,107,.06); border-left-color: var(--cr-400); font-weight: 500; }

/* ─────────────────────────────────────
   crfees — FEE TABLE
   Mobile: horizontal scroll with sticky first column
───────────────────────────────────── */
.crfees { padding: var(--s8) 0; background: var(--bg-base); }

.crfees-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--rad-l);
  box-shadow: var(--sh-md);
}
/* scroll hint on small screens */
.crfees-wrap::after {
  content: '';
  display: none;
}

.crfees-tbl {
  width: 100%; min-width: 560px;
  border-collapse: collapse; background: var(--bg-card);
}
.crfees-tbl thead tr { background: var(--cr-800); }
.crfees-tbl thead th {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,237,232,.8); padding: 16px 20px;
  text-align: left; white-space: nowrap;
}
.crfees-tbl thead th:nth-child(2),
.crfees-tbl thead th:nth-child(3) { text-align: center; }

.crfees-tbl tbody tr { border-bottom: 1px solid var(--b-light); transition: background .15s; }
.crfees-tbl tbody tr:last-child { border-bottom: none; }
.crfees-tbl tbody tr:hover { background: var(--bg-alt); }
.crfees-tbl tbody td { padding: 14px 20px; font-size: var(--f13); color: var(--t-500); line-height: 1.5; }
.crfees-tbl tbody td:first-child { color: var(--t-800); }

.crfee-hl { background: rgba(52,160,107,.03) !important; }
.crfee-hl:hover { background: rgba(52,160,107,.07) !important; }

.crfee-v {
  text-align: center !important;
  font-family: 'Playfair Display', serif; font-size: var(--f18) !important;
  font-weight: 700; color: var(--t-900) !important;
}

.crfees-info {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--bg-alt); border: 1px solid var(--b-light);
  border-radius: var(--rad-m); padding: var(--s3) var(--s4); margin-top: var(--s4);
}
.crfees-info svg { width: 18px; height: 18px; stroke: var(--t-400); flex-shrink: 0; margin-top: 2px; }
.crfees-info p { font-size: var(--f12); color: var(--t-400); line-height: 1.65; }

/* ─────────────────────────────────────
   crdocs — DOCUMENTS
───────────────────────────────────── */
.crdocs { padding: var(--s8) 0; background: var(--bg-alt); }
.crdocs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }

.crdoc-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.crdoc-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.crdoc-all  { border-top: 3px solid var(--cr-400); }
.crdoc-cond { border-top: 3px solid var(--g-400); }

.crdoc-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; width: fit-content; margin-bottom: var(--s1);
}
.crdoc-tag-all  { color: var(--t-600); background: var(--bg-alt); border: 1px solid var(--b-mid); }
.crdoc-tag-cond { color: var(--t-600); background: rgba(212,144,10,.07); border: 1px solid rgba(212,144,10,.2); }
.crdoc-tag-sw   { color: var(--t-600); background: var(--bg-alt); border: 1px solid var(--b-mid); }

.crdoc-num {
  font-family: 'Cinzel', serif; font-size: var(--f28); font-weight: 600;
  color: var(--b-mid); line-height: 1; margin-top: var(--s1);
}
.crdoc-card h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f15); font-weight: 600; color: var(--t-900);
}
.crdoc-card p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; flex: 1; }

/* ─────────────────────────────────────
   crdur — DURATION
───────────────────────────────────── */
.crdur { padding: var(--s8) 0; background: var(--bg-base); }
.crdur-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s6); }

.crdur-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm); text-align: center; transition: var(--tr);
}
.crdur-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--cr-b); }
.crdur-ico { font-size: 32px; line-height: 1; margin-bottom: var(--s3); }
.crdur-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f15); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2);
}
.crdur-val {
  font-family: 'Cinzel', serif; font-size: var(--f14); font-weight: 600;
  color: var(--t-800);
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: var(--rad-s); padding: 6px 12px; margin: var(--s2) 0; display: inline-block;
}
.crdur-card p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; }

.crdur-norenewal {
  display: flex; gap: var(--s4); align-items: center;
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-left: 4px solid var(--cr-400);
  border-radius: 0 var(--rad-m) var(--rad-m) 0;
  padding: var(--s4) var(--s5); margin-top: var(--s5);
}
.crdur-norenewal svg { width: 24px; height: 24px; stroke: var(--t-600); flex-shrink: 0; }
.crdur-norenewal strong { display: block; font-size: var(--f16); color: var(--t-900); margin-bottom: 4px; }
.crdur-norenewal span { font-size: var(--f13); color: var(--t-500); line-height: 1.6; }

/* ─────────────────────────────────────
   crlimits — WHAT COPYRIGHT DOESN'T PROTECT
───────────────────────────────────── */
.crlimits { padding: var(--s8) 0; background: var(--bg-alt); }
.crlimits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5); }

.crlimit {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4); box-shadow: var(--sh-sm);
  display: flex; gap: var(--s3); align-items: flex-start; transition: var(--tr);
}
.crlimit:hover { box-shadow: var(--sh-md); }
.crlimit-x {
  width: 32px; height: 32px; background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: var(--rad-s); display: flex; align-items: center; justify-content: center;
  font-size: var(--f14); font-weight: 700; color: var(--t-400); flex-shrink: 0;
}
.crlimit strong { display: block; font-size: var(--f14); color: var(--t-800); margin-bottom: 6px; }
.crlimit p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; }
.crlimit a { color: var(--t-700); text-decoration: underline; text-underline-offset: 2px; }
.crlimit a:hover { color: var(--t-900); }

/* ─────────────────────────────────────
   crfaq — uses shared .fl .fi .fq .fa
───────────────────────────────────── */
.crfaq { padding: var(--s8) 0; background: var(--bg-base); }

/* ─────────────────────────────────────
   crctasec — CTA
───────────────────────────────────── */
.crctasec { padding: var(--s8) 0; }
.crctab {
  text-align: center;
  background: linear-gradient(145deg, var(--cr-900), var(--cr-800));
  border-radius: var(--rad-l); padding: var(--s7) var(--s6);
  box-shadow: 0 8px 40px rgba(13,43,31,.25), 0 2px 8px rgba(13,43,31,.15);
  position: relative; overflow: hidden;
}
.crctab::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(52,160,107,.1), transparent);
  pointer-events: none;
}
.crctab h2 {
  font-family: 'Playfair Display', serif; font-size: var(--f48); font-weight: 700;
  color: #f0ede8; line-height: 1.2; margin-bottom: var(--s3); position: relative;
}
.crctab h2 em { font-style: italic; color: #fff; }
.crctab p {
  font-size: var(--f16); color: rgba(240,237,232,.5);
  line-height: 1.7; max-width: 580px; margin: 0 auto var(--s5); position: relative;
}
.crctabtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--cr-600), var(--cr-400));
  padding: 15px 32px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(52,160,107,.4);
  transition: opacity .2s, transform .2s; position: relative;
}
.crctabtn:hover { opacity: .88; transform: translateY(-2px); }
.crctabtn svg { width: 16px; height: 16px; }
.crctaGhost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,237,232,.7);
  border: 1.5px solid rgba(240,237,232,.2);
  padding: 15px 28px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s; position: relative;
}
.crctaGhost:hover { border-color: rgba(240,237,232,.4); background: rgba(255,255,255,.05); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .crh-title     { font-size: var(--f60); }
  .crcmp-grid    { grid-template-columns: 1fr; }
  .crworks-grid  { grid-template-columns: repeat(2, 1fr); }
  .crbens-grid   { grid-template-columns: repeat(2, 1fr); }
  .crdocs-grid   { grid-template-columns: repeat(2, 1fr); }
  .crdur-grid    { grid-template-columns: repeat(2, 1fr); }
  .crlimits-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .crh-inner   { padding: 0 var(--s4); }
  .crh-title   { font-size: var(--f48); }
  .crh-sub     { font-size: var(--f15); }
  .crh-sdiv    { display: none; }
  .crh-stats   { gap: var(--s3); }

  .crworks-grid  { grid-template-columns: 1fr; }
  .crworks-swbox { grid-template-columns: 1fr; text-align: center; }
  .crworks-sw-icon { margin: 0 auto; }

  .crproc-step { grid-template-columns: 56px 1fr; gap: var(--s3); }
  .crproc-num  { width: 44px; height: 44px; font-size: var(--f16); }

  /* Comparison table — hide registered column, keep auto + label */
  .crcmpt-head {
    text-align: center;
  }
  .crcmpt-subhd { display: none !important; }
.crcmpt-row {
  display: flex; flex-direction: column;
  gap: 4px; padding: 12px 16px; border-radius: 0;
}
.crcmpt-row span { padding: 0 !important; justify-content: center !important; font-size: var(--f13); }
.crcmpt-row span:first-child { font-weight: 600; color: var(--t-800); margin-bottom: 6px; }
.crcmpt-row span:nth-child(2)::before { content: 'Automatic: '; font-size: var(--f11); color: var(--t-300); font-weight: 400; margin-right: 4px; }
.crcmpt-row span:nth-child(3)::before { content: 'Registered: '; font-size: var(--f11); color: var(--t-300); font-weight: 400; margin-right: 4px; }
.crcmpt-row span:last-child { display: flex !important; }

  /* Fee table — horizontal scroll, show scroll hint */
  .crfees-wrap { position: relative; }
  .crfees-wrap::before {
    content: '← scroll →';
    display: block; text-align: center;
    font-size: var(--f11); color: var(--t-300);
    letter-spacing: .08em; padding: 6px 0 10px;
  }

  .crdocs-grid   { grid-template-columns: 1fr; }
  .crdur-grid    { grid-template-columns: repeat(2, 1fr); }
  .crlimits-grid { grid-template-columns: 1fr; }
  .crdur-norenewal { flex-direction: column; gap: var(--s2); }
  .crctab h2     { font-size: var(--f36); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .crh-title   { font-size: var(--f36); }
  .crh-sub     { font-size: var(--f14); }
  .crh-actions { flex-direction: column; align-items: center; }
  .crh-btn-primary,
  .crh-btn-ghost { width: 100%; justify-content: center; }
  .crh-sv      { font-size: var(--f20); }
  .crh-stats   { flex-direction: column; gap: var(--s2); }

  /* Comparison table — label becomes block above, values below it */
  .crcmpt-subhd { display: none !important; }
  .crcmpt-row {
    display: flex ; flex-direction: column;
    gap: 4px; padding: 12px 16px; border-radius: 0;
  }
  .crcmpt-row span { padding: 0 !important; justify-content: flex-start !important; font-size: var(--f13); }
  .crcmpt-row span:first-child { font-weight: 600; color: var(--t-800); margin-bottom: 6px; }
  .crcmpt-row span:nth-child(2)::before { content: 'Automatic: '; font-size: var(--f11); color: var(--t-300); font-weight: 400; margin-right: 4px; }
  .crcmpt-row span:nth-child(3)::before { content: 'Registered: '; font-size: var(--f11); color: var(--t-300); font-weight: 400; margin-right: 4px; }
  .crcmpt-row span:last-child { display: flex !important; }

  .crbens-grid   { grid-template-columns: 1fr; }
  .crdur-grid    { grid-template-columns: 1fr; }
  .crlimits-grid { grid-template-columns: 1fr; }

  .crproc-left { display: none; }
  .crproc-step { grid-template-columns: 1fr; }
  .crproc-body { padding-bottom: var(--s5); }

  .crctab        { padding: var(--s5) var(--s4); }
  .crctab h2     { font-size: var(--f28); }
  .crctabtn,
  .crctaGhost    { width: 100%; justify-content: center; }
  .crwork-icon {
    margin: auto;
  }
  .crwork h3 {
    text-align: center;
  }
  .crwork p {
    text-align: justify;
  }
  .crwork-examples {
    justify-content: center;
  }
  .crwork-dur {
    margin: auto;
  }
  .crben h3 {
    text-align: center;
  }
  .crben-ico {
    margin: 1rem auto;
  }
  .crben p {
    text-align: justify;
  }
  .crproc-body h3 {
    text-align: center;
  }
  .crproc-body p {
    text-align: justify;
  }
  .crdoc-tag-all {
    margin: auto;
  }
  .crdoc-tag-cond {
    margin: auto;
  }
  .crdoc-tag-sw {
    margin: auto;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .crh-badge   { font-size: 8px; letter-spacing: .1em; }
  .crh-title   { font-size: var(--f28); }
  .crh-sv      { font-size: var(--f18); }
  .crwork-icon { width: 44px; height: 44px; }
  .crwork-icon svg { width: 22px; height: 22px; }
  .crdoc-num   { font-size: var(--f20); }
  .crdur-card  { padding: var(--s4) var(--s3); }
  .crben       { padding: var(--s3) var(--s4); }
  .crlimit     { flex-direction: column; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .crh-title       { font-size: var(--f24); }
  .crh-sub         { font-size: var(--f13); }
  .crh-btn-primary,
  .crh-btn-ghost   { font-size: var(--f12); padding: 12px 18px; }
  .crwork h3       { font-size: var(--f16); }
  .crwork p        { font-size: var(--f12); }
  .crproc-body h3  { font-size: var(--f16); }
  .crfees-tbl td   { font-size: var(--f12); padding: 10px 12px; }
  .crfee-v         { font-size: var(--f14) !important; }
  .crctab h2       { font-size: var(--f22); }
}

/*______________________________________Copyright Music______________________________________________*/

/* ══════════════════════════════════════
   COPYRIGHT MUSIC PROTECTION PAGE CSS
   Prefix: cmh· cmlayers· cmwho· cmrights·
           cmproc· cmfees· cmdocs· cmenf·
           cmfaq· cmctasec·
   Shares --cr-* palette with copyright-registration.css
   Text: always neutral (var --t-*) — green for accents/borders/buttons only
══════════════════════════════════════ */

/* ─────────────────────────────────────
   cmh — HERO
───────────────────────────────────── */
.cmh {
  position: relative;
  background: linear-gradient(155deg, var(--cr-900) 0%, #0a2218 40%, var(--cr-800) 100%);
  padding: clamp(7rem,14vw,12rem) 0 clamp(4rem,7vw,6rem);
  overflow: hidden;
}
.cmh-canvas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cmh-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.cmh-orb1 {
  width: clamp(300px,40vw,600px); height: clamp(300px,40vw,600px);
  background: radial-gradient(circle, rgba(52,160,107,.18) 0%, transparent 70%);
  top: -20%; left: -10%;
}
.cmh-orb2 {
  width: clamp(200px,28vw,440px); height: clamp(200px,28vw,440px);
  background: radial-gradient(circle, rgba(133,220,170,.08) 0%, transparent 70%);
  bottom: 0; right: 8%;
}
.cmh-orb3 {
  width: clamp(140px,18vw,300px); height: clamp(140px,18vw,300px);
  background: radial-gradient(circle, rgba(26,82,57,.25) 0%, transparent 70%);
  top: 50%; left: 58%; transform: translate(-50%,-50%);
}
.cmh-waves { position: absolute; inset: 0; width: 100%; height: 100%; }

.cmh-inner {
  position: relative; z-index: 1; text-align: center;
  max-width: clamp(560px,78vw,900px); margin: 0 auto; padding: 0 var(--s5);
}
.cmh-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f10); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(240,237,232,.7);
  background: rgba(52,160,107,.1); border: 1px solid rgba(52,160,107,.2);
  border-radius: 100px; padding: 6px 18px; margin-bottom: var(--s4);
}
.cmh-badge svg { width: 14px; height: 14px; stroke: rgba(240,237,232,.6); fill: none; }

.cmh-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72); font-weight: 700;
  color: #f0ede8; line-height: 1.1; margin-bottom: var(--s4);
}
.cmh-title em { font-style: italic; color: #fff; }

.cmh-sub {
  font-size: var(--f17); color: rgba(240,237,232,.55);
  line-height: 1.75; max-width: 680px; margin: 0 auto var(--s5);
}
.cmh-sub strong { color: rgba(240,237,232,.85); }

.cmh-actions {
  display: flex; justify-content: center;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6);
}
.cmh-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--cr-600), var(--cr-400));
  padding: 14px 28px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(52,160,107,.35);
  transition: opacity .2s, transform .2s;
}
.cmh-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.cmh-btn-primary svg { width: 16px; height: 16px; stroke: #fff; fill: none; }

.cmh-btn-ghost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,237,232,.7);
  border: 1.5px solid rgba(240,237,232,.2);
  padding: 14px 24px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.cmh-btn-ghost:hover { border-color: rgba(240,237,232,.4); background: rgba(255,255,255,.05); }

.cmh-stats {
  display: flex; justify-content: center; align-items: center;
  gap: var(--s4); flex-wrap: wrap;
  border-top: 1px solid rgba(240,237,232,.08); padding-top: var(--s5);
}
.cmh-stat  { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cmh-sdiv  { width: 1px; height: 32px; background: rgba(240,237,232,.1); }
.cmh-sv {
  font-family: 'Playfair Display', serif; font-size: var(--f28); font-weight: 700;
  color: #fff; line-height: 1;
}
.cmh-sl {
  font-size: var(--f11); color: rgba(240,237,232,.35);
  letter-spacing: .07em; text-transform: uppercase;
}

/* ─────────────────────────────────────
   cmlayers — THREE COPYRIGHTS SECTION
───────────────────────────────────── */
.cmlayers { padding: var(--s8) 0; background: var(--bg-base); }
.cmlayers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.cmlayer-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s5);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr); position: relative; overflow: hidden;
}
.cmlayer-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--cr-b); }
.cmlayer-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cr-500), var(--cr-300));
}

.cmlayer-num {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  color: var(--t-300); letter-spacing: .1em; margin-bottom: var(--s1);
}
.cmlayer-ico {
  width: 52px; height: 52px; background: rgba(52,160,107,.07); border: 1px solid var(--cr-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s2);
}
.cmlayer-ico svg { width: 26px; height: 26px; stroke: var(--t-600); fill: none; }

.cmlayer-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20); font-weight: 600; color: var(--t-900);
}
.cmlayer-type {
  font-size: var(--f11); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-300); margin-bottom: var(--s1);
}
.cmlayer-card p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; flex: 1; }
.cmlayer-card p strong { color: var(--t-800); }

.cmlayer-owner {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-alt); border: 1px solid var(--b-light);
  border-radius: var(--rad-s); padding: 8px 12px; margin-top: var(--s2);
}
.cmlayer-label {
  font-size: var(--f10); font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--t-300);
}
.cmlayer-owner span:last-child { font-size: var(--f13); color: var(--t-700); font-weight: 500; }

.cmlayer-dur {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  color: var(--t-700); background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: var(--rad-s); padding: 5px 10px; width: fit-content; margin-top: var(--s1);
}

.cmlayers-note {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-left: 4px solid var(--cr-400);
  border-radius: 0 var(--rad-m) var(--rad-m) 0;
  padding: var(--s4) var(--s5); margin-top: var(--s5);
}
.cmlayers-note svg { width: 20px; height: 20px; stroke: var(--t-500); flex-shrink: 0; margin-top: 2px; fill: none; }
.cmlayers-note strong { color: var(--t-900); }
.cmlayers-note div { font-size: var(--f13); color: var(--t-500); line-height: 1.7; }

/* ─────────────────────────────────────
   cmwho — WHO SHOULD REGISTER
───────────────────────────────────── */
.cmwho { padding: var(--s8) 0; background: var(--bg-alt); }
.cmwho-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.cmwho-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.cmwho-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--cr-b); }

.cmwho-ico {
  width: 48px; height: 48px; background: rgba(52,160,107,.07); border: 1px solid var(--cr-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s1);
}
.cmwho-ico svg { width: 24px; height: 24px; stroke: var(--t-600); fill: none; }

.cmwho-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f17); font-weight: 600; color: var(--t-900);
}
.cmwho-card p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; flex: 1; }

.cmwho-tag {
  font-size: 11px; font-weight: 600; color: var(--t-600); letter-spacing: .05em;
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: var(--rad-s); padding: 4px 10px; width: fit-content; margin-top: var(--s1);
}

/* ─────────────────────────────────────
   cmrights — EXCLUSIVE RIGHTS
───────────────────────────────────── */
.cmrights { padding: var(--s8) 0; background: var(--bg-base); }
.cmrights-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.cmright {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); transition: var(--tr); position: relative; overflow: hidden;
}
.cmright::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cr-500), var(--cr-300));
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.cmright:hover::before { transform: scaleX(1); }
.cmright:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--cr-b); }

.cmright-ico {
  width: 44px; height: 44px; background: rgba(52,160,107,.07); border: 1px solid var(--cr-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s3);
}
.cmright-ico svg { width: 22px; height: 22px; stroke: var(--t-600); fill: none; }
.cmright h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2);
}
.cmright p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; }

/* ─────────────────────────────────────
   cmproc — REGISTRATION PROCESS
───────────────────────────────────── */
.cmproc { padding: var(--s8) 0; background: var(--bg-alt); }
.cmproc-steps { display: flex; flex-direction: column; margin-top: var(--s6); }
.cmproc-step { display: grid; grid-template-columns: 80px 1fr; gap: var(--s5); }
.cmproc-left { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }

.cmproc-num {
  font-family: 'Cinzel', serif; font-size: var(--f20); font-weight: 600;
  color: var(--t-700); background: var(--bg-card); border: 2px solid var(--b-mid);
  border-radius: 50%; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1; transition: background .2s, border-color .2s, color .2s;
}
.cmproc-step:hover .cmproc-num { background: var(--cr-500); color: #fff; border-color: var(--cr-500); }

.cmproc-line {
  flex: 1; width: 2px;
  background: linear-gradient(to bottom, var(--b-mid), transparent);
  margin: 8px 0 0; min-height: var(--s7);
}
.cmproc-body { padding-bottom: var(--s6); }
.cmproc-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2);
}
.cmproc-body p { font-size: var(--f14); color: var(--t-500); line-height: 1.7; }

.cmproc-note {
  margin-top: var(--s3); background: var(--bg-base);
  border-left: 3px solid var(--b-dark);
  border-radius: 0 var(--rad-s) var(--rad-s) 0;
  padding: var(--s2) var(--s3); font-size: var(--f13); color: var(--t-500); line-height: 1.7;
}
.cmproc-note strong { color: var(--t-800); }
.cmproc-note-warn { background: rgba(212,144,10,.05); border-left-color: var(--g-400); }
.cmproc-note-ok   { background: rgba(52,160,107,.06); border-left-color: var(--cr-400); font-weight: 500; }

/* ─────────────────────────────────────
   cmfees — FEE TABLE
───────────────────────────────────── */
.cmfees { padding: var(--s8) 0; background: var(--bg-base); }

.cmfees-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--rad-l); box-shadow: var(--sh-md); margin-top: var(--s5);
}

.cmfees-tbl {
  width: 100%; min-width: 560px;
  border-collapse: collapse; background: var(--bg-card);
}
.cmfees-tbl thead tr { background: var(--cr-800); }
.cmfees-tbl thead th {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,237,232,.8); padding: 16px 20px;
  text-align: left; white-space: nowrap;
}
.cmfees-tbl thead th:nth-child(3),
.cmfees-tbl thead th:nth-child(4) { text-align: center; }

.cmfees-tbl tbody tr { border-bottom: 1px solid var(--b-light); transition: background .15s; }
.cmfees-tbl tbody tr:last-child { border-bottom: none; }
.cmfees-tbl tbody tr:hover { background: var(--bg-alt); }
.cmfees-tbl tbody td { padding: 14px 20px; font-size: var(--f13); color: var(--t-500); line-height: 1.5; }
.cmfees-tbl tbody td:first-child { color: var(--t-800); font-weight: 500; }

.cmfee-hl { background: rgba(52,160,107,.03) !important; }
.cmfee-hl:hover { background: rgba(52,160,107,.07) !important; }
.cmfee-v {
  text-align: center !important;
  font-family: 'Playfair Display', serif; font-size: var(--f18) !important;
  font-weight: 700; color: var(--t-900) !important;
}

.cmfees-info {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--bg-alt); border: 1px solid var(--b-light);
  border-radius: var(--rad-m); padding: var(--s3) var(--s4); margin-top: var(--s4);
}
.cmfees-info svg { width: 18px; height: 18px; stroke: var(--t-400); flex-shrink: 0; margin-top: 2px; fill: none; }
.cmfees-info p { font-size: var(--f12); color: var(--t-400); line-height: 1.65; }

/* ─────────────────────────────────────
   cmdocs — DOCUMENTS
───────────────────────────────────── */
.cmdocs { padding: var(--s8) 0; background: var(--bg-alt); }
.cmdocs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s5); }

.cmdoc-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.cmdoc-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.cmdoc-all  { border-top: 3px solid var(--cr-400); }
.cmdoc-cond { border-top: 3px solid var(--g-400); }

.cmdoc-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; width: fit-content; margin-bottom: var(--s1);
}
.cmdoc-tag-all  { color: var(--t-600); background: var(--bg-alt); border: 1px solid var(--b-mid); }
.cmdoc-tag-cond { color: var(--t-600); background: rgba(212,144,10,.07); border: 1px solid rgba(212,144,10,.2); }

.cmdoc-num {
  font-family: 'Cinzel', serif; font-size: var(--f28); font-weight: 600;
  color: var(--b-mid); line-height: 1; margin-top: var(--s1);
}
.cmdoc-card h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f15); font-weight: 600; color: var(--t-900);
}
.cmdoc-card p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; flex: 1; }

/* ─────────────────────────────────────
   cmenf — ENFORCEMENT
───────────────────────────────────── */
.cmenf { padding: var(--s8) 0; background: var(--bg-base); }
.cmenf-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.cmenf-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.cmenf-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--cr-b); }

.cmenf-ico {
  width: 48px; height: 48px; background: rgba(52,160,107,.07); border: 1px solid var(--cr-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s1);
}
.cmenf-ico svg { width: 24px; height: 24px; stroke: var(--t-600); fill: none; }
.cmenf-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16); font-weight: 600; color: var(--t-900);
}
.cmenf-card p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; }

/* ─────────────────────────────────────
   cmfaq — uses shared .fl .fi .fq .fa
───────────────────────────────────── */
.cmfaq { padding: var(--s8) 0; background: var(--bg-alt); }

/* ─────────────────────────────────────
   cmctasec — CTA
───────────────────────────────────── */
.cmctasec { padding: var(--s8) 0; background: var(--bg-base); }
.cmctab {
  text-align: center;
  background: linear-gradient(145deg, var(--cr-900), var(--cr-800));
  border-radius: var(--rad-l); padding: var(--s7) var(--s6);
  box-shadow: 0 8px 40px rgba(13,43,31,.25); position: relative; overflow: hidden;
}
.cmctab::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(52,160,107,.1), transparent);
  pointer-events: none;
}
.cmctab h2 {
  font-family: 'Playfair Display', serif; font-size: var(--f48); font-weight: 700;
  color: #f0ede8; line-height: 1.2; margin-bottom: var(--s3); position: relative;
}
.cmctab h2 em { font-style: italic; color: #fff; }
.cmctab p {
  font-size: var(--f16); color: rgba(240,237,232,.5);
  line-height: 1.7; max-width: 560px; margin: 0 auto var(--s5); position: relative;
}
.cmcta-btns {
  display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; position: relative;
}
.cmctabtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--cr-600), var(--cr-400));
  padding: 15px 32px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(52,160,107,.4);
  transition: opacity .2s, transform .2s;
}
.cmctabtn:hover { opacity: .88; transform: translateY(-2px); }
.cmctabtn svg { width: 16px; height: 16px; stroke: #fff; fill: none; }
.cmctaGhost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,237,232,.7);
  border: 1.5px solid rgba(240,237,232,.2);
  padding: 15px 28px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.cmctaGhost:hover { border-color: rgba(240,237,232,.4); background: rgba(255,255,255,.05); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .cmh-title      { font-size: var(--f60); }
  .cmlayers-grid  { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .cmwho-grid     { grid-template-columns: repeat(2, 1fr); }
  .cmrights-grid  { grid-template-columns: repeat(2, 1fr); }
  .cmdocs-grid    { grid-template-columns: repeat(2, 1fr); }
  .cmenf-grid     { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .cmh-inner  { padding: 0 var(--s4); }
  .cmh-title  { font-size: var(--f48); }
  .cmh-sub    { font-size: var(--f15); }
  .cmh-sdiv   { display: none; }
  .cmh-stats  { gap: var(--s3); }

  .cmlayers-grid  { max-width: 100%; }
  .cmwho-grid     { grid-template-columns: 1fr; }
  .cmrights-grid  { grid-template-columns: 1fr; }

  .cmproc-step { grid-template-columns: 56px 1fr; gap: var(--s3); }
  .cmproc-num  { width: 44px; height: 44px; font-size: var(--f16); }

  .cmfees-wrap::before {
    content: 'Scroll to see all columns →';
    display: block; text-align: right;
    font-size: var(--f11); color: var(--t-300);
    letter-spacing: .06em; padding: 0 4px 8px;
  }

  .cmdocs-grid { grid-template-columns: 1fr; }
  .cmenf-grid  { grid-template-columns: 1fr; }
  .cmctab h2   { font-size: var(--f36); }
  .sh span{
    display: flex !important;
    justify-content: center !important;
  }
  .cmlayer-ico {
    margin: auto;
  }
  .cmlayer-card h3 {
    text-align: center;
  }
  .cmwho-ico {
    margin: auto;
  }
  .cmwho-card h3 {
    text-align: center;
  }
  .cmwho-tag {
    margin: auto;
  }
  .cmright-ico {
    margin: auto;
  }
  .cmright h3 {
    text-align: center;
  }
  .cmright p {
    text-align: justify;
  }
  .cmproc-body h3 {
    text-align: center;
  }
  .cmproc-body p {
    text-align: justify;
  }
  .cmdoc-tag-all {
    margin: auto;
  }
  .cmdoc-tag-cond {
    margin: auto;
  }
  .cmenf-ico {
    margin: auto;
  }
  .cmenf-card h3 {
    text-align: center;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .cmh-title   { font-size: var(--f36); }
  .cmh-sub     { font-size: var(--f14); }
  .cmh-actions { flex-direction: column; align-items: center; }
  .cmh-btn-primary,
  .cmh-btn-ghost { width: 100%; justify-content: center; }
  .cmh-sv      { font-size: var(--f20); }
  .cmh-stats   { flex-direction: column; gap: var(--s2); }

  .cmproc-left { display: none; }
  .cmproc-step { grid-template-columns: 1fr; }
  .cmproc-body { padding-bottom: var(--s5); }

  .cmlayers-note { flex-direction: column; }
  .cmctab        { padding: var(--s5) var(--s4); }
  .cmctab h2     { font-size: var(--f28); }
  .cmcta-btns    { flex-direction: column; align-items: center; }
  .cmctabtn,
  .cmctaGhost    { width: 100%; justify-content: center; }
  p.sd.rv.d2.vis {
    text-align: justify;
  }
  
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .cmh-badge   { font-size: 8px; letter-spacing: .1em; }
  .cmh-title   { font-size: var(--f28); }
  .cmh-sv      { font-size: var(--f18); }
  .cmlayer-ico { width: 44px; height: 44px; }
  .cmlayer-ico svg { width: 22px; height: 22px; }
  .cmwho-ico   { width: 40px; height: 40px; }
  .cmright-ico { width: 40px; height: 40px; }
  .cmenf-ico   { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .cmh-title       { font-size: var(--f24); }
  .cmh-sub         { font-size: var(--f13); }
  .cmh-btn-primary,
  .cmh-btn-ghost   { font-size: var(--f12); padding: 12px 18px; }
  .cmlayer-card h3 { font-size: var(--f17); }
  .cmproc-body h3  { font-size: var(--f16); }
  .cmfees-tbl td   { font-size: var(--f12); padding: 10px 12px; }
  .cmfee-v         { font-size: var(--f14) !important; }
  .cmctab h2       { font-size: var(--f22); }
}

/*_______________________________Patent Search______________________________________________*/

/* ══════════════════════════════════════
   INDIAN PATENT SEARCH PAGE CSS
   Prefix: psh· pswhat· psptypes· psstypes·
           psdbs· pshist· pshow· psservice·
           psnext· psfaq· psctasec·
   Palette: deep navy + amber/gold accents
   Text: always neutral (var --t-*) — gold for accents/borders/buttons only
══════════════════════════════════════ */

:root {
  --ps-900:  #0d1b2e;
  --ps-800:  #122440;
  --ps-700:  #1a3358;
  --ps-600:  #1e3d6b;
  --ps-500:  #2455a0;
  --ps-400:  #3a6ec9;
  --ps-300:  #6494d8;
  --ps-200:  #a0bfed;
  --ps-100:  #d6e5f8;

  --pg-500:  #d4b45a;  /* gold accent */
  --pg-400:  #e8cc7a;
  --pg-300:  #f2dda0;
  --pg-b:    rgba(212,180,90,.22);
}

/* shared accent overrides for this page */
.psl  { color: var(--ps-400) !important; }
.prule { background: var(--pg-500) !important; }

/* ─────────────────────────────────────
   psh — HERO
───────────────────────────────────── */
.psh {
  position: relative;
  background: linear-gradient(155deg, var(--ps-900) 0%, #090f1c 40%, var(--ps-800) 100%);
  padding: clamp(7rem,14vw,12rem) 0 clamp(4rem,7vw,6rem);
  overflow: hidden;
}
.psh-canvas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.psh-orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.psh-orb1 {
  width: clamp(300px,42vw,620px); height: clamp(300px,42vw,620px);
  background: radial-gradient(circle, rgba(36,85,160,.2) 0%, transparent 70%);
  top: -20%; left: -10%;
}
.psh-orb2 {
  width: clamp(200px,28vw,440px); height: clamp(200px,28vw,440px);
  background: radial-gradient(circle, rgba(212,180,90,.08) 0%, transparent 70%);
  bottom: 0; right: 5%;
}
.psh-orb3 {
  width: clamp(150px,20vw,320px); height: clamp(150px,20vw,320px);
  background: radial-gradient(circle, rgba(26,51,88,.3) 0%, transparent 70%);
  top: 50%; left: 58%; transform: translate(-50%,-50%);
}
.psh-circuit { position: absolute; inset: 0; width: 100%; height: 100%; }

.psh-inner {
  position: relative; z-index: 1; text-align: center;
  max-width: clamp(560px,80vw,920px); margin: 0 auto; padding: 0 var(--s5);
}
.psh-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f10); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(240,237,232,.65);
  background: rgba(212,180,90,.08); border: 1px solid rgba(212,180,90,.2);
  border-radius: 100px; padding: 6px 18px; margin-bottom: var(--s4);
}
.psh-badge svg { width: 14px; height: 14px; stroke: rgba(212,180,90,.7); fill: none; }

.psh-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72); font-weight: 700;
  color: #f0ede8; line-height: 1.1; margin-bottom: var(--s4);
}
.psh-title em { font-style: italic; color: var(--pg-300); }

.psh-sub {
  font-size: var(--f17); color: rgba(240,237,232,.5);
  line-height: 1.75; max-width: 700px; margin: 0 auto var(--s5);
}

.psh-actions {
  display: flex; justify-content: center;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6);
}
.psh-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: var(--ps-900);
  background: linear-gradient(135deg, var(--pg-500), var(--pg-400));
  padding: 14px 28px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(212,180,90,.3);
  transition: opacity .2s, transform .2s;
}
.psh-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.psh-btn-primary svg { width: 16px; height: 16px; stroke: var(--ps-900); fill: none; }

.psh-btn-ghost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,237,232,.65);
  border: 1.5px solid rgba(240,237,232,.18);
  padding: 14px 24px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.psh-btn-ghost:hover { border-color: rgba(212,180,90,.35); background: rgba(212,180,90,.05); }

.psh-stats {
  display: flex; justify-content: center; align-items: center;
  gap: var(--s4); flex-wrap: wrap;
  border-top: 1px solid rgba(240,237,232,.08); padding-top: var(--s5);
}
.psh-stat  { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.psh-sdiv  { width: 1px; height: 32px; background: rgba(240,237,232,.1); }
.psh-sv {
  font-family: 'Playfair Display', serif; font-size: var(--f28); font-weight: 700;
  color: var(--pg-300); line-height: 1;
}
.psh-sl {
  font-size: var(--f11); color: rgba(240,237,232,.35);
  letter-spacing: .07em; text-transform: uppercase;
}

/* ─────────────────────────────────────
   pswhat — WHAT IS A PATENT
───────────────────────────────────── */
.pswhat { padding: var(--s8) 0; background: var(--bg-base); }
.pswhat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start;
}
.pswhat-body p { font-size: var(--f14); color: var(--t-500); line-height: 1.75; }
.pswhat-body p + p { margin-top: var(--s3); }
.pswhat-body p strong { color: var(--t-800); }

.pswhat-pills {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4);
}
.pswhat-pills span {
  font-family: 'Cinzel', serif; font-size: var(--f10); font-weight: 600;
  letter-spacing: .07em; color: var(--t-600);
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: 100px; padding: 5px 12px;
}

.pswhat-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
}
.pswhat-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4);
  box-shadow: var(--sh-sm); transition: var(--tr);
}
.pswhat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--pg-b); }
.pswhat-ico {
  width: 44px; height: 44px; background: rgba(212,180,90,.07); border: 1px solid var(--pg-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s2);
}
.pswhat-ico svg { width: 22px; height: 22px; stroke: var(--t-600); fill: none; }
.pswhat-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f15); font-weight: 600; color: var(--t-900); margin-bottom: var(--s1);
}
.pswhat-card p { font-size: var(--f13); color: var(--t-400); line-height: 1.6; }

/* ─────────────────────────────────────
   psptypes — 4 TYPES OF PATENTS
───────────────────────────────────── */
.psptypes { padding: var(--s8) 0; background: var(--bg-alt); }
.psptypes-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.pspt-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr); position: relative; overflow: hidden;
}
.pspt-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pg-500), var(--pg-300));
}
.pspt-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--pg-b); }

.pspt-num {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  color: var(--t-300); letter-spacing: .1em; margin-bottom: var(--s1);
}
.pspt-ico {
  width: 52px; height: 52px; background: rgba(212,180,90,.07); border: 1px solid var(--pg-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s2);
}
.pspt-ico svg { width: 26px; height: 26px; stroke: var(--t-600); fill: none; }
.pspt-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18); font-weight: 600; color: var(--t-900);
}
.pspt-card p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; flex: 1; }

.pspt-dur {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--f12); font-weight: 600; color: var(--t-600);
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--b-light);
}
.pspt-dur svg { width: 14px; height: 14px; stroke: var(--t-400); fill: none; flex-shrink: 0; }

/* ─────────────────────────────────────
   psstypes — 5 TYPES OF PATENT SEARCH
───────────────────────────────────── */
.psstypes { padding: var(--s8) 0; background: var(--bg-base); }
.psstypes-list { display: flex; flex-direction: column; margin-top: var(--s6); }

.psst-item { display: grid; grid-template-columns: 80px 1fr; gap: var(--s5); }
.psst-left { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }

.psst-num {
  font-family: 'Cinzel', serif; font-size: var(--f18); font-weight: 600;
  color: var(--t-700); background: var(--bg-card); border: 2px solid var(--b-mid);
  border-radius: 50%; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1; transition: background .2s, border-color .2s, color .2s;
}
.psst-item:hover .psst-num {
  background: var(--pg-500); color: var(--ps-900); border-color: var(--pg-500);
}

.psst-line {
  flex: 1; width: 2px;
  background: linear-gradient(to bottom, var(--b-mid), transparent);
  margin: 8px 0 0; min-height: var(--s7);
}
.psst-body { padding-bottom: var(--s6); }
.psst-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2);
}
.psst-body p { font-size: var(--f14); color: var(--t-500); line-height: 1.7; }

.psst-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3);
}
.psst-tags span {
  font-size: 11px; font-weight: 600; color: var(--t-500);
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: var(--rad-s); padding: 3px 10px;
}

/* ─────────────────────────────────────
   psdbs — PATENT DATABASES
───────────────────────────────────── */
.psdbs { padding: var(--s8) 0; background: var(--bg-alt); }
.psdbs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.psdb-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s5);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.psdb-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--pg-b); }
.psdb-featured {
  border-top: 3px solid var(--pg-500);
  grid-column: span 1;
}

.psdb-logo {
  width: 52px; height: 52px; background: rgba(212,180,90,.07); border: 1px solid var(--pg-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s2);
}
.psdb-logo svg { width: 26px; height: 26px; stroke: var(--t-600); fill: none; }

.psdb-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--t-600); background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: 100px; padding: 3px 9px; width: fit-content;
}
.psdb-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20); font-weight: 600; color: var(--t-900);
}
.psdb-full {
  font-size: var(--f12); color: var(--t-300); margin-top: -4px; margin-bottom: var(--s1);
}
.psdb-card p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; flex: 1; }
.psdb-link {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  color: var(--t-600); text-decoration: none;
  letter-spacing: .05em; margin-top: var(--s2);
  transition: color .2s;
}
.psdb-link:hover { color: var(--t-900); }

/* ─────────────────────────────────────
   pshist — HISTORY TIMELINE
───────────────────────────────────── */
.pshist { padding: var(--s8) 0; background: var(--bg-base); }
.pshist-line {
  position: relative; display: flex; flex-direction: column;
  gap: 0; margin-top: var(--s6);
}
.pshist-line::before {
  content: ''; position: absolute; left: 68px; top: 24px; bottom: 24px;
  width: 2px; background: linear-gradient(to bottom, var(--pg-b), transparent);
}

.pshist-item {
  display: grid; grid-template-columns: 80px 16px 1fr;
  gap: var(--s3); align-items: flex-start; padding-bottom: var(--s5);
  position: relative;
}
.pshist-yr {
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  color: var(--t-500); text-align: right; padding-top: 4px;
}
.pshist-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--b-mid);
  flex-shrink: 0; margin-top: 6px; position: relative; z-index: 1;
}
.pshist-dot-key {
  background: var(--pg-500); border-color: var(--pg-500);
  width: 16px; height: 16px; box-shadow: 0 0 0 4px rgba(212,180,90,.15);
}
.pshist-dot-now {
  background: var(--ps-400); border-color: var(--ps-400);
  width: 16px; height: 16px; box-shadow: 0 0 0 4px rgba(36,85,160,.15);
}
.pshist-text {
  font-size: var(--f14); color: var(--t-500); line-height: 1.65; padding-top: 2px;
}
.pshist-text strong { color: var(--t-800); }

/* ─────────────────────────────────────
   pshow — HOW TO CONDUCT A SEARCH
───────────────────────────────────── */
.pshow { padding: var(--s8) 0; background: var(--bg-alt); }
.pshow-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.pshow-step {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm); transition: var(--tr); position: relative; overflow: hidden;
}
.pshow-step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--pg-500), var(--pg-300));
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.pshow-step:hover::before { transform: scaleX(1); }
.pshow-step:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--pg-b); }

.pshow-snum {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  color: var(--t-300); letter-spacing: .1em; margin-bottom: var(--s3);
}
.pshow-step h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2);
}
.pshow-step p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; }

.pshow-tips {
  background: var(--bg-card); border: 1px solid var(--b-mid);
  border-left: 4px solid var(--pg-500);
  border-radius: 0 var(--rad-l) var(--rad-l) 0;
  padding: var(--s5); margin-top: var(--s6);
}
.pshow-tips-head {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--f15); color: var(--t-800); margin-bottom: var(--s4);
}
.pshow-tips-head svg { width: 20px; height: 20px; stroke: var(--t-600); fill: none; }
.pshow-tips-head strong { font-weight: 700; }

.pshow-tips-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4);
}
.pshow-tip { display: flex; flex-direction: column; gap: var(--s1); }
.pshow-tip-label {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  color: var(--t-700); letter-spacing: .06em;
  border-bottom: 1px solid var(--b-light); padding-bottom: 4px; margin-bottom: 4px;
}
.pshow-tip p { font-size: var(--f13); color: var(--t-400); line-height: 1.6; }

/* ─────────────────────────────────────
   psservice — 3-STEP SERVICE
───────────────────────────────────── */
.psservice { padding: var(--s8) 0; background: var(--bg-base); }
.psservice-grid {
  display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr;
  gap: var(--s3); align-items: center; margin-top: var(--s6);
}

.psservice-step {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm); text-align: center; transition: var(--tr);
}
.psservice-step:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--pg-b); }

.psservice-ico {
  width: 60px; height: 60px; background: rgba(212,180,90,.08); border: 1px solid var(--pg-b);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s3);
}
.psservice-ico svg { width: 28px; height: 28px; stroke: var(--t-600); fill: none; }

.psservice-step-num {
  font-family: 'Cinzel', serif; font-size: var(--f10); font-weight: 600;
  color: var(--t-300); letter-spacing: .1em; margin-bottom: var(--s2);
}
.psservice-step h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f17); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2);
}
.psservice-step p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; }
.psservice-step p strong { color: var(--t-800); }

.psservice-arrow {
  display: flex; align-items: center; justify-content: center;
}
.psservice-arrow svg { width: 24px; height: 24px; stroke: var(--t-200); fill: none; }

.psservice-includes {
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: var(--rad-l); padding: var(--s5) var(--s6); margin-top: var(--s5);
}
.psservice-includes h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18); font-weight: 600; color: var(--t-900); margin-bottom: var(--s4);
}
.psservice-includes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
}
.pssi-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--f13); color: var(--t-500); line-height: 1.55;
}
.pssi-item svg { width: 16px; height: 16px; stroke: var(--pg-500); flex-shrink: 0; margin-top: 2px; fill: none; }

/* ─────────────────────────────────────
   psnext — AFTER YOUR SEARCH
───────────────────────────────────── */
.psnext { padding: var(--s8) 0; background: var(--bg-alt); }
.psnext-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.psnext-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s5);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr); position: relative; overflow: hidden;
}
.psnext-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ps-500), var(--ps-300));
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.psnext-card:hover::before { transform: scaleX(1); }
.psnext-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--pg-b); }

.psnext-ico {
  width: 52px; height: 52px; background: rgba(36,85,160,.07); border: 1px solid rgba(36,85,160,.2);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s2);
}
.psnext-ico svg { width: 26px; height: 26px; stroke: var(--t-600); fill: none; }
.psnext-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18); font-weight: 600; color: var(--t-900);
}
.psnext-card p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; flex: 1; }
.psnext-link {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  letter-spacing: .06em; color: var(--t-700); text-decoration: none;
  margin-top: var(--s2); transition: color .2s;
}
.psnext-link:hover { color: var(--t-900); }

/* ─────────────────────────────────────
   psfaq — uses shared .fl .fi .fq .fa
───────────────────────────────────── */
.psfaq { padding: var(--s8) 0; background: var(--bg-base); }

/* ─────────────────────────────────────
   psctasec — CTA
───────────────────────────────────── */
.psctasec { padding: var(--s8) 0; background: var(--bg-alt); }
.psctab {
  text-align: center;
  background: linear-gradient(145deg, var(--ps-900), var(--ps-800));
  border-radius: var(--rad-l); padding: var(--s7) var(--s6);
  box-shadow: 0 8px 40px rgba(9,15,28,.35); position: relative; overflow: hidden;
}
.psctab-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(212,180,90,.08), transparent);
  pointer-events: none;
}
.psctab h2 {
  font-family: 'Playfair Display', serif; font-size: var(--f48); font-weight: 700;
  color: #f0ede8; line-height: 1.2; margin-bottom: var(--s3); position: relative;
}
.psctab h2 em { font-style: italic; color: var(--pg-300); }
.psctab p {
  font-size: var(--f16); color: rgba(240,237,232,.45);
  line-height: 1.7; max-width: 580px; margin: 0 auto var(--s5); position: relative;
}
.pscta-btns {
  display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; position: relative;
}
.psctabtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: var(--ps-900);
  background: linear-gradient(135deg, var(--pg-500), var(--pg-400));
  padding: 15px 32px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(212,180,90,.3);
  transition: opacity .2s, transform .2s;
}
.psctabtn:hover { opacity: .88; transform: translateY(-2px); }
.psctabtn svg { width: 16px; height: 16px; stroke: var(--ps-900); fill: none; }
.psctaGhost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,237,232,.65);
  border: 1.5px solid rgba(240,237,232,.18);
  padding: 15px 28px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.psctaGhost:hover { border-color: rgba(212,180,90,.35); background: rgba(212,180,90,.05); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .psh-title        { font-size: var(--f60); }
  .pswhat-grid      { grid-template-columns: 1fr; }
  .pswhat-cards     { grid-template-columns: repeat(2, 1fr); }
  .psptypes-grid    { grid-template-columns: repeat(2, 1fr); }
  .psdbs-grid       { grid-template-columns: repeat(2, 1fr); }
  .pshow-grid       { grid-template-columns: repeat(2, 1fr); }
  .pshow-tips-grid  { grid-template-columns: 1fr; }
  .psservice-grid   {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
  .psservice-arrow  { transform: rotate(90deg); }
  .psservice-includes-grid { grid-template-columns: repeat(2, 1fr); }
  .psnext-grid      { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .psh-inner  { padding: 0 var(--s4); }
  .psh-title  { font-size: var(--f48); }
  .psh-sub    { font-size: var(--f15); }
  .psh-sdiv   { display: none; }
  .psh-stats  { gap: var(--s3); }

  .pswhat-cards     { grid-template-columns: 1fr; }
  .psptypes-grid    { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .psdbs-grid       { grid-template-columns: 1fr; }
  .pshow-grid       { grid-template-columns: 1fr; }
  .pshow-tips-grid  { grid-template-columns: 1fr; }
  .psservice-includes-grid { grid-template-columns: 1fr; }
  .psnext-grid      { max-width: 100%; }

  .psst-item { grid-template-columns: 56px 1fr; gap: var(--s3); }
  .psst-num  { width: 44px; height: 44px; font-size: var(--f15); }

  .pshist-line::before { left: 58px; }
  .pshist-item { grid-template-columns: 68px 16px 1fr; gap: var(--s2); }

  .psctab h2 { font-size: var(--f36); }
  .pswhat-ico {
    margin: auto;
  }
  .pswhat-card h4 {
    text-align: center;
  }
  .pspt-ico {
    margin: auto;
  }
  .pspt-card h3 {
    text-align: center;
  }
  .pspt-dur {
    margin: auto;
  }
  .psst-body p {
    font-size: var(--f14);
    color: var(--t-500);
    line-height: 1.7;
    text-align: justify;
  }
  .psdb-card h3 {
    text-align: center;
  }
  .psdb-badge {
    margin: auto;
  }
  .psdb-card p {
    text-align: center;
  }
  .psdb-card p {
    text-align: center;
  }
  .psdb-link {
    text-align: center;
  }
  .psdb-logo {
    margin: auto;
  }
  .psnext-card h3 {
    text-align: center;
  }
  .psnext-ico {
    margin: auto;
  }
  .psnext-card p {
    text-align: justify;
  }
  .psnext-link {
    text-align: center;
  }
  .ppawhat-ben p {
    text-align: justify;
  }
  .ppawho-ico {
    margin: auto;
  }
  .ppawho-card h3 {
    text-align: center;
  }
  .ppawho-tag {
    margin: auto;
  }
  .ppaspec-tag {
    margin: auto;
  }
  .ppaspec-item p {
    text-align: justify;
  }
  .ppaspec-warning div {
    text-align: justify;
  }
  .ppadoc-tag {
    margin: auto;
  }
  .ppaproc-body h3 {
    text-align: center;
  }
  .ppaproc-body > p {
    text-align: justify;
  }
  .prgwhat-body p {
    text-align: justify;
  }
  .prgel-card h3 {
    text-align: center;
  }
  .prgspec-tag {
    margin: auto;
  }
  .prgspec-critical-body p {
    text-align: justify;
  }
  .prgproc-body > p {
    text-align: justify;
  }
  .prgproc-body h3 {
    text-align: center;
  }
  .prgben-ico {
    margin: auto;
  }
  .prgben-card h3 {
    text-align: center;
  }
  .prgrel-ico {
    margin: auto;
  }
  .prgrel-card h3 {
    text-align: center;
  }
 
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .psh-title   { font-size: var(--f36); }
  .psh-sub     { font-size: var(--f14); }
  .psh-actions { flex-direction: column; align-items: center; }
  .psh-btn-primary,
  .psh-btn-ghost { width: 100%; justify-content: center; }
  .psh-sv      { font-size: var(--f20); }
  .psh-stats   { flex-direction: column; gap: var(--s2); }

  .psst-left   { display: none; }
  .psst-item   { grid-template-columns: 1fr; }
  .psst-body   { padding-bottom: var(--s5); }

  .pshist-line::before { display: none; }
  .pshist-item { grid-template-columns: 56px 1fr; gap: var(--s2); }
  .pshist-dot  { display: none; }

  .psctab      { padding: var(--s5) var(--s4); }
  .psctab h2   { font-size: var(--f28); }
  .pscta-btns  { flex-direction: column; align-items: center; }
  .psctabtn,
  .psctaGhost  { width: 100%; justify-content: center; }
  .pswhat-body p {
    text-align: justify;
  }
  .pswhat-ico {
    margin: auto;
  }
  .pswhat-card h4 {
    text-align: center;
  }
  .pspt-ico {
    margin: auto;
  }
  .pspt-card h3 {
    text-align: center;
  }
  .pspt-dur {
    margin: auto;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .psh-badge   { font-size: 8px; letter-spacing: .1em; }
  .psh-title   { font-size: var(--f28); }
  .psh-sv      { font-size: var(--f18); }
  .pspt-ico    { width: 44px; height: 44px; }
  .psdb-logo   { width: 44px; height: 44px; }
  .pswhat-ico  { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .psh-title       { font-size: var(--f24); }
  .psh-sub         { font-size: var(--f13); }
  .psh-btn-primary,
  .psh-btn-ghost   { font-size: var(--f12); padding: 12px 18px; }
  .pspt-card h3    { font-size: var(--f16); }
  .psst-body h3    { font-size: var(--f17); }
  .psdb-card h3    { font-size: var(--f17); }
  .psctab h2       { font-size: var(--f22); }
}

/*_____________________________________________Patent Provisional__________________________________*/

/* ══════════════════════════════════════
   PROVISIONAL PATENT APPLICATION PAGE CSS
   Prefix: ppah· ppawhat· ppavsc· ppawho·
           ppaspec· ppadocs· ppafees· ppaproc·
           ppanot· ppafaq· ppactasec·
   Shares --ps-* navy + --pg-* gold palette
   with patent-search.css
   Text: always neutral (var --t-*) — gold for accents only
══════════════════════════════════════ */

/* ─────────────────────────────────────
   ppah — HERO
───────────────────────────────────── */
.ppah {
  position: relative;
  background: linear-gradient(155deg, var(--ps-900) 0%, #080e1c 40%, var(--ps-800) 100%);
  padding: clamp(7rem,14vw,12rem) 0 clamp(4rem,7vw,6rem);
  overflow: hidden;
}
.ppah-canvas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ppah-orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.ppah-orb1 {
  width: clamp(320px,45vw,680px); height: clamp(320px,45vw,680px);
  background: radial-gradient(circle, rgba(36,85,160,.18) 0%, transparent 70%);
  top: -25%; left: -8%;
}
.ppah-orb2 {
  width: clamp(200px,26vw,420px); height: clamp(200px,26vw,420px);
  background: radial-gradient(circle, rgba(212,180,90,.1) 0%, transparent 70%);
  bottom: -5%; right: 4%;
}
.ppah-orb3 {
  width: clamp(160px,22vw,360px); height: clamp(160px,22vw,360px);
  background: radial-gradient(circle, rgba(20,45,90,.35) 0%, transparent 70%);
  top: 45%; left: 55%; transform: translate(-50%,-50%);
}
.ppah-grid { position: absolute; inset: 0; width: 100%; height: 100%; }

.ppah-inner {
  position: relative; z-index: 1; text-align: center;
  max-width: clamp(560px,80vw,940px); margin: 0 auto; padding: 0 var(--s5);
}
.ppah-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f10); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(240,237,232,.65);
  background: rgba(212,180,90,.08); border: 1px solid rgba(212,180,90,.2);
  border-radius: 100px; padding: 6px 18px; margin-bottom: var(--s4);
}
.ppah-badge svg { width: 14px; height: 14px; stroke: rgba(212,180,90,.7); fill: none; }

.ppah-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72); font-weight: 700;
  color: #f0ede8; line-height: 1.1; margin-bottom: var(--s4);
}
.ppah-title em { font-style: italic; color: var(--pg-300); }

.ppah-sub {
  font-size: var(--f17); color: rgba(240,237,232,.5);
  line-height: 1.75; max-width: 700px; margin: 0 auto var(--s5);
}
.ppah-sub strong { color: rgba(240,237,232,.82); }

.ppah-actions {
  display: flex; justify-content: center;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6);
}
.ppah-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: var(--ps-900);
  background: linear-gradient(135deg, var(--pg-500), var(--pg-400));
  padding: 14px 28px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(212,180,90,.3);
  transition: opacity .2s, transform .2s;
}
.ppah-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.ppah-btn-primary svg { width: 16px; height: 16px; stroke: var(--ps-900); fill: none; }

.ppah-btn-ghost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,237,232,.65);
  border: 1.5px solid rgba(240,237,232,.18);
  padding: 14px 24px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.ppah-btn-ghost:hover { border-color: rgba(212,180,90,.4); background: rgba(212,180,90,.05); }

.ppah-stats {
  display: flex; justify-content: center; align-items: center;
  gap: var(--s4); flex-wrap: wrap;
  border-top: 1px solid rgba(240,237,232,.08); padding-top: var(--s5);
}
.ppah-stat  { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ppah-sdiv  { width: 1px; height: 32px; background: rgba(240,237,232,.1); }
.ppah-sv {
  font-family: 'Playfair Display', serif; font-size: var(--f28); font-weight: 700;
  color: var(--pg-300); line-height: 1;
}
.ppah-sl {
  font-size: var(--f11); color: rgba(240,237,232,.35);
  letter-spacing: .07em; text-transform: uppercase;
}

/* ─────────────────────────────────────
   ppawhat — WHAT IS PROVISIONAL PATENT
───────────────────────────────────── */
.ppawhat { padding: var(--s8) 0; background: var(--bg-base); }
.ppawhat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start;
  margin-top: var(--s5);
}
.ppawhat-body p {
  font-size: var(--f14); color: var(--t-500); line-height: 1.78;
}
.ppawhat-body p + p { margin-top: var(--s3); }
.ppawhat-body p strong { color: var(--t-800); }
.ppawhat-body p em { font-style: italic; }

.ppawhat-highlight {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-left: 4px solid var(--pg-500);
  border-radius: 0 var(--rad-m) var(--rad-m) 0;
  padding: var(--s3) var(--s4); margin-top: var(--s4);
}
.ppawhat-highlight svg { width: 18px; height: 18px; stroke: var(--t-400); flex-shrink: 0; margin-top: 2px; fill: none; }
.ppawhat-highlight p { font-size: var(--f13); color: var(--t-500); line-height: 1.7; margin: 0; }
.ppawhat-highlight p strong { color: var(--t-900); }
.ppawhat-highlight p em { font-style: italic; }

.ppawhat-benefits { display: flex; flex-direction: column; gap: var(--s4); }
.ppawhat-ben {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-m); padding: var(--s3) var(--s4);
  box-shadow: var(--sh-sm); transition: var(--tr);
}
.ppawhat-ben:hover { transform: translateX(4px); border-color: var(--pg-b); box-shadow: var(--sh-md); }
.ppawhat-bico {
  width: 40px; height: 40px; min-width: 40px;
  background: rgba(212,180,90,.07); border: 1px solid var(--pg-b);
  border-radius: var(--rad-s); display: flex; align-items: center; justify-content: center;
}
.ppawhat-bico svg { width: 20px; height: 20px; stroke: var(--t-600); fill: none; }
.ppawhat-ben h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f15); font-weight: 600; color: var(--t-900); margin-bottom: 4px;
}
.ppawhat-ben p { font-size: var(--f13); color: var(--t-400); line-height: 1.6; }

/* ─────────────────────────────────────
   ppavsc — COMPARISON TABLE
───────────────────────────────────── */
.ppavsc { padding: var(--s8) 0; background: var(--bg-alt); }

.ppavsc-table {
  border-radius: var(--rad-l); overflow: hidden;
  box-shadow: var(--sh-md); border: 1px solid var(--b-light);
  margin-top: var(--s5);
}
.ppavsc-head {
  display: grid; grid-template-columns: 200px 1fr 1fr;
  background: var(--ps-800);
  padding: 14px 20px; gap: var(--s4);
}
.ppavsc-head div {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(240,237,232,.75);
}
.ppavsc-head div:nth-child(2) { color: var(--pg-300); }

.ppavsc-row {
  display: grid; grid-template-columns: 200px 1fr 1fr;
  padding: 13px 20px; gap: var(--s4);
  border-top: 1px solid var(--b-light);
  background: var(--bg-card); align-items: center;
  transition: background .15s;
}
.ppavsc-row:hover { background: var(--bg-alt); }
.ppavsc-row span { font-size: var(--f13); color: var(--t-500); line-height: 1.5; }
.ppavsc-row span:first-child { font-size: var(--f12); font-weight: 600; color: var(--t-700); }
.ppavsc-yes { color: var(--t-700) !important; font-weight: 500 !important; }
.ppavsc-no  { color: var(--t-300) !important; font-style: italic; }
.ppavsc-hi  {
  font-family: 'Playfair Display', serif !important;
  font-size: var(--f18) !important; font-weight: 700 !important;
  color: var(--t-900) !important;
}

/* ─────────────────────────────────────
   ppawho — WHO CAN FILE
───────────────────────────────────── */
.ppawho { padding: var(--s8) 0; background: var(--bg-base); }
.ppawho-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.ppawho-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.ppawho-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--pg-b); }
.ppawho-ico {
  width: 48px; height: 48px; background: rgba(212,180,90,.07); border: 1px solid var(--pg-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s1);
}
.ppawho-ico svg { width: 24px; height: 24px; stroke: var(--t-600); fill: none; }
.ppawho-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f17); font-weight: 600; color: var(--t-900);
}
.ppawho-card p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; flex: 1; }
.ppawho-tag {
  font-size: 11px; font-weight: 600; color: var(--t-600); letter-spacing: .05em;
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: var(--rad-s); padding: 4px 10px; width: fit-content; margin-top: var(--s1);
}

.ppawho-note {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: rgba(212,144,10,.05); border: 1px solid rgba(212,144,10,.2);
  border-left: 4px solid var(--g-400);
  border-radius: 0 var(--rad-m) var(--rad-m) 0;
  padding: var(--s3) var(--s4); margin-top: var(--s5);
}
.ppawho-note svg { width: 20px; height: 20px; stroke: var(--g-400); flex-shrink: 0; margin-top: 2px; fill: none; }
.ppawho-note div { font-size: var(--f13); color: var(--t-500); line-height: 1.7; }
.ppawho-note strong { color: var(--t-900); }

/* ─────────────────────────────────────
   ppaspec — PROVISIONAL SPEC CONTENT
───────────────────────────────────── */
.ppaspec { padding: var(--s8) 0; background: var(--bg-alt); }
.ppaspec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5);
}

.ppaspec-item {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr); position: relative; overflow: hidden;
}
.ppaspec-req { border-top: 3px solid var(--pg-500); }
.ppaspec-opt { border-top: 3px solid var(--b-mid); }
.ppaspec-item:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.ppaspec-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; width: fit-content;
}
.ppaspec-tag-req {
  color: var(--t-600); background: rgba(212,180,90,.08);
  border: 1px solid rgba(212,180,90,.25);
}
.ppaspec-tag-opt {
  color: var(--t-400); background: var(--bg-alt); border: 1px solid var(--b-mid);
}
.ppaspec-num {
  font-family: 'Cinzel', serif; font-size: var(--f28); font-weight: 600;
  color: var(--b-mid); line-height: 1; margin-top: var(--s1);
}
.ppaspec-item h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f16); font-weight: 600; color: var(--t-900);
}
.ppaspec-item p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; flex: 1; }

.ppaspec-warning {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: rgba(212,144,10,.05); border: 1px solid rgba(212,144,10,.2);
  border-left: 4px solid var(--g-400);
  border-radius: 0 var(--rad-m) var(--rad-m) 0;
  padding: var(--s4) var(--s5); margin-top: var(--s5);
}
.ppaspec-warning svg { width: 20px; height: 20px; stroke: var(--g-400); flex-shrink: 0; margin-top: 2px; fill: none; }
.ppaspec-warning div { font-size: var(--f13); color: var(--t-500); line-height: 1.7; }
.ppaspec-warning strong { color: var(--t-900); }

/* ─────────────────────────────────────
   ppadocs — DOCUMENTS
───────────────────────────────────── */
.ppadocs { padding: var(--s8) 0; background: var(--bg-base); }
.ppadocs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s5);
}

.ppadoc-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.ppadoc-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.ppadoc-must { border-top: 3px solid var(--pg-500); }
.ppadoc-cond { border-top: 3px solid var(--b-dark); }

.ppadoc-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; width: fit-content;
}
.ppadoc-tag-must {
  color: var(--t-600); background: rgba(212,180,90,.08);
  border: 1px solid rgba(212,180,90,.22);
}
.ppadoc-tag-cond {
  color: var(--t-400); background: var(--bg-alt); border: 1px solid var(--b-mid);
}
.ppadoc-num {
  font-family: 'Cinzel', serif; font-size: var(--f28); font-weight: 600;
  color: var(--b-mid); line-height: 1; margin-top: var(--s1);
}
.ppadoc-card h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f15); font-weight: 600; color: var(--t-900);
}
.ppadoc-card p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; flex: 1; }

/* ─────────────────────────────────────
   ppafees — FEE TABLE
───────────────────────────────────── */
.ppafees { padding: var(--s8) 0; background: var(--bg-alt); }

.ppafees-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--rad-l); box-shadow: var(--sh-md);
  border: 1px solid var(--b-light); margin-top: var(--s5);
}
.ppafees-tbl {
  width: 100%; min-width: 620px; border-collapse: collapse; background: var(--bg-card);
}
.ppafees-tbl thead tr { background: var(--ps-800); }
.ppafees-tbl thead th {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,237,232,.7); padding: 16px 20px; text-align: left; white-space: nowrap;
}
.ppafees-tbl thead th:nth-child(3),
.ppafees-tbl thead th:nth-child(4) { text-align: center; }

.ppafees-tbl tbody tr { border-bottom: 1px solid var(--b-light); transition: background .15s; }
.ppafees-tbl tbody tr:last-child { border-bottom: none; }
.ppafees-tbl tbody tr:hover { background: var(--bg-base); }
.ppafees-tbl tbody td { padding: 14px 20px; font-size: var(--f13); color: var(--t-500); line-height: 1.5; }
.ppafees-tbl tbody td:first-child { color: var(--t-800); font-weight: 600; }

.ppafee-hl { background: rgba(212,180,90,.025) !important; }
.ppafee-hl:hover { background: rgba(212,180,90,.06) !important; }
.ppafee-v {
  text-align: center !important;
  font-family: 'Playfair Display', serif; font-size: var(--f20) !important;
  font-weight: 700; color: var(--t-900) !important;
}
.ppafee-phy {
  text-align: center !important;
  font-size: var(--f14) !important;
  color: var(--t-400) !important;
}

.ppafees-notes {
  display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4);
}
.ppafees-note {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-m); padding: var(--s3) var(--s4);
}
.ppafees-note svg { width: 18px; height: 18px; stroke: var(--t-400); flex-shrink: 0; margin-top: 2px; fill: none; }
.ppafees-note p { font-size: var(--f12); color: var(--t-400); line-height: 1.65; }
.ppafees-note strong { color: var(--t-700); }
.ppafees-note-warn {
  background: rgba(212,144,10,.04); border-color: rgba(212,144,10,.18);
}
.ppafees-note-warn svg { stroke: var(--g-400); }

/* ─────────────────────────────────────
   ppaproc — FILING PROCESS
───────────────────────────────────── */
.ppaproc { padding: var(--s8) 0; background: var(--bg-base); }
.ppaproc-steps { display: flex; flex-direction: column; margin-top: var(--s6); }
.ppaproc-step { display: grid; grid-template-columns: 80px 1fr; gap: var(--s5); }
.ppaproc-left { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }

.ppaproc-num {
  font-family: 'Cinzel', serif; font-size: var(--f18); font-weight: 600;
  color: var(--t-700); background: var(--bg-card); border: 2px solid var(--b-mid);
  border-radius: 50%; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1; transition: background .2s, border-color .2s, color .2s;
}
.ppaproc-step:hover .ppaproc-num {
  background: var(--pg-500); color: var(--ps-900); border-color: var(--pg-500);
}
.ppaproc-line {
  flex: 1; width: 2px;
  background: linear-gradient(to bottom, var(--b-mid), transparent);
  margin: 8px 0 0; min-height: var(--s7);
}
.ppaproc-body { padding-bottom: var(--s6); }
.ppaproc-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2);
}
.ppaproc-body > p { font-size: var(--f14); color: var(--t-500); line-height: 1.7; }
.ppaproc-body > p strong { color: var(--t-800); }

.ppaproc-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: var(--s3); background: var(--bg-alt);
  border-left: 3px solid var(--b-dark);
  border-radius: 0 var(--rad-s) var(--rad-s) 0;
  padding: var(--s2) var(--s3); font-size: var(--f13); color: var(--t-500); line-height: 1.7;
}
.ppaproc-note svg { width: 16px; height: 16px; stroke: var(--t-400); flex-shrink: 0; margin-top: 2px; fill: none; }
.ppaproc-note strong { color: var(--t-800); }
.ppaproc-note-warn { background: rgba(212,144,10,.05); border-left-color: var(--g-400); }
.ppaproc-note-warn svg { stroke: var(--g-400); }
.ppaproc-note-ok   { background: rgba(36,85,160,.06); border-left-color: var(--ps-400); font-weight: 500; }
.ppaproc-note-ok svg { stroke: var(--ps-400); }

/* ─────────────────────────────────────
   ppanot — WHAT CANNOT BE PATENTED
───────────────────────────────────── */
.ppanot { padding: var(--s8) 0; background: var(--bg-alt); }
.ppanot-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); margin-top: var(--s5);
}

.ppanot-item {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4);
  box-shadow: var(--sh-sm); transition: var(--tr);
}
.ppanot-item:hover { border-color: var(--b-dark); box-shadow: var(--sh-md); }

.ppanot-x {
  width: 32px; height: 32px; min-width: 32px;
  background: rgba(168,32,56,.08); border: 1.5px solid rgba(168,32,56,.18);
  border-radius: var(--rad-s); display: flex; align-items: center; justify-content: center;
  font-size: var(--f14); font-weight: 700; color: #a82038; line-height: 1;
  margin-top: 2px;
}
.ppanot-item div { flex: 1; }
.ppanot-item strong { font-size: var(--f14); font-weight: 700; color: var(--t-800); display: block; margin-bottom: 4px; }
.ppanot-item p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; }

/* ─────────────────────────────────────
   ppafaq — uses shared .fl .fi .fq .fa
───────────────────────────────────── */
.ppafaq { padding: var(--s8) 0; background: var(--bg-base); }

/* ─────────────────────────────────────
   ppactasec — CTA
───────────────────────────────────── */
.ppactasec { padding: var(--s8) 0; background: var(--bg-alt); }
.ppactab {
  text-align: center;
  background: linear-gradient(145deg, var(--ps-900), var(--ps-800));
  border-radius: var(--rad-l); padding: var(--s7) var(--s6);
  box-shadow: 0 8px 40px rgba(9,15,28,.35); position: relative; overflow: hidden;
}
.ppactab-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 65% at 50% 0%, rgba(212,180,90,.08), transparent);
  pointer-events: none;
}
.ppactab h2 {
  font-family: 'Playfair Display', serif; font-size: var(--f48); font-weight: 700;
  color: #f0ede8; line-height: 1.2; margin-bottom: var(--s3); position: relative;
}
.ppactab h2 em { font-style: italic; color: var(--pg-300); }
.ppactab p {
  font-size: var(--f16); color: rgba(240,237,232,.45);
  line-height: 1.7; max-width: 600px; margin: 0 auto var(--s5); position: relative;
}
.ppacta-btns {
  display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; position: relative;
}
.ppactabtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: var(--ps-900);
  background: linear-gradient(135deg, var(--pg-500), var(--pg-400));
  padding: 15px 32px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(212,180,90,.3);
  transition: opacity .2s, transform .2s;
}
.ppactabtn:hover { opacity: .88; transform: translateY(-2px); }
.ppactabtn svg { width: 16px; height: 16px; stroke: var(--ps-900); fill: none; }
.ppactaGhost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,237,232,.65);
  border: 1.5px solid rgba(240,237,232,.18);
  padding: 15px 28px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.ppactaGhost:hover { border-color: rgba(212,180,90,.4); background: rgba(212,180,90,.05); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .ppah-title     { font-size: var(--f60); }
  .ppawhat-grid   { grid-template-columns: 1fr; }
  .ppavsc-head    { grid-template-columns: 160px 1fr 1fr; }
  .ppavsc-row     { grid-template-columns: 160px 1fr 1fr; }
  .ppawho-grid    { grid-template-columns: repeat(2, 1fr); }
  .ppaspec-grid   { grid-template-columns: repeat(2, 1fr); }
  .ppadocs-grid   { grid-template-columns: repeat(2, 1fr); }
  .ppanot-grid    { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .ppah-inner  { padding: 0 var(--s4); }
  .ppah-title  { font-size: var(--f48); }
  .ppah-sub    { font-size: var(--f15); }
  .ppah-sdiv   { display: none; }
  .ppah-stats  { gap: var(--s3); }

  .ppawhat-benefits { gap: var(--s3); }
  .ppawho-grid    { grid-template-columns: 1fr; }
  .ppaspec-grid   { grid-template-columns: 1fr; }
  .ppadocs-grid   { grid-template-columns: 1fr; }

  /* comparison table — scrollable */
  .ppavsc-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ppavsc-head  { min-width: 560px; }
  .ppavsc-row   { min-width: 560px; }

  .ppafees-wrap::before {
    content: 'Scroll to see all columns →';
    display: block; text-align: right;
    font-size: var(--f11); color: var(--t-300); letter-spacing: .06em; padding: 0 4px 8px;
  }

  .ppaproc-step { grid-template-columns: 56px 1fr; gap: var(--s3); }
  .ppaproc-num  { width: 44px; height: 44px; font-size: var(--f15); }

  .ppactab h2 { font-size: var(--f36); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .ppah-title   { font-size: var(--f36); }
  .ppah-sub     { font-size: var(--f14); }
  .ppah-actions { flex-direction: column; align-items: center; }
  .ppah-btn-primary,
  .ppah-btn-ghost { width: 100%; justify-content: center; }
  .ppah-sv      { font-size: var(--f20); }
  .ppah-stats   { flex-direction: column; gap: var(--s2); }

  .ppawhat-highlight { flex-direction: column; }
  .ppawho-note  { flex-direction: column; }
  .ppaspec-warning { flex-direction: column; }

  .ppaproc-left { display: none; }
  .ppaproc-step { grid-template-columns: 1fr; }
  .ppaproc-body { padding-bottom: var(--s5); }
  .ppaproc-note { flex-direction: row; }

  .ppactab      { padding: var(--s5) var(--s4); }
  .ppactab h2   { font-size: var(--f28); }
  .ppacta-btns  { flex-direction: column; align-items: center; }
  .ppactabtn,
  .ppactaGhost  { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .ppah-badge  { font-size: 8px; letter-spacing: .1em; }
  .ppah-title  { font-size: var(--f28); }
  .ppah-sv     { font-size: var(--f18); }
  .ppawhat-bico { width: 36px; height: 36px; min-width: 36px; }
  .ppawho-ico  { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .ppah-title  { font-size: var(--f24); }
  .ppah-sub    { font-size: var(--f13); }
  .ppah-btn-primary,
  .ppah-btn-ghost { font-size: var(--f12); padding: 12px 16px; }
  .ppawhat-body p { font-size: var(--f13); }
  .ppaproc-body h3 { font-size: var(--f17); }
  .ppafees-tbl td  { font-size: var(--f12); padding: 10px 12px; }
  .ppafee-v    { font-size: var(--f16) !important; }
  .ppactab h2  { font-size: var(--f22); }
}

/*____________________________________________Patent Registration_____________________________*/

/* ══════════════════════════════════════
   PATENT REGISTRATION PAGE CSS
   Prefix: prgh· prgwhat· prgelig· prgapp·
           prgspec· prgdocs· prgproc· prgfees·
           prgbens· prgfaq· prgrel· prgctasec·
   Shares --ps-* navy + --pg-* gold palette
   Hero: radial starburst SVG (unique to this page)
   Text: always neutral (var --t-*) — gold for accents only
══════════════════════════════════════ */

/* ─────────────────────────────────────
   prgh — HERO
───────────────────────────────────── */
.prgh {
  position: relative;
  background: linear-gradient(160deg, #080d1a 0%, var(--ps-900) 50%, #0c1628 100%);
  padding: clamp(7rem,14vw,12rem) 0 clamp(4rem,7vw,6rem);
  overflow: hidden;
}
.prgh-canvas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.prgh-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.prgh-orb1 {
  width: clamp(350px,50vw,700px); height: clamp(350px,50vw,700px);
  background: radial-gradient(circle, rgba(36,85,160,.15) 0%, transparent 70%);
  top: -20%; right: -5%;
}
.prgh-orb2 {
  width: clamp(220px,30vw,480px); height: clamp(220px,30vw,480px);
  background: radial-gradient(circle, rgba(212,180,90,.08) 0%, transparent 70%);
  bottom: 0; left: 8%;
}
.prgh-burst {
  position: absolute; top: 50%; left: 55%;
  transform: translate(-50%, -50%);
  width: clamp(400px,70vw,900px); height: clamp(400px,70vw,900px);
  opacity: .7;
}

.prgh-inner {
  position: relative; z-index: 1; text-align: center;
  max-width: clamp(560px,80vw,940px); margin: 0 auto; padding: 0 var(--s5);
}
.prgh-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f10); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(240,237,232,.65);
  background: rgba(212,180,90,.08); border: 1px solid rgba(212,180,90,.2);
  border-radius: 100px; padding: 6px 18px; margin-bottom: var(--s4);
}
.prgh-badge svg { width: 14px; height: 14px; stroke: rgba(212,180,90,.7); fill: none; }

.prgh-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72); font-weight: 700;
  color: #f0ede8; line-height: 1.1; margin-bottom: var(--s4);
}
.prgh-title em { font-style: italic; color: var(--pg-300); }

.prgh-sub {
  font-size: var(--f17); color: rgba(240,237,232,.5);
  line-height: 1.75; max-width: 700px; margin: 0 auto var(--s5);
}
.prgh-sub strong { color: rgba(240,237,232,.8); }

.prgh-actions {
  display: flex; justify-content: center;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6);
}
.prgh-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: var(--ps-900);
  background: linear-gradient(135deg, var(--pg-500), var(--pg-400));
  padding: 14px 28px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(212,180,90,.3);
  transition: opacity .2s, transform .2s;
}
.prgh-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.prgh-btn-primary svg { width: 16px; height: 16px; stroke: var(--ps-900); fill: none; }

.prgh-btn-ghost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,237,232,.65);
  border: 1.5px solid rgba(240,237,232,.18);
  padding: 14px 24px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.prgh-btn-ghost:hover { border-color: rgba(212,180,90,.4); background: rgba(212,180,90,.05); }

.prgh-stats {
  display: flex; justify-content: center; align-items: center;
  gap: var(--s4); flex-wrap: wrap;
  border-top: 1px solid rgba(240,237,232,.08); padding-top: var(--s5);
}
.prgh-stat  { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.prgh-sdiv  { width: 1px; height: 32px; background: rgba(240,237,232,.1); }
.prgh-sv {
  font-family: 'Playfair Display', serif; font-size: var(--f28); font-weight: 700;
  color: var(--pg-300); line-height: 1;
}
.prgh-sl {
  font-size: var(--f11); color: rgba(240,237,232,.35);
  letter-spacing: .07em; text-transform: uppercase;
}

/* ─────────────────────────────────────
   prgwhat — WHAT IS PATENT REGISTRATION
───────────────────────────────────── */
.prgwhat { padding: var(--s8) 0; background: var(--bg-base); }
.prgwhat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start;
  margin-top: var(--s5);
}
.prgwhat-body p { font-size: var(--f14); color: var(--t-500); line-height: 1.78; }
.prgwhat-body p + p { margin-top: var(--s3); }
.prgwhat-body p strong { color: var(--t-800); }

.prgwhat-rights {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm);
}
.prgwhat-rights h4 {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-600); border-bottom: 1px solid var(--b-light);
  padding-bottom: var(--s2); margin-bottom: var(--s3);
}
.prgwr-item {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) 0; border-bottom: 1px solid var(--b-light);
}
.prgwr-item:last-child { border-bottom: none; padding-bottom: 0; }
.prgwr-ico {
  width: 36px; height: 36px; min-width: 36px;
  background: rgba(212,180,90,.07); border: 1px solid var(--pg-b);
  border-radius: var(--rad-s); display: flex; align-items: center; justify-content: center;
}
.prgwr-ico svg { width: 18px; height: 18px; stroke: var(--t-600); fill: none; }
.prgwr-item div { flex: 1; }
.prgwr-item strong { font-size: var(--f13); font-weight: 700; color: var(--t-800); display: block; margin-bottom: 3px; }
.prgwr-item p { font-size: var(--f12); color: var(--t-400); line-height: 1.55; }

/* ─────────────────────────────────────
   prgelig — ELIGIBILITY
───────────────────────────────────── */
.prgelig { padding: var(--s8) 0; background: var(--bg-alt); }
.prgelig-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.prgel-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr); position: relative; overflow: hidden;
}
.prgel-pass { border-top: 3px solid var(--pg-500); }
.prgel-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--pg-b); }

.prgel-num {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  color: var(--t-300); letter-spacing: .1em;
}
.prgel-ico {
  width: 52px; height: 52px; background: rgba(212,180,90,.07); border: 1px solid var(--pg-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s2);
}
.prgel-ico svg { width: 26px; height: 26px; stroke: var(--t-600); fill: none; }
.prgel-card h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f18); font-weight: 600; color: var(--t-900);
}
.prgel-card h3 span {
  display: block; font-family: 'Jost', sans-serif; font-size: var(--f11); font-weight: 500;
  color: var(--t-400); margin-top: 2px;
}
.prgel-card > p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; flex: 1; }

.prgel-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--f12); font-style: italic; color: var(--t-500);
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--b-light);
}
.prgel-check svg { width: 14px; height: 14px; stroke: var(--pg-500); flex-shrink: 0; margin-top: 2px; fill: none; }

/* ─────────────────────────────────────
   prgapp — APPLICATION TYPES
───────────────────────────────────── */
.prgapp { padding: var(--s8) 0; background: var(--bg-base); }
.prgapp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.prgapp-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.prgapp-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--pg-b); }
.prgapp-featured {
  border: 2px solid var(--pg-b);
  background: linear-gradient(145deg, var(--bg-card), rgba(212,180,90,.03));
}

.prgapp-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s2); }
.prgapp-ico {
  width: 48px; height: 48px; background: rgba(212,180,90,.07); border: 1px solid var(--pg-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
}
.prgapp-ico svg { width: 24px; height: 24px; stroke: var(--t-600); fill: none; }

.prgapp-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; white-space: nowrap;
}
.prgapp-badge-gold {
  color: var(--t-600); background: rgba(212,180,90,.1); border: 1px solid var(--pg-b);
}
.prgapp-badge-blue {
  color: var(--t-500); background: var(--bg-alt); border: 1px solid var(--b-mid);
}

.prgapp-card h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f18); font-weight: 600; color: var(--t-900);
}
.prgapp-card p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; flex: 1; }
.prgapp-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2);
  padding-top: var(--s2); border-top: 1px solid var(--b-light);
}
.prgapp-meta span {
  font-size: 11px; font-weight: 600; color: var(--t-600);
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: var(--rad-s); padding: 3px 8px;
}

/* ─────────────────────────────────────
   prgspec — COMPLETE SPECIFICATION
───────────────────────────────────── */
.prgspec { padding: var(--s8) 0; background: var(--bg-alt); }
.prgspec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5);
}

.prgspec-item {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.prgspec-item:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.prgspec-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; width: fit-content;
}
.prgspec-tag-must {
  color: var(--t-600); background: rgba(212,180,90,.08); border: 1px solid var(--pg-b);
}
.prgspec-tag-cond {
  color: var(--t-400); background: var(--bg-alt); border: 1px solid var(--b-mid);
}
.prgspec-num {
  font-family: 'Cinzel', serif; font-size: var(--f28); font-weight: 600;
  color: var(--b-mid); line-height: 1;
}
.prgspec-item h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f16); font-weight: 600; color: var(--t-900);
}
.prgspec-item p { font-size: var(--f13); color: var(--t-400); line-height: 1.65; flex: 1; }

.prgspec-critical {
  display: flex; gap: var(--s4); align-items: flex-start;
  background: rgba(212,144,10,.05); border: 1px solid rgba(212,144,10,.2);
  border-left: 4px solid var(--g-400);
  border-radius: 0 var(--rad-l) var(--rad-l) 0;
  padding: var(--s5); margin-top: var(--s5);
}
.prgspec-critical-ico {
  width: 44px; height: 44px; min-width: 44px;
  background: rgba(212,144,10,.1); border-radius: var(--rad-m);
  display: flex; align-items: center; justify-content: center;
}
.prgspec-critical-ico svg { width: 22px; height: 22px; stroke: var(--g-400); fill: none; }
.prgspec-critical-body strong { font-size: var(--f15); font-weight: 700; color: var(--t-900); display: block; margin-bottom: var(--s2); }
.prgspec-critical-body p { font-size: var(--f13); color: var(--t-500); line-height: 1.7; }

/* ─────────────────────────────────────
   prgdocs — DOCUMENTS
───────────────────────────────────── */
.prgdocs { padding: var(--s8) 0; background: var(--bg-base); }
.prgdocs-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); margin-top: var(--s5);
}

.prgdoc-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.prgdoc-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.prgdoc-must { border-top: 3px solid var(--pg-500); }
.prgdoc-cond { border-top: 3px solid var(--b-dark); }

.prgdoc-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px; width: fit-content;
}
.prgdoc-tag-must {
  color: var(--t-600); background: rgba(212,180,90,.08); border: 1px solid rgba(212,180,90,.22);
}
.prgdoc-tag-cond {
  color: var(--t-400); background: var(--bg-alt); border: 1px solid var(--b-mid);
}
.prgdoc-card h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f14); font-weight: 600; color: var(--t-900);
}
.prgdoc-card p { font-size: var(--f12); color: var(--t-400); line-height: 1.6; flex: 1; }

/* ─────────────────────────────────────
   prgproc — REGISTRATION PROCESS
───────────────────────────────────── */
.prgproc { padding: var(--s8) 0; background: var(--bg-alt); }
.prgproc-timeline { display: flex; flex-direction: column; gap: var(--s6); margin-top: var(--s6); }

.prgstage {}
.prgstage-label {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--t-500);
  background: var(--bg-base); border: 1px solid var(--b-mid);
  border-radius: 100px; padding: 6px 16px; display: inline-block;
  margin-bottom: var(--s4);
}
.prgstage-steps { display: flex; flex-direction: column; }

.prgproc-step { display: grid; grid-template-columns: 80px 1fr; gap: var(--s5); }
.prgproc-left { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.prgproc-num {
  font-family: 'Cinzel', serif; font-size: var(--f18); font-weight: 600;
  color: var(--t-700); background: var(--bg-card); border: 2px solid var(--b-mid);
  border-radius: 50%; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1; transition: background .2s, border-color .2s, color .2s;
}
.prgproc-step:hover .prgproc-num {
  background: var(--pg-500); color: var(--ps-900); border-color: var(--pg-500);
}
.prgproc-line {
  flex: 1; width: 2px;
  background: linear-gradient(to bottom, var(--b-mid), transparent);
  margin: 8px 0 0; min-height: var(--s6);
}
.prgproc-body { padding-bottom: var(--s5); }
.prgproc-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2);
}
.prgproc-body > p { font-size: var(--f14); color: var(--t-500); line-height: 1.7; }
.prgproc-body > p strong { color: var(--t-800); }

.prgproc-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3);
}
.prgproc-time,
.prgproc-form {
  font-size: var(--f12); font-weight: 600; color: var(--t-500);
  background: var(--bg-base); border: 1px solid var(--b-mid);
  border-radius: var(--rad-s); padding: 4px 10px;
}

.prgproc-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: var(--s3); background: var(--bg-card);
  border-left: 3px solid var(--b-dark);
  border-radius: 0 var(--rad-s) var(--rad-s) 0;
  padding: var(--s2) var(--s3); font-size: var(--f13); color: var(--t-500); line-height: 1.7;
}
.prgproc-note svg { width: 16px; height: 16px; stroke: var(--t-400); flex-shrink: 0; margin-top: 2px; fill: none; }
.prgproc-note strong { color: var(--t-800); }
.prgproc-note-warn { background: rgba(212,144,10,.05); border-left-color: var(--g-400); }
.prgproc-note-warn svg { stroke: var(--g-400); }
.prgproc-note-ok { background: rgba(36,85,160,.06); border-left-color: var(--ps-400); font-weight: 500; }
.prgproc-note-ok svg { stroke: var(--ps-400); }

/* ─────────────────────────────────────
   prgfees — FEE TABLE
───────────────────────────────────── */
.prgfees { padding: var(--s8) 0; background: var(--bg-base); }

.prgfees-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--rad-l); box-shadow: var(--sh-md);
  border: 1px solid var(--b-light); margin-top: var(--s5);
}
.prgfees-scroll-hint {
  text-align: right; font-size: var(--f11); color: var(--t-300);
  letter-spacing: .06em; padding: 0 4px 6px; display: none;
}
.prgfees-tbl {
  width: 100%; min-width: 660px; border-collapse: collapse; background: var(--bg-card);
}
.prgfees-tbl thead tr { background: var(--ps-800); }
.prgfees-tbl thead th {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,237,232,.7); padding: 16px 20px; text-align: left; white-space: nowrap;
}
.prgfees-tbl thead th:nth-child(3),
.prgfees-tbl thead th:nth-child(4) { text-align: center; }

.prgfee-stage td {
  font-family: 'Cinzel', serif; font-size: var(--f10); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t-400);
  background: var(--bg-alt) !important;
  padding: 10px 20px !important; border-bottom: 1px solid var(--b-mid);
  border-top: 2px solid var(--b-mid);
}

.prgfees-tbl tbody tr { border-bottom: 1px solid var(--b-light); transition: background .15s; }
.prgfees-tbl tbody tr:not(.prgfee-stage):hover { background: var(--bg-base); }
.prgfees-tbl tbody tr:last-child { border-bottom: none; }
.prgfees-tbl tbody td { padding: 13px 20px; font-size: var(--f13); color: var(--t-500); }
.prgfees-tbl tbody td:first-child { color: var(--t-700); }
.prgfees-tbl tbody td:nth-child(2) { font-size: var(--f12); color: var(--t-400); }

.prgfee-v {
  text-align: center !important;
  font-family: 'Playfair Display', serif; font-size: var(--f17) !important;
  font-weight: 700; color: var(--t-900) !important;
}
.prgfee-v2 {
  text-align: center !important;
  font-size: var(--f14) !important; color: var(--t-500) !important;
  text-align: center;
}

.prgfees-note {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-m); padding: var(--s3) var(--s4); margin-top: var(--s4);
}
.prgfees-note svg { width: 18px; height: 18px; stroke: var(--t-400); flex-shrink: 0; margin-top: 2px; fill: none; }
.prgfees-note p { font-size: var(--f12); color: var(--t-400); line-height: 1.7; }
.prgfees-note strong { color: var(--t-700); }

/* ─────────────────────────────────────
   prgbens — BENEFITS
───────────────────────────────────── */
.prgbens { padding: var(--s8) 0; background: var(--bg-alt); }
.prgbens-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.prgben-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr); position: relative; overflow: hidden;
}
.prgben-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--pg-500), var(--pg-300));
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.prgben-card:hover::before { transform: scaleX(1); }
.prgben-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--pg-b); }

.prgben-ico {
  width: 52px; height: 52px; background: rgba(212,180,90,.07); border: 1px solid var(--pg-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s2);
}
.prgben-ico svg { width: 26px; height: 26px; stroke: var(--t-600); fill: none; }
.prgben-card h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f18); font-weight: 600; color: var(--t-900);
}
.prgben-card p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; flex: 1; }

/* ─────────────────────────────────────
   prgfaq — uses shared .fl .fi .fq .fa
───────────────────────────────────── */
.prgfaq { padding: var(--s8) 0; background: var(--bg-base); }

/* ─────────────────────────────────────
   prgrel — RELATED SERVICES
───────────────────────────────────── */
.prgrel { padding: var(--s8) 0; background: var(--bg-alt); }
.prgrel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}

.prgrel-card {
  display: flex; gap: var(--s4); align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); text-decoration: none; transition: var(--tr);
}
.prgrel-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--pg-b); }

.prgrel-ico {
  width: 48px; height: 48px; min-width: 48px;
  background: rgba(212,180,90,.07); border: 1px solid var(--pg-b);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
}
.prgrel-ico svg { width: 24px; height: 24px; stroke: var(--t-600); fill: none; }
.prgrel-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16); font-weight: 600; color: var(--t-900); margin-bottom: 4px;
}
.prgrel-card p { font-size: var(--f13); color: var(--t-400); line-height: 1.6; margin-bottom: var(--s2); }
.prgrel-link {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  letter-spacing: .06em; color: var(--t-600); transition: color .2s;
}
.prgrel-card:hover .prgrel-link { color: var(--t-900); }

/* ─────────────────────────────────────
   prgctasec — CTA
───────────────────────────────────── */
.prgctasec { padding: var(--s8) 0; background: var(--bg-base); }
.prgctab {
  text-align: center;
  background: linear-gradient(145deg, var(--ps-900), var(--ps-800));
  border-radius: var(--rad-l); padding: var(--s7) var(--s6);
  box-shadow: 0 8px 40px rgba(9,15,28,.35); position: relative; overflow: hidden;
}
.prgctab-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(212,180,90,.08), transparent);
  pointer-events: none;
}
.prgctab h2 {
  font-family: 'Playfair Display', serif; font-size: var(--f48); font-weight: 700;
  color: #f0ede8; line-height: 1.2; margin-bottom: var(--s3); position: relative;
}
.prgctab h2 em { font-style: italic; color: var(--pg-300); }
.prgctab p {
  font-size: var(--f16); color: rgba(240,237,232,.45);
  line-height: 1.7; max-width: 580px; margin: 0 auto var(--s5); position: relative;
}
.prgcta-btns {
  display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; position: relative;
}
.prgctabtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: var(--ps-900);
  background: linear-gradient(135deg, var(--pg-500), var(--pg-400));
  padding: 15px 32px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(212,180,90,.3);
  transition: opacity .2s, transform .2s;
}
.prgctabtn:hover { opacity: .88; transform: translateY(-2px); }
.prgctabtn svg { width: 16px; height: 16px; stroke: var(--ps-900); fill: none; }
.prgctaGhost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,237,232,.65);
  border: 1.5px solid rgba(240,237,232,.18);
  padding: 15px 28px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.prgctaGhost:hover { border-color: rgba(212,180,90,.4); background: rgba(212,180,90,.05); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .prgh-title     { font-size: var(--f60); }
  .prgwhat-grid   { grid-template-columns: 1fr; }
  .prgelig-grid   { grid-template-columns: repeat(2, 1fr); }
  .prgapp-grid    { grid-template-columns: repeat(2, 1fr); }
  .prgspec-grid   { grid-template-columns: repeat(2, 1fr); }
  .prgdocs-grid   { grid-template-columns: repeat(3, 1fr); }
  .prgbens-grid   { grid-template-columns: repeat(2, 1fr); }
  .prgrel-grid    { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .prgh-inner  { padding: 0 var(--s4); }
  .prgh-title  { font-size: var(--f48); }
  .prgh-sdiv   { display: none; }
  .prgh-stats  { gap: var(--s3); }

  .prgelig-grid   { grid-template-columns: 1fr; }
  .prgapp-grid    { grid-template-columns: 1fr; }
  .prgspec-grid   { grid-template-columns: 1fr; }
  .prgdocs-grid   { grid-template-columns: repeat(2, 1fr); }
  .prgbens-grid   { grid-template-columns: 1fr; }
  .prgrel-grid    { max-width: 100%; }

  .prgspec-critical { flex-direction: column; gap: var(--s3); }
  .prgfees-scroll-hint { display: block; }

  .prgproc-step { grid-template-columns: 56px 1fr; gap: var(--s3); }
  .prgproc-num  { width: 44px; height: 44px; font-size: var(--f15); }
  .prgstage-label { font-size: var(--f10); }

  .prgctab h2 { font-size: var(--f36); }
  .prgel-ico {
    margin: auto;
  }
  .prgel-check {
    margin: auto;
  }
  .prgel-card > p {
    text-align: justify;
  }
  .prgapp-card p {
    text-align: justify;
  }
  .prgapp-meta {
    margin: auto;
  }
  .prgproc-meta {
    flex-direction: column;
    text-align: center;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .prgh-title   { font-size: var(--f36); }
  .prgh-actions { flex-direction: column; align-items: center; }
  .prgh-btn-primary,
  .prgh-btn-ghost { width: 100%; justify-content: center; }
  .prgh-sv      { font-size: var(--f20); }
  .prgh-stats   { flex-direction: column; gap: var(--s2); }

  .prgdocs-grid   { grid-template-columns: 1fr; }
  .prgrel-card    { flex-direction: column; }
  .prgrel-ico     { width: 44px; height: 44px; min-width: 44px; }

  .prgproc-left { display: none; }
  .prgproc-step { grid-template-columns: 1fr; }
  .prgproc-body { padding-bottom: var(--s4); }
  .prgproc-meta { flex-direction: column; }

  .prgctab     { padding: var(--s5) var(--s4); }
  .prgctab h2  { font-size: var(--f28); }
  .prgcta-btns { flex-direction: column; align-items: center; }
  .prgctabtn,
  .prgctaGhost { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .prgh-badge  { font-size: 8px; letter-spacing: .1em; }
  .prgh-title  { font-size: var(--f28); }
  .prgh-sv     { font-size: var(--f18); }
  .prgel-ico   { width: 44px; height: 44px; }
  .prgapp-ico  { width: 40px; height: 40px; }
  .prgben-ico  { width: 44px; height: 44px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 320px
══════════════════════════════════════ */
@media (max-width: 320px) {
  .prgh-title     { font-size: var(--f24); }
  .prgh-sub       { font-size: var(--f13); }
  .prgh-btn-primary,
  .prgh-btn-ghost { font-size: var(--f12); padding: 12px 16px; }
  .prgel-card h3  { font-size: var(--f16); }
  .prgapp-card h3 { font-size: var(--f16); }
  .prgspec-item h3 { font-size: var(--f14); }
  .prgproc-body h3 { font-size: var(--f17); }
  .prgfees-tbl td { font-size: var(--f12); padding: 10px 12px; }
  .prgctab h2     { font-size: var(--f22); }
}

/*_____________________________________Infringement CSS Page ______________________________________*/


/*________________________________Copyright Infringement Page________________________________________*/

/* ══════════════════════════════════════
   COPYRIGHT INFRINGEMENT PAGE CSS
   Prefix: crih· criwhat· criex· criremedies·
           criaction· criproof· cricases·
           crifaq· crirel· crictasec·
   Uses copyright green palette: --cr-* (from copyright-registration.css)
   Hero: ripple/shockwave concentric rings (urgency aesthetic)
   Distinct from copyright-registration (shield) & copyright-music (wave)
   Text: always neutral (var --t-*) — green for accents only
══════════════════════════════════════ */

/* ─────────────────────────────────────
   crih — HERO
───────────────────────────────────── */
.crih {
  position: relative;
  background: linear-gradient(155deg, var(--cr-900, #0a1f15) 0%, var(--cr-800, #0d2a1a) 50%, #061510 100%);
  padding: clamp(7rem,14vw,12rem) 0 clamp(4rem,7vw,6rem);
  overflow: hidden;
}
.crih-canvas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.crih-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.crih-orb1 {
  width: clamp(300px,44vw,640px); height: clamp(300px,44vw,640px);
  background: radial-gradient(circle, rgba(20,80,40,.2) 0%, transparent 70%);
  top: -20%; left: -6%;
}
.crih-orb2 {
  width: clamp(200px,28vw,440px); height: clamp(200px,28vw,440px);
  background: radial-gradient(circle, rgba(74,197,142,.07) 0%, transparent 70%);
  bottom: -8%; right: 8%;
}
.crih-orb3 {
  width: clamp(180px,22vw,360px); height: clamp(180px,22vw,360px);
  background: radial-gradient(circle, rgba(10,50,24,.4) 0%, transparent 70%);
  top: 40%; right: 20%;
}
.crih-rings {
  position: absolute; top: 50%; left: 60%;
  transform: translate(-50%, -50%);
  width: clamp(360px,65vw,900px); height: clamp(360px,65vw,900px);
}

.crih-inner {
  position: relative; z-index: 1; text-align: center;
  max-width: clamp(560px,80vw,940px); margin: 0 auto; padding: 0 var(--s5);
}
.crih-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f10); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(240,248,244,.65);
  background: rgba(74,197,142,.08); border: 1px solid rgba(74,197,142,.2);
  border-radius: 100px; padding: 6px 18px; margin-bottom: var(--s4);
}
.crih-badge svg { width: 14px; height: 14px; stroke: rgba(74,197,142,.7); fill: none; }

.crih-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72); font-weight: 700;
  color: #f0f8f4; line-height: 1.1; margin-bottom: var(--s4);
}
.crih-title em { font-style: italic; color: var(--cr-300, #7de8b0); }

.crih-sub {
  font-size: var(--f17); color: rgba(240,248,244,.5);
  line-height: 1.75; max-width: 700px; margin: 0 auto var(--s5);
}
.crih-sub strong { color: rgba(240,248,244,.82); }

.crih-actions {
  display: flex; justify-content: center;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6);
}
.crih-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--cr-600, #1a7a45), var(--cr-500, #1e9a58));
  padding: 14px 28px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(30,154,88,.35);
  transition: opacity .2s, transform .2s;
}
.crih-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.crih-btn-primary svg { width: 16px; height: 16px; stroke: #fff; fill: none; }

.crih-btn-ghost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,248,244,.65);
  border: 1.5px solid rgba(240,248,244,.18);
  padding: 14px 24px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.crih-btn-ghost:hover { border-color: rgba(74,197,142,.4); background: rgba(74,197,142,.06); }

.crih-stats {
  display: flex; justify-content: center; align-items: center;
  gap: var(--s4); flex-wrap: wrap;
  border-top: 1px solid rgba(240,248,244,.08); padding-top: var(--s5);
}
.crih-stat  { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.crih-sdiv  { width: 1px; height: 32px; background: rgba(240,248,244,.1); }
.crih-sv {
  font-family: 'Playfair Display', serif; font-size: var(--f28); font-weight: 700;
  color: var(--cr-300, #7de8b0); line-height: 1;
}
.crih-sl {
  font-size: var(--f11); color: rgba(240,248,244,.35);
  letter-spacing: .07em; text-transform: uppercase;
}

/* ─────────────────────────────────────
   criwhat — WHAT IS INFRINGEMENT
───────────────────────────────────── */
.criwhat { padding: var(--s8) 0; background: var(--bg-base); }
.criwhat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start;
  margin-top: var(--s5);
}
.criwhat-body p { font-size: var(--f14); color: var(--t-500); line-height: 1.78; }
.criwhat-body p + p { margin-top: var(--s3); }
.criwhat-body p strong { color: var(--t-800); }
.criwhat-body p em { font-style: italic; }

.criwhat-box {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-left: 4px solid var(--cr-500, #1e9a58);
  border-radius: 0 var(--rad-m) var(--rad-m) 0;
  padding: var(--s3) var(--s4); margin-top: var(--s4);
}
.criwhat-box svg { width: 18px; height: 18px; stroke: var(--t-400); flex-shrink: 0; margin-top: 2px; fill: none; }
.criwhat-box div { font-size: var(--f13); color: var(--t-500); line-height: 1.7; }
.criwhat-box strong { color: var(--t-900); display: block; margin-bottom: 4px; }
.criwhat-box p { margin: 0; }
.criwhat-box em { font-style: italic; }

.criwhat-types { display: flex; flex-direction: column; gap: var(--s4); }
.criwt-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); transition: var(--tr); position: relative;
  border-top: 3px solid var(--cr-500, #1e9a58);
}
.criwt-card:hover { transform: translateX(4px); box-shadow: var(--sh-md); }
.criwt-num {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  color: var(--t-300); letter-spacing: .1em; margin-bottom: 4px;
}
.criwt-card h4 {
  font-family: 'Playfair Display', serif; font-size: var(--f17); font-weight: 600;
  color: var(--t-900); margin-bottom: var(--s2);
}
.criwt-card p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; }
.criwt-card em { font-style: italic; }
.criwt-tag {
  font-size: 11px; font-weight: 600; color: var(--t-500); letter-spacing: .05em;
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: var(--rad-s); padding: 3px 9px; width: fit-content; margin-top: var(--s2);
}

/* ─────────────────────────────────────
   criex — EXAMPLES
───────────────────────────────────── */
.criex { padding: var(--s8) 0; background: var(--bg-alt); }
.criex-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s5);
}
.criex-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.criex-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.criex-card-no { opacity: .85; }

.criex-ico {
  width: 44px; height: 44px;
  background: rgba(168,32,56,.06); border: 1px solid rgba(168,32,56,.15);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
}
.criex-ico svg { width: 22px; height: 22px; stroke: #a82038; fill: none; }
.criex-ico-no {
  background: rgba(30,154,88,.06) !important; border-color: rgba(30,154,88,.15) !important;
}
.criex-ico-no svg { stroke: var(--cr-500, #1e9a58) !important; }

.criex-card h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f15); font-weight: 600; color: var(--t-900);
}
.criex-yes {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #a82038; background: rgba(168,32,56,.06); border: 1px solid rgba(168,32,56,.15);
  border-radius: 100px; padding: 2px 8px; width: fit-content;
}
.criex-no {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cr-600, #1a7a45); background: rgba(30,154,88,.06); border: 1px solid rgba(30,154,88,.15);
  border-radius: 100px; padding: 2px 8px; width: fit-content;
}
.criex-card p { font-size: var(--f12); color: var(--t-400); line-height: 1.65; flex: 1; }
.criex-card em { font-style: italic; }

/* ─────────────────────────────────────
   criremedies — REMEDIES
───────────────────────────────────── */
.criremedies { padding: var(--s8) 0; background: var(--bg-base); }
.crirm-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5);
}

.crirm-block {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); overflow: hidden; box-shadow: var(--sh-sm);
  display: flex; flex-direction: column;
}
.crirm-civil   { border-top: 3px solid var(--cr-500, #1e9a58); }
.crirm-criminal{ border-top: 3px solid #a82038; }
.crirm-admin   { border-top: 3px solid #2455a0; }

.crirm-hd {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--b-light);
}
.crirm-hd-ico {
  width: 40px; height: 40px; min-width: 40px; border-radius: var(--rad-m);
  display: flex; align-items: center; justify-content: center;
}
.crirm-civil   .crirm-hd-ico { background: rgba(30,154,88,.08); border: 1px solid rgba(30,154,88,.2); }
.crirm-civil   .crirm-hd-ico svg { stroke: var(--cr-600, #1a7a45); }
.crirm-criminal .crirm-hd-ico { background: rgba(168,32,56,.08); border: 1px solid rgba(168,32,56,.2); }
.crirm-criminal .crirm-hd-ico svg { stroke: #a82038; }
.crirm-admin   .crirm-hd-ico { background: rgba(36,85,160,.08); border: 1px solid rgba(36,85,160,.2); }
.crirm-admin   .crirm-hd-ico svg { stroke: #2455a0; }
.crirm-hd-ico svg { width: 20px; height: 20px; fill: none; }

.crirm-cat {
  font-family: 'Cinzel', serif; font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t-400); display: block; margin-bottom: 3px;
}
.crirm-hd h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f16); font-weight: 600; color: var(--t-900);
}

.crirm-items { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.crirm-item { display: flex; gap: var(--s3); align-items: flex-start; }
.crirm-dot {
  width: 8px; height: 8px; min-width: 8px; border-radius: 50%;
  background: var(--cr-500, #1e9a58); margin-top: 6px;
}
.crirm-dot-red  { background: #a82038; }
.crirm-dot-blue { background: #2455a0; }
.crirm-item div { flex: 1; }
.crirm-item strong { font-size: var(--f13); font-weight: 700; color: var(--t-800); display: block; margin-bottom: 3px; }
.crirm-item p { font-size: var(--f12); color: var(--t-400); line-height: 1.6; }

.crirm-footer {
  display: flex; gap: 8px; align-items: flex-start;
  background: rgba(30,154,88,.04); border-top: 1px solid rgba(30,154,88,.1);
  padding: var(--s3) var(--s5); font-size: var(--f11); color: var(--t-400); line-height: 1.6;
}
.crirm-footer svg { width: 14px; height: 14px; stroke: var(--cr-600, #1a7a45); flex-shrink: 0; margin-top: 2px; fill: none; }
.crirm-footer-red { background: rgba(168,32,56,.04); border-top-color: rgba(168,32,56,.1); }
.crirm-footer-red svg { stroke: #a82038; }
.crirm-footer-blue { background: rgba(36,85,160,.04); border-top-color: rgba(36,85,160,.1); }
.crirm-footer-blue svg { stroke: #2455a0; }

/* ─────────────────────────────────────
   criaction — PROCESS STEPS
───────────────────────────────────── */
.criaction { padding: var(--s8) 0; background: var(--bg-alt); }
.criact-steps { display: flex; flex-direction: column; margin-top: var(--s6); }
.criact-step { display: grid; grid-template-columns: 80px 1fr; gap: var(--s5); }
.criact-left { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.criact-num {
  font-family: 'Cinzel', serif; font-size: var(--f18); font-weight: 600;
  color: var(--t-700); background: var(--bg-card); border: 2px solid var(--b-mid);
  border-radius: 50%; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1; transition: background .2s, border-color .2s, color .2s;
}
.criact-step:hover .criact-num {
  background: var(--cr-500, #1e9a58); color: #fff; border-color: var(--cr-500, #1e9a58);
}
.criact-line {
  flex: 1; width: 2px;
  background: linear-gradient(to bottom, var(--b-mid), transparent);
  margin: 8px 0 0; min-height: var(--s7);
}
.criact-body { padding-bottom: var(--s6); }
.criact-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20); font-weight: 600; color: var(--t-900); margin-bottom: var(--s2);
}
.criact-body > p { font-size: var(--f14); color: var(--t-500); line-height: 1.7; }
.criact-body em { font-style: italic; }

.criact-tip {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: var(--s3);
  border-left: 3px solid var(--cr-500, #1e9a58);
  background: rgba(30,154,88,.04);
  border-radius: 0 var(--rad-s) var(--rad-s) 0;
  padding: var(--s2) var(--s3); font-size: var(--f13); color: var(--t-500); line-height: 1.7;
}
.criact-tip svg { width: 16px; height: 16px; stroke: var(--cr-600, #1a7a45); flex-shrink: 0; margin-top: 2px; fill: none; }
.criact-tip strong { color: var(--t-800); }
.criact-tip-warn {
  background: rgba(212,144,10,.05); border-left-color: var(--g-400);
}
.criact-tip-warn svg { stroke: var(--g-400); }

/* ─────────────────────────────────────
   criproof — ELEMENTS OF PROOF
───────────────────────────────────── */
.criproof { padding: var(--s8) 0; background: var(--bg-base); }
.criproof-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s5);
}
.criproof-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
  border-top: 3px solid var(--cr-500, #1e9a58);
}
.criproof-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.criproof-step {
  font-family: 'Cinzel', serif; font-size: var(--f28); font-weight: 600;
  color: var(--b-mid); line-height: 1;
}
.criproof-card h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f17); font-weight: 600; color: var(--t-900);
}
.criproof-card p { font-size: var(--f13); color: var(--t-500); line-height: 1.65; flex: 1; }

.criproof-note {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-left: 4px solid var(--cr-500, #1e9a58);
  border-radius: 0 var(--rad-m) var(--rad-m) 0;
  padding: var(--s3) var(--s4); margin-top: var(--s5);
}
.criproof-note svg { width: 18px; height: 18px; stroke: var(--t-400); flex-shrink: 0; margin-top: 2px; fill: none; }
.criproof-note div { font-size: var(--f13); color: var(--t-500); line-height: 1.7; }
.criproof-note strong { color: var(--t-900); }
.criproof-note em { font-style: italic; }

/* ─────────────────────────────────────
   cricases — LANDMARK CASES
───────────────────────────────────── */
.cricases { padding: var(--s8) 0; background: var(--bg-alt); }
.cricases-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5);
}
.cricase-card {
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  gap: var(--s2); transition: var(--tr);
}
.cricase-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(30,154,88,.3); }
.cricase-year {
  font-family: 'Cinzel', serif; font-size: var(--f28); font-weight: 600;
  color: var(--b-mid); line-height: 1;
}
.cricase-card h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f15); font-weight: 600; color: var(--t-900);
}
.cricase-court {
  font-size: var(--f11); font-weight: 600; color: var(--t-400);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px;
}
.cricase-card > p:last-of-type { font-size: var(--f13); color: var(--t-500); line-height: 1.65; flex: 1; }
.cricase-card strong { color: var(--t-800); }
.cricase-tag {
  font-size: 11px; font-weight: 600; color: var(--t-500);
  background: var(--bg-alt); border: 1px solid var(--b-mid);
  border-radius: var(--rad-s); padding: 3px 8px; width: fit-content; margin-top: var(--s1);
}

/* ─────────────────────────────────────
   crifaq — uses shared .fl .fi .fq .fa
───────────────────────────────────── */
.crifaq { padding: var(--s8) 0; background: var(--bg-base); }

/* ─────────────────────────────────────
   crirel — RELATED SERVICES
───────────────────────────────────── */
.crirel { padding: var(--s8) 0; background: var(--bg-alt); }
.crirel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);
}
.crirel-card {
  display: flex; gap: var(--s4); align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--b-light);
  border-radius: var(--rad-l); padding: var(--s4) var(--s5);
  box-shadow: var(--sh-sm); text-decoration: none; transition: var(--tr);
}
.crirel-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(30,154,88,.3); }
.crirel-ico {
  width: 48px; height: 48px; min-width: 48px;
  background: rgba(30,154,88,.07); border: 1px solid rgba(30,154,88,.2);
  border-radius: var(--rad-m); display: flex; align-items: center; justify-content: center;
}
.crirel-ico svg { width: 24px; height: 24px; stroke: var(--cr-600, #1a7a45); fill: none; }
.crirel-card h3 {
  font-family: 'Playfair Display', serif; font-size: var(--f16); font-weight: 600; color: var(--t-900); margin-bottom: 4px;
}
.crirel-card p { font-size: var(--f13); color: var(--t-400); line-height: 1.6; margin-bottom: var(--s2); }
.crirel-link {
  font-family: 'Cinzel', serif; font-size: var(--f11); font-weight: 600;
  letter-spacing: .06em; color: var(--t-600); transition: color .2s;
}
.crirel-card:hover .crirel-link { color: var(--t-900); }

/* ─────────────────────────────────────
   crictasec — CTA
───────────────────────────────────── */
.crictasec { padding: var(--s8) 0; background: var(--bg-base); }
.crictab {
  text-align: center;
  background: linear-gradient(145deg, var(--cr-900, #0a1f15), var(--cr-800, #0d2a1a));
  border-radius: var(--rad-l); padding: var(--s7) var(--s6);
  box-shadow: 0 8px 40px rgba(6,21,16,.4); position: relative; overflow: hidden;
}
.crictab-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 65% at 50% 0%, rgba(74,197,142,.07), transparent);
  pointer-events: none;
}
.crictab h2 {
  font-family: 'Playfair Display', serif; font-size: var(--f48); font-weight: 700;
  color: #f0f8f4; line-height: 1.2; margin-bottom: var(--s3); position: relative;
}
.crictab h2 em { font-style: italic; color: var(--cr-300, #7de8b0); }
.crictab p {
  font-size: var(--f16); color: rgba(240,248,244,.45);
  line-height: 1.7; max-width: 580px; margin: 0 auto var(--s5); position: relative;
}
.cricta-btns {
  display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; position: relative;
}
.crictabtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--cr-600, #1a7a45), var(--cr-500, #1e9a58));
  padding: 15px 32px; border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(30,154,88,.35);
  transition: opacity .2s, transform .2s;
}
.crictabtn:hover { opacity: .88; transform: translateY(-2px); }
.crictabtn svg { width: 16px; height: 16px; stroke: #fff; fill: none; }
.crictaGhost {
  display: inline-flex; align-items: center;
  font-family: 'Cinzel', serif; font-size: var(--f13); font-weight: 600;
  letter-spacing: .08em; text-decoration: none; color: rgba(240,248,244,.65);
  border: 1.5px solid rgba(240,248,244,.18);
  padding: 15px 28px; border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.crictaGhost:hover { border-color: rgba(74,197,142,.4); background: rgba(74,197,142,.06); }

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .crih-title       { font-size: var(--f60); }
  .criwhat-grid     { grid-template-columns: 1fr; }
  .criex-grid       { grid-template-columns: repeat(2, 1fr); }
  .crirm-tabs       { grid-template-columns: 1fr; }
  .criproof-grid    { grid-template-columns: repeat(2, 1fr); }
  .cricases-grid    { grid-template-columns: repeat(2, 1fr); }
  .crirel-grid      { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .crih-inner       { padding: 0 var(--s4); }
  .crih-title       { font-size: var(--f48); }
  .crih-sdiv        { display: none; }
  .crih-stats       { gap: var(--s3); }

  .criex-grid       { grid-template-columns: 1fr; }
  .criproof-grid    { grid-template-columns: 1fr; }
  .cricases-grid    { grid-template-columns: 1fr; }
  .crirel-grid      { max-width: 100%; }

  .criact-step      { grid-template-columns: 56px 1fr; gap: var(--s3); }
  .criact-num       { width: 44px; height: 44px; font-size: var(--f15); }

  .criwhat-box      { flex-direction: column; }
  .criproof-note    { flex-direction: column; }

  .crictab h2       { font-size: var(--f36); }
  .criwhat-body p {
    text-align: justify;
  }
  .criwt-card h4 {
    text-align: center;
  }
  .criwt-tag {
    margin: auto;
  }
  .criex-card h3 {
    text-align: center;
  }
  .criex-yes {
    margin: auto;
  }
  .criex-no {
    margin: auto;
  }
  .criex-card p {
    text-align: justify;
  }
  .criact-body > p {
    text-align: justify;
  }
  .criproof-card h3 {
    text-align: center;
  }
  .crirel-ico {
    margin: auto;
  }
  .crirel-card h3 {
    text-align: center;
  }
  .crirel-link {
    display: flex;
    justify-content: center;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .crih-title       { font-size: var(--f36); }
  .crih-actions     { flex-direction: column; align-items: center; }
  .crih-btn-primary,
  .crih-btn-ghost   { width: 100%; justify-content: center; }
  .crih-sv          { font-size: var(--f20); }
  .crih-stats       { flex-direction: column; gap: var(--s2); }

  .criact-left      { display: none; }
  .criact-step      { grid-template-columns: 1fr; }
  .criact-body      { padding-bottom: var(--s5); }

  .crirel-card      { flex-direction: column; }
  .crirel-ico       { width: 44px; height: 44px; min-width: 44px; }

  .crictab          { padding: var(--s5) var(--s4); }
  .crictab h2       { font-size: var(--f28); }
  .cricta-btns      { flex-direction: column; align-items: center; }
  .crictabtn,
  .crictaGhost      { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px / 320px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .crih-badge       { font-size: 8px; letter-spacing: .1em; }
  .crih-title       { font-size: var(--f28); }
  .crih-sv          { font-size: var(--f18); }
  .cricase-year     { font-size: var(--f22); }
  .criproof-step    { font-size: var(--f22); }
}
@media (max-width: 320px) {
  .crih-title       { font-size: var(--f24); }
  .crih-sub         { font-size: var(--f13); }
  .crih-btn-primary,
  .crih-btn-ghost   { font-size: var(--f12); padding: 12px 16px; }
  .criact-body h3   { font-size: var(--f17); }
  .cricase-card h3  { font-size: var(--f13); }
  .crictab h2       { font-size: var(--f22); }
}

/*____________________________Patent Infringement_________________________________________________*/

/* ══════════════════════════════════════
   PATENT INFRINGEMENT PAGE CSS
   Prefix: pifh· pifwhat· pifacts· pifremedies·
           pifaction· pifdef· pifcases· piffaq·
           pifrel· pifctasec·
   Palette: --ps-* navy + --pg-* gold (defined in style.css)
   Text:    --t-200 / --t-300 / --t-400 / --t-600 / --t-800 / --t-900
   Font sz: --f10 –– f72 only (no f13/f15/f17)
   Container: .w (max-width 1140px — from style.css base)
   Sections: padding via base section rule + own overrides
══════════════════════════════════════ */

/* Shared accent overrides */
.pisl  { color: #eef1f5 !important; }
.pisl::before { background: var(--ps-400) !important; }
.pirule { background: var(--pg-500) !important; }

/* ─────────────────────────────────────
   pifh — HERO
───────────────────────────────────── */
.pifh {
  position: relative;
  background: linear-gradient(155deg, var(--ps-900) 0%, #060c1a 45%, var(--ps-800) 100%);
  padding: clamp(7rem,14vw,12rem) var(--s6) clamp(4rem,7vw,6rem);
  overflow: hidden;
}

.pifh-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.pifh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.pifh-orb1 {
  width: clamp(300px,42vw,620px);
  height: clamp(300px,42vw,620px);
  background: radial-gradient(circle, rgba(36,85,160,.22) 0%, transparent 70%);
  top: -15%; left: -8%;
}
.pifh-orb2 {
  width: clamp(200px,28vw,440px);
  height: clamp(200px,28vw,440px);
  background: radial-gradient(circle, rgba(212,180,90,.07) 0%, transparent 70%);
  bottom: 0; right: 5%;
}
.pifh-orb3 {
  width: clamp(160px,22vw,360px);
  height: clamp(160px,22vw,360px);
  background: radial-gradient(circle, rgba(26,51,88,.35) 0%, transparent 70%);
  top: 55%; left: 55%;
  transform: translate(-50%,-50%);
}

.pifh-radar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .9;
}

.pifh-sweep {
  transform-origin: 450px 450px;
  animation: pifhSweep 6s linear infinite;
}

@keyframes pifhSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.pifh-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: clamp(560px,80vw,920px);
  margin: 0 auto;
}

.pifh-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240,237,232,.65);
  background: rgba(212,180,90,.08);
  border: 1px solid rgba(212,180,90,.2);
  border-radius: 100px;
  padding: 6px 18px;
  margin-bottom: var(--s4);
}
.pifh-badge svg {
  width: 14px; height: 14px;
  stroke: rgba(212,180,90,.7);
  fill: none;
}

.pifh-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  color: #f0ede8;
  line-height: 1.1;
  margin-bottom: var(--s4);
}
.pifh-title em { font-style: italic; color: var(--pg-300); }

.pifh-sub {
  font-size: var(--f18);
  color: rgba(240,237,232,.5);
  line-height: 1.75;
  max-width: 700px;
  margin: 0 auto var(--s5);
}

.pifh-actions {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.pifh-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--ps-900);
  background: linear-gradient(135deg, var(--pg-500), var(--pg-400));
  padding: 14px 28px;
  border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(212,180,90,.3);
  transition: opacity .2s, transform .2s;
}
.pifh-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.pifh-btn-primary svg { width: 16px; height: 16px; stroke: var(--ps-900); fill: none; }

.pifh-btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: rgba(240,237,232,.65);
  border: 1.5px solid rgba(240,237,232,.18);
  padding: 14px 24px;
  border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.pifh-btn-ghost:hover {
  border-color: rgba(212,180,90,.4);
  background: rgba(212,180,90,.05);
}

.pifh-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.06);
}

.pifh-stat { text-align: center; }

.pifh-sv {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: var(--f28);
  font-weight: 700;
  color: var(--pg-300);
  line-height: 1;
  margin-bottom: 4px;
}

.pifh-sl {
  display: block;
  font-size: var(--f11);
  color: rgba(240,237,232,.35);
  letter-spacing: .04em;
}

.pifh-sdiv {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.08);
}


/* ─────────────────────────────────────
   pifwhat — WHAT IS PATENT INFRINGEMENT
───────────────────────────────────── */
.pifwhat { background: var(--bg-base); }

.pifwhat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: start;
}

.pifwhat-p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.78;
}
.pifwhat-p + .pifwhat-p { margin-top: var(--s3); }
.pifwhat-p strong { color: var(--t-800); }

.pifwhat-alert {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: rgba(36,85,160,.06);
  border: 1px solid rgba(36,85,160,.15);
  border-left: 3px solid var(--ps-400);
  border-radius: var(--rad-m);
  padding: var(--s4);
  margin-top: var(--s5);
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.7;
}
.pifwhat-alert svg {
  width: 18px; height: 18px;
  stroke: var(--ps-400);
  fill: none;
  flex-shrink: 0;
  margin-top: 2px;
}
.pifwhat-alert strong { color: var(--t-800); }

/* Type cards */
.pifwhat-types {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.pifwhat-type {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}
.pifwhat-type:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--pg-b);
}

.pifwhat-type-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f20);
  font-weight: 600;
  color: var(--t-200);
  line-height: 1;
  padding-top: 2px;
}

.pifwhat-type-tag {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ps-400);
  text-transform: uppercase;
  margin-bottom: var(--s1);
}

.pifwhat-type-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}

.pifwhat-type-body p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
}


/* ─────────────────────────────────────
   pifacts — INFRINGING ACTS
───────────────────────────────────── */
.pifacts { background: var(--bg-alt); }

.pifacts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.pifacts-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: var(--tr);
  position: relative;
  overflow: hidden;
}
.pifacts-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pg-500), var(--pg-300));
}
.pifacts-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--pg-b);
}

.pifacts-ico {
  width: 48px; height: 48px;
  background: rgba(212,180,90,.07);
  border: 1px solid var(--pg-b);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s1);
}
.pifacts-ico svg {
  width: 24px; height: 24px;
  stroke: var(--t-600);
  fill: none;
}

.pifacts-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
}
.pifacts-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
  flex: 1;
}

.pifacts-tag {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ps-400);
  background: rgba(36,85,160,.06);
  border: 1px solid rgba(36,85,160,.12);
  border-radius: 100px;
  padding: 4px 10px;
  align-self: flex-start;
  margin-top: var(--s1);
}

/* Not-infringement box */
.pifacts-notinf {
  margin-top: var(--s6);
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
}

.pifacts-notinf-hd {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-600);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--b-light);
}
.pifacts-notinf-hd svg {
  width: 18px; height: 18px;
  stroke: #277a50;
  fill: none;
  flex-shrink: 0;
}
.pifacts-notinf-hd strong { color: var(--t-900); }

.pifacts-notinf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

.pifacts-ni-item p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
}

.pifacts-ni-label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .07em;
  color: #277a50;
  background: rgba(39,122,80,.06);
  border: 1px solid rgba(39,122,80,.15);
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: var(--s2);
  width: fit-content;
}


/* ─────────────────────────────────────
   pifremedies — LEGAL REMEDIES
───────────────────────────────────── */
.pifremedies { background: var(--bg-base); }

.pifrem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
}

.pifrem-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.pifrem-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--pg-b);
}

.pifrem-card-top {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.pifrem-ico {
  width: 52px; height: 52px;
  background: rgba(212,180,90,.07);
  border: 1px solid var(--pg-b);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pifrem-ico svg {
  width: 26px; height: 26px;
  stroke: var(--t-600);
  fill: none;
}

.pifrem-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 600;
  color: var(--t-900);
}

.pifrem-tag {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ps-400);
  text-transform: uppercase;
}

.pifrem-card > p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.78;
  flex: 1;
}
.pifrem-card > p strong { color: var(--t-800); }
.pifrem-card > p em { color: var(--t-600); font-style: italic; }

.pifrem-note {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  background: rgba(212,180,90,.05);
  border: 1px solid var(--pg-b);
  border-radius: var(--rad-m);
  padding: var(--s3) var(--s4);
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.7;
  margin-top: auto;
}
.pifrem-note svg {
  width: 14px; height: 14px;
  stroke: var(--pg-500);
  fill: none;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Groundless threats warning */
.pifrem-threat {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  background: rgba(168,32,56,.04);
  border: 1px solid rgba(168,32,56,.15);
  border-left: 4px solid #a82038;
  border-radius: var(--rad-l);
  padding: var(--s5);
  margin-top: var(--s6);
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.75;
}
.pifrem-threat-ico {
  width: 44px; height: 44px;
  min-width: 44px;
  background: rgba(168,32,56,.07);
  border: 1px solid rgba(168,32,56,.2);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pifrem-threat-ico svg {
  width: 22px; height: 22px;
  stroke: #a82038;
  fill: none;
}
.pifrem-threat strong { color: var(--t-900); display: block; margin-bottom: 4px; }


/* ─────────────────────────────────────
   pifaction — ENFORCEMENT STEPS
───────────────────────────────────── */
.pifaction { background: var(--bg-alt); }

.pifact-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--s2);
}

.pifact-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s5);
  position: relative;
}
.pifact-step + .pifact-step { margin-top: var(--s2); }

.pifact-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.pifact-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-300);
  background: var(--bg-card);
  border: 2px solid var(--b-mid);
  border-radius: 50%;
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  transition: background .25s, border-color .25s, color .25s;
}
.pifact-step:hover .pifact-num {
  background: var(--ps-800);
  border-color: var(--pg-500);
  color: var(--pg-300);
}

.pifact-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(to bottom, var(--b-mid), transparent);
  margin-top: var(--s2);
}
.pifact-step:last-child .pifact-line { display: none; }

.pifact-body {
  padding-bottom: var(--s6);
  padding-top: 8px;
}

.pifact-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s3);
}

.pifact-body p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.78;
}
.pifact-body p strong { color: var(--t-800); }
.pifact-body p em { font-style: italic; color: var(--t-600); }

.pifact-tip {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  background: rgba(212,180,90,.05);
  border: 1px solid var(--pg-b);
  border-radius: var(--rad-m);
  padding: var(--s3) var(--s4);
  margin-top: var(--s4);
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.7;
}
.pifact-tip svg {
  width: 14px; height: 14px;
  stroke: var(--pg-500);
  fill: none;
  flex-shrink: 0;
  margin-top: 2px;
}


/* ─────────────────────────────────────
   pifdef — DEFENCES
───────────────────────────────────── */
.pifdef { background: var(--bg-base); }

.pifdef-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.pifdef-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}
.pifdef-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--pg-b);
}

.pifdef-card-hd {
  margin-bottom: var(--s3);
}

.pifdef-n {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ps-400);
  background: rgba(36,85,160,.07);
  border: 1px solid rgba(36,85,160,.15);
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: var(--s2);
}

.pifdef-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
}

.pifdef-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
}
.pifdef-card p em { font-style: italic; color: var(--t-600); }


/* ─────────────────────────────────────
   pifcases — LANDMARK CASES
───────────────────────────────────── */
.pifcases { background: var(--bg-alt); }

.pifcases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.pifcase-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.pifcase-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--pg-b);
}

.pifcase-year {
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--pg-500);
  background: rgba(212,180,90,.07);
  border: 1px solid var(--pg-b);
  border-radius: 100px;
  padding: 3px 12px;
  align-self: flex-start;
}

.pifcase-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.pifcase-court {
  font-size: var(--f12);
  color: var(--ps-400);
  font-weight: 500;
}

.pifcase-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
  flex: 1;
}
.pifcase-card p em { font-style: italic; color: var(--t-600); }

.pifcase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--b-light);
}
.pifcase-tags span {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--t-400);
  background: var(--bg-alt);
  border: 1px solid var(--b-mid);
  border-radius: 100px;
  padding: 3px 10px;
}


/* ─────────────────────────────────────
   piffaq — FAQ
───────────────────────────────────── */
.piffaq { background: var(--bg-base); }


/* ─────────────────────────────────────
   pifrel — RELATED SERVICES
───────────────────────────────────── */
.pifrel { background: var(--bg-alt); }

.pifrel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.pifrel-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4) var(--s5);
  text-decoration: none;
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}
.pifrel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--pg-b);
}

.pifrel-ico {
  width: 52px; height: 52px;
  min-width: 52px;
  background: rgba(212,180,90,.07);
  border: 1px solid var(--pg-b);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pifrel-ico svg {
  width: 24px; height: 24px;
  stroke: var(--t-600);
  fill: none;
}

.pifrel-body { flex: 1; }

.pifrel-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s1);
}
.pifrel-body p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.6;
}

.pifrel-arrow {
  width: 18px; height: 18px;
  stroke: var(--t-300);
  flex-shrink: 0;
  transition: stroke .2s, transform .2s;
}
.pifrel-card:hover .pifrel-arrow {
  stroke: var(--pg-500);
  transform: translateX(3px);
}


/* ─────────────────────────────────────
   pifctasec — CTA
───────────────────────────────────── */
.pifctasec { background: var(--bg-base); }

.pifctab {
  background: linear-gradient(145deg, var(--ps-900), var(--ps-800));
  border-radius: var(--rad-l);
  padding: var(--s8) var(--s6);
  box-shadow: 0 8px 40px rgba(9,15,28,.35);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.pifctab-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(212,180,90,.08), transparent);
  pointer-events: none;
}

.pifctab-inner { position: relative; z-index: 1; }

.pifctab-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f48);
  font-weight: 700;
  color: #f0ede8;
  line-height: 1.2;
  margin-bottom: var(--s3);
}
.pifctab-title em { font-style: italic; color: var(--pg-300); }

.pifctab-sub {
  font-size: var(--f16);
  color: rgba(240,237,232,.45);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto var(--s6);
}

.pifcta-btns {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.pifctabtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--ps-900);
  background: linear-gradient(135deg, var(--pg-500), var(--pg-400));
  padding: 15px 32px;
  border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(212,180,90,.3);
  transition: opacity .2s, transform .2s;
}
.pifctabtn:hover { opacity: .88; transform: translateY(-2px); }
.pifctabtn svg { width: 16px; height: 16px; stroke: var(--ps-900); fill: none; }

.pifctaGhost {
  display: inline-flex;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: rgba(240,237,232,.65);
  border: 1.5px solid rgba(240,237,232,.18);
  padding: 15px 28px;
  border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.pifctaGhost:hover {
  border-color: rgba(212,180,90,.4);
  background: rgba(212,180,90,.05);
}


/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .pifh-title      { font-size: var(--f60); }
  .pifwhat-grid    { grid-template-columns: 1fr; }
  .pifacts-grid    { grid-template-columns: repeat(2, 1fr); }
  .pifacts-notinf-grid { grid-template-columns: repeat(2, 1fr); }
  .pifrem-grid     { grid-template-columns: repeat(2, 1fr); }
  .pifdef-grid     { grid-template-columns: repeat(2, 1fr); }
  .pifcases-grid   { grid-template-columns: repeat(2, 1fr); }
  .pifrel-grid     { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .pifh-title      { font-size: var(--f48); }
  .pifh-sub        { font-size: var(--f16); }
  .pifh-sdiv       { display: none; }
  .pifh-stats      { gap: var(--s3); }

  .pifacts-grid    { grid-template-columns: 1fr; }
  .pifacts-notinf-grid { grid-template-columns: 1fr; }
  .pifrem-grid     { grid-template-columns: 1fr; }
  .pifdef-grid     { grid-template-columns: 1fr; }
  .pifcases-grid   { grid-template-columns: 1fr; }

  .pifact-step     { grid-template-columns: 56px 1fr; gap: var(--s3); }
  .pifact-num      { width: 44px; height: 44px; font-size: var(--f16); }

  .pifctab         { padding: var(--s6) var(--s4); }
  .pifctab-title   { font-size: var(--f36); }
  .pifwhat-p {
    text-align: justify;
  }
  .pifwhat-type-body p {
    text-align: justify;
  }
  .pifacts-ico {
    margin: auto;
  }
  .pifacts-card h4 {
    text-align: center;
  }
  .pifacts-tag {
    margin: auto;
  }
  .pifacts-notinf-hd {
    display: inline-block;
  }
  .pifacts-ni-item p {
    text-align: justify;
  }
  .pifrem-ico {
    margin: auto;
  }
  .pifrem-card h3 {
    text-align: center;
  }
  .pifrem-tag {
    text-align: center;
  }
  .pifrem-card > p {
    text-align: justify;
  }
  .pifrem-note {
    text-align: justify;
  }
  .pifact-body p {
    text-align: justify;
  }
  .pifcase-year {
    margin: auto;
  }
  .pifcase-card h4 {
    text-align: center;
  }
  .pifcase-court {
    text-align: center;
  }
  .pifcase-tags span {
    margin: auto;
  }
  .tmiwhat-p {
    text-align: justify;
  }
  .tmiwhat-type-body p {
    text-align: justify;
  }
  .tmipof-card > p {
    text-align: justify;
  }
  .tmipof-ico {
    margin: auto;
  }
  .tmipof-card h3 {
    text-align: center;
  }
  .tmiacts-ico {
    margin: auto;
  }
  .tmiacts-card h4 {
    text-align: center;
  }
  .tmiacts-severity {
    margin: auto;
  }
  .tmiacts-card > p {
    text-align: justify;
  }
  .tmiacts-notinf-hd {
    display: inline-block;
  }
  .tmiacts-ni-item p {
    text-align: justify;
  }
  .tmiact-body p {
    text-align: justify;
  }
  .tmiact-body h3 {
    text-align: center;
  }
  .tmidef-card p {
    text-align: justify;
  }
  .tmicase-year {
    margin: auto;
  }
  .tmicase-card h4 {
    text-align: center;
  }
  .tmicase-court {
    text-align: center;
  }
  .tmicase-tags span {
    margin: auto;
  }
  .tmicase-card p {
    text-align: justify;
  }

}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .pifh-title      { font-size: var(--f36); }
  .pifh-actions    { flex-direction: column; align-items: center; }
  .pifh-btn-primary,
  .pifh-btn-ghost  { width: 100%; justify-content: center; }
  .pifh-sv         { font-size: var(--f24); }
  .pifh-stats      { flex-direction: column; gap: var(--s2); }

  .pifwhat-type    { grid-template-columns: 1fr; }
  .pifwhat-type-num { display: none; }

  .pifact-left     { display: none; }
  .pifact-step     { grid-template-columns: 1fr; }
  .pifact-body     { padding-bottom: var(--s4); }

  .pifctab         { padding: var(--s5) var(--s4); }
  .pifctab-title   { font-size: var(--f28); }
  .pifcta-btns     { flex-direction: column; align-items: center; }
  .pifctabtn,
  .pifctaGhost     { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .pifh-badge      { font-size: 8px; letter-spacing: .1em; }
  .pifh-title      { font-size: var(--f28); }
  .pifh-sv         { font-size: var(--f20); }
}

/*_______________________________________Trademark Infringement___________________________________________*/

/* ══════════════════════════════════════
   TRADEMARK INFRINGEMENT PAGE CSS
   Prefix: tmihr· tmiwhat· tmipof· tmiacts·
           tmiremedies· tmiaction· tmidef·
           tmicases· tmifaq· tmirel· tmictasec·
   Palette: --r-* burgundy/red (defined in style.css root)
            --g-* gold accents
   Text:    --t-200 / --t-300 / --t-400 / --t-600 / --t-800 / --t-900
   Font sz: only --f10 thru --f72 (no f13/f15/f17)
   Container: .w from style.css (max 1140px)
   Sections:  background only — inherit padding from base section rule
══════════════════════════════════════ */

/* ── Shared accent overrides ── */
.tmisl { color: #dfe3ec !important; }
.tmisl::before { background: var(--r-400) !important; }
.tmirule { background: linear-gradient(90deg, var(--r-400), transparent) !important; }


/* ─────────────────────────────────────
   tmihr — HERO
───────────────────────────────────── */
.tmihr {
  position: relative;
  background: linear-gradient(155deg, #1a0810 0%, #0d0508 45%, var(--r-700) 100%);
  padding: clamp(7rem,14vw,12rem) var(--s6) clamp(4rem,7vw,6rem);
  overflow: hidden;
}

.tmihr-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.tmihr-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.tmihr-orb1 {
  width: clamp(320px,44vw,650px);
  height: clamp(320px,44vw,650px);
  background: radial-gradient(circle, rgba(139,26,48,.28) 0%, transparent 70%);
  top: -20%; left: -10%;
}
.tmihr-orb2 {
  width: clamp(200px,28vw,420px);
  height: clamp(200px,28vw,420px);
  background: radial-gradient(circle, rgba(212,144,10,.07) 0%, transparent 70%);
  bottom: 0; right: 8%;
}
.tmihr-orb3 {
  width: clamp(160px,22vw,340px);
  height: clamp(160px,22vw,340px);
  background: radial-gradient(circle, rgba(90,16,32,.4) 0%, transparent 70%);
  top: 50%; left: 55%;
  transform: translate(-50%,-50%);
}

.tmihr-shield {
  position: absolute;
  right: -5%;
  top: 5%;
  width: clamp(280px,45vw,680px);
  height: clamp(280px,45vw,680px);
  opacity: 1;
}

.tmihr-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: clamp(560px,80vw,900px);
  margin: 0 auto;
}

.tmihr-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240,237,232,.65);
  background: rgba(194,40,69,.1);
  border: 1px solid rgba(194,40,69,.3);
  border-radius: 100px;
  padding: 6px 18px;
  margin-bottom: var(--s4);
}
.tmihr-badge svg {
  width: 14px; height: 14px;
  stroke: rgba(194,40,69,.8);
  fill: none;
}

.tmihr-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  color: #f0ede8;
  line-height: 1.1;
  margin-bottom: var(--s4);
}
.tmihr-title em { font-style: italic; color: var(--r-200); }

.tmihr-sub {
  font-size: var(--f18);
  color: rgba(240,237,232,.5);
  line-height: 1.75;
  max-width: 700px;
  margin: 0 auto var(--s5);
}

.tmihr-actions {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.tmihr-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: #f8f0ee;
  background: linear-gradient(135deg, var(--r-600), var(--r-500));
  padding: 14px 28px;
  border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(139,26,48,.35);
  transition: opacity .2s, transform .2s;
}
.tmihr-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.tmihr-btn-primary svg { width: 16px; height: 16px; stroke: #f8f0ee; fill: none; }

.tmihr-btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: rgba(240,237,232,.65);
  border: 1.5px solid rgba(240,237,232,.18);
  padding: 14px 24px;
  border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.tmihr-btn-ghost:hover {
  border-color: rgba(194,40,69,.4);
  background: rgba(194,40,69,.06);
}

.tmihr-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.06);
}

.tmihr-stat { text-align: center; }

.tmihr-sv {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: var(--f28);
  font-weight: 700;
  color: var(--r-200);
  line-height: 1;
  margin-bottom: 4px;
}

.tmihr-sl {
  display: block;
  font-size: var(--f11);
  color: rgba(240,237,232,.35);
  letter-spacing: .04em;
}

.tmihr-sdiv {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.08);
}


/* ─────────────────────────────────────
   tmiwhat — WHAT IS INFRINGEMENT
───────────────────────────────────── */
.tmiwhat { background: var(--bg-base); }

.tmiwhat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: start;
}

.tmiwhat-p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.78;
}
.tmiwhat-p + .tmiwhat-p { margin-top: var(--s3); }
.tmiwhat-p strong { color: var(--t-800); }

/* Registered vs Unregistered comparison */
.tmiwhat-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-top: var(--s5);
}

.tmiwhat-col {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4);
  box-shadow: var(--sh-sm);
}

.tmiwhat-col-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--b-light);
}
.tmiwhat-col-hd svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.tmiwhat-col-reg { color: var(--r-400); }
.tmiwhat-col-reg svg { stroke: var(--r-400); fill: none; }
.tmiwhat-col-unreg { color: var(--g-500); }
.tmiwhat-col-unreg svg { stroke: var(--g-500); fill: none; }

.tmiwhat-col-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.tmiwhat-col-list li {
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.tmiwhat-col-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--b-mid);
}

/* Right side — Section 29 breakdown */
.tmiwhat-types {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.tmiwhat-type-hd {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-400);
  background: var(--bg-alt);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--b-light);
}
.tmiwhat-type-hd svg {
  width: 16px; height: 16px;
  stroke: var(--r-400);
  fill: none;
  flex-shrink: 0;
}

.tmiwhat-type {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--b-light);
  transition: background .2s;
}
.tmiwhat-type:last-child { border-bottom: none; }
.tmiwhat-type:hover { background: var(--bg-alt); }

.tmiwhat-type-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--r-400);
  background: rgba(139,26,48,.06);
  border: 1px solid rgba(139,26,48,.15);
  border-radius: var(--rad-s);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  margin-top: 2px;
}

.tmiwhat-type-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: 4px;
}
.tmiwhat-type-body p {
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.6;
}
.tmiwhat-type-body p em { font-style: italic; color: var(--t-600); }


/* ─────────────────────────────────────
   tmipof — PASSING OFF TRINITY TEST
───────────────────────────────────── */
.tmipof { background: var(--bg-alt); }

.tmipof-trinity {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-top: var(--s6);
}

.tmipof-card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  position: relative;
}
.tmipof-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--r-400), var(--r-200));
  border-radius: var(--rad-l) var(--rad-l) 0 0;
}
.tmipof-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-red);
}

.tmipof-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--r-400);
  text-transform: uppercase;
  margin-bottom: var(--s1);
}

.tmipof-ico {
  width: 48px; height: 48px;
  background: rgba(139,26,48,.06);
  border: 1px solid var(--b-red);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s2);
}
.tmipof-ico svg {
  width: 22px; height: 22px;
  stroke: var(--r-400);
  fill: none;
}

.tmipof-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20);
  font-weight: 600;
  color: var(--t-900);
}

.tmipof-card > p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.75;
  flex: 1;
}
.tmipof-card > p em { font-style: italic; color: var(--t-600); }

.tmipof-note {
  font-size: var(--f12);
  color: var(--t-300);
  line-height: 1.6;
  border-top: 1px solid var(--b-light);
  padding-top: var(--s2);
  margin-top: auto;
}

.tmipof-arrow {
  padding-top: 120px;
  color: var(--t-200);
  flex-shrink: 0;
}
.tmipof-arrow svg {
  width: 20px; height: 20px;
  stroke: currentColor;
}

.tmipof-note-box {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: rgba(212,144,10,.05);
  border: 1px solid rgba(212,144,10,.18);
  border-left: 3px solid var(--g-400);
  border-radius: var(--rad-m);
  padding: var(--s4);
  margin-top: var(--s5);
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.72;
}
.tmipof-note-box svg {
  width: 18px; height: 18px;
  stroke: var(--g-400);
  fill: none;
  flex-shrink: 0;
  margin-top: 2px;
}
.tmipof-note-box strong { color: var(--t-800); }


/* ─────────────────────────────────────
   tmiacts — COMMON FORMS
───────────────────────────────────── */
.tmiacts { background: var(--bg-base); }

.tmiacts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.tmiacts-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: var(--tr);
  position: relative;
  overflow: hidden;
}
.tmiacts-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--r-400), var(--r-200));
}
.tmiacts-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-red);
}

.tmiacts-ico {
  width: 48px; height: 48px;
  background: rgba(139,26,48,.06);
  border: 1px solid var(--b-red);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s1);
}
.tmiacts-ico svg {
  width: 24px; height: 24px;
  stroke: var(--r-400);
  fill: none;
}

.tmiacts-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
}
.tmiacts-card > p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
  flex: 1;
}

.tmiacts-severity {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .06em;
  border-radius: 100px;
  padding: 3px 10px;
  align-self: flex-start;
  margin-top: var(--s1);
}
.tmiacts-high {
  color: #8b1a30;
  background: rgba(139,26,48,.08);
  border: 1px solid rgba(139,26,48,.2);
}
.tmiacts-med {
  color: var(--r-400);
  background: rgba(19,68,167,.06);
  border: 1px solid rgba(19,68,167,.15);
}

/* Not infringement box */
.tmiacts-notinf {
  margin-top: var(--s6);
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
}

.tmiacts-notinf-hd {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-600);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--b-light);
}
.tmiacts-notinf-hd svg {
  width: 18px; height: 18px;
  stroke: #277a50;
  fill: none;
  flex-shrink: 0;
}
.tmiacts-notinf-hd strong { color: var(--t-900); }

.tmiacts-notinf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

.tmiacts-ni-item p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
}

.tmiacts-ni-label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .07em;
  color: #277a50;
  background: rgba(39,122,80,.06);
  border: 1px solid rgba(39,122,80,.15);
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: var(--s2);
  width: fit-content;
}


/* ─────────────────────────────────────
   tmiremedies — LEGAL REMEDIES
───────────────────────────────────── */
.tmiremedies { background: var(--bg-alt); }

.tmirem-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  margin-top: var(--s5);
}

.tmirem-group {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.tmirem-group-hd {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--b-light);
}

.tmirem-group-ico {
  width: 52px; height: 52px;
  min-width: 52px;
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
}
.tmirem-ico-civil {
  background: rgba(139,26,48,.07);
  border-color: var(--b-red);
}
.tmirem-ico-civil svg { stroke: var(--r-400); fill: none; width: 26px; height: 26px; }
.tmirem-ico-crim {
  background: rgba(90,16,32,.08);
  border-color: rgba(90,16,32,.2);
}
.tmirem-ico-crim svg { stroke: #8b1a30; fill: none; width: 26px; height: 26px; }
.tmirem-ico-admin {
  background: rgba(19,68,167,.06);
  border-color: rgba(19,68,167,.15);
}
.tmirem-ico-admin svg { stroke: var(--r-500); fill: none; width: 26px; height: 26px; }

.tmirem-group-label {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--r-400);
  margin-bottom: 2px;
}

.tmirem-group-hd h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 600;
  color: var(--t-900);
}

.tmirem-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--b-light);
}

.tmirem-card {
  background: var(--bg-card);
  padding: var(--s4);
}
.tmirem-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}
.tmirem-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
}

/* Criminal cards */
.tmirem-crim-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--b-light);
}

.tmirem-crim-card {
  background: var(--bg-card);
  padding: var(--s4);
}

.tmirem-crim-stat {
  margin-bottom: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--b-light);
}

.tmirem-crim-val {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: var(--f28);
  font-weight: 700;
  color: #8b1a30;
  line-height: 1;
  margin-bottom: 4px;
}

.tmirem-crim-lab {
  display: block;
  font-size: var(--f11);
  font-weight: 500;
  color: var(--t-400);
}

.tmirem-crim-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
}


/* ─────────────────────────────────────
   tmiaction — ENFORCEMENT STEPS
───────────────────────────────────── */
.tmiaction { background: var(--bg-base); }

.tmiact-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--s5);
}

.tmiact-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s5);
  position: relative;
}
.tmiact-step + .tmiact-step { margin-top: var(--s2); }

.tmiact-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.tmiact-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-300);
  background: var(--bg-card);
  border: 2px solid var(--b-mid);
  border-radius: 50%;
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  transition: background .25s, border-color .25s, color .25s;
}
.tmiact-step:hover .tmiact-num {
  background: var(--r-700);
  border-color: var(--r-300);
  color: var(--r-200);
}

.tmiact-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(to bottom, var(--b-mid), transparent);
  margin-top: var(--s2);
}
.tmiact-step:last-child .tmiact-line { display: none; }

.tmiact-body {
  padding-bottom: var(--s6);
  padding-top: 8px;
}

.tmiact-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s3);
}

.tmiact-body p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.78;
}
.tmiact-body p strong { color: var(--t-800); }
.tmiact-body p em { font-style: italic; color: var(--t-600); }

.tmiact-tip {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  background: rgba(139,26,48,.04);
  border: 1px solid rgba(139,26,48,.12);
  border-radius: var(--rad-m);
  padding: var(--s3) var(--s4);
  margin-top: var(--s4);
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.7;
}
.tmiact-tip svg {
  width: 14px; height: 14px;
  stroke: var(--r-400);
  fill: none;
  flex-shrink: 0;
  margin-top: 2px;
}


/* ─────────────────────────────────────
   tmidef — DEFENCES
───────────────────────────────────── */
.tmidef { background: var(--bg-alt); }

.tmidef-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.tmidef-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}
.tmidef-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--b-red);
}

.tmidef-n {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--r-400);
  background: rgba(139,26,48,.06);
  border: 1px solid rgba(139,26,48,.15);
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: var(--s2);
}

.tmidef-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}

.tmidef-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
}
.tmidef-card p em { font-style: italic; color: var(--t-600); }


/* ─────────────────────────────────────
   tmicases — LANDMARK CASES
───────────────────────────────────── */
.tmicases { background: var(--bg-base); }

.tmicases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.tmicase-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.tmicase-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-red);
}

.tmicase-year {
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--r-400);
  background: rgba(139,26,48,.07);
  border: 1px solid var(--b-red);
  border-radius: 100px;
  padding: 3px 12px;
  align-self: flex-start;
}

.tmicase-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.3;
}

.tmicase-court {
  font-size: var(--f12);
  color: var(--r-400);
  font-weight: 500;
}

.tmicase-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
  flex: 1;
}
.tmicase-card p strong { color: var(--t-800); }

.tmicase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: var(--s3);
  border-top: 1px solid var(--b-light);
  margin-top: auto;
}
.tmicase-tags span {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--t-400);
  background: var(--bg-alt);
  border: 1px solid var(--b-mid);
  border-radius: 100px;
  padding: 3px 10px;
}


/* ─────────────────────────────────────
   tmifaq — FAQ (uses global .fl .fi .fq .fa)
───────────────────────────────────── */
.tmifaq { background: var(--bg-alt); }


/* ─────────────────────────────────────
   tmirel — RELATED SERVICES
───────────────────────────────────── */
.tmirel { background: var(--bg-base); }

.tmirel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.tmirel-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4);
  text-decoration: none;
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}
.tmirel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-red);
}

.tmirel-ico {
  width: 48px; height: 48px;
  background: rgba(139,26,48,.06);
  border: 1px solid var(--b-red);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tmirel-ico svg {
  width: 22px; height: 22px;
  stroke: var(--r-400);
  fill: none;
}

.tmirel-body { flex: 1; }
.tmirel-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s1);
}
.tmirel-body p {
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.6;
}

.tmirel-arrow {
  width: 16px; height: 16px;
  stroke: var(--t-300);
  flex-shrink: 0;
  transition: stroke .2s, transform .2s;
  align-self: flex-end;
}
.tmirel-card:hover .tmirel-arrow {
  stroke: var(--r-400);
  transform: translateX(3px);
}


/* ─────────────────────────────────────
   tmictasec — CTA
───────────────────────────────────── */
.tmictasec { background: var(--bg-alt); }

.tmictab {
  background: linear-gradient(145deg, #1a0810, var(--r-700));
  border-radius: var(--rad-l);
  padding: var(--s8) var(--s6);
  box-shadow: 0 8px 40px rgba(90,16,32,.3);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.tmictab-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(194,40,69,.12), transparent);
  pointer-events: none;
}

.tmictab-inner { position: relative; z-index: 1; }

.tmictab-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f48);
  font-weight: 700;
  color: #f0ede8;
  line-height: 1.2;
  margin-bottom: var(--s3);
}
.tmictab-title em { font-style: italic; color: var(--r-200); }

.tmictab-sub {
  font-size: var(--f16);
  color: rgba(240,237,232,.45);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto var(--s6);
}

.tmicta-btns {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.tmictabtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: #f8f0ee;
  background: linear-gradient(135deg, var(--r-400), var(--r-300));
  padding: 15px 32px;
  border-radius: var(--rad-m);
  box-shadow: 0 4px 20px rgba(139,26,48,.4);
  transition: opacity .2s, transform .2s;
}
.tmictabtn:hover { opacity: .88; transform: translateY(-2px); }
.tmictabtn svg { width: 16px; height: 16px; stroke: #f8f0ee; fill: none; }

.tmictaGhost {
  display: inline-flex;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: rgba(240,237,232,.65);
  border: 1.5px solid rgba(240,237,232,.18);
  padding: 15px 28px;
  border-radius: var(--rad-m);
  transition: border-color .2s, background .2s;
}
.tmictaGhost:hover {
  border-color: rgba(194,40,69,.4);
  background: rgba(194,40,69,.06);
}


/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .tmihr-title     { font-size: var(--f60); }
  .tmiwhat-grid    { grid-template-columns: 1fr; }
  .tmipof-trinity  { flex-direction: column; }
  .tmipof-arrow    { padding-top: 0; transform: rotate(90deg); align-self: center; }
  .tmiacts-grid    { grid-template-columns: repeat(2, 1fr); }
  .tmiacts-notinf-grid { grid-template-columns: repeat(2, 1fr); }
  .tmirem-cards    { grid-template-columns: repeat(2, 1fr); }
  .tmirem-crim-grid { grid-template-columns: repeat(2, 1fr); }
  .tmidef-grid     { grid-template-columns: repeat(2, 1fr); }
  .tmicases-grid   { grid-template-columns: repeat(2, 1fr); }
  .tmirel-grid     { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .tmihr-title     { font-size: var(--f48); }
  .tmihr-sub       { font-size: var(--f16); }
  .tmihr-sdiv      { display: none; }
  .tmihr-stats     { gap: var(--s3); }
  .tmihr-shield    { opacity: .3; }

  .tmiwhat-compare { grid-template-columns: 1fr; }
  .tmiacts-grid    { grid-template-columns: 1fr; }
  .tmiacts-notinf-grid { grid-template-columns: 1fr; }
  .tmirem-cards    { grid-template-columns: 1fr; }
  .tmirem-crim-grid { grid-template-columns: 1fr; }
  .tmidef-grid     { grid-template-columns: 1fr; }
  .tmicases-grid   { grid-template-columns: 1fr; }
  .tmirel-grid     { grid-template-columns: 1fr; }

  .tmiact-step     { grid-template-columns: 56px 1fr; gap: var(--s3); }
  .tmiact-num      { width: 44px; height: 44px; font-size: var(--f14); }

  .tmictab         { padding: var(--s6) var(--s4); }
  .tmictab-title   { font-size: var(--f36); }
  .tmirel-ico {
    margin: auto;
  }
  .tmirel-body h4 {
    text-align: center;
  }
  .tmirel-body p {
    text-align: justify;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .tmihr-title     { font-size: var(--f36); }
  .tmihr-actions   { flex-direction: column; align-items: center; }
  .tmihr-btn-primary,
  .tmihr-btn-ghost { width: 100%; justify-content: center; }
  .tmihr-sv        { font-size: var(--f24); }
  .tmihr-stats     { flex-direction: column; gap: var(--s2); }

  .tmiact-left     { display: none; }
  .tmiact-step     { grid-template-columns: 1fr; }
  .tmiact-body     { padding-bottom: var(--s4); }

  .tmictab         { padding: var(--s5) var(--s4); }
  .tmictab-title   { font-size: var(--f28); }
  .tmicta-btns     { flex-direction: column; align-items: center; }
  .tmictabtn,
  .tmictaGhost     { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .tmihr-badge     { font-size: 8px; letter-spacing: .1em; }
  .tmihr-title     { font-size: var(--f28); }
  .tmihr-sv        { font-size: var(--f20); }
} 

/*_____________________________________Logo Design_________________________________________*/

/* ══════════════════════════════════════
   LOGO DESIGN PAGE CSS
   Prefix: ldgh· ldgwhy· ldgtypes· ldgdel·
           ldgprocess· ldgpkg· ldgdiff·
           ldgfaq· ldgrel· ldgctasec·
   Theme:  Gold creative — --g-* primary, dark hero
   Text:   --t-200/300/400/600/800/900 only
   Fonts:  --f10 thru --f72 only
   Container: .w (base style.css)
   Sections:  background only — base section padding
══════════════════════════════════════ */

/* ── Shared accent overrides ── */
.ldgsl { color: var(--g-400) !important; }
.ldgsl::before { background: var(--g-400) !important; }
.ldgrule { background: linear-gradient(90deg, var(--g-400), transparent) !important; }


/* ─────────────────────────────────────
   ldgh — HERO (dark, editorial)
───────────────────────────────────── */
.ldgh {
  position: relative;
  background: var(--bg-dark2);
  padding: clamp(7rem,14vw,12rem) var(--s6) clamp(4rem,7vw,6rem);
  overflow: hidden;
}

.ldgh-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Subtle grain texture */
.ldgh-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .5;
}

.ldgh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.ldgh-orb1 {
  width: clamp(300px,42vw,600px);
  height: clamp(300px,42vw,600px);
  background: radial-gradient(circle, rgba(184,122,0,.12) 0%, transparent 70%);
  top: -10%; right: 10%;
}
.ldgh-orb2 {
  width: clamp(200px,28vw,400px);
  height: clamp(200px,28vw,400px);
  background: radial-gradient(circle, rgba(90,16,32,.2) 0%, transparent 70%);
  bottom: 0; left: 5%;
}
.ldgh-orb3 {
  width: clamp(240px,32vw,480px);
  height: clamp(240px,32vw,480px);
  background: radial-gradient(circle, rgba(139,26,48,.08) 0%, transparent 70%);
  top: 40%; left: 60%;
  transform: translate(-50%,-50%);
}

.ldgh-mark {
  position: absolute;
  right: -8%;
  top: 5%;
  width: clamp(300px,48vw,700px);
  height: clamp(300px,48vw,700px);
  opacity: 1;
}

.ldgh-inner {
  position: relative;
  z-index: 1;
  max-width: clamp(560px,72vw,860px);
  margin: auto;
  text-align: center;
}

.ldgh-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.ldgh-eb-text {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--g-400);
  white-space: nowrap;
  margin: auto;
}

.ldgh-eb-line {
  flex: 0 0 40px;
  height: 1px;
  background: var(--g-400);
  opacity: .5;
}

.ldgh-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  color: var(--t-inv);
  line-height: 1.1;
  margin-bottom: var(--s4);
  letter-spacing: -.01em;
}
.ldgh-title em {
  font-style: italic;
  color: var(--g-300);
}

.ldgh-sub {
  font-size: var(--f18);
  color: rgba(245,243,240,.45);
  line-height: 1.78;
  max-width: 640px;
  margin: auto;
  margin-bottom: var(--s5);
}

.ldgh-actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
  justify-content: center;
}

.ldgh-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--bg-dark2);
  background: linear-gradient(135deg, var(--g-400), var(--g-300));
  padding: 14px 28px;
  border-radius: var(--rad-m);
  box-shadow: 0 4px 24px rgba(184,122,0,.35);
  transition: opacity .2s, transform .2s;
}
.ldgh-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.ldgh-btn-primary svg { width: 16px; height: 16px; stroke: var(--bg-dark2); fill: none; }

.ldgh-btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: rgba(245,243,240,.6);
  border: 1.5px solid rgba(245,243,240,.15);
  padding: 14px 24px;
  border-radius: var(--rad-m);
  transition: border-color .2s, background .2s, color .2s;
}
.ldgh-btn-ghost:hover {
  border-color: rgba(232,168,26,.4);
  color: var(--g-300);
  background: rgba(232,168,26,.05);
}

/* Style pills */
.ldgh-styles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--s5);
  justify-content: center;
}

.ldgh-style-pill {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(245,243,240,.4);
  border: 1px solid rgba(245,243,240,.1);
  border-radius: 100px;
  padding: 4px 12px;
  transition: border-color .2s, color .2s;
}
.ldgh-style-pill:hover {
  border-color: rgba(232,168,26,.35);
  color: var(--g-300);
}

/* Stats bar */
.ldgh-stats {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.06);
  justify-content: center;
}

.ldgh-stat { text-align: center; }

.ldgh-sv {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: var(--f28);
  font-weight: 700;
  color: var(--g-300);
  line-height: 1;
  margin-bottom: 4px;
}

.ldgh-sl {
  display: block;
  font-size: var(--f11);
  color: rgba(245,243,240,.3);
  letter-spacing: .04em;
  max-width: 120px;
  line-height: 1.4;
}

.ldgh-sdiv {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.07);
}


/* ─────────────────────────────────────
   ldgwhy — WHY IT MATTERS
───────────────────────────────────── */
.ldgwhy { background: var(--bg-base); }

.ldgwhy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: start;
}

.ldgwhy-p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.78;
  text-align: justify;
}

.ldgwhy-p + .ldgwhy-p { margin-top: var(--s3); }
.ldgwhy-p strong { color: var(--t-800); }

.ldgwhy-legal {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: rgba(184,122,0,.05);
  border: 1px solid rgba(184,122,0,.18);
  border-left: 3px solid var(--g-400);
  border-radius: var(--rad-m);
  padding: var(--s4);
  margin-top: var(--s5);
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.7;
}
.ldgwhy-legal-ico {
  width: 36px; height: 36px;
  min-width: 36px;
  background: rgba(184,122,0,.08);
  border: 1px solid rgba(184,122,0,.2);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ldgwhy-legal-ico svg {
  width: 18px; height: 18px;
  stroke: var(--g-400);
  fill: none;
}
.ldgwhy-legal strong { color: var(--t-900); display: block; margin-bottom: 4px; }

/* Right side 4 cards */
.ldgwhy-right {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.ldgwhy-card {
  display: inline;
  gap: var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}
.ldgwhy-card:hover {
  transform: translateX(4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.ldgwhy-card-ico {
  width: 40px; height: 40px;
  background: rgba(184,122,0,.07);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
  margin: auto;
}
.ldgwhy-card-ico svg {
  width: 20px; height: 20px;
  stroke: var(--g-500);
  fill: none;
}

.ldgwhy-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s1);
  text-align: center;
}
.ldgwhy-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.6;
}


/* ─────────────────────────────────────
   ldgtypes — LOGO TYPES
───────────────────────────────────── */
.ldgtypes { background: var(--bg-dark); }

/* Override sl/st colours inside dark section */
.ldgtypes .sl { color: var(--g-300) !important; }
.ldgtypes .sl::before { background: var(--g-300) !important; }
.ldgtypes .st { color: var(--t-inv) !important; }
.ldgtypes .st em { color: var(--g-300) !important; }
.ldgtypes .rule { background: linear-gradient(90deg, var(--g-300), transparent) !important; }
.ldgtypes .sb { color: rgba(245,243,240,.45) !important; margin-bottom: 2rem; }

.ldgtypes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.ldgtype-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  transition: var(--tr);
  position: relative;
  overflow: hidden;
}
.ldgtype-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,168,26,.3), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.ldgtype-card:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(232,168,26,.2);
  transform: translateY(-4px);
}
.ldgtype-card:hover::before { opacity: 1; }

/* Mark area */
.ldgtype-mark {
  width: 72px; height: 72px;
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232,168,26,.05);
  border: 1px solid rgba(232,168,26,.12);
  margin-bottom: var(--s1);
  margin: auto;
}
.ldgtype-mark svg {
  width: 48px; height: 48px;
  color: rgba(232,168,26,.5);
}

/* Wordmark: typographic */
.ldgtype-wm span {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 700;
  font-style: italic;
  color: var(--g-300);
  letter-spacing: .04em;
}
/* Lettermark */
.ldgtype-lm span {
  font-family: 'Cinzel', serif;
  font-size: var(--f20);
  font-weight: 600;
  color: var(--g-300);
  letter-spacing: .08em;
}

.ldgtype-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-inv);
  text-align: center;
}
.ldgtype-card p {
  font-size: var(--f14);
  color: rgba(245,243,240,.45);
  line-height: 1.65;
  flex: 1;
  text-align: justify;
}

.ldgtype-eg {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--g-400);
  opacity: .7;
  text-align: center;
}


/* ─────────────────────────────────────
   ldgdel — DELIVERABLES
───────────────────────────────────── */
.ldgdel { background: var(--bg-alt); }

.ldgdel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.ldgdel-col {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}
.ldgdel-col:hover {
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
  transform: translateY(-3px);
}

.ldgdel-col-hd {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-600);
  margin-bottom: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--b-light);
}

.ldgdel-col-ico {
  width: 28px; height: 28px;
  background: rgba(184,122,0,.07);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-s);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ldgdel-col-ico svg {
  width: 14px; height: 14px;
  stroke: var(--g-500);
  fill: none;
}

.ldgdel-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.ldgdel-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.5;
}
.ldgdel-list li svg {
  width: 12px; height: 12px;
  stroke: var(--g-500);
  fill: none;
  flex-shrink: 0;
}


/* ─────────────────────────────────────
   ldgprocess — OUR PROCESS
───────────────────────────────────── */
.ldgprocess { background: var(--bg-base); }

.ldgproc-steps {
  display: flex;
  flex-direction: column;
  margin-top: var(--s5);
}

.ldgproc-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s5);
}
.ldgproc-step + .ldgproc-step { margin-top: var(--s2); }

.ldgproc-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.ldgproc-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--g-400);
  background: var(--bg-card);
  border: 2px solid var(--b-gold);
  border-radius: 50%;
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  transition: background .25s, border-color .25s;
}
.ldgproc-step:hover .ldgproc-num {
  background: rgba(184,122,0,.08);
  border-color: var(--g-400);
}

.ldgproc-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(to bottom, var(--b-gold), transparent);
  margin-top: var(--s2);
}
.ldgproc-step:last-child .ldgproc-line { display: none; }

.ldgproc-body { padding-bottom: var(--s6); padding-top: 8px; }

.ldgproc-tag {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-500);
  margin-bottom: var(--s2);
}

.ldgproc-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s3);
}

.ldgproc-body p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.78;
}
.ldgproc-body p strong { color: var(--t-800); }


/* ─────────────────────────────────────
   ldgpkg — PACKAGES & PRICING
───────────────────────────────────── */
.ldgpkg { background: var(--bg-alt); }

.ldgpkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
  align-items: start;
}

.ldgpkg-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  position: relative;
}
.ldgpkg-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
}

.ldgpkg-featured {
  border-color: var(--b-gold);
  box-shadow: 0 0 0 1px rgba(184,122,0,.2), var(--sh-md);
  transform: translateY(-8px);
}
.ldgpkg-featured:hover { transform: translateY(-12px); }

.ldgpkg-badge {
  background: linear-gradient(135deg, var(--g-400), var(--g-300));
  color: var(--bg-dark2);
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px;
}

.ldgpkg-card-top {
  padding: var(--s5) var(--s4) var(--s4);
  border-bottom: 1px solid var(--b-light);
}

.ldgpkg-tier {
  font-family: 'Cinzel', serif;
  font-size: var(--f11);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-500);
  margin-bottom: var(--s3);
}

.ldgpkg-price {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: var(--s3);
}

.ldgpkg-currency {
  font-family: 'Jost', sans-serif;
  font-size: var(--f20);
  font-weight: 400;
  color: var(--t-400);
  margin-top: 6px;
}

.ldgpkg-amount {
  font-family: 'Playfair Display', serif;
  font-size: var(--f48);
  font-weight: 700;
  color: var(--t-900);
  line-height: 1;
}

.ldgpkg-desc {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.6;
}

.ldgpkg-feats {
  list-style: none;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.ldgpkg-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--f14);
  line-height: 1.5;
}
.ldgpkg-feat svg {
  width: 12px; height: 12px;
  flex-shrink: 0;
  margin-top: 3px;
  fill: none;
}

.ldgpkg-yes {
  color: var(--t-600);
}
.ldgpkg-yes svg { stroke: var(--g-500); }

.ldgpkg-no {
  color: var(--t-200);
  text-decoration: line-through;
  text-decoration-color: var(--b-mid);
}
.ldgpkg-no svg { stroke: var(--t-200); }

/* CTA buttons inside cards */
.ldgpkg-cta {
  display: block;
  text-align: center;
  margin: 0 var(--s4) var(--s4);
  padding: 13px;
  border-radius: var(--rad-m);
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
}
.ldgpkg-cta:hover { opacity: .88; transform: translateY(-1px); }

.ldgpkg-cta-ghost {
  color: var(--t-800);
  border: 1.5px solid var(--b-mid);
}
.ldgpkg-cta-ghost:hover {
  border-color: var(--b-gold);
  color: var(--g-500);
}

.ldgpkg-cta-gold {
  color: var(--bg-dark2);
  background: linear-gradient(135deg, var(--g-400), var(--g-300));
  box-shadow: 0 3px 14px rgba(184,122,0,.3);
}

/* Add-ons note */
.ldgpkg-addons {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: rgba(184,122,0,.05);
  border: 1px solid rgba(184,122,0,.15);
  border-radius: var(--rad-m);
  padding: var(--s4);
  margin-top: var(--s5);
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
}
.ldgpkg-addons svg {
  width: 16px; height: 16px;
  stroke: var(--g-400);
  fill: none;
  flex-shrink: 0;
  margin-top: 2px;
}
.ldgpkg-addons strong { color: var(--t-800); }


/* ─────────────────────────────────────
   ldgdiff — DIFFERENTIATORS
───────────────────────────────────── */
.ldgdiff { background: var(--bg-base); }

.ldgdiff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.ldgdiff-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}
.ldgdiff-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.ldgdiff-ico {
  width: 48px; height: 48px;
  background: rgba(184,122,0,.07);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s3);
}
.ldgdiff-ico svg {
  width: 22px; height: 22px;
  stroke: var(--g-500);
  fill: none;
}

.ldgdiff-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}
.ldgdiff-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
  text-align: justify;
}


/* ─────────────────────────────────────
   ldgfaq — FAQ
───────────────────────────────────── */
.ldgfaq { background: var(--bg-alt); }


/* ─────────────────────────────────────
   ldgrel — RELATED
───────────────────────────────────── */
.ldgrel { background: var(--bg-base); }

.ldgrel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.ldgrel-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4) var(--s5);
  text-decoration: none;
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}
.ldgrel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-gold);
}

.ldgrel-ico {
  width: 52px; height: 52px;
  min-width: 52px;
  background: rgba(184,122,0,.07);
  border: 1px solid var(--b-gold);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ldgrel-ico svg {
  width: 24px; height: 24px;
  stroke: var(--g-500);
  fill: none;
}

.ldgrel-body { flex: 1; }
.ldgrel-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s1);
}
.ldgrel-body p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.6;
}

.ldgrel-arrow {
  width: 18px; height: 18px;
  stroke: var(--t-300);
  flex-shrink: 0;
  transition: stroke .2s, transform .2s;
}
.ldgrel-card:hover .ldgrel-arrow {
  stroke: var(--g-400);
  transform: translateX(3px);
}


/* ─────────────────────────────────────
   ldgctasec — CTA
───────────────────────────────────── */
.ldgctasec { background: var(--bg-alt); }

.ldgctab {
  background: var(--bg-dark2);
  border-radius: var(--rad-l);
  padding: var(--s8) var(--s6);
  box-shadow: 0 8px 48px rgba(20,18,16,.3);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.ldgctab-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(184,122,0,.1), transparent);
  pointer-events: none;
}

.ldgctab-deco {
  position: absolute;
  right: -5%;
  top: -5%;
  width: clamp(200px,35vw,500px);
  height: clamp(200px,35vw,500px);
  opacity: .6;
}

.ldgctab-inner { position: relative; z-index: 1; }

.ldgctab-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f48);
  font-weight: 700;
  color: var(--t-inv);
  line-height: 1.2;
  margin-bottom: var(--s3);
}
.ldgctab-title em { font-style: italic; color: var(--g-300); }

.ldgctab-sub {
  font-size: var(--f16);
  color: rgba(245,243,240,.4);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto var(--s6);
}

.ldgcta-btns {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.ldgctabtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--bg-dark2);
  background: linear-gradient(135deg, var(--g-400), var(--g-300));
  padding: 15px 32px;
  border-radius: var(--rad-m);
  box-shadow: 0 4px 24px rgba(184,122,0,.35);
  transition: opacity .2s, transform .2s;
}
.ldgctabtn:hover { opacity: .88; transform: translateY(-2px); }
.ldgctabtn svg { width: 16px; height: 16px; stroke: var(--bg-dark2); fill: none; }

.ldgctaGhost {
  display: inline-flex;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: rgba(245,243,240,.6);
  border: 1.5px solid rgba(245,243,240,.15);
  padding: 15px 28px;
  border-radius: var(--rad-m);
  transition: border-color .2s, color .2s;
}
.ldgctaGhost:hover {
  border-color: rgba(232,168,26,.4);
  color: var(--g-300);
}


/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .ldgh-title     { font-size: var(--f60); }
  .ldgwhy-grid    { grid-template-columns: 1fr; }
  .ldgtypes-grid  { grid-template-columns: repeat(2, 1fr); }
  .ldgdel-grid    { grid-template-columns: repeat(2, 1fr); }
  .ldgpkg-grid    { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .ldgpkg-featured { transform: translateY(0); }
  .ldgpkg-featured:hover { transform: translateY(-5px); }
  .ldgdiff-grid   { grid-template-columns: repeat(2, 1fr); }
  .ldgrel-grid    { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .ldgh-title     { font-size: var(--f48); }
  .ldgh-sub       { font-size: var(--f16); text-align: justify;
     }
  .ldgh-sdiv      { display: none; }
  .ldgh-stats     { gap: var(--s3); }
  .ldgh-mark      { opacity: .2; }

  .ldgwhy-card    { grid-template-columns: 1fr; }
  .ldgwhy-card-ico { display: none; }
  .ldgtypes-grid  { grid-template-columns: 1fr; }
  .ldgdel-grid    { grid-template-columns: 1fr; }
  .ldgdiff-grid   { grid-template-columns: 1fr; }

  .ldgproc-step   { grid-template-columns: 56px 1fr; gap: var(--s3); }
  .ldgproc-num    { width: 44px; height: 44px; font-size: var(--f14); }

  .ldgctab        { padding: var(--s6) var(--s4); }
  .ldgctab-title  { font-size: var(--f36); }
  .ldgh-eb-text {
    margin: auto;
  }
  .ldgh-title {
    text-align: center;
  }
  .ldgh-styles {
    justify-content: center;
  }


}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .ldgh-title     { font-size: var(--f36); }
  .ldgh-eyebrow   { justify-content: flex-start; }
  .ldgh-eb-line   { display: none; }
  .ldgh-actions   { flex-direction: column; }
  .ldgh-btn-primary,
  .ldgh-btn-ghost { width: 100%; justify-content: center; }
  .ldgh-sv        { font-size: var(--f24); }
  .ldgh-stats     { flex-direction: column; gap: var(--s2); }
  .ldgh-sl        { max-width: none; }

  .ldgproc-left   { display: none; }
  .ldgproc-step   { grid-template-columns: 1fr; }
  .ldgproc-body   { padding-bottom: var(--s4); }

  .ldgctab        { padding: var(--s5) var(--s4); }
  .ldgctab-title  { font-size: var(--f28); }
  .ldgcta-btns    { flex-direction: column; align-items: center; }
  .ldgctabtn,
  .ldgctaGhost    { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .ldgh-title     { font-size: var(--f28); }
  .ldgh-sv        { font-size: var(--f20); }
}

/*_____________________________________Design Registration____________________________________________*/

/* ══════════════════════════════════════
   DESIGN REGISTRATION PAGE CSS
   Prefix:    dr* (drhr· drwhat· drelig·
              drdocs· drprocess· drprot·
              drcancel· drcases· drfaq·
              drrel· drctasec)
   Theme:     Blueprint Teal — page-scoped
              --dr-* teal palette
   Text:      --t-200/300/400/600/800/900 only
   Fonts:     --f10 thru --f72 only
   Container: .w (base style.css)
   Sections:  background only — inherit base padding
══════════════════════════════════════ */

/* ── Page-scoped teal palette ── */
:root {
  --dr-900: #0a2e2e;
  --dr-800: #0e3d3d;
  --dr-700: #134f4f;
  --dr-600: #1a6666;
  --dr-500: #237a7a;
  --dr-400: #2e9898;
  --dr-300: #3db8b8;
  --dr-200: #dcd1d1;
  --dr-100: #9adede;
  --dr-50:  #d4f2f2;
  --dr-glow: rgba(46,152,152,.1);
  --dr-light: rgba(46,152,152,.06);
  --b-teal:  rgba(46,152,152,.2);
}

/* ── Shared accents ── */
.drsl { color: var(--dr-200) !important; }
.drsl::before { background: #8c5757 !important; }
.drrule { background: linear-gradient(90deg, var(--dr-400), transparent) !important; }


/* ─────────────────────────────────────
   drhr — HERO (dark blueprint)
───────────────────────────────────── */
.drhr {
  position: relative;
  background: var(--dr-900);
  padding: clamp(7rem,14vw,12rem) var(--s6) clamp(4rem,7vw,6rem);
  overflow: hidden;
}

.drhr-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Blueprint grid */
.drhr-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(94,200,200,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,200,200,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.drhr-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(94,200,200,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,200,200,.02) 1px, transparent 1px);
  background-size: 12px 12px;
}

.drhr-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}
.drhr-orb1 {
  width: clamp(320px,44vw,640px);
  height: clamp(320px,44vw,640px);
  background: radial-gradient(circle, rgba(46,152,152,.15) 0%, transparent 70%);
  top: -15%; right: 5%;
}
.drhr-orb2 {
  width: clamp(200px,26vw,380px);
  height: clamp(200px,26vw,380px);
  background: radial-gradient(circle, rgba(10,46,46,.6) 0%, transparent 70%);
  bottom: -5%; left: 0%;
}

.drhr-iso {
  position: absolute;
  right: -4%;
  top: 2%;
  width: clamp(300px,52vw,760px);
  height: clamp(300px,52vw,760px);
}

.drhr-inner {
  position: relative;
  z-index: 1;
  max-width: clamp(540px,70vw,840px);
}

.drhr-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e1e1e1;
  border: 1px solid rgba(94,200,200,.2);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: var(--s4);
}
.drhr-badge svg {
  width: 14px; height: 14px;
  stroke: var(--dr-300);
  fill: none;
}

.drhr-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f72);
  font-weight: 700;
  color: #e8f5f5;
  line-height: 1.1;
  margin-bottom: var(--s4);
  letter-spacing: -.01em;
}
.drhr-title em {
  font-style: italic;
  color: var(--dr-200);
}

.drhr-sub {
  font-size: var(--f18);
  color: #dcd1d1;
  line-height: 1.78;
  max-width: 660px;
  margin-bottom: var(--s5);
  text-align: justify;
}

.drhr-actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.drhr-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--dr-900);
  background: linear-gradient(135deg, var(--dr-300), var(--dr-200));
  padding: 14px 28px;
  border-radius: var(--rad-m);
  box-shadow: 0 4px 24px rgba(46,152,152,.35);
  transition: opacity .2s, transform .2s;
}
.drhr-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.drhr-btn-primary svg { width: 16px; height: 16px; stroke: var(--dr-900); fill: none; }

.drhr-btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: rgba(168,220,220,.6);
  border: 1.5px solid rgba(94,200,200,.18);
  padding: 14px 24px;
  border-radius: var(--rad-m);
  transition: border-color .2s, color .2s, background .2s;
}
.drhr-btn-ghost:hover {
  border-color: rgba(94,200,200,.4);
  color: var(--dr-200);
  background: rgba(46,152,152,.06);
}

.drhr-stats {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-top: var(--s5);
  border-top: 1px solid rgba(94,200,200,.08);
}

.drhr-stat { text-align: left; }

.drhr-sv {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: var(--f28);
  font-weight: 700;
  color: var(--dr-200);
  line-height: 1;
  margin-bottom: 4px;
  text-align: center;
}

.drhr-sl {
  display: block;
  font-size: var(--f11);
  color: rgba(168,220,220,.35);
  letter-spacing: .04em;
  max-width: 130px;
  line-height: 1.4;
}

.drhr-sdiv {
  width: 1px;
  height: 40px;
  background: rgba(94,200,200,.08);
}


/* ─────────────────────────────────────
   drwhat — WHAT IS A DESIGN
───────────────────────────────────── */
.drwhat { background: var(--bg-base); }

.drwhat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: start;
}

.drwhat-p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.78;
  text-align: justify;
}
.drwhat-p + .drwhat-p { margin-top: var(--s3); }
.drwhat-p strong { color: var(--t-800); }
.drwhat-p em { color: var(--dr-500); font-style: italic; }

/* Exclusions box */
.drwhat-excl {
  margin-top: var(--s5);
  border: 1px solid rgba(46,152,152,.15);
  border-radius: var(--rad-l);
  overflow: hidden;
}

.drwhat-excl-hd {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: rgba(46,152,152,.05);
  border-bottom: 1px solid rgba(46,152,152,.12);
  padding: var(--s3) var(--s4);
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dr-500);
}
.drwhat-excl-hd svg {
  width: 14px; height: 14px;
  stroke: var(--dr-400);
  fill: none;
  flex-shrink: 0;
}

.drwhat-excl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.drwhat-excl-item {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--b-light);
  border-right: 1px solid var(--b-light);
}
.drwhat-excl-item:nth-child(2n) { border-right: none; }
.drwhat-excl-item:nth-last-child(-n+2) { border-bottom: none; }

.drwhat-excl-item strong {
  display: block;
  font-size: var(--f12);
  font-weight: 600;
  color: var(--t-800);
  margin-bottom: 2px;
}
.drwhat-excl-item span {
  font-size: var(--f11);
  color: var(--t-300);
  line-height: 1.5;
}

/* Right side: can be registered */
.drwhat-right {}

.drwhat-right-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dr-400);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--b-light);
}
.drwhat-right-hd svg {
  width: 14px; height: 14px;
  stroke: var(--dr-400);
  fill: none;
}

.drwhat-eg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}

.drwhat-eg {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.drwhat-eg:hover {
  border-color: var(--b-teal);
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.drwhat-eg-ico {
  width: 52px; height: 52px;
  background: rgba(46,152,152,.06);
  border: 1px solid var(--b-teal);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dr-400);
  flex-shrink: 0;
}
.drwhat-eg-ico svg { width: 32px; height: 32px; }

.drwhat-eg h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
}
.drwhat-eg p {
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.6;
}


/* ─────────────────────────────────────
   drelig — ELIGIBILITY
───────────────────────────────────── */
.drelig { background: var(--dr-900); }

.drelig .sl,
.drelig .sl::before { /* already overridden by .drsl */ }
.drelig .st { color: #e8f5f5 !important; }
.drelig .st em { color: var(--dr-200) !important; }
.drelig .rule { background: linear-gradient(90deg, var(--dr-300), transparent) !important; }
.drelig .sb { color: #dacdcd !important; }

.drelig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}
/* 5 cards — last row: 2 centered */
.drelig-card:nth-child(4),
.drelig-card:nth-child(5) {
  grid-column: span 1;
}
.drelig-grid::after {
  content: none;
}
/* Offset last two to center them */
.drelig-card:nth-child(4) { grid-column-start: 1; }
.drelig-card:nth-child(5) { grid-column-start: 2; }

.drelig-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(94,200,200,.1);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s4);
  transition: var(--tr);
  position: relative;
}
.drelig-card:hover {
  background: rgba(94,200,200,.05);
  border-color: rgba(94,200,200,.25);
  transform: translateY(-4px);
}

.drelig-n {
  font-family: 'Cinzel', serif;
  font-size: var(--f48);
  font-weight: 600;
  color: rgba(94,200,200,.06);
  position: absolute;
  top: var(--s3);
  right: var(--s4);
  line-height: 1;
  letter-spacing: -.02em;
  user-select: none;
}

.drelig-ico {
  width: 48px; height: 48px;
  background: rgba(46,152,152,.08);
  border: 1px solid rgba(94,200,200,.15);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s3);
}
.drelig-ico svg {
  width: 22px; height: 22px;
  stroke: var(--dr-300);
  fill: none;
}

.drelig-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: #e8f5f5;
  margin-bottom: var(--s2);
}
.drelig-card p {
  font-size: var(--f14);
  color: #dacdcd;
  line-height: 1.65;
}

.drelig-ref {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--dr-200);
  margin-top: var(--s3);
  opacity: .7;
}


/* ─────────────────────────────────────
   drdocs — DOCUMENTS
───────────────────────────────────── */
.drdocs { background: var(--bg-alt); }

.drdocs-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s7);
  align-items: start;
}

.drdocs-p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.78;
}
.drdocs-p + .drdocs-p { margin-top: var(--s3); }
.drdocs-p strong { color: var(--t-800); }

.drdocs-tip {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: rgba(46,152,152,.06);
  border: 1px solid rgba(46,152,152,.18);
  border-left: 3px solid var(--dr-400);
  border-radius: var(--rad-m);
  padding: var(--s4);
  margin-top: var(--s5);
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.7;
}
.drdocs-tip svg {
  width: 18px; height: 18px;
  stroke: var(--dr-400);
  fill: none;
  flex-shrink: 0;
  margin-top: 2px;
}
.drdocs-tip strong { color: var(--t-800); }

.drdocs-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.drdocs-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}
.drdocs-item:hover {
  border-color: var(--b-teal);
  box-shadow: var(--sh-md);
  transform: translateX(4px);
}

.drdocs-item-ico {
  width: 40px; height: 40px;
  background: rgba(46,152,152,.07);
  border: 1px solid var(--b-teal);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.drdocs-item-ico svg {
  width: 18px; height: 18px;
  stroke: var(--dr-400);
  fill: none;
}

.drdocs-item div strong {
  display: block;
  font-size: var(--f14);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: 3px;
}
.drdocs-item div span {
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.6;
}


/* ─────────────────────────────────────
   drprocess — REGISTRATION STEPS
───────────────────────────────────── */
.drprocess { background: var(--bg-base); }

.drproc-steps {
  display: flex;
  flex-direction: column;
  margin-top: var(--s5);
}

.drproc-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s5);
}
.drproc-step + .drproc-step { margin-top: var(--s2); }

.drproc-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.drproc-num {
  font-family: 'Cinzel', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--dr-400);
  background: var(--bg-card);
  border: 2px solid var(--b-teal);
  border-radius: 50%;
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  transition: var(--tr);
}
.drproc-step:hover .drproc-num {
  background: rgba(46,152,152,.08);
  border-color: var(--dr-400);
}

.drproc-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(to bottom, var(--b-teal), transparent);
  margin-top: var(--s2);
}
.drproc-step:last-child .drproc-line { display: none; }

.drproc-body { padding-bottom: var(--s6); padding-top: 8px; }

.drproc-tag {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dr-400);
  margin-bottom: var(--s2);
}

.drproc-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f24);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s3);
}

.drproc-body p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.78;
}
.drproc-body p strong { color: var(--t-800); }

/* Fee table inside step 02 */
.drproc-fees {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s4);
  padding: var(--s4);
  background: rgba(46,152,152,.04);
  border: 1px solid rgba(46,152,152,.12);
  border-radius: var(--rad-m);
}

.drproc-fee-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 120px;
}

.drproc-fee-cat {
  font-size: var(--f11);
  color: var(--t-400);
  letter-spacing: .04em;
}

.drproc-fee-amt {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20);
  font-weight: 700;
  color: var(--dr-500);
  line-height: 1;
}


/* ─────────────────────────────────────
   drprot — SECTION 22 PROTECTION
───────────────────────────────────── */
.drprot { background: var(--bg-alt); }

.drprot-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin-top: var(--s5);
}

/* Shared box style */
.drprot-left,
.drprot-right {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5);
  box-shadow: var(--sh-sm);
}
.drprot-left { border-top: 3px solid var(--dr-400); }
.drprot-right { border-top: 3px solid var(--dr-300); }

.drprot-box-hd {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin-bottom: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--b-light);
}

.drprot-box-ico {
  width: 44px; height: 44px;
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drprot-ico-piracy {
  background: rgba(168,46,46,.07);
  border: 1px solid rgba(168,46,46,.18);
}
.drprot-ico-piracy svg { stroke: #b85050; fill: none; width: 20px; height: 20px; }
.drprot-ico-remedy {
  background: rgba(46,152,152,.07);
  border: 1px solid var(--b-teal);
}
.drprot-ico-remedy svg { stroke: var(--dr-400); fill: none; width: 20px; height: 20px; }

.drprot-box-label {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-300);
  margin-bottom: 3px;
}

.drprot-box-hd h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f20);
  font-weight: 600;
  color: var(--t-900);
  line-height: 1.2;
}

.drprot-intro {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.6;
  margin-bottom: var(--s4);
}

/* Piracy acts list */
.drprot-acts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.drprot-acts li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: var(--f14);
  color: var(--t-600);
  line-height: 1.65;
}
.drprot-acts li svg {
  width: 14px; height: 14px;
  stroke: #b85050;
  flex-shrink: 0;
  margin-top: 3px;
  fill: none;
}
.drprot-acts li strong { color: var(--t-900); }

.drprot-note {
  display: inline-block;
  gap: var(--s2);
  align-items: flex-start;
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: rgba(46,152,152,.04);
  border: 1px solid rgba(46,152,152,.1);
  border-radius: var(--rad-m);
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.6;
}
.drprot-note svg {
  width: 13px; height: 13px;
  stroke: var(--dr-400);
  flex-shrink: 0;
  margin-top: 2px;
  fill: none;
}
.drprot-note strong { color: var(--t-800); }

/* Remedy cards */
.drprot-rem-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.drprot-rem {
  background: rgba(46,152,152,.04);
  border: 1px solid rgba(46,152,152,.12);
  border-radius: var(--rad-m);
  padding: var(--s4);
}

.drprot-rem-hd { margin-bottom: var(--s2); }

.drprot-rem-tag {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dr-400);
  display: block;
  margin-bottom: 4px;
}

.drprot-rem h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: var(--t-900);
}

.drprot-rem p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
  text-align: justify;
}
.drprot-rem p strong { color: var(--t-800); }

/* Additional enforcement options */
.drprot-add {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.drprot-add-item:last-child { grid-column: 1 / -1; }

.drprot-add-item {
  padding: var(--s3);
  background: var(--bg-alt);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-m);
}
.drprot-add-item h5 {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dr-400);
  margin-bottom: 4px;
}
.drprot-add-item p {
  font-size: var(--f12);
  color: var(--t-400);
  line-height: 1.55;
  text-align: justify;
}


/* ─────────────────────────────────────
   drcancel — CANCELLATION S.19
───────────────────────────────────── */
.drcancel { background: var(--bg-base); }

.drcancel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.drcancel-card:nth-child(4) { grid-column-start: 1; }
.drcancel-card:nth-child(5) { grid-column-start: 2; }

.drcancel-card {
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s5) var(--s4);
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  position: relative;
  overflow: hidden;
}
.drcancel-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--dr-400), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.drcancel-card:hover {
  border-color: var(--b-teal);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}
.drcancel-card:hover::before { opacity: 1; }

.drcancel-n {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dr-400);
  background: rgba(46,152,152,.06);
  border: 1px solid var(--b-teal);
  border-radius: 100px;
  padding: 3px 10px;
  display: inline-block;
  margin-bottom: var(--s3);
}

.drcancel-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s2);
}

.drcancel-card p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.65;
  text-align: justify;
}
.drcancel-card em { color: var(--t-600); font-style: italic; }

/* Procedure note */
.drcancel-proc {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: rgba(46,152,152,.05);
  border: 1px solid rgba(46,152,152,.15);
  border-radius: var(--rad-m);
  padding: var(--s4);
  margin-top: var(--s5);
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.7;
}
.drcancel-proc svg {
  width: 16px; height: 16px;
  stroke: var(--dr-400);
  fill: none;
  flex-shrink: 0;
  margin-top: 2px;
}
.drcancel-proc strong { color: var(--t-800); }


/* ─────────────────────────────────────
   drcases — LANDMARK CASES
───────────────────────────────────── */
.drcases { background: var(--dr-900); }

.drcases .st { color: #e8f5f5 !important; }
.drcases .st em { color: var(--dr-200) !important; }
.drcases .rule { background: linear-gradient(90deg, var(--dr-300), transparent) !important; }
.drcases .sb { color: rgba(168,220,220,.4) !important; }

.drcases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.drcase-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(94,200,200,.08);
  border-radius: var(--rad-l);
  padding: var(--s4);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.drcase-card:hover {
  background: rgba(94,200,200,.05);
  border-color: rgba(94,200,200,.2);
  transform: translateY(-4px);
}

.drcase-year {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--dr-300);
  background: rgba(46,152,152,.1);
  border: 1px solid rgba(94,200,200,.15);
  border-radius: 100px;
  padding: 3px 10px;
  display: inline-block;
  align-self: flex-start;
}

.drcase-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f16);
  font-weight: 600;
  color: #e8f5f5;
  line-height: 1.3;
}

.drcase-court {
  font-size: var(--f11);
  color: var(--dr-300);
  font-family: 'Cinzel', serif;
  letter-spacing: .06em;
  opacity: .7;
}

.drcase-card p {
  font-size: var(--f14);
  color: rgba(168,220,220,.45);
  line-height: 1.65;
  flex: 1;
  text-align: justify;
}
.drcase-card p strong { color: var(--dr-200); }

.drcase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s2);
}
.drcase-tags span {
  font-family: 'Cinzel', serif;
  font-size: var(--f10);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--dr-300);
  border: 1px solid rgba(94,200,200,.15);
  border-radius: 100px;
  padding: 2px 8px;
  opacity: .75;
}


/* ─────────────────────────────────────
   drfaq — FAQ
───────────────────────────────────── */
.drfaq { background: var(--bg-alt); }


/* ─────────────────────────────────────
   drrel — RELATED
───────────────────────────────────── */
.drrel { background: var(--bg-base); }

.drrel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.drrel-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--b-light);
  border-radius: var(--rad-l);
  padding: var(--s4) var(--s5);
  text-decoration: none;
  box-shadow: var(--sh-sm);
  transition: var(--tr);
}
.drrel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--b-teal);
}

.drrel-ico {
  width: 52px; height: 52px;
  min-width: 52px;
  background: rgba(46,152,152,.07);
  border: 1px solid var(--b-teal);
  border-radius: var(--rad-m);
  display: flex;
  align-items: center;
  justify-content: center;
}
.drrel-ico svg {
  width: 24px; height: 24px;
  stroke: var(--dr-400);
  fill: none;
}

.drrel-body { flex: 1; }
.drrel-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: var(--f18);
  font-weight: 600;
  color: var(--t-900);
  margin-bottom: var(--s1);
}
.drrel-body p {
  font-size: var(--f14);
  color: var(--t-400);
  line-height: 1.6;
}

.drrel-arrow {
  width: 18px; height: 18px;
  stroke: var(--t-300);
  flex-shrink: 0;
  transition: stroke .2s, transform .2s;
}
.drrel-card:hover .drrel-arrow {
  stroke: var(--dr-400);
  transform: translateX(3px);
}


/* ─────────────────────────────────────
   drctasec — CTA
───────────────────────────────────── */
.drctasec { background: var(--bg-alt); }

.drctab {
  background: var(--dr-900);
  border-radius: var(--rad-l);
  padding: var(--s8) var(--s6);
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 8px 48px rgba(10,46,46,.5);
}

.drctab-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(46,152,152,.12), transparent);
  pointer-events: none;
}

.drctab-deco {
  position: absolute;
  right: -5%;
  top: -5%;
  width: clamp(200px,35vw,500px);
  height: clamp(200px,35vw,500px);
  opacity: .8;
}

.drctab-inner { position: relative; z-index: 1; }

.drctab-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--f48);
  font-weight: 700;
  color: #e8f5f5;
  line-height: 1.2;
  margin-bottom: var(--s3);
}
.drctab-title em { font-style: italic; color: var(--dr-200); }

.drctab-sub {
  font-size: var(--f16);
  color: rgba(168,220,220,.4);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto var(--s6);
}

.drcta-btns {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.drctabtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--dr-900);
  background: linear-gradient(135deg, var(--dr-300), var(--dr-200));
  padding: 15px 32px;
  border-radius: var(--rad-m);
  box-shadow: 0 4px 24px rgba(46,152,152,.35);
  transition: opacity .2s, transform .2s;
}
.drctabtn:hover { opacity: .88; transform: translateY(-2px); }
.drctabtn svg { width: 16px; height: 16px; stroke: var(--dr-900); fill: none; }

.drctaGhost {
  display: inline-flex;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-size: var(--f12);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: rgba(168,220,220,.6);
  border: 1.5px solid rgba(94,200,200,.18);
  padding: 15px 28px;
  border-radius: var(--rad-m);
  transition: border-color .2s, color .2s;
}
.drctaGhost:hover {
  border-color: rgba(94,200,200,.4);
  color: var(--dr-200);
}


/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .drhr-title      { font-size: var(--f60); }
  .drhr-iso        { opacity: .3; }
  .drwhat-grid     { grid-template-columns: 1fr; }
  .drelig-grid     { grid-template-columns: repeat(2, 1fr); }
  .drelig-card:nth-child(4) { grid-column-start: auto; }
  .drelig-card:nth-child(5) { grid-column-start: auto; }
  .drdocs-grid     { grid-template-columns: 1fr; }
  .drprot-split    { grid-template-columns: 1fr; }
  .drcancel-grid   { grid-template-columns: repeat(2, 1fr); }
  .drcancel-card:nth-child(4) { grid-column-start: auto; }
  .drcancel-card:nth-child(5) { grid-column-start: auto; }
  .drcases-grid    { grid-template-columns: repeat(2, 1fr); }
  .drrel-grid      { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .drhr-title      { font-size: var(--f48); }
  .drhr-sub        { font-size: var(--f16); }
  .drhr-sdiv       { display: none; }
  .drhr-stats      { gap: var(--s3); }
  .drhr-iso        { opacity: .15; }

  .drwhat-eg-grid  { grid-template-columns: 1fr; }
  .drwhat-excl-grid { grid-template-columns: 1fr; }
  .drwhat-excl-item:nth-child(2n) { border-right: none; }
  .drwhat-excl-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--b-light); }
  .drwhat-excl-item:last-child { border-bottom: none; }

  .drelig-grid     { grid-template-columns: 1fr; }
  .drproc-step     { grid-template-columns: 56px 1fr; gap: var(--s3); }
  .drproc-num      { width: 44px; height: 44px; font-size: var(--f14); }
  .drproc-fees     { flex-direction: column; }

  .drprot-add      { grid-template-columns: 1fr; }
  .drprot-add-item:last-child { grid-column: auto; }

  .drcancel-grid   { grid-template-columns: 1fr; }
  .drcases-grid    { grid-template-columns: 1fr; }

  .drctab          { padding: var(--s6) var(--s4); }
  .drctab-title    { font-size: var(--f36); }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .drhr-title      { font-size: var(--f36); }
  .drhr-actions    { flex-direction: column; }
  .drhr-btn-primary,
  .drhr-btn-ghost  { width: 100%; justify-content: center; }
  .drhr-sv         { font-size: var(--f24); }
  .drhr-stats      { flex-direction: column; gap: var(--s2); }
  .drhr-sl         { max-width: none; }

  .drproc-left     { display: none; }
  .drproc-step     { grid-template-columns: 1fr; }
  .drproc-body     { padding-bottom: var(--s4); }

  .drctab          { padding: var(--s5) var(--s4); }
  .drctab-title    { font-size: var(--f28); }
  .drcta-btns      { flex-direction: column; align-items: center; }
  .drctabtn,
  .drctaGhost      { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════ */
@media (max-width: 360px) {
  .drhr-title      { font-size: var(--f28); }
}