.our-process-page {
  --op-navy: #071f2f;
  --op-navy-soft: #123047;
  --op-green: #2f7653;
  --op-green-dark: #255f43;
  --op-green-soft: #edf5ee;
  --op-ink: #102b3b;
  --op-muted: #536978;
  --op-line: #dfe5e2;
  --op-soft: #f5f7f5;
  --op-white: #ffffff;
  --op-shadow: 0 16px 42px rgba(7, 31, 47, .1);
  background: var(--op-white);
  color: var(--op-ink);
}

.our-process-page *, .our-process-page *::before, .our-process-page *::after { box-sizing: border-box; }
.op-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.our-process-page main svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.op-shell { width: min(1240px, calc(100% - 56px)); margin-inline: auto; }
.op-eyebrow { margin: 0 0 16px; color: var(--op-green-dark); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.op-section-heading { max-width: 780px; margin-inline: auto; text-align: center; }
.op-section-heading h2 { position: relative; margin: 0; color: var(--op-navy); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(40px, 3.6vw, 50px); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; }
.op-section-heading h2::after { content: ""; display: block; width: 44px; height: 2px; margin: 13px auto 0; background: var(--op-green); }
.op-introduction .op-section-heading h2::after,
.op-assurance .op-section-heading h2::after,
.op-next-step .op-section-heading h2::after,
.op-faq .op-section-heading h2::after { display: none; }
.op-section-heading p { max-width: 740px; margin: 13px auto 0; color: var(--op-muted); font-size: 15px; font-weight: 600; line-height: 1.65; }
.op-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.op-btn { min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: var(--op-navy); font: 800 10px Manrope, Arial, sans-serif; letter-spacing: .035em; text-transform: uppercase; cursor: pointer; transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.op-btn:hover, .op-btn:focus-visible { transform: translateY(-2px); }
.op-btn:focus-visible, .op-process-tabs button:focus-visible, .op-stage-arrow:focus-visible, .op-process-accordion button:focus-visible, .op-faq button:focus-visible, .op-quote input:focus-visible, .op-quote button:focus-visible { outline: 3px solid rgba(47, 118, 83, .35); outline-offset: 3px; }
.op-btn--green { border-color: var(--op-green); background: var(--op-green); color: #fff; }
.op-btn--green:hover, .op-btn--green:focus-visible { background: var(--op-green-dark); }
.op-btn--outline { border-color: var(--op-navy-soft); background: rgba(255, 255, 255, .9); }
.op-btn--outline:hover, .op-btn--outline:focus-visible { background: var(--op-navy-soft); color: #fff; }

.op-hero { position: relative; min-height: 660px; overflow: hidden; background: #f7f8f6; }
.op-hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .98) 25%, rgba(255, 255, 255, .9) 36%, rgba(255, 255, 255, .45) 54%, rgba(255, 255, 255, .02) 73%); pointer-events: none; }
.op-hero__media { position: absolute; inset: 0; }
.op-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.op-hero__layout { position: relative; z-index: 2; min-height: 660px; padding-block: 48px; display: grid; grid-template-columns: minmax(0, 500px) minmax(100px, 1fr) 370px; gap: 32px; align-items: center; }
.op-hero__copy { grid-column: 1; max-width: 500px; }
.op-hero h1 { max-width: 470px; margin: 0; color: var(--op-navy); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(62px, 5.15vw, 74px); font-weight: 600; line-height: .96; letter-spacing: -.035em; }
.op-hero h1 span { display: block; color: var(--op-green); }
.op-hero__copy h2 { max-width: 430px; margin: 16px 0 0; color: var(--op-navy); font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 600; line-height: 1.08; }
.op-hero__copy > p:not(.op-eyebrow) { max-width: 430px; margin: 16px 0 0; color: #354e5e; font-size: 13px; font-weight: 600; line-height: 1.7; }
.op-hero__benefits { margin: 21px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.op-hero__benefits li { position: relative; padding-left: 25px; color: var(--op-ink); font-size: 11px; font-weight: 700; }
.op-hero__benefits li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--op-green); color: #fff; font-size: 9px; font-weight: 900; }
.op-quote { grid-column: 3; padding: 28px 24px 23px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: var(--op-navy); color: #fff; box-shadow: 0 22px 52px rgba(7, 31, 47, .28); }
.op-quote h2 { margin: 0; color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-size: 31px; font-weight: 600; line-height: 1.03; }
.op-quote h2 span { color: #73ad63; }
.op-quote > p { margin: 9px 0 18px; color: rgba(255, 255, 255, .8); font-size: 11px; font-weight: 600; line-height: 1.55; }
.op-quote form { display: grid; gap: 10px; }
.op-quote label { position: relative; display: block; }
.op-quote label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.op-quote label svg { position: absolute; z-index: 1; left: 14px; top: 50%; width: 18px; height: 18px; color: #71808a; transform: translateY(-50%); }
.op-quote input { width: 100%; height: 54px; padding: 0 14px 0 43px; border: 1px solid #dce2e4; border-radius: 4px; background: #fff; color: var(--op-ink); font: 600 11px Manrope, Arial, sans-serif; }
.op-quote input::placeholder { color: #7a858d; opacity: 1; }
.op-quote form > button { min-height: 52px; border: 0; border-radius: 4px; background: var(--op-green); color: #fff; font: 800 11px Manrope, Arial, sans-serif; letter-spacing: .02em; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.op-quote form > button:hover, .op-quote form > button:focus-visible { background: var(--op-green-dark); transform: translateY(-1px); }
.op-quote small { display: block; margin-top: 14px; color: rgba(255, 255, 255, .76); font-size: 8px; }
.op-form-status { min-height: 0; margin: 0; color: #b8d6b5; font-size: 9px; line-height: 1.4; }
.op-form-status:empty { display: none; }

.op-introduction { padding: 48px 0 30px; background: #fff; }
html body.granny-page.our-process-page[data-business="granny-flats"] main > .op-introduction { background: #fff !important; }
.op-journey { padding: 0 0 82px; background: #fff; }
@media (min-width: 761px) {
  html body.granny-page.our-process-page[data-business="granny-flats"] main > .op-introduction { padding-bottom: 30px !important; }
  html body.granny-page.our-process-page[data-business="granny-flats"] main > .op-journey { padding-top: 29px !important; }
}
@media (min-width: 761px) { .op-journey .op-shell { width: min(1240px, calc(100% - 140px)); } }
@media (min-width: 1101px) {
  html body.granny-page.our-process-page main > .op-introduction .op-section-heading { max-width: 1000px; }
  html body.granny-page.our-process-page main > .op-introduction .op-section-heading > p { max-width: none; white-space: nowrap; }
  .op-journey .op-shell {
    width: min(1240px, calc(100% - 240px));
    margin-right: auto;
    margin-left: max(60px, calc((100vw - 1440px) / 2 + 60px));
  }
  .op-process-tabs { width: min(1240px, calc(100vw - 120px)); }
}
.op-process-tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.op-process-tabs::before { content: ""; position: absolute; z-index: 0; top: 30px; right: 8%; left: 8%; height: 1px; background: #d8e0e3; }
.op-process-tabs button { position: relative; z-index: 1; min-height: 64px; padding: 8px 10px 13px; border: 1px solid transparent; border-radius: 10px 10px 0 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: transparent; color: var(--op-navy-soft); font: inherit; cursor: pointer; }
.op-process-tabs button span { width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid #ced8dc; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--op-navy); font-size: 13px; font-weight: 800; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.op-process-tabs button strong { position: relative; z-index: 1; padding: 2px 3px; background: #fff; box-shadow: 0 0 0 7px #fff; font-size: 14px; font-weight: 700; line-height: 1.25; text-align: left; }
.op-process-tabs button::after { content: ""; position: absolute; right: 10px; bottom: 0; left: 10px; height: 3px; background: var(--op-green); transform: scaleX(0); transition: transform .2s ease; }
.op-process-tabs button[aria-selected="true"] { border-color: #e2e7e4; background: #fff; box-shadow: 0 9px 24px rgba(7, 31, 47, .08); }
.op-process-tabs button[aria-selected="true"] span { border-color: var(--op-green); background: var(--op-green); color: #fff; }
.op-process-tabs button[aria-selected="true"] strong { color: var(--op-navy); font-weight: 800; }
.op-process-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.op-process-panel { min-height: 390px; }
.op-stage-frame { position: relative; }
.op-stage-card { position: relative; min-height: 390px; border: 1px solid var(--op-line); border-radius: 8px; display: grid; grid-template-columns: minmax(300px, 32%) minmax(0, 68%); overflow: hidden; background: #fff; box-shadow: var(--op-shadow); animation: op-stage-in .22s ease both; }
.op-stage-card__media { position: relative; min-width: 0; min-height: 390px; margin: 0; overflow: hidden; background: #e8eeeb; }
.op-stage-card__media img { width: 100%; height: 100%; object-fit: cover; }
.op-stage-card__media figcaption { position: absolute; right: 0; bottom: 0; left: 0; min-height: 82px; padding: 14px 24px; display: flex; flex-direction: column; justify-content: center; background: rgba(7, 31, 47, .96); color: #fff; }
.op-stage-card__media figcaption span { margin-bottom: 4px; color: #9bcfa5; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.op-stage-card__media figcaption strong { font-size: 18px; letter-spacing: .035em; }
.op-stage-card__content { min-width: 0; padding: 30px 42px 28px; align-self: center; }
.op-stage-card__content > h3 { margin: 0; color: var(--op-green-dark); font-family: Manrope, Arial, sans-serif; font-size: 23px; line-height: 1.2; }
.op-stage-card__content > h3 span { font-weight: 800; }
.op-stage-card__intro { max-width: 780px; margin: 10px 0 22px; color: #354e5e; font-size: 16px; font-weight: 600; line-height: 1.65; }
.op-stage-card__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-stage-detail { min-width: 0; padding: 0 24px; border-left: 1px solid #e7ebea; }
.op-stage-detail:first-child { padding-left: 0; border-left: 0; }
.op-stage-detail:last-child { padding-right: 0; }
.op-stage-detail__icon { position: relative; display: block; width: 28px; height: 28px; margin-bottom: 10px; border: 1px solid rgba(47, 118, 83, .32); border-radius: 5px; color: var(--op-green); }
.op-stage-detail__icon::before, .op-stage-detail__icon::after { content: ""; position: absolute; border: 1.5px solid currentColor; }
.op-stage-detail__icon--work::before { inset: 6px 7px; border-radius: 2px; }
.op-stage-detail__icon--work::after { width: 8px; height: 3px; top: 3px; left: 9px; border-radius: 2px; background: #fff; }
.op-stage-detail__icon--receive::before { inset: 5px 7px; border-radius: 1px; }
.op-stage-detail__icon--receive::after { width: 7px; height: 1px; top: 10px; left: 10px; border-width: 1px 0 0; box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; }
.op-stage-detail__icon--outcome::before { width: 12px; height: 14px; top: 5px; left: 7px; border-radius: 8px 8px 5px 5px; }
.op-stage-detail__icon--outcome::after { width: 6px; height: 3px; top: 11px; left: 10px; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.op-stage-detail h4 { margin: 0 0 11px; color: var(--op-navy); font-size: 14px; }
.op-stage-detail ul { margin: 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.op-stage-detail li { position: relative; padding-left: 17px; color: var(--op-muted); font-size: 13px; font-weight: 600; line-height: 1.5; }
.op-stage-detail li::before { content: "✓"; position: absolute; left: 0; color: var(--op-green); font-weight: 900; }
.op-stage-arrow { position: absolute; z-index: 2; top: 50%; width: 42px; height: 42px; border: 1px solid rgba(47, 118, 83, .42); border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--op-green); box-shadow: 0 8px 20px rgba(7, 31, 47, .1); cursor: pointer; transform: translateY(-50%); transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.op-stage-arrow:hover { border-color: var(--op-green); background: var(--op-green); color: #fff; box-shadow: 0 10px 24px rgba(7, 31, 47, .16); transform: translateY(-50%) scale(1.05); }
.op-stage-arrow--previous { left: -58px; }
.op-stage-arrow--next { right: -58px; }
.op-process-accordion { display: none; }
@keyframes op-stage-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.op-assurance { padding: 78px 0 82px; background: var(--op-soft); }
.op-assurance .op-section-heading { margin-bottom: 46px; }
.op-assurance__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.op-assurance__grid article { position: relative; min-width: 0; padding: 0 34px; text-align: center; }
.op-assurance__grid article + article::before { content: ""; position: absolute; top: 20px; bottom: 8px; left: 0; width: 1px; background: #dce4df; }
.op-assurance__icon { width: 72px; height: 72px; margin: 0 auto 18px; border: 1px solid #d7e4d8; border-radius: 50%; display: grid; place-items: center; background: var(--op-green-soft); color: var(--op-green); }
.op-assurance__icon svg { width: 39px; height: 39px; }
.op-assurance h3 { max-width: 220px; margin: 0 auto 10px; color: var(--op-navy); font-size: 15px; line-height: 1.3; }
.op-assurance article p { max-width: 230px; margin: 0 auto; color: var(--op-muted); font-size: 11px; font-weight: 600; line-height: 1.65; }

.op-next-step { padding: 78px 0 72px; background: #fff; }
.op-next-step .op-section-heading { margin-bottom: 34px; }
.op-next-step__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.op-next-card { position: relative; min-width: 0; height: 100%; border: 1px solid var(--op-line); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; background: #fff; box-shadow: 0 10px 28px rgba(7, 31, 47, .07); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.op-next-card:hover, .op-next-card:focus-within { border-color: rgba(47, 118, 83, .36); box-shadow: 0 17px 36px rgba(7, 31, 47, .12); transform: translateY(-4px); }
.op-next-card__media { position: relative; height: 180px; overflow: hidden; background: #e9eeeb; }
.op-next-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.op-next-card:hover .op-next-card__media img { transform: scale(1.035); }
.op-next-card__icon { position: absolute; z-index: 1; top: 151px; left: 24px; width: 58px; height: 58px; border: 4px solid #fff; border-radius: 50%; display: grid; place-items: center; background: var(--op-green-soft); color: var(--op-green); box-shadow: 0 4px 14px rgba(7, 31, 47, .1); }
.op-next-card__icon svg { width: 29px; height: 29px; }
.op-next-card__body { min-height: 205px; padding: 42px 24px 24px; display: flex; flex: 1; flex-direction: column; }
.op-next-card h3 { margin: 0 0 10px; color: var(--op-navy); font-size: 18px; }
.op-next-card p { margin: 0 0 20px; color: var(--op-muted); font-size: 12px; font-weight: 600; line-height: 1.65; }
.op-next-card a { width: max-content; margin-top: auto; display: inline-flex; align-items: center; gap: 9px; color: var(--op-green-dark); font-size: 10px; font-weight: 800; letter-spacing: .035em; text-decoration: none; }
.op-next-card a::after { content: ""; position: absolute; z-index: 2; inset: 0; }
.op-next-card a svg { width: 16px; height: 16px; transition: transform .2s ease; }
.op-next-card a:hover svg, .op-next-card a:focus-visible svg { transform: translateX(4px); }

.op-faq { padding: 0 0 76px; background: #fff; }
.op-faq .op-section-heading { margin-bottom: 28px; }
.op-faq__list { max-width: 1060px; margin: 0 auto; display: grid; gap: 8px; }
.op-faq article { overflow: hidden; border: 1px solid var(--op-line); border-radius: 4px; background: #fff; }
.op-faq h3 { margin: 0; }
.op-faq button { width: 100%; min-height: 60px; padding: 0 22px; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; color: var(--op-navy); font: 800 13px Manrope, Arial, sans-serif; text-align: left; cursor: pointer; }
.op-faq button i { position: relative; width: 18px; height: 18px; flex: 0 0 18px; }
.op-faq button i::before, .op-faq button i::after { content: ""; position: absolute; top: 8px; left: 2px; width: 14px; height: 1px; background: var(--op-green); }
.op-faq button i::after { transform: rotate(90deg); transition: transform .2s ease; }
.op-faq button[aria-expanded="true"] i::after { transform: rotate(0); }
.op-faq article > div p { margin: 0; padding: 0 22px 20px; color: var(--op-muted); font-size: 12px; font-weight: 500; line-height: 1.7; }

.op-final-cta .final-phone { justify-content: center; cursor: pointer; font-family: Manrope, Arial, sans-serif; font-weight: 800; text-transform: uppercase; }

@media (max-width: 1100px) {
  .op-hero__layout { grid-template-columns: minmax(0, 470px) minmax(40px, 1fr) 330px; gap: 24px; }
  .op-hero h1 { font-size: 62px; }
  .op-stage-card__content { padding-inline: 30px; }
  .op-stage-detail { padding-inline: 16px; }
  .op-assurance__grid article { padding-inline: 22px; }
}

@media (max-width: 900px) {
  .op-shell { width: calc(100% - 40px); }
  .op-hero { min-height: 0; }
  .op-hero::before { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .97) 50%, rgba(255, 255, 255, .54) 78%, rgba(255, 255, 255, .25) 100%); }
  .op-hero__media img { object-position: 62% center; }
  .op-hero__layout { min-height: 0; padding-block: 56px; grid-template-columns: minmax(0, 1fr) 330px; align-items: center; }
  .op-hero__copy { grid-column: 1; }
  .op-quote { grid-column: 2; }
  .op-hero h1 { font-size: 56px; }
  .op-hero__copy h2 { font-size: 25px; }
  .op-process-tabs { gap: 6px; }
  .op-process-tabs button { gap: 7px; padding-inline: 5px; }
  .op-process-tabs button span { width: 34px; height: 34px; flex-basis: 34px; }
  .op-process-tabs::before { top: 27px; }
  .op-process-tabs button strong { font-size: 12px; }
  .op-stage-card { grid-template-columns: 1fr; }
  .op-stage-card__media { min-height: 300px; max-height: 360px; }
  .op-stage-card__content { padding: 28px 30px 34px; }
  .op-stage-arrow { top: 325px; }
  .op-assurance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 0; }
  .op-assurance__grid article:nth-child(3)::before { display: none; }
  .op-next-step__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-next-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 11px); width: 100%; margin-inline: auto; }
}

@media (max-width: 760px) {
  .op-hero::before { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .96) 65%, rgba(255, 255, 255, .64) 100%); }
  .op-hero__layout { grid-template-columns: 1fr; gap: 34px; }
  .op-hero__copy, .op-quote { grid-column: 1; }
  .op-hero__copy { max-width: 560px; }
  .op-quote { width: min(100%, 520px); }
  .op-process-tabs, .op-process-panel { display: none; }
  .op-process-accordion { display: grid; gap: 10px; }
  .op-process-accordion__item { overflow: hidden; border: 1px solid var(--op-line); border-radius: 7px; background: #fff; }
  .op-process-accordion__item > h3 { margin: 0; }
  .op-process-accordion__item > h3 > button { width: 100%; min-height: 64px; padding: 0 17px; border: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; align-items: center; background: #fff; color: var(--op-navy); font: inherit; text-align: left; cursor: pointer; }
  .op-process-accordion__item > h3 > button > span { width: 38px; height: 38px; border: 1px solid #cfdbd5; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
  .op-process-accordion__item > h3 > button > strong { font-size: 13px; }
  .op-process-accordion__item > h3 > button > i { position: relative; width: 18px; height: 18px; }
  .op-process-accordion__item > h3 > button > i::before, .op-process-accordion__item > h3 > button > i::after { content: ""; position: absolute; top: 8px; left: 2px; width: 14px; height: 1px; background: var(--op-green); }
  .op-process-accordion__item > h3 > button > i::after { transform: rotate(90deg); }
  .op-process-accordion__item > h3 > button[aria-expanded="true"] { background: var(--op-green-soft); }
  .op-process-accordion__item > h3 > button[aria-expanded="true"] > span { border-color: var(--op-green); background: var(--op-green); color: #fff; }
  .op-process-accordion__item > h3 > button[aria-expanded="true"] > i::after { transform: rotate(0); }
  .op-stage-card--compact { min-height: 0; border: 0; border-top: 1px solid var(--op-line); border-radius: 0; display: block; box-shadow: none; animation: none; }
  .op-stage-card--compact .op-stage-card__media { min-height: 0; height: 260px; }
  .op-stage-card--compact .op-stage-card__content { padding: 25px 20px 28px; }
  .op-stage-card__details { grid-template-columns: 1fr 1fr; gap: 25px 0; }
  .op-stage-detail { border-left: 0; padding: 0 20px 0 0; }
  .op-stage-detail:nth-child(2) { padding: 0 0 0 20px; border-left: 1px solid var(--op-line); }
  .op-stage-detail:last-child { grid-column: 1 / -1; padding: 22px 0 0; border-top: 1px solid var(--op-line); }
}

@media (max-width: 640px) {
  .op-shell { width: calc(100% - 32px); }
  .op-section-heading { text-align: left; }
  .op-section-heading h2 { font-size: 35px; }
  .op-section-heading h2::after { margin-left: 0; }
  .op-section-heading p { font-size: 14px; }
  .op-hero { background: #fff; }
  .op-hero::before { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, .72) 100%); }
  .op-hero__media img { object-position: 67% center; }
  .op-hero__layout { padding-block: 42px; gap: 30px; }
  .op-hero h1 { font-size: 50px; }
  .op-hero__copy h2 { font-size: 23px; }
  .op-hero__copy > p:not(.op-eyebrow) { font-size: 13px; }
  .op-actions { display: grid; }
  .op-btn { width: 100%; }
  .op-quote { padding: 25px 18px 20px; }
  .op-quote h2 { font-size: 29px; }
  .op-introduction { padding: 52px 0 28px; }
  .op-journey { padding-bottom: 58px; }
  .op-stage-card--compact .op-stage-card__media { height: 225px; }
  .op-stage-card__content > h3 { font-size: 20px; }
  .op-stage-card__details { grid-template-columns: 1fr; }
  .op-stage-detail, .op-stage-detail:nth-child(2), .op-stage-detail:last-child { grid-column: auto; padding: 20px 0 0; border: 0; border-top: 1px solid var(--op-line); }
  .op-stage-detail:first-child { padding-top: 0; border-top: 0; }
  .op-assurance { padding: 58px 0; }
  .op-assurance .op-section-heading { margin-bottom: 36px; }
  .op-assurance__grid { grid-template-columns: 1fr; gap: 34px; }
  .op-assurance__grid article { padding: 0; }
  .op-assurance__grid article + article::before { display: none; }
  .op-assurance__icon { width: 64px; height: 64px; margin-bottom: 15px; }
  .op-next-step { padding: 58px 0; }
  .op-next-step__grid { grid-template-columns: 1fr; }
  .op-next-card:last-child { grid-column: auto; max-width: none; }
  .op-next-card__media { height: 210px; }
  .op-next-card__icon { top: 181px; }
  .op-faq { padding-bottom: 58px; }
  .op-faq .op-section-heading { margin-bottom: 24px; }
  .op-faq button { min-height: 62px; padding-inline: 16px; font-size: 12px; }
  .op-faq article > div p { padding-inline: 16px; }
  .op-final-cta .final-actions { display: grid; width: 100%; }
  .op-final-cta .final-actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .op-btn, .op-quote button, .op-process-tabs button::after, .op-process-tabs button span, .op-stage-arrow, .op-next-card, .op-next-card img, .op-next-card a svg, .op-faq button i::after { transition: none; }
  .op-stage-card { animation: none; }
  .op-btn:hover, .op-quote button:hover, .op-stage-arrow:hover, .op-next-card:hover { transform: none; }
  .op-next-card:hover img { transform: none; }
}

/* Page typography audit: keep the process hierarchy readable after shared CSS. */
html body.our-process-page.granny-page {
  --dk-service-hero-title-size: clamp(58px, 5.1vw, 76px) !important;
}

html body.our-process-page.granny-page main > .op-hero h1 {
  font-size: clamp(58px, 5.1vw, 76px) !important;
}

html body.our-process-page main .op-quote input {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

html body.our-process-page main .op-form-status {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

html body.our-process-page main .op-stage-card__media figcaption span {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

html body.our-process-page main .op-stage-card__media figcaption strong {
  font-size: 18px !important;
  line-height: 1.3 !important;
}

html body.our-process-page main .op-stage-card__content > h3 {
  font-size: 21px !important;
  line-height: 1.25 !important;
}

html body.our-process-page main .op-assurance h3 {
  font-size: 18px !important;
  line-height: 1.35 !important;
}

html body.our-process-page main .op-next-card h3 {
  font-size: 20px !important;
  line-height: 1.35 !important;
}

html body.our-process-page main .op-next-card a {
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: .025em !important;
}

@media (max-width: 760px) {
  html body.our-process-page.granny-page {
    --dk-service-hero-title-size: clamp(44px, 12vw, 50px) !important;
  }

  html body.our-process-page.granny-page main > .op-hero h1 {
    font-size: clamp(44px, 12vw, 50px) !important;
  }

  html body.our-process-page main .op-process-accordion__item > h3 > button > span {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  html body.our-process-page main .op-stage-card__content > h3 {
    font-size: 20px !important;
  }

  html body.our-process-page main .op-next-card h3 {
    font-size: 19px !important;
  }
}

/* Hero typography refinement: tighter display scale with clearer supporting copy. */
@media (min-width: 761px) {
  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-eyebrow {
    margin-bottom: 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: .14em !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero h1 {
    font-size: clamp(56px, 4.65vw, 68px) !important;
    font-weight: 600 !important;
    line-height: .96 !important;
    letter-spacing: -.025em !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__copy h2 {
    margin-top: 18px !important;
    font-size: clamp(24px, 1.85vw, 27px) !important;
    line-height: 1.16 !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__copy > p:not(.op-eyebrow) {
    margin-top: 14px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.65 !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__benefits {
    margin-top: 18px !important;
    gap: 7px !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__benefits li {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-btn {
    font-size: 14px !important;
    letter-spacing: .03em !important;
  }
}

@media (max-width: 760px) {
  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-eyebrow {
    font-size: 13px !important;
    line-height: 1.4 !important;
    letter-spacing: .13em !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero h1 {
    font-size: clamp(42px, 11vw, 48px) !important;
    font-weight: 600 !important;
    line-height: .98 !important;
    letter-spacing: -.02em !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__copy h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__copy > p:not(.op-eyebrow),
  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__benefits li {
    font-size: 15px !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-btn {
    font-size: 14px !important;
  }
}

/* Keep the FAQ library arrow optically separated from its CTA label. */
html body.granny-page.our-process-page[data-business="granny-flats"] main #our-process-faq .dk-faq-all > .dk-faq-all__link {
  gap: 12px !important;
  white-space: nowrap;
}

html body.granny-page.our-process-page[data-business="granny-flats"] main #our-process-faq .dk-faq-all__link > span[aria-hidden="true"] {
  display: inline-block;
}

/* Our Process Hero: dedicated daylight media and Kitchen-standard quote form. */
html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero.op-hero {
  background: #fff !important;
}

html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero.op-hero::before,
html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero.op-hero::after {
  display: none !important;
  background: none !important;
}

html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}

html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__media img {
  object-position: 54% center !important;
}

html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__veil {
  display: none !important;
}

html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero > .op-hero__layout {
  grid-template-columns: minmax(0, 560px) minmax(370px, 430px) !important;
  gap: clamp(36px, 7vw, 112px) !important;
  justify-content: space-between;
}

html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__copy {
  max-width: 540px;
}

html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-quote {
  grid-column: 2;
  width: min(430px, 100%);
  justify-self: end;
}

html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .consultation-form__title span {
  color: inherit !important;
}

html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-quote > .consultation-form__supporting {
  color: var(--consultation-muted, #536978) !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
}

@media (min-width: 761px) {
  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-eyebrow {
    color: #78c89b !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero h1 {
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(7, 31, 47, .28);
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero h1 span {
    color: #78c89b !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__copy h2,
  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__copy > p:not(.op-eyebrow),
  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__benefits li {
    color: rgba(255, 255, 255, .94) !important;
    text-shadow: 0 1px 12px rgba(7, 31, 47, .34);
  }
}

html:root:root:root:root:root body.our-process-page #our-process-hero .consultation-form .consultation-form__fields .consultation-form__submit {
  background: var(--op-green) !important;
}

html:root:root:root:root:root body.our-process-page #our-process-hero .consultation-form .consultation-form__fields .consultation-form__submit:hover,
html:root:root:root:root:root body.our-process-page #our-process-hero .consultation-form .consultation-form__fields .consultation-form__submit:focus-visible {
  background: var(--op-green-dark) !important;
}

@media (min-width: 761px) and (max-width: 1100px) {
  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero.op-hero,
  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero > .op-hero__layout {
    min-height: 660px !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__media {
    inset-inline-start: 0 !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero > .op-hero__layout {
    grid-template-columns: minmax(0, 1fr) minmax(350px, 390px) !important;
    gap: 32px !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__copy {
    width: min(470px, 100%);
  }
}

@media (max-width: 760px) {
  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero.op-hero {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: clamp(210px, 58vw, 260px) !important;
    min-height: 0 !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__veil {
    display: none !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__media img {
    object-position: 62% center !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero > .op-hero__layout {
    min-height: 0 !important;
    padding-block: 38px 48px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-hero__copy,
  html body.granny-page.our-process-page[data-business="granny-flats"] main > #our-process-hero .op-quote {
    grid-column: 1;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}