/* ============================================================
   Rajput Durga & Associates — shared stylesheet
   Extracted verbatim from the Baseline (rajputdurga.html) and
   extended only with accessibility rules the Baseline lacked:
   focus ring, skip link, reduced-motion, touch targets.
   No shadows, no gradients, no rounded corners (portrait aside).
   ============================================================ */

/* ---------- Tokens ---------- */

:root{
  --ink:#141414;
  --ink-soft:#4c4c48;
  --green:#16311f;
  --green-deep:#0c2013;
  --gold:#a67c27;
  --white:#ffffff;
  --line:#e4e3de;
  --line-strong:#cac8bf;
  --tint:#f7f7f4;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--white);
  color:var(--ink);
  font-family:'Public Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.display{
  font-family:'Archivo', sans-serif;
  color:var(--ink);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.02;
}

.mono{ font-family:'Space Mono', monospace; }
a{ color:inherit; text-decoration:none; }

img{ max-width:100%; height:auto; }

.wrap{ max-width:1240px; margin:0 auto; padding:0 40px; }

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:700;
}

/* ---------- Accessibility: skip link ---------- */

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  font-family:'Space Mono', monospace; font-size:13px; font-weight:700;
  background:var(--ink); color:var(--white); padding:12px 18px;
}
.skip-link:focus{
  left:0; top:0; outline:2px solid var(--gold); outline-offset:2px;
}

/* ---------- Accessibility: visible focus ring ---------- */

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
/* Gold on green fails to read, so light surfaces flip to white */
.statement-band :focus-visible,
.contact-band :focus-visible,
.on-green :focus-visible{
  outline:2px solid var(--white);
  outline-offset:2px;
}
.contact-form :focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* ---------- Header ---------- */

header{
  position:sticky; top:0; z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1240px; margin:0 auto; padding:20px 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.brandmark{ display:flex; align-items:center; gap:12px; }

.ca-logo-slot{
  background:var(--white); padding:4px 8px; border:1px solid var(--line);
  display:flex; align-items:center; flex-shrink:0;
}
.ca-logo-slot img{ height:28px; width:auto; display:block; }

.brand-text{
  font-family:'Archivo', sans-serif; font-weight:800; font-size:17px;
  color:var(--ink); line-height:1.1; letter-spacing:-0.01em;
}
.brand-text span{
  display:block; font-family:'Space Mono', monospace; font-size:10px;
  letter-spacing:0.12em; color:var(--ink-soft); font-weight:400;
  text-transform:uppercase; margin-top:4px;
}

nav ul{ list-style:none; display:flex; gap:38px; }
nav a{
  font-size:13.5px; font-weight:600; letter-spacing:0.02em;
  color:var(--ink); position:relative; padding-bottom:4px;
  text-transform:uppercase;
}
nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--gold); transition:width 0.25s ease;
}
nav a:hover::after{ width:100%; }
nav a[aria-current="page"]::after{ width:100%; }

.nav-call{
  font-family:'Space Mono', monospace; font-size:13px; color:var(--white);
  background:var(--ink); padding:10px 18px; transition:background 0.2s ease;
  white-space:nowrap; text-transform:uppercase; letter-spacing:0.06em;
}
.nav-call:hover{ background:var(--green); }

/* In-panel "Consult now" CTA — desktop hides it (the .nav-call button
   carries the CTA there); it only appears inside the mobile menu panel. */
.nav-cta-item{ display:none; }

/* ---------- Hero ---------- */

.hero{ padding:74px 0 0; border-bottom:1px solid var(--line); }
.hero-top{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; padding-bottom:44px;
}
.hero-top h1{
  font-size:clamp(44px, 6.4vw, 92px);
  max-width:900px;
}
.hero-facts{
  text-align:right; flex-shrink:0;
  font-family:'Space Mono', monospace; font-size:12.5px; color:var(--ink-soft);
  line-height:2.1; padding-bottom:10px;
}
.hero-facts b{ color:var(--ink); font-weight:700; }

.hero-bottom{
  display:grid; grid-template-columns:1.3fr 0.7fr;
  gap:60px; padding:36px 0 56px; border-top:1px solid var(--line);
}
.hero-lede{ font-size:19px; color:var(--ink-soft); max-width:560px; }
.hero-headed{
  font-size:14.5px; color:var(--ink); padding-left:20px; border-left:3px solid var(--green);
}
.hero-headed b{ font-weight:700; }

/* ---------- Statement band ---------- */

.statement-band{
  background:var(--green); color:var(--white); padding:56px 0;
}
.statement-inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:32px; flex-wrap:wrap;
}
.statement-inner h2{
  color:var(--white); font-size:clamp(26px, 3.2vw, 40px); max-width:640px;
}
.statement-cta{ display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px;
  font-size:14px; font-weight:700; letter-spacing:0.01em; transition:all 0.2s ease;
  font-family:'Space Mono', monospace;
}
.btn-light{ background:var(--white); color:var(--green-deep); }
.btn-light:hover{ background:var(--gold); color:var(--white); }
.btn-outline-light{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.5); }
.btn-outline-light:hover{ border-color:var(--white); }

.btn-dark{ background:var(--ink); color:var(--white); }
.btn-dark:hover{ background:var(--green); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink); }

/* ---------- Section generic ---------- */

section{ padding:96px 0; }
.section-tint{ background:var(--tint); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:52px; gap:24px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:28px;
}
.section-head h2{ font-size:clamp(30px, 3.4vw, 46px); }
.section-head .eyebrow{ margin-bottom:10px; display:block; }
.section-count{
  font-family:'Space Mono', monospace; font-size:13px; color:var(--ink-soft);
  padding-bottom:6px;
}

/* Body measure: no line runs past roughly 90 characters */
.lede{ font-size:19px; color:var(--ink-soft); max-width:640px; }
.prose p, .measure{ font-size:16px; color:var(--ink-soft); max-width:640px; }
.prose p{ margin-bottom:18px; }
.prose p:last-child{ margin-bottom:0; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- About ---------- */

.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; }
.about-quote{
  font-family:'Archivo', sans-serif; font-weight:700; font-size:clamp(24px,2.4vw,32px);
  color:var(--ink); line-height:1.25; letter-spacing:-0.01em;
}
.about-quote span{ color:var(--green); }
.about-body p{ color:var(--ink-soft); margin-bottom:18px; font-size:16px; max-width:560px; }
.about-body p:last-child{ margin-bottom:0; }

.credential-row{
  display:flex; gap:20px; padding:22px 0; border-top:1px solid var(--line);
}
.credential-row:first-of-type{ border-top:1px solid var(--ink); }
.credential-row .n{
  font-family:'Space Mono', monospace; font-size:13px; color:var(--gold); flex-shrink:0; width:28px;
}
.credential-row strong{ display:block; font-size:15px; margin-bottom:3px; }
.credential-row span{ font-size:13.5px; color:var(--ink-soft); }

/* ---------- Who We Work With ---------- */

.who-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--ink); border-left:1px solid var(--line);
}
.who-item{
  padding:28px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.who-item h3{ font-size:16px; font-weight:700; margin-bottom:10px; line-height:1.3; }
.who-item p{ font-size:13.5px; color:var(--ink-soft); }

/* ---------- Practice areas: split strategy / regulatory columns ---------- */

.practice-split{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
}
.practice-col-head{
  font-family:'Space Mono', monospace; font-size:12.5px; letter-spacing:0.1em;
  text-transform:uppercase; font-weight:700; color:var(--green);
  padding-bottom:14px; border-bottom:1px solid var(--ink); margin-bottom:6px;
}
.practice-mini-row{
  display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.practice-mini-row .idx{
  font-family:'Space Mono', monospace; font-size:12.5px; color:var(--gold); flex-shrink:0; width:20px;
}
.practice-mini-row h4{ font-size:16px; font-weight:700; margin-bottom:4px; line-height:1.3; }
.practice-mini-row p{ font-size:13px; color:var(--ink-soft); line-height:1.45; }

.practice-list{ border-top:1px solid var(--ink); }
.practice-row{
  display:grid; grid-template-columns:80px 1fr 1.4fr;
  gap:32px; padding:30px 0; border-bottom:1px solid var(--line);
  align-items:baseline; transition:padding-left 0.2s ease;
}
.practice-row:hover{ padding-left:14px; }
.practice-row .idx{ font-family:'Space Mono', monospace; font-size:14px; color:var(--gold); }
.practice-row h3{ font-size:clamp(19px,1.8vw,24px); font-weight:700; }
.practice-row p{ font-size:14.5px; color:var(--ink-soft); max-width:460px; }

/* ---------- Approach ---------- */

.approach-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--ink); }
.approach-item{
  padding:34px 30px 0 0; border-right:1px solid var(--line);
}
.approach-item:last-child{ border-right:none; }
.approach-item .n{
  font-family:'Space Mono', monospace; font-size:13px; color:var(--gold); display:block; margin-bottom:18px;
}
.approach-item h3{ font-size:20px; margin-bottom:12px; }
.approach-item p{ font-size:14.5px; color:var(--ink-soft); max-width:280px; }

/* ---------- Contact ---------- */

.contact-band{ background:var(--green); color:var(--white); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.contact-grid h2{ color:var(--white); font-size:clamp(30px,3.4vw,44px); margin-bottom:20px; }
.contact-grid > div:first-child p{ color:rgba(255,255,255,0.78); max-width:440px; font-size:16px; margin-bottom:36px; }

.contact-line{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:18px 0; border-top:1px solid rgba(255,255,255,0.2);
}
.contact-line:first-of-type{ border-top:1px solid rgba(255,255,255,0.4); }
.contact-line .label{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(255,255,255,0.6);
}
.contact-line a, .contact-line span.val{
  font-size:17px; font-weight:700; color:var(--white); font-family:'Archivo', sans-serif;
}
.contact-line a:hover{ color:var(--gold); }

.contact-form{ background:var(--white); padding:44px; }
.contact-form h3{ font-size:22px; margin-bottom:24px; color:var(--ink); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px;
}
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--line-strong); background:var(--white); padding:12px 14px;
  font-family:'Public Sans', sans-serif; font-size:14.5px; color:var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--green); }
.field textarea{ resize:vertical; min-height:90px; }

/* ---------- Footer ---------- */

footer{ padding:40px 0; }
.footer-note{
  font-size:12.5px; color:var(--ink-soft); max-width:680px; margin-bottom:22px;
  border-top:1px solid var(--line); padding-top:22px;
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
footer p{ font-size:13px; color:var(--ink-soft); }
.footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a{ font-size:13px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; }
.footer-links a:hover{ color:var(--green); }

/* ---------- Responsive ---------- */

@media (max-width:1080px){
  .approach-grid{ grid-template-columns:repeat(2,1fr); }
  .approach-item:nth-child(2){ border-right:none; }
}

@media (max-width:900px){
  nav ul{ display:none; }
  .hero-top{ flex-direction:column; align-items:flex-start; gap:24px; }
  .hero-facts{ text-align:left; }
  .hero-bottom{ grid-template-columns:1fr; gap:24px; }
  .about-grid{ grid-template-columns:1fr; gap:32px; }
  .practice-row{ grid-template-columns:1fr; gap:8px; }
  .practice-split{ grid-template-columns:1fr; gap:8px; }
  .who-grid{ grid-template-columns:1fr 1fr; }
  .approach-grid{ grid-template-columns:1fr; }
  .approach-item{ border-right:none; border-bottom:1px solid var(--line); padding:28px 0; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-form{ padding:32px 24px; }
  .form-row{ grid-template-columns:1fr; }
  .statement-inner{ flex-direction:column; align-items:flex-start; }
  section{ padding:64px 0; }
  .wrap{ padding:0 22px; }
  .nav-inner{ padding:16px 22px; }

  /* 44px minimum touch targets on small viewports */
  nav a,
  .footer-links a,
  .btn,
  .nav-call,
  .contact-line a,
  button,
  input[type="submit"]{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *, *::before, *::after{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}

/* ---------- Mobile navigation (Requirements 4.6–4.10, 7.5, 7.6) ----------
   One nav list, two presentations. Above 900px it is the horizontal row
   defined in the Header section above. At 900px and below it becomes a
   full-width stacked panel on its own line inside `.nav-inner`.

   Without scripting the panel is open and the toggle stays hidden, so every
   destination is reachable. `nav.js` adds `js-nav` to <html>, which reveals
   the toggle and collapses the panel until `.is-open` is set. */

.nav-toggle{
  display:none;
  width:44px; height:44px; padding:0;
  color:var(--ink); background:var(--white);
  border:1px solid var(--ink); cursor:pointer;
  align-items:center; justify-content:center;
  transition:background 0.2s ease, color 0.2s ease;
}
.nav-toggle:hover{ color:var(--white); background:var(--ink); }

/* Three-bar "hamburger" glyph drawn from one span plus its two pseudo
   elements. It folds into an X while the panel is open (aria-expanded). */
.nav-toggle-bars{ position:relative; display:block; width:20px; height:2px; background:currentColor; }
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor;
  transition:transform 0.2s ease;
}
.nav-toggle-bars::before{ top:-6px; }
.nav-toggle-bars::after{ top:6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:900px){
  /* Brand bar keeps only the brandmark and the hamburger toggle. The nav
     list and CTA move into the panel below, so nothing crowds the top row. */
  .nav-inner{ flex-wrap:wrap; row-gap:0; column-gap:12px; }
  .nav-inner > nav{ order:3; flex:0 0 100%; }
  .nav-call{ display:none; }

  header nav ul{
    display:block;
    margin:14px -22px -16px;
    border-top:1px solid var(--line);
  }
  header nav li + li{ border-top:1px solid var(--line); }
  header nav a{
    display:inline-flex; align-items:center;
    min-height:44px; padding:10px 22px 8px;
  }

  /* Consult CTA as the last row of the open panel, styled as a solid button
     so it reads as the primary action rather than another link. */
  .nav-cta-item{ display:block; }
  header nav .nav-cta-item a{
    justify-content:center; width:100%;
    background:var(--ink); color:var(--white);
    font-family:'Space Mono', monospace; text-transform:uppercase;
    letter-spacing:0.06em; padding:14px 22px;
  }
  header nav .nav-cta-item a::after{ display:none; }
  header nav .nav-cta-item a:hover{ background:var(--green); }

  .js-nav .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .js-nav .nav-inner > nav{ display:none; }
  .js-nav .nav-inner > nav.is-open{ display:block; }
}

@media (max-width:420px){
  .brand-text{ font-size:15px; }
  .ca-logo-slot img{ height:24px; }
}

/* ---------- Closing contact band CTAs (Requirements 1.4, 3.7) ----------
   The band itself reuses `.contact-band` / `.contact-grid` / `.contact-line`
   from the Contact section above. Only the CTA pair is new: square buttons,
   no shadows, wrapping on narrow viewports. */

.contact-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.contact-band-facts .contact-line:first-of-type{ border-top:1px solid rgba(255,255,255,0.4); }

/* ---------- Principal portrait (Requirements 1.6, 1.8, 7.7, 8.6) ----------
   The single rounded element on the site: a circular crop with a 2px `--gold`
   ring held 12px clear of the edge, and a `--tint` square offset 20px
   down-right behind it. The ring is an outline rather than a shadow, so the
   no-shadow rule (R1.9) holds. Margins reserve room for both so neither the
   ring nor the square is clipped by a neighbouring column.

   The source image is 2:3, so `object-fit:cover` fills the square display box
   while the markup still carries the intrinsic width/height (R7.7). */

.portrait{
  --portrait-size:280px;
  position:relative;
  display:block;
  width:var(--portrait-size);
  height:var(--portrait-size);
  margin:14px 20px 20px 14px;
}
.portrait::before{
  content:"";
  position:absolute;
  top:20px; left:20px;
  width:100%; height:100%;
  background:var(--tint);
  z-index:0;
}
.portrait-img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 20%;
  outline:2px solid var(--gold);
  outline-offset:12px;
}
.portrait-caption{
  position:relative;
  z-index:1;
  margin-top:26px;
  font-family:'Space Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
}

@media (max-width:900px){
  .portrait{ --portrait-size:200px; }
}

/* ---------- Page-header band (Requirements 3.6, 7.6, 7.7, 8.1) ----------
   The band `page.njk` renders at the top of every page below Home: eyebrow
   label, the page's single `h1`, then the lede. A plain `div` rather than
   `<header>` or `<section>`, so it inherits neither the sticky-header rules
   nor the 96px section padding. Bottom rule in `--line`, square corners,
   no shadows.

   `.article-header` shares the h1 clamp and the eyebrow spacing: an article is
   a page, so its title is a page-level `h1` (R7.6). The 640px measure on the
   lede and on `.prose p` comes from the Section generic block above (R7.7). */

.page-header,
.article-header{
  padding:74px 0 44px;
  border-bottom:1px solid var(--line);
}
.page-header .eyebrow,
.article-header .eyebrow{
  display:block;
  margin-bottom:18px;
}
.page-header h1,
.article-header h1{
  font-size:clamp(44px, 6.4vw, 92px);
  max-width:900px;
}
.page-header .lede{ margin-top:28px; }

/* ---------- Insights article (Requirements 3.6, 7.4, 7.7, 8.1) ----------
   Date and category read as contact-style metadata: Space Mono, `--ink-soft`,
   above a rule (R7.4). The body is one measure-capped column. */

.article-meta{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:12px;
  margin-top:32px; padding-top:20px;
  border-top:1px solid var(--line);
  font-family:'Space Mono', monospace;
  font-size:12.5px; letter-spacing:0.06em;
  color:var(--ink-soft);
}
.article-meta-category{ text-transform:uppercase; }
.article-body{ padding:56px 0 96px; }
.article-body .prose h2{ font-size:clamp(24px, 2.6vw, 32px); margin:44px 0 16px; }
.article-body .prose h3{ font-size:19px; margin:32px 0 12px; }
.article-body .prose h2:first-child,
.article-body .prose h3:first-child{ margin-top:0; }
.article-body .prose ul,
.article-body .prose ol{ margin:0 0 18px 22px; max-width:640px; }
.article-body .prose li{ font-size:16px; color:var(--ink-soft); margin-bottom:8px; }
.article-body .prose a{ text-decoration:underline; text-underline-offset:3px; }
.article-body .prose a:hover{ color:var(--green); }

@media (max-width:900px){
  .page-header,
  .article-header{ padding:48px 0 32px; }
  .article-body{ padding:40px 0 64px; }
}

/* ---------- Practice Areas index (Requirements 3.4, 3.5, 11.4, 11.5) ----------
   The index page reuses `.practice-split` and `.practice-mini-row` from the
   home-page summary above; this modifier only opens the rows up for a page
   where they are the content rather than a teaser. Type and rule treatment,
   the gold Space Mono numeral, and the square corners all stay as they are.
   Row names are links, so they carry the same gold underline animation the
   header nav uses (0.25s) and the shared focus ring applies unchanged. */

.practice-index-split{ gap:72px; }
.practice-index-split .practice-mini-row{ padding:24px 0; gap:20px; }
.practice-index-split .practice-mini-row .idx{ font-size:14px; width:26px; }
.practice-index-split .practice-mini-row h4{ font-size:19px; margin-bottom:7px; }
.practice-index-split .practice-mini-row p{ font-size:14.5px; max-width:460px; }
.practice-index-split .practice-mini-row h4 a{
  position:relative; display:inline-block; padding-bottom:3px;
}
.practice-index-split .practice-mini-row h4 a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--gold); transition:width 0.25s ease;
}
.practice-index-split .practice-mini-row h4 a:hover::after{ width:100%; }

@media (max-width:900px){
  .practice-index-split{ gap:40px; }
  .practice-index-split .practice-mini-row h4 a{ padding-bottom:6px; }
}

/* ============================================================
   Home page — about summary additions (task 5.1)
   ------------------------------------------------------------
   Two rules only, both additive. Nothing above this line is
   restructured; `.about-grid`, `.about-quote`, and `.about-body`
   are used exactly as extracted from the Baseline.

   1. The eyebrow above the pull-quote. The Baseline set
      `display:block` and its spacing with an inline style; the
      same values live here so the markup stays clean.
   2. `.credential-line` replaces the Baseline's stack of three
      numbered `.credential-row` items. Credentials reduce to a
      single statement, and a list of one reads as an oversight,
      so the treatment becomes one inline line: gold rule above,
      Space Mono label, Archivo value. Square corners, no shadow,
      consistent with everything else.
   ============================================================ */

.about-grid .eyebrow{ display:block; margin-bottom:16px; }

.credential-line{
  margin-top:36px; padding-top:18px;
  border-top:2px solid var(--gold);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 20px;
}
.credential-line .credential-label{
  font-family:'Space Mono', monospace; font-size:12px;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:700; flex-shrink:0;
}
.credential-line .credential-value{
  font-family:'Archivo', sans-serif; font-weight:700; font-size:15.5px;
  color:var(--ink); letter-spacing:-0.01em; line-height:1.3;
}

@media (max-width:900px){
  .credential-line{ margin-top:28px; }
  .credential-line .credential-value{ font-size:15px; }
}

/* ============================================================
   Contact form supporting states (tasks 9.1, 9.2)
   ------------------------------------------------------------
   Additive only — nothing above this line is restructured. The
   form partial ships hidden slots for per-field errors and an
   aria-live status region; the rules below give them visible
   treatment without shadows, gradients, or rounded corners.
   ============================================================ */

.contact-form .field-hint,
.contact-form .field-error,
.contact-form .form-note,
.contact-form .form-status,
.contact-form .field-opt{
  font-family:'Public Sans', sans-serif;
}

.contact-form .field-opt{
  font-family:'Space Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-left:6px;
}

.contact-form .field-hint{
  font-size:12.5px;
  color:var(--ink-soft);
  margin-top:6px;
}

.contact-form .field-error{
  font-size:12.5px;
  color:#8a1c1c;
  margin-top:6px;
  padding-left:10px;
  border-left:2px solid #8a1c1c;
}

.contact-form .field input[aria-invalid="true"],
.contact-form .field textarea[aria-invalid="true"],
.contact-form .field select[aria-invalid="true"]{
  border-color:#8a1c1c;
}

.contact-form .form-lede{
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.55;
  margin:-6px 0 22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.contact-form .consent-field label{
  font-family:'Public Sans', sans-serif;
  font-size:13.5px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.5;
}
.contact-form .consent-field input[type="checkbox"]{
  width:16px; height:16px; margin-top:3px; flex-shrink:0;
  accent-color:var(--green);
}
.contact-form .consent-field a{
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:2px;
}

.contact-form .form-status{
  margin-top:20px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.5;
  border-left:3px solid var(--ink-soft);
  background:var(--tint);
  color:var(--ink);
}
.contact-form .form-status[data-state="ok"]{
  border-left-color:var(--green);
  background:#eef4ef;
  color:var(--green-deep);
}
.contact-form .form-status[data-state="error"]{
  border-left-color:#8a1c1c;
  background:#faeeee;
  color:#5a1010;
}

.contact-form .form-note{
  margin-top:14px;
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.55;
}
.contact-form .form-note a{
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:2px;
}