/* Service pages. Everything here builds on css/site.css (the home page design system). Generated by build-services.py. */
.nav-links a[aria-current]{color:#f6efe0;box-shadow:0 2px 0 var(--green)}

/* hero: the home hero, shorter, with a breadcrumb */
.shero{min-height:min(88svh,780px)}
.shero .hero-inner{padding:6.5rem 0 3.5rem}
.shero h1{font-size:clamp(1.4rem,4.4vw,3rem);letter-spacing:.05em}
/* hero_focus (spec): --hf desktop, --hfm phones (object-position), so the subject stays in frame in a tall portrait hero */
.shero .hero-bg img{object-position:var(--hf,50% 60%);filter:brightness(.74) contrast(1.06)}
@media (max-width:720px){.shero .hero-bg img{object-position:var(--hfm,var(--hf,50% 60%));filter:brightness(.8) contrast(1.06)}}
.shero.plain{min-height:0}
.shero.plain::before{background:radial-gradient(ellipse 80% 90% at 50% 0%,rgba(23,102,74,.30),transparent 70%),linear-gradient(180deg,rgba(10,10,11,.2) 0%,var(--ink) 100%)}
.shero.plain .hero-inner{padding:7rem 0 3.5rem}
.crumbs{list-style:none;margin:0 0 1.3rem;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem .6rem;font-size:.8rem;color:#d2c8b1}
.crumbs li+li::before{content:"/";margin-right:.6rem;color:#978d77}
.crumbs a{text-decoration:none;color:#f6efe0;border-bottom:1px solid rgba(255,255,255,.3)}
.crumbs a:hover{border-color:#f6efe0}

/* text blocks */
.narrow{max-width:860px}   /* a text column on the wrap's left edge, in line with every other section */
.prose p{color:#ddd3bd;max-width:68ch}
.prose p+p{margin-top:1rem}
.prose .lead{color:#f6efe0;font-size:var(--step-1)}
.split{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1.1fr .9fr;gap:3rem}}
.split figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 28px 40px -14px rgba(0,0,0,.85)}
.split figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fine-note{color:var(--steel);font-size:.86rem;max-width:80ch;margin-top:1.3rem}
.fine-note+.fine-note{margin-top:.6rem}
.fine-note a,.lede a{color:#f6efe0;text-underline-offset:3px}
.fine-note a:hover,.lede a:hover{color:var(--green-hi)}
/* contextual links to the other service pages (prose, tiles, panels, FAQ answers) */
.prose p a,.tile p a,.panel p a,.faq p a{color:#f6efe0;text-underline-offset:3px}
.prose p a:hover,.tile p a:hover,.panel p a:hover,.faq p a:hover{color:var(--green-hi)}

/* option cards (film tiers, coating packages, PPF packages) */
.opts{display:grid;gap:1rem;align-items:start}
@media (min-width:760px){.opts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.opts.n3,.opts.n5,.opts.n6{grid-template-columns:repeat(3,1fr)}}
.opt,.tile{background:
    linear-gradient(115deg,rgba(255,255,255,.07) 0%,transparent 38%,rgba(255,255,255,.035) 62%,transparent 80%) 0 0/100% 100%,
    linear-gradient(rgba(14,14,16,.55),rgba(14,14,16,.55)) 0 0/100% 100%,
    linear-gradient(27deg,#17171a 4px,transparent 4px) 0 4px,linear-gradient(207deg,#17171a 4px,transparent 4px) 8px 0,linear-gradient(27deg,#232327 4px,transparent 4px) 0 8px,linear-gradient(207deg,#232327 4px,transparent 4px) 8px 4px,linear-gradient(90deg,#1b1b1e 8px,transparent 8px) 0 0,linear-gradient(#1d1d20 25%,#19191c 25%,#19191c 50%,transparent 50%,transparent 75%,#26262a 75%,#26262a) 0 0;
  background-size:100% 100%,100% 100%,16px 16px,16px 16px,16px 16px,16px 16px,16px 16px,16px 16px;
  background-color:#141417}
.opt,.tile{border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 28px 40px -14px rgba(0,0,0,.85),0 60px 90px -40px rgba(0,0,0,.7)}
.opt{position:relative;padding:1.6rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.75rem;scroll-margin-top:5rem}
.opt-n{font-family:var(--font-display);font-size:1.5rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}
.opt h3{font-family:var(--font-display);font-weight:400;font-size:1rem;letter-spacing:.08em;line-height:1.35;text-transform:uppercase;color:#f6efe0}
.opt-tag{color:var(--green-hi);font-weight:600;font-size:.95rem}
.opt-sum{color:#ddd3bd;font-size:.97rem}
.opt h4{margin:.5rem 0 0;font-family:var(--font-display);font-weight:400;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.opt-badge{align-self:flex-start;padding:.22rem .75rem;border-radius:999px;background:var(--green);color:#f6efe0;font-weight:600;font-size:.76rem;letter-spacing:.03em}
.opt-best{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);color:var(--steel);font-size:.9rem}
.opt-best b{color:#f6efe0}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.ticks li{position:relative;padding-left:1.5rem;color:#d2c8b1;font-size:.94rem}
.ticks li::before{content:"";position:absolute;left:.1rem;top:.48em;width:.7rem;height:.38rem;border-left:2px solid var(--green-hi);border-bottom:2px solid var(--green-hi);transform:rotate(-45deg)}
/* "marks": "plain" (spec): a neutral bullet for lists of problems or limits, where a green tick would read as a benefit */
.ticks.plain li::before{left:.3rem;top:.62em;width:.38rem;height:.38rem;border:0;border-radius:50%;background:var(--steel);transform:none}

/* small tiles (benefits, reasons) */
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:tile}
@media (min-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{padding:1.4rem 1.4rem 1.5rem;counter-increment:tile}
.tiles.num .tile::before{content:"0" counter(tile);display:block;margin-bottom:.8rem;font-family:var(--font-display);font-size:.8rem;letter-spacing:.1em;color:var(--green-hi)}
.tile h3{font-size:1.05rem;margin-bottom:.4rem}
.tile p{color:var(--steel);font-size:.95rem}

/* count-aware grids: column counts that divide each set, so no row ends in empty cells.
   Two-column range: an odd last item takes the full row. Three-column range: 4 -> 2 (4 from 1100px), 8 -> 4,
   7 -> 3 with the last item full width, 5 -> 3 over 2 (six tracks). 6 and 9 already divide by 3. */
@media (min-width:640px) and (max-width:999.98px){.tiles>:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:1000px){
  .tiles:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
  .tiles:has(>:nth-child(8):last-child){grid-template-columns:repeat(4,1fr)}
  .tiles:has(>:nth-child(7):last-child)>:last-child{grid-column:1/-1}
  .tiles:has(>:nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}
  .tiles:has(>:nth-child(5):last-child)>*{grid-column:span 2}
  .tiles:has(>:nth-child(5):last-child)>:nth-child(n+4){grid-column:span 3}
}
@media (min-width:1100px){.tiles:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}}
/* process steps: 2 columns from 760px, 4 from 1100px (home rule); 6 steps -> 3 columns */
@media (min-width:760px) and (max-width:1099.98px){.steps>:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:1100px){.steps:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}}
/* option cards: 2 columns from 760px, 3 from 1100px for 3, 5 and 6 cards */
@media (min-width:760px) and (max-width:1099.98px){.opts>:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:1100px){.opts.n5{grid-template-columns:repeat(6,1fr)}.opts.n5>*{grid-column:span 2}.opts.n5>:nth-child(n+4){grid-column:span 3}}
/* the two wide cards in the second row of five: lists in two columns, so the short card is not left mostly empty */
@media (min-width:1100px){.opts.n5>:nth-child(n+4) .ticks:has(>:nth-child(4)){display:block;columns:2;column-gap:1.5rem}.opts.n5>:nth-child(n+4) .ticks:has(>:nth-child(4)) li{break-inside:avoid;margin-bottom:.42rem}}

/* satin panels holding a list */
.panels{display:grid;gap:1rem}
@media (min-width:800px){.panels{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
@media (min-width:800px){.panels:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
  .panels:has(>:nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}.panels:has(>:nth-child(5):last-child)>*{grid-column:span 2}.panels:has(>:nth-child(5):last-child)>:nth-child(n+4){grid-column:span 3}}
.panel{background:
    radial-gradient(ellipse 90% 60% at 50% -10%,rgba(255,255,255,.10),transparent 65%),
    linear-gradient(160deg,rgba(255,255,255,.045) 0%,transparent 30%,transparent 70%,rgba(255,255,255,.025) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url%28%23n%29' opacity='.35'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#232429 0%,#1a1b1f 45%,#141518 100%);
  background-size:100% 100%,100% 100%,160px 160px,100% 100%;
  background-color:#18191c;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 -1px 0 rgba(0,0,0,.6) inset,0 28px 40px -14px rgba(0,0,0,.85),0 60px 90px -40px rgba(0,0,0,.7)}
.panel{padding:clamp(1.4rem,3vw,2rem);border-radius:var(--radius)}
.panel h3{margin-bottom:.9rem}
@media (min-width:900px){.panels>.panel:only-child .ticks{display:block;columns:2;column-gap:2.5rem}.panels>.panel:only-child .ticks li{break-inside:avoid;margin-bottom:.42rem}}
.panel p{color:var(--steel);font-size:.95rem;margin-bottom:.9rem}

/* brand chips */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.chips li{padding:.6rem 1.15rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);font-family:var(--font-display);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#f6efe0}

/* tables on service pages: first column is the row label; no column is "us" unless the spec says so */
.table-wrap td{color:#d2c8b1}
.table-wrap td.us{color:#f6efe0}

/* photo strip (same strip as the home page, without links). Not named .g: that is the Google logo in the rating pill.
   Each tile follows its photo: landscape 4/3, portrait 9/14 (orientation from img/svc/manifest.json). One tile height
   per breakpoint, width from the ratio, so the tops and bottoms of a mixed strip line up. */
.gallery{--gh:300px;display:flex;align-items:flex-start}
@media (max-width:699px){.gallery{--gh:240px}}
.gallery figure{scroll-snap-align:start}
.gallery .gph{position:relative;display:block;flex:none;height:var(--gh);width:calc(var(--gh) * 9 / 14);border-radius:var(--radius);overflow:hidden;background:var(--graphite);border:1px solid var(--line);margin:0}
.gallery .gph.land{width:calc(var(--gh) * 4 / 3)}
.gallery .gph img{width:100%;height:100%;object-fit:cover}

/* Google review excerpts (the home page cards, verbatim) */
@media (min-width:1100px){.review-grid.rv-n2{columns:2}}
.review-grid + .fine-note{margin-top:.4rem}
/* one card: centred under a centred heading instead of alone at the left of a three-column grid */
.review-grid.rv-n1{columns:1;max-width:640px;margin-inline:auto;overflow:visible;padding:0}
.review-grid.rv-n1 .review-track{display:block;width:auto;padding:0}
.review-grid.rv-n1 .review-track .review{width:auto}
.review-grid.rv-n1 + .fine-note{text-align:center;margin-inline:auto}

/* other services: three photo tiles in one row from 640px (two columns would leave the third alone) */
@media (min-width:640px){.services.others{grid-template-columns:repeat(3,1fr)}}

@supports (animation-timeline: scroll()){
  .opt,.tile,.panel{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}
@media (prefers-reduced-motion:reduce){.opt,.tile,.panel{animation:none!important}}