.services-page { background: #f3f0e8; }
.services-header { background: rgba(255, 254, 253, .92); }

.services-hero { min-height: calc(100vh - 86px); display: grid; grid-template-columns: .9fr 1.1fr; }
.services-hero-intro { padding: clamp(60px, 8vw, 125px) clamp(24px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; background: #fffefd; }
.services-hero-intro h1 { color: var(--ry-navy); font-size: clamp(5rem, 9.4vw, 10.5rem); line-height: .79; letter-spacing: -.09em; }
.services-hero-intro h1 em { margin-top: .28em; display: block; color: #202636; font-size: .36em; line-height: .98; letter-spacing: -.055em; font-weight: 430; }
.services-hero-intro > p:not(.home-kicker) { max-width: 590px; margin-top: 34px; color: #565d6b; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.72; }
.services-scroll { width: fit-content; margin-top: 45px; padding: 12px 0; display: flex; gap: 26px; border-bottom: 1px solid var(--ry-navy); color: var(--ry-navy); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }

.services-duo { min-height: 720px; display: grid; grid-template-columns: 1fr 1fr; }
.services-duo article { padding: 42px clamp(24px, 3.2vw, 52px); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.services-duo article::after { content: ""; width: 460px; height: 460px; position: absolute; border: 1px solid currentColor; border-radius: 50%; opacity: .12; box-shadow: 0 0 0 75px currentColor, 0 0 0 150px currentColor; }
.services-duo-afi { color: white; background: var(--ry-green); }
.services-duo-afi::after { left: -340px; bottom: -330px; }
.services-duo-nut { color: white; background: var(--ry-orange); }
.services-duo-nut::after { right: -330px; top: -340px; }
.services-duo small { position: relative; z-index: 1; font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.services-duo h2 { margin-top: auto; position: relative; z-index: 1; font-size: clamp(3.5rem, 6vw, 7rem); line-height: .82; letter-spacing: -.085em; }
.services-duo h2 em { font-weight: 380; }
.services-duo article > span { margin-top: 25px; padding-top: 25px; position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.34); font-size: .82rem; line-height: 1.5; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.services-manifesto { padding: clamp(95px, 11vw, 170px) clamp(24px, 6vw, 96px); background: var(--ry-cream); }
.services-manifesto > div { margin-top: 45px; display: grid; grid-template-columns: 1.25fr .52fr; gap: clamp(55px, 9vw, 150px); align-items: end; }
.services-manifesto h2 { color: var(--ry-navy); font-size: clamp(4rem, 7.5vw, 8.4rem); line-height: .88; letter-spacing: -.08em; }
.services-manifesto > div > p { padding-left: 28px; border-left: 2px solid var(--ry-orange); color: #555c6a; font-size: 1.03rem; line-height: 1.76; }

.service-detail { padding: clamp(90px, 10vw, 155px) clamp(24px, 6vw, 96px); color: white; }
.service-detail-afi { background: #0b6538; }
.service-detail-nut { color: var(--ry-ink); background: #ff9f24; }
.service-detail-title { display: grid; grid-template-columns: .34fr 1.1fr .55fr; gap: clamp(30px, 5vw, 85px); align-items: end; }
.service-detail-title > p { align-self: start; font-size: .68rem; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; opacity: .72; }
.service-detail-title h2 { font-size: clamp(3.5rem, 6.6vw, 7.2rem); line-height: .9; letter-spacing: -.075em; }
.service-detail-title > span { color: rgba(255,255,255,.73); font-size: .98rem; line-height: 1.7; }
.service-detail-nut .service-detail-title > span { color: #5e411a; }
.service-detail-content { margin-top: clamp(70px, 9vw, 130px); display: grid; grid-template-columns: .34fr 1.66fr; gap: clamp(30px, 5vw, 85px); }
.service-big-number { font-size: clamp(5rem, 10vw, 11rem); line-height: .74; letter-spacing: -.1em; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.38); writing-mode: vertical-rl; transform: rotate(180deg); }
.service-detail-nut .service-big-number { -webkit-text-stroke-color: rgba(7,26,87,.32); }
.service-feature-grid { display: grid; grid-template-columns: 1fr 1fr; }
.service-feature-grid article { min-height: 245px; padding: 28px; border: 1px solid rgba(255,255,255,.28); }
.service-feature-grid article:nth-child(2n) { border-left: 0; }
.service-feature-grid article:nth-child(n+3) { border-top: 0; }
.service-detail-nut .service-feature-grid article { border-color: rgba(7,26,87,.24); }
.service-feature-grid span { font-size: .66rem; font-weight: 850; opacity: .72; }
.service-feature-grid h3 { margin-top: 72px; font-size: 1.3rem; letter-spacing: -.025em; }
.service-feature-grid p { margin-top: 15px; color: rgba(255,255,255,.7); font-size: .87rem; line-height: 1.6; }
.service-detail-nut .service-feature-grid p { color: #66471f; }

.services-process { padding: clamp(95px, 11vw, 170px) clamp(24px, 6vw, 96px); color: white; background: var(--ry-ink); }
.services-process-heading { display: grid; grid-template-columns: .5fr 1.5fr; align-items: end; gap: 50px; }
.services-process-heading h2 { font-size: clamp(4rem, 7vw, 7.8rem); line-height: .89; letter-spacing: -.075em; }
.services-process-line { margin-top: 80px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.2); }
.services-process-line article { min-height: 280px; padding: 26px 24px 30px 0; border-right: 1px solid rgba(255,255,255,.16); }
.services-process-line article:not(:first-child) { padding-left: 24px; }
.services-process-line article:last-child { border-right: 0; }
.services-process-line span { color: #81899b; font-size: .65rem; }
.services-process-line h3 { margin-top: 88px; font-size: 1.25rem; }
.services-process-line p { margin-top: 15px; color: #aeb4c0; font-size: .87rem; line-height: 1.6; }

.services-bridge { padding: clamp(80px, 9vw, 135px) clamp(24px, 6vw, 96px); display: grid; grid-template-columns: 1fr .75fr .35fr; align-items: end; gap: clamp(35px, 6vw, 95px); color: var(--ry-navy); background: var(--ry-gold); }
.services-bridge > div > p { margin-bottom: 18px; font-size: .68rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.services-bridge h2 { font-size: clamp(3.4rem, 6vw, 7rem); line-height: .85; letter-spacing: -.08em; }
.services-bridge h2 sup { margin-left: 4px; font-size: .16em; vertical-align: top; }
.services-bridge > p { color: #574a27; line-height: 1.72; }
.services-bridge > a { padding: 18px 0; display: flex; justify-content: space-between; border-top: 1px solid rgba(7,26,87,.28); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }

.services-contact { min-height: 680px; padding: 95px clamp(24px, 7.5vw, 120px); display: flex; flex-direction: column; justify-content: center; color: white; background: var(--ry-navy); }
.services-contact > p { margin-bottom: 28px; color: #a8b8e6; font-size: .68rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.services-contact h2 { font-size: clamp(4.3rem, 8vw, 9rem); line-height: .85; letter-spacing: -.08em; }
.services-contact > div { margin-top: 55px; display: flex; gap: 18px; flex-wrap: wrap; }
.services-contact a { min-height: 54px; padding: 0 22px; display: inline-flex; align-items: center; gap: 28px; border: 1px solid rgba(255,255,255,.5); font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.services-contact a:first-child { color: var(--ry-navy); background: white; border-color: white; }

@media (max-width: 1040px) {
  .services-hero { grid-template-columns: 1fr; }
  .services-duo { min-height: 600px; }
  .service-detail-title { grid-template-columns: 1fr 1.6fr; }
  .service-detail-title > span { grid-column: 2; }
  .services-bridge { grid-template-columns: 1fr 1fr; }
  .services-bridge > a { grid-column: 2; }
}

@media (max-width: 760px) {
  .services-hero-intro h1 { font-size: clamp(4.4rem, 18vw, 7rem); }
  .services-duo { grid-template-columns: 1fr; }
  .services-duo article { min-height: 480px; }
  .services-manifesto > div, .service-detail-title, .services-process-heading, .services-bridge { grid-template-columns: 1fr; }
  .service-detail-title > span, .services-bridge > a { grid-column: auto; }
  .service-detail-content { grid-template-columns: 1fr; }
  .service-big-number { display: none; }
  .services-process-line { grid-template-columns: 1fr 1fr; }
  .services-process-line article:nth-child(2n) { border-right: 0; }
}

@media (max-width: 520px) {
  .services-duo article { min-height: 390px; }
  .services-manifesto h2, .service-detail-title h2, .services-process-heading h2, .services-contact h2 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .service-feature-grid, .services-process-line { grid-template-columns: 1fr; }
  .service-feature-grid article, .service-feature-grid article:nth-child(2n), .service-feature-grid article:nth-child(n+3) { min-height: 210px; border: 0; border-top: 1px solid rgba(255,255,255,.28); padding: 25px 0; }
  .service-detail-nut .service-feature-grid article { border-color: rgba(7,26,87,.24); }
  .service-feature-grid h3 { margin-top: 45px; }
  .services-process-line article, .services-process-line article:not(:first-child) { min-height: 210px; padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .services-process-line h3 { margin-top: 50px; }
  .services-contact { min-height: 590px; }
}
