:root{
  --blue:#84afdd;        /* primary blue — matches SwooshBG.png for a seamless join */
  --blue-logo:#5d8cb3;   /* logo / deeper accents */
  --blue-deep:#5f8cb8;   /* anxiety box */
  --lightblue:#d6e4ea;   /* services band */
  --paper:#f6f5f2;       /* page base */
  --ink:#707189;         /* headings */
  --body:#707189;        /* body copy */
  --grey:#6f6f6f;        /* footer */
  --maxw:1180px;
  --tile:120px;          /* background pattern tile width (finer = smaller) */
  --serif:'Libre Bodoni','Bodoni Moda',Didot,'Times New Roman',serif;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--body);
  background:var(--paper);
  line-height:1.7;
  font-size:16px;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0;color:var(--ink);letter-spacing:.01em;}
p{margin:0 0 1.1em;}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* ---------- Fixed parallax pattern layer ---------- */
#bg{
  position:fixed;inset:0;z-index:-1;
  background:url('images/BGpattern.png') repeat;
  background-size:var(--tile) auto;
  opacity:.42;                       /* softened so body copy over it stays easy to read */
  will-change:background-position;
  pointer-events:none;
}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:60;
  /* translucent blue gradient — page stays visible behind */
  background-color: #ffffff;
  backdrop-filter:blur(3px);
  box-shadow:0 2px 14px rgba(0,0,0,.08);
}
.nav{
  max-width:var(--maxw);margin:0 auto;padding:20px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;text-decoration:none;}
.brand img{height:60px;width:auto;}
nav.menu{display:flex;gap:46px;}
nav.menu a{
  font-family:var(--serif);font-size:20px;color:#707189;text-decoration:none;
  padding-bottom:2px;border-bottom:1.5px solid transparent;transition:border-color .2s,color .2s;
}
nav.menu a:hover,nav.menu a.active{border-color:#0f0f0f;color:#161616;}

/* ---------- Hero ---------- */
/* Bottom padding scales with the swoosh (which is width:100%, so its height tracks the window).
   As the page widens the centred content pushes "Get in touch" rightward into the rising part of
   the wave, and button and wave are the same blue — so a fixed 40px gap closed up on wide screens. */
.hello{padding:60px 0 calc(3.5vw + 26px);position:relative;}
.hello .wrap{display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:center;position:relative;z-index:3;}
.hello.solo .wrap{grid-template-columns:1fr;}     /* intro with no portrait */
/* The swoosh is width:100%, so its height grows with the window. Scaling this padding at the
   same rate keeps the crest a fixed distance below the heading — which is what holds the
   wren's legs at a constant depth instead of drifting with the browser width. */
.hello.solo{padding-bottom:max(40px, calc(11.638vw - 84px));}   /* top padding matches the home page hero */
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:2;line-height:0;pointer-events:none;}
.hero-wave img{display:block;width:100%;height:auto;}
/* rock wren — hung from the top of the section so its head sits level with the heading;
   the swoosh (z-index 2) paints over its legs below */
.hello.solo .wren{
  position:absolute;z-index:1;pointer-events:none;
  /* centred in the gap between the paragraph edge and the right of the screen */
  right:calc(25vw - 134px);
  top:56px;                          /* nudge this one value to raise/lower the bird */
  width:auto;height:389px;           /* fixed, so the legs sit at a constant depth */
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.18));
}
.hello h1{font-size:88px;line-height:1;margin-bottom:26px;}
.hello p{max-width:560px;color:var(--body);}
.hero-photo{
  width:350px;height:350px;0px;border-radius:50%;object-fit:cover;
  justify-self:end;box-shadow:0 14px 36px rgba(0,0,0,.16);
}
.btn{
  display:inline-block;margin-top:14px;cursor:pointer;text-decoration:none;
  font-family:var(--serif);font-size:21px;color:#fff;background:var(--blue);
  border:none;border-radius:9px;padding:14px 56px;transition:background .2s,transform .1s;
}
.btn:hover{background:var(--blue-logo);}
.btn:active{transform:translateY(1px);}

/* ---------- Wave dividers ---------- */
.wave{display:block;width:100%;height:90px;line-height:0;}
.wave svg{display:block;width:100%;height:100%;}
.wave-up{margin-bottom:-1px;}
.wave-down{margin-top:-1px;}
.wave-onblue{background:var(--lightblue);}

/* ---------- Blue audience band ---------- */
.band-blue{background:var(--blue);color:#fff;padding:30px 0 52px;}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;}
.col h3{color:#fff;font-size:38px;line-height:1.05;}
.col h3 .en{display:block;font-style:italic;font-weight:400;font-size:30px;margin-top:2px;color:#f3f7fa;}
.col .rule{height:1.5px;background:rgba(255,255,255,.7);margin:18px 0 18px;}
.col p{margin:0 0 1.05em;font-size:15.5px;color:#f4f8fb;}
.col > p:last-child{margin-bottom:0;}   /* no trailing gap under the final paragraph */
.col p + ul.ticks{margin-top:-.3em;}    /* lists sit close to their lead-in line */
/* "Learn more" link at the foot of each audience column */
.more{
  display:inline-block;margin-top:16px;text-decoration:none;
  font-family:var(--serif);font-size:18px;color:#fff;
  transition:opacity .2s;
}
.more:hover{opacity:.75;}

/* two-column descriptive layout (services page) */
.cols.two{grid-template-columns:repeat(2,1fr);gap:46px 70px;}
.cols.two .col p{font-size:16px;}
.cols.light .col h3{color:var(--ink);}
.cols.light .col h3 .en{color:var(--body);}
.cols.light .col p{color:var(--body);}
.cols.light .col .rule{background:rgba(38,38,38,.16);}

/* ---------- Lists inside columns ---------- */
ul.ticks{list-style:none;margin:6px 0 0;padding:0;}
ul.ticks li{position:relative;padding-left:18px;margin-bottom:6px;font-size:15.5px;}
.band-blue ul.ticks li{color:#f4f8fb;}
ul.ticks li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--blue);transform:rotate(45deg);}
.band-blue ul.ticks li::before{background:rgba(255,255,255,.85);}

/* full-width column inside a two-column grid */
.cols.two .col.span{grid-column:1/-1;}
.cols.two .col.span p{max-width:820px;}

/* ---------- My approach (index) ---------- */
.about{padding:64px 0;}
.about .wrap{max-width:860px;}
.about h2{font-size:46px;line-height:1.08;margin-bottom:22px;text-align:center;}

/* ---------- Qualifications (services) ---------- */
.quals{background:var(--paper);padding:64px 0 56px;}
.quals h2{font-size:46px;line-height:1.08;margin-bottom:30px;}
.quals h3{font-size:26px;margin-bottom:10px;}
.qcols{display:grid;grid-template-columns:1fr 1fr;gap:40px 70px;}
.qnote{margin:34px 0 0;max-width:760px;}

/* ---------- Quote ---------- */
.quote{padding:64px 0;text-align:center;}
.quote blockquote{
  margin:0 auto;max-width:680px;font-family:var(--serif);font-style:italic;
  font-size:34px;line-height:1.35;color:var(--ink);
}
.quote cite{display:block;font-family:var(--serif);font-style:normal;font-size:20px;color:var(--body);margin-top:18px;}

/* ---------- Services band ---------- */
.services{
  background-color:var(--lightblue);
  background-image:url('images/servicesBG.png');   /* faint leaf overlay on the solid colour */
  background-repeat:repeat;
  background-size:380px 380px;
  padding:50px 0 30px;scroll-margin-top:90px;
  position:relative;z-index:2;overflow:visible;}
.srow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:56px;}
.srow:last-of-type{margin-bottom:0;}
.srow .circle{
  width:500px;height:500px;border-radius:50%;justify-self:center;
  box-shadow:0 16px 38px rgba(0,0,0,.16);
}
/* top & bottom circles overlap the solid band onto the patterned background */
.srow:first-of-type .circle{margin-top:-95px;}
.srow:last-of-type .circle{margin-bottom:-115px;position:relative;z-index:5;}
.ph-green{background:#b9cdaf;}
.ph-slate{background:#9fb6c6;}
.srow.flip .text{order:2;}
.srow.flip .media{order:1;}
.services h2{font-size:46px;line-height:1.05;margin-bottom:22px;}
.cred-logo{width:230px;height:auto;margin-top:6px;
  background:#fff;border-radius:10px;padding:12px 18px;
  box-shadow:0 8px 22px rgba(0,0,0,.10);}
.slink{text-decoration:none;color:inherit;border-bottom:1.5px solid transparent;transition:border-color .2s;}
.slink:hover{border-color:var(--ink);}
.col[id]{scroll-margin-top:110px;}
.services p{max-width:520px;}

/* pattern strip below services (holds Find out more) */
.findmore{position:relative;z-index:1;padding:66px 0 58px;background:transparent;}

/* pattern strip between sections */
.patstrip{height:130px;background:transparent;}

/* ---------- Contact ---------- */
.contact{background:var(--blue);color:#fff;padding:72px 0 84px;scroll-margin-top:78px;}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.contact h2{color:#fff;font-size:60px;margin-bottom:20px;}
.contact .intro{max-width:430px;color:#eef4f8;}
.contact .detail{margin-top:26px;}
.contact .detail .lab{font-family:var(--serif);font-size:21px;color:#fff;}
.contact .detail a{color:#eef4f8;text-decoration:none;}
.contact .detail a:hover{text-decoration:underline;}

form.contact-form{display:flex;flex-direction:column;gap:30px;padding-top:6px;}
form.contact-form .field{display:flex;flex-direction:column;}
form.contact-form label{font-family:var(--serif);font-size:20px;color:#fff;margin-bottom:8px;}
form.contact-form input,form.contact-form textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:#fff;
  background:transparent;border:none;border-bottom:1.5px solid rgba(255,255,255,.6);
  padding:6px 2px;transition:border-color .2s;
}
form.contact-form textarea{min-height:90px;resize:vertical;}
form.contact-form input::placeholder,form.contact-form textarea::placeholder{color:rgba(255,255,255,.55);}
form.contact-form input:focus,form.contact-form textarea:focus{outline:none;border-color:#fff;}
form.contact-form button{
  align-self:flex-start;margin-top:6px;cursor:pointer;
  font-family:var(--serif);font-size:20px;color:var(--blue);background:#fff;
  border:none;border-radius:9px;padding:12px 46px;transition:opacity .2s,transform .1s;
}
form.contact-form button:hover{opacity:.9;}
form.contact-form button:active{transform:translateY(1px);}
form.contact-form button:disabled{opacity:.6;cursor:default;transform:none;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}  /* spam honeypot — hidden from people */
.form-note{font-size:14px;color:#eef4f8;min-height:18px;margin:4px 0 0;}
.form-note.error{color:#ffe0d6;}
.form-note a{color:#fff;}

/* ---------- Areas struggling ---------- */
.areas{padding:48px 0 96px;background:var(--lightblue);position:relative;z-index:2;overflow:visible;}
.areas .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start;}
.areas h2{font-size:50px;line-height:1.08;margin-bottom:22px;}
.areas p{max-width:540px;}
.areas .list{
  list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;max-width:520px;
}
.areas .list li{position:relative;padding-left:18px;font-size:15.5px;color:var(--body);}
.areas .list li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--blue);transform:rotate(45deg);}
.fadebox{
  background:var(--blue-deep);color:#fff;border-radius:10px;
  min-height:300px;margin-top:-72px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:30px;box-shadow:0 16px 38px rgba(0,0,0,.16);
}
.fadebox span{
  font-family:var(--serif);font-size:38px;line-height:1.15;
  opacity:1;transition:opacity .7s ease;
}

/* ---------- Footer ---------- */
footer{background:var(--grey);color:#e7e7e7;padding:70px 0 56px;}
footer .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
footer h4{font-family:var(--serif);color:#fff;font-size:22px;margin-bottom:12px;}
footer p{font-size:14px;color:#dcdcdc;margin:0 0 .6em;}
footer a{color:#fff;text-decoration:none;}
footer a:hover{text-decoration:underline;}
.footer-base{border-top:1px solid rgba(255,255,255,.18);margin-top:40px;padding-top:22px;
  font-size:13px;color:#d2d2d2;
  /* override the 3-column footer grid; copyright and credit share a row, tops aligned */
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px 48px;}
/* image attribution — quiet, but links underlined as licence terms expect */
.footer-base .credit{font-size:12px;line-height:1.6;color:#bdbdbd;margin:0;max-width:620px;}
.footer-base .credit a{color:#e4e4e4;text-decoration:underline;}
.footer-logo{background:#fff;border-radius:10px;padding:10px 16px;width:210px;height:auto;
  margin-top:18px;box-shadow:0 6px 18px rgba(0,0,0,.18);}
.footer-note{font-size:12.5px;color:#c9c9c9;margin-top:12px;max-width:280px;}

/* ---------- Responsive ---------- */
/* below this the intro text and the wren start competing for the same space */
@media (max-width:1000px){
  .hello.solo .wren{display:none;}
}
@media (max-width:920px){
  .hello h1{font-size:62px;}
  .hello .wrap,.contact .wrap,.areas .wrap{grid-template-columns:1fr;gap:40px;}
  .hero-photo{justify-self:center;width:240px;height:240px;}
  /* header: stack logo + nav, centred (left/right alignment kept on wider views) */
  .nav{flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;}
  nav.menu{justify-content:center;}
  /* keep the intro's Get in touch button clear of the swoosh wave */
  .hello.solo{padding-bottom:104px;}
  .cols{grid-template-columns:1fr;gap:36px;}
  .cols.two{grid-template-columns:1fr;gap:36px;}
  .srow{grid-template-columns:1fr;gap:28px;text-align:center;}
  .srow.flip .text{order:1;}.srow.flip .media{order:2;}
  .srow .circle{width:260px;height:260px;}
  /* no overlap on narrow screens — keep circles clear of the body copy */
  .srow:first-of-type .circle{margin-top:0;}
  .srow:last-of-type .circle{margin-bottom:0;}
  .services p,.contact .intro,.areas p{max-width:none;}
  /* supervision credential logo centres with the text on narrow screens */
  .cred-logo{margin-left:auto;margin-right:auto;}
  .areas .list{grid-template-columns:1fr;}
  .qcols{grid-template-columns:1fr;gap:30px;}
  /* fade box drops below the text instead of overlapping it */
  .fadebox{margin-top:0;}
  /* buttons sit centred on narrow/phone screens (left-biased on wider views) */
  .btn{display:block;width:-moz-max-content;width:max-content;max-width:100%;margin-left:auto;margin-right:auto;}
  footer .wrap{grid-template-columns:1fr;gap:30px;}
}
@media (max-width:560px){
  .wrap{padding:0 22px;}
  .nav{padding:16px 22px;flex-wrap:wrap;gap:14px;}
  nav.menu{gap:28px;}
  .hello h1{font-size:50px;}
  .quote blockquote{font-size:26px;}
  .contact h2,.areas h2,.services h2{font-size:38px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .fadebox span{transition:none;}
}