/*
Theme Name: Becoming Tile Modern
Theme URI: https://becomingtile.com/
Author: Becoming Tile
Description: Lightweight hybrid marketing theme for Becoming Tile. Homepage structure in PHP, content and image settings in WordPress, editable interior pages, and WooCommerce compatibility.
Version: 0.2.4
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: becoming-tile-modern
License: GPL-2.0-or-later
*/
:root{--ink:#142d32;--teal:#0d6767;--sand:#f7f5f0;--paper:#fff;--line:#e0e2de}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible{outline:3px solid #177f81;outline-offset:3px}img{max-width:100%;height:auto}button{font:inherit}.announcement{background:#183b3c;color:#f7f8f3;text-align:center;padding:10px 16px;font-size:12px;letter-spacing:.11em;text-transform:uppercase}.nav{min-height:86px;display:flex;align-items:center;justify-content:space-between;padding:12px clamp(24px,5vw,86px);gap:30px;background:white;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line)}body.admin-bar .nav{top:32px}.brand{font-family:Georgia,serif;font-size:28px;letter-spacing:.06em;white-space:nowrap}.brand em{font-size:10px;display:block;font-family:Arial;font-style:normal;letter-spacing:.27em;margin-top:4px}.links{display:flex;gap:24px;align-items:center;font-size:13px;font-weight:bold}.links a:hover{color:var(--teal)}.links ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;align-items:center}.cta{display:inline-block;background:var(--ink);color:#fff;padding:16px 23px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:bold}.cta:hover{background:var(--teal);color:white}.outline{display:inline-block;border:1px solid var(--ink);padding:15px 22px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:bold}.hero{display:grid;grid-template-columns:47% 53%;min-height:650px;background:var(--sand)}.hero-copy{padding:clamp(55px,7vw,130px) clamp(30px,5vw,92px);align-self:center}.eyebrow{font-size:12px;letter-spacing:.21em;text-transform:uppercase;color:var(--teal);font-weight:700}.hero h1{font-size:clamp(48px,5vw,85px);font-family:Georgia,serif;font-weight:400;line-height:1.06;letter-spacing:-.035em;margin:28px 0}.hero p{font-size:18px;line-height:1.65;max-width:550px;color:#4c6162}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:31px}.hero-img{position:relative;min-height:630px}.hero-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.image-tag{position:absolute;bottom:17px;right:17px;background:#fffffff0;padding:10px 15px;font-size:11px;letter-spacing:.04em}.wrap{max-width:1400px;margin:auto;padding:100px 36px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:35px}.section-head h2,.headline{font:400 clamp(34px,3.4vw,54px)/1.15 Georgia,serif;margin:15px 0 0}.section-head p{max-width:510px;line-height:1.6;color:#566}.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.tile img{width:100%;height:300px;object-fit:cover;display:block}.tile h3{font:400 22px Georgia,serif;margin:16px 0 6px}.tile p{font-size:13px;line-height:1.5;color:#596869;margin:0 0 10px}.tile a.more{font-size:12px;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid #133;padding-bottom:4px}.label{font-size:11px;color:#667;margin-top:8px;letter-spacing:.03em}.band{background:#f1f3ef}.split{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}.split img{width:100%;height:520px;object-fit:cover}.split p{font-size:17px;line-height:1.7;color:#526363}.steps{display:flex;gap:16px;margin-top:30px}.step{flex:1;border-top:1px solid #bcc9c5;padding-top:14px;font-size:14px}.step strong{display:block;margin-bottom:7px}.projects{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:17px}.projects img{width:100%;height:270px;object-fit:cover}.projects article:first-child img{height:340px}.projects h3{font:400 21px Georgia,serif;margin:15px 0 3px}.projects p{font-size:13px;color:#526363;line-height:1.6}.quote{padding:95px 24px;text-align:center;background:#183b3c;color:white}.quote h2{font:400 clamp(33px,4vw,62px)/1.2 Georgia,serif;max-width:930px;margin:0 auto 24px}.quote p{line-height:1.7;color:#dbe6df}footer{background:#102b2e;color:#fff;padding:55px clamp(30px,5vw,90px);display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}footer p{color:#b8cccc;font-size:13px}.menu-toggle{display:none}.page-content{max-width:920px;margin:0 auto;padding:70px 28px;line-height:1.75}.page-content h1{font:400 clamp(38px,5vw,65px) Georgia,serif}.page-content img{max-width:100%}.page-content a:not(.cta){color:var(--teal);text-decoration:underline}.entry-meta{font-size:13px;color:#657}.woocommerce main{max-width:1400px;margin:auto;padding:25px} @media(max-width:1000px){.links,.links ul{gap:11px;font-size:11px}.four{grid-template-columns:repeat(2,1fr)}.projects{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr 1fr}.hero h1{font-size:48px}}@media(max-width:700px){body.admin-bar .nav{top:46px}.nav{min-height:70px}.brand{font-size:21px}.links{display:none;position:absolute;top:100%;left:0;right:0;background:white;flex-direction:column;align-items:stretch;padding:25px;box-shadow:0 8px 12px #0002}.links ul{display:flex;flex-direction:column;align-items:stretch}.links.open{display:flex}.menu-toggle{display:block;border:1px solid #aaa;background:white;padding:8px 12px;cursor:pointer}.hero{display:flex;flex-direction:column-reverse}.hero-img{min-height:400px}.hero-copy{padding:48px 26px 58px}.hero h1{font-size:48px}.wrap{padding:65px 22px}.four,.split,.projects{grid-template-columns:1fr}.tile img{height:310px}.split img{height:350px}.steps{flex-direction:column}.section-head{display:block}.projects article:first-child img{height:270px}}

/* v0.2 launch-focused benefits and lead-time sections */
.benefits{background:#fff;border-bottom:1px solid var(--line);padding:35px clamp(18px,5vw,80px) 18px}.benefits-inner{max-width:1340px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.benefit{display:flex;align-items:start;gap:15px}.benefit-icon{font-size:33px;line-height:1;color:#0d6767}.benefit strong{display:block;font:400 23px Georgia,serif}.benefit p{font-size:13px;color:#536567;line-height:1.5;margin:7px 0}.benefits-note{text-align:center;font-size:11px;color:#627072;margin:20px auto 0;max-width:850px;line-height:1.5}.leadtime-band{background:#f5f7f4}.leadtime-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.leadtime-grid article{background:#fff;border:1px solid #dee5e1;padding:27px}.leadtime-grid h3{margin:0 0 18px;font:400 23px Georgia,serif}.leadtime-grid strong{font-size:17px;color:#0d6767}.leadtime-grid p{font-size:14px;color:#526363;line-height:1.65}.leadtime-disclaimer{font-size:12px;color:#566;max-width:870px;margin-top:28px;line-height:1.6}.page-content .wp-block-button__link{background:#142d32;color:#fff!important;text-decoration:none!important;border-radius:0;padding:15px 25px}.page-content .wp-block-button__link:hover{background:#0d6767}.page-content h2{font:400 clamp(27px,3vw,40px)/1.2 Georgia,serif;margin-top:40px}.page-content h3{font:400 24px Georgia,serif}.page-content .wp-block-columns{gap:24px}.page-content .wp-block-group{margin-block:24px}.page-content .wp-block-image img{max-width:100%;height:auto}.page-content .wp-block-separator{border:0;border-top:1px solid #dce3df}
@media(max-width:700px){.benefits-inner,.leadtime-grid{grid-template-columns:1fr}.benefits{padding:29px 22px 18px}.benefit strong{font-size:21px}.benefits-note{text-align:left}}

/* v0.2.1: emphasized customer benefits and tighter section transition. */
.benefits{background:#f8f8f5;padding:23px clamp(18px,4vw,58px) 15px;border-bottom:1px solid #e3e8e3}
.benefits-inner{max-width:1280px;gap:16px}
.benefit-card{background:#fff;border:1px solid #e0e7e2;border-radius:9px;padding:21px 21px 20px;min-height:120px;gap:15px;align-items:center;box-shadow:0 3px 12px rgba(20,45,50,.035);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.benefit-card:hover{transform:translateY(-2px);border-color:#cadbd4;box-shadow:0 8px 20px rgba(20,45,50,.075)}
.benefit-card .benefit-icon{display:flex;flex:0 0 50px;width:50px;height:50px;align-items:center;justify-content:center;border:1px solid #c7ddd8;border-radius:50%;background:#e9f3f0;color:#096666;font-size:26px;line-height:1}
.benefit-card strong{font:400 clamp(21px,1.9vw,26px)/1.2 Georgia,serif;color:#17383b}
.benefit-card p{font-size:13px;line-height:1.45;color:#4d6162;margin:7px 0 0}
.benefits-note{margin:12px auto 0;font-size:11px;line-height:1.45;color:#657575}
#applications.wrap{padding-top:49px}
@media(max-width:900px) and (min-width:701px){.benefit-card{padding:17px 14px;gap:10px}.benefit-card .benefit-icon{flex-basis:39px;width:39px;height:39px;font-size:22px}.benefit-card strong{font-size:20px}.benefit-card p{font-size:12px}}
@media(max-width:700px){.benefits{padding:18px 19px 16px}.benefits-inner{grid-template-columns:1fr;gap:10px}.benefit-card{min-height:0;padding:14px 16px}.benefit-card .benefit-icon{flex-basis:43px;width:43px;height:43px;font-size:22px}.benefit-card strong{font-size:21px}.benefits-note{text-align:left;margin:11px 3px 0}#applications.wrap{padding-top:39px}}
@media(prefers-reduced-motion:reduce){.benefit-card{transition:none}.benefit-card:hover{transform:none}}

/* v0.2.2: interactive benefit cards, compact vertical transition */
.benefit-card{display:flex;color:var(--ink);text-decoration:none;cursor:pointer;position:relative}
.benefit-card:visited{color:var(--ink)}
.benefit-card:hover,.benefit-card:focus-visible{color:var(--ink);transform:translateY(-3px);border-color:#80b2a9;box-shadow:0 12px 24px rgba(20,45,50,.12)}
.benefit-card:hover .benefit-action,.benefit-card:focus-visible .benefit-action{text-decoration:underline;color:#075b60}
.benefit-card:focus-visible{outline:3px solid #177f81;outline-offset:3px}
.benefit-action{display:inline-block;color:#0d6767;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-top:12px}
.benefits{padding-bottom:10px}
#applications.wrap{padding-top:32px}
#lead-times,#no-minimum{scroll-margin-top:120px}
.order-flexibility{margin-top:26px;border-top:1px solid #d5dfd9;padding:24px 0 0;display:flex;align-items:center;justify-content:space-between;gap:28px}
.order-flexibility h3{font:400 27px Georgia,serif;margin:9px 0}
.order-flexibility p{font-size:14px;color:#526363;line-height:1.6;max-width:780px;margin:0}
.order-flexibility .outline{flex-shrink:0}
@media(max-width:700px){#applications.wrap{padding-top:29px}.order-flexibility{display:block}.order-flexibility .outline{margin-top:20px}.benefit-card:hover{transform:none}}

/* v0.2.3: linked supporting pages never embedded on homepage */
.btm-section-page-link{margin:22px 0 0}.btm-section-page-link .outline{font-size:12px;line-height:1.25}.split > div{min-width:0}


/* v0.2.4 — Compact, viewport-aware homepage sections.
   On a typical desktop (1366×768), the hero can be seen in one viewport
   without zooming; the subsequent sections use less vertical padding.
   Never constrain section content to a fixed height on mobile. */
@media (min-width: 701px) {
  .announcement { padding-top: 7px; padding-bottom: 7px; }
  .nav { min-height: 72px; padding-top: 9px; padding-bottom: 9px; }
  .hero {
    min-height: 0;
    height: clamp(490px, calc(100svh - 200px), 610px);
  }
  .hero-copy {
    padding: clamp(22px, 4svh, 43px) clamp(26px, 4.5vw, 76px);
  }
  .hero h1 {
    font-size: clamp(43px, 4.45vw, 66px);
    margin-top: 17px;
    margin-bottom: 17px;
    line-height: 1.055;
  }
  .hero p { font-size: 16px; line-height: 1.52; margin: 13px 0; }
  .hero .actions { margin-top: 22px; }
  .hero-copy .actions + p { margin-top: 15px !important; margin-bottom: 0; }
  .hero-img { min-height: 0; height: 100%; }
  .hero-img img { object-position: center center; }

  .wrap { padding-top: clamp(39px, 5.5svh, 63px); padding-bottom: clamp(39px, 5.5svh, 63px); }
  #applications.wrap { padding-top: clamp(26px, 4svh, 42px); padding-bottom: clamp(40px, 5.3svh, 62px); }
  .section-head { margin-bottom: 22px; align-items: center; }
  .section-head h2, .headline { font-size: clamp(34px, 3.25vw, 49px); margin-top: 10px; }
  .section-head p { margin: 4px 0; line-height: 1.5; }
  .tile img { height: clamp(185px, 28svh, 230px); }
  .tile h3 { font-size: 20px; margin: 10px 0 5px; }
  .tile p { line-height: 1.43; margin-bottom: 7px; }
  .tile .label { font-size: 10px; margin-top: 7px; }

  .band .wrap { padding-top: clamp(40px, 5.7svh, 63px); padding-bottom: clamp(40px, 5.7svh, 63px); }
  .split { gap: clamp(28px, 4.5vw, 64px); }
  .split img { height: clamp(295px, 47svh, 390px); }
  .split p { font-size: 15px; line-height: 1.55; }
  .steps { margin-top: 20px; }
  .step { font-size: 13px; padding-top: 10px; }
  .split .actions { margin-top: 23px; }

  #projects.wrap { padding-top: clamp(38px, 5svh, 60px); padding-bottom: clamp(42px, 5.5svh, 65px); }
  .projects { gap: 15px; }
  .projects img, .projects article:first-child img { height: clamp(160px, 24svh, 210px); }
  .projects h3 { margin: 10px 0 3px; font-size: 20px; }
  .projects p { font-size: 12px; line-height: 1.4; margin: 5px 0; }
  .projects .label { font-size: 10px; }

  .leadtime-grid article { padding: 20px; }
  .leadtime-grid h3 { margin-bottom: 12px; }
  .leadtime-grid p { margin-bottom: 0; }
  .leadtime-disclaimer { margin-top: 20px; }
  .order-flexibility { margin-top: 20px; padding-top: 18px; }
  .quote { padding-top: 58px; padding-bottom: 58px; }
}
/* Medium-width screens: prioritize text legibility over forcing one-screen panels. */
@media (min-width: 701px) and (max-width: 1000px) {
  .hero { height: auto; min-height: 475px; }
  .hero-copy { padding: 34px 25px; }
  .hero h1 { font-size: clamp(38px, 4.7vw, 48px); }
  .hero-img { min-height: 475px; }
  .four, .projects { row-gap: 22px; }
}
@media (max-width: 700px) {
  .announcement { padding: 7px 10px; }
  .nav { min-height: 62px; padding: 10px 18px; }
  .hero { min-height: 0; height: auto; }
  .hero-img { min-height: 0; height: clamp(260px, 46svh, 370px); flex: 0 0 auto; }
  .hero-copy { padding: 29px 22px 34px; }
  .hero h1 { font-size: clamp(36px, 10vw, 46px); margin: 14px 0; }
  .hero p { font-size: 15px; line-height: 1.5; }
  .hero .actions { margin-top: 20px; }
  .hero-copy .actions + p { margin-top: 15px !important; }
  .wrap { padding-top: 43px; padding-bottom: 43px; }
  #applications.wrap { padding-top: 33px; padding-bottom: 43px; }
  .section-head { margin-bottom: 21px; }
  .section-head h2, .headline { margin-top: 10px; }
  .tile img { height: min(69vw, 295px); }
  .tile h3 { margin-top: 10px; }
  .split img { height: min(68vw, 310px); }
  .projects img, .projects article:first-child img { height: min(65vw, 270px); }
  .projects { gap: 22px; }
  .quote { padding: 54px 20px; }
}