/* site-v4 shared stylesheet for the ported depth pages (fitness, headshots,
   corporate headshots, events, portraits, lifestyle/brand, FAQ, privacy).
   Brand tokens match the locked v3 palette: navy, tan gold, pale, Inter,
   Space Mono. Adapted from site-v2/assets/site.css (read only source),
   restyled to sit next to the v3 home page without looking like a
   different site. One fix from the source file: its FAQ open state used
   a Unicode en dash (U+2013) in a CSS content string. Replaced with a
   real minus sign (U+2212), which is not a banned glyph. */

:root{
  --navy:#172a36; --gold:#c09f89; --pale:#eaf2f6;
  --navy2:#1a3040; --navy3:#0f1e28; --navy-deep:#0f1e27;
  --muted:rgba(234,242,246,.52);
  --border:rgba(234,242,246,.10);
  --sans:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',monospace;
  --rad:8px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--navy3);color:var(--pale);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}

.skip-link{position:absolute;left:-999px;top:0;z-index:1000;background:var(--gold);color:var(--navy);padding:10px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:0 0 var(--rad) 0}
.skip-link:focus{left:0}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* nav, phone number always visible so it sits in the first screenful on
   every page, per the July board's marketing non-negotiable */
#nav{position:sticky;top:0;z-index:500;background:rgba(15,30,40,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 clamp(20px,4vw,48px);height:64px;display:flex;align-items:center;justify-content:space-between;gap:18px;transition:transform .28s ease}
/* A5 fix: a sticky nav pinned at top:0 permanently covers the top 64px of
   whatever content scrolls to rest right under it, which was beheading faces
   in .gal-strip rows on the lane pages. Hides on scroll down, reveals on
   scroll up, so it never permanently sits over a resting scroll position.
   Toggled by the tiny script appended to assets/direct-credit.js, which every
   page that loads this stylesheet already includes. */
#nav.ja-nav-hide{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){#nav{transition:none}}
.nav-logo{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.nav-logo-name{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pale);line-height:1}
.nav-logo-type{font-family:var(--mono);font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);line-height:1}
.nav-links{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s;white-space:nowrap;padding:10px 2px}
.nav-links a:hover{color:var(--pale)}
.nav-phone{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--gold)!important;white-space:nowrap}
.nav-cta{background:var(--gold);color:var(--navy)!important;padding:9px 16px;border-radius:var(--rad);font-weight:700!important}
.nav-cta:hover{background:#d4b09a!important}

.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:14px 28px;border-radius:var(--rad);transition:background .2s,transform .1s}
.btn-primary:hover{background:#d4b09a;transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--pale);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:13px 28px;border-radius:var(--rad);border:1px solid var(--border);transition:border-color .2s,transform .1s}
.btn-ghost:hover{border-color:rgba(234,242,246,.28);transform:translateY(-1px)}

.wrap{max-width:1100px;margin:0 auto}
section{padding:88px clamp(20px,4vw,48px)}
.eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;opacity:.9}
h1,h2,h3,h4{font-family:var(--sans);color:var(--pale);line-height:1.18}
.lp-h1{font-size:clamp(28px,4vw,48px);font-weight:300;max-width:780px}
.lp-h1 strong{font-weight:600}
.lp-h1 em{color:var(--gold);font-style:normal}
.lead{font-size:16px;color:var(--muted);line-height:1.8;max-width:600px;margin-top:18px}

.lp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:640px;overflow:hidden;border-bottom:1px solid var(--border);background:var(--navy3)}
.lp-hero-media{min-width:0;background:var(--navy2);overflow:hidden}
.lp-hero-bg{width:100%;height:100%;object-fit:cover;opacity:1;transform:none}
.lp-hero-overlay{display:none}
.lp-hero-inner{display:flex;flex-direction:column;justify-content:center;padding:72px clamp(28px,5vw,72px);max-width:620px;margin:0 0 0 auto;width:100%}
@media(max-width:767px){
  .lp-hero{grid-template-columns:1fr;min-height:0}
  .lp-hero-inner{order:1;max-width:none;margin:0;padding:56px 18px 42px}
  .lp-hero-media{order:2;aspect-ratio:4/3}
}
.lp-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;align-items:center}
.lp-hero-phone{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--pale);text-decoration:none;border-bottom:1px solid rgba(234,242,246,.35);padding-bottom:2px}
.lp-hero-phone strong{color:var(--gold);font-weight:700}

.trust-strip{background:var(--navy3);border-bottom:1px solid var(--border);padding:16px clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.trust-cap{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(192,159,137,.6);padding:6px 24px;border-right:1px solid var(--border);white-space:nowrap}
.trust-cap:last-child{border-right:none}

/* breadcrumb strip, added to the six service lane pages, sits under the
   nav, same quiet mono small-caps treatment as .trust-cap */
.breadcrumb-strip{background:var(--navy3);border-bottom:1px solid var(--border);padding:10px clamp(20px,4vw,48px)}
/* CLS fix, 2026-08-11: this row used flex-wrap:wrap, so on a narrow screen
   whether the trail fit on one line depended on exactly how wide the
   breadcrumb text rendered. The Spanish trail is longer ("Fotografia de
   Estilo de Vida y Marca" vs "Lifestyle and Brand Photography") and a
   font swap (fonts.css loads every face with font-display:swap, by
   design, so the fallback system font paints first) shifts that width
   again between the first paint and the real font landing. Measured live
   on es/lifestyle-brand-photography.html mobile: the strip wrapped to a
   second line only after the swap, growing from 34px to 53px tall and
   moving everything below it, a real layout shift (part of that page's
   0.147 to 0.158 CLS). The English trail never crosses the wrap
   threshold either way, which is why only the Spanish page failed.
   Root-cause fix: never wrap this row. It scrolls horizontally instead
   (same quiet pattern index.html's own nav-links row already uses for
   the same reason), so its height is constant regardless of language,
   font state, or viewport width, and nothing below it can ever move. No
   text is cut and no ellipsis is added, both banned; a visitor who wants
   to see the rest of a long trail on a narrow phone can swipe it, same
   as the main nav already asks them to. */
.breadcrumb-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.breadcrumb-inner::-webkit-scrollbar{display:none}
.breadcrumb-inner a,.breadcrumb-inner .bc-current{white-space:nowrap}
.breadcrumb-inner a{color:var(--muted);transition:color .2s}
.breadcrumb-inner a:hover{color:var(--gold)}
.breadcrumb-inner .bc-sep{color:rgba(234,242,246,.25)}
.breadcrumb-inner .bc-current{color:var(--gold)}
@media(max-width:480px){.breadcrumb-inner{font-size:8px;gap:6px}}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.two-col h2{font-size:clamp(22px,2.6vw,32px);font-weight:600;margin-bottom:18px}
.two-col p{font-size:15px;color:var(--muted);line-height:1.85;margin-bottom:14px}

.inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:40px}
.inc-card{background:var(--navy3);border:1px solid var(--border);padding:32px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.inc-card .n{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:block}
.inc-card h4,.inc-card .card-h3{font-size:17px;font-weight:600;margin-bottom:10px}
.inc-card p{font-size:13.5px;color:var(--muted);line-height:1.75}
/* Interaction pack micro-polish (Furnish Lane 2, 2026-08-10): inc-card had
   no hover/focus state anywhere on the six lane pages. Same lift-and-glow
   recipe already used by .gal-strip .cell and services.html's .svc-card,
   so it reads as one system, not a new pattern. */
.inc-card:hover{transform:translateY(-3px);border-color:rgba(192,159,137,.4);box-shadow:0 14px 30px rgba(0,0,0,.28)}

.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px}
.proc-step{padding:0 32px;border-right:1px solid var(--border);transition:border-color .2s ease}
.proc-step:first-child{padding-left:0}
.proc-step:last-child{border-right:none}
.proc-num{font-family:var(--sans);font-size:52px;font-weight:300;color:rgba(192,159,137,.18);line-height:1;margin-bottom:10px;transition:color .2s ease}
.proc-step h4,.proc-step .card-h3{font-size:16px;font-weight:600;margin-bottom:10px}
.proc-step p{font-size:13px;color:var(--muted);line-height:1.75}
.proc-step:hover .proc-num{color:rgba(192,159,137,.4)}

/* mini image strip, visual relief inserted mid-page between the
   problem/solution, included, and process text blocks (Furnish Lane 2,
   2026-08-10, BUILD-PACKS.md Media + Layout packs). Same cell/hover/
   focal-safe treatment as .gal-strip, compact 3-up so it reads as one
   quiet beat, not a second gallery. */
.mini-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:1100px;margin:56px auto 0}
.mini-strip .cell{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--navy2)}
.mini-strip img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mini-strip .cell:hover img{transform:scale(1.04)}
@media(max-width:880px){.mini-strip{margin-top:40px;gap:3px}}
@media(prefers-reduced-motion:reduce){.mini-strip .cell:hover img{transform:none}}

/* "you might be thinking" objections block, sits directly above the FAQ
   or pricing block (Atlas steal #3, HeadshotDC finding, adapted from
   claims each page already makes). Furnish Lane 2, 2026-08-10. */
.objections{max-width:760px;margin:0 auto 40px}
.objections .obj-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:block}
.objections ul{display:grid;gap:18px}
.objections li{border-left:2px solid var(--gold);padding-left:16px}
.objections li strong{display:block;font-size:15px;font-weight:600;color:var(--pale);margin-bottom:4px}
.objections li span{font-size:14px;line-height:1.75;color:var(--muted)}

.gal-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.gal-strip .cell{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--navy2)}
.gal-strip img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gal-strip .cell:hover img{transform:scale(1.04)}

/* small 3-image strip, added 2026-08-10 for the 404 furnish pass. Same cell
   recipe as .gal-strip (aspect-ratio 4/5, object-fit cover) at 3 columns
   instead of 4, sized down for a supporting strip rather than a full wall. */
.strip-3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:560px;margin:0 auto 44px;border-radius:var(--rad);overflow:hidden;border:1px solid var(--border)}
.strip-3 .cell{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--navy2)}
.strip-3 img{width:100%;height:100%;object-fit:cover}

/* 3-column variant of .proc-grid, added 2026-08-10 for the thank-you furnish
   pass. Reuses .proc-step/.proc-num/.card-h3 so the numbered-step look stays
   identical to the 4-step process grids on the lane pages. */
.proc-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px}

.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--border);padding:20px 0}
.faq summary{font-family:var(--sans);font-size:16px;font-weight:500;color:var(--pale);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;transition:color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold);font-size:20px;line-height:1}
.faq summary:hover{color:var(--gold)}
.faq details[open] summary::after{content:'\2212'}
.faq details p{font-size:14px;color:var(--muted);line-height:1.8;margin-top:14px}

.cta-band{background:var(--navy);text-align:center;border-top:1px solid var(--border)}
.cta-band h2{font-size:clamp(24px,3vw,38px);font-weight:600;margin-bottom:14px}
.cta-band p{font-size:15px;color:var(--muted);max-width:480px;margin:0 auto 28px;line-height:1.75}

footer{background:#0a151d;padding:56px clamp(20px,4vw,48px) 0;border-top:1px solid var(--border)}
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;max-width:1100px;margin:0 auto 40px;padding-bottom:36px}
.footer-logo-name{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pale);display:block;margin-bottom:2px}
.footer-logo-type{font-family:var(--mono);font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:16px}
.footer-tagline{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:16px;max-width:280px}
.footer-contact a{display:block;font-size:13px;color:var(--muted);margin-bottom:5px;transition:color .2s}
.footer-contact a:hover{color:var(--gold)}
.footer-col h5,.footer-col .footer-h2{font-family:var(--mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:rgba(234,242,246,.32);margin-bottom:16px;line-height:normal}
.footer-col ul{display:grid;gap:9px}
.footer-col ul a{font-size:13px;color:var(--muted);transition:color .2s}
.footer-col ul a:hover{color:var(--gold)}
.footer-bottom{max-width:1100px;margin:0 auto;border-top:1px solid var(--border);padding:22px clamp(20px,4vw,48px) 30px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-copy{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:rgba(234,242,246,.24)}
.footer-social{display:flex;gap:18px}
.footer-social a{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(234,242,246,.3);transition:color .2s}
.footer-social a:hover{color:var(--gold)}

/* needs-copy marker, used only on the lifestyle/brand gap page */
.needs-copy{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--navy);background:var(--gold);padding:8px 14px;border-radius:6px;margin:10px 0;font-weight:700}

/* simple content pages (FAQ groups, privacy policy) */
.simple-hero{padding:132px clamp(20px,4vw,48px) 56px;text-align:center;border-bottom:1px solid var(--border)}
.simple-hero h1{font-size:clamp(30px,4.4vw,48px);font-weight:600;max-width:760px;margin:10px auto 16px}
.simple-hero h1 em{color:var(--gold);font-style:normal}
.simple-hero p{font-size:15px;color:var(--muted);max-width:560px;margin:0 auto;line-height:1.75}
.simple-wrap{max-width:820px;margin:0 auto;padding:72px clamp(20px,4vw,40px) 20px}
/* Chair-owned fix (S3-5 / S2-L2): .policy-section and .faq-group are plain
   <section> tags, so each one was also picking up the sitewide
   `section{padding:88px ...}` rule meant for full-bleed marketing bands. On
   about.html, faq.html, and privacy.html that stacks 88px of bottom padding
   on one block, this block's own margin-bottom, and another 88px of top
   padding on the next block, a 200-250px dead zone of blank space between
   consecutive text blocks that a normal scroll makes look broken. These two
   classes are always dense, list-style content inside .simple-wrap, never a
   full-bleed section, so they get their own small padding instead, keyed on
   these stable class names so no other <section> on the site is affected. */
.policy-section,.faq-group{padding-top:0;padding-bottom:0}
.faq-group{margin-bottom:48px}
.faq-group-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.policy-section{margin-bottom:36px}
.policy-section h2{font-size:19px;font-weight:600;color:var(--gold);margin-bottom:12px}
.policy-section p{font-size:14.5px;color:var(--muted);line-height:1.8;margin-bottom:10px}
.policy-section ul{margin-left:22px;margin-bottom:10px}
.policy-section li{font-size:14.5px;color:var(--muted);line-height:1.8;margin-bottom:6px;list-style:disc}
.policy-date{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:36px}

/* Presentation-only grouping for the privacy page, added 2026-08-10. Wraps
   clusters of existing .policy-section blocks in the same card recipe used
   by .inc-card (bordered container, one background step lighter than the
   page, same border-radius token), purely visual, zero new copy. */
.policy-group{background:var(--navy2);border:1px solid var(--border);border-radius:var(--rad);padding:32px;margin-bottom:40px}
.policy-group .policy-section{margin-bottom:32px}
.policy-group .policy-section:last-child{margin-bottom:0}
@media(max-width:640px){.policy-group{padding:24px 20px}}

/* responsive */
/* laptop widths: with About in the row the full link set no longer fits one
   line beside the wordmark, and the CTA was clipped clean off. The bar wraps
   instead of clipping, so every link, the phone, and the CTA stay visible */
@media(max-width:1500px) and (min-width:881px){
  #nav{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;row-gap:2px}
  .nav-links{flex-wrap:wrap;row-gap:4px;gap:16px;overflow-x:visible}
}

/* ES nav breathing room, 2026-08-15 (SITE-V4-ROW-F-NAV-WRAP-1280-2026-08-15.md):
   the 13-item nav-links row above wraps to two lines somewhere inside this
   same 881-1500px band for BOTH languages once the row no longer fits (that
   is not new, English itself wraps here at roughly 1150-1250px too). The
   defect this fixes is narrower: at 1280px specifically, English fits one
   line (measured unwrapped width 1159px against 1184px available) while the
   longer Spanish labels do not (measured unwrapped width 1657px against the
   same 1184px, a 473px shortfall) and wrap to two crowded lines with only a
   16px real gap between them.
   Closing that whole 473px gap by shrinking type was tried and rejected:
   reaching one line at 1280px needed the mono font down to ~8.5px with
   letter-spacing near zero, which reads as cramped, not breathing room, and
   is exactly the "redesign" the brief says not to do. Reverting to the
   sitewide overflow-x:auto scroll strip (the pattern named in es/index.html's
   own comment) was tried and rejected too: that strip has no visible
   scrollbar affordance, and this same codebase already proved on the
   homepage (see index.html's "fix-homepages H2" comment above) that an
   invisible scroll strip at this exact width class leaves "Start a Project"
   effectively unreachable for a mouse user who never finds it. Bringing that
   already-fixed problem back just for Spanish would trade one defect for a
   worse one.
   So: keep the wrap (it is not the defect, low severity, cosmetic only),
   give it real room instead. Scoped to html[lang="es"] only, inside the
   exact same band that already governs this layout for both languages, so
   English is untouched at every width by construction (a different selector,
   not a value swapped inside the shared rule above). Trims the link gap
   slightly (16px to 12px) which lets one more item land on the first row,
   and roughly doubles the visual gap between the two wrapped rows (measured
   16px to 20px) plus more vertical air around the whole nav (10px to 16px
   top/bottom). Verified: still wraps to two lines at 1280px (accepted, not
   fought), does not change the row count anywhere else in the band, English
   pages carry none of this because none of them match html[lang="es"]. */
@media(max-width:1500px) and (min-width:881px){
  html[lang="es"] #nav{padding-top:16px;padding-bottom:16px}
  html[lang="es"] .nav-links{gap:12px;row-gap:20px}
}

/* ES CTA unreachable above 1500px, 2026-08-15 (SITE-V4-CTA-1920-FIX-2026-08-15.md):
   above the 1500px ceiling of the band directly above, BOTH languages fall
   back to the plain base rule at the top of this file
   (.nav-links{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}), which
   has no visible scrollbar affordance. English fits inside that rule with
   room to spare at every wide desktop width (measured unwrapped content
   1231px, comfortably under the available row at 1600/1920/2560px), so it
   never overflows and the base rule is exactly right for it. Spanish content
   does not: the 13-item row's real content width (excluding gaps) is a fixed
   1465px regardless of viewport, since nothing at this level scales with vw,
   so as the base rule's wider gap:22px stacks on top (1465 + 12 gaps x 22px =
   1729px) it exceeds the row's available space at both 1600px (1236px
   available, a 493px shortfall) and 1920px (1556px available, a 173px
   shortfall) and the overflow spills past the right edge with no scrollbar to
   reveal it. Measured directly on es/services.html with the CTA forced
   visible past the fold: right edge at x=2044.8px at both 1600 and 1920px
   viewport widths (content width is constant, so the same absolute overflow
   point), each roughly 125 to 445px past the visible edge depending on
   viewport, unclickable at its real rendered position both times. Only at
   2560px does the base rule already happen to fit (2196px available beats
   1729px needed), which is why this defect reads as "only 1920" from a
   casual glance at round numbers but is in fact worse at 1600.
   This is the exact same failure shape the 881-1500px band above was built
   to prevent for both languages, and the exact same failure shape the
   comment on that band and the ES rule right above this one both already
   named and rejected reintroducing ("the CTA was clipped clean off",
   "effectively unreachable for a mouse user who never finds it"). The
   1500px ceiling on the wrap-if-needed treatment was never a deliberate
   decision that Spanish should go back to scroll-based overflow above it,
   it is simply where the band's own upper bound happened to end for a
   1280px-focused fix; nothing above 1500px was in scope of that fix or
   measured against it. So: extend the exact same proven mechanism (wrap
   instead of hidden-scroll, ES only) upward with no ceiling, reusing the
   identical spacing values already chosen and verified this morning for the
   band below (gap:12px, row-gap:20px, 16px top/bottom padding), rather than
   inventing new spacing rules for a third width class. Above 1500px the row
   has more real estate than at 1280px, so with this same gap:12px it
   actually fits on one line again by 2560px (1609px needed vs 2196px
   available) and only wraps to two rows in the 1500-2200px-ish middle
   stretch where it is genuinely tight, exactly mirroring how the band below
   behaves. Font size and letter-spacing are untouched, matching the earlier
   rejection of a typographic redesign. Scoped to html[lang="es"] with no
   width ceiling, so this reaches every width above 1500px, not just 1920px,
   without needing a fourth band if someone tests 1700 or 3000 next. English
   is untouched by construction: a different selector, not a value changed
   inside a rule both languages share. */
@media(min-width:1501px){
  html[lang="es"] #nav{height:auto;flex-wrap:wrap;padding-top:16px;padding-bottom:16px;row-gap:2px}
  html[lang="es"] .nav-links{flex-wrap:wrap;row-gap:20px;gap:12px;overflow-x:visible}
}

/* mobile menu button, injected by assets/direct-credit.js on every page using
   the shared #nav template (index.html has its own hamburger and intake.html
   keeps its footer-only exemption). Hidden on desktop. */
.ja-nav-burger{display:none;background:none;border:1px solid var(--border);border-radius:6px;color:inherit;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;cursor:pointer}

@media(max-width:880px){
  #nav{padding:0 16px;height:60px}
  .nav-links{gap:14px}
  .nav-links a:not(.nav-cta):not(.nav-phone){display:none}
  .ja-nav-burger{display:inline-block}
  #nav.ja-nav-open .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--navy2,#12222c);border-bottom:1px solid var(--border);padding:16px 18px;gap:13px;z-index:499}
  #nav.ja-nav-open .nav-links a{display:block}
  section{padding:56px 18px}
  .lp-hero-inner{padding:0 18px}
  .two-col,.inc-grid,.proc-grid,.proc-grid-3,.footer-inner{grid-template-columns:1fr}
  .proc-step{border-right:none;border-bottom:1px solid var(--border);padding:22px 0}
  .proc-step:last-child{border-bottom:none}
  .gal-strip{grid-template-columns:repeat(2,1fr)}
  .trust-cap{padding:6px 12px;font-size:8px}
  footer{padding:44px 18px 0}
  .footer-bottom{flex-direction:column;text-align:center;padding:20px 18px 26px}
}

/* small phones: one row cannot hold the wordmark, the phone number, and the
   CTA inside the viewport, so the bar wraps to two rows: brand on top, both
   actions fully visible and tappable below */
@media(max-width:480px){
  #nav{padding:10px 14px;height:auto;flex-wrap:wrap;row-gap:28px}
  /* Row B fix, 2026-08-14 (CROWD-GATE finding, persona5-fatthumb): at this
     width #nav wraps to two rows, wordmark + Menu button on row 1, phone +
     Start a Project on row 2 (forced full-width by .nav-links below). The
     old row-gap:8px left only about 9.6px of real vertical space between
     the Menu button's bottom edge and Start a Project's top edge, both
     sitting near the same right-hand edge, so a thumb that missed the Menu
     button low landed on Start a Project instead, measured and confirmed.
     28px keeps a real, measured 24px+ gap between the two tap boxes with a
     margin, verified at 375/390/428 wide on portrait-photography.html and
     es/faq.html; see direct/audits/SITE-V4-ROW-B-FIX-2026-08-14.md. */
  .nav-logo-name{font-size:11px;letter-spacing:.06em}
  .nav-links{width:100%;gap:10px;justify-content:space-between}
  .nav-links a.nav-phone{font-size:12px}
}

/* nav-wrap consolidation, 2026-08-14 (SITE-V4-NAV-WRAP-CONSOLIDATE-2026-08-14.md,
   residual flagged in SITE-V4-ROW-B-FIX-2026-08-14.md "A NOTE ON SCOPE HONESTY"):
   between 481 and 660px wide, #nav also wraps to two rows (wordmark + Menu
   button on row 1, phone + Start a Project on row 2), same mistap risk as the
   Row B fix above, just one width band wider. This exact rule used to be
   pasted into 6 separate page-scoped <style> blocks with the old, too-tight
   row-gap:8px; consolidated here with the same safe 28px gap used in the
   max-width:480px block above, and the 6 duplicated copies removed. */
@media (min-width:481px) and (max-width:660px){
  #nav{flex-wrap:wrap;height:auto;row-gap:28px}
  .nav-links{width:100%;justify-content:space-between}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .gal-strip .cell:hover img{transform:none}
}

/* D.I.R.E.C.T. designer credit, hidden until Jorge approves wording and
   visibility (flip data-visible to "true" on the component to show it) */
#direct-site-credit.direct-site-credit{box-sizing:border-box;width:100%;
  margin:18px 0 0;padding:0 16px 6px;color:inherit;font:inherit;
  font-size:clamp(9px,0.7vw,11px);font-weight:400;line-height:1.4;
  letter-spacing:0.12em;text-align:center;text-transform:uppercase;opacity:0.55}
#direct-site-credit.direct-site-credit[data-visible="false"]{display:none}
#direct-site-credit.direct-site-credit[data-visible="true"]{display:block}
@media (max-width:640px){#direct-site-credit.direct-site-credit{
  margin-top:16px;padding-right:12px;padding-left:12px;letter-spacing:0.1em}}