/* ============================================================
   GTX TURF — stylesheet
   Black-dominant scheme taken from the logo (black / white / turf green).
   ============================================================ */

@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url(fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Squared display face for the wordmark. Orbitron at 900 was picked over
   lighter squared faces because its stroke weight is the closest free
   match to the logo: bars measure 0.218 of cap height against the logo's
   0.237, where Michroma was only 0.107 and read far too thin next to the
   traced F below. Used only for "GTX TURF" via .brandname. */
@font-face{
  font-family:'Orbitron';
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url(fonts/orbitron900.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Matt's green, from the swatch he supplied. Used for fills.
     It is too dark to read as text on black (1.8:1), so small accent
     text and outlines use --green-bright, a lighter tint of the same
     hue that clears AA at 4.9:1. Buttons are this green with white
     text, which lands at 7.4:1. */
  --green:#24401f;
  --green-dark:#1a2f16;
  --green-hover:#2f5528;
  --green-bright:#5c9c4b;

  --black:#000000;
  --panel:#0b0d0b;      /* section tint */
  --card:#111411;       /* cards, quote card */
  --card-2:#171b17;     /* inputs */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --text:#ffffff;
  --body:#b6bfb3;
  --muted:#828d80;

  --wrap:1220px;
  --r:16px;
  --shadow:0 30px 70px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--body);
  background:var(--black);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{
  color:var(--text);
  line-height:1.08;
  letter-spacing:-.025em;
  margin:0 0 .5em;
  font-weight:800;
}

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

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--green);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:800;
}
.skip-link:focus{left:0}

/* ---------- Pill eyebrow ---------- */
.pill{
  display:inline-block;
  border:1.5px solid var(--green-bright);
  color:var(--green-bright);
  border-radius:999px;
  padding:8px 20px;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:22px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--green);
  color:#fff;
  font-weight:800;
  font-size:.95rem;
  text-decoration:none;
  padding:14px 26px;
  border:2px solid var(--green);
  border-radius:999px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease,color .18s ease;
  font-family:inherit;
}
.btn:hover{background:var(--green-hover);border-color:var(--green-hover);transform:translateY(-2px);box-shadow:0 10px 26px rgba(36,64,31,.55)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:10px 20px;font-size:.86rem}
.btn--lg{padding:16px 34px;font-size:1rem}
.btn--block{width:100%}
.btn--ghost{background:transparent;color:#fff;border-color:var(--line-2)}
.btn--ghost:hover{background:#fff;color:#000;border-color:#fff;box-shadow:none}

:focus-visible{outline:3px solid var(--green-bright);outline-offset:3px}

/* ---------- Top bar ---------- */
.topbar{background:#000;color:var(--muted);font-size:.82rem;border-bottom:1px solid var(--line)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px}
.topbar__phone{
  display:inline-flex;align-items:center;gap:7px;
  color:#fff;text-decoration:none;font-weight:800;
}
.topbar__phone:hover{color:var(--green-bright)}
.topbar__phone svg{width:15px;height:15px;fill:currentColor}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px}

/* The wordmark, set in a squared display face wherever the company is
   named. Sized slightly down from the surrounding Figtree so the caps
   sit level with it rather than towering over it. */
.brandname{
  font-family:'Orbitron',Impact,'Arial Narrow',sans-serif;
  font-weight:900;
  letter-spacing:.005em;
  font-size:.86em;
}

/* The F from the logo, traced from the artwork rather than taken from a
   font, because its top arm is detached from the stem and no typeface
   does that. Geometry measured off the logo at full resolution:
   294 x 215 units, top bar 51 deep, gap 33, middle arm 47, stem 68 wide.

   The arms are then cut back from 294 to 240 at Matt's request, because
   the logo's face is more extended than Orbitron and the full width
   overhung the R next to it. Only the arm ends move: the 215 height,
   the 51/33/47 bar depths and the 68 stem are all untouched, so the
   stroke weight still matches. Do not narrow this by shrinking the
   element instead, that would squash the stem and thin the letter.

   Sized to Orbitron's cap height (0.72em) so it sits level with TUR,
   and painted with currentColor so it inherits whatever colour the
   surrounding wordmark uses. The real letter stays in the markup for
   screen readers, search engines and copy and paste. */
.logo-f{
  display:inline-block;
  position:relative;
  width:.804em;           /* 0.72em cap height x the trimmed 1.116 ratio */
  height:.72em;
  margin:0 .06em;
  vertical-align:baseline;
  background-color:currentColor;
  -webkit-mask:var(--logo-f-mask) no-repeat center/100% 100%;
          mask:var(--logo-f-mask) no-repeat center/100% 100%;
}
:root{
  --logo-f-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 215'%3E%3Cpath fill='%23000' d='M0 0h240v51H0z'/%3E%3Cpath fill='%23000' d='M0 84h240v47H68v84H0z'/%3E%3C/svg%3E");
}

/* The F is a span, so any broad `.something span` rule elsewhere in this
   file can outrank plain `.logo-f` and knock it out of the line. This
   raises the specificity so its layout survives that. It also keeps the
   wordmark from ever breaking between the R and the F. */
.brandname .logo-f{display:inline-block}
.brandname{white-space:nowrap}

.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{border-radius:50%;width:54px;height:54px;object-fit:cover}
.brand__lock{display:flex;flex-direction:column;gap:3px}
.brand__text{font-size:1.16rem;color:#fff;line-height:1.1}
.brand__text span{color:var(--green-bright)}
.brand__tag{
  font-size:.68rem;color:var(--muted);font-style:italic;letter-spacing:.02em;line-height:1;
}

.header__right{display:flex;align-items:center;gap:28px}

/* Two labels in one button. Side by side with a slash when there's room,
   stacked without it when there isn't, so it never breaks mid-phrase. */
.header__cta{text-align:center;line-height:1.2;white-space:nowrap}
.header__cta span + span::before{content:"/";margin:0 .45em;opacity:.55}

.nav{display:flex;align-items:center;gap:32px}
.nav a{text-decoration:none;font-weight:700;font-size:.94rem;color:#e6ece4;transition:color .16s ease;white-space:nowrap}
.nav a:hover{color:var(--green-bright)}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}

.navtoggle{
  display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;
}
.navtoggle span{display:block;width:24px;height:2.5px;background:#fff;border-radius:2px;transition:transform .22s ease,opacity .22s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:#000}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
/* Dark enough for white text to sit on, light enough that the turf still reads. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 45%,rgba(0,0,0,.38) 100%),
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.18) 40%,rgba(0,0,0,.82) 100%);
}
.hero__inner{
  position:relative;
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
  padding-top:84px;padding-bottom:84px;
}
.hero h1{font-size:clamp(2.3rem,5.2vw,4.1rem);margin-bottom:22px}
.hero__sub{color:#cfd8cc;font-size:clamp(1.02rem,1.5vw,1.16rem);max-width:56ch;margin:0 0 34px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Quote card ---------- */
.quotecard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:36px 34px;
  box-shadow:var(--shadow);
}
.quotecard h2{font-size:1.65rem;margin-bottom:8px;letter-spacing:-.02em}
.quotecard__sub{color:var(--muted);font-size:.92rem;margin:0 0 26px}

.field{margin-bottom:14px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;font:inherit;font-size:.95rem;color:#fff;
  border:1.5px solid var(--line);border-radius:11px;background:var(--card-2);
  transition:border-color .16s ease,background .16s ease;
}
.field textarea{resize:vertical;min-height:86px}
.field input::placeholder,.field textarea::placeholder{color:#78826f}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378826f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green);background:#1b201b;outline:none;
}
/* Some browsers (Firefox especially) put their own red glow on a `required`
   field that is still empty. Suppress it so the only error styling is ours,
   and only after someone has actually pressed Send. */
.field input:invalid,
.field input:-moz-ui-invalid{box-shadow:none}

/* A soft outline, not a red fill. Clears as soon as the field is filled in. */
.field input[aria-invalid="true"]{border-color:#a8564e}
.field input[aria-invalid="true"]:focus{border-color:var(--green)}
.form .btn{margin-top:6px}
.form__note{font-size:.8rem;color:var(--muted);margin:14px 0 0;line-height:1.55;text-align:center}
.form__note a{color:var(--green-bright);font-weight:700;white-space:nowrap}
.form__note--ok{color:var(--green-bright)}

/* ---------- Trust strip ---------- */
.strip{background:var(--panel);padding:38px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.strip__item{display:flex;flex-direction:column;gap:5px;padding-left:18px;border-left:3px solid var(--green-bright)}
.strip__item strong{color:#fff;font-size:.98rem;letter-spacing:-.01em}
.strip__item span{color:var(--muted);font-size:.87rem;line-height:1.5}

/* ---------- Sections ---------- */
.section{padding:104px 0}
.section--panel{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section__title{font-size:clamp(1.85rem,3.6vw,2.85rem);max-width:19ch}
.section__lead{font-size:1.06rem;max-width:64ch;margin:0 0 46px}

/* ---------- Service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.card:hover{transform:translateY(-4px);border-color:rgba(92,156,75,.5);background:#141814}
.card__icon{
  width:52px;height:52px;border-radius:13px;background:rgba(92,156,75,.14);
  display:grid;place-items:center;margin-bottom:22px;
}
.card__icon svg{width:26px;height:26px;fill:none;stroke:var(--green-bright);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.16rem;margin-bottom:10px}
.card p{margin:0;font-size:.94rem;line-height:1.62;color:var(--body)}

/* ---------- Why ---------- */
.why{display:grid;grid-template-columns:.85fr 1.15fr;gap:66px;align-items:start}
.why__copy .section__lead{margin-bottom:32px}
.why__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:32px 36px}
.why__list li{display:flex;flex-direction:column;gap:7px;font-size:.94rem;line-height:1.6;position:relative;padding-top:24px}
.why__list li::before{content:"";position:absolute;top:0;left:0;width:28px;height:3px;background:var(--green-bright);border-radius:2px}
.why__list strong{color:#fff;font-size:1.02rem;letter-spacing:-.01em}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal{
  padding:0;border:0;background:#0f120f;cursor:pointer;border-radius:14px;overflow:hidden;
  aspect-ratio:1/1;position:relative;display:block;
}
/* Eight tiles divide evenly into four columns, so every row closes out
   flush without any spanning tricks. */
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.gal:hover img{transform:scale(1.06)}
.gal::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .25s ease}
.gal:hover::after{box-shadow:inset 0 0 0 2px var(--green-bright)}

/* Play badge so a video tile is obviously a video before you click it. */
.gal--video .gal__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;
  background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.9);
  display:grid;place-items:center;pointer-events:none;
  transition:background .25s ease,transform .25s ease;
}
.gal--video:hover .gal__play{background:var(--green);transform:translate(-50%,-50%) scale(1.08)}
.gal--video .gal__play svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.gallery__note{margin:28px 0 0;font-size:.94rem;color:var(--muted)}
.gallery__note a{color:var(--green-bright);font-weight:700}

/* ---------- Reviews ---------- */
.reviews__summary{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 40px;
}
.reviews__score{color:#fff;font-size:2.4rem;font-weight:900;letter-spacing:-.03em;line-height:1}
.reviews__count{color:var(--muted);font-size:.95rem}

.stars{display:inline-flex;gap:3px}
.stars svg{width:19px;height:19px;fill:#f5b912}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;display:flex;flex-direction:column;gap:14px;
}
.review__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.review__g{width:20px;height:20px;flex:none}
.review__text{margin:0;font-size:.96rem;line-height:1.65;color:var(--body)}
.review__who{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.review__who strong{color:#fff;font-size:.96rem}
.review__who span{color:var(--muted);font-size:.84rem}

/* Owner's reply, indented under the review it answers. */
.review__reply{
  border-left:2px solid var(--line-2);
  padding:2px 0 2px 14px;
  display:flex;flex-direction:column;gap:5px;
}
.review__replyhead{
  color:var(--green-bright);font-size:.72rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
}
.review__reply p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}

/* Extra reviews stay collapsed until "Show all" is pressed. */
.review.is-extra{display:none}
.reviews.is-expanded .review.is-extra{display:flex}

.reviews__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.reviews__actions:empty{display:none}

/* ---------- Areas ---------- */
.areas{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}
.areas .section__lead{margin-bottom:0}
.areas__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.areas__list li{
  background:var(--card);border:1px solid var(--line);padding:17px 22px;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:13px;font-size:.98rem;
}
.areas__list li:first-child{border-radius:12px 12px 0 0}
.areas__list li:last-child{border-radius:0 0 12px 12px;font-weight:500;color:var(--muted)}
.areas__list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-bright);flex:none}

/* ---------- About page ---------- */
.about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;margin-top:8px}

.about__photo{
  margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--card);
}
.about__photo img{width:100%;height:auto;display:block}

.about__copy p{margin:0 0 22px;font-size:1.05rem;line-height:1.72}
.about__copy p:last-of-type{margin-bottom:0}

.about__sign{
  margin-top:34px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;
}
.about__role{
  color:#fff;font-weight:800;font-size:.95rem;letter-spacing:.01em;
}
.about__quote{
  margin:0;color:var(--green-bright);
  font-size:1.22rem;font-style:italic;line-height:1.4;letter-spacing:-.01em;
}

/* ---------- CTA band ---------- */
.cta{
  background:linear-gradient(120deg,#16250f 0%,#000 60%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:70px 0;
}
.cta__inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta h2{font-size:clamp(1.6rem,3vw,2.35rem);margin-bottom:8px}
.cta p{margin:0;color:var(--muted)}
.cta__actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Contact ---------- */
.contact__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.contact__grid li{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 24px;display:flex;flex-direction:column;gap:6px;
}
.contact__grid svg{
  width:22px;height:22px;fill:none;stroke:var(--green-bright);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px;
}
.contact__label{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:800}
.contact__grid a,.contact__plain{color:#fff;text-decoration:none;font-weight:700;font-size:1rem;word-break:break-word}
.contact__grid a:hover{color:var(--green-bright)}

/* ---------- Footer ---------- */
.footer{background:#000;color:var(--muted);padding:64px 0 0;font-size:.92rem;border-top:1px solid var(--line)}
.footer__inner{
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;align-items:start;
  padding-bottom:40px;border-bottom:1px solid var(--line);
}
.footer__brand{display:flex;align-items:center;gap:16px}
.footer__brand img{border-radius:50%;width:56px;height:56px;object-fit:cover}
.footer__brand strong{display:block;color:#fff;font-size:1.1rem;letter-spacing:-.01em}
.footer__brand em{display:block;color:var(--green-bright);font-size:.85rem;margin-top:3px}
/* Direct child only. As a plain descendant selector this also caught the
   span that draws the F inside the wordmark and set it to display:block,
   which knocked the F onto its own line. */
.footer__brand > div > span{display:block;font-size:.84rem;margin-top:5px}
.footer__nav,.footer__contact{display:flex;flex-direction:column;gap:10px}
.footer__nav a,.footer__contact a{text-decoration:none;transition:color .16s ease}
.footer__nav a:hover,.footer__contact a:hover{color:var(--green-bright)}
.footer__contact a{color:#fff;font-weight:700}
.footer__legal{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:24px;font-size:.82rem;
}

/* ---------- Sticky mobile call bar ---------- */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--green);color:#fff;text-decoration:none;font-weight:800;
  align-items:center;justify-content:center;gap:10px;padding:16px;
  box-shadow:0 -6px 24px rgba(0,0,0,.5);
}
.callbar svg{width:19px;height:19px;fill:currentColor}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.96);
  display:flex;align-items:center;justify-content:center;padding:5vh 6vw;
}
.lightbox[hidden]{display:none}
.lightbox__fig{margin:0;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.lightbox__fig img,
.lightbox__fig video{max-width:100%;max-height:88vh;object-fit:contain;border-radius:10px}
.lightbox__fig video{background:#000;outline:none}
.lightbox__fig [hidden]{display:none}
.lightbox__close{
  position:absolute;top:18px;right:22px;width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:background .16s ease;
}
.lightbox__close:hover{background:rgba(255,255,255,.22)}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:32px;line-height:1;cursor:pointer;transition:background .16s ease;
}
.lightbox__nav:hover{background:rgba(255,255,255,.22)}
.lightbox__nav--prev{left:18px}
.lightbox__nav--next{right:18px}

/* ============================================================
   Responsive
   ============================================================ */

/* The nav collapses earlier than the rest of the layout, because the header
   also carries the two-line quote CTA and runs out of room before 820px. */
@media (max-width:1160px){
  .navtoggle{display:flex}
  .header__right{gap:12px}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    background:#000;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px 24px 22px;
    box-shadow:0 24px 40px rgba(0,0,0,.6);
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:1rem}
}

@media (max-width:1080px){
  .about__grid{grid-template-columns:1fr;gap:38px}
  .about__photo{max-width:540px}
  .hero__inner{grid-template-columns:1fr;gap:44px}
  .cards{grid-template-columns:1fr 1fr}
  .reviews{grid-template-columns:1fr 1fr}
  .contact__grid{grid-template-columns:1fr 1fr}
  .strip__grid{grid-template-columns:1fr 1fr;gap:24px}
  .why{grid-template-columns:1fr;gap:44px}
  .areas{grid-template-columns:1fr;gap:36px}
  .footer__inner{grid-template-columns:1fr 1fr;gap:34px}
}

@media (max-width:820px){
  body{font-size:16px}
  .section{padding:74px 0}
  .topbar__area{display:none}
  .topbar__inner{justify-content:center}

  /* Let headlines find their own break points on narrow screens. */
  .br-wide{display:none}

  /* nav collapse handled in its own query above */

  .hero__inner{padding-top:56px;padding-bottom:56px}
  .hero__scrim{background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.95) 100%)}
  .hero__cta .btn{flex:1 1 100%}
  .quotecard{padding:28px 22px}

  .gallery{grid-template-columns:1fr 1fr;gap:10px}

  .why__list{grid-template-columns:1fr;gap:26px}
  .section__title{max-width:none}

  .cta{padding:56px 0}
  .cta__actions{width:100%}
  .cta__actions .btn{flex:1 1 100%}

  .footer__inner{grid-template-columns:1fr;gap:30px}
  .footer__legal{flex-direction:column;text-align:center;gap:10px}

  .callbar{display:flex}
  body{padding-bottom:58px}
  .lightbox__nav{width:42px;height:42px;font-size:26px}
  .lightbox__nav--prev{left:6px}
  .lightbox__nav--next{right:6px}
}

@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .strip__grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr;gap:0}
  .brand__text{font-size:.92rem}
  .brand img{width:42px;height:42px}
  .brand__tag{display:none}

  /* Stack the two labels and drop the slash once the row gets tight. */
  .header__cta{flex-direction:column;gap:1px;font-size:.68rem;padding:8px 12px}
  .header__cta span + span::before{content:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}