/* Foto Moab. Same palette and typographic voice as the Wix site: white page,
   warm grey bands, light Avenir-ish caps with wide tracking, her photographs
   doing the work. Rebuilt so it holds together at 390px as well as 1440px.

   The mangling on phones came from one thing: uppercase headings tracked at a
   fixed .19em. On a narrow screen a long word like PHOTOGRAPHER outgrows the
   viewport and the browser breaks it mid-word (PHOTO / GRAPH / ER). Fixed two
   ways at once - tracking is now viewport-scaled, and every heading word is an
   inline-block so a word can never split, only wrap whole. */
:root{
  --grey:#a3a09c;      /* the warm band grey */
  --grey-d:#8d8a86;
  --box:#b8b5b1;
  --ink:#3a3a38;
  --soft:#6f6c69;
  --line:#e3e0dc;
  --accent:#c86a33;    /* the orange from her logo */
  --max:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);
font:400 16px/1.6 "Avenir Next","Avenir",Futura,"Century Gothic","Trebuchet MS",system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:400;margin:0 0 .5em;line-height:1.2}
p{margin:0 0 1rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:.5rem 1rem;z-index:99}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Wide-tracked caps, safe at any width. Each word is its own inline-block, so
   the browser wraps between words and never inside one. */
.caps{text-transform:uppercase;font-weight:400;
letter-spacing:clamp(.07em,.02em + .55vw,.2em);
font-size:clamp(1rem,.72rem + .95vw,1.35rem);line-height:1.85}
.caps span{display:inline-block}

/* ---------------------------------------------------------------- header */
header{display:flex;align-items:center;gap:1rem;
padding:.55rem clamp(1rem,3vw,2.2rem);background:#fff;
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.logo img{width:76px;height:auto}
header nav{margin-left:auto;display:flex;align-items:center;
gap:clamp(.9rem,1.8vw,1.7rem)}
header nav>a{color:var(--soft);text-decoration:none;font-size:15.5px;
letter-spacing:.02em;padding:.2rem 0}
header nav>a:hover{color:var(--ink)}
header nav>a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.social{display:flex;gap:.45rem;margin-left:.4rem}
.social a{width:30px;height:30px;border-radius:50%;background:#9a9793;color:#fff;
display:grid;place-items:center;text-decoration:none}
.social a:hover{background:var(--accent)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;
width:44px;height:38px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--soft);margin:5px 0}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;isolation:isolate}
.hero>img{width:100%;height:min(82vh,720px);object-fit:cover;object-position:50% 62%}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(28,24,20,.34) 0%,rgba(28,24,20,.06) 42%,rgba(28,24,20,.72) 100%)}
.hero-in{position:absolute;z-index:2;inset:auto 0 0 0;text-align:center;
padding:0 clamp(1rem,5vw,2rem) clamp(2rem,7vw,4.4rem)}
.eyebrow{color:rgba(255,255,255,.82);text-transform:uppercase;
letter-spacing:.34em;font-size:.72rem;margin:0 0 .9rem}
.hero h1{color:#fff;font-weight:300;margin:0;
font-size:clamp(2rem,1rem + 6.2vw,4.6rem);
letter-spacing:clamp(.05em,.01em + 1.1vw,.22em);
text-shadow:0 2px 26px rgba(0,0,0,.4)}
/* the trailing letter-space would push the word off-centre without this */
.hero h1 span{display:inline-block;margin-right:-.22em}
.tag{color:rgba(255,255,255,.92);margin:.85rem auto 0;max-width:34ch;
font-size:clamp(.9rem,.82rem + .25vw,1.05rem);line-height:1.6;
text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hero-btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;
margin:1.4rem 0 0}
.btn{display:inline-block;background:var(--accent);color:#fff;
padding:.62rem 1.25rem;border-radius:2px;text-decoration:none;font-size:.92rem;
letter-spacing:.05em;border:1px solid var(--accent)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.75);
color:#fff;backdrop-filter:blur(2px)}
.btn.ghost:hover{background:rgba(255,255,255,.2)}

/* ---------------------------------------------------------------- split */
.split{display:grid;grid-template-columns:1fr 1fr}
.split-img img{width:100%;height:100%;min-height:400px;object-fit:cover}
.split-txt{background:var(--grey);color:#fff;display:grid;place-items:center;
padding:clamp(2.4rem,6vw,4.5rem) clamp(1.2rem,4vw,3rem)}
.split-in{max-width:40ch;text-align:center}
.split-txt h2{color:#fff;margin-bottom:1.1rem}
.split-txt p{font-size:.97rem;line-height:1.8;color:rgba(255,255,255,.95)}
.split-cta a{color:#fff;text-underline-offset:5px;
text-decoration-color:rgba(255,255,255,.6)}
.split-cta a:hover{text-decoration-color:#fff}

/* ---------------------------------------------------------------- who */
/* Full-bleed band, but the two columns are centred inside it. A max-width on
   .who itself would have pulled the grey background in with the content and
   left white gutters. */
.who{background:var(--grey-d);color:#fff;display:grid;
grid-template-columns:340px minmax(0,min(760px,100%));
gap:clamp(1.6rem,4vw,3.5rem);align-items:center;justify-content:center;
padding:clamp(2.6rem,6vw,4.6rem) clamp(1.2rem,6vw,5rem)}
.who-img img{width:100%;max-width:340px;border:7px solid #fff;
box-shadow:0 6px 24px rgba(0,0,0,.18)}
.who-txt h2{color:#fff;margin-bottom:1.1rem}
.who-box{background:rgba(255,255,255,.14);border-left:3px solid var(--accent);
padding:1.3rem 1.5rem}
.who-box p{margin:0;font-size:.95rem;line-height:1.85;color:#fff}

/* ---------------------------------------------------------------- quick */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--line);border-bottom:1px solid var(--line)}
.quick a{background:#fff;padding:clamp(1.4rem,3vw,2.2rem);text-decoration:none;
display:grid;gap:.4rem;align-content:start}
.quick a:hover{background:#faf8f6}
.quick b{font-weight:400;text-transform:uppercase;letter-spacing:.14em;
font-size:.86rem;color:var(--ink)}
/* A CSS unicode escape must be terminated or the parser keeps eating digits -
   "92" followed by nothing rendered as the literal text "92". Use the
   character itself and the ambiguity disappears. */
.quick b::after{content:" →";color:var(--accent)}
.quick span{color:var(--soft);font-size:.92rem;line-height:1.6}

/* ------------------------------------------------------------ services */
.cards{position:relative;display:grid;isolation:isolate}
.cards-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cards::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(20,18,16,.28),rgba(20,18,16,.42))}
.cards-head{position:absolute;z-index:3;inset:0 0 auto 0;
padding:clamp(1.4rem,4vw,2.6rem) 1rem 0;text-align:center}
.cards-head h1{color:#fff;margin:0;text-transform:uppercase;font-weight:300;
font-size:clamp(1.1rem,.8rem + 1.1vw,1.8rem);
letter-spacing:clamp(.06em,.02em + .5vw,.18em);
text-shadow:0 2px 18px rgba(0,0,0,.5)}
.cards-wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
gap:clamp(1rem,3vw,2.4rem);align-items:start;max-width:var(--max);margin:0 auto;
padding:clamp(4.6rem,9vw,7rem) clamp(1rem,4vw,3rem) clamp(1.6rem,5vw,3.6rem)}
.card{background:rgba(255,255,255,.95);padding:clamp(1.2rem,2.6vw,1.8rem);
border-radius:3px;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.card h1,.card h2{font-size:clamp(1.2rem,1rem + .6vw,1.5rem);margin-bottom:.6rem}
.card p{font-size:.96rem;line-height:1.65}
.card p:last-child{margin-bottom:0}
.card .small{font-size:.86rem;color:var(--soft)}

/* ------------------------------------------------------------ portfolio */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
padding:8px;max-width:1600px;margin:0 auto}
.grid figure{margin:0}
.grid button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.grid img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:opacity .3s}
.grid button:hover img{opacity:.85}

dialog#lb{border:0;padding:0;width:100%;height:100%;max-width:100vw;
max-height:100vh;background:rgba(18,16,14,.97);display:none}
dialog#lb[open]{display:grid;place-items:center}
dialog#lb::backdrop{background:rgba(18,16,14,.9)}
dialog#lb img{max-width:94vw;max-height:82vh;width:auto;object-fit:contain}
.lb-c{position:absolute;bottom:1rem;left:0;right:0;text-align:center;color:#ddd;
font-size:.88rem;padding:0 3rem}
.lb-x,.lb-p,.lb-n{position:absolute;background:none;border:0;color:#fff;
font-size:2.3rem;line-height:1;cursor:pointer;padding:.6rem}
.lb-x{top:.3rem;right:.8rem}
.lb-p{left:.2rem;top:50%;transform:translateY(-50%)}
.lb-n{right:.2rem;top:50%;transform:translateY(-50%)}

/* -------------------------------------------------------------- contact */
.contact{display:grid;grid-template-columns:360px 1fr;
gap:clamp(1.6rem,4vw,3.5rem);max-width:var(--max);margin:0 auto;
padding:clamp(1.8rem,4vw,3rem) clamp(1.2rem,5vw,3rem) 3rem;align-items:start}
.c-img img{border-radius:3px;width:100%}
.c-body h1{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.c-lines{font-size:.97rem;line-height:1.75;color:var(--soft)}
#q p{display:grid;grid-template-columns:140px 1fr;gap:.9rem;align-items:start;
margin:.5rem 0}
#q label{text-align:right;font-size:.9rem;color:var(--soft);padding-top:.55rem}
#q input,#q textarea{background:#efedea;border:1px solid transparent;
border-radius:3px;padding:.6rem .75rem;font:inherit;font-size:.95rem;width:100%}
#q input:focus,#q textarea:focus{border-color:var(--accent);outline:0;background:#fff}
#q .send{grid-template-columns:1fr;justify-items:end}
#q button{background:var(--accent);color:#fff;border:0;border-radius:2px;
padding:.55rem 1.4rem;font:inherit;font-size:.95rem;cursor:pointer;
letter-spacing:.04em}
#q .small{display:block;font-size:.82rem;color:#8b8884}
.hp{position:absolute;left:-9999px}

/* ---------------------------------------------------------------- store */
.store{max-width:68ch;padding:clamp(2rem,5vw,3.4rem) clamp(1.2rem,5vw,3rem) 1rem}
.store h1{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.store p{color:var(--soft)}
.storecta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.btn.ghost.dark{background:#fff;border-color:var(--line);color:var(--ink)}
.btn.ghost.dark:hover{background:#faf8f6}
.strip{padding:clamp(1.4rem,4vw,2.6rem) clamp(1rem,4vw,2rem) clamp(2rem,5vw,3.4rem);
max-width:var(--max);margin:0 auto}
.strip h2{color:var(--soft);text-align:center;margin-bottom:1.2rem}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.strip-grid a{display:block;overflow:hidden}
.strip-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s}
.strip-grid a:hover img{transform:scale(1.04)}

/* --------------------------------------------------------------- footer */
footer{background:var(--grey);color:#fff;
padding:clamp(1.4rem,3vw,2rem) clamp(1.2rem,4vw,2.4rem);
display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;
justify-content:space-between}
footer p{margin:0;font-size:.85rem}
footer a{color:#fff;text-underline-offset:3px}
.fcopy{color:rgba(255,255,255,.8)}
/* keep "Call or Text: (435) 200-5211" from splitting across lines on a phone */
.nb{white-space:nowrap}
.sep{opacity:.6;padding:0 .15rem}

/* ------------------------------------------------------------ responsive */
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .split,.who,.cards-wrap,.contact{grid-template-columns:1fr}
  .split-img img{min-height:0;aspect-ratio:4/3}
  .who{justify-items:center;text-align:center}
  .who-img img{max-width:min(70vw,300px)}
  .who-box{border-left:0;border-top:3px solid var(--accent);text-align:left}
  .quick{grid-template-columns:1fr}
  .burger{display:block}
  header nav{position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;align-items:flex-start;gap:1rem;
    padding:1.1rem clamp(1rem,3vw,2.2rem) 1.4rem;
    border-bottom:1px solid var(--line);display:none;box-shadow:0 10px 24px rgba(0,0,0,.08)}
  header nav.open{display:flex}
  header nav>a{font-size:1.05rem}
  .social{margin-left:0;padding-top:.2rem}
  #q p{grid-template-columns:1fr;gap:.3rem}
  #q label{text-align:left}
  #q .send{justify-items:stretch}
  #q button{width:100%;padding:.8rem}
  footer{flex-direction:column;align-items:flex-start}

  /* Services: on a phone the two cards covered the whole photograph, so the
     page read as white boxes on white. Drop the overlay - the picture becomes
     a banner with the page title, the cards stack underneath on white. */
  .cards{display:block;background:#fff;isolation:auto}
  .cards-bg{position:relative;height:clamp(180px,38vw,240px);object-position:50% 58%}
  .cards::after{inset:0 0 auto 0;height:clamp(180px,38vw,240px)}
  .cards-head{height:clamp(180px,38vw,240px);display:grid;place-items:center;
    padding:0 1rem}
  .cards-wrap{padding:1.3rem 1rem 2.2rem;gap:1.1rem}
  .card{box-shadow:0 2px 10px rgba(0,0,0,.10);background:#fff;
    border:1px solid var(--line)}
}
@media(max-width:700px){.strip-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .hero>img{height:min(72vh,560px)}
  .grid{grid-template-columns:1fr;gap:6px;padding:6px}
  .logo img{width:64px}
  .storecta .btn{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.q-note{min-height:1.3em;margin:.4em 0 0}
.q-note.ok{color:#2f6f4f;font-weight:600}
.q-note.err{color:#a2402c;font-weight:600}