/* Bundled heading font license:
Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

*/
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/barlow-condensed-bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
/* 60/30/10: warm paper surfaces, charcoal structure, yellow accents. */
    :root{--ink:#10110f;--black:#000;--paper:#f4f3ed;--white:#fff;--accent:#9cc6e8;--accent-hover:#b8d8f0;--muted:#66695f;--soft:#b8bbb1;--line:#d9dacf;--dark-line:#36392f;--panel:#1c1f18;--photo:#e9e8e1;--error:#9f3429;--error-bg:#fff1ed;--overlay:rgba(16,17,15,.48);--shade:rgba(16,17,15,.2);--clear:rgba(16,17,15,0);--focus:#7e6e00;--ease:cubic-bezier(.22,1,.36,1);--page:1440px}
    [hidden]{display:none!important}*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:94px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit}button{color:inherit}button:not(:disabled),summary{cursor:pointer}img{display:block;width:100%}h1,h2,h3,p{margin:0}a{text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:5px}section{scroll-margin-top:0}.wrap{max-width:var(--page);margin:auto;padding:0 5%}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;line-height:1.6}.muted{color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;left:20px;top:-80px;padding:14px;background:var(--accent);z-index:100}.skip:focus{top:12px}.arrow{display:inline-block;font-size:23px;font-weight:400;line-height:1}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:20px 24px;border:1px solid transparent;text-decoration:none;font-size:13px;font-weight:700;min-height:58px;transition:background .2s,color .2s,transform .2s}.btn-accent{background:var(--accent);color:var(--ink)}.btn-accent:hover{background:var(--accent-hover);transform:translateY(-2px)}.btn-dark{background:var(--ink);color:var(--white)}.btn-dark:hover{background:var(--panel)}.text-link{font-size:13px;font-weight:700;display:inline-flex;gap:20px;align-items:center}.section-heading{font-size:clamp(38px,4.5vw,68px);font-weight:800;line-height:.98;letter-spacing:-.055em}.section-label{display:flex;gap:25px;align-items:center;margin-bottom:32px}.section-label .number{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
    /* Navigation: the supplied logo stays intact; CSS hides its outer padding. */
    .site-header{position:sticky;top:0;z-index:30;background:var(--black);color:var(--white);border-bottom:1px solid var(--dark-line)}.header-inner{height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:block;position:relative;width:240px;height:56px;overflow:hidden;flex-shrink:0;background:var(--black)}.brand img{position:absolute;width:110%;height:auto;max-width:none;left:-5%;top:50%;transform:translateY(-50%)}.nav{display:flex;gap:32px;align-items:center}.nav a{font-size:12px;text-decoration:none;color:var(--soft);transition:color .2s}.nav a:hover,.nav a[aria-current]{color:var(--white)}.header-cta{display:flex;gap:26px;align-items:center}.header-phone{font-size:12px;text-decoration:none}.header-cta .btn{padding:13px 18px;min-height:44px;gap:24px}.menu-toggle{display:none;border:1px solid var(--dark-line);background:transparent;padding:10px;color:var(--white);min-height:44px}
    /* Home: the photograph is controlled by one native range input. */
    .hero{background:var(--ink);color:var(--white);position:relative;min-height:650px;height:calc(100svh - 140px);max-height:900px;overflow:hidden}
    .hero .wrap{position:relative;height:100%;min-height:650px;display:flex;align-items:center;pointer-events:none}
    .hero-copy{position:relative;z-index:8;width:60%;padding:58px 0 90px}
    .hero-copy .eyebrow{color:var(--soft);display:flex;align-items:center;gap:12px}
    .small-line{width:24px;height:2px;background:var(--accent);display:inline-block}
    .hero h1{font-size:clamp(54px,6.1vw,88px);font-weight:900;line-height:.98;letter-spacing:-.065em;margin:34px 0 36px}
    .hero h1 span{display:block;white-space:nowrap}
    .hero-actions{pointer-events:auto;width:fit-content}
    .compare{--reveal:100%;position:absolute;inset:0 0 0 28%;overflow:hidden;isolation:isolate;background:var(--panel)}
    .compare-image{position:absolute;inset:0;height:100%;object-fit:cover;object-position:62% center;user-select:none;pointer-events:none}
    .compare .after{clip-path:inset(0 0 0 var(--reveal))}
    .compare-shade{position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,var(--ink) 0%,var(--overlay) 26%,var(--clear) 68%);pointer-events:none}
    .compare-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:5;cursor:ew-resize;touch-action:pan-y}
    .compare-line{position:absolute;left:var(--reveal);top:0;bottom:0;width:1px;background:var(--accent);z-index:3;pointer-events:none}
    .compare-grip{position:absolute;left:clamp(44px,var(--reveal),calc(100% - 44px));top:66%;width:82px;height:44px;border-radius:24px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);color:var(--ink);font-size:11px;z-index:4;pointer-events:none;box-shadow:0 4px 24px var(--overlay)}
    .compare-grip span{font-size:20px}.compare:focus-within .compare-grip{outline:3px solid var(--white);outline-offset:6px}
    .area-strip{background:var(--paper);border-bottom:1px solid var(--line);font-size:11px;line-height:1.8;letter-spacing:.025em}
    .area-strip .wrap{min-height:54px;display:flex;justify-content:center;align-items:center;text-align:center;padding-top:12px;padding-bottom:12px}
    .area-strip strong{font-weight:700}.area-strip .dash{padding:0 14px;color:var(--muted)}
    /* Job photos are reserved spaces, ready for Jack's real photographs. */
    .services{padding:86px 5% 94px}
    .services-intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-bottom:48px}
    .services-intro p{font-size:15px;line-height:1.75;max-width:420px;color:var(--muted)}
    .job-list{border-top:1px solid var(--ink)}.job{border-bottom:1px solid var(--line)}
    .job summary{display:grid;grid-template-columns:170px minmax(0,1fr) 125px 24px;gap:28px;align-items:center;padding:26px 0;list-style:none}
    .job summary::-webkit-details-marker{display:none}
    .job-photo{aspect-ratio:3/2;background:var(--photo);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--muted);position:relative}
    .photo-icon{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
    .job-photo>span{font-size:9px;letter-spacing:.1em;text-transform:uppercase}.job h3{font-size:24px;letter-spacing:-.04em;font-weight:600}
    .job-short{display:block;font-size:13px;line-height:1.6;color:var(--muted);max-width:520px;margin-top:9px}
    .job-price{text-align:right;font-size:32px;letter-spacing:-.055em;font-weight:700;font-variant-numeric:tabular-nums}
    .job-price small{display:block;font-size:10px;line-height:1.7;letter-spacing:0;font-weight:400;color:var(--muted)}
    .job-plus{font-size:23px;font-weight:400;text-align:right;transition:transform .2s}.job[open] .job-plus{transform:rotate(45deg)}
    .job-body{padding:0 52px 27px 198px;display:grid;grid-template-columns:1.6fr 1fr;gap:28px}
    .job-body p{font-size:14px;line-height:1.7;max-width:440px;color:var(--muted)}
    .load{display:grid;grid-template-columns:85px 1fr;align-items:center;gap:16px}
    .load-track{height:28px;border:1px solid var(--ink);padding:3px;position:relative}
    .load-track::after{content:'';position:absolute;left:12px;right:12px;bottom:-6px;height:5px;border-left:8px solid var(--ink);border-right:8px solid var(--ink)}
    .load-fill{display:block;height:100%;background:var(--accent);width:var(--fill)}
    .load-label{font-size:12px;font-weight:700}.load-label small{display:block;color:var(--muted);font-weight:400;margin-top:4px;line-height:1.45}
    .service-bottom{margin-top:30px;display:flex;justify-content:space-between;gap:30px;align-items:center}
    .service-bottom p{max-width:530px;font-size:14px;line-height:1.8;color:var(--muted)}.service-bottom p strong{color:var(--ink);font-weight:600}.service-bottom .pricing-note{max-width:340px;font-size:11px}
    /* Each secondary page has a real address and the same quiet introduction. */
    .page-intro{background:var(--ink);color:var(--white);padding:70px 0 66px}
    .page-intro .section-label{margin-bottom:25px;color:var(--soft)}.page-intro .number{color:var(--accent)}
    .page-title{font-size:clamp(48px,6.5vw,88px);font-weight:900;letter-spacing:-.065em;line-height:1;max-width:900px}
    .page-title span{display:block}.page-intro .intro{max-width:510px;color:var(--soft);font-size:15px;line-height:1.8;margin-top:25px}
    .page-steps{display:flex;gap:28px;margin-top:30px;font-size:11px;color:var(--soft)}.page-steps b{color:var(--accent);margin-right:8px}
    /* The scheduling page shows intake and the future availability region. */
    .schedule{padding:90px 0;background:var(--paper);color:var(--ink);position:relative;border-top:1px solid var(--line)}.schedule-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:9%}.schedule-copy .section-heading{font-size:clamp(38px,4vw,58px)}.schedule-copy>.intro{margin-top:24px;color:var(--muted);font-size:15px;line-height:1.75;max-width:370px}.steps{margin:40px 0}.step{display:grid;grid-template-columns:35px 1fr;gap:16px;padding:21px 0;border-top:1px solid var(--line);max-width:390px}.step:last-child{border-bottom:1px solid var(--line)}.step>span{font-size:11px;color:var(--ink);padding-top:3px}.step h3{font-size:15px;font-weight:600;margin-bottom:5px}.step p{font-size:12px;line-height:1.6;color:var(--muted)}.schedule-contact{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.schedule-contact .text-link{color:var(--ink)}.request-panel{background:var(--white);color:var(--ink);padding:36px;border-top:3px solid var(--accent)}.request-panel h2{font-size:25px;letter-spacing:-.04em;margin:12px 0}.request-note{font-size:12px;line-height:1.65;color:var(--muted);padding:0 0 20px;border-bottom:1px solid var(--line);margin-bottom:24px}.request-note a{font-weight:700}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{margin-bottom:20px}.field label{display:block;font-size:11px;font-weight:700;margin-bottom:8px}.field input,.field select,.field textarea{width:100%;min-width:0;border:0;border-bottom:1px solid var(--line);padding:12px 0;background:transparent;color:var(--ink);border-radius:0;font-size:13px;min-height:44px}.field textarea{resize:vertical;min-height:70px}.field input::placeholder,.field textarea::placeholder{color:var(--muted)}.field select{padding-right:24px}.field .hint{font-size:10px;line-height:1.5;color:var(--muted);margin-top:7px}.book fieldset{padding:0;margin:0;border:0;min-width:0}.book fieldset:disabled{opacity:.65}.book button{width:100%;border:0}.book button:disabled{cursor:not-allowed;background:var(--line);color:var(--muted)}.form-foot{font-size:10px;line-height:1.6;color:var(--muted);text-align:center;margin-top:12px}.err{background:var(--error-bg);color:var(--error);padding:14px;font-size:13px;line-height:1.6;margin-bottom:20px;border-left:3px solid var(--error)}.done p{font-size:14px;line-height:1.8}.done .big{font-size:25px;font-weight:700;margin-bottom:15px}.photo-followup{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}.photo-followup h4{font-size:21px;letter-spacing:-.03em;margin:0 0 10px}.photo-followup p{font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:18px}.photo-followup .btn{width:100%}.privacy-note{font-size:11px;color:var(--muted);line-height:1.7;margin-top:24px;max-width:360px}
    /* Real work and reviews: never substitute generated scenes for a portfolio. */
    .stories{padding:80px 5% 92px}.stories-top{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}.stories-top>p{font-size:14px;line-height:1.7;color:var(--muted);max-width:310px}.stories-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}.gallery-space{min-height:480px;background:var(--photo);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:45px;color:var(--muted)}
    .gallery-space .photo-icon{width:44px;height:44px}.gallery-space h2{font-size:26px;color:var(--ink);letter-spacing:-.04em;margin:24px 0 12px}.gallery-space p{font-size:13px;line-height:1.75;max-width:320px}
    .social-column{display:grid;grid-template-rows:1.2fr 1fr;gap:24px}.review-panel{border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;align-items:flex-start}.review-panel .eyebrow{color:var(--muted)}.review-panel h2{font-size:30px;letter-spacing:-.04em;line-height:1.1;margin:21px 0 14px}.review-panel p{font-size:13px;line-height:1.7;max-width:335px;color:var(--muted);margin-bottom:22px}.review-panel .text-link{margin-top:auto}.instagram-panel{padding:28px;background:var(--ink);color:var(--white);display:grid;grid-template-columns:1fr 35px;gap:12px;align-content:center}.instagram-panel .eyebrow{color:var(--accent)}.instagram-panel h2{font-size:22px;letter-spacing:-.04em;margin:12px 0}.instagram-panel p{font-size:12px;line-height:1.7;max-width:345px;color:var(--soft)}.instagram-icon{width:25px;height:25px;border:2px solid var(--accent);border-radius:7px;position:relative}.instagram-icon::before{content:'';position:absolute;inset:5px;border:2px solid var(--accent);border-radius:50%}.instagram-icon::after{content:'';position:absolute;right:3px;top:3px;width:3px;height:3px;background:var(--accent);border-radius:50%}.site-footer{padding:44px 0 30px;background:var(--black);color:var(--soft)}.footer-main{display:flex;gap:40px;justify-content:space-between;align-items:center;padding-bottom:30px;border-bottom:1px solid var(--dark-line)}.footer-main .brand{width:285px;height:70px}.footer-area{font-size:12px;line-height:1.9;max-width:360px}.footer-contact{font-size:18px;color:var(--white);text-decoration:none}.footer-bottom{display:flex;gap:24px;justify-content:space-between;font-size:10px;line-height:1.7;padding-top:24px}.footer-bottom a{color:var(--soft)}
    .availability{margin:35px 0 30px;padding:28px;border:1px solid var(--line)}
    .availability-heading{display:flex;align-items:center;gap:14px;margin-bottom:15px}.availability h3{font-size:19px;letter-spacing:-.03em}.availability p{font-size:13px;line-height:1.75;color:var(--muted);max-width:360px}.availability .eyebrow{font-size:9px;margin-top:18px}
    .schedule-contact{margin-top:22px}.schedule-contact+.privacy-note{margin-top:20px}
    .footer-note{font-size:10px;line-height:1.7;color:var(--soft);padding-top:18px}
    @media(max-width:1100px){.header-phone{display:none}.nav{gap:22px}.brand{width:205px}.hero-copy{width:65%}.hero h1{font-size:clamp(46px,6.1vw,67px)}.compare{left:24%}.services-intro{gap:45px}.schedule-grid{gap:5%}.request-panel{padding:28px}.job summary{grid-template-columns:125px minmax(0,1fr) 105px 24px;gap:22px}.job-body{padding-left:147px;grid-template-columns:1fr;gap:20px}.load{max-width:350px}.job h3{font-size:22px}.job-price{font-size:29px}}
    @media(max-width:760px){
      html{scroll-padding-top:74px}.wrap{padding-left:6%;padding-right:6%}.header-inner{height:72px;gap:14px}.brand{width:185px;height:50px}.header-cta{display:none}.menu-toggle{display:block;font-size:12px;padding:10px 15px}.nav{display:none;position:absolute;top:72px;left:0;right:0;padding:22px 6%;background:var(--black);border-bottom:1px solid var(--dark-line);flex-direction:column;align-items:stretch;gap:0}.nav.is-open{display:flex}.nav a{font-size:16px;padding:14px 0}
      .hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;overflow:visible}.hero .wrap{order:0;min-height:0;width:100%;padding-top:38px;padding-bottom:38px}.hero-copy{width:100%;padding:0}.hero-copy .eyebrow{font-size:9px}.hero h1{font-size:clamp(32px,9.8vw,58px);line-height:1.04;margin:27px 0 27px;letter-spacing:-.06em}.hero-actions .btn{padding:17px 20px;min-height:54px;gap:24px}.compare{order:1;position:relative;inset:auto;width:100%;height:350px}.compare-image{object-position:62% center}.compare-shade{display:none}.compare-grip{top:55%}.area-strip{font-size:10px;line-height:1.9}.area-strip .wrap{min-height:76px}.area-strip strong{display:block}.area-strip .dash{display:none}
      .services,.stories{padding:58px 6%}.section-label{margin-bottom:24px}.services-intro{grid-template-columns:1fr;gap:24px;margin-bottom:30px}.section-heading{font-size:42px}.services-intro p{font-size:14px}
      .job summary{grid-template-columns:80px minmax(0,1fr) 18px;gap:12px;padding:25px 0;align-items:start}.job-photo{grid-column:1;grid-row:1 / span 2;aspect-ratio:4/5;gap:8px}.job-photo>span{font-size:7px;letter-spacing:.04em}.job-photo .photo-icon{width:23px;height:23px}.job-info{grid-column:2;grid-row:1}.job h3{font-size:20px;line-height:1.2}.job-short{font-size:12px}.job-short br{display:none}.job-price{grid-column:2 / span 2;grid-row:2;text-align:left;font-size:28px;display:flex;gap:7px;align-items:baseline}.job-price small{display:inline;font-size:10px;margin:0}.job-plus{grid-column:3;grid-row:1}.job-body{padding:0 0 25px 92px;grid-template-columns:1fr;gap:20px}.job-body p{font-size:12px}.load{grid-template-columns:65px 1fr;gap:12px}.load-label small{font-size:10px}.service-bottom{flex-direction:column;align-items:flex-start;gap:16px}
      .page-intro{padding:45px 0}.page-title{font-size:clamp(43px,11vw,65px)}.page-intro .intro{font-size:14px}.page-steps{gap:18px;font-size:10px;flex-wrap:wrap}.schedule{padding:52px 0}.schedule-grid{grid-template-columns:1fr;gap:38px}.schedule-copy .section-heading{font-size:42px}.schedule-copy>.intro{font-size:14px}.steps{margin:30px 0}.step{max-width:none}.request-panel{padding:27px 24px}.availability{margin:28px 0;padding:24px}.schedule-contact{gap:20px}
      .stories-grid{grid-template-columns:1fr;gap:22px}.gallery-space{min-height:320px;padding:32px}.social-column{gap:22px}.review-panel{padding:27px}.footer-main{flex-direction:column;align-items:flex-start;gap:24px}.footer-main .brand{margin-left:-5px;width:265px;height:65px}.footer-bottom{flex-direction:column;gap:10px}.site-footer{padding-top:25px}
    }
    @media(max-width:380px){.brand{width:163px}.form-row{grid-template-columns:1fr;gap:0}.job summary{grid-template-columns:65px minmax(0,1fr) 16px;gap:10px}.job-body{padding-left:75px}.job-photo>span{font-size:6px}.job h3{font-size:18px}.job-price{font-size:26px}.section-heading{font-size:37px}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.btn-accent:hover{transform:none}}

/* Scheduling prototype: visible calendar, required job details, no live booking. */
.booking-intro{padding:52px 0}.booking-intro .page-title{font-size:clamp(44px,5.6vw,76px)}
.booking-section{padding-top:45px;padding-bottom:90px}.preview-notice{display:flex;align-items:center;gap:25px;border-left:3px solid var(--accent);padding:14px 20px;margin-bottom:35px;background:var(--photo)}.preview-notice .eyebrow{white-space:nowrap}.preview-notice p{font-size:12px;line-height:1.7;color:var(--muted);max-width:830px}
.booking-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:5%;align-items:start}.calendar-column{min-width:0}.calendar-panel{background:var(--white);padding:30px;border:1px solid var(--line)}.calendar-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:35px}.calendar-top .eyebrow{font-size:9px;color:var(--muted)}.calendar-top h2{font-size:27px;letter-spacing:-.04em;margin-top:9px}.calendar-zone{font-size:10px;color:var(--muted);white-space:nowrap}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:15px}.calendar-toolbar h3{font-size:19px;letter-spacing:-.025em}.calendar-nav{display:flex;gap:6px}.calendar-nav button{width:38px;height:38px;border:1px solid var(--line);background:var(--white);font-size:24px}.calendar-nav button:hover:not(:disabled){background:var(--paper)}.calendar-nav button:disabled{opacity:.3;cursor:not-allowed}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.calendar-weekdays{font-size:10px;text-align:center;color:var(--muted);margin-bottom:10px}.calendar-weekdays span{padding:7px 0}.calendar-day{position:relative;min-width:0;aspect-ratio:1;background:var(--paper);border:1px solid transparent;font-size:14px;color:var(--muted)}.calendar-day:disabled{opacity:.45;cursor:default}.calendar-day.is-open{color:var(--ink);background:var(--white);border-color:var(--line)}.calendar-day.is-open::after{content:'';position:absolute;width:5px;height:5px;background:var(--accent);border-radius:50%;bottom:8px;left:calc(50% - 2.5px)}.calendar-day.is-selected{background:var(--ink);color:var(--white);border-color:var(--ink)}.calendar-day:not(:disabled):hover{border-color:var(--ink)}.calendar-day[aria-current=date]{text-decoration:underline;text-underline-offset:4px}
.calendar-legend{display:flex;gap:21px;flex-wrap:wrap;margin-top:24px;font-size:10px;color:var(--muted)}.calendar-legend span{display:flex;align-items:center;gap:8px}.calendar-legend i{display:inline-block;width:8px;height:8px;border-radius:50%}.legend-open{background:var(--accent)}.legend-unavailable{background:var(--line)}.calendar-note{font-size:11px;line-height:1.8;color:var(--muted);margin-top:20px}
.time-panel{padding:32px 0 0}.time-panel>.eyebrow{color:var(--muted);font-size:9px}.time-panel h2{font-size:24px;letter-spacing:-.04em;margin:12px 0}.time-status{font-size:12px;line-height:1.75;color:var(--muted)}.time-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.time-option{border:1px solid var(--line);background:var(--white);font-size:13px;min-height:54px;padding:12px}.time-option:disabled{color:var(--muted);background:var(--paper);cursor:not-allowed}.time-option[aria-pressed=true]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.calendar-gate{display:flex;gap:17px;padding:22px;border-top:1px solid var(--line);margin-top:24px}.gate-icon{font-size:27px}.calendar-gate h3{font-size:15px;margin-bottom:9px}.calendar-gate p{font-size:12px;line-height:1.8;color:var(--muted)}.calendar-gate .text-link{margin-top:15px;font-size:12px}.selection-summary{font-size:13px;line-height:1.8;padding:18px 20px;background:var(--photo);border-left:3px solid var(--accent);margin-top:22px}
.job-details{scroll-margin-top:110px}.booking-form fieldset{border:0;margin:0;padding:0;min-width:0}.booking-form fieldset:disabled{opacity:.65}.booking-form .field input[type=file]{font-size:11px;line-height:1.8;padding:16px 12px;border:1px dashed var(--line);background:var(--paper)}.booking-form input[type=file]::file-selector-button{background:var(--ink);color:var(--white);font:inherit;font-weight:700;border:0;padding:10px 12px;margin:0 10px 5px 0;cursor:pointer}.photo-status{font-size:11px;color:var(--muted);line-height:1.65;margin-top:10px}.photo-status.is-error{color:var(--error)}.photo-previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.photo-previews img{width:66px;height:66px;object-fit:cover;background:var(--photo)}.clear-photos{padding:10px 0;border:0;background:transparent;font-size:11px;text-decoration:underline;text-underline-offset:4px}.job-readiness{font-size:12px;line-height:1.7;border-left:2px solid var(--line);padding:4px 0 4px 14px;color:var(--muted);margin:22px 0}.job-readiness.is-ready{border-color:var(--accent);color:var(--ink)}.contact-details{border-top:1px solid var(--line);padding-top:24px;margin-top:28px}.contact-details h3{font-size:16px;letter-spacing:-.025em;margin-bottom:22px}.booking-form button[type=submit]{width:100%}.booking-form button:disabled{cursor:not-allowed}.booking-form button[type=submit]:disabled{background:var(--line);color:var(--muted);transform:none}.booking-contact{border-top:1px solid var(--line);padding-top:24px;margin-top:28px;font-size:11px;line-height:1.8;color:var(--muted)}.booking-contact a{color:var(--ink)}
.preview-result{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}.preview-result h3{font-size:23px;letter-spacing:-.04em;margin:12px 0 20px}.preview-result dl{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;font-size:12px;line-height:1.7;margin:0 0 20px}.preview-result dt{color:var(--muted)}.preview-result dd{margin:0;overflow-wrap:anywhere}.preview-result-note{font-size:12px;line-height:1.8;color:var(--muted);margin-bottom:18px}.preview-result .btn{width:100%;font-size:12px;gap:16px}
@media(max-width:1000px){.booking-layout{gap:3%;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.calendar-panel{padding:23px}.job-details{padding:25px}.calendar-top{align-items:flex-start;flex-direction:column;gap:12px}.calendar-day{font-size:12px}.time-option{font-size:12px}.calendar-day.is-open::after{bottom:4px}}
@media(max-width:760px){.booking-intro{padding:40px 0}.booking-intro .page-title{font-size:43px}.booking-section{padding-top:26px;padding-bottom:60px}.preview-notice{align-items:flex-start;flex-direction:column;gap:7px;padding:15px 17px;margin-bottom:26px}.preview-notice p{font-size:11px}.booking-layout{grid-template-columns:1fr;gap:35px}.calendar-panel{padding:24px 20px}.calendar-top{flex-direction:row;align-items:center;margin-bottom:28px}.calendar-top h2{font-size:25px}.calendar-top .eyebrow{font-size:8px}.calendar-zone{font-size:9px}.calendar-toolbar h3{font-size:18px}.calendar-day{font-size:13px}.calendar-day.is-open::after{bottom:5px}.calendar-days,.calendar-weekdays{gap:4px}.calendar-gate{padding:22px 0}.job-details{scroll-margin-top:90px}.time-panel{padding-top:26px}.photo-previews img{width:55px;height:55px}}
@media(max-width:380px){.calendar-panel{padding:22px 14px}.calendar-zone{display:none}.calendar-day.is-open::after{bottom:3px;width:4px;height:4px}.calendar-toolbar h3{font-size:17px}.calendar-nav button{width:34px;height:34px}.calendar-legend{gap:12px;font-size:9px}.time-options{grid-template-columns:1fr}.job-details{padding:24px 20px}}

/* A modest work-truck/sign-shop direction: sturdy headings, plain readable labels. */
h1,h2,h3,.hero h1,.page-title,.section-heading,.job h3{font-family:"Barlow Condensed",Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:.005em}
.hero h1{font-size:clamp(62px,6.6vw,98px);line-height:1.02}.eyebrow{letter-spacing:.075em}.section-label .number{display:none}.nav a{font-size:14px}.btn{font-size:14px}.hero-copy .eyebrow{font-size:12px;letter-spacing:.07em}.job h3{font-size:28px}.job-short{font-size:14px;line-height:1.7}.services-intro p{font-size:16px}.section-label{gap:16px}.calendar-top h2{font-size:31px}.calendar-toolbar h3{font-size:24px}.time-panel h2{font-size:28px}.request-panel h2{font-size:32px}.field label{font-size:12px}.preview-result h3{font-size:28px}
@media(max-width:1100px){.nav{gap:20px}.hero h1{font-size:clamp(50px,6.5vw,72px)}}
@media(max-width:760px){.hero h1{font-size:clamp(38px,11vw,63px);line-height:1.05}.hero-copy .eyebrow{font-size:10px}.nav a{font-size:17px}.job h3{font-size:24px}.job-short{font-size:12px}.services-intro p{font-size:14px}.calendar-toolbar h3{font-size:23px}.calendar-top h2{font-size:29px}}
@media(max-width:380px){.job h3{font-size:22px}.calendar-toolbar h3{font-size:21px}}

.booking-jump{margin-top:18px;font-size:13px}#arrival-times,#job-contact{scroll-margin-top:100px}

/* Quiet paper depth and strong, practical lettering. */
:root{--shadow-soft:0 18px 48px rgba(16,17,15,.07);--shadow-raised:0 12px 26px rgba(16,17,15,.16);--paper-edge:#e5e3d9}
.site-header{box-shadow:0 4px 18px rgba(0,0,0,.1)}
.services{background:linear-gradient(180deg,var(--paper),var(--white));box-shadow:inset 0 1px 0 var(--white)}
.job{transition:background .2s}.job[open]{background:var(--paper)}.job-photo{box-shadow:inset 0 1px 5px rgba(16,17,15,.04)}
.review-panel,.gallery-space{box-shadow:var(--shadow-soft)}.review-panel{background:var(--white)}.instagram-panel{box-shadow:var(--shadow-raised)}
.booking-flow-header{background:var(--ink);color:var(--white)}
.booking-steps{list-style:none;margin:0;padding:30px 0;display:flex;justify-content:center;gap:72px}
.booking-steps li{display:flex;align-items:center;gap:12px;color:var(--soft);font-size:15px}
.booking-steps b{font-family:"Barlow Condensed",Arial,sans-serif;font-size:27px;color:var(--soft)}
.booking-steps li[aria-current]{color:var(--white)}.booking-steps li[aria-current] b{color:var(--accent)}
.booking-landing{padding-top:48px;padding-bottom:35px}
.calendar-hero{position:relative;isolation:isolate;overflow:hidden;min-height:540px;background:var(--photo);border:1px solid var(--paper-edge);box-shadow:var(--shadow-soft)}
.calendar-backdrop{position:absolute;inset:30px 40px 0;pointer-events:none;user-select:none;transform:rotate(-3deg) scale(1.04);filter:blur(.4px);opacity:.7;background:var(--white);box-shadow:var(--shadow-soft);padding:25px}
.backdrop-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0 25px;font-size:12px;color:var(--muted)}.backdrop-top strong{font:700 29px "Barlow Condensed",Arial,sans-serif;color:var(--ink)}
.backdrop-weekdays,.backdrop-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.backdrop-weekdays{font-size:10px;text-align:center;padding-bottom:12px;color:var(--muted)}
.backdrop-day{min-height:87px;border:1px solid var(--paper);padding:9px;font-size:12px;color:var(--muted)}
.backdrop-day i{display:block;margin-top:6px;padding:5px 6px;background:var(--photo);font-style:normal;font-size:9px;color:var(--ink);white-space:nowrap;overflow:hidden}
.backdrop-day.has-window{box-shadow:inset 3px 0 var(--accent)}
.calendar-hero::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 50%,rgba(244,243,237,.96) 7%,rgba(244,243,237,.88) 30%,rgba(244,243,237,.12) 80%);pointer-events:none}
.calendar-hero-action{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:25px}
.send-photo-hero{background:var(--accent);border:0;padding:23px 35px;font:700 clamp(42px,5vw,68px)/1.1 "Barlow Condensed",Arial,sans-serif;display:flex;align-items:center;gap:56px;box-shadow:var(--shadow-raised);transition:box-shadow .2s,background .2s}
.send-photo-hero:hover{background:var(--accent-hover);box-shadow:0 18px 34px rgba(16,17,15,.2)}.send-photo-hero span{font:400 44px/1 Arial,sans-serif}.send-photo-hero:disabled{opacity:.65}
.calendar-hero-caption{position:absolute;z-index:2;bottom:24px;width:100%;text-align:center;padding:0 20px;font-size:12px;color:var(--muted);pointer-events:none}
.booking-step-view{padding-top:36px;padding-bottom:54px;scroll-margin-top:86px;min-height:560px}
.flow-back{padding:10px 0;border:0;background:transparent;color:var(--muted);font-size:13px;margin-bottom:28px;min-height:44px}
.flow-back:hover{color:var(--ink)}.flow-heading{font-size:clamp(40px,5vw,66px);line-height:1.03;margin:14px 0 22px}.flow-heading:focus{outline:none}
.intake-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr);gap:10%;align-items:start}
.intake-intro{padding-top:26px}.intake-intro>p:not(.eyebrow){font-size:16px;line-height:1.65;max-width:310px;color:var(--muted)}.intake-intro .intake-assurance{margin-top:38px;padding-top:25px;border-top:1px solid var(--line);font-size:13px!important}
.booking-form.request-panel{box-shadow:var(--shadow-soft);padding:35px}
.booking-form .field input,.booking-form .field select,.booking-form .field textarea{font-size:16px}
.booking-form .field label{font-size:13px}.booking-form .field .hint{font-size:11px}
.booking-form .photo-field{margin-bottom:26px}.booking-form .job-readiness{font-size:12px;margin:12px 0 22px}
.booking-form .form-foot{font-size:11px}.booking-form .btn{min-height:58px}
.time-step-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:35px}.time-step-heading>p{font-size:14px;line-height:1.7;max-width:320px;color:var(--muted);padding-bottom:23px}
.calendar-panel{box-shadow:var(--shadow-soft)}.calendar-top h3{font-size:27px}
.time-request-panel{padding:28px;background:var(--white);box-shadow:var(--shadow-soft);border-top:3px solid var(--accent)}
.time-request-panel h3{font-size:30px;margin:12px 0 15px}.time-request-panel>.btn{width:100%;margin-top:30px}.time-request-panel>.btn:disabled{background:var(--line);color:var(--muted);transform:none;cursor:not-allowed}
.approval-note{font-size:12px;line-height:1.6;color:var(--muted);padding-top:24px;margin-top:22px;border-top:1px solid var(--line)}
.request-review{max-width:720px;margin:0 auto;background:var(--white);border-top:4px solid var(--accent);box-shadow:var(--shadow-soft);padding:40px}.request-review .flow-heading{font-size:48px}
.request-review dl{display:grid;grid-template-columns:125px minmax(0,1fr);gap:15px;font-size:14px;line-height:1.65;margin:28px 0}.request-review dt{color:var(--muted)}.request-review dd{margin:0;overflow-wrap:anywhere}
.approval-explainer{border-top:1px solid var(--line);padding-top:25px}.approval-explainer h3{font-size:25px;margin-bottom:10px}.approval-explainer p{font-size:13px;line-height:1.75;color:var(--muted)}
.flow-preview-note{padding-bottom:35px}.flow-preview-note p{font-size:11px;color:var(--muted);text-align:center;line-height:1.7}
@media(max-width:1000px){.intake-layout{gap:5%;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.booking-form.request-panel{padding:28px}.calendar-backdrop{inset:30px 20px 0;padding:20px}.backdrop-day i{font-size:7px;padding:5px 3px}.booking-steps{gap:48px}}
@media(max-width:760px){
 .booking-steps{padding:24px 0;gap:0;justify-content:space-between}.booking-steps li{gap:7px;font-size:12px}.booking-steps b{font-size:22px}
 .booking-landing{padding-top:25px;padding-bottom:25px}.calendar-hero{min-height:460px}.calendar-backdrop{width:600px;inset:20px auto 0;left:50%;transform:translateX(-50%) rotate(-4deg);padding:18px}.backdrop-day{min-height:76px}.backdrop-top{font-size:10px}.backdrop-top strong{font-size:25px}.backdrop-day i{font-size:7px}.send-photo-hero{font-size:44px;gap:30px;padding:22px 26px}.send-photo-hero span{font-size:33px}.calendar-hero-caption{bottom:24px;font-size:11px;line-height:1.6;max-width:280px;left:50%;transform:translateX(-50%)}
 .booking-step-view{padding-top:20px;padding-bottom:30px;scroll-margin-top:72px}.flow-back{margin-bottom:15px}.intake-layout{grid-template-columns:1fr;gap:28px}.intake-intro{padding-top:0}.flow-heading{font-size:43px;margin:12px 0 15px}.intake-intro .flow-heading br{display:none}.intake-intro>p:not(.eyebrow){font-size:14px;max-width:360px}.intake-intro .intake-assurance{display:none}.booking-form.request-panel{padding:25px 22px}
 .time-step-heading{display:block;margin-bottom:25px}.time-step-heading>p{padding:0;font-size:13px;max-width:350px}.time-request-panel{padding:24px}.request-review{padding:28px 23px}.request-review .flow-heading{font-size:39px}.request-review dl{grid-template-columns:95px minmax(0,1fr);gap:13px;font-size:12px}.flow-preview-note{padding-bottom:25px}
}
@media(max-width:380px){.booking-steps li{font-size:10px;gap:5px}.booking-steps b{font-size:20px}.send-photo-hero{font-size:38px;gap:22px;padding:20px 22px}.calendar-hero{min-height:415px}}
@media(prefers-reduced-motion:reduce){.send-photo-hero,.job{transition:none}}

/* Fewer words at the service intro; a paper receipt at the end of the demo. */
.services-intro{display:block;margin-bottom:36px}
.selection-followup{border-top:1px solid var(--line);padding-top:12px;margin-top:12px;color:var(--muted);font-size:12px;line-height:1.7}
.request-review.receipt{max-width:620px;padding:0 38px 34px;border-top:0;position:relative}
.receipt-demo{margin:0 -38px;padding:12px 20px;text-align:center;background:var(--accent);font-size:12px;font-weight:700;line-height:1.5}
.receipt-header{text-align:center;padding:30px 0 25px;border-bottom:2px dashed var(--line)}
.receipt-brand{font-family:"Barlow Condensed",Arial,sans-serif;font-weight:700;font-size:25px;text-transform:uppercase;letter-spacing:.04em}.receipt-header .eyebrow{font-size:10px;color:var(--muted);margin-top:8px}.receipt .flow-heading{font-size:45px;margin:18px 0 0}
.receipt dl{grid-template-columns:115px minmax(0,1fr);gap:12px;font-size:13px;line-height:1.6;margin:25px 0}.receipt dd{text-align:right}.receipt dt,.receipt dd{padding-bottom:8px;border-bottom:1px dotted var(--line)}
.receipt-estimate{padding:22px 0;border-top:2px dashed var(--line);border-bottom:2px dashed var(--line)}.receipt-estimate-line{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.receipt-estimate-line h3{font-family:Arial,Helvetica,sans-serif;font-size:13px;letter-spacing:0}.receipt-estimate-line>p{font-family:"Barlow Condensed",Arial,sans-serif;font-size:38px;font-weight:700;line-height:1.1;text-align:right;font-variant-numeric:tabular-nums}.receipt-estimate-note{font-size:11px;line-height:1.6;color:var(--muted);margin-top:10px}
.receipt .approval-explainer{border:0;padding-top:25px}.receipt .approval-explainer h3{font-size:28px}.receipt .approval-explainer>p{font-size:14px;line-height:1.7}.receipt .approval-explainer .receipt-pending{font-size:11px;margin-top:16px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.receipt::after{content:"";position:absolute;bottom:-8px;left:0;width:100%;height:9px;background:linear-gradient(135deg,var(--white) 25%,transparent 25%) -8px 0,linear-gradient(225deg,var(--white) 25%,transparent 25%) -8px 0;background-size:16px 16px;background-repeat:repeat-x}
@media(max-width:760px){.services-intro{margin-bottom:28px}.request-review.receipt{padding:0 24px 28px}.receipt-demo{margin:0 -24px;font-size:11px}.receipt .flow-heading{font-size:39px}.receipt-header{padding:25px 0 22px}.receipt dl{grid-template-columns:90px minmax(0,1fr);gap:9px;font-size:12px}.receipt-estimate-line{gap:15px}.receipt-estimate-line>p{font-size:33px}.receipt-estimate-line h3{font-size:12px}}
@media(max-width:380px){.request-review.receipt{padding-left:18px;padding-right:18px}.receipt-demo{margin-left:-18px;margin-right:-18px}.receipt .flow-heading{font-size:35px}.receipt-estimate-line>p{font-size:28px}.receipt dl{grid-template-columns:80px minmax(0,1fr)}}

/* Working calendar and separate owner workspace. */
.schedule-overview-heading,.owner-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}.schedule-overview-heading .flow-heading,.owner-heading .flow-heading{margin:5px 0 0}.public-calendar{padding:30px 36px}.public-calendar .calendar-toolbar h3{font-size:36px}.public-calendar .calendar-zone{margin-top:5px}.overview-days{gap:0}.overview-day{min-height:105px;padding:15px;border:1px solid var(--paper);display:flex;flex-direction:column;gap:18px;background:var(--white);font-size:18px}.overview-day small{font-size:10px;color:var(--muted);overflow-wrap:anywhere}.overview-day.is-past{background:var(--paper);color:var(--muted)}.overview-day.is-working{box-shadow:inset 0 4px var(--accent)}.overview-day[aria-current=date]>span{font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:6px}.public-calendar .calendar-note{border-top:1px solid var(--line);padding-top:20px}.owner-main{padding-top:44px;padding-bottom:80px;max-width:1150px}.owner-site-link{color:var(--white);font-size:13px}.owner-connection{background:var(--photo);border-left:4px solid var(--accent);padding:18px 22px;font-size:14px;line-height:1.6;margin-bottom:32px}.owner-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:28px;gap:24px}.owner-tabs button{padding:15px 4px;background:none;border:0;border-bottom:4px solid transparent;font-size:16px;color:var(--muted)}.owner-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent);font-weight:700}.owner-section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px}.owner-section-heading h2{font-size:36px}.owner-section-heading p{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.6}.owner-week-nav{display:flex;align-items:flex-end;gap:16px;margin-bottom:25px}.owner-week-nav label{display:flex;flex-direction:column;gap:8px;font-size:12px}.owner-week-nav input{font:inherit;padding:13px;border:1px solid var(--line);background:var(--white);color:var(--ink)}.owner-week-nav .btn{min-height:44px}.owner-day{min-width:0;border:0;border-bottom:1px solid var(--line);padding:20px 24px 24px;background:var(--white)}.owner-day legend{float:left;width:100%;font:700 25px "Barlow Condensed",Arial,sans-serif;margin-bottom:15px}.owner-day-actions{clear:both;display:flex;gap:24px}.owner-day-actions .flow-back{margin:8px 0 0}.owner-windows{clear:both}.owner-window{display:flex;align-items:center;gap:14px;padding:0 0 12px}.owner-window input{min-width:0;padding:10px 12px;border:1px solid var(--line);background:var(--paper);font:inherit;color:var(--ink)}.owner-window .flow-back{margin:0 0 0 auto}.owner-window span{color:var(--muted);font-size:12px}.owner-save-row{display:flex;gap:24px;align-items:center;margin-top:26px}.owner-save-row p{font-size:13px;color:var(--muted);line-height:1.6}.owner-requests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}.owner-request{padding:28px;background:var(--white);border-top:4px solid var(--accent);box-shadow:var(--shadow-soft)}.owner-request h3{font-size:30px;margin:12px 0 20px}.owner-request dl{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;font-size:13px;line-height:1.7}.owner-request dt{color:var(--muted)}.owner-request dd{overflow-wrap:anywhere;margin:0}.owner-request .calendar-note{font-size:12px}.owner-main button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){.schedule-overview-heading,.owner-heading{align-items:stretch;flex-direction:column;gap:18px}.schedule-overview-heading .btn{align-self:flex-end}.schedule-overview-heading .flow-heading{font-size:44px}.public-calendar{padding:22px 14px}.public-calendar .calendar-toolbar h3{font-size:29px}.overview-day{padding:10px 5px;min-height:76px;font-size:14px;gap:13px}.overview-day small{font-size:8px;line-height:1.3}.owner-main{padding-top:28px}.owner-heading .btn{width:100%}.owner-section-heading{align-items:flex-start}.owner-section-heading h2{font-size:30px}.owner-day{padding:18px 16px}.owner-window{gap:8px;flex-wrap:wrap}.owner-window input{max-width:115px;padding:10px 6px;font-size:13px}.owner-window .flow-back{font-size:11px}.owner-day-actions{gap:16px;font-size:12px}.owner-save-row{align-items:stretch;flex-direction:column;gap:14px}.owner-requests{grid-template-columns:1fr}.owner-week-nav{gap:10px}.owner-week-nav .btn{padding:13px}.owner-site-link{font-size:11px}}

/* Example jobs are direct booking links: one click carries the selected category. */
.job-link{display:grid;grid-template-columns:170px minmax(0,1fr) 120px 144px;align-items:center;gap:28px;padding:26px 0;color:var(--ink);text-decoration:none}.job-schedule{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--accent);padding:16px 14px;font-size:12px;font-weight:700;white-space:nowrap}.job-link:hover .job-schedule{background:var(--accent-hover)}.job-link:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.job-link:focus-visible .job-schedule{background:var(--accent-hover)}
@media(max-width:1100px){.job-link{grid-template-columns:125px minmax(0,1fr) 95px 132px;gap:20px}.job-schedule{padding:14px 12px;gap:10px;font-size:11px}}
@media(max-width:760px){.job-link{grid-template-columns:80px minmax(0,1fr);align-items:start;gap:12px;padding:25px 0}.job-link .job-photo{grid-column:1;grid-row:1 / span 3}.job-link .job-info{grid-column:2;grid-row:1}.job-link .job-price{grid-column:2;grid-row:2;flex-wrap:wrap}.job-schedule{grid-column:2;grid-row:3;justify-self:start;font-size:12px;min-height:44px;padding:12px 16px;gap:20px}}
@media(max-width:380px){.job-link{grid-template-columns:65px minmax(0,1fr);gap:10px}}

/* Steps inside the hero, in place of the old sentence. Same look as the schedule
   page's step bar (.booking-steps), just left-aligned and without the bar's padding.
   "Send photo" links straight to the photo form. */
.hero2-steps{justify-content:flex-start;padding:0;margin:0 0 32px;gap:34px;flex-wrap:wrap}
.hero2-steps a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.hero2-steps a:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:760px){.hero2-steps{justify-content:space-between;gap:10px;margin-bottom:26px}}

/* Button shadows. Two layers: a tight, darker one right under the edge (contact
   shadow) and a wide, soft one further down (ambient shadow). Together they read as
   a real object lifting off the page. Hover lifts it a little higher. On black
   backgrounds a dark shadow disappears, so yellow buttons there get a faint glow. */
:root{
  --btn-shadow:0 1px 2px rgba(16,17,15,.22),0 6px 16px rgba(16,17,15,.16);
  --btn-shadow-hover:0 2px 4px rgba(16,17,15,.22),0 12px 26px rgba(16,17,15,.22);
  --btn-glow:0 1px 2px rgba(0,0,0,.6),0 8px 26px rgba(156,198,232,.22);
  --btn-glow-hover:0 2px 4px rgba(0,0,0,.6),0 12px 34px rgba(156,198,232,.34);
}
.btn,.job-schedule,.send-photo-hero{box-shadow:var(--btn-shadow);transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.btn:hover,.job-link:hover .job-schedule,.send-photo-hero:hover{box-shadow:var(--btn-shadow-hover)}
.site-header .btn-accent,.hero .btn-accent{box-shadow:var(--btn-glow)}
.site-header .btn-accent:hover,.hero .btn-accent:hover{box-shadow:var(--btn-glow-hover)}
.btn:active,.send-photo-hero:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(16,17,15,.25)}
@media(prefers-reduced-motion:reduce){.btn,.job-schedule,.send-photo-hero{transition:none}}

/* ---------------------------------------------------------------------------
   Hero, "Framed" direction (chosen 18 Sep 2026).
   Words on the left; the before/after swipe in its own rounded frame on the right.
   New class names (hero2, ba-*) so the old .hero/.compare rules above can't leak in.
   ------------------------------------------------------------------------- */
.hero2{background:var(--black);color:var(--white)}
.hero2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center;padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(40px,6vw,88px)}
.hero2-kicker{display:flex;align-items:center;gap:12px;margin:0 0 20px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.hero2-kicker::before{content:"";width:28px;height:2px;background:var(--accent)}
.hero2 h1{font-family:"Barlow Condensed",Arial,Helvetica,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(54px,6.6vw,100px);line-height:.9;letter-spacing:.005em;margin:0 0 22px;text-wrap:balance}
.hero2 h1 span{display:block;color:var(--accent)}
.hero2-lede{font-size:18px;line-height:1.55;color:var(--soft);max-width:34ch;margin:0 0 30px}
.hero2-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.hero2-call{color:var(--white);text-decoration:none;font-weight:700;font-size:16px;line-height:1.3}
.hero2-call small{display:block;font-weight:400;font-size:12px;color:var(--soft)}
.hero2-call:hover{color:var(--accent)}
.hero2 .btn-accent{box-shadow:var(--btn-glow)}
.hero2 .btn-accent:hover{box-shadow:var(--btn-glow-hover)}

.ba-frame{border-radius:14px;overflow:hidden;aspect-ratio:5/4;max-width:100%;box-shadow:0 0 0 1px var(--dark-line),0 30px 60px rgba(0,0,0,.55)}
.ba{--reveal:100%;position:relative;width:100%;height:100%;overflow:hidden;background:var(--panel)}
.ba-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% center;user-select:none;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 var(--reveal))}
.ba-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:5;cursor:ew-resize;touch-action:pan-y}
.ba-line{position:absolute;left:var(--reveal);top:0;bottom:0;width:2px;transform:translateX(-1px);background:var(--accent);z-index:3;pointer-events:none}
.ba-grip{position:absolute;left:clamp(44px,var(--reveal),calc(100% - 44px));top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;padding:0 14px;height:42px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:11px;font-weight:700;z-index:4;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.ba-grip span{font-size:18px}
.ba:focus-within .ba-grip{outline:3px solid var(--white);outline-offset:4px}

@media(max-width:900px){
  .hero2-grid{grid-template-columns:1fr;padding-top:36px;padding-bottom:40px}
  .ba-frame{aspect-ratio:4/3}
  .hero2 h1{font-size:clamp(46px,13vw,76px)}
  .hero2-lede{font-size:16px;margin-bottom:24px}
}

/* Header: bigger, brighter menu so it reads as designed, not leftover. */
.nav a{font-size:14px;font-weight:500;color:rgba(255,255,255,.7)}
.nav a:hover,.nav a[aria-current]{color:var(--white)}
.nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px}
.header-phone{font-size:14px;font-weight:700}
.header-phone:hover{color:var(--accent)}
@media(max-width:760px){.nav a{font-size:17px}.nav a[aria-current]{text-decoration:none;color:var(--accent)}}
@media(max-width:380px){.hero2-kicker{font-size:10.5px;letter-spacing:.08em;gap:10px}.hero2-kicker::before{width:20px}}


/* White button: the hero's main action. White instead of yellow so the page isn't
   carrying yellow everywhere; yellow stays for the headline, step 01 and the header. */
.btn-white{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.6),0 10px 28px rgba(255,255,255,.10)}
.btn-white:hover{background:var(--paper);transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.6),0 14px 34px rgba(255,255,255,.16)}
.btn-white:active{transform:translateY(1px)}

/* Tighter gap between sections: less space above "Example jobs and pricing". */
.services{padding-top:48px}
.section-label{margin-bottom:18px}
@media(max-width:760px){.services{padding-top:34px}.section-label{margin-bottom:14px}}

/* Smaller hero button. */
.hero2-ctas .btn{min-height:46px;padding:13px 18px;gap:18px;font-size:13px}

/* Worn headline with dark spots. The worn-texture MASK (headline-distress.png) sits on
   the wrapper .hero2-title, so its tiny holes cut through the letters and the spots
   together and show the real wall (that's the gritty speckle). The letters are solid
   ink. The dark spots (flecks-dark.png) sit ON TOP (.hero2-title::after), so they
   splatter across the letters, the blue bar and the wall around them. */
.hero2-title{position:relative;isolation:isolate;width:fit-content;margin:0 0 30px;
  -webkit-mask:url('assets/headline-distress.png') center/100% 100% no-repeat;
          mask:url('assets/headline-distress.png') center/100% 100% no-repeat}
.hero2-title h1,.hero2-title h1 span{color:var(--ink)}
.hero2-title h1{position:relative;width:fit-content;margin:0}
.hero2-title::after{content:"";position:absolute;inset:0;z-index:1;
  background:url('assets/flecks-dark.png') center/100% 100% no-repeat;pointer-events:none}
@media(max-width:900px){.hero2-title{margin-bottom:24px}}

/* Dashes between the three steps: 01 Send photo — 02 Choose time — 03 Get quote */
.hero2-steps{gap:16px}
.hero2-steps li:not(:last-child)::after{content:"";display:inline-block;width:26px;height:1px;background:var(--soft);opacity:.6;margin-left:16px}
@media(max-width:760px){.hero2-steps{gap:6px}.hero2-steps li:not(:last-child)::after{width:10px;margin-left:6px}}
@media(max-width:380px){.hero2-steps li:not(:last-child)::after{width:6px;margin-left:4px}}

/* The logo image has a solid black background; "screen" blending drops the black so
   the concrete in the footer shows around the letters instead of a black box. */
.brand{background:transparent}
.brand img{mix-blend-mode:screen}

/* ---------------------------------------------------------------------------
   Loop design laws, applied to Hardline (24 Sep 2026).
   ------------------------------------------------------------------------- */
/* THE 16PX INPUT LAW: any text-type field under 16px makes iPhone zoom the page when
   tapped. The customer booking fields were already 16px; these were Jack's owner-page
   fields (the week picker and the work-hours boxes). */
.owner-week-nav input,.owner-window input{font-size:16px}

/* ONE PRIMARY BUTTON PER SCREEN; CHROME WHISPERS. On the home page the hero button is
   the single filled button. The header's Schedule button goes quiet (outlined), and
   the four job buttons are outlined in ink and only fill with yellow on hover/tap, so
   yellow reads as feedback instead of wallpaper. */
.header-cta .btn-accent{background:transparent;color:var(--white);box-shadow:none;border:1px solid rgba(255,255,255,.4)}
.header-cta .btn-accent:hover{background:transparent;border-color:var(--white);transform:none;box-shadow:none}
.job-schedule{background:transparent;color:var(--ink);box-shadow:none;border:1px solid var(--ink)}
.job-link:hover .job-schedule,.job-link:focus-visible .job-schedule{background:var(--accent);border-color:var(--accent);box-shadow:none}

/* THE PRESS SPRING on the primary button: a quick squeeze that springs back.
   Reduced motion: no scale at all, just a brief dim. */
.hero2-ctas .btn{transition:transform .42s cubic-bezier(.2,.9,.3,1.2),background .2s,box-shadow .2s}
.hero2-ctas .btn:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.hero2-ctas .btn{transition:opacity .2s}.hero2-ctas .btn:active{transform:none;opacity:.8}}

/* Job rows: the button column sizes itself to its label ("Submit photo / Schedule now")
   instead of a fixed 144px, which cut the text off on computers and tablets. */
@media(min-width:1101px){.job-link{grid-template-columns:170px minmax(0,1fr) 120px max-content}}
@media(min-width:761px) and (max-width:1100px){.job-link{grid-template-columns:110px minmax(0,1fr) 90px max-content}}

/* ---------------------------------------------------------------------------
   White concrete (24 Sep 2026): hero, footer, schedule step bar and gallery intro sit
   on light concrete; the header stays black.
   LOOP LAW "no accent words on cream": on a light ground the accent survives only as a
   FILL. So yellow never becomes text here: "junk removal." is ink on a yellow
   highlighter bar, the current step number is ink on a yellow chip, and the one
   filled button is ink (a white button would vanish on white).
   ------------------------------------------------------------------------- */
.hero2,.site-footer,.booking-flow-header,.page-intro{color:var(--ink);background-color:#f2f2ef;
  background-image:url('assets/concrete-wall-light.jpg');background-size:cover;background-position:center top}
.booking-flow-header,.site-footer{border-top:1px solid var(--line)}
/* The yellow bar sits behind row two. It is a ::before at z-index:-1 inside the wrapper,
   drawn after the dark spots and before the letters. */
.hero2-title h1 span{position:static}
.hero2-title h1 span::before{content:"";position:absolute;z-index:-1;left:-.06em;right:-.08em;bottom:.02em;height:.5em;background:var(--accent)}
.hero2-kicker{color:var(--muted)}
.hero2 .booking-steps li,.hero2 .booking-steps b,.booking-flow-header .booking-steps li,.booking-flow-header .booking-steps b{color:var(--muted)}
.hero2 .booking-steps li[aria-current],.hero2 .booking-steps li[aria-current] a,.booking-flow-header .booking-steps li[aria-current]{color:var(--ink)}
.hero2 .booking-steps li[aria-current] b,.booking-flow-header .booking-steps li[aria-current] b{color:var(--ink);background:var(--accent);padding:0 .18em}
.hero2-steps a{border-bottom-color:rgba(16,17,15,.35)}
.hero2-steps a:hover{border-color:var(--ink)}
.hero2-steps li:not(:last-child)::after{background:var(--muted)}
.hero2-ctas .btn{background:var(--ink);color:var(--white);box-shadow:var(--btn-shadow)}
.hero2-ctas .btn:hover{background:#262822;box-shadow:var(--btn-shadow-hover)}
.hero2-kicker::before{background:var(--accent)}
.ba-frame{box-shadow:0 0 0 1px rgba(16,17,15,.12),0 24px 50px rgba(16,17,15,.22)}
/* Footer */
.site-footer,.footer-area,.footer-note,.footer-bottom a{color:var(--muted)}
.footer-contact{color:var(--ink)}
.footer-main{border-bottom-color:var(--line)}
.site-footer .brand img{mix-blend-mode:normal}   /* logo shows on its own black badge until the new logo arrives */
/* Gallery page intro */
.page-intro .section-label,.page-intro .intro,.page-intro .eyebrow{color:var(--muted)}
.page-intro .number{color:var(--ink);background:var(--accent);padding:0 .2em}

/* New logo (24 Sep 2026): cropped tight, so it's sized by height and shown whole
   (the old rule enlarged it 110% to trim the old file's empty edges).
   Header: white/blue on its own black, on the black header. Footer: the dark
   version (hardline-logo-dark.png) with a transparent background for light concrete. */
.brand{width:auto;height:62px;background:transparent;overflow:visible}
.brand img{position:static;transform:none;width:auto;height:100%;max-width:none;mix-blend-mode:normal}
.footer-main .brand{width:auto;height:92px;margin-left:0}
@media(max-width:760px){.brand{height:50px}.footer-main .brand{height:78px}}

/* Owner hours: quick "Open all day" / "Day off" buttons on each day.
   Capsules (radius = half the height), 44px tall to be easy to tap. Pressed "open"
   fills with the accent; pressed "day off" fills with ink, and the whole day is
   hatched and its name struck through, so a day off reads at a glance. */
.owner-quick{clear:both;display:flex;flex-wrap:wrap;gap:9px;margin:0 0 16px}
.owner-chip{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:600 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.owner-chip:hover{border-color:var(--ink)}
.owner-chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.owner-chip-open[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.owner-chip-off[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.owner-day.is-off{background:repeating-linear-gradient(135deg,var(--white) 0 12px,var(--paper) 12px 24px)}
.owner-day.is-off legend{color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px}

/* Hero photo slot: a blank frame until Jack's real before-and-after photos arrive.
   Same look as the "Photo to come" boxes on the job cards. */
.photo-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:var(--photo);color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:24px}
.photo-slot .photo-icon{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.2}

/* Headline "snap" (snap.js). 24 soft holes (HOLES in snap.js must match) are cut in the wrapper's mask on top of
   the worn texture; all layers INTERSECT, so text shows only where every layer is
   solid. A hole at radius 0 cuts nothing. The wrapper allows horizontal finger drags on phones
   (touch-action:pan-y), while a vertical swipe still scrolls the page. */
.hero2-title{--h0x:0px;--h0y:0px;--h0r:0px;--h1x:0px;--h1y:0px;--h1r:0px;--h2x:0px;--h2y:0px;--h2r:0px;--h3x:0px;--h3y:0px;--h3r:0px;--h4x:0px;--h4y:0px;--h4r:0px;--h5x:0px;--h5y:0px;--h5r:0px;--h6x:0px;--h6y:0px;--h6r:0px;--h7x:0px;--h7y:0px;--h7r:0px;--h8x:0px;--h8y:0px;--h8r:0px;--h9x:0px;--h9y:0px;--h9r:0px;--h10x:0px;--h10y:0px;--h10r:0px;--h11x:0px;--h11y:0px;--h11r:0px;--h12x:0px;--h12y:0px;--h12r:0px;--h13x:0px;--h13y:0px;--h13r:0px;--h14x:0px;--h14y:0px;--h14r:0px;--h15x:0px;--h15y:0px;--h15r:0px;--h16x:0px;--h16y:0px;--h16r:0px;--h17x:0px;--h17y:0px;--h17r:0px;--h18x:0px;--h18y:0px;--h18r:0px;--h19x:0px;--h19y:0px;--h19r:0px;--h20x:0px;--h20y:0px;--h20r:0px;--h21x:0px;--h21y:0px;--h21r:0px;--h22x:0px;--h22y:0px;--h22r:0px;--h23x:0px;--h23y:0px;--h23r:0px;touch-action:pan-y;
  -webkit-mask:url('assets/headline-distress.png') center/100% 100% no-repeat,
    radial-gradient(circle at var(--h0x) var(--h0y),transparent 0 calc(var(--h0r)*.5),rgba(0,0,0,.55) calc(var(--h0r)*.8),#000 var(--h0r)),
    radial-gradient(circle at var(--h1x) var(--h1y),transparent 0 calc(var(--h1r)*.5),rgba(0,0,0,.55) calc(var(--h1r)*.8),#000 var(--h1r)),
    radial-gradient(circle at var(--h2x) var(--h2y),transparent 0 calc(var(--h2r)*.5),rgba(0,0,0,.55) calc(var(--h2r)*.8),#000 var(--h2r)),
    radial-gradient(circle at var(--h3x) var(--h3y),transparent 0 calc(var(--h3r)*.5),rgba(0,0,0,.55) calc(var(--h3r)*.8),#000 var(--h3r)),
    radial-gradient(circle at var(--h4x) var(--h4y),transparent 0 calc(var(--h4r)*.5),rgba(0,0,0,.55) calc(var(--h4r)*.8),#000 var(--h4r)),
    radial-gradient(circle at var(--h5x) var(--h5y),transparent 0 calc(var(--h5r)*.5),rgba(0,0,0,.55) calc(var(--h5r)*.8),#000 var(--h5r)),
    radial-gradient(circle at var(--h6x) var(--h6y),transparent 0 calc(var(--h6r)*.5),rgba(0,0,0,.55) calc(var(--h6r)*.8),#000 var(--h6r)),
    radial-gradient(circle at var(--h7x) var(--h7y),transparent 0 calc(var(--h7r)*.5),rgba(0,0,0,.55) calc(var(--h7r)*.8),#000 var(--h7r)),
    radial-gradient(circle at var(--h8x) var(--h8y),transparent 0 calc(var(--h8r)*.5),rgba(0,0,0,.55) calc(var(--h8r)*.8),#000 var(--h8r)),
    radial-gradient(circle at var(--h9x) var(--h9y),transparent 0 calc(var(--h9r)*.5),rgba(0,0,0,.55) calc(var(--h9r)*.8),#000 var(--h9r)),
    radial-gradient(circle at var(--h10x) var(--h10y),transparent 0 calc(var(--h10r)*.5),rgba(0,0,0,.55) calc(var(--h10r)*.8),#000 var(--h10r)),
    radial-gradient(circle at var(--h11x) var(--h11y),transparent 0 calc(var(--h11r)*.5),rgba(0,0,0,.55) calc(var(--h11r)*.8),#000 var(--h11r)),
    radial-gradient(circle at var(--h12x) var(--h12y),transparent 0 calc(var(--h12r)*.5),rgba(0,0,0,.55) calc(var(--h12r)*.8),#000 var(--h12r)),
    radial-gradient(circle at var(--h13x) var(--h13y),transparent 0 calc(var(--h13r)*.5),rgba(0,0,0,.55) calc(var(--h13r)*.8),#000 var(--h13r)),
    radial-gradient(circle at var(--h14x) var(--h14y),transparent 0 calc(var(--h14r)*.5),rgba(0,0,0,.55) calc(var(--h14r)*.8),#000 var(--h14r)),
    radial-gradient(circle at var(--h15x) var(--h15y),transparent 0 calc(var(--h15r)*.5),rgba(0,0,0,.55) calc(var(--h15r)*.8),#000 var(--h15r)),
    radial-gradient(circle at var(--h16x) var(--h16y),transparent 0 calc(var(--h16r)*.5),rgba(0,0,0,.55) calc(var(--h16r)*.8),#000 var(--h16r)),
    radial-gradient(circle at var(--h17x) var(--h17y),transparent 0 calc(var(--h17r)*.5),rgba(0,0,0,.55) calc(var(--h17r)*.8),#000 var(--h17r)),
    radial-gradient(circle at var(--h18x) var(--h18y),transparent 0 calc(var(--h18r)*.5),rgba(0,0,0,.55) calc(var(--h18r)*.8),#000 var(--h18r)),
    radial-gradient(circle at var(--h19x) var(--h19y),transparent 0 calc(var(--h19r)*.5),rgba(0,0,0,.55) calc(var(--h19r)*.8),#000 var(--h19r)),
    radial-gradient(circle at var(--h20x) var(--h20y),transparent 0 calc(var(--h20r)*.5),rgba(0,0,0,.55) calc(var(--h20r)*.8),#000 var(--h20r)),
    radial-gradient(circle at var(--h21x) var(--h21y),transparent 0 calc(var(--h21r)*.5),rgba(0,0,0,.55) calc(var(--h21r)*.8),#000 var(--h21r)),
    radial-gradient(circle at var(--h22x) var(--h22y),transparent 0 calc(var(--h22r)*.5),rgba(0,0,0,.55) calc(var(--h22r)*.8),#000 var(--h22r)),
    radial-gradient(circle at var(--h23x) var(--h23y),transparent 0 calc(var(--h23r)*.5),rgba(0,0,0,.55) calc(var(--h23r)*.8),#000 var(--h23r));
  -webkit-mask-composite:source-in;
  mask:url('assets/headline-distress.png') center/100% 100% no-repeat,
    radial-gradient(circle at var(--h0x) var(--h0y),transparent 0 calc(var(--h0r)*.5),rgba(0,0,0,.55) calc(var(--h0r)*.8),#000 var(--h0r)),
    radial-gradient(circle at var(--h1x) var(--h1y),transparent 0 calc(var(--h1r)*.5),rgba(0,0,0,.55) calc(var(--h1r)*.8),#000 var(--h1r)),
    radial-gradient(circle at var(--h2x) var(--h2y),transparent 0 calc(var(--h2r)*.5),rgba(0,0,0,.55) calc(var(--h2r)*.8),#000 var(--h2r)),
    radial-gradient(circle at var(--h3x) var(--h3y),transparent 0 calc(var(--h3r)*.5),rgba(0,0,0,.55) calc(var(--h3r)*.8),#000 var(--h3r)),
    radial-gradient(circle at var(--h4x) var(--h4y),transparent 0 calc(var(--h4r)*.5),rgba(0,0,0,.55) calc(var(--h4r)*.8),#000 var(--h4r)),
    radial-gradient(circle at var(--h5x) var(--h5y),transparent 0 calc(var(--h5r)*.5),rgba(0,0,0,.55) calc(var(--h5r)*.8),#000 var(--h5r)),
    radial-gradient(circle at var(--h6x) var(--h6y),transparent 0 calc(var(--h6r)*.5),rgba(0,0,0,.55) calc(var(--h6r)*.8),#000 var(--h6r)),
    radial-gradient(circle at var(--h7x) var(--h7y),transparent 0 calc(var(--h7r)*.5),rgba(0,0,0,.55) calc(var(--h7r)*.8),#000 var(--h7r)),
    radial-gradient(circle at var(--h8x) var(--h8y),transparent 0 calc(var(--h8r)*.5),rgba(0,0,0,.55) calc(var(--h8r)*.8),#000 var(--h8r)),
    radial-gradient(circle at var(--h9x) var(--h9y),transparent 0 calc(var(--h9r)*.5),rgba(0,0,0,.55) calc(var(--h9r)*.8),#000 var(--h9r)),
    radial-gradient(circle at var(--h10x) var(--h10y),transparent 0 calc(var(--h10r)*.5),rgba(0,0,0,.55) calc(var(--h10r)*.8),#000 var(--h10r)),
    radial-gradient(circle at var(--h11x) var(--h11y),transparent 0 calc(var(--h11r)*.5),rgba(0,0,0,.55) calc(var(--h11r)*.8),#000 var(--h11r)),
    radial-gradient(circle at var(--h12x) var(--h12y),transparent 0 calc(var(--h12r)*.5),rgba(0,0,0,.55) calc(var(--h12r)*.8),#000 var(--h12r)),
    radial-gradient(circle at var(--h13x) var(--h13y),transparent 0 calc(var(--h13r)*.5),rgba(0,0,0,.55) calc(var(--h13r)*.8),#000 var(--h13r)),
    radial-gradient(circle at var(--h14x) var(--h14y),transparent 0 calc(var(--h14r)*.5),rgba(0,0,0,.55) calc(var(--h14r)*.8),#000 var(--h14r)),
    radial-gradient(circle at var(--h15x) var(--h15y),transparent 0 calc(var(--h15r)*.5),rgba(0,0,0,.55) calc(var(--h15r)*.8),#000 var(--h15r)),
    radial-gradient(circle at var(--h16x) var(--h16y),transparent 0 calc(var(--h16r)*.5),rgba(0,0,0,.55) calc(var(--h16r)*.8),#000 var(--h16r)),
    radial-gradient(circle at var(--h17x) var(--h17y),transparent 0 calc(var(--h17r)*.5),rgba(0,0,0,.55) calc(var(--h17r)*.8),#000 var(--h17r)),
    radial-gradient(circle at var(--h18x) var(--h18y),transparent 0 calc(var(--h18r)*.5),rgba(0,0,0,.55) calc(var(--h18r)*.8),#000 var(--h18r)),
    radial-gradient(circle at var(--h19x) var(--h19y),transparent 0 calc(var(--h19r)*.5),rgba(0,0,0,.55) calc(var(--h19r)*.8),#000 var(--h19r)),
    radial-gradient(circle at var(--h20x) var(--h20y),transparent 0 calc(var(--h20r)*.5),rgba(0,0,0,.55) calc(var(--h20r)*.8),#000 var(--h20r)),
    radial-gradient(circle at var(--h21x) var(--h21y),transparent 0 calc(var(--h21r)*.5),rgba(0,0,0,.55) calc(var(--h21r)*.8),#000 var(--h21r)),
    radial-gradient(circle at var(--h22x) var(--h22y),transparent 0 calc(var(--h22r)*.5),rgba(0,0,0,.55) calc(var(--h22r)*.8),#000 var(--h22r)),
    radial-gradient(circle at var(--h23x) var(--h23y),transparent 0 calc(var(--h23r)*.5),rgba(0,0,0,.55) calc(var(--h23r)*.8),#000 var(--h23r));
  mask-composite:intersect}

/* Hero photo (temporary, until real before/after job photos): Jack's truck and trailer.
   A 16:10 frame fits both the truck and the trailer; the crop leans right so the
   truck's front bumper stays in frame. */
.hero-photo{aspect-ratio:16/10}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:85% 60%}
@media(max-width:900px){.hero-photo{aspect-ratio:16/10}}
/* Honeypot: a field real people never see; bots fill it in. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Owner request cards: job photo thumbnails */
.owner-photos{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}.owner-photos img{width:96px;height:96px;object-fit:cover;border-radius:8px;background:var(--photo)}
/* Step 2 time windows: name over hours; "Soonest available" spans the row */
.time-option strong{display:block}.time-option small{display:block;font-size:12px;font-weight:400;opacity:.75;margin-top:2px}.time-soonest{grid-column:1 / -1}

/* ---------------------------------------------------------------------------
   App look (26 Sep 2026): the site now matches Jack's app. No concrete texture: plain
   warm off-white everywhere; the only grit left is the worn headline letters.
   Sections are rounded cards with soft shadows, buttons are rounded, and photos get
   a thin black frame.
   ------------------------------------------------------------------------- */
:root{--card:#fbfaf6;--shadow-card:0 14px 40px rgba(16,17,15,.08),0 2px 6px rgba(16,17,15,.05)}
.site-footer,.booking-flow-header,.page-intro{background-image:none;background-color:var(--paper)}
/* Concrete only in the top section (home page hero). It fades into the plain page
   below so there is no hard seam between the two. */
.hero2{background-color:#f2f2ef;background-image:linear-gradient(to bottom,rgba(244,243,237,0) 70%,var(--paper) 100%),url('assets/concrete-wall-light.jpg');background-size:cover;background-position:center top}
body{background:var(--paper)}
/* Photos: rounded corners, no frame (the black frame was tried and rejected). */
.hero-photo,.ba-frame,.job-photo,.compare-image,.ba-image,.photo-slot,.gallery-space{border:0;border-radius:14px;overflow:hidden;background:var(--photo)}
.photo-previews img{border-radius:8px}
/* Cards like the app */
.calendar-panel,.request-panel,.time-request-panel,.request-review,.review-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card)}
/* Example jobs: no boxes, just faint lines between them (Cole, 26 Sep). */
.job-list{border-top:1px solid var(--line)}
.job{border-bottom:1px solid var(--line)}
/* Buttons: square corners with a soft drop shadow that deepens when pressed-ready. */
.btn,.job-schedule{border-radius:0;box-shadow:0 6px 16px rgba(16,17,15,.14),0 1px 3px rgba(16,17,15,.10);transition:box-shadow .2s,transform .2s}
.btn:hover,.job-link:hover .job-schedule{box-shadow:0 10px 24px rgba(16,17,15,.18),0 2px 4px rgba(16,17,15,.10)}
.btn:active,.job-link:active .job-schedule{transform:translateY(1px);box-shadow:0 3px 8px rgba(16,17,15,.14)}
@media (prefers-reduced-motion:reduce){.btn,.job-schedule{transition:none}.btn:active{transform:none}}
.calendar-day,.overview-day,.time-option{border-radius:8px}
input,select,textarea{border-radius:8px}

/* No hero photo for now (26 Sep 2026): the headline column takes the full width. */
.hero2-grid{grid-template-columns:1fr}

/* Real job photos in the example-job tiles */
.job-photo.has-photo{padding:0;overflow:hidden;border:0}
.job-photo.has-photo img{width:100%;height:100%;object-fit:cover;object-position:35% 45%}

/* How it works + Good to know (26 Sep): two columns on desktop, stacked on phones. */
.info{display:grid;grid-template-columns:1fr 1fr;gap:6%;padding-top:20px;padding-bottom:80px}
.info-label{font-family:Arial,Helvetica,sans-serif;font-size:11px;color:var(--muted);margin-bottom:10px}
.info-steps,.info-faq{margin:0;padding:0;list-style:none}
.info-steps li{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:16px 0;border-top:1px solid var(--line)}
.info-num{font-family:"Barlow Condensed",Arial,sans-serif;font-weight:700;font-size:28px;line-height:1}
.info-steps h3{font-family:inherit;font-size:17px;font-weight:700;letter-spacing:0;margin-bottom:4px}
.info-steps p,.info-faq dd{font-size:15px;line-height:1.5;color:var(--muted);margin:0}
.info-faq>div{padding:16px 0;border-top:1px solid var(--line)}
.info-faq dt{font-size:16px;font-weight:700;margin-bottom:4px}
.info-faq a{color:var(--ink);font-weight:700}
@media(max-width:760px){.info{grid-template-columns:1fr;gap:34px;padding-top:6px;padding-bottom:56px}}

/* Trailer meter on the job cards (28 Sep 2026): how full each example job makes Jack's trailer.
   Dashed lines mark 1/10, 1/3 and 1/2. Blue = the load; the rest stays see-through. */
.job-pic{display:flex;flex-direction:column;gap:8px;min-width:0}
.job-tag{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.job-load{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink)}
.job-load .load{fill:#1f5f99}
.trailer .sect{stroke:var(--ink);stroke-width:1.3;stroke-dasharray:3 3;opacity:.35}
.load-text{font-size:12px;color:var(--muted);letter-spacing:.02em}
.load-text b{font-size:15px;color:#1f5f99;font-weight:700;margin-right:3px}
.trailer-note{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);margin-bottom:14px}
.trailer-note svg{flex:none;color:var(--ink)}
@media(min-width:1101px){.job-list .job-link{grid-template-columns:170px minmax(0,1fr) 170px 120px max-content}}
@media(min-width:761px) and (max-width:1100px){.job-list .job-link{grid-template-columns:110px minmax(0,1fr) 130px 90px max-content}.job-load svg{width:120px;height:auto}}
@media(max-width:760px){
  .job-list .job-link .job-pic{grid-column:1;grid-row:1 / span 4}
  .job-list .job-link .job-load{grid-column:2;grid-row:2;flex-direction:row;justify-self:start;gap:10px}
  .job-list .job-link .job-load svg{width:110px;height:auto}
  .job-list .job-link .job-price{grid-row:3}
  .job-list .job-link .job-schedule{grid-row:4}
  .job-tag{font-size:8px;letter-spacing:.1em}
}

/* Container-style trailer (like the logo), and the blue load filling up when the jobs scroll into view.
   site.js adds .meter-anim only when it can animate; without it the load simply shows full. */
.trailer .sect{stroke-width:1.1;stroke-dasharray:2.5 2.5;opacity:.4}
.meter-anim .job-load .load{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.2,1) .15s}
.meter-anim .job-load.is-in .load{transform:none}

/* True white below the hero (28 Sep 2026). The concrete hero fades into var(--paper), so it blends. */
:root{--paper:#fff;--photo:#eeeff1;--line:#e2e3e6;--paper-edge:#e6e7ea}

/* Trailer meter: a soft pill bar (28 Sep 2026, Cole's pick). Light grey track, blue fill, label under it.
   site.js fills it as each job scrolls in. */
.job-list .job-load{align-items:flex-start;gap:8px;width:160px}
.load-bar{position:relative;display:block;width:100%;height:8px;border-radius:99px;background:#e9ebee;overflow:hidden}
.load-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:#1f5f99}
.load-text{font-size:12px;color:var(--muted)}
.load-text b{font-size:14px;color:#1f5f99;font-weight:700;margin-right:2px}
.meter-anim .job-load .load-bar i{transform:scaleX(0);transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.2,1) .15s}
.meter-anim .job-load.is-in .load-bar i{transform:none}
@media(min-width:761px) and (max-width:1100px){.job-list .job-load{width:120px}}
@media(max-width:760px){.job-list .job-link .job-load{flex-direction:column;align-items:flex-start;width:160px;gap:6px}}

/* Hero button (28 Sep 2026): "Send a photo" in deep blue, the same blue as the trailer bars. */
.hero2-ctas .btn-photo{background:#1f5f99;color:#fff;border-color:#1f5f99}
.hero2-ctas .btn-photo:hover{background:#174a78;border-color:#174a78;color:#fff}

/* Hero "Send a photo" matches the "Choose a time" button on the Schedule page (28 Sep 2026):
   the site's light blue, flat, square, dark text, same size and the same soft shadow.
   The trailer bars use the same light blue. */
.hero2-ctas .btn-photo{background:var(--accent);border:1px solid transparent;color:var(--ink);border-radius:0;
  min-height:58px;padding:20px 24px;gap:40px;font-size:14px;font-weight:700;
  box-shadow:0 6px 16px rgba(16,17,15,.14),0 1px 3px rgba(16,17,15,.1)}
.hero2-ctas .btn-photo:hover{background:var(--accent-hover);color:var(--ink);box-shadow:0 8px 20px rgba(16,17,15,.16),0 1px 3px rgba(16,17,15,.1)}
.load-bar i{background:var(--accent)}
.load-text b{color:var(--ink)}
/*giving the button more room on iphone screen
/* Phone: give the "Send a photo" button more room below the 01-02-03 steps (28 Sep 2026). */
@media(max-width:760px){.hero2-ctas{padding-top:18px}}   /* padding, not margin: touching margins overlap (margin collapsing) */

/* Hero button (28 Sep 2026): slightly rounded corners, and a soft shine that sweeps across it every few
   seconds to draw the eye. No shine for people who turn off motion. */
.hero2-ctas .btn-photo{position:relative;overflow:hidden;border-radius:6px;isolation:isolate}
.hero2-ctas .btn-photo::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);animation:btn-shine 4.5s ease-in-out 1.2s infinite}
@keyframes btn-shine{0%{left:-60%}28%{left:130%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.hero2-ctas .btn-photo::after{animation:none;display:none}}

/* ---------- Send photo: one step per screen (28 Sep 2026) ----------
   Matches the "Snap your junk" phone mockups on the design canvas.
   Everything is scoped to .intake-steps so the rest of the site is untouched. */
.file-hidden{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.intake-steps{max-width:520px;margin:0 auto;padding:8px 0 0}
.intake-steps fieldset{border:0;margin:0;padding:0;min-width:0}
.intake-steps .fp{margin-bottom:26px}
.intake-steps .fp-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted,#66695f);margin-bottom:10px}
.intake-steps .fp-back{background:none;border:0;padding:6px 0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.intake-steps .fp-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.intake-steps .fp-bar i{height:6px;border-radius:99px;background:var(--line);transition:background .25s}
.intake-steps .fp-bar i.on{background:var(--accent)}
.intake-steps .fp-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px;font-size:12px;color:#9a9c95}
.intake-steps .fp-labels span.on{color:var(--ink);font-weight:600}
.intake-steps .istep-head{margin-bottom:22px}
.intake-steps .flow-heading{font-size:clamp(34px,8vw,44px);line-height:1;margin:0 0 10px;outline:0}
.intake-steps .istep-head p{margin:0;color:var(--muted,#66695f);font-size:16px;line-height:1.45}

/* Step 1: the big camera tile and the photo grid */
.snap-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:250px;border:2px dashed var(--accent);border-radius:18px;background:#f4f9fd;cursor:pointer;text-align:center;transition:background .2s}
.snap-tile:hover{background:#eaf3fb}
.file-hidden:focus-visible + .snap-tile{outline:3px solid var(--ink);outline-offset:3px}
.snap-icon{width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;margin-bottom:8px}
.snap-title{font-weight:700;font-size:18px;color:var(--ink)}
.snap-sub{font-size:14px;color:var(--muted,#66695f)}
/* The form already styles every label as a small block heading (.intake-steps .field label).
   These two labels are big tap targets instead, so they need a selector at least that specific. */
.intake-steps .field label.snap-tile,.intake-steps .field label.snap-add{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:0}
.intake-steps .field label.snap-tile{font-size:inherit}
.fp-back[hidden]{display:inline-block!important;visibility:hidden}
.snap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.snap-thumb{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--photo)}
.snap-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.snap-x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(16,17,15,.72);color:#fff;font-size:13px;cursor:pointer;display:grid;place-items:center}
.snap-add{aspect-ratio:1;border:2px dashed var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--muted,#66695f);cursor:pointer}
.snap-add span{font-size:28px;line-height:1;color:var(--ink)}
.intake-steps .photo-status{margin:14px 0 2px;font-size:14px;font-weight:600}
.intake-steps .photo-status.is-error{color:#b3261e}

/* Step 2: tap cards */
.job-cards{display:grid;gap:10px}
.job-card{display:grid;gap:6px;text-align:left;width:100%;padding:16px 18px;border:1.5px solid var(--line);border-radius:16px;background:#fff;font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.job-card:hover{border-color:#c9cbd0}
.job-card[aria-checked="true"]{border:2px solid var(--ink);padding:15.5px 17.5px;background:#f4f9fd}
.jc-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.jc-top b{font-size:17px}
.jc-price{font-size:13px;color:var(--muted,#66695f);white-space:nowrap}
.jc-sub{font-size:14px;color:var(--muted,#66695f)}
.jc-load{display:flex;align-items:center;gap:10px;margin-top:4px}
.jc-load .load-bar{flex:1;max-width:160px}
.jc-load .load-text{font-size:12px;color:var(--muted,#66695f)}
.job-skip{display:block;margin:16px auto 0;background:none;border:0;font:inherit;font-size:15px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:10px}

/* Step 3: filled, rounded fields (override the underline fields used elsewhere) */
.intake-steps .field{margin-bottom:18px}
.intake-steps .field label,.intake-steps .field-label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.intake-steps .field input,.intake-steps #notes-extra{width:100%;box-sizing:border-box;height:52px;padding:0 16px;border:1.5px solid transparent;border-radius:12px;background:#f3f4f6;font:inherit;font-size:16px;color:var(--ink)}
.intake-steps #notes-extra{height:auto;min-height:88px;padding:14px 16px;margin-top:10px;resize:vertical}
.intake-steps .field input:focus,.intake-steps #notes-extra:focus{outline:0;border-color:var(--ink);background:#fff}
.intake-steps .hint{font-size:13px;color:var(--muted,#66695f);margin:6px 0 0}
.intake-steps .muted{font-weight:400;color:var(--muted,#66695f)}
.note-chips{display:flex;flex-wrap:wrap;gap:8px}
.note-chips button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:9px 15px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.note-chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);font-weight:600}
.intake-steps .form-foot{font-size:13px;color:var(--muted,#66695f);text-align:center;margin:8px 0 0}

/* Sticky bottom button, like an app */
.istep-bar{position:sticky;bottom:0;z-index:5;margin-top:22px;padding:16px 0 calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0))}
.intake-steps .istep-next{width:100%;min-height:56px;border-radius:12px;justify-content:center;font-size:16px;font-weight:700;background:var(--accent);color:var(--ink);border:0;box-shadow:none}
.intake-steps .istep-next:hover:not(:disabled){background:var(--accent-hover)}
.intake-steps .istep-next:disabled{background:#e6e7ea;color:#9a9c95;cursor:not-allowed}
@media (prefers-reduced-motion:no-preference){.intake-steps .istep:not([hidden]){animation:istep-in .28s cubic-bezier(.22,1,.36,1)}}
@keyframes istep-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* Send photo on a phone (28 Sep 2026): everything a notch smaller, and the camera
   tile no longer fills the screen, so the Next button shows without scrolling. */
@media (max-width:760px){
  #details-view.booking-step-view{padding-top:6px}
  .intake-steps{padding-top:0}
  .intake-steps .fp{margin-bottom:16px}
  .intake-steps .fp-top{margin-bottom:6px;font-size:12px}
  .intake-steps .fp-back{padding:2px 0}
  .intake-steps .fp-bar i{height:5px}
  .intake-steps .fp-labels{font-size:11px}
  .intake-steps .istep-head{margin-bottom:14px}
  .intake-steps .flow-heading{font-size:29px;margin-bottom:6px}
  .intake-steps .istep-head p{font-size:15px}
  .intake-steps .field label.snap-tile{min-height:0;height:160px;gap:3px;border-radius:14px}
  .snap-icon{width:56px;height:56px;margin-bottom:6px}
  .snap-icon svg{width:28px;height:28px}
  .snap-title{font-size:16px}
  .snap-sub{font-size:13px}
  .snap-grid{gap:8px}
  .intake-steps .photo-status{margin-top:10px;font-size:13px}
  .intake-steps .hint{font-size:12px}
  .job-cards{gap:8px}
  .job-card{padding:12px 14px;border-radius:14px;gap:4px}
  .job-card[aria-checked="true"]{padding:11.5px 13.5px}
  .jc-top b{font-size:16px}
  .jc-sub{font-size:13px}
  .intake-steps .field{margin-bottom:14px}
  .intake-steps .field label,.intake-steps .field-label{font-size:13px;margin-bottom:6px}
  .intake-steps .field input{height:46px;font-size:16px}  /* 16px stops iPhone zooming into the field */
  .note-chips button{padding:7px 12px;font-size:13px}
  .istep-bar{margin-top:12px;padding:10px 0 calc(12px + env(safe-area-inset-bottom))}
  .intake-steps .istep-next{min-height:50px;font-size:15px}
}

/* "What is it?" on a phone (28 Sep 2026): each card is two lines (name + price, then
   description + trailer bar) so all four options and "Not sure?" fit on one screen.
   .jc-top uses display:contents so its two children join the card's own grid. */
@media (max-width:760px){
  .job-card{grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:4px;align-items:center}
  .job-card .jc-top{display:contents}
  .job-card .jc-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .job-card .jc-load{margin-top:0;gap:6px;justify-self:end}
  .job-card .jc-load .load-bar{width:52px;flex:none}
  .job-skip{margin-top:6px;padding:8px;font-size:14px}
}

/* Fine print under the job cards (28 Sep 2026) */
.jc-fine{margin:10px 2px 0;font-size:12px;line-height:1.4;color:var(--muted,#66695f);text-align:center}

/* ---------- Gallery & reviews (28 Sep 2026): owner, swipe photos, real reviews, Instagram ----------
   Matches the "Gallery & reviews: small town owned and operated" mockup on the design canvas. */
.stories-grid{align-items:start}
.social-column{grid-template-rows:auto;align-content:start}
.owner-card{display:flex;flex-direction:column;gap:6px;min-width:0}
.owner-card .eyebrow{color:var(--muted)}
.owner-card h2{font-family:var(--display,'Barlow Condensed',Impact,sans-serif);font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-.01em;margin:4px 0 0}
.owner-role{margin:0 0 14px;font-size:14px;color:var(--muted)}
/* The swipe: a row of photos that scrolls sideways and snaps to each one (CSS scroll snap).
   The finger does the swiping; site.js only keeps the counter, dots and arrow buttons in step. */
.swipe{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:16px;outline-offset:4px}
.swipe::-webkit-scrollbar{display:none}
.swipe-slide{position:relative;flex:0 0 100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
.swipe-slide img{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;border-radius:16px;background:var(--photo)}
.swipe-tag{position:absolute;top:12px;left:12px;padding:5px 10px;border-radius:99px;background:rgba(16,17,15,.72);color:#fff;font-size:12px;font-weight:600}
.swipe-count{position:absolute;top:12px;right:12px;padding:5px 10px;border-radius:99px;background:rgba(16,17,15,.72);color:#fff;font-size:12px;font-weight:600}
.swipe-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}
.swipe-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.swipe-btn:disabled{opacity:.35;cursor:default}
.swipe-dots{display:flex;gap:6px}
.swipe-dots i{width:6px;height:6px;border-radius:99px;background:#d4d5d8;transition:width .2s,background .2s}
.swipe-dots i.on{width:18px;background:var(--ink)}
/* Reviews: quoted word for word from Google */
.review-panel .review-score{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:14px;color:var(--muted)}
.stars{color:#f2b600;letter-spacing:1px;font-size:15px}
.review-quote{margin:0 0 12px;padding:14px 16px;width:100%;border:1px solid var(--line);border-radius:12px;background:#fff}
.review-panel .review-quote p{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--ink);max-width:none}
.review-quote footer{display:flex;align-items:center;gap:8px}
.review-quote cite{font-style:normal;font-weight:700;font-size:14px}
.review-panel .text-link{margin-top:10px}
/* Instagram: a light card with the handle and a Follow button (live posts come later) */
.instagram-panel{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--card,#fff);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card)}
.instagram-panel .eyebrow{color:var(--muted)}
.ig-row{display:flex;align-items:center;gap:12px}
.ig-avatar{flex:none;width:48px;height:48px;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ig-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ig-name{display:flex;flex-direction:column;min-width:0}
.ig-name b{font-size:15px}
.ig-name span{font-size:13px;color:var(--muted)}
.ig-follow{margin-left:auto;padding:10px 16px;border-radius:10px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;text-decoration:none}
.ig-follow:hover{opacity:.85}
@media (max-width:760px){.stories-grid{gap:34px}.swipe-slide{flex-basis:88%}.swipe-slide img{aspect-ratio:1/1.1}}  /* on a phone the next photo peeks in, so it reads as swipeable */

/* The whole Instagram card is one link to his profile (28 Sep 2026) */
a.instagram-panel{text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
a.instagram-panel:hover{transform:translateY(-2px)}
a.instagram-panel:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* Gallery (28 Sep 2026): the owner block is the top of the page now */
.stories-top-page{padding-top:40px}
.owner-card h1{font-family:var(--display,'Barlow Condensed',Impact,sans-serif);font-size:clamp(38px,4.5vw,56px);line-height:1;letter-spacing:-.01em;margin:4px 0 0}
.owner-bio{margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--ink);max-width:60ch}
@media (max-width:760px){.stories-top-page{padding-top:26px}.owner-bio{font-size:15px}}