/* ============================================================
   MARBLE DESIGN PTE. LTD.
   Direction: THE STONE YARD. Cool limestone paper, deep forest
   ink, one terracotta line. Editorial spacing, high-contrast
   serif display, everything indexed like a specification.
   ============================================================ */
:root{
  --paper:#F2F1ED;
  --stone:#E4E2DA;
  --stone-2:#D6D3C9;
  --ink:#181B18;
  --ink-72:rgba(24,27,24,.72);
  --ink-48:rgba(24,27,24,.48);
  --rule:rgba(24,27,24,.16);
  --rule-2:rgba(24,27,24,.09);
  --forest:#24402F;
  --forest-dk:#182C20;
  --terracotta:#A85A3C;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"Inter Tight","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,Consolas,monospace;

  --wrap:1240px;
  --narrow:900px;
  --gutter:clamp(18px,4.5vw,48px);
  --band:clamp(62px,9vw,124px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--narrow)}
.band{padding-block:var(--band)}

/* type ------------------------------------------------------ */
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.015em}
h1{font-size:clamp(46px,8vw,104px)}
h2{font-size:clamp(32px,5vw,62px)}
h3{font-family:var(--body);font-weight:600;font-size:clamp(17px,1.6vw,20px);line-height:1.3;letter-spacing:-.015em}
p{margin:0}
.deck{font-size:clamp(16.5px,1.6vw,19.5px);line-height:1.62;color:var(--ink-72);max-width:56ch}
em.it{font-family:var(--serif);font-style:italic;color:var(--terracotta)}

.idx{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--terracotta);display:block;
}
.idx--f{color:var(--forest)}

/* ============================================================
   Image slots — real photo box (with graceful fallback pattern
   shown behind the <img> if it fails to load)
   ============================================================ */
.ph{
  position:relative;display:grid;place-items:center;padding:0;
  background:var(--stone);aspect-ratio:4/3;overflow:hidden;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(122deg,transparent 0 38%,rgba(255,255,255,.55) 38.4% 39.4%,transparent 39.8%),
    linear-gradient(122deg,transparent 0 62%,rgba(255,255,255,.38) 62.3% 63%,transparent 63.4%),
    linear-gradient(118deg,transparent 0 76%,rgba(24,27,24,.05) 76.3% 77.2%,transparent 77.6%);
  pointer-events:none;
}
.ph img{
  position:relative;z-index:1;width:100%;height:100%;object-fit:cover;
  max-width:none;
}
.ph--wide{aspect-ratio:16/7}
.ph--xwide{aspect-ratio:21/9}
.ph--tall{aspect-ratio:3/4}
.ph--sq{aspect-ratio:1/1}

/* ============================================================
   Header
   ============================================================ */
.top{background:var(--forest);color:var(--paper)}
.top__in{
  display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:space-between;padding-block:9px;
  font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;
}
.top__in a{text-decoration:none;color:var(--paper)}
.top__in a:hover{color:#E0A98C}

.head{position:sticky;top:0;z-index:70;background:var(--paper);border-bottom:1px solid var(--rule)}
.head__in{display:flex;align-items:center;gap:26px;padding-block:18px}
.logo{margin-right:auto;text-decoration:none;line-height:1}
.logo b{display:block;font-family:var(--serif);font-size:clamp(23px,2.8vw,30px);letter-spacing:-.02em}
.logo span{font-family:var(--mono);font-size:8.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-48);display:block;margin-top:6px}
.menu{display:flex;gap:26px}
.menu a{
  font-size:14px;font-weight:500;text-decoration:none;color:var(--ink-72);
  padding-bottom:3px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.menu a:hover,.menu a:focus-visible{color:var(--ink);border-bottom-color:var(--terracotta)}
.headcta{
  font-size:13.5px;font-weight:600;text-decoration:none;background:var(--forest);color:var(--paper);
  padding:12px 20px;white-space:nowrap;transition:background .18s,transform .18s;
}
.headcta:hover{background:var(--forest-dk);transform:translateY(-1px)}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding-top:clamp(40px,6vw,86px)}
.hero h1{margin-block:22px 26px;max-width:14ch}
.hero__row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);align-items:end}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{
  font-size:13.5px;font-weight:600;text-decoration:none;padding:14px 24px;display:inline-block;
  transition:background .18s,color .18s,transform .18s,border-color .18s;
}
.btn--fill{background:var(--forest);color:var(--paper)}
.btn--fill:hover{background:var(--forest-dk);transform:translateY(-2px)}
.btn--line{border:1px solid var(--ink);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.hero__note{
  font-family:var(--mono);font-size:9px;letter-spacing:.03em;line-height:2.1;color:var(--ink-48);
  border-top:1px solid var(--rule);padding-top:16px;
}
.hero__shot{margin-top:clamp(34px,5vw,66px)}

/* ============================================================
   Marks band
   ============================================================ */
.marks{border-block:1px solid var(--rule);background:var(--stone)}
.marks__in{display:grid;grid-template-columns:repeat(4,1fr)}
.mark{padding:24px 22px;border-right:1px solid var(--rule-2)}
.mark:last-child{border-right:0}
.mark b{display:block;font-family:var(--serif);font-size:clamp(26px,3vw,36px);line-height:1;margin-bottom:9px}
.mark span{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-48);line-height:1.9}

/* ============================================================
   Section head
   ============================================================ */
.sh{max-width:60ch;margin-bottom:clamp(34px,4.6vw,58px)}
.sh h2{margin-block:16px 16px}
.sh p{color:var(--ink-72);font-size:16.5px}

/* ============================================================
   Services — full-width bands, image left
   ============================================================ */
.svc{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,58px);align-items:center;
  padding-block:clamp(26px,3.6vw,44px);border-top:1px solid var(--rule);
}
.svc:first-of-type{border-top:1px solid var(--ink)}
.svc__n{
  font-family:var(--serif);font-size:clamp(34px,4vw,52px);line-height:1;color:var(--stone-2);
  display:block;margin-bottom:12px;
}
.svc h3{margin-bottom:12px;font-size:clamp(20px,2vw,25px)}
.svc p{color:var(--ink-72);font-size:16px}
.svc__tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0;padding:0}
.svc__tags li{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--rule);padding:6px 11px;color:var(--ink-72);
}

/* ============================================================
   SIGNATURE — material board
   ============================================================ */
.board{background:var(--forest);color:var(--paper)}
.board .sh p{color:rgba(242,241,237,.72)}
.board .idx{color:#E0A98C}
.board h2{color:var(--paper)}
.mats{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.8vw,20px);align-items:end}
.mat{background:rgba(242,241,237,.06);border:1px solid rgba(242,241,237,.22);padding:0 0 18px}
.mat__chip{height:var(--h);position:relative;overflow:hidden;background:var(--c)}
.mat__chip::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg,transparent 0 44%,rgba(255,255,255,.30) 44.4% 45.6%,transparent 46%),
    linear-gradient(115deg,transparent 0 70%,rgba(255,255,255,.18) 70.3% 71.1%,transparent 71.5%),
    linear-gradient(100deg,transparent 0 24%,rgba(0,0,0,.07) 24.4% 25.4%,transparent 25.8%);
}
.mat__b{padding:16px 16px 0}
.mat__c{font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;color:#E0A98C;display:block;margin-bottom:8px}
.mat__b h3{font-size:16.5px;margin-bottom:7px;color:var(--paper)}
.mat__b p{font-size:13px;line-height:1.55;color:rgba(242,241,237,.7)}
.mat__u{
  display:block;margin-top:11px;padding-top:10px;border-top:1px solid rgba(242,241,237,.2);
  font-family:var(--mono);font-size:8px;letter-spacing:.05em;text-transform:uppercase;color:rgba(242,241,237,.55);line-height:1.9;
}
.board__foot{margin-top:24px;font-family:var(--mono);font-size:9px;letter-spacing:.03em;line-height:2;color:rgba(242,241,237,.6)}

/* ============================================================
   Phases
   ============================================================ */
.phases{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.4vw,28px)}
.phase{border-top:2px solid var(--forest);padding-top:18px}
.phase:nth-child(even){border-top-color:var(--terracotta)}
.phase__k{font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-48);display:block;margin-bottom:12px}
.phase h3{margin-bottom:9px}
.phase p{font-size:14.5px;line-height:1.6;color:var(--ink-72)}

/* ============================================================
   Scope — included / excluded
   ============================================================ */
.scope{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px)}
.col{border-top:2px solid var(--ink);padding-top:20px}
.col--out{border-top-color:var(--terracotta)}
.col__h{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.col__h h3{font-size:19px}
.col__h span{font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-48)}
.col ul{list-style:none;margin:0;padding:0}
.col li{padding:12px 0 12px 28px;border-bottom:1px solid var(--rule-2);font-size:15.5px;color:var(--ink-72);position:relative}
.col li::before{
  content:"";position:absolute;left:2px;top:21px;width:12px;height:1.5px;background:var(--forest);
}
.col--out li::before{
  background:none;border-left:1.5px solid var(--terracotta);height:12px;width:0;
  left:8px;top:17px;transform:rotate(45deg);
}
.col--out li::after{
  content:"";position:absolute;left:8px;top:17px;height:12px;
  border-left:1.5px solid var(--terracotta);transform:rotate(-45deg);
}

/* ============================================================
   Portfolio
   ============================================================ */
.folio{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,24px)}
.folio figure{margin:0}
.folio figcaption{
  margin-top:13px;font-size:14px;color:var(--ink-48);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.folio figcaption b{color:var(--ink-72);font-weight:500}
.folio figcaption span{font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase}
.f-a{grid-column:span 4}
.f-b{grid-column:span 2}
.f-c{grid-column:span 2}
.f-d{grid-column:span 4}

/* ============================================================
   Contact
   ============================================================ */
.contact{background:var(--stone);border-top:1px solid var(--rule)}
.cg{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.4vw,64px);align-items:start}
.line{padding:18px 0;border-bottom:1px solid var(--rule-2)}
.line:first-of-type{border-top:1px solid var(--ink);margin-top:26px}
.line__k{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-48)}
.line__v{font-family:var(--serif);font-size:clamp(24px,2.8vw,34px);line-height:1.1;margin-top:9px;word-break:break-word}
.line__v a{text-decoration:none;border-bottom:1px solid var(--terracotta)}
.line__v a:hover{color:var(--terracotta)}
.line address{font-style:normal;font-family:var(--body);font-size:16.5px;line-height:1.65;color:var(--ink-72);margin-top:9px}

.form{background:var(--paper);border:1px solid var(--ink);padding:clamp(24px,3.2vw,36px)}
.form h3{margin-bottom:6px;font-family:var(--serif);font-weight:400;font-size:26px}
.form>p{font-family:var(--mono);font-size:9px;letter-spacing:.03em;color:var(--ink-48);margin-bottom:24px;line-height:1.9}
.f{margin-bottom:16px}
.f label{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-48);margin-bottom:8px}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--body);font-size:15.5px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  padding:11px 2px;transition:border-color .18s;
}
.f textarea{min-height:100px;resize:vertical;border:1px solid var(--rule);padding:13px 14px}
.f select{border:1px solid var(--rule);padding:12px 11px}
.f input::placeholder,.f textarea::placeholder{color:rgba(24,27,24,.32)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--forest)}
.form button{
  font-size:14px;font-weight:600;background:var(--forest);color:var(--paper);border:0;
  padding:16px 30px;cursor:pointer;width:100%;transition:background .18s,transform .18s;
}
.form button:hover{background:var(--forest-dk);transform:translateY(-2px)}

/* ============================================================
   Footer
   ============================================================ */
.foot{background:var(--ink);color:rgba(242,241,237,.6)}
.foot__in{padding-block:48px 34px}
.foot__top{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-end;padding-bottom:26px;border-bottom:1px solid rgba(242,241,237,.18)}
.foot__name{font-family:var(--serif);font-size:clamp(32px,5vw,60px);line-height:1;color:var(--paper);letter-spacing:-.02em}
.foot__name em{font-style:italic;color:#E0A98C}
.foot__nav{display:flex;flex-wrap:wrap;gap:20px;font-size:13.5px}
.foot__nav a{text-decoration:none}
.foot__nav a:hover{color:#E0A98C}
.foot__bot{display:flex;flex-wrap:wrap;gap:11px 30px;justify-content:space-between;padding-top:20px;font-family:var(--mono);font-size:8.5px;letter-spacing:.03em;line-height:2}

/* ============================================================
   Focus + motion
   ============================================================ */
a:focus-visible,button:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
.in{animation:in .68s cubic-bezier(.22,.68,.34,1) both}
.in--2{animation-delay:.09s}
.in--3{animation-delay:.18s}
@keyframes in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .mats{grid-template-columns:repeat(3,1fr)}
  .mat__chip{height:150px!important}
  .phases{grid-template-columns:repeat(2,1fr);gap:26px}
  .folio{grid-template-columns:repeat(4,1fr)}
  .f-a,.f-d{grid-column:span 4}
  .f-b,.f-c{grid-column:span 2}
}
@media (max-width:900px){
  .menu{display:none}
  .hero__row,.svc,.cg,.scope{grid-template-columns:1fr}
  .svc{gap:20px}
  .marks__in{grid-template-columns:repeat(2,1fr)}
  .mark{border-bottom:1px solid var(--rule-2)}
  .mark:nth-child(2n){border-right:0}
}
@media (max-width:620px){
  body{font-size:16px}
  .mats,.phases,.marks__in,.folio{grid-template-columns:1fr}
  .mark{border-right:0}
  .f-a,.f-b,.f-c,.f-d{grid-column:span 1}
  .ph--wide,.ph--xwide{aspect-ratio:4/3}
  .logo span{display:none}
  .foot__top{align-items:flex-start}
}