/* =========================================================================
   The Law Office of Charles Eaton — site styles
   Built from the approved design handoff. Values here are client-approved;
   change them in the token block below, not scattered through the file.
   ========================================================================= */

/* ------------------------------ 1. TOKENS ------------------------------ */
:root{
  /* Colour */
  --navy:          #14213B;   /* primary ink, top bar, about section        */
  --navy-deep:     #101B30;   /* contact section                            */
  --navy-deepest:  #0B1424;   /* footer                                     */
  --navy-heading:  #16233E;   /* headings on cream                          */
  --amber:         #C8841F;   /* the accent                                 */
  --amber-dark:    #B07A1E;   /* amber text on cream, where contrast needs it */
  --amber-hover:   color-mix(in srgb, var(--amber) 86%, #000);
  --cream:         #F6EFE1;   /* page background, reversed text             */
  --white:         #FFFFFF;   /* practice cards                             */
  --ink:           #1E2A44;   /* default body                               */
  --ink-muted:     #4B5468;   /* card body                                  */
  --ink-hero:      #56607A;   /* hero paragraph                             */

  /* Derived */
  --hairline-cream: rgba(20,33,59,.12);
  --hairline-card:  rgba(20,33,59,.10);
  --hairline-navy:  rgba(246,239,225,.15);
  --slot-border:    rgba(200,132,31,.35);
  --on-navy:        rgba(246,239,225,.82);
  --on-navy-soft:   rgba(246,239,225,.78);

  /* Type */
  --ui:   'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Layout */
  --container: 1180px;
  --gutter: 24px;
  --section-y: 96px;

  /* Radii */
  --r-sharp: 2px;   /* buttons, inputs   */
  --r-panel: 3px;   /* cards, panels     */

  --shadow-card: 0 30px 60px -28px rgba(20,33,59,.45);
}

/* ------------------------------ 2. RESET ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
/* A class that sets `display` would otherwise out-rank the browser's own
   [hidden] rule, leaving hidden elements on screen. Settle it here. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
img{ height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; }

/* Anchored sections clear the sticky header */
section[id]{ scroll-margin-top:96px; }

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Keyboard users get a real, visible focus ring everywhere. */
:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:var(--navy);
  font-weight:700; padding:12px 18px; text-decoration:none;
}
.skip-link:focus{ left:8px; top:8px; }

/* Screen-reader-only / honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ------------------------------ 3. BUTTONS ----------------------------- */
.btn{
  display:inline-block;
  background:var(--amber);
  color:var(--navy);
  font-family:var(--ui);
  font-weight:700;
  font-size:16px;
  line-height:1.2;
  text-decoration:none;
  text-align:center;
  padding:17px 28px;
  border:0;
  border-radius:var(--r-sharp);
  cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{ background:var(--amber-hover); }
.btn--sm{ padding:11px 20px; font-size:15px; }
.btn--block{ display:block; width:100%; padding:16px; }
.btn--lift{ transition:transform .15s ease, background .15s ease; }
.btn--lift:hover{ transform:translateY(-2px); }
.btn[disabled]{ opacity:.6; cursor:progress; }

/* ------------------------------ 4. SHARED TYPE ------------------------- */
.eyebrow{
  font-family:var(--ui); font-weight:700; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); margin:0 0 16px;
}
.h2{
  font-family:var(--ui); font-weight:800;
  font-size:clamp(30px,4.2vw,52px);
  line-height:1.04; letter-spacing:-.012em;
  color:var(--navy-heading); margin:0;
}
.h2--about{ font-size:clamp(28px,3.6vw,44px); line-height:1.06; margin:0; }
.h2--contact{ font-size:clamp(30px,4vw,50px); }
.sec-head{ max-width:680px; margin-bottom:56px; }

/* ------------------------------ 5. TOP BAR ----------------------------- */
.topbar{ background:var(--navy); color:var(--cream); }
.topbar__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px 24px; padding-block:9px;
  font-size:13px; letter-spacing:.04em;
}
.topbar__note{ display:flex; align-items:center; gap:9px; margin:0; }
.topbar__dot{
  flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--amber);
}
.topbar__phone{
  font-weight:600; letter-spacing:.06em; text-decoration:none;
  transition:color .15s ease;
}
.topbar__phone:hover{ color:var(--amber); }

/* ------------------------------ 6. NAV --------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,239,225,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline-cream);
}
.nav__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 24px; padding-block:15px;
}
.nav__links{
  display:flex; flex-wrap:wrap; align-items:center; gap:30px;
}
.nav__links a:not(.btn){
  font-family:var(--ui); font-weight:600; font-size:14.5px;
  color:var(--ink); text-decoration:none;
  transition:color .15s ease;
}
.nav__links a:not(.btn):hover{ color:var(--amber); }

/* Logo lockup — nav + footer, differing only in colour */
.lockup{
  display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit;
}
.lockup__circle{
  flex:0 0 auto;
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ui); font-weight:900; font-size:18px; letter-spacing:.02em;
  color:var(--navy);
}
.lockup__text{ display:block; line-height:1; }
.lockup__name{
  display:block;
  font-family:var(--ui); font-weight:800; font-size:17px; letter-spacing:.03em;
  color:var(--navy);
}
.lockup__role{
  display:block; margin-top:3px;
  font-family:var(--ui); font-weight:600; font-size:8.5px; letter-spacing:.22em;
  color:var(--amber);
}
.lockup--cream .lockup__circle,
.lockup--cream .lockup__name{ color:var(--cream); }

/* ------------------------------ 7. HERO -------------------------------- */
.hero{ padding:80px 0 88px; }
.hero__inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:56px;
}
.hero__col--text{ flex:1 1 460px; min-width:min(320px,100%); }
.hero__col--card{ flex:1 1 360px; min-width:min(300px,100%); }

.hero__credential{
  display:flex; flex-wrap:wrap; align-items:center; gap:11px;
  margin:0 0 26px;
}
.hero__badge,
.hero__place{
  font-family:var(--ui); font-weight:700;
  font-size:clamp(15px,3.6vw,20px);
  letter-spacing:.1em; text-transform:uppercase;
}
.hero__badge{
  display:inline-block;
  background:var(--amber); color:var(--navy);
  padding:7px 13px; white-space:nowrap;
}
.hero__place{ color:var(--amber-dark); }

.hero__headline{
  font-family:var(--ui); font-weight:800;
  /* The headline is a full sentence now, so it is sized to sit on three
     balanced lines rather than the old three hand-broken ones. */
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.04; letter-spacing:-.018em;
  text-wrap:balance;
  color:var(--navy-heading); margin:0;
}
.hero__body{
  font-family:var(--body); font-size:clamp(18px,2vw,21px);
  line-height:1.6; color:var(--ink-hero);
  max-width:548px; margin:26px 0 36px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin:0; }
.hero__actions .btn:last-child{ padding-inline:24px; }

/* Portrait card */
.portrait{
  margin:0;
  background:var(--navy);
  border-radius:var(--r-panel);
  padding:14px;
  box-shadow:var(--shadow-card);
}
.portrait__photo{
  aspect-ratio:4/5; width:100%; object-fit:cover; object-position:50% 22%;
  border-radius:var(--r-sharp);
  border:1px solid var(--slot-border);
}
.portrait__caption{ padding:20px 12px 10px; }
.portrait__quote{
  margin:0;
  font-family:var(--body); font-style:italic; font-size:19px;
  line-height:1.45; color:var(--cream);
}
.portrait__attrib{
  margin:16px 0 0;
  font-family:var(--ui); font-weight:700; font-size:13px; letter-spacing:.04em;
  color:var(--amber);
}

/* ------------------------------ 8. TICKER ------------------------------ */
.ticker{
  background:var(--navy);
  padding:17px 0;
  overflow:hidden;
  border-top:1px solid rgba(200,132,31,.3);
  border-bottom:1px solid rgba(200,132,31,.3);
}
.ticker__track{
  display:flex; width:max-content;
  will-change:transform;
  animation:ticker 26s linear infinite;
}
.ticker__group{ display:flex; align-items:center; padding:0 15px; }
.ticker__item{
  font-family:var(--ui); font-weight:800; font-size:18px;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--cream); white-space:nowrap;
}
.ticker__sep{ color:var(--amber); font-size:14px; margin:0 30px; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ticker__track{ animation:none; }
  .btn--lift:hover{ transform:none; }
  *{ transition-duration:.01ms !important; }
}

/* ------------------------------ 9. PRACTICE ---------------------------- */
.practice{ background:var(--cream); padding:var(--section-y) 0; }
.cards{ display:flex; flex-direction:column; gap:20px; }
.card{
  background:var(--white);
  border:1px solid var(--hairline-card);
  border-radius:var(--r-panel);
  padding:40px;
  display:flex; flex-wrap:wrap; gap:32px;
}
.card__emblem{
  flex:0 0 auto;
  width:66px; height:66px; border-radius:50%;
  background:var(--amber);
  display:flex; align-items:center; justify-content:center;
}
.card__copy{ flex:1 1 300px; }
.card__title{
  font-family:var(--ui); font-weight:800; font-size:26px; letter-spacing:-.01em;
  color:var(--navy-heading); margin:0 0 12px;
}
.card__body{
  font-family:var(--body); font-size:18px; line-height:1.6;
  color:var(--ink-muted); max-width:560px; margin:0;
}
.card__list{
  flex:1 1 240px;
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:11px;
}
.card__list li{
  display:flex; gap:10px;
  font-family:var(--ui); font-weight:500; font-size:14.5px;
  color:var(--navy-heading);
}
.card__list li::before{ content:'›'; color:var(--amber); flex:0 0 auto; }

/* ------------------------------ 10. ABOUT ------------------------------ */
.about{ background:var(--navy); color:var(--cream); padding:var(--section-y) 0; }
.about__inner{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:40px 56px; }
.about__head{ flex:1 1 280px; min-width:min(260px,100%); }
.about__text{ flex:1 1 520px; min-width:min(300px,100%); }
/* The short amber rule used throughout the identity, doing the work the
   second photo would have done: anchoring the left column. */
.about__rule{
  display:block; width:48px; height:2px; background:var(--amber); margin-top:22px;
}
.about .h2{ color:var(--cream); }
.about__p{
  font-family:var(--body); font-size:19px; line-height:1.65;
  color:var(--on-navy); max-width:560px; margin:0 0 18px;
}
.about__p--last{ margin-bottom:32px; }

.creds{
  border-top:1px solid var(--hairline-navy);
  padding-top:28px; margin:56px 0 0;
  display:flex; flex-wrap:wrap; gap:22px 40px;
}
.creds__item{ flex:1 1 170px; }
.creds__label{
  font-family:var(--ui); font-weight:700; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--amber); margin-bottom:6px;
}
.creds__value{
  margin:0;
  font-family:var(--ui); font-size:15px; line-height:1.5;
  color:var(--on-navy-soft);
}

/* ------------------------------ 11. APPROACH --------------------------- */
.approach{ background:var(--cream); padding:var(--section-y) 0; }
.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px;
}
.step{ border-top:3px solid var(--amber); padding-top:22px; }
.step__num{
  font-family:var(--ui); font-weight:900; font-size:15px; letter-spacing:.1em;
  color:var(--amber); margin:0 0 14px;
}
.step__title{
  font-family:var(--ui); font-weight:700; font-size:19px;
  color:var(--navy-heading); margin:0 0 10px;
}
.step__body{
  font-family:var(--body); font-size:16.5px; line-height:1.6;
  color:var(--ink-muted); margin:0;
}

/* ------------------------------ 12. STATEMENT -------------------------- */
.statement{ background:var(--amber); color:var(--navy); padding:80px 0; }
.statement__inner{ max-width:920px; text-align:center; }
.statement__quote{
  margin:0;
  font-family:var(--body); font-style:italic;
  font-size:clamp(24px,3.4vw,40px);
  line-height:1.3; letter-spacing:-.01em;
}
.statement__attrib{
  margin:28px 0 0;
  font-family:var(--ui); font-weight:800; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase;
}

/* ------------------------------ 13. CONTACT ---------------------------- */
.contact{ background:var(--navy-deep); color:var(--cream); padding:var(--section-y) 0; }
.contact__inner{ display:flex; flex-wrap:wrap; gap:56px; }
.contact__left{ flex:1 1 340px; min-width:min(300px,100%); }
.contact__right{ flex:1 1 380px; min-width:min(300px,100%); }
.seal{ display:block; margin-bottom:26px; }
.contact .h2{ color:var(--cream); }
.contact__body{
  font-family:var(--body); font-size:19px; line-height:1.6;
  color:var(--on-navy-soft); max-width:460px; margin:16px 0 36px;
}
.contact__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:20px;
}
.contact__label{
  display:block; margin-bottom:5px;
  font-family:var(--ui); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,239,225,.5);
}
.contact__value{
  display:block;
  font-family:var(--ui); font-size:16px; line-height:1.5;
  color:var(--cream); text-decoration:none;
  transition:color .15s ease;
}
a.contact__value:hover{ color:var(--amber); }
.contact__value--big{ font-size:21px; font-weight:700; }
.contact__value--mid{ font-size:18px; word-break:break-word; }

/* Form */
.form{
  background:rgba(246,239,225,.04);
  border:1px solid rgba(246,239,225,.14);
  border-radius:var(--r-panel);
  padding:32px;
  display:flex; flex-direction:column; gap:18px;
}
.form__row{ display:flex; flex-wrap:wrap; gap:18px; }
.form__row .field{ flex:1 1 160px; }
.field{ display:flex; flex-direction:column; }
.field__label{
  font-family:var(--ui); font-weight:600; font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(246,239,225,.65); margin-bottom:7px;
}
.field__input{
  width:100%;
  padding:13px 15px;
  font-family:var(--body); font-size:16px;
  background:rgba(246,239,225,.06);
  border:1px solid rgba(246,239,225,.22);
  border-radius:var(--r-sharp);
  color:var(--cream);
}
.field__input::placeholder{ color:rgba(246,239,225,.5); }
.field__input:focus{ border-color:var(--amber); outline:none; }
.field__input:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }
.field__input--area{ resize:vertical; }
/* native dropdown renders options on white in most browsers */
.field__input option{ color:var(--navy); }
.field__input[aria-invalid="true"]{ border-color:#E8927C; }
.field__error,
.form__error{
  margin:7px 0 0;
  font-family:var(--ui); font-size:13px; color:#F0A48F;
}
.form__error{ text-align:center; }
.form__disclaimer{
  margin:0;
  font-family:var(--body); font-style:italic; font-size:13px; line-height:1.5;
  color:rgba(246,239,225,.5);
}

/* Success panel */
.success{
  background:rgba(200,132,31,.10);
  border:1px solid var(--amber);
  border-radius:var(--r-panel);
  padding:48px 36px; text-align:center;
}
.success__check{
  margin:0; font-family:var(--ui); font-weight:900; font-size:42px; color:var(--amber);
}
.success__title{
  font-family:var(--ui); font-weight:800; font-size:24px;
  color:var(--cream); margin:20px 0 12px;
}
.success__body{
  margin:0;
  font-family:var(--body); font-size:18px; line-height:1.6;
  color:rgba(246,239,225,.8);
}
.success__body a{ color:var(--amber); }

/* ------------------------------ 14. FOOTER ----------------------------- */
.footer{
  background:var(--navy-deepest);
  color:rgba(246,239,225,.7);
  padding:56px 0 40px;
}
.footer__top{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:28px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(246,239,225,.12);
}
.footer__links{ display:flex; flex-wrap:wrap; gap:24px; }
.footer__links a{
  font-family:var(--ui); font-weight:600; font-size:14px;
  color:rgba(246,239,225,.7); text-decoration:none;
  transition:color .15s ease;
}
.footer__links a:hover{ color:var(--amber); }
.footer__legal{
  font-family:var(--ui); font-size:12.5px; line-height:1.7;
  color:rgba(246,239,225,.45);
  max-width:820px; margin:24px 0 0;
}

/* ------------------------------ 15. SMALL SCREENS ---------------------- */

/* The sticky header has to stay thin on a phone, or it swallows the screen.
   Below 760px the section links drop out and the bar becomes one short row:
   logo + the consultation CTA. The same links remain in the footer, and the
   page is a single scroll, so nothing becomes unreachable. */
@media (max-width:760px){
  .nav__inner{ padding-block:11px; gap:12px; flex-wrap:nowrap; }
  .nav__links a:not(.btn){ display:none; }
  .nav__links{ gap:0; flex:0 0 auto; }
  .nav__links .btn{ padding:9px 14px; font-size:13px; }
  .lockup{ gap:10px; min-width:0; }
  .lockup__circle{ width:38px; height:38px; font-size:15px; border-width:2px; }
  .lockup__name{ font-size:14px; }
  .lockup__role{ font-size:7.5px; letter-spacing:.18em; }
  section[id]{ scroll-margin-top:70px; }
}

/* Below ~400px there is no room for the wordmark and the CTA on one line.
   Without this the button overlaps the firm's name, because .lockup is
   allowed to shrink below its own text. Let them stack instead. */
@media (max-width:400px){
  .nav__inner{ flex-wrap:wrap; gap:10px; }
  .lockup{ min-width:auto; }
  .nav__links{ width:100%; }
  .nav__links .btn{ display:block; width:100%; text-align:center; padding:11px 14px; }
}

@media (max-width:600px){
  :root{ --section-y:64px; }
  .card{ padding:28px; gap:24px; }
  .form{ padding:22px; }
  .hero{ padding:56px 0 64px; }
  .hero__badge{ white-space:normal; }
}