/* SHIELD'S HAULING & SUPPLY
   Built from Claude Handoff 3 FINAL: its tokens, its component order, its
   wording, its bundled fonts and its exact layered background.

   ONE THING IS NOT COPIED VERBATIM, AND IT IS DELIBERATE. The handoff's
   fixed heights (190px header, 104px button, 95px card art, 76px dock,
   48px step circles) add up to roughly 950pt on a 390x844 phone. That is
   what pushed the service cards under the dock in the last build.

   So every large element is clamp(floor, N dvh, HANDOFF VALUE). The ceiling
   IS the handoff's number, so on a tall phone the page is exactly the scale
   it asks for; on a shorter one it steps down instead of scrolling. No
   transform:scale(), no zoom, no narrow wrapper -- the shell is the full
   viewport width up to 480px, exactly as rule 14 requires. */

:root{
  --navy:#063B5A;
  --navy-deep:#022B43;
  --navy-hi:#0B5B82;
  --orange:#F05A1A;
  --orange-dark:#D9470E;
  --cream:#FFF5DF;
  --muted:#E8DDC8;
  --white:#FFFFFF;
  --rule-navy:#0E4E72;

  --radius-button:22px;
  --radius-card:20px;
}

/* The faces are declared in font-fix.css, which loads after this file.
   Declaring them here as well would fetch the same three files twice. */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--cream);
  background:#071D2B;
    -webkit-text-size-adjust:100%;
}
img{display:block;max-width:100%}

.app-shell{
  width:min(100%,480px);
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(2px,.28dvh,7px);
  padding:calc(clamp(8px,1.3dvh,18px) + env(safe-area-inset-top,0px)) 18px
          calc(clamp(8px,1.3dvh,18px) + env(safe-area-inset-bottom,0px));
  /* Exactly the background from FIX-CLAUDE-VERSION.md. No opacity, no overlay. */
  background:
    radial-gradient(ellipse 95% 42% at 50% -4%, #0B5B82 0%, #063F60 48%, transparent 72%),
    linear-gradient(180deg, #063B5A 0%, #04344F 52%, #022B43 100%);
  box-shadow:0 0 50px #0008;
}

/* ---------- logo ---------- */
.site-header{display:flex;justify-content:center;flex:0 0 auto;position:relative}
.brand-logo{
  width:auto;
  height:clamp(84px,18.9dvh,170px);
  max-width:min(86%,350px);
  object-fit:contain;
}

/* ---------- headline ---------- */
.hero{text-align:center;flex:0 0 auto}
/* The orange rules SHRINK before the words do, so a narrow phone loses rule
   width rather than wrapping "WE DUMP." onto two lines. */
.ruled{display:flex;align-items:center;justify-content:center;gap:clamp(9px,3.4vw,16px);min-width:0}
.ruled::before,.ruled::after{
  content:"";
  flex:0 1 clamp(30px,13vw,58px);
  min-width:14px;
  height:clamp(6px,1dvh,10px);
  margin-bottom:.09em;
  border-radius:5px;
  background:var(--orange);
}
.hero p{
  margin:0;
  font-size:clamp(12px,1.95dvh,19px);
  line-height:1.3;
  font-weight:700;
}

/* ---------- the one thing to do ---------- */
.photo-button{
  display:grid;
  grid-template-columns:clamp(40px,7.4dvh,64px) 1fr clamp(16px,3.2dvh,28px);
  align-items:center;
  gap:clamp(6px,2.6vw,12px);
  width:100%;
  min-height:clamp(58px,11dvh,104px);
  padding:clamp(8px,1.6dvh,16px) clamp(12px,4.6vw,20px);
  border-radius:var(--radius-button);
  color:var(--white);
  background:linear-gradient(180deg,#FF6D29,var(--orange));
  text-decoration:none;
  box-shadow:0 6px 0 var(--orange-dark);
  flex:0 0 auto;
}
.photo-button>*{min-width:0}
.photo-button:active{transform:translateY(3px);box-shadow:0 3px 0 var(--orange-dark)}
.photo-button img{width:100%;height:auto;max-height:clamp(40px,7.4dvh,62px)}
.photo-button span{
  font-weight:700;
  text-align:center;
  font-size:clamp(20px,4.4dvh,44px);
  letter-spacing:1px;
  white-space:nowrap;
}
.photo-button b{
  font-size:clamp(24px,5.8dvh,54px);
  line-height:1;
  font-family:Arial,sans-serif;
  text-align:center;
}

.reassurance{
  display:flex;align-items:center;gap:clamp(7px,3.4vw,14px);
  margin:0;
  text-align:center;
  color:var(--muted);
  font-size:clamp(11px,1.75dvh,17px);
  font-weight:700;
  flex:0 0 auto;
}
.reassurance::before,.reassurance::after{content:"";flex:1;height:1px;background:var(--rule-navy)}

/* ---------- what they do ---------- */
.service-panel{
  padding:clamp(5px,.85dvh,7px);
  border-radius:var(--radius-card);
  background:var(--cream);
  color:var(--navy-deep);
  flex:0 0 auto;
}
.service-panel h2{
  margin:0 0 clamp(7px,1.4dvh,14px);
  text-align:center;
  font-weight:700;
  font-size:clamp(15px,2.35dvh,24px);
}
.service-panel .ruled{gap:clamp(7px,2.4vw,11px)}
.service-panel .ruled::before,.service-panel .ruled::after{
  flex:0 1 clamp(18px,7vw,34px);min-width:10px;height:clamp(5px,.8dvh,8px);
}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(4px,1.6vw,6px)}
.service-card{
  min-width:0;
  padding:clamp(6px,1dvh,11px) 4px clamp(7px,1.15dvh,12px);
  border:3px solid var(--navy-deep);
  border-radius:var(--radius-card);
  background:#FFFAF0;
  text-align:center;
}
.service-card img{width:100%;height:clamp(48px,9.9dvh,96px);object-fit:contain}
/* Both headings stay on ONE line, which is what the approved reference
   shows. "BRING ME MATERIAL" is the long one; this clamp is sized on it. */
.service-card h3{
  margin:clamp(5px,.9dvh,8px) 0 4px;
  font-weight:700;
  font-size:clamp(11px,5.3vw,26px);
  line-height:.95;
  white-space:nowrap;
}
.service-card p{
  margin:0;
  color:#62666B;
  font-size:clamp(8px,2.7vw,14px);
  font-weight:700;
  white-space:nowrap;
}

/* ---------- how it goes ---------- */
.steps{
  display:grid;
  grid-template-columns:auto auto auto;
  justify-content:space-between;
  align-items:center;
  margin:0;
  flex:0 0 auto;
}
.steps div{
  display:flex;align-items:center;justify-content:center;gap:clamp(5px,2.1vw,9px);
  min-width:0;
  padding:0 clamp(3px,1.5vw,8px);
  border-left:1px solid var(--rule-navy);
}
.steps div:first-child{border-left:0}
.steps strong{
  display:grid;place-items:center;
  flex:0 0 auto;
  width:clamp(24px,4dvh,42px);
  height:clamp(24px,4dvh,42px);
  border-radius:50%;
  color:var(--white);
  background:var(--orange);
  font-weight:700;
  font-size:clamp(15px,2.6dvh,25px);
}
.steps span{
  font-weight:700;
  font-size:clamp(12px,4.8vw,24px);
  white-space:nowrap;
}

/* ---------- where they are ---------- */
.location-line{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:0;
  color:var(--cream);
  font-size:clamp(11px,1.7dvh,16px);
  font-weight:900;
  letter-spacing:.6px;
  white-space:nowrap;
  flex:0 0 auto;
}
.location-line::before,.location-line::after{
  content:"";width:min(22vw,110px);height:1px;background:#FFFFFF80;
}
.location-line img{width:clamp(14px,2.3dvh,22px);height:auto;flex:none}

/* ---------- TEXT / CALL / SHARE ----------
   IN FLOW, not fixed. Everything above fits on one screen, so a fixed dock
   only introduces the overlap it exists to avoid. Three equal columns. */
.action-dock{
  padding-top:clamp(5px,1dvh,10px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(7px,2.6vw,10px);
  flex:0 0 auto;
}
.dock-button{
  display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.8vw,7px);
  min-width:0;
  min-height:clamp(44px,6.2dvh,70px);
  padding:10px 6px;
  border-radius:20px;
  text-decoration:none;
  font-weight:700;
  font-size:clamp(15px,5.2vw,30px);
  white-space:nowrap;
  border:0;
  cursor:pointer;
  appearance:none;
}
.dock-button img{width:clamp(22px,4.2dvh,39px);height:auto;flex:none}
.dock-button--text{color:var(--white);background:var(--orange)}
.dock-button--call{color:var(--navy-deep);background:var(--cream)}
.dock-button--share{
  color:var(--cream);
  background:var(--navy-deep);
  border:3px solid var(--cream);
}
.dock-button:active{transform:translateY(2px)}

.said{
  margin:6px 0 0;text-align:center;color:var(--cream);
  font-size:14px;font-weight:700;
}
.said[hidden]{display:none}

.photo-button:focus-visible,
.dock-button:focus-visible{outline:4px solid var(--white);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Below 360px the cards are narrow enough that the label needs its own size.
   HONEST LIMIT: the bundled Haul Display is 1.45x wider, per unit of cap
   height, than the face the approved mockup was drawn with. "BRING ME
   MATERIAL" is 180px wide at a 22px cap there; the same string in this face
   at that cap height needs 261px, and the card is 149px. So a one-line label
   tops out around 60% of the mockup's size. Wrapping it, or a genuinely
   condensed font file, are the only two ways past that. */
@media (max-width:360px){
  .service-card h3{font-size:clamp(10px,4vw,24px)}
  .brand-logo{height:clamp(78px,17dvh,140px)}
}

/* A landscape phone has almost no height; let it scroll rather than
   crushing every element to nothing. */
@media (max-height:460px){
  .app-shell{min-height:0;gap:10px;padding-block:12px;justify-content:flex-start}
  .brand-logo{height:88px}
}


/* The hero title's size comes from font-fix.css and is width-based, so a
   SHORT viewport (landscape, iPhone SE, a browser with a big toolbar) has no
   say in it. This is the one place it is scaled back, and only by height. */
@media (max-height:700px){
  h1.hero-title{font-size:clamp(44px,12.4vw,62px)}
}
@media (max-height:600px){
  h1.hero-title{font-size:clamp(30px,8.6vw,42px)}
  .brand-logo{height:clamp(70px,15dvh,120px)}
}


/* ------------------------------------------------------------------
   THE SPLASH — Konner and the truck, so a stranger can see a real
   person before they text a photo of their yard to a phone number.

   It sits ON TOP of the finished page rather than replacing it, so the
   app behind it is already laid out and the TEXT button works the
   instant the splash clears. It never delays anything.
   ------------------------------------------------------------------ */
.splash{
  position:fixed;
  inset:0;
  z-index:50;
  background:var(--navy-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  animation:splash-in .35s ease-out both;
}
.splash[hidden]{display:none}

/* The photo fills the screen and is cropped from the CENTER, so the truck
   and Konner hold their place on a tall phone and a short one alike. */
.splash img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}

/* His name goes at the TOP, over the sky. The photo already carries the
   Shield's badge across its bottom third, and the name sat right on top of
   it. The sky is the only empty part of this picture. */
.splash-foot{
  position:absolute;
  left:0;right:0;top:0;
  padding:calc(30px + env(safe-area-inset-top,0px)) 20px 70px;
  text-align:center;
  background:linear-gradient(180deg,rgba(2,43,67,.82) 12%,transparent);
  color:var(--cream);
}
.splash-foot span{
  display:block;
  font-family:"HaulDisplay","Arial Narrow",sans-serif;
  font-size:clamp(26px,7.5vw,38px);
  letter-spacing:.5px;
  line-height:1;
  text-shadow:0 2px 12px rgba(2,43,67,.7);
}
.splash-foot small{
  display:block;
  margin-top:5px;
  font-size:clamp(12px,3.4vw,15px);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted);
}

@keyframes splash-in{from{opacity:0}to{opacity:1}}
.splash.is-going{animation:splash-out .45s ease-in both}
@keyframes splash-out{from{opacity:1}to{opacity:0}}

/* Somebody who has asked for less motion gets no fade, just the screen. */
@media (prefers-reduced-motion:reduce){
  .splash,.splash.is-going{animation:none}
}

/* ------------------------------------------------------------------
   THE SHARE SHEET.

   Slides up from the bottom and settles in the middle, over everything.
   It carries the QR for the person standing in front of you, and two
   buttons for the person who is not.

   Deliberately NOT firing navigator.share() at the same time as opening
   this: a share sheet is an OS window that covers the whole screen, so
   this card would be hidden behind it and then reappear when it closes,
   which reads as a bug.
   ------------------------------------------------------------------ */
.sheet{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.sheet[hidden]{display:none}

.sheet-scrim{
  position:absolute;
  inset:0;
  background:rgba(2,20,33,.72);
  animation:scrim-in .25s ease-out both;
}
@keyframes scrim-in{from{opacity:0}to{opacity:1}}

.sheet-card{
  position:relative;
  width:min(100%,360px);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  padding:clamp(16px,3dvh,26px) clamp(16px,5vw,24px) clamp(14px,2.6dvh,22px);
  border-radius:var(--radius-card);
  background:var(--cream);
  color:var(--navy-deep);
  text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  animation:sheet-up .32s cubic-bezier(.16,.84,.3,1) both;
}
/* Up from the bottom, landing in the centre. */
@keyframes sheet-up{from{transform:translateY(60vh);opacity:.4}to{transform:translateY(0);opacity:1}}
.sheet.is-going .sheet-card{animation:sheet-down .24s ease-in both}
.sheet.is-going .sheet-scrim{animation:scrim-out .24s ease-in both}
@keyframes sheet-down{from{transform:translateY(0);opacity:1}to{transform:translateY(60vh);opacity:0}}
@keyframes scrim-out{from{opacity:1}to{opacity:0}}

.sheet-x{
  position:absolute;
  top:6px;right:8px;
  width:40px;height:40px;
  border:0;background:transparent;
  color:var(--navy-deep);
  font-size:30px;line-height:1;
  cursor:pointer;
  border-radius:12px;
}
.sheet-x:hover{background:rgba(2,43,67,.08)}

.sheet-card h2{
  margin:0 0 4px;
  font-size:clamp(20px,3dvh,28px);
  color:var(--navy-deep);
}
.sheet-note{
  margin:0 0 clamp(10px,1.8dvh,16px);
  font-size:14px;font-weight:700;
  color:#62666B;
}

.sheet-qr{
  width:min(72vw,232px);
  margin:0 auto clamp(12px,2.2dvh,18px);
  padding:12px;
  background:#FFFFFF;
  border:3px solid var(--navy-deep);
  border-radius:14px;
}
.sheet-qr .qr{display:block;width:100%;height:auto;shape-rendering:crispEdges}

.sheet-go,.sheet-copy{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;
  min-height:58px;
  margin-top:9px;
  padding:10px;
  border-radius:16px;
  font-size:clamp(17px,4.6vw,22px);
  cursor:pointer;
  border:0;
  appearance:none;
}
.sheet-go{color:var(--white);background:var(--orange);box-shadow:0 4px 0 var(--orange-dark)}
.sheet-go[hidden]{display:none}
.sheet-copy{color:var(--navy-deep);background:transparent;border:3px solid var(--navy-deep)}
.sheet-go:active,.sheet-copy:active{transform:translateY(2px)}
.sheet-go:active{box-shadow:none}

.sheet-said{
  margin:10px 0 0;
  font-size:14px;font-weight:700;
  color:var(--orange);
}
.sheet-said[hidden]{display:none}

.sheet-x:focus-visible,.sheet-go:focus-visible,.sheet-copy:focus-visible{
  outline:3px solid var(--orange);outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .sheet-card,.sheet-scrim,.sheet.is-going .sheet-card,.sheet.is-going .sheet-scrim{animation:none}
}

/* ------------------------------------------------------------------
   THE SERVICE SHEETS — what he hauls, what he brings.
   Same container as the share sheet on purpose: the app should only
   ever have one kind of pop-up.
   ------------------------------------------------------------------ */

/* The cards are real buttons now. They already looked like buttons --
   border, fill, label -- and a thing that looks tappable and does
   nothing reads as broken rather than as decoration. */
.service-card{
  font:inherit;
  color:inherit;
  cursor:pointer;
  appearance:none;
  display:block;
}
.service-card:active{transform:translateY(2px)}
.service-card:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.sheet-list{
  margin:0 0 10px;
  padding:0;
  list-style:none;
  text-align:left;
}
.sheet-list li{
  padding:7px 0;
  border-top:1px solid rgba(2,43,67,.14);
  font-size:clamp(14px,3.8vw,16px);
  font-weight:700;
  color:#4A5560;
  line-height:1.3;
}
.sheet-list li:first-child{border-top:0}
.sheet-list b{
  display:block;
  font-family:"HaulDisplay","Arial Narrow",sans-serif;
  font-weight:700;
  font-size:clamp(16px,4.4vw,19px);
  letter-spacing:.3px;
  color:var(--navy-deep);
}

/* The dumpster-rental line is the one thing on here nobody expects, so it
   gets its own box rather than being the fifth item in a list. */
.sheet-star{
  margin:0 0 14px;
  padding:11px 13px;
  border-radius:14px;
  background:rgba(240,90,26,.1);
  border:2px solid var(--orange);
  text-align:left;
}
.sheet-star b{
  display:block;
  font-family:"HaulDisplay","Arial Narrow",sans-serif;
  font-weight:700;
  font-size:clamp(15px,4.2vw,18px);
  color:#B8410D;
  letter-spacing:.2px;
}
.sheet-star span{
  display:block;
  margin-top:3px;
  font-size:clamp(13px,3.5vw,15px);
  font-weight:700;
  color:#4A5560;
  line-height:1.35;
}

/* TEXT and CALL side by side, the same pair as the bottom bar. */
.sheet-acts{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:9px;
}
.sheet-acts .sheet-go,
.sheet-acts .sheet-copy{margin-top:0;text-decoration:none}


/* The one hard limit on what goes in the truck. Sits directly under the
   "if it fits, it can go" line on purpose -- a claim and its exception
   belong together, so nobody reads the promise and misses the limit. */
.sheet-no{
  margin:0 0 13px;
  padding:9px 11px;
  border-radius:11px;
  background:rgba(2,43,67,.06);
  font-size:clamp(12px,3.3vw,14px);
  font-weight:700;
  line-height:1.35;
  color:#5A6672;
  text-align:left;
}
.sheet-no p{margin:0}
.sheet-no p + p{margin-top:6px;padding-top:6px;border-top:1px solid rgba(2,43,67,.12)}
.sheet-no b{color:var(--navy-deep)}


/* ------------------------------------------------------------------
   SAVE TO PHONE.

   The control is a small pill in the top-right corner, over the empty
   corner of the logo badge. It starts hidden and app.js only reveals it
   where the install can actually happen, so it is never a dead button.

   [hidden] is spelled out explicitly on every piece of this. The UA rule
   is [hidden]{display:none} at the lowest priority, and display:flex in a
   class beats it -- this page has shipped that exact bug before.
   ------------------------------------------------------------------ */
.install-btn{
  position:absolute;
  top:0;
  right:0;
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px 10px 6px 8px;
  border:2px solid rgba(255,245,223,.5);
  border-radius:999px;
  background:rgba(2,43,67,.45);
  color:var(--cream);
  font-size:12px;
  letter-spacing:.6px;
  line-height:1;
  cursor:pointer;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.install-btn[hidden]{display:none}
.install-btn img{width:17px;height:17px;flex:0 0 auto}
.install-btn:active{transform:translateY(1px)}
.install-btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (max-width:340px){
  /* On the narrowest phones the logo reaches the corner, so the word goes
     and the icon carries it on its own. */
  .install-btn span{display:none}
  .install-btn{padding:7px}
}

.install-icon{
  width:64px;height:64px;
  margin:0 auto 10px;
  border-radius:15px;
  box-shadow:0 5px 14px rgba(2,43,67,.3);
}
.sheet-card h2.install-title{
  font-size:clamp(19px,4.9vw,24px);
  line-height:1.05;
  margin-bottom:7px;
}

/* iOS cannot be handed an install prompt -- Safari has no such API. All we
   can do there is show the two taps, so they are numbered and the Share
   glyph is drawn inline rather than named, because nobody calls it "Share"
   in their head; they recognise the square with the arrow. */
.install-steps{
  margin:0 0 4px;
  padding:0;
  list-style:none;
  text-align:left;
}
.install-steps[hidden]{display:none}
.install-steps li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 0;
  border-top:1px solid rgba(2,43,67,.14);
  font-size:clamp(14px,3.8vw,16px);
  font-weight:700;
  color:#4A5560;
  line-height:1.35;
}
.install-steps li:first-child{border-top:0}
.install-steps li > b{
  flex:0 0 26px;
  height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--orange);
  color:var(--white);
  font-family:"HaulDisplay","Arial Narrow",sans-serif;
  font-size:16px;
  line-height:1;
}
.install-steps li span b{color:var(--navy-deep)}
.ios-glyph{
  width:19px;height:19px;
  vertical-align:-4px;
  margin:0 1px;
  color:#0A84FF;          /* the blue it actually is in Safari */
}

/* The fallback line, for browsers that can install but never say so. */
.install-generic{
  margin:0 0 4px;
  padding:11px 13px;
  border-radius:13px;
  background:rgba(2,43,67,.06);
  font-size:clamp(13px,3.6vw,15px);
  font-weight:700;
  line-height:1.4;
  color:#4A5560;
  text-align:left;
}
.install-generic[hidden]{display:none}
.install-generic b{color:var(--navy-deep)}

/* A small way out, not a second headline. */
.install-ok{
  display:block;
  margin:14px auto 0;
  min-width:104px;
  min-height:44px;
  padding:9px 26px;
  border:3px solid var(--navy-deep);
  border-radius:14px;
  background:transparent;
  color:var(--navy-deep);
  font-size:18px;
  letter-spacing:.5px;
  cursor:pointer;
  appearance:none;
}
.install-ok:active{transform:translateY(2px)}
.install-ok:focus-visible{outline:3px solid var(--orange);outline-offset:3px}