/* Life Laundry - shared styles for the public site.
   Build 279: extracted from index.html when the About page was split out.
   Two pages copying the same 200 lines of CSS drift apart within a month, and
   the drift is always silent - one page gets a fix and the other does not.
   Every public page links this; the app under /app/ keeps its own, because it
   is a different thing with different constraints. */
  :root{
    --cream:#F7F2E7; --paper:#FDFBF5; --ink:#4A4139; --ink-soft:#7C7063;
    --sage:#869F84; --sage-deep:#6E8A6C; --coral:#DB8B6B; --coral-deep:#C56E4A;
    --line:rgba(124,112,99,.18);
    --fd:'Fraunces',Georgia,serif; --fb:'Life Laundry Serif',Georgia,serif;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--fb);font-size:1rem;line-height:1.6;}
  .wrap{max-width:680px;margin:0 auto;padding:0 20px;}
  h1,h2,h3{font-family:var(--fd);font-weight:500;line-height:1.25;margin:0 0 10px;}
  h1{font-size:2rem;color:var(--sage-deep);} h2{font-size:1.35rem;margin-top:0;} h3{font-size:1.05rem;}
  /* build 345: About and Enquire have a proper main heading (h1) for search engines and screen readers, styled as before */
  h1.pageh{font-size:1.35rem;color:inherit;margin-top:0;}
  /* Build 273: the brand name is set the way the app sets it - coral "Life"
     against sage-deep "Laundry". Same class name as the app (.s), so the two
     stay recognisably the same thing. */
  .s{color:var(--coral-deep);}
  p{margin:0 0 14px;}
  .hero{text-align:center;padding:34px 0 26px;}
  .hero img{width:132px;height:132px;object-fit:contain;display:block;margin:0 auto 14px;}
  /* build 344: strapline between the name and the tagline - says what we are; the tagline says how it feels */
  .hero .strap{margin:2px 0 8px;font-size:1.12rem;font-weight:600;letter-spacing:.01em;color:var(--ink);}
  .hero .tag{color:var(--ink-soft);font-size:1.02rem;margin-bottom:22px;}
  .btn{display:inline-block;font-family:var(--fb);font-weight:500;background:var(--coral-deep);color:#fff;
       border:none;border-radius:13px;padding:14px 26px;font-size:1rem;text-decoration:none;cursor:pointer;min-height:48px;}
  .btn.ghost{background:transparent;color:var(--sage-deep);border:1px solid var(--sage);}
  section{padding:26px 0;}
  .card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px;}
  .card h3{margin-bottom:4px;}
  .card p{margin:0;color:var(--ink-soft);font-size:.95rem;}
  .price{color:var(--sage-deep);font-size:.9rem;margin-top:6px;display:block;}
  .muted{color:var(--ink-soft);font-size:.92rem;}
  /* Build 278: the About section. .lede opens it; .fill marks the three
     paragraphs only Jane and Alicia can write. The marker is deliberately
     visible rather than a code comment - an unfinished About page that looks
     finished is worse than an obviously unfinished one, and this one has to be
     impossible to miss before launch. Delete the class with the text. */
  .lede{font-size:1.05rem;color:var(--ink);margin-bottom:20px;}
  #about h3{margin-top:22px;color:var(--sage-deep);}
  .fill{background:#F3E6DA;border:1px dashed var(--coral-deep);border-radius:10px;
        padding:12px 14px;color:var(--coral-deep);font-size:.9rem;}
  label{display:block;font-size:.92rem;margin:12px 0 5px;}
  input,select,textarea{width:100%;font-family:var(--fb);font-size:1rem;color:var(--ink);
    background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 13px;min-height:48px;}
  textarea{min-height:110px;resize:vertical;}
  .two{display:flex;gap:12px;} .two>div{flex:1 1 0;min-width:0;}
  .err{color:var(--coral-deep);font-size:.92rem;margin:12px 0 0;display:none;}
  .ok{background:#E4EFE4;border-radius:14px;padding:26px 20px;text-align:center;display:none;}
  .ok h2{margin-bottom:8px;}
  .ok .okacts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 0;}
  .ok .btn{text-decoration:none;}
  .steps{counter-reset:s;list-style:none;padding:0;margin:0;}
  .steps li{counter-increment:s;position:relative;padding:0 0 14px 40px;}
  .steps li::before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;
    background:var(--sage);color:#fff;font-family:var(--fd);font-size:.88rem;display:flex;align-items:center;justify-content:center;}
  .note{background:#EFE7D6;border:1px solid var(--sage);border-radius:12px;padding:13px 15px;font-size:.93rem;margin:0 0 18px;}
  /* Build 272: these were 160px thumbnails in a scrolling strip. Compact, and
     useless - a dense phone UI at 160px is an unreadable smudge, and showing
     people what the app looks like is the ONLY job this section has. Three
     tiny cards are worse than one screenshot big enough to read.

     Now one screenshot at a time, filling most of the column, and you swipe.
     The 82% width is deliberate: the edge of the next card stays visible, which
     is what tells people there is more to swipe to without needing a caption
     saying so. Scroll snapping stops it landing between two. */
  .shots{display:flex;gap:14px;overflow-x:auto;padding:4px 0 10px;
         scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
         scrollbar-width:none;}
  .shots::-webkit-scrollbar{display:none;}
  .shots figure{flex:0 0 82%;max-width:340px;margin:0;scroll-snap-align:center;}
  .shots img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);display:block;background:var(--paper);}
  .shots figcaption{font-size:.88rem;color:var(--ink-soft);margin-top:8px;text-align:center;}
  footer{padding:26px 0 40px;text-align:center;color:var(--ink-soft);font-size:.86rem;}
  footer a{color:var(--sage-deep);}
  /* Build 274: Instagram is where almost everyone arrives from, so linking back
     is partly practical - some people would rather DM than fill in a form - and
     partly reassurance: a page with no route back to a real account looks like
     it could belong to anyone. Quiet in the hero so it does not compete with
     Enquire, plainer in the footer where people look for contact details. */
  .ig{margin:14px 0 0;font-size:.92rem;}
  .ig a{display:inline-flex;align-items:center;gap:7px;color:var(--sage-deep);text-decoration:none;
        border-bottom:1px solid rgba(110,138,108,.4);padding:0 0 3px;min-height:44px;}
  /* The glyph inherits currentColor, so it follows the link colour on hover
     rather than needing its own rule. Meta permits the glyph in any solid
     colour provided nothing else about its design changes - and it must not be
     shown below 29x29, which is why it is paired with text as a single target
     rather than shrunk to a bare icon.
     Build 276: this is now Meta's OWN path data, taken unmodified from the
     Instagram brand asset pack (Static Glyph / Black Glyph). It replaced a
     hand-drawn lookalike, which was close enough visually but is a redraw -
     and Meta's guidelines are explicit that the glyph must not be recreated,
     only used as supplied. The file ships with no fill attribute, so setting
     fill:currentColor recolours it without touching its shape, which is the
     one modification the guidelines do allow. Do not edit the path. */
  .iglyph{flex:0 0 auto;}
  footer a .iglyph{vertical-align:-2px;margin-right:4px;}
  .ig a:hover{color:var(--coral-deep);}
  .lg-green{color:var(--sage-deep);}
  .tabs{display:flex;gap:8px;margin:0 0 14px;}
  .tabs button{flex:1 1 0;background:transparent;border:1px solid var(--line);border-radius:99px;
    padding:9px 10px;font-family:var(--fb);font-size:.92rem;color:var(--sage-deep);cursor:pointer;min-height:44px;}
  .tabs button[aria-selected="true"]{background:var(--sage-deep);color:#fff;border-color:var(--sage-deep);}

  /* Narrow phones: the paired fields stop sharing a line. Side by side at
     320px each field is about 130px wide, which clips "you@example.com" in
     the placeholder before anyone has typed anything. */
  @media (max-width:400px){
    .two{flex-direction:column;gap:0;}
    h1{font-size:1.75rem;}
    .hero img{width:112px;height:112px;}
  }

  /* Desktop. Everything above is mobile-first and stays as it is on a phone,
     which is where almost every visitor arrives from - an Instagram bio link.
     But Jane and Alicia will look at this on a computer, and so will anyone
     who finds it by searching, and a 680px column stranded in the middle of a
     large screen reads as unfinished rather than as restraint.

     The column widens, the hero gets room, and the services list becomes two
     columns because the cards are short and independent. The enquiry form
     deliberately does NOT widen with it: long text inputs are harder to scan,
     and a form that stays close to its phone proportions is easier to fill in
     on any screen. */
  @media (min-width:760px){
    .wrap{max-width:900px;padding:0 32px;}
    .hero{padding:56px 0 40px;}
    .hero img{width:160px;height:160px;}
    h1{font-size:2.6rem;}
    .hero .tag{font-size:1.15rem;}
    h2,h1.pageh{font-size:1.6rem;}
    section{padding:40px 0;}
    /* Build 281: align-items:start was letting the two cards in a row take
       their own heights, so every row had a ragged bottom edge on a wide
       screen. Stretching them to match is what makes a grid read as a grid.
       The card content stays top-aligned inside; only the box grows. */
    #svcList,#pkgList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
    #svcList .card,#pkgList .card{margin-bottom:0;}
    #enqForm,#enqOk,#enquire>p.muted{max-width:560px;}
    /* On a wide screen they fit without swiping. Four (build 374, with a
       Challenge) are too narrow in a row beside the text, so the app band
       below lays them out two by two. */
    .shots figure{flex:0 0 calc((100% - 28px)/3);max-width:none;}
    .steps{max-width:560px;}
  }

/* Build 279: the About page. Its first section has no rule above it, because
   there is nothing before it to separate from. */
.backrow{padding:22px 0 0;margin:0;font-size:.92rem;}
.backrow a{color:var(--sage-deep);text-decoration:none;}
#about.first{border-top:none;padding-top:8px;}
#about.first h2,#about.first h1.pageh{font-size:1.75rem;margin-bottom:14px;}

/* Build 280: two paths instead of one button.
   This page has two genuinely different visitors - someone who wants to hire
   Jane and Alicia, and someone who just wants the free app - and the old hero
   only spoke to the first. The app was the third section down, which is a long
   way past the point most people stop scrolling on a phone.

   Naming both audiences in the visitor's own words ("I'd like a hand" / "I'll
   start on my own") does something a menu of nouns cannot: it tells someone
   who is not ready to pay that they are still welcome, which is the whole
   reason the app is free.

   They are not equal weight. Enquire is filled coral, the app outlined sage -
   this is a business page first. Both are real links to the sections below, so
   nothing is hidden from anyone who prefers to scroll. */
.paths{display:flex;gap:10px;margin:20px 0 0;text-align:center;}
.path{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
      background:var(--paper);border:1.5px solid var(--sage);border-radius:16px;
      padding:16px 12px;text-decoration:none;color:var(--ink);}
.path.hand{border-color:var(--coral-deep);}
.path .pico{font-size:1.5rem;line-height:1;color:var(--sage-deep);}
.path.hand .pico{color:var(--coral-deep);}
.path .pt{font-family:var(--fd);font-size:1.02rem;margin:9px 0 5px;}
.path .pd{font-size:.8rem;color:var(--ink-soft);line-height:1.45;}
.path .pgo{margin-top:12px;width:100%;background:var(--coral-deep);color:#fff;
           border-radius:99px;padding:10px 6px;font-size:.84rem;min-height:40px;
           display:flex;align-items:center;justify-content:center;}
.path .pgo.ghost{background:transparent;color:var(--sage-deep);border:1px solid var(--sage-deep);}
.path:hover .pgo{filter:brightness(1.06);}
@media (max-width:360px){
  .paths{flex-direction:column;}
}
@media (min-width:760px){
  .paths{max-width:620px;margin-left:auto;margin-right:auto;gap:16px;}
  .path{padding:22px 18px;}
  .path .pd{font-size:.88rem;}
}

/* Build 281: the heading that separates packages from the services above. */
.grouphead{margin:26px 0 12px;color:var(--sage-deep);font-size:1.15rem;}
#pkgList .card{display:flex;flex-direction:column;}
#pkgList .price{margin-top:auto;padding-top:8px;}

/* ---------------------------------------------------------------------------
   Build 282: full-width bands and a top nav.

   Until now the whole page was one 680px column centred in the viewport. That
   is fine on a phone, where 680px IS the screen, and it looks like an unfinished
   document on a monitor - a narrow strip of content stranded in margin.

   The fix is to separate two things that were conflated: how wide the PAGE is,
   and how wide a LINE OF TEXT is. Bands run edge to edge and carry the colour;
   .wrap inside each one keeps the text at a readable measure. Nothing changes
   on a phone, because there every band is already the full width of the screen.

   The colour order matters more than it looks. The app band is sage, the only
   band that changes colour properly, which is what stops the app reading as
   "more page" and makes it a distinct offer. That does more for the "app is
   buried" problem than moving the section up would have.
--------------------------------------------------------------------------- */
.band{width:100%;}
.band > .wrap{padding-left:20px;padding-right:20px;}
.band-hero{background:var(--cream);}
.band-paper{background:var(--paper);}
.band-sage{background:#E4EFE4;}
.band-cream{background:var(--cream);}
.band-foot{background:var(--sage-deep);color:#fff;}
.band-foot a,.band-foot .lg-green,.band-foot .s{color:#fff;}
.band-foot footer{color:#fff;}   /* build 399: the plain footer text ("— Jane & Alicia") took footer{}'s muted grey - about 1.5:1 on the green, barely readable */
.band-foot .muted{color:rgba(255,255,255,.75);}
.band-sage h2,.band-sage h3{color:var(--sage-deep);}

/* The nav. On a phone it is the brand and Enquire only: the page is short, the
   two paths already route people, and a burger menu for three links is more
   chrome than navigation. */
.topnav{position:sticky;top:0;z-index:20;background:var(--paper);
        border-bottom:1px solid var(--line);}
.navin{display:flex;align-items:center;gap:14px;padding:9px 20px;}
/* Build 296: the name is set in brand colours everywhere it appears - coral
   "Life", sage-deep "Laundry" - with one exception. Inside the sage footer both
   words go white, because the palette on a sage ground would either disappear
   or shout. That exception already lives in the .band-foot rules. */
.navbrand{display:flex;align-items:center;gap:8px;flex:1;min-width:0;
          text-decoration:none;color:var(--sage-deep);font-family:var(--fd);font-size:.98rem;}
.navbrand img{width:28px;height:28px;object-fit:contain;flex:0 0 auto;}
.navlinks{display:none;gap:18px;}
.navlinks a{color:var(--ink-soft);text-decoration:none;font-size:.9rem;}
.navlinks a:hover{color:var(--coral-deep);}
.navcta{background:var(--coral-deep);color:#fff;text-decoration:none;
        border-radius:99px;padding:9px 16px;font-size:.86rem;flex:0 0 auto;
        min-height:40px;display:flex;align-items:center;}
@media (min-width:760px){
  .navlinks{display:flex;}
  .navin{padding:11px 32px;}
  .band > .wrap{padding-left:32px;padding-right:32px;}
  .band-hero{padding:14px 0 10px;}
  .band-paper,.band-sage,.band-cream{padding:10px 0;}
  #svcList,#pkgList{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* The app band is the one place the existing imagery can carry a wide layout,
     so it runs as text beside screenshots rather than stacked. */
  .band-sage #app{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;}
  .band-sage #app > h2{grid-column:1;margin-bottom:0;}
  /* Build 374: the words and install steps down the left, the four
     screenshots two by two down the right (they used to be a row of three
     spanning three rows, which pushed the install steps into both columns). */
  .band-sage #app{row-gap:14px;align-items:start;}
  .band-sage #app > *:not(.shots){grid-column:1;}
  .band-sage #app .shots{grid-column:2;grid-row:1 / span 8;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;overflow:visible;padding:4px 0 0;}
  .band-sage #app .shots figure{max-width:none;}
}

/* Build 282: marks the page you are on, so About does not feel like a
   different site the moment someone clicks it. */
.navlinks a.here{color:var(--coral-deep);}

/* ---------------------------------------------------------------------------
   Build 283: a real photograph in the hero.

   Desktop only, deliberately. On a phone the hero already works and the two
   paths are the thing that matters - a portrait photo above them would push
   the only two decisions on the page below the fold, on the device almost
   every visitor arrives from. The picture earns its place on a wide screen,
   where the alternative is empty margin.

   The photo is the right-hand half of a composite that was supplied at
   1206x570, so the usable source is only 600px wide and it will be slightly
   soft on a retina screen. Replace with the original frame when it turns up;
   nothing here needs to change but the file.
--------------------------------------------------------------------------- */
.heropic{display:none;}
@media (min-width:760px){
  .hero{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;
        text-align:left;max-width:860px;margin:0 auto;padding:36px 0 32px;}
  .hero .herotext{min-width:0;}
  .hero img.pagelogo,.hero > .herotext > img{margin:0 0 12px;}
  .hero h1{font-size:2.5rem;}
  .hero .tag{font-size:1.1rem;}
  .hero .paths{margin-top:22px;}
  .hero .ig{text-align:left;}
  .heropic{display:block;min-width:0;}
  .heropic img{width:100%;height:auto;border-radius:20px;display:block;
               box-shadow:0 10px 30px rgba(46,42,38,.14);}
}

/* ---------------------------------------------------------------------------
   Build 284: a real before and after.

   Side by side rather than a slider. A slider needs both frames shot from the
   same spot; these are genuinely different viewpoints - the before is a tight
   shot of one shelf corner, the after looks down the whole garage - and sliding
   between them would read as a mistake rather than a transformation.

   Both images keep Jane and Alicia's own "Before" and "After" captions, which
   are already in the brand's typeface, so the page does not need to label them
   again. The Instagram story counter and mute icon were cropped off the right
   edge of each, and both were re-encoded, which strips the EXIF - these are
   photographs taken inside a customer's home, so the GPS data mattered.
--------------------------------------------------------------------------- */
.band-work{background:var(--paper);}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0;}
.ba figure{margin:0;min-width:0;}
.ba img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line);}
/* "Our work": one block per job (build 342) */
.job{margin-top:26px;}
.job h3{margin:0;}
.jobnote{margin:6px 0 0;}
.ba figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:6px;text-align:center;letter-spacing:.02em;}
.worknote{margin-top:12px;}
.worknote a{display:inline-flex;align-items:center;gap:5px;color:var(--sage-deep);}
.worknote a .iglyph{vertical-align:-2px;}
@media (min-width:760px){
  .ba{gap:16px;max-width:660px;}
  #work h2{margin-bottom:6px;}
}

/* Build 286: the enquiry form moved to its own page. The landing page ends on
   a short call to action instead of a nine-field form, which was most of its
   remaining length - a visitor arriving from Instagram now reaches the bottom
   in a few swipes rather than scrolling past a form they may not be ready for.
   The form is also now a page that can be linked to directly, from the nav, the
   Instagram bio, or a reply to a DM. */
/* Build 290: the closing call to action.
   The paragraph was inheriting the full 900px measure of the band, so on a wide
   screen it ran nearly the width of the page and broke into two lines with a
   three-word orphan on the second. Centred text at that measure reads badly
   whatever it says. It is now held to a short measure of its own and balanced,
   so it breaks into even lines - and the block has room around it, since a
   call to action surrounded by nothing is the point of a call to action. */
.cta{text-align:center;padding:38px 0 42px;}
.cta h2{margin-bottom:10px;text-wrap:balance;}
.cta p.muted{max-width:34rem;margin-left:auto;margin-right:auto;text-wrap:balance;}
.cta .btn{margin-top:22px;padding:15px 34px;}
@media (min-width:760px){
  .cta{padding:56px 0 60px;}
  .cta h2{font-size:1.75rem;}
  .cta p.muted{font-size:1rem;}
}
.navcta.here{background:var(--sage-deep);}

/* Build 302: the packages catalogue. Cards rather than a grid of equal boxes -
   a membership carries four sub-sections and a one-off package carries one, so
   forcing them into the same shape would either starve one or pad the other. */
.pklist{display:flex;flex-direction:column;gap:16px;margin-top:16px;}
.pk{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 20px;}
.band-sage .pk{background:rgba(253,251,245,.82);}
.pk-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.pk-head h3{margin:0;font-size:1.2rem;}
.pk-meta{font-size:.82rem;color:var(--ink-soft);}
.pk-price{font-family:var(--fd);color:var(--coral-deep);font-size:1.05rem;margin:4px 0 10px;}
.pk h4{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sage-deep);
       margin:16px 0 6px;font-weight:600;}
.pk ul{margin:0;padding-left:18px;}
.pk li{margin-bottom:5px;font-size:.94rem;line-height:1.5;}
.pk p{font-size:.95rem;}
#packages.first{border-top:none;padding-top:10px;}
@media (min-width:760px){
  .pklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;}
  .pk{padding:22px 24px;}
}

/* Build 303: the brochure buttons. Two routes on purpose - "open" for people
   who just want to look, "download" for anyone who wants to keep or forward it,
   which is most of the reason a PDF exists at all. */
.pdfrow{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 10px;}
.pdfrow .btn{text-decoration:none;}
/* build 346: the general description shown until the live services load (and kept if the database can't be reached) */
.svc-intro{grid-column:1/-1;margin:0;color:var(--ink-soft);max-width:640px;}

/* Build 383 (F1): photos that didn't send, on the thank-you screen */
.photonote{background:#fffdf8;border:1px solid rgba(74,65,57,.3);border-radius:12px;padding:12px 14px;margin:14px 0;text-align:left;}
.photonote p{margin:0 0 10px;}
.photonote .btn{padding:10px 18px;font-size:.95rem;min-height:44px;}

/* Stand-alone website: links in running text in the site's green, not the browser's blue. */
#enquire .muted a, #enquire .card p a, #privacy a{color:var(--sage-deep);}