/* Encounter Solutions — foundations.
   Tokens, reset, base type, buttons, contact drawer, floating button.
   Section layout is in page.css. */

:root {
  /* ---- Ground ---- */
  --ink: #191919;
  --ink-deep: #101010;
  --bone: #efeae0;
  --bone-warm: #f3eee5;
  --panel: #f5f1e8;

  /* ---- Accent ---- */
  --tan: #a68f6d;
  --tan-deep: #8e7855;

  /* ---- Text on bone ---- */
  --text: #262523;
  --text-strong: #141413;
  /* Both clear WCAG AA against --bone and --panel. Do not lighten: --faint carries
     the company registration line. */
  --muted: #67625a;
  --faint: #6c675c;

  /* ---- Text on ink ---- */
  --on-ink: #f2ede3;
  --on-ink-body: rgba(242, 237, 227, 0.86);
  --on-ink-muted: rgba(242, 237, 227, 0.52);
  --on-ink-rule: rgba(242, 237, 227, 0.16);

  /* ---- Lines and washes ---- */
  --rule: rgba(38, 37, 35, 0.15);
  --rule-strong: rgba(38, 37, 35, 0.32);
  --wash: rgba(38, 37, 35, 0.05);
  --backdrop: rgba(16, 16, 16, 0.46);

  /* ---- Type ----
     Halyard Display only. The three role tokens stay separate so the markup needn't
     change if the optical sizes are reinstated (--font-sans -> halyard-text,
     --font-micro -> halyard-micro).

     Display is cut for 24px and up, so at running-copy sizes it needs the tracking
     on `body` below and --on-ink-body held high. */
  --font-display: 'halyard-display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans:    'halyard-display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-micro:   'halyard-display', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Halyard's scale is non-standard: 300 is Book, 400 Regular, Light is 200. Pinned
     to shipped faces so no weight is synthesised. */
  --w-light: 300;      /* Book      — display headings */
  --w-regular: 400;    /* Regular   — body */
  --w-medium: 500;     /* Medium    — labels, buttons */
  --w-bold: 700;       /* Bold */

  /* Display steps are fluid; body is fixed. */
  /* Statement lede, not a display poster — the sentence runs to 22 words. */
  --t-display: clamp(1.7rem, 1.05rem + 2.3vw, 2.7rem);
  /* Shared by the pull quote and the close. */
  --t-statement: clamp(1.9rem, 1.1rem + 3vw, 3.3rem);
  --t-h3:      1.25rem;
  --t-lede:    1.125rem;
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-label:   0.72rem;

  --track-label: 0.2em;
  --track-display: -0.02em;

  /* ---- Space ---- */
  --page: 1400px;
  --gutter: clamp(1.375rem, 5vw, 4.5rem);
  --section-y: clamp(4.5rem, 10vh, 9rem);

  --radius-panel: 6px;
  --radius-card: 4px;
  --radius-pill: 999px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }

/* overflow-x here, not on body: Chrome counts .band-ink's box-shadow (see the
   overlap rules in page.css) as scrollable overflow once the hero is sticky and the
   shadow is in the viewport, which opens up ~40px of horizontal scroll and a sliver
   of the pinned hero at the right edge. Clipping on html avoids the more commonly-
   cited body-overflow trap, where overflow-x: hidden forces overflow-y: auto and can
   detach position: sticky from the visual viewport. */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bone);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: 1.62;
  /* Compensates for Display's tight fitting at running-copy sizes. Display elements
     all declare their own letter-spacing, so this reaches body text only. */
  letter-spacing: 0.006em;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Shared type ---------- */

/* A hairline that draws itself in on scroll (see animations.js). */
.rule {
  height: 1px;
  background: var(--tan);
  border: 0;
  transform-origin: left center;
}

/* ---------- Buttons ---------- */

/* A <button>, so the font must be set explicitly — buttons don't inherit it. */
.button {
  font-family: var(--font-micro);
  appearance: none;
  border: none;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 1.1em;
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 1.25rem 1.75rem;
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--bone);
  transition: background-color 200ms ease, color 200ms ease;
}

.button:hover { background: var(--tan-deep); color: #fff; }


/* Quiet variant for the masthead. */
/* No frame at all — the masthead sits over a photograph and a rule under the label
   competed with the hairline beneath the whole masthead. Colour alone carries hover. */
.button-ghost {
  background: transparent;
  color: var(--text);
  padding: 0.6rem 0;
  border-radius: 0;
}

.button-ghost:hover {
  background: transparent;
  color: var(--tan-deep);
}

.on-ink .button { background: var(--bone); color: var(--ink); }
.on-ink .button:hover { background: var(--tan); color: var(--ink); }

/* Declared after the solid on-ink rule so the ghost stays transparent on dark grounds. */
.on-ink .button-ghost {
  background: transparent;
  color: var(--on-ink);
}

.on-ink .button-ghost:hover {
  background: transparent;
  color: var(--tan);
}

/* ---------- CTA block ----------
   300x56 bar. Label bottom-left, arrow top-right; hover scales the arrow from its
   own corner. Both inset 1rem — the arrow's viewBox is cropped to its artwork,
   because an uncropped 24-unit box carries ~25% empty margin and makes equal
   padding look unequal.

   .btn--dark for bone grounds, .btn--light for ink or photograph. Under 620px the
   bar fills its container and the label wraps. */
.btn {
  appearance: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: min(300px, 100%);
  min-height: 3.5rem;
  padding: 0.625rem 1rem;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
  font-weight: var(--w-light);
  line-height: 1.2;
}

@media (max-width: 620px) {
  .btn { width: 100%; }
}

.btn--dark { background: var(--ink); color: var(--bone); }
.btn--light { background: var(--bone); color: var(--ink); }

.btn-label {
  display: block;
  padding-right: 3rem;
}

.btn-arrow {
  position: absolute;
  top: 0.625rem;
  right: 1rem;
  width: 15px;
  height: 15px;
  transform-origin: top right;
  transition: transform 340ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

.btn:hover .btn-arrow,
.btn:focus-visible .btn-arrow {
  transform: scale(1.3);
}

/* ---------- Contact drawer ----------
   Stays mounted so it animates out as well as in. `visibility` is what removes it
   from the tab order; the delay lets the close transition finish first. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.55s;
}

.drawer[data-open] {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.drawer[data-open] .drawer-backdrop { opacity: 1; }

.drawer-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(430px, calc(100vw - 24px));
  background: var(--panel);
  border-radius: var(--radius-panel);
  box-shadow: -18px 0 60px rgba(16, 16, 16, 0.26);
  transform: translateX(calc(100% + 46px));
  transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 1.9rem;
  padding: clamp(1.75rem, 4.5vh, 2.6rem) clamp(1.5rem, 3vw, 2.25rem);
  overflow: auto;
}

.drawer[data-open] .drawer-panel { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.drawer-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--w-regular);
  line-height: 1.2;
  letter-spacing: var(--track-display);
  color: var(--text-strong);
  max-width: 9em;
}

.drawer-close {
  appearance: none;
  margin: 0;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.drawer-close:hover { background: var(--wash); border-color: var(--tan); }

.contact-cards {
  display: flex;
  flex-direction: column;
}

/* Ledger rows, not cards: a hairline per row, no boxes, no icon chips. The arrow
   is the only ornament and it earns its place by moving on hover. */
.contact-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  /* 1rem inline so the hover wash clears the text and the arrow. Content is inset
     from the panel edge while the rules still span it. */
  padding: 1.2rem 1rem;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.contact-card:last-child { border-bottom: 1px solid var(--rule); }
.contact-card:hover { background: var(--wash); }

.contact-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.contact-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: var(--w-light);
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.contact-sub {
  font-size: var(--t-small);
  line-height: 1.35;
  color: var(--muted);
}

/* A long address must not widen the card past the panel — it wraps rather than
   truncating to "natacha@encountersolut…". */
.contact-sub-email { overflow-wrap: anywhere; }

/* Same arrow and size as the CTA bars. Tan rather than currentColor: it is the
   row's only affordance marker. */
/* Top right, not centred. The margin-top seats it against the name's cap height —
   flex-start aligns to the line box, which begins above the caps. */
.contact-arrow {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 0.2rem;
  width: 12px;
  height: 12px;
  color: var(--tan);
  transition: transform 260ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

/* Moves along its own diagonal. Not the CTA bar's scale-from-corner: that origin
   only reads on an arrow pinned in a corner, not one centred in a row. */
.contact-card:hover .contact-arrow { transform: translate(0.25em, -0.25em); }

/* margin-top:auto pins this to the panel foot; it collapses if the panel overflows. */
.drawer-note {
  margin-top: auto;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- Floating contact button ----------
   56px to match the CTA bar's height. The label is an icon, so the button's
   accessible name comes entirely from aria-label in the markup. */
.fab {
  position: fixed;
  bottom: clamp(1rem, 3vw, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
  z-index: 45;             /* below the drawer (z-index 60), so it hides behind it */
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(16, 16, 16, 0.24);
  transition: background-color 160ms ease, transform 200ms ease, box-shadow 160ms ease,
    opacity 200ms ease, visibility 0s;
}

/* JS toggles this past 200px. Inert while [data-fab-always-visible] is set. */
.fab.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.92);
  pointer-events: none;
  transition: background-color 160ms ease, transform 200ms ease, box-shadow 160ms ease,
    opacity 200ms ease, visibility 0s linear 200ms;
}

.fab:hover {
  background: var(--tan-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(16, 16, 16, 0.3);
}

/* Filled with the button colour so it occludes the bubble behind it, and declared
   here so it tracks hover. The fill transition must match .fab's background-color
   duration — otherwise fill snaps at 0s while the background eases, and the
   occlusion visibly comes apart on every hover. */
.fab-bubble-front {
  fill: var(--ink);
  transition: fill 160ms ease;
}

.fab:hover .fab-bubble-front { fill: var(--tan-deep); }

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