/* =============================================================================
   JEPP ASSOCIATES BRAND SYSTEM
   Formal, traditional law-firm register: flat colour, hairline structure,
   editorial serif display, sharp shallow depth. No gradients anywhere.
   Palette matches the crest, deep navy, a restrained gold accent, and a
   lot of white.
   Link from every page:  <link rel="stylesheet" href="brand.css">
   Structure: 1 Tokens · 2 Reset · 3 Layout · 4 Type · 5 Bands · 6 Components
              7 Motion
   ========================================================================== */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* Brand: flat fills only */
  --navy:        #0a2240;   /* full-bleed dark bands, hero scrim, matches the crest */
  --navy-deep:   #051328;   /* pressed */
  --blue:        #0a2240;   /* buttons, links, accents, same deep navy as the crest, not a bright blue */
  --blue-bright: #123061;   /* hover/lit state, one step up from --blue */
  --blue-soft:   #5b84b8;   /* dividers, icon strokes */
  --blue-pale:   #d8e5f5;   /* marks on navy */
  --gold:        #8f6c26;   /* sparing formal accent, card open-edge, card number, toggle fill.
                               Dark enough to clear AA as text on white (4.8:1) and to carry
                               white glyphs on top of it. */
  --gold-pale:   #e4d3a4;   /* gold on navy */

  /* Ground */
  --white:       #ffffff;
  --wash:        #f2f5f9;   /* cool alternate light band */

  /* Text */
  --ink:         #0c1522;
  --ink-70:      #475261;
  --ink-45:      #7c8798;
  --on-dark:     #ffffff;
  --on-dark-70:  rgba(255,255,255,.76);
  --on-dark-45:  rgba(255,255,255,.5);

  /* Hairlines */
  --rule:        #dde4ed;
  --rule-strong: #c2cddb;
  --rule-dark:   rgba(255,255,255,.2);

  /* Depth: tight and low-blur so it reads sharp, never puffy */
  --lift-1: 0 1px 0 var(--rule);
  --lift-2: 0 12px 28px -18px rgba(7,26,51,.5);
  --lift-3: 0 22px 44px -24px rgba(7,26,51,.6);

  /* Chrome */
  --headerH:     clamp(64px, 5.8vw, 88px);

  /* Rhythm */
  --shell:       1480px;
  --gut:         clamp(22px, 5vw, 88px);
  --band:        clamp(60px, 7.5vw, 112px);

  /* Type: an editorial serif for display (financial-press register: a
     regular-weight text serif at large size, not a fashion-display face),
     paired with a Franklin Gothic revival for everything else. The sans is
     deliberately a newspaper grotesque rather than a modern UI face: a
     geometric screen sans reads a century apart from the serif and the two
     refuse to sit together. */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:    "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.68,.24,1);
}

/* ── 2 · RESET ──────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:16.5px; font-weight:400; line-height:1.68;
  color:var(--ink-70);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-top:var(--headerH);   /* clears the fixed masthead */
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
/* The UA default is margin:1em 40px, which silently indents every quote
   away from whatever is set beneath it. */
blockquote{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
dl{ margin:0; }
button{ font:inherit; color:inherit; }

/* ── 3 · LAYOUT ─────────────────────────────────────────────────────────── */
.shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--gut); }
[id]{ scroll-margin-top:var(--headerH); }

/* Drafted side rules: the quiet texture running the height of the page */
.frame{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.frame span{ position:absolute; top:0; bottom:0; width:1px; background:var(--rule); opacity:.75; }
.frame span:first-child{ left:calc(var(--gut) / 2); }
.frame span:last-child{ right:calc(var(--gut) / 2); }
@media (max-width:1100px){ .frame{ display:none; } }

/* ── 4 · TYPE ───────────────────────────────────────────────────────────── */
.display-xl,.display-l,.display-m,.display-s{
  font-family:var(--display);
  font-optical-sizing:auto;
  color:var(--ink);
  text-wrap:balance;
}
.display-xl{ font-size:clamp(40px,6.1vw,88px); font-weight:400; line-height:1.04; letter-spacing:-.018em; }
.display-l { font-size:clamp(30px,4vw,58px);  font-weight:400; line-height:1.1;  letter-spacing:-.014em; }
.display-m { font-size:clamp(22px,2.2vw,31px); font-weight:400; line-height:1.2;  letter-spacing:-.008em; }
.display-s { font-size:clamp(17px,1.35vw,21px); font-weight:500; line-height:1.34; letter-spacing:-.004em; }
.display-xl em,.display-l em,.display-m em{ font-style:italic; }

/* Wordmark */
.wordmark{
  font-family:var(--display);
  font-size:clamp(18px,1.75vw,25px);
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap; line-height:1;
}

/* Eyebrow */
.label{
  font-family:var(--sans);
  font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue);
  margin:0;
}
.label--muted{ color:var(--ink-45); }

/* Body */
.lede   { font-size:clamp(17px,1.35vw,21px); font-weight:300; line-height:1.58; color:var(--ink); }
.body   { font-size:16.5px; line-height:1.7;  color:var(--ink-70); }
.body-sm{ font-size:14px;   line-height:1.62; color:var(--ink-70); }
.body-xs{ font-size:12px;   line-height:1.58; color:var(--ink-45); }

/* On dark */
.on-dark,.on-dark .display-xl,.on-dark .display-l,.on-dark .display-m,.on-dark .display-s{ color:var(--on-dark); }
.on-dark .lede,.on-dark .body,.on-dark .body-sm{ color:var(--on-dark-70); }
.on-dark .body-xs{ color:var(--on-dark-45); }
.on-dark .label{ color:var(--gold-pale); }
.on-dark .wordmark{ color:var(--white); }

/* Layered display type: a ghosted numeral sitting behind a heading */
.ghost{
  font-family:var(--display);
  font-size:clamp(64px,7vw,116px);
  font-weight:400; line-height:.8;
  color:var(--ink);
  opacity:.055;
  position:absolute; pointer-events:none; user-select:none;
}
.on-dark .ghost{ color:var(--white); opacity:.07; }

/* ── 5 · BANDS ──────────────────────────────────────────────────────────── */
.band{ position:relative; z-index:2; padding:var(--band) 0; background:var(--white); }
.band--dark{ background:var(--navy); }
.band--wash{ background:var(--wash); }
.band--flush{ padding:0; }
.band--ruled{ border-top:1px solid var(--rule); }
.band--screen{
  min-height:calc(100vh - var(--headerH));
  min-height:calc(100svh - var(--headerH));
  display:flex; align-items:center;
}
.band--screen > .shell{ width:100%; }

/* ── 6 · COMPONENTS ─────────────────────────────────────────────────────── */

/* Hairlines */
.rule{ height:1px; background:var(--rule); border:0; margin:0; }
.on-dark .rule,.rule--dark{ background:var(--rule-dark); }

/* Buttons: square, with a fill that sweeps in from the left */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-block; cursor:pointer;
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  padding:15px 28px;
  border:1px solid var(--blue);
  background:var(--blue); color:var(--white);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--navy-deep);
  transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease);
}
.btn:hover::before{ transform:scaleX(1); }
.btn--ghost{ background:transparent; color:var(--blue); }
.btn--ghost::before{ background:var(--blue); }
.btn--ghost:hover{ color:var(--white); }
.btn--on-dark{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.45); }
.btn--on-dark::before{ background:var(--white); }
.btn--on-dark:hover{ color:var(--navy); border-color:var(--white); }
.btn--block{ display:block; width:100%; text-align:center; }

/* Ruled link with a travelling arrow */
.link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue);
  padding-bottom:6px; border-bottom:1px solid currentColor;
  transition:opacity .25s var(--ease);
}
.link i{ display:block; width:14px; height:1px; background:currentColor; position:relative; transition:transform .3s var(--ease); }
.link i::after{
  content:""; position:absolute; right:0; top:-2.5px;
  width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.link:hover{ opacity:.65; }
.link:hover i{ transform:translateX(5px); }
.on-dark .link{ color:var(--white); }

/* ---- CARD: the practice-area block. Sharp border, shallow lift. -------- */
.card{
  position:relative;
  background:var(--white);
  border:1px solid var(--rule);
  transition:border-color .3s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.card + .card{ margin-top:-1px; }          /* collapse adjoining hairlines */
.card:hover{ border-color:var(--rule-strong); box-shadow:var(--lift-2); z-index:3; }
.card.is-open{ border-color:var(--gold); box-shadow:var(--lift-3); z-index:4; }
.card::before{                              /* accent edge, drawn on open */
  content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:2px;
  background:var(--gold);
  transform:scaleY(0); transform-origin:top;
  transition:transform .45s var(--ease);
}
.card.is-open::before{ transform:scaleY(1); }

.card__head{
  width:100%; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,2vw,32px); align-items:center;
  padding:clamp(22px,2.4vw,34px) clamp(20px,2.4vw,38px);
  background:none; border:0; cursor:pointer; text-align:left;
}
.card__num{
  font-family:var(--sans); font-size:10px; font-weight:600;
  letter-spacing:.2em; color:var(--blue-soft);
  transition:color .3s var(--ease);
}
.card.is-open .card__num{ color:var(--gold); }
/* Both are spans nested inside the head's middle cell, so they must be told
   to be blocks, otherwise the blurb runs inline against the title. */
.card__title{ display:block; transition:transform .35s var(--ease); }
.card:hover .card__title{ transform:translateX(4px); }

/* Plus / minus toggle */
.card__toggle{
  position:relative; flex:0 0 auto;
  width:30px; height:30px;
  border:1px solid var(--rule-strong); border-radius:50%;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .45s var(--ease);
}
.card__toggle::before,.card__toggle::after{
  content:""; position:absolute; left:50%; top:50%;
  width:11px; height:1px; background:var(--ink);
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease), background .3s var(--ease);
}
.card__toggle::after{ transform:translate(-50%,-50%) rotate(90deg); }
.card:hover .card__toggle{ border-color:var(--gold); }
.card.is-open .card__toggle{ background:var(--gold); border-color:var(--gold); transform:rotate(180deg); }
.card.is-open .card__toggle::before,
.card.is-open .card__toggle::after{ background:var(--white); }
.card.is-open .card__toggle::after{ transform:translate(-50%,-50%) rotate(0deg); }

/* Blurb sits under the title, always visible */
.card__blurb{
  display:block;
  max-width:62ch;
  margin:8px 0 0;
  font-size:14px; line-height:1.6; color:var(--ink-70);
}

/* Expanding panel: grid-rows animates cleanly from nothing to content */
.card__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease);
}
.card.is-open .card__panel{ grid-template-rows:1fr; }
.card__panel > div{ overflow:hidden; }
.card__inner{
  padding:0 clamp(20px,2.4vw,38px) clamp(24px,2.6vw,38px);
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease) .08s, transform .4s var(--ease) .08s;
}
.card.is-open .card__inner{ opacity:1; transform:none; }

/* Ruled lists */
.list-rule li{
  padding:10px 0;
  font-size:14.5px; line-height:1.5; color:var(--ink-70);
  border-top:1px solid var(--rule);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.list-rule li:first-child{ border-top:0; }
.list-rule li:hover{ color:var(--ink); padding-left:6px; }
.on-dark .list-rule li{ border-top-color:var(--rule-dark); color:var(--on-dark-70); }

/* Detail rows */
.rows > div{
  display:grid; grid-template-columns:128px 1fr; gap:20px;
  padding:16px 0; align-items:baseline;
  border-top:1px solid var(--rule);
}
.rows > div:first-child{ border-top:0; }
.rows dt{ font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45); }
.rows dd{ margin:0; font-size:15.5px; color:var(--ink); }
.rows dd small{ display:block; margin-top:5px; font-size:12.5px; color:var(--ink-45); }
.rows a:hover{ color:var(--blue); }
@media (max-width:520px){ .rows > div{ grid-template-columns:1fr; gap:5px; } }

/* Fields */
.field{ margin-bottom:20px; }
.field label{
  display:block; margin-bottom:8px;
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-45);
}
.field input,.field select,.field textarea{
  width:100%; padding:10px 0;
  font-family:var(--sans); font-size:15.5px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--rule);
  border-radius:0;
  transition:border-color .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:70px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--blue); }
.field ::placeholder{ color:var(--ink-45); }

/* Utilities */
.stack-xs > * + *{ margin-top:9px; }
.stack-s  > * + *{ margin-top:16px; }
.stack-m  > * + *{ margin-top:26px; }
.stack-l  > * + *{ margin-top:40px; }
.row{ display:flex; align-items:center; gap:clamp(14px,1.6vw,26px); }
.row--between{ justify-content:space-between; }
.row--wrap{ flex-wrap:wrap; }
.center{ text-align:center; }

/* ── 7 · MOTION ─────────────────────────────────────────────────────────── */
/* Hidden state only applies when JS runs, so the page stays readable if the
   script fails or is blocked. */
.js .rv{ opacity:0; transform:translateY(20px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.js .rv.in{ opacity:1; transform:none; }

/* Headline lines rise in sequence */
.js .rv-line{ display:block; overflow:hidden; }
.js .rv-line > span{ display:block; transform:translateY(105%); transition:transform .95s var(--ease); }
.js .rv-line.in > span{ transform:none; }

/* Hairline that draws itself across */
.js .rv-rule{ transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease); }
.js .rv-rule.in{ transform:scaleX(1); }

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-line > span,.js .rv-rule{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .card,.card__panel,.card__inner,.card__toggle,.btn::before{ transition:none; }
}