/* Polo's Scottsdale Barber Shop — "Scottsdale Road sun" look.
   Cocoa + sand + sunset stripes (orange / clay / gold). Rammetto One + Readex Pro. */
:root{
  --cocoa:#2b1d1a; --cocoa2:#3d2a25; --sand:#f5ead9; --sand2:#ead9c0;
  --sun:#c94f1c;  /* text-safe orange on sand */ --clay:#9a3d22; --gold:#e8a83a;
  --ink:#241815; --muted:#5e4a40;
  --disp:"Rammetto One",Georgia,serif; --body:"Readex Pro",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--body);font-weight:400;font-size:1.04rem;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:var(--clay)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
.skip-link{position:absolute;left:-9999px;top:6px;z-index:999;background:var(--cocoa);color:var(--sand);padding:10px 14px}
.skip-link:focus{left:6px}
.demo-note{margin:0;background:var(--gold);color:var(--cocoa);text-align:center;font-size:.85rem;padding:6px 12px;font-weight:600}

/* sunset stripes: reused as the brand mark */
.stripes{height:18px;background:linear-gradient(var(--gold) 0 33.3%,var(--sun) 33.3% 66.6%,var(--clay) 66.6%)}

/* header: crest in the middle, two links each side */
.bar{position:sticky;top:0;z-index:50;background:var(--cocoa);color:var(--sand);border-bottom:6px solid var(--sun);box-shadow:0 6px 0 var(--gold)}
.bar-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px;min-height:68px}
.bar-nav{display:none}
.crest{text-decoration:none;color:var(--sand);display:flex;flex-direction:column;line-height:1}
.crest-top{font-family:var(--disp);font-size:1.6rem;color:var(--gold)}
.crest-bot{font-size:.72rem;letter-spacing:.06em;font-weight:600;margin-top:4px}
.nav-toggle{background:none;border:2px solid var(--sand);color:var(--sand);width:46px;height:42px;font-size:1.5rem;cursor:pointer;line-height:1}
.mobile-menu{display:none;padding:4px 18px 18px;background:var(--cocoa)}
.mobile-menu.is-open{display:block}
.mobile-menu a{display:block;color:var(--sand);text-decoration:none;font-family:var(--disp);font-size:1.3rem;padding:10px 0;border-bottom:1px solid var(--cocoa2)}
.mobile-menu .mm-call{color:var(--gold);border:0}
@media (min-width:860px){
  .bar-in{display:grid;grid-template-columns:1fr auto 1fr}
  .bar-nav{display:flex;gap:28px}
  .bar-r{justify-content:flex-end}
  .bar-nav a{color:var(--sand);text-decoration:none;font-weight:600;padding:6px 0;border-bottom:3px solid transparent}
  .bar-nav a:hover{border-bottom-color:var(--gold)}
  .crest{align-items:center;text-align:center}
  .nav-toggle,.mobile-menu{display:none!important}
}

/* buttons: flat slabs with a stripe underline */
.btn-sun,.btn-plain{display:inline-block;font-family:var(--body);font-weight:600;font-size:1rem;text-decoration:none;padding:13px 22px;border:0;cursor:pointer;border-radius:0}
.btn-sun{background:var(--cocoa);color:var(--sand);box-shadow:inset 0 -5px 0 var(--sun)}
.btn-sun:hover{box-shadow:inset 0 -9px 0 var(--sun)}
.btn-plain{background:transparent;color:var(--cocoa);border-bottom:3px solid var(--cocoa);padding:13px 2px}

/* hero "window": photo pane with the sand card sitting low on it */
.window{position:relative;max-width:1240px;margin:0 auto;padding:22px 18px 0}
.window-pane{background:var(--cocoa2);position:relative}
.window-pane img{width:100%;height:56vw;max-height:560px;object-fit:cover}
.pane-note{position:absolute;left:10px;top:2px}
.window-card{background:var(--sand);position:relative;margin:-48px 12px 0;padding:26px 22px 28px;}
.window-card .stripes{margin:-26px -22px 22px}
@media (min-width:900px){.window-card .stripes{margin:-34px -34px 26px}}
.window-card h1{font-size:clamp(1.9rem,6.4vw,3.4rem);color:var(--cocoa)}
.window-card p{color:var(--muted);max-width:52ch}
.wc-act{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:18px}
@media (min-width:900px){
  .window{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;padding-top:34px}
  .window-pane{grid-column:1/10;grid-row:1}
  .window-pane img{height:560px}
  .window-card{grid-column:7/13;grid-row:1;margin:0 0 -40px;padding:34px 34px 36px}
}

/* chair-time dial (signature) */
.clock{background:var(--cocoa);color:var(--sand);margin-top:70px;padding:70px 18px}
.clock-in{max-width:1080px;margin:0 auto;display:grid;gap:36px}
.clock-dial{position:relative;max-width:300px;width:100%;margin:0 auto}
.clock-dial svg{width:100%;height:auto}
.dial-track{fill:none;stroke:var(--cocoa2);stroke-width:22}
.dial-arc{fill:none;stroke:var(--gold);stroke-width:22;stroke-linecap:butt;transition:stroke-dasharray .5s ease}
.dial-ticks line{stroke:var(--sand);stroke-width:3}
.dial-read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;text-align:center}
.dial-min{font-family:var(--disp);font-size:3.6rem;line-height:1;color:var(--gold)}
.dial-read span{font-size:.9rem;max-width:9ch}
.clock-list h2{font-size:clamp(1.8rem,5vw,2.8rem);color:var(--gold)}
.clock-lede{max-width:46ch}
.svc-pick{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.svc-pick button{font:600 .95rem var(--body);background:transparent;color:var(--sand);border:2px solid var(--sand2);padding:10px 14px;cursor:pointer;border-radius:0}
.svc-pick button[aria-pressed="true"]{background:var(--gold);color:var(--cocoa);border-color:var(--gold)}
.svc-note{min-height:3.2em;margin:16px 0 0;font-size:1.05rem}
@media (min-width:860px){.clock-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}}

/* walk-ins: big left-aligned statement + offset photo stack */
.comeby{max-width:1180px;margin:0 auto;padding:80px 18px;display:grid;gap:34px}
.comeby h2{font-size:clamp(2.4rem,9vw,5rem);color:var(--sun);margin-bottom:.25em}
.comeby-in p{font-size:1.12rem;max-width:40ch}
.comeby-row{display:flex;gap:14px 22px;flex-wrap:wrap;align-items:center;margin-top:16px}
.comeby-pics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.comeby-pics button{padding:0;border:0;background:var(--sand2);cursor:zoom-in;display:block}
.comeby-pics img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.comeby-pics button:first-child{grid-row:span 2}
.comeby-pics button:first-child img{aspect-ratio:auto}
@media (min-width:900px){.comeby{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}}

/* reviews: two staggered quotes on stripes */
.words{background:var(--sand2);padding:70px 18px;border-top:18px solid var(--clay);position:relative}
.words-in{max-width:1080px;margin:0 auto;display:grid;gap:26px}
.w-q{margin:0;background:var(--sand);padding:26px 24px;border-left:8px solid var(--sun)}
.w-q blockquote{margin:0 0 12px;font-size:1.1rem}
.w-q figcaption{font-size:.88rem;color:var(--muted);font-weight:600}
.w-q figcaption a{color:var(--clay)}
@media (min-width:860px){.words-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.w-b{margin-top:60px}.w-a{margin-bottom:60px}}

/* reach */
.reach{padding:80px 18px}
.reach-in{max-width:1180px;margin:0 auto;display:grid;gap:40px}
.reach h2{font-size:clamp(1.7rem,4.6vw,2.6rem);color:var(--cocoa)}
.r-addr{font-size:1.15rem;font-weight:600}
.r-tel{font-family:var(--disp);font-size:1.5rem;text-decoration:none;color:var(--sun)}
.r-map{width:100%;height:300px;border:0;border-top:8px solid var(--gold);background:var(--sand2);margin-top:14px}
.r-form{background:var(--cocoa);color:var(--sand);padding:28px 22px}
.r-form h2{color:var(--gold)}
.field{margin:0 0 16px}
.field label{display:block;font-weight:600;margin-bottom:6px}
.field input,.field textarea{width:100%;font:inherit;padding:11px 12px;border:2px solid var(--sand2);background:var(--sand);color:var(--ink);border-radius:0}
.r-form .btn-sun{background:var(--gold);color:var(--cocoa);box-shadow:inset 0 -5px 0 var(--sun)}
.field-error{display:none;color:#ffd0b8;font-size:.88rem;margin:4px 0 0}
.field.has-error .field-error{display:block}
.form-success{display:none;padding:12px 0}
.form-success.is-visible{display:block}
.form-success h3{color:var(--gold)}
@media (min-width:900px){.reach-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

/* footer: stripes + one line */
.base{background:var(--cocoa);color:var(--sand);padding:0 18px 26px;text-align:center}
.base::before{content:"";display:block;height:18px;margin:0 -18px 24px;background:linear-gradient(var(--gold) 0 33.3%,var(--sun) 33.3% 66.6%,var(--clay) 66.6%)}
.base-name{font-family:var(--disp);font-size:1.4rem;color:var(--gold);margin:0 0 6px}
.base p{margin:0}
.base a{color:var(--sand)}

/* lightbox (main.js) */
.lightbox{position:fixed;inset:0;z-index:500;background:rgba(30,20,17,.95);display:none;align-items:center;justify-content:center;padding:56px 16px}
.lightbox.is-open{display:flex}
.lightbox img{max-height:82vh;max-width:min(1100px,100%);object-fit:contain}
.lightbox-caption{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--sand);font-size:.92rem}
.lightbox-btn{position:absolute;width:46px;height:46px;border:2px solid var(--gold);background:var(--cocoa);color:var(--gold);font-size:1.5rem;cursor:pointer}
.lightbox-close{top:12px;right:12px}.lightbox-prev{left:10px;top:50%}.lightbox-next{right:10px;top:50%}