/* Praetorian Legal Services - Main Stylesheet */
/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0E1623; font-family: 'Public Sans', Helvetica, sans-serif; color: #E9E4D8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: #C4A35A; text-decoration: none; }
a:hover { color: #DCC07A; text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
input, textarea, select { font-family: 'Public Sans', Helvetica, sans-serif; }

/* Responsive container */
#pg { margin: 0 auto; }

/* Print styles */
@media print {
  body { background: white; color: black; }
  a { color: black; }
  nav[aria-label="Main"] { display: none; }
}

/* Insight / related-article cards: clearly distinct alternating colors.
   Scoped to the card anchors (a.post-*) so !important beats the inline
   background without disturbing any shared section colors. */
a.post-steel{background:#1E4368 !important;border-color:#2C5A86 !important}
a.post-navy{background:#15273C !important;border-color:#24405C !important}
a.post-steel:hover{background-color:#24507D !important;border-color:#37699A !important}
a.post-navy:hover{background-color:#1C3350 !important;border-color:#2E4D6E !important}


/* ---- Navigation: dropdowns + mobile hamburger ---- */
.nav-group{position:relative;display:inline-flex;align-items:center}
.nav-group::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:14px;min-width:250px;
  background:#0E1623;border:1px solid #243247;padding:8px 0;display:none;flex-direction:column;z-index:70;
  box-shadow:0 20px 44px rgba(0,0,0,.45)}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub{display:flex}
.nav-subitem{padding:11px 22px;font-size:14px;line-height:1.3;color:#E9E4D8 !important;text-decoration:none !important;white-space:nowrap}
.nav-subitem:hover{background:#15273C;color:#DCC07A !important}
.nav-burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:transparent;border:0;cursor:pointer;padding:0}
.nav-burger span{display:block;width:24px;height:2px;background:#E9E4D8;transition:transform .25s ease,opacity .2s ease}
.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-burger span:nth-child(2){opacity:0}
.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .nav-burger{display:inline-flex}
  .load-nav{position:absolute;top:100%;left:0;right:0;display:none !important;flex-direction:column;align-items:stretch;
    gap:0 !important;background:#0E1623;border-top:1px solid #243247;padding:6px 0 18px;max-height:82vh;overflow-y:auto}
  .nav-open .load-nav{display:flex !important}
  .load-nav>a.navlink,.nav-group>a.nav-parent{display:block;padding:14px 24px;font-size:16px}
  .load-nav>.btn{margin:14px 24px 0;justify-content:center}
  .nav-group{display:block;align-items:stretch}
  .nav-group::after{display:none}
  .nav-sub{position:static;transform:none;display:flex !important;margin:0;border:0;box-shadow:none;background:transparent;padding:2px 0 6px}
  .nav-subitem{padding:9px 24px 9px 42px;color:#B3AC9F !important;white-space:normal}
  .nav-subitem:hover{background:transparent;color:#DCC07A !important}
}

/* Prevent stray horizontal scroll on small screens (wide decorative SVGs,
   fixed-width contact columns, the licensed-in marquee). overflow-x:clip
   forbids horizontal scroll without creating a scroll container, so the
   sticky header keeps working. */
html,body{overflow-x:clip;max-width:100%}

/* Wide monitors (wider than the 1440px page column).
   Text, columns and cards stay in their 1440px column. Only the section
   backgrounds, section rules, header rule and the hero photos/videos (with
   their tint layers) extend to the viewport edges. */
@media (min-width:1441px){
  /* Section backgrounds and 1px rules: a pseudo-element repeats the
     section's own background and borders out to both viewport edges. */
  #pg > div:not(.headroom), .headroom > div{position:relative;isolation:isolate}
  #pg > div:not(.headroom)::before, .headroom > div::before{
    content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
    background:inherit;border-top:inherit;border-bottom:inherit;z-index:-1;pointer-events:none}
  #pg > div[style*="border-top: 1px"]::before{top:-1px}
  #pg > div[style*="border-bottom: 1px"]::before,.headroom > div[style*="border-bottom: 1px"]::before{bottom:-1px}
  /* Heroes clip their zoomed media vertically only, so it can run sideways. */
  #pg > div[style*="overflow: hidden"]{overflow:visible !important;clip-path:inset(0 -100vw)}
  /* Hero media and tint layers go full width; gradient centers written as
     "calc(Npx + var(--bx))" shift by the side margin to stay behind the text. */
  #pg > div > :is(video.hv, .hv-tint, img.hero-img[style*="position: absolute"]),
  #pg > div > div[aria-hidden="true"][style*="position: absolute"]:empty,
  #pg > div > div[style*="position: absolute; top: 0; left: 0; width: 100%"]:empty{
    left:calc(50% - 50vw) !important;width:100vw !important;max-width:none !important;right:auto !important;--bx:calc(50vw - 720px)}
  #pg > div > img.drift{left:calc(50% - 50vw - 240px) !important;width:calc(100vw + 480px) !important}
  /* Homepage "Attorneys licensed in" strip: the scrolling states run edge to
     edge like the photo above it, fading out just inside each screen edge.
     main.js adds extra repeats so the loop never shows a gap. */
  .load-strip > div[style*="overflow: hidden"]{left:calc(50% - 50vw) !important;right:calc(50% - 50vw) !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 180px,#000 calc(100% - 180px),transparent 100%) !important;
    mask-image:linear-gradient(90deg,transparent 0,#000 180px,#000 calc(100% - 180px),transparent 100%) !important}
}


/* Footer copyright + attorney-advertising lines: small, right-justified. */
.foot-copy{display:flex;flex-direction:column;gap:2px;align-self:stretch;text-align:right;font-size:12.5px;line-height:1.55;letter-spacing:.01em}

/* Communication buttons (Schedule a consultation, Send inquiry, Call):
   a band of light sweeps across on hover or keyboard focus. */
.cta,.btn{position:relative;overflow:hidden}
.cta::after,.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);pointer-events:none;opacity:0}
.cta:hover::after,.cta:focus-visible::after,.btn:hover::after,.btn:focus-visible::after{opacity:1;left:130%;transition:left .9s ease,opacity .1s ease}
@media (prefers-reduced-motion:reduce){.cta::after,.btn::after{display:none}}

/* Client-type boxes (.ind): the hover reveal opens each description to its
   measured height (set by main.js), so long descriptions are never cut off. */
.ind:hover .desc,.ind:focus-visible .desc{max-height:var(--dh,130px) !important}

/* Attorneys page: Gaurav's details column sits to the right of his photo, so
   its section headers mirror Carlos's. The plus sign sits on the inner edge
   beside the photo and the label is right-justified; the opened lists stay
   left-aligned for easy reading. */
@media (min-width:1101px){.acc-mirror .acc{flex-direction:row-reverse;text-align:right !important}}

/* Footer bottom row, laid out like the Ropes & Gray footer: legal links on
   the left, the small copyright / attorney-advertising block on the far
   right, both on one row. On narrow screens they stack, the block staying
   right-aligned. */
.foot-bottom{flex-direction:row !important;flex-wrap:wrap;justify-content:space-between !important;align-items:center !important;text-align:left !important;column-gap:32px !important;row-gap:18px !important}
.foot-bottom > nav{justify-content:flex-start !important;gap:12px !important}
.foot-bottom > nav a{font-size:15px}
.foot-bottom > .foot-copy{align-self:center;margin-left:auto}
@media (max-width:760px){
  .foot-bottom{flex-direction:column !important;align-items:stretch !important}
  .foot-bottom > nav{justify-content:center !important}
  .foot-bottom > .foot-copy{margin-left:0}
}

/* Footer link columns: Practice Areas and Licensed In keep their places;
   Explore sits midway between them (equal space on each side). */
.foot-cols{display:flex;justify-content:space-between;align-items:flex-start;min-width:0}
.foot-cols > div{grid-column:auto !important;flex:none}
.foot-cols > div:last-child{width:calc((100% - (var(--n) - 1) * 24px) / var(--n) * 2 + 24px)}
@media (max-width:760px){
  .foot-cols{flex-wrap:wrap;justify-content:flex-start;gap:32px 40px}
  .foot-cols > div:last-child{width:auto}
}

/* Statement of Client Rights: numbered list in the legal-page body style. */
.rights-list{margin:0;padding:0 0 0 30px;display:flex;flex-direction:column;gap:16px;font-size:16px;line-height:1.7;color:#DDD6C8}
.rights-list li{padding-left:8px}
.rights-list li::marker{color:#C4A35A;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:19px}

/* Homepage practice cards: titles shrink together to stay on one line
   inside the card (e.g. "Digital Media & Entertainment" on laptops), and
   wrap only if they would otherwise drop below 20px. */
.pc-body{container-type:inline-size}
.pc-title{font-size:clamp(20px,7.36cqi,26px) !important;white-space:normal !important}


/* Why Praetorian "Our namesake": on wide monitors, feather the statue
   photo's outer edge into the background instead of a hard seam. */
@media (min-width:1441px){
  .aug-fig{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 34px,#000 90px);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 34px,#000 90px)}
}

/* Footer mailing addresses: two columns like the homepage; one column on
   narrow screens where two would not fit. */
@media (max-width:1100px){.foot-addr{grid-template-columns:auto !important;white-space:normal !important}}

/* Phone footer: normal side padding, and the firm info and link columns
   stack full width instead of squeezing into a 12-column grid. */
@media (max-width:760px){
  div:has(> div > .foot-cols){padding:56px 24px 40px !important;gap:40px !important}
  div:has(> .foot-cols){display:flex !important;flex-direction:column;gap:40px}
  div:has(> .foot-cols) > *{grid-column:auto !important}
  .foot-cols{gap:32px 48px !important}
  .foot-bottom > nav{gap:10px 22px !important}
  .foot-bottom > nav > span[aria-hidden]{display:none}
}

/* Hero text over video/photo: no shading. Breadcrumbs use a slightly
   brighter color for legibility; all gold matches the rest of the site. */
.hero-copy nav{color:#CFC8BA !important}


/* Banner columns: rise, then a single glow sweeps across them and they come
   to rest at their own brightness (no endless pulse). All motion finishes
   about five seconds after load. */
@keyframes colGlowOnce{50%{opacity:1}}
.colw .glow{animation-name:colGlowOnce !important;animation-duration:1.4s !important;animation-iteration-count:1 !important}

/* Client-type boxes (homepage "Our clientele" and practice "Who we work
   with"): a steel-navy panel at rest so the boxes stand apart from the
   section background, lifting a step brighter (with the gold rule) on hover. */
.ind{background-color:#15273C}
.ind:hover,.ind:focus-visible{background-color:#1C3350 !important}

/* Practice-area cards (homepage) and tiles (Practice Areas page): a gold
   rule grows across the bottom edge on hover, as on the client boxes and
   attorney photos. */
.pcard,.ptile{position:relative}
.pcard::before,.ptile::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#C4A35A;transform:scaleX(0);transition:transform .35s ease;z-index:3;pointer-events:none}
.pcard:hover::before,.pcard:focus-visible::before,.ptile:hover::before,.ptile:focus-visible::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.pcard::before,.ptile::before{transition:none}}


/* Client boxes: the hover rule runs along the bottom edge. */
.ind::before{top:auto !important;bottom:0 !important}

/* Large titles on the video banners: a distinct 2px dark outline. */
.vhero .hero-copy h1{text-shadow:2.00px 0px 0 rgb(10,16,26),1.85px 0.77px 0 rgb(10,16,26),1.41px 1.41px 0 rgb(10,16,26),0.77px 1.85px 0 rgb(10,16,26),0px 2.00px 0 rgb(10,16,26),-0.77px 1.85px 0 rgb(10,16,26),-1.41px 1.41px 0 rgb(10,16,26),-1.85px 0.77px 0 rgb(10,16,26),-2.00px 0px 0 rgb(10,16,26),-1.85px -0.77px 0 rgb(10,16,26),-1.41px -1.41px 0 rgb(10,16,26),-0.77px -1.85px 0 rgb(10,16,26),0px -2.00px 0 rgb(10,16,26),0.77px -1.85px 0 rgb(10,16,26),1.41px -1.41px 0 rgb(10,16,26),1.85px -0.77px 0 rgb(10,16,26),1.00px 0px 0 rgb(10,16,26),0.71px 0.71px 0 rgb(10,16,26),0px 1.00px 0 rgb(10,16,26),-0.71px 0.71px 0 rgb(10,16,26),-1.00px 0px 0 rgb(10,16,26),-0.71px -0.71px 0 rgb(10,16,26),0px -1.00px 0 rgb(10,16,26),0.71px -0.71px 0 rgb(10,16,26)}

/* Small text on the video banners (breadcrumbs, gold eyebrow lines, intro
   paragraphs): a fine 1px outline plus a faint glow hugging each letter, to
   match the outlined titles. The outline button gets a translucent dark fill
   so its edge and label stay visible on bright footage. */
.vhero .hero-copy :is(nav,p,div:not(:has(h1,h2,p,a))){text-shadow:1.00px 0px 0 rgb(10,16,26),0.71px 0.71px 0 rgb(10,16,26),0px 1.00px 0 rgb(10,16,26),-0.71px 0.71px 0 rgb(10,16,26),-1.00px 0px 0 rgb(10,16,26),-0.71px -0.71px 0 rgb(10,16,26),0px -1.00px 0 rgb(10,16,26),0.71px -0.71px 0 rgb(10,16,26),0 0 4px rgba(10,16,26,.75)}
.vhero .hero-copy a.btn:not(.cta){background:rgba(10,16,26,.6) !important;border-color:#B3AC9F !important}

/* Inquiry form: the "_gotcha" honeypot is moved off screen (not display:none,
   which some bots detect) and skipped by keyboard and screen readers. */
.hp-field{position:absolute !important;left:-10000px !important;top:auto;width:1px;height:1px;overflow:hidden}
.inquiry-form{position:relative}
.form-status{margin:0;padding:12px 16px;font-size:16px;line-height:1.55;border:1px solid}
.form-status.is-ok{color:#E9E4D8;border-color:#C4A35A;background:rgba(196,163,90,.08)}
.form-status.is-err{color:#F2C9C0;border-color:#B5564A;background:rgba(181,86,74,.1)}
.inquiry-form button[disabled]{opacity:.7;cursor:wait}

/* Banner colonnade hidden while it would touch the hero text (set by main.js). */
.cols-off{visibility:hidden !important}

/* Phones: page banners (article, legal, Insights and video heroes) drop the
   desktop 96px side margins and scale the title to the screen, so long words
   ("Healthcare", "Intellectual") always fit with room to spare. Only the
   banner holding the page's h1 is affected; sections below are unchanged. */
@media (max-width:760px){
  #pg > div:has(h1):not(.headroom){padding-left:24px !important;padding-right:24px !important}
  #pg > div:has(h1) .hero-copy{padding-left:24px !important;padding-right:24px !important}
  /* (the homepage keeps its own, already-fitting title size) */
  #pg:not(:has(.load-strip)) > div:has(h1) h1{font-size:clamp(34px,11.5vw,54px) !important;line-height:1.08 !important}
  #pg > div:has(h1) h1{overflow-wrap:break-word}
  /* Article date line: the date and reading time each stay on one line,
     and the share buttons wrap below them if needed. */
  #pg > div:has(h1) div:has(> time){flex-wrap:wrap;row-gap:14px}
  #pg > div:has(h1) div:has(> time) > :is(time,span:not(:has(button))){white-space:nowrap}
  #pg > div:has(h1) div:has(> time) > span:has(button){margin-left:0 !important;flex-basis:100%}
  /* Video pause button moves to the banner's top right, clear of the
     Schedule / See capabilities buttons. */
  .vbtn{top:12px !important;bottom:auto !important;right:12px !important;width:36px !important;height:36px !important}
  #pg > div:has(h1) h1 + p, #pg > div:has(h1) .hero-copy p{max-width:none !important}
}

/* Phones: every page section (article text, related insights, legal pages,
   Insights list, etc.) uses 24px side margins instead of the desktop 96px,
   so body text gets the full width of the screen. */
@media (max-width:760px){
  #pg > div:not(.headroom){padding-left:24px !important;padding-right:24px !important}
}

/* The inquiry form is the target of every "Schedule a consultation" button;
   leave a little room above it when the page jumps there. */
#contact{scroll-margin-top:24px}

/* Phones: a "Schedule a consultation" button sharing a row with text (the
   call-to-action box at the end of articles, Insights and other pages) drops
   below the text instead of being pushed off screen; footer legal links wrap. */
@media (max-width:760px){
  #pg div:has(> a.cta){flex-wrap:wrap;row-gap:20px}
  #pg div:has(> a.cta)[style*="padding: 32px 36px"]{padding:28px 24px !important}
  #pg div:has(> a.cta) > :not(a){min-width:0;flex:1 1 240px}
  .foot-bottom > nav{flex-wrap:wrap}
  /* full-width rows that pair text with a button group (Firm page) */
  #pg > div:has(a.cta)[style*="justify-content: space-between"]{flex-wrap:wrap;row-gap:28px}
  /* insight cards (More insights, Insights page): one per row */
  #pg div:has(> a.post-steel, > a.post-navy)[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important;gap:16px !important}
  #pg a.post-steel, #pg a.post-navy{height:auto !important;min-height:220px;padding:28px 24px 24px !important}
}

/* =====================================================================
   PHONE LAYOUT (max 760px): one simple column, top to bottom.
   Every grid becomes a single column, rows wrap, fixed heights and widths
   give way to the content, and large type scales down. Desktop unchanged.
   ===================================================================== */
@media (max-width:760px){
  /* grids -> one column */
  #pg [style*="display: grid"]{grid-template-columns:minmax(0,1fr) !important;grid-template-rows:none !important;grid-auto-rows:auto !important;column-gap:0 !important}
  #pg [style*="display: grid"] > *{grid-column:1 / -1 !important;grid-row:auto !important}
  #pg [style*="display: grid"]{align-content:start !important;align-items:start !important}
  #pg .pc-body{flex-grow:0 !important}
  #pg .pc-body > :last-child{margin-top:8px !important}
  /* flex rows wrap; nothing wider than the screen */
  #pg [style*="display: flex"]:not([style*="flex-direction: column"]):not(.marquee):not(.load-nav){flex-wrap:wrap}
  #pg :not(.marquee):not(.marquee *):not(video){max-width:100%}
  #pg [style*="width:"]:not(.marquee):not(.marquee *):not(video):not(.hv-tint):not(img.hero-img):not(.vbtn):not(.ibtn):not(svg):not(.nav-burger){width:auto !important}
  #pg img:not(.hero-img){width:100% !important;height:auto !important}
  /* fixed heights give way (cards, panels, image boxes) */
  #pg div[style*="height:"]:not([style*="position: absolute"]):not(.vhero):not(.load-strip):not(.load-strip *):not(.hv-tint):not(.marquee){height:auto !important;min-height:0 !important}
  #pg a[style*="height:"]:not(.btn):not(.cta){height:auto !important}
  #pg span.shaft{height:0 !important}
  /* banners: the text sits in normal flow over its photo or video */
  #pg > div:has(> .hero-copy), #pg > div:has(> img.hero-img){height:auto !important;min-height:560px}
  #pg .hero-copy{position:relative !important;height:auto !important;min-height:560px;padding-top:40px !important;padding-bottom:56px !important;gap:40px}
  #pg > div:has(> img.hero-img) > div:not([aria-hidden="true"]):not(:empty){position:relative !important;height:auto !important;inset:auto !important}
  /* type */
  #pg h2{font-size:clamp(28px,8.6vw,40px) !important;line-height:1.15 !important}
  #pg h3{font-size:clamp(21px,6.2vw,26px) !important;line-height:1.25 !important}
  #pg p{font-size:17px !important;line-height:1.6 !important}
  /* generous but not desktop-sized vertical spacing */
  #pg > div:not(.headroom):not(.vhero):not(:has(> .hero-copy)){padding-top:56px !important;padding-bottom:56px !important}
  #pg [style*="gap: 64px"],#pg [style*="gap: 72px"],#pg [style*="gap: 80px"],#pg [style*="gap: 96px"]{gap:32px !important}
  /* buttons: full width, easy to tap */
  #pg p{white-space:normal !important}
  #pg .load-nav > a.btn{width:auto !important;margin:14px 24px 4px !important}
  #pg a.btn:not(.load-nav > a){justify-content:center;width:100% !important;height:auto !important;min-height:52px;padding:14px 20px !important;text-align:center;white-space:normal}
  #pg [aria-hidden="true"]:has(.colw){display:none !important}
}
/* Phone menu: every item left-aligned in one column. */
@media (max-width:900px){
  .load-nav{align-items:stretch !important;text-align:left !important}
  .load-nav > a.navlink, .nav-group, .nav-group > a.nav-parent{display:block !important;width:100% !important;text-align:left !important;align-self:stretch !important;margin:0 !important;padding-left:24px !important;padding-right:24px !important;box-sizing:border-box}
  .nav-group > a.nav-parent{padding-left:24px !important}
  .nav-group{padding:0 !important}
  .load-nav > *{animation:none !important;transform:none !important;opacity:1 !important}
}