/* Pack Unpack Neat — shared styles.
   The home page is deliberately almost bare: a photo, a line, a button.
   Everything else lives behind the links at the top, because a visitor
   looking for this service decides in seconds, not paragraphs. */

:root{
  --green:#2E5A4B;
  --green-deep:#20402F;
  --green-light:#3F7A64;
  --green-wash:#EAF0EC;
  --cream:#EFE6D6;
  --sand:#E2D5BE;
  --brass:#B8894A;
  --brown:#5A3E2B;
  --brown-deep:#6D543B;
  --ink:#24231F;
  --muted:#5C574E;
  --line:#D6C8AE;
  --white:#FAF4E8;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:820px;
  --radius:12px;
}

*,*::before,*::after{box-sizing:border-box}
/* Must outrank any class that sets `display`. Without this, .splash's
   display:grid beat the browser's [hidden] rule and left an invisible
   full-screen layer swallowing every click on the page. */
[hidden]{display:none!important}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  display:flex;flex-direction:column;min-height:100vh;
}
/* height:auto is required — the width/height HTML attributes otherwise
   apply as a fixed pixel height and override every aspect-ratio. */
img{max-width:100%;height:auto;display:block}
a{color:var(--brown)}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,5.4vw,2.7rem);letter-spacing:-.01em}
h2{font-size:clamp(1.4rem,3.6vw,1.9rem)}
h3{font-size:1.12rem}
p{margin:0 0 1.1em}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
main{flex:1}

.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-header{background:var(--cream);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:14px;min-height:64px;flex-wrap:wrap}
.brand{
  font-family:var(--serif);font-size:1.06rem;font-weight:600;
  color:var(--ink);text-decoration:none;white-space:nowrap;line-height:1.2;
}
.brand span{display:block;font-family:var(--sans);font-size:.62rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
/* These links are the only route to the detail pages now, so they carry a
   little more weight than a typical utility nav. */
.site-nav a{
  font-size:.95rem;font-weight:500;color:var(--brown);text-decoration:none;
  padding:10px 13px;border-radius:8px;white-space:nowrap;
  transition:color .18s ease,background .18s ease;
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--green);background:var(--green-wash)}
.site-nav a[aria-current="page"]{color:var(--green);font-weight:600}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;min-height:48px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--green-light)}
.btn-ghost{background:transparent;color:var(--green);border-color:var(--line)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--green);background:var(--green-wash)}
.btn-sm{padding:10px 18px;font-size:.88rem;min-height:42px}
.site-nav .btn-primary{color:#fff}

.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;width:44px;height:44px;cursor:pointer;color:var(--ink);font-size:1.2rem;
}

/* ---------- home ----------
   Cream ground, as the client asked. The depth comes from two very faint
   layers instead of a colour block: an oversized sand wordmark bleeding off
   the corner, and one brass halo behind the portrait. */
.home-ground{position:relative;isolation:isolate;overflow:hidden;background:var(--cream)}
.home-ground::before{
  content:"";position:absolute;z-index:-1;
  top:clamp(60px,16vw,150px);left:50%;transform:translateX(-50%);
  width:min(620px,120vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(184,137,74,.16),transparent 66%);
  pointer-events:none;
}
.ground-mark{
  position:absolute;z-index:-1;top:-.28em;right:-.14em;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(150px,32vw,400px);line-height:.8;letter-spacing:-.03em;
  color:rgba(122,96,62,.09);
  pointer-events:none;user-select:none;
}

.home{position:relative;text-align:center;padding-block:clamp(38px,8vw,68px)}
.portrait{
  width:min(280px,62vw);aspect-ratio:1;margin:0 auto 30px;
  border-radius:50%;object-fit:cover;object-position:center 42%;
  border:7px solid var(--white);box-shadow:0 14px 38px rgba(36,35,31,.18);
}

/* The three services sit in their own row ABOVE the photo — not inside the
   photo, and not in the menu bar. The same row repeats at the top of each
   service page so you can switch between them. */
.service-links{
  /* five links now, so they must be allowed to wrap: forcing one row
     pushed them off the side of a phone screen. */
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:8px;margin:0 0 28px;
}
.service-links a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;white-space:nowrap;
  background:var(--white);color:var(--green-deep);text-decoration:none;
  font-size:clamp(.78rem,2.5vw,.92rem);font-weight:600;
  padding:11px clamp(12px,3.4vw,20px);border-radius:999px;
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(36,35,31,.06);
  transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
.service-links a:hover,.service-links a:focus-visible{
  border-color:var(--green);transform:translateY(-2px)
}
.service-links a[aria-current="page"]{
  background:var(--green);color:#fff;border-color:var(--green)
}

/* ---------- floating call button ---------- */
.call-fab{
  position:fixed;right:16px;bottom:16px;z-index:80;
  display:inline-flex;align-items:center;gap:9px;
  min-height:52px;padding:14px 22px;border-radius:999px;
  background:var(--green);color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  box-shadow:0 10px 26px rgba(36,35,31,.28);
  transition:background .18s ease;
}
.call-fab:hover,.call-fab:focus-visible{background:var(--green-light)}
.call-fab svg{flex:none}

.contact-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 .8em}
.home h1{margin-bottom:.35em}
.home-line{font-size:1.06rem;color:var(--muted);max-width:44ch;margin:0 auto 22px}

.rating{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;
  margin:0 0 26px;font-size:.96rem;color:var(--muted)}
.rating .stars{color:#D9A227;letter-spacing:.1em;font-size:1.06rem}
.rating b{color:var(--ink);font-size:1.06rem}

.home-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:34px}

.home-links{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin:0;padding:0;list-style:none;text-align:left;
}
.home-links a{
  display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;text-decoration:none;color:var(--ink);
  transition:border-color .18s ease,transform .18s ease;
}
.home-links a:hover,.home-links a:focus-visible{border-color:var(--green);transform:translateY(-2px)}
.home-links strong{display:block;font-family:var(--serif);font-size:1.06rem;font-weight:600;margin-bottom:.15em}
.home-links span{font-size:.88rem;color:var(--muted)}

.home-note{
  margin:30px 0 0;padding:14px 18px;background:var(--sand);
  border-radius:var(--radius);font-size:.9rem;color:#5A4A2E;text-align:left;
}
.home-note strong{color:var(--ink)}

/* ---------- back to home ---------- */
.back-link{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
  margin-top:14px;padding:8px 14px 8px 10px;border-radius:999px;
  color:var(--brown);text-decoration:none;
  font-size:.9rem;font-weight:500;
  transition:color .18s ease,background .18s ease;
}
.back-link:hover,.back-link:focus-visible{color:var(--green);background:var(--green-wash)}
.back-link svg{flex:none}

/* ---------- inner pages ---------- */
.page{padding-block:clamp(34px,6vw,60px)}
.page-tag{font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 .7em}
.lede{font-size:1.04rem;color:var(--muted)}
.page-media{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);margin:26px 0}

.list{margin:0;padding:0;list-style:none}
.list li{padding:7px 0 7px 22px;position:relative;font-size:.96rem;color:var(--muted)}
.list li::before{content:"";position:absolute;left:2px;top:.85em;width:7px;height:7px;
  border-radius:50%;background:var(--brass)}
.list.two{columns:2 200px;column-gap:30px}
.list.two li{break-inside:avoid}

.box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;margin-top:26px}
.box h3{margin-bottom:.4em}
.box p:last-child{margin-bottom:0}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}

.next{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
}

/* ---------- booking ---------- */
.field label{display:block;font-weight:600;font-size:.98rem;margin-bottom:8px}
.field .hint{font-size:.9rem;color:var(--muted);margin:0 0 12px}
.zip-row{display:flex;gap:10px;flex-wrap:wrap}
.zip-row input{
  flex:1 1 180px;min-width:0;font-family:inherit;font-size:1.05rem;letter-spacing:.06em;
  color:var(--ink);padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--cream);min-height:50px;
}
.zip-row input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.zip-row input::placeholder{color:#A79E90}

.gate-msg{margin-top:16px;border-radius:10px;padding:18px 20px;font-size:.95rem}
.gate-msg strong{display:block;margin-bottom:.3em}
.gate-msg.out{background:#FBF1E6;border:1px solid var(--brass);color:#6B4A1E}
.gate-msg.out strong{color:#4A3213}
.gate-msg.in{background:var(--green-wash);border:1px solid var(--green-light);color:#2A4C40}
.gate-msg.in strong{color:var(--green)}
.cal-placeholder{border:2px dashed var(--line);border-radius:10px;padding:30px 22px;
  text-align:center;color:var(--muted);font-size:.93rem;background:var(--cream);margin-top:16px}
.calendar-slot{margin-top:16px;opacity:1;transform:none}

.price-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.price-figure{font-family:var(--serif);font-size:2rem;line-height:1.1;color:var(--green);margin:0}
.price-figure small{display:block;font-family:var(--sans);font-size:.86rem;font-weight:500;
  color:var(--muted);margin-top:.5em}
.terms{margin:22px 0 0;padding:0;list-style:none}
.terms li{padding:12px 0;border-top:1px solid var(--line);font-size:.94rem;color:var(--muted)}
.terms strong{color:var(--ink)}
.pay-list{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 0;padding:0;list-style:none}
.pay-list li{background:var(--green-wash);color:var(--green);border-radius:999px;
  padding:8px 16px;font-size:.9rem;font-weight:600}

/* ---------- disclosure ---------- */
.disc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-top:10px}
.disc>summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:600;
  font-size:.96rem;display:flex;align-items:center;gap:12px;min-height:54px}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;
  border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);
  transform:rotate(45deg);transform-origin:60% 60%}
.disc[open]>summary::after{transform:rotate(-135deg)}
.disc>summary:hover{background:var(--green-wash)}
.disc>summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.disc-body{padding:0 20px 20px}

/* ---------- footer ---------- */
/* Warm dark brown rather than near-black: with a brown-cream ground the
   charcoal footer was the one cold block left on the page. */
.site-footer{background:var(--brown-deep);color:rgba(255,255,255,.86);padding-block:32px;
  font-size:.87rem;margin-top:auto;
  /* room so the floating call button never sits on the footer links */
  padding-bottom:96px}
.footer-inner{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center}
.site-footer a{color:rgba(255,255,255,.88);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-links{display:flex;flex-wrap:wrap;gap:16px}

/* ---------- opening screen ----------
   Short on purpose: a visitor looking for this service decides in seconds,
   and anything that delays the page costs more than it adds. Shown once per
   session, never when reduced motion is requested, and removed from the DOM
   afterwards so it can never trap the page. */
.splash{
  position:fixed;inset:0;z-index:999;
  display:grid;place-items:center;
  background:var(--cream);
  opacity:1;
}
.splash.done{opacity:0;pointer-events:none}
.splash-mark{
  font-family:var(--serif);font-size:clamp(1.4rem,5vw,2.1rem);font-weight:600;
  color:var(--ink);text-align:center;line-height:1.2;
}
.splash-mark span{
  display:block;font-family:var(--sans);font-size:.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-top:.5em;
}
.splash-mark em{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(.92rem,2.8vw,1.1rem);color:var(--muted);
  margin-top:1.1em;letter-spacing:.01em;
}
@media (prefers-reduced-motion:no-preference){
  .splash{transition:opacity .34s ease}
  @keyframes splash-in{from{opacity:0;transform:translateY(6px)}}
  .splash-mark{animation:splash-in .38s ease-out both}
}

/* ---------- to-be-added marker ---------- */
.tbd{background:#FFF4D6;border-bottom:2px dotted #C79A2E;padding:1px 6px;
  border-radius:3px;color:#6A4E0B;font-weight:600}

/* ---------- motion ----------
   Finished state is the default everywhere; the animation only exists
   inside the query, so the page is correct if it never runs. */
@media (prefers-reduced-motion:no-preference){
  @keyframes gate-arrive{from{opacity:0;transform:translateY(-8px)}}
  .calendar-slot.revealed{animation:gate-arrive .26s ease-out both}
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .home-links{grid-template-columns:1fr}
  .pair,.price-row{grid-template-columns:1fr}
  .list.two{columns:1}
  .site-nav{
    display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;
    padding-bottom:12px;
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 10px;min-height:44px;display:flex;align-items:center}
  .site-nav .btn{margin-top:8px}
  .nav-toggle{display:block}
}
@media (max-width:560px){
  body{font-size:16px}
  .page-media{aspect-ratio:4/3}
}

.zip-list{
  margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88rem;color:var(--muted);line-height:2;
}

/* ---------- shelf animation (PARKED) ----------
   Not on any page right now: the client asked for the hero animation to be
   removed. Kept because it may come back; re-add the .shelf markup to bring
   it live again.
   Six boxes fly in from off-frame and settle into a shelf: the business in
   one picture, chaos to order. Built as an SVG with a viewBox so it scales
   on a phone without any JavaScript.

   The FINISHED state — boxes neatly in place — is the default. The flying-in
   only exists inside the reduced-motion query, so if animation never runs the
   visitor still sees a tidy shelf, which is exactly the right picture. */
/* Wide and short, like the reference: the shelf sits in the middle and the
   boxes fly in from off-frame left and right. On a phone the stage box gets
   taller and `slice` crops the empty sides away, so the shelf itself stays a
   usable size instead of shrinking to a third of a small screen. */
.shelf{width:100%;max-width:900px;margin:6px auto 30px}
.shelf-stage{
  width:100%;aspect-ratio:980/340;overflow:hidden;
  border-radius:22px;background:#E7DCC7;
}
.shelf-stage svg{width:100%;height:100%;display:block}
.shelf-frame{fill:none;stroke:rgba(46,90,75,.28);stroke-width:2}
.shelf-line{stroke:rgba(46,90,75,.20);stroke-width:2}
.shelf-caption{
  margin:10px 0 0;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.68rem;letter-spacing:.16em;color:#9a9284;
}

@media (prefers-reduced-motion:no-preference){
  .shelf rect.b{transform-box:view-box;transform-origin:center;
    animation:8s cubic-bezier(.5,0,.2,1) infinite}
  /* These must match the specificity of the rule above: its `animation`
     shorthand resets animation-name to none, and a weaker selector here
     would lose to it. */
  .shelf rect.b1{animation-name:bx1}
  .shelf rect.b2{animation-name:bx2;animation-delay:.1s}
  .shelf rect.b3{animation-name:bx3;animation-delay:.2s}
  .shelf rect.b4{animation-name:bx4;animation-delay:.3s}
  .shelf rect.b5{animation-name:bx5;animation-delay:.4s}
  .shelf rect.b6{animation-name:bx6;animation-delay:.5s}
  @keyframes bx1{0%,10%{transform:translate(-250px,60px) rotate(-12deg)}44%,64%{transform:none}94%,100%{transform:translate(-250px,60px) rotate(-12deg)}}
  @keyframes bx2{0%,10%{transform:translate(210px,84px) rotate(9deg)}44%,64%{transform:none}94%,100%{transform:translate(210px,84px) rotate(9deg)}}
  @keyframes bx3{0%,10%{transform:translate(-290px,-24px) rotate(7deg)}44%,64%{transform:none}94%,100%{transform:translate(-290px,-24px) rotate(7deg)}}
  @keyframes bx4{0%,10%{transform:translate(250px,-18px) rotate(-11deg)}44%,64%{transform:none}94%,100%{transform:translate(250px,-18px) rotate(-11deg)}}
  @keyframes bx5{0%,10%{transform:translate(-210px,92px) rotate(15deg)}44%,64%{transform:none}94%,100%{transform:translate(-210px,92px) rotate(15deg)}}
  @keyframes bx6{0%,10%{transform:translate(230px,66px) rotate(-8deg)}44%,64%{transform:none}94%,100%{transform:translate(230px,66px) rotate(-8deg)}}
}


/* ---------- reviews ----------
   Real reviews from the client's Taskrabbit profile, quoted verbatim.
   Never add, edit or invent an entry here. */
.rating-link{text-decoration:none;border-radius:999px;padding:6px 10px;margin-left:-10px;
  transition:background .18s ease}
.rating-link:hover,.rating-link:focus-visible{background:var(--green-wash)}
.rating-link span:last-child{text-decoration:underline;text-underline-offset:3px}

.reviews{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.review{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;
}
.review-text{margin:0 0 .7em;font-size:.97rem;line-height:1.6;color:var(--ink)}
.review-by{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
  font-size:.85rem;color:var(--muted);
}
.review-by strong{color:var(--ink);font-weight:600}
.review-stars{color:#D9A227;letter-spacing:.08em}
.review-date{color:#938B7E}

@media (max-width:620px){
  .shelf-stage{aspect-ratio:980/620}
}

/* ---------- before & after ----------
   Real photographs of the client's own work, supplied by her. Each file is a
   single composite with the two halves already labelled. */
.ba-grid{display:grid;gap:18px;margin-top:26px}
.ba{margin:0}
.ba img{width:100%;border-radius:var(--radius);border:1px solid var(--line)}
.ba figcaption{
  margin-top:8px;font-size:.88rem;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.06em;text-transform:uppercase;
}
@media (max-width:620px){
  /* let the pairs run wider than the text column so each half stays readable */
  .ba-grid{margin-inline:-22px}
  .ba img{border-radius:0;border-left:0;border-right:0}
  .ba figcaption{padding-inline:22px}
}

/* ---------- services overview ---------- */
.svc-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.svc-list a{
  display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;text-decoration:none;color:var(--ink);
  transition:border-color .18s ease,transform .18s ease;
}
.svc-list a:hover,.svc-list a:focus-visible{border-color:var(--green);transform:translateY(-2px)}
.svc-list img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.svc-list strong{display:block;font-family:var(--serif);font-size:1.14rem;font-weight:600;margin-bottom:.25em}
.svc-list span{font-size:.93rem;color:var(--muted)}
@media (max-width:560px){
  .svc-list a{grid-template-columns:1fr;gap:12px}
}

/* All five links on one row on a phone, as the client asked. They only fit
   at this size, so the type and padding tighten and the row borrows the page
   gutter. The 44px tap height is kept. */
@media (max-width:620px){
  .service-links{
    flex-wrap:nowrap;gap:4px;
    margin-inline:-16px;padding-inline:6px;
  }
  .service-links a{
    font-size:.68rem;padding:11px 8px;letter-spacing:-.01em;
    flex:0 1 auto;min-width:0;
  }
}
@media (max-width:380px){
  .service-links a{font-size:.63rem;padding:11px 6px}
}