/*
 * Your Property Team: the website's own stylesheet.
 *
 * Loaded after the parent theme's app.min.css and overrides.css, so a rule here
 * wins over the same rule there. Everything in this file was approved page by
 * page on the HTML mockups of 27 to 29/10/2026 and is carried over as written;
 * a change to a pattern is a change to every page that uses it.
 *
 * Colours are the YPT design system's: navy #1B2F48, deep blue #15618C, light
 * blue #37B8FF, pale blue #8fd8ff on navy, pale panel #e6f6ff, grey text
 * #3f5468 and #5a6e83, page grey #f6f6f6.
 */

/* ---- Averta, the brand typeface (Director, 28/10/2026: Averta, not Montserrat). ----
   Served from this theme as Latin subsets in WOFF2. The licensed desktop files are never
   uploaded with the theme; assets/fonts/README.md says how the subsets are made.

   300  Averta Light     big headings and the figures band (option B, 28/10/2026)
   400  Averta Regular   reading text and small labels
   600  Averta Semibold  buttons, menu, eyebrows
   700  Averta Semibold  everything set in bold (option E, 29/10/2026: Averta has no Medium,
                         so the website uses no Averta Bold at all)

   The web licence covers all three weights, Light included (Director, 29/10/2026). */
@font-face{font-family:"Averta Std";src:url("../fonts/averta-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Averta Std";src:url("../fonts/averta-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Averta Std";src:url("../fonts/averta-regular.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Averta Std";src:url("../fonts/averta-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Averta Std";src:url("../fonts/averta-semibold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* The parent theme's rules name "Montserrat" throughout (body, buttons, forms) and this
   theme no longer loads it from Google. Giving that name to the same files means every one
   of those rules draws Averta, without rewriting the parent. The mockups did the same. */
@font-face{font-family:"Montserrat";src:url("../fonts/averta-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/averta-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/averta-regular.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/averta-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/averta-semibold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
body,.button,input,select,textarea,button{font-family:"Averta Std",sans-serif}
/* Big headings in Light: page titles, section headings and the area picker's headings. A bold
   word inside one stays bold. Article and policy subheadings (.ypt-prose) stay heavier so long
   text can be scanned. */
:is(main h1,main h2:not(.ypt-prose h2),.ypt-e-panel-head h3){font-weight:300 !important;letter-spacing:-.01em}
:is(main h1,main h2:not(.ypt-prose h2),.ypt-e-panel-head h3) :is(b,strong){font-weight:700 !important}
.ypt-figrow b{font-weight:300 !important;letter-spacing:-.02em !important}
.ypt-figrow b small{font-weight:600}
/* Averta's small letters are about 8% shorter than Montserrat's at the same size, so the
   approved sizes read smaller. font-size-adjust holds every font's x-height at Montserrat's
   share of the size (Director, 28/10/2026: "The 8% is good"). Icons keep their own size. */
html{font-size-adjust:.525}
[class*=fa-],.fa,.fas,.far,.fab,.fal{font-size-adjust:none}

/* ---- Rules already live in the Customiser's Additional CSS (22 and 23/10/2026): a child theme starts with an empty Additional CSS, so they live here now. ---- */
/* Eyebrows (the small capitals above headings): readable size and contrast, WCAG 2.2 AA. Director, 22/10/2026. */
.subtitle, .intro p.subtitle { font-size: 12px !important; letter-spacing: 2px; color: #5a6e83; }
/* On the navy sections, light blue so it reads on dark. */
.why-choose-us .subtitle, .call-to-action .subtitle, footer .subtitle { color: #8fd8ff; }
/* Intro paragraphs: the theme's pale grey (#c3c3c3) made them hard to read. Director, 22/10/2026. */
.intro p, .intro li { color: #3f5468; }
/* Fees page buttons: a clear navy hover and a keyboard focus ring. Director, 23/10/2026. */
.ypt-actions a.button.button { border: 2px solid #37B8FF; padding: calc(1.8rem - 2px) calc(3rem - 2px); color: #1B2F48; background: #37B8FF linear-gradient(135deg, #37B8FF, #61CAFD); transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out; }
.ypt-actions a.button.button-white { background: #fff; }
.ypt-actions a.button.button-white::before { display: none; }
.ypt-actions a.button.button:active, .ypt-actions a.button.button:focus-visible { background: #1B2F48; border-color: #1B2F48; color: #fff; }
@media (hover: hover) { .ypt-actions a.button.button:hover { background: #1B2F48; border-color: #1B2F48; color: #fff; } }
.ypt-actions a.button.button:focus-visible { outline: 3px solid #1B2F48; outline-offset: 3px; }

/* Buttons, site-wide: navy text on the brand blue so it can be read, solid navy on hover like the home page's "What we do" tiles, and a ring for keyboard users. Director, 23/10/2026. */
.button.button { color: #1B2F48; background: #37B8FF linear-gradient(135deg, #37B8FF, #61CAFD); border: 2px solid #37B8FF; padding: calc(1.8rem - 2px) calc(3rem - 2px); transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out; }
.button.button.button-white { background: #fff; }
.button.button-white::before { display: none; }
.button.button:active, .button.button:focus-visible { background: #1B2F48; border-color: #1B2F48; color: #fff; }
@media (hover: hover) { .button.button:hover { background: #1B2F48; border-color: #1B2F48; color: #fff; } }
.button.button:focus-visible { outline: 3px solid #1B2F48; outline-offset: 3px; }
/* Where a button already sits on navy (the "Get in touch" panel, the footer), it turns white instead. */
.call-to-action .button.button:active, .call-to-action .button.button:focus-visible { background: #fff; border-color: #fff; color: #1B2F48; }
@media (hover: hover) { .call-to-action .button.button:hover { background: #fff; border-color: #fff; color: #1B2F48; } }
.call-to-action .button.button:focus-visible, footer .button.button:focus-visible { outline-color: #8fd8ff; }
/* The footer sign-up arrow: the square turns white and the arrow navy. */
footer .footer-form .form .gform_footer .button.button { border: 0; }
footer .footer-form .form .gform_footer .button.button:active, footer .footer-form .form .gform_footer .button.button:focus-visible { background: #fff; color: transparent; }
@media (hover: hover) { footer .footer-form .form .gform_footer .button.button:hover { background: #fff; color: transparent; } }
footer .footer-form .form .gform_footer:hover::before, footer .footer-form .form .gform_footer:focus-within::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10' viewBox='0 0 5 8'%3E%3Cpath fill='%231B2F48' d='M4.867 4.311 1.201 7.871a.46.46 0 0 1-.64 0l-.428-.415a.43.43 0 0 1 0-.621L3.038 4 .132 1.165a.43.43 0 0 1 0-.621L.56.129a.46.46 0 0 1 .64 0l3.667 3.56a.43.43 0 0 1 0 .622Z'/%3E%3C/svg%3E"); }

@media only screen and (min-width: 751px) { .what-we-do .what-we-do-container .service-link { flex-direction: column; flex-wrap: nowrap; } .what-we-do .what-we-do-container .service-link svg { flex: 0 0 auto; margin: 0 0 2rem; } .what-we-do .what-we-do-container .service-link div { display: flex; flex: 1 1 auto; flex-direction: column; } .what-we-do .what-we-do-container .service-link span.subtitle { margin: auto 0 0 !important; padding-top: 1rem; } }
@media only screen and (max-width: 750px) { .what-we-do .what-we-do-container .service-link.service-link { flex: 0 0 100%; flex-wrap: nowrap; align-items: center; text-align: left; padding: 2rem; margin: 0 0 1.6rem !important; } .what-we-do .what-we-do-container .service-link.service-link:last-of-type { margin-bottom: 0 !important; } .what-we-do .what-we-do-container .service-link.service-link svg { flex: 0 0 50px; margin: 0 2rem 0 0 !important; } .what-we-do .what-we-do-container .service-link.service-link div { flex: 1 1 auto; min-width: 0; } .what-we-do .what-we-do-container .service-link.service-link h4 { margin: 0 0 .6rem; } .what-we-do .what-we-do-container .service-link.service-link span.subtitle { margin: 0 !important; } }
.what-we-do .what-we-do-container .service-link svg { pointer-events: none; }
/* Lines 32 to 34: the home page What we do tiles, every card the same shape whatever the length of its title (icon on top on wider screens, icon beside the words on phones), and no Shape tooltip on the icons. Director, 23/10/2026. */

/* ---- The fees, switching and choosing pages' own components (cards, choices, sums), as the live pages print them. ---- */
.ypt-card{background:#fff;border-radius:2px;box-shadow:0 0 1rem rgba(0,0,0,.1);padding:22px 24px}.ypt-card h3{font-size:18px;line-height:1.3;margin:0 0 8px;color:#1B2F48}.ypt-card p{margin:0;font-size:15px;line-height:1.5;color:#3f5468}a.ypt-choice{flex:1 1 230px;display:flex;align-items:center;gap:16px;padding:20px 22px;background:#fff;border-radius:2px;box-shadow:0 0 1rem rgba(0,0,0,.1);text-decoration:none;transition:.2s ease-in-out}a.ypt-choice .ypt-pin{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#e6f6ff;color:#15618C;font-size:18px;transition:.2s ease-in-out}a.ypt-choice .ypt-place{display:block;font-size:18px;font-weight:700;line-height:1.2;color:#1B2F48;transition:.2s ease-in-out}a.ypt-choice .ypt-sub{display:block;margin:4px 0 0;font-size:14px;font-weight:600;line-height:1.3;color:#15618C;transition:.2s ease-in-out}a.ypt-choice .ypt-sub i,a.ypt-link i{font-size:13px;margin-left:0;transition:.2s ease-in-out}a.ypt-choice:hover .ypt-sub i{transform:translateX(3px)}a.ypt-choice .ypt-arrow{flex:none;margin-left:auto;color:#15618C;transition:.2s ease-in-out}a.ypt-choice:hover,a.ypt-choice:focus-visible{background:#1B2F48}a.ypt-choice:hover .ypt-place,a.ypt-choice:focus-visible .ypt-place,a.ypt-choice:hover .ypt-arrow,a.ypt-choice:focus-visible .ypt-arrow{color:#fff}a.ypt-choice:hover .ypt-sub,a.ypt-choice:focus-visible .ypt-sub{color:#c9d6e3}a.ypt-choice:hover .ypt-pin,a.ypt-choice:focus-visible .ypt-pin{background:rgba(255,255,255,.14);color:#fff}a.ypt-choice:hover .ypt-arrow{transform:translateX(3px)}a.ypt-link{font-weight:700;color:#15618C;text-decoration:none}a.ypt-link:hover,a.ypt-link:focus-visible{text-decoration:underline}.ypt-actions{display:flex;flex-wrap:wrap;gap:12px;margin:36px 0 0}.ypt-actions .button{margin:0}.ypt-actions .button,.ypt-actions .button:hover,.ypt-actions .button:focus-visible,.ypt-actions .button:visited{color:#1B2F48}.ypt-actions .button.button-white{border:2px solid #37B8FF;padding:calc(1.8rem - 2px) calc(3rem - 2px)}.ypt-actions .button.button-white::before{display:none}.ypt-actions .button.button-white:hover,.ypt-actions .button.button-white:focus-visible{background:linear-gradient(135deg,#37B8FF 0%,#61CAFD 100%);color:#1B2F48}.ypt-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.ypt-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:900px){.ypt-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.ypt-grid,.ypt-grid--3{grid-template-columns:1fr}}.ypt-sum{list-style:none;margin:12px 0 0;padding:0}.ypt-sum li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #e3ebf3;font-size:15px;line-height:1.4;color:#3f5468}.ypt-sum li:first-child{border-top:0}.ypt-sum li span{color:#3f5468}.ypt-sum strong{flex:none;color:#1B2F48}.ypt-sum--cost strong{color:#15618C}.ypt-note{margin:10px 0 0;font-size:13px;color:#5a6e83}.ypt-h2{margin:56px 0 8px}
.ypt-was{display:block;margin:0 0 10px;font-size:13px;font-weight:600;line-height:1.4;color:#5a6e83}.ypt-step{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 0 14px;border-radius:50%;background:#e6f6ff;color:#15618C;font-size:16px;font-weight:700}

/* ---- Shared patterns: squish group, where we work, split, eyebrow, timeline, quad, figures band, quote, statement, link list, reviews, pen marks, ask card, buttons, call to action, footer. ---- */
/* Pattern: squish group (Material's connected button group), shared by every filter. Hover light blue,
   selected navy; the one under the pointer grows inside a fixed width. */
.ypt-squish{display:flex;gap:0;flex-wrap:nowrap;max-width:100%;margin:0 0 20px}
.ypt-squish button{flex:1 1 auto;min-width:max-content;min-height:44px;padding:0 16px;border:0;border-radius:10px;background:#eef3f8;font:600 14px "Averta Std",sans-serif;color:#1B2F48;white-space:nowrap;cursor:pointer;border:1.5px solid transparent;background-clip:padding-box;transition:flex-grow .45s cubic-bezier(.22,.8,.24,1),border-radius .45s cubic-bezier(.22,.8,.24,1),background-color .2s ease,color .2s ease}
.ypt-squish button:first-child{border-radius:22px 10px 10px 22px}
.ypt-squish button:last-child{border-radius:10px 22px 22px 10px}
.ypt-squish button[aria-pressed="true"]{background:#1B2F48;color:#fff;border-radius:22px}
@media (hover:hover){.ypt-squish:hover button{flex-grow:.85}.ypt-squish button:hover{flex-grow:2.2;border-radius:22px}.ypt-squish button:not([aria-pressed="true"]):hover{background:#37B8FF;color:#1B2F48}}
.ypt-squish button:focus-visible{outline:2px solid #15618C;outline-offset:2px}
/* When the buttons cannot share one line, they sit in even rows instead of clipping. */
.ypt-squish.stacked{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100% !important}
.ypt-squish.stacked button,.ypt-squish.stacked button:first-child,.ypt-squish.stacked button:last-child{border-radius:10px;min-width:0}
.ypt-squish.stacked button[aria-pressed="true"]{border-radius:22px}
@media (max-width:560px){.ypt-squish{display:grid;grid-template-columns:1fr 1fr 1fr;width:100% !important}.ypt-squish button{min-width:0}.ypt-squish button,.ypt-squish button:first-child,.ypt-squish button:last-child{border-radius:10px;padding:0 6px;font-size:13px}.ypt-squish button[aria-pressed="true"]{border-radius:22px}}
/* Where we work (option E). */

.ypt-where-e{padding:clamp(64px,9vw,120px) 0;background:#fff}
.ypt-where-e .container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
.ypt-e-left h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin:0 0 16px;color:#1B2F48}
.ypt-e-left h2 span{color:#15618C}
.ypt-e-left>p:not(.subtitle){margin:0 0 28px;font-size:17px;line-height:1.6;color:#3f5468}
.ypt-e-tabs{display:grid;gap:10px}
.ypt-e-tab{display:grid;grid-template-columns:44px 1fr 20px;gap:14px;align-items:center;width:100%;padding:16px 18px;border:0;border-radius:2px;background:#f6f6f6;text-align:left;cursor:pointer;font-family:"Averta Std",sans-serif;transition:background-color .2s,color .2s,transform .12s}
.ypt-e-tab .ypt-pin{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e6f6ff;color:#15618C}
.ypt-e-tab b{display:block;font-size:18px;color:#1B2F48}
.ypt-e-tab small{display:block;margin-top:2px;font-size:13px;color:#5a6e83}
.ypt-e-tab .go{color:#37B8FF;opacity:0;transform:translateX(-6px);transition:.2s}
.ypt-e-tab:hover{background:#e6f6ff}.ypt-e-tab:hover .go{opacity:1;transform:none}
.ypt-e-tab:active{transform:scale(.98)}
.ypt-e-tab[aria-selected="true"]{background:#1B2F48}
.ypt-e-tab[aria-selected="true"] b{color:#fff}.ypt-e-tab[aria-selected="true"] small{color:#c9d6e3}
.ypt-e-tab[aria-selected="true"] .ypt-pin{background:#37B8FF;color:#1B2F48}
.ypt-e-tab[aria-selected="true"] .go{opacity:1;transform:none;color:#37B8FF}
.ypt-e-tab:focus-visible{outline:2px solid #37B8FF;outline-offset:2px}
.ypt-e-panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;padding:0 0 16px;margin:0 0 24px;border-bottom:3px solid #1B2F48}
.ypt-e-panel-head h3{margin:0;font-size:clamp(24px,2.4vw,30px);color:#1B2F48}
.ypt-e-city{font:600 15px "Averta Std",sans-serif;color:#15618C;text-decoration:none}
.ypt-e-city.gap{color:#5a6e83;font-weight:500}
.ypt-e-group{margin:0 0 24px}
.ypt-e-group p.subtitle{margin:0 0 6px !important}
.ypt-e-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px}
.ypt-e-links a{display:block;padding:8px 0;border-bottom:1px solid #e3e9ef;font:600 15px "Averta Std",sans-serif;color:#1B2F48;text-decoration:none}
.ypt-e-gap{margin:0 0 24px;font-size:16px;color:#5a6e83}
html body main .ypt-where-e a .nudge,html body main .ypt-where-e a .nudge>span{color:inherit !important}
.ypt-where-e .nudge{display:inline-flex;align-items:center;gap:8px;transition:transform .2s ease}
.ypt-where-e .nudge .arr{font-style:normal;color:#37B8FF;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.ypt-where-e a:hover{color:#37B8FF}
.ypt-where-e a:hover .nudge{transform:translateX(6px)}.ypt-where-e a:hover .nudge .arr{opacity:1;transform:none}
/* Every place's panel shares one space, so picking one never changes the page's height. */
@media (min-width:901px){.ypt-e-panels{display:grid}.ypt-e-panel{grid-area:1/1}.ypt-e-panel[hidden]{display:block !important;visibility:hidden}}
@media (max-width:900px){.ypt-where-e .container{grid-template-columns:1fr}}
@media (max-width:600px){.ypt-e-links{grid-template-columns:1fr 1fr}}
/* Rule (Director, 27/10/2026): no text jumps at a switch point. The theme drops its base size 10% at 1024px
   and the banner heading from 62px to 45px; hold the base and let headings scale smoothly instead. */
html{font-size:10px !important}
.banner h1{font-size:clamp(34px,5.2vw,62px) !important;line-height:1.1 !important}
.ypt-band{background:#1B2F48;padding:clamp(56px,8vw,96px) 0}
.ypt-band h2,.ypt-band h3{color:#fff}
.ypt-band p{color:#c9d6e3}
.ypt-band .subtitle{color:#8fd8ff !important}
.ypt-pain{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin:28px 0 0}
.ypt-pain div{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:16px;line-height:1.45}
.ypt-pain .was{color:#c9d6e3;padding-right:24px}
.ypt-pain .now{color:#fff;font-weight:600}
.ypt-pain .head{padding:0 0 12px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.3)}
.ypt-pain .head.was{color:#9fb3c8}
.ypt-pain .head.now{color:#8fd8ff}
.ypt-pain div:not(.head){display:flex;gap:12px;align-items:flex-start}
.ypt-pain div i{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.ypt-pain .was i{background:rgba(255,255,255,.08);color:#9fb3c8}
.ypt-pain .now i{background:#37B8FF;color:#1B2F48}
@media (max-width:600px){.ypt-pain .head{display:none}}
@media (max-width:600px){.ypt-pain{grid-template-columns:1fr}.ypt-pain .was{border-bottom:0;padding-bottom:2px}.ypt-pain .now{padding-top:2px}}
.ypt-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));row-gap:24px;align-items:start;margin:36px -16px 0}
.ypt-figs>div{padding:4px 16px;border-left:2px solid #e3ebf3}
.ypt-figs>div:first-child{border-left:0}
.ypt-figs b{display:block;font-size:28px;font-weight:700;line-height:1.15;color:#15618C;white-space:nowrap}
.ypt-figs b small{font-size:16px;font-weight:600}
.ypt-figs span{display:block;margin:8px 0 0;font-size:15px;font-weight:600;line-height:1.4;color:#27405F}
.ypt-figs em{display:block;margin:4px 0 0;font-size:13px;font-style:normal;line-height:1.4;color:#5a6e83}
.intro .wysiwyg p.ypt-fine{margin:18px 0 0;font-size:13px !important;line-height:1.5 !important;color:#5a6e83}

/* Pattern: split. A large two-tone headline holds the left; the detail sits right. */
.ypt-split{padding:clamp(64px,9vw,120px) 0;background:#f6f6f6}
/* Every section sets its own background: some old page templates give the page a dark one. */
main{background:#f6f6f6}
.ypt-split .container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.ypt-split-head{position:sticky;top:120px}
.ypt-split-head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin:0 0 20px;color:#1B2F48}
.ypt-split-head h2 span{color:#15618C}
.ypt-split-head p{font-size:16px;line-height:1.6;color:#3f5468;margin:0}
@media (max-width:900px){.ypt-split .container{grid-template-columns:1fr}.ypt-split-head{position:static}}

/* Pattern: ruled eyebrow. The eyebrow ends in a short line. */
p.subtitle.ypt-rule{display:flex;align-items:center;gap:12px;margin:0 0 16px !important}
p.subtitle.ypt-rule::after{content:"";width:36px;height:2px;background:#37B8FF}

/* Pattern: timeline. A process told by when it happens. */
.ypt-tl{list-style:none;margin:0;padding:0;position:relative}
.ypt-tl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:#d6e6f2}
.ypt-tl li{position:relative;padding:0 0 36px 44px}
.ypt-tl li:last-child{padding-bottom:0}
.ypt-tl li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #37B8FF;box-sizing:border-box}
.ypt-tl .when{display:block;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#15618C;margin:0 0 6px}
.ypt-tl h3{font-size:20px;line-height:1.3;margin:0 0 6px;color:#1B2F48}
.ypt-tl p{font-size:15px;line-height:1.6;margin:0;color:#3f5468}

/* Pattern: quad. Four points, hairline above each, no boxes. */
.ypt-quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 40px}
.ypt-quad>div{border-top:2px solid #1B2F48;padding:18px 0 0}
.ypt-quad h3{font-size:18px;line-height:1.3;margin:0 0 8px;color:#1B2F48}
.ypt-quad p{font-size:15px;line-height:1.6;margin:0;color:#3f5468}
.ypt-quad-foot{display:flex;align-items:center;gap:16px;margin:56px 0 0 !important;padding:22px 26px;background:#e6f6ff;border-radius:2px;font-size:15px;line-height:1.55;color:#1B2F48}
.ypt-quad-foot i{flex:none;font-size:24px;color:#15618C}
.ypt-quad-foot span{color:#1B2F48 !important}
.ypt-quad .ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 0 18px;border-radius:50%;background:#e6f6ff;color:#15618C;font-size:22px}
.ypt-quad>div{padding-top:24px !important}
@media (max-width:600px){.ypt-quad{grid-template-columns:1fr;gap:28px}}

/* Split tones, and what sits in a split. */
.ypt-split.white{background:#fff}
.ypt-split.navy{background:#1B2F48}
.ypt-split.navy h2{color:#fff}
.ypt-split.navy h2 span{color:#8fd8ff}
.ypt-split.navy .ypt-split-head p{color:#c9d6e3}
.ypt-split.navy p.subtitle{color:#8fd8ff !important}
.ypt-split .ypt-split-head .ypt-actions{margin:28px 0 0}
/* Buttons that stack share one width: a column of equal buttons, never ragged. */
.ypt-split-head .ypt-actions{display:grid;grid-template-columns:minmax(0,320px);gap:12px}
.ypt-split-head .ypt-actions .button{display:block;width:100%;box-sizing:border-box;text-align:center}
.ypt-lede{font-size:clamp(19px,1.7vw,23px);line-height:1.5;font-weight:500;color:#1B2F48;margin:0 0 20px}
.ypt-body{font-size:16px;line-height:1.65;color:#3f5468;margin:0}
.ypt-headlink{margin:20px 0 0 !important}

/* Pattern: figures band. Navy, a few large figures, the dates in small print. */
.ypt-figband{background:#1B2F48;padding:clamp(56px,7vw,88px) 0}
.ypt-figband p.subtitle{color:#8fd8ff !important}
.ypt-figrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;margin:12px 0 0}
@media (max-width:1000px){.ypt-figrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ypt-figrow b{display:block;font-size:clamp(40px,4.4vw,60px);font-weight:700;line-height:1;color:#fff;letter-spacing:-1px;white-space:nowrap}
.ypt-figrow b small{font-size:.5em;font-weight:600;letter-spacing:0;color:#8fd8ff;margin-left:2px}
.ypt-figrow b small.sym{font-size:.72em;font-weight:700;vertical-align:top;position:relative;top:-.05em;margin-left:0}
.ypt-figrow b .stars{display:inline-flex;gap:3px;margin-left:10px;font-size:15px;letter-spacing:0;vertical-align:middle;position:relative;top:-.1em;color:#8fd8ff}
.ypt-figrow span{display:block;margin:14px 0 0;font-size:15px;line-height:1.45;color:#c9d6e3;max-width:220px}
.ypt-figfine{margin:36px 0 0;font-size:13px;line-height:1.5;color:#9fb3c8}
@media (max-width:440px){.ypt-figrow{gap:32px 20px}.ypt-figrow b{font-size:34px}.ypt-figrow b .stars{font-size:11px;gap:2px;margin-left:6px}}

/* Pattern: quote. A portrait beside a person's own filed words. */
.ypt-quote{padding:clamp(64px,9vw,120px) 0}
.ypt-quote .container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.ypt-quote figure{margin:0}
.ypt-quote figure{max-width:460px}
.ypt-quote figure img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:2px}
.ypt-quote blockquote{margin:0 0 18px;padding:0;border:0;font-size:clamp(26px,3vw,40px);font-weight:700;line-height:1.2;color:#1B2F48;font-style:normal}
.ypt-quote blockquote span{color:#15618C}
.ypt-quote-who{margin:0 0 24px;font-size:14px;color:#5a6e83}
.ypt-quote-who b{display:block;font-size:16px;color:#1B2F48}
.ypt-quote .ypt-actions{margin:28px 0 0}
/* Rule (Director, 27/10/2026): like buttons, a stacked image fills its column. Landscape so it stays a sensible height. */
@media (max-width:900px){.ypt-quote .container{grid-template-columns:1fr}.ypt-quote figure{max-width:none;width:100%}.ypt-quote figure img{max-height:none;aspect-ratio:4/3}}
@media (max-width:520px){.ypt-quote figure img{aspect-ratio:1/1}}

/* Pattern: statement. One centred line that the page turns on. */
.ypt-statement{padding:clamp(72px,10vw,136px) 0;text-align:center;background:#fff}
.ypt-statement .container{width:auto;max-width:860px;padding:0 16px;box-sizing:border-box}
.ypt-statement p.subtitle.ypt-rule{justify-content:center}
.ypt-statement h2{font-size:clamp(32px,4.4vw,56px);line-height:1.1;margin:0 0 24px;color:#1B2F48}
.ypt-statement h2 span{color:#15618C}
.ypt-statement p{font-size:18px;line-height:1.6;color:#3f5468;margin:0 auto;max-width:640px}

/* Pattern: link list. Ruled rows with an arrow, in place of cards. */
.ypt-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-top:1px solid #cddbe8;text-decoration:none;transition:.2s ease-in-out}
.ypt-links a:last-child{border-bottom:1px solid #cddbe8}
.ypt-links b{display:block;font-size:20px;line-height:1.25;color:#1B2F48}
.ypt-links small{display:block;margin:4px 0 0;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#15618C}
.ypt-links i{color:#15618C;transition:.2s ease-in-out}
.ypt-links a:hover,.ypt-links a:focus-visible{padding-left:10px}
.ypt-links a:hover i,.ypt-links a:focus-visible i{transform:translateX(4px)}
/* Pattern: reviews. A score beside the heading, one featured review and a grid of short ones. */
.ypt-reviews{padding:clamp(56px,7vw,96px) 0;background:#fff}
.ypt-reviews-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 32px}
.ypt-reviews-head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin:0;color:#1B2F48}
.ypt-reviews-head h2 span{color:#15618C}
.ypt-reviews-score{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ypt-reviews-score b{font-size:48px;line-height:1;color:#1B2F48}
.ypt-reviews-score span:last-child{font-size:15px;color:#3f5468}
.ypt-stars{display:inline-flex;gap:3px;color:#37B8FF;font-size:16px}
.ypt-reviews-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 64px)/3);gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:28px 0 4px;border-top:1px solid #cddbe8;align-items:start}
.ypt-reviews-row::-webkit-scrollbar{display:none}
.ypt-review{margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:14px}
.ypt-review blockquote{margin:0;padding:0;border:0;font-size:17px;line-height:1.55;font-weight:500;color:#1B2F48;font-style:normal}
.ypt-review blockquote{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.ypt-review.open blockquote{-webkit-line-clamp:unset;display:block}
.ypt-more{align-self:flex-start;margin:-4px 0 0;padding:0;border:0;background:none;font:700 14px "Averta Std",sans-serif;color:#15618C;cursor:pointer;text-decoration:underline}
.ypt-review figcaption b{display:block;font-size:14px;color:#1B2F48}
.ypt-review figcaption span{font-size:13px;color:#5a6e83}
.ypt-review figcaption i{color:#15618C;margin-right:4px}
.ypt-rv-nav{display:flex;align-items:center;gap:12px;margin:28px 0 0}
.ypt-rv-bar{position:relative;flex:1;height:2px;background:#cddbe8}
.ypt-rv-bar span{position:absolute;top:0;height:2px;background:#1B2F48;transition:left .2s}
.ypt-rv-nav button{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid #37B8FF;background:#fff;color:#1B2F48;font-size:15px;cursor:pointer;transition:.2s ease-in-out}
.ypt-rv-nav button:hover,.ypt-rv-nav button:focus-visible{background:#1B2F48;border-color:#1B2F48;color:#fff}
@media (max-width:900px){.ypt-reviews-row{grid-auto-columns:calc((100% - 32px)/2)}}
@media (max-width:600px){.ypt-reviews-row{grid-auto-columns:85%;gap:24px}}


/* Stars twinkle like the landing pages' reviews (marketing/landing-pages/src/site.css, Director 14/10/2026). */
.ypt-reviews .ypt-stars{color:#15618C;cursor:default;-webkit-tap-highlight-color:transparent}
.ypt-reviews .ypt-stars i{display:inline-block}
.ypt-stars.is-twinkling i{animation:ypt-star-twinkle 600ms ease-out both}
.ypt-stars.is-bouncing i{animation:ypt-star-bounce 400ms ease-out both}
.ypt-stars i:nth-child(2){animation-delay:110ms}
.ypt-stars i:nth-child(3){animation-delay:220ms}
.ypt-stars i:nth-child(4){animation-delay:330ms}
.ypt-stars i:nth-child(5){animation-delay:440ms}
.ypt-stars.is-bouncing i:nth-child(2){animation-delay:60ms}
.ypt-stars.is-bouncing i:nth-child(3){animation-delay:120ms}
.ypt-stars.is-bouncing i:nth-child(4){animation-delay:180ms}
.ypt-stars.is-bouncing i:nth-child(5){animation-delay:240ms}
@keyframes ypt-star-twinkle{0%{color:#15618C;transform:rotate(0) scale(1)}40%{color:#41d3ff;transform:rotate(-14deg) scale(1.3)}100%{color:#15618C;transform:rotate(0) scale(1)}}
@keyframes ypt-star-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.ypt-stars i{animation:none !important}}


/* Pattern: pen marks. One mark per section at most: underline, circle, strike or tick. */
.ypt-mark{position:relative;display:inline-block;white-space:nowrap}
.ypt-mark svg{position:absolute;pointer-events:none;overflow:visible}
.ypt-mark--ul svg{left:-2%;width:104%;bottom:-.16em;height:.32em}
.ypt-mark--circ{margin:0 .14em}.ypt-mark--circ.line-start{margin-left:0}.ypt-mark--circ svg{left:-11%;top:-8%;width:122%;height:126%}
.ypt-mark--circ path{stroke-width:2.5;transition-duration:1s}
.ypt-mark--strike{white-space:normal;display:inline}
.ypt-mark--strike svg{left:-1%;width:102%;top:50%;height:.4em;transform:translateY(-50%)}
.ypt-mark path,.ypt-pen-tick path{fill:none;stroke:#37B8FF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1)}
.ypt-pen-tick{display:inline-block;width:.9em;height:.9em;vertical-align:-.05em;margin-left:.15em;overflow:visible}
.ypt-pen-tick path{stroke-width:3.5;transition-duration:.45s}
.is-drawn .ypt-mark path,.ypt-mark.is-drawn path,.is-drawn>.ypt-pen-tick path,.ypt-pen-tick.is-drawn path{stroke-dashoffset:0}
/* In the problem and answer rows, the strike goes first, then the tick. */
.ypt-pain .was .ypt-mark{position:relative}
.ypt-pain .was .ypt-mark svg{position:absolute}
.ypt-pain .now .ypt-pen-tick{flex:none;width:22px;height:22px;margin:1px 0 0}
.ypt-pain .now .ypt-pen-tick path{transition-delay:.55s}
/* The timeline: a tick drawn over each dot as it comes into view. */
.ypt-tl li>.ypt-pen-tick{position:absolute;left:-2px;top:-3px;width:22px;height:22px;margin:0;z-index:1}
.ypt-tl li>.ypt-pen-tick path{stroke:#15618C}
@media (prefers-reduced-motion:reduce){.ypt-mark path,.ypt-pen-tick path{transition:none}}


/* A hand-drawn strike that follows the text line by line. */
.ypt-pain .was .ypt-strike{color:#c9d6e3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5 C 55 3.5, 130 7.5, 198 4' fill='none' stroke='%2337B8FF' stroke-width='2.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 58%/0% .55em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .7s cubic-bezier(.2,.7,.2,1)}
.ypt-pain .was.is-drawn .ypt-strike{background-size:100% .55em}
.ypt-pain .now .ans{color:#fff}
@media (prefers-reduced-motion:reduce){.ypt-pain .was .ypt-strike{transition:none}}


/* Problem rows: a hand-drawn cross, then the answer's tick. */
.ypt-pen-cross{flex:none;width:22px;height:22px;margin:1px 0 0;overflow:visible}
.ypt-pen-cross path{fill:none;stroke:#9fb3c8;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s cubic-bezier(.2,.7,.2,1)}
.ypt-pen-cross path+path{transition-delay:.25s}
.is-drawn>.ypt-pen-cross path{stroke-dashoffset:0}
.ypt-pain .was .prob{color:#c9d6e3}
@media (prefers-reduced-motion:reduce){.ypt-pen-cross path{transition:none}}


/* Pen marks v2: The Gallery's two-stroke tick, a double underline and a curved arrow. */
.ypt-pen-tick path.a,.ypt-pen-tick path.b{vector-effect:none;stroke-linecap:round}
.ypt-pen-tick path.a{stroke-width:16;transition-duration:.26s}
.ypt-pen-tick path.b{stroke-width:8;transition-duration:.45s;transition-delay:.24s}
.ypt-pain .now .ypt-pen-tick path.a{transition-delay:.55s}
.ypt-pain .now .ypt-pen-tick path.b{transition-delay:.79s}
.ypt-mark--ul2 svg{left:-2%;width:104%;bottom:-.3em;height:.42em}
.ypt-mark--ul2 path+path{transition-delay:.35s}
.ypt-has-arrow{position:relative;color:#15618C}
.ypt-pen-arrow{position:absolute;left:-96px;top:-58px;width:92px;height:70px;overflow:visible;pointer-events:none}
.ypt-pen-arrow path{fill:none;stroke:#37B8FF;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1)}
.ypt-pen-arrow path.head{transition-duration:.25s;transition-delay:.65s}
.ypt-pen-arrow.is-drawn path{stroke-dashoffset:0}
@media (max-width:900px){.ypt-pen-arrow{display:none}}
@media (prefers-reduced-motion:reduce){.ypt-pen-arrow path{transition:none}}

/* Reviews score: the number, stars and count stay together and wrap as one. */
.ypt-reviews-score{white-space:nowrap}
.ypt-reviews-score .ypt-stars{font-size:16px}

/* Pattern: ask card. One question, a short answer and its button, on a white card. */
.ypt-ask{padding:clamp(56px,7vw,96px) 0;background:#f6f6f6}
.ypt-ask-card{max-width:860px;margin:0 auto;padding:clamp(28px,5vw,56px);background:#fff;border-radius:2px;box-shadow:0 0 2rem rgba(0,0,0,.08)}
.ypt-ask-card h2{font-size:clamp(28px,3.4vw,44px);line-height:1.15;margin:0 0 16px;color:#1B2F48}
.ypt-ask-card p{font-size:17px;line-height:1.6;color:#3f5468;margin:0;max-width:620px}
.ypt-ask-card .ypt-actions{margin:28px 0 0}


/* Underlines follow the words line by line, so they always match the text, even when it wraps. */
.ypt-mark--ul,.ypt-mark--ul2{display:inline;white-space:normal;position:static;padding-bottom:.14em;background-repeat:no-repeat;background-position:0 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .8s cubic-bezier(.2,.7,.2,1)}
.ypt-mark--ul{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 48 4.5, 118 10.5, 197 6.2' fill='none' stroke='%2337B8FF' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");background-size:0% .3em}
.ypt-mark--ul2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 17' preserveAspectRatio='none'%3E%3Cpath d='M2 6.1 C 42.3 4.0, 93.6 7.2, 149.0 5.3 M2 10.9 C 42.3 13.0, 93.6 9.8, 149.0 11.7' fill='none' stroke='%2337B8FF' stroke-width='2.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");background-size:0% .42em}
.ypt-mark--ul.is-drawn{background-size:100% .3em}
.ypt-mark--ul2.is-drawn{background-size:100% .42em}
.ypt-mark--ul>svg,.ypt-mark--ul2>svg{display:none}
@media (prefers-reduced-motion:reduce){.ypt-mark--ul,.ypt-mark--ul2{transition:none}}


/* The ask card's arrow runs from under "rent for?" down to the buttons, re-measured whenever the width changes. */
.ypt-ask-card{position:relative}
.ypt-ask-from{color:#15618C}
.ypt-ask-arrow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ypt-ask-arrow path{fill:none;stroke:#37B8FF;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1)}
.ypt-ask-arrow .head{transition-duration:.25s;transition-delay:.75s}
.ypt-ask-arrow.is-drawn path{stroke-dashoffset:0}
.ypt-ask-arrow.off{display:none}
@media (prefers-reduced-motion:reduce){.ypt-ask-arrow path{transition:none}}


/* Rule: buttons in a group are always the same width. Side by side they share the row evenly; stacked, each takes the full width. */
.ypt-actions{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px;max-width:540px}
.ypt-actions .button{display:block;width:100%;box-sizing:border-box;text-align:center;margin:0}
.ypt-actions:has(> .button:only-of-type){max-width:320px}
.ypt-split-head .ypt-actions{grid-template-columns:minmax(0,1fr);max-width:320px}
/* Below 900px buttons stretch to fill the width: side by side while they fit, then stacked, never bunched to the left. */
@media (max-width:900px){.ypt-actions,.ypt-actions:has(> .button:only-of-type),.ypt-split-head .ypt-actions{max-width:none}.ypt-split-head .ypt-actions{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}}


/* Rule: on screens under 900px every button fills its column; in a group they share the row equally. */
@media (max-width:900px){main a.button,.ypt-footer a.button{display:block;width:100%;box-sizing:border-box;text-align:center}}
.ypt-reviews-row,.ypt-ls-row{cursor:grab;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}


/* Rule (Grant, 23/10/2026): hover on a dark background turns a button white with navy text; on a light background, navy with white text. */
.ypt-hero .button:hover,.ypt-hero .button:focus-visible,.ypt-split.navy .button:hover,.ypt-split.navy .button:focus-visible,.ypt-figband .button:hover,.ypt-footer .button:hover,.ypt-footer .button:focus-visible{background:#fff !important;background-image:none !important;border-color:#fff !important;color:#1B2F48 !important}
.ypt-hero .button:hover::before,.ypt-split.navy .button:hover::before,.ypt-footer .button:hover::before{display:none !important}

/* Pattern: call to action. Light blue band: the ask on the left, a person to talk to on the right. */
.ypt-cta{background:#e6f6ff;padding:clamp(64px,8vw,104px) 0}
.ypt-cta .container{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,80px);align-items:center}
.ypt-cta h2{font-size:clamp(32px,4vw,52px);line-height:1.1;margin:0 0 18px;color:#1B2F48}
.ypt-cta h2 span{color:#15618C}
.ypt-cta p{font-size:17px;line-height:1.6;color:#27405F;margin:0;max-width:560px}
.ypt-cta .ypt-actions{margin:32px 0 0}
.ypt-cta-card{background:#fff;border-radius:2px;padding:32px;box-shadow:0 0 1rem rgba(0,0,0,.06)}
.ypt-cta-card img{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #37B8FF;margin:0 0 16px}
.ypt-cta-card .who{margin:0 0 18px;font-size:14px;color:#5a6e83}
.ypt-cta-card .who b{display:block;font-size:18px;color:#1B2F48}
.ypt-cta-card .line{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #e3ebf3;font-size:16px;font-weight:600;color:#1B2F48;text-decoration:none}
.ypt-cta-card .line i{color:#15618C;width:18px}
.ypt-cta-card .line:hover{color:#15618C}
@media (max-width:900px){.ypt-cta .container{grid-template-columns:1fr}}


/* Closing call to action: the same card as the rent question, with Grant beside the ask. */
.ypt-cta{background:#e6f6ff;padding:clamp(56px,7vw,96px) 0}
.ypt-cta .container{display:block}
.ypt-cta-card{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);background:#fff;border-radius:2px;box-shadow:0 0 2rem rgba(0,0,0,.08);overflow:hidden;max-width:1080px;margin:0 auto;padding:0}
.ypt-cta-body{padding:clamp(28px,5vw,56px)}
.ypt-cta-body h2{font-size:clamp(30px,3.6vw,46px);line-height:1.12;margin:0 0 16px;color:#1B2F48}
.ypt-cta-body h2 span{color:#15618C}
.ypt-cta-body>p{font-size:17px;line-height:1.6;color:#3f5468;margin:0;max-width:520px}
.ypt-cta-body .ypt-actions{margin:28px 0 0}
.ypt-cta-body p.ypt-cta-direct{margin:20px 0 0;font-size:14px;color:#5a6e83}
.ypt-cta-direct a{color:#15618C;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.ypt-cta-direct a:hover{text-decoration:underline}
.ypt-cta-photo{position:relative;margin:0;min-height:100%}
.ypt-cta-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%;border:0;border-radius:0;margin:0;max-width:none}
.ypt-cta-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 16px;background:linear-gradient(to top,rgba(27,47,72,.85),rgba(27,47,72,0));font-size:13px;color:#c9d6e3}
.ypt-cta-photo figcaption b{display:block;font-size:16px;color:#fff}
@media (max-width:900px){.ypt-cta-card{grid-template-columns:1fr}.ypt-cta-photo{order:-1;aspect-ratio:3/2;min-height:0}}


/* Each person named under their side of the photo. */
.ypt-cta-photo figcaption.ypt-cta-names{display:flex;justify-content:space-between;gap:16px;padding:64px 20px 18px}
.ypt-cta-names span{display:block;font-size:13px;line-height:1.35;color:#d7e3ee}
.ypt-cta-names span:last-child{text-align:right}
.ypt-cta-names b{display:block;font-size:17px;line-height:1.25;color:#fff;margin:0 0 2px}
@media (max-width:420px){.ypt-cta-names b{font-size:15px}.ypt-cta-names span{font-size:12px}}

/* Pattern: footer. Navy, the short "who we are" beside four link columns, a slim bottom bar. */
.ypt-footer{background:#14243a;color:#c9d6e3;padding:clamp(56px,7vw,88px) 0 0;font-family:"Averta Std",sans-serif}
.ypt-footer-top{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr)) minmax(0,1.6fr);gap:40px;padding:0 0 56px}
.ypt-footer h4{margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8fd8ff}
.ypt-footer ul{list-style:none;margin:0;padding:0}
.ypt-footer li{margin:0 0 12px}
.ypt-footer a{color:#e6eef6;text-decoration:none;font-size:14px;line-height:1.45}
.ypt-footer a:hover{color:#8fd8ff}
.ypt-footer-brand img{display:block;width:64px;height:auto;margin:0 0 18px}
.ypt-footer-brand .tag{font-size:18px;font-weight:700;color:#fff;margin:0 0 10px;max-width:none;text-wrap:balance}
.ypt-footer-brand p{font-size:14px;line-height:1.6;color:#9fb3c8;margin:0 0 20px;max-width:340px}
.ypt-footer .social{display:flex;gap:10px}
.ypt-footer .social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);font-size:16px}
.ypt-footer .social a:hover{background:#37B8FF;color:#1B2F48}
.ypt-footer-contact a,.ypt-footer-contact span{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:14px;line-height:1.45;color:#e6eef6}
.ypt-footer-contact i{color:#8fd8ff;width:16px;margin-top:3px}
.ypt-footer-contact .button{display:inline-block;margin:10px 0 0;color:#1B2F48}
.ypt-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:22px 0 64px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#9fb3c8}
.ypt-footer-bottom nav{display:flex;flex-wrap:wrap;gap:20px}
.ypt-footer-bottom a{font-size:13px;color:#9fb3c8}
@media (max-width:1100px){.ypt-footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}.ypt-footer-brand,.ypt-footer-contact{grid-column:1/-1}}
.ypt-footer-contact a,.ypt-cta-card .line{overflow-wrap:anywhere}
@media (max-width:600px){.ypt-footer-top{grid-template-columns:1fr}}
.ypt-fcol summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:default}
.ypt-fcol summary::-webkit-details-marker{display:none}
.ypt-fcol summary i{display:none;color:#8fd8ff;font-size:12px;transition:transform .2s}
.ypt-footer-quick{display:none}
@media (max-width:600px){
.ypt-footer{padding-top:48px}
.ypt-footer-top{gap:0;padding-bottom:32px}
.ypt-footer-brand{text-align:center;padding:0 0 28px}
.ypt-footer-brand img{margin:0 auto 14px;width:56px}
.ypt-footer-brand p{margin:0 auto 18px}
.ypt-footer-brand .tag{font-size:17px;margin:0 auto 10px}
.ypt-footer-brand p{text-wrap:balance}
.ypt-footer .social{justify-content:center}
.ypt-footer-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 0 24px}
.ypt-footer-quick .button{display:block;text-align:center;padding-left:8px;padding-right:8px;color:#1B2F48}
.ypt-footer-quick .button i{margin-right:6px}
.ypt-fcol{border-top:1px solid rgba(255,255,255,.12)}
.ypt-fcol summary{cursor:pointer;padding:18px 0;min-height:44px}
.ypt-fcol summary h4{margin:0}
.ypt-fcol summary i{display:block}
.ypt-fcol[open] summary i{transform:rotate(180deg)}
.ypt-fcol ul{padding:0 0 14px}
.ypt-fcol li a{display:block;padding:6px 0}
.ypt-footer-contact{border-top:1px solid rgba(255,255,255,.12);padding:22px 0 0}
/* On phones the Call and Email buttons at the top stand in for these two; the address stays (it is a link when a map address is set). */
.ypt-footer-contact .button,.ypt-footer-contact a.tel,.ypt-footer-contact a.mail{display:none}
.ypt-footer-bottom{flex-direction:column;align-items:center;text-align:center;padding-bottom:72px}
.ypt-footer-bottom nav{justify-content:center}
}

/* ---- Home: hero, what we do, intro, listings, articles. ---- */
/* Home hero: the banner photo under a navy wash, the tagline with its underline. */
.ypt-hero{position:relative;min-height:clamp(520px,78vh,760px);display:flex;align-items:flex-end;padding:clamp(120px,16vw,180px) 0 clamp(56px,7vw,96px);overflow:hidden}
.ypt-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ypt-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(27,47,72,.92) 0%,rgba(27,47,72,.55) 55%,rgba(27,47,72,.15) 100%);z-index:1}
.ypt-hero .container{position:relative;z-index:2}
.ypt-hero p.subtitle{color:#8fd8ff !important}
.ypt-hero h1{font-size:clamp(38px,5.6vw,72px);line-height:1.05;margin:0 0 20px;color:#fff;max-width:900px}
.ypt-hero h1 span{color:#8fd8ff}
.ypt-hero .lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:#e6eef6;margin:0;max-width:640px}
.ypt-hero .ypt-actions{margin:32px 0 0}
.ypt-hero .ypt-actions .button.button-white{background:transparent !important;color:#fff !important;border-color:#fff !important}
.ypt-hero .ypt-actions .button.button-white:hover,.ypt-hero .ypt-actions .button.button-white:focus-visible{background:#fff !important;color:#1B2F48 !important}
/* What we do: three linked columns under a navy rule. */
.ypt-services{display:grid;grid-template-columns:1fr;gap:0}
a.ypt-service{display:block;padding:24px 0;border-top:2px solid #1B2F48;text-decoration:none;color:inherit}
a.ypt-service:last-child{border-bottom:1px solid #cddbe8}
a.ypt-service .ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#e6f6ff;color:#15618C;font-size:22px;margin:0 0 14px}
a.ypt-service h3{font-size:20px;line-height:1.3;margin:0 0 6px;color:#1B2F48}
a.ypt-service p{font-size:15px;line-height:1.6;margin:0 0 10px;color:#3f5468}
a.ypt-service .go{font-size:14px;font-weight:700;color:#15618C}
a.ypt-service .go i{transition:transform .2s;margin-left:4px}
a.ypt-service:hover .go i,a.ypt-service:focus-visible .go i{transform:translateX(4px)}
a.ypt-service:hover h3{color:#15618C}
/* Intro: the team photo beside the approved intro. */
.ypt-intro{background:#fff}
.ypt-intro h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin:0 0 20px;color:#1B2F48}
.ypt-intro h2 span{color:#15618C}
.ypt-intro .ypt-actions{margin:28px 0 0}
.ypt-intro figure img{object-position:50% 30%}
/* The live listings and articles keep their own design; their eyebrows get the rule. */
.home-featured-properties .subtitle,.home_blog .subtitle{display:flex;align-items:center;gap:12px}
/* Listings: full-size photos, a status chip, the price, the address and bed, bath and car. */
.ypt-listings{padding:clamp(56px,7vw,96px) 0;background:#fff}
.ypt-ls-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 28px}
.ypt-ls-head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin:0;color:#1B2F48}
.ypt-ls-head h2 span{color:#15618C}
/* Pattern: squish group (Material's connected button group). The one under the pointer grows and its
   neighbours give way, inside a fixed width so nothing around it moves. Hover light blue, selected navy. */
.ypt-ls-chips{display:flex;gap:0;flex-wrap:nowrap;max-width:100%}
.ypt-ls-chips button{flex:1 1 auto;min-width:0;min-height:44px;padding:0 18px;border:0;border-radius:10px;background:#eef3f8;font:600 14px "Averta Std",sans-serif;color:#1B2F48;white-space:nowrap;cursor:pointer;
  border:1.5px solid transparent;background-clip:padding-box;transition:flex-grow .45s cubic-bezier(.22,.8,.24,1),border-radius .45s cubic-bezier(.22,.8,.24,1),background-color .2s ease,color .2s ease}
.ypt-ls-chips button:first-child{border-radius:22px 10px 10px 22px}
.ypt-ls-chips button:last-child{border-radius:10px 22px 22px 10px}
.ypt-ls-chips button span{color:#5a6e83;font-weight:500;margin-left:2px;transition:color .15s}
.ypt-ls-chips button[aria-pressed="true"]{background:#1B2F48;color:#fff;border-radius:22px}
.ypt-ls-chips button[aria-pressed="true"] span{color:#8fd8ff}
@media (hover:hover){
  .ypt-ls-chips:hover button{flex-grow:.85}
  .ypt-ls-chips button:hover{flex-grow:2.2;border-radius:22px}
  .ypt-ls-chips button:not([aria-pressed="true"]):hover{background:#37B8FF;color:#1B2F48}
  .ypt-ls-chips button:not([aria-pressed="true"]):hover span{color:#1B2F48}
}
.ypt-ls-chips button:active{flex-grow:2.4}
.ypt-ls-chips button:focus-visible{outline:2px solid #15618C;outline-offset:2px}
/* Smaller screens: the group fills the width, like buttons; phones get two rows. */
@media (max-width:900px){.ypt-ls-head>.ypt-ls-chips{width:100% !important}}
@media (max-width:400px){.ypt-ls-chips button{padding:0 8px;font-size:clamp(12.5px,3.9vw,14px)}}
@media (max-width:560px){.ypt-ls-chips{display:grid;grid-template-columns:1fr 1fr;gap:3px}.ypt-ls-chips button,.ypt-ls-chips button:first-child,.ypt-ls-chips button:last-child{border-radius:10px}.ypt-ls-chips button[aria-pressed="true"]{border-radius:22px}}
.ypt-ls-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/4);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 12px}
.ypt-ls-row::-webkit-scrollbar{display:none}
a.ypt-listing{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border-radius:2px;box-shadow:0 0 1rem rgba(0,0,0,.08);overflow:hidden;transition:transform .2s,box-shadow .2s}
a.ypt-listing[hidden]{display:none}
a.ypt-listing:hover,a.ypt-listing:focus-visible{transform:translateY(-3px);box-shadow:0 8px 24px rgba(27,47,72,.16)}
a.ypt-listing .photo{position:relative;display:block;aspect-ratio:4/3;background:#e6edf3;overflow:hidden}
a.ypt-listing .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
a.ypt-listing:hover .photo img{transform:scale(1.04)}
.ypt-listing .chip{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:2px;font:700 11px/1 "Averta Std",sans-serif;letter-spacing:1.2px;text-transform:uppercase;background:#1B2F48;color:#fff}
.ypt-listing .chip--commercial{background:#15618C}
.ypt-listing .chip--leased{background:#fff;color:#1B2F48}
.ypt-listing .body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1}
.ypt-listing .price{font-size:18px;line-height:1.3;color:#1B2F48}
.ypt-listing .addr{font-size:15px;font-weight:600;line-height:1.4;color:#27405F}
.ypt-listing .addr small{display:block;margin:2px 0 0;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#15618C}
.ypt-listing .feats{display:flex;gap:16px;margin-top:auto;padding-top:12px;border-top:1px solid #e3ebf3;font-size:14px;font-weight:600;color:#1B2F48}
.ypt-listing .feats i{color:#15618C;margin-right:6px}
.ypt-listing .feats em{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ypt-ls-more{display:flex;flex-wrap:wrap;gap:12px 28px;margin:20px 0 0}
.ypt-ls-more a{font-size:14px;font-weight:700;color:#15618C;text-decoration:none}
.ypt-ls-more a i{margin-left:4px;transition:transform .2s}
.ypt-ls-more a:hover i{transform:translateX(3px)}
@media (max-width:1100px){.ypt-ls-row{grid-auto-columns:calc((100% - 48px)/3)}}
@media (max-width:760px){.ypt-ls-row{grid-auto-columns:calc((100% - 24px)/2)}}
@media (max-width:520px){.ypt-ls-row{grid-auto-columns:82%}}
/* Articles: the three latest, photo, category, title, the opening lines and a link. */
.ypt-articles{padding:clamp(56px,7vw,96px) 0}
.ypt-articles .ypt-ls-head .ypt-actions{margin:0;min-width:220px}
.ypt-articles .ypt-actions .button{text-align:center !important}
.ypt-articles-bottom{display:none !important;margin:24px 0 0}
a.ypt-article{align-self:stretch}
.ypt-articles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
a.ypt-article{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:2px;overflow:hidden;box-shadow:0 0 1rem rgba(0,0,0,.08);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
a.ypt-article:hover,a.ypt-article:focus-visible{transform:translateY(-3px);box-shadow:0 8px 24px rgba(27,47,72,.16)}
a.ypt-article .photo{display:block;aspect-ratio:3/2;overflow:hidden;background:#e6edf3}
a.ypt-article .photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
a.ypt-article:hover .photo img{transform:scale(1.04)}
a.ypt-article .body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
a.ypt-article .cat{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#15618C}
a.ypt-article b{font-size:19px;line-height:1.3;color:#1B2F48}
a.ypt-article .text{font-size:15px;line-height:1.55;color:#3f5468;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
a.ypt-article .go{margin-top:auto;padding-top:10px;font-size:14px;font-weight:700;color:#15618C}
a.ypt-article .go i{margin-left:4px;transition:transform .2s}
a.ypt-article:hover .go i{transform:translateX(4px)}
@media (max-width:900px){.ypt-articles-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 12px;cursor:grab}.ypt-articles-grid::-webkit-scrollbar{display:none}a.ypt-article{scroll-snap-align:start}.ypt-articles-top{display:none !important}.ypt-articles-bottom{display:grid !important}}
@media (max-width:600px){.ypt-articles-grid{grid-auto-columns:82%}}

/* ---- Header. ---- */
/* Pattern: header. See-through over the top photo, white once scrolled. */
body{padding-top:0 !important}
/* A page with no photo at the top starts with the white bar, and its content clears it. */
body:has(.ypt-header[data-solid]) main{padding-top:76px}
.ypt-header{position:fixed;top:0;left:0;right:0;z-index:1000;margin:0 !important;padding:0 !important;height:auto !important;transition:background .25s,box-shadow .25s}
/* One logo size, bar height and edge at every width, so nothing jumps at a switch point.
   Only phones under 600px take the 16px gutter, and under 400px a smaller logo. */
.ypt-header .bar{display:flex;align-items:center;gap:28px;max-width:1240px;margin:0 auto;padding:0 24px;height:76px}
.ypt-header .logo{flex:none;display:block;line-height:0;position:relative}
.ypt-header .logo img,.ypt-header .m-top img{height:34px;width:auto}
/* Both logos are always there, one over the other; scrolling crossfades them. */
.ypt-header .logo img{display:block;transition:opacity .25s}
.ypt-header .logo .on-light{position:absolute;left:0;top:0;opacity:0}
.ypt-header[data-state="scrolled"]{background:#fff;box-shadow:0 2px 18px rgba(27,47,72,.10)}
.ypt-header[data-state="scrolled"] .logo .on-dark{opacity:0}
.ypt-header[data-state="scrolled"] .logo .on-light{opacity:1}
.ypt-nav{flex:1}
.ypt-nav>ul{display:flex;justify-content:center;gap:4px;list-style:none;margin:0;padding:0}
.ypt-nav>ul>li{position:relative}
.ypt-nav>ul>li>a,.ypt-nav>ul>li>button{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:0;background:none;font:600 15px "Averta Std",sans-serif;color:#fff;text-decoration:none;cursor:pointer;letter-spacing:.2px}
.ypt-nav>ul>li>a{text-transform:none}
.ypt-header .phone *,.ypt-nav>ul>li>button .ypt-mark{color:inherit !important}
.ypt-nav>ul>li>button i{font-size:10px;transition:transform .2s}
.ypt-header[data-state="scrolled"] .ypt-nav>ul>li>a,.ypt-header[data-state="scrolled"] .ypt-nav>ul>li>button{color:#1B2F48}
.ypt-nav>ul>li>a:hover,.ypt-nav>ul>li>button:hover,.ypt-nav>ul>li.open>button{color:#8fd8ff}
.ypt-header[data-state="scrolled"] .ypt-nav>ul>li>a:hover,.ypt-header[data-state="scrolled"] .ypt-nav>ul>li>button:hover,.ypt-header[data-state="scrolled"] .ypt-nav>ul>li.open>button{color:#0A78B8}
.ypt-nav li.open>button i{transform:rotate(180deg)}
.ypt-nav .ypt-mark--ul{padding-bottom:.18em}
/* The old theme styles every nav list and link; nothing of it applies here. */
.ypt-header .drop,.ypt-header .drop ul,.ypt-header .panel ul,.ypt-header .m-nav ul{display:block !important;flex-direction:column}
.ypt-header .drop li,.ypt-header .panel li,.ypt-header .m-nav li{display:block !important;width:auto !important;margin:0 !important;padding:0 !important;float:none !important}
.ypt-header .drop *,.ypt-header .panel *,.ypt-header .m-nav *{text-transform:none !important;letter-spacing:normal}
.ypt-header .panel p.subtitle{text-transform:uppercase !important;letter-spacing:2px !important}
.ypt-header .panel .col{min-width:0}
/* The old theme turns every header nav into a slide-in drawer. */
.ypt-header nav.ypt-nav{position:static !important;left:auto !important;right:auto !important;top:auto !important;transform:none !important;width:auto !important;height:auto !important;background:none !important;padding:0 !important;overflow:visible !important;box-shadow:none !important}
.ypt-header nav.m-nav{position:static !important;left:auto !important;right:auto !important;top:auto !important;transform:none !important;display:block !important;width:auto !important;height:auto !important;background:none !important;padding:0 !important;overflow-y:auto !important;min-height:0;flex:1 1 auto !important;margin:8px -24px 0 !important;padding:0 24px !important;overscroll-behavior:contain}
.ypt-header .m-open span{background:currentColor !important}
/* Simple dropdowns. */
.ypt-nav .drop{position:absolute;top:100%;left:-12px;min-width:300px;list-style:none;margin:8px 0 0;padding:24px 26px;background:#fff;border-radius:2px;box-shadow:0 12px 32px rgba(27,47,72,.18);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.ypt-nav li.open>.drop{opacity:1;visibility:visible;transform:none}
.ypt-nav .drop ul{list-style:none;margin:0;padding:0}
.ypt-nav .drop p.subtitle{margin:0 0 12px !important;font-size:12px;letter-spacing:2px;color:#5a6e83 !important}
.ypt-nav .drop a{display:block;padding:8px 10px;margin:0 -10px;border-radius:2px;text-decoration:none}
.ypt-nav .drop a b{font:700 15px/1.3 "Averta Std",sans-serif;color:#1B2F48}
.ypt-nav .drop a small{display:block;margin:2px 0 0;font-size:13px;color:#5a6e83}

/* Owners: a three-column panel. */
.ypt-nav .has-panel{position:static}
.ypt-nav .panel{position:absolute;left:0;right:0;top:100%;padding:0 24px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.ypt-nav li.open>.panel{opacity:1;visibility:visible;transform:none}
.ypt-nav .panel-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1.2fr .8fr;gap:36px;padding:32px 36px;background:#fff;border-radius:2px;box-shadow:0 16px 40px rgba(27,47,72,.18)}
.ypt-nav .panel p.subtitle{margin:0 0 12px !important;font-size:12px;letter-spacing:2px;color:#5a6e83 !important}
.ypt-nav .panel ul{list-style:none;margin:0;padding:0}
.ypt-nav .panel a{display:block;padding:8px 10px;margin:0 -10px;border-radius:2px;text-decoration:none}
.ypt-nav .panel a b{font:700 15px/1.3 "Averta Std",sans-serif;color:#1B2F48}
.ypt-nav .panel a small{display:block;margin:2px 0 0;font-size:13px;color:#5a6e83}
/* Menu hover (Director, 27/10/2026, option B "arrow nudge"): the words turn blue and slide right
   as a light blue arrow appears. On navy the words turn light blue instead. */
.ypt-header .nudge{display:flex !important;align-items:center;gap:8px;transition:transform .2s ease,color .2s}
.ypt-header .nudge .arr{font-style:normal;font-weight:700;color:#37B8FF;opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease}
.ypt-header a:hover>.nudge,.ypt-header a:focus-visible>.nudge{transform:translateX(6px)}
.ypt-header a:hover>.nudge .arr,.ypt-header a:focus-visible>.nudge .arr{opacity:1;transform:none}
/* Navy at rest; light blue on hover (Director, 27/10/2026). The old theme colours every span in
   the header light blue, so the words inherit their link's colour. */
.ypt-header .nudge>span{color:inherit !important}
.ypt-nav .panel a b,.ypt-nav .drop a b{color:#1B2F48}
.ypt-nav .panel a:hover b,.ypt-nav .panel a:focus-visible b,.ypt-nav .drop a:hover b,.ypt-nav .drop a:focus-visible b{color:#37B8FF}
.ypt-header .m-group .nudge .arr{color:#37B8FF}
@media (prefers-reduced-motion:reduce){.ypt-header .nudge,.ypt-header .nudge .arr{transition:none}}
/* The end of the bar: phone and Book a call. */
.ypt-header .end{flex:none;display:flex;align-items:center;gap:18px}
.ypt-header .end>*,.ypt-nav>ul>li{flex:none;white-space:nowrap}
.ypt-header .phone{display:flex;align-items:center;gap:8px;font:700 15px "Averta Std",sans-serif;color:#fff;text-decoration:none}
.ypt-header .phone i{color:#8fd8ff}
.ypt-header[data-state="scrolled"] .phone{color:#1B2F48}
.ypt-header[data-state="scrolled"] .phone i{color:#15618C}
.ypt-header .button.cta{margin:0;padding:14px 22px !important;display:inline-block;width:auto}
.ypt-header[data-state="top"] .button.cta:hover,.ypt-header[data-state="top"] .button.cta:focus-visible{background:#fff !important;color:#1B2F48 !important;border-color:#fff !important}
.ypt-header[data-state="scrolled"] .button.cta:hover,.ypt-header[data-state="scrolled"] .button.cta:focus-visible{background:#1B2F48 !important;color:#fff !important;border-color:#1B2F48 !important}
.ypt-header .m-call,.ypt-header .m-open{display:none}
/* Phone: the house mark, a call button and the menu button. */
/* Laptops and landscape tablets: the full menu stays; the number becomes a call button. */
@media (min-width:1024px) and (max-width:1239px){
  .ypt-header .bar{gap:20px}
  .ypt-nav>ul>li>a,.ypt-nav>ul>li>button{padding:0 10px}
  .ypt-header .end{gap:12px}
  .ypt-header .phone{justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14)}
  .ypt-header[data-state="scrolled"] .phone{background:#e6f6ff}
  .ypt-header .phone span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Phones and portrait tablets. */
@media (max-width:1023px){
  .ypt-nav,.ypt-header .phone,.ypt-header .button.cta{display:none}
  .ypt-header .bar{justify-content:space-between}
  .ypt-header .m-call,.ypt-header .m-open{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:16px;text-decoration:none;cursor:pointer}
  .ypt-header[data-state="scrolled"] .m-call,.ypt-header[data-state="scrolled"] .m-open{background:#e6f6ff;color:#1B2F48}
  .ypt-header .m-open{flex-direction:column;gap:4px}
  .ypt-header .m-open span{display:block;width:18px;height:2px;background:currentColor;border-radius:1px}
}
.ypt-header .m-menu{position:fixed;inset:0;z-index:1001;display:flex;flex-direction:column;background:#1B2F48;overflow:hidden;padding:0 24px calc(16px + env(safe-area-inset-bottom))}
.ypt-header .m-menu[hidden]{display:none}
.ypt-header .m-top{display:flex;align-items:center;justify-content:space-between;height:76px;flex:none;margin:0;padding:0}
.ypt-header .m-top img{display:block}
@media (max-width:599px){.ypt-header .bar{padding:0 16px}.ypt-header .m-menu{padding-left:16px;padding-right:16px}.ypt-header nav.m-nav{margin:8px -16px 0 !important;padding:0 16px !important}}
@media (max-width:399px){.ypt-header .logo img,.ypt-header .m-top img{height:26px}.ypt-header .end{gap:10px}}
.ypt-header .m-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:16px;cursor:pointer}
/* A ring only for keyboard users, never after a tap or click. */
.ypt-header button:focus:not(:focus-visible),.ypt-header a:focus:not(:focus-visible){outline:none;box-shadow:none}
.ypt-header button:focus-visible,.ypt-header a:focus-visible{outline:2px solid #41D3FF;outline-offset:2px}
.m-nav{flex:1;margin:12px 0 24px}
.m-group,.m-link{border-bottom:1px solid rgba(255,255,255,.12)}
.m-group summary,.m-link{display:flex;align-items:center;justify-content:space-between;min-height:60px;font:700 22px "Averta Std",sans-serif;color:#fff;text-decoration:none;cursor:pointer;list-style:none}
.m-group summary::-webkit-details-marker{display:none}
.m-group summary i{font-size:14px;color:#8fd8ff;transition:transform .2s}
.m-group[open] summary i{transform:rotate(180deg)}
.m-group ul{list-style:none;margin:0;padding:0 0 14px}
.ypt-header .m-nav .m-sub{margin:6px 0 2px !important;font:700 11px "Averta Std",sans-serif !important;letter-spacing:2px !important;text-transform:uppercase !important;color:#8fd8ff !important}
.m-group .m-sub+ul{padding-bottom:8px}
.m-group li a{display:block;padding:10px 0;font:500 16px "Averta Std",sans-serif;color:#fff;text-decoration:none}
/* Phone menu (Director, 27/10/2026): white words on navy, light blue on hover. */
.ypt-header .m-group li a:active,.ypt-header .m-group li a:hover,.ypt-header .m-group li a:focus-visible,.ypt-header .m-link:hover,.ypt-header .m-group summary:hover{color:#37B8FF !important}
.ypt-header .phone:hover,.ypt-header .phone:focus-visible{color:#8fd8ff}
.ypt-header[data-state="scrolled"] .phone:hover{color:#15618C}
.m-actions{flex:none;display:grid;border-top:1px solid rgba(255,255,255,.12);grid-template-columns:1fr 1fr;gap:10px;padding:14px 0 6px;background:#1B2F48}
.m-actions .button{display:block !important;width:100% !important;text-align:center !important;margin:0 !important;padding:14px 8px !important}
.m-actions .button.button-white{background:transparent !important;color:#fff !important;border:2px solid #fff !important}
body.m-locked{overflow:hidden}
/* Round header buttons (Director, 27/10/2026): light blue on hover, a small press when tapped. */
.ypt-header .m-call,.ypt-header .m-open,.ypt-header .m-close,.ypt-header .phone{transition:background-color .2s ease,color .2s ease,transform .12s ease}
@media (hover:hover){
  .ypt-header .m-call:hover,.ypt-header .m-open:hover,.ypt-header .m-close:hover{background:#37B8FF !important;color:#1B2F48 !important}
}
@media (min-width:1024px) and (max-width:1239px) and (hover:hover){.ypt-header .phone:hover{background:#37B8FF !important;color:#1B2F48 !important}.ypt-header .phone:hover i{color:#1B2F48 !important}}
.ypt-header .m-call:active,.ypt-header .m-open:active,.ypt-header .m-close:active,.ypt-header .phone:active{transform:scale(.92)}
.ypt-header .m-call:focus-visible,.ypt-header .m-open:focus-visible,.ypt-header .m-close:focus-visible{outline:2px solid #37B8FF;outline-offset:2px}
/* The mockup's yellow strip sits under the menu. */


/* ---- House frame. ---- */
/* Pattern: house frame. One outline hangs from behind the top band, one rises from behind the footer. */
.ypt-house-host{position:relative;isolation:isolate;overflow:clip}
/* Clipped both ways: a positioned section paints over the plain sections after it, so an outline
   left to spill would sit on top of the next section's words. */
/* Nothing may make the page scroll sideways, the theme's body included. */
html,body{overflow-x:clip !important}
.ypt-house-host>.container{position:relative;z-index:1}
.ypt-house{position:absolute;z-index:-1;pointer-events:none;height:auto}
.ypt-house g[fill]{fill:#eef1f5}
.ypt-house--hang{right:0;top:0;width:clamp(420px,46vw,640px);transform:translateY(-34%)}
.ypt-house--rise{left:0;bottom:0;width:clamp(320px,34vw,480px)}
.ypt-cta.ypt-house-host .ypt-house g[fill]{fill:#d5ebf9}
/* The bands it hides behind sit above it. */
.ypt-hero,.banner,.ypt-figband,.ypt-footer{position:relative;z-index:2}
/* The banner's own copy is replaced by the one hanging into the section below. */
.banner>svg{display:none !important}
@media (max-width:760px){.ypt-house--hang{width:300px;right:-22%;transform:translateY(-20%)}.ypt-house--rise{display:none}}

/* ---- Tap-to-reveal contact links take their link's colour. ---- */
a[data-tu] .lbl,a[data-mu] .lbl{color:inherit !important}

/* ---- Photo row, ticked list, form card, contact rows, team grid, document, FAQ page. ---- */
/* Pattern: photo row. Shared with the suburb options and the recent pages. */
.ypt-row{padding:clamp(56px,8vw,104px) 0;background:#fff}
.ypt-row.grey{background:#f6f6f6}
.ypt-row .container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center}
.ypt-row.flip .container{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.ypt-row.flip .container>figure{order:2}
/* Rule (Director, 28/10/2026): every row photo is 4:3, the same width on either side, and fills its frame;
   studio shots (white backgrounds) are cropped in so the people fill it like the location photos. */
.ypt-row figure{overflow:hidden;border-radius:2px}
.ypt-row figure.studio img{transform:scale(1.4);transform-origin:50% 38%}
.ypt-row figure{margin:0}
.ypt-row figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.ypt-row h2{font-size:clamp(28px,3.2vw,42px);line-height:1.12;margin:0 0 18px;color:#1B2F48}
.ypt-row h2 span{color:#15618C}
.ypt-row .ypt-actions{margin:24px 0 0}
@media (max-width:900px){.ypt-row .container,.ypt-row.flip .container{grid-template-columns:1fr}.ypt-row.flip .container>figure{order:0}}
/* Pattern: ticked list. A light blue tick in a circle beside each commitment. */
.ypt-ticks{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.ypt-ticks li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:16px;line-height:1.55;color:#3f5468}
.ypt-ticks li>span:last-child{color:#3f5468 !important;font-weight:500}
.ypt-ticks .ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e6f6ff;color:#15618C;font-size:12px;margin-top:-1px}
.ypt-copy p{font-size:16px;line-height:1.65;color:#3f5468;margin:0 0 16px}
.ypt-copy a{color:#15618C;font-weight:600}
.ypt-copy ul{margin:0 0 16px;padding-left:20px;color:#3f5468;line-height:1.6}
.ypt-copy .ypt-note{font-size:14px;color:#5a6e83}
/* Pattern: form card. The enquiry form sits on a white card beside the words. */
.ypt-formcard{margin:0 -4px}
.ypt-formcard iframe{display:block;width:100%;min-height:280px;border:0}
/* Pattern: contact rows. Call, email and write to us, each a whole-row link. */
.ypt-contact-rows{display:grid;gap:0;margin:28px 0 0;border-top:1px solid #dbe4ec}
.ypt-contact-rows a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid #dbe4ec;text-decoration:none;color:#1B2F48}
.ypt-contact-rows .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e6f6ff;color:#15618C}
.ypt-contact-rows small{display:block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#5a6e83}
.ypt-contact-rows b{display:block;font-size:16px;line-height:1.35;overflow-wrap:break-word;color:#1B2F48}
.ypt-contact-rows a:hover b{color:#37B8FF !important}
.ypt-map{height:clamp(280px,40vw,440px);background:#e6edf3}
.ypt-map iframe{display:block;width:100%;height:100%;border:0}
/* Pattern: team grid. Portraits fill their column at every width. */
.ypt-team{padding:clamp(56px,8vw,104px) 0;background:#fff}
.ypt-team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin:36px 0 0}
@media (max-width:1100px){.ypt-team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.ypt-team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
a.ypt-person{display:block;text-decoration:none;color:#1B2F48}
a.ypt-person .photo{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#e6edf3}
a.ypt-person img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .4s ease}
a.ypt-person:hover img{transform:scale(1.04)}
a.ypt-person b{display:flex;align-items:center;gap:8px;margin:14px 0 2px;font-size:17px;transition:transform .2s,color .2s}
a.ypt-person b i{font-size:13px;color:#37B8FF;opacity:0;transform:translateX(-6px);transition:.2s}
a.ypt-person:hover b{color:#0A78B8;transform:translateX(6px)}a.ypt-person:hover b i{opacity:1;transform:none}
a.ypt-person small{display:block;font-size:14px;line-height:1.4;color:#5a6e83}
.ypt-team .ypt-ls-head h2{font-size:clamp(30px,3.4vw,44px)}
/* Team member: the person's own page opens with their portrait and words. */
.ypt-member{padding-top:clamp(40px,6vw,80px)}
.ypt-member h1{font-size:clamp(34px,4vw,52px);line-height:1.08;margin:0 0 6px;color:#1B2F48}
.ypt-member .role{margin:0 0 24px;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#15618C}
/* Pattern: document. Contents on the left, one readable column on the right. */
.ypt-doc{padding:clamp(56px,8vw,104px) 0;background:#fff}
.ypt-doc .container{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.ypt-toc{position:sticky;top:100px}
.ypt-toc summary{list-style:none;cursor:default;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#5a6e83;margin:0 0 12px;display:flex;align-items:center;gap:14px}
.ypt-toc summary::-webkit-details-marker{display:none}
.ypt-toc summary::after{content:"";width:36px;height:2px;background:#37B8FF}
.ypt-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid #e3e9ef}
.ypt-toc a{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;line-height:1.4;font-weight:600;color:#3f5468;text-decoration:none;transition:color .15s,border-color .15s}
.ypt-toc a:hover,.ypt-toc a.on{color:#0A78B8;border-left-color:#37B8FF}
.ypt-prose{max-width:720px}
.ypt-doc-title{font-size:clamp(32px,4vw,50px);line-height:1.1;margin:0 0 24px;color:#1B2F48}
.ypt-prose .updated{margin:0 0 28px;font-size:14px;color:#5a6e83}
.ypt-prose h2{scroll-margin-top:100px;margin:44px 0 14px;font-size:clamp(22px,2.2vw,28px);line-height:1.25;color:#1B2F48}
.ypt-prose h2:first-of-type{margin-top:0}
.ypt-prose h2 .n{color:#0A78B8;margin-right:10px}
.ypt-prose h3{margin:28px 0 10px;font-size:19px;color:#1B2F48}
.ypt-prose p,.ypt-prose li{font-size:16.5px;line-height:1.7;color:#3f5468}
.ypt-prose p{margin:0 0 16px}
.ypt-prose ul,.ypt-prose ol{margin:0 0 18px;padding-left:22px}
.ypt-prose a{color:#15618C;font-weight:600;overflow-wrap:anywhere}
.ypt-insight{margin:28px 0;padding:24px 28px;background:#f3f6f9;border-radius:2px}
.ypt-insight p.subtitle{margin:0 0 10px !important}
.ypt-insight p:not(.subtitle){margin:0;font-size:18px;line-height:1.6;font-weight:600;color:#1B2F48}
.ypt-prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid #37B8FF;font-size:19px;font-weight:600;color:#1B2F48}
@media (max-width:900px){.ypt-doc .container{grid-template-columns:1fr}.ypt-toc{position:static;border:1px solid #e3e9ef;border-radius:2px;padding:14px 16px}.ypt-toc summary{cursor:pointer;margin:0}.ypt-toc[open] summary{margin:0 0 12px}}
/* FAQ page: the whole list, grouped under the split's heading. */
.ypt-faqpage .accordion-item--content ul{padding-left:20px}
/* The theme's answer grey is 4.0:1; the body colour reads at AA. */
.accordion-content--inner p,.accordion-content--inner li{color:#3f5468}
.accordion-content--inner a{color:#15618C !important;font-weight:600}
.ypt-split .container>*{min-width:0}
.accordion-content--inner,.accordion-item--title{overflow-wrap:break-word}

/* ---- Alternating rows and the suburb pages. ---- */
/* Pattern: alternating rows. Photo and words side by side, the photo swapping sides each row. */
.ypt-row{padding:clamp(56px,8vw,104px) 0;background:#fff}
.ypt-row.grey{background:#f6f6f6}
.ypt-row .container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center}
.ypt-row.flip .container{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.ypt-row.flip .container>figure{order:2}
/* Rule (Director, 28/10/2026): every row photo is 4:3, the same width on either side, and fills its frame;
   studio shots (white backgrounds) are cropped in so the people fill it like the location photos. */
.ypt-row figure{overflow:hidden;border-radius:2px}
.ypt-row figure.studio img{transform:scale(1.4);transform-origin:50% 38%}
.ypt-row figure{margin:0}
.ypt-row figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.ypt-row h2{font-size:clamp(28px,3.2vw,42px);line-height:1.12;margin:0 0 18px;color:#1B2F48}
.ypt-row h2 span{color:#15618C}
.ypt-row .ypt-actions{margin:24px 0 0}
@media (max-width:900px){.ypt-row .container,.ypt-row.flip .container{grid-template-columns:1fr}.ypt-row.flip .container>figure{order:0}}
/* Pattern: stat row. The Census figures in a line, blue units, credit underneath. */
.ypt-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:8px 0 10px}
.ypt-stats b{display:block;font-size:clamp(28px,3vw,40px);line-height:1.05;color:#1B2F48}
.ypt-stats b small{font-size:.55em;color:#15618C;margin:0 1px}
.ypt-stats span{display:block;margin-top:6px;font-size:13.5px;line-height:1.35;color:#5a6e83}
.ypt-stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ypt-source{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:#5a6e83}
@media (max-width:600px){.ypt-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Option B: the guide reads like a document. */
.ypt-guide figure{margin:8px 0 28px}
.ypt-guide figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.ypt-guide .ypt-ticks{margin-top:4px}
.ypt-guide .lead{font-size:clamp(19px,1.7vw,22px);line-height:1.55;font-weight:500;color:#1B2F48;margin:0 0 28px}
/* Option C: facts first. */
.ypt-glance{padding:clamp(56px,8vw,104px) 0;background:#fff}
.ypt-glance .container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
.ypt-glance h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin:0 0 18px;color:#1B2F48}
.ypt-glance h2 span{color:#15618C}
.ypt-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ypt-fact{padding:22px 22px 20px;border-top:3px solid #1B2F48;background:#f6f6f6;border-radius:0 0 2px 2px}
.ypt-fact b{display:block;font-size:clamp(28px,3vw,38px);line-height:1.05;color:#1B2F48}
.ypt-fact b small{font-size:.55em;color:#15618C;margin:0 1px}
.ypt-fact span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:#5a6e83}
.ypt-fact.wide{grid-column:1/-1}
.ypt-fact.wide p{margin:6px 0 0;font-size:15px;line-height:1.55;color:#3f5468}
.ypt-fact.wide a{color:#15618C;font-weight:600}
@media (max-width:900px){.ypt-glance .container{grid-template-columns:1fr}}
@media (max-width:420px){.ypt-facts{grid-template-columns:1fr}}

/* ---- Answer grid, wide sections, sum cards, two ways to pay, video. ---- */
/* Pattern: answer grid. Points under navy rules, three across, two on tablets, one on phones. */
.ypt-qa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
.ypt-qa{border-top:3px solid #1B2F48;padding-top:18px}
.ypt-qa .n{display:block;font-size:13px;font-weight:700;letter-spacing:2px;color:#15618C;margin:0 0 6px}
.ypt-qa h3{font-size:18px;line-height:1.3;margin:0 0 8px;color:#1B2F48}
.ypt-qa p{font-size:15px;line-height:1.6;margin:0 0 8px;color:#3f5468}
.ypt-qa p:first-of-type:not(:last-child){color:#5a6e83}
.ypt-qa a{color:#15618C;font-weight:600}
@media (max-width:1000px){.ypt-qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ypt-qa-grid{grid-template-columns:1fr}}
.ypt-wide{padding:clamp(64px,9vw,120px) 0;background:#fff}
.ypt-wide.grey{background:#f6f6f6}
.ypt-wide .head{max-width:760px;margin:0 0 40px}
.ypt-wide h2{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin:0 0 14px;color:#1B2F48}
.ypt-wide h2 span{color:#15618C}
.ypt-wide .head p:not(.subtitle){font-size:17px;line-height:1.6;color:#3f5468;margin:0}
/* Pattern: sum cards. A worked example, figure on the right of each line. */
/* Stacked, full width: side by side they were too narrow to read (Director, 28/10/2026). */
.ypt-sums{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0 0 20px}
.ypt-sumcard{background:#fff;border-radius:2px;padding:22px 24px;box-shadow:0 0 0 1px #e3e9ef}
.ypt-sumcard h3{font-size:16px;margin:0 0 12px;color:#1B2F48}
.ypt-sumcard li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:10px 0;border-top:1px solid #e3e9ef;font-size:15px;color:#3f5468}
.ypt-sumcard li span{color:#3f5468 !important}
.ypt-sumcard ul{list-style:none;margin:0;padding:0}
.ypt-sumcard strong{color:#1B2F48;white-space:nowrap}
.ypt-sumcard.cost strong{color:#15618C}
/* Two ways to pay, side by side. */
.ypt-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 18px}
.ypt-option{padding:22px 24px;background:#fff;border-top:3px solid #37B8FF;box-shadow:0 0 0 1px #e3e9ef}
.ypt-option h3{font-size:19px;margin:0 0 8px;color:#1B2F48}
.ypt-option p{font-size:15px;line-height:1.6;margin:0;color:#3f5468}
@media (max-width:600px){.ypt-options{grid-template-columns:1fr}}
.ypt-video{display:block;width:100%;max-width:340px;aspect-ratio:9/16;border:0;border-radius:2px;margin:0 auto}

/* ---- Articles list, an article, page not found. ---- */
.ypt-artlist{padding:clamp(56px,8vw,104px) 0;background:#f6f6f6}
.ypt-artlist .ypt-ls-head{margin:0 0 32px}
.ypt-art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:1000px){.ypt-art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ypt-art-grid{grid-template-columns:1fr}}
.ypt-art-grid .ypt-article[hidden]{display:none !important}
/* A single article: title, category and picture first, then one reading column. */
.ypt-arthero{padding:clamp(40px,6vw,72px) 0 0;background:#fff}
.ypt-arthero .container{max-width:880px;width:auto;margin:0 auto;padding:0 24px;box-sizing:border-box}
@media (max-width:600px){.ypt-arthero .container{padding:0 16px}}
.ypt-arthero h1{font-size:clamp(32px,4.2vw,52px);line-height:1.1;margin:0 0 20px;color:#1B2F48}
.ypt-arthero figure{margin:28px 0 0}
.ypt-arthero figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.ypt-artbody{padding:clamp(40px,6vw,64px) 0 clamp(56px,8vw,96px);background:#fff}
.ypt-artbody .ypt-prose{max-width:720px;margin:0 auto}
.ypt-artbody .ypt-prose .disclaimer{margin-top:32px;padding-top:16px;border-top:1px solid #e3e9ef;font-size:14px;color:#5a6e83}
/* Page not found. */
.ypt-404{padding:clamp(72px,12vw,160px) 0;background:#fff;text-align:center}
.ypt-404 h1{font-size:clamp(40px,6vw,72px);line-height:1.05;margin:0 0 16px;color:#1B2F48}
.ypt-404 h1 span{color:#15618C}
.ypt-404 p.lead{font-size:19px;color:#3f5468;margin:0 auto 32px;max-width:560px}
.ypt-404 .ypt-actions{justify-content:center;max-width:560px;margin:0 auto}
.ypt-404 .ypt-links{max-width:560px;margin:48px auto 0;text-align:left}

/* ---- Suburb guides list. ---- */
.ypt-sglist{padding:clamp(56px,8vw,104px) 0;background:#f6f6f6}
.ypt-sglist .ypt-ls-head{margin:0 0 32px}
.ypt-sg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:1100px){.ypt-sg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.ypt-sg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (max-width:460px){.ypt-sg-grid{grid-template-columns:1fr}}
.ypt-sg[hidden]{display:none !important}
a.ypt-sg:not([href]){cursor:default}
a.ypt-sg:not([href]):hover{transform:none}
.ypt-sg .photo.map{overflow:hidden}
/* The map card: the suburb's map in navy with its pin, the same treatment as the map banner. */
.ypt-sg .photo.map{position:relative;background:#1B2F48;isolation:isolate}
.ypt-sg .photo.map .tiles{position:absolute;left:50%;top:50%;display:grid;mix-blend-mode:screen;opacity:.42;z-index:-1}
.ypt-sg .photo.map .tiles img{display:block;width:256px;height:256px;filter:grayscale(1) invert(1) contrast(1.6) brightness(.9);transform:none !important}
.ypt-sg .photo.map .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);font-size:30px;color:#37B8FF;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.ypt-sg .photo.map .mapname{position:absolute;left:16px;bottom:12px;font-size:18px;color:#fff;letter-spacing:.2px}
.ypt-sg-credit{margin:20px 0 0;font-size:12px;color:#5a6e83}

/* ---- Added for the theme: a photo row may carry a tall portrait frame (the quote pattern's 4:5). ---- */
.ypt-row figure.tall{max-width:460px}
.ypt-row figure.tall img{aspect-ratio:4/5;object-position:50% 18%}
@media (max-width:900px){.ypt-row figure.tall{max-width:none}.ypt-row figure.tall img{aspect-ratio:4/3}}
@media (max-width:520px){.ypt-row figure.tall img{aspect-ratio:1/1}}

/* ---- Added for the theme: words from an editor's text field. ---- */
.ypt-prose-plain p{margin:0 0 16px}
.ypt-prose-plain p:last-child{margin-bottom:0}
.ypt-prose-plain a{color:#15618C;font-weight:700}

/* ---- Menu words (Director, 29/10/2026, on the preview): white at rest, blue only on hover or tap.
   The parent theme colours every span light blue, and the nudge is a span, so it takes its link's
   colour in the phone menu (the panels' links are bold words, not spans, and keep their own). ---- */
.ypt-header .m-nav .nudge,.ypt-header .m-nav .nudge>span{color:inherit !important}
.ypt-header .m-group li a,.ypt-header .m-link{color:#fff}
.ypt-header .m-group li a:active,.ypt-header .m-link:active{color:#37B8FF !important}

/* ---- The listing lists, a single listing and the property enquiry page (approved 28/10/2026). ---- */
/* Related listings: tracks the width of a four-up card, filled from the left, never stretched. */
.ypt-related-grid{--cols:var(--cols-d);--gap:24px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 12px;margin:-4px -2px 0}
.ypt-related-grid::-webkit-scrollbar{display:none}
.ypt-related-grid>*{scroll-snap-align:start}
@media (max-width:1100px){.ypt-related-grid{--cols:3}}
@media (max-width:760px){.ypt-related-grid{--cols:2;--gap:16px}}
@media (max-width:460px){.ypt-related-grid{--cols:1}}
.ypt-related-nav{margin-top:12px}.ypt-related-nav[hidden]{display:none}
.ypt-related-all{margin:28px 0 0}
a.ypt-lsmore{display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;padding:24px;border-radius:2px;background:#1B2F48;text-decoration:none;transition:background-color .2s,transform .2s}
a.ypt-lsmore .cat{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8fd8ff !important}
a.ypt-lsmore b{display:block;margin:8px 0 18px;font-size:22px;line-height:1.25;color:#fff}
a.ypt-lsmore .go{font:600 15px "Averta Std",sans-serif;color:#37B8FF !important}
a.ypt-lsmore .go i{transition:transform .2s}
a.ypt-lsmore:hover{background:#27405F;transform:translateY(-3px)}a.ypt-lsmore:hover .go i{transform:translateX(4px)}
@media (max-width:460px){a.ypt-lsmore{min-height:0}}
.ypt-lslist{padding:clamp(56px,8vw,104px) 0;background:#f6f6f6}
.ypt-lslist .ypt-ls-head,.ypt-listings .ypt-ls-head{margin:0 0 28px}
.ypt-ls-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:1100px){.ypt-ls-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.ypt-ls-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (max-width:460px){.ypt-ls-grid{grid-template-columns:1fr}}
/* The lists' page numbers: pills, the current page navy, arrows either side. */
.ypt-ls-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:36px 0 0}
.ypt-ls-pages .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border:1.5px solid #cddbe8;border-radius:999px;background:#fff;font:600 14px "Averta Std",sans-serif;color:#1B2F48;text-decoration:none}
.ypt-ls-pages a.page-numbers:hover{border-color:#37B8FF;color:#0A78B8}
.ypt-ls-pages .page-numbers.current{background:#1B2F48;border-color:#1B2F48;color:#fff}
.ypt-ls-pages .page-numbers.dots{border:0;background:none;min-width:24px;padding:0}
/* A single listing: photos first, then the address, then the words beside the agent. */
.ypt-lgallery{position:relative;background:#1B2F48;max-width:1440px;margin:0 auto}
.ypt-lg-grid a:nth-child(n+6){display:none}
.ypt-lg-grid{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,clamp(150px,18vw,260px));gap:4px;max-width:1440px;margin:0 auto}
.ypt-lg-grid a{display:block;overflow:hidden;background:#27405F}
.ypt-lg-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ypt-lg-grid a:hover img{transform:scale(1.03)}
.ypt-lg-grid .g0{grid-row:1/3}
.ypt-lg-grid.n1{grid-template-columns:1fr}.ypt-lg-grid.n2{grid-template-columns:2fr 1fr}.ypt-lg-grid.n2 .g1{grid-row:1/3}
.ypt-lg-grid.n3{grid-template-columns:2fr 1fr}
.ypt-lg-count{position:absolute;right:16px;bottom:16px;padding:8px 14px;border-radius:20px;background:rgba(27,47,72,.85);color:#fff;font:600 13px "Averta Std",sans-serif}
.ypt-lg-count .mob{display:none}
.ypt-lg-count b,.ypt-lg-count span{color:#fff !important}
.ypt-lg-btn{display:none}
@media (max-width:760px){
  .ypt-lg-grid{grid-template-columns:none;grid-template-rows:none;grid-auto-flow:column;grid-auto-columns:100%;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .ypt-lg-grid::-webkit-scrollbar{display:none}
  .ypt-lg-grid a,.ypt-lg-grid a:nth-child(n+6){display:block;aspect-ratio:4/3;scroll-snap-align:start;scroll-snap-stop:always}
  .ypt-lg-grid .g0,.ypt-lg-grid.n2 .g1{grid-row:auto}
  .ypt-lg-count{right:12px;bottom:12px;pointer-events:none}
  .ypt-lg-count .desk{display:none}.ypt-lg-count .mob{display:inline}
  .ypt-lg-btn{display:grid;place-items:center;position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#1B2F48;font-size:15px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:opacity .2s,transform .12s}
  .ypt-lg-btn:active{transform:scale(.92)}
  .ypt-lg-btn.prev{left:12px}.ypt-lg-btn.next{right:12px}
  .ypt-lg-btn[disabled]{opacity:0;pointer-events:none}
}
.ypt-lhead{padding:clamp(32px,5vw,56px) 0 0;background:#fff}
.ypt-lhead .chip{display:inline-block;margin:0 0 14px;padding:6px 12px;border-radius:2px;background:#1B2F48;color:#fff;font:700 12px "Averta Std",sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.ypt-lhead h1{margin:0;font-size:clamp(28px,3.6vw,46px);line-height:1.12;color:#1B2F48}
.ypt-lhead h1 small{display:block;margin-top:6px;font-size:.42em;letter-spacing:2px;text-transform:uppercase;color:#15618C}
.ypt-lfeats{display:flex;flex-wrap:wrap;gap:10px 28px;margin:22px 0 0;padding:18px 0 0;border-top:1px solid #e3e9ef;font-size:16px;color:#3f5468}
.ypt-lfeats span{color:#3f5468 !important}
.ypt-lfeats i{color:#15618C;margin-right:8px}
.ypt-lfeats b{color:#1B2F48}
.ypt-lbody{padding:clamp(32px,5vw,56px) 0 clamp(56px,8vw,96px);background:#fff}
.ypt-lbody .container{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,72px);align-items:start}
/* Rule (Director, 28/10/2026): pills in a group are all one size, set by the group, never by their words. */
.ypt-ljump{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin:18px 0 0;max-width:calc(100% - 340px - clamp(32px,5vw,72px))}
.ypt-ljump a{display:flex;justify-content:center;white-space:nowrap;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1.5px solid #cddbe8;border-radius:22px;font:600 14px "Averta Std",sans-serif;color:#1B2F48;text-decoration:none;transition:background-color .2s,border-color .2s,transform .12s}
.ypt-ljump a i{color:#15618C}
.ypt-ljump a:hover{background:#37B8FF;border-color:#37B8FF}.ypt-ljump a:hover i{color:#1B2F48}
.ypt-ljump a:active{transform:scale(.96)}
@media (max-width:600px){.ypt-ljump{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}.ypt-ljump a{padding:0 8px;font-size:13px;gap:6px}}
.ypt-lmain h3[id]{scroll-margin-top:96px}
@media (max-width:600px){.ypt-ljump:has(a:nth-child(4)){grid-template-columns:1fr 1fr}.ypt-ljump:has(a:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}}
/* School catchments (Director, 29/10/2026): eyebrow, heading, one row a layer, the credit in small print. */
.ypt-lschools-wrap{margin:32px 0 0;scroll-margin-top:96px}
.ypt-lschools-wrap .subtitle{margin-bottom:6px}
.ypt-lmain .ypt-lschools-wrap h3{margin-top:0}
.ypt-lfacts.ypt-lschools{grid-template-columns:1fr;margin-bottom:0}
.ypt-lschools dd{font-weight:700;color:#1B2F48}
.ypt-lschools-credit{margin-top:12px}
.ypt-lschools-credit a{color:#15618C;text-decoration:underline}
@media (max-width:600px){.ypt-lfacts.ypt-lschools>div{flex-direction:column;align-items:flex-start;gap:2px}.ypt-lfacts.ypt-lschools dd{text-align:left}}
.ypt-lfloor-link{position:relative;display:block;width:100%;text-decoration:none}
.ypt-lfloor-link span{position:absolute;right:10px;bottom:10px;padding:6px 12px;border-radius:16px;background:rgba(27,47,72,.85);color:#fff !important;font:600 12.5px "Averta Std",sans-serif}
.ypt-lbody .container>*{min-width:0}
/* Rule (Director, 28/10/2026): once the agent card drops out of the side column, the floor plan, map and tap
   buttons fill the width, like images and buttons do. */
/* Rule (Director, 28/10/2026): the floor plan and the map always fill the column they sit in, at every width; the tap
   pills line up with that column, and fill the width once the agent card drops below. */
@media (max-width:900px){.ypt-ljump{max-width:none}}
.ypt-lmain{overflow-wrap:break-word}
.ypt-lmain p{overflow-wrap:anywhere}
.ypt-lmain h3{margin:32px 0 12px;font-size:20px;color:#1B2F48}
.ypt-lfacts{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;margin:0 0 18px;border-top:1px solid #e3e9ef}
.ypt-lfacts>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #e3e9ef;min-width:0}
.ypt-lfacts dt{font-size:15px;color:#5a6e83}
.ypt-lfacts dd{margin:0;font-size:15px;font-weight:700;color:#1B2F48;text-align:right;overflow-wrap:anywhere}
@media (max-width:600px){.ypt-lfacts{grid-template-columns:1fr}}
.ypt-lextras .ypt-ticks{grid-template-columns:1fr 1fr;column-gap:24px}
@media (max-width:460px){.ypt-lextras .ypt-ticks{grid-template-columns:1fr}}
.ypt-lchips span{padding:8px 14px;border-radius:20px;background:#f3f6f9;font:600 14px "Averta Std",sans-serif;color:#1B2F48}
.ypt-lfloor{display:block;width:100%;border:1px solid #e3e9ef;border-radius:2px;background:#fff}
.ypt-lmap{margin:4px 0 14px;aspect-ratio:16/9;width:100%;border-radius:2px;overflow:hidden;background:#e6edf3}
.ypt-lmap iframe{display:block;width:100%;height:100%;border:0}
/* The preview: our own street map from Mapbox in the website's colours (navy ground #1B2F48, pale blue
   #8fd8ff streets and names), with the pale blue pin and the Open map button over it, as the YPT design
   system's "Map preview" card shows it (preview/website-map-preview.html). The picture fills the box
   and sits behind the pin and the button; with no picture the navy ground alone shows. */
.ypt-lmap--preview{position:relative;isolation:isolate;background:#1B2F48;cursor:pointer}
.ypt-lmap--preview .ypt-lmap-pic{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;object-fit:cover}
.ypt-lmap--preview .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);font-size:42px;color:#8fd8ff;filter:drop-shadow(0 0 1px #1B2F48) drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.ypt-lmap--preview .credit{position:absolute;right:8px;bottom:6px;font-size:10.5px;color:#c9d6e3}
.ypt-lmap-open{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:22px;background:#8fd8ff;color:#1B2F48 !important;font:600 14px "Averta Std",sans-serif;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:background-color .2s,transform .12s}
.ypt-lmap--preview:hover .ypt-lmap-open{background:#fff}
.ypt-lmap-open:active{transform:translateX(-50%) scale(.95)}
.ypt-ldir{font:600 15px "Averta Std",sans-serif;color:#15618C;text-decoration:none}
.ypt-lnote{margin:24px 0 0;font-size:13px;line-height:1.55;color:#5a6e83}
/* Open homes: a ruled list under the key features, one time a line with a calendar (Director, 29/10/2026). */
.ypt-lopen{margin:32px 0 0;scroll-margin-top:96px}
.ypt-lopen .subtitle{margin-bottom:6px}
.ypt-lopen ul{list-style:none;margin:0;padding:0;border-top:1px solid #e3e9ef}
.ypt-lopen li{display:flex;align-items:center;gap:14px;min-height:48px;padding:10px 0;border-bottom:1px solid #e3e9ef;font:600 16px "Averta Std",sans-serif;color:#1B2F48}
.ypt-lopen li i{flex:0 0 auto;font-size:18px;color:#15618C}
/* The listing's video: the service pages' band, but 16:9 and wider. */
.ypt-lvideo .head h2{color:#1B2F48}
.ypt-video--wide{max-width:960px;aspect-ratio:16/9;box-shadow:0 0 2rem rgba(0,0,0,.08)}
.ypt-video--embed{position:relative;overflow:hidden;background:#1B2F48}
.ypt-video--embed iframe,.ypt-video--embed video{position:absolute;inset:0;width:100%;height:100%;border:0}
.ypt-agent{position:sticky;top:100px;padding:24px;background:#fff;border-radius:2px;box-shadow:0 0 2rem rgba(0,0,0,.08);text-align:center}
.ypt-agent .photo{display:block;width:120px;height:120px;margin:0 auto 14px;border-radius:50%;overflow:hidden;border:3px solid #37B8FF}
.ypt-agent img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ypt-agent b{display:block;font-size:19px;color:#1B2F48}
.ypt-agent small{display:block;margin:2px 0 18px;font-size:14px;color:#5a6e83}
.ypt-agent .ypt-actions{display:grid !important;grid-template-columns:1fr !important;gap:10px;margin:0}
.ypt-agent .ypt-actions .button{width:100% !important;margin:0 !important}
.ypt-agent .mail{margin:14px 0 0;font-size:14px}.ypt-agent .mail a{color:#15618C;overflow-wrap:anywhere}
@media (max-width:900px){.ypt-lbody .container{grid-template-columns:1fr}.ypt-agent{position:static;order:-1}}

/* ---- The property enquiry page. ---- */
/* The enquiry page: the property on the left, the form on the right; one column on phones,
   the property first. Fields, pills and the send button fill their column. */
.ypt-enq{padding:clamp(32px,5vw,64px) 0 clamp(56px,8vw,96px);background:#f6f6f6}
.ypt-enq .container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:start}
.ypt-enq-prop{position:sticky;top:100px;background:#fff;border-radius:2px;box-shadow:0 0 2rem rgba(0,0,0,.08);overflow:hidden}
.ypt-enq-prop .photo{display:block;aspect-ratio:3/2;overflow:hidden;background:#e6edf3}
.ypt-enq-prop .photo img{display:block;width:100%;height:100%;object-fit:cover}
.ypt-enq-prop .info{padding:20px 22px 18px}
.ypt-enq-prop .chip{display:inline-block;margin:0 0 10px;padding:5px 10px;border-radius:2px;background:#1B2F48;color:#fff;font:700 11px "Averta Std",sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.ypt-enq-prop .addr{display:block;font-size:20px;line-height:1.25;color:#1B2F48}
.ypt-enq-prop small{display:block;margin:4px 0 0;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#15618C}
.ypt-enq-prop .ypt-lfeats{margin:14px 0 0;padding:12px 0 0;font-size:15px}
.ypt-enq-prop .back{display:inline-block;margin:14px 0 0;font:600 14px "Averta Std",sans-serif;color:#15618C;text-decoration:none}
.ypt-enq-agent{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:16px 22px 20px;border-top:1px solid #e3e9ef}
.ypt-enq-agent .ph{width:56px;height:56px;border-radius:50%;overflow:hidden;border:2px solid #37B8FF}
.ypt-enq-agent .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ypt-enq-agent b{display:block;font-size:16px;color:#1B2F48}
.ypt-enq-agent small{display:block;font-size:13px;color:#5a6e83}
.ypt-enq-agent .acts{display:flex;gap:16px;margin:6px 0 0}
.ypt-enq-agent .acts a{font:600 14px "Averta Std",sans-serif;color:#15618C;text-decoration:none}
.ypt-enq-form{background:#fff;border-radius:2px;box-shadow:0 0 2rem rgba(0,0,0,.08);padding:clamp(22px,3vw,36px)}
.ypt-enq-form h1{margin:0 0 24px;font-size:clamp(26px,3vw,36px);line-height:1.15;color:#1B2F48}
.ypt-enq-form h1 span{color:#15618C}
.ypt-enq-form fieldset{border:0;margin:0 0 18px;padding:0}
.ypt-enq-form legend{margin:0 0 10px;font:600 15px "Averta Std",sans-serif;color:#1B2F48}
/* Pills: all one size, set by the group (Director, 28/10/2026). */
.ypt-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ypt-pill input{position:absolute;opacity:0;pointer-events:none}
.ypt-pill span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border:1.5px solid #cddbe8;border-radius:22px;font:600 14px "Averta Std",sans-serif;color:#1B2F48;text-align:center;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .12s}
.ypt-pill span:hover{background:#37B8FF;border-color:#37B8FF}
.ypt-pill span i{width:0;margin:0;overflow:hidden;font-size:12px;color:#8fd8ff;transition:width .2s,margin .2s}
.ypt-pill input:checked+span{background:#1B2F48;border-color:#1B2F48;color:#fff}
.ypt-pill input:checked+span i{width:14px;margin-right:8px}
.ypt-enq-form legend em{font-style:normal;font-weight:500;font-size:13px;color:#5a6e83;margin-left:6px}
.ypt-pill input:focus-visible+span{outline:2px solid #15618C;outline-offset:2px}
.ypt-pill span:active{transform:scale(.97)}
.ypt-enq-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ypt-field{display:block;margin:0 0 14px}
.ypt-field>span{display:block;margin:0 0 6px;font:600 14px "Averta Std",sans-serif;color:#1B2F48}
.ypt-field em{font-style:normal;font-weight:500;color:#5a6e83}
.ypt-field input,.ypt-field textarea{display:block;width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border:1.5px solid #cddbe8;border-radius:10px;background:#fff;font:500 16px "Averta Std",sans-serif;color:#1B2F48;transition:border-color .2s,box-shadow .2s}
.ypt-field textarea{resize:vertical}
.ypt-field input:focus,.ypt-field textarea:focus{outline:none;border-color:#37B8FF;box-shadow:0 0 0 3px rgba(55,184,255,.25)}
.ypt-enq-send{display:block !important;width:100% !important;margin:6px 0 0 !important;border:0;cursor:pointer}
.ypt-enq-note{margin:14px 0 0;font-size:14px;color:#3f5468}
.ypt-enq-note i{color:#15618C;margin-right:6px}
.ypt-enq-note.small{margin-top:6px;font-size:13px;color:#5a6e83}.ypt-enq-note a{color:#15618C}
.ypt-enq-agent small{margin:0;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:#5a6e83}
/* Stacked: the property becomes a compact strip so the form starts near the top. */
@media (max-width:900px){
  .ypt-enq .container{grid-template-columns:1fr;gap:16px}
  .ypt-enq-prop{position:static;display:grid;grid-template-columns:120px 1fr}
  .ypt-enq-prop .photo{aspect-ratio:auto;height:100%;min-height:120px}
  .ypt-enq-prop .info{padding:14px 16px}
  .ypt-enq-prop .addr{font-size:17px}
  .ypt-enq-prop .ypt-lfeats{margin:8px 0 0;padding:0;border:0;font-size:14px;gap:6px 16px}
  .ypt-enq-prop .back{margin:8px 0 0;font-size:13px}
  .ypt-enq-prop .chip{margin:0 0 6px}
  .ypt-enq-agent{grid-column:1/-1;padding:12px 16px}
}
@media (max-width:420px){.ypt-enq-prop{grid-template-columns:96px 1fr}.ypt-enq-prop .ypt-lfeats span{font-size:13px}}
@media (max-width:520px){.ypt-enq-row{grid-template-columns:1fr;gap:0}}

/* ---- The map preview's credit line: Mapbox's attribution beside the picture (its terms, when the
   picture's own is off), or the bracketed gap when there is no picture. ---- */
.ypt-lmap--preview .credit{color:#c9d6e3 !important;font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.ypt-lmap--preview .credit a{color:inherit !important;text-decoration:none;margin-left:6px}
.ypt-lmap--preview .credit a:hover{text-decoration:underline}
/* The Contact page's map preview fills the band's height instead of a 16:9 box. */
.ypt-map--preview{background:#1B2F48}
.ypt-map .ypt-lmap--wide{margin:0;aspect-ratio:auto;height:100%;border-radius:0}
.ypt-map .ypt-lmap--wide .pin{top:50%}
/* The enquiry page without a property (no ?pid): the form alone, one readable column. */
.ypt-enq .container.ypt-enq--alone{grid-template-columns:minmax(0,1fr);max-width:820px}
/* Gravity Forms' own fields, when the plugin prints the form, dressed like the mockup's. */
.ypt-enq-form .gform_wrapper .gfield_label{display:block;margin:0 0 6px;font:600 14px "Averta Std",sans-serif;color:#1B2F48}
.ypt-enq-form .gform_wrapper .gfield_required{display:none}
.ypt-enq-form .gform_wrapper input[type=text],.ypt-enq-form .gform_wrapper input[type=email],.ypt-enq-form .gform_wrapper input[type=tel],.ypt-enq-form .gform_wrapper textarea{display:block;width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border:1.5px solid #cddbe8;border-radius:10px;background:#fff;font:500 16px "Averta Std",sans-serif;color:#1B2F48}
.ypt-enq-form .gform_wrapper input:focus,.ypt-enq-form .gform_wrapper textarea:focus{outline:none;border-color:#37B8FF;box-shadow:0 0 0 3px rgba(55,184,255,.25)}
.ypt-enq-form .gform_wrapper .gfield{margin:0 0 14px}
/* The form's own copy of "What would you like to know?" is hidden: the pills above the form are the choice, and the script keeps the field in step. */
.ypt-enq-form .gform_wrapper .gfield.ypt-enq-mirrored{display:none}
.ypt-enq-form .gform_wrapper .gform_required_legend{display:none}
.ypt-enq-form .gform_wrapper .gform_footer{margin:6px 0 0;padding:0}
.ypt-enq-form .gform_wrapper .gform_button{display:block;width:100%;margin:0;border:0;cursor:pointer}

/* ---- Home hero (Director, 29/10/2026): the underlined words always start the second line. ---- */
.ypt-hero h1>span{display:block}

/* ---- Footer logo (Director, 29/10/2026): the horizontal lockup, left-aligned, on wide screens; the
   stacked mark in the centred phone layout. ---- */
.ypt-footer-brand img.on-wide{display:block;width:240px;height:auto;margin:0 0 18px}
.ypt-footer-brand img.on-narrow{display:none}
@media (max-width:600px){.ypt-footer-brand img.on-wide{display:none}.ypt-footer-brand img.on-narrow{display:block;width:56px;margin:0 auto 14px}}

/* ---- Footer contact (Director, 29/10/2026): the icons sit in one fixed column, centred, so the three lines line up. ---- */
.ypt-footer-contact a,.ypt-footer-contact span{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
.ypt-footer-contact i{width:20px;margin-top:3px;text-align:center;font-size:14px}

/* ---- Menus (Director, 29/10/2026): every dropdown opens under its own word, About included. ---- */
.ypt-nav>ul>li .drop{left:-12px;right:auto}

/* ---- Footer logo on phones (Director, 29/10/2026): the words go with the mark. The design system has no
   stacked lockup yet, so the horizontal lockup sits centred until one is added there and copied across. ---- */
@media (max-width:600px){.ypt-footer-brand img.on-wide{display:block;width:220px;margin:0 auto 18px}.ypt-footer-brand img.on-narrow{display:none}}

/* ---- Property enquiry (Director, 29/10/2026): on wide screens the address takes the second line; the
   form's labels are navy, not the parent's light blue. ---- */
@media (min-width:901px){.ypt-enq-form h1>span{display:block}}
.ypt-enq-form .gfield_label,.ypt-enq-form label{color:#1B2F48}
.ypt-enq-form .gfield_required{display:none}

/* ---- Footer logo on phones (Director, 29/10/2026): the design system's stacked lockup on navy, centred. ---- */
@media (max-width:600px){.ypt-footer-brand img.on-wide{display:none}.ypt-footer-brand img.on-narrow{display:block;width:200px;height:auto;margin:0 auto 18px}}

/* ---- Phone menu (Director, 29/10/2026): the lines of the menu button are white over the photo and navy
   once scrolled or on the blue hover (the parent colours every span light blue); the menu fades and
   settles in rather than snapping open. ---- */
.ypt-header .m-open span{background:#fff !important}
.ypt-header[data-state="scrolled"] .m-open span{background:#1B2F48 !important}
@media (hover:hover){.ypt-header .m-open:hover span{background:#1B2F48 !important}}
.ypt-header .m-menu{opacity:0;transform:translateY(-10px);transition:opacity .28s ease,transform .28s ease}
.ypt-header .m-menu.is-open{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ypt-header .m-menu{transition:none;transform:none}}

/* ---- Old-field photo rows: a portrait kept to its top, so a face is never cropped away. ---- */
.ypt-row figure.top img{object-position:50% 12%}

/* ---- Header over a photo (Director, 29/10/2026): the parent paints every header white on the archive pages;
   ours stays see-through until the page scrolls. ---- */
.ypt-header[data-state="top"]{background:transparent !important;box-shadow:none}

/* ---- Footer contact (Director, 31/10/2026): on wide screens the words line up with the Contact heading, the
   icons sit in a gutter to their left, and the email breaks only after the @, never inside a word. On phones
   and tablets the block lines up with the Owners, Explore and Properties groups above it: the heading and the
   icons start at the same left edge as those headings, nothing indented from them. ---- */
.ypt-footer-contact a,.ypt-footer-contact span{margin-left:-32px;overflow-wrap:normal;word-break:normal}
.ypt-footer-contact a.mail{overflow-wrap:normal}
@media (max-width:1100px){.ypt-footer-contact a,.ypt-footer-contact span{margin-left:0}.ypt-footer-contact h4{padding-left:0}}

/* ---- A photo row without a photo (31/10/2026): the words take the whole width, as the original theme printed
   them, so a page's old words that carry their own cards and grids are not squeezed into half a row. ---- */
.ypt-row.no-photo .container,.ypt-row.no-photo.flip .container{grid-template-columns:1fr}

/* ---- Figures band (Director, 31/10/2026): the five stars beside the rating are the brand's light blue (the
   stars are a span, which the earlier small.stars rule never matched, so they took the figure's white), and the
   degree sign on 360° is a step larger so it reads at every size. ---- */
.ypt-figrow b .stars,.ypt-figrow b .stars i{color:#8fd8ff !important}

/* ---- Property enquiry (31/10/2026): the form's labels stay navy whatever the plugin's own theme or the
   parent's rules say (the live form printed them light blue), and the pills' boxes stay reachable. ---- */
.ypt-enq-form .gform_wrapper .gfield_label,.ypt-enq-form .gform_wrapper label,.ypt-enq-form .gform_wrapper legend,.ypt-enq-form .gform_wrapper .gfield_label span{color:#1B2F48 !important}

/* ---- Hand-drawn full stop (Director, 31/10/2026): the stop that ends a two-tone heading is a pen dab in
   the brand blue, drawn in like the underlines and circles. ---- */
.ypt-dot{position:relative;display:inline-block;width:.2em;height:.2em;margin-left:.02em;vertical-align:baseline}
.ypt-dot .ypt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ypt-dot svg{position:absolute;left:-.03em;bottom:-.02em;width:.26em;height:.26em;overflow:visible}
.ypt-dot path{fill:none;stroke:#37B8FF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s cubic-bezier(.2,.7,.2,1) .35s}
.ypt-dot.is-drawn path,.is-drawn .ypt-dot path{stroke-dashoffset:0}
.ypt-mark--ul .ypt-dot svg,.ypt-mark--ul2 .ypt-dot svg{bottom:.02em}
@media (prefers-reduced-motion:reduce){.ypt-dot path{transition:none;stroke-dashoffset:0}}
/* Talk to us: the buttons swap the hero's pattern in reverse (Director, 31/10/2026). The light blue
   one goes white when hovered, the white one goes light blue; neither goes navy. */
.ypt-cta .ypt-actions a.button.button:hover,.ypt-cta .ypt-actions a.button.button:active,.ypt-cta .ypt-actions a.button.button:focus-visible{background:#fff;background-image:none;border-color:#37B8FF;color:#1B2F48}
.ypt-cta .ypt-actions a.button.button-white:hover,.ypt-cta .ypt-actions a.button.button-white:active,.ypt-cta .ypt-actions a.button.button-white:focus-visible{background:#37B8FF linear-gradient(135deg,#37B8FF,#61CAFD);border-color:#37B8FF;color:#1B2F48}
/* The hero's words sit in the same 1020px column as every band below (Director, 31/10/2026: "align with
   Our numbers"), so the parent's container width is left alone; it used to be stretched to the full 90%. */
/* The last word of a two-tone heading and its drawn stop never part (see ypt_dot_end()). */
.ypt-keep{white-space:nowrap}
/* Listing photo lightbox (Director, 31/10/2026). Navy backdrop, the photo as large as the screen allows,
   a snap-scrolling strip for swipes and the arrow buttons, the count in the corner. */
.ypt-lb{position:fixed;inset:0;z-index:100000;background:rgba(27,47,72,.97);display:flex;align-items:center;justify-content:center}
.ypt-lb[hidden]{display:none}
.ypt-lb-open,.ypt-lb-open body{overflow:hidden}
.ypt-lb-strip{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:0}
.ypt-lb-strip::-webkit-scrollbar{display:none}
.ypt-lb-slide{flex:0 0 100%;width:100%;height:100%;margin:0;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;padding:72px 16px 64px;box-sizing:border-box}
.ypt-lb-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.35);background:#27405F}
.ypt-lb-close,.ypt-lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(27,47,72,.6);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.ypt-lb-close:hover,.ypt-lb-btn:hover,.ypt-lb-close:focus-visible,.ypt-lb-btn:focus-visible{background:#fff;border-color:#fff;color:#1B2F48}
.ypt-lb-close:focus-visible,.ypt-lb-btn:focus-visible{outline:3px solid #8fd8ff;outline-offset:3px}
.ypt-lb-close{top:16px;right:16px}
.ypt-lb-btn{top:50%;transform:translateY(-50%)}
.ypt-lb-btn.prev{left:16px}.ypt-lb-btn.next{right:16px}
.ypt-lb-btn:disabled{opacity:.3;cursor:default}
.ypt-lb-btn:disabled:hover{background:rgba(27,47,72,.6);border-color:rgba(255,255,255,.7);color:#fff}
.ypt-lb-count{position:absolute;top:24px;left:20px;padding:8px 14px;border-radius:20px;background:rgba(255,255,255,.12);color:#fff;font:600 14px "Averta Std",sans-serif}
.ypt-lb-count b{font-weight:700}
@media (max-width:600px){.ypt-lb-slide{padding:72px 0 80px}.ypt-lb-slide img{border-radius:0}.ypt-lb-btn{top:auto;bottom:16px;transform:none}.ypt-lb-btn.prev{left:16px}.ypt-lb-btn.next{right:16px}}
/* Sound familiar?: the switching paragraph and its button sit under the problem-and-answer rows (Director, 31/10/2026). */
.ypt-split.navy .ypt-switch-after{color:#c9d6e3;margin:28px 0 0;font-size:17px;line-height:1.6}
.ypt-split.navy .ypt-switch-after+.ypt-actions{margin-top:20px}
/* People photos keep their heads (Director, 31/10/2026, from a phone): a photo cropped to the row's box favours
   its upper part, and the studio close-up zooms far less on a phone, where the box is wide and short. */
.ypt-row figure img{object-position:50% 28%}
@media (max-width:900px){.ypt-row figure.studio img{transform:scale(1.12);transform-origin:50% 22%;object-position:50% 15%}}