/* A single, deliberate light world: this is the company's own site. */
:root{
  color-scheme:light;
  --paper:#ffffff; --stone:#f3f3f0; --rule:#e2e3de; --ink:#101814; --body:#3d4640; --quiet:#7b847e;
  --green:#14532d; --deep:#0d2419; --deep-ink:#e9efe9; --deep-quiet:#9fb3a5; --deep-rule:#23402f;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* panels that set display:grid must still hide */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--green);outline-offset:3px}
p{margin:0}
img{max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:300;text-wrap:balance;letter-spacing:-.01em}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);font-weight:500}
.proto-unused{background:var(--stone);color:var(--quiet);font-size:.75rem;text-align:center;padding:7px var(--gut)}
.proto a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.proto .short{display:none}

/* identity in use */
/* THE LOGO (approved 9 Oct 2026): quatrefoil + PEANUTS / RETAIL in Archivo Expanded — see site/brand/kit.py */
.lockup{display:inline-flex;align-items:center;gap:.2em;line-height:1;font-size:54px;color:#14532d}
.lockup .lk-mk{width:.8em;height:.8em;flex:none}
.lockup .lk-wm{display:inline-flex;flex-direction:column}
.lockup .lk-w{font-family:Archivo,sans-serif;font-stretch:125%;font-weight:800;font-size:.46em;letter-spacing:.03em;color:#14532d}
.lockup .lk-s{font-family:Archivo,sans-serif;font-stretch:125%;font-weight:500;font-size:.13em;letter-spacing:.9em;margin-top:.45em;color:#b3261e}
.lockup.on-dark .lk-w{color:#f6f1e7} .lockup.on-dark .lk-s{color:#e8a33d}
@media (max-width:820px){.lockup{font-size:38px}.lockup .lk-s{letter-spacing:.8em}}
.shell{display:block;flex:none}
.lockup>.shell{margin-left:-.09em;margin-left:calc(var(--shell-w,49px) * -.09)}

header.site{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
header.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:20px;flex-wrap:wrap}
header.site .wrap>a:first-child{display:flex;align-items:center;line-height:0}
nav ul{display:flex;gap:clamp(16px,2.4vw,34px);list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--body);flex-wrap:wrap}
nav a{padding-block:4px;border-bottom:1px solid transparent}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--green)}
.nav-foot{display:none}
.menu-btn{display:none;font:500 .9rem var(--sans);color:var(--ink);background:none;border:1px solid var(--rule);border-radius:99px;padding:8px 16px;cursor:pointer}
.menu-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* pages */
[data-page]{display:none}
[data-page].on{display:block}

.open{padding-block:clamp(48px,5.5vw,80px) clamp(56px,6vw,80px)}   /* top was up to 140px: "too much gap between the header and the hero" (6 Oct) */
.open h1{font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:1.03;max-width:16ch;margin-top:22px}
.open h1 em{font-style:italic;color:var(--green)}
.open .sub{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(36px,5vw,60px)}
.open .sub p{grid-column:7 / span 6;font-size:1.12rem;color:var(--body);max-width:46ch}
@media (max-width:820px){.open .sub p{grid-column:1 / -1}}
.phead{padding-block:clamp(64px,8vw,112px) clamp(40px,5vw,64px);border-bottom:1px solid var(--rule)}
.phead h1{font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:1.05;max-width:18ch;margin-top:18px}
.phead p{margin-top:26px;font-size:1.1rem;color:var(--body);max-width:56ch}

.lg-img{display:block;width:var(--w);max-width:100%;height:auto;background:center/contain no-repeat;filter:brightness(0);opacity:.84}

/* the portfolio, moving slowly past: one row at every width, never a ragged wrap */
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.strip .window{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade,9%),#000 calc(100% - var(--fade,9%)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--fade,9%),#000 calc(100% - var(--fade,9%)),transparent)}
.strip .rail{display:flex;width:max-content;padding-block:clamp(28px,3vw,40px);animation:rail 70s linear infinite}
.strip:hover .rail{animation-play-state:paused}
.track{display:flex;align-items:center;gap:clamp(44px,6vw,80px);list-style:none;margin:0;padding:0 clamp(22px,3vw,40px)}
.track li{flex:none;display:flex;align-items:center}
.track .lg-img{opacity:.72}
@keyframes rail{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .strip .window{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .strip .rail{animation:none}
  .track[aria-hidden]{display:none}
}

/* ★ BALANCED END TO END (Manav, 1 Oct, with two arrows): the first figure starts
   on the content's left edge and the last one ENDS on its right edge, so the
   margins either side of the row are equal. Left-aligned grid columns left the
   right side visibly longer. Framed by full-width rules like the strip above.
   ★ 13 Oct (Manav: "not aligned properly"): space-between made the gaps uneven
   (the wide "1 lakh+" pushed the rest right) and labels sat off their numbers.
   Now FOUR EQUAL COLUMNS, each centred, hairlines between: symmetric edges,
   equal rhythm, every label under its number. Same treatment as the phone. */
.figs{border-bottom:1px solid var(--rule)}
.figs .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;align-items:start;padding-block:clamp(36px,4vw,52px) clamp(40px,4.4vw,56px)}
.fig{display:grid;gap:10px;align-content:start;justify-items:center;text-align:center}
.fig+.fig{border-left:1px solid var(--rule)}
@media (max-width:820px){
  .figs .wrap{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;padding-block:32px}
  .fig:nth-child(odd){border-left:0}
}
.fig b{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,4.6vw,3.8rem);line-height:.9;font-variant-numeric:lining-nums tabular-nums}
.fig span{font-size:.86rem;color:var(--quiet);letter-spacing:.01em}

.sec{--sp:clamp(72px,9vw,124px);padding-block:var(--sp)}
/* ★ ONE RHYTHM (6 Oct 2026, Manav: "too much spacing … more uniform"). Two plain white sections that
   meet used to stack their paddings into a double gap. Now the gap is one step, split around a hairline. */
.sec:not(.stone):not(.dark):has(+ .sec:not(.stone):not(.dark)){padding-bottom:calc(var(--sp) / 2)}
.sec:not(.stone):not(.dark) + .sec:not(.stone):not(.dark){padding-top:calc(var(--sp) / 2);border-top:1px solid var(--rule)}
.stone{background:var(--stone)}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.split .side{grid-column:1 / span 3}
.split .main{grid-column:5 / span 8}
@media (max-width:820px){.split .side,.split .main{grid-column:1 / -1}}
.sec h2{font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.1;max-width:20ch}
.prose{display:grid;gap:18px;margin-top:30px;max-width:62ch;color:var(--body)}
.more{display:inline-flex;gap:8px;margin-top:36px;font-size:.92rem;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:3px}
.more:hover{color:var(--green);border-color:var(--green)}

/* brand grid */
.lead{margin-top:28px;max-width:62ch;color:var(--body)}
.grid{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}
  .grid .cell:last-child:nth-child(3n+1){grid-column:1 / -1}}   /* 16 brands: the lone last logo spans its row */
@media (max-width:560px){.grid{grid-template-columns:repeat(2,1fr)}}
.cell{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:26px 22px 20px;display:grid;grid-template-rows:96px auto;gap:14px;min-width:0;transition:background .2s}
.cell:hover{background:var(--stone)}
.cell .lg{display:flex;align-items:center;justify-content:center}
.cell .lg .lg-img{max-width:84%}
.cell .cap{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;color:var(--quiet);border-top:1px solid var(--rule);padding-top:12px}
.cell .cap b{font-weight:500;color:var(--body)}
.grid-note{margin-top:20px;font-size:.88rem;color:var(--quiet);max-width:70ch}

/* portfolio page rows */
.prow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:40px;border-bottom:1px solid var(--rule);align-items:center;scroll-margin-top:100px}
.plogo{grid-column:1 / span 3;display:flex;align-items:center;min-height:80px}
.plogo .lg-img{max-width:92%}
.ptext{grid-column:5 / span 6;display:grid;gap:6px}
.ptext h3{font-size:2rem;line-height:1.1}
.ptext p{color:var(--body);max-width:52ch}
.ptext .where{color:var(--quiet);font-size:.9rem}
.pcount{grid-column:11 / span 2;text-align:right}
.pcount .within{font-size:.8rem;letter-spacing:0;color:var(--quiet);font-weight:400;line-height:1.4}
.pcount b,.state b{font-family:var(--serif);font-weight:300;font-size:2.4rem;line-height:1;font-variant-numeric:lining-nums tabular-nums;display:block}
.pcount small,.state b small{display:block;font-family:var(--sans);font-size:.72rem;color:var(--quiet);margin-top:6px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
@media (max-width:820px){.plogo,.ptext,.pcount{grid-column:1 / -1;text-align:left}}

/* for brands */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px);margin-top:52px;border-top:1px solid var(--rule)}
@media (max-width:820px){.three{grid-template-columns:1fr}}
.three div{padding-top:22px;display:grid;gap:10px;align-content:start}
.three h3{font-size:1.4rem;font-weight:400}
.three p{color:var(--body);font-size:.97rem}

/* ★ LINE ART: one weight, one ink. A drawing has no ground of its own — it stands
   on its container's bottom rule, the same hairline the page uses everywhere. */
.art{display:block;width:100%;height:auto;color:var(--green)}
.stage{border-bottom:1px solid var(--rule);display:flex;justify-content:center;align-items:flex-end}
/* one frame height for every landmark, so the four ground lines read as one level line */
.land .stage{aspect-ratio:520/232}
.land .stage .art{max-height:100%;width:100%}
.lands{margin-top:52px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.lands-top{margin-top:56px}
.land{display:grid;gap:12px;align-content:start}
.land span{font-size:.85rem;color:var(--body);text-align:center;text-wrap:balance}
.land b{font-weight:500;color:var(--ink)}
@media (max-width:900px){.lands{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* states summary */
.states{margin-top:52px;border-top:1px solid var(--rule)}
.state{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:22px;border-bottom:1px solid var(--rule);align-items:baseline}
.state:hover h3{color:var(--green)}
.state h3{grid-column:1 / span 4;font-size:1.6rem;font-weight:400;transition:color .2s}
.state p{grid-column:5 / span 6;color:var(--body)}
.state b{grid-column:11 / span 2;text-align:right;font-size:2rem}
@media (max-width:760px){.state h3,.state p{grid-column:1 / -1}.state b{grid-column:1 / -1;text-align:left}}

/* presence page */
.pstate{padding-block:48px;border-bottom:1px solid var(--rule)}
summary.pstate-head{list-style:none;cursor:default}
summary.pstate-head::-webkit-details-marker{display:none}
.hero-art{display:none}

/* the figures, measured: a tailor's tape in place of the plain rule */
.figs.tape{border-bottom:0;position:relative;--tk:#c5c9c1;
  background:
   repeating-linear-gradient(90deg,var(--tk) 0 1px,transparent 1px 80px) left bottom/100% 11px no-repeat,
   repeating-linear-gradient(90deg,var(--tk) 0 1px,transparent 1px 40px) left bottom/100% 7px no-repeat,
   repeating-linear-gradient(90deg,var(--tk) 0 1px,transparent 1px 8px) left bottom/100% 4px no-repeat;
  box-shadow:inset 0 -1px 0 var(--tk)}
.figs.tape .wrap{padding-bottom:clamp(48px,5vw,64px)}

/* a tool of the trade: an icon standing on its own short ground line */
.tool{display:flex;align-items:flex-end;height:84px;border-bottom:1px solid var(--rule);margin-bottom:22px}
.tool .art{height:100%;width:auto;color:var(--green)}
.role h3{display:flex;align-items:center;gap:16px}
.role h3 span{grid-column:auto;text-align:left;color:inherit;font-size:inherit}
.role h3 .tool{height:40px;width:40px;flex:none;margin:0;border-bottom-color:var(--rule)}

/* presence: a landmark beside each state's name */
.st-art{display:none}
.pstate-head{align-items:flex-end}
.pstate-head .st-art{display:flex;align-items:flex-end;width:132px;flex:none;border-bottom:1px solid var(--rule);margin-right:6px}
.pstate-head .st-art .art{width:100%;height:auto}
.pstate-head h3{flex:1;line-height:1}
.city:not(.long){break-inside:avoid}
.pstate-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px}
.pstate-head h3{font-size:clamp(1.8rem,3vw,2.4rem)}
.pstate-head span{color:var(--quiet);font-size:.9rem}
/* ★ FLOWED, NOT GRIDDED: a long city list beside a short one made a
   tall column and a hole. The lists now run down balanced newspaper columns; a
   long city continues into the next, and a city's name never strands alone. */
.cities{columns:3;column-gap:48px;column-fill:balance}
@media (max-width:900px){.cities{columns:2}}
@media (max-width:560px){.cities{columns:1}}
.city{margin-bottom:28px}
.city h4{break-after:avoid}
.city li{break-inside:avoid}
.city h4{font-family:var(--sans);font-weight:600;font-size:.95rem;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:6px}
.city h4 small{font-weight:500;color:var(--quiet)}
.city ul{list-style:none;margin:0;padding:0}
.city li{display:flex;justify-content:space-between;gap:12px;padding-block:7px;border-bottom:1px solid var(--rule);font-size:.92rem}
.city li em{font-style:normal;color:var(--quiet);text-align:right}

.photo{background:var(--deep);aspect-ratio:21/6;display:flex;align-items:flex-end;position:relative;overflow:hidden}
.photo .ghost{position:absolute;right:-2%;top:50%;transform:translateY(-50%);opacity:.08}
.photo .wrap{width:100%;padding-block:22px;display:flex;justify-content:space-between;gap:16px;color:var(--deep-quiet);font-size:.78rem;letter-spacing:.04em;flex-wrap:wrap;position:relative}
@media (max-width:620px){.photo{aspect-ratio:4/3}}

.dark{background:var(--deep);color:var(--deep-ink)}
.dark .label{color:var(--deep-quiet)}
.awards{margin-top:44px;border-top:1px solid var(--rule)}
.dark .awards{border-color:var(--deep-rule)}
.aw{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:18px;border-bottom:1px solid var(--rule);align-items:baseline}
.dark .aw{border-color:var(--deep-rule)}
.aw b{grid-column:1 / span 7;font-family:var(--serif);font-weight:300;font-size:1.3rem;line-height:1.3}
.aw span{grid-column:8 / span 3;color:var(--quiet);font-size:.9rem}
.aw i{grid-column:11 / span 2;text-align:right;font-style:normal;color:var(--quiet);font-size:.9rem;font-variant-numeric:tabular-nums}
.dark .aw span,.dark .aw i{color:var(--deep-quiet)}
@media (max-width:760px){.aw b,.aw span,.aw i{grid-column:1 / -1;text-align:left}}

/* timeline */
.tl{margin-top:48px;border-top:1px solid var(--rule)}
.tl div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:22px;border-bottom:1px solid var(--rule);align-items:baseline}
.tl b{grid-column:1 / span 3;font-family:var(--serif);font-weight:300;font-size:1.9rem;line-height:1;font-variant-numeric:lining-nums}
.tl p{grid-column:5 / span 8;color:var(--body)}
@media (max-width:760px){.tl b,.tl p{grid-column:1 / -1}}

/* principles */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:48px}
@media (max-width:760px){.pair{grid-template-columns:1fr}}
.pair div{border-top:1px solid var(--ink);padding-top:20px;display:grid;gap:12px}
.pair h3{font-size:1.5rem;font-weight:400}
.pair p{color:var(--body)}

/* advisory */
.phead h1 em{font-style:italic;color:var(--green)}
.phead .btn{margin-top:30px}
.offers{margin-top:44px}
.offers .role h3{font-size:1.4rem}
.six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(24px,4vw,48px);margin-top:44px}
.six div{border-top:1px solid var(--ink);padding-top:16px;display:grid;gap:8px;align-content:start}
.six h3{font-size:1.3rem;font-weight:400}
.six p{color:var(--body);font-size:.95rem}
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink)}
.steps li{padding:18px 18px 0 0;display:grid;gap:6px;align-content:start}
.steps li+li{padding-left:18px;border-left:1px solid var(--rule)}
.steps b{font-family:var(--serif);font-weight:300;font-size:2rem;line-height:1;color:var(--green);font-variant-numeric:lining-nums}
.steps h3{font-family:var(--sans);font-weight:600;font-size:.98rem}
.steps p{font-size:.9rem;color:var(--body)}
.person{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.portrait{aspect-ratio:4/5;border:1px dashed var(--quiet);display:flex;align-items:center;justify-content:center;color:var(--quiet);font-size:.8rem}
.role-line{color:var(--quiet);margin-top:6px}
.stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:44px}
.stories>div{display:grid;gap:10px;align-content:start}
.stories .stage{aspect-ratio:520/235}
.stories h3{font-size:1.3rem;font-weight:400}
.stories p{color:var(--body);font-size:.95rem}
.chip{justify-self:start;font-size:.7rem;font-weight:600;letter-spacing:.06em;padding:3px 10px;border-radius:99px;background:var(--stone);color:var(--quiet)}
.book{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;margin-top:36px}
.book label{display:grid;gap:6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-quiet);font-weight:500}
.book .wide{grid-column:1 / -1}
.book input,.book select,.book textarea{font:400 1rem var(--sans);letter-spacing:0;text-transform:none;color:var(--deep-ink);background:transparent;
  border:0;border-bottom:1px solid var(--deep-rule);padding:8px 0;border-radius:0;outline:none;width:100%}
.book select option{color:#101814}
.book input:focus,.book select:focus,.book textarea:focus{border-bottom-color:var(--deep-quiet)}
.book input::placeholder{color:#5f7a6a}
.sendrow{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.btn.light{border-color:var(--deep-ink);color:var(--deep-ink);background:transparent;margin-top:6px;font:500 .92rem var(--sans);cursor:pointer}
.btn.light:hover{background:var(--deep-ink);color:var(--deep)}
.formnote{font-size:.85rem;color:var(--deep-quiet);max-width:46ch}
/* journal */
.jfeat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,56px);align-items:end;border-top:1px solid var(--ink);padding-top:28px}
.jfeat .jart{border-bottom:1px solid var(--rule);display:flex;align-items:flex-end;justify-content:center;aspect-ratio:1/1;max-width:280px}
.jfeat .jart .art{height:78%;width:auto}
.jfeat h2{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.08;margin:10px 0 12px;max-width:20ch}
.jfeat p{color:var(--body);max-width:56ch}
.jfeat:hover h2{color:var(--green)}
.jnext{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--rule)}
.jnext li{padding:14px 0;border-bottom:1px solid var(--rule);font-family:var(--serif);font-size:1.2rem;color:var(--quiet)}
.back{display:inline-block;margin-bottom:6px}
.back:hover{color:var(--green)}
.article{padding-block:56px 96px}
.aside-art{border-bottom:1px solid var(--rule);display:flex;align-items:flex-end;height:120px;max-width:140px}
.aside-art .art{height:100%;width:auto}
.aside-note{font-size:.82rem;color:var(--quiet);margin-top:12px;max-width:24ch}
.abody{max-width:66ch;font-size:1.06rem}
.abody p{color:var(--body);margin-bottom:1.1em}
.abody h3{font-size:1.55rem;font-weight:400;margin:1.6em 0 .5em;color:var(--ink)}
.abody h3:first-child{margin-top:0}
.abody .first::first-letter{font-family:var(--serif);font-size:3.6em;float:left;line-height:.85;padding:6px 10px 0 0;color:var(--green)}
.endnote{margin-top:48px;background:var(--stone);padding:24px 26px;display:grid;gap:8px}
.endnote p{color:var(--body)}
.jfeat.noart{grid-template-columns:minmax(0,1fr)}
.jlist{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--rule)}
.jlist li a{display:block;padding:22px 0;border-bottom:1px solid var(--rule)}
.jlist h3{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:400;margin:6px 0 6px;max-width:30ch}
.jlist p{color:var(--body);max-width:60ch;margin:0}
.jlist a:hover h3{color:var(--green)}
sup.cite{font-size:.68em;line-height:0;margin-left:1px}
sup.cite a{color:var(--green);font-weight:600}
.sources{margin-top:40px;border-top:1px solid var(--rule);padding-top:16px;font-size:.86rem;color:var(--quiet)}
.sources ol{margin:10px 0 0;padding-left:1.3em}
.sources li{margin-bottom:6px}
.sources a{color:var(--body);border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.takeaways{list-style:none;margin:12px 0 0;padding:0;max-width:30ch}
.takeaways li{font-family:var(--serif);font-size:1.08rem;line-height:1.35;padding:12px 0;border-top:1px solid var(--rule);color:var(--ink)}


/* ★ ADVISORY: one deep green and a warm ivory (Manav, 5 Oct: no lighter greens; "the deeper green is good").
   Its own line art: the life of a store, and the way east. Scoped to .adv / .advband. */
.adv,.advband{--a-bg:#0d2419;--a-ink:#f1eee6;--a-quiet:#b9b6ab;--a-rule:rgba(241,238,230,.16);--a-faint:rgba(241,238,230,.07);
  background:var(--a-bg);color:var(--a-ink)}
.adv .art,.advband .art{color:var(--a-ink)}
.adv h1,.adv h2,.adv h3{color:var(--a-ink)}
.adv-mark{font-family:var(--serif);font-size:1.1rem;letter-spacing:-.005em;color:var(--a-ink)}
.adv-mark em{font-style:italic;color:var(--a-quiet)}
.alabel{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--a-quiet);font-weight:500}
.adv-hero{padding-block:clamp(56px,8vw,112px) 0}
.adv-hero h1{font-size:clamp(2.6rem,6.6vw,5.6rem);line-height:1.02;max-width:15ch;margin-top:26px}
.adv-hero h1 em{font-style:italic;font-weight:300}
.adv-sub{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(28px,4vw,48px);align-items:end}
.adv-sub p{grid-column:1 / span 6;font-size:1.12rem;color:var(--a-quiet);max-width:52ch}
.adv-cta{grid-column:8 / span 5;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.abtn{display:inline-flex;gap:10px;align-items:center;padding:14px 22px;font:500 .92rem var(--sans);border:1px solid var(--a-ink);color:var(--a-ink);background:transparent;cursor:pointer;text-decoration:none}
.abtn.fill{background:var(--a-ink);color:var(--a-bg)}
.abtn:hover{background:var(--a-ink);color:var(--a-bg)}
.abtn.fill:hover{background:transparent;color:var(--a-ink)}
.abtn.ink{border-color:var(--ink);color:var(--ink)}
.abtn.ink:hover{background:var(--ink);color:var(--paper)}
.abtn:focus-visible,.alink:focus-visible,.jt:focus-visible,.wb:focus-visible{outline:2px solid var(--a-ink);outline-offset:3px}
.adv-sky{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,32px);margin-top:clamp(48px,6vw,80px)}
.adv-sky figure{margin:0;display:grid;gap:8px}
.adv-sky .g{border-bottom:1px solid var(--a-rule);display:flex;align-items:flex-end;aspect-ratio:520/235}
.adv-sky figcaption{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--a-quiet)}
.adv-facts{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:34px 44px;margin-top:12px;--tk:rgba(241,238,230,.28);
  background:repeating-linear-gradient(90deg,var(--tk) 0 1px,transparent 1px 80px) left bottom/100% 11px no-repeat,
   repeating-linear-gradient(90deg,var(--tk) 0 1px,transparent 1px 40px) left bottom/100% 7px no-repeat,
   repeating-linear-gradient(90deg,var(--tk) 0 1px,transparent 1px 8px) left bottom/100% 4px no-repeat;
  box-shadow:inset 0 -1px 0 var(--tk)}
.adv-facts div{display:grid;gap:6px}
.adv-facts b{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:.9;font-variant-numeric:lining-nums tabular-nums}
.adv-facts span{font-size:.84rem;color:var(--a-quiet)}
.adv-sec{padding-block:clamp(64px,8vw,112px);border-top:1px solid var(--a-rule)}
.adv-hero+.adv-sec{border-top:0}
.adv-head{display:grid;gap:12px;max-width:62ch;margin-bottom:44px}
.adv-head h2,.adv-two h2,.adv-person h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.08}
.adv-head p,.adv-p{color:var(--a-quiet)}
/* where is your store today */
.jtabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.6vw,22px)}
.jt{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:12px;align-content:start;color:var(--a-quiet);transition:color .2s}
.jt .jd{display:block;border-bottom:1px solid var(--a-rule);padding-inline:6%;transition:border-color .2s}
.jt .jd .art{width:100%;height:auto;color:currentColor;opacity:.55;transition:opacity .2s}
.jt .jl{font-size:.92rem;line-height:1.35;display:grid;gap:4px}
.jt .jl i{font-style:normal;font-family:var(--serif);font-size:.95rem}
.jt:hover{color:var(--a-ink)}.jt:hover .art{opacity:.85}
.jt[aria-selected="true"]{color:var(--a-ink)}
.jt[aria-selected="true"] .art{opacity:1}
.jt[aria-selected="true"] .jd{border-bottom:2px solid var(--a-ink)}
.jp{margin-top:36px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:20px clamp(24px,4vw,56px);align-items:start;
  border:1px solid var(--a-rule);padding:clamp(22px,3vw,40px)}
.jp>div{display:grid;gap:12px}
.jp h3{font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:300}
.jp p{color:var(--a-quiet)}
.jp ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--a-rule)}
.jp li{padding:11px 0;border-bottom:1px solid var(--a-rule)}
.jp .abtn{grid-column:1 / -1;justify-self:start}
.len{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--a-ink)!important;font-weight:500}
/* the way east */
.wayx{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,56px);align-items:center}
.wmap{position:relative}
.way{display:block;width:100%;height:auto;color:var(--a-ink)}
.way .rt{stroke-dasharray:1;stroke-dashoffset:0}
.wayx.ready .way .rt{stroke-dashoffset:1}
.wayx.ready.drawn .way .rt{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.25,1)}
.way .st{fill:var(--a-bg);stroke:var(--a-ink);stroke-width:1.4;vector-effect:non-scaling-stroke;transition:fill .2s}
.way .st.on{fill:var(--a-ink)}
.way text{fill:var(--a-ink);font:500 13px var(--sans);stroke:none}
.way .note{fill:var(--a-quiet);font:italic 400 12px var(--serif)}
.way .tick{stroke:var(--a-quiet);fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.wb{all:unset;position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;cursor:pointer}
.wb:hover{background:var(--a-faint)}
.wnotes{display:grid;gap:12px;align-content:start;border-left:1px solid var(--a-rule);padding-left:clamp(20px,3vw,36px);min-height:180px}
.wn{display:grid;gap:10px}
.wn h3{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:300}
.wn p{color:var(--a-quiet);font-size:1.02rem}
.whint{font-size:.8rem;color:var(--a-quiet);font-style:italic;font-family:var(--serif)}
.adv-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.adv-three div{border-top:1px solid var(--a-rule);padding-top:14px;display:grid;gap:6px}
.adv-three b{font-family:var(--serif);font-weight:400;font-size:1.2rem}
.adv-three span{color:var(--a-quiet);font-size:.94rem}
/* timeline, person, stories, questions */
.tline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.tline:before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px solid var(--a-rule)}
.tline li{position:relative;padding-right:20px;display:grid;gap:6px}
.tline i{width:13px;height:13px;border-radius:50%;background:var(--a-bg);border:1.4px solid var(--a-ink);margin-bottom:12px}
.tline li:first-child i{background:var(--a-ink)}
.tline b{font-family:var(--serif);font-weight:400;font-size:1.3rem}
.tline span{color:var(--a-quiet);font-size:.92rem}
.adv-person{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.adv-person .ph .director{display:block;width:100%;height:auto}
/* the director's section is a light band inside the dark Advisory page (9 Oct 2026: the portrait reads only on a light ground) */
.adv-light{background:#f6f1e7;color:#16130e;border-top:0;--a-ink:#16130e;--a-quiet:#6f6a5c;--a-rule:rgba(22,19,14,.14)}
.adv-light h2{color:#16130e}.adv-light .alabel{color:#14532d}.adv-light .adv-p{color:#3f3b32}.adv-light .alink{color:#14532d}
.adv-person>div:last-child{display:grid;gap:12px}
.adv-person .who{color:var(--a-quiet)}
.alink{display:inline-flex;gap:8px;justify-self:start;font-size:.92rem;font-weight:500;color:var(--a-ink);border-bottom:1px solid var(--a-ink);padding-bottom:3px;text-decoration:none}
.alink:hover{color:var(--a-quiet);border-color:var(--a-quiet)}
.adv-stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.adv-stories article{display:grid;gap:10px;align-content:start}
.adv-stories .g{border-bottom:1px solid var(--a-rule);display:flex;align-items:flex-end;aspect-ratio:520/235}
.adv-stories h3{font-size:1.3rem;font-weight:400}
.adv-stories p{color:var(--a-quiet);font-size:.95rem}
.achip{justify-self:start;font-size:.7rem;font-weight:600;letter-spacing:.06em;padding:3px 10px;border-radius:99px;border:1px solid var(--a-rule);color:var(--a-quiet)}
.adv-two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.adv-two>div:first-child{display:grid;gap:12px}
.faq{border-top:1px solid var(--a-rule)}
.faq details{border-bottom:1px solid var(--a-rule)}
.faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;font-family:var(--serif);font-size:1.25rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--sans);font-weight:300;font-size:1.5rem;color:var(--a-quiet)}
.faq details[open] summary:after{content:"\2013"}
.faq p{color:var(--a-quiet);padding:0 0 20px;max-width:62ch}
.faq summary:focus-visible{outline:2px solid var(--a-ink);outline-offset:2px}
.bookcard{background:var(--a-ink);color:var(--ink);padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,56px)}
.bookcard h2{color:var(--ink);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.08;margin:10px 0 12px}
.bookcard .bk-head p{color:var(--body)}
.bookcard .book{margin-top:0}
.bookcard .book label{color:var(--quiet)}
.bookcard .book input,.bookcard .book select,.bookcard .book textarea{color:var(--ink);border-bottom-color:#d6d2c6}
.bookcard .book input:focus,.bookcard .book select:focus,.bookcard .book textarea:focus{border-bottom-color:var(--ink)}
.bookcard .book input::placeholder{color:#a3a196}
.bookcard .formnote{color:var(--quiet)}
.book .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.book .consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;text-transform:none;letter-spacing:0;font-size:.88rem;font-weight:400}
.book .consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.book .consent a{border-bottom:1px solid currentColor}
.bookcard .book .consent{color:var(--body)}
.booked{display:grid;gap:12px;align-content:start}
.booked h3{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:300;color:var(--ink)}
.booked p{color:var(--body)}
.booked .abtn{justify-self:start}
#bf-send:disabled{opacity:.5;cursor:wait}
/* the home doorway */
.advband{padding-block:clamp(56px,7vw,96px)}
.advband .wrap{display:grid;gap:18px}
.advband h2{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.08;max-width:22ch;color:var(--a-ink)}
/* the header and the menu, on and off the Advisory page */
nav a[href="#advisory"],nav a[href="/advisory/"]{color:var(--green)}
body:has([data-page="advisory"].on) header.site{background:#0d2419;border-bottom-color:rgba(241,238,230,.16)}
body:has([data-page="advisory"].on) header.site .lockup .lk-w{color:#f1eee6}
body:has([data-page="advisory"].on) header.site .lockup .lk-s{color:#e8a33d}
body:has([data-page="advisory"].on) header.site .lockup .lk-mk circle[stroke]{stroke:#7fc796}
body:has([data-page="advisory"].on) header.site nav a{color:#d9d5ca}
body:has([data-page="advisory"].on) header.site nav a[aria-current="page"],body:has([data-page="advisory"].on) header.site nav a[href="/advisory/"]{color:#fff;border-bottom-color:#f1eee6}
body:has([data-page="advisory"].on) .menu-btn{color:#f1eee6;border-color:rgba(241,238,230,.3)}
@media (prefers-reduced-motion:reduce){.jt,.jt .art,.jt .jd,.way .st{transition:none}}
@media (max-width:820px){
  body:has([data-page="advisory"].on) nav li a{color:var(--ink)}
  body:has([data-page="advisory"].on) nav{background:var(--paper)}
  .adv-sub p,.adv-cta{grid-column:1 / -1}
  .adv-cta{justify-content:flex-start}
  .adv-sky{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .adv-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  /* phones: no sideways scroll (Manav, 5 Oct). The stages stack as rows, and each one's offer
     opens directly beneath it: the tab list dissolves into the journey's own column, ordered in pairs. */
  .journey{display:grid;border-top:1px solid var(--a-rule)}
  .jtabs{display:contents}
  .jt{grid-template-columns:88px minmax(0,1fr);align-items:end;gap:16px;padding:14px 0;border-bottom:1px solid var(--a-rule)}
  .jt .jd{padding-inline:0;border-bottom:0}
  .jt .jl{font-size:1rem;padding-bottom:4px}
  .jt[aria-selected="true"] .jd{border-bottom:0}
  .jt[aria-selected="true"]{border-bottom-color:transparent}
  .jt:nth-child(1){order:1}.jt:nth-child(2){order:3}.jt:nth-child(3){order:5}.jt:nth-child(4){order:7}.jt:nth-child(5){order:9}
  .journey>.jp:nth-child(2){order:2}.journey>.jp:nth-child(3){order:4}.journey>.jp:nth-child(4){order:6}.journey>.jp:nth-child(5){order:8}.journey>.jp:nth-child(6){order:10}
  .jp{grid-template-columns:1fr;margin:0 0 18px;padding:20px}
  .wayx,.adv-two,.adv-stories,.bookcard,.adv-three{grid-template-columns:1fr}
  .wnotes{border-left:0;border-top:1px solid var(--a-rule);padding:20px 0 0;min-height:0}
  .wb{width:40px;height:40px;margin:-20px 0 0 -20px}
  .way text{font-size:22px}
  .way .note{font-size:19px}
  .tline{grid-template-columns:1fr;gap:0}
  .tline:before{left:6px;right:auto;top:6px;bottom:6px;border-top:0;border-left:1px solid var(--a-rule)}
  .tline li{grid-template-columns:13px 1fr;column-gap:16px;padding:0 0 22px}
  .tline i{grid-row:span 2;margin:4px 0 0}
  .adv-person{grid-template-columns:1fr}
  .adv-person .ph{max-width:260px}
  .adv-sec{padding-block:56px}
}

/* policy pages */
.policy{padding-top:24px}
.ptext-l{max-width:66ch;display:grid;gap:12px;color:var(--body);font-size:1.02rem}
.ptext-l h3{font-size:1.4rem;font-weight:400;color:var(--ink);margin-top:18px}

/* careers / contact */
.roles{margin-top:48px;border-top:1px solid var(--rule)}
.role{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:24px;border-bottom:1px solid var(--rule);align-items:baseline}
.role h3{grid-column:1 / span 4;font-size:1.5rem;font-weight:400}
.role p{grid-column:5 / span 6;color:var(--body)}
.role span{grid-column:11 / span 2;text-align:right;color:var(--quiet);font-size:.85rem}
@media (max-width:760px){.role h3,.role p,.role span{grid-column:1 / -1;text-align:left}}
.howto{margin-top:48px;background:var(--stone);padding:clamp(24px,4vw,44px);display:grid;gap:12px;max-width:760px}
.howto h3{font-size:1.5rem;font-weight:400}
.howto p{color:var(--body)}
.howto code{font-family:var(--sans);font-weight:600;color:var(--ink)}
.contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:48px;border-top:1px solid var(--rule)}
@media (max-width:760px){.contacts{grid-template-columns:1fr}}
.contacts div{padding:28px 28px 28px 0;border-bottom:1px solid var(--rule);display:grid;gap:8px;align-content:start}
.contacts div:nth-child(odd){border-right:1px solid var(--rule)}
.contacts div:nth-child(even){padding-left:28px}
@media (max-width:760px){.contacts div:nth-child(odd){border-right:0}.contacts div:nth-child(even){padding-left:0}}
.contacts h3{font-size:1.35rem;font-weight:400}
.contacts p{color:var(--body);font-size:.95rem}

/* identity page */
.idhero{background:var(--deep);color:var(--deep-ink);padding-block:clamp(72px,10vw,140px)}
.idhero .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.idhero .mk{grid-column:1 / span 5}
.idhero .tx{grid-column:7 / span 6;display:grid;gap:18px}
.idhero .tx h1{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.05}
.idhero .tx p{color:var(--deep-quiet);max-width:46ch}
.idhero .label{color:var(--deep-quiet)}
@media (max-width:820px){.idhero .mk,.idhero .tx{grid-column:1 / -1}}
.big-lockup .lockup{gap:22px}
.big-lockup .lockup .wm{font-size:clamp(3rem,7vw,5.4rem)}
.big-lockup .shell{width:clamp(110px,15vw,180px);height:auto}
.dirs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
@media (max-width:900px){.dirs{grid-template-columns:1fr}}
.dir{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;grid-template-rows:240px auto}
.dir .art{display:flex;align-items:center;justify-content:center;padding:24px}
.dir .art .lockup .wm{font-size:2.2rem}
.dir .meta{border-top:1px solid var(--rule);padding:20px 24px 24px;display:grid;gap:8px}
.dir .meta h3{font-size:1.35rem;font-weight:400}
.dir .meta p{color:var(--body);font-size:.93rem}
.dir .meta .pick{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:600}
.capsmark{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:600;font-size:1.9rem;letter-spacing:.32em;position:relative;padding-bottom:22px}
.capsmark svg{width:1.55em;height:1em;margin:0 .32em 0 .06em}
.capsmark small{position:absolute;left:0;right:0;bottom:0;font-size:.62rem;letter-spacing:.9em;text-align:center;color:var(--quiet);font-weight:500}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
@media (max-width:760px){.swatches{grid-template-columns:repeat(2,1fr)}}
.sw{display:grid;gap:8px;font-size:.82rem;color:var(--quiet)}
.sw i{display:block;aspect-ratio:3/2;border:1px solid var(--rule)}
.sw b{color:var(--ink);font-weight:600}
.typespec{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:40px}
@media (max-width:760px){.typespec{grid-template-columns:1fr}}
.typespec div{border-top:1px solid var(--ink);padding-top:18px;display:grid;gap:8px}
.typespec .s1{font-family:var(--serif);font-weight:300;font-size:3.2rem;line-height:1}
.typespec .s2{font-family:var(--sans);font-weight:500;font-size:2.4rem;line-height:1.1}
.typespec p{color:var(--body);font-size:.93rem}
.apps{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:40px}
@media (max-width:820px){.apps{grid-template-columns:1fr}}
.card-biz{aspect-ratio:85/55;background:var(--paper);border:1px solid var(--rule);padding:28px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 20px 40px -32px rgba(0,0,0,.35)}
.card-biz .who{font-size:.85rem;color:var(--body);line-height:1.5}
.card-biz .who b{display:block;font-family:var(--serif);font-weight:400;font-size:1.25rem;color:var(--ink)}
.sign{aspect-ratio:1/1;max-width:100%;background:var(--deep);display:flex;align-items:center;justify-content:center;padding:28px}
.sign .lockup .wm{font-size:2.4rem}

.btn{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--ink);padding:14px 22px;font-size:.92rem;font-weight:500;margin-top:30px}
.btn:hover{background:var(--ink);color:var(--paper)}
@media (prefers-reduced-motion:no-preference){.btn{transition:background .2s,color .2s}}

footer{background:var(--deep);color:var(--deep-ink);padding-block:72px 36px;font-size:.92rem;border-top:1px solid var(--deep-rule)}
footer .top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
footer .brandcol{grid-column:1 / span 4;display:grid;gap:16px;align-content:start}
footer .brandcol p{color:var(--deep-quiet);max-width:30ch}
footer .c1{grid-column:6 / span 3}
footer .c2{grid-column:10 / span 3}
@media (max-width:820px){footer .brandcol,footer .c1,footer .c2{grid-column:1 / -1}}
footer .label{display:block;margin-bottom:10px;color:var(--deep-quiet)}
footer .label.follow{margin-top:22px}
footer .social{display:flex;flex-wrap:wrap;gap:6px 18px}footer .social a{text-decoration:none;border-bottom:1px solid var(--deep-rule)}
footer .social a:hover{border-bottom-color:currentColor}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer a:hover{color:#fff}
.base .legal{display:flex;gap:18px;flex-wrap:wrap}
.base .legal a:hover{color:#fff}
.base{margin-top:64px;padding-top:20px;border-top:1px solid var(--deep-rule);display:flex;justify-content:space-between;gap:16px;color:var(--deep-quiet);font-size:.8rem;flex-wrap:wrap}

/* ── phones and small tablets ───────────────────────────────────────────── */
@media (max-width:820px){
  body{font-size:16px}
  .split,.open .sub,.tl div,.role,footer .top,.idhero .wrap{grid-template-columns:minmax(0,1fr);gap:10px}
  .split>*,.open .sub>*,.tl div>*,.role>*,footer .top>*,.idhero .wrap>*{grid-column:1 / -1 !important;text-align:left !important}
  .proto .long{display:none}.proto .short{display:inline}

  header.site .wrap{padding-block:14px;flex-wrap:nowrap}
  .lockup .shell{width:42px;height:auto;--shell-w:42px}
  .menu-btn{display:inline-block}
  nav{position:fixed;inset:0;top:env(safe-area-inset-top,0px);background:var(--paper);z-index:20;
      padding:88px var(--gut) 40px;display:none}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;font-size:1rem}
  nav li a{display:block;font-family:var(--serif);font-weight:300;font-size:2.1rem;line-height:1.2;
      color:var(--ink);padding-block:14px;border-bottom:1px solid var(--rule)}
  nav a[aria-current="page"]{color:var(--green);border-bottom-color:var(--rule)}
  body.menu-open{overflow:hidden}
  body.menu-open .menu-btn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 30px);right:var(--gut);z-index:21}

  .open{padding-block:56px 40px}
  .open .sub{margin-top:28px}
  .open .sub p{font-size:1.05rem}
  .phead{padding-block:52px 32px}
  .phead p{font-size:1.02rem}
  .sec{--sp:64px;padding-block:var(--sp)}
  .sec h2{max-width:none}
  .strip .rail{padding-block:24px}
  .strip .window{--fade:16%}
  .track{gap:40px}

  .grid{margin-top:36px}
  .cell{padding:20px 14px 14px;grid-template-rows:84px auto;gap:12px}
  .cell:last-child:nth-child(odd){grid-column:1 / -1}
  .cell .lg .lg-img,.plogo .lg-img{width:calc(var(--w) * .82)}
  .cell .cap{flex-direction:column;gap:1px}

  .prow{padding-block:30px;gap:14px}
  .plogo{min-height:0}
  .pcount{display:flex;align-items:baseline;gap:8px}
  .pcount b{font-size:1.5rem}
  .pcount small{margin-top:0}

  .state{padding-block:18px;gap:4px}
  .state b{display:flex;align-items:baseline;gap:8px;font-size:1.5rem}
  .state b small{margin-top:0}
  .pstate{padding-block:36px}
  .city li{gap:16px}

  .photo{aspect-ratio:3/2}
  .photo .ghost{display:none}
  .aw{padding-block:16px;gap:2px}
  .aw b{font-size:1.15rem}
  .tl div{gap:4px}
  .tl b{font-size:1.5rem}
  .role{gap:4px}
  .contacts div,.contacts div:nth-child(even){padding:22px 0;border-right:0}
  .capsmark{font-size:1.45rem;letter-spacing:.24em}
  .dir{grid-template-rows:200px auto}
  footer{padding-block:56px 32px}
  footer .top{row-gap:36px}
  .base{margin-top:44px}
}
/* ── phones: designed, not stacked (Manav, 5 Oct: "doesnt look as put together") ── */
@media (max-width:820px){
  .sec{--sp:56px;padding-block:var(--sp)}
  .sec h2{font-size:clamp(1.8rem,7.6vw,2.3rem);line-height:1.12}
  .lead,.prose{margin-top:16px}
  .more{margin-top:28px}

  /* the first screen carries the drawings */
  .hero-art{display:flex;align-items:flex-end;gap:14px;margin-top:34px;border-bottom:1px solid var(--rule)}
  .hero-art>div{flex:1 1 0;min-width:0}
  .hero-art .art{width:100%;height:auto}
  .figs.tape .wrap{padding-bottom:40px}
  .tool{height:64px;margin-bottom:16px}
  .role h3 .tool{height:34px;width:34px}
  .open{padding-block:44px 36px}
  .open h1{font-size:clamp(2.35rem,10.4vw,3rem);margin-top:16px}
  .open .sub{margin-top:22px}

  /* brands: a logo wall, three across; the detail lives on the Portfolio page */
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
  .cell{grid-template-rows:60px;padding:14px 8px;gap:0}
  .cell .cap{display:none}
  .cell:last-child:nth-child(odd){grid-column:auto}
  .grid .cell:last-child:nth-child(3n+1){grid-column:1 / -1}
  .cell .lg .lg-img{width:calc(var(--w) * .58);max-width:94%}
  .grid-note{font-size:.84rem}

  /* landmarks: one at a time, swiped */
  .lands{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
         margin-top:32px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);
         scrollbar-width:none}
  .lands::-webkit-scrollbar{display:none}
  .land{flex:0 0 82%;scroll-snap-align:start}
  .lands-top{margin-top:36px}

  /* states: one line each, cities beneath */
  .states{margin-top:28px}
  .state{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h b" "p p";column-gap:16px;row-gap:2px;padding-block:14px;align-items:baseline}
  .state h3{grid-area:h;font-size:1.32rem}
  .state p{grid-area:p;font-size:.86rem;color:var(--quiet)}
  .state b{grid-area:b;display:flex;align-items:baseline;gap:6px;font-size:1.32rem;text-align:right}
  .state b small{margin-top:0;font-size:.62rem}

  /* portfolio: a row per brand, logo left */
  .prow{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"l t" "l c";column-gap:18px;row-gap:8px;padding-block:22px;align-items:start}
  .plogo{grid-area:l;min-height:52px;justify-content:center;padding-top:6px}
  .plogo .lg-img{width:calc(var(--w) * .42);max-width:100%}
  .ptext{grid-area:t;gap:3px}
  .ptext .label{font-size:.62rem}
  .ptext h3{font-size:1.45rem}
  .ptext p{font-size:.9rem}
  .ptext .where{font-size:.78rem}
  .pcount{grid-area:c;display:flex;align-items:baseline;gap:6px;text-align:left}
  .pcount b{font-size:1.25rem}
  .pcount small{margin-top:0;font-size:.62rem}

  /* awards: two tight lines */
  .awards{margin-top:28px}
  .aw{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b i" "s s";column-gap:16px;row-gap:1px;padding-block:12px}
  .aw b{grid-area:b;font-size:1.06rem}
  .aw span{grid-area:s;font-size:.8rem}
  .aw i{grid-area:i;font-size:.8rem;text-align:right}

  /* presence: each state folds open */
  .pstate{padding-block:0}
  summary.pstate-head{cursor:pointer;margin:0;padding-block:18px;align-items:center;-webkit-tap-highlight-color:transparent}
  summary.pstate-head h3{font-size:1.4rem}
  .pstate-head .st-art{width:84px;margin-right:4px}
  summary.pstate-head span{display:flex;align-items:center;gap:14px}
  summary.pstate-head span:after{content:"";width:9px;height:9px;border-right:1.4px solid var(--ink);border-bottom:1.4px solid var(--ink);
         transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
  details[open]>summary.pstate-head span:after{transform:rotate(225deg) translate(-2px,-2px)}
  .pstate .cities{padding-bottom:22px}

  /* careers / contact: content starts under the heading, not after an empty band */
  .phead + .sec[style*="padding-top"]{padding-top:0 !important}
  .lands-top{margin-bottom:28px}
  .roles,.contacts{margin-top:0;border-top:0}
  .howto{margin-top:32px}

  footer .c1 ul{grid-template-columns:1fr 1fr;column-gap:24px}
  .six,.stories{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps li,.steps li+li{padding:14px 0;border-left:0;border-bottom:1px solid var(--rule);grid-template-columns:2.4rem 1fr;column-gap:12px}
  .steps li b{grid-row:span 2}
  .person{grid-template-columns:110px minmax(0,1fr)}
  .book{grid-template-columns:1fr}
  .jfeat{grid-template-columns:1fr;align-items:start}
  .jfeat .jart{max-width:150px}
  .article{padding-block:32px 64px}
  .aside-art{height:84px}
  .abody{font-size:1rem}
}
@media (max-width:820px){
  /* the open menu sits UNDER the header: the name stays, Close is where Menu was */
  nav{top:calc(env(safe-area-inset-top,0px) + 67px);padding:12px var(--gut) calc(env(safe-area-inset-bottom,0px) + 28px);
      flex-direction:column;justify-content:space-between;border-top:1px solid var(--rule)}
  nav.open{display:flex}
  body.menu-open .menu-btn{position:static}
  nav li a{font-size:2rem;padding-block:13px}
  .nav-foot{display:grid;gap:6px;font-size:.92rem;color:var(--body);padding-top:24px}
  .nav-foot a{text-decoration:none}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){summary.pstate-head span:after{transition:none}}
html,body{overflow-x:clip}

/* ★ INDIA, IN THE SITE'S LINE: one green stroke for the country, the states we trade
   in as a faint wash, cities as dots ringed by how many stores they hold. */
.india{display:block;width:100%;height:auto;overflow:visible}
.india .m-outline{fill:none;stroke:var(--green);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.india .m-states{fill:none;stroke:var(--rule);stroke-width:.8;vector-effect:non-scaling-stroke}
.india .m-wash{fill:var(--green);fill-opacity:.075;stroke:none}
.india .m-ring{fill:var(--green);fill-opacity:.12;stroke:var(--green);stroke-width:1;vector-effect:non-scaling-stroke}
.india .m-dot{fill:var(--green)}
.india .m-lead{fill:none;stroke:var(--quiet);stroke-width:.7;opacity:.7;vector-effect:non-scaling-stroke}
.india text{font-family:var(--sans);font-size:11px;fill:var(--body);letter-spacing:.01em}
@media (prefers-reduced-motion:no-preference){
  .india .m-ring{transform-box:fill-box;transform-origin:center;animation:m-breathe 4.8s ease-in-out infinite}
  .india .m-city:nth-child(3n) .m-ring{animation-delay:-1.6s}
  .india .m-city:nth-child(3n+1) .m-ring{animation-delay:-3.2s}
}
@keyframes m-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.p-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.p-hero .p-text{grid-column:1 / span 6}
.p-hero .p-map{grid-column:7 / span 6;max-width:560px;justify-self:end;width:100%}
.p-key{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;font-size:.82rem;color:var(--quiet)}
.p-key span{display:inline-flex;align-items:center;gap:8px}
.p-key i{display:inline-block;width:14px;height:14px;border-radius:50%;background:rgba(20,83,45,.12);border:1px solid var(--green)}
.p-key i.w{border-radius:3px;background:rgba(20,83,45,.075);border-color:transparent}
.phead .p-credit{margin-top:10px;font-size:.72rem;color:var(--quiet);text-align:right}
@media (max-width:820px){.india text{font-size:17px}
  .p-hero{grid-template-columns:minmax(0,1fr)}.p-hero .p-text,.p-hero .p-map{grid-column:1 / -1}
  .p-hero .p-map{justify-self:center;max-width:440px;margin-top:12px}}

/* ★ PHONE FIXES (6 Oct 2026, Manav: "issues with centering and formatting on the phone … didnt justify the texts")
   Desktop untouched: everything here is inside the phone breakpoint. */
@media (max-width:820px){
  /* figures: two by two (four since 7 Oct: 1 lakh+ sq ft leads), each centred, a hairline between the columns */
  .figs .wrap{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0;row-gap:28px}
  .fig{justify-items:center;text-align:center}
  .fig:nth-child(even){border-left:1px solid var(--rule)}
  /* brand wall: sixteen logos, two across, eight even rows, no orphan (four across was too small to read) */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid .cell:last-child:nth-child(3n+1){grid-column:auto}
  .cell{grid-template-rows:56px;padding:12px 10px}
  .cell .lg .lg-img{width:calc(var(--w) * .9);max-width:80%}
  /* landmarks: a two-by-two grid, nothing scrolls sideways */
  .lands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;overflow:visible;
         margin-inline:0;padding-inline:0;scroll-snap-type:none}
  .land{flex:none}
  /* running text justified, with hyphenation so the spacing stays even */
  .open .sub,.lead,.prose p,.ptext p,.role p,.howto p,.milestone p,.ms p,.story p,.sec .wrap > p,.split p{
    text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3}
  .open .sub>p,.split>p,.split>.prose p,.role>p{text-align:justify !important}   /* beats the stacked-layout left !important */
  .howto h3{line-height:1.25}
}