/* ==========================================================================
   Your Sidekick: the calm magazine look (draft, 31 October 2026)
   Nikki, 31 October 2026: "Start again", a "calm magazine" feel, "fewer boxes",
   her photo lower down, and the white clean look kept (Brand Guide 3.0.4, section 7).
   Every word, title and link on the pages stays as it was. Only the layout changes.

   Grid card (Design check loop v1.0, Part 1):
   - Page 1200px wide, 12 columns, 24px gaps, 24px sides (16px on phones)
   - Spacing steps 8, 16, 24, 32, 48, 64, 96. Sections are 96px apart (64px on phones)
   - Headings Josefin Sans 600, sentence case. Body Work Sans 18px, line height 1.65.
     Labels IBM Plex Mono 500
   - No line longer than 66 characters
   - White page, Rain Forest #13433A headings, buttons and links, Ink #1C2621 text,
     green line #C9DAD3 for dividers only (never text, never a button edge)
   - One box per page: the price and the Book button, white with a 1.5px Rain Forest line
   - No Wattle, no shadows, no invented tints
   Contrast: Rain Forest on white 11.1:1, Ink on white 15.6:1, white on Rain Forest 11.1:1.
   ========================================================================== */

:root{
  --forest:#13433A; --ink:#1C2621; --white:#FFFFFF; --line:#C9DAD3;
  --max:1200px; --gap:24px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --r-md:12px; --r-lg:20px; --r-full:999px;
  --head:'Josefin Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.65;font-weight:400}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s3)}
a{color:var(--forest)}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,iframe:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:var(--white);padding:12px 20px;z-index:100;text-decoration:none}
.skip:focus{left:12px;top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Only Work Sans 400 and 600 are loaded, so bold means 600 */
strong,b{font-weight:600}
img{max-width:100%;height:auto}

/* ---- Type ---------------------------------------------------------------- */
h1,h2,h3,h4{color:var(--forest);font-family:var(--head);font-weight:600;letter-spacing:0;text-transform:none}
h1{font-size:clamp(40px,6.4vw,80px);line-height:1.02;margin:0 0 var(--s5);max-width:15ch}
h2{font-size:clamp(28px,3.6vw,44px);line-height:1.08;margin:0 0 var(--s3);max-width:20ch}
h3{font-size:clamp(20px,2vw,24px);line-height:1.2;margin:var(--s4) 0 var(--s1)}
h4{font-size:19px;line-height:1.25;margin:0 0 var(--s1)}
p{max-width:66ch;margin:0 0 var(--s2)}
.lead{font-size:20px;max-width:58ch}
.standfirst{font-size:clamp(22px,2.4vw,28px);line-height:1.4;max-width:30ch;color:var(--ink)}
/* The small label above a section, like a magazine kicker */
.kicker{font-family:var(--mono);font-weight:500;font-size:15px;line-height:1.5;color:var(--forest);margin:0 0 var(--s2);max-width:none}
.kicker .num{display:inline-block;min-width:2.4em}
.small{font-size:16px}

/* ---- Header: name and logo on the left, menu and one button on the right -- */
header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:76px}
.who{display:inline-flex;flex-direction:column;justify-content:center;gap:2px;text-decoration:none;color:var(--ink);min-height:44px;min-width:0}
.who-name{display:block;font-family:var(--head);font-weight:600;font-size:20px;line-height:1.2;color:var(--forest)}
.who-sub{display:flex;align-items:center;gap:6px;font-size:14px;line-height:1.35;color:var(--ink)}
.who-sub img{display:block;height:14px;width:auto;flex:0 0 auto}
nav ul{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font-size:16px;padding:8px 0;display:inline-flex;align-items:center;min-height:44px;border-bottom:2px solid transparent;color:var(--forest);white-space:nowrap}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--forest)}
nav a[aria-current="page"]{font-weight:600}

/* ---- Buttons: one solid button per screen, outlined for anything second --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 28px;border-radius:var(--r-full);background:var(--forest);color:var(--white);border:2px solid var(--forest);text-decoration:none;font-weight:600;font-size:16px;line-height:1.2;transition:background-color .15s ease,color .15s ease}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn-ghost{background:transparent;color:var(--forest)}
.btn-ghost:hover{background:var(--forest);border-color:var(--forest);color:var(--white)}
.btn-sm{min-height:44px;padding:10px 22px}
nav a.btn{color:var(--white);border-bottom:2px solid var(--forest);padding:10px 22px}
nav a.btn:hover{border-color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s4) 0 0}
.cta-after{margin-top:var(--s2)}

/* ---- Page rhythm: space and a thin line between sections, not boxes ------ */
main{padding:0 0 var(--s7)}
.section{padding-top:var(--s7)}
.section > .rule{border-top:1px solid var(--line);padding-top:var(--s4)}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.col-head{grid-column:1 / span 5}
.col-body{grid-column:6 / span 7}
.col-wide{grid-column:1 / -1}

/* ---- Hero: big words, no box, no photo ----------------------------------- */
.hero{padding-top:var(--s6)}
.hero h1{max-width:14ch}
.hero .cols{align-items:start;border-top:1px solid var(--line);padding-top:var(--s4)}
.hero .standfirst{grid-column:1 / span 6;margin:0}
.hero .hero-act{grid-column:8 / span 5}

/* ---- The one box on the page: the price and the Book button -------------- */
.price-box{border:1.5px solid var(--forest);border-radius:var(--r-lg);padding:var(--s4);margin-top:var(--s5);max-width:560px}
.price{font-family:var(--head);font-weight:600;font-size:clamp(48px,6vw,72px);line-height:1;margin:0 0 var(--s2);color:var(--forest)}
.price-box .cta-row{margin-top:var(--s3)}

/* A small aside in plain type, not a box */
.note{font-size:16px;margin:var(--s3) 0 0;padding-left:0}
.note strong{color:var(--forest)}

ol.plain,ul.plain{padding-left:22px;margin:0 0 var(--s2)}
ol.plain li,ul.plain li{margin-bottom:var(--s1);max-width:62ch}

/* ---- Reviews: a pull quote, the way a magazine quotes someone ------------ */
.carousel{max-width:820px}
.carousel-track{display:grid;gap:var(--s5)}
.quote{margin:0}
.quote blockquote{margin:0}
.quote p{font-size:clamp(22px,2.4vw,28px);line-height:1.45;color:var(--ink);max-width:36ch;margin:0 0 var(--s3)}
.quote figcaption{font-weight:600;color:var(--forest)}
.quote figcaption span{display:block;font-weight:400;color:var(--ink);font-size:16px;margin-top:2px}
.carousel.is-on .carousel-track > .quote{grid-area:1/1;visibility:hidden;opacity:0}
.carousel.is-on .carousel-track > .quote.is-active{visibility:visible;opacity:1}
.carousel-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
.carousel-controls .btn{font-family:inherit;cursor:pointer}
.carousel-count{margin:0 0 0 4px;font-family:var(--mono);font-size:16px;color:var(--ink)}

/* ---- Steps: three columns, each under its own thin line, no cards -------- */
.steps{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.steps > li{border-top:2px solid var(--forest);padding-top:var(--s3)}
.steps h3{margin-top:0}
.steps p:last-child{margin-bottom:0}

/* ---- Two short pieces side by side, split by a thin line ----------------- */
.aside-col{border-left:1px solid var(--line);padding-left:var(--s4)}
.aside-col h3{margin-top:0}

/* ---- Meet Nikki: the photo sits here, part of the story ------------------ */
.portrait{grid-column:1 / span 4;margin:0}
.portrait img{display:block;width:100%;max-width:360px;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-lg)}
.portrait figcaption{font-size:16px;margin-top:var(--s2);color:var(--ink);max-width:36ch}
.meet-text{grid-column:6 / span 7}

/* ---- Other ways I can help: a price list, one line each ------------------ */
.ladder{list-style:none;padding:0;margin:var(--s4) 0 0;border-bottom:1px solid var(--line)}
.ladder > li{display:grid;grid-template-columns:2fr 6fr 4fr;column-gap:var(--gap);align-items:baseline;border-top:1px solid var(--line);padding:var(--s3) 0}
.ladder-price{font-family:var(--head);font-weight:600;font-size:26px;line-height:1.15;color:var(--forest);margin:0}
.ladder h3{margin:0 0 4px}
.ladder-desc p{margin:0}
.ladder-link{margin:0;font-weight:600;text-align:right}

/* ---- Closing: big words and the button, no box --------------------------- */
.closing h2{font-size:clamp(34px,5vw,64px);max-width:16ch}

/* ---- Footer: no box, a line above, four columns -------------------------- */
footer{border-top:1px solid var(--line);padding:var(--s6) 0 var(--s5);font-size:16px}
footer a{color:var(--forest)}
.footgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.foot-h{font-family:var(--mono);font-size:15px;font-weight:500;margin:0 0 var(--s2);color:var(--forest)}
.footlinks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.footlinks a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
footer .ack{margin:var(--s4) 0 0;font-size:16px;max-width:62ch}
.fine{margin:var(--s2) 0 0;font-size:16px}
footer .quiet{font-size:14px}

/* ---- Smaller screens ------------------------------------------------------ */
/* The name and the full menu need about 1100px to share a row. Below that the
   name gets its own row and the menu sits underneath, so no menu word wraps. */
@media (max-width:1100px){
  .bar{flex-wrap:wrap;gap:4px var(--s3);padding-top:10px;padding-bottom:10px}
  .who{flex:0 0 100%}
  nav{flex:0 0 100%}
  nav ul{gap:8px 20px;flex-wrap:wrap;justify-content:flex-start}
}
@media (max-width:860px){
  .cols{grid-template-columns:1fr}
  .col-head,.col-body,.col-wide,.hero .standfirst,.hero .hero-act,.portrait,.meet-text{grid-column:1 / -1}
  .hero .hero-act{margin-top:var(--s4)}
  .portrait{margin-bottom:var(--s4)}
  .steps{grid-template-columns:1fr;gap:var(--s4)}
  .aside-col{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s3)}
  .ladder > li{grid-template-columns:1fr;row-gap:4px}
  .ladder-link{text-align:left;margin-top:var(--s1)}
  .footgrid{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .section{padding-top:var(--s6)}
}
/* Once the menu wraps the header is too tall to stay pinned: it would cover
   whatever a keyboard user has just tabbed to. Let it scroll away. */
@media (max-width:719px){
  header{position:static}
  html{scroll-padding-top:12px}
}
@media (max-width:600px){
  .wrap{padding-left:var(--s2);padding-right:var(--s2)}
  .hero{padding-top:var(--s5)}
  h1{margin-bottom:var(--s4)}
  nav ul{gap:2px 16px}
  nav a{padding:4px 0}
  .price-box{padding:var(--s3)}
  .footgrid{grid-template-columns:1fr}
  main{padding-bottom:var(--s6)}
}
@media (prefers-reduced-motion:no-preference){
  .carousel.is-on .carousel-track > .quote{transition:opacity .5s ease,visibility .5s}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* ==========================================================================
   Shared blocks for every page (31 October 2026), redrawn in the magazine look:
   the same class names the pages already use, so no words or links change.
   "Panels" and "cards" lose their boxes and become space and a thin line.
   ========================================================================== */
.intro{font-size:20px;max-width:60ch}
.hook{font-size:21px;font-weight:600;color:var(--forest);margin:calc(var(--s3) * -1) 0 var(--s2)}
.page-head{padding-top:var(--s6)}
.page-head h1{max-width:18ch}
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;grid-template-columns:7fr 5fr;gap:var(--s5);align-items:start}
.panel{padding:0;border:0;border-radius:0;background:transparent}
.panel h2:first-child,.panel h3:first-child,.card h3:first-child,.card h4:first-child{margin-top:0}
.panel p:last-child,.card p:last-child{margin-bottom:0}
.card{border-top:2px solid var(--forest);padding-top:var(--s3)}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s5);align-items:start}
.hero-photo{margin:0}
.hero-photo img{display:block;width:100%;max-width:360px;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-lg)}
.hero-photo figcaption{font-size:16px;margin-top:var(--s2)}
.faq dt{font-weight:600;color:var(--forest);margin-top:var(--s3)}
.faq dd{margin:6px 0 0;max-width:66ch}
table{border-collapse:collapse;width:100%;max-width:640px;margin:var(--s3) 0}
th,td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--forest)}
.quote{margin:var(--s3) 0}
.grid > .quote{margin:0}
input[type=text],input[type=email],textarea,select{width:100%;max-width:480px;min-height:52px;padding:14px 16px;border:1.5px solid var(--forest);border-radius:var(--r-md);font-family:inherit;font-size:16px;background:var(--white);color:var(--ink)}
.logo{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--forest);font-size:20px}
.logo img{display:block;height:28px;width:auto}
/* A product's price and its one button: the one box on a product page */
.offer-group{margin-top:var(--s5)}
.offer-group > h2{margin-bottom:var(--s2)}
@media (max-width:860px){
  .grid-2,.grid-3,.split,.hero-grid{grid-template-columns:1fr}
  .hero-photo{margin-top:var(--s4)}
}

/* ---- Marketing psychology round (31 October 2026, Nikki chose all 4) ----
   The promise sits by the price (regret is highest just before paying), a review
   sits near the price (proof at the moment of decision), and the Resume rewrite
   carries Nikki's own recommendation (a clear default among 9 choices). */
.promise{font-weight:600;color:var(--forest);max-width:40ch}
.quote-near{margin-top:var(--s5);max-width:640px}
.quote-near p{font-size:clamp(20px,2vw,24px)}
.tag{display:inline-block;font-family:var(--mono);font-weight:500;font-size:14px;line-height:1.4;color:var(--forest);border:1.5px solid var(--forest);border-radius:var(--r-full);padding:2px 12px;margin:0 0 var(--s1)}
/* Pages that open with a plain wrapper (not a hero or page-head section) get the same space under the header */
main > .wrap:first-child:not(.hero):not(.page-head){padding-top:var(--s6)}
@media (max-width:600px){ main > .wrap:first-child:not(.hero):not(.page-head){padding-top:var(--s5)} }

/* ==========================================================================
   Header, redesigned 31 October 2026 (Nikki chose "Name only"):
   the logo mark and her name on one line, "Your Sidekick" underneath,
   the menu, and the Book button. The long line under the name is gone:
   the home page heading already says what she does.
   Computer: one row. Below 860px: name and Book on the top row, menu below.
   ========================================================================== */
.bar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"who nav book";align-items:center;column-gap:var(--s4);row-gap:0;min-height:76px;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
.who{grid-area:who;flex-direction:row;align-items:center;gap:12px;flex:none;white-space:nowrap}
.who-mark{display:block;width:40px;height:auto;flex:0 0 auto}
.who-text{display:flex;flex-direction:column;line-height:1.15}
.who-name{font-size:21px;line-height:1.15}
.who-sub{display:block;font-size:14px;line-height:1.3;color:var(--ink)}
nav{grid-area:nav;justify-self:end;flex:none}
nav ul{gap:28px;flex-wrap:nowrap}
.header-book{grid-area:book}
@media (max-width:1100px){
  .bar{flex-wrap:nowrap;padding-top:0;padding-bottom:0;gap:0 var(--s4)}
  .who{flex:none}
  nav{flex:none}
  nav ul{gap:22px;flex-wrap:nowrap}
}
@media (max-width:860px){
  .bar{grid-template-columns:1fr auto;grid-template-areas:"who book" "nav nav";row-gap:6px;padding-top:12px;padding-bottom:6px;min-height:0}
  nav{justify-self:start;width:100%}
  nav ul{gap:4px 20px;flex-wrap:wrap;justify-content:flex-start}
  header{position:static}
  html{scroll-padding-top:12px}
}
@media (max-width:420px){
  .who{gap:8px}
  .who-mark{width:30px}
  .who-name{font-size:18px}
  .header-book{padding:10px 16px}
  nav ul{gap:0 16px}
}
@media (max-width:340px){
  .who-mark{display:none}
  nav ul{gap:0 12px}
  nav a{font-size:15px}
}
.who{justify-self:start;justify-content:flex-start}
/* Narrow phones: the 4 menu links share one line, spread edge to edge */
@media (max-width:380px){
  nav > ul{justify-content:space-between;gap:0 8px}
  nav a{font-size:15px}
}
/* Narrowest phones (under 375px): the top-level items sit 2 by 2, never 3 and 1 */
@media (max-width:380px){ nav a{font-size:16px} }
@media (max-width:374px){
  nav > ul{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
}

/* ==========================================================================
   Warmer touches (31 October 2026), after aliabdaal.com, which Nikki likes.
   She chose: a "How can I help you?" set of cards, a soft warm feel, and
   two-font headings. Cards are white with a thin Rain Forest line (her choice),
   with soft rounded corners. Accent word: Instrument Serif Italic, one per heading.
   The hand-drawn underline is Rain Forest, never Wattle (the clean look has no Wattle).
   ========================================================================== */
.accent{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0;color:var(--forest);font-size:1.12em;line-height:1}
.accent-line{padding-bottom:.12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c40-6 90-7 140-4 18 1 36 3 54 0' fill='none' stroke='%2313433A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% .32em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.help-grid{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.help-card{border:1.5px solid var(--forest);border-radius:28px;padding:var(--s4);display:flex;flex-direction:column;background:var(--white)}
.help-card h3{margin:var(--s3) 0 var(--s1)}
.help-card p{margin:0 0 var(--s2)}
.help-card .help-link{margin-top:auto;margin-bottom:0;font-weight:600}
.help-icon{display:block;width:44px;height:44px;fill:none;stroke:var(--forest);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.help-more{margin-top:var(--s4)}
@media (max-width:700px){ .help-grid{grid-template-columns:1fr} .help-card{padding:var(--s3)} }

/* Mid-career focus (31 October 2026): the home heading is a full sentence, so it is set smaller and wider */
.hero h1.h1-long{font-size:clamp(32px,4.2vw,54px);line-height:1.1;max-width:24ch}
.pull{font-family:var(--head);font-weight:600;font-size:clamp(24px,2.8vw,34px);line-height:1.2;color:var(--forest);margin:var(--s6) 0 0;max-width:none}
.pull .accent{white-space:nowrap}

/* Ways I can help: two dropdowns in the header, headed lists in the footer (1 November 2026). */
nav .has-sub{position:relative}
nav .has-sub > button{font-family:inherit;font-size:16px;font-weight:400;line-height:1.2;color:var(--forest);background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;padding:8px 0;min-height:44px;cursor:pointer;white-space:nowrap}
nav .has-sub > button:hover,nav .has-sub > button[aria-expanded="true"]{border-bottom-color:var(--forest)}
nav .has-sub > ul{display:none;position:absolute;top:100%;right:0;z-index:60;min-width:260px;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;margin:0;padding:8px 0;background:var(--white);border:1px solid var(--line);list-style:none}
nav .has-sub > button[aria-expanded="true"] + ul{display:flex}
nav .has-sub > ul a{padding:8px 16px;white-space:nowrap}
.foot-sub{font-family:var(--head);font-weight:600;font-size:18px;line-height:1.3;color:var(--forest);margin:var(--s3) 0 var(--s1);max-width:none}
.foot-sub:first-of-type{margin-top:var(--s2)}
.price-long{font-size:clamp(26px,3vw,36px);line-height:1.25;max-width:18em}
@media (max-width:860px){
  nav .has-sub > button{white-space:normal;text-align:left}
  nav .has-sub > ul{position:static;min-width:0;border:0;padding:0 0 8px}
  nav .has-sub > ul a{padding:8px 0;white-space:normal}
}