/* ASS site styles v0.3 — design misalignments fixed (centred pricing text, button, banner; How It Works heading) */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "Tai Heritage Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/tai-heritage-pro-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* ---------- Design tokens (from Figma styles) ---------- */
:root {
  --navy: #252942;          /* Primary navy */
  --navy-80: rgba(37, 41, 66, 0.8); /* Button hover */
  --navy-active: #0f0f0f;   /* Button active */
  --off-white: #f3f3f3;     /* off white */
  --off-white-2: #f2f2f2;   /* off white (footer text) */
  --white: #ffffff;
  --label: #323232;
  --placeholder: #d2d2d2;
  --hover-border: #222222;
  --error: #f14668;

  --font-heading: "Tai Heritage Pro", Georgia, "Times New Roman", serif;
  --font-body: "Open Sans", Arial, Helvetica, sans-serif;
  --font-button: "Inter", Arial, Helvetica, sans-serif;

  --gutter: 24px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--off-white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 25.2px;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 8px 16px; background: var(--navy); color: var(--off-white); border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Centred column of a given max width; shrinks to the screen minus gutters */
.wrap { width: min(var(--w, 1160px), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: flex; width: max-content; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s ease;
}
.btn--small  { width: 138px; height: 36px; font: 700 14px/19.6px var(--font-body); }
.btn--medium { height: 62px; padding: 18px 90px; font: 700 18px/25.2px var(--font-button); }
.btn--large  { height: 68px; padding: 20px 100px; font: 700 20px/28px var(--font-body); }
.btn--normal { width: 163px; height: 55px; font: 700 16px/22.4px var(--font-body); }
.btn--navy   { background: var(--navy); color: var(--off-white); }
.btn--navy:hover  { background: var(--navy-80); }
.btn--navy:active { background: var(--navy-active); }
.btn--light  { background: var(--off-white); color: var(--navy); }
.btn--light:hover { background: rgba(243, 243, 243, 0.8); }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.btn--light:focus-visible { outline-color: var(--off-white); }

/* ---------- Header ---------- */
.site-header { padding-top: 12px; }
.nav { display: flex; justify-content: space-between; align-items: flex-start; height: 51px; }
.nav__logo { display: block; width: 61px; height: 68px; margin-top: -9px; }
.nav__logo img { width: 61px; height: 68px; }
.nav__logo:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 2px; }
.nav .btn { margin-top: 9px; }

/* ---------- Shared headings ---------- */
.h2 { font: 700 48px/52.8px var(--font-heading); text-align: center; color: var(--navy); }
.h2, .hero__title, .hero__sub, .cta__title { text-wrap: balance; }   /* tidier line breaks when headings wrap on small screens */

/* ---------- Order Form page ---------- */
.order { padding-top: 40px; }                       /* header ends 63px; title box at 103px */
.order__intro { --w: 634px; margin-top: 7.2px; }   /* title box 103 -> intro 163 */
.order__form { --w: 666px; margin-top: 27.6px; }   /* intro ends 213.4 -> form 241 */

.field { margin-bottom: 26px; }                     /* 36 label + 46 input + 26 = 108 */
.field--select { margin-bottom: 21px; }             /* 36 label + 51 select + 21 = 108 */
.field__label { display: block; padding-top: 1px; margin-bottom: 9.8px; font: 400 18px/25.2px var(--font-body); color: var(--label); }
.field__input,
.field__select {
  display: block; height: 46px;
  border: 1px solid var(--navy); border-radius: 8px; background-color: var(--white);
  font: 400 18px/25.2px var(--font-body); color: var(--label);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field__input { width: 100%; padding: 9px 14px; }
.field__input::placeholder { color: var(--placeholder); opacity: 1; }
.field__select {
  width: 217px; height: 51px; padding: 10px 50px 13.8px 14px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='31' viewBox='0 0 31 31'%3E%3Ccircle cx='15.5' cy='15.5' r='15.5' fill='%23252942'/%3E%3Cpath transform='translate(5.84 10.38)' fill='%23fcfeff' d='M19.256 0.156C18.943 -0.084 18.504 -0.043 18.26 0.253L9.749 10.609L1.238 0.253C0.994 -0.043 0.555 -0.084 0.256 0.157C-0.044 0.398 -0.085 0.831 0.158 1.127L9.213 12.145C9.456 12.441 9.895 12.482 10.195 12.248C10.23 12.22 10.264 12.186 10.299 12.145L19.354 1.127C19.597 0.831 19.549 0.398 19.256 0.156Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px top 10px;
  background-size: 31px 31px;
}
.field__select.is-default { color: var(--placeholder); }
.field__select option { color: var(--label); }
.field__input:hover, .field__select:hover { border-color: var(--hover-border); }
.field__input:focus, .field__select:focus { outline: none; border-color: var(--hover-border); box-shadow: 0 0 0 3px rgba(37, 41, 66, 0.18); }
.field__input:user-invalid { border-color: var(--error); }
.order__submit { margin-top: 37px; min-width: 243px; } /* merges with the 21px field gap: select ends 1192 -> button 1229; 243px = design width */

/* ---------- FAQ (shared with Home) ---------- */
.faq-title { margin-top: 80px; }                    /* button ends 1291 -> title 1371 */
.faq { --w: 764px; margin-top: 20.2px; }            /* title line ends 1423.8 -> list 1444 */
.faq__item + .faq__item { margin-top: 18.87px; }  /* uniform spacing; keeps last item at the design's 1761px */
.faq__q { font: 700 20px/28px var(--font-body); color: var(--navy); }
.faq__a { font: 400 18px/25.2px var(--font-body); color: var(--navy); }
.faq__a + .faq__a { margin-top: 25.2px; }
.faq a { text-decoration: none; }
.faq a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 146.6px; background: var(--navy); color: var(--white); padding: 45px 0 86px; }
.footer__inner { --w: 619px; display: flex; gap: 122px; align-items: flex-start; min-height: 167px; }
.footer__brand { flex: 0 0 251px; padding-top: 7px; }
.footer__logo { display: flex; align-items: center; justify-content: center; width: 46px; height: 51px; background: var(--white); border-radius: 2px; }
.footer__logo img { width: 46px; height: 51px; object-fit: contain; }
.footer__tagline { margin-top: 29.2px; font: 400 16px/25.2px var(--font-body); color: var(--off-white-2); }
.footer__contact { flex: 0 0 246px; }
.footer__heading { padding-top: 3.5px; font: 700 18px/28px var(--font-body); color: var(--white); }
.footer__link { display: block; font: 400 16px/25.2px var(--font-body); color: var(--white); text-decoration: none; }
.footer__link--email { margin-top: 11.9px; }
.footer__link--phone { margin-top: 8.8px; color: var(--off-white); }
.footer__link:hover { text-decoration: underline; }
.footer__contact .btn { margin-top: 16.4px; }

/* ---------- Home: hero (75px -> 979px) ---------- */
.hero { margin-top: 12px; padding: 78px 0 27px; text-align: center; background: linear-gradient(180deg, var(--navy) 73.67%, var(--off-white) 100%); }
.hero__title { font: 700 min(82px, 7.4vw)/0.7512 var(--font-heading); color: var(--off-white); }   /* 82px / 61.6px at desktop */
.hero__sub { margin-top: 26.4px; font: 700 min(40px, 5vw)/1.1 var(--font-heading); color: var(--off-white); }  /* 40px / 44px */
.hero picture { display: block; }
.hero__img { width: min(912.75px, 100% - 2 * var(--gutter)); height: auto; aspect-ratio: 783 / 525; margin: 3px auto 0; }
.hero__btn { position: relative; margin: -16px auto 0; }   /* overlaps the photo by 16px, as designed */

/* ---------- Home: How It Works (heading 1063px) ---------- */
.how { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 84px; }
.how__img { flex: 0 0 466px; width: 466px; height: 486px; object-fit: cover; border-radius: 20px; margin-top: 2px; }
.how__body { flex: 0 0 565px; }
.how__title { text-align: left; }   /* aligned with the step circles (Figma had it 6px in) */
.steps { list-style: none; margin: 25.2px 0 0; padding: 0; }
.step { position: relative; padding-left: 50px; min-height: 38px; }
.step + .step { margin-top: 14.8px; }   /* uniform spacing; first step and button stay at design positions */
.step__num { position: absolute; left: 0; top: 0; width: 38px; height: 38px; padding: 4px 2px 0 0; border-radius: 50%; background: var(--navy); color: var(--off-white); font: 700 20px/28px var(--font-body); text-align: center; }
.step__title { padding-top: 4px; font: 700 20px/28px var(--font-body); color: var(--navy); }
.step__text { margin-top: 12px; }
.how__btn { margin-top: 16px; }

/* ---------- Home: What We Do (heading 1705px) ---------- */
.what { margin-top: 64px; }
.what__body { --w: 764px; margin-top: 20.2px; }
.what__body p + p, .what__list { margin-top: 25.2px; }
.what__list { list-style: none; padding: 0; margin-bottom: 0; }
.what__list li { position: relative; padding-left: 27px; }
.what__list li::before { content: "\2022"; position: absolute; left: 10.12px; top: 0; }
.what__btn { margin-top: 19.2px; }

/* ---------- Home: DPI band (2276px -> 2913px) ---------- */
.dpi { margin-top: 64px; padding: 71px 0 80px; background: var(--navy); color: var(--off-white); }
.dpi__inner { display: flex; justify-content: space-between; align-items: flex-start; }
.dpi__body { flex: 0 0 574px; margin-top: 113px; }
.dpi__title { text-align: left; color: var(--off-white); }
.dpi__text { margin-top: 20.2px; }
.dpi__img { flex: 0 0 466px; width: 466px; height: 486px; object-fit: cover; border-radius: 20px; }

/* ---------- Home: No Upfront Payment (heading 2977px) ---------- */
.pricing { margin-top: 64px; }
.pricing__intro { --w: 764px; margin-top: 20.2px; text-align: center; }
.price-table { --w: 649px; margin-top: 32.8px; border: 1px solid var(--navy); border-radius: 8px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 400 16px/22.4px var(--font-body); color: var(--navy); }
.price-table .c1 { width: 195px; }
.price-table .c2 { width: 202px; }
.price-table .c3 { width: 147px; }
.price-table .c4 { width: 103px; }
.price-table th, .price-table td { padding: 20px 0 20.6px; text-align: left; vertical-align: top; font-weight: 400; }
.price-table th:first-child, .price-table td:first-child { padding-left: 23px; }
.price-table thead th { padding-top: 19px; padding-bottom: 21.6px; background: var(--navy); color: var(--off-white); font-weight: 700; }
.price-table thead th:first-child { border-top-left-radius: 7px; }
.price-table thead th:last-child { border-top-right-radius: 7px; }
.price-table tbody tr:last-child > * { padding-bottom: 19.6px; }
.pricing__cta { margin-top: 24px; }
.pricing__cta .btn { margin-inline: auto; }

/* ---------- Home: FAQ and banner ---------- */
.faq-title--home { margin-top: 48px; }
.cta { --w: 863px; margin-top: 69.6px; padding: 41px 24px 50px; border-radius: 8px; background: var(--navy); color: var(--white); text-align: center; }
.cta__title { font: 700 32px/35.2px var(--font-heading); color: var(--white); }
.cta__text { max-width: 374px; margin: 16.8px auto 0; font: 400 16px/22.4px var(--font-body); }
.cta .btn { margin: 16.2px auto 0; }
.site-footer--home { margin-top: 64px; }

/* ---------- Narrow desktop / large tablet ---------- */
@media (max-width: 1100px) {
  .how, .dpi__inner { gap: 48px; }
  .how__img, .dpi__img { flex: 0 1 40%; width: 40%; height: auto; aspect-ratio: 466 / 486; }
  .how__body, .dpi__body { flex: 1 1 0; }
  .dpi__inner { align-items: center; }
  .dpi__body { margin-top: 0; }
}

/* ---------- Wide screens only: let the long delivery label run 26px past the form, as in the design ---------- */
@media (min-width: 761px) {
  .field__label--wide { margin-right: -26px; }
}

/* ---------- Tablet and below ---------- */
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .h2 { font-size: 36px; line-height: 39.6px; }
  .order { padding-top: 32px; }
  .order__intro { margin-top: 12px; }
  .faq-title { margin-top: 64px; }
  .faq { margin-top: 20px; }
  .faq__item + .faq__item { margin-top: 24px; }
  .site-footer { margin-top: 96px; padding: 40px 0 48px; }
  .footer__inner { flex-direction: column; gap: 32px; min-height: 0; }
  .footer__brand, .footer__contact { flex: none; width: auto; padding-top: 0; }
  .footer__tagline { margin-top: 20px; max-width: 280px; }
  .hero { padding: 48px 0 32px; }
  .hero__title { font-size: 40px; line-height: 44px; }
  .hero__sub { margin-top: 12px; font-size: 22px; line-height: 28px; }
  .hero__img { margin-top: 20px; }
  .how { flex-direction: column; margin-top: 64px; gap: 32px; }
  .how__img, .dpi__img { flex: none; width: 100%; max-width: 466px; }
  .how__img { align-self: center; }
  .how__body, .dpi__body { flex: none; width: 100%; }
  .what, .pricing { margin-top: 56px; }
  .dpi { margin-top: 56px; padding: 56px 0; }
  .dpi__inner { flex-direction: column; gap: 32px; }
  .price-table { table-layout: auto; font-size: 15px; }
  .price-table col { width: auto !important; }
  .price-table th, .price-table td { padding-right: 8px; }
  .price-table th:first-child, .price-table td:first-child { padding-left: 14px; }
  .faq-title--home { margin-top: 56px; }
  .cta { margin-top: 56px; padding: 40px 20px; }
  .cta__title { font-size: 28px; line-height: 32px; }
  .site-footer--home { margin-top: 56px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .h2 { font-size: 32px; line-height: 35.2px; }
  .faq__q { font-size: 18px; line-height: 25.2px; }
  .btn--medium, .btn--large { padding-inline: 0; width: 100%; }
  .hero__btn { width: calc(100% - 2 * var(--gutter)); }
  .hero__title { font-size: 34px; line-height: 38px; }
  .price-table { font-size: 14px; }
  .price-table th, .price-table td { padding-right: 4px; }
  .price-table th:first-child, .price-table td:first-child { padding-left: 10px; }
  .faq a, .footer__link { overflow-wrap: anywhere; } /* long email address must not push past the screen edge */
}