/* RWD — the shell stylesheet.
   Tokens, resets, typography, buttons, forms, the header, the footer and
   the phone action bar: everything every page needs and nothing any single
   page owns. Lifted verbatim out of the old index.html <style> block, which
   is why it carries no page-specific rules — those live in the per-page
   sheets and are pulled in by the page that needs them. */

:root{
  --ink:#0B0B0C;
  --ink-soft:#161618;
  --paper:#F6F6F2;
  --white:#FFFFFF;
  --green:#76BC21;
  --blue:#2BA9E0;
  --grey:#7C7C78;
  --line:#E3E3DC;
  --line-dark:#242426;
  /* Every face on the site is now one of rwd.in's own (see --rwd-sans and
     --rwd-serif below): Lora for headlines and figures, Maven Pro for
     everything that is read as text or as a label. The old names stay so
     no rule had to change — only what they point at. */
  --disp:var(--rwd-serif);
  --body:var(--rwd-sans);
  --mono:var(--rwd-sans);
  /* The redesign's two faces. Declared here rather than in hero.css, where
     they were: pages.css reaches for --lux-sans fifty-two times and chrome.css
     six, and both are loaded on pages hero.css is not — so off the homepage
     the header, the footer and every page body fell back to an unstyled face.
     Tokens the whole site reads belong in the sheet the whole site loads. */
  --lux:var(--rwd-serif);
  --lux-sans:var(--rwd-sans);

  /* RWD's own two faces, taken off rwd.in rather than chosen here: Maven Pro
     is the workhorse there — body, navigation, buttons and project titles
     alike — and Lora is kept for the big editorial headlines and nothing
     else. --lux, --lux-sans, --disp, --body and --mono all point here. */
  --rwd-sans:'Maven Pro',system-ui,sans-serif;
  --rwd-serif:'Lora',Georgia,'Times New Roman',serif;
}
/* The atlas follows the homepage's project cards: Maven Pro for everything,
   headlines and figures included. Re-pointing the serif tokens here, rather
   than rule by rule, catches every heading on it. The project index and the
   project sheet are left out: in all-sans, with its headings a size smaller,
   the index read as a different and smaller site from Home and About. */
#page-atlas{
  --lux:var(--rwd-sans); --disp:var(--rwd-sans); --rwd-serif:var(--rwd-sans);
  /* Maven Pro has no italic; without this the serif's italic lines come out
     as a browser-slanted sans. Upright, they still read by weight and colour. */
  font-synthesis:none;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--green);color:var(--ink)}

/* ---------- signature dots ---------- */
.dots{display:inline-flex;gap:6px;align-items:center;vertical-align:middle}
.dots i{width:10px;height:10px;border-radius:50%;display:inline-block}
.dots i:first-child{background:var(--green)}
.dots i:last-child{background:var(--blue)}
.dots.lg i{width:16px;height:16px}
.dots.sm i{width:7px;height:7px}

/* eyebrow */
.eyebrow{font-family:var(--mono);font-size:16px;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:12px;color:var(--grey)}
.eyebrow .dots i{width:7px;height:7px}

/* ---------- nav ---------- */
body>header{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--ink);color:var(--white);border-bottom:1px solid var(--line-dark)}
.nav-inner{max-width:1360px;margin:0 auto;padding:0 32px;height:68px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .wordmark{font-family:var(--disp);font-size:26px;letter-spacing:.02em;color:var(--white)}
.brand .tag{font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);display:none}
nav.main{display:flex;gap:34px;align-items:center}
nav.main a{font-size:16px;font-weight:500;letter-spacing:.04em;color:#C9C9C4;position:relative;padding:6px 0;transition:color .2s}
nav.main a:hover{color:var(--white)}
nav.main a.active{color:var(--white)}
nav.main a.active::after{content:'';position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:linear-gradient(90deg,var(--green) 50%,var(--blue) 50%)}
.nav-cta{background:var(--green);color:var(--ink);border:none;padding:10px 20px;font-weight:700;font-size:16px;letter-spacing:.05em;transition:background .2s}
.nav-cta:hover{background:var(--blue);color:var(--white)}
.burger{display:none;background:none;border:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--white);display:block;transition:.25s}
.mobile-menu{display:none;background:var(--ink);border-top:1px solid var(--line-dark);padding:12px 32px 24px;flex-direction:column;gap:4px}
.mobile-menu a{color:#C9C9C4;padding:12px 0;font-size:16px;border-bottom:1px solid var(--line-dark)}
.mobile-menu a.active{color:var(--green)}
.mobile-menu.open{display:flex}

/* ---------- page system ---------- */
/* The SPA router's `.page{display:none} / .page.current{display:block}` pair
   is gone: every page is now its own document at its own URL, so a page is
   shown by being requested rather than by winning a class. Markup may still
   carry `.page` as a hook — it just no longer hides anything. */
main{padding-top:68px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100vh - 68px);background:var(--ink);color:var(--white);display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('/assets/media/projects/rwd-waterfront-kolathur/front-1600.jpg') center/cover no-repeat;opacity:.55}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.15) 45%,rgba(11,11,12,.92) 100%)}
.hero-inner{position:relative;max-width:1360px;margin:0 auto;padding:120px 32px 0;width:100%}
.hero .eyebrow{color:#B9B9B4;margin-bottom:22px}
.hero h1{font-family:var(--disp);font-size:clamp(44px,7.4vw,108px);line-height:.98;letter-spacing:-.01em;text-transform:uppercase;max-width:1100px}
.hero h1 .accent-g{color:var(--green)}
.hero h1 .accent-b{color:var(--blue)}
.hero-sub{margin-top:26px;max-width:520px;font-size:17px;font-weight:300;color:#D8D8D2}
.hero-actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;font-weight:700;font-size:16px;letter-spacing:.05em;border:none;transition:.2s}
.btn-solid{background:var(--green);color:var(--ink)}
.btn-solid:hover{background:var(--blue);color:var(--white)}
.btn-ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--green);color:var(--ink)}

/* hero stat band */
.stat-band{position:relative;margin-top:70px;border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:repeat(4,1fr)}
.stat-band .stat{padding:28px 24px 34px;border-right:1px solid rgba(255,255,255,.18)}
.stat-band .stat:last-child{border-right:none}
.stat .num{font-family:var(--disp);font-size:clamp(26px,3vw,42px);line-height:1}
.stat .num em{font-style:normal}
.stat:nth-child(odd) .num em{color:var(--green)}
.stat:nth-child(even) .num em{color:var(--blue)}
.stat .lbl{font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:#A9A9A4;margin-top:8px}

/* ---------- sections ---------- */
section.block{max-width:1360px;margin:0 auto;padding:96px 32px}
.block-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:52px;flex-wrap:wrap}
.block-head h2{font-family:var(--disp);font-size:clamp(30px,4vw,54px);text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;margin-top:14px}
.block-head .lead{max-width:420px;color:var(--grey);font-size:16px}

/* project cards */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proj-card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;position:relative}
.proj-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,11,12,.12)}
.proj-media{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--ink)}
.proj-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.proj-card:hover .proj-media img{transform:scale(1.05)}
.proj-media.type-card{display:flex;align-items:flex-end;padding:22px;background:var(--ink)}
.proj-media.type-card::before{content:attr(data-initial);position:absolute;top:-14px;right:6px;font-family:var(--disp);font-size:150px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.16)}
.proj-media.type-card .tc-loc{font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:#B9B9B4;position:relative}
.proj-media.type-card.alt-g{background:linear-gradient(160deg,var(--ink) 55%,rgba(118,188,33,.32))}
.proj-media.type-card.alt-b{background:linear-gradient(160deg,var(--ink) 55%,rgba(43,169,224,.32))}
.proj-status{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;background:var(--ink);color:var(--white);display:flex;align-items:center;gap:7px}
.proj-status i{width:7px;height:7px;border-radius:50%}
.proj-status.on i{background:var(--green)}
.proj-status.done i{background:var(--blue)}
.proj-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.proj-body h3{font-family:var(--disp);font-size:19px;text-transform:uppercase;letter-spacing:.01em}
.proj-body .loc{font-family:var(--mono);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.proj-body .spec{font-size:16px;color:var(--grey);margin-top:2px}
.proj-body .go{margin-top:auto;padding-top:16px;font-weight:700;font-size:16px;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.proj-body .go::after{content:'→';transition:transform .2s}
.proj-card:hover .go::after{transform:translateX(5px)}
.proj-card:hover .go{color:var(--green)}
.ext-badge{font-family:var(--mono);font-size:16px;color:var(--blue);letter-spacing:.1em}

/* dark band — chairman */
.band-dark{background:var(--ink);color:var(--white)}
.band-dark .eyebrow{color:#A9A9A4}
.chair-grid{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:center}
.chair-photo{position:relative}
.chair-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:1px solid var(--line-dark)}
.chair-photo::after{content:'';position:absolute;bottom:14px;right:14px;width:22px;height:22px;border-radius:50%;background:var(--green);border:4px solid var(--ink)}
.chair-quote{font-size:clamp(20px,2.4vw,30px);font-weight:300;line-height:1.5}
.chair-quote strong{font-weight:600;color:var(--green)}
.chair-quote .b{color:var(--blue);font-weight:600}
.chair-meta{margin-top:28px}
.chair-meta .nm{font-family:var(--disp);font-size:17px;text-transform:uppercase}
.chair-meta .rl{font-family:var(--mono);font-size:16px;color:var(--grey);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}

/* philosophy strip */
.philo{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--white)}
.philo>div{padding:38px 32px;border-right:1px solid var(--line)}
.philo>div:last-child{border-right:none}
.philo .p-num{font-family:var(--mono);font-size:16px;color:var(--grey);letter-spacing:.14em}
.philo h4{font-family:var(--disp);font-size:22px;text-transform:uppercase;margin:14px 0 10px}
.philo p{font-size:16px;color:var(--grey)}
.philo>div:nth-child(1) h4{color:var(--ink)}
.philo>div:nth-child(2) h4{color:var(--green)}
.philo>div:nth-child(3) h4{color:var(--blue)}

/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.testi{background:var(--white);border:1px solid var(--line);padding:34px;display:flex;flex-direction:column;gap:18px}
.testi .q{font-size:16.5px;font-weight:300;line-height:1.65}
.testi .who{margin-top:auto;display:flex;align-items:center;gap:12px}
.testi .who .dots i{width:8px;height:8px}
.testi .who .nm{font-weight:700;font-size:16px}
.testi .who .pj{font-family:var(--mono);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}

/* group band */
.group-strip{display:flex;gap:14px;flex-wrap:wrap}
.group-chip{border:1px solid var(--line);background:var(--white);padding:18px 26px;font-family:var(--mono);font-size:16px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.group-chip i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.group-chip:nth-child(even) i{background:var(--blue)}

/* CTA */
.cta-band{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.cta-band .block{position:relative}
.cta-band h2{font-family:var(--disp);font-size:clamp(36px,5.4vw,76px);text-transform:uppercase;line-height:1;max-width:900px}
.cta-band h2 span{color:var(--green)}
.cta-dots{position:absolute;right:-60px;top:-60px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(118,188,33,.25),transparent 60%),radial-gradient(circle at 70% 70%,rgba(43,169,224,.25),transparent 60%)}

/* ---------- generic page hero ---------- */
.page-hero{background:var(--ink);color:var(--white);padding:90px 0 70px}
.page-hero .inner{max-width:1360px;margin:0 auto;padding:0 32px}
.page-hero h1{font-family:var(--disp);font-size:clamp(38px,6vw,84px);text-transform:uppercase;line-height:1;margin-top:16px}
.page-hero .sub{margin-top:18px;max-width:560px;color:#C9C9C4;font-weight:300}

/* about */
.about-cols{display:grid;grid-template-columns:1.2fr .8fr;gap:64px}
.about-cols .big{font-size:clamp(20px,2.2vw,28px);font-weight:300;line-height:1.55}
.about-cols .big strong{font-weight:600}
.cert-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);background:var(--white)}
.cert-list>div{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:baseline}
.cert-list>div:last-child{border-bottom:none}
.cert-list .c-code{font-family:var(--mono);font-size:16px;color:var(--green);white-space:nowrap}
.cert-list>div:nth-child(even) .c-code{color:var(--blue)}
.cert-list .c-name{font-size:16px;color:var(--grey)}
.stat-grid-lt{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--white);margin-top:64px}
.stat-grid-lt .stat{padding:34px 28px;border-right:1px solid var(--line)}
.stat-grid-lt .stat:last-child{border-right:none}
.stat-grid-lt .num{font-family:var(--disp);font-size:clamp(30px,3.4vw,48px)}
.stat-grid-lt .stat:nth-child(odd) .num em{color:var(--green);font-style:normal}
.stat-grid-lt .stat:nth-child(even) .num em{color:var(--blue);font-style:normal}
.stat-grid-lt .lbl{font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:8px}

/* projects page filter */
.filter-row{display:flex;gap:10px;margin-bottom:44px;flex-wrap:wrap}
.filter-btn{border:1px solid var(--line);background:var(--white);padding:11px 22px;font-weight:600;font-size:16px;letter-spacing:.05em;transition:.2s}
.filter-btn.active{background:var(--ink);color:var(--white);border-color:var(--ink)}
.filter-btn:hover:not(.active){border-color:var(--ink)}

/* ---------- project detail ---------- */
.pd-hero{background:var(--ink);color:var(--white);padding:80px 0 0}
.pd-hero .inner{max-width:1360px;margin:0 auto;padding:0 32px}
.pd-back{font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);display:inline-flex;gap:8px;margin-bottom:28px;transition:color .2s}
.pd-back:hover{color:var(--green)}
.pd-hero h1{font-family:var(--disp);font-size:clamp(36px,5.6vw,78px);text-transform:uppercase;line-height:1;margin-top:12px}
.pd-hero .pd-loc{font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-top:14px}
.pd-specs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-dark);margin-top:56px}
.pd-specs>div{padding:24px 20px 30px;border-right:1px solid var(--line-dark)}
.pd-specs>div:last-child{border-right:none}
.pd-specs .v{font-family:var(--disp);font-size:19px}
.pd-specs .k{font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:6px}
.pd-hero-img{max-width:1360px;margin:0 auto;padding:0 32px}
.pd-hero-img img{width:100%;max-height:640px;object-fit:cover;transform:translateY(60px);margin-top:-60px;border:1px solid var(--line)}
.pd-body{padding-top:140px}
.pd-two{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.pd-two h3{font-family:var(--disp);font-size:24px;text-transform:uppercase;margin:14px 0 18px}
.pd-two p{color:#3A3A38;font-weight:300;font-size:16.5px}
.amen-list{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:var(--white)}
.amen-list span{padding:15px 20px;font-size:16px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:flex;gap:10px;align-items:center}
.amen-list span i{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.amen-list span:nth-child(even) i{background:var(--blue)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.gal-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);transition:transform .3s}
.gal-grid img:hover{transform:scale(1.02)}
.rera-line{font-family:var(--mono);font-size:16px;letter-spacing:.06em;color:var(--grey);margin-top:44px;padding:16px 20px;border:1px dashed var(--line);background:var(--white)}

/* careers */
.career-card{border:1px solid var(--line);background:var(--white);padding:44px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.career-card h3{font-family:var(--disp);font-size:26px;text-transform:uppercase}
.career-card p{color:var(--grey);margin-top:8px;max-width:520px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.c-item{padding:24px 0;border-bottom:1px solid var(--line)}
.c-item .k{font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.c-item .v{font-size:18px;font-weight:500;margin-top:6px}
.c-item .v a:hover{color:var(--green)}
form.enq{display:flex;flex-direction:column;gap:16px;background:var(--white);border:1px solid var(--line);padding:38px}
form.enq label{font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
form.enq input,form.enq select,form.enq textarea{font-family:var(--body);font-size:16px;padding:13px 14px;border:1px solid var(--line);background:var(--paper);margin-top:6px;width:100%;transition:border-color .2s}
form.enq input:focus,form.enq select:focus,form.enq textarea:focus{outline:none;border-color:var(--green)}
.form-ok{display:none;background:var(--ink);color:var(--white);padding:20px;font-size:16px;align-items:center;gap:12px}
.form-ok.show{display:flex}
/* Shown when the lead could not be delivered. Deliberately not styled as an
   error the visitor caused: it tells them the enquiry did not reach us and
   hands them a phone number, because a lead they know was lost is one they
   can still recover. */
.form-fail{display:none;grid-column:1/-1;padding:16px 18px;border-left:3px solid #C0502F;
  background:#FBEFEA;color:#6B2C17;font-size:16px;line-height:1.6}
.form-fail.show{display:block}
.form-fail b{display:block;margin-bottom:3px}
.form-fail a{color:#6B2C17;font-weight:600;border-bottom:1px solid currentColor}

/* footer */
footer{background:var(--ink);color:#C9C9C4;margin-top:0}
.foot-inner{max-width:1360px;margin:0 auto;padding:72px 32px 36px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:52px;border-bottom:1px solid var(--line-dark)}
.foot-brand .wordmark{font-family:var(--disp);font-size:30px;color:var(--white)}
.foot-brand p{font-size:16px;margin-top:14px;max-width:280px;color:var(--grey)}
.foot-col h5{font-family:var(--mono);font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:18px}
.foot-col a{display:block;padding:5px 0;font-size:16px;transition:color .2s}
.foot-col a:hover{color:var(--green)}
.foot-col .addr{font-size:16px;line-height:1.7;color:#A9A9A4}
.foot-bottom{display:flex;justify-content:space-between;padding-top:28px;font-family:var(--mono);font-size:16px;color:var(--grey);letter-spacing:.06em;flex-wrap:wrap;gap:12px}

/* reveal */
/* Gated on html.js, which the layout sets in the head before anything paints.
   Ungated, `opacity:0` is a promise that JavaScript will arrive and add .in —
   and when it does not, the page is blank rather than unanimated. Most of the
   site's content carries .rv, so that failure mode is the whole page. */
html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
html.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{transition:none!important;animation:none!important}}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* responsive */
@media(max-width:1024px){
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .pd-specs{grid-template-columns:repeat(3,1fr)}
  .pd-specs>div{border-bottom:1px solid var(--line-dark)}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  nav.main{display:none}
  .burger{display:flex}
  .stat-band{grid-template-columns:1fr 1fr}
  .stat-band .stat:nth-child(2n){border-right:none}
  .stat-band .stat{border-bottom:1px solid rgba(255,255,255,.18)}
  .chair-grid{grid-template-columns:1fr;gap:36px}
  .chair-photo{max-width:220px}
  .philo{grid-template-columns:1fr}
  .philo>div{border-right:none;border-bottom:1px solid var(--line)}
  .testi-grid{grid-template-columns:1fr}
  .about-cols,.pd-two,.contact-grid{grid-template-columns:1fr;gap:44px}
  .stat-grid-lt{grid-template-columns:1fr 1fr}
  .stat-grid-lt .stat{border-bottom:1px solid var(--line)}
  .proj-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr 1fr}
  section.block{padding:64px 22px}
  .nav-inner{padding:0 22px}
  .hero-inner{padding:90px 22px 0}
}
@media(min-width:680px){.brand .tag{display:block}}