/* ===========================================================
   Dòchas Home Care, shared stylesheet
   Used by every page in this site.
   =========================================================== */

  :root{
    --ink:#241B2F;
    --ink-soft:#4A3F52;
    --paper:#FAF6F0;
    --paper-alt:#F1E7DE;
    --purple:#532D7B;
    --purple-deep:#3C2059;
    --purple-tint:#F1EEF4;
    --green:#2D693A;
    --green-deep:#204C2A;
    --green-tint:#EAF0EB;
    --gold:#C98B3E;
    --line:#E3D6DE;
    --radius-card: 18px;
    --shadow: 0 18px 40px -22px rgba(56,32,66,.35);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:88px;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Public Sans', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--purple-deep);
    margin:0 0 .4em;
  }
  h1{font-size:clamp(2.4rem,5vw,4rem); font-weight:400; line-height:1.05;}
  h2{font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.12;}
  h3{font-size:1.25rem; font-weight:600; color:var(--purple);}
  p{margin:0 0 1em;}
  a{color:inherit;}
  /* The dash-label ("— ABOUT US") is the main heading of its block: big and
     bold. Any h1/h2/h3 directly beneath it is the quieter line, see the
     ".eyebrow + h1/h2/h3" rule further down. */
  .eyebrow{
    font-family:'Public Sans',sans-serif;
    text-transform:uppercase;
    letter-spacing:.03em;
    font-size:clamp(1.3rem, 3vw, 1.7rem);
    font-weight:800;
    line-height:1.2;
    color:var(--green-deep);
    margin-bottom:8px;
    display:flex; align-items:center; gap:.5em;
  }
  .eyebrow::before{content:"";width:30px;height:2px;background:var(--green);display:inline-block;flex:none;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
  button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:2.5px solid var(--gold); outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- TEXT REVEAL ANIMATION ---------- */
  /* Applied automatically by js/main.js to headings, paragraphs and cards.
     Starts slightly lower and transparent, settles into place on scroll. */
  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
  }
  .reveal.in-view{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(250,246,240,.96);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1320px;margin:0 auto;padding:12px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .logo{display:flex;align-items:center;gap:.55em;font-family:'Fraunces',serif;font-size:1.22rem;color:var(--purple-deep); text-decoration:none; flex:none;}
  .logo-mark{width:36px;height:auto;flex:none;object-fit:contain;}
  .logo b{font-weight:600;}
  .logo span{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--green-deep);display:block;font-family:'Public Sans',sans-serif;font-weight:700;}

  .header-actions{display:flex; align-items:center; gap:10px; min-width:0;}

  nav.primary{display:flex;gap:1px;align-items:center; flex-wrap:nowrap;}
  nav.primary > a{
    text-decoration:none; display:inline-block; white-space:nowrap;
    background:none;border:none;padding:9px 11px;border-radius:100px;
    font-size:.8rem;font-weight:600;color:var(--ink-soft);
    transition:background .18s, color .18s;
  }
  nav.primary > a:hover{background:var(--purple-tint); color:var(--purple-deep);}
  nav.primary > a.active{background:var(--green); color:#fff;}

  .enquire-cta-header{
    background:var(--purple); color:#fff; padding:11px 18px; border-radius:100px;
    border:none; font-weight:700; font-size:.82rem; white-space:nowrap; cursor:pointer;
    font-family:'Public Sans',sans-serif; flex:none;
    box-shadow:0 10px 22px -12px rgba(56,32,66,.5);
    transition:background .18s ease, transform .18s ease;
  }
  .enquire-cta-header:hover{background:var(--purple-deep); transform:translateY(-1px);}

  .hamburger{
    display:none; background:none; border:1.5px solid var(--line); border-radius:10px;
    padding:8px 12px; align-items:center; gap:8px; cursor:pointer; flex:none;
  }
  .hamburger-lines{display:flex; flex-direction:column; gap:3px;}
  .hamburger-lines span{display:block;width:18px;height:2px;background:var(--purple-deep);}
  .hamburger-label{font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--purple-deep); font-family:'Public Sans',sans-serif;}

  /* ---------- NAV DROPDOWNS ---------- */
  .nav-item{position:relative; display:inline-flex; align-items:stretch;}
  /* .nav-pill is a separate box from .nav-item on purpose: .nav-item also
     holds the dropdown panel, and clipping overflow on that same box would
     clip the dropdown itself shut. Only .nav-pill (the visual pill around
     the link + chevron) gets the overflow:hidden that makes the pill seamless. */
  .nav-pill{display:inline-flex; align-items:stretch; border-radius:100px; transition:background .18s ease;}
  /* Both the "active section" state and the plain hover state colour the
     whole .nav-pill wrapper as one shape (with overflow:hidden to clip it
     cleanly), never the .nav-parent/.nav-toggle children separately, that's
     what caused the hover background to look cut in two mismatched pieces. */
  .nav-pill:has(.nav-parent.active){background:var(--green); overflow:hidden;}
  .nav-pill:hover{background:var(--purple-tint); overflow:hidden;}
  .nav-pill:has(.nav-parent.active):hover{background:var(--green-deep);}
  .nav-parent{
    text-decoration:none; display:inline-flex; align-items:center; white-space:nowrap;
    padding:9px 4px 9px 12px;
    font-size:.8rem; font-weight:600; color:var(--ink-soft);
    transition:color .18s;
  }
  .nav-pill:hover .nav-parent{color:var(--purple-deep);}
  .nav-pill:has(.nav-parent.active) .nav-parent{color:#fff;}
  .nav-toggle{
    background:none; border:none; padding:6px; margin:auto 6px auto -6px;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--ink-soft); border-radius:50%; cursor:pointer;
    transition:color .18s;
  }
  .nav-pill:hover .nav-toggle{color:var(--purple-deep);}
  .nav-pill:has(.nav-parent.active) .nav-toggle{color:#fff;}
  .nav-toggle svg{transition:transform .2s ease; display:block;}
  .nav-item:hover .nav-toggle svg,
  .nav-item.dropdown-open .nav-toggle svg{transform:rotate(180deg);}
  .nav-dropdown{
    position:absolute; top:calc(100% + 8px); left:0; min-width:230px;
    max-height:70vh; overflow-y:auto;
    background:#fff; border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); padding:8px;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:60;
  }
  .nav-dropdown.wide{
    min-width:460px; display:grid; grid-template-columns:1fr 1fr; gap:2px;
  }
  /* Only the Services menu needs the extra room, for "Companionship and Social Time"
     on one line. Kept off the shared rule so the right-hand Help & Feedback menu
     never spills past the edge of the screen. */
  .nav-dropdown.wide:has(a[href="companionship.html"]){min-width:520px;}
  /* On narrower desktop screens the right-hand Help & Feedback menu would run past
     the edge, so in that band only it opens leftwards from the item's right edge. */
  @media (min-width:1081px) and (max-width:1200px){
    .nav-item:last-of-type .nav-dropdown{left:auto; right:0;}
  }
  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown,
  .nav-item.dropdown-open .nav-dropdown{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .nav-dropdown a{
    display:block; padding:10px 12px; border-radius:9px;
    font-size:.85rem; font-weight:600; color:var(--ink-soft);
    text-decoration:none; margin:0;
    opacity:0; transform:translateY(-6px);
    transition:opacity .22s ease, transform .22s ease, background .15s ease, color .15s ease;
  }
  /* Each item reveals itself a beat after the one before it, only on the
     way in, see the JS below for why closing deliberately skips this. */
  .nav-item:hover .nav-dropdown a,
  .nav-item:focus-within .nav-dropdown a,
  .nav-item.dropdown-open .nav-dropdown a{
    opacity:1; transform:translateY(0);
  }
  .nav-dropdown a:nth-child(1){transition-delay:0ms;}
  .nav-dropdown a:nth-child(2){transition-delay:90ms;}
  .nav-dropdown a:nth-child(3){transition-delay:180ms;}
  .nav-dropdown a:nth-child(4){transition-delay:270ms;}
  .nav-dropdown a:nth-child(5){transition-delay:360ms;}
  .nav-dropdown a:nth-child(6){transition-delay:450ms;}
  .nav-dropdown a:nth-child(7){transition-delay:540ms;}
  .nav-dropdown a:nth-child(8){transition-delay:630ms;}
  .nav-dropdown a:nth-child(9){transition-delay:720ms;}
  .nav-dropdown a:nth-child(10){transition-delay:810ms;}
  .nav-dropdown a:hover{background:var(--purple-tint); color:var(--purple-deep);}
  .nav-dropdown a.current{background:var(--green-tint); color:var(--green-deep); font-weight:700;}

  /* Below this width, the full row genuinely can't fit legibly:
     collapse into the labelled MENU control instead of a bare icon. */
  @media (max-width:1080px){
    /* The header's frosted-glass blur makes browsers treat the header, not the screen, as the
       frame for the fixed menu panel below, which squashed the open menu into a thin strip on phones.
       On phones the header goes solid instead (it was 96% solid already), so the panel can fill the screen. */
    header{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper);}
    nav.primary{
      position:fixed; inset:64px 0 0 0; background:var(--paper);
      flex-direction:column; align-items:stretch; padding:18px; gap:2px;
      transform:translateX(100%); transition:transform .25s ease;
      overflow-y:auto; z-index:120;
    }
    nav.primary.open{transform:translateX(0);}
    nav.primary > a{
      text-decoration:none; display:inline-block; text-align:left;
      padding:14px 10px; border-radius:10px; font-size:1rem;
    }
    .hamburger{display:inline-flex;}

    .nav-item{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; width:100%;}
    .nav-pill{flex:1; justify-content:space-between;}
    .nav-item .nav-parent{flex:1;}
    .nav-toggle{margin-left:0;}
    .nav-dropdown, .nav-dropdown.wide{
      position:static; flex-basis:100%; width:100%;
      opacity:1; visibility:visible; transform:none;
      box-shadow:none; border:none; padding:0 0 6px 14px; min-width:0;
      display:none; grid-template-columns:1fr; max-height:none;
    }
    .nav-item.dropdown-open .nav-dropdown{display:block;}
  }
  @media (max-width:520px){
    .enquire-cta-header{padding:10px 14px; font-size:.76rem;}
    .hamburger-label{display:none;}
    .hamburger{padding:9px;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative; overflow:hidden;
    padding:70px 0 40px;
    background:
      radial-gradient(60% 55% at 82% 8%, var(--green-tint) 0%, transparent 60%),
      radial-gradient(50% 45% at 8% 0%, var(--purple-tint) 0%, transparent 60%);
  }
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
  @media (max-width:880px){.hero-grid{grid-template-columns:1fr;}}
  .hero .eyebrow{margin-bottom:18px;}
  /* Whatever heading sits directly beneath a dash-label is the quieter line.
     !important because many headings carry their own inline font-size. */
  .eyebrow + h1, .eyebrow + h2, .eyebrow + h3{
    font-size:clamp(1.1rem, 2.2vw, 1.3rem) !important;
    font-family:'Fraunces',serif;
    font-weight:500;
    line-height:1.35;
    color:var(--ink-soft);
  }
  .eyebrow + h1{margin-bottom:14px;}
  .band-purple .eyebrow + h2{color:#fff;}
  /* ".arch-card p" would otherwise shrink and grey-out labels inside accent
     blocks (Our mission, Our vision, Make a referral). */
  .arch-card p.eyebrow{
    font-size:clamp(1.3rem, 3vw, 1.7rem);
    color:var(--green-deep);
    text-align:left;
  }
  .hero p.lead{font-size:1.15rem; color:var(--ink-soft); max-width:46ch;}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px;}
  .btn{
    display:inline-flex; align-items:center; gap:.5em; padding:13px 24px; border-radius:100px;
    font-weight:700; font-size:.94rem; border:1.5px solid transparent; transition:all .18s;
  }
  .btn-primary{background:var(--green); color:#fff;}
  .btn-primary:hover{background:var(--green-deep); transform:translateY(-1px);}
  .btn-ghost{border-color:var(--purple); color:var(--purple-deep); background:transparent;}
  .btn-ghost:hover{background:var(--purple-tint);}

  .hero-photo{
    position:relative; border-radius:24px; overflow:hidden;
    box-shadow:var(--shadow); aspect-ratio:4/3.1;
  }
  .hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}

  
  
  

  /* ---------- SECTION GENERIC ---------- */
  section.view{padding:64px 0;}
  
  .band{background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .band-purple{background:var(--purple-deep); color:#EFE3F0;}
  .band-purple h2, .band-purple h3{color:#fff;}
  .band-purple .eyebrow{color:#C9E3CE;}
  .band-purple .eyebrow::before{background:#C9E3CE;}

  /* content card */
  /* No box, no shadow, just a clean accent border, carries content
     without visually boxing it in. */
  .arch-card{
    background:none; border:none; border-left:3px solid var(--green);
    border-radius:0; padding:2px 0 2px 22px; position:relative;
    box-shadow:none;
  }
  
  
  .arch-card h3{text-align:center;}
  .arch-card p{text-align:center; color:var(--ink-soft); font-size:.94rem;}

  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
  @media (max-width:880px){.grid-3{grid-template-columns:1fr 1fr;} .grid-2{grid-template-columns:1fr;}}
  @media (max-width:600px){.grid-3{grid-template-columns:1fr;}}

  .quote{
    font-family:'Fraunces',serif; font-weight:400; font-size:1.5rem; line-height:1.4;
    color:var(--purple-deep); border-left:3px solid var(--gold); padding-left:24px; margin:28px 0;
  }
  .quote span{display:block; font-family:'Public Sans',sans-serif; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-top:10px; font-weight:700;}

  
  
  
  

  .founder{display:grid; grid-template-columns:180px 1fr; gap:26px; align-items:flex-start; margin-bottom:44px;}
  @media (max-width:600px){.founder{grid-template-columns:1fr;}}
  .avatar{
    width:100%; aspect-ratio:1; border-radius:50% 50% 8px 8px; background:var(--purple-tint);
    display:flex; align-items:center; justify-content:center; border:2px dashed var(--purple);
    text-align:center; padding:14px;
  }
  .avatar span{font-size:.78rem; font-weight:700; color:var(--purple-deep); letter-spacing:.02em;}

  
  
  

  /* Forms */
  .form-card{background:var(--paper-alt); border:none; border-radius:20px; padding:34px; box-shadow:none;}
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:.82rem; font-weight:700; color:var(--purple-deep); margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
    font-family:inherit; font-size:.95rem; background:var(--paper); color:var(--ink);
  }
  .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--purple); outline:none;}
  .note-box{background:var(--green-tint); border-radius:12px; padding:14px 16px; font-size:.85rem; color:var(--green-deep); margin-bottom:20px;}

  /* Speak up routes */
  
  
  
  .route-card{
    border:1.5px solid var(--line); border-radius:16px; padding:22px; background:#fff;
    display:flex; flex-direction:column; gap:10px;
  }
  .route-card.urgent{border-color:#B5493C; background:#FBEDEA;}
  .route-card.urgent h3{color:#8C3A2F;}
  .route-card .go{
    margin-top:auto; font-weight:700; font-size:.85rem; color:var(--green-deep);
    display:inline-flex; align-items:center; gap:6px;
  }

  
  
  
  
  
  
  

  

  
  
  
  
  
  

  /* FAQ */
  .faq-group{margin-bottom:34px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%; text-align:left; background:none; border:none; padding:18px 4px;
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    font-family:'Fraunces',serif; font-size:1.02rem; color:var(--purple-deep); font-weight:500;
  }
  .faq-q .plus{font-size:1.3rem; color:var(--green-deep); transition:transform .2s; flex:none;}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .faq-a p{padding:0 4px 18px; color:var(--ink-soft); font-size:.94rem;}
  .faq-item.open .faq-q .plus{transform:rotate(45deg);}

  /* Careers */
  .step-list{counter-reset:step;}
  .step{display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line);}
  .step:last-child{border-bottom:1px solid var(--line);}
  .step::before{
    counter-increment:step; content:counter(step);
    font-family:'Fraunces',serif; font-size:1.1rem; color:var(--green-deep); font-weight:600;
    width:34px;height:34px;border-radius:50%; background:var(--green-tint);
    display:flex;align-items:center;justify-content:center; flex:none;
  }

  footer{background:var(--purple-deep); color:#E9DEEC; padding:52px 0 30px; margin-top:0;}
  .footer-grid{display:grid; grid-template-columns:1.2fr .8fr .9fr 1.5fr 1.3fr; gap:30px; margin-bottom:36px;}
  @media (max-width:1080px){.footer-grid{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:700px){.footer-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:480px){.footer-grid{grid-template-columns:1fr;}}
  /* Registration details: set off with a thin green rule, like the supplied wording */
  footer .footer-reg{border-left:3px solid rgba(201,227,206,.55); padding-left:16px;}
  footer .footer-reg p{margin:0 0 6px; font-size:.88rem; line-height:1.5; opacity:.92;}
  footer .footer-reg strong{color:#fff;}
  .footer-grid > div{min-width:0;}
  footer a{overflow-wrap:anywhere;}
  footer h4{font-family:'Public Sans',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:#C9E3CE; margin-bottom:14px; font-weight:700;}
  footer a{display:block; color:#E9DEEC; text-decoration:none; font-size:.9rem; margin-bottom:10px; opacity:.9;}
  footer a:hover{opacity:1; text-decoration:underline;}
  footer .bottom{border-top:1px solid rgba(255,255,255,.15); padding-top:22px; font-size:.8rem; opacity:.7; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
  footer .bottom{flex-direction:column; align-items:flex-start; gap:12px;}
  footer .bottom-copy{max-width:86ch; line-height:1.55;}
  footer .bottom-links{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  footer .bottom-links a{display:inline; margin:0; text-decoration:underline; opacity:1;}
  footer .bottom-links .cookie-prefs-link{opacity:1; color:#E9DEEC;}

  .tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
  .tag-row a, .tag-row button{
    background:#fff; border:1.5px solid var(--line); padding:9px 16px; border-radius:100px;
    font-size:.85rem; font-weight:600; color:var(--purple-deep);
    text-decoration:none; display:inline-block; line-height:1.3;
    transition:background .18s ease, border-color .18s ease;
  }
  .tag-row a:hover, .tag-row button:hover{border-color:var(--purple); background:var(--purple-tint); color:var(--purple-deep);}

  /* ---------- ENQUIRY CHATBOT (floating button + chat panel) ---------- */
  .enquire-fab{
    position:fixed; right:22px; bottom:22px; z-index:200;
    display:inline-flex; align-items:center; gap:9px;
    background:var(--purple); color:#fff; border:none;
    padding:14px 20px; border-radius:100px;
    font-family:'Public Sans',sans-serif; font-weight:700; font-size:.92rem;
    box-shadow:0 14px 30px -12px rgba(56,32,66,.55);
    cursor:pointer; transition:transform .18s ease, background .18s ease;
  }
  .enquire-fab:hover{background:var(--purple-deep); transform:translateY(-2px);}
  .enquire-fab svg{width:20px; height:20px; flex:none;}
  .enquire-fab.hide{display:none;}

  .chat-overlay{
    position:fixed; inset:0; background:rgba(36,27,47,.35);
    z-index:299; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
  }
  .chat-overlay.open{opacity:1; visibility:visible;}

  .chat-panel{
    position:fixed; right:22px; bottom:22px; z-index:300;
    width:380px; max-width:calc(100vw - 32px); height:min(620px, calc(100vh - 100px));
    background:var(--paper); border-radius:22px; border:1px solid var(--line);
    box-shadow:0 28px 60px -20px rgba(36,27,47,.5);
    display:flex; flex-direction:column; overflow:hidden;
    transform:translateY(16px) scale(.98); opacity:0; visibility:hidden;
    transition:transform .22s ease, opacity .22s ease, visibility .22s ease;
  }
  .chat-panel.open{transform:translateY(0) scale(1); opacity:1; visibility:visible;}
  @media (max-width:560px){
    .chat-panel{
      right:10px; left:10px; bottom:10px; width:auto;
      height:min(680px, calc(100vh - 20px));
    }
  }

  .chat-header{
    background:var(--purple-deep); color:#fff; padding:16px 18px;
    display:flex; align-items:center; gap:10px; flex:none;
  }
  .chat-header img{width:30px; height:30px;}
  .chat-header .chat-title{flex:1;}
  .chat-header .chat-title b{display:block; font-family:'Fraunces',serif; font-size:1rem; font-weight:600;}
  .chat-header .chat-title span{display:block; font-size:.72rem; color:#C9E3CE;}
  .chat-close{background:none; border:none; color:#fff; opacity:.8; cursor:pointer; padding:6px;}
  .chat-close:hover{opacity:1;}

  .chat-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px;}
  .chat-bubble{max-width:82%; padding:11px 15px; border-radius:16px; font-size:.9rem; line-height:1.5;}
  .chat-bubble.bot{background:#fff; border:1px solid var(--line); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px;}
  .chat-bubble.user{background:var(--purple); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}

  .chat-options{display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:100%;}
  .chat-options button{
    background:#fff; border:1.5px solid var(--purple); color:var(--purple-deep);
    padding:9px 14px; border-radius:100px; font-size:.85rem; font-weight:600; cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .chat-options button:hover{background:var(--purple); color:#fff;}
  .chat-options button.selected{background:var(--purple); color:#fff;}
  .chat-options .chat-continue{background:var(--green); border-color:var(--green); color:#fff;}
  .chat-options .chat-continue:hover{background:var(--green-deep); border-color:var(--green-deep);}

  
  
  
  
  

  .chat-summary{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; align-self:stretch; font-size:.85rem;}
  .chat-summary dt{font-weight:700; color:var(--purple-deep); margin-top:8px;}
  .chat-summary dt:first-child{margin-top:0;}
  .chat-summary dd{margin:2px 0 0; color:var(--ink-soft);}

  /* ---------- ENQUIRE PAGE: chat launch card (replaces the old static form) ---------- */
  .chat-launch-card{
    background:var(--purple-tint); border:none; border-radius:20px; padding:36px;
    box-shadow:none; text-align:center;
  }
  .chat-launch-card .icon-circle{
    width:64px; height:64px; border-radius:50%; background:var(--purple-tint);
    display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  }
  .chat-launch-card .icon-circle svg{width:30px; height:30px; stroke:var(--purple-deep);}

  /* ---------- HUB PAGE LINK CARDS (About/Services/Arranging Care/Careers/Help hubs) ---------- */
  /* No box, no border, no shadow, a plus-badge that flips into an
     interactive cross on hover carries the "click for more" affordance
     instead. */
  .hub-link-card{
    display:flex; flex-direction:column; gap:6px; background:none;
    border:none; border-radius:0; padding:2px 4px 2px 0;
    text-decoration:none; position:relative;
    transition:transform .18s ease;
  }
  .hub-link-card::before{
    content:"+"; display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; background:var(--purple-tint);
    color:var(--purple-deep); font-size:1.15rem; font-weight:700; line-height:1;
    margin-bottom:8px; flex:none;
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }
  .hub-link-card:hover::before{background:var(--green); color:#fff; transform:rotate(90deg);}
  .hub-link-card:hover{transform:translateX(4px);}
  .hub-link-card h3{margin:0; font-size:1.02rem; transition:color .18s ease;}
  .hub-link-card:hover h3{color:var(--green-deep);}
  .hub-link-card p{margin:0; color:var(--ink-soft); font-size:.88rem;}
  .hub-link-card .go{margin-top:2px; font-size:.8rem; font-weight:700; color:var(--green-deep); opacity:0; transform:translateX(-4px); transition:opacity .18s ease, transform .18s ease;}
  .hub-link-card:hover .go{opacity:1; transform:translateX(0);}

  /* ---------- BACK LINK (subpages) ---------- */
  .back-link{
    display:inline-flex; align-items:center; gap:6px; text-decoration:none;
    color:var(--ink-soft); font-size:.85rem; font-weight:600; margin-bottom:18px;
  }
  .back-link:hover{color:var(--purple-deep);}
  .back-link svg{width:14px; height:14px;}

  
  
  
  
  
  
  

  /* ---------- EXPANDABLE "+ SEE MORE" SECTIONS ---------- */
  .expand{border-top:1px solid var(--line); margin-top:8px;}
  .expand summary{
    list-style:none; cursor:pointer; padding:16px 4px;
    display:flex; align-items:center; justify-content:space-between;
    font-weight:700; color:var(--purple-deep); font-size:.95rem;
  }
  .expand summary::-webkit-details-marker{display:none;}
  .expand summary .plus{
    width:24px; height:24px; border-radius:50%; background:var(--purple-tint);
    display:flex; align-items:center; justify-content:center; flex:none;
    font-size:1.1rem; line-height:1; color:var(--purple-deep); transition:transform .18s ease;
  }
  .expand[open] summary .plus{transform:rotate(45deg);}
  .expand .expand-body{padding:0 4px 18px; color:var(--ink-soft); font-size:.92rem;}
  .expand .expand-body p{margin:0 0 10px;}
  .expand .expand-body p:last-child{margin-bottom:0;}
  .expand + .expand{border-top:none;}

  /* ---------- COOKIE CONSENT BANNER ---------- */
  .cookie-banner{
    position:fixed; left:0; right:0; bottom:0; z-index:400;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 -12px 30px -14px rgba(36,27,47,.25);
    padding:20px 24px; display:none;
  }
  .cookie-banner.open{display:block;}
  .cookie-banner-inner{
    max-width:1100px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  }
  .cookie-banner p{margin:0; font-size:.88rem; color:var(--ink-soft); max-width:62ch;}
  .cookie-banner a{color:var(--green-deep); font-weight:700; text-decoration:underline;}
  .cookie-banner-actions{display:flex; gap:10px; flex-wrap:wrap; flex:none;}
  .cookie-banner-actions button{
    padding:10px 18px; border-radius:100px; font-weight:700; font-size:.85rem;
    font-family:'Public Sans',sans-serif; cursor:pointer; white-space:nowrap;
  }
  .cookie-accept{background:var(--green); color:#fff; border:none;}
  .cookie-accept:hover{background:var(--green-deep);}
  .cookie-reject{background:#fff; color:var(--ink-soft); border:1.5px solid var(--line);}
  .cookie-reject:hover{border-color:var(--purple); color:var(--purple-deep);}

  .cookie-prefs-link{background:none; border:none; padding:0; color:inherit; text-decoration:underline; cursor:pointer; font:inherit;}

  
  
  

  
  
  
  

  
  
  
  
  

  
  
  

  
  

  
  
  
  
  
  
  

  /* ---------- THE DÒCHAS WAY: colourful emoji card variant ---------- */
  .way-card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:24px;}
  @media (max-width:980px){.way-card-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.way-card-grid{grid-template-columns:1fr;}}
  .way-card{border-radius:18px; padding:26px 22px; text-align:center;}
  
  .way-card-icon{width:100%; max-width:150px; height:auto; display:block; margin:0 auto 12px; border-radius:10px;}
  .way-card h3{margin:0 0 8px; font-size:1.02rem; text-align:center;}
  .way-card p{margin:0; font-size:.86rem; color:var(--ink-soft); text-align:center; line-height:1.55;}

  /* ---------- HOMEPAGE: what our logo represents ---------- */
  .logo-meaning-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:24px;}
  @media (max-width:980px){.logo-meaning-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.logo-meaning-grid{grid-template-columns:1fr;}}
  .lm-icon{
    width:42px; height:42px; border-radius:50%; background:var(--paper-alt);
    display:flex; align-items:center; justify-content:center; margin-bottom:12px;
  }
  .lm-icon svg{width:20px; height:20px;}
  /* The real cropped logo icons are wider than tall (not square), so they
     get a wider, non-circular frame instead of forcing them into a circle. */
  .lm-icon-real{width:auto; height:48px; border-radius:0; background:none;}
  .lm-icon-real img{height:100%; width:auto; max-width:72px; object-fit:contain;}
  .logo-meaning-grid h3{margin:0 0 4px; font-size:.96rem;}
  .logo-meaning-grid p{margin:0; font-size:.84rem; color:var(--ink-soft); line-height:1.5;}

  /* ---------- CAROUSEL: one item at a time, smooth cross-fade + slide ----------
     Used on Services Overview (horizontal slide) and Help & Feedback (vertical
     slide). Navigation is via arrows, dots, or swipe, not raw page-scroll
     hijacking, that pattern is fragile and fights normal scrolling, especially
     on mobile, so this delivers the same "one item, smooth animated reveal"
     feel through direct interaction instead. */
  .carousel{position:relative; overflow:hidden; border-radius:22px;}
  .carousel-track{position:relative; min-height:260px;}
  .carousel-slide{
    position:absolute; inset:0; padding:32px 28px; min-height:260px;
    display:flex; align-items:center; gap:28px;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateX(40px);
    transition:opacity .4s ease, transform .4s ease, visibility .4s;
  }
  .carousel-slide.active{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0);
    position:relative;
  }
  .carousel-slide.leaving{transform:translateX(-40px);}
  .carousel.vertical .carousel-slide{transform:translateY(30px); flex-direction:column; text-align:center; align-items:center;}
  .carousel.vertical .carousel-slide.active{transform:translateY(0);}
  .carousel.vertical .carousel-slide.leaving{transform:translateY(-30px);}

  /* The illustrations are wide (about 2.6 : 1). Show them whole, never squeezed into a
     square and centre-cropped. */
  .carousel-icon{width:230px; max-width:100%; height:auto; border-radius:16px; flex:none;}
  .carousel.vertical .carousel-icon{width:64px; height:64px; border-radius:50%; background:var(--paper-alt); display:flex; align-items:center; justify-content:center; object-fit:contain; padding:12px;}
  .carousel-icon svg{width:28px; height:28px; stroke:var(--purple-deep);}
  .carousel-slide h3{margin:0 0 8px; font-size:1.3rem;}
  .carousel.vertical .carousel-slide h3{font-size:1.15rem; text-transform:uppercase; letter-spacing:.02em;}
  .carousel-slide p{margin:0 0 14px; color:var(--ink-soft); font-size:.96rem; max-width:52ch;}
  .carousel.vertical .carousel-slide p{max-width:44ch;}

  .carousel-controls{
    display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px;
  }
  .carousel-arrow{
    width:38px; height:38px; border-radius:50%; background:#fff; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
    transition:border-color .18s ease, background .18s ease;
  }
  .carousel-arrow:hover{border-color:var(--purple); background:var(--purple-tint);}
  .carousel-arrow svg{width:16px; height:16px; stroke:var(--purple-deep);}
  .carousel-dots{display:flex; gap:7px;}
  .carousel-dots button{
    width:8px; height:8px; border-radius:50%; background:var(--line); border:none; padding:0; cursor:pointer;
    transition:background .18s ease, transform .18s ease;
  }
  .carousel-dots button.active{background:var(--green); transform:scale(1.3);}
  .carousel-meta{text-align:center; font-size:.8rem; color:var(--green-deep); font-weight:700; margin-top:10px;}
  .carousel-hint{text-align:center; font-size:.8rem; color:var(--ink-soft); margin-top:2px;}

  @media (max-width:640px){
    .carousel-slide{flex-direction:column; text-align:center; align-items:center; padding:26px 20px;}
    .carousel-icon{width:min(270px, 100%);}
  }

  /* ---------- LEGAL PAGES (privacy policy) ----------
     Restored into the shared stylesheet: these rules used to live inside the
     privacy page itself and were lost when that page was rebuilt. */
  .legal{max-width:780px;}
  .legal h2{margin-top:44px; font-size:1.5rem;}
  .legal h3{margin-top:26px; font-size:1.05rem;}
  .legal p, .legal li{color:var(--ink-soft); font-size:.98rem;}
  .legal ul{padding-left:20px;}
  .legal table{width:100%; border-collapse:collapse; margin:18px 0; font-size:.92rem;}
  .legal th, .legal td{text-align:left; padding:10px 12px; border:1px solid var(--line); vertical-align:top;}
  .legal th{background:var(--purple-tint); color:var(--purple-deep); font-family:'Public Sans',sans-serif; font-weight:700;}
  .updated{font-size:.88rem; color:var(--ink-soft); max-width:62ch;}
  .toc{background:var(--purple-tint); border-radius:14px; padding:22px 24px; margin:28px 0;}
  .toc p{margin:0 0 8px; font-weight:700; color:var(--purple-deep); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em;}
  .toc ol{margin:0; padding-left:20px;}
  .toc a{color:var(--ink-soft); text-decoration:none; font-size:.92rem; line-height:2;}
  .toc a:hover{color:var(--purple-deep); text-decoration:underline;}
  @media (max-width:640px){.legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td{display:block; width:100%;} .legal tr:first-child{display:none;} .legal td:first-child{font-weight:700; color:var(--purple-deep); background:var(--paper-alt); border-bottom:none;}}

  /* ---------- FORM VALIDATION MESSAGES (contact form + enquiry chat) ---------- */
  .field-error{color:#9B2F23; font-size:.84rem; font-weight:600; line-height:1.4; margin:6px 2px 0;}
  .field-error:empty{display:none;}
  .field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{border-color:#B5493C;}
  .chat-error{color:#9B2F23; font-size:.8rem; font-weight:600; line-height:1.4; padding:0 8px; align-self:flex-start;}
  .chat-input-row-inline input[aria-invalid="true"]{border-color:#B5493C !important;}

  /* ---------- TELEPHONE FIELD: country code + number side by side ---------- */
  .phone-row{display:flex; gap:8px;}
  .phone-row select{flex:0 0 44%; min-width:0; text-overflow:ellipsis;}
  .phone-row input{flex:1; min-width:0;}
  @media (max-width:420px){.phone-row{flex-direction:column;}.phone-row select{flex-basis:auto;}}
  .field select[aria-invalid="true"]{border-color:#B5493C;}