/* ==========================================================================
   STUDIO NAMU — SECTIONS
   The styling of each part of the page, in the same order as index.html and
   with the same labels:

     Header · Hero · Mission · About · What We Do · Services · How It Works ·
     Our Work · Testimonials · FAQ · Contact · Footer · Pop-up · Mobile bar

   Colours, fonts and sizes come from css/tokens.css — change them there.

   Screen-size rules look like  @media (max-width:820px){ ... }  and mean
   "on screens narrower than 820px, do this instead" (tablet / phone layout).
   ========================================================================== */


/* ==========================================================================
   HEADER (logo, menu, EN/ES button, "Book a Call")
   ========================================================================== */
header{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  /* stretch the bar edge to edge: cancel the page side margins, then add them back inside */
  margin-inline:calc(-1 * var(--page-gutter)); padding-inline:var(--page-gutter);
}
.nav-inner{
  max-width:var(--page-max-width); margin-inline:auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:14px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.brand img{ height:30px; width:auto; }
.brand-name{ /* the "studio namu" words next to the logo */
  font-family:var(--font-display),sans-serif; font-weight:800; font-size:var(--fs-brand-name);
  line-height:1; letter-spacing:-0.01em; text-transform:lowercase; color:var(--brand-name-color); white-space:nowrap;
}
.navlinks{ display:flex; align-items:center; gap:clamp(12px,1.8vw,30px); flex-wrap:nowrap; margin-left:auto; } /* pushes the menu to the right */
.navlinks a{ text-decoration:none; font-family:var(--font-mono),monospace; font-size:var(--fs-nav); letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap; }
.navlinks a:hover{ color:var(--accent); }
.navright{ display:flex; align-items:center; gap:10px; margin-left:clamp(10px,2vw,28px); flex-shrink:0; }
.lang-toggle{
  font-family:var(--font-mono),monospace; font-size:var(--fs-label-sm); letter-spacing:.06em;
  background:none; border:1px solid var(--line); border-radius:var(--radius-pill); padding:6px 12px;
  color:var(--ink-soft); cursor:pointer;
}
.lang-toggle:hover{ border-color:var(--accent); color:var(--accent); }
.navright .btn{ padding:9px 16px; }
@media (max-width:760px){ .hide-narrow{ display:none; } }
/* below this width the menu links would not fit on one line, so they hide (logo, ES and Book a Call stay) */
@media (max-width:1240px){
  .navlinks{ display:none; }
}


/* ==========================================================================
   HERO (full-width photo with text on top)
   The colours here (--on-photo…, --hero-…) are fixed in both light and dark
   mode on purpose: this text sits on the photograph, not on the page.
   ========================================================================== */
#hero{
  padding-block: clamp(18px,3vw,28px) clamp(48px,7vw,88px);
  width:100vw; margin-left:calc(50% - 50vw);
}
.hero-visual{
  position:relative; width:100%; height:min(80vh, 700px); min-height:440px;
  overflow:hidden; background:var(--bg-alt);
}
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, var(--hero-scrim-bottom) 0%, var(--hero-scrim-middle) 40%, var(--hero-scrim-top) 66%);
}
.hero-content{
  position:relative; z-index:1; height:100%; width:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(24px,5vw,56px); color:var(--on-photo);
}
.hero-content .hero-eyebrow{
  font-family:var(--font-mono),monospace; font-size:var(--fs-eyebrow-small); letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-photo-soft); opacity:.92; margin:0 0 10px; font-weight:500;
}
.hero-content .hero-lede{
  font-size:var(--fs-hero-lede); line-height:1.35; max-width:48ch; color:var(--on-photo-soft); opacity:.94; margin:0 0 28px;
}
.hero-wordmark{
  position:relative; z-index:0; display:inline-block; align-self:flex-start; width:fit-content;
  font-family:var(--font-display),sans-serif; font-weight:800;
  font-size:var(--fs-hero-wordmark); line-height:1; color:var(--hero-wordmark);
  text-transform:lowercase; letter-spacing:-0.01em; margin:0 0 14px;
}
.hero-wordmark::before{ /* the "highlighter" stroke behind the wordmark */
  content:''; position:absolute; z-index:-1;
  left:2%; right:-3%; top:48%; bottom:-14%;
  background:var(--hero-highlight); opacity:0.55; border-radius:3px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-onimg-ghost{ /* the see-through "See the work" button on the photo */
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer;
  font-family:var(--font-mono),monospace; font-size:var(--fs-button); letter-spacing:.03em;
  padding:11px 20px; border-radius:var(--radius-pill); border:1.5px solid var(--on-photo); color:var(--on-photo);
  background:var(--on-photo-glass); backdrop-filter:blur(3px);
}
.btn-onimg-ghost:hover{ background:var(--on-photo-glass-hover); }
@media (max-width:600px){ .hero-visual{ height:min(74vh, 560px); min-height:420px; } }


/* ==========================================================================
   MISSION (text + looping video)
   ========================================================================== */
.mission-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,56px); align-items:center; margin-bottom:clamp(48px,7vw,76px); padding-bottom:clamp(40px,6vw,56px); border-bottom:1px solid var(--line); }
@media (max-width:820px){ .mission-grid{ grid-template-columns:1fr; } }
.mission-media{
  aspect-ratio:3/4; max-width:340px; margin-inline:auto; border-radius:var(--radius-video); background:var(--accent-tint); border:2px solid var(--accent);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  overflow:hidden; position:relative;
}
.mission-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.mission-media .play{
  width:52px; height:52px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.mission-media .play svg{ width:18px; height:18px; fill:var(--bg); margin-left:3px; }
.mission-media .soon{ font-family:var(--font-mono),monospace; font-size:var(--fs-label-xs); color:var(--ink-soft); }
@media (max-width:820px){ .mission-media{ max-width:280px; } }

/* the "Namu comes from human" note */
.brandnote{
  margin-top:26px; padding:18px 20px; background:var(--accent-tint); border-radius:var(--radius-sm);
  font-family:var(--font-mono),monospace; font-size:var(--fs-brandnote); line-height:1.7; color:var(--ink);
}
.brandnote b{ color:var(--accent); }


/* ==========================================================================
   ABOUT (portrait + bio)
   ========================================================================== */
.about-top{ display:grid; grid-template-columns: minmax(200px,280px) 1fr; gap:clamp(28px,4.5vw,52px); align-items:center; }
@media (max-width:700px){ .about-top{ grid-template-columns:1fr; } }
.about-top h2{ font-size:var(--fs-section-title); margin-bottom:16px; }
.eyebrow.about-role{ margin-top:-8px; font-size:var(--fs-eyebrow-small); } /* "Founder", tucked up under the name */
.about-cta{ margin-top:24px; } /* "Get to know us" button under the bio — opens the free 15-min call on Calendly */
.about-photo{
  width:100%; aspect-ratio:4/5; border-radius:var(--radius-photo); overflow:hidden; position:relative;
  background:var(--blue-tint); border:2px solid var(--blue);
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:700px){ .about-photo{ max-width:280px; margin-inline:auto; } }
.about-photo .mono{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:var(--fs-monogram); color:var(--blue); }
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-photo .soon{
  position:absolute; right:12px; bottom:12px; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:4px 11px;
  font-family:var(--font-mono),monospace; font-size:var(--fs-label-3xs); color:var(--ink-soft); letter-spacing:.04em;
}
/* stats row — not on the page at the moment, kept ready for later */
.stats{ display:flex; flex-wrap:wrap; gap:clamp(26px,4vw,52px); margin-top:clamp(30px,4vw,44px); padding-top:22px; border-top:1px solid var(--line); }
.stat{ }
.stat .n{ font-family:var(--font-display),sans-serif; font-size:var(--fs-panel-title); font-weight:600; color:var(--accent); }
.stat .l{ font-family:var(--font-mono),monospace; font-size:var(--fs-label-2xs); color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; }


/* ==========================================================================
   WHAT WE DO (six numbered cards on a full-width pale blue band)
   ========================================================================== */
#what-we-do{ /* the band colour is --band in tokens.css; the two lines after it stretch it to the screen edges */
  background:var(--band);
  box-shadow:0 0 0 100vmax var(--band); clip-path:inset(0 -100vmax);
}
.capability-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); margin-top:36px; }
@media (max-width:900px){ .capability-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .capability-grid{ grid-template-columns:1fr; } }
.capability-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:var(--card-padding); display:flex; flex-direction:column; gap:8px;
}
.capability-card .num{ font-family:var(--font-mono),monospace; font-size:var(--fs-label-md); color:var(--accent); letter-spacing:.03em; margin:0; }
.capability-card h3{ font-size:var(--fs-capability-title); margin:0; }
.capability-card p:not(.num){ color:var(--ink-soft); font-size:var(--fs-text-sm); margin:0 0 14px; }
.capability-img{ /* the square drawing below the text — full card width, lined up along the bottom of each row */
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  margin-top:auto; border-radius:var(--radius-sm);
}


/* "Ready to work together?" box under the six cards */
.what-cta{
  margin-top:28px; background:var(--surface); border:1.5px solid var(--accent); border-radius:var(--radius-card);
  padding:var(--card-padding); display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap;
}
.what-cta > div:first-child{ flex:1 1 380px; }
.what-cta h3{ font-size:var(--fs-card-title); margin-bottom:6px; }
.what-cta p{ color:var(--ink-soft); font-size:var(--fs-text-md); margin:0; max-width:60ch; }
.what-cta-buttons{ display:flex; gap:12px; flex-wrap:wrap; }

/* ==========================================================================
   SERVICES (three pricing cards + the "New in Madrid" banner)
   ========================================================================== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); margin-top:36px; }
@media (max-width:900px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cards{ grid-template-columns:1fr; } }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:var(--card-padding); display:flex; flex-direction:column; gap:12px;
}
.card.featured{ border-color:var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } /* the middle, highlighted card */
.card h3{ font-size:var(--fs-card-title); }
.card .meta{ font-family:var(--font-mono),monospace; font-size:var(--fs-label-md); color:var(--accent); letter-spacing:.03em; }
.card p{ color:var(--ink-soft); font-size:var(--fs-text-md); flex-grow:1; margin:0; }
.card .btn{ align-self:flex-start; margin-top:6px; }
.card.alt{ border-color:var(--blue); }                                 /* the two blue-outlined cards */
.card.alt .meta{ color:var(--blue); }
.card.alt .btn-ghost{ border-color:var(--blue); background:var(--blue); color:var(--on-blue); } /* solid blue buttons on the two blue cards */
.card.alt .btn-ghost:hover{ background:var(--blue-2); border-color:var(--blue-2); }

/* "New in Madrid?" banner */
.madrid{
  --madrid-pad:clamp(28px,5vw,56px); /* space inside the box (the watercolour stretches past it to the edges) */
  background:var(--bg-alt); border-radius:var(--radius-lg); padding:var(--madrid-pad); overflow:hidden;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:28px clamp(28px,5vw,64px); align-items:start;
  grid-template-areas:"head body" ". cta" "art art";
  margin-top:26px;
}
@media (max-width:700px){ .madrid{ grid-template-columns:1fr; grid-template-areas:"head" "body" "cta" "art"; } }
.madrid-head{ grid-area:head; }
.madrid-body{ grid-area:body; }
.madrid .madrid-cta{ grid-area:cta; justify-self:end; } /* sits bottom-right, under the end of the text */
@media (max-width:700px){ .madrid .madrid-cta{ justify-self:start; } }
/* the watercolour along the bottom of the box, edge to edge */
.madrid-art{
  grid-area:art; width:calc(100% + 2 * var(--madrid-pad)); max-width:none; height:auto;
  margin:0 calc(-1 * var(--madrid-pad)) calc(-1 * var(--madrid-pad));
  mix-blend-mode:multiply; /* makes the white paper take on the beige of the box, so the painting blends in */
  /* fades the top of the painting into the box, so there's no visible edge */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 22%);
}
/* in dark mode the box is dark, so show the painting normally (as a light panel) */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .madrid-art{ mix-blend-mode:normal; } }
:root[data-theme="dark"] .madrid-art{ mix-blend-mode:normal; }
.madrid h2{ font-size:var(--fs-banner-title); line-height:1.2; margin-top:14px; margin-bottom:0; }
.madrid .lede{ margin-top:0; max-width:none; text-align:justify; hyphens:auto; } /* justified, filling the column so the button lines up with its right edge */
/* the three highlights under the heading */
.madrid-points{ list-style:none; padding:0; margin:28px 0 0; display:flex; flex-direction:column; gap:10px; }
.madrid-points li{ position:relative; padding-left:20px; font-size:var(--fs-text-md); color:var(--ink); }
.madrid-points li::before{ /* small red dot */
  content:''; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.pin{ /* "Madrid Only" tag */
  font-family:var(--font-mono),monospace; font-size:var(--fs-label-sm); letter-spacing:.08em; font-weight:600;
  background:var(--blue); color:var(--on-blue); border-radius:var(--radius-pill); padding:6px 13px;
  white-space:nowrap; align-self:start;
}


/* ==========================================================================
   HOW IT WORKS (two step-by-step panels, inside the Services section)
   ========================================================================== */
.how-wrap{ margin-top:clamp(48px,7vw,72px); padding-top:clamp(40px,6vw,56px); border-top:1px dashed var(--line); }
.how-grid{ display:grid; grid-template-columns:1fr; gap:clamp(22px,4vw,32px); margin-top:34px; } /* one full-width panel */
@media (max-width:760px){ .how-grid{ grid-template-columns:1fr; } }
.how-track{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,3.5vw,32px); }
.how-track.madrid-track{ border-color:var(--blue); }
.track-pin{ /* "Worldwide" / "Madrid" tag */
  display:inline-block; font-family:var(--font-mono),monospace; font-size:var(--fs-label-2xs); font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; border-radius:var(--radius-pill); padding:5px 12px; margin-bottom:16px;
}
.how-track.online .track-pin{ background:var(--accent); color:var(--accent-tint); }
.how-track.madrid-track .track-pin{ background:var(--blue); color:var(--on-blue); }
.how-track .track-pin.track-pin--madrid{ background:var(--blue); color:var(--on-blue); margin-left:6px; } /* the second, blue tag */
.how-price{ font-weight:normal; font-style:italic; } /* "starting at …" after the panel title */
.how-track h3{ font-size:var(--fs-track-title); }
/* the five steps sit side by side on wide screens, a dashed line linking them */
.how-steps{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:24px; margin-top:26px; }
@media (max-width:1000px){ .how-steps{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:640px){ .how-steps{ grid-template-columns:1fr; gap:19px; } }
.how-step{ display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px dashed var(--line); }
@media (max-width:640px){ .how-step{ flex-direction:row; gap:14px; padding-top:0; border-top:none; } }
.how-step .num{ font-family:var(--font-display),sans-serif; font-weight:800; font-size:var(--fs-step-number); flex-shrink:0; width:32px; line-height:1.3; }
.how-track.online .num{ color:var(--accent); }
.how-track.madrid-track .num{ color:var(--blue); }
.how-step .txt h4{ font-family:var(--font-display),sans-serif; font-weight:600; font-size:var(--fs-step-title); margin:0 0 3px; }
.how-step .txt p{ margin:0; color:var(--ink-soft); font-size:var(--fs-text-xs); }
.how-note{ margin-top:20px; padding-top:16px; border-top:1px dashed var(--line); font-size:var(--fs-text-2xs); color:var(--ink-soft); }


/* ==========================================================================
   OUR WORK / PORTFOLIO (grid of project cards)
   The cards themselves are built by js/main.js from the `projects` list.
   ========================================================================== */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
@media (max-width:900px){ .work-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .work-grid{ grid-template-columns:1fr; } }
.work-card{
  border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; background:var(--surface);
  cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit;
}
.work-thumb{
  aspect-ratio:4/3; background:var(--bg-alt); position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.work-thumb img{ width:100%; height:100%; object-fit:cover; }
.work-thumb svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.work-thumb .soon{
  position:absolute; right:10px; bottom:10px; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:4px 10px;
  font-family:var(--font-mono),monospace; font-size:var(--fs-label-3xs); color:var(--ink-soft); letter-spacing:.04em;
}
.work-body{ padding:16px 18px 18px; }
.work-body h4{ font-family:var(--font-display),sans-serif; font-weight:600; font-size:var(--fs-work-title); margin:0 0 4px; }
.work-body .wmeta{ font-family:var(--font-mono),monospace; font-size:var(--fs-label-sm); color:var(--ink-soft); }
.work-card.add{ /* the dashed "More projects added regularly" card */
  display:flex; align-items:center; justify-content:center; text-align:center;
  border-style:dashed; color:var(--ink-soft); font-family:var(--font-mono),monospace; font-size:13px;
  padding:24px; min-height:100%;
}


/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.empty-panel{
  border:1px dashed var(--blue); border-radius:var(--radius-panel); padding:clamp(30px,5vw,54px);
  text-align:center; margin-top:30px; background:var(--surface);
}
.empty-panel h3{ font-size:var(--fs-panel-title); margin-bottom:10px; }
.empty-panel p{ color:var(--ink-soft); max-width:48ch; margin-inline:auto; }
.stars{ font-size:var(--fs-stars); color:var(--blue); letter-spacing:4px; margin-bottom:14px; }


/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{ display:flex; flex-direction:column; margin-top:32px; border-top:1px solid var(--line); max-width:78ch; }
.faq-item{ border-bottom:1px solid var(--line); padding-block:19px; }
.faq-item summary{
  cursor:pointer; font-family:var(--font-display),sans-serif; font-weight:600; font-size:var(--fs-faq-question);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ /* the + sign; becomes – when the answer is open */
  content:'+'; font-family:var(--font-mono),monospace; font-size:var(--fs-faq-icon); color:var(--accent);
  flex-shrink:0; width:20px; text-align:center;
}
.faq-item[open] summary::after{ content:'\2013'; }
.faq-item p{ color:var(--ink-soft); margin:13px 0 0; font-size:var(--fs-text-md); max-width:66ch; }


/* ==========================================================================
   CONTACT (form + "Prefer to talk first?" box)
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,60px); margin-top:30px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
label{ font-family:var(--font-mono),monospace; font-size:var(--fs-label-sm); letter-spacing:.04em; color:var(--ink-soft); text-transform:uppercase; }
input,select,textarea{
  font-family:var(--font-body),serif; font-size:var(--fs-input); padding:12px 14px; border-radius:var(--radius-field);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
textarea{ resize:vertical; min-height:110px; }
input:focus,select:focus,textarea:focus{ outline:2.5px solid var(--focus); outline-offset:1px; }
form .btn{ align-self:flex-start; border:none; }
.formnote{ font-size:var(--fs-note); color:var(--ink-soft); }
.formnote a{ color:inherit; }
.hidden-field{ display:none; } /* invisible trap field that catches spam bots */
.side-box{
  background:var(--blue-tint); border-radius:var(--radius-panel); padding:var(--card-padding); display:flex; flex-direction:column; gap:16px;
}
.side-box h3{ font-size:var(--fs-box-title); }
.book-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 16px;
  text-decoration:none; color:var(--ink);
}
.book-link:hover{ border-color:var(--blue); }
.book-link .t{ font-size:var(--fs-text-sm); }
.book-link .m{ font-family:var(--font-mono),monospace; font-size:var(--fs-label-xs); color:var(--ink-soft); }
.direct-list{ display:flex; flex-direction:column; gap:10px; font-size:var(--fs-text-sm); }
.direct-list a{ text-decoration:underline; text-decoration-color:var(--line); }


/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{ border-top:1px solid var(--line); padding-block:34px 46px; margin-top:8px; }
.foot-inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-brand img{ height:22px; }
footer .lede{ font-size:var(--fs-text-2xs); }
.foot-legal{ font-family:var(--font-mono),monospace; font-size:var(--fs-label-xs); color:var(--ink-soft); }
.foot-legal a{ color:inherit; } /* the Privacy and Cancellations links */


/* ==========================================================================
   POP-UP WINDOW (project gallery, and the "thanks" message after the form)
   ========================================================================== */
.modal-backdrop{
  position:fixed; inset:0; background:var(--overlay);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background:var(--surface); border-radius:var(--radius-panel); padding:28px; max-width:480px; width:100%;
  border:1px solid var(--line); max-height:88vh; overflow-y:auto;
}
.modal h4{ font-size:var(--fs-box-title); margin-bottom:8px; }
.modal p{ color:var(--ink-soft); font-size:var(--fs-text-sm); }
.modal .modal-body{ white-space:pre-line; } /* keeps the paragraph breaks in project descriptions */
.modal .btn{ margin-top:16px; }
.modal-gallery{ margin-bottom:18px; }
.modal-img{ width:100%; aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-alt); }
.modal-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.modal-gallery-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.modal-gallery-nav button{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-pill);
  width:34px; height:34px; cursor:pointer; font-size:var(--fs-gallery-arrow); color:var(--ink);
}
.modal-gallery-nav button:hover{ border-color:var(--accent); color:var(--accent); }
.modal-counter{ font-family:var(--font-mono),monospace; font-size:var(--fs-label-sm); color:var(--ink-soft); }


/* ==========================================================================
   MOBILE "BOOK A CALL" BAR (pinned to the bottom of the screen on phones)
   ========================================================================== */
.mobile-cta{ display:none; }
@media (max-width:760px){
  .mobile-cta{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--bg); border-top:1px solid var(--line);
    padding:12px var(--page-gutter) calc(12px + env(safe-area-inset-bottom));
  }
  .mobile-cta .btn{ width:100%; justify-content:center; }
  body{ padding-bottom:76px; }
}