@layer reset, base, components, utilities;
@import url("./vendor/kiso.css") layer(reset);
@import url("./typography.css");

@layer base {
  :root {
    --paper: #fbfaf8;
    --ink: #352e2b;
    --muted: #746963;
    --red: #ab372c;
    --line: #ded6ce;
    --sand: #f3eee8;
    --white: #fff;
    --font: "fot-udmarugo-large-pr6n", sans-serif;
    --page-gutter: clamp(24px, 4.8vw, 72px);
    --content-max: 1320px;
    --site-header-size: 104px;
    --section-space: clamp(64px, 8vw, 120px);
    --ease: cubic-bezier(.2, .8, .2, 1);
    /* Shared colour hooks for the unchanged interaction layer. */
    --action: var(--red);
    --accent: var(--red);
    --bg: var(--paper);
    --line-strong: var(--line);
  }
  html { scroll-behavior: smooth; scroll-padding-top: 32px; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 2;
    font-synthesis: none;
    -webkit-text-size-adjust: 100%;
  }
  a { color: inherit; text-decoration: none; }
  button, input, textarea, select { font: inherit; }
  a, button { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  h1, h2, h3, p, ul, dl, dd { margin: 0; }
  ul { padding: 0; list-style-type: ""; }
  h1, h2, h3 { font-weight: 700; }
  ::selection { background: #eac1a4; }
  :where(a, button):focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
}

@layer components {
  .wrap { width: min(var(--content-max), calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
  .skip-link { position: fixed; top: -100px; left: 24px; padding: 12px 20px; background: var(--white); z-index: 100; }
  .skip-link:focus { top: 12px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .eyebrow { font-family: Arial, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: .16em; line-height: 1.6; }
  .section-label { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
  .section-label::before { content: ""; width: 24px; height: 1px; background: var(--red); }
  .section-label .eyebrow { color: var(--red); }
  .section-title { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.65; letter-spacing: .02em; }
  .body-copy { color: var(--muted); line-height: 2.1; }
  .text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 48px; padding: 10px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
  .arrow { display: inline-block; font-family: Arial, sans-serif; font-size: 24px; line-height: 1; transition: transform 150ms var(--ease); }
  .round-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; font-family: Arial, sans-serif; font-size: 22px; flex-shrink: 0; transition: color 150ms var(--ease), background-color 150ms var(--ease), transform 150ms var(--ease); }
  .address { font-style: normal; }
  .contact-link { display: inline-block; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line); }

  .site-header { position: relative; z-index: 20; height: var(--site-header-size); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 20px; line-height: 1.5; white-space: nowrap; }
  .site-nav { display: flex; align-items: center; gap: 32px; font-size: 15px; white-space: nowrap; }
  .site-nav > a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 10px 0; }
  .site-nav > a:not(.nav-contact)::after { content: ""; position: absolute; inset-inline: 0; bottom: 4px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform 150ms var(--ease); }
  .site-nav > a[aria-current="page"]::after, .site-nav > a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
  .nav-contact, .pill-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; background: var(--red); color: var(--white); border: 1px solid transparent; border-radius: 100px; font-size: 16px; }
  .site-nav .nav-contact { padding: 12px 24px; }
  .pill-link { min-width: 248px; min-height: 64px; padding: 18px 28px; }
  .menu-toggle { display: none; }

  .section-surface { background: var(--white); }
  .section-contact { background: var(--sand); }
  .about-grid, .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 104px); padding-block: var(--section-space); }
  .about-copy { padding-top: 48px; color: var(--muted); line-height: 2.2; }
  .about-copy p + p { margin-top: 24px; }
  /* The type moment stays legible even before its accent reaches full ink. */
  [data-moment="word-highlight"] { --bg: var(--muted); }
  .intro-copy .body-copy { margin-top: 24px; }
  .intro-grid { align-items: center; }
  .intro-copy > .text-link { margin-top: 32px; }
  .company-illustration { width: min(100%, 480px); height: auto; justify-self: end; }

  .business-home { padding-block: var(--section-space); }
  .business-heading { margin-bottom: 48px; }
  .business-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
  .business-row { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 32px 28px; transition: background-color 150ms var(--ease); }
  .business-row + .business-row { border-left: 1px solid var(--line); }
  .business-row:first-child { padding-left: 0; }
  .business-row:last-child { padding-right: 0; }
  .business-row-top { display: flex; align-items: baseline; gap: 14px; }
  .business-index { color: var(--red); font-family: Georgia, serif; font-size: 16px; line-height: 1; }
  .business-row .eyebrow { font-size: 11px; letter-spacing: .08em; color: var(--muted); }
  .field-illustration { display: block; object-fit: contain; mix-blend-mode: multiply; }
  .business-row > .field-illustration { width: 100%; max-width: 280px; aspect-ratio: 4 / 3; margin: 40px auto 32px; }
  .business-row-copy { flex: 1; }
  .business-row h3 { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.6; letter-spacing: -.025em; }
  .business-short { margin-top: 16px; color: var(--muted); line-height: 2; }
  .business-row > .round-arrow { margin-top: 32px; }

  @media (min-width: 768px) {
    .business-row > .field-illustration {
      height: clamp(160px, 18vw, 224px);
      aspect-ratio: auto;
    }
    @supports (grid-template-rows: subgrid) {
      .business-row { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-items: start; }
      .business-row-copy { display: contents; }
    }
    @supports not (grid-template-rows: subgrid) {
      .business-row h3 { min-height: 3.2em; }
    }
  }

  .contact-band { padding-block: 72px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
  .contact-band .section-label { margin-bottom: 20px; }
  .contact-band h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.6; letter-spacing: .02em; }

  .site-footer { padding-block: 72px 24px; }
  .footer-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
  .footer-company { min-width: 0; }
  .footer-info { margin-top: 20px; max-width: 32em; font-size: 14px; color: var(--muted); line-height: 2; overflow-wrap: anywhere; }
  .footer-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 48px); }
  .footer-nav { min-width: 0; }
  .footer-nav-title { margin: 0 0 16px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.6; }
  .footer-nav ul { margin: 0; padding: 0; list-style: none; }
  .footer-nav a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; font-size: 15px; font-weight: 500; line-height: 1.8; white-space: normal; overflow-wrap: anywhere; }
  .footer-nav a > span { min-width: 0; }
  .footer-bottom { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 24px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.8; }
  .footer-bottom small { font-size: inherit; }

  .breadcrumb { display: flex; gap: 14px; font-size: 13px; color: var(--muted); padding-top: 16px; align-items: center; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .breadcrumb span[aria-hidden] { color: #b4a69b; }
  .page-heading { padding-block: 56px 80px; position: relative; isolation: isolate; overflow: clip; }
  .page-heading .eyebrow { color: var(--red); margin-bottom: 24px; }
  .page-heading h1 { font-size: clamp(36px, 4vw, 52px); letter-spacing: .04em; line-height: 1.5; max-width: 100%; }
  .page-heading p:last-child { margin-top: 28px; color: var(--muted); max-width: 44em; }
  .page-content { padding-bottom: var(--section-space); }
  :is(.security, .privacy, .terms) main > .wrap { max-width: 880px; }
  :is(.security, .privacy, .terms) .page-heading { padding-bottom: 56px; }
  :is(.security, .privacy, .terms) .page-heading::after { content: none; }
  .policy-document { padding-top: 32px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 500; line-height: 2.1; overflow-wrap: anywhere; }
  .policy-document a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
  .policy-introduction { margin-bottom: 48px; }
  .policy-principles { display: grid; gap: 36px; padding: 0; list-style: none; }
  .policy-principles h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; font-size: 21px; line-height: 1.7; }
  .policy-number { flex-shrink: 0; color: var(--red); font-size: 16px; }
  .policy-heading-text { min-width: 0; }
  .policy-principles p { color: var(--muted); }
  .policy-signature { margin-top: 48px; text-align: right; }

  .policy-contents { display: grid; gap: 4px; margin: 0 0 48px; padding: 0; list-style: none; }
  .policy-contents :is(ul, ol) { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; padding: 0; list-style: none; }
  .policy-contents a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px; font-size: 16px; font-weight: 500; line-height: 1.8; white-space: normal; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
  .legal-section { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); scroll-margin-top: 32px; }
  .legal-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .legal-section-title { margin: 0 0 24px; font-size: clamp(26px, 2.2vw, 28px); font-weight: 700; line-height: 1.65; }
  .legal-section-title h2 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
  .legal-section > p { color: var(--muted); }
  .legal-section > p + p { margin-top: 20px; }
  .legal-clauses { display: grid; gap: 32px; margin: 28px 0 0; padding-inline-start: 1.5em; list-style: decimal outside; }
  .legal-clauses > li { min-width: 0; padding-inline-start: 8px; }
  .legal-clauses > li::marker { color: var(--red); font-weight: 700; }
  .legal-clauses h3, .service-disclosure h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.7; }
  .legal-clauses p { color: var(--muted); }
  .legal-clauses p + p { margin-top: 16px; }
  .policy-bullets { display: grid; gap: 8px; margin: 16px 0 0; padding-inline-start: 1.3em; list-style: disc outside; color: var(--muted); }
  .policy-bullets > li { padding-inline-start: 4px; }
  .policy-details, .service-disclosure dl { margin: 24px 0 0; }
  .policy-details > div, .service-disclosure dl > div { display: grid; grid-template-columns: minmax(136px, .32fr) minmax(0, 1fr); gap: 24px; padding-block: 20px; border-bottom: 1px solid var(--line); }
  .policy-details > div:first-child, .service-disclosure dl > div:first-child { border-top: 1px solid var(--line); }
  .policy-details dt, .service-disclosure dt { min-width: 0; font-weight: 700; }
  .policy-details dd, .service-disclosure dd { min-width: 0; margin: 0; color: var(--muted); }
  .policy-details dd > p + p, .service-disclosure dd > p + p { margin-top: 16px; }
  .service-disclosure { margin-top: 36px; }
  .service-disclosure + .service-disclosure { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
  .service-disclosure h3 { margin-bottom: 16px; }
  .service-disclosure dl { margin-top: 0; }
  .service-disclosure dl > div:last-child { border-bottom: 0; }
  .profile-table { width: 100%; border-collapse: collapse; text-align: left; }
  .profile-table tr { border-top: 1px solid var(--line); }
  .profile-table tr:last-child { border-bottom: 1px solid var(--line); }
  .profile-table th, .profile-table td { padding-block: 28px; line-height: 2; vertical-align: top; }
  .profile-table th { font-weight: 500; color: var(--muted); width: 24%; padding-right: 32px; }
  .profile-table td { overflow-wrap: anywhere; }
  .profile-services { display: grid; gap: 24px; }
  .profile-services dt { font-weight: 700; }
  .profile-services dd { margin-top: 4px; color: var(--muted); }

  .service-jumps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
  .service-jumps a { display: flex; align-items: center; gap: 16px; padding: 24px; min-height: 88px; }
  .service-jumps a:first-child { padding-left: 0; }
  .service-jumps a + a { border-left: 1px solid var(--line); }
  .service-jumps a > span:first-child { color: var(--red); font-family: Georgia, serif; }
  .service-jumps a > span:last-child { margin-left: auto; }
  .service-detail { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(48px, 7vw, 104px); padding-block: var(--section-space); border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
  .service-detail-visual { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 440px; align-self: center; margin-inline: auto; padding-bottom: 32px; }
  .service-detail-visual > .field-illustration { width: 100%; aspect-ratio: 4 / 3; }
  .service-detail-number { position: absolute; left: 0; bottom: 0; font-family: Georgia, serif; font-size: 48px; font-weight: 400; line-height: 1; color: var(--red); }
  .service-detail-copy > .eyebrow { color: var(--red); margin-bottom: 24px; }
  .service-detail h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.65; letter-spacing: .02em; }
  .service-detail .body-copy { margin-top: 20px; }

  .contact-form-embed { width: 100%; overflow: visible; background: var(--white); border: 1px solid var(--line); border-radius: 5px; }
  .contact-privacy-notice { margin-bottom: 28px; color: var(--muted); line-height: 2; }
  .contact-privacy-notice a { text-decoration: underline; text-underline-offset: 4px; }
  .contact-form-embed iframe { display: block; width: 100%; height: 1700px; border: 0; max-width: 100%; }
  .contact-form-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 20px; font-size: 14px; color: var(--muted); }
  .contact-form-fallback a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; gap: 8px; }
  .contact-form-fallback .arrow { font-size: 18px; }

  @media (hover: hover) and (pointer: fine) {
    a:hover { color: var(--red); }
    .nav-contact:hover, .pill-link:hover { color: var(--white); }
    .site-nav > a:hover::after { transform: scaleX(1); transform-origin: left; }
    .text-link:hover .arrow, .nav-contact:hover .arrow, .pill-link:hover .arrow { transform: translate(3px, -3px); }
    .business-row:hover { background: #f1ebe86b; }
    .business-row:hover .round-arrow { background: var(--red); color: var(--white); border-color: var(--red); transform: translate(2px, -2px); }
  }
  .text-link:focus-visible .arrow, .pill-link:focus-visible .arrow, .nav-contact:focus-visible .arrow { transform: translate(3px, -3px); }
  .business-row:focus-visible .round-arrow { background: var(--red); color: var(--white); }

  @media (max-width: 1023px) {
    :root { --site-header-size: 88px; }
    .site-header { height: auto; min-height: var(--site-header-size); flex-wrap: wrap; padding-block: 22px; gap: 0; }
    .site-nav { width: 100%; padding-top: 24px; flex-wrap: wrap; }
    .js .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: transparent; border: 1px solid var(--line); border-radius: 40px; width: 88px; height: 44px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 400; color: var(--ink); }
    .menu-icon { width: 14px; height: 8px; border-block: 1px solid; transition: transform 150ms var(--ease); }
    .menu-open .menu-icon { transform: rotate(90deg); }
    .js .site-nav { display: none; position: absolute; top: 100%; left: calc(-1 * var(--page-gutter)); right: calc(-1 * var(--page-gutter)); width: auto; background: var(--paper); border-bottom: 1px solid var(--line); padding: 16px var(--page-gutter) 28px; box-shadow: 0 16px 20px #352e2b08; }
    .js .menu-open .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
    .js .site-nav > a { min-height: 48px; }
    .site-nav > a:not(.nav-contact)::after { display: none; }
    .site-nav > a[aria-current="page"]:not(.nav-contact) { color: var(--red); }
    .site-nav .nav-contact { margin-top: 8px; }
    .business-row { padding-inline: 20px; }
    .business-row-top { flex-direction: column; gap: 12px; min-height: 52px; }
    .business-row .eyebrow { font-size: 10px; }
    .business-short { font-size: 15px; }
    .about-grid, .intro-grid { gap: 40px; }
    .footer-main { gap: 32px; }
    .footer-navigation { gap: 24px; }
    .service-jumps { grid-template-columns: 1fr; }
    .service-jumps a { min-height: 64px; padding: 16px 0; }
    .service-jumps a + a { border-left: 0; border-top: 1px solid var(--line); }
  }
  @media (max-width: 767px) {
    :is(.security, .privacy, .terms) .page-heading { padding-bottom: 40px; }
    :is(.security, .privacy, .terms) .page-heading h1 { font-size: clamp(28px, 6vw, 40px); }
    .policy-document { padding-top: 24px; }
    .policy-introduction { margin-bottom: 36px; }
    .policy-principles { gap: 28px; }
    .policy-principles h2 { gap: 10px; font-size: 20px; }
    .policy-signature { margin-top: 36px; }
    .policy-contents { margin-bottom: 36px; }
    .legal-section { margin-top: 40px; padding-top: 32px; }
    .legal-section-title { margin-bottom: 20px; font-size: 26px; }
    .legal-clauses { gap: 28px; padding-inline-start: 1.3em; }
    .legal-clauses > li { padding-inline-start: 4px; }
    .policy-details > div, .service-disclosure dl > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .service-disclosure { margin-top: 28px; }
    .service-disclosure + .service-disclosure { margin-top: 32px; padding-top: 28px; }
    .section-title { font-size: clamp(26px, 5.3vw, 34px); }
    .section-label { margin-bottom: 24px; }
    .about-grid, .intro-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-copy { padding-top: 0; }
    .about-copy p + p { margin-top: 20px; }
    .desktop-br { display: none; }
    .business-heading { margin-bottom: 32px; }
    .business-list { grid-template-columns: 1fr; }
    .business-row, .business-row:first-child, .business-row:last-child { display: grid; grid-template-columns: 1fr 44px; padding: 32px 0; }
    .business-row + .business-row { border-left: 0; border-top: 1px solid var(--line); }
    .business-row-top { grid-column: 1 / -1; flex-direction: row; min-height: auto; gap: 16px; }
    .business-row .eyebrow { font-size: 11px; }
    .business-row > .field-illustration { grid-column: 1 / -1; width: min(260px, 80%); margin-block: 28px; }
    .business-row-copy { grid-column: 1; }
    .business-row h3 { font-size: 23px; }
    .business-short { font-size: 16px; }
    .business-row > .round-arrow { margin-top: 0; align-self: start; }
    .company-illustration { width: min(100%, 360px); justify-self: center; }
    .contact-band { align-items: flex-start; flex-direction: column; padding-block: 56px; gap: 32px; }
    .contact-band .pill-link { width: 100%; min-width: 0; max-width: 320px; }
    .site-footer { padding-block: 48px 24px; }
    .footer-main { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .footer-navigation { gap: 24px; }
    .footer-nav-title { margin-bottom: 12px; }
    .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 40px; padding-top: 20px; }
    .page-heading { padding-block: 40px 56px; }
    .page-heading h1 { font-size: clamp(30px, 6vw, 40px); }
    .page-heading p:last-child { margin-top: 24px; }
    .service-detail { grid-template-columns: 1fr; gap: 40px; }
    .service-detail-visual { max-width: 320px; }
    .service-detail-copy > .eyebrow { margin-bottom: 20px; }
    .service-detail h2 { font-size: clamp(28px, 6.1vw, 36px); }
    .profile-table th, .profile-table td { display: block; width: 100%; padding: 0; }
    .profile-table th { padding-top: 24px; font-size: 14px; }
    .profile-table td { padding-block: 10px 24px; }
    .profile-services { gap: 20px; }
  }
  @media (max-width: 359px) {
    .brand { font-size: 18px; }
    .section-title { font-size: 24px; }
    .business-row { grid-template-columns: 1fr; }
    .business-row-copy { grid-column: 1 / -1; }
    .business-row > .round-arrow { grid-column: 1 / -1; margin-top: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}