:root{--blue:#0066cc;--blue-bright:#2997ff;--ink:#1d1d1f;--muted:#6e6e73;--paper:#f5f5f7;--line:#e0e0e0;--dark:#272729;--white:#fff;--max:1180px;--space:clamp(56px,8vw,100px);--font:system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:16px/1.55 var(--font);background:var(--white)}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;object-fit:cover}.container{max-width:var(--max);padding:0 28px;margin:auto}.nav{height:48px;background:#000;color:#fff}.navin{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{font-size:19px;font-weight:650;letter-spacing:-.04em}.brand small{font-weight:400;font-size:10px;letter-spacing:.09em;margin-left:5px}.links,.links ul{display:flex;align-items:center;gap:24px;margin:0;padding:0;list-style:none;font-size:12px}.button{display:inline-flex;justify-content:center;align-items:center;border-radius:999px;padding:10px 20px;border:1px solid var(--blue);background:var(--blue);color:#fff;font-size:14px}.button.ghost{background:transparent;color:var(--blue)}.button.white{background:#fff;border-color:#fff;color:var(--blue)}.hero{min-height:680px;display:grid;place-items:center;position:relative;overflow:hidden;background:var(--dark);color:#fff}.hero>img{position:absolute;inset:0;width:100%;height:100%;opacity:.56}.hero:after{position:absolute;inset:0;content:"";background:rgba(0,0,0,.26)}.hero .container{position:relative;z-index:1;width:100%}.eyebrow{margin:0 0 10px;color:var(--blue);font-size:13px;letter-spacing:.1em;text-transform:uppercase}.hero .eyebrow{color:var(--blue-bright)}h1,h2,h3{line-height:1.1;letter-spacing:-.045em;margin:0 0 18px}h1{font-size:clamp(48px,7vw,80px)}h2{font-size:clamp(34px,4vw,51px)}h3{font-size:22px}.hero p{font-size:clamp(18px,2vw,25px);max-width:680px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.section{padding:var(--space) 0}.gray,.page-head{background:var(--paper)}.dark,.cta{background:var(--dark);color:#fff}.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,8vw,110px);align-items:center}.split img{width:100%;height:480px}.lead{font-size:24px;line-height:1.5}.section-title{margin-bottom:38px}.section-title>p:last-child,.page-head p{max-width:670px;color:var(--muted);font-size:17px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:#fff;border:1px solid var(--line);overflow:hidden}.card img{width:100%;height:205px}.card-body{padding:22px}.meta{color:var(--muted);font-size:13px}.arrow{color:var(--blue);font-weight:600;font-size:14px}.center{text-align:center;margin-top:30px}.page-head{padding:88px 0 68px}.page-head h1{font-size:clamp(42px,6vw,68px)}.service-row{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:42px 0;border-top:1px solid var(--line)}.service-row img{width:100%;height:220px}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.step{padding:20px;background:#fff;border-top:2px solid var(--blue)}.article{max-width:780px;margin:auto}.article img{width:100%;height:430px;margin-bottom:45px}.article h2{font-size:29px;margin-top:55px}.info{display:grid;grid-template-columns:repeat(4,1fr);margin:30px 0;border-top:1px solid var(--line)}.info div{padding:15px;border-bottom:1px solid var(--line)}.mvv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.mvv div{background:#fff;padding:28px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:16px;border-bottom:1px solid var(--line);text-align:left}.table th{width:30%}.form{max-width:760px;margin:auto}.field{margin:20px 0}.field label{display:block;font-weight:600;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;padding:13px;border:1px solid var(--line);font:inherit}.field textarea{min-height:160px}.cta{padding:70px 0}.cta-in{display:flex;align-items:center;justify-content:space-between;gap:25px}.footer{padding:48px 0 22px;background:var(--paper);font-size:12px;color:#555}.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:25px;padding-bottom:38px}.foot a{display:block;margin:8px 0}.foot ul{padding:0;list-style:none}.copy{padding-top:18px;border-top:1px solid var(--line)}@media(max-width:760px){.links{display:none}.split,.cards,.service-row,.mvv,.steps{grid-template-columns:1fr}.cta-in{display:block}.foot{grid-template-columns:1fr 1fr}.hero{min-height:600px}.split img{height:320px}.service-row img{height:200px}}

@media(max-width:768px){.hero{background-position:45% center!important;}}


/* Shared typography for inner pages; Home and Contact excluded. */
body:not(.home):not(.page-template-template-contact) .page-head h1{font-size:52px}
body:not(.home):not(.page-template-template-contact) .page-head .eyebrow{font-size:17px}
body:not(.home):not(.page-template-template-contact) .page-head p:not(.eyebrow){font-size:18px}
body:not(.home):not(.page-template-template-contact) main h2{font-size:42px}
body:not(.home):not(.page-template-template-contact) main p:not(.eyebrow):not(.meta){font-size:17px}
@media(max-width:760px){body:not(.home):not(.page-template-template-contact) .page-head h1{font-size:40px}body:not(.home):not(.page-template-template-contact) main h2{font-size:32px}}


/* Compact spacing preview for Home only. Restore values saved locally. */
.home{--space:clamp(48px,6vw,80px)}
.home .hero{min-height:620px}
.home .cta{padding-top:58px;padding-bottom:58px}
@media(max-width:760px){.home{--space:48px}.home .hero{min-height:540px}}

/* Align request-flow page heading with other inner pages. Content unchanged. */
.page-id-149 .flow-wrap > .eyebrow,
.page-id-149 .flow-wrap > h1,
.page-id-149 .flow-wrap > h1 + p{max-width:1124px;margin-left:auto;margin-right:auto}
.page-id-149 .flow-wrap > .eyebrow{font-size:17px;margin-bottom:10px}
.page-id-149 .flow-wrap > h1{font-size:52px;line-height:1.1;margin-bottom:18px}
.page-id-149 .flow-wrap > h1 + p{font-size:18px}
@media(max-width:760px){
.page-id-149 .flow-wrap > .eyebrow,
.page-id-149 .flow-wrap > h1,
.page-id-149 .flow-wrap > h1 + p{max-width:none;margin-left:0;margin-right:0}
.page-id-149 .flow-wrap > h1{font-size:40px}
}

/* Unified inner-page hero layout: Works, Flow and Company. */
.page-id-125 main.section{padding-top:88px;background:linear-gradient(to bottom,var(--paper) 0,var(--paper) 313px,var(--white) 313px,var(--white) 100%)}
.page-id-125 main.section>.container::before{content:"WORKS";display:block;margin:0 0 10px;color:var(--blue);font-size:17px;line-height:1.55;letter-spacing:.1em;text-transform:uppercase}
.page-id-125 main.section>.container>h1:first-of-type{font-size:52px;line-height:1.1;margin:0 0 18px}
.page-id-125 main.section>.container>h1:first-of-type+p{max-width:670px;color:var(--muted);font-size:18px}
.page-id-149 main.section{padding-top:0}
.page-id-149 .flow-page{padding-top:88px;background:linear-gradient(to bottom,var(--paper) 0,var(--paper) 388px,var(--white) 388px,var(--white) 100%)}
.page-id-149 .flow-kicker{color:var(--blue);font-size:0;line-height:1.55;letter-spacing:.1em;text-transform:uppercase}
.page-id-149 .flow-kicker::before{content:"FLOW";font-size:17px}
body.page-id-149 .flow-wrap>p.flow-lead{font-size:18px;color:var(--muted)}
.page-template-template-about .page-head .eyebrow{font-size:0}
.page-template-template-about .page-head .eyebrow::before{content:"COMPANY";font-size:17px}
@media(max-width:760px){
.page-id-125 main.section{padding-top:60px;background:linear-gradient(to bottom,var(--paper) 0,var(--paper) 285px,var(--white) 285px)}
.page-id-125 main.section>.container>h1:first-of-type{font-size:40px}
.page-id-149 .flow-page{padding-top:60px;background:linear-gradient(to bottom,var(--paper) 0,var(--paper) 350px,var(--white) 350px)}
}

/* Final specificity fixes for unified page heads. */
body.page-id-125 main.section>.container>h1.wp-block-heading{font-size:52px!important}
body.page-id-125 main.section>.container>h1.wp-block-heading+p.wp-block-paragraph{font-size:18px!important;color:var(--muted)}
body.page-id-149 .flow-wrap>p.flow-lead{font-size:18px!important}


/* Company page logo in the page heading. */
.page-template-template-about .page-head .container{position:relative;padding-right:150px}
.page-template-template-about .page-head .container::after{content:"";position:absolute;right:18%;top:50%;width:150px;height:150px;transform:translateY(-50%);background:url("https://88gardenexterior.com/wp-content/uploads/2026/09/88.jpg") center/contain no-repeat;mix-blend-mode:multiply}
@media(max-width:760px){
.page-template-template-about .page-head .container{padding-right:112px}
.page-template-template-about .page-head .container::after{width:68px;height:68px}
}

@media(max-width:760px){.page-template-template-about .page-head .container::after{right:28px}}


/* Page-head illustrations: Service and Contact. */
.page-template-template-service .page-head .container,
.page-template-template-contact .page-head .container{
  position:relative;
  padding-right:280px;
}
.page-template-template-service .page-head .container::after,
.page-template-template-contact .page-head .container::after{
  content:"";
  position:absolute;
  right:18%;
  top:50%;
  width:220px;
  height:150px;
  transform:translateY(-50%);
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}
.page-template-template-service .page-head .container::after{
  background-image:url("https://88gardenexterior.com/wp-content/uploads/2026/09/exec-2e767fbe-287e-486c-98ed-40daad537886.png");
}
.page-template-template-contact .page-head .container::after{
  background-image:url("https://88gardenexterior.com/wp-content/uploads/2026/09/exec-e9304dc8-b18d-416a-88e5-8f2da840ecd5.png");
}
@media(max-width:760px){
  .page-template-template-service .page-head .container,
  .page-template-template-contact .page-head .container{padding-right:112px}
  .page-template-template-service .page-head .container::after,
  .page-template-template-contact .page-head .container::after{
    right:28px;
    width:90px;
    height:70px;
  }
}
.page-template-template-contact .page-head .container::after{mix-blend-mode:multiply}

/* Balanced final sizing for simple page-head artwork. */
.page-template-template-service .page-head .container,
.page-template-template-contact .page-head .container{padding-right:320px}
.page-template-template-service .page-head .container::after,
.page-template-template-contact .page-head .container::after{width:260px;height:160px}
@media(max-width:760px){
.page-template-template-service .page-head .container,
.page-template-template-contact .page-head .container{padding-right:124px}
.page-template-template-service .page-head .container::after,
.page-template-template-contact .page-head .container::after{width:104px;height:76px}
}

/* White background and 1.5x page-head artwork. */
.page-template-template-service .page-head .container,
.page-template-template-contact .page-head .container{padding-right:440px}
.page-template-template-service .page-head .container::after,
.page-template-template-contact .page-head .container::after{right:4%;width:390px;height:240px;background-color:#fff;mix-blend-mode:normal}
@media(max-width:760px){
.page-template-template-service .page-head .container,
.page-template-template-contact .page-head .container{padding-right:176px}
.page-template-template-service .page-head .container::after,
.page-template-template-contact .page-head .container::after{right:18px;width:156px;height:114px}
}

.page-template-template-service .page-head .container::after{background-image:url("https://88gardenexterior.com/wp-content/uploads/2026/09/exec-5ee66ce4-98a4-4aee-b043-75f33607463a.png")}

/* Align contact artwork beneath WORKS. */
@media(min-width:761px){.page-template-template-contact .page-head .container::after{right:13%}}

/* Enlarge company logo 1.5x and align beneath FLOW without vertical movement. */
@media(min-width:761px){.page-template-template-about .page-head .container{padding-right:280px}.page-template-template-about .page-head .container::after{right:28%;width:225px;height:225px}}
@media(max-width:760px){.page-template-template-about .page-head .container{padding-right:146px}.page-template-template-about .page-head .container::after{width:102px;height:102px}}

/* Fine-tune company logo: start beneath the F in FLOW. */
@media(min-width:761px){.page-template-template-about .page-head .container::after{right:22%}}


/* Compact spacing for the Company profile section only. */
@media(min-width:761px){
.page-template-template-about main>.section.gray{padding:60px 0}
.page-template-template-about main>.section.gray h2{margin-bottom:10px}
.page-template-template-about main>.section.gray .table th,
.page-template-template-about main>.section.gray .table td{padding:12px 16px}
}
@media(max-width:760px){
.page-template-template-about main>.section.gray{padding:44px 0}
.page-template-template-about main>.section.gray .table th,
.page-template-template-about main>.section.gray .table td{padding:12px 10px}
}

/* Fix FLOW kicker text and align it with other inner-page headings. */
body.page-id-149 .flow-kicker{max-width:1124px;margin:0 auto 10px!important;color:transparent!important;font-size:17px!important}
body.page-id-149 .flow-kicker::before{content:"FLOW";color:var(--blue)!important;font-size:17px}
@media(max-width:760px){body.page-id-149 .flow-kicker{max-width:none;margin:0 0 10px!important}}


/* Mobile-only TOP hero safeguards: prevent duplicate source text and overlaps. */
@media(max-width:760px){
.home .hero{min-height:calc(100svh - 72px)!important}
.home .hero .container{padding-left:24px!important;padding-right:24px!important}
.home .hero .eyebrow,.home .hero h1,.home .hero h1+p{font-size:0!important}
.home .hero .eyebrow::after{font-size:20px!important;line-height:1.3!important;white-space:nowrap!important}
.home .hero h1::after{font-size:clamp(38px,11vw,48px)!important;line-height:1.08!important;letter-spacing:-.03em!important;white-space:pre-line!important}
.home .hero h1+p::after{font-size:16px!important;line-height:1.65!important;white-space:pre-line!important}
.home .hero .actions{margin-top:26px!important}
.home .hero .actions .button{font-size:18px!important;padding:14px 24px!important}
}


/* Prevent duplicated replacement text on the mobile home hero. */
@media(max-width:760px){
.home .hero .container{padding-left:24px!important;padding-right:24px!important}
.home .hero .eyebrow,.home .hero h1,.home .hero h1+p{font-size:0!important}
.home .hero .eyebrow::after{display:block;font-size:20px!important;line-height:1.3!important}
.home .hero h1::after{display:block;font-size:clamp(38px,11vw,48px)!important;line-height:1.06!important;letter-spacing:-.02em!important;white-space:pre-line!important}
.home .hero h1+p::after{display:block;font-size:16px!important;line-height:1.65!important;white-space:pre-line!important}
}


/* Final mobile corrections for header and inner-page headings. */
@media(max-width:760px){
body header.nav nav.links>#menu-item-56,
body header.nav nav.links>#menu-item-58,
body header.nav nav.links>#menu-item-129,
body header.nav nav.links>#menu-item-151,
body header.nav nav.links>#menu-item-59{display:none!important}
body header.nav nav.links>#menu-item-60{display:flex!important}
body header.nav nav.links>#menu-item-60>a::before{font-size:20px!important;color:#111!important;line-height:1!important}
.page-template-template-service .page-head .container{padding-right:28px!important}
.page-template-template-service .page-head h1{font-size:36px!important;line-height:1.2!important;word-break:keep-all!important;overflow-wrap:break-word!important}
.page-template-template-service .page-head p:not(.eyebrow){font-size:17px!important;line-height:1.7!important}
.page-template-template-service .page-head .container::after{position:static!important;display:block!important;width:100%!important;height:150px!important;margin:22px 0 0!important;transform:none!important;background-position:left center!important;background-size:contain!important}
body.page-id-125 main.section>.container>h1.wp-block-heading{font-size:34px!important;line-height:1.22!important;word-break:keep-all!important;overflow-wrap:break-word!important}
body.page-id-125 main.section>.container>h1.wp-block-heading+p.wp-block-paragraph{font-size:17px!important;line-height:1.7!important}
}


/* Mobile fixed headings and font-independent Instagram icon. */
body header.nav #menu-item-60>a[href*="instagram.com"]::before{content:""!important;display:block!important;width:20px!important;height:20px!important;flex:0 0 20px!important;font-family:inherit!important;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23111' stroke='none'/%3E%3C/svg%3E")!important}
@media(max-width:760px){.page-template-template-service .page-head h1{font-size:0!important;line-height:1.2!important}.page-template-template-service .page-head h1::after{content:"外構\A エクステリア\A サービス";display:block;white-space:pre-line;font-size:36px;line-height:1.2;letter-spacing:-.045em}body.page-id-125 main.section>.container>h1.wp-block-heading{font-size:0!important;line-height:1.22!important}body.page-id-125 main.section>.container>h1.wp-block-heading::after{content:"秋田市の外構\A エクステリア\A イメージ";display:block;white-space:pre-line;font-size:34px;line-height:1.22;letter-spacing:-.045em}}

/* Reform exterior page: compact desktop overview; mobile remains unchanged. */
@media (min-width: 769px) {
  .page-id-225 main.section { padding: 40px 0 70px; }
  .page-id-225 main.section > .container > section {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(380px, 1.15fr);
    column-gap: 48px;
    align-items: start;
  }
  .page-id-225 main.section > .container > section > .eyebrow,
  .page-id-225 main.section > .container > section > h1,
  .page-id-225 main.section > .container > section > .lead { grid-column: 1; }
  .page-id-225 main.section > .container > section > figure {
    grid-column: 2;
    grid-row: 1 / 4;
    justify-self: center;
    margin: 0;
  }
  .page-id-225 main.section > .container > section > figure img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
  }
}

/* Reform exterior desktop v2: compact heading row with a larger centered visual. */
@media (min-width: 769px) {
  .page-id-225 main.section { padding: 34px 0 72px; }
  .page-id-225 main.section > .container > section {
    display: grid;
    grid-template-columns: auto minmax(320px, 1fr);
    column-gap: 40px;
    align-items: center;
  }
  .page-id-225 main.section > .container > section > .eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  .page-id-225 main.section > .container > section > h1 {
    grid-column: 1;
    margin: 0 0 28px;
    white-space: nowrap;
  }
  .page-id-225 main.section > .container > section > .lead {
    grid-column: 2;
    margin: 0 0 28px;
    max-width: none;
  }
  .page-id-225 main.section > .container > section > figure {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: center;
    width: min(52vw, 520px);
    margin: 0;
  }
  .page-id-225 main.section > .container > section > figure img {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
}