/* ============================================================
   Day & Day LLP - one stylesheet for the whole site.
   Every page uses this file. Change something here and it
   changes on all pages, on phones, tablets and computers.
   Nothing is locked to a pixel width, so the layout fits
   whatever screen it lands on.
   ============================================================ */

:root {
   --gold: #B1976B;
   --gold-deep: #8E7648;
   --gold-text: #8A7340;
   --ink: #1A1A1A;
   --ink-soft: #55504A;
   --page: #FFFFFF;
   --rule: #E6E2DC;
   --tint: #FAF7F1;
   --band: #FBF9F6;

   /* The reader's own system font: San Francisco on a Mac,
      Segoe UI on Windows. Modern on both, and nothing to download. */
   --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
   --font-head: var(--font-body);

   /* The page fills the whole browser window. Only the gutter down
      each side keeps things off the very edge of the glass. */
   --page-max: 100%;
   --gutter: clamp(16px, 3vw, 48px);
   /* Blocks of text stop at a length the eye can follow. The rest of
      the page goes edge to edge; only paragraphs are held back. */
   --read-max: 82ch;
}

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

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

/* The page is a top-to-bottom stack so the footer can be pinned
   to the bottom even when a page is short. */
body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   margin: 0;
   padding: 0;
   background-color: var(--page);
   color: var(--ink);
   font-family: var(--font-body);
   font-size: clamp(15px, 0.9rem + 0.25vw, 17px);
   line-height: 1.6;
   /* Nothing is ever allowed to push the page sideways */
   overflow-x: hidden;
}

/* The middle of the page grows to fill whatever is left over,
   which pushes the footer down to the bottom of the screen. */
main { flex: 1 0 auto; }

img {
   max-width: 100%;
   height: auto;
   display: block;
}

.wrap {
   width: 100%;
   max-width: var(--page-max);
   margin-inline: auto;
   padding-inline: var(--gutter);
}

/* ---------- Header band: logo and menu share one line ---------- */

.site-header {
   background-color: var(--band);
   border-bottom: 1px solid var(--rule);
}

.header-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 8px clamp(16px, 3vw, 40px);
   padding-block: clamp(10px, 1.6vw, 18px);
}

.logo-link {
   display: block;
   flex: 0 1 auto;
   width: min(100%, 330px);
}

.logo-link img { width: 100%; height: auto; }

/* Home, About, Contact, sitting on the same line as the logo */
.nav-main {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex: 1 1 auto;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: clamp(4px, 1.5vw, 26px);
}

.nav-main a {
   display: block;
   position: relative;
   padding: 10px clamp(8px, 1vw, 12px);
   text-decoration: none;
   color: var(--ink);
   font-size: clamp(14px, 0.85rem + 0.2vw, 16px);
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   line-height: 1.2;
   transition: color 0.2s ease;
}

/* ---------- Second row: the six things the firm handles ---------- */

.nav-areas-bar { border-bottom: 1px solid var(--rule); }

.nav-areas {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0 clamp(2px, 1.2vw, 22px);
}

.nav-areas a {
   display: block;
   position: relative;
   padding: clamp(10px, 1.2vw, 14px) clamp(6px, 0.8vw, 10px);
   text-decoration: none;
   color: var(--ink-soft);
   font-size: clamp(12px, 0.7rem + 0.22vw, 14.5px);
   line-height: 1.3;
   transition: color 0.2s ease;
}

/* The gold line under a menu item. It is always there, just invisible,
   so it can grow in smoothly rather than jumping. */
.nav-main a::after,
.nav-areas a::after {
   content: "";
   position: absolute;
   left: 50%;
   right: 50%;
   bottom: 4px;
   height: 2px;
   background-color: var(--gold);
   opacity: 0;
   transition: left 0.22s ease, right 0.22s ease, opacity 0.22s ease;
}

.nav-main a:hover, .nav-main a:focus-visible,
.nav-areas a:hover, .nav-areas a:focus-visible { color: var(--gold-deep); }

.nav-main a:hover::after, .nav-main a:focus-visible::after,
.nav-main a[aria-current="page"]::after,
.nav-areas a:hover::after, .nav-areas a:focus-visible::after,
.nav-areas a[aria-current="page"]::after {
   left: 10%;
   right: 10%;
   opacity: 1;
}

.nav-main a[aria-current="page"],
.nav-areas a[aria-current="page"] { color: var(--gold-deep); }

/* ---------- Page heading ---------- */

.page-title {
   font-family: var(--font-head);
   font-weight: 700;
   /* Shrinks on a phone, grows on a wide screen, never runs off */
   font-size: clamp(1.8rem, 1.1rem + 3.2vw, 3rem);
   letter-spacing: -0.015em;
   line-height: 1.15;
   margin: clamp(18px, 3vw, 40px) 0 clamp(14px, 2.5vw, 26px);
   /* Long words break instead of hanging off the edge */
   overflow-wrap: break-word;
}

.section-title {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: clamp(1.4rem, 1rem + 1.7vw, 2.1rem);
   letter-spacing: -0.01em;
   line-height: 1.2;
   margin: clamp(26px, 4vw, 52px) 0 clamp(12px, 2vw, 22px);
   overflow-wrap: break-word;
}

/* ---------- Home page ---------- */

.hero-title {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: clamp(1.8rem, 1.1rem + 3.2vw, 3rem);
   letter-spacing: -0.015em;
   line-height: 1.15;
   /* Sits close to the photo underneath it */
   margin: clamp(16px, 2.4vw, 30px) 0 clamp(8px, 1vw, 14px);
   overflow-wrap: break-word;
}

.hero-image {
   width: 100%;
   height: auto;
   border-radius: 4px;
   margin-bottom: clamp(20px, 3vw, 36px);
}

.card-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: clamp(12px, 1.8vw, 20px);
   margin-bottom: clamp(16px, 3vw, 32px);
   padding: 0;
   list-style: none;
}

/* Flat tiles: a soft warm panel, no frame around all four sides */
.card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: clamp(10px, 1.4vw, 15px);
   padding: clamp(26px, 3.2vw, 40px) clamp(18px, 2.2vw, 28px);
   border: 0;
   border-radius: 6px;
   text-align: center;
   text-decoration: none;
   color: var(--ink);
   background-color: var(--tint);
   transition: background-color 0.25s ease, box-shadow 0.25s ease,
               transform 0.25s ease;
}

.card:hover,
.card:focus-visible {
   background-color: #F5F0E6;
   box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09);
   transform: translateY(-3px);
}

.card img { width: 32px; height: auto; flex: none; }

.card .card-title {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: clamp(1.05rem, 0.85rem + 0.8vw, 1.35rem);
   letter-spacing: 0.02em;
   line-height: 1.25;
   overflow-wrap: break-word;
}

.card .card-note {
   font-size: clamp(13px, 0.72rem + 0.3vw, 15px);
   line-height: 1.5;
   color: var(--ink-soft);
   max-width: 34ch;
   margin: 0;
}

/* ---------- What happens, step by step ---------- */

.steps-intro {
   max-width: var(--read-max);
   margin: 0 0 clamp(18px, 2.5vw, 28px);
   color: var(--ink-soft);
}

.steps {
   list-style: none;
   counter-reset: step;
   margin: 0 0 clamp(24px, 4vw, 48px);
   padding: 0;
   display: grid;
   grid-template-columns: 1fr;
   gap: clamp(14px, 2vw, 24px);
}

.steps li {
   counter-increment: step;
   position: relative;
   padding-left: clamp(48px, 5vw, 64px);
}

.steps li::before {
   content: counter(step);
   position: absolute;
   left: 0;
   top: 0;
   width: clamp(34px, 3.4vw, 42px);
   height: clamp(34px, 3.4vw, 42px);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background-color: var(--gold);
   color: #FFFFFF;
   font-weight: 700;
   font-size: clamp(15px, 0.85rem + 0.3vw, 18px);
   line-height: 1;
}

.steps h3 {
   margin: 0 0 4px;
   font-size: clamp(1rem, 0.88rem + 0.4vw, 1.2rem);
   font-weight: 700;
   line-height: 1.3;
}

.steps p {
   margin: 0;
   max-width: 62ch;
   color: var(--ink-soft);
   overflow-wrap: break-word;
}

/* ---------- About page ---------- */

.people {
   display: grid;
   grid-template-columns: 1fr;
   gap: clamp(16px, 3vw, 32px);
   margin-bottom: clamp(16px, 3vw, 28px);
}

.person-name {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
   letter-spacing: -0.01em;
   line-height: 1.2;
   text-align: center;
   margin: 0;
   overflow-wrap: break-word;
}

.person-credentials {
   font-size: clamp(0.95rem, 0.82rem + 0.4vw, 1.15rem);
   font-weight: 600;
   color: var(--gold-deep);
   letter-spacing: 0.04em;
   text-align: center;
   margin: 4px 0 0;
}

.motto {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: clamp(1.4rem, 1rem + 1.9vw, 2.3rem);
   letter-spacing: -0.01em;
   line-height: 1.2;
   text-align: center;
   margin: clamp(18px, 3.4vw, 40px) 0;
   overflow-wrap: break-word;
}

.bio { margin-bottom: clamp(16px, 3vw, 28px); }

.bio p, .prose p {
   margin: 0 0 1em;
   /* Lines stop at a comfortable reading length on wide screens */
   max-width: var(--read-max);
   overflow-wrap: break-word;
}

.bio p:last-child, .prose p:last-child { margin-bottom: 0; }

/* ---------- Contact page ---------- */

.contact-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: clamp(22px, 4vw, 44px);
   margin-block: clamp(24px, 4vw, 48px);
   text-align: center;
}

.contact-label {
   font-family: var(--font-head);
   font-weight: 600;
   font-size: clamp(0.9rem, 0.78rem + 0.3vw, 1.05rem);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   line-height: 1.2;
   margin: 0;
   color: var(--ink-soft);
}

.contact-value {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: clamp(1.35rem, 1rem + 1.7vw, 2.1rem);
   letter-spacing: -0.01em;
   line-height: 1.25;
   margin: 8px 0 0;
   color: var(--gold-deep);
   /* A long email address breaks instead of running off a phone */
   overflow-wrap: anywhere;
}

a.contact-value {
   text-decoration: none;
   display: block;
}

a.contact-value:hover,
a.contact-value:focus-visible { text-decoration: underline; }

/* ---------- Questions and answers ---------- */

.faq {
   margin-bottom: clamp(20px, 4vw, 40px);
   border-top: 1px solid var(--rule);
}

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   cursor: pointer;
   list-style: none;
   padding: clamp(15px, 2vw, 21px) 4px;
   font-family: var(--font-head);
   font-size: clamp(0.98rem, 0.88rem + 0.45vw, 1.2rem);
   font-weight: 600;
   line-height: 1.4;
   color: var(--ink);
   transition: color 0.2s ease;
   overflow-wrap: break-word;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover,
.faq summary:focus-visible { color: var(--gold-deep); }

.faq details[open] > summary { color: var(--gold-deep); }

.faq .arrow {
   flex: none;
   width: 0.75em;
   height: 0.75em;
   margin-top: 0.35em;
   fill: var(--gold);
   transition: transform 0.2s ease;
}

.faq details[open] > summary .arrow { transform: rotate(90deg); }

.faq .answer {
   padding: 0 4px clamp(18px, 2.5vw, 26px) clamp(24px, 3vw, 34px);
}

.faq .answer p {
   margin: 0 0 0.9em;
   color: var(--ink-soft);
   /* Lines stop at a comfortable reading length on wide screens */
   max-width: var(--read-max);
   overflow-wrap: break-word;
}

.faq .answer p:last-child { margin-bottom: 0; }

.faq .answer a { color: var(--gold-deep); }

/* ---------- Footer ---------- */

.site-footer {
   flex: none;
   background-color: var(--band);
   border-top: 1px solid var(--rule);
   padding-block: clamp(18px, 2.8vw, 28px);
   margin-top: clamp(24px, 4vw, 48px);
}

.site-footer p {
   margin: 0;
   text-align: center;
   font-size: clamp(12px, 0.66rem + 0.3vw, 14px);
   line-height: 1.6;
   letter-spacing: 0.02em;
   color: var(--ink-soft);
   overflow-wrap: break-word;
}

/* ============================================================
   Wider screens. Everything above is the phone layout, and
   these only add columns as there is room for them.
   ============================================================ */

/* Big phones and small tablets: two across */
@media (min-width: 600px) {
   .card-grid    { grid-template-columns: repeat(2, 1fr); }
   .people       { grid-template-columns: repeat(2, 1fr); }
   .contact-grid { grid-template-columns: repeat(3, 1fr); }
   .steps        { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets landscape and computers: three across */
@media (min-width: 900px) {
   .card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
   .steps { grid-template-columns: repeat(4, 1fr); }
}

/* Narrow phones: the menu sits under the logo and spreads out */
@media (max-width: 599px) {
   .logo-link { width: 100%; max-width: 330px; margin-inline: auto; }
   .nav-main  { justify-content: center; width: 100%; }
}

/* People who prefer less motion get none */
@media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; }
}

/* Printing */
@media print {
   .site-nav, .nav-areas-bar { display: none; }
   .faq details { break-inside: avoid; }
   .faq .answer { display: block !important; }
}