/* Honey-gold palette drawn from the supplied cinematic portrait.
   The historical filename is retained. Layout and type live in styles.css. */
:root{
  --paper:#ffffff;
  --sand-1:#fcf8f2;
  --sand-2:#f3e9dc;
  --sand-3:#e6d2b5;
  --section-tint:var(--sand-2);
  --dark:#2b211a;
  --umber:#65432c;
  --accent-wash:rgba(101,67,44,.2);
  --honey:#d9ad69;
  --ink:var(--dark);
  --muted:#6b5a4c;
  --rule:rgba(43,33,26,.16);
  --glass:rgba(255,255,255,.14);
  --white:var(--paper);
  --forest:var(--dark);
  --sage:var(--honey);
  --line:var(--rule);
  --course-ink:var(--ink);
}
body{background:var(--paper);color:var(--ink)}
h1,h2,h3,.article-title,.evidence-number{color:var(--dark)}
::selection{background:var(--sand-3);color:var(--ink)}
:focus-visible{outline-color:var(--dark)}
.skip-link{background:var(--paper);color:var(--ink)}

/* Neutral frosted navigation blends into the photograph, then lightens over the page. */
.site-header{background:rgba(18,18,18,.22);color:var(--paper);backdrop-filter:blur(18px) saturate(110%);-webkit-backdrop-filter:blur(18px) saturate(110%)}
.site-header.scrolled{background:rgba(255,255,255,.9);color:var(--ink);backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%)}
.site-header.menu-open{background:rgba(255,255,255,.97);color:var(--ink);backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%)}
.desktop-nav a:hover{opacity:1;color:inherit}
.button-primary{background:var(--dark);color:var(--paper)}
.button-primary:hover{background:var(--umber)}
.header-cta{background:var(--paper);color:var(--dark)}
.header-cta:hover{background:var(--honey);color:var(--dark)}
.site-header.scrolled .header-cta,.site-header.menu-open .header-cta{background:var(--dark);color:var(--paper)}
.site-header.scrolled .header-cta:hover,.site-header.menu-open .header-cta:hover{background:var(--umber)}
.menu-toggle span{background:currentColor}
.mobile-menu{background:rgba(255,255,255,.98);color:var(--ink);border-color:var(--rule)}
.mobile-menu a,.mobile-menu button{border-color:var(--rule)}

/* Full-bleed terrace scene; a lower crop keeps the seated person in view. */
.hero{background:#21170f;color:var(--paper)}
.hero-image{inset:0;background-size:cover;background-position:50% 88%;filter:none;animation:none;transform:none}
.hero-shade{background:linear-gradient(90deg,rgba(18,18,18,.18) 0%,rgba(18,18,18,.1) 48%,rgba(18,18,18,0) 78%,rgba(18,18,18,.04) 100%)}
.hero-content{max-width:min(62%,1000px)}
.hero h1{color:var(--paper);font-size:clamp(56px,5.6vw,80px);text-shadow:0 2px 20px rgba(0,0,0,.18)}
.hero-description{color:var(--paper);text-shadow:0 1px 8px rgba(0,0,0,.2)}
.hero .button-primary{background:var(--honey);color:var(--dark)}
.hero .button-primary:hover{background:var(--sand-3)}
.hero .button-outline{color:var(--paper);background:rgba(33,23,15,.22);border-color:rgba(255,255,255,.65)}
.hero .button-outline:hover{background:rgba(255,255,255,.13);border-color:var(--paper)}
.hero-grid div:first-child{background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.06) 75%,rgba(255,255,255,.18))}
.hero-grid div:last-child{background:rgba(255,255,255,.18)}
.eyebrow,.expert-note,.hero-footnote p{color:var(--paper)}
.footnote-line{background:var(--honey)}

/* Transparent white glass keeps the portrait visible through the journal card. */
.journal-card{background:var(--glass);color:var(--paper);border-color:rgba(255,255,255,.38);backdrop-filter:blur(28px) saturate(125%);-webkit-backdrop-filter:blur(28px) saturate(125%)}
.journal-card:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6)}
.journal-thumb{background:var(--sand-1)}
.journal-card .article-title,.journal-card .article-category,.journal-card .article-link{color:var(--paper)}
.journal-card:focus-visible,.journal-selector:focus-visible{outline-color:var(--paper)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.journal-card{background:rgba(18,18,18,.78)}}
.journal-selector::before{background:rgba(255,255,255,.42)}
.journal-selector[aria-pressed="true"]::before,.journal-selector:hover::before{background:var(--honey)}

/* Preserve the natural skin tones and daylight in the lifestyle photography. */
.about-slide img,.journal-thumb img,.course-preview>img,.course-player>img{filter:none}
.about{--about-ink:var(--ink);--about-muted:var(--muted);--about-rule:var(--rule);background:var(--paper);color:var(--ink)}
.about ::selection,.courses ::selection{background:var(--sand-3);color:var(--ink)}
.about-media,.about-slideshow,.course-preview,.course-player{background:var(--sand-1)}
.about-slideshow,.about-caption,.course-image-label,.course-player-label{color:var(--paper)}
.about-slide::after{inset:35% 0 0;background:linear-gradient(transparent,rgba(43,33,26,.58) 52%,rgba(43,33,26,.88))}
.about-slide-selector::before{background:rgba(255,255,255,.48)}
.about-slide-selector[aria-pressed="true"]::before{background:var(--paper)}
.about-slide-selector[aria-pressed="false"]:hover::before{background:rgba(255,255,255,.78)}
.about-media-controls :focus-visible{outline-color:var(--paper)}

/* Section colours stay the same at every viewport width. */
.services{--services-rule:var(--rule);background:var(--section-tint);color:var(--ink);border-top:1px solid var(--rule)}
.services ::selection{background:var(--sand-3);color:var(--ink)}
.services-heading>p,.service-row>p{color:var(--muted)}
.service-action{color:var(--dark);background:var(--paper);border-color:rgba(101,67,44,.34)}
.service-action:hover{background:var(--sand-1);border-color:var(--dark)}
.service-personalised{background:linear-gradient(115deg,var(--sand-1),var(--paper) 60%,var(--sand-2));color:var(--ink)}
.service-personalised p{color:var(--ink)}
.service-offer{background:var(--dark);color:var(--paper)}
.service-offer:hover{background:var(--umber)}
.service-personalised :focus-visible{outline-color:var(--dark)}

/* Courses retain the compact carousel and clear free-course labels. */
.courses{--course-ink:var(--ink);--course-muted:var(--muted);--course-rule:var(--rule);background:var(--paper);color:var(--ink)}
.course-filter[aria-pressed="true"]{background:var(--dark);color:var(--paper);border-color:var(--dark)}
.course-filter[aria-pressed="false"]:hover{background:var(--sand-1);border-color:var(--dark)}
.course-carousel-arrow{color:var(--ink)}
.course-carousel-arrow:hover:not(:disabled){background:var(--sand-1);border-color:var(--dark)}
.course-gallery{scrollbar-color:rgba(101,67,44,.4) transparent}
.course-gallery::-webkit-scrollbar-thumb{background:rgba(101,67,44,.4)}
.course-preview::after{inset:40% 0 0;background:linear-gradient(transparent,rgba(43,33,26,.48) 48%,rgba(43,33,26,.86))}
.course-play{background:rgba(43,33,26,.56);color:var(--paper);border-color:rgba(255,255,255,.8)}
.course-preview:hover .course-play{background:rgba(101,67,44,.9)}
.course-duration{background:var(--paper);color:var(--ink)}
.course-open,.evidence-list a{color:var(--umber)}
.course-open:hover,.evidence-list a:hover{color:var(--dark)}

/* Soft sand at the corners keeps the compact contact banner light and open. */
.cta-banner{background:var(--paper);color:var(--dark)}
.cta-banner-inner{background:radial-gradient(ellipse at 0% 0%,var(--sand-2),transparent 56%),radial-gradient(ellipse at 100% 100%,var(--sand-3),transparent 58%),var(--paper)}
.cta-banner p{color:var(--muted);opacity:1}
.cta-banner-button{background:var(--dark);color:var(--paper)}
.cta-banner-button:hover{background:var(--umber)}
.cta-banner :focus-visible{outline-color:var(--dark)}
.cta-banner ::selection{background:var(--sand-3);color:var(--dark)}

/* Dialogs share the white, espresso and soft sand roles of the page. */
dialog{background:var(--paper);color:var(--ink);box-shadow:0 20px 80px rgba(43,33,26,.24)}
dialog::backdrop{background:rgba(43,33,26,.46);backdrop-filter:blur(12px)}
.dialog-top{border-color:var(--rule)}
.dialog-kicker,.dialog-content .dialog-kicker{color:var(--dark)}
.dialog-content p{color:var(--muted)}
.dialog-content .sample-note{color:var(--muted);border-color:var(--rule)}
.dialog-content .button{background:var(--dark);color:var(--paper)}
.dialog-content .button:hover{background:var(--umber)}
.programme-options button,.programme-options button:last-child{color:var(--ink);border-color:var(--rule)}
.programme-options small{color:var(--muted)}
.contact-preview{background:var(--sand-1);border-color:var(--rule)}
.dialog-content .contact-preview p{color:var(--muted)}
#course-dialog{--course-ink:var(--ink);color:var(--ink)}
#course-dialog>.dialog-top{background:var(--paper)}
.course-player::after{background:linear-gradient(transparent,rgba(43,33,26,.88))}
.course-preview-details>p,.course-help p,.course-lesson>p,.course-lesson-steps p{color:var(--muted)}
.course-facts>div,.course-facts>div:last-child{border-color:var(--rule)}
.course-facts dt,.course-preview-details>.course-sample-note,.course-preview-details>.course-free-note{color:var(--muted)}
.course-start{background:var(--dark);color:var(--paper)}
.course-start:hover{background:var(--umber)}
.course-lesson-steps li::marker{color:var(--dark)}
.course-back{border-color:rgba(101,67,44,.4);color:var(--ink)}
.course-back:hover{background:var(--sand-1)}

/* Keep the image continuous behind the natural-flow hero on narrow or portrait screens. */
@media(max-width:1100px),(max-aspect-ratio:6/5){
  .hero{display:flex;flex-direction:column;height:auto;min-height:100svh;padding-bottom:0}
  .hero-image{inset:0;height:auto;background-size:cover;background-position:50% 88%}
  .hero-shade{background:linear-gradient(180deg,rgba(18,18,18,.08) 0%,rgba(18,18,18,.06) 22%,rgba(18,18,18,.12) 48%,rgba(18,18,18,.16) 100%)}
  .hero-content{position:relative;top:auto;transform:none;max-width:none;width:100%;padding:calc(var(--header-height) + 34svh) var(--gutter) 40px}
  .hero h1{font-size:clamp(34px,6vw,64px)}
  .hero-actions{flex-wrap:wrap}
  .journal{position:relative;inset:auto;align-self:flex-end;width:min(420px,calc(100% - 2 * var(--gutter)));margin:auto var(--gutter) 40px}
}
@media(max-width:620px){
  .hero h1{font-size:clamp(32px,9vw,52px)}
  .hero-content{padding-bottom:32px}
  .journal{margin-bottom:40px}
}

/* Labels stay readable over the lightest parts of the photography. */
.course-image-label{padding:5px 8px;border-radius:var(--radius-detail);background:rgba(43,33,26,.8)}
.course-player-label{padding:8px 10px;border-radius:var(--radius-detail);background:rgba(43,33,26,.8)}

/* The roadmap follows the existing white, sand and espresso roles. */
.roadmap{background:var(--section-tint)}
.roadmap-stage{background:var(--section-tint);color:var(--ink);border-top:1px solid var(--rule)}
.roadmap-intro>p,.roadmap-current p,.roadmap-details p,.roadmap-status{color:var(--muted)}
.roadmap-track{stroke:var(--sand-3)}
.roadmap-progress{stroke:var(--umber)}
.roadmap-node-dot{background:var(--paper);border-color:var(--umber);color:var(--umber)}
.roadmap-node[aria-current="step"] .roadmap-node-dot{background:var(--umber);color:var(--paper);border-color:var(--umber)}
.roadmap-node-label,.roadmap-current h3,.roadmap-details h3,.roadmap-orbit-count,.roadmap-status{color:var(--umber)}
.roadmap-control{color:var(--dark)}
.roadmap-node:hover:not([aria-current="step"]) .roadmap-node-dot{background:var(--sand-2)}
.roadmap-node:focus-visible{outline-color:var(--umber);border-radius:50%}
.roadmap-details>li{border-color:var(--rule)}
/* Contact, page links and services complete the alternating section rhythm. */
.site-footer{background:var(--paper);color:var(--ink)}
.site-footer ::selection{background:var(--accent-wash);color:var(--ink)}
.footer-grid>*,.footer-bottom{border-color:var(--rule)}
.site-footer h3,.footer-intro,.footer-note,.footer-bottom p{color:var(--muted)}
.footer-field input,.footer-field textarea{background:var(--paper);color:var(--ink);border-color:rgba(101,67,44,.66);caret-color:var(--umber)}
.footer-field input::placeholder,.footer-field textarea::placeholder{color:var(--muted);opacity:1}
.footer-field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:inset 0 0 0 100px var(--paper)}
.footer-field input[aria-invalid="true"],.footer-field textarea[aria-invalid="true"]{border-color:var(--umber);box-shadow:inset 0 0 0 1px var(--umber)}
.footer-field input[aria-invalid="true"]:-webkit-autofill{box-shadow:inset 0 0 0 1px var(--umber),inset 0 0 0 100px var(--paper)}
.footer-form-status,.footer-field-error{color:var(--umber)}
.footer-links a[href],.footer-links button{color:var(--dark)}
.footer-social-button{background:transparent;color:var(--muted)}
@media(hover:hover) and (pointer:fine){
  .footer-field input:hover:not([aria-invalid="true"]),.footer-field textarea:hover:not([aria-invalid="true"]){border-color:rgba(101,67,44,.85)}
  .footer-links a[href]:hover,.footer-links button:hover{color:var(--umber)}
}
/* Small honey-gold arrow tiles echo the reference without filling large surfaces. */
.hero-actions .button-primary svg,.cta-banner-button svg,.footer-submit svg{width:30px;height:30px;padding:6px;background:var(--honey);color:var(--dark);border-radius:50%}
:focus-visible{outline-color:var(--umber)}
.cta-banner :focus-visible,.service-personalised :focus-visible{outline-color:var(--umber)}

/* Hero actions stay readable on the photographic background. */
.hero .hero-actions .button-primary svg{background:var(--paper);color:var(--dark)}
.hero .button:focus-visible,.site-header:not(.scrolled):not(.menu-open) :focus-visible{outline-color:var(--paper)}

/* The journal continues the white / sand section rhythm below the CTA. */
.blog{background:var(--section-tint);color:var(--ink)}
.blog-heading p,.blog-status,.blog-card-meta,.blog-card-excerpt{color:var(--muted)}
.blog-arrow,.blog-card-title{background:transparent;color:var(--dark);border-color:var(--rule)}
.blog-card-image{background:var(--sand-3)}
.blog-card:focus-within{outline-color:var(--umber)}
.blog-track{scrollbar-color:rgba(101,67,44,.4) transparent}
.blog-track::-webkit-scrollbar-thumb{background:rgba(101,67,44,.4)}
@media(hover:hover) and (pointer:fine){
  .blog-arrow:hover:not(:disabled){background:var(--paper);border-color:var(--dark)}
  .blog-card:hover .blog-card-title{color:var(--umber)}
}

/* Sample client-logo strip: white and monochrome, matching the quiet page rhythm. */
.client-logos{background:var(--paper);color:var(--muted);border-color:var(--rule)}
.client-logos-label{color:var(--muted)}
.client-logos-window{scrollbar-color:var(--sand-3) transparent}
.client-logos-toggle{background:transparent;color:var(--dark)}
@media(hover:hover) and (pointer:fine){.client-logos-toggle:hover{background:var(--sand-1)}}