/* ============================================================
   YACOB HOME SERVICE PRIVATE LIMITED  —  edition two
   Direction: NEWSPRINT. A printed service bulletin. Hairline
   rules, condensed banner type, serif reading text, one red
   ink. No cards, no shadows, no rounded corners anywhere.
   ============================================================ */
:root{
  --paper:#FBFAF7;
  --paper-2:#F2F0EA;
  --plate:#E4E1D9;
  --black:#0C0C0C;
  --ink-75:rgba(12,12,12,.75);
  --ink-55:rgba(12,12,12,.55);
  --rule:rgba(12,12,12,.22);
  --rule-thin:rgba(12,12,12,.13);
  --red:#D6231C;
  --red-dk:#A81813;

  --banner:"Bebas Neue","Arial Narrow",sans-serif;
  --read:"Source Serif 4",Georgia,"Times New Roman",serif;
  --type:"Courier Prime",ui-monospace,Courier,monospace;

  --wrap:1200px;
  --gutter:clamp(18px,4.5vw,44px);
  --band:clamp(56px,7.5vw,96px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--black);
  font-family:var(--read);font-size:17.5px;line-height:1.62;
  -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)}
.band{padding-block:var(--band)}
.hr{height:1px;background:var(--black)}
.hr--thin{height:1px;background:var(--rule)}
.hr--red{height:3px;background:var(--red)}

/* type ------------------------------------------------------ */
h1,h2,h3{margin:0;font-family:var(--banner);font-weight:400;letter-spacing:.005em;line-height:.92}
h1{font-size:clamp(52px,10vw,124px)}
h2{font-size:clamp(34px,5.6vw,66px)}
h3{font-size:clamp(21px,2.2vw,27px);line-height:1}
p{margin:0}
.deck{font-size:clamp(17px,1.65vw,20px);line-height:1.55;color:var(--ink-75)}

.slug{
  font-family:var(--type);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);
  display:block;padding-bottom:9px;border-bottom:1px solid var(--black);margin-bottom:18px;
}
.slug span{float:right;color:var(--ink-55);font-weight:400}

/* ============================================================
   Images — printer's plate
   Drop your own photos into /images. The .shot element holds
   the frame's aspect ratio and crops the photo to fit.
   ============================================================ */
.plate{border:1px solid var(--black)}
.shot{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  background:var(--plate);
}
.shot--wide{aspect-ratio:16/6}
.shot--tall{aspect-ratio:3/4}
.shot--sq{aspect-ratio:1/1}
.cap{
  border-top:1px solid var(--black);padding:9px 12px;
  font-family:var(--type);font-size:11px;letter-spacing:.04em;color:var(--ink-55);
  display:flex;gap:12px;justify-content:space-between;
}
.cap b{color:var(--black);font-weight:700}

/* ============================================================
   Masthead
   ============================================================ */
.rail{
  background:var(--black);color:var(--paper);
  font-family:var(--type);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.rail__in{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;padding-block:9px}
.rail__in a{color:var(--paper);text-decoration:none}
.rail__in a:hover{color:#FF7A72}

.mast{border-bottom:3px solid var(--black);position:sticky;top:0;z-index:70;background:var(--paper)}
.mast__in{display:flex;align-items:center;gap:22px;padding-block:14px}
.mast__id{margin-right:auto;display:flex;align-items:center;gap:14px;text-decoration:none}
.mast__mark{
  width:44px;height:44px;background:var(--red);color:#fff;display:grid;place-items:center;
  font-family:var(--banner);font-size:26px;line-height:1;padding-top:4px;
}
.mast__name{font-family:var(--banner);font-size:clamp(26px,3.4vw,38px);line-height:.88;letter-spacing:.01em}
.mast__sub{font-family:var(--type);font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;color:var(--ink-55);margin-top:4px}
.mast__nav{display:flex;gap:22px}
.mast__nav a{
  font-family:var(--type);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-75);padding-bottom:3px;border-bottom:2px solid transparent;
  transition:color .16s,border-color .16s;
}
.mast__nav a:hover,.mast__nav a:focus-visible{color:var(--black);border-bottom-color:var(--red)}
.mast__tel{
  font-family:var(--banner);font-size:28px;line-height:1;text-decoration:none;
  border:2px solid var(--black);padding:9px 15px 6px;white-space:nowrap;
  transition:background .16s,color .16s;
}
.mast__tel:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ============================================================
   Lead
   ============================================================ */
.lead{padding-top:clamp(34px,4.6vw,58px)}
.lead__grid{display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr);gap:clamp(26px,4vw,52px)}
.lead h1{margin-block:6px 20px}
.lead h1 span{color:var(--red)}
.lead__cols{
  column-count:2;column-gap:clamp(22px,3vw,38px);column-rule:1px solid var(--rule-thin);
  font-size:16.5px;line-height:1.62;color:var(--ink-75);margin-top:20px;
}
.lead__cols p+p{margin-top:14px}
.lead__cols p:first-child::first-letter{
  float:left;font-family:var(--banner);font-size:52px;line-height:.78;
  padding:5px 9px 0 0;color:var(--red);
}
.lead__acts{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;border:2px solid var(--black)}
.act{
  font-family:var(--type);font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;padding:15px 22px;flex:1;text-align:center;
  border-right:2px solid var(--black);transition:background .16s,color .16s;
}
.act:last-child{border-right:0}
.act--fill{background:var(--red);color:#fff}
.act--fill:hover{background:var(--black)}
.act:hover{background:var(--black);color:var(--paper)}

/* stamp box in lead */
.stampbox{border:2px solid var(--black);padding:20px;background:var(--paper-2)}
.stampbox__h{font-family:var(--banner);font-size:26px;line-height:.95;margin-bottom:4px}
.stampbox__s{font-family:var(--type);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55);margin-bottom:16px}
.stampbox dl{margin:0;border-top:1px solid var(--black)}
.stampbox .r{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule-thin);font-size:15px}
.stampbox .r b{font-family:var(--type);font-size:11px;letter-spacing:.06em;font-weight:700}
.stampbox__note{font-family:var(--type);font-size:10.5px;letter-spacing:.05em;color:var(--ink-55);margin-top:14px;line-height:1.6}

/* ============================================================
   Ticker
   ============================================================ */
.ticker{border-block:1px solid var(--black);background:var(--paper-2)}
.ticker__in{
  display:grid;grid-template-columns:repeat(4,1fr);
  font-family:var(--type);font-size:11.5px;letter-spacing:.06em;
}
.ticker__i{padding:16px 18px;border-right:1px solid var(--rule)}
.ticker__i:last-child{border-right:0}
.ticker__i b{display:block;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--red);margin-bottom:5px}

/* ============================================================
   Section header
   ============================================================ */
.sec__h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:end;margin-bottom:clamp(26px,3.6vw,44px)}
.sec__h h2{margin-bottom:0}
.sec__h p{color:var(--ink-75);font-size:16.5px}

/* ============================================================
   Index of appliances — editorial list, no cards
   ============================================================ */
.index{border-top:2px solid var(--black)}
.entry{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.5fr) 96px;
  gap:clamp(14px,2vw,26px);align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--rule-thin);
  transition:background .16s;
}
.entry:hover{background:var(--paper-2)}
.entry__n{font-family:var(--type);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--red)}
.entry__t{font-family:var(--banner);font-size:clamp(22px,2.4vw,30px);line-height:.95}
.entry__d{font-size:15.5px;line-height:1.55;color:var(--ink-75)}
.entry__r{font-family:var(--type);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55);text-align:right}

.excl{
  margin-top:26px;border:2px solid var(--red);padding:20px 22px;
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
}
.excl b{
  font-family:var(--banner);font-size:24px;line-height:.95;color:var(--red);
  writing-mode:horizontal-tb;white-space:nowrap;
}
.excl p{font-size:16px;color:var(--ink-75)}

/* ============================================================
   SIGNATURE — the 60-second checklist
   ============================================================ */
.check{background:var(--black);color:var(--paper)}
.check .sec__h p{color:rgba(251,250,247,.72)}
.check h2{color:var(--paper)}
.check .slug{border-bottom-color:var(--paper)}
.check .slug span{color:rgba(251,250,247,.55)}
.check__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,4vw,52px);align-items:start}

.sheet{border:2px solid var(--paper);padding:clamp(20px,2.6vw,30px);background:rgba(255,255,255,.03)}
.sheet__h{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline;
  border-bottom:1px solid var(--paper);padding-bottom:12px;margin-bottom:6px;
}
.sheet__h span{font-family:var(--banner);font-size:26px;line-height:1}
.sheet__h em{font-family:var(--type);font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,250,247,.6)}
.tick{display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:start;padding:14px 0;border-bottom:1px solid rgba(251,250,247,.18)}
.tick:last-of-type{border-bottom:0}
.tick__box{width:20px;height:20px;border:2px solid var(--paper);margin-top:3px}
.tick__t b{display:block;font-family:var(--banner);font-size:20px;line-height:1;margin-bottom:6px}
.tick__t p{font-size:15px;line-height:1.55;color:rgba(251,250,247,.72)}
.stamp{
  margin-top:20px;border:3px solid var(--red);color:#FF7A72;
  padding:14px 18px;font-family:var(--banner);font-size:clamp(20px,2.3vw,28px);
  line-height:1;text-align:center;transform:rotate(-1.2deg);
}
.check__side p{color:rgba(251,250,247,.72);font-size:16.5px}
.check__side p+p{margin-top:14px}
.check__side .plate{border-color:var(--paper)}
.check__side .cap{border-top-color:var(--paper);color:rgba(251,250,247,.6)}
.check__side .cap b{color:var(--paper)}

/* ============================================================
   Procedure — editorial numbered paragraphs
   ============================================================ */
.proc{columns:2;column-gap:clamp(26px,4vw,54px);column-rule:1px solid var(--rule-thin)}
.proc__i{break-inside:avoid;padding-bottom:26px}
.proc__n{font-family:var(--banner);font-size:44px;line-height:.8;color:var(--red);display:block;margin-bottom:8px}
.proc__i h3{margin-bottom:8px}
.proc__i p{font-size:16px;color:var(--ink-75)}

/* ============================================================
   Plates gallery
   ============================================================ */
.plates{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,22px)}
.plates figure{margin:0}
.p-a{grid-column:span 4}
.p-b{grid-column:span 2}
.p-c{grid-column:span 2}
.p-d{grid-column:span 2}
.p-e{grid-column:span 2}
.p-a .shot{aspect-ratio:16/9}
.p-b .shot{aspect-ratio:3/4}

/* ============================================================
   Q&A — two column editorial
   ============================================================ */
.qa{columns:2;column-gap:clamp(26px,4vw,54px);column-rule:1px solid var(--rule-thin)}
.qa__i{break-inside:avoid;padding-bottom:24px}
.qa__q{font-family:var(--banner);font-size:22px;line-height:1;margin-bottom:8px}
.qa__q::before{content:"Q. ";color:var(--red)}
.qa__a{font-size:16px;color:var(--ink-75)}
.qa__a::before{content:"A. ";font-family:var(--type);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--red)}

/* ============================================================
   Terms grid
   ============================================================ */
.terms{border-top:2px solid var(--black);display:grid;grid-template-columns:repeat(3,1fr)}
.term{padding:22px 22px 26px;border-right:1px solid var(--rule-thin);border-bottom:1px solid var(--rule-thin)}
.term:nth-child(3n){border-right:0}
.term b{display:block;font-family:var(--type);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:9px}
.term p{font-size:15.5px;color:var(--ink-75);line-height:1.55}

/* ============================================================
   Contact
   ============================================================ */
.contact{background:var(--paper-2);border-top:3px solid var(--black)}
.contact__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,4vw,54px);align-items:start}
.dl{border-top:2px solid var(--black);margin-top:22px}
.dl__r{padding:16px 0;border-bottom:1px solid var(--rule-thin)}
.dl__k{font-family:var(--type);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55)}
.dl__v{font-family:var(--banner);font-size:clamp(26px,3vw,36px);line-height:.95;margin-top:8px;word-break:break-word}
.dl__v a{text-decoration:none;border-bottom:3px solid var(--red)}
.dl__v a:hover{color:var(--red)}
.dl address{font-style:normal;font-family:var(--read);font-size:16.5px;line-height:1.6;color:var(--ink-75);margin-top:8px}

.form{border:2px solid var(--black);padding:clamp(22px,3vw,32px);background:var(--paper)}
.form h3{margin-bottom:6px}
.form>p{font-family:var(--type);font-size:11px;letter-spacing:.05em;color:var(--ink-55);margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--type);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-55);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--read);font-size:16px;color:var(--black);
  background:var(--paper);border:0;border-bottom:2px solid var(--black);border-radius:0;
  padding:10px 2px;transition:border-color .16s,background .16s;
}
.field textarea{min-height:100px;resize:vertical;border:2px solid var(--black);padding:11px 12px}
.field select{border:2px solid var(--black);padding:11px 10px}
.field input::placeholder,.field textarea::placeholder{color:rgba(12,12,12,.34)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:#fff}
.form button{
  font-family:var(--type);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:var(--red);color:#fff;border:0;padding:16px 30px;cursor:pointer;width:100%;
  transition:background .16s;
}
.form button:hover{background:var(--black)}

/* ============================================================
   Colophon
   ============================================================ */
.colo{background:var(--black);color:rgba(251,250,247,.62)}
.colo__in{padding-block:40px 30px}
.colo__top{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-end;padding-bottom:22px;border-bottom:1px solid rgba(251,250,247,.2)}
.colo__name{font-family:var(--banner);font-size:clamp(32px,5vw,58px);line-height:.9;color:var(--paper)}
.colo__name span{color:var(--red)}
.colo__nav{display:flex;flex-wrap:wrap;gap:20px;font-family:var(--type);font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.colo__nav a{text-decoration:none}
.colo__nav a:hover{color:#FF7A72}
.colo__bot{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;padding-top:18px;font-family:var(--type);font-size:10.5px;letter-spacing:.05em}

/* ============================================================
   Focus + motion
   ============================================================ */
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.in{animation:in .6s cubic-bezier(.22,.68,.34,1) both}
.in--2{animation-delay:.08s}
.in--3{animation-delay:.16s}
@keyframes in{from{opacity:0;transform:translateY(13px)}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:1040px){
  .lead__grid,.check__grid,.contact__grid,.sec__h{grid-template-columns:1fr}
  .sec__h{gap:14px}
  .terms{grid-template-columns:repeat(2,1fr)}
  .term:nth-child(3n){border-right:1px solid var(--rule-thin)}
  .term:nth-child(2n){border-right:0}
  .plates{grid-template-columns:repeat(4,1fr)}
  .p-a{grid-column:span 4}
  .p-b .shot{aspect-ratio:4/3}
}
@media (max-width:900px){
  .mast__nav{display:none}
  .entry{grid-template-columns:52px minmax(0,1fr);row-gap:6px}
  .entry__d{grid-column:2}
  .entry__r{grid-column:2;text-align:left}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .lead__cols,.proc,.qa{columns:1;column-rule:0}
  .ticker__in,.terms{grid-template-columns:1fr}
  .ticker__i,.term{border-right:0}
  .plates{grid-template-columns:1fr}
  .p-a,.p-b,.p-c,.p-d,.p-e{grid-column:span 1}
  .plates .shot{aspect-ratio:4/3}
  .shot--wide{aspect-ratio:16/10}
  .lead__acts{flex-direction:column}
  .act{border-right:0;border-bottom:2px solid var(--black)}
  .act:last-child{border-bottom:0}
  .excl{grid-template-columns:1fr;gap:10px}
  .mast__sub{display:none}
  .colo__top{align-items:flex-start}
}