/* Sections from the client's content structure (Oct 2026). Loaded after site.css so it only extends, never rewrites, the base system. */
.hero-sub{font-size:18px;line-height:1.6;max-width:46ch;margin-top:22px;color:rgba(255,255,255,.9)}

.partners{padding:56px 0 8px;text-align:center}
.partners-label{font-size:13px;text-transform:uppercase;color:var(--petrol);margin:0 auto 6px}
.partner-band{border:0}
.partner-band .ticker-group{gap:72px;padding-right:72px}
.partner-band img{height:72px;width:auto;max-width:150px;object-fit:contain;opacity:.8}
.partner-band .ticker-track{animation-duration:34s}

.service-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.service-list li{border-top:1px solid var(--gold);padding-top:22px}
.service-list h3{font-size:31px;margin-bottom:18px}
.service-list p{font-size:16px;color:var(--muted)}

.audience{background:var(--cream)}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.audience-card{background:white;border-radius:var(--radius-image);overflow:hidden;display:flex;flex-direction:column}
.audience-card>img{width:100%;aspect-ratio:1.25}
.audience-card>div{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
/* The audience group is the headline (client feedback Oct 2026): visitors must recognise the three groups at a glance; the promise reads as a subline. */
.audience-card h3{font-size:44px;line-height:1;margin-bottom:12px}
.audience-card:first-child h3{font-size:clamp(44px,4.4vw,56px)}
.audience-card .audience-lead{font:italic 500 23px/1.25 var(--serif);color:var(--petrol);margin-bottom:16px}
.audience-card p:not(.audience-lead){font-size:15px;color:var(--muted)}
.audience-card .text-link{margin-top:auto;padding-top:22px;align-self:flex-start}


.process-four{grid-template-columns:repeat(4,1fr);gap:36px}
.process-four h3{min-height:0}

.whatsapp-button{margin-top:28px;background:white;color:var(--petrol);border-color:#cfdcd9}
.whatsapp-button:hover{background:var(--petrol);color:white}
.booking-option{margin-top:28px;padding:22px;border:1px solid #cfdcd9;border-radius:16px;background:#fff}
.booking-option p{margin:0!important;font-size:14px!important}
.booking-option .booking-state{color:var(--petrol)!important;font-weight:600}
.booking-option .button{margin-top:18px}

@media(max-width:1100px){
  .service-list,.audience-grid{gap:24px}
  .process-four{grid-template-columns:repeat(2,1fr);gap:40px 32px}
}
@media(max-width:900px){
  .service-list{grid-template-columns:1fr;gap:32px}
  .audience-grid{grid-template-columns:1fr}
  .audience-card{display:grid;grid-template-columns:.8fr 1fr}
  .audience-card>img{height:100%;aspect-ratio:auto}
}
@media(max-width:560px){
  .hero-sub{font-size:16px}
  .partners{padding-top:40px}
  .partner-band img{height:54px;max-width:112px}
  .partner-band .ticker-group{gap:48px;padding-right:48px}
  .audience-card{display:flex}
  .audience-card>img{aspect-ratio:1.4;height:auto}
  .audience-card>div{padding:24px 22px 26px}
  .audience-card h3,.audience-card:first-child h3{font-size:38px}
  .process-four{grid-template-columns:1fr;gap:32px}
  .whatsapp-button{width:100%}
}

.geo-answer{margin-top:72px;padding-top:30px;border-top:1px solid var(--line);display:grid;grid-template-columns:.8fr 1.2fr;gap:8%}
.geo-answer h3{font-size:30px;line-height:1.18}
.geo-answer p{font-size:15px;color:var(--muted)}
@media(max-width:900px){.geo-answer{grid-template-columns:1fr;gap:16px;margin-top:52px}}

/* Softer palette: petrol lightened (5.2:1 on white, still AA), turquoise accent muted. */
:root{--petrol:#457579;--turquoise:#7fb5a9;--deep-petrol:#3b6a6e}

/* Arrows: no boxed glyphs. Buttons carry text only; links get one thin line arrow drawn from currentColor. */
:root{--line-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12' fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath d='M0 6h28M23 1.5 28 6l-5 4.5'/%3E%3C/svg%3E")}
.button{justify-content:center}
.button-arrow{display:none!important}
.text-link>span[aria-hidden],.hero-text-link>span[aria-hidden],.direct-contact a>span[aria-hidden],.image-link{font-size:0!important;line-height:0}
.text-link>span[aria-hidden]:after,.hero-text-link>span[aria-hidden]:after,.direct-contact a>span[aria-hidden]:after,.image-link:after{content:"";display:inline-block;width:26px;height:11px;background:currentColor;-webkit-mask:var(--line-arrow) center/contain no-repeat;mask:var(--line-arrow) center/contain no-repeat;transition:transform .45s var(--ease-premium)}
.text-link:hover>span[aria-hidden]:after,.hero-text-link:hover>span[aria-hidden]:after{transform:translateX(4px)}
.text-link,.hero-text-link{gap:16px}
.image-link{background:rgba(255,255,255,.92)}

/* Soft section transitions: colour fields fade into their neighbours instead of hard edges. */
:root{--fade:160px;--mist:#f4f8f6}
.audience{background:linear-gradient(180deg,#fff 0,var(--cream) var(--fade),var(--cream) calc(100% - var(--fade)),#fff 100%)}
.testimonials{background:linear-gradient(180deg,#fff 0,var(--mist) var(--fade),var(--mist) calc(100% - var(--fade)),#fff 100%)}
.founder{position:relative;margin:0 max(20px,calc((100% - 1400px)/2));border-radius:36px;box-shadow:0 40px 90px rgba(69,117,121,.18);background:linear-gradient(160deg,#4c7d80 0%,var(--petrol) 55%,#3e6d71 100%)}
.inquiry{background:linear-gradient(180deg,#fff 0,var(--cream) var(--fade))}
@media(max-width:900px){:root{--fade:96px}.founder{border-radius:26px;margin-inline:12px}}
/* The founder card is narrower than the viewport, so the viewport-based .section-pad gutters would squeeze it on wide screens; size the gutters from the card itself. */
.founder{padding:clamp(48px,5vw,80px) clamp(40px,6.5vw,104px);align-items:center}
.founder-photo{transform:none}
/* The card already frames the section on small screens, so the desktop section padding is too much there. */
@media(max-width:900px){.founder{padding:56px 40px 64px}}
@media(max-width:560px){.founder{padding:20px 20px 40px;gap:28px}.founder-photo>span{margin-top:12px}}


/* Inquiry form: only the essentials stay visible; everything optional folds away. */
.form-more{margin:4px 0 8px;border-top:1px solid #d3dcda;border-bottom:1px solid #d3dcda}
.form-more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:18px 28px 18px 0;position:relative;font-size:15px;color:var(--ink)}
.form-more>summary::-webkit-details-marker{display:none}
.form-more>summary span{font-size:12px;color:var(--muted)}
.form-more>summary:after{content:"+";position:absolute;right:2px;top:15px;font-size:22px;color:var(--petrol)}
.form-more[open]>summary:after{content:"−"}
.form-more[open]{padding-bottom:22px}
.form-more>label{margin-bottom:22px}
.inquiry-selection{margin-top:22px;padding:14px 18px;border-radius:14px;background:white;border:1px solid #e6dfc6;font-size:15px;color:var(--ink)}
.inquiry-selection strong{color:var(--petrol);font-weight:500}

/* Safari draws native selects with their own height and ignores padding, so their underline sat higher than the inputs'. Same box model for every field. */
select{-webkit-appearance:none;appearance:none;border-radius:0;height:auto;padding:13px 28px 13px 0;line-height:inherit;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23457579' stroke-width='1.2'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") right 4px center/12px 8px no-repeat}
input,select{min-height:52px}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.field-row{align-items:end}