/* ============================================================
   TASc6 — site stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=optional');
/* display=optional (not swap): if Inter isn't ready almost immediately,
   the browser keeps the fallback font for the whole page view instead
   of swapping to Inter mid-visit. That swap - fallback text is
   measurably narrower than Inter at these weights - is what was
   causing the nav to render fine, then wrap a moment later once Inter
   loaded in. optional trades "always eventually shows Inter" for
   "never causes a layout shift", which matters most somewhere as
   tightly fitted as the centered nav. */

:root{
  --ink:        #1C2126;
  --ink-soft:   #2B3238;
  --paper:      #F2F3F5;
  --white:      #FFFFFF;
  --muted:      #6B7480;
  --border:     rgba(28,33,38,0.10);

  --amber:      #F2A71B;
  --amber-dark: #B45309;
  --amber-tint: #FCEFD6;

  --radius:     14px;
  --radius-sm:  8px;
  --shadow:     0 8px 28px rgba(28,33,38,0.08);
  --shadow-lg:  0 20px 50px rgba(28,33,38,0.16);

  --max:        1180px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', 'Helvetica Neue', Arial, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

h1, h2, h3{
  margin:0 0 14px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.15;
  color:var(--ink);
}
h1{ font-size:clamp(32px, 4.4vw, 52px); }
h2{ font-size:clamp(24px, 3vw, 34px); }
h3{ font-size:19px; margin-bottom:8px; }
p{ margin:0 0 14px; color:var(--ink-soft); }
p:last-child{ margin-bottom:0; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
}

section{ padding:88px 0; }
section.tight{ padding:56px 0; }
section.bg-white{ background:var(--white); }
section.bg-asphalt{ background:var(--ink); color:var(--white); }
section.bg-asphalt h2, section.bg-asphalt h3{ color:var(--white); }
section.bg-asphalt p{ color:rgba(242,243,245,0.72); }

.eyebrow{
  display:inline-block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--amber-dark);
  margin-bottom:14px;
}
section.bg-asphalt .eyebrow{ color:var(--amber); }

.lede{
  font-size:18px;
  color:var(--muted);
  max-width:560px;
}
section.bg-asphalt .lede{ color:rgba(242,243,245,0.78); }

.section-head{ margin-bottom:44px; }
.section-head.center{ text-align:center; }
.section-head.center .lede{ margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }

.btn-amber{
  background:var(--amber);
  color:var(--ink);
  box-shadow:0 6px 18px rgba(242,167,27,0.35);
}
.btn-amber:hover{ background:#E39A0F; }

.btn-dark{
  background:var(--ink);
  color:var(--white);
}
.btn-dark:hover{ background:var(--ink-soft); }

.btn-outline{
  background:transparent;
  color:var(--ink);
  border-color:var(--border);
}
.btn-outline:hover{ border-color:var(--ink); }

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:30px;
}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-nav .wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:56px;
  padding-top:14px;
  padding-bottom:14px;
  max-width:1440px; /* an outer ceiling only - justify-content:center plus
                        the gap above mean the bar hugs the logo + links as
                        one block and centers that block, rather than
                        stretching to fill the full width available. */
}
.brand{ display:flex; align-items:center; }
.brand-logo{ width:auto; display:block; }
.site-nav .brand-logo{ height:72px; }
footer .brand-logo{
  height:88px;
  background:var(--paper);
  padding:12px 18px;
  border-radius:12px;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:24px;
}
.nav-links a{
  font-size:14.5px;
  font-weight:600;
  color:var(--ink-soft);
  padding:6px 0;
  position:relative;
  white-space:nowrap; /* a link's own label never wraps, even if the
                          window gets narrow - the row scrolls under it
                          rather than breaking a label across two lines */
}
.nav-links a:not(.btn):hover{ color:var(--ink); }
.nav-links a.active:not(.btn){ color:var(--ink); }
.nav-links a.active:not(.btn)::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  background:var(--amber);
  border-radius:2px;
}
.nav-links .btn{ padding:10px 22px; font-size:14px; white-space:nowrap; }

/* Hamburger toggle - hidden above the collapse breakpoint, where the
   nav-links row is shown inline (see .site-nav .wrap above). Below
   it, this button appears instead of letting 8 links + a button run
   out of room and wrap unpredictably. */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.site-nav.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-nav.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-nav.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(242,167,27,0.16), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, #262D34 100%);
  color:var(--white);
  padding:80px 0 60px;
  overflow:hidden;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
.hero h1{ color:var(--white); }
.hero .eyebrow{ color:var(--amber); }
.hero .lede{ color:rgba(242,243,245,0.78); max-width:520px; }

.hero-shot{
  margin-top:8px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,0.08);
}
.hero-shot img{ width:100%; }

/* ---------- Grid / cards ---------- */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }

.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow);
}
.card .num{
  font-size:14px;
  font-weight:800;
  color:var(--amber-dark);
  letter-spacing:0.06em;
  margin-bottom:14px;
}
section.bg-asphalt .card{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.10);
  box-shadow:none;
}
section.bg-asphalt .card h3{ color:var(--white); }
section.bg-asphalt .card p{ color:rgba(242,243,245,0.72); }
section.bg-asphalt .card .num{ color:var(--amber); }

/* ---------- Stats ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
  text-align:center;
}
.stat-num{
  font-size:40px;
  font-weight:800;
  color:var(--amber);
  letter-spacing:-0.02em;
}
.stat-label{
  margin-top:6px;
  font-size:13.5px;
  color:rgba(242,243,245,0.65);
  text-transform:uppercase;
  letter-spacing:0.05em;
}

/* ---------- Browser frame ---------- */
.browser-frame{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:var(--white);
  position:relative;
}
.browser-frame::before{
  content:"";
  display:block;
  height:30px;
  background:#EDEEF0;
  border-bottom:1px solid var(--border);
}
.browser-frame img{ display:block; }

/* ---------- CTA band ---------- */
.cta-band{
  text-align:center;
  background:var(--paper);
}
.cta-band.bg-white{ background:var(--white); }
.cta-band h2{ margin-bottom:12px; }

/* ---------- Video ---------- */
.video-wrap{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}
.video-wrap video{ width:100%; display:block; background:#000; }

/* ---------- Footer ---------- */
footer{
  background:var(--ink);
  color:rgba(242,243,245,0.72);
  padding:64px 0 26px;
}
.foot-top{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.foot-top p{ color:rgba(242,243,245,0.6); }
.foot-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}
.foot-links a{
  font-size:14.5px;
  color:rgba(242,243,245,0.75);
}
.foot-links a:hover{ color:var(--amber); }
.foot-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding-top:22px;
  font-size:13px;
  color:rgba(242,243,245,0.45);
}

/* ---------- Note box (reusable callout) ---------- */
.note-box{
  margin-top:22px;
  padding:20px 24px;
  border-left:4px solid var(--amber);
  background:var(--paper);
  border-radius:8px;
}
.note-box p{ margin:0; color:var(--ink-soft); }
.note-box strong{ color:var(--ink); }

/* ---------- Forms ---------- */
.form-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:34px;
  box-shadow:var(--shadow);
}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:7px;
  color:var(--ink-soft);
}
.field input,
.field textarea,
.field select{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:14.5px;
  color:var(--ink);
  background:var(--white);
  transition:border-color 0.15s ease;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:var(--amber);
}

/* ---------- Contact info ---------- */
.contact-info{ display:flex; flex-direction:column; gap:22px; }
.contact-info .item{ display:flex; align-items:flex-start; gap:16px; }
.contact-info .icon{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--amber-tint);
  color:var(--amber-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:17px;
}
.contact-info h3{ margin-bottom:2px; font-size:16px; }
.contact-info p{ font-size:14.5px; }

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:26px;
}
.gallery-item{
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:var(--white);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.gallery-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.gallery-item .shot{ overflow:hidden; background:#EDEEF0; }
.gallery-item .shot img{ width:100%; }
.gallery-item .cap{ padding:20px; }
.gallery-item .cap p{ font-size:14px; margin-top:8px; margin-bottom:0; }
.tag{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--amber-dark);
  background:var(--amber-tint);
  padding:4px 10px;
  border-radius:999px;
}

/* ---------- Lightbox (CSS-only, opened via :target) ---------- */
.lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(17,20,23,0.92);
  align-items:center;
  justify-content:center;
  padding:40px;
}
.lightbox:target{ display:flex; }
.lightbox img{
  max-width:min(900px, 100%);
  max-height:85vh;
  border-radius:10px;
  box-shadow:var(--shadow-lg);
  margin:0 auto;
}
.lightbox .close{
  position:absolute;
  top:26px; right:32px;
  font-size:34px;
  line-height:1;
  color:var(--white);
  font-weight:300;
}

/* ---------- Role rows (Why TASc6) ---------- */
.role-row{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:28px;
  align-items:start;
  padding:26px 0;
  border-bottom:1px solid var(--border);
}
.role-row:last-child{ border-bottom:none; }
.role-tag{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:0.06em;
  color:var(--ink-soft);
}
.role-tag .dot{
  width:9px; height:9px;
  border-radius:50%;
  display:inline-block;
}
.role-row h3{ margin-bottom:6px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .wrap{ padding:0 22px; }
  section{ padding:64px 0; }

  .hero .wrap{ grid-template-columns:1fr; }
  .hero{ padding-top:44px; text-align:left; }

  .grid-2, .grid-3, .grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .gallery-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }

  .foot-top{ grid-template-columns:1fr; gap:30px; }
  .field-row{ grid-template-columns:1fr; }

  .role-row{ grid-template-columns:1fr; gap:8px; }
}

/* With 8 nav links plus a button, the row needs roughly 1,200px to
   sit on one line without crowding. Rather than let it wrap
   unpredictably as that room runs out, collapse to a menu button at
   1300px - comfortably before it would ever be forced to wrap - and
   show the links as a clean dropdown panel instead. */
@media (max-width: 1300px){
  .nav-toggle{ display:flex; }
  .site-nav .wrap{ justify-content:space-between; gap:0; }
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--white);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow);
    padding:10px 22px 18px;
  }
  .site-nav.nav-open .nav-links{ display:flex; }
  .nav-links a{ padding:12px 0; border-bottom:1px solid var(--border); }
  .nav-links a.active:not(.btn)::after{ display:none; }
  .nav-links .btn{ margin-top:14px; text-align:center; }
}

@media (max-width: 760px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
}

/* ---------- Language switcher ---------- */
.lang-switcher{
  position:absolute;
  top:50%;
  right:32px;
  transform:translateY(-50%);
  z-index:150;
}
.lang-current{
  display:flex;
  align-items:center;
  gap:4px;
  border:1.5px solid var(--border);
  background:var(--white);
  border-radius:999px;
  padding:7px 10px;
  cursor:pointer;
  font-family:inherit;
  color:var(--ink-soft);
  transition:border-color 0.15s ease, background 0.15s ease;
  line-height:1;
}
.lang-current:hover{ border-color:var(--ink); color:var(--ink); }
.lang-flag{ display:inline-flex; line-height:0; }
.lang-flag svg{ display:block; width:20px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(31,37,41,0.14); }
.lang-caret{ font-size:10px; color:var(--muted); margin-left:1px; transition:transform 0.15s ease; }
.lang-switcher.is-open .lang-caret{ transform:rotate(180deg); }

.lang-menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:170px;
  max-height:min(360px, 70vh);
  overflow-y:auto;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  padding:6px;
  flex-direction:column;
  gap:2px;
}
.lang-switcher.is-open .lang-menu{ display:flex; }
.lang-option{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border:none;
  background:transparent;
  padding:9px 10px;
  border-radius:6px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  text-align:left;
  transition:background 0.15s ease, color 0.15s ease;
}
.lang-option:hover{ background:var(--paper); color:var(--ink); }
.lang-option.is-active{ background:var(--amber-tint); color:var(--amber-dark); }
.lang-option .lang-flag svg{ width:22px; height:15.4px; }

@media (max-width: 1300px){
  .lang-switcher{ right:78px; }
}
@media (max-width: 980px){
  .lang-switcher{ right:68px; }
}