/* Durighello Bookkeeping & Advisory
   The brand is the first block (Method: brand/BRAND.md): navy, teal, white and black;
   Source Sans 3 for reading, and Courier Prime, the typewriter, as the accent.
   Everything below is built from these values. */

:root {
  --navy: #13294B;
  --teal: #0F766E;
  --white: #FFFFFF;
  --black: #111111;

  /* Tints and shades of the four colors, for lines and quiet surfaces */
  --navy-rule: #D5D8DF;
  --navy-paper: #F6F6F8;
  --on-navy-soft: #C4C9D2;
  --teal-dark: #0B5F58;
  --teal-wash: #E7F1F0;

  --font-sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --font-type: 'Courier Prime', 'Courier New', Courier, monospace;
  --container: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --space-section: clamp(64px, 9vw, 112px);
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { color: var(--navy); font-weight: 700; line-height: 1.2; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--teal); text-underline-offset: 0.2em; }
a:hover { color: var(--navy); }

/* The typewriter: names, numbers and labels, never headlines or paragraphs */
.wordmark,
.section-num,
.ledger h4,
.photo-caption-name,
.person-name,
.contact-lines a,
.footer-contact,
.not-found-code { font-family: var(--font-type); }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.site-header :focus-visible,
.hero :focus-visible,
.section-navy :focus-visible,
.not-found :focus-visible,
.site-footer :focus-visible { outline-color: var(--white); }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: 12px;
  left: -10000px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
}
.skip-link:focus { left: var(--gutter); }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-teal { background: var(--teal); border-color: var(--teal); color: var(--white); }
.btn-teal:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--white); }
.btn-outline-light { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--navy); }
.btn-white { background: var(--white); border-color: var(--white); color: var(--teal); }
.btn-white:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn-outline-navy { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

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

/* Header: stays at the top of the window while the page scrolls */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--navy);
  color: var(--white);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 10px;
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  color: var(--white);
  text-decoration: none;
}
.wordmark:hover { color: var(--white); }
/* Both lines are the same monospace, so their widths follow from character counts:
   "Durighello" is 10 characters at 0.6em each; the subline is 22 characters at 0.6em plus
   0.22em of letter-spacing. Sizing the name at 2.97 × the subline makes the two lines the
   same width. */
.wordmark { --wordmark-sub: 0.6875rem; }
.wordmark-name { font-size: calc(var(--wordmark-sub) * 2.97); font-weight: 700; line-height: 1; }
.wordmark-sub {
  font-size: var(--wordmark-sub);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-nav { display: none; gap: 32px; }
.site-nav a { color: var(--white); font-size: 1rem; font-weight: 600; text-decoration: none; }
.site-nav a:hover { color: var(--white); text-decoration: underline; }

/* The small call-to-action in the header: a teal button with the number; icon only on phones */
.header-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 42px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.header-phone:hover { background: var(--teal-dark); color: var(--white); }
.header-phone svg { width: 18px; height: 18px; }
.header-phone span { display: none; }

@media (min-width: 560px) {
  .header-phone { padding: 8px 16px; }
  .header-phone span { display: inline; }
}

@media (min-width: 980px) {
  .site-nav { display: flex; }
}

/* Hero: the free assessment first; the photo on a narrow teal band, running off the
   bottom edge like the card's front */

.hero { overflow: hidden; background: var(--navy); color: var(--white); }

.hero-inner {
  --hero-bleed: clamp(36px, 4vw, 56px); /* how far the photo runs past the hero's foot */
  display: grid;
  gap: 40px;
  padding-top: clamp(32px, 5vw, 64px);
}

.hero-eyebrow {
  max-width: 34rem;
  margin-bottom: 16px;
  color: var(--on-navy-soft);
  font-size: 1.0625rem;
  line-height: 1.4;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2.5rem, 1.25rem + 4.4vw, 4.125rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The headline's second line points at the buttons below it */
.hero-point {
  display: block;
  margin-top: 14px;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}

.hero-sub {
  max-width: 34rem;
  margin-top: 22px;
  color: var(--on-navy-soft);
  font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);
  line-height: 1.5;
}

.hero .actions { margin-top: 34px; }

.hero-photo {
  position: relative;
  justify-self: center;
  align-self: end;
  width: min(100%, 360px);
  margin-bottom: calc(-1 * var(--hero-bleed));
}

.photo-band {
  position: absolute;
  top: 7%;
  right: 27%;
  bottom: 0;
  left: 27%;
  background: var(--teal);
}

.hero-photo picture { position: relative; display: block; }

.photo-caption {
  position: absolute;
  bottom: calc(24px + var(--hero-bleed));
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  background: var(--white);
  color: var(--black);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.photo-caption-name { color: var(--navy); font-size: 1.0625rem; font-weight: 700; }

@media (min-width: 900px) {
  /* The copy sets the hero's height; the photo fills that height (cropped at the top or sides as
     needed) and runs off the foot, so there is no empty band above it. The buttons' bottom edge
     and the name label's bottom edge sit the same distance above the foot, so they line up. */
  .hero-inner {
    --hero-foot: 28px;
    --hero-bleed: 24px;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    gap: 56px;
    padding-top: 40px;
  }
  .hero-copy { align-self: end; padding-bottom: var(--hero-foot); }
  .hero-photo { align-self: stretch; justify-self: stretch; width: 100%; max-width: none; }
  .hero-photo picture { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
  .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
  .photo-caption { bottom: calc(var(--hero-foot) + var(--hero-bleed)); left: -24px; }
}

/* Sections: a heading column and a content column, ruled like a ledger */

.section { padding-block: var(--space-section); }

/* Sections alternate: gray, white, navy, white, gray. A rule only separates two white ones. */
.section + .section { border-top: 1px solid var(--navy-rule); }
.section + .section-navy,
.section-navy + .section,
.section + .section-paper,
.section-paper + .section { border-top: 0; }

.section-grid { display: grid; gap: 28px 56px; }

@media (min-width: 900px) {
  .section-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr); }
  .section-head { position: sticky; top: 100px; align-self: start; } /* clears the sticky header */
}

.section-num {
  margin-bottom: 12px;
  color: var(--teal);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.section-head h2 {
  font-size: clamp(2rem, 1.35rem + 1.8vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede {
  max-width: 40rem;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.5;
}

.note {
  max-width: 40rem;
  margin-top: 28px;
  padding-left: 18px;
  border-left: 4px solid var(--teal);
}

/* Services: two groups (Bookkeeping, Advisory), each a ledger of name and description */

.service-group + .service-group { margin-top: 48px; }
.group-title { font-size: 1.5rem; }
.group-intro { margin: 4px 0 14px; color: var(--black); }
.group-text { max-width: 40rem; padding-top: 18px; border-top: 2px solid var(--navy); }

.ledger { padding: 0; border-top: 2px solid var(--navy); list-style: none; }
.ledger li {
  display: grid;
  gap: 6px 32px;
  padding-block: 22px;
  border-bottom: 1px solid var(--navy-rule);
}
.ledger h4 { margin: 0; color: var(--navy); font-size: 1.125rem; font-weight: 700; line-height: 1.2; }

@media (min-width: 720px) {
  .ledger li { grid-template-columns: 13.5rem minmax(0, 1fr); align-items: baseline; }
}

.section-navy { background: var(--navy); color: var(--white); }
.section-navy h2,
.section-navy h3 { color: var(--white); }
.section-navy .section-num { color: var(--on-navy-soft); }

.promises { display: grid; gap: 40px 48px; }
.promise { padding-top: 22px; border-top: 3px solid var(--teal); }
.promise h3 { margin-bottom: 10px; font-size: 1.375rem; text-wrap: balance; }
.promise p { color: var(--on-navy-soft); }

@media (min-width: 720px) {
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Questions: each one collapsed until it is clicked (a native details element, no script) */

.faq { max-width: 46rem; border-top: 2px solid var(--navy); }
.faq-item { border-bottom: 1px solid var(--navy-rule); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--teal);
  font-family: var(--font-type);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover h3 { color: var(--teal); }
.faq-item h3 { font-size: 1.25rem; text-wrap: balance; }
.faq-item p { max-width: 40rem; padding: 0 44px 22px 0; }

/* About, with the ask panel beside it */

.section-paper { background: var(--navy-paper); }

.about-grid { display: grid; gap: 48px; align-items: start; }

@media (min-width: 1100px) {
  .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.name-block { padding-left: 20px; border-left: 10px solid var(--navy); }
.person-name { color: var(--navy); font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.person-title { margin-top: 6px; }

.about-text { max-width: 36rem; margin-top: 28px; }
.about-text + .about-text { margin-top: 16px; }

.contact-lines { display: grid; gap: 4px; margin-top: 24px; padding: 0; list-style: none; }
.contact-lines a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--black);
  text-decoration: none;
}
.contact-lines a:hover { color: var(--teal); text-decoration: underline; }
.contact-lines svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--teal); }

.ask-panel {
  max-width: 560px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--navy-rule);
  border-top: 4px solid var(--navy);
  background: var(--white);
}
.ask-panel h3 { margin-bottom: 10px; font-size: 1.375rem; text-wrap: balance; }
.ask-panel p { margin-bottom: 22px; }
.ask-panel .actions { flex-direction: column; align-items: stretch; }

/* Footer */

.site-footer { padding-block: 56px 32px; background: var(--navy); color: var(--white); }

.footer-inner { display: grid; gap: 28px; }

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  padding: 0;
  list-style: none;
}
.footer-contact a { color: var(--white); }
.footer-contact a:hover { color: var(--on-navy-soft); }

@media (min-width: 820px) {
  .footer-inner { grid-template-columns: auto minmax(0, 1fr); align-items: end; }
  .footer-contact { justify-content: flex-end; }
}

.footer-legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--on-navy-soft);
  font-size: 0.9375rem;
}

/* Page not found */

.not-found { background: var(--navy); color: var(--white); }
.not-found-inner { padding-block: clamp(64px, 12vw, 140px); }
.not-found-code { color: var(--white); font-size: clamp(5rem, 3rem + 10vw, 9rem); font-weight: 700; line-height: 1; }
.not-found h1 { margin-top: 20px; color: var(--white); font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); }
.not-found-text { max-width: 34rem; margin-top: 14px; color: var(--on-navy-soft); font-size: 1.25rem; line-height: 1.5; }
.not-found .actions { margin-top: 32px; }

/* Words still to come from Mike, shown so they can't be missed */

.placeholder {
  padding: 0 4px;
  border: 1px dashed var(--teal);
  background: var(--teal-wash);
  color: var(--teal);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.site-footer .placeholder { border-color: var(--white); background: transparent; color: var(--white); }