/* ============================================================ pages.css
 * What the static site did not have: inner page sections, project pages, the forms, the blog,
 * People, and the footer links. Same tokens, square corners, no shadows, quiet motion.
 */

/* ------------------------------------------------ skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--color-black);color:var(--color-warm);
  padding:12px 18px;font-size:var(--text-sm)}
.skip:focus{left:16px;top:16px}

/* ------------------------------------------------ card names link to the project page.
   One motion only: the name warms to gold and an arrow steps in. The static site's hover line is
   switched off so there is never a double line. */
.pc-nm a{color:inherit;text-decoration:none;transition:color var(--dur-med) var(--ease-out)}
.pc-nm a::after{content:"\2192";display:inline-block;margin-left:.35em;opacity:0;transform:translateX(-8px);
  transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}
.pc:hover .pc-nm a,.pc-nm a:focus-visible{color:var(--color-gold-deep)}
.pc:hover .pc-nm a::after,.pc-nm a:focus-visible::after{opacity:1;transform:none}
.pc-nm::after{display:none!important}
.pc{position:relative}
@media (prefers-reduced-motion:reduce){.pc-nm a::after{transition:none}}

/* ------------------------------------------------ inner page sections */
.pg-sec{padding-block:var(--space-2xl);background:var(--color-paper,#fff)}
.pg-sec + .pg-sec{padding-top:0}
.pg-sec.tint,.pg-sec + .pg-sec.tint{background:var(--color-bone);padding-top:var(--space-2xl)}
.pg-sec.tint + .pg-sec{padding-top:var(--space-2xl)}
.pg-sec.dark-sec{background:var(--color-black);color:var(--color-warm-dim);padding-top:var(--space-2xl);position:relative;overflow:hidden}
.pg-sec.dark-sec + .pg-sec{padding-top:var(--space-2xl)}
.dark-sec .display{color:var(--color-warm)}
.dark-sec .wrap{position:relative}
.pg-sec .display.h2 + *{margin-top:var(--space-lg)}
.pg-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,120px);align-items:start}
.pg-two > *{min-width:0}
.pg-two p{margin-top:var(--space-md)}
@media (max-width:900px){.pg-two{grid-template-columns:minmax(0,1fr)}}

.narrow{width:min(760px,100% - var(--gutter)*2)}
.prose{font-size:var(--text-base);line-height:1.75;color:var(--color-text)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:.03em;line-height:1.15;color:var(--color-ink);margin-top:1.8em}
.prose h3{font-size:var(--text-lg);font-weight:500;color:var(--color-ink);margin-top:1.6em}
.prose a{color:var(--color-gold-deep);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.2em}
.prose li + li{margin-top:.4em}
.prose blockquote{border-left:2px solid var(--color-gold);padding-left:var(--space-md);font-size:var(--text-lg);color:var(--color-ink)}
.prose img{height:auto}
.prose figcaption{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-soft);margin-top:10px}

.kicker{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--color-gold-deep)}
.pull{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.2;letter-spacing:.02em;color:var(--color-ink);margin-top:var(--space-md);max-width:22ch}
.pull.sm{font-size:var(--text-lg);max-width:none}
.pull p{max-width:none}
.pg-person{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,120px);align-items:start}
.pg-person .prose{margin-top:var(--space-lg)}
.pg-person .plate .frame{aspect-ratio:4/5}
@media (max-width:900px){.pg-person{grid-template-columns:minmax(0,1fr)}.pg-person .plate{max-width:420px}}
.frame.ph,.frame.art{position:relative;display:grid;place-items:center;aspect-ratio:3/2}
.frame.ph img{width:28%;height:auto;object-fit:contain;opacity:.5}
.frame.art img{object-fit:contain;padding:8% 16% 16%}
.frame .lbl{position:absolute;left:14px;bottom:12px;font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-soft)}

.partners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vw,96px);margin-top:var(--space-xl)}
.partner{min-width:0}
.partner .frame{aspect-ratio:4/5;max-width:440px}
.partner .nm{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.04em;color:var(--color-ink);margin-top:var(--space-md)}
.partner .rl{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold-deep);margin-top:6px}
.partner > p:not(.nm):not(.rl){margin-top:var(--space-sm);line-height:1.7;color:var(--color-text)}
@media (max-width:760px){.partners{grid-template-columns:minmax(0,1fr)}}
.art-fig img{width:100%;height:auto;max-width:520px}

/* lists */
.ticks{list-style:none;border-top:1px solid var(--color-hair)}
.ticks li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--color-hair);line-height:1.5}
.ticks li::before{content:"";position:absolute;left:2px;top:23px;width:12px;height:1px;background:var(--color-gold-deep)}
.ticks.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,72px);border-top:0}
.ticks.cols2 li:nth-child(-n+2){border-top:1px solid var(--color-hair)}
@media (max-width:760px){.ticks.cols2{grid-template-columns:minmax(0,1fr)}.ticks.cols2 li:nth-child(2){border-top:0}}
.dark-sec .ticks,.dark-sec .ticks li{border-color:var(--color-warm-faint)}
.dark-sec .ticks li::before{background:var(--color-gold)}
.steps{list-style:none;counter-reset:st;border-top:1px solid var(--color-hair)}
.steps li{counter-increment:st;display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-sm);align-items:baseline;
  padding-block:16px;border-bottom:1px solid var(--color-hair);line-height:1.5}
.steps li::before{content:counter(st,decimal-leading-zero);font-family:var(--font-body);font-weight:200;font-size:var(--text-xl);line-height:1;color:var(--color-gold-deep)}

.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,72px)}
.creds div{padding-block:18px;border-bottom:1px solid var(--color-hair)}
.creds dt{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-soft)}
.creds dd{margin-top:6px;font-size:var(--text-base);color:var(--color-ink);line-height:1.5}
@media (max-width:900px){.creds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.creds{grid-template-columns:minmax(0,1fr)}}
.note{margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--color-soft)}

.pg-sec .secs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(18px,3vw,48px)}
.pg-sec .secs a{display:flex;flex-direction:column;gap:10px;padding-block:20px;border-bottom:1px solid var(--color-hair);color:var(--color-ink);transition:border-color var(--dur-med) var(--ease-out)}
@media (max-width:900px){.pg-sec .secs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the ways of working, on a light ground */
.cap-page .modes{border-top-color:var(--color-hair)}
.cap-page .modes li{border-bottom-color:var(--color-hair)}
.cap-page .modes b{color:var(--color-ink)}
.cap-page .modes span{color:var(--color-soft)}

/* ------------------------------------------------ project page */
.pj{background:var(--color-paper,#fff)}
.pj-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,96px);align-items:start;padding-block:var(--space-xl) var(--space-2xl)}
.pj-pic .frame img{aspect-ratio:3/2;height:auto}
.pj-pic .pc-img{aspect-ratio:3/2}
.pj-side{display:flex;flex-direction:column;gap:var(--space-lg)}
.pj-facts div{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,2fr);gap:var(--space-sm);padding-block:14px;border-bottom:1px solid var(--color-hair)}
.pj-facts div:first-child{border-top:1px solid var(--color-hair)}
.pj-facts dt{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-soft);padding-top:3px}
.pj-facts dd{color:var(--color-ink);line-height:1.5}
.pj-facts a{color:inherit}
.pj-more{padding-top:0}
@media (max-width:900px){.pj-grid{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------ contact */
.contact-grid .addr{font-size:var(--text-lg);line-height:1.6;color:var(--color-ink)}
.contact-grid .pj-facts{margin-top:var(--space-lg)}
.side-note{margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--color-soft)}
.side-note a{color:var(--color-gold-deep);text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------ the forms */
.sbw-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px clamp(16px,2vw,28px);margin-top:var(--space-lg)}
.sbw-f{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:none}
.sbw-f.is-wide{grid-column:1 / -1}
.sbw-f label{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--color-ink)}
.sbw-f .opt{font-weight:400;letter-spacing:.1em;color:var(--color-soft);text-transform:none}
.sbw-f input,.sbw-f textarea,.sbw-f select{width:100%;font:inherit;font-size:var(--text-base);color:var(--color-ink);
  background:transparent;border:0;border-bottom:1px solid var(--color-soft);border-radius:0;padding:10px 0;transition:border-color var(--dur-fast)}
.sbw-f textarea{resize:vertical;border:1px solid var(--color-hair);padding:12px}
.sbw-f input[type=file]{border:1px dashed var(--color-hair);padding:14px;font-size:var(--text-sm)}
.sbw-f input:focus,.sbw-f textarea:focus,.sbw-f select:focus{outline:none;border-color:var(--color-gold-deep)}
.sbw-f input:focus-visible,.sbw-f textarea:focus-visible,.sbw-f select:focus-visible{outline:2px solid var(--color-gold-deep);outline-offset:2px}
.sbw-f .hint{font-size:var(--text-xs);color:var(--color-soft);letter-spacing:.04em}
.sbw-consent{font-size:var(--text-sm);color:var(--color-soft)}
.sbw-consent a{color:var(--color-gold-deep);text-decoration:underline;text-underline-offset:3px}
.sbw-form .btn{cursor:pointer;background:transparent;align-self:flex-start;font-family:inherit}
.sbw-form .btn:hover,.sbw-form .btn:focus-visible{background:var(--color-ink);color:var(--color-paper)}
.sbw-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.sbw-form-note{margin-top:var(--space-lg);padding:18px 20px;border-left:2px solid var(--color-gold-deep);background:var(--color-bone);color:var(--color-ink);max-width:none}
.sbw-form-note.is-error{border-left-color:var(--color-ink)}
@media (max-width:640px){.sbw-form{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------ blog */
.posts{margin-top:0}
.post-card .pc-img{display:block}
.post-card .pc-img.ph{display:grid;place-items:center}
.post-card .pc-img.ph img{width:26%;height:auto;object-fit:contain;opacity:.5}
.post-card .pc-nm{font-size:var(--text-lg);line-height:1.3}
.pager{margin-top:var(--space-xl)}
.pager .nav-links{display:flex;gap:var(--space-md);flex-wrap:wrap;font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase}
.pager .current{color:var(--color-gold-deep)}
.byline{display:flex;flex-direction:column;gap:4px;padding-bottom:var(--space-md);border-bottom:1px solid var(--color-hair);margin-bottom:var(--space-lg)}
.byline b{font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);letter-spacing:.04em;color:var(--color-ink)}
.byline span{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold-deep)}
.post-pic{margin-bottom:var(--space-lg)}
.post-pic img{height:auto}
.post-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);margin-block:var(--space-xl) var(--space-md);border-top:1px solid var(--color-hair)}
.post-nav a{display:flex;flex-direction:column;gap:6px;padding-top:var(--space-md);color:var(--color-ink);line-height:1.4}
.post-nav a.nx{grid-column:2;text-align:right}
.post-nav span{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-soft)}

/* ------------------------------------------------ footer links */
.foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);margin-top:var(--space-xl);
  font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase}
.foot-links a{color:var(--color-warm-dim);transition:color var(--dur-fast);white-space:nowrap}
.foot-links a:hover{color:var(--color-warm)}

/* ------------------------------------------------ the WordPress bar, when signed in */
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}

/* ------------------------------------------------ inner page headers: the Projects sheet, shorter */
.ph-head.long h1{font-size:clamp(34px,4.8vw,80px);line-height:1.08;max-width:22ch;text-wrap:balance}
.ph-head.long h1 .t{display:block}
.ph-head.long h1 .after{font-size:.5em}

/* ------------------------------------------------ home: the sector slider
   One project per sector. Pictures cross-fade and settle; the headline stays. A thin line under
   each sector fills while its picture shows. Pauses on hover, on focus and in a hidden tab;
   still for anyone who asks for less motion. */
.hs .hs-frames{position:absolute;inset:0}
.hs-frame{position:absolute;inset:0;opacity:0;transition:opacity 1400ms var(--ease-in-out);will-change:opacity}
.hs-frame.is-on{opacity:1}
.hs-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scale(1.06);
  transition:transform 9000ms cubic-bezier(.2,.6,.3,1)}
.hs-frame.is-on img{transform:scale(1)}
.hs-foot{position:absolute;left:0;right:0;bottom:clamp(26px,5vh,52px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:end;gap:var(--space-lg);z-index:2}
.hs-caps{position:relative;min-height:96px}
.hs-cap{animation:hsIn 900ms var(--ease-out) both}
@keyframes hsIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hs-n{font-size:var(--text-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--color-warm-dim);display:flex;gap:.6em;align-items:baseline;max-width:none}
.hs-n span{color:var(--color-warm)}
.hs-n b{font-weight:500;color:var(--color-gold);margin-left:1.2em}
.hs-nm{margin-top:12px;font-family:var(--font-display);font-size:clamp(22px,2.3vw,38px);letter-spacing:.04em;line-height:1.1;color:var(--color-warm);max-width:none}
.hs-nm a{color:inherit}
.hs-nm .arr{display:inline-block;font-family:var(--font-body);font-size:.6em;opacity:0;transform:translateX(-8px);
  transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}
.hs-nm a:hover .arr,.hs-nm a:focus-visible .arr{opacity:1;transform:none}
.hs-pl{margin-top:6px;font-size:var(--text-sm);color:var(--color-warm-dim);max-width:none}
.hs-nav{display:flex;gap:clamp(10px,1.4vw,22px)}
.hs-tab{appearance:none;background:none;border:0;padding:14px 0 0;cursor:pointer;display:flex;flex-direction:column;gap:12px;
  width:clamp(64px,7vw,118px);text-align:left;color:var(--color-warm-dim);font:inherit}
.hs-tab i{position:relative;display:block;height:1px;background:var(--color-warm-faint);overflow:hidden}
.hs-tab em{position:absolute;inset:0;background:var(--color-gold);transform:scaleX(0);transform-origin:left}
.hs-tab.is-done em{transform:scaleX(1);background:var(--color-warm-dim)}
.hs-tab.is-on em{animation:hsFill var(--hs-dur,7000ms) linear forwards}
.hs.is-paused .hs-tab.is-on em{animation-play-state:paused}
@keyframes hsFill{to{transform:scaleX(1)}}
.hs-tab span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;transition:color var(--dur-fast)}
.hs-tab:hover span,.hs-tab.is-on span{color:var(--color-warm)}
.hs-tab:focus-visible{outline:1px solid var(--color-gold);outline-offset:6px}
@media (max-width:900px){
  .hs-foot{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
  .hs-tab{width:auto;flex:1}
  .hs-tab span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hs-frame,.hs-frame img{transition:none;transform:none}
  .hs-cap{animation:none}
}

/* ------------------------------------------------ People: senior management and the team */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xl) clamp(18px,2.4vw,40px);margin-top:var(--space-xl)}
.member{min-width:0}
.member .frame{aspect-ratio:4/5}
.member .frame img{width:100%;height:100%;object-fit:cover}
.member .frame.ph img{width:30%;height:auto}
.member .nm{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.04em;color:var(--color-ink);margin-top:var(--space-sm)}
.member .rl{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold-deep);margin-top:6px}
@media (max-width:1000px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-sec.tint + .group-sec{padding-top:var(--space-2xl)}
.group .frame{aspect-ratio:21/9}
.group .frame img{width:100%;height:100%;object-fit:cover}
.group .frame.ph img{width:12%;height:auto}
@media (max-width:640px){.group .frame{aspect-ratio:4/3}}
.pg-sec.group-sec + .pg-sec.tint{padding-top:var(--space-2xl)}
@media (max-width:640px){.hero h1{font-size:clamp(28px,8.6vw,44px);white-space:normal;text-wrap:balance}}
@media (max-width:1200px){.hs-tab span{display:none}.hs-tab{width:clamp(36px,5vw,72px)}}
.pj-facts dd,.pj-facts dd a{overflow-wrap:anywhere;min-width:0}
@media (max-width:520px){.pj-facts div{grid-template-columns:minmax(0,1fr);gap:4px}}
@media (max-width:640px){
  .pull{font-size:clamp(19px,5.4vw,24px);max-width:none}
  .pg-person .plate,.partner .frame{max-width:300px}
  .member .frame.ph,.group .frame.ph{aspect-ratio:3/2}
}

/* ------------------------------------------------ Capability: services with their icons.
   On hover the icon turns gold and steps forward, the words follow, and the rule fills in gold. */
.svc{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,72px)}
.svc li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:18px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--color-hair);line-height:1.45;color:var(--color-text)}
.svc li:nth-child(-n+2){border-top:1px solid var(--color-hair)}
.svc li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--color-gold-deep);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out)}
.svc .ic{width:26px;height:26px;color:var(--color-soft);transition:color var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}
.svc span{transition:transform var(--dur-med) var(--ease-out),color var(--dur-med) var(--ease-out)}
.svc li:hover::after{transform:scaleX(1)}
.svc li:hover .ic{color:var(--color-gold-deep);transform:translateX(4px)}
.svc li:hover span{color:var(--color-ink);transform:translateX(6px)}
@media (max-width:760px){.svc{grid-template-columns:minmax(0,1fr)}.svc li:nth-child(2){border-top:0}}
@media (prefers-reduced-motion:reduce){.svc li::after,.svc .ic,.svc span{transition:none}}

/* ------------------------------------------------ placeholders read as boxes on any ground */
.frame.ph{background:var(--color-paper,#fff);outline:1px solid var(--color-hair);outline-offset:-1px}
.tint .frame.ph{background:#fff}

/* ------------------------------------------------ People: the founder's words, and the team photograph in place of the drawing */
.pull.founder{max-width:24ch}
.valuing{align-items:center}
.valuing .group .frame{aspect-ratio:4/3}

/* ------------------------------------------------ the India map in the brand's warm grounds:
   land in a pale gold, its outline in Engraved Gold; Dehradun stays the one gold mark */
.where{--map-land:#EFE6D3;--map-line:#80612A}
.where .m-land{stroke-width:.9}
.where .m-box{stroke:#80612A}

/* ------------------------------------------------ map on phones and tablets: figures first, then
   one frame that shows India or the north, enlarged */
.mswitch{display:none}
@media (max-width:900px){
  .where-grid{grid-template-columns:minmax(0,1fr)!important}
  .where-grid .map-main{order:0!important;grid-column:auto!important}
  .where .facts{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:var(--space-sm)}
  .where .facts > div > b{font-size:clamp(34px,10vw,52px)}
  .where .facts > div > span{font-size:10.5px;letter-spacing:.14em;line-height:1.4;display:block;margin-top:6px}
  .where .facts .hint{grid-column:1/-1}
  .mswitch{display:flex;gap:0;border:1px solid var(--color-hair);width:max-content;max-width:100%}
  .mswitch button{appearance:none;background:none;border:0;font:inherit;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
    padding:12px 16px;color:var(--color-soft);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
  .mswitch button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper)}
  .where-grid[data-view="india"] .map-north{display:none}
  .where-grid[data-view="north"] .map-main{display:none}
  .map-north .ncap{display:none}
  .map-north .north{max-height:70svh;width:auto;margin-inline:auto}
}

/* slider captions on phones: a deeper ground under the words, and the counter in full warm white */
@media (max-width:900px){
  .hs .veil{background:linear-gradient(180deg,var(--color-shade) 0%,var(--color-shade-clear) 38%),
    linear-gradient(0deg,var(--color-black) 0%,oklch(14.5% 0.005 86 / .86) 26%,var(--color-shade-clear) 52%)}
  .hs-n{color:var(--color-warm)}
  .hs-n b{color:var(--color-gold)}
  .hs-tab{padding-top:18px}
  .hs-tab i{height:2px;background:oklch(93.8% 0.013 82 / .28)}
}

/* ------------------------------------------------ headers on phones: the drawing set and the
   datum need room to read, so a phone gets the quiet version, black with the S mark alone */
.s-ghost{display:none}
@media (max-width:640px){
  .ph-head .ph-draw,.s-hero > .bx-draw,.ph-datum,.s-hero .gline{display:none!important}
  .ph-head .ph-ghost{right:-34vw!important;left:auto!important;top:50%!important;height:72svh!important;width:auto!important;opacity:.4!important}
  .s-ghost{display:block;position:absolute;right:-34vw;top:50%;height:72svh;aspect-ratio:1333/1491;transform:translateY(-50%);opacity:.4;pointer-events:none;z-index:0}
  .s-ghost .gh{width:100%;height:100%;overflow:visible}
  .s-hero > .wrap{position:relative;z-index:1}
}
.s-ghost .gh-form{fill:rgba(239,234,225,.03);stroke:rgba(239,234,225,.14);stroke-width:2.2;vector-effect:non-scaling-stroke}
.s-ghost .gh-gold{fill:rgba(210,175,109,.05);stroke:rgba(210,175,109,.4);stroke-width:2.2;vector-effect:non-scaling-stroke}

/* ------------------------------------------------ reading progress along the top, and back to top */
.readbar{position:fixed;left:0;right:0;top:0;height:2px;z-index:80;pointer-events:none}
.readbar i{display:block;height:100%;background:var(--color-gold);transform:scaleX(0);transform-origin:left}
.admin-bar .readbar{top:32px}
@media (max-width:782px){.admin-bar .readbar{top:46px}}
.totop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:65;
  width:48px;height:48px;display:grid;place-items:center;background:var(--color-black);color:var(--color-warm);
  border:1px solid var(--color-warm-faint);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out),visibility var(--dur-med),border-color var(--dur-fast)}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square}
.totop:hover,.totop:focus-visible{border-color:var(--color-gold);color:var(--color-gold)}

/* ------------------------------------------------ phone menu: Close at the top right, the links
   high on the page, the socials stacked at the bottom left, and the S mark whole at the bottom right */
.overlay{justify-content:flex-start;overflow:hidden;padding:calc(var(--nav-h,84px) + 9svh) var(--gutter) var(--gutter)}
.overlay .close{position:absolute;top:22px;right:var(--gutter);z-index:2}
.ov-links{position:relative;z-index:1;display:flex;flex-direction:column}
.ov-mark{position:absolute;right:var(--gutter);bottom:var(--gutter);height:min(30svh,260px);aspect-ratio:1333/1491;pointer-events:none;z-index:0}
.ov-mark .gh{width:100%;height:100%;overflow:visible}
.ov-mark .gh-form{fill:rgba(239,234,225,.05);stroke:none}
.ov-mark .gh-gold{fill:rgba(210,175,109,.16);stroke:none}
.overlay .ov-social{position:absolute;left:var(--gutter);bottom:var(--gutter);z-index:1;list-style:none;display:flex;flex-direction:column;gap:6px}
.overlay .ov-social a{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;line-height:1;
  min-height:40px;display:flex;align-items:center;gap:14px;color:var(--color-warm-dim)}
.overlay .ov-social a:hover,.overlay .ov-social a:focus-visible{color:var(--color-gold)}
.overlay .sc{width:18px;height:18px}

/* ------------------------------------------------ footer socials */
.foot-social{list-style:none;display:flex;justify-content:center;gap:10px;margin-top:var(--space-xl)}
.foot-social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--color-warm-faint);color:var(--color-warm-dim);
  transition:color var(--dur-fast),border-color var(--dur-fast)}
.foot-social a:hover,.foot-social a:focus-visible{color:var(--color-gold);border-color:var(--color-gold)}
.foot-social .sc{width:18px;height:18px}
.foot-social + .foot-links{margin-top:var(--space-lg)}

/* ------------------------------------------------ home: figures in one row on phones */
@media (max-width:640px){
  .intro .figs{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;gap:12px}
  .intro .fig b{font-size:clamp(26px,8vw,36px)}
  .intro .fig span{font-size:9.5px;letter-spacing:.12em;margin-top:8px}
}
/* the line drawing under "Send us your drawings" sits in the middle on phones */
@media (max-width:640px){.drawings .art{margin-inline:auto;width:86%;display:flex;justify-content:center}}
/* the link under "What we build" on the dark ground */
.build .tlink{color:var(--color-warm);margin-top:var(--space-lg)}
.build .tlink::after{background:var(--color-gold)}

/* ------------------------------------------------ space between sections is always more than the
   space inside them; on phones the two halves of a section get a rule between them */
.pg-sec + .pg-sec{padding-top:var(--space-2xl)}
@media (max-width:900px){
  .pg-two{row-gap:var(--space-2xl)}
  .contact-grid > :last-child{border-top:1px solid var(--color-hair);padding-top:var(--space-xl)}
}

/* ------------------------------------------------ sectors: every row lines up across both columns */
.pg-sec .secs li{display:flex}
.pg-sec .secs a{flex:1}

/* ------------------------------------------------ footer on phones: the S centred, the links on
   one row, the last line centred */
.foot-links{gap:var(--space-sm) clamp(14px,4vw,var(--space-lg))}
.foot-site .legal{justify-content:center;gap:6px var(--space-lg);text-align:center}
@media (max-width:640px){
  .foot-site.bx > .bx-ghost{right:50%!important;left:auto!important;transform:translate(50%,-50%)!important}
  /* eight links: centred rows, each link kept whole (Pawan, 24 October 2026) */
  .foot-links{flex-wrap:wrap;justify-content:center;gap:14px 20px;font-size:10px;letter-spacing:.14em}
  .foot-site .legal{flex-direction:column;align-items:center}
}
.overlay{overflow:hidden}
/* Our Story on phones: the words sit at the foot of the header, as on every other page */
@media (max-width:640px){.s-hero{justify-content:flex-end!important;min-height:100svh;padding-bottom:clamp(88px,13vh,132px)}}

/* ------------------------------------------------ home figures on phones: equal gaps between the four */
@media (max-width:640px){
  .intro .figs{grid-template-columns:repeat(4,max-content)!important;justify-content:space-between!important;gap:0 8px}
}

/* ------------------------------------------------ slider: the picture itself can be tapped */
.hs .hs-frames{cursor:pointer}
.hs{-webkit-tap-highlight-color:transparent;user-select:none}

/* ------------------------------------------------ cookie notice (only when analytics is on) */
.consent{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));
  z-index:75;max-width:560px;background:var(--color-black);color:var(--color-warm-dim);border:1px solid var(--color-warm-faint);
  padding:20px 22px;display:grid;gap:14px;opacity:0;transform:translateY(12px);transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}
.consent.on{opacity:1;transform:none}
.consent p{font-size:var(--text-sm);line-height:1.6;max-width:none}
.consent p a{color:var(--color-gold);text-decoration:underline;text-underline-offset:3px}
.consent-btns{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.consent .btn{min-height:44px;padding:0 22px;color:var(--color-warm);background:transparent;cursor:pointer;font-family:inherit}
.consent .btn:hover{background:var(--color-warm);color:var(--color-ink)}
.consent .tlink{color:var(--color-warm-dim);background:none;border:0;cursor:pointer;font-family:inherit}

/* ------------------------------------------------ case studies */
.case{border-top:1px solid var(--color-hair);scroll-margin-top:90px}
.case .lead{margin-top:var(--space-md);max-width:56ch}
.case-cols{margin-top:var(--space-xl)}
.case-h{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--color-gold-deep)}
.case-cols .prose{margin-top:var(--space-sm)}
.case .dlv{margin-top:var(--space-xl)}
.case-rating{margin-top:var(--space-xl);padding:var(--space-lg);background:var(--color-bone);max-width:980px}
.case-rating .pull{margin-top:var(--space-sm)}
.case-src{margin-top:var(--space-sm);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-soft)}
.cases{background:var(--color-bone)}
.cases-lead{margin-top:var(--space-sm)}
.cs-card .pc-nm{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.03em;line-height:1.2}
.cs-card .pc-st{display:block;font-size:var(--text-xs);letter-spacing:.18em;color:var(--color-soft)}

/* the time allowed against the time taken (shared with Our Story) */
.dlv{border-top:1px solid var(--color-ink);padding-top:var(--space-md);max-width:980px}
.dlv figcaption{display:flex;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-md);
  font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-soft)}
.dl{display:grid;grid-template-columns:86px minmax(0,1fr) 176px;gap:var(--space-md);align-items:center;padding-block:12px}
.dl .k{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-soft)}
.dl .v{font-size:var(--text-sm);color:var(--color-ink);text-align:right;white-space:nowrap}
.track{position:relative;height:14px}
.track i,.track b{position:absolute;top:50%}
.track .plan{height:1px;background:var(--color-hair);transform:translateY(-50%)}
.track .act{height:6px;background:var(--color-ink);transform:translateY(-50%) scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-out)}
.dlv[data-in="true"] .track .act{transform:translateY(-50%) scaleX(1)}
.track .due{width:2px;height:14px;background:var(--color-gold);transform:translate(-1px,-50%)}
.dlv .axis{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--text-xs);color:var(--color-soft)}
.dlv .legend{max-width:none;display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-md);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-soft)}
.dlv .legend span{display:inline-flex;align-items:center;gap:8px}
.dlv .legend i{display:inline-block;width:22px}
.lg-plan{height:1px;background:var(--color-hair)}
.lg-act{height:6px;background:var(--color-ink)}
.lg-due{width:2px!important;height:12px;background:var(--color-gold)}
@media (max-width:640px){.dl{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}.dl .track{grid-column:1 / -1;grid-row:2}}
@media (prefers-reduced-motion:reduce){.track .act{transform:translateY(-50%) scaleX(1);transition:none}}

/* ------------------------------------------------ credentials: a plain register of documents */
.docs{list-style:none;margin-top:var(--space-xl);border-top:1px solid var(--color-hair)}
.docs li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);padding-block:20px;border-bottom:1px solid var(--color-hair)}
.docs li > div{min-width:0}
.doc-t{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.03em;color:var(--color-ink);max-width:none}
.doc-by{margin-top:6px;font-size:var(--text-sm);color:var(--color-soft);max-width:70ch}
@media (max-width:640px){.docs li{flex-direction:column;align-items:flex-start;gap:8px}}

/* ------------------------------------------------ company profile downloads */
.profile-dl{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-hair)}
.profile-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-sm)}
.profile-btns .btn{gap:12px}
.profile-btns .pdf{font-size:10px;letter-spacing:.16em;color:var(--color-soft)}
.profile-btns .btn:hover .pdf{color:inherit}
.profile-btns .arr{transition:transform var(--dur-med) var(--ease-out)}
.profile-btns .btn:hover .arr{transform:translateY(3px)}
@media (max-width:640px){.profile-btns{flex-direction:column}.profile-btns .btn{justify-content:space-between;white-space:normal}}

/* ------------------------------------------------ on site now */
.pc-prog{margin-top:8px;font-size:var(--text-sm);color:var(--color-ink);max-width:none}
.pc-prog span{display:block;margin-top:4px;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-soft)}
.ph-head .tlink.on-dark{color:var(--color-warm);margin-top:var(--space-lg)}

/* ------------------------------------------------ phones: Call and WhatsApp at the foot of the screen */
.actbar{display:none}
@media (max-width:760px){
  .actbar{display:grid;grid-template-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:66;background:var(--color-black);
    border-top:1px solid var(--color-warm-faint);padding-bottom:env(safe-area-inset-bottom,0px)}
  .actbar.two{grid-template-columns:1fr 1fr}
  .actbar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;color:var(--color-warm);
    font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase}
  .actbar a + a{border-left:1px solid var(--color-warm-faint)}
  .actbar svg{width:18px;height:18px;fill:none;stroke:var(--color-gold);stroke-width:1.5;stroke-linejoin:round}
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom,0px))}
  .totop{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .consent{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}

/* ------------------------------------------------ "Artist's impression" on pictures of work not yet built */
.pc-img,.sel-card .im,.pj-pic .frame{position:relative}
.rlbl{position:absolute;left:10px;bottom:10px;z-index:1;padding:5px 9px;background:oklch(14.5% 0.005 86 / .72);color:var(--color-warm);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;pointer-events:none}

/* the hover arrow rides on the last word of a project name */
.pc-nm a::after{content:none!important}
.pc-nm .nw{white-space:nowrap}
.pc-nm .nw::after{content:"\2192";display:inline-block;margin-left:.35em;opacity:0;transform:translateX(-8px);
  transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}
.pc:hover .pc-nm .nw::after,.pc-nm a:focus-visible .nw::after{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pc-nm .nw::after{transition:none}}


/* ================================================================ round of 18 October */

/* Selected work on Home: the large picture takes its height from the pair beside it, so the captions
   at the foot of both columns sit on one line */
.work .grid{align-items:stretch}
.work .grid .big .frame{min-height:0}
@media (max-width:900px){.work .grid .big .frame{flex:none;aspect-ratio:4/3}}

/* the header steps aside while the footer is in view */
.nav{transition:transform var(--dur-med) var(--ease-out),background var(--dur-slow) var(--ease-out),padding var(--dur-med) var(--ease-out)}
.nav.away{transform:translateY(-110%)}
.readbar{transition:opacity var(--dur-med)}

/* Projects, Selected work: arrows, picture and caption on one screen */
.sel{padding-block:var(--space-xl) var(--space-lg)}
.sel-card .im{aspect-ratio:auto;height:min(52vh,560px)}
@media (max-width:720px){.sel-card .im{height:auto;aspect-ratio:4/3}}

/* case studies: one row that slides, with room above and below */
.cases{background:var(--color-bone);padding-block:var(--space-2xl)}
.cases-head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-lg);flex-wrap:wrap}
.cases-head .cases-lead{margin-top:var(--space-sm);max-width:52ch}
.sl-ctl{display:flex;gap:10px}
.sl-ctl button{width:48px;height:48px;display:grid;place-items:center;background:none;border:1px solid var(--color-ink);color:var(--color-ink);cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast),opacity var(--dur-fast)}
.sl-ctl button:hover{background:var(--color-ink);color:var(--color-paper)}
.sl-ctl button:disabled{opacity:.3;cursor:default;background:none;color:var(--color-ink)}
.sl-ctl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.sl-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * clamp(18px,2vw,32px)) / 3.3);gap:clamp(18px,2vw,32px);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:var(--space-xl);padding-bottom:4px}
.sl-track::-webkit-scrollbar{display:none}
.sl-track > *{scroll-snap-align:start;min-width:0}
.sl-track:focus-visible{outline:1px solid var(--color-gold-deep);outline-offset:6px}
@media (max-width:1100px){.sl-track{grid-auto-columns:calc((100% - clamp(18px,2vw,32px)) / 2.2)}}
@media (max-width:640px){.sl-track{grid-auto-columns:84%}}

/* a lead project: picture on the left, its words on the right, across two columns */
@media (min-width:641px){
  .pc.ft{grid-column:span 2;grid-row:auto;align-self:stretch;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);
    grid-template-rows:1fr auto auto auto auto;column-gap:clamp(18px,2vw,32px)}
  .pc.ft .pc-img{grid-column:1;grid-row:1 / -1;aspect-ratio:auto;min-height:100%;height:100%}
  .pc.ft .pc-img img{position:absolute;inset:0}
  .pc.ft > :not(.pc-img){grid-column:2}
  .pc.ft .pc-st{grid-row:2}
  .pc.ft .pc-nm{grid-row:3}
  .pc.ft .pc-sc{grid-row:4}
  .pc.ft .pc-lc{grid-row:5}
  .pc.ft{min-height:clamp(260px,22vw,360px)}
}

/* Our Story: 2000 fills with gold as it is read, like every other year */
.entry.ctx .yr{color:transparent;background:linear-gradient(0deg,var(--color-gold-deep) calc(var(--p,0)*100%),rgba(128,97,42,.2) calc(var(--p,0)*100%));
  -webkit-background-clip:text;background-clip:text}

/* Our Story header: words at the foot, title then paragraph, as on every other page */
.s-hero{justify-content:flex-end}
.s-hero .top{grid-template-columns:minmax(0,1fr)!important;align-items:start}
.s-hero .top .lead{max-width:46ch;margin-top:var(--space-lg)}
.s-hero .top + .wrap{margin-top:var(--space-xl)}

/* ================================================================ round of 19 October */

/* Our Story header: clear room under the menu, the words held together at the foot */
.s-hero{padding-top:calc(var(--nav-h,90px) + clamp(48px,9vh,120px));min-height:100svh;justify-content:flex-end}
.s-hero .top{gap:0!important;row-gap:0!important}
.s-hero h1{font-size:clamp(40px,min(6.4vw,10.5vh),112px)}
.s-hero .top .lead{margin-top:var(--space-lg)}

/* a word in the accent colour: Engraved Gold, the brand's gold for type on a light ground */
.hl{font-style:normal;color:var(--color-gold-deep)}
.build .hl,.returned .hl,.dark-sec .hl{color:var(--color-gold)}

/* testimonials with their faces */
.quote figcaption.has-face{flex-direction:row;align-items:center;gap:16px}
.quote .face{flex:none;width:56px;height:56px;overflow:hidden;border-radius:50%;background:var(--color-coal)}
.quote .face img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.quote .who{display:flex;flex-direction:column;gap:6px}

/* Vision and Mission */
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,6vw,120px)}
.guide .kicker{color:var(--color-gold)}
.guide-st{margin-top:var(--space-md);font-family:var(--font-display);font-size:var(--text-xl);line-height:1.25;letter-spacing:.02em;color:var(--color-warm);max-width:26ch;text-wrap:balance}
.guide-motto{margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid var(--color-warm-faint);font-size:var(--text-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--color-warm-dim);max-width:none}
@media (max-width:760px){.guide-grid{grid-template-columns:minmax(0,1fr)}}
.pg-sec.guide + .pg-sec{padding-top:var(--space-2xl)}

/* ------------------------------------------------ the preloader: the site is set out, then built
   A survey grid is drawn, the S rises floor by floor while the level reads up from the datum, then
   the sheet lifts away. Once per visit; never for anyone who asks for less motion; it clears by
   itself within three seconds even if scripts never run. */
.pl{position:fixed;inset:0;z-index:300;background:var(--color-black);display:grid;place-items:center;color:var(--color-warm-dim);
  animation:plOut .5s var(--ease-out) 3.6s forwards}
.pl.done{animation:plOut .5s var(--ease-out) forwards}
html.pl-skip .pl{display:none}
@keyframes plOut{to{opacity:0;visibility:hidden;transform:translateY(-16px)}}
.pl-in{position:relative;width:min(300px,64vw);aspect-ratio:1}
.pl-grid{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pl-grid line{stroke:rgba(239,234,225,.16);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:plDraw .7s var(--ease-out) forwards}
.pl-grid line:nth-child(2){animation-delay:.08s}.pl-grid line:nth-child(3){animation-delay:.16s}
.pl-grid line:nth-child(4){animation-delay:.12s}.pl-grid line:nth-child(5){animation-delay:.2s}.pl-grid line:nth-child(6){animation-delay:.28s}
.pl-grid text{font-family:var(--font-body);font-size:4.2px;letter-spacing:.1em;fill:rgba(239,234,225,.35);opacity:0;animation:plFade .4s ease .35s forwards}
@keyframes plDraw{to{stroke-dashoffset:0}}
@keyframes plFade{to{opacity:1}}
.pl-mark{position:absolute;left:22%;right:22%;top:18%;bottom:18%;clip-path:inset(100% 0 0 0);animation:plRise 1s steps(8,end) .6s forwards}
.pl-mark img{width:100%;height:100%;object-fit:contain}
@keyframes plRise{to{clip-path:inset(0 0 0 0)}}
.pl-datum{position:absolute;left:-6%;right:-6%;bottom:18%;height:1px;background:var(--color-gold);transform-origin:left;transform:scaleX(0);animation:plLine .5s var(--ease-out) .3s forwards}
@keyframes plLine{to{transform:scaleX(1)}}
.pl-lv{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);white-space:nowrap;font-family:"Figures",var(--font-body);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--color-warm-dim)}
.pl-lv b{font-weight:500;color:var(--color-gold);margin-left:10px;letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){.pl{display:none}}


/* ================================================================ round of 19 October, second */
/* a project without a photograph shows its client's logo on white */
.pc-img.logo{display:grid;place-items:center;background:#fff;outline:1px solid var(--color-hair);outline-offset:-1px}
.pc-img.logo img{width:62%;height:62%;object-fit:contain;transform:none!important}
/* slider pictures on narrow screens hold their own point of interest (DIT: the flag) */
@media (max-aspect-ratio:1/1){.hs-frame img{object-position:var(--fx,50%) 35%}}


/* ---------------------------------------------------------------- cards: a logo on black, and a lettered name */
.pc-img.logo.on-black{background:#000;outline:none}
.pc-img.logo.on-black img{width:56%;height:78%}
.pc-img.lettered{display:grid;place-items:center;background:#fff;outline:1px solid var(--color-hair);outline-offset:-1px;padding:10%;
  container-type:inline-size}
/* sized to the card, not the screen, so a long word ("PHARMACEUTICALS,") always fits (25 October 2026) */
.pc-img.lettered span{max-width:100%;font-family:var(--font-display);font-size:clamp(12px,5.6cqi,24px);letter-spacing:.06em;line-height:1.35;text-transform:uppercase;
  text-align:center;color:var(--color-ink);text-wrap:balance;border-top:1px solid var(--color-gold);border-bottom:1px solid var(--color-gold);padding:14px 4px}
.pc.ft .pc-img.lettered span{font-size:clamp(14px,5.6cqi,30px)}

/* ---------------------------------------------------------------- 19 October, third */
/* project names break between words, never inside one; a lead card gives its words more room */
.pc-nm,.pc-nm a{overflow-wrap:normal;word-break:normal;hyphens:manual}
@media (min-width:641px){
  .pc.ft{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .pc.ft .pc-nm{font-size:clamp(22px,1.9vw,32px);line-height:1.2}
}
/* Our Story header: the words sit at the foot, just above the generations line */
.s-hero .top{flex:none!important;align-content:end;align-items:end!important}
.s-hero > .wrap:not(.top){flex:none}
.s-hero .top + .wrap{margin-top:var(--space-md)!important}


/* a small label above a heading always has air between them, everywhere on the site */
.kicker + .display,.kicker + h2,.kicker + h3,.kicker + .h2{margin-top:var(--space-md)}

/* Our Story headline: "55 years of" on one line, "keeping our word." on the next */
.s-hero h1 .ln{display:block}
/* vision and mission as sentences, in Sentient (Castoro Titling is capitals only) */
.guide-st{font-family:var(--font-body);font-weight:300;letter-spacing:0;text-transform:none;line-height:1.4;max-width:30ch}
/* the footer logo is a link home */
.foot-site a.mark{display:block}
/* slider arrows sit on the right at every width, where a right thumb reaches them (Pawan, 21 October 2026) */
.cases-head .sl-ctl,.sel-head .sel-ctl{margin-left:auto}
/* the line under the ways of working on Capability */
.modes-note{margin-top:var(--space-md);max-width:52ch;color:var(--color-soft)}