/* TrustCraft Legal Services PLLC — styles used only by the Firm's pages.
   ----------------------------------------------------------------------
   Everything below once lived at the end of site.css. It was moved out on
   14 October 2026 because site.css ships on every page of trustcraft.ai, so
   while the PLLC awaits approval the shared stylesheet was publicly describing
   a law firm that does not exist yet — an Atlantic Blue theme, an attorney-
   advertising notice, and URLs for artwork deliberately kept out of the deploy.
   The live stylesheet contains none of these classes; this file is why.

   Nothing here is used by any TrustCraft.AI page. `.tcls`, `.svc-split`,
   `.card__list`, `.ribbon*`, `.card-more__*`, `.legal__notice` and
   `.eyebrow--ondark` appear only in the Firm's pages, in every build to date.

   Linked only by pages built with chrome="legal", and kept out of dist/
   entirely by deploy.py while build.BUILD_LEGAL is False. It loads after
   site.css, so the overrides below still win on the pages that want them.
   Contents are otherwise verbatim as they stood in v68.                      */


/* ==========================================================================
   TrustCraft Legal Services PLLC
   --------------------------------------------------------------------------
   A separate legal entity sharing this domain. Everything below is scoped to
   `.tcls` on <body>, so none of it can reach the TrustCraft.AI pages.

   The accent swap is the whole colour story: site.css refers to the accent as
   var(--orange) in 36 places and hard-codes the literal exactly once (in :root).
   Redefining the two custom properties on .tcls therefore recolours buttons,
   links, arrow marks, eyebrows, the H1 accent and the rail rule in one move —
   no duplicated selectors, which is the failure mode this stylesheet has been
   bitten by four times. The spec's remaining values (navy #14283C, slate
   #4C5A6B, canvas #FAFBFC, rule #E3E7EB, footer #132A3F) are already the
   site's tokens, so they need no override at all.
   ========================================================================== */

.tcls {
  --orange:      #267BAF;      /* Atlantic Blue */
  --orange-dark: #1F5C8B;      /* Counsel Blue, for hover/active */
}

/* -------------------------------------------------------------- legal hero */

/* Same geometry, gradient and rail treatment as Home — only the photograph
   changes. The spec's hero fade and rail tint were derived from these exact
   rules, so they are inherited rather than restated. */
.tcls .hero::before { background-image: url("../img/legal/hero-desktop.webp"); }
.tcls .hero__media {
  background-image: url("../img/legal/hero-desktop.webp");
  /* The spec asks for the image ~55-60px left at a 611px mockup width (~9.5%)
     so the shield clears the information rail with visible glass either side. */
  background-position: 90% center;
}

/* ------------------------------------------------------- legal services split */

.svc-split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 42px; }
.svc-split__intro h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; margin: 0; }
.svc-split__intro .section__sub { margin-top: 14px; }
.svc-split__modes {
  list-style: none; margin: 34px 0 0; padding: 0;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); line-height: 2.1;
}
.svc-split__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.svc-split__grid > .card { display: grid; }

.card__list {
  list-style: none; margin: 14px 0 0; padding: 0;
  font-size: 14.5px; line-height: 1.5; color: var(--muted);
}
.card__list li { position: relative; padding-left: 15px; }
.card__list li + li { margin-top: 9px; }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
}

/* ------------------------------------------------------------- dark ribbon */

/* The legal page's equivalent of Home's Trust row: four sectors rather than six
   icons, reversed out of the footer navy so it reads as a divider between the
   services and the insights. */
.ribbon { background: var(--footer-dark); padding: 26px 0; }
.ribbon__inner { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); align-items: center; gap: 24px; }
.ribbon__label {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
}
/* Equal COLUMNS are not equal SPACING. These four labels run 124px to 205px wide,
   so four 1fr columns with left-aligned text left gaps of 35 / 116 / 70px — even
   grid, visibly uneven row. Lay them out by their ink instead and let the free
   space divide equally between them: every gap is then the same width. */
.ribbon__row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 24px;
}
.ribbon__row li { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.3; }

/* An eyebrow reversed out of the dark CTA band. */
.eyebrow--ondark { color: rgba(255,255,255,.72); }

/* --------------------------------------- Legal Architecture "Learn More" */

/* A button styled as the site's arrow-link, so the row reads identically to the
   links it replaces while being the control it actually is. */
.card-more__trigger {
  background: none; border: 0; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
/* .arrow-link paints its own trailing arrow. This control already has a caret
   that says which way it will move, and both together read as two instructions. */
.card-more__trigger::after { content: none; }
.card-more__caret { flex: none; color: var(--orange); transition: transform .15s ease; }
.card-grid--expandable.is-expanded { align-items: start; }
.card-grid--expandable.is-expanded > .card { height: auto; }
.card-more__trigger[aria-expanded="true"] .card-more__caret { transform: rotate(180deg); }
.card-more__panel { display: none; }
.card-more__panel.is-open { display: block; }
.card-more__panel p {
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 15px; line-height: 1.6; color: var(--muted);
}

/* ---------------------------------------------- legal chrome + CTA band */

/* The lockup carries a second line ("LEGAL SERVICES") under the wordmark, so at the
   sitewide 40/42px the TrustCraft wordmark itself lands far smaller than it does on
   TrustCraft.AI and the mark reads as shrunken. Sized so the wordmark matches.

   MEASURED, because the first pass at this guessed and undershot. In the two assets:

     logo-extendedbanner-standard.webp  900x166, wordmark occupies rows 6-128  (123px)
     logo-tcls-standard.webp            900x239, wordmark occupies rows 56-146  (91px),
                                        "LEGAL SERVICES" rows 156-187, and the file
                                        carries ~104px of transparent padding

   So the rendered wordmark is 123*(h/166) against 91*(h/239). Matching TrustCraft.AI's
   29.6px header wordmark needs 29.6*239/91 = 78px, not the 56px first used, which
   landed at 72% and is why the mark still read small. Header height is driven by the
   nav and its padding, not the logo, so it stays 79px at every value here. */
.tcls .site-header__logo img { height: 78px; }   /* matches home's 40px wordmark */

/* The footer does NOT get its matching 82px. The dark footer puts the logo and a
   five-item link row on one line, and the wider lockup pushes "TrustCraft.AI" onto a
   second row: measured here, 76px still holds one row and 78px wraps. That threshold
   was measured with the Google Fonts stylesheet blocked by the sandbox proxy, so the
   nav was in a fallback face and the real break point may sit either side of it.
   70px keeps genuine headroom and still lifts the wordmark from 71% of home's to 86%.
   Revisit only by checking the live footer, not a sandbox screenshot. */
.tcls .site-footer__logo img { height: 70px; }

/* Home drops its logo to 34px here; the matching TCLS value is 25.2*239/91 = 66px.
   Without this the lockup would stay at its desktop size on a phone. */
@media (max-width: 760px) {
  .tcls .site-header__logo img { height: 66px; }
}

/* The mockup's closing band is flat Atlantic Blue. Home's band is a photograph of a
   mountain sunrise — TrustCraft.AI's imagery, which has no business appearing on a
   separate law practice's page. Drop the picture and its darkening gradient. */
.tcls .cta-band { background-image: none; background-color: var(--orange); }
.tcls .cta-band::before { display: none; }
/* On the flat blue band the accent-coloured primary button disappears into its own
   background, so it reverses out: white field, Atlantic Blue label, as the mockup shows. */
.tcls .cta-band .btn--primary {
  background: var(--white); color: var(--orange); border-color: var(--white);
}
.tcls .cta-band .btn--primary:hover { background: #EAF2F8; border-color: #EAF2F8; }

/* Section eyebrows are accent-coloured sitewide via .section__head; the services
   split builds its own head, so it needs the same treatment explicitly. */
.tcls .svc-split__intro .eyebrow { color: var(--orange); }

/* The four-across row needs its own breakpoint, earlier than the page's tablet one.
   Four labels plus a 190px label column fit down to about 1080px with ~40px between
   them; by 1024 that has closed to 25px and the row reads as one run-on string.
   Two per row below that — as a grid, because space-between on a wrapped flex row
   flings a pair of items to opposite edges. */
@media (max-width: 1080px) {
  .ribbon__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
}

/* ================================================================ tablet == */

@media (max-width: 1023px) {
  .svc-split { grid-template-columns: 1fr; gap: 30px; }
  .svc-split__modes { margin-top: 22px; }
  .ribbon__inner { grid-template-columns: 1fr; gap: 14px; }
}

/* ================================================================ mobile == */

@media (max-width: 760px) {
  /* Dedicated portrait crop, anchored right so the shield stays in frame and may
     crop only at the viewport edge. The rail is hidden by the shared Home rule. */
  .tcls .hero__media {
    background-image: url("../img/legal/hero-mobile.webp");
    background-position: 62% 30%;
  }
  .svc-split__grid { grid-template-columns: 1fr; }
  .ribbon__row { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .ribbon { padding: 22px 0; }
}

/* The attorney-advertising notice that opens and closes the PLLC's Terms. Set
   apart from the body copy so it reads as a required notice, not a clause. */
.legal__notice {
  font-size: 14.5px; letter-spacing: .01em; color: var(--muted);
  padding: 12px 16px; border-left: 3px solid var(--orange);
  background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0;
}

/* The Firm's contact hero. Same scaling and anchoring rule as TrustCraft.AI's
   contact band, so the photograph sits in the frame identically — only the
   picture changes. */
.tcls .page-hero--legal-contact .page-hero__media {
  background-image: url("../img/pages/legal-contact-hero-desktop.webp");
  /* The mug sits centre-LEFT in this photograph, where the hero's white fade is
     .93-.99 opaque, so straight cropping buried it. The asset is therefore built
     rather than merely cropped: the photo is placed on a wider canvas shifted right,
     its soft left edge stretched to fill the gap, and its blurred top and table-edge
     bottom extended a little so it still fills the band. The stretched strip lives
     entirely under the opaque part of the fade and is never visible; what it buys is
     a mug in the same place as TrustCraft.AI's, with the books cropped at the right
     edge exactly as they are there. Built to the band's own 2.4675 ratio, so cover
     shows it whole. See src/make_legal_contact_hero.py. */
  background-size: cover;
  background-position: 50% 100%;
}

/* TrustCraft.AI tints the email card peach, derived from its orange accent. On the
   Firm's page that is the wrong brand's colour sitting next to the blue one. */
.tcls .action-card--email { background: #E2EDF6; }
.contact-notice { max-width: 760px; margin-bottom: 28px; }

@media (max-width: 760px) {
  .tcls .page-hero--legal-contact .page-hero__media {
    background-image: url("../img/pages/legal-contact-hero-mobile.webp");
    background-size: cover;
    background-position: 50% 30%;
  }
}