/* ==========================================================================
   Appledore Investment Advisors — site styles
   Built on branding_assets/handoff/brand-tokens.css (the source of truth).
   Load order: brand-tokens.css, then this file.
   Follows HANDOFF.md: one typeface, letterspaced caps, sea glass as hairline
   only, pale glass on deep water only, no gradients / shadows / rounded cards.
   ========================================================================== */

/* --- additions to the token set ------------------------------------------ */
:root{
  /* Sea Glass (#6F9287) at --fs-eyebrow size scores 3.28:1 on --paper and
     3.05:1 on --paper-sunk — below the 4.5:1 WCAG AA floor for small text.
     This is the same hue darkened until it clears AA on BOTH grounds:
     4.98:1 on --paper, 4.61:1 on --paper-sunk. Used for eyebrow TEXT only.
     Hairlines and rules keep true --sea-glass, which clears the 3:1 bar
     that applies to graphics rather than text. */
  --sea-glass-text: #54736A;
  --deep-water-hair: rgba(156,188,177,.28); /* pale glass hairline on dark */
  --focus: #6F9287;
  --alert-ink: #8C3A2E;
}

/* --- reset --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-body);
  font:400 var(--fs-body)/1.62 var(--font);
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
h1,h2,h3,p,ul,ol,figure,dl,dd{ margin:0; }
ul{ list-style:none; padding:0; }

/* --- shared type --------------------------------------------------------- */
.eyebrow{
  font:400 var(--fs-eyebrow)/1 var(--font);
  letter-spacing:.30em; text-transform:uppercase;
  color:var(--sea-glass-text);
}
.rule{ height:1px; width:96px; background:var(--sea-glass); border:0; margin:0; }

/* --- focus: never removed, always visible -------------------------------- */
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

/* "body a.skip" (0,1,2) not ".skip" or "a.skip" (0,1,1) — ".portal a" ties on
   specificity and wins on source order, which recolored this to pale glass on
   the login page: 1.87:1 against its own fog background, and an unwanted
   underline from that rule's border-bottom. */
body a.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--fog); color:var(--deep-water);
  padding:14px 22px; border:0; text-decoration:none;
  font-size:var(--fs-nav); letter-spacing:.24em; text-transform:uppercase;
}
body a.skip:focus{ left:0; }

/* ==========================================================================
   NAV — rebuilt to the mock: deep water bar, 26px vertical padding,
   contour-white at 44px + "Appledore" 26px/500 in fog, no descriptor.
   ========================================================================== */
.nav{ background:var(--deep-water); }
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; padding:26px var(--gutter);
}
.nav__brand{
  display:flex; align-items:center; gap:16px;
  border:0; text-decoration:none; flex:0 0 auto;
  min-height:44px;              /* touch target — the mark alone is 44x24 */
}
.nav__mark{ width:44px; height:auto; flex:0 0 44px; }
.nav__word{
  font-size:26px; font-weight:500; line-height:1;
  color:var(--fog); letter-spacing:.005em;
}
.nav__links{
  display:flex; align-items:center;
  gap:clamp(18px,2.5vw,40px);
  margin:0;
}
.nav__links a{
  display:inline-flex; align-items:center;
  min-height:44px;
  font-size:var(--fs-nav); letter-spacing:.24em; text-transform:uppercase;
  color:var(--pale-glass); border:0; text-decoration:none;
  transition:color .18s ease;
}
.nav__links a:hover,
.nav__links a[aria-current="page"]{ color:var(--fog); }
.nav__sep{
  width:1px; height:15px; background:var(--deep-water-hair);
  flex:0 0 1px;
}

/* Two-tone contour on Deep Water. This is the treatment the brand already
   uses on every dark ground — app-icon.svg, symbol-seal.svg, favicon-32.svg:
   top two strokes Pale Glass, bottom stroke Fog. contour-fullcolor.svg is the
   LIGHT-ground equivalent and cannot be used on this bar: its bottom stroke is
   Deep Water #16323E, identical to the bar behind it. Pale Glass on Deep Water
   measures 6.57:1, well clear of the 3:1 floor for graphics.
   HANDOFF rule 6 forbids inventing per-stroke colour; this reuses a sanctioned
   pairing rather than creating one. CSS `stroke` overrides the presentation
   attribute in the markup, so the SVGs themselves are untouched. */
.nav__mark path,
.footer__mark path{ stroke:var(--pale-glass); }
.nav__mark path:last-of-type,
.footer__mark path:last-of-type{ stroke:var(--fog); }

/* --- mobile menu toggle --------------------------------------------------
   Not a hamburger: three stacked horizontal lines ARE the Appledore contour
   mark, sitting 44px away in the same bar. A word carries the affordance
   instead, which also suits an identity that is entirely letterspaced type. */
.nav__toggle{
  display:none;                      /* desktop: the full list is shown */
  align-items:center; gap:12px;
  min-height:44px; padding:0;
  background:none; border:0; cursor:pointer;
  font:400 var(--fs-nav)/1 var(--font);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--pale-glass);
  transition:color .18s ease;
}
.nav__toggle:hover{ color:var(--fog); }
.nav__chev{
  width:17px; height:auto; flex:0 0 17px;
  transition:transform .3s ease;
}
.nav__toggle[aria-expanded="true"] .nav__chev{ transform:rotate(180deg); }

/* ==========================================================================
   HERO — 1.05fr / .95fr, 72px gap, --hero-y top padding, display 1.12
   ========================================================================== */
/* HANDOFF.md specifies 1.05fr / .95fr. Widened in favour of the photograph:
   the display line is capped at 14ch and was using roughly 390px of a 559px
   column, so the text column can give up width without rewrapping, and the
   figure was leaving 222px of empty ground beside it. */
.hero{
  display:grid; grid-template-columns:.88fr 1.12fr; gap:72px;
  align-items:start;
  padding:var(--hero-y) var(--gutter) var(--section-y);
}
.hero__display{
  font-size:var(--fs-display); font-weight:400; line-height:1.12;
  color:var(--deep-water);
  letter-spacing:-.004em;
  text-wrap:balance;
  max-width:14ch;
}
.hero .rule{ margin:38px 0 34px; }
.hero__lead{
  font-size:var(--fs-lead); line-height:1.65;
  color:var(--ink-body); max-width:34ch;
}
.hero__cta{
  display:inline-flex; align-items:center; gap:18px;
  margin-top:44px; min-height:44px;
  font-size:var(--fs-eyebrow); letter-spacing:.30em; text-transform:uppercase;
  color:var(--sea-glass-text); text-decoration:none; border:0;
}
.hero__cta::after{
  content:""; width:44px; height:1px; background:var(--sea-glass);
  transition:width .22s ease;
}
.hero__cta:hover::after{ width:66px; }

.hero__figure{ margin:0; }
.hero__figure img{
  /* 4/3 rather than 16/11: taller, so the figure sits closer to the height of
     the text beside it. Kept landscape — the source is a 5170x3231 horizontal
     shot and a portrait crop would cut the breakwater's run out to sea. */
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  /* the handoff asks for a quiet, low-contrast backdrop; the supplied
     photograph is warmer than that, so it is calmed rather than recropped */
  filter:saturate(.72) contrast(.94);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{ padding:var(--section-y) var(--gutter); }
.section--sunk{ background:var(--paper-sunk); }
.section__head{ margin-bottom:52px; }
.section__head .eyebrow{ display:block; margin-bottom:20px; }
.section h2{
  font-size:var(--fs-h2); font-weight:400; line-height:1.25;
  color:var(--deep-water); max-width:22ch;
}

/* firm: prose + facts */
.firm{ display:grid; grid-template-columns:1.05fr .95fr; gap:72px; }
.firm p + p{ margin-top:1.05em; }
.facts{ border-top:1px solid var(--rule-light); }
.facts > div{
  display:flex; justify-content:space-between; gap:24px;
  padding:18px 0; border-bottom:1px solid var(--rule-light);
}
.facts dt{
  color:var(--sea-glass-text); font-size:var(--fs-eyebrow);
  letter-spacing:.30em; text-transform:uppercase; padding-top:.35em;
}
.facts dd{ color:var(--deep-water); text-align:right; }

/* services: 3 columns, 56px gap, 01/02/03 numerals */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px; }
.services h3{
  font-size:var(--fs-h2); font-weight:400; line-height:1.25;
  color:var(--deep-water); margin:18px 0 16px;
}
.services p{ max-width:34ch; }

/* leadership */
.people{ display:grid; grid-template-columns:repeat(2,1fr); gap:56px; }
.person{ border-top:1px solid var(--rule-light); padding-top:28px; }
/* Square crop, no radius and no shadow per HANDOFF rule 5. Both supplied
   portraits are casual outdoor shots against bright foliage; the same calming
   filter used on the hero photograph pulls them toward the muted palette
   instead of fighting it. width/height are set in the markup so the row
   reserves its space before the image decodes (no layout shift). */
.person__photo{
  width:140px; height:140px; object-fit:cover;
  margin-bottom:26px;
  filter:saturate(.68) contrast(.96);
}
.person h3{
  font-size:var(--fs-h2); font-weight:400; line-height:1.25;
  color:var(--deep-water); margin-bottom:6px;
}
.person .role{
  display:block; margin-bottom:20px;
  font-size:var(--fs-eyebrow); letter-spacing:.30em; text-transform:uppercase;
  color:var(--sea-glass-text);
}
.person p{ max-width:40ch; }
.person p + p{ margin-top:1.05em; }

/* ==========================================================================
   FOOTER — deep water, 52px vertical
   ========================================================================== */
.footer{ background:var(--deep-water); color:var(--pale-glass); }
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; padding:52px var(--gutter);
}
.footer__id{
  font-size:15px; letter-spacing:.28em; text-transform:uppercase;
}
.footer a{ color:var(--pale-glass); border:0; text-decoration:none; }
.footer a:hover{ color:var(--fog); }
.footer__mark{ width:44px; }

/* ==========================================================================
   FORMS — labels always visible, errors inline + summarised, no rounded cards
   ========================================================================== */
.form-wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:72px;
  padding:var(--hero-y) var(--gutter) var(--section-y); align-items:start;
}
.form-intro{ margin-bottom:52px; }
.form-intro h1{
  font-size:var(--fs-display); font-weight:400; line-height:1.12;
  color:var(--deep-water); max-width:14ch;
}
.form-intro .rule{ margin:34px 0 30px; }
.form-intro p{ font-size:var(--fs-lead); line-height:1.65; max-width:38ch; }

.field{ margin-bottom:30px; }
.field > label{
  display:block; margin-bottom:10px;
  font-size:var(--fs-eyebrow); letter-spacing:.24em; text-transform:uppercase;
  color:var(--deep-water);
}
.field .hint{ display:block; margin-top:8px; font-size:16px; color:var(--sea-glass-text); }
.req{ color:var(--sea-glass-text); }

input[type=text],input[type=email],input[type=tel],input[type=password],
select,textarea{
  width:100%; padding:14px 16px; min-height:48px;
  font:400 var(--fs-body)/1.5 var(--font);   /* one typeface, incl. fields */
  color:var(--deep-water); background:var(--paper);
  border:1px solid var(--rule-light); border-radius:0;
  transition:border-color .18s ease;
}
textarea{ min-height:170px; resize:vertical; }
select{ appearance:none; background-image:none; }
input:hover,select:hover,textarea:hover{ border-color:var(--sea-glass); }
input:focus,select:focus,textarea:focus{ border-color:var(--sea-glass); }
::placeholder{ color:#A9B4B0; opacity:1; }

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{ border-color:var(--alert-ink); }
.error{ display:none; margin-top:8px; font-size:16px; color:var(--alert-ink); }
.field[data-invalid="true"] .error{ display:block; }

/* error summary */
.summary{
  display:none; border:1px solid var(--alert-ink);
  padding:22px 26px; margin-bottom:38px;
}
.summary[data-open="true"]{ display:block; }
.summary h2{ font-size:22px; font-weight:500; color:var(--alert-ink); margin-bottom:10px; max-width:none; }
.summary a{ color:var(--alert-ink); border-bottom:1px solid var(--alert-ink); }
.summary li{ margin-top:6px; }

/* file input */
.drop{ border:1px dashed var(--rule-light); padding:24px; }
.drop input[type=file]{
  width:100%; font:400 17px/1.5 var(--font); color:var(--ink-body);
  min-height:44px;
}
.filelist{ margin-top:16px; }
.filelist li{
  display:flex; justify-content:space-between; gap:18px;
  padding:10px 0; border-bottom:1px solid var(--rule-light); font-size:17px;
}
.filelist .size{ color:var(--sea-glass-text); white-space:nowrap; }

/* buttons — never sea glass fill */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:15px 42px; border:1px solid var(--deep-water);
  background:var(--deep-water); color:var(--fog);
  font:400 var(--fs-nav)/1 var(--font);
  letter-spacing:.24em; text-transform:uppercase;
  border-radius:0; cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.btn:hover{ background:transparent; color:var(--deep-water); }
.btn[aria-busy="true"]{ opacity:.72; cursor:progress; }
.btn--light{
  background:var(--fog); border-color:var(--fog); color:var(--deep-water);
  width:100%;
}
.btn--light:hover{ background:transparent; color:var(--fog); }

/* aside rail on contact */
.rail{ border-top:1px solid var(--rule-light); padding-top:30px; }
.rail dt{
  font-size:var(--fs-eyebrow); letter-spacing:.30em;
  text-transform:uppercase; color:var(--sea-glass-text); margin-top:26px;
}
.rail dt:first-child{ margin-top:0; }
.rail dd{ margin-top:8px; color:var(--deep-water); }
.rail dd a{
  color:var(--deep-water); border-bottom:1px solid var(--sea-glass); text-decoration:none;
  display:inline-block; padding:10px 0;   /* 25px line -> 45px target */
}
.rail dd a:hover{ color:var(--sea-glass-text); }

/* ==========================================================================
   CLIENT LOGIN — deep water ground, pale glass hairlines
   ========================================================================== */
.portal{
  background:var(--deep-water); color:var(--pale-glass);
  min-height:100vh; display:flex; flex-direction:column;
}
.portal__body{
  flex:1; display:grid; place-items:center; padding:80px var(--gutter);
}
.portal__card{ width:100%; max-width:460px; }
.portal__mark{ width:52px; margin-bottom:34px; }
.portal h1{
  font-size:40px; font-weight:400; line-height:1.2;
  color:var(--fog); margin-bottom:14px;
}
.portal__sub{ color:var(--pale-glass); font-size:19px; margin-bottom:44px; max-width:38ch; }
.portal .field > label{ color:var(--pale-glass); }
.portal input{
  background:transparent; color:var(--fog);
  border:1px solid var(--deep-water-hair);
}
.portal input:hover,.portal input:focus{ border-color:var(--pale-glass); }
.portal ::placeholder{ color:rgba(156,188,177,.5); }
.portal :focus-visible{ outline-color:var(--pale-glass); }
.portal .alert{
  display:none; border:1px solid #C97D6E; padding:16px 20px; margin-bottom:32px;
  color:#EFC3B8; font-size:17px;
}
.portal .alert[data-open="true"]{ display:block; }
.portal__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; margin:26px 0 34px; font-size:17px;
}
.portal__row label{ display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.portal__row a{ display:inline-flex; align-items:center; min-height:44px; }
.portal__row input[type=checkbox]{
  width:16px; height:16px; min-height:0; padding:0; accent-color:#9CBCB1;
}
.portal a{ color:var(--pale-glass); border-bottom:1px solid var(--deep-water-hair); text-decoration:none; }
.portal a:hover{ color:var(--fog); border-color:var(--pale-glass); }
/* Links sitting inside prose need a hairline you can actually see — the
   28% rule above is tuned for field borders and disappears mid-sentence.
   Color alone can't mark a link (WCAG 1.4.1), so this carries the signal. */
.portal__sub a{ border-bottom-color:rgba(156,188,177,.55); }
.portal__sub a:hover{ border-bottom-color:var(--fog); }
.portal__foot{
  padding:34px var(--gutter); border-top:1px solid var(--deep-water-hair);
  font-size:15px; letter-spacing:.28em; text-transform:uppercase;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
}

/* thank-you */
.centered{ padding:var(--hero-y) var(--gutter) var(--section-y); max-width:60ch; }
.centered h1{
  font-size:var(--fs-display); font-weight:400; line-height:1.12;
  color:var(--deep-water); max-width:14ch;
}
.centered .rule{ margin:38px 0 34px; }
.centered p{ font-size:var(--fs-lead); line-height:1.65; }
.centered .btn{ margin-top:44px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  :root{ --gutter:40px; --hero-y:76px; --section-y:60px; }
  .hero,.firm,.form-wrap{ gap:48px; }
  .services{ gap:40px; }
}
@media (max-width:900px){
  .hero,.firm,.form-wrap{ grid-template-columns:1fr; }
  .hero__display{ max-width:18ch; }
  .hero__figure{ order:-1; }
  .services{ grid-template-columns:1fr; gap:48px; }
  .people{ grid-template-columns:1fr; gap:44px; }
  /* --- nav collapses to the Menu toggle ----------------------------------
     Defaults are the OPEN state and the button is gated behind .js, so with
     scripting off the visitor gets the plain stacked list and no dead
     control. nav.js adds data-open="false" on load to close it. */
  .nav__inner{ flex-wrap:wrap; gap:0; }
  .js .nav__toggle{ display:inline-flex; }
  .nav__sep{ display:none; }

  /* 1fr -> 0fr animates a genuinely auto height, so the panel is never
     clipped no matter how many links it holds. */
  .nav__panel{
    flex:0 0 100%;
    display:grid; grid-template-rows:1fr;
    transition:grid-template-rows .3s ease;
  }
  .nav__inner[data-open="false"] .nav__panel{ grid-template-rows:0fr; }

  /* visibility (not just overflow) keeps the closed links out of the tab
     order — overflow:hidden alone leaves them focusable and reachable. */
  .nav__links{
    flex-direction:column; align-items:stretch;
    gap:0; overflow:hidden;
    visibility:visible;
  }
  .nav__inner[data-open="false"] .nav__links{
    visibility:hidden; transition:visibility 0s linear .3s;
  }
  .nav__links li{ border-top:1px solid var(--deep-water-hair); }
  .nav__links li:first-child{ margin-top:20px; }
  .nav__links a{
    width:100%; min-height:52px;      /* comfortably past the 44px minimum */
    align-items:center;
  }
}
@media (max-width:620px){
  :root{ --gutter:22px; --hero-y:56px; --section-y:48px; }
  .nav__word{ font-size:23px; }
  .nav__mark{ width:38px; flex-basis:38px; }
  .footer__inner{ flex-direction:column; align-items:flex-start; gap:26px; }
  .facts > div{ flex-direction:column; gap:4px; }
  .facts dd{ text-align:left; }
  .portal h1{ font-size:32px; }
  .portal__row{ flex-direction:column; align-items:flex-start; gap:6px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}