/******************************************************************
 *  YOUTOWN – Desktop Stylesheet  (PC ≥992px)
 *  ---------------------------------------------------------------
 *  スマホ・タブレット用スタイルは別途 index_tablet.css / index_sp.css
 *  などに分離して管理する想定です。
 ******************************************************************/

/*==================================================
=            0. 共通変数 & ベースフォント           =
==================================================*/
:root{
  --grad-from:#0f766e;
  --grad-to  :#064e3b;
}

body{
  font-family:"Noto Sans JP", sans-serif;
  font-size:1rem;
  line-height:1.6;
  color:#212529;
}



/*==================================================
=            1. ナビゲーションバー                  =
==================================================*/
.glass-nav{
  background:rgba(0,0,0,.70);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  letter-spacing:0;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  z-index:1100;
  transition:background .25s;
}
.glass-nav.scrolled{ background:rgba(0,0,0,.95); }

.navbar-brand{
  font-size:1.25rem;
  padding:.25rem 0;
  color:#fff;
}

.navbar .nav-link{
  position:relative;
  font-weight:600;
  padding:.6rem 0;
  margin:0 1rem;
  transition:color .25s;
}
.navbar .nav-link::after{
  content:'';
  position:absolute;left:0;bottom:-4px;
  width:0;height:2px;
  background:linear-gradient(90deg,#d1fae5,#0f766e);
  transition:width .25s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{ color:#fff; }
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{ width:100%; }

.navbar-toggler{ border:none; }
.navbar-toggler:focus{ box-shadow:none; }
.navbar-dark .navbar-toggler-icon,
.navbar-light .navbar-toggler-icon{
  width:1.6rem;height:1.6rem;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .btn{
  border-radius:50rem;
  font-weight:600;
  transition:.25s;
}
.navbar .btn-outline-warning{
  --bs-btn-color:#0f766e;
  --bs-btn-border-color:#0f766e;
}
.navbar .btn-outline-warning:hover{
  color:#fff;background:#0f766e;border-color:#0f766e;
}



/*==================================================
=            2. 告知バー                            =
==================================================*/
.notice-bar{
  position:fixed;top:56px;left:0;right:0;z-index:1030;
  display:flex;justify-content:center;align-items:center;
  height:40px;background:#f4f4f4;color:#222 !important;
  border-bottom:1px solid #dcdcdc;font-weight:600;
}



/*==================================================
=            3. ヒーローセクション                  =
==================================================*/
.hero{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:70vh;min-height:480px;overflow:hidden;
  padding:10vh 1rem;
}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
}
.hero-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);z-index:2;
}
.hero-copy{ position:relative;z-index:3;width:100%;text-align:center; }

.hero-buttons{ gap:1rem; }
.hero-buttons .btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50rem;transition:.25s;
}
.hero-buttons .btn i{ margin-right:.35rem;font-size:1rem;line-height:0;vertical-align:middle; }
.hero-login-btn{ border-width:2px; }
.hero-login-btn:hover{ color:#000;background:#fff;border-color:#fff; }



/*==================================================
=            4. カテゴリーカード                    =
==================================================*/
.category-tabs .nav-link{
  border-radius:9999px;color:#666;background:#f0f0f0;
  padding:.45rem 1.2rem;font-weight:600;transition:.2s;
}
.category-tabs .nav-link.active{
  color:#fff;background:linear-gradient(90deg,var(--grad-from),var(--grad-to));
}

.cat-circle{ text-decoration:none; }
.cat-circle img{
  width:140px;height:140px;border-radius:50%;
  padding:4px;background:#fff;
  border:3px solid transparent;transition:.25s;
}
.cat-circle:hover img{
  transform:scale(1.06);
  border-color:var(--grad-to);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.cat-circle span{
  display:block;margin-top:.5rem;color:#111;font-weight:600;
}



/*==================================================
=            5. ニュースタイムライン                =
==================================================*/
.news-timeline .news-item .news-date{
  font-size:.95rem;
  background:linear-gradient(90deg,var(--grad-from),var(--grad-to));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.news-timeline .news-item .news-text{ font-size:.95rem; }

.news-dot{position:relative;width:18px;}
.news-dot .dot{
  display:block;width:14px;height:14px;border-radius:50%;
  background:var(--grad-to);
}
.news-dot .line{
  content:"";position:absolute;left:7px;top:14px;bottom:-4px;width:2px;
  background:#ced4da;
}
.news-item:hover .news-text{ color:#0f766e;text-decoration:underline; }



/*==================================================
=            6. ご注文フロー                        =
==================================================*/
.flow-row{
  display:flex;flex-wrap:nowrap;gap:1.5rem;
}
.flow-card{
  position:relative;flex:1 1 0;min-width:200px;
  background:#fff;border:1px solid #e5e5e5;border-left:6px solid var(--grad-from);
  transition:.25s;
}
.flow-card:hover{ transform:translateY(-4px);box-shadow:0 .8rem 1.6rem rgba(0,0,0,.12); }

.flow-ribbon{
  position:absolute;top:0;left:-6px;background:var(--grad-from);
  color:#fff;font-size:.75rem;font-weight:700;
  padding:.25rem .75rem .25rem 1.25rem;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));
}
.flow-icon{
  width:72px;height:72px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to));
  color:#fff;font-size:1.8rem;
}



/*==================================================
=            7. フッター                            =
==================================================*/
footer{ background:#20232a;color:#bbb; }
footer a{ color:#ddd;text-decoration:none; }
footer a:hover{ color:#fff; }



/*==================================================
=            8. 汎用ユーティリティ                  =
==================================================*/
.object-fit-cover{ object-fit:cover; }
.img-fluid{ max-width:100%;height:auto; }

.text-truncate-2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;           /* ← 追加で警告解消 */
  overflow:hidden;
}






/******************************************************************
 *  YOUTOWN – Tablet Stylesheet  (768 – 991.98 px)
 *  ---------------------------------------------------------------
 *  デスクトップ（≥992px）用スタイルをベースに、
 *  タブレットで必要な上書き調整のみを記述しています。
 ******************************************************************/

@media (min-width:768px) and (max-width:991.98px){

  /*────────────────────────────
    1. ナビゲーションバー
  ────────────────────────────*/
  .navbar .navbar-brand{ font-size:1.20rem; }
  /* ハンバーガーは Bootstrap 標準で表示されるため特に追記なし */

  /*────────────────────────────
    2. 告知バー
  ────────────────────────────*/
  .notice-bar{
    height:36px;
    font-size:.9rem;
  }

  /*────────────────────────────
    3. ヒーローセクション
  ────────────────────────────*/
  .hero{
    height:68vh;               /* わずかに低く */
    min-height:440px;
    padding:9vh 1rem;
  }
  .hero h1{ font-size:2.0rem; }
  .hero p { font-size:1.05rem; }

  /*────────────────────────────
    4. カテゴリカード
  ────────────────────────────*/
  /* タブボタンの余白を微調整 */
  .category-tabs .nav-link{ padding:.4rem 1rem; }

  /* サークルアイコンやや縮小 */
  .cat-circle img{ width:90px; height:90px; }
  .cat-circle span{ font-size:.90rem; }

  /*────────────────────────────
    5. ニュースタイムライン
  ────────────────────────────*/
  /* サイズは PC と同一で十分なため変更なし */

  /*────────────────────────────
    6. ご注文フロー
  ────────────────────────────*/
  .flow-row{
    display:grid !important;          /* 2列グリッドに切り替え */
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
  }
  .flow-icon{ width:68px; height:68px; font-size:1.65rem; }

  /*────────────────────────────
    7. フッター
  ────────────────────────────*/
  footer{ font-size:.9rem; }
}





/******************************************************************
 *  YOUTOWN – Smartphone Stylesheet  (≤ 767.98 px)
 *  ---------------------------------------------------------------
 *  タブレット／PC 用スタイルを上書きする最小限の調整のみを記述。
 ******************************************************************/

@media (max-width:767.98px){

  /*────────────────────────────
    0. フォントスケール
  ────────────────────────────*/
  :root{ --fs-base-mobile:15px; }   /* Android 360–400px 幅を想定 */
  html{ font-size:var(--fs-base-mobile); }

  /*────────────────────────────
    1. ナビゲーションバー
  ────────────────────────────*/

  .navbar{
  min-height:56px;          /* ← 高さを 56px で固定 */
  }

  .navbar .navbar-brand{
    font-size:1.05rem;
    letter-spacing:0;
  }
  .navbar-nav .nav-link{
    padding:.5rem .75rem;
    margin:0 .5rem;
  }
  .navbar-toggler{ margin-left:auto; }   /* ハンバーガーを右端へ */

  /*────────────────────────────
    2. 告知バー
  ────────────────────────────*/
  .notice-bar{
    height:32px;
    font-size:.82rem;
    top:56px;     
    
  }

  /*────────────────────────────
    3. ヒーローセクション
  ────────────────────────────*/
  .hero{
    height:68vh;
    min-height:420px;
    padding:8vh 1rem;
  }
  .hero h1{ font-size:1.55rem; }
  .hero p { font-size:.9rem; }
  .hero-buttons{
    flex-direction:column;
    gap:.7rem;
  }
  .hero-buttons .btn{
    padding:.55rem 1.1rem;
    font-size:.9rem;
  }

  /*────────────────────────────
    4. カテゴリタブ & カード
  ────────────────────────────*/
  /* タブナビ横スクロール可 */
  .category-tabs{
    overflow-x:auto;
    white-space:nowrap;
  }
  .category-tabs .nav-link{
    display:inline-block;
    margin-right:.5rem;
    padding:.4rem .9rem;
  }

  /* カテゴリーアイコン縮小 */
  .cat-circle img{ width:80px; height:80px; }
  .cat-circle span{ font-size:.82rem; }

  /*────────────────────────────
    5. ニュースタイムライン
  ────────────────────────────*/
  .news-timeline .news-date,
  .news-timeline .news-text{ font-size:.85rem; }

  /*────────────────────────────
    6. ご注文フロー
  ────────────────────────────*/
  .flow-row{
    display:grid !important;       /* 1 列グリッド */
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .flow-icon{
    width:60px; height:60px;
    font-size:1.45rem;
  }
  .flow-card{ font-size:.92rem; }

  /*────────────────────────────
    7. フッター
  ────────────────────────────*/
  footer{ font-size:.8rem; }

  /*────────────────────────────
    8. 汎用ユーティリティ
  ────────────────────────────*/
  .img-fluid{ max-width:100%; height:auto; }

  /*────────── 極小端末 (≤575.98 px) ─────────*/
  @media (max-width:575.98px){
    /* コンテナ左右パディング縮小 */
    .container, section{
      padding-left:1rem;
      padding-right:1rem;
    }

    /* ナビリンクさらに縮小 */
    .navbar-nav .nav-link{ font-size:.9rem; }

    /* カテゴリーアイコンさらに縮小 */
    .cat-circle img{ width:70px; height:70px; }
    .cat-circle span{ font-size:.78rem; }

    /* フロー間隔を少し詰める */
    .flow-row{ gap:1rem; }
  }
}



/***************************************************************
 *  Catalog Search  –  Scoped Styles  (only under #catalog-search)
 ***************************************************************/

/* ── セクション全体 ─────────────────────────────── */
#catalog-search{
  background:#f5f7f9;                    /* 淡いグレー */
  padding:60px 1rem;
  overflow:hidden;
  position:relative;
}

/* 背景ドット模様（任意ファイル） */
#catalog-search .catalog-search-bg{
  position:absolute; inset:0;
  background:url("../img/texture/dots.svg") repeat;
  opacity:.06;
  pointer-events:none;
}

/* ── 見出し ─────────────────────────────────── */
#catalog-search h2{
  color:#212529;
}

/* ── カード ─────────────────────────────────── */
#catalog-search .catalog-card{
  max-width:640px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:.65rem;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

/* ── 検索フォーム ────────────────────────────── */
#catalog-search .form-control{
  background:#fff;
  color:#212529;
  border:1px solid #ced4da;
  border-radius:.45rem 0 0 .45rem;
}
#catalog-search .form-control::placeholder{
  color:#6c757d;
}

/* 検索ボタン（グラデ） */
#catalog-search .btn-gradient{
  border:none;
  border-radius:0 .45rem .45rem 0;
  color:#fff;
  background:linear-gradient(90deg,var(--grad-from),var(--grad-to));
}
#catalog-search .btn-gradient:hover{ opacity:.93; }

/* ── サブボタン（一覧・カテゴリ） ─────────────── */
#catalog-search .sub-btn{
  background:#fff;
  color:#0f766e;
  border:1px solid #0f766e;
  transition:.15s;
}
#catalog-search .sub-btn:hover{
  background:#0f766e;
  color:#fff;
}
#catalog-search .sub-btn:focus{
  box-shadow:0 0 0 .2rem rgba(15,118,110,.22);
}

/* disabled 状態（任意） */
#catalog-search .sub-btn.disabled,
#catalog-search .sub-btn:disabled{
  background:#fff;
  color:#6c757d;
  border:1px solid #ced4da;
  opacity:.45;
  cursor:not-allowed;
}

/* ── モバイル調整 ───────────────────────────── */
@media (max-width:767.98px){
  #catalog-search{ padding:50px 1rem; }
  #catalog-search .input-group-lg>.form-control,
  #catalog-search .input-group-lg>.btn{ font-size:1rem; }
}

/* ==================================================
   YOUTOWN refreshed public identity
================================================== */
:root{
  --yt-ink:#123b3a;
  --yt-ink-soft:#274f4c;
  --yt-green:#0f766e;
  --yt-green-dark:#064e3b;
  --yt-mint:#d1fae5;
  --yt-paper:#f8faf7;
  --grad-from:#0f766e;
  --grad-to:#064e3b;
}

body{
  color:#243131;
  background:var(--yt-paper);
}

.brand-logo{
  display:block;
  width:180px;
  max-width:46vw;
  height:auto;
}

.glass-nav{
  background:rgba(18,59,58,.88);
  letter-spacing:0;
  box-shadow:0 8px 24px rgba(18,59,58,.18);
}
.glass-nav.scrolled{background:rgba(18,59,58,.96);}
.navbar .nav-link::after{background:linear-gradient(90deg,var(--yt-mint),var(--yt-green));}
.navbar .btn-outline-warning{
  --bs-btn-color:#f8faf7;
  --bs-btn-border-color:rgba(248,250,247,.7);
}
.navbar .btn-outline-warning:hover{
  color:var(--yt-ink);
  background:var(--yt-mint);
  border-color:var(--yt-mint);
}

.notice-bar{
  background:#ecfdf5;
  color:#064e3b!important;
  border-bottom:1px solid #a7f3d0;
}

.youtown-hero{
  min-height:560px;
  height:72vh;
  padding:12vh 1rem;
}
.youtown-hero .hero-bg{
  object-position:center;
}
.hero-overlay{
  background:
    linear-gradient(90deg,rgba(18,59,58,.86) 0%,rgba(18,59,58,.72) 45%,rgba(18,59,58,.28) 100%),
    rgba(18,59,58,.22);
  backdrop-filter:none;
}
.hero-copy .lead{
  max-width:720px;
  color:rgba(255,255,255,.86);
}
.section-kicker{
  color:var(--yt-green);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:0;
}
.btn-brand-primary{
  background:var(--yt-green);
  border-color:var(--yt-green);
  color:#fff;
}
.btn-brand-primary:hover{
  background:var(--yt-green-dark);
  border-color:var(--yt-green-dark);
  color:#fff;
}
.btn-brand-ghost{
  color:#fff;
  border:2px solid rgba(255,255,255,.78);
  background:rgba(255,255,255,.08);
}
.btn-brand-ghost:hover{
  color:var(--yt-ink);
  background:#fff;
  border-color:#fff;
}
#news .btn-outline-primary{
  --bs-btn-color:var(--yt-green);
  --bs-btn-border-color:var(--yt-green);
  --bs-btn-hover-bg:var(--yt-green);
  --bs-btn-hover-border-color:var(--yt-green);
  --bs-btn-active-bg:var(--yt-green-dark);
  --bs-btn-active-border-color:var(--yt-green-dark);
}

.service-entry{
  background:linear-gradient(180deg,#f8faf7 0%,#eef6f2 100%);
}
.service-card{
  color:#243131;
  background:#fff;
  border:1px solid rgba(31,122,109,.12);
  border-radius:8px;
  padding:1.5rem;
  box-shadow:0 10px 28px rgba(18,59,58,.08);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.service-card:hover{
  color:#243131;
  transform:translateY(-4px);
  border-color:rgba(15,118,110,.42);
  box-shadow:0 18px 36px rgba(18,59,58,.14);
}
.service-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,var(--yt-green),var(--yt-green-dark));
  font-size:1.35rem;
}

.news-timeline .news-item .news-date{
  background:none;
  -webkit-text-fill-color:initial;
  color:var(--yt-green);
}
.news-dot .dot{background:var(--yt-green);}
.news-item:hover .news-text{color:var(--yt-green);}

.flow-section{background:#fff;}
.flow-card{
  border-left-color:var(--yt-green);
  border-radius:8px;
}
.flow-ribbon{background:var(--yt-green);}
.flow-icon{background:linear-gradient(135deg,var(--yt-green),var(--yt-green-dark));}

#catalog-search{
  background:#f8faf7;
}
#catalog-search h2{color:var(--yt-ink);}
#catalog-search .catalog-card{
  border-color:rgba(31,122,109,.12);
  box-shadow:0 16px 40px rgba(18,59,58,.1);
}
#catalog-search .btn-gradient{
  background:linear-gradient(90deg,var(--yt-green),var(--yt-green-dark));
}
#catalog-search .sub-btn{
  color:var(--yt-green);
  border-color:var(--yt-green);
}
#catalog-search .sub-btn:hover{
  background:var(--yt-green);
}

footer{
  background:#123b3a;
  color:rgba(255,255,255,.76);
}
footer a{color:rgba(255,255,255,.86);}
footer a:hover{color:#fff;}

.navbar .nav-link,
.navbar .btn{
  white-space:nowrap;
}

.public-nav{
  min-height:64px;
  background:rgba(18,59,58,.95);
  border-bottom:1px solid rgba(209,250,229,.2);
  box-shadow:0 10px 30px rgba(10,45,42,.18);
}
.public-nav .public-nav-shell{
  max-width:1320px;
}
.public-nav .navbar-brand{
  margin-right:clamp(1rem,2.8vw,2.4rem);
}
.public-nav .navbar-collapse{
  gap:.9rem;
}
.public-nav .public-nav-links{
  gap:.2rem;
}
.public-nav .nav-link{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  margin:0!important;
  padding:.48rem .78rem!important;
  color:rgba(255,255,255,.76);
  border-radius:999px;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:0;
}
.public-nav .nav-link::after{
  display:none;
}
.public-nav .nav-link:hover,
.public-nav .nav-link:focus{
  color:#fff;
  background:rgba(255,255,255,.09);
}
.public-nav .public-nav-actions{
  flex:0 0 auto;
  align-items:stretch;
}
.public-nav .nav-consult-btn,
.public-nav .nav-login-btn{
  min-height:42px;
  padding:.48rem 1rem;
  font-weight:900;
  letter-spacing:0;
}
.public-nav .nav-consult-btn{
  color:#fff;
  background:#159a70;
  border:1px solid #159a70;
  box-shadow:0 10px 22px rgba(21,154,112,.24);
}
.public-nav .nav-consult-btn:hover,
.public-nav .nav-consult-btn:focus{
  color:#fff;
  background:#0f766e;
  border-color:#0f766e;
}
.public-nav .nav-login-btn{
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.46);
}
.public-nav .nav-login-btn:hover,
.public-nav .nav-login-btn:focus{
  color:var(--yt-ink);
  background:#fff;
  border-color:#fff;
}
.public-nav + #notice .notice-bar{
  top:64px;
}
.public-notice{
  height:36px;
  padding-top:0!important;
  padding-bottom:0!important;
}
.public-notice-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  height:100%;
  width:100%;
  color:#064e3b!important;
  font-weight:800;
}
.public-notice-main{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.public-notice-sub{
  color:#0f766e;
}

@media (min-width:992px) and (max-width:1399.98px){
  .brand-logo{width:160px;}
  .public-nav .nav-link{
    font-size:.94rem;
    padding:.44rem .58rem!important;
  }
  .public-nav .nav-consult-btn,
  .public-nav .nav-login-btn{
    padding:.42rem .82rem;
    font-size:.86rem;
  }
}

@media (min-width:768px) and (max-width:1199.98px){
  .flow-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem;
  }
  .flow-card{
    min-width:0;
  }
}

@media (max-width:767.98px){
  .public-nav{
    min-height:56px;
  }
  .public-nav .navbar-collapse{
    padding-top:.8rem;
  }
  .public-nav .nav-link{
    justify-content:center;
    width:100%;
    min-height:42px;
  }
  .public-nav .public-nav-actions{
    margin-bottom:.35rem;
  }
  .public-nav + #notice .notice-bar{
    top:56px;
  }
  .public-notice-link{
    gap:.4rem;
    padding:0 .75rem;
    font-size:.78rem;
  }
  .public-notice-sub{
    display:none;
  }
  .brand-logo{width:150px;}
  .youtown-hero{
    min-height:520px;
    height:74vh;
  }
  .hero-copy{text-align:left!important;}
  .hero h1{font-size:1.72rem;}
  .hero p{font-size:.96rem;}
}

/* ==================================================
   YOUTOWN public design polish
================================================== */
:root{
  --yt-bg:#f4faf6;
  --yt-panel:#ffffff;
  --yt-line:#d8ebe3;
  --yt-line-strong:#b7ded0;
  --yt-accent:#159a70;
  --yt-accent-dark:#0f5f55;
  --yt-accent-soft:#e8f8f1;
  --yt-warm:#f6b84f;
  --yt-coral:#e16f61;
  --yt-shadow-sm:0 8px 24px rgba(18,59,58,.08);
  --yt-shadow-md:0 18px 48px rgba(18,59,58,.12);
}

body{
  color:#1f3330;
  background:
    linear-gradient(180deg,#f6fbf8 0%,#eef7f2 42%,#f8faf7 100%);
  text-rendering:optimizeLegibility;
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--yt-accent);
  font-size:.8rem;
  font-weight:900;
  letter-spacing:0;
}

.youtown-hero{
  min-height:620px;
  height:76vh;
  padding:13vh 1rem 10vh;
  isolation:isolate;
}
.hero-overlay{
  background:
    linear-gradient(90deg,rgba(10,43,40,.92) 0%,rgba(18,59,58,.78) 46%,rgba(18,59,58,.26) 100%),
    linear-gradient(180deg,rgba(18,59,58,.18),rgba(18,59,58,.52));
}
.hero-copy{
  max-width:1180px;
}
.hero-copy .section-kicker{
  width:max-content;
  padding:.4rem .7rem;
  color:#c8f7de!important;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
}
.hero h1{
  max-width:760px;
  font-size:3.15rem;
  line-height:1.18;
  letter-spacing:0;
}
.hero-copy .lead{
  max-width:680px;
  color:rgba(255,255,255,.88);
  font-weight:600;
  line-height:1.9;
}
.hero-buttons .btn{
  min-height:54px;
  border-radius:8px;
}
.btn-brand-primary{
  background:linear-gradient(135deg,var(--yt-accent),#0f766e);
  border-color:transparent;
  box-shadow:0 16px 34px rgba(21,154,112,.28);
}
.btn-brand-primary:hover,
.btn-brand-primary:focus{
  background:linear-gradient(135deg,#0f766e,var(--yt-accent-dark));
  transform:translateY(-1px);
}
.btn-brand-ghost{
  color:#fff;
  border-color:rgba(255,255,255,.64);
  background:rgba(255,255,255,.1);
}
.btn-brand-ghost:hover,
.btn-brand-ghost:focus{
  transform:translateY(-1px);
}
.hero-proof .badge{
  padding:.52rem .7rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px!important;
  background:rgba(255,255,255,.93)!important;
  color:#123b3a!important;
  font-size:.88rem;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}

.service-entry{
  padding:5.4rem 0!important;
  background:
    linear-gradient(180deg,#f7fbf8 0%,#eef8f2 100%);
}
.service-entry-head{
  display:grid;
  gap:1.45rem;
  justify-items:center;
  max-width:1120px;
  margin-right:auto;
  margin-left:auto;
  text-align:center;
}
.service-entry-copy{
  max-width:780px;
}
.service-entry-copy h2{
  font-size:clamp(2.15rem,4.4vw,3.45rem);
  line-height:1.22;
  word-break:keep-all;
  overflow-wrap:normal;
}
.service-entry-copy p{
  color:#546862;
  font-size:1.02rem;
  font-weight:700;
  line-height:1.85;
}
.top-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.1rem;
  max-width:1120px;
  margin:0 auto;
}
.top-choice-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:286px;
  padding:1.55rem;
  overflow:hidden;
  color:#123b3a;
  background:#fff;
  border:1px solid var(--yt-line);
  border-radius:8px;
  box-shadow:var(--yt-shadow-sm);
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.top-choice-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:var(--yt-accent);
}
.top-choice-card:hover,
.top-choice-card:focus{
  color:#123b3a;
  transform:translateY(-4px);
  border-color:var(--yt-line-strong);
  box-shadow:var(--yt-shadow-md);
}
.top-choice-card-primary{
  color:#fff;
  background:linear-gradient(135deg,#123b3a,#0f766e);
  border-color:#0f766e;
}
.top-choice-card-primary:hover,
.top-choice-card-primary:focus{
  color:#fff;
}
.top-choice-card-paid::before{
  background:#f0b84f;
}
.top-choice-tag{
  width:max-content;
  margin-bottom:1.1rem;
  padding:.32rem .52rem;
  color:#0f5f55;
  background:#e8f8f1;
  border:1px solid #cdeee2;
  border-radius:8px;
  font-size:.74rem;
  font-weight:900;
}
.top-choice-card-primary .top-choice-tag{
  color:#d1fae5;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
}
.top-choice-card-paid .top-choice-tag{
  color:#694300;
  background:#fff8e8;
  border-color:#f4d89b;
}
.top-choice-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  margin-bottom:1.1rem;
  color:#0f5f55;
  background:#e8f8f1;
  border:1px solid #cdeee2;
  border-radius:8px;
  font-size:1.45rem;
}
.top-choice-card-primary .top-choice-icon{
  color:#fff;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
}
.top-choice-card-paid .top-choice-icon{
  color:#694300;
  background:#fff8e8;
  border-color:#f4d89b;
}
.top-choice-card h3{
  margin-bottom:.72rem;
  font-size:1.22rem;
  font-weight:900;
  line-height:1.5;
}
.top-choice-card p{
  flex:1;
  margin:0 0 1.25rem;
  color:#546862;
  line-height:1.82;
}
.top-choice-card-primary p{
  color:rgba(255,255,255,.82);
}
.top-choice-link{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  color:#0f766e;
  font-weight:900;
}
.top-choice-card-primary .top-choice-link{
  color:#d1fae5;
}
.top-choice-card-paid .top-choice-link{
  color:#8a5a00;
}
.top-choice-subnav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.85rem;
  max-width:900px;
  margin:1.35rem auto 0;
  color:#60756e;
  font-size:.95rem;
  font-weight:800;
}
.top-choice-subnav a{
  color:#0f766e;
  text-decoration:none;
}
.top-choice-subnav a:hover{
  color:#064e3b;
  text-decoration:underline;
}
.service-entry-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem;
  width:100%;
}
.service-entry-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.48rem;
  min-height:52px;
  min-width:148px;
  padding:.72rem 1.05rem;
  color:#0f5f55;
  background:rgba(255,255,255,.92);
  border:1px solid var(--yt-line-strong);
  border-radius:8px;
  box-shadow:0 10px 24px rgba(18,59,58,.07);
  font-weight:900;
  text-decoration:none;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.service-entry-action i{
  font-size:1.05rem;
}
.service-entry-action:hover,
.service-entry-action:focus{
  color:#fff;
  background:var(--yt-accent);
  border-color:var(--yt-accent);
  box-shadow:0 16px 34px rgba(21,154,112,.18);
  transform:translateY(-2px);
}
.service-entry-action-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--yt-accent),#0f766e);
  border-color:transparent;
}
.service-entry-action-paid{
  color:#694300;
  background:#fff8e8;
  border-color:#f4d89b;
}
.service-entry-action-paid:hover,
.service-entry-action-paid:focus{
  color:#123b3a;
  background:#f6d37a;
  border-color:#f6d37a;
  box-shadow:0 16px 34px rgba(177,119,23,.18);
}
.service-entry h2,
#news h2,
.flow-section h2,
#catalog-search h2{
  color:#123b3a;
  font-weight:900!important;
  letter-spacing:0;
}
.service-entry .btn-outline-dark,
.service-entry .btn-outline-success{
  border-radius:8px!important;
  font-weight:800;
  background:#fff;
  border-color:var(--yt-line-strong);
  color:#0f5f55;
  box-shadow:0 6px 16px rgba(18,59,58,.05);
}
.service-entry .btn-outline-dark:hover,
.service-entry .btn-outline-success:hover{
  color:#fff;
  background:var(--yt-accent);
  border-color:var(--yt-accent);
}
.service-card{
  position:relative;
  display:flex!important;
  flex-direction:column;
  min-height:236px;
  padding:1.65rem;
  overflow:hidden;
  background:var(--yt-panel);
  border:1px solid var(--yt-line);
  border-radius:8px;
  box-shadow:var(--yt-shadow-sm);
}
.service-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--yt-accent),var(--yt-warm));
  opacity:.86;
}
.service-card:hover,
.service-card:focus{
  transform:translateY(-5px);
  border-color:var(--yt-line-strong);
  box-shadow:var(--yt-shadow-md);
}
.service-icon{
  width:52px;
  height:52px;
  color:var(--yt-accent-dark);
  background:var(--yt-accent-soft);
  border:1px solid var(--yt-line);
  border-radius:8px;
}
.service-card h3{
  color:#123b3a;
  line-height:1.5;
}
.service-card p{
  color:#546862;
  line-height:1.8;
}

#news{
  padding:5rem 0!important;
  background:#fff;
}
.news-timeline{
  max-width:760px!important;
  padding:1.75rem 1.75rem .75rem;
  background:#f8fbf8;
  border:1px solid var(--yt-line);
  border-radius:8px;
  box-shadow:var(--yt-shadow-sm);
}
.news-text a{
  color:#1f3330;
  font-weight:800;
  text-decoration:none;
}
.news-text a:hover{
  color:var(--yt-accent);
}

.flow-section{
  padding:5.2rem 0!important;
  background:
    linear-gradient(180deg,#eef8f2 0%,#f8faf7 100%);
}
.flow-row{
  align-items:stretch;
}
.flow-card{
  min-height:206px;
  border:1px solid var(--yt-line);
  border-top:4px solid var(--yt-accent);
  border-left:1px solid var(--yt-line);
  border-radius:8px;
  box-shadow:var(--yt-shadow-sm);
}
.flow-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--yt-shadow-md);
}
.flow-ribbon{
  top:.75rem;
  left:.75rem;
  padding:.28rem .58rem;
  background:#123b3a;
  border-radius:8px;
  clip-path:none;
  font-size:.72rem;
  letter-spacing:0;
}
.flow-icon{
  width:68px;
  height:68px;
  border-radius:8px;
  background:var(--yt-accent-soft);
  color:var(--yt-accent-dark);
  border:1px solid var(--yt-line);
}

#catalog-search{
  min-height:auto;
  padding:5.2rem 1rem;
  background:
    linear-gradient(135deg,#123b3a 0%,#0f5f55 58%,#0b4a43 100%)!important;
}
#catalog-search .catalog-search-bg{
  background:
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.4;
}
#catalog-search .section-kicker,
#catalog-search h2{
  color:#fff;
}
#catalog-search h2{
  margin-bottom:1.4rem!important;
}
#catalog-search .catalog-card{
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;
  box-shadow:0 24px 58px rgba(0,0,0,.2);
}
#catalog-search .form-control{
  border-color:var(--yt-line);
}
#catalog-search .btn-gradient{
  background:var(--yt-accent);
}
#catalog-search .sub-btn{
  border-radius:8px!important;
}

.public-conversion-strip{
  padding:4.4rem 1rem!important;
  background:
    linear-gradient(180deg,#f8faf7 0%,#e8f8f1 100%)!important;
}
.public-conversion-box{
  border-color:var(--yt-line-strong)!important;
  box-shadow:var(--yt-shadow-md)!important;
}
.public-conversion-actions .btn{
  border-radius:8px!important;
}

footer.site-footer{
  background:linear-gradient(180deg,#123b3a 0%,#0a2e2b 100%)!important;
}

@media (max-width:1199.98px){
  .hero h1{
    font-size:2.55rem;
  }
}

@media (max-width:767.98px){
  .youtown-hero{
    min-height:600px;
    height:auto;
    padding:8.5rem 1rem 4.4rem;
  }
  .hero h1{
    font-size:2rem;
  }
  .hero-copy .lead{
    font-size:.98rem;
  }
  .hero-buttons .btn{
    width:100%;
  }
  .hero-proof .badge{
    font-size:.78rem;
  }
  .service-entry,
  #news,
  .flow-section,
  #catalog-search{
    padding-top:3.8rem!important;
    padding-bottom:3.8rem!important;
  }
  .service-card{
    min-height:auto;
  }
  .service-entry-head{
    text-align:left;
    justify-items:start;
    width:100%;
    max-width:100%;
  }
  .service-entry-copy,
  .service-entry-actions{
    width:100%;
    max-width:100%;
  }
  .service-entry-copy h2{
    font-size:2.15rem;
    word-break:normal;
    overflow-wrap:normal;
  }
  .top-choice-grid{
    grid-template-columns:1fr;
    gap:.9rem;
  }
  .top-choice-card{
    min-height:auto;
    padding:1.3rem;
  }
  .top-choice-subnav{
    justify-content:flex-start;
    gap:.7rem;
  }
  .service-entry-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:.58rem;
  }
  .service-entry-action{
    width:100%;
    min-width:0;
    justify-content:flex-start;
  }
  .news-timeline{
    padding:1.25rem 1.15rem .4rem;
  }
}