/* Preview base, shared by every look. Palette and fonts arrive as tokens in an inline <style> from the brand; the
   look's own stylesheet (looks/<id>.css, loaded after this one) gives the page its character: type scale, header,
   hero, section rhythm, services, gallery, proof. What stays here works for every look, so a look that never uses
   a variant need not style it.
   Pairings used: ink on paper/surface, accent-text on paper/surface, accent-ink on accent, on-deep on deep. */
:root{--gutter:clamp(20px,4.5vw,48px);--wrap:1240px;--r:4px;--line-deep:color-mix(in srgb,var(--on-deep) 22%,transparent);--edge:color-mix(in srgb,var(--ink) 18%,transparent)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.65 var(--font-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* A photo's <picture> only chooses the file (the phone copy on a narrow screen); the img lays out as if it stood alone. */
picture{display:contents}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
h1,h2,h3{font-synthesis:none;margin:0 0 .45em;text-wrap:balance;overflow-wrap:break-word}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--accent-text);text-underline-offset:.18em}
.container{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.container--narrow{max-width:calc(760px + 2 * var(--gutter))}

/* Buttons: shape and colour; the look gives them their corners and type. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.75em 1.4em;text-decoration:none;border:1.5px solid transparent;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn--lg{padding:1em 1.75em}
.btn--accent{background:var(--accent);color:var(--accent-ink)}
.btn--accent:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.btn--ghost:hover{background:color-mix(in srgb,currentColor 12%,transparent)}

/* Preview banner: the agency's note, kept quiet. */
.preview-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;padding:10px var(--gutter);background:var(--ink);color:var(--paper);font-size:13px;line-height:1.45;box-shadow:0 1px 0 rgba(255,255,255,.1)}
.preview-banner strong{font-weight:600}
.preview-banner a{color:var(--paper);font-weight:600;text-decoration-thickness:1px}
.preview-banner__actions{display:flex;flex-wrap:wrap;gap:2px 16px;white-space:nowrap}
.preview-banner :focus-visible{outline-color:var(--paper)}

/* Header: whatever its variant, the links and the call button wait for a wide screen; phones have the call bar. */
.nav__brand{color:var(--ink);text-decoration:none;overflow-wrap:anywhere;display:inline-flex;align-items:center;gap:10px}
/* The logo at the size its width and height give it (the look's height, never past its own); a narrow screen shrinks it. */
.nav__logo{display:block;height:auto;max-width:100%;flex:none}
.nav__logo--wordmark{flex:0 1 auto}
/* A brand's own logo height, past the look's cap; phones keep it to 64px so the header does not crowd the call button. */
.nav__logo[style*="--logo-h"]{max-height:var(--logo-h)}
@media (max-width:600px){.nav__logo[style*="--logo-h"]{max-height:min(var(--logo-h),64px)}}
/* A logo with an opaque background on a chip of that colour, so its edges do not show against the header. */
.nav__logo[style*="--logo-bg"]{background:var(--logo-bg);padding:4px 8px;border-radius:4px;box-sizing:content-box}
.nav__links{display:none}
.nav__links a{color:var(--ink);text-decoration:none}
.nav__call{display:none}

/* Hero: what every treatment shares. */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero__media{position:relative}
.hero__img{width:100%;height:100%;object-fit:cover}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__proof{margin:0}
.hero__owner{margin:16px 0 0;font-size:15px;opacity:.84} /* quiet by default, in the hero's own colour; a look may make it the owner's line */

/* Placeholder photos and their captions. */
.ph{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--line)}
.ph img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hero__ph,.ph figcaption{position:absolute;z-index:2;font-size:11.5px;line-height:1.3;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.66);color:#fff;pointer-events:none}
.hero__ph{right:16px;bottom:16px}
.ph figcaption{left:12px;bottom:12px}

/* Bands: the tinted and the deep sections, whatever their spacing. */
.section--tint{background:var(--surface)}
.section--deep{background:var(--deep);color:var(--on-deep)}
.section--deep .kicker{color:var(--on-deep)}
.section--deep .lede{color:var(--on-deep);opacity:.84}
.section--deep a:not(.btn){color:var(--on-deep)}
.section--deep :focus-visible{outline-color:var(--on-deep)}

.grid{display:grid;gap:20px}

.faq{max-width:760px;margin-top:clamp(24px,3vw,40px);border-bottom:1px solid var(--edge)}
.faq__item{border-top:1px solid var(--edge)}
.faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font:600 clamp(18px,1.6vw,20px)/1.4 var(--font-body);cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";flex:none;width:14px;height:14px;color:var(--accent-text);background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform .25s ease}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{margin:0 0 26px;color:var(--muted);max-width:60ch}

.grid--contact{grid-template-columns:minmax(0,1fr);gap:56px;align-items:start}
.contact__line{margin:0 0 14px}
.contact__line .btn{margin-top:12px}
.form{background:var(--paper);color:var(--ink);padding:clamp(24px,3.5vw,44px);border-radius:6px}
.form fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:18px}
.form label{display:grid;gap:8px;font-weight:600;font-size:14px}
.form input,.form textarea{width:100%;font:400 16px/1.4 var(--font-body);color:var(--ink);padding:13px 14px;border:1px solid var(--edge);border-radius:6px;background:var(--surface)}
.form textarea{resize:vertical;min-height:120px}
.form .btn{justify-self:start;margin-top:4px;cursor:not-allowed}
.form__note{margin:18px 0 0;font-size:14px;color:var(--muted)}
.form :focus-visible{outline-color:var(--accent-text)}

.footer{padding:56px 0 128px;font-size:15px;color:var(--muted)}
.footer strong{font:700 20px/1.2 var(--font-display);font-synthesis:none;color:var(--ink)}
.footer p{margin:0 0 10px}
.footer__credit{font-size:13px}

/* Phones: a call button that is always in reach. */
.callbar{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 20px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 17px/1 var(--font-body);text-decoration:none;box-shadow:0 12px 32px -10px rgba(0,0,0,.5)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:80ms}
.reveal:nth-child(3){transition-delay:160ms}

/* Phones: the smaller gallery tiles are too small to carry a caption over the photo, so it drops below it. The tiles
   are the ones a look leaves in the two-column rows, beside the full-width first (and an even count's last). */
@media (max-width:759px){
  .gallery__item:not(:first-child):not(:nth-child(even):last-child){overflow:visible;background:none}
  .gallery__item:not(:first-child):not(:nth-child(even):last-child) img{border-radius:var(--r)}
  .gallery__item:not(:first-child):not(:nth-child(even):last-child) figcaption{position:static;padding:6px 0 4px;background:none;color:var(--muted);font-size:11.5px}
}

@media (min-width:760px){
  .preview-banner{position:sticky;top:0;z-index:30;font-size:14px}
}

@media (min-width:960px){
  .grid--contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,112px)}
}

@media (min-width:1024px){
  .nav__links{display:flex}
  .nav__call{display:inline-flex}
  .callbar{display:none}
  .footer{padding-bottom:56px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.faq__item summary::after{transition:none}
  .btn:hover{transform:none}
}