/* Studio Rhys - shared styles. Fonts are self-hosted (SIL Open Font License, see /fonts). */
@font-face{ font-family:'Atkinson Hyperlegible Next'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Atkinson Hyperlegible Next'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/atkinson-hyperlegible-next-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Atkinson Hyperlegible Next'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/atkinson-hyperlegible-next-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Atkinson Hyperlegible Next'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Atkinson Hyperlegible Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Atkinson Hyperlegible Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/atkinson-hyperlegible-mono-latin-500-normal.woff2') format('woff2'); }
:root{
    --paper:#fdfcfa;
    --rule:#e9e5db;
    --ink:#24211c;
    --ink-soft:#5f594f;
    --accent:#6e2b33;
    --accent-soft:#dcc6c8;

    --sans:'Atkinson Hyperlegible Next', system-ui, sans-serif;
    --mono:'Atkinson Hyperlegible Mono', ui-monospace, monospace;

    --page:1120px;
    --measure:68ch;   /* comfortable line length for running text */
    --feature:800px;  /* photos, service rows and rates: wider than text, narrower than the page */
    --gutter:24px;
    --radius:6px;

    --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px;

    --gap-section:var(--s-5);
    --gap-heading:var(--s-3);
    --gap-block:var(--s-4);
    --gap-inner:var(--s-1);
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; scroll-padding-top:80px; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  p, h1, h2, h3{ margin:0; }
  img{ display:block; max-width:100%; }

  .inner{ max-width:calc(var(--page) + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter); }

  /* NAV BAR - full width, fixed to the top, solid background */
  .navbar{
    position:sticky;
    top:0;
    z-index:10;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
  }
  .navbar .inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px;
  }
  .wordmark{
    font-weight:600;
    font-size:16px;
    letter-spacing:-0.01em;
    color:var(--ink);
    text-decoration:none;
  }
  .nav-links{ display:flex; align-items:center; gap:var(--s-4); }
  .nav-links a{
    font-size:14.5px;
    color:var(--ink-soft);
    text-decoration:none;
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a.nav-cta{
    color:var(--paper);
    background:var(--ink);
    padding:9px 16px;
    border-radius:var(--radius);
    font-weight:500;
  }
  .nav-links a.nav-cta:hover{ background:var(--accent); color:var(--paper); }
  .menu-toggle{ display:none; }

  @media(max-width:720px){
    .menu-toggle{
      display:block;
      font:inherit;
      font-size:14.5px;
      font-weight:500;
      color:var(--ink);
      background:none;
      border:1px solid var(--rule);
      border-radius:var(--radius);
      padding:7px 14px;
      cursor:pointer;
    }
    .nav-links{
      display:none;
      position:absolute;
      top:64px; left:0; right:0;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      background:var(--paper);
      border-bottom:1px solid var(--rule);
      padding:var(--s-1) var(--gutter) var(--s-3);
    }
    .navbar.open .nav-links{ display:flex; }
    .nav-links a{ padding:12px 0; border-top:1px solid var(--rule); font-size:16px; }
    .nav-links a:first-child{ border-top:none; }
    .nav-links a.nav-cta{ margin-top:var(--s-2); text-align:center; padding:13px 16px; border-top:none; }
  }

  /* SECTIONS */
  section{ padding:var(--gap-section) 0; }
  section.divided{ border-top:1px solid var(--rule); }

  h2{ font-weight:600; font-size:26px; line-height:1.25; letter-spacing:-0.01em; margin-bottom:var(--gap-heading); }
  .lede{ color:var(--ink-soft); max-width:var(--measure); margin-bottom:var(--gap-block); }
  .action{ margin-top:var(--gap-block); }
  .centred{ text-align:center; }

  .cta{
    display:inline-block;
    font-family:var(--sans);
    font-weight:500;
    font-size:16px;
    line-height:1;
    color:var(--paper);
    background:var(--ink);
    padding:16px 26px;
    text-decoration:none;
    border-radius:var(--radius);
  }
  .cta:hover{ background:var(--accent); }
  .text-link{ font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent-soft); }
  .text-link:hover{ color:var(--accent); border-color:var(--accent); }

  /* HERO - text left, photo right; stacks on small screens */
  .hero{ padding:var(--s-6) 0 var(--gap-section); }
  h1{
    font-weight:600;
    font-size:clamp(34px, 5vw, 56px);
    line-height:1.12;
    max-width:20ch;
    letter-spacing:-0.02em;
    text-wrap:balance;
  }
  .hero .sub{ font-size:20px; line-height:1.55; color:var(--ink-soft); max-width:46ch; margin-top:var(--gap-heading); }

  /* LOGO BANNER - one grey tone so different brands read as a set; each logo fits the same box */
  .logos{ padding:var(--s-4) 0; display:flex; align-items:center; gap:var(--s-5); }
  .logos-label{ font-size:15px; color:var(--ink-soft); white-space:nowrap; }
  .logo-row{ flex:1; display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--s-4); align-items:center; min-width:0; }
  .logo-slot{ min-width:0; height:48px; display:flex; align-items:center; justify-content:center; }
  .logo-slot img{ max-width:100%; max-height:34px; width:auto; height:auto; filter:grayscale(1); opacity:0.7; }
  @media(max-width:900px){
    .logos{ flex-direction:column; align-items:flex-start; gap:var(--s-3); }
    .logo-row{ width:100%; grid-template-columns:repeat(3, 1fr); gap:var(--s-3) var(--s-4); }
  }

  /* BODY TEXT */
  .body-text p{ font-size:18px; line-height:1.7; max-width:var(--measure); }
  .body-text p + p{ margin-top:var(--s-3); }
  /* two columns on wider screens so the intro spans the page at a readable line length */
  @media(min-width:900px){
    .body-text{ column-count:2; column-gap:var(--s-5); }
    .body-text p{ max-width:none; break-inside:avoid; }
    .body-text p + p{ margin-top:0; }
  }
  .body-text p.dropcap:first-letter{
    font-weight:700;
    font-size:58px;
    float:left;
    line-height:0.8;
    padding:6px 10px 0 0;
    color:var(--accent);
  }

  /* PHOTO PLATES - as in the first version: ink rules above and below, photo at column width */
  section.plate-section{ padding:0; }
  .plate{ border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:var(--gap-section) 0; }
  .plate-frame{ border:1px solid var(--rule); overflow:hidden; }
  .plate-frame img{ width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; }

  /* GRIDS */
  .grid{ display:grid; gap:var(--gap-block); }
  @media(min-width:640px){
    .grid-2{ grid-template-columns:1fr 1fr; }
    .grid-3{ grid-template-columns:repeat(3,1fr); }
  }
  .finding p, .work-card p, .term-row p, .rate p, .track-item p{ font-size:16px; line-height:1.6; color:var(--ink-soft); }

  .finding{ border-left:2px solid var(--accent-soft); padding-left:var(--s-2); }
  .finding h3{ font-weight:600; font-size:17px; line-height:1.4; margin-bottom:var(--gap-inner); }

  .track-item .fig{
    font-family:var(--mono);
    font-weight:500;
    font-size:30px;
    line-height:1.2;
    letter-spacing:-0.02em;
    margin-bottom:var(--gap-inner);
  }

  .mid-cta p{ font-size:19px; line-height:1.6; max-width:66ch; margin:0 auto; text-wrap:balance; }

  .work-card{ border-top:1px solid var(--rule); padding-top:var(--s-2); }
  .work-card h3{ font-weight:600; font-size:18px; line-height:1.35; margin-bottom:var(--gap-inner); }

    .rows > div{ padding:var(--s-3) 0; border-top:1px solid var(--rule); }
  .rows > div:last-child{ border-bottom:1px solid var(--rule); }
  .term-row h3{ font-weight:600; font-size:18px; line-height:1.35; margin-bottom:var(--gap-inner); }
  .term-row p, .rate p{ max-width:60ch; }

  .rate-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3); margin-bottom:var(--gap-inner); }
  .rate-head h3{ font-weight:600; font-size:18px; line-height:1.35; }
  .rate-head .amount.words{ font-family:var(--sans); font-size:15.5px; }
  .rate-head .amount{ font-family:var(--mono); font-size:15px; color:var(--accent); white-space:nowrap; }

  .close{ text-align:center; padding-bottom:var(--s-7); }
  .close h2{ font-size:28px; }
  .close p{ color:var(--ink-soft); max-width:46ch; margin:0 auto; text-wrap:balance; }

  footer{ border-top:1px solid var(--rule); }
  footer .inner{ padding-top:var(--s-3); padding-bottom:var(--s-5); font-size:13.5px; color:var(--ink-soft); }
  /* closing action always gets its gap, whatever section-specific paragraph rules say */
  main p.action{ margin-top:var(--gap-block); }
  /* ===== COLOUR VARIANT ===== */
  :root{ --accent:#B54A2A; --accent-soft:#E7C2B4; --tint:#F7EBE4; }
  .cta, .nav-links a.nav-cta{ background:var(--accent); }
  .cta:hover, .nav-links a.nav-cta:hover{ background:var(--ink); }

  .track-item .fig{ color:var(--accent); }
  .finding{ border-left-color:var(--accent); }
  .text-link{ border-bottom-color:var(--accent); }
  .logo-slot img{ transition:filter .2s, opacity .2s; }
  .logo-slot img:hover{ filter:none; opacity:1; }

  /* full-width bands: the background runs edge to edge while the content stays in the column */
  .band{ box-shadow:0 0 0 100vmax var(--band-bg); clip-path:inset(0 -100vmax); background:var(--band-bg); border-top:none !important; padding:var(--s-6) 0; }
  .band + section.divided{ border-top:none; }
  .band + .plate-section .plate{ border-top:none; }
  .plate-section:has(+ .band) .plate{ border-bottom:none; }
  /* ===== SECONDARY ACCENT: pine grounds the page (headings, pale band, dark close), terracotta carries action and highlights ===== */
  :root{ --pine:#1B5E4F; --pine-deep:#173F35; --pine-tint:#E8F0ED; }
  h1, h2{ color:var(--pine-deep); }
  section.band-tint{ --band-bg:var(--pine-tint); }
  .band-dark{ --band-bg:var(--pine-deep); color:var(--paper); }
  .band-dark h2{ color:var(--paper); }
  .band-dark p{ color:rgba(253,252,250,0.82); }
  .band-dark .cta{ background:var(--paper); color:var(--ink); }
  .band-dark .cta:hover{ background:var(--accent); color:var(--paper); }
  footer{ background:var(--pine-deep); border-top:none; margin-top:-1px; position:relative; }
  footer .inner{ color:rgba(253,252,250,0.65); }

  .band-tint{ --band-bg:var(--tint); }
  .band-solid{ --band-bg:var(--accent); color:var(--paper); }
  .band-solid .cta{ background:var(--paper); color:var(--ink); }
  .band-solid .cta:hover{ background:var(--ink); color:var(--paper); }

  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .nav-links a[aria-current="page"]{ color:var(--ink); font-weight:500; }
  .nav-links a.nav-cta[aria-current="page"]{ color:var(--paper); }
  /* services list: problem on the left, what it is on the right */
  .service{ display:grid; gap:var(--s-1) var(--s-5); }
  @media(min-width:760px){ .service{ grid-template-columns:5fr 6fr; align-items:baseline; } }
  .service h3{ font-weight:600; font-size:18px; line-height:1.35; color:var(--ink); }
  .service .label{ font-family:var(--mono); font-size:15px; color:var(--accent); margin-bottom:var(--gap-inner); }
  .service p{ font-size:16px; line-height:1.6; color:var(--ink-soft); }
  .service .label{ color:var(--accent); }
  /* process steps */
  .step h3{ font-weight:600; font-size:18px; line-height:1.35; margin-bottom:var(--gap-inner); }
  .step .fig{ font-size:22px; }
  .step .meta{ font-size:14px; color:var(--pine); margin-top:var(--s-2); }
  /* pricing notes under the ways of working */
  .pricing{ margin-top:var(--gap-block); }
  .pricing h3{ font-weight:600; font-size:17px; line-height:1.4; margin-bottom:var(--gap-inner); }
  .pricing .price{ font-weight:400; color:var(--accent); margin-left:var(--s-1); }
  .pricing p{ font-size:16px; line-height:1.6; color:var(--ink-soft); max-width:52ch; }
  .term-row .rate-head h3{ margin-bottom:0; }
  .cta-note{ font-size:14.5px; color:var(--ink-soft); margin-top:var(--s-2); }
  .cta-note a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent); }
  .cta-note a:hover{ color:var(--accent); }
  .photo-cap{ font-size:14px; color:var(--ink-soft); margin-top:var(--s-2); }