@font-face{font-family:'Inter Tight Fallback';font-weight:100 449;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:97.83%;ascent-override:88.19%;descent-override:22.05%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:450 549;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:97.83%;ascent-override:88.19%;descent-override:22.05%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:550 649;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:93.67%;ascent-override:95.07%;descent-override:23.77%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:650 749;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:95.77%;ascent-override:92.79%;descent-override:23.20%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:750 849;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:84.21%;ascent-override:91.43%;descent-override:22.86%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';font-weight:850 1000;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:84.21%;ascent-override:91.43%;descent-override:22.86%;line-gap-override:0%}
/* it-t10-carpenter.css: the carpenter industry page, drawn to the owner's new design
   (tools/trades10/pack-trades-v2/carpenter-joiner/visual-reference/page-design.png, 786 wide).
   Built by tools/trades10/carpenter.py.

   Every length is written in the design's own pixels through --s, one design pixel, so the page is
   the design at any width: --s is 1.832px on a 1440 screen (the pack's reference) and stops growing
   where the 1300px content column caps. Narrow screens get their own --s and stacking below. */

.t-carpenter{
  --s:min(.12723vw,1.832px);
  --cream:#F9F9F7;--pale:#F0F3F4;--ink:#12232C;--body:#55646C;--slatetx:#5A6B73;
  --or:#F26207;--ctab:#C04E06;--ctah:#A94404;--band:#123038;--pline:#E4E9EB;--line:#DDE3E5;
  background:var(--cream);color:var(--ink);
  font-family:Inter,'Inter Fallback',-apple-system,"Segoe UI",Roboto,sans-serif;
}
.cp-w{width:min(90.3%,1300px);margin-inline:auto}

/* ---- shared type -------------------------------------------------------------------------- */
.t-carpenter a.cp-btn,.t-carpenter a.cp-step,.t-carpenter a.cp-tool,.t-carpenter a.cp-scope-card,.t-carpenter a.cp-tp{text-decoration:none!important}
.t-carpenter h1,.t-carpenter h2,.t-carpenter .cp-step h3,.t-carpenter .cp-tool h3,.t-carpenter .cp-qa h3,
.t-carpenter .cp-tpl-row h3,.t-carpenter .cp-pp-h,.t-carpenter .cp-faq-more{font-family:"Inter Tight",'Inter Tight Fallback',Inter,'Inter Fallback',-apple-system,"Segoe UI",sans-serif}
.t-carpenter h1,.t-carpenter h2{font-weight:800;letter-spacing:-.024em;color:var(--ink);margin:0;text-wrap:normal}
.cp-h2{font-size:calc(var(--s)*25);line-height:1.08}
.cp-eyebrow{font-weight:700;font-size:calc(var(--s)*9.4);line-height:1.5;letter-spacing:.17em;text-transform:uppercase;color:var(--slatetx)}
.cp-body{font-size:calc(var(--s)*10.4);line-height:1.5;color:var(--body)}
.cp-mid{text-align:center}
.cp-hand{font-family:Caveat,"Segoe Script",cursive;font-weight:600;line-height:1.12;color:#2B3A42}
.t-carpenter .cp-btn{display:inline-flex;align-items:center;gap:calc(var(--s)*8);min-height:calc(var(--s)*32);
  padding:0 calc(var(--s)*16);border-radius:calc(var(--s)*3);background:var(--ctab);color:#fff!important;
  font-weight:700;font-size:calc(var(--s)*11.5);line-height:1;box-shadow:0 calc(var(--s)*6) calc(var(--s)*13) rgba(192,78,6,.20);
  transition:background .18s ease-out,transform .18s ease-out}
.t-carpenter .cp-btn:hover{background:var(--ctah);transform:translateY(-1px)}
.cp-btn svg{width:calc(var(--s)*11);height:calc(var(--s)*11);flex:none;stroke-width:2.2;fill:none;stroke:currentColor}
.cp-micro{margin-top:calc(var(--s)*10)!important;font-weight:700;font-size:calc(var(--s)*8);letter-spacing:.16em;
  text-transform:uppercase;color:var(--slatetx)}
.t-carpenter section{position:relative}
/* the design's section head: title left, a short rule and a small-caps line right */
.cp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--s)*20)}
.cp-head>div{flex:1 1 auto;min-width:0}
.cp-head .cp-aside{flex:0 0 auto}
.cp-aside{display:flex;align-items:center;gap:calc(var(--s)*10);font-weight:700;font-size:calc(var(--s)*7);
  letter-spacing:.16em;text-transform:uppercase;color:var(--slatetx);padding-bottom:calc(var(--s)*4);white-space:nowrap}
.cp-aside i{display:block;width:calc(var(--s)*56);height:1px;background:#C3CDD1}

/* ---- hero: one photograph across the band, the copy on it -------------------------------- */
.cp-hero{display:flex;align-items:center;height:calc(var(--s)*284);overflow:hidden}
.cp-hero-photo{position:absolute;inset:0}
.cp-hero-win{position:absolute;inset:0;display:block;overflow:hidden}
.cp-hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.cp-hero-in{position:relative;z-index:1;padding-top:calc(var(--s)*26)}
.cp-hero-copy{max-width:calc(var(--s)*290)}
.cp-k{display:block;font-family:Inter,'Inter Fallback',-apple-system,"Segoe UI",sans-serif;font-weight:600;font-size:calc(var(--s)*8.6);line-height:1.35;color:var(--body);margin-bottom:calc(var(--s)*5)}
.cp-big{display:block;font-size:calc(var(--s)*34.4);line-height:1.02;letter-spacing:-.03em}
.cp-hero .cp-eyebrow{margin-bottom:calc(var(--s)*9)!important}
.cp-lede{margin-top:calc(var(--s)*13)!important;font-size:calc(var(--s)*10.4);line-height:1.4;color:#42525A}
.cp-hero-in p:has(.cp-btn){margin-top:calc(var(--s)*13)!important}

/* ---- the five steps ------------------------------------------------------------------------ */
.cp-path{background:var(--pale);padding-block:calc(var(--s)*13) calc(var(--s)*18)}
.cp-path .cp-h2{margin-top:calc(var(--s)*8)!important}
.cp-steps{display:flex;align-items:flex-start;justify-content:space-between;margin-top:calc(var(--s)*14)!important}
.cp-steps li{flex:0 1 calc(var(--s)*128);width:calc(var(--s)*128);min-width:0}
.cp-steps li.cp-arrow{flex:0 1 calc(var(--s)*30);width:calc(var(--s)*30);margin-top:calc(var(--s)*28);color:#4A5A62}
.cp-arrow svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.cp-step{display:block}
.cp-disc{display:grid;place-items:center;width:calc(var(--s)*68);height:calc(var(--s)*68);margin-bottom:calc(var(--s)*13);
  background:#FBFAF8;border-radius:50%;color:var(--ink)}
.cp-disc svg{width:calc(var(--s)*36);height:calc(var(--s)*36);fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.cp-step h3{font-weight:700;font-size:calc(var(--s)*11.5);letter-spacing:-.01em;color:var(--ink)}
.cp-step p{margin-top:calc(var(--s)*8)!important;font-size:calc(var(--s)*9);line-height:1.45;color:var(--body)}
.cp-step:hover h3{color:var(--ctab)}
.cp-step:hover .cp-disc{background:#fff;box-shadow:0 calc(var(--s)*4) calc(var(--s)*12) rgba(11,20,25,.08)}

/* ---- the joinery scope --------------------------------------------------------------------- */
.cp-scope{padding-block:calc(var(--s)*20) calc(var(--s)*14)}
.cp-scope-in{display:grid;grid-template-columns:calc(var(--s)*370) 1fr;gap:calc(var(--s)*30);align-items:start}
.cp-scope-copy{padding-top:0}
.cp-scope .cp-h2{margin-top:calc(var(--s)*13)!important}
.cp-scope-copy .cp-body{margin-top:calc(var(--s)*14)!important}
.cp-ticks{margin-top:calc(var(--s)*14)!important}
.cp-ticks li{display:flex;align-items:baseline;gap:calc(var(--s)*17);margin-bottom:calc(var(--s)*11);
  font-size:calc(var(--s)*10.6);line-height:1.4;color:var(--body)}
.cp-ticks b{font-weight:700;color:var(--ink)}
.cp-tick{flex:none;width:calc(var(--s)*14);height:calc(var(--s)*14);color:var(--or);transform:translateY(calc(var(--s)*2))}
.cp-tick svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* the project scope sheet: a rotated textured card, handwriting and a line drawing */
.cp-scope-card{container-type:inline-size;transform:rotate(.9deg);border-radius:calc(var(--s)*2);
  box-shadow:0 calc(var(--s)*12) calc(var(--s)*30) rgba(11,20,25,.13)}
.cp-card{position:relative;background:#F7F4EE;padding:9cqw 6cqw 4cqw;min-height:82cqw;
  background-image:radial-gradient(rgba(140,125,105,.09) 1px,transparent 1px);background-size:4px 4px}
.cp-card-h{font-size:7.2cqw;letter-spacing:.01em}
.cp-card-list{margin-top:5cqw!important;width:54%}
.cp-card-list li{display:flex;align-items:center;gap:2.4cqw;margin-bottom:1.3cqw;
  font-family:Caveat,"Segoe Script",cursive;font-weight:600;font-size:4.9cqw;line-height:1.1;color:#2B3A42}
.cp-card-list i{flex:none;width:3.6cqw;height:3.6cqw}
.cp-card-list svg{width:100%;height:100%;fill:none;stroke:#3A4A52;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cp-sketch{position:absolute;right:3cqw;top:7.5cqw;width:46%;height:auto}
.cp-sketch .main{fill:none;stroke:#46555C;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cp-sketch .thin{fill:none;stroke:#9EA9AE;stroke-width:.8;stroke-linecap:round}
.cp-card-f{margin-top:4cqw!important;font-size:6.6cqw}
.cp-card-f span{display:inline-block;margin-left:3.5cqw}
.cp-pp-rule{display:block;width:5cqw;height:1.5px;background:#8B979D;margin-top:3cqw}

/* ---- calculators ----------------------------------------------------------------------------- */
.cp-calc{background:var(--pale);padding-block:calc(var(--s)*9) calc(var(--s)*12)}
.cp-calc .cp-h2{margin-top:calc(var(--s)*8)!important}
.cp-calc-list{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--s)*24);margin-top:calc(var(--s)*8)!important}
.cp-tool{display:flex;align-items:center;gap:calc(var(--s)*13);background:#FBFAF8;border:1px solid var(--line);
  border-radius:calc(var(--s)*6);padding:calc(var(--s)*13) calc(var(--s)*16);transition:box-shadow .18s,transform .18s}
.cp-tool:hover{box-shadow:0 calc(var(--s)*8) calc(var(--s)*20) rgba(11,20,25,.09);transform:translateY(-1px)}
.cp-tool-ic{flex:none;width:calc(var(--s)*26);height:calc(var(--s)*26);color:var(--ink)}
.cp-tool-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cp-tool-tx{flex:1}
.cp-tool h3{font-weight:700;font-size:calc(var(--s)*10);color:var(--ink)}
.cp-tool p{margin-top:calc(var(--s)*3)!important;font-size:calc(var(--s)*8.2);line-height:1.4;color:var(--body)}
.cp-tool>svg{flex:none;width:calc(var(--s)*13);height:calc(var(--s)*13);fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cp-tool:hover>svg{stroke:var(--ctab)}

/* ---- the three templates ----------------------------------------------------------------------- */
.cp-tpl{padding-block:calc(var(--s)*13) calc(var(--s)*20)}
.cp-tpl .cp-h2{margin-top:calc(var(--s)*8)!important}
.cp-tpl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--s)*25);margin-top:calc(var(--s)*12)!important}
.cp-tpl-row h3{margin-top:calc(var(--s)*13)!important;text-align:center;font-weight:700;font-size:calc(var(--s)*11);color:var(--ink)}
.t-carpenter .cp-tp{container-type:inline-size;box-shadow:0 calc(var(--s)*9) calc(var(--s)*24) rgba(11,20,25,.10)}
.cp-paper{background:#fff;color:#22323B;padding:6cqw 6cqw 5cqw;font-size:2.35cqw;line-height:1.4;min-height:132cqw}
.cp-pp-top{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.cp-pp-k{font-weight:700;font-size:2.5cqw;letter-spacing:.18em;text-transform:uppercase;color:#6A797F}
.cp-wm{display:inline-flex;align-items:center;gap:1.4cqw;font-weight:800;font-size:3.4cqw;letter-spacing:-.02em;color:#12232C}
.cp-wm svg{width:4.2cqw;height:4.2cqw;flex:none}
.cp-wm span{color:var(--or)}
.cp-pp-h{font-weight:800;font-size:7.4cqw;letter-spacing:-.03em;margin:4cqw 0 0!important;color:#12232C}
.cp-pp-fields{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:2.4cqw;margin-top:4.4cqw}
.cp-pp-fields span{display:block;font-weight:700;font-size:2.3cqw;color:#42525A}
.cp-pp-fields u{display:block;height:4.6cqw;margin-top:1cqw;border:1px solid #E2E8EA;border-radius:.6cqw;text-decoration:none}
.cp-pp-tb{width:100%;border-collapse:collapse;margin-top:5.4cqw;font-size:2.35cqw}
.cp-pp-tb th{background:#F1F4F5;font-weight:700;color:#22323B;text-align:left;padding:.75em .7em;border-bottom:1px solid #E2E8EA}
.cp-pp-tb td{padding:.8em .7em;border-bottom:1px solid #EDF1F2;color:#3B4A52}
.cp-pp-tb th:not(:first-child),.cp-pp-tb td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.cp-pp-tb th:nth-child(2),.cp-pp-tb td:nth-child(2){width:11%;text-align:center}
.cp-pp-tb th:nth-child(3),.cp-pp-tb td:nth-child(3),.cp-pp-tb th:nth-child(4),.cp-pp-tb td:nth-child(4){width:20%}
.cp-pp-rcpt .cp-pp-tb th:nth-child(2),.cp-pp-rcpt .cp-pp-tb td:nth-child(2){width:28%;text-align:right}
.cp-pp-foot{margin:2cqw 0 0!important}
.cp-pp-foot div{display:flex;justify-content:space-between;gap:2cqw;padding:1.1cqw 0 1.1cqw 40%;color:#3B4A52}
.cp-pp-foot dt,.cp-pp-foot dd{margin:0}
.cp-pp-foot dd{font-variant-numeric:tabular-nums}
.cp-pp-foot div.g{font-weight:800;color:#12232C}
.cp-pp-est .cp-pp-foot div.g,.cp-pp-rcpt .cp-pp-foot div.g{padding-left:0;margin-top:3cqw;border-top:1px solid #E2E8EA;padding-top:2.4cqw}
.cp-pp-hand{margin-top:9cqw!important;font-size:5.4cqw}
.cp-pp-est .cp-pp-hand,.cp-pp-rcpt .cp-pp-hand{margin-top:14cqw!important}
.cp-tpl-cta{margin-top:calc(var(--s)*24)!important;text-align:center}
.cp-tpl .cp-micro{margin-top:calc(var(--s)*13)!important;text-align:center}
.cp-tpl .t10-strip{margin-top:calc(var(--s)*44)}

/* ---- the payment band (the page's only QR) --------------------------------------------------- */
.cp-pay{background:var(--band);color:#fff;padding-block:calc(var(--s)*18)}
.cp-pay-in{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:calc(var(--s)*34)}
.cp-pay .cp-eyebrow{color:#A9BCC2}
.cp-pay .cp-h2{margin-top:calc(var(--s)*6)!important;color:#fff;font-size:calc(var(--s)*24);line-height:1.06}
.cp-pay-p{margin-top:calc(var(--s)*7)!important;font-size:calc(var(--s)*9.6);line-height:1.5;color:#CBD8DC}
.cp-pay-method{border-left:1px solid rgba(255,255,255,.26);padding-left:calc(var(--s)*26)}
.cp-pay-method .cp-pay-p{margin-top:calc(var(--s)*8)!important}
.cp-qr-card{display:block;width:calc(var(--s)*80);height:calc(var(--s)*80);background:#fff;border-radius:calc(var(--s)*6);padding:calc(var(--s)*6)}
.cp-pay-hand{font-size:calc(var(--s)*15);color:#EDF2F3;transform:rotate(-4deg);text-align:left}
.cp-pay-hand span{display:inline-block;margin-left:calc(var(--s)*6)}
.cp-pay-hand i{display:block;width:calc(var(--s)*26);height:1.5px;background:#7F949B;margin-top:calc(var(--s)*12)}

/* ---- questions --------------------------------------------------------------------------------- */
.cp-faq{padding-block:calc(var(--s)*12) calc(var(--s)*18)}
.cp-faq .cp-h2{margin-top:calc(var(--s)*8)!important}
.cp-faq-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--s)*38);margin-top:calc(var(--s)*13)}
.cp-qa+.cp-qa{border-left:1px solid var(--line);padding-left:calc(var(--s)*38);margin-left:calc(var(--s)*-19)}
/* the design shows these three open, as a question in bold over its answer: no marker, no rule */
.t-carpenter details.cp-qa>summary{list-style:none;display:block;font-family:"Inter Tight",'Inter Tight Fallback',Inter,'Inter Fallback',sans-serif;
  font-weight:700;font-size:calc(var(--s)*11.5);line-height:1.3;color:var(--ink);cursor:pointer}
.t-carpenter details.cp-qa>summary::-webkit-details-marker{display:none}
.t-carpenter details.cp-qa>summary::after{content:none}
.t-carpenter details.cp-qa .a{padding:0}
.t-carpenter details.cp-qa p{margin-top:calc(var(--s)*10)!important;font-size:calc(var(--s)*9.6);line-height:1.6;color:var(--body)}
.cp-faq-more{margin-top:calc(var(--s)*34)!important;font-weight:800;font-size:calc(var(--s)*12);color:var(--ink)}
.t-carpenter .cp-faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 calc(var(--s)*38);margin-top:calc(var(--s)*12)}
.t-carpenter .cp-faq-grid details{border-bottom:1px solid var(--line)}
.t-carpenter .cp-faq-grid summary{padding:calc(var(--s)*10) 0;font-size:calc(var(--s)*9.4);line-height:1.45;color:#2C3B43}
.t-carpenter .cp-faq-grid summary::after{font-size:calc(var(--s)*16)}
.t-carpenter .cp-faq-grid .a{padding:0 calc(var(--s)*6) calc(var(--s)*12) 0}
.t-carpenter .cp-faq-grid .a p{font-size:calc(var(--s)*9);line-height:1.6;color:var(--body)}

/* ---- the closing call to action ------------------------------------------------------------------ */
.cp-cta{display:flex;align-items:center;height:calc(var(--s)*222);overflow:hidden}
.cp-cta-photo{position:absolute;inset:0}
.cp-cta-win{position:absolute;inset:0;display:block;overflow:hidden}
.cp-cta-img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.cp-cta-in{position:relative;z-index:1}
.cp-cta-copy{max-width:calc(var(--s)*330)}
.cp-cta .cp-h2{margin-top:calc(var(--s)*12)!important;font-size:calc(var(--s)*25);line-height:1.12}
.cp-cta-in p:has(.cp-btn){margin-top:calc(var(--s)*19)!important}

.t-carpenter .t10-long{background:var(--pale)}

/* ---- narrower screens ----------------------------------------------------------------------------- */
@media (max-width:1180px){
  .cp-scope-in{grid-template-columns:calc(var(--s)*380) 1fr;gap:calc(var(--s)*30)}
}
/* Under 900 the copy no longer fits on the picture's calm side, so each photographic band becomes
   one column: the copy on the cream the picture's own edge fades into, then the picture full width
   with that same cream washing down over its top, so there is still no seam between them. */
@media (max-width:900px){
  .t-carpenter{--s:clamp(1.02px,.208vw,1.48px)}
  .cp-w{width:min(90%,720px)}
  .cp-hero,.cp-cta{height:auto;display:flex;flex-direction:column;align-items:stretch;overflow:visible}
  .cp-hero-in{order:1;padding-block:calc(var(--s)*40) calc(var(--s)*30)}
  .cp-hero-photo,.cp-cta-photo{order:2;position:relative;inset:auto}
  .cp-hero-photo{aspect-ratio:786/284}
  .cp-cta-photo{aspect-ratio:786/222}
  .cp-cta-in{order:1;padding-block:calc(var(--s)*34) calc(var(--s)*26)}
  .cp-hero-win::before,.cp-cta-win::before{content:"";position:absolute;left:0;right:0;top:0;height:24%;z-index:1;
    background:linear-gradient(var(--cream),rgba(249,249,247,0))}
  .cp-hero-copy,.cp-cta-copy{max-width:calc(var(--s)*420)}
  .cp-head{flex-direction:column;align-items:flex-start;gap:calc(var(--s)*14)}
  .cp-aside{padding-bottom:0}
  .cp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--s)*28) calc(var(--s)*16)}
  .cp-steps li{flex:none;width:100%}
  .cp-steps li.cp-arrow{display:none}
  .cp-scope-in{grid-template-columns:1fr;gap:calc(var(--s)*30)}
  .cp-scope-copy{padding-top:0}
  .cp-scope-card{width:100%;max-width:520px;margin-inline:auto} /* container-type:inline-size gives it no width of its own: it collapsed to 0 on phones and tablets until 23 Sep 2026 */
  .cp-calc-list{grid-template-columns:1fr}
  .cp-pay-in{grid-template-columns:1fr;gap:calc(var(--s)*22);justify-items:start}
  .cp-pay-method{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.22);padding-top:calc(var(--s)*16)}
  .cp-qr-card{width:calc(var(--s)*120);height:calc(var(--s)*120)}
  .cp-faq-cols,.t-carpenter .cp-faq-grid{grid-template-columns:1fr 1fr;gap:calc(var(--s)*26)}
  .cp-qa+.cp-qa{border-left:0;padding-left:0;margin-left:0}
}
@media (max-width:620px){
  .t-carpenter{--s:clamp(1.02px,.30vw,1.34px)}
  .cp-w{width:min(92%,560px)}
  .cp-steps{grid-template-columns:1fr 1fr}
  .cp-tpl-row{grid-template-columns:1fr;gap:calc(var(--s)*34)}
  .cp-tpl-row li{max-width:420px;margin-inline:auto;width:100%}
  .cp-faq-cols,.t-carpenter .cp-faq-grid{grid-template-columns:1fr}
  .cp-hero-photo{aspect-ratio:520/284}
  .cp-hero-img{object-position:72% 50%}
  .cp-cta-photo{aspect-ratio:480/222}
  .cp-cta-img{object-position:100% 50%}
}
@media (prefers-reduced-motion:reduce){
  .t-carpenter .cp-btn,.t-carpenter .cp-tool{transition:none}
}

/* it-hero-phone-v1 start */
/* One composed hero on phones (24 Sep 2026): the picture sits under the copy inside the same panel,
   with a scrim in the panel color, instead of a separate strip beneath the text. */
@media (max-width:900px){
.cp-hero{display:flex;flex-direction:column;position:relative;background:rgb(255,255,255);overflow:hidden;height:auto;min-height:0}
.cp-hero-in{order:1;position:relative;inset:auto;z-index:2;background:transparent;padding-bottom:0;margin-bottom:0}
.cp-hero-photo{order:2;position:relative;z-index:1;inset:auto;margin:calc(100vw*-0.2625) 0 0;width:100%;max-width:none;height:auto}
.cp-hero-win{aspect-ratio:1/0.7500;overflow:hidden}
.cp-hero-img{display:block;position:static;width:100%;height:100%;max-width:none;aspect-ratio:auto;padding-top:calc(100vw*0.1575);box-sizing:border-box;background:rgb(255,255,255);object-fit:cover;object-position:72% 50%;-webkit-mask-image:none;mask-image:none}
.cp-hero-win{position:relative;inset:auto;display:block;width:100%;height:auto}
.cp-hero-win::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgb(255,255,255) 0,rgb(255,255,255) calc(100vw*0.1650),rgba(255,255,255,0.85) calc(100vw*0.2025),rgba(255,255,255,0.5) calc(100vw*0.2850),rgba(255,255,255,0) calc(100vw*0.5025))}
.cp-hero-win::before{display:none}
}
/* it-hero-phone-v1 end */

/* v541: touch-sized hero buttons (coarse pointers only; desktop is unchanged) */
@media (pointer:coarse){.t-carpenter .cp-btn,.cp-btn{min-height:44px}}