/* Services page styles and mobile adjustments. Load after styles.css. */
:root {
--line: rgba(0,0,0,0.08);
      --text-dark: #111;
      --text-soft: #8a8a8a;
      --accent: #60D2C2;
      --shadow-soft: 0 10px 30px rgba(0,0,0,0.06);
}

html, body {
height: 100%;
      margin: 0;
      font-family: "Lato", sans-serif;
      font-weight: 300;
      font-size: 16px;
      line-height: 1.8;
      color: #111111;
      letter-spacing: 0.03em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      scroll-behavior: smooth;
}

img {
max-width: 100%;
      height: auto;
      display: inline-block;
}

a {
color: #42C0B4;
      text-decoration-line: underline;
      text-decoration-style: wavy;
      text-decoration-color: var(--accent);
      text-underline-offset: 4px;
}

.topnav {
display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 18px;
      padding: 16px 20px;
      background: white;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      position: sticky;
      top: 0;
      z-index: 1000;
}

.topnav a {
color: #525151;
      text-transform: uppercase;
      text-align: center;
      text-decoration: none;
      font-family: "Lato", sans-serif;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.12em;
      padding: 6px 2px;
      transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.topnav a:hover,
    .topnav a:focus {
text-decoration-line: underline;
      text-decoration-style: wavy;
      text-decoration-color: var(--accent);
      text-underline-offset: 4px;
}

.topnav a.active {
text-decoration-line: underline;
      text-decoration-style: wavy;
      text-decoration-color: var(--accent);
      text-underline-offset: 6px;
      color: #111;
}

.eyebrow {
padding: 14px 16px;
      text-align: center;
      font-family: "Lato", sans-serif;
      font-size: 11px;
      font-weight: 300;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #111;
}

.bgimg-1,
    .bgimg-2,
    .bgimg-3,
    .bgimg-4,
    .bgimg-5 {
position: relative;
      opacity: 0.95;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}

.bgimg-1 {
background-color: #30C4AB;
      background-image: url("../images/cloudwhale_water_images14_5_3.png");
      min-height: 100vh;
}

.bgimg-2 {
background-image: url("../images/cloudwhale_water_images20_20.png");
      min-height: 100vh;
}

.bgimg-3 {
background-image: url("../images/a_backgroud_9.png");
      min-height: 100vh;
}

.bgimg-4 {
background-image: url("../images/cloudwhale_water_images20_27.png");
      min-height: 100vh;
}

.bgimg-5 {
background-image: url("../images/cloudwhale_water_images20_21.png");
      min-height: 100vh;
}

.caption {
position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      color: #000;
      transform: translateY(-50%);
      padding: 0 20px;
}

.caption .border {
display: inline-block;
      font-family: "Noto Serif", serif;
      font-style: italic;
      font-weight: 400;
      background-color: rgba(255, 255, 255, 0.92);
      color: #BFBCBC;
      padding: 12px 16px;
      font-size: 20px;
      letter-spacing: 0.04em;
      text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
}

.caption .border.transparent {
background-color: transparent;
      color: #fff;
      text-shadow: 1px 2px 10px rgba(0, 0, 0, 0.25);
}

.section-title-poetic {
font-family: "Noto Serif", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #111;
    line-height: 1.2;
    text-align: left;
}

.section {
padding: 56px 80px;
      background-color: #fff;
}

.section-soft {
padding: 56px 80px;
      background-color: #F6F6F6;
      color: #6F6F6F;
}

.section-tight {
padding: 40px 80px;
      background-color: #fff;
      color: #919191;
}

.text-block {
max-width: 980px;
      margin: 0 auto;
}

.text-left {
text-align: left;
}

.text-center {
text-align: center;
}

.text-justify {
text-align: justify;
}

.tagline {
font-family: "Noto Serif", serif;
      font-style: italic;
      font-weight: 400;
      font-size: 18px;
      line-height: 1.5;
      letter-spacing: 0.2em;
      color: #111;
      text-align: center;
      margin: 0 0 28px 0;
}

.quote {
font-family: "Noto Serif", serif;
    font-style: italic;
    font-weight: 400;
    color: #000000;
}

h2 {
margin: 0 0 20px 0;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      font-family: "Lato", sans-serif;
      font-size: 18px;
      font-weight: 400;
      color: #111;
      text-align: center;
}

h3 {
margin: 0 0 20px 0;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-family: "Lato", sans-serif;
      font-size: 20px;
      font-weight: 400;
      color: #111;
      text-align: center;
}

h4 {
margin: 0 0 20px 0;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-family: "Lato", sans-serif;
      font-size: 15px;
      font-weight: 400;
      color: #111;
      text-align: center;
}

h5 {
margin: 0;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-family: "Lato", sans-serif;
      font-size: 10px;
      font-weight: 300;
      color: #111;
      text-align: center;
}

p {
margin: 0 0 1.2em 0;
}

.about-photo {
max-width: 340px;
      border-radius: 12px;
      margin: 30px auto;
      display: block;
}

.about-grid {
display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 40px;
      align-items: start;
}

.narrow-text {
max-width: 520px;
      margin-left: 80px;
}

.narrow-text p {
font-size: 14px;
      line-height: 2;
      color: var(--text-soft);
}

.narrow-text h3 {
text-align: center;
}

.narrow-text .quote {
color: #555;
}

.modalities {
display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px 34px;
      margin-top: 28px;
}

.modality {
padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
}

.modality strong {
display: block;
      margin-bottom: 4px;
      color: var(--text-dark);
      font-weight: 400;
      letter-spacing: 0.05em;
}

.welcome-grid {
display: grid;
  grid-template-columns: 520px 1fr;
  gap: 60px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

.welcome-grid .narrow-text {
max-width: 520px;
  margin-left: 0;
}

.welcome-image {
display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;
  opacity: 0.42;
}

.welcome-image img {
max-width: 260px;
  width: 100%;
  height: auto;
}

.container {
display: flex;
      justify-content: space-around;
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
}

.column {
flex: 1;
      padding: 18px;
      border: 1px solid #ddd;
      margin: 0;
      background: #fff;
}

.column h3 {
text-align: left;
      font-size: 17px;
      letter-spacing: 0.12em;
}

.cta-link {
display: inline-block;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 12px;
      color: #525151;
      border-bottom: 1px solid transparent;
      padding-bottom: 4px;
      transition: color 0.2s ease, border-color 0.2s ease;
}

.cta-link:hover,
    .cta-link:focus {
color: #198B8A;
    border-bottom-color: var(--accent);
}

.footer-copy {
max-width: 700px;
      margin: 0 auto 18px;
      font-size: 15px;
      line-height: 1.8;
      color: #6b6b6b;
}

.footer-nav a {
padding: 12px 14px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: #525151;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

@media (max-width: 1024px) {
.bgimg-1,
      .bgimg-2,
      .bgimg-3,
      .bgimg-4,
      .bgimg-5 {
background-attachment: scroll;
}
}

@media (max-width: 1024px) {
.about-grid,
      .modalities {
grid-template-columns: 1fr;
}
}

@media (max-width: 1024px) {
.narrow-text {
margin-left: 0;
        margin-right: auto;
}
}

@media (max-width: 768px) {
html, body {
font-size: 15px;
        line-height: 1.75;
        letter-spacing: 0.02em;
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
body {
overflow-x: hidden;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.topnav {
position: static;
    gap: 0;
    padding: 0;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.topnav a,
  .footer-nav a,
  .cta-link {
min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.eyebrow {
overflow-wrap: anywhere;
    line-height: 1.6;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.welcome-grid,
  .about-grid,
  .modalities,
  .container {
display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.section,
  .section-soft,
  .section-tight {
padding: 32px 18px;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.text-block,
  .narrow-text,
  .welcome-grid .narrow-text {
max-width: 100%;
    margin: 0;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.narrow-text p,
  p {
font-size: 16px;
    line-height: 1.75;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.tagline {
font-size: 18px;
    letter-spacing: 0.08em;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.section-title-poetic {
font-size: 24px;
    line-height: 1.25;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
h3 {
line-height: 1.35;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.bgimg-1 {
min-height: 70vh;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.bgimg-2,
  .bgimg-3,
  .bgimg-4,
  .bgimg-5 {
min-height: 260px;
    background-attachment: scroll;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.caption {
padding: 0 16px;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.caption img {
max-width: 75%;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.about-photo {
max-width: 280px;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.column {
padding: 22px 18px;
}
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
.footer-contact p {
overflow-wrap: anywhere;
}
}
}

@media (max-width: 768px) {
.topnav {
flex-direction: column;
        align-items: stretch;
}
}

@media (max-width: 768px) {
.topnav a {
width: 100%;
        font-size: 12px;
        letter-spacing: 0.09em;
        padding: 12px 16px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
}
}

@media (max-width: 768px) {
.eyebrow {
padding: 14px 20px;
        font-size: 10px;
        letter-spacing: 0.08em;
}
}

@media (max-width: 768px) {
.section,
      .section-soft,
      .section-tight {
padding: 32px 20px;
}
}

@media (max-width: 768px) {
.container {
flex-direction: column;
}
}

@media (max-width: 768px) {
.caption .border {
font-size: 15px;
        padding: 8px 12px;
        letter-spacing: 0.03em;
}
}

@media (max-width: 768px) {
.tagline {
font-size: 22px;
}
}

@media (max-width: 768px) {
h2 {
font-size: 16px;
        letter-spacing: 0.08em;
}
}

@media (max-width: 768px) {
h3 {
font-size: 17px;
        letter-spacing: 0.10em;
}
}

@media (max-width: 768px) {
h4 {
font-size: 14px;
        letter-spacing: 0.05em;
}
}

@media (max-width: 768px) {
h5 {
font-size: 10px;
        letter-spacing: 0.08em;
}
}

@media (max-width: 768px) {
.bgimg-1 {
min-height: 82vh;
}
}

@media (max-width: 768px) {
.bgimg-2,
      .bgimg-3,
      .bgimg-4,
      .bgimg-5 {
min-height: 320px;
}
}

@media (max-width: 768px) {
      .about-grid,
      .modalities {
grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
.soft-divider {
border: 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin: 24px auto;
  max-width: 760px;
}
}

@media (max-width: 768px) {
.narrow-text {
max-width: 100%;
        margin-left: 0;
}
}

.cw-nav {
background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1000;
}

/* Tighten the two header strips on mobile */
@media (max-width: 768px) {
  .eyebrow {
    padding: 10px 16px;
    line-height: 1.6;
  }

  .soft-divider {
    margin: 0 auto;
  }
}

/* Editorial Services layout. Scoped to this page; original imagery and palette remain. */
.cw-services-editorial .services-overview,
.cw-services-editorial .se-process,
.cw-services-editorial .se-background { padding: clamp(48px, 7vw, 112px) clamp(22px, 5vw, 80px); }
.cw-services-editorial .services-overview > .text-block,
.cw-services-editorial .se-process > .text-block,
.cw-services-editorial .se-background > .text-block { max-width: 1280px; width: 100%; margin-inline: auto; }
.cw-services-editorial .se-label { display:flex; align-items:center; gap:12px; font-family:"Lato",sans-serif; font-size:12px; line-height:1.5; letter-spacing:.16em; text-transform:uppercase; color:#111; margin:0 0 clamp(36px,6vw,80px); }
.cw-services-editorial .se-circle { display:inline-flex; flex:0 0 32px; width:32px; height:32px; border:1px solid currentColor; border-radius:50%; align-items:center; justify-content:center; font-size:10px; font-family:"Lato",sans-serif; font-style:normal; letter-spacing:.1em; }
.cw-services-editorial .services-intro { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,7vw,100px); align-items:end; margin-bottom:64px; }
.cw-services-editorial .services-heading,
.cw-services-editorial .se-heading { font-family:"Noto Serif",serif; font-weight:400; font-style:normal; text-transform:none; text-align:left; letter-spacing:-.035em; line-height:1.12; font-size:clamp(40px,5.5vw,76px); margin:0; color:#111; overflow-wrap:break-word; }
.cw-services-editorial .se-intro-copy p,
.cw-services-editorial .se-service-copy p,
.cw-services-editorial .services-beginning p { font-family:"Lato",sans-serif; font-size:16px; font-weight:300; line-height:1.85; letter-spacing:.02em; margin:0 0 1.2em; }
.cw-services-editorial .se-intro-copy p:last-child { margin-bottom:0; }
.cw-services-editorial .services-hint { font-size:12px; letter-spacing:.08em; margin:0 0 20px; color:#555; }
.cw-services-editorial .se-service-row { display:grid; grid-template-columns:40px minmax(0,.85fr) minmax(0,1.35fr); gap:clamp(18px,3vw,44px); padding:36px 0; border-top:1px solid #30c4ab; align-items:start; }
.cw-services-editorial .se-service-row:last-child { border-bottom:1px solid #30c4ab; }
.cw-services-editorial .se-row-number { font-family:"Lato",sans-serif; font-size:10px; letter-spacing:.12em; color:#111; padding-top:10px; }
.cw-services-editorial .se-service-title { font-family:"Noto Serif",serif; font-size:clamp(25px,2.7vw,38px); font-style:italic; font-weight:400; letter-spacing:-.015em; text-transform:none; text-align:left; line-height:1.4; color:#111; margin:0; overflow-wrap:break-word; }
.cw-services-editorial .se-service-copy p:last-child { margin-bottom:0; }
.cw-services-editorial .se-service-copy p + p { font-size:14px; color:#555; }
.cw-services-editorial .services-beginning { display:grid; grid-template-columns:40px minmax(0,.85fr) minmax(0,1.35fr); gap:18px clamp(18px,3vw,44px); align-items:start; margin-top:56px; }
.cw-services-editorial .services-beginning h2 { font-size:clamp(26px,3vw,42px); line-height:1.3; margin:0; }
.cw-services-editorial .services-beginning p { grid-column:3; }
.cw-services-editorial .se-process .narrow-text { max-width:none; margin:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); column-gap:clamp(32px,7vw,100px); align-items:start; }
.cw-services-editorial .se-process .se-label { grid-column:1 / -1; }
.cw-services-editorial .se-process-art { grid-column:1; grid-row:2; text-align:left; margin:0 0 28px; }
.cw-services-editorial .se-process-art br { display:none; }
.cw-services-editorial .se-process .se-heading { grid-column:1; grid-row:3 / 5; }
.cw-services-editorial .se-process .narrow-text > p:not(.se-label) { grid-column:2; font-size:16px; line-height:1.9; margin-bottom:24px; }
.cw-services-editorial .se-process .narrow-text > h4,
.cw-services-editorial .se-process .narrow-text > .quote { display:none; }
.cw-services-editorial .se-background .about-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(32px,7vw,100px); }
.cw-services-editorial .se-background .modalities { grid-template-columns:1fr; gap:0; }
.cw-services-editorial .se-background .modality { padding:22px 0; border-top:1px solid #30c4ab; }
.cw-services-editorial .se-background .modality strong { display:block; margin-bottom:8px; }
@media (max-width:800px) {
 .cw-services-editorial .services-intro,
 .cw-services-editorial .se-background .about-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
 .cw-services-editorial .se-service-row { grid-template-columns:24px minmax(0,1fr); gap:12px 18px; padding:28px 0; }
 .cw-services-editorial .se-service-copy { grid-column:2; }
 .cw-services-editorial .se-service-title br { display:none; }
 .cw-services-editorial .services-beginning { grid-template-columns:32px minmax(0,1fr); }
 .cw-services-editorial .services-beginning p { grid-column:2; }
 .cw-services-editorial .se-process .narrow-text { display:block; }
 .cw-services-editorial .se-process .se-heading { margin-bottom:32px; }
 .cw-services-editorial .se-background .se-label { margin-bottom:30px; }
}