/* Ardor Care – inner pages. Loaded after style.css; reuses its tokens, buttons, fields and footer. */

/* ---------- Page hero ---------- */
.page-hero { position: relative; background: var(--night); color: #fff; isolation: isolate; overflow: hidden; }
.page-hero-inner { display: grid; grid-template-columns: minmax(0, 720px); min-height: min(540px, 68vh); }
.page-hero-text { padding: calc(96px + clamp(1.5rem, 3vw, 2.5rem)) 0 clamp(2.5rem, 4.5vw, 4rem); align-self: end; }
.page-hero-media { position: absolute; inset: 0; z-index: -1; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 48, 75, .75) 0%, rgba(18, 48, 75, 0) 22%), linear-gradient(90deg, rgba(18, 48, 75, .92) 0%, rgba(18, 48, 75, .7) 38%, rgba(18, 48, 75, .1) 72%), linear-gradient(0deg, rgba(18, 48, 75, .6) 0%, rgba(18, 48, 75, 0) 45%); }
.crumbs { display: flex; flex-wrap: wrap; gap: .3rem .2rem; font-size: .78rem; letter-spacing: 0; color: rgba(255, 255, 255, .6); margin-bottom: 2.2rem; }
.crumbs a { text-decoration: none; transition: color .25s; }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: .2rem; color: rgba(255, 255, 255, .35); }
.page-hero .kicker { color: var(--sky); display: flex; align-items: center; gap: .8rem; }
.page-hero .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.page-hero h1 { font-size: clamp(2.4rem, 4.2vw, 3.8rem); line-height: 1.06; margin-bottom: 1.4rem; max-width: 16ch; }
.page-hero .tagline { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.4; color: rgba(255, 255, 255, .88); max-width: 30ch; margin: 0; }
.page-hero .hero-copy { margin-top: 1.4rem; color: rgba(255, 255, 255, .74); max-width: 52ch; }
.page-hero .actions { margin-top: 2rem; }

/* Text-only hero for policy/utility pages */
.page-hero.plain .page-hero-inner { grid-template-columns: 1fr; min-height: 0; }
.page-hero.plain .page-hero-text { padding-right: 0; }
.page-hero.plain h1 { max-width: 22ch; }
.page-hero.plain::before { content: ""; position: absolute; right: calc(-1 * clamp(60px, 10vw, 160px)); bottom: -30%; width: clamp(260px, 34vw, 520px); aspect-ratio: 1; background: url("../brand/mark.png") center / contain no-repeat; opacity: .06; z-index: -1; }
.updated { margin-top: 1.4rem; font-size: .82rem; color: rgba(255, 255, 255, .6); }

/* ---------- Intro ---------- */
.intro { padding-block: var(--section); }
.intro-grid { display: grid; grid-template-columns: var(--cols); gap: var(--cols-gap); align-items: start; }
.intro-lead { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.38; color: var(--navy); margin: 0; }
.intro-body p { color: var(--ink-soft); font-size: 1.04rem; }
.intro-body p:last-child { margin-bottom: 0; }
.intro-body strong, .row-body strong { color: var(--ink); font-weight: 600; }

/* ---------- "How we can support" band ---------- */
.support { background: var(--cloud); padding-block: var(--section); }
.support-grid { display: grid; grid-template-columns: var(--cols); gap: var(--cols-gap); align-items: start; }
.support h2, .row h2, .why-band h2, .feature h2, .cta-band h2, .steps h2, .policy h2, .groups h2 { color: var(--navy); line-height: 1.12; }
.support h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); margin-bottom: 1.2rem; }
.support-head p { color: var(--ink-soft); }
.support-note { margin: 1.6rem 0 0; font-size: .92rem; color: var(--ink-soft); padding-left: 1rem; border-left: 2px solid var(--teal); }
.support-note p { margin: 0 0 .7rem; }
.support-note > :last-child { margin-bottom: 0; }

/* Hairline list with teal dots (the one list style used across the inner pages) */
.dots { border-top: 1px solid var(--line); }
.dots li { display: flex; gap: .9rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--line); font-weight: 500; line-height: 1.45; color: var(--ink); }
.dots li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); transform: translateY(-2px); }
/* Desktop: hang the dots in the gutter so list text lines up with the paragraphs around it */
@media (min-width: 1025px) { .dots li::before { margin-left: calc(-6px - .9rem); } }
.dots.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 2.6rem); }
.dots a { text-decoration: none; transition: color .25s; }
.dots a:hover { color: var(--blue); }

/* ---------- Feature (image + text) ---------- */
.feature { padding-block: var(--section); }
.feature-grid { display: grid; grid-template-columns: var(--cols); gap: var(--cols-gap); align-items: center; }
.feature-media { position: relative; }
.feature-media img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.feature-media::after { content: ""; position: absolute; left: -1rem; bottom: -1rem; width: 38%; height: 6px; background: var(--teal); }
.feature h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 1.3rem; }
.feature-copy p { color: var(--ink-soft); }
.feature.flip .feature-media { order: 2; }
.feature.flip .feature-media::after { left: auto; right: -1rem; }

/* ---------- Editorial rows (heading left, copy right) ---------- */
.rows { padding-block: 0 var(--section); }
.rows.first { padding-top: var(--section); }
.row { display: grid; grid-template-columns: var(--cols); gap: var(--cols-gap); padding-block: clamp(2.2rem, 4vw, 3.4rem); border-top: 1px solid var(--line); }
.row h2 { font-size: clamp(1.55rem, 2.3vw, 2rem); }
.row-body { max-width: 68ch; }
.row-body p { color: var(--ink-soft); }
.row-body .dots li { font-weight: 400; color: var(--ink-soft); }
.row-body p:last-child { margin-bottom: 0; }
.row-body .dots { margin: .4rem 0 1.4rem; }
.row-body .dots:last-child { margin-bottom: 0; }
.more-links { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin-top: 1.6rem; }
.more-links a { padding-bottom: 4px; border-bottom: 1px solid var(--teal); }

/* ---------- Why Ardor Care ---------- */
.why-band { padding-block: var(--section); background: var(--cloud); }
.why-band-grid { display: grid; grid-template-columns: var(--cols); gap: var(--cols-gap); align-items: start; }
.why-band h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.why-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 2.8rem); }
.why-list li { padding: 1.05rem 0; border-top: 1px solid var(--line); font-family: var(--serif); font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.35; color: var(--navy); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--night); color: rgba(255, 255, 255, .78); padding-block: var(--section); position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; left: calc(-1 * clamp(80px, 10vw, 180px)); top: 50%; width: clamp(260px, 30vw, 460px); aspect-ratio: 1; transform: translateY(-50%); background: url("../brand/mark.png") center / contain no-repeat; opacity: .05; z-index: -1; }
.cta-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.cta-band .kicker { color: var(--sky); }
.cta-band h2 { font-size: clamp(2.2rem, 3.8vw, 3.3rem); color: #fff; margin-bottom: 1.2rem; }
.cta-band p { max-width: 58ch; }
.cta-side .actions { margin-top: 0; }
.cta-lines { margin-top: 2rem; border-top: 1px solid var(--line-dark); }
.cta-lines a { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line-dark); text-decoration: none; font-family: var(--serif); font-size: 1.2rem; color: #fff; transition: color .25s; overflow-wrap: anywhere; }
.cta-lines a span { font: 600 .68rem/2.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sky); }
.cta-lines a:hover { color: var(--teal); }

/* ---------- Related services ---------- */
.related { padding-block: clamp(3rem, 5vw, 4.5rem); }
.related-grid { display: grid; grid-template-columns: var(--cols); gap: var(--cols-gap); align-items: start; }
.related h2 { font: 600 .74rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); padding-top: .9rem; }
.related ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 2.6rem); border-top: 1px solid var(--line); }
.related li { border-bottom: 1px solid var(--line); }
.related a { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; text-decoration: none; font-family: var(--serif); font-size: 1.15rem; color: var(--navy); transition: color .25s; }
.related a::after { content: "→"; font-family: var(--sans); color: var(--teal); transition: transform .3s var(--ease); }
.related a:hover { color: var(--blue); }
.related a:hover::after { transform: translateX(4px); }

/* ---------- Services overview: groups ---------- */
.groups { padding-block: var(--section); }
.group { display: grid; grid-template-columns: var(--cols); gap: var(--cols-gap); padding-block: clamp(2.8rem, 5vw, 4.5rem); border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.group:first-child { border-top: 0; padding-top: 0; }
.group-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.group h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: .9rem; }
.group-copy > p { color: var(--ink-soft); font-size: 1.04rem; margin-bottom: 1.6rem; }
.svc-links { border-top: 1px solid var(--line); }
.svc-links li { border-bottom: 1px solid var(--line); }
.svc-links a { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: 1.05rem 0; text-decoration: none; }
.svc-links strong { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.25; color: var(--navy); transition: color .25s; }
.svc-links small { grid-column: 1; font-size: .88rem; color: var(--ink-soft); }
.svc-links a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--teal); transition: transform .3s var(--ease); }
.svc-links a:hover strong { color: var(--blue); }
.svc-links a:hover::after { transform: translateX(4px); }

/* ---------- Forms (referral / contact / feedback) ---------- */
.form-section { padding-block: var(--section); }
.form-grid { display: grid; grid-template-columns: var(--cols); gap: var(--cols-gap); align-items: start; }
.form-aside { position: sticky; top: 110px; }
.form-aside h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--navy); line-height: 1.15; margin-bottom: 1rem; }
.form-aside > p { color: var(--ink-soft); }
.aside-note { margin-top: 2rem; padding: 1.3rem 1.4rem; background: var(--cloud); border-left: 3px solid var(--teal); font-size: .9rem; color: var(--ink-soft); }
.aside-note strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--navy); margin-bottom: .3rem; }
.aside-note p { margin: 0; }
.aside-note a { color: var(--navy); font-weight: 600; }
.site-form { background: var(--cloud); padding: clamp(1.6rem, 3.5vw, 3rem); border-top: 6px solid var(--teal); }
.site-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.site-form fieldset + fieldset { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.site-form legend { font-family: var(--serif); font-size: 1.45rem; color: var(--navy); padding: 0; margin-bottom: 1.3rem; }
.fieldset-hint { margin: -.6rem 0 1.2rem; font-size: .88rem; color: var(--ink-soft); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; border-top: 1px solid var(--line); }
.checks label { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; line-height: 1.4; cursor: pointer; }
.checks input { flex: none; width: 18px; height: 18px; margin: .1rem 0 0; accent-color: var(--navy); }
.checks.radios input { accent-color: var(--teal); }
.field input[type="file"] { padding: .7rem; font-size: .88rem; background: #fff; }
.form-privacy { margin-top: 1.2rem; font-size: .84rem; color: var(--ink-soft); }
.form-privacy a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--teal); }
.form-error-summary { margin: 0 0 1.4rem; padding: 1rem 1.2rem; border-left: 3px solid #B3261E; background: #fff; color: #B3261E; font-size: .9rem; }
.form-error-summary:focus { outline: none; }

/* Contact details list */
.contact-list { margin: 2rem 0 0; border-top: 1px solid var(--line); }
.contact-list > div { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.contact-list dt { font: 600 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin-bottom: .6rem; }
.contact-list dd { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; color: var(--navy); overflow-wrap: anywhere; }
.contact-list dd.small { font-family: var(--sans); font-size: .95rem; color: var(--ink-soft); }
.contact-list a { text-decoration: none; }
.contact-list a[href^="tel:"] { font-family: var(--sans); font-weight: 500; font-size: .92em; letter-spacing: .02em; }
.contact-list a:hover { color: var(--teal); }

/* ---------- Referral steps ---------- */
.steps { background: var(--cloud); padding-block: var(--section); }
.steps-head { display: grid; grid-template-columns: var(--cols); gap: var(--cols-gap); margin-bottom: var(--section-head); align-items: end; }
.steps h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.steps-head p { color: var(--ink-soft); margin: 0; max-width: 56ch; }
.step-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.step-list li { position: relative; padding-top: 1.6rem; border-top: 1px solid var(--navy); }
.step-list li::before { content: ""; position: absolute; top: -1px; left: 0; border-top: 3px solid var(--teal); width: 2.4rem; }
.step-list h3 { font-size: 1.3rem; line-height: 1.2; color: var(--navy); margin-bottom: .7rem; }
.step-list p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* ---------- Policy pages ---------- */
.policy { padding-block: var(--section); }
.policy-grid { display: grid; grid-template-columns: var(--cols); gap: var(--cols-gap); align-items: start; }
.toc { position: sticky; top: 110px; font-size: .86rem; }
.toc p { font: 600 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin-bottom: 1rem; }
.toc ol { border-top: 1px solid var(--line); }
.toc li { border-bottom: 1px solid var(--line); }
.toc a { display: block; padding: .6rem 0; text-decoration: none; color: var(--ink-soft); line-height: 1.4; transition: color .25s; }
.toc a:hover { color: var(--navy); }
.policy-body { max-width: 72ch; }
.policy-body section { scroll-margin-top: 100px; }
.policy-body section + section { margin-top: 3rem; padding-top: 2.6rem; border-top: 1px solid var(--line); }
.policy h2 { font-size: clamp(1.6rem, 2.4vw, 2.05rem); margin-bottom: 1.1rem; }
.policy-body p { color: var(--ink-soft); }
.policy-body .emph { font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; color: var(--navy); }
.policy-body .dots { margin: .4rem 0 1.4rem; }
.policy-body .dots li { font-weight: 400; }
.policy-body a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--teal); }
.callout { margin: 1.6rem 0; padding: 1.6rem 1.7rem; border: 1px solid var(--line); border-left: 4px solid var(--navy); }
.callout h3 { font-size: 1.35rem; color: var(--navy); margin-bottom: .6rem; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- Thank you / 404 ---------- */
.message { min-height: 100vh; display: grid; align-items: center; background: var(--night); color: rgba(255, 255, 255, .78); position: relative; overflow: hidden; isolation: isolate; }
.message-media { position: absolute; inset: 0; z-index: -2; }
.message-media img { width: 100%; height: 100%; object-fit: cover; }
.message::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 48, 75, .94) 0%, rgba(18, 48, 75, .8) 45%, rgba(18, 48, 75, .3) 100%); }
.message-text { max-width: 620px; padding-block: 140px 80px; }
.message .kicker { color: var(--sky); }
.message h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1.06; color: #fff; margin-bottom: 1.3rem; }
.message .lead { font-size: 1.1rem; color: rgba(255, 255, 255, .9); }
.message a:not(.btn) { color: #fff; }

/* Thank-you popup after a form is sent */
.thanks-pop { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-top: 4px solid var(--teal); background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(18, 48, 75, .35); overflow: auto; }
.thanks-pop::backdrop { background: rgba(18, 48, 75, .72); backdrop-filter: blur(3px); }
.thanks-pop[open] { animation: thanks-pop-in .4s var(--ease); }
.thanks-pop[open]::backdrop { animation: thanks-pop-fade .3s ease; }
@keyframes thanks-pop-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes thanks-pop-fade { from { opacity: 0; } }
.thanks-pop-body { position: relative; padding: clamp(2rem, 5vw, 3rem); }
.thanks-pop-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.4rem; border-radius: 50%; background: rgba(99, 180, 179, .16); }
.thanks-pop-mark::after { content: ""; width: 20px; height: 10px; margin-top: -5px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.thanks-pop h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.1; color: var(--night); margin-bottom: 1rem; }
.thanks-pop .lead { font-size: 1.05rem; color: var(--ink); }
.thanks-pop-note { font-size: .9rem; color: var(--ink-soft); }
.thanks-pop-note a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--teal); }
.thanks-pop .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.thanks-pop .btn { cursor: pointer; }
.thanks-pop-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.thanks-pop-close::before, .thanks-pop-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%) rotate(45deg); }
.thanks-pop-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.thanks-pop-close:hover::before, .thanks-pop-close:hover::after { background: var(--navy); }
@media (prefers-reduced-motion: reduce) { .thanks-pop[open], .thanks-pop[open]::backdrop { animation: none; } }

/* ---------- Service Areas map ---------- */

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .page-hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .page-hero-inner { min-height: min(500px, 75vh); }
  .page-hero-text { padding: calc(76px + 2rem) 0 2.5rem; }
  .page-hero-media::after { background: linear-gradient(180deg, rgba(18, 48, 75, .75) 0%, rgba(18, 48, 75, .35) 30%, rgba(18, 48, 75, .92) 75%); }
  .page-hero h1 { max-width: none; }
  .intro-grid, .support-grid, .feature-grid, .row, .why-band-grid, .cta-grid, .related-grid, .group, .form-grid, .steps-head, .policy-grid { grid-template-columns: 1fr; }
  .feature.flip .feature-media { order: 0; }
  .feature-media img { aspect-ratio: 3 / 2; }
  .row { gap: 1rem; }
  .form-aside, .toc { position: static; }
  .toc { display: none; }
  .step-list { grid-template-columns: 1fr 1fr; row-gap: 2.4rem; }
}

@media (max-width: 640px) {
  .dots.two, .why-list, .related ul, .checks { grid-template-columns: 1fr; }
  .step-list { grid-template-columns: 1fr; }
  .form-section .wrap { padding-inline: 0; }
  .form-aside { padding-inline: var(--gutter); }
  .site-form { padding: 2rem var(--gutter); }
  .site-form .enq-fields { grid-template-columns: 1fr; }
  .contact-list dd { font-size: 1.15rem; }
  .feature-media::after { left: 0; }
  .feature.flip .feature-media::after { right: 0; }
}

/* ---------- Misc ---------- */
.field-legend { font: 600 .8rem/1.3 var(--sans); color: var(--ink); margin-bottom: .5rem; padding: 0; }
.capability .more-links { display: inline-flex; margin-top: 1.6rem; }

/* Legends sit above the fieldset hairline rather than inside it */
.site-form legend { float: left; width: 100%; }
.site-form legend + * { clear: both; }
.capability { background: #fff; }
/* Intro already carries bottom spacing */
.intro + .rows.first, .intro + .feature { padding-top: 0; }
.checks input[type="radio"] { width: 18px; padding: 0; }
.callout p { margin-bottom: .5rem; }
@media (max-width: 640px) { .message::before { background: rgba(18, 48, 75, .88); } }

/* ---------- About: intro + How We Work on one grid ---------- */
.story { padding-block: var(--section); }
.story-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--cols-gap); row-gap: clamp(3rem, 6vw, 5rem); }
.story-quote { align-self: start; padding-left: clamp(1.2rem, 2vw, 1.8rem); border-left: 3px solid var(--teal); }
.story-quote.intro-lead { font-size: clamp(1.35rem, 1.9vw, 1.65rem); }
.story-body { align-self: center; }
.story-body p { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.75; color: var(--ink); }
.story-media { margin: 0; }

/* About: How We Work bento (four tiles, cut corners) */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.7rem, 1.2vw, 1rem); aspect-ratio: 1 / .96; }
.bento-col { display: flex; flex-direction: column; gap: inherit; min-width: 0; }
.bento-tile { position: relative; flex: 1; min-height: 0; border-radius: 18px; }
.bento-b { flex: 1.6; }
.bento-d { flex: .9; }
.bento-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.bento .cut-tr > img { clip-path: polygon(0 0, calc(100% - 3.2rem) 0, 100% 3.2rem, 100% 100%, 0 100%); }
.bento .cut-bl > img { clip-path: polygon(0 0, 100% 0, 100% 100%, 3.2rem 100%, 0 calc(100% - 3.2rem)); }
.bento-d { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1rem, 2vw, 1.5rem); background: #E3F1F4; color: var(--navy); text-decoration: none; font-size: clamp(.8rem, 1.1vw, .95rem); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; transition: background .3s var(--ease); }
.bento-d:hover { background: #D3EAEE; }
.bento-arrow { position: absolute; top: 1rem; right: 1rem; width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.bento-d:hover .bento-arrow { transform: translate(2px, -2px); }
.story-copy { align-self: center; }
.story-copy h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); color: var(--navy); line-height: 1.12; margin-bottom: 1.3rem; }
.story-copy p { color: var(--ink-soft); }
.story-copy p:last-child { margin-bottom: 0; }
.story-body p:last-child { margin-bottom: 0; }

/* About: Our Supports on white, Why Choose on navy, so they read as two sections */
/* About: "Our Supports" is the navy band; "Why Choose Ardor Care" below it stays light before the footer */
.support.dark { background: var(--navy); }
.support.dark h2 { color: #fff; }
.support.dark .support-head p { color: rgba(255, 255, 255, .8); }
.support.dark .text-link { color: #fff; }
.support.dark .dots { border-top-color: var(--line-dark); }
.support.dark .dots li { color: #fff; border-bottom-color: var(--line-dark); }
.support.dark .dots li::before { background: #9FD6D5; }
.support.dark .dots a:hover { color: #9FD6D5; }

@media (max-width: 1024px) {
  .story-grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .story-media { margin-top: 1rem; }
  .bento { aspect-ratio: 1 / .8; }
}
@media (max-width: 560px) {
  .bento { aspect-ratio: 1 / 1.15; }
  .bento .cut-tr > img { clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 0 100%); }
  .bento .cut-bl > img { clip-path: polygon(0 0, 100% 0, 100% 100%, 2rem 100%, 0 calc(100% - 2rem)); }
}