/* Distinct second sections inside the thirteen scrollable demo homepages. */
.sample-chapter{padding:48px 34px 52px;overflow:hidden}
.sample-chapter *{box-sizing:border-box}
.chapter-label{display:block;color:#527d71;font-size:11px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.sample-chapter h4{font-size:clamp(27px,3.6vw,42px);line-height:1.12;letter-spacing:-.055em;margin:10px 0 0}
.sample-chapter h5{font-size:18px;line-height:1.18;letter-spacing:-.03em;margin:0}
.sample-chapter p{font-size:14px;line-height:1.55;margin:8px 0 0}
.chapter-photo{min-width:0;background-image:var(--service-strip);background-size:300% auto;background-repeat:no-repeat;background-position:var(--photo-position) center;background-color:#d6dfd9}
.chapter-entry{min-width:0}
.chapter-number{display:block;font-size:11px;font-weight:850;letter-spacing:.1em}

/* Garden: one broad project image beside a compact services directory. */
.chapter-gardens{background:#f2f6ed;color:#254938}
.chapter-gardens h4{font-family:Georgia,serif;font-weight:500;max-width:630px}
.garden-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:25px;margin-top:26px;align-items:stretch}
.garden-layout>.chapter-photo{min-height:340px;border-radius:4px;background-position:50% center}
.garden-list{border-top:1px solid #abc4ae}
.garden-list .chapter-entry{display:grid;grid-template-columns:37px 1fr;padding:20px 0;border-bottom:1px solid #abc4ae}
.garden-list .chapter-number{color:#6b9878;padding-top:4px}
.garden-list p{color:#5b7561}

/* Detailing: a dramatic image band and three clean numbered stages. */
.chapter-detailing{background:#142b31;color:#f1f7f2;padding-bottom:44px}
.chapter-detailing .chapter-label,.chapter-detailing .chapter-number{color:#d4f36a}
.detail-head{display:flex;align-items:end;gap:15px;justify-content:space-between}
.detail-head h4{max-width:480px}
.detail-head>p{max-width:160px;color:#b7cbc5;text-align:right}
.detail-wide{height:245px;position:relative;margin:26px -34px 0;overflow:hidden}
.detail-wide .chapter-photo{height:100%;background-position:50% 48%}
.detail-wide>span{position:absolute;bottom:0;left:34px;padding:10px 14px;background:#d4f36a;color:#142b31;font-size:12px;font-weight:800}
.detail-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:29px}
.detail-steps .chapter-entry{border-top:1px solid #648080;padding-top:15px}
.detail-steps h5{margin-top:14px}
.detail-steps p{color:#b7cbc5}

/* Builder: completed project first, then a restrained specification row. */
.chapter-construction{background:#eeeae0;color:#2b302d;padding:0}
.build-feature{position:relative;min-height:350px;display:flex;align-items:end;color:#fff}
.build-feature>.chapter-photo{position:absolute;inset:0;background-position:50% center;filter:brightness(.57)}
.build-feature>div:last-child{position:relative;width:min(100%,530px);padding:45px 38px}
.build-feature .chapter-label{color:#e2d6ad}
.build-feature h4{font-family:Georgia,serif;font-weight:500;font-size:44px}
.build-feature p{color:#ebeee9}
.build-services{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:33px 36px 38px}
.build-services .chapter-entry{padding:0 18px;border-left:1px solid #c9c2b2}
.build-services .chapter-entry:first-child{padding-left:0;border:0}
.build-services .chapter-number{color:#7b745e;margin-bottom:20px}
.build-services p{color:#66706a}

/* Electrician: practical copy and a single workshop photo. */
.chapter-electrician{background:#eef5f5;color:#123345}
.electric-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:stretch}
.electric-copy>.chapter-lead{max-width:480px;color:#486771;margin:16px 0 26px}
.electric-copy .chapter-entry{display:grid;grid-template-columns:31px 1fr;padding:13px 0;border-top:1px solid #b7d0d4}
.electric-copy .chapter-number{color:#5293a2}
.electric-copy p{color:#5a747c;margin-top:3px}
.electric-layout>.chapter-photo{min-height:440px;background-position:0% center}

/* Bathroom: an editorial mosaic with a tall feature and two smaller details. */
.chapter-bathroom{background:#f3f7f4;color:#25464c}
.bath-intro{display:flex;align-items:end;justify-content:space-between;gap:20px}
.bath-intro h4{font-family:Georgia,serif;font-weight:500;max-width:450px}
.bath-intro p{max-width:150px;color:#5e7775;text-align:right}
.bath-grid{display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:repeat(2,180px);gap:10px;margin-top:26px}
.bath-tile{min-width:0;position:relative;overflow:hidden;background:#e0eae5;color:#25464c}
.bath-tile:first-child{grid-row:span 2}
.bath-tile>.chapter-photo{position:absolute;inset:0}
.bath-tile:first-child>.chapter-photo{background-position:0% center}
.bath-tile>div:last-child{position:absolute;inset:auto 0 0;padding:30px 15px 15px;background:linear-gradient(0deg,#122f35ec,transparent);color:#fff}
.bath-tile span{font-size:11px;font-weight:800;color:#cce1d8}
.bath-tile h5{margin-top:4px}
.bath-tile p{display:none;color:#e3eeeb}
.bath-tile:first-child p{display:block}

/* Heating: a service checklist and a photographed side panel. */
.chapter-boiler{background:#eaf2f2;color:#173c4a}
.heat-layout{display:grid;grid-template-columns:1fr .82fr;gap:32px}
.heat-steps{margin-top:27px;border-top:1px solid #a9c2c8}
.heat-steps .chapter-entry{padding:13px 0;border-bottom:1px solid #a9c2c8;display:grid;grid-template-columns:38px 1fr}
.heat-steps .chapter-number{color:#528697;padding-top:3px}
.heat-steps p{color:#587780;margin-top:3px}
.heat-visual{display:flex;flex-direction:column;background:#173c4a;color:#fff}
.heat-visual .chapter-photo{min-height:330px;flex:1;background-position:0% center}
.heat-visual>span{display:block;padding:20px 24px;font-family:Georgia,serif;font-size:24px;line-height:1.1}

/* Café: one food photograph and a menu-like typographic list. */
.chapter-cafe{background:#faf7f2;color:#3a2c26}
.cafe-heading{text-align:center;margin-bottom:28px}
.cafe-heading h4{font-family:Georgia,serif;font-weight:500}
.cafe-menu{display:grid;grid-template-columns:46% 54%;background:#f2eadd;min-height:380px}
.cafe-menu>.chapter-photo{background-position:50% center}
.cafe-menu-list{padding:33px 35px}
.cafe-small{font-size:10px;font-weight:800;color:#8c684a;letter-spacing:.15em}
.cafe-menu-item{padding:17px 0;border-bottom:1px solid #d4c5af}
.cafe-menu-item:last-child{border-bottom:0}
.cafe-menu-item h5{font-family:Georgia,serif;font-size:23px;font-weight:500}
.cafe-menu-item p{color:#715c4c;margin-top:4px}

/* Salon: a small lookbook with tall portrait crops and restrained captions. */
.chapter-salon{background:#f8f3f1;color:#312d36}
.salon-intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:27px}
.salon-intro h4{font-family:Georgia,serif;font-weight:500;max-width:520px}
.salon-intro>span:last-child{font-size:11px;color:#896e70;white-space:nowrap}
.salon-lookbook{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.salon-look .chapter-photo{height:265px}
.salon-look:nth-child(2){padding-top:31px}
.salon-look:nth-child(3){padding-top:62px}
.salon-look>span{display:block;margin:15px 0 6px;font-size:11px;color:#8c7372}
.salon-look p{color:#756b70}

/* Grooming: friendly image cards rather than a formal service directory. */
.chapter-grooming{background:#edf6ee;color:#243b3a}
.groom-intro{text-align:center;max-width:600px;margin:0 auto 27px}
.groom-intro h4{font-family:Georgia,serif;font-weight:600}
.groom-intro p{color:#567367}
.groom-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.groom-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 7px 20px #1c3e2b12}
.groom-card:nth-child(2){background:#dbede0}
.groom-card:nth-child(3){background:#e4f1e6}
.groom-card .chapter-photo{height:145px}
.groom-card>div:last-child{padding:18px 17px 23px}
.groom-card p{color:#587168}

/* Cleaning: the photographed promise with a neat checklist underneath. */
.chapter-cleaning{background:#f6faf9;color:#24424a;padding:0}
.clean-feature{position:relative;min-height:310px;display:flex;align-items:center}
.clean-feature>.chapter-photo{position:absolute;inset:0;background-position:100% center}
.clean-feature>div:last-child{position:relative;width:min(55%,430px);margin:26px 0 26px 35px;padding:28px 30px;background:#f6faf9f0;box-shadow:0 8px 35px #173d3c2a}
.clean-feature p{color:#607c7c}
.clean-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:32px 35px 38px}
.clean-checks>div{padding-top:12px;border-top:1px solid #acc9c6}
.clean-checks span{display:block;color:#368c73;font-weight:900;margin-bottom:7px}
.clean-checks p{color:#657d7f}

/* Florist: an asymmetrical flower gallery with quiet captions. */
.chapter-florist{background:#faf8f5;color:#283b31}
.flower-heading{max-width:650px;margin-bottom:25px}
.flower-heading h4{font-family:Georgia,serif;font-weight:500}
.flower-heading p{color:#657467}
.flower-gallery{display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:repeat(2,185px);gap:11px}
.flower-tile{min-width:0;position:relative;overflow:hidden}
.flower-tile:first-child{grid-row:span 2}
.flower-tile .chapter-photo{height:100%}
.flower-tile>div:last-child{position:absolute;inset:auto 0 0;padding:16px;background:linear-gradient(0deg,#1e362bea,transparent);color:#fff;display:flex;align-items:end;justify-content:space-between;gap:8px}
.flower-tile h5{font-family:Georgia,serif;font-weight:500;font-size:20px}
.flower-tile>div:last-child span{font-size:11px}

/* Training: a bold programme board with a full-width action photo. */
.chapter-trainer{background:#d9eaa1;color:#202e34;padding:0}
.train-heading{padding:35px 34px 23px;display:flex;align-items:end;justify-content:space-between;gap:18px}
.train-heading h4{font-weight:900;text-transform:uppercase;font-size:clamp(29px,4.4vw,50px);max-width:440px}
.train-heading p{font-size:10px;font-weight:900;letter-spacing:.1em;max-width:165px;text-align:right}
.train-banner{height:230px;overflow:hidden}
.train-banner>.chapter-photo{height:100%;background-position:0% center}
.train-programs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0 34px 35px}
.train-programs .chapter-entry{padding:21px 16px 0;border-left:1px solid #7c9667}
.train-programs .chapter-entry:first-child{padding-left:0;border:0}
.train-programs .chapter-number{font-size:20px}
.train-programs h5{margin-top:17px;font-size:20px;text-transform:uppercase}
.train-programs p{color:#425448}

/* Photographer: a full gallery with captions following the image rhythm. */
.chapter-photographer{background:#f7f7f5;color:#292d32}
.photo-heading{margin-bottom:28px}
.photo-heading h4{font-family:Georgia,serif;font-weight:500;max-width:540px}
.photo-gallery{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:repeat(2,220px);gap:12px}
.photo-gallery figure{margin:0;position:relative;min-width:0;overflow:hidden}
.photo-gallery figure:first-child{grid-row:span 2}
.photo-gallery .chapter-photo{height:100%}
.photo-gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:#f7f7f5ed;padding:13px 16px;display:grid;grid-template-columns:30px 1fr;align-items:baseline}
.photo-gallery figcaption>span{font-size:10px;color:#737e78}
.photo-gallery figcaption p{grid-column:2;color:#626d68;margin:2px 0 0;font-size:12px}

@container (max-width:560px){
  .sample-chapter{padding:32px 20px 36px}
  .sample-chapter h4{font-size:27px}
  .sample-chapter p{font-size:13px}
  .garden-layout,.electric-layout,.heat-layout,.cafe-menu{grid-template-columns:1fr;gap:0}
  .garden-layout>.chapter-photo{min-height:220px;border-radius:0}
  .garden-list{margin-top:10px}
  .detail-head{display:block}.detail-head>p{text-align:left;max-width:none}
  .detail-wide{height:185px;margin:22px -20px 0}.detail-wide>span{left:20px}
  .detail-steps,.build-services,.clean-checks,.train-programs{grid-template-columns:1fr;gap:0}
  .detail-steps{margin-top:20px}.detail-steps .chapter-entry{display:grid;grid-template-columns:32px 1fr;padding:14px 0}.detail-steps h5{margin:0}
  .chapter-construction,.chapter-cleaning,.chapter-trainer{padding:0}
  .build-feature{min-height:300px}.build-feature>div:last-child{padding:30px 21px}.build-feature h4{font-size:32px}
  .build-services{padding:22px 21px 28px}.build-services .chapter-entry,.build-services .chapter-entry:first-child{border:0;border-bottom:1px solid #c9c2b2;padding:12px 0;display:grid;grid-template-columns:35px 1fr}.build-services .chapter-number{margin:0}.build-services p{grid-column:2}
  .electric-layout>.chapter-photo{min-height:220px;grid-row:1;margin:-32px -20px 25px}
  .electric-copy>.chapter-lead{margin-bottom:20px}
  .bath-intro{display:block}.bath-intro p{text-align:left;max-width:none}
  .bath-grid{grid-template-columns:1fr;grid-template-rows:235px repeat(2,155px)}.bath-tile:first-child{grid-row:auto}
  .heat-visual{margin-top:23px}.heat-visual .chapter-photo{min-height:200px}.heat-visual>span{font-size:21px}
  .cafe-heading{margin-bottom:20px}.cafe-menu>.chapter-photo{min-height:235px}.cafe-menu-list{padding:24px}
  .salon-lookbook{grid-template-columns:1fr 1fr;gap:12px}.salon-look:nth-child(2),.salon-look:nth-child(3){padding:0}.salon-look:first-child{grid-column:span 2}.salon-look:first-child .chapter-photo{height:225px}.salon-look .chapter-photo{height:170px}.salon-look p{font-size:12px}
  .groom-cards{grid-template-columns:1fr}.groom-card{display:grid;grid-template-columns:39% 1fr;min-height:122px}.groom-card .chapter-photo{height:100%}.groom-card>div:last-child{padding:16px}.groom-card p{margin-top:4px}
  .clean-feature{min-height:315px;align-items:end}.clean-feature>div:last-child{width:auto;margin:40px 20px 20px;padding:21px}.clean-checks{padding:22px 20px 30px}.clean-checks>div{display:grid;grid-template-columns:30px 1fr;padding:10px 0}.clean-checks span{grid-row:span 2}.clean-checks p{grid-column:2;margin:2px 0 0}
  .flower-gallery{grid-template-columns:1fr 1fr;grid-template-rows:210px 150px}.flower-tile:first-child{grid-column:span 2;grid-row:auto}.flower-tile h5{font-size:16px}
  .train-heading{padding:29px 20px 21px;display:block}.train-heading p{text-align:left}.train-banner{height:185px}.train-programs{padding:10px 20px 26px}.train-programs .chapter-entry,.train-programs .chapter-entry:first-child{border:0;border-bottom:1px solid #7c9667;padding:14px 0;display:grid;grid-template-columns:37px 1fr}.train-programs h5{margin:0}.train-programs p{grid-column:2;margin:3px 0 0}
  .photo-gallery{grid-template-columns:1fr 1fr;grid-template-rows:310px 160px}.photo-gallery figure:first-child{grid-column:span 2;grid-row:auto}.photo-gallery figcaption{padding:10px;display:block}.photo-gallery figcaption>span,.photo-gallery figcaption p{display:none}.photo-gallery h5{font-size:14px}
}