/* Icons, photos and the footer. Loads after pages.css. */

/* Icons: drawn by build.js from src/icons.json, they take the colour of the text around them */
.ico { flex: none; width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn { display: inline-flex; align-items: center; gap: 10px; }
.btn .ico { width: 1.05em; height: 1.05em; stroke-width: 2.2; }
.btn--go { background: var(--go); color: var(--ink); }
/* A round badge behind an icon */
.badge { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 16px; background: var(--ink); color: var(--amber); }
.badge .ico { width: 26px; height: 26px; stroke-width: 1.7; }

/* Cards, rows and steps led by an icon */
.card .badge { margin-bottom: 22px; }
.rows--ico a { grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.rows--ico :is(h2, h3)::before { content: none; }
.rows--ico a:is(:hover, :focus-visible) :is(h2, h3) { transform: none; }
.rows--ico .badge { transition: background-color .2s ease, color .2s ease; }
.rows--ico a:is(:hover, :focus-visible) .badge { background: var(--amber); color: var(--ink); }
.steps .badge { position: absolute; top: 30px; right: clamp(16px, 2.6vw, 40px); }
.promises li::before { width: 20px; height: 20px; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBAC3F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat; transform: translateY(4px); }

/* Home: the whole front of the office, shown uncropped, with where to find him */
.where { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.where__photo img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--lift); }
.where__text > p { margin-top: 16px; color: var(--fg2); font-size: 1.1rem; }
.facts { display: grid; margin: 26px 0 30px; }
.facts li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-weight: 600; }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts .ico { width: 1.3em; height: 1.3em; color: var(--orange); }

.split__photo { margin-top: clamp(24px, 3vw, 40px); }
.split__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.visit__addr { display: flex; align-items: flex-start; gap: 10px; }
.visit__addr .ico { margin-top: .12em; color: var(--amber); }

/* Blog rows and articles: an icon per article, and who wrote it */
.rows--ico.rows--posts a { grid-template-areas: "ico when sum" "ico title sum"; }
.rows--posts .badge { grid-area: ico; }
.ask, .post__by { display: flex; align-items: center; gap: 14px; }
.sec__head .ask { margin-top: 28px; }
:is(.contact__who, .ask, .post__by) img { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--go); object-fit: cover; object-position: 50% 8%; }
.post__by { flex-wrap: wrap; margin: 22px 0 clamp(28px, 4vw, 48px); }
.post__by > span:not(.post__when) { display: grid; line-height: 1.3; color: var(--fg2); font-size: .95rem; }
.post__by b { color: var(--ink); font-size: 1.05rem; font-weight: 800; }
.post__by .post__when { margin: 0 0 0 auto; }

@media (max-width: 900px) {
  .where { grid-template-columns: 1fr; }
  .where__photo { max-width: 520px; }
}
@media (max-width: 760px) {
  .rows--ico a { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .rows--ico:not(.rows--posts) .badge { grid-row: span 2; }
  .rows--ico.rows--posts a { grid-template-areas: "ico when" "ico title" "ico sum"; }
  .rows--posts .badge { align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .top__logo, .rows--ico .badge { transition: none; }
}

/* Contact band: a face, then how to reach him */
.contact__who { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.contact__who img { width: 68px; height: 68px; }
.contact__who p { display: grid; gap: 1px; line-height: 1.3; }
.contact__who b { font-size: 1.1rem; font-weight: 800; font-stretch: 110%; }
.contact__who span { color: var(--fg2); font-size: .95rem; }
address { gap: 10px; margin-top: 22px; }
address > * { display: flex; align-items: center; gap: 12px; }
address .ico { color: var(--amber); }
.contact__apply { margin-top: 26px; color: var(--fg2); }
.contact__apply .link { color: #fff; }

/* Footer: white, so both logos sit on the background they were drawn for */
.foot { display: block; padding: clamp(48px, 6vw, 84px) var(--x) 34px; border: 0; background: #fff; color: var(--fg2); font-size: .95rem; }
.foot__main { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 64px); }
.foot__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.foot__tmg { width: 236px; }
.foot__bb { width: 92px; }
.foot__name { display: grid; gap: 2px; margin-top: 26px; color: var(--ink); line-height: 1.3; }
.foot__name b { font-size: 1.15rem; font-weight: 800; font-stretch: 112%; }
.foot__lede { max-width: 30em; margin-top: 10px; }
.foot__col h2 { margin-bottom: 14px; color: var(--ink); font-size: 1rem; font-weight: 800; font-stretch: 105%; line-height: 1.3; letter-spacing: 0; }
.foot__col ul { display: grid; gap: 2px; }
.foot__col a { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; color: var(--ink); font-weight: 550; text-decoration: none; }
.foot__col a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.foot__col .ico { margin-top: .16em; color: var(--orange); }
.foot__legal { display: grid; gap: 4px; margin-top: clamp(36px, 5vw, 60px); padding-top: 22px; border-top: 1px solid var(--line); font-size: .85rem; }

@media (max-width: 1000px) {
  .foot__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .foot__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__col:last-child { grid-column: 1 / -1; }
  .foot__tmg { width: 208px; }
}

/* Home hero: a strip of facts under the buttons */
.hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px clamp(20px, 3vw, 44px); margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .95rem; font-weight: 600; }
.hero__facts li { display: flex; align-items: center; gap: 10px; }
.hero__facts .ico { color: var(--orange); }
.hero__text .hero__with { margin-top: 22px; }

/* The payment estimate: beside the portrait on wide screens, at the top of the first band on smaller ones */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 14px; padding: clamp(20px, 1.8vw, 30px); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--lift); color: var(--ink); }
.quick > :not(label), .quick .quick__wide { grid-column: 1 / -1; }
.quick__title { font-size: 1.35rem; line-height: 1.15; letter-spacing: -.01em; }
.quick label { font-size: .85rem; }
.quick input { min-height: 46px; padding: 9px 12px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.quick__out { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: #fff; font-size: .85rem; font-weight: 600; }
.quick__out b { color: var(--amber); font-family: var(--display); font-size: clamp(1.9rem, 2.4vw, 2.6rem); font-weight: 800; font-stretch: 110%; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.quick__note { min-height: 2.9em; color: var(--fg2); font-size: .8rem; line-height: 1.45; }
.quick__more { justify-self: start; font-size: .92rem; }

@media (min-width: 1201px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; }
  .hero h1 { font-size: clamp(2.6rem, 4.2vw, 5.6rem); }
  .hero__side { display: grid; grid-template-columns: clamp(220px, 19vw, 440px) clamp(320px, 23vw, 440px); align-items: center; gap: clamp(16px, 1.6vw, 28px); }
  .hero__portrait { align-self: stretch; width: 100%; } /* as tall as the estimate beside it */
  .help .quick { display: none; }
}
@media (min-width: 1201px) and (max-height: 760px) {
  .hero { padding-top: 88px; padding-bottom: 24px; }
  .hero__text p { margin: 16px 0 22px; }
  .hero__facts { margin-top: 20px; padding-top: 16px; }
  .hero__text .hero__with { margin-top: 14px; }
  .quick { gap: 10px 14px; padding: 18px; }
  .quick__note { min-height: 0; }
}
@media (max-width: 1200px) {
  .hero__side { display: contents; }
  .hero .quick { display: none; }
  .help .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: clamp(40px, 7vw, 72px); }
  .help .quick .quick__wide { grid-column: auto; }
  .help .quick__note { min-height: 0; }
  .help .quick__out { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; }
}
@media (max-width: 760px), (max-height: 640px) {
  .hero__facts { display: none; }
}
@media (max-width: 600px) {
  .help .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help .quick .quick__wide { grid-column: 1 / -1; }
}

/* Mortgages and Contact us pages: cards whose titles are second-level headings, and a short glossary. */
.card h2 { margin-bottom: 12px; font-size: 1.5rem; font-weight: 700; font-stretch: 105%; line-height: 1.2; letter-spacing: 0; }
.card__fit { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.card p.card__fit { color: var(--ink); font-weight: 600; }
.card .link { display: inline-block; margin-top: 16px; overflow-wrap: anywhere; }
.reach .card { display: flex; flex-direction: column; align-items: flex-start; }
.reach .card .link { margin-top: auto; padding-top: 16px; }
.sec__head .hero__cta { margin-top: 28px; }
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px) clamp(24px, 3.6vw, 60px); }
.terms dt { margin-bottom: 8px; font-family: var(--display); font-size: 1.22rem; font-weight: 700; font-stretch: 105%; line-height: 1.2; }
.terms dd { color: var(--fg2); }
@media (max-width: 900px) { .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .terms { grid-template-columns: 1fr; } }

/* Scroll reveals. reveal.js adds these classes to blocks below the first screen, then takes them off again. */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.rv.is-in { opacity: 1; transform: none; }
/* Photos rise a little further and settle to full size, a touch slower than the text. */
.rv--photo { transform: translateY(40px) scale(.97); transition-duration: 1s; }
@media print { .rv { opacity: 1 !important; transform: none !important; } }

/* Contact us: four ways to reach him, side by side on a wide screen, two by two below that */
.reach .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .reach .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .reach .cards { grid-template-columns: 1fr; } }

/* Opening hours: in the office card, the contact band and the footer */
/* The time of day never breaks across two lines; when space is short it drops under the days as one piece. */
.hours__lines > span { display: block; }
.hours__lines > span + span { margin-top: 4px; }
.visit__hours { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 1rem; font-weight: 550; line-height: 1.45; }
.visit__hours .ico { margin-top: .2em; color: var(--amber); }
address > .hours { align-items: flex-start; line-height: 1.5; }
address > .hours .ico { margin-top: .2em; }
.foot__col .hours { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; color: var(--ink); font-weight: 550; }

/* Phones: the home page hero opens on Tyler, then the headline, the buttons and the four facts (after the 3D entrance, or straight away when it is skipped). */
@media (max-width: 760px) {
  .no-webgl .stage, .no-webgl .inside { min-height: 0; }
  .is-home .hero { align-content: start; gap: 22px; padding-top: 94px; padding-bottom: 40px; }
  .is-home .hero__portrait { display: block; justify-self: stretch; width: 100%; height: clamp(250px, 73vw, 340px); aspect-ratio: auto; border-radius: 22px; }
  .is-home .hero__portrait img { width: auto; height: 100%; }
  .is-home .hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 26px; padding-top: 20px; font-size: .9rem; }
  .is-home .hero__facts li { align-items: flex-start; }
  .is-home .hero__facts .ico { margin-top: .15em; }
}

/* Phones: Call and Apply stay in thumb reach at the bottom of the screen.
   The bar steps aside while the menu is open, while someone is typing, and on the home page until the hero's own buttons have scrolled away. */
.dock { display: none; }
@media (max-width: 760px) {
  .dock { position: fixed; z-index: 15; inset: auto 0 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px var(--x) calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: 0 -1px 0 rgba(22, 23, 27, .1), 0 -16px 30px -26px rgba(10, 14, 26, .55); transition: transform .3s ease, visibility .3s; }
  .dock .btn { justify-content: center; padding: 13px 20px; font-size: clamp(.86rem, 4.2vw, 1rem); white-space: nowrap; }
  .dock-wait .dock, .top.is-open ~ .dock, body:has(input:focus, textarea:focus, select:focus) .dock { transform: translateY(110%); visibility: hidden; }
  .foot { padding-bottom: calc(106px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }
@media print { .dock { display: none; } }

/* Short phones: the open menu fits without scrolling, Apply now included */
@media (max-width: 760px) and (max-height: 620px) {
  .top.is-open .top__nav a { padding: 11px 0; }
  .top.is-open .top__nav .top__navbook { margin-top: 14px; padding: 13px 26px; }
}

/* Hero facts: the slogan takes the first row, the three facts sit under it */
.hero__facts { grid-template-columns: repeat(3, minmax(0, max-content)); }
.hero__facts .hero__gift { grid-column: 1 / -1; font-size: 1.08em; font-weight: 700; }

/* The 3D entrance sits in its own layer inside the stage: canvas, light flood, scroll cue and skip button */
.stage__view { position: absolute; inset: 0; }
.no-webgl .stage__view { display: none; }

/* Phones: the entrance plays too. The scene sticks to the screen at the tallest height the browser can show (address bar away),
   so no gap opens under it when the bar slides off, and the hero follows in the page and comes up once the doorway is full of light. */
@media (max-width: 760px) {
  .is-home:not(.no-webgl):not(.is-inside) { background: var(--night); }
  .is-home:not(.no-webgl) .entry { height: auto; }
  .is-home:not(.no-webgl) .stage { position: relative; height: auto; overflow: visible; }
  .is-home:not(.no-webgl) .stage__view { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
  .is-home:not(.no-webgl) .inside { position: relative; inset: auto; margin-top: 170vh; margin-top: 170lvh; opacity: 1; visibility: visible; }
  .is-home:not(.no-webgl) .cue { bottom: calc(100lvh - 100svh + 76px); }
  .is-home:not(.no-webgl) .skip { bottom: calc(100lvh - 100svh + 16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .is-home:not(.no-webgl) .inside { margin-top: 70vh; margin-top: 70lvh; }
}

/* The FR / EN link in the header leads to the same page in the other language */
a.top__lang { display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; }

/* Lead forms: a short form in a panel beside its heading. Each ends with what the details are used for. */
.lead .promises { margin-top: 26px; }
.lead__form { display: grid; gap: 18px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); border-radius: 28px; background: var(--surface); --field-line: #77736a; }
.lead__form .btn { justify-self: start; }
.lead__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__status { min-height: 1.5em; font-size: .95rem; font-weight: 600; }
.form__status:empty { min-height: 0; } /* stays in the page so screen readers hear it fill, takes no room until then */
.form__status:empty + .form__fine { margin-top: -18px; }
.form__fine { font-size: .85rem; line-height: 1.5; color: var(--fg2); }
.form__fine a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
[aria-invalid="true"] { border-color: #c2311a; box-shadow: 0 0 0 3px rgba(194, 49, 26, .18); }
.contact [aria-invalid="true"] { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(251, 172, 63, .28); }
.contact__apply--next { margin-top: 8px; }
.foot__privacy { margin-left: 14px; color: inherit; font-weight: 600; text-underline-offset: 3px; }

/* Mortgages: the rate request sits under the title on wide screens and after the rates on a phone */
.rates--ask .rates__text { position: static; }
.rates--ask .rates__text p { margin-bottom: 0; }
@media (min-width: 901px) {
  .rates--ask { grid-template-rows: auto 1fr; row-gap: 30px; }
  .rates--ask .rates__board { grid-column: 2; grid-row: 1 / span 2; }
  .rates--ask .rates__ask { grid-column: 1; grid-row: 2; }
}

/* Book a call: the calendar comes from his booking service, in a frame */
.book__cal { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: #fff; }
.book__cal iframe { display: block; width: 100%; height: 760px; border: 0; }
.book__alt { margin-top: 16px; }
@media (max-width: 760px) { .book__cal iframe { height: 1020px; } }