:root{--bg:#F7F7F5;--surf:#ffffff;--tint:#EDEDE9;--ink:#111214;--mute:#5B6066;--line:#E1E3E5;--ac:#FF5B1F;--onac:#111214;--acx:#B23A08;--acd:#FF5B1F;--dark:#111214;--ondark:#ffffff;
  /* sizes: the page gutter and the header's height (phones: 64) */
  --pad:clamp(20px,3.4vw,48px);--hh:88px}
/* Look G "Instant quote": a modern trades look. The first screen asks "What do you need?": a full-bleed photo, a bold tight
   Work Sans headline and a white quote card (a plain GET form to the contact page). Below it: photo service cards with price
   pills, a dark three-step band, recent work, reviews, area pills with an hours table, an accent closing band and a dark
   footer; the inner pages open with a short photo header. One face for everything: Work Sans (variable, 400-700), headlines
   700. Radius 24 on big cards, 20 on photos and review cards, pills for buttons, 12 on inputs. Shadows only on the quote card
   and on hover. Advanced adds small moves (transform and opacity only, none with reduced motion); Basic is static and has no script. */
body{--hf:var(--fd);--hw:700;--ht:-.035em;--field:color-mix(in srgb,var(--ink) 38%,var(--surf))}

*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:400 calc(16px*var(--tune-size,1))/1.6 var(--ft),sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.25em;text-decoration-thickness:1px}
img{display:block;max-width:100%}
.lg-wrap{max-width:1536px;margin:auto;padding:0 var(--pad)}
h1,h2,h3,.lg-logo,.lg-num,.lg-rate-n,.lg-no,.lg-rcards p,.lg-kv td,.lg-facts dd,.lg-ini span,summary{font-family:var(--hf);font-weight:var(--hw);letter-spacing:var(--ht)}
h1,h2,h3,p,li,dd,dt,th,td,summary,figcaption,.btn,.lg-logo{overflow-wrap:anywhere;hyphens:auto}
h1,h2{text-wrap:balance}p{text-wrap:pretty}
.lg-lab,dt,caption,figcaption,.lg-role{font-weight:500;letter-spacing:0}
.lg-lab{display:block;font-size:calc(13px*var(--tune-size,1));line-height:1.4;color:var(--mute)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lg-top :focus-visible,.lg-hero :focus-visible,.lg-ph :focus-visible,.lg-bar :focus-visible,.lg-sv :focus-visible,.lg-proc :focus-visible,.lg-foot :focus-visible,.lg-fdark :focus-visible{outline-color:var(--ondark)}
.lg-quote :focus-visible{outline-color:var(--ink)}
.lg-final:not(.lg-fdark) :focus-visible{outline-color:var(--onac)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font:700 calc(16px*var(--tune-size,1))/1.2 var(--ft);padding:16px 28px;border-radius:999px;background:var(--ac);color:var(--onac);border:1.5px solid var(--ac);cursor:pointer;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn svg,.lg-go svg,.lg-all svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* header: the logo (an accent mark and the name), four links, the underlined "Get a price"; on the pages that open with a photo
   (home, services, team) it floats over the photo, elsewhere it is a dark bar. Advanced: sticky, and "Get a price" turns into
   an accent button once the page is scrolled. */
.lg-top{position:relative;z-index:30;background:var(--dark);color:var(--ondark)}
.lg-photo .lg-top{background:transparent}
.lg-top nav{display:flex;align-items:center;gap:clamp(20px,3vw,40px);height:var(--hh);font-size:calc(15px*var(--tune-size,1))}
.lg-logo{display:flex;align-items:center;gap:10px;margin-right:auto;font-size:calc(20px*var(--tune-size,1));line-height:1.1;text-decoration:none;color:var(--ondark)}
.lg-mark{flex:none;width:11px;height:11px;border-radius:calc(3px*var(--tune-radius,1));background:var(--ac);transform:rotate(45deg)}
.lg-links{display:flex;gap:clamp(20px,2.8vw,40px);list-style:none;padding:0;font-weight:500}
.lg-links a{display:block;padding:8px 0;text-decoration:none;color:color-mix(in srgb,var(--ondark) 88%,transparent);white-space:nowrap;hyphens:none}
.lg-links a:hover,.lg-links a[aria-current]{color:var(--ondark)}
.lg-links a[aria-current]{box-shadow:0 1px 2px color-mix(in srgb,var(--tone-sh,#000) 7%,transparent),0 1px 2px color-mix(in srgb,var(--tone-sh,#000) 6%,transparent),0 2px 4px -1px color-mix(in srgb,var(--tone-sh,#000) 6%,transparent),0 4px 8px -2px color-mix(in srgb,var(--tone-sh,#000) 5%,transparent)}
.lg-top .nav-end{gap:clamp(12px,1.6vw,24px)}
.lg-get{position:relative;display:inline-block;padding:9px 18px;border-radius:999px;color:var(--ondark);font-weight:600;text-decoration:none;white-space:nowrap;hyphens:none}
.lg-get::after{content:"";position:absolute;left:18px;right:18px;bottom:6px;height:2px;background:var(--ac)}
.lg-scrolled .lg-get,.lg-get-btn{background:var(--ac);color:var(--onac)}
.lg-scrolled .lg-get::after,.lg-get-btn::after{display:none}
.m-js .lg-top{position:sticky;top:0}
.m-js.lg-scrolled .lg-top{background:color-mix(in srgb,var(--dark) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lg-menu{display:none}

/* hero: quote. The photo sits on the right and fades into the dark ground on the left; the headline bottom-left, the card
   bottom-right with the trust row under it. The header floats over the top (the hero starts under it). */
.lg-hero{position:relative;isolation:isolate;margin-top:calc(var(--hh) * -1);padding-top:var(--hh);min-height:max(720px,100svh);display:flex;flex-direction:column;background:var(--dark);color:var(--ondark);overflow:hidden}
.lg-hero-ph{position:absolute;inset:0;z-index:0}
.lg-hero-img{filter:brightness(1.22) contrast(1.1) saturate(1.05);position:absolute;top:0;right:0;width:88%;height:100%;max-width:none;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.lg-hero-ph::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 22% 42% at 54% 52%,rgba(255,236,214,.16),transparent 70%),linear-gradient(90deg,rgba(9,10,11,.94) 0%,rgba(9,10,11,.72) 34%,rgba(9,10,11,.22) 62%,rgba(9,10,11,.08) 100%),linear-gradient(180deg,rgba(9,10,11,.55) 0,transparent 22%,transparent 60%,rgba(9,10,11,.5) 100%)}
.lg-hero-main{position:relative;z-index:2;flex:1;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;padding-bottom:calc(56px*var(--tune-space,1))}
.lg-hero h1{font-size:calc(clamp(46px,7.2vw,104px)*var(--tune-size,1));line-height:.94;letter-spacing:-.045em;max-width:780px;margin-left:-.04em;color:var(--ondark);hyphens:manual;overflow-wrap:normal}
.lg-hero .lg-w{display:inline-block}
.lg-hero .lg-lede{margin-top:32px;font-size:calc(20px*var(--tune-size,1));line-height:32px;color:color-mix(in srgb,var(--ondark) 84%,transparent);max-width:520px;hyphens:manual}
.lg-hero-side{flex:none;width:min(400px,100%)}
.lg-quote{background:var(--surf);color:var(--ink);border-radius:calc(24px*var(--tune-radius,1));padding:32px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.lg-q-set{border:0;padding:0;min-width:0}
.lg-q-h{display:block;width:100%;padding:0;font:700 calc(24px*var(--tune-size,1))/32px var(--hf);letter-spacing:-.02em;hyphens:manual}
.lg-q-sub{margin-top:4px;font-size:calc(14px*var(--tune-size,1));line-height:1.5;color:var(--mute);hyphens:manual}
.lg-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
.lg-chip{position:relative;display:block}
.lg-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.lg-chip span{display:flex;align-items:center;justify-content:center;min-height:48px;height:100%;padding:8px 10px;border-radius:calc(12px*var(--tune-radius,1));border:1.5px solid var(--field);background:var(--surf);font:600 calc(15px*var(--tune-size,1))/1.25 var(--ft);text-align:center;hyphens:manual;overflow-wrap:normal}
.lg-chip input:hover+span{border-color:var(--ink)}
.lg-chip input:checked+span{background:var(--ac);border-color:var(--ac);color:var(--onac)}
.lg-chip input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.lg-q-field{margin-top:16px}
.lg-q-field label{display:block;margin-bottom:8px;font-size:calc(13px*var(--tune-size,1));font-weight:600;color:var(--mute)}
.lg-q-field input{display:block;width:100%;height:52px;padding:0 16px;border-radius:calc(12px*var(--tune-radius,1));border:1.5px solid var(--field);background:var(--bg);font:500 calc(16px*var(--tune-size,1))/1.2 var(--ft);color:var(--ink)}
.lg-q-field input::placeholder{color:var(--mute);opacity:1}
.lg-q-field input:focus{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.lg-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:56px;margin-top:24px;padding:0 16px;border:0;border-radius:calc(14px*var(--tune-radius,1));background:var(--ac);color:var(--onac);font:700 calc(17px*var(--tune-size,1))/1.2 var(--ft);cursor:pointer;hyphens:manual}
.lg-go:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.lg-q-note{margin-top:16px;text-align:center;font-size:calc(13px*var(--tune-size,1));line-height:1.5;color:var(--mute);hyphens:manual}
.lg-trust{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;padding:0;margin-top:24px;font-size:calc(14px*var(--tune-size,1));font-weight:500;color:var(--ondark);text-shadow:0 1px 14px rgba(0,0,0,.5)}
.lg-trust li{display:flex;align-items:center;gap:6px;white-space:nowrap;hyphens:manual}
.lg-trust li+li::before{content:"\00b7";margin-right:8px;opacity:.7}
.lg-star{color:#FFC247}

/* section heads */
.lg-svc,.lg-work,.lg-rev,.lg-area{padding-top:calc(clamp(72px,9vw,128px)*var(--tune-space,1))}
.lg-svh h2,.lg-work h2,.lg-rev h2,.lg-aleft h2,.lg-proc h2,.lg-notes h2,.lg-ct h2{font-size:calc(clamp(34px,4.2vw,60px)*var(--tune-size,1));line-height:1}

/* services: photo cards with a price pill (2x2; phones: a snap row) */
.lg-svh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-bottom:calc(clamp(28px,3.4vw,48px)*var(--tune-space,1))}
.lg-svh p{margin-top:14px;max-width:52ch;color:var(--mute)}
.lg-all{display:inline-flex;align-items:center;gap:8px;flex:none;padding:8px 0;border-bottom:2px solid var(--ac);font-weight:600;text-decoration:none;white-space:nowrap;hyphens:manual}
.lg-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);--m-dist:20px}
.lg-sv{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;aspect-ratio:16/10;border-radius:calc(24px*var(--tune-radius,1));background:var(--dark);color:var(--ondark)}
.lg-sv-plain{background:linear-gradient(135deg,var(--dark),color-mix(in srgb,var(--dark) 62%,var(--ac)))}
.lg-sv img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.lg-sv::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,9,11,.18) 0,transparent 24%,rgba(8,9,11,.5) 48%,rgba(8,9,11,.88) 72%,rgba(8,9,11,.96) 100%)}
.lg-pill{position:absolute;top:16px;left:16px;padding:9px 14px;border-radius:999px;background:var(--surf);color:var(--ink);font:600 14px/1 var(--ft);white-space:nowrap;hyphens:manual}
.lg-sv-t{width:100%;padding:24px 88px 24px 24px}
.lg-sv h3{font-size:calc(clamp(22px,2vw,30px)*var(--tune-size,1));line-height:1.1;letter-spacing:-.025em;color:var(--ondark);hyphens:manual}
.lg-sv h3 a{color:inherit;text-decoration:none}
.lg-sv h3 a::after{content:"";position:absolute;inset:0;border-radius:calc(24px*var(--tune-radius,1))}
.lg-sv h3 a:focus-visible{outline:0}
.lg-sv h3 a:focus-visible::after{outline:3px solid var(--ondark);outline-offset:-6px}
.lg-sv p{margin-top:6px;font-size:calc(15px*var(--tune-size,1));line-height:1.45;color:var(--ondark);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lg-arrow{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ac);color:var(--onac)}
.lg-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* services: list (a clean price list) */
.lg-prices{list-style:none;padding:0;border-top:1px solid var(--line)}
.lg-prices li{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.lg-pr-name{display:grid;gap:4px;flex:1;min-width:0;text-decoration:none}
.lg-pr-name b{font:700 calc(clamp(22px,2.2vw,30px)*var(--tune-size,1))/1.1 var(--hf);letter-spacing:-.025em}
.lg-pr-name span{max-width:56ch;color:var(--mute)}
.lg-pr-price{flex:none;padding:10px 16px;border-radius:999px;background:var(--ac);color:var(--onac);font:700 18px/1 var(--hf);white-space:nowrap}

/* phone bar (Advanced, phones): "Get a price" slides up once the hero has left the screen */
.lg-bar{display:none}

/* how it works: a dark band, three big numbers joined by a thin line, the last step ends in the accent button */
.lg-proc{margin-top:calc(clamp(96px,12vw,170px)*var(--tune-space,1));padding:calc(clamp(76px,9.5vw,136px)*var(--tune-space,1)) 0;background:var(--dark);color:var(--ondark)}
.lg-proc h2{color:var(--ondark);max-width:18ch}
.lg-chain{list-style:none;padding:0;margin-top:calc(clamp(60px,7.5vw,108px)*var(--tune-space,1));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);--m-dist:20px}
.lg-chain li{position:relative}
.lg-no{position:relative;z-index:1;display:inline-block;padding-right:28px;background:var(--dark);font-size:calc(clamp(56px,5.4vw,72px)*var(--tune-size,1));line-height:1;letter-spacing:-.04em;color:var(--acd)}
.lg-chain li:not(:last-child)::before,.lg-chain li:not(:last-child)::after{content:"";position:absolute;left:0;right:calc(clamp(24px,4vw,64px) * -1);top:36px;height:1px;background:color-mix(in srgb,var(--ondark) 22%,transparent)}
.lg-chain li:not(:last-child)::after{top:35px;height:2px;background:var(--acd);transform-origin:0 50%}
.lg-chain h3{margin-top:30px;font-size:calc(clamp(22px,2.2vw,30px)*var(--tune-size,1));line-height:1.1;color:var(--ondark)}
.lg-chain p{margin-top:16px;max-width:34ch;font-size:calc(16px*var(--tune-size,1));color:color-mix(in srgb,var(--ondark) 80%,transparent)}
.lg-sbtn{margin-top:28px;padding:16px 26px}

/* recent work: three photos, the first twice as wide, a caption under each */
.lg-wgrid{list-style:none;padding:0;display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(14px,1.8vw,24px);margin-top:calc(clamp(28px,3.4vw,44px)*var(--tune-space,1));--m-dist:20px}
.lg-work figure{margin:0}
.lg-work img{width:100%;height:clamp(240px,31vw,460px);object-fit:cover;border-radius:calc(20px*var(--tune-radius,1));background:var(--tint)}
.lg-work figcaption{margin-top:14px;font-size:calc(15px*var(--tune-size,1));line-height:1.45;color:var(--mute);max-width:44ch}

/* reviews: the rating big on the left (only when the profile has a score), the review cards on the right */
.lg-rev{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}
.lg-rev-l{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(24px,4vw,56px)}
.lg-rev-l .lg-rate{margin-top:0}
.lg-rev-solo{grid-template-columns:minmax(0,1fr)}
.lg-rate{display:flex;align-items:center;gap:clamp(16px,2vw,28px);margin-top:calc(clamp(24px,3vw,40px)*var(--tune-space,1))}
.lg-rate-n{font-size:calc(clamp(76px,8.4vw,120px)*var(--tune-size,1));line-height:.9;letter-spacing:-.05em}
.lg-rate-d p{margin-top:8px;font-size:calc(15px*var(--tune-size,1));color:var(--mute)}
.lg-stars{position:relative;display:block;width:max-content;line-height:0}
.lg-stars-b,.lg-stars-f>span{display:flex;width:max-content}
.lg-stars svg{flex:none;width:22px;height:22px}
.lg-stars-b svg{fill:color-mix(in srgb,var(--ink) 16%,var(--bg))}
.lg-stars-f{position:absolute;inset:0 auto 0 0;overflow:hidden}
.lg-stars-f svg{fill:#FFB41F}
.lg-rcards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(14px,1.6vw,24px);--m-dist:20px}
.lg-rcards li{display:flex;background:var(--surf);border:1px solid var(--line);border-radius:calc(20px*var(--tune-radius,1));padding:clamp(24px,2.8vw,40px)}
.lg-rcards blockquote{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.lg-rcards p{font-size:calc(clamp(21px,2.3vw,32px)*var(--tune-size,1));line-height:1.3;letter-spacing:-.015em}
.lg-rcards p{hyphens:manual;overflow-wrap:break-word;text-wrap:pretty}
.lg-rcards em{white-space:nowrap;font-style:normal;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--ac) 38%,transparent) 0)}
.lg-rcards cite{display:block;font-style:normal;font-weight:500;font-size:calc(15px*var(--tune-size,1));color:var(--mute)}

/* where we work: the places as pills, the hours (and typical prices) in a clean table */
.lg-agrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.lg-agrid.lg-solo{grid-template-columns:minmax(0,1fr)}
.lg-aleft p{margin-top:16px;max-width:44ch;color:var(--mute)}
.lg-pills{list-style:none;padding:0;margin-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;gap:10px}
.lg-pills li{padding:12px 20px;border-radius:999px;background:var(--surf);border:1px solid var(--line);font:600 calc(17px*var(--tune-size,1))/1.2 var(--ft);letter-spacing:0;hyphens:manual}
.lg-atab{padding-top:clamp(8px,1vw,14px)}
.lg-atab .lg-kv caption{padding:0 0 10px;font-size:calc(14px*var(--tune-size,1));letter-spacing:.06em;text-transform:uppercase}
.lg-atab .lg-kv tr:first-child :is(th,td){border-top:1px solid var(--line)}
.lg-aleft .lg-kv{margin-top:clamp(24px,3vw,36px);max-width:440px}
.lg-aleft .lg-kv caption{padding:0 0 10px;font-size:calc(14px*var(--tune-size,1));letter-spacing:.06em;text-transform:uppercase}
.lg-aleft .lg-kv tr:first-child :is(th,td){border-top:1px solid var(--line)}
.lg-aleft .lg-pills{margin-top:20px}
.lg-kv{width:100%;border-collapse:collapse}
.lg-kv caption{text-align:left;padding:22px 0 6px;font-size:calc(14px*var(--tune-size,1));font-weight:600;color:var(--mute)}
.lg-kv+.lg-kv caption{padding-top:36px}
.lg-kv th,.lg-kv td{padding:15px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.lg-kv tr:last-child :is(th,td){border-bottom:0}
.lg-kv th{text-align:left;font-weight:400;padding-right:16px}
.lg-kv td{text-align:right;font-size:19px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* closing band: accent (or dark) with the price promise, the button and the phone number as big as a headline */
.lg-final{margin-top:calc(clamp(80px,11vw,148px)*var(--tune-space,1));padding:calc(clamp(44px,5vw,72px)*var(--tune-space,1)) 0;background:var(--ac);color:var(--onac)}
.lg-fdark{background:var(--dark);color:var(--ondark)}
.lg-fgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px clamp(32px,5vw,72px);align-items:center}
.lg-final h2{font-size:calc(clamp(38px,5vw,72px)*var(--tune-size,1));line-height:.95;letter-spacing:-.04em}
.lg-fmain p{margin-top:20px;max-width:46ch;font-size:calc(19px*var(--tune-size,1));line-height:1.5}
.lg-fin-act{display:flex;flex-direction:column;align-items:flex-start;gap:28px;justify-self:end}
.lg-fbtn{padding:18px 34px;font-size:calc(17px*var(--tune-size,1));background:var(--onac);border-color:var(--onac);color:var(--ac)}
.lg-fdark .lg-fbtn{background:var(--ac);border-color:var(--ac);color:var(--onac)}
.lg-call .lg-lab{color:inherit;font-size:calc(14px*var(--tune-size,1))}
.lg-call .lg-num{display:block;font-size:clamp(32px,3.8vw,56px);line-height:1.05;white-space:nowrap;text-decoration:none}
.lg-call .lg-num:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.15em}

/* footer: dark, four columns (brand and one line, services, contact, hours), small legal links */
.lg-foot{background:var(--dark);color:var(--ondark);padding-top:calc(clamp(52px,6vw,88px)*var(--tune-space,1));border-top:1px solid color-mix(in srgb,var(--ondark) 14%,transparent)}
.lg-fcols{display:flex;flex-wrap:wrap;gap:40px clamp(32px,5vw,80px)}
.lg-fbrand{flex:1 1 280px;max-width:380px}
.lg-fbrand .lg-logo{margin:0}
.lg-fbrand p{margin-top:18px;color:color-mix(in srgb,var(--ondark) 78%,transparent);max-width:32ch}
.lg-fcol{flex:1 1 170px}
.lg-fh{font:600 calc(14px*var(--tune-size,1))/1.3 var(--ft);letter-spacing:0;color:color-mix(in srgb,var(--ondark) 66%,transparent)}
.lg-fcol ul{list-style:none;padding:0;margin-top:18px;display:grid;gap:10px;font-size:calc(15.5px*var(--tune-size,1));line-height:1.45}
.lg-fcol a{text-decoration:none;color:color-mix(in srgb,var(--ondark) 92%,transparent)}
.lg-fcol a:hover{color:var(--ondark);text-decoration:underline}
.lg-fcol li b{font-weight:600}
.lg-fcol li span{color:color-mix(in srgb,var(--ondark) 78%,transparent)}
.lg-fbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:calc(clamp(40px,5vw,64px)*var(--tune-space,1));padding:22px 0 36px;border-top:1px solid color-mix(in srgb,var(--ondark) 14%,transparent);font-size:calc(13.5px*var(--tune-size,1));color:color-mix(in srgb,var(--ondark) 74%,transparent)}
.lg-flegal{display:flex;flex-wrap:wrap;gap:4px 20px;list-style:none;padding:0;margin:0 auto 0 0}
.lg-flegal a[aria-current]{color:var(--ondark)}
.lg-foot .langs{margin-top:0}

/* inner pages: a short photo header (40% of the screen), the title bottom-left over a gradient */
.lg-ph{position:relative;isolation:isolate;margin-top:calc(var(--hh) * -1);padding-top:var(--hh);min-height:max(40svh,340px);display:flex;align-items:flex-end;background:var(--dark);color:var(--ondark);overflow:hidden}
.lg-ph-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover}
.lg-ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,10,11,.74) 0,rgba(9,10,11,.3) 34%,rgba(9,10,11,.9) 100%)}
.lg-ph-in{width:100%;padding-top:calc(40px*var(--tune-space,1));padding-bottom:calc(clamp(28px,4vw,52px)*var(--tune-space,1))}
.lg-ph h1{font-size:calc(clamp(38px,5.6vw,78px)*var(--tune-size,1));line-height:.98;letter-spacing:-.04em;max-width:20ch;color:var(--ondark);hyphens:manual}
.lg-ph .lg-lede{margin-top:16px;max-width:54ch;font-size:calc(18px*var(--tune-size,1));line-height:1.5;color:color-mix(in srgb,var(--ondark) 88%,transparent)}

/* services page: one card per service */
.lg-details{padding-top:calc(clamp(32px,4vw,56px)*var(--tune-space,1))}
.lg-details>ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);--m-dist:20px}
.lg-det{display:flex;flex-direction:column;gap:16px;background:var(--surf);border:1px solid var(--line);border-radius:calc(24px*var(--tune-radius,1));padding:clamp(24px,3vw,40px);scroll-margin-top:calc(var(--hh) + 16px)}
.lg-det-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.lg-det h2{font-size:calc(clamp(26px,2.6vw,36px)*var(--tune-size,1));line-height:1.05}
.lg-pill-ac{flex:none;padding:9px 14px;border-radius:999px;background:var(--ac);color:var(--onac);font:700 14px/1 var(--ft);white-space:nowrap}
.lg-det-text{max-width:56ch;font-size:calc(17px*var(--tune-size,1));line-height:1.6}
.lg-facts{margin-top:auto;border-top:1px solid var(--line)}
.lg-facts div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:4px 16px;padding:13px 0;border-bottom:1px solid var(--line)}
.lg-facts div:last-child{border-bottom:0}
.lg-facts dt{font-size:calc(14px*var(--tune-size,1));color:var(--mute);padding-top:3px}
.lg-facts dd{font-size:calc(17px*var(--tune-size,1));line-height:1.35;letter-spacing:-.01em}
.lg-notes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-top:calc(clamp(64px,8vw,112px)*var(--tune-space,1))}
.lg-notes h2{grid-column:1/6}
.lg-nlist{grid-column:6/13;display:grid;gap:12px;align-content:start}
.lg-nlist details{background:var(--surf);border:1px solid var(--line);border-radius:calc(20px*var(--tune-radius,1));padding:0 clamp(20px,2.4vw,32px)}
.lg-nlist summary{font-size:calc(clamp(18px,1.6vw,21px)*var(--tune-size,1));line-height:1.3;padding:20px 0}
.lg-nlist summary::after{color:var(--acx);font-size:1.4em}
.lg-nlist details p{color:var(--mute);padding:0 0 22px;max-width:60ch}
.lg-nopen{grid-column:6/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.lg-nq{background:var(--surf);border:1px solid var(--line);border-radius:calc(20px*var(--tune-radius,1));padding:clamp(20px,2.2vw,28px)}
.lg-nq h3{font-size:calc(clamp(18px,1.6vw,21px)*var(--tune-size,1));line-height:1.3;margin-bottom:10px}
.lg-nq p{color:var(--mute)}

/* team page: crew cards (or a roster) and the job request form */
.lg-crew,.lg-roster{padding-top:calc(clamp(32px,4vw,56px)*var(--tune-space,1))}
.lg-crew ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(14px,1.8vw,24px);--m-dist:20px}
.lg-crew.lg-few ul{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));max-width:1000px}
.lg-badge{display:flex;flex-direction:column;overflow:hidden;background:var(--surf);border:1px solid var(--line);border-radius:calc(24px*var(--tune-radius,1))}
.lg-ini{aspect-ratio:16/9;display:flex;align-items:flex-end;padding:0 0 14px 24px;background:var(--dark)}
.lg-ini span{font-size:calc(clamp(64px,7vw,96px)*var(--tune-size,1));line-height:.9;color:var(--acd)}
.lg-badge-body{padding:22px 24px 26px}
.lg-badge h2{font-size:calc(clamp(24px,2.2vw,30px)*var(--tune-size,1));line-height:1.05}
.lg-role{font-size:calc(14px*var(--tune-size,1));color:var(--mute);margin:6px 0 12px}
.lg-badge p:not(.lg-role){color:var(--mute)}
.lg-roster ul{list-style:none;padding:0;display:grid;gap:12px;--m-dist:20px}
.lg-roster li{display:grid;grid-template-columns:96px minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(16px,2vw,24px);background:var(--surf);border:1px solid var(--line);border-radius:calc(24px*var(--tune-radius,1))}
.lg-roster .lg-ini{aspect-ratio:1;padding:0;display:grid;place-items:center;border-radius:calc(18px*var(--tune-radius,1))}
.lg-roster .lg-ini span{font-size:calc(44px*var(--tune-size,1));line-height:1}
.lg-roster h2{font-size:calc(clamp(24px,2.2vw,30px)*var(--tune-size,1));line-height:1.05}
.lg-ros-bio{color:var(--mute);max-width:60ch}
.lg-ct{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 24px;padding-top:calc(clamp(64px,8vw,112px)*var(--tune-space,1))}
.lg-ct-info{grid-column:1/6}
.lg-ct-info>p{color:var(--mute);margin:16px 0 28px;max-width:44ch}
.lg-ct .lg-facts{margin-top:0}
.lg-ct .lg-facts a{text-decoration-color:var(--acx)}
.lg-job{grid-column:7/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-content:start;background:var(--surf);border:1px solid var(--line);border-radius:calc(24px*var(--tune-radius,1));padding:clamp(22px,3vw,40px)}
.lg-job label{display:grid;gap:8px;font:600 calc(13.5px*var(--tune-size,1))/1.4 var(--ft);color:var(--mute)}
.lg-job .lg-wide,.lg-job .lg-send{grid-column:1/-1}
.lg-job input,.lg-job textarea,.lg-job select{font:500 calc(16px*var(--tune-size,1))/1.4 var(--ft);color:var(--ink);background:var(--bg);border:1.5px solid var(--field);border-radius:calc(12px*var(--tune-radius,1));padding:0 16px;height:52px;width:100%}
.lg-job textarea{resize:vertical;min-height:120px;height:auto;padding:14px 16px}
.lg-job select{appearance:none;padding-right:44px;background:linear-gradient(45deg,transparent 50%,var(--ink) 0) calc(100% - 22px) 55%/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--ink) 0) calc(100% - 16px) 55%/6px 6px no-repeat,var(--bg)}
.lg-job input:focus,.lg-job textarea:focus,.lg-job select:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.lg-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.lg-send .btn{min-height:56px;padding:0 32px}
.lg-small{font-size:calc(13.5px*var(--tune-size,1));color:var(--mute);max-width:40ch}
.lg-legal-line{font-size:calc(13px*var(--tune-size,1));color:var(--mute);padding-top:calc(clamp(56px,7vw,88px)*var(--tune-space,1))}
.lg-reach{grid-column:7/13;align-self:start;background:var(--surf);border:1px solid var(--line);border-radius:calc(24px*var(--tune-radius,1));overflow:hidden}
:where(.lg-reach) a{display:grid;gap:6px;padding:24px 28px;text-decoration:none;border-top:1px solid var(--line)}
:where(.lg-reach) a:first-child{border-top:0}
.lg-reach b{font-family:var(--hf);font-weight:var(--hw);letter-spacing:var(--ht);font-size:calc(clamp(24px,2.6vw,36px)*var(--tune-size,1));line-height:1.1;overflow-wrap:anywhere}
.lg-reach a:hover b{color:var(--acx)}

/* legal pages and 404 */
.legal-page{padding:calc(clamp(40px,7vw,96px)*var(--tune-space,1)) 0 0}
.legal-lang{font-size:calc(14px*var(--tune-size,1));color:var(--mute);margin-bottom:18px}
article.legal{max-width:760px;font-size:calc(17px*var(--tune-size,1));line-height:1.6}
article.legal h1{font:var(--hw) calc(clamp(40px,5.4vw,72px)*var(--tune-size,1))/.98 var(--hf);letter-spacing:var(--ht);margin-bottom:24px}
article.legal h2{font:var(--hw) calc(26px*var(--tune-size,1))/1.15 var(--hf);letter-spacing:var(--ht);margin:calc(44px*var(--tune-space,1)) 0 12px;padding-top:14px;border-top:1px solid var(--line)}
article.legal p,article.legal ul{margin:0 0 12px;max-width:66ch}
article.legal ul{padding-left:1.2em}
article.legal a{text-decoration-color:var(--acx);overflow-wrap:anywhere}
article.legal .legal__notice{display:inline-block;border-radius:999px;background:var(--tint);font:500 calc(13.5px*var(--tune-size,1))/1.4 var(--ft);padding:8px 16px;margin-bottom:16px}
article.legal .legal__updated{font-size:calc(14px*var(--tune-size,1));color:var(--mute)}
article.legal dl{margin:0 0 12px;background:var(--surf);border:1px solid var(--line);border-radius:calc(16px*var(--tune-radius,1));overflow:hidden}
article.legal dl div{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:2px 24px;padding:10px 18px;border-top:1px solid var(--line)}
article.legal dl div:first-child{border-top:0}
article.legal dt{color:var(--mute);font-size:calc(13.5px*var(--tune-size,1));padding-top:3px}
article.legal dd{margin:0;overflow-wrap:anywhere}
.nf{padding:calc(clamp(48px,8vw,120px)*var(--tune-space,1)) 0 0}
.nf h1{font-size:calc(clamp(48px,7.5vw,112px)*var(--tune-size,1));line-height:.95;margin-bottom:24px;max-width:14ch}
.nf p{font-size:calc(18px*var(--tune-size,1));max-width:46ch;color:var(--mute)}
.nf ul{list-style:none;padding:0;margin-top:36px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}

/* Advanced moves (.m-js = an Advanced page with its scripts running; transform and opacity only, nothing with reduced motion).
   Hero: the headline's words rise 24 px and fade one after the other (80 ms apart), the quote card rises 32 px a moment later;
   everything is done in about a second. Cards: lift 4 px and the photo grows 4% on hover; they rise 20 px once when they
   come into view (the shared reveal, --m-dist). The phone bar slides up. */
@media (prefers-reduced-motion:no-preference){
.m-js .lg-hero .lg-w{animation:lg-up24 .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(min(var(--i),7) * 80ms)}
.m-js .lg-hero .lg-lede{animation:lg-up24 .7s cubic-bezier(.2,.7,.2,1) .3s backwards}
.m-js .lg-quote{animation:lg-up32 .8s cubic-bezier(.2,.7,.2,1) .28s backwards}
.m-js .lg-trust{animation:lg-fade .5s ease .7s backwards}
.m-js .lg-ph h1,.m-js .lg-ph .lg-lede{animation:lg-up24 .7s cubic-bezier(.2,.7,.2,1) backwards}
.m-js .lg-ph .lg-lede{animation-delay:.12s}
.m-js .lg-sv,.m-js .lg-rcards li{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.m-js .lg-sv img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.m-js .lg-sv:hover,.m-js .lg-rcards li:hover{transform:translateY(-4px)}}
}
@keyframes lg-up24{from{opacity:0;translate:0 24px}}
@keyframes lg-up32{from{opacity:0;translate:0 32px}}
/* one scroll moment on Advanced pages (a CSS view timeline, ignored where unsupported): the accent progress line between
   the three steps is drawn as the band comes into view (desktop; the finished line is the still page) */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
@media (min-width:901px){
.m-js .lg-chain li:not(:last-child)::after{animation:lg-measure linear both;animation-timeline:view();animation-range:entry 35% cover 55%}}
}}
@keyframes lg-measure{from{transform:scaleX(0)}}
@keyframes lg-fade{from{opacity:0}}

/* tablet */
@media(max-width:1080px){
  .lg-hero-main{gap:32px}
  .lg-sv{aspect-ratio:4/3}
  .lg-fgrid{grid-template-columns:minmax(0,1fr)}
  .lg-fin-act{justify-self:start;flex-direction:row;flex-wrap:wrap;align-items:center;gap:28px 40px}
  .lg-notes h2,.lg-nlist,.lg-nopen{grid-column:1/-1}
  .lg-ct-info,.lg-job,.lg-reach{grid-column:1/-1}
  .lg-rev,.lg-agrid{grid-template-columns:minmax(0,1fr)}
  .lg-details>ul{grid-template-columns:minmax(0,1fr)}
}
/* phones and small tablets: header = logo + Menu; the hero is the photo (45% of the screen) with the headline over its bottom
   edge, then the card at full width on the dark ground */
@media(max-width:900px){
  :root{--hh:64px}
  .lg-links,.lg-top .nav-end{display:none}
  .lg-top nav{gap:12px}
  .lg-menu{display:block}
  .lg-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--ondark) 60%,transparent);font:600 calc(15px*var(--tune-size,1))/1 var(--ft);color:var(--ondark);background:color-mix(in srgb,var(--dark) 35%,transparent)}
  .lg-menu summary::-webkit-details-marker{display:none}
  .lg-menu[open] summary{background:var(--ondark);color:var(--dark);border-color:var(--ondark)}
  .lg-menu-sheet{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--dark);padding:4px var(--pad) 24px;box-shadow:0 30px 40px rgba(0,0,0,.3)}
  .lg-menu:not([open]) .lg-menu-sheet{display:none}
  .lg-menu-sheet ul{list-style:none;padding:0}
  :where(.lg-menu-sheet>ul) a{display:block;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--ondark) 16%,transparent);font:700 calc(24px*var(--tune-size,1))/1.2 var(--hf);letter-spacing:-.02em;text-decoration:none;color:var(--ondark)}
  .lg-menu-end{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;color:var(--ondark)}
  :where(.lg-menu-end .langs) a{display:inline-block;font-size:calc(16px*var(--tune-size,1));padding:10px 6px}
  .lg-get-btn{padding:12px 22px}

  .lg-hero{display:block;min-height:0}
  .lg-hero-ph::before{display:none}
  .lg-hero-ph{inset:0 0 auto 0;height:max(45svh,340px)}
  .lg-hero-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,10,11,.55) 0,transparent 22%,rgba(9,10,11,.1) 40%,rgba(9,10,11,.55) 70%,var(--dark) 100%)}
  .lg-hero-img{width:100%;-webkit-mask-image:none;mask-image:none}
  .lg-hero-main{display:block;padding-bottom:20px;margin-top:calc(max(calc(45svh - 64px - 128px),148px)*var(--tune-space,1))}
  .lg-hero h1{font-size:calc(clamp(38px,11.8vw,64px)*var(--tune-size,1));line-height:.96;max-width:none;margin-left:-.02em}
  .lg-hero .lg-lede{display:none}
  .lg-hero-side{width:auto;margin-top:20px}
  .lg-quote{padding:20px;border-radius:calc(20px*var(--tune-radius,1))}
  .lg-chips{margin-top:16px}.lg-chip span{min-height:44px;font-size:calc(14px*var(--tune-size,1))}
  .lg-q-field{margin-top:12px}.lg-q-field input{height:48px}
  .lg-go{margin-top:16px;height:52px}.lg-q-note{margin-top:12px}
  .lg-trust{margin-top:20px;font-size:calc(13px*var(--tune-size,1));gap:4px 8px}

  .m-js .lg-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:var(--dark);color:var(--ondark);box-shadow:0 -10px 30px rgba(0,0,0,.25);visibility:hidden;transform:translateY(110%)}
  .m-js.lg-past .lg-bar{visibility:visible;transform:none}
  .lg-bar p{display:flex;align-items:center;gap:6px;font-size:calc(15px*var(--tune-size,1));font-weight:600;line-height:1.3}
  .lg-bar-go{flex:none;padding:12px 20px;border-radius:999px;background:var(--ac);color:var(--onac);font:700 15px/1.2 var(--ft);text-decoration:none;white-space:nowrap}
  .lg-home .lg-fbar{padding-bottom:calc(96px*var(--tune-space,1))}

  /* the three steps stand in a column: the number on the left, a thin line down to the next one */
  .lg-chain{grid-template-columns:minmax(0,1fr);gap:0}
  .lg-chain li{padding:0 0 36px 84px;min-height:84px}
  .lg-chain li:last-child{padding-bottom:0}
  .lg-no{position:absolute;left:0;top:0;padding:0;background:none;font-size:calc(56px*var(--tune-size,1))}
  .lg-chain h3{margin-top:2px}
  .lg-chain li:not(:last-child)::before,.lg-chain li:not(:last-child)::after{left:24px;right:auto;top:68px;bottom:12px;width:1px;height:auto}
  .lg-chain li:not(:last-child)::after{left:23px;width:2px;top:68px;transform-origin:50% 0}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .m-js .lg-bar{transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}
  .m-js.lg-past .lg-bar{transition-delay:0s}
}
/* phones */
@media(max-width:760px){
  .lg-foot{padding-bottom:calc(72px*var(--tune-space,1))}
  .lg-logo{font-size:calc(19px*var(--tune-size,1))}
  .lg-svh{flex-direction:column;align-items:flex-start}
  .lg-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 8px;scroll-padding-inline:var(--pad);scrollbar-width:none}
  .lg-cards::-webkit-scrollbar{display:none}
  .lg-sv{flex:0 0 82vw;aspect-ratio:4/5;scroll-snap-align:start}
  .lg-sv-t{padding:20px 80px 20px 20px}
  .lg-arrow{right:16px;bottom:16px}
  .lg-prices li{flex-wrap:wrap;gap:12px}
  .lg-wgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 14px}
  .lg-wbig{grid-column:1/-1}
  .lg-work img{height:auto;aspect-ratio:1}.lg-wbig img{aspect-ratio:4/3}
  .lg-rate-n{font-size:calc(84px*var(--tune-size,1))}
  .lg-pills li{font-size:calc(16px*var(--tune-size,1));padding:11px 18px}
  .lg-kv th{font-size:calc(15px*var(--tune-size,1))}
  .lg-fin-act{flex-direction:column;align-items:flex-start;gap:24px}
  .lg-fbtn{width:100%}
  .lg-fcol{flex:1 1 100%}
  .lg-fbrand{flex-basis:100%;max-width:none}
  .lg-facts div{grid-template-columns:minmax(0,1fr)}
  .lg-nopen{grid-template-columns:minmax(0,1fr)}
  .lg-roster li{grid-template-columns:72px minmax(0,1fr);gap:8px 20px}.lg-roster .lg-ini span{font-size:calc(34px*var(--tune-size,1))}.lg-ros-bio{grid-column:1/-1;margin-top:8px}
  .lg-job{grid-template-columns:minmax(0,1fr)}
  :where(.lg-reach) a{padding:20px 22px}
  .lg-call .lg-num{white-space:normal}
}

/* the PetersCodefolio card is the footer's last row: keep it on the content column */
.lg-foot>.pcf-row{width:min(calc(100% - 2 * var(--pad)),calc(1536px - 2 * var(--pad)));margin-inline:auto;margin-top:0;padding-bottom:28px}