/* Four distinct compositions within the example gallery. The garden and car
   detailing concepts retain their original layouts. */

/* Stone & Beam: a solid dark introduction beside the finished work. */
.sample-construction .sample-nav{background:#ece8dc;color:#252b29;border-bottom:1px solid #d1c8b4}
.sample-construction .sample-links{color:#485550}
.sample-construction .sample-nav-action{background:#2b302d;color:#fff}
.sample-construction .sample-hero{display:grid;grid-template-columns:47% 53%;align-items:stretch;min-height:405px;padding:0;background:#2b302d;text-align:left;color:#fff}
.sample-construction .sample-hero-content{grid-column:1;grid-row:1;align-self:center;width:100%;padding:32px 34px}
.sample-construction .sample-hero::after{content:"";grid-column:2;grid-row:1;background:var(--sample-photo) center/cover;min-height:405px}
.sample-construction .sample-hero h3{font-family:Georgia,serif;font-weight:500;letter-spacing:-.045em}
.sample-construction .sample-hero p{margin-left:0;color:#e1e8e2}
.sample-construction .sample-services{background:#f1efe7}
.sample-construction .sample-service{border-color:#d4cbb7;border-radius:0}
.sample-construction .sample-service-info{background:#fffefa}

/* Cedar & Crumb: a light editorial story with the café imagery first. */
.sample-cafe .sample-nav{background:#faf7f2;color:#3a2c26;border-bottom:1px solid #ddd2c3}
.sample-cafe .sample-links{color:#6e5c50}
.sample-cafe .sample-nav-action{background:transparent;color:#3a2c26;border:1px solid #a58e76}
.sample-cafe .sample-hero{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding:0;background:#faf7f2;color:#3a2c26;text-align:left}
.sample-cafe .sample-hero::before{content:"";display:block;height:240px;flex:none;background:var(--sample-photo) center 53%/cover}
.sample-cafe .sample-hero-content{width:100%;max-width:none;padding:28px 36px 34px}
.sample-cafe .sample-kicker{color:#795a39}
.sample-cafe .sample-hero h3{max-width:640px;font-family:Georgia,serif;font-weight:500;font-size:clamp(32px,4vw,49px);letter-spacing:-.045em}
.sample-cafe .sample-hero p{color:#614e42;margin-bottom:19px}
.sample-cafe .sample-button{background:#3a2c26;color:#fff;border-radius:0}
.sample-cafe .sample-trust{background:#e9dfd0;color:#4b382d}
.sample-cafe .sample-services{background:#faf7f2}
.sample-cafe .sample-service-grid{display:block;border-top:1px solid #d7cabb}
.sample-cafe .sample-service{min-height:110px;flex-direction:row;background:transparent;border:0;border-bottom:1px solid #d7cabb}
.sample-cafe .sample-service-image{height:auto;width:130px}
.sample-cafe .sample-service-info{padding:18px 24px}
.sample-cafe .sample-service h5{font-family:Georgia,serif;font-weight:500;font-size:22px}

/* Northlight: a photo portfolio with its introduction set as a caption. */
.sample-photographer .sample-nav{background:#f7f7f5;color:#292d32;border-bottom:1px solid #dbddd9}
.sample-photographer .sample-links{color:#656d6d}
.sample-photographer .sample-nav-action{background:#292d32;color:#fff;border-radius:0}
.sample-photographer .sample-hero{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;min-height:470px;padding:0;background:var(--sample-photo) center 50%/cover;color:#292d32;text-align:left}
.sample-photographer .sample-hero-content{max-width:none;width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:5px 25px;align-items:end;padding:24px 34px 26px;background:#f7f7f5}
.sample-photographer .sample-kicker{grid-column:1/-1;color:#667064}
.sample-photographer .sample-hero h3{grid-column:1;grid-row:2/4;margin:5px 0;font-family:Georgia,serif;font-weight:500;font-size:clamp(33px,4vw,50px);letter-spacing:-.045em}
.sample-photographer .sample-hero p{grid-column:2;grid-row:2;color:#4c5656;margin:0}
.sample-photographer .sample-hero .sample-button{grid-column:2;grid-row:3;justify-self:start;background:transparent;color:#292d32;border-bottom:1px solid #292d32;border-radius:0;padding:4px 0;min-height:0}
.sample-photographer .sample-trust{display:none}
.sample-photographer .sample-services{background:#f7f7f5}
.sample-photographer .sample-service-grid{grid-template-columns:1.3fr 1fr 1fr;gap:5px}
.sample-photographer .sample-service{border:0;background:#eeefec}
.sample-photographer .sample-service-image{height:180px}
.sample-photographer .sample-service-info{background:#eeefec}

/* Core & Co: a punchy type-led cover with a wide training photo strip. */
.sample-trainer .sample-hero{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;min-height:450px;padding:0;background:#d9eaa1;color:#202e34;text-align:left}
.sample-trainer .sample-hero-content{max-width:none;width:100%;padding:32px 36px 23px}
.sample-trainer .sample-kicker{color:#435b38}
.sample-trainer .sample-hero h3{max-width:710px;font-size:clamp(55px,8vw,88px);font-weight:900;letter-spacing:-.075em;line-height:.95;text-transform:uppercase;margin:19px 0 13px}
.sample-trainer .sample-hero p{color:#314841;max-width:560px;margin-bottom:17px}
.sample-trainer .sample-button{background:#202e34;color:#fff}
.sample-trainer .sample-hero::after{content:"";display:block;height:165px;flex:none;background:var(--sample-photo) center 49%/cover}
.sample-trainer .sample-trust{background:#202e34}
.sample-trainer .sample-services{background:#e9eee3}
.sample-trainer .sample-section-head h4{font-size:clamp(28px,3.5vw,42px);font-weight:850;text-transform:uppercase}

@container (max-width:560px){
  .sample-construction .sample-hero{display:flex;flex-direction:column-reverse;min-height:0}
  .sample-construction .sample-hero::after{width:100%;min-height:0;height:210px;flex:none;background-position:center 45%}
  .sample-construction .sample-hero-content{padding:25px 21px 29px}
  .sample-construction .sample-hero h3{font-size:35px}
  .sample-cafe .sample-hero{min-height:0;display:flex;flex-direction:column;background:#faf7f2;color:#3a2c26}
  .sample-cafe .sample-hero::before{height:185px}
  .sample-cafe .sample-hero-content{padding:24px 20px 28px}
  .sample-cafe .sample-hero h3{font-size:34px}
  .sample-cafe .sample-service-image{width:38%}
  .sample-cafe .sample-service-info{padding:12px 14px}
  .sample-cafe .sample-service h5{font-size:19px}
  .sample-photographer .sample-hero{min-height:0;display:flex;flex-direction:column;justify-content:flex-end;background:var(--sample-photo) center/cover;color:#292d32}
  .sample-photographer .sample-hero::before{content:"";display:block;height:235px;flex:none}
  .sample-photographer .sample-hero-content{display:block;padding:22px 20px 27px}
  .sample-photographer .sample-hero h3{font-size:34px;margin:10px 0}
  .sample-photographer .sample-hero p{font-size:13px;color:#4c5656;margin-bottom:11px}
  .sample-photographer .sample-service-grid{grid-template-columns:1fr}
  .sample-photographer .sample-service{flex-direction:row}
  .sample-photographer .sample-service-image{height:auto;width:39%}
  .sample-trainer .sample-hero{display:flex;flex-direction:column;min-height:0;background:#d9eaa1;color:#202e34}
  .sample-trainer .sample-hero-content{padding:25px 20px 22px}
  .sample-trainer .sample-hero h3{font-size:clamp(46px,13cqw,66px)}
  .sample-trainer .sample-hero p{color:#314841}
  .sample-trainer .sample-hero::after{height:150px}
}

/* Alternating examples: different image and copy positions at a glance. */
.sample-electrician .sample-hero{display:grid;grid-template-columns:45% 55%;align-items:stretch;min-height:405px;padding:0;background:#e9f2f3;color:#123345;text-align:left}
.sample-electrician .sample-hero::before{content:"";grid-column:1;grid-row:1;background:var(--sample-photo) 58% center/cover;min-height:405px}
.sample-electrician .sample-hero-content{grid-column:2;grid-row:1;align-self:center;width:100%;padding:30px 34px}
.sample-electrician .sample-kicker{color:#437b89}
.sample-electrician .sample-hero h3{font-weight:820;font-size:clamp(32px,3.9vw,47px)}
.sample-electrician .sample-hero p{color:#3e5d67}
.sample-electrician .sample-button{background:#123345;color:#fff}
.sample-electrician .sample-trust{background:#d6e7e9;color:#123345}

.sample-bathroom .sample-hero{min-height:425px;padding:30px;align-items:flex-end;justify-content:flex-end;text-align:left;background:var(--sample-photo) center/cover;color:#25464c}
.sample-bathroom .sample-hero-content{max-width:390px;width:100%;padding:24px 26px;background:#f7f9f7;box-shadow:0 12px 35px #102c3540}
.sample-bathroom .sample-kicker{color:#48777a}
.sample-bathroom .sample-hero h3{font-family:Georgia,serif;font-weight:500;font-size:clamp(31px,3.4vw,42px);letter-spacing:-.04em}
.sample-bathroom .sample-hero p{margin-left:0;color:#527074}
.sample-bathroom .sample-button{background:#25464c;color:#fff}
.sample-bathroom .sample-trust{background:#e1ece8;color:#25464c}

.sample-boiler .sample-hero{display:grid;grid-template-columns:57% 43%;align-items:stretch;min-height:400px;padding:0;background:#173c4a;color:#fff;text-align:left}
.sample-boiler .sample-hero-content{grid-column:1;grid-row:1;align-self:center;width:100%;padding:32px 37px}
.sample-boiler .sample-hero::after{content:"";grid-column:2;grid-row:1;min-height:400px;background:var(--sample-photo) 67% center/cover}
.sample-boiler .sample-hero p{color:#d8e7e9}
.sample-boiler .sample-services{background:#edf3f2}

.sample-salon .sample-nav{background:#f4ede8;color:#312d36;border-bottom:1px solid #d9c9c2}
.sample-salon .sample-links{color:#645762}
.sample-salon .sample-nav-action{background:#312d36;color:#fff}
.sample-salon .sample-hero{display:grid;grid-template-columns:44% 56%;align-items:stretch;min-height:405px;padding:0;background:#f4ede8;color:#312d36;text-align:left}
.sample-salon .sample-hero::before{content:"";grid-column:1;grid-row:1;min-height:405px;background:var(--sample-photo) 62% center/cover}
.sample-salon .sample-hero-content{grid-column:2;grid-row:1;align-self:center;width:100%;padding:32px 35px}
.sample-salon .sample-kicker{color:#846562}
.sample-salon .sample-hero h3{font-family:Georgia,serif;font-weight:500;letter-spacing:-.045em}
.sample-salon .sample-hero p{color:#655b5d}
.sample-salon .sample-button{background:#312d36;color:#fff;border-radius:0}
.sample-salon .sample-trust{background:#e6d9d3;color:#312d36}
.sample-salon .sample-services{background:#faf7f6}

.sample-cleaning .sample-nav{background:#f6faf9;color:#24424a;border-bottom:1px solid #cfe2de}
.sample-cleaning .sample-links{color:#587074}
.sample-cleaning .sample-nav-action{background:#24424a;color:#fff}
.sample-cleaning .sample-hero{display:grid;grid-template-columns:52% 48%;align-items:stretch;min-height:405px;padding:0;background:#f6faf9;color:#24424a;text-align:left}
.sample-cleaning .sample-hero-content{grid-column:1;grid-row:1;align-self:center;width:100%;padding:32px 35px}
.sample-cleaning .sample-hero::after{content:"";grid-column:2;grid-row:1;min-height:405px;background:var(--sample-photo) center/cover}
.sample-cleaning .sample-kicker{color:#5d8f82}
.sample-cleaning .sample-hero p{color:#577177}
.sample-cleaning .sample-button{background:#24424a;color:#fff}
.sample-cleaning .sample-trust{background:#e2efea;color:#24424a}
.sample-cleaning .sample-services{background:#f6faf9}

/* Café-style service rows on alternating examples, with a changed photo side
   on the heating and cleaning pages. */
.sample-electrician .sample-service-grid,.sample-boiler .sample-service-grid,.sample-salon .sample-service-grid,.sample-cleaning .sample-service-grid,.sample-trainer .sample-service-grid{display:block;border-top:1px solid #c6d6d3}
.sample-electrician .sample-service,.sample-boiler .sample-service,.sample-salon .sample-service,.sample-cleaning .sample-service,.sample-trainer .sample-service{min-height:112px;flex-direction:row;background:transparent;border:0;border-bottom:1px solid #c6d6d3}
.sample-electrician .sample-service-image,.sample-boiler .sample-service-image,.sample-salon .sample-service-image,.sample-cleaning .sample-service-image,.sample-trainer .sample-service-image{height:auto;width:30%}
.sample-electrician .sample-service-info,.sample-boiler .sample-service-info,.sample-salon .sample-service-info,.sample-cleaning .sample-service-info,.sample-trainer .sample-service-info{padding:19px 25px}
.sample-electrician .sample-service h5,.sample-boiler .sample-service h5,.sample-salon .sample-service h5,.sample-cleaning .sample-service h5,.sample-trainer .sample-service h5{font-size:21px}
.sample-boiler .sample-service,.sample-cleaning .sample-service{flex-direction:row-reverse}

@container (max-width:560px){
  .sample-electrician .sample-hero,.sample-salon .sample-hero{display:flex;flex-direction:column;min-height:0;align-items:stretch;background:#e9f2f3;color:#123345}
  .sample-salon .sample-hero{background:#f4ede8;color:#312d36}
  .sample-electrician .sample-hero::before,.sample-salon .sample-hero::before{min-height:0;height:200px;flex:none;width:100%}
  .sample-electrician .sample-hero-content,.sample-salon .sample-hero-content{padding:23px 20px 28px}
  .sample-electrician .sample-hero h3,.sample-salon .sample-hero h3{font-size:34px}
  .sample-bathroom .sample-hero{min-height:370px;padding:16px;align-items:flex-end;justify-content:stretch;background:var(--sample-photo) center/cover;color:#25464c}
  .sample-bathroom .sample-hero-content{max-width:none;padding:20px 19px}
  .sample-bathroom .sample-hero h3{font-size:30px}
  .sample-bathroom .sample-hero p{color:#527074}
  .sample-boiler .sample-hero,.sample-cleaning .sample-hero{display:flex;flex-direction:column-reverse;min-height:0;align-items:stretch;text-align:left;background:#173c4a;color:#fff}
  .sample-cleaning .sample-hero{background:#f6faf9;color:#24424a}
  .sample-boiler .sample-hero::after,.sample-cleaning .sample-hero::after{min-height:0;height:195px;width:100%;flex:none}
  .sample-boiler .sample-hero-content,.sample-cleaning .sample-hero-content{padding:23px 20px 28px}
  .sample-boiler .sample-hero h3,.sample-cleaning .sample-hero h3{font-size:34px}
  .sample-cleaning .sample-hero p{color:#577177}
  .sample-electrician .sample-service-image,.sample-boiler .sample-service-image,.sample-salon .sample-service-image,.sample-cleaning .sample-service-image,.sample-trainer .sample-service-image{width:38%}
  .sample-electrician .sample-service-info,.sample-boiler .sample-service-info,.sample-salon .sample-service-info,.sample-cleaning .sample-service-info,.sample-trainer .sample-service-info{padding:12px 14px}
  .sample-electrician .sample-service h5,.sample-boiler .sample-service h5,.sample-salon .sample-service h5,.sample-cleaning .sample-service h5,.sample-trainer .sample-service h5{font-size:17px}
}